@import "variables.css";
@import "base.css";
@import "header.css";
@import "buttons.css";
@import "hero.css";
@import "sections.css";
@import "cards.css";
@import "home.css";
@import "footer.css";
@import "utilities.css";
@import "sticky-cta.css";
@import "mobile.css";

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Main */
main {
  overflow: hidden;
}

.section {
  scroll-margin-top: 120px;
}

/* Utility */
.text-center {
  text-align: center;
}

.text-center p {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA */
.cta-section {
  text-align: center;
  padding: 60px 0;
}

.cta-section .hero-buttons,
.cta-section .hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Guides */
.guide-author,
.guide-meta {
  color: #666;
  font-size: 0.95rem;
  margin-top: 8px;
}

.guide-meta {
  margin-bottom: 20px;
}
/* Design polish: center main content sections */
.section > .container > h1,
.section > .container > h2,
.section > .container > p {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section > .container > h1,
.section > .container > h2 {
  margin-bottom: 24px;
}

.section > .container > p {
  font-size: 1.15rem;
  line-height: 1.8;
}
/* Common Situations Component */

.problem-type{
    font-size:14px;
    font-weight:700;
    color:#e53935;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:8px;
}

.tip{
    margin-top:18px;
    font-weight:600;
    color:#0B3C5D;
}
/* ==========================
   While Waiting Component
========================== */

.section-safe{
    background:#F3FAF5;
}
/* ==========================
   Hero Decision Zone
========================== */

.hero-service-list{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin:28px auto 34px;
  max-width:850px;
}

.hero-service-list span{
  background:rgba(255,255,255,0.14);
  color:#fff;
  border:1px solid rgba(255,255,255,0.22);
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  font-size:0.95rem;
}
/* ==========================
   Mobile Conversion Polish
========================== */

@media (max-width: 768px){
  .breadcrumbs{
    display:none;
  }

  .sticky-cta{
    transform:translateY(120%);
    opacity:0;
    pointer-events:none;
    transition:transform 0.25s ease, opacity 0.25s ease;
  }

  .sticky-cta.is-visible{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .hero{
    padding-top:54px;
    padding-bottom:54px;
  }

  .hero-text{
    margin-bottom:20px;
  }

  .hero-service-list{
    margin:22px auto 26px;
  }
}
/* ==========================
   HOW IT WORKS
========================== */

.steps-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:24px;

    margin-top:40px;

}

.step-card{

    background:#fff;

    border-radius:14px;

    padding:34px 26px;

    text-align:center;

    box-shadow:0 8px 24px rgba(0,0,0,.06);

    position:relative;

}

.step-number{

    position:absolute;

    top:18px;

    right:18px;

    width:34px;

    height:34px;

    border-radius:50%;

    background:#0B3C5D;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

}

.step-card h3{

    margin:18px 0 12px;

}

.step-card p{

    color:#555;

    line-height:1.6;

}

@media(max-width:768px){

    .step-card{

        padding:28px 20px;

    }

}
/* ==========================
   Trust Section
========================== */

.trust-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
    margin-top:50px;
}

.trust-card{
    background:#fff;
    padding:35px 30px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.trust-card:hover{
    transform:translateY(-5px);
}

.trust-icon{
    font-size:42px;
    margin-bottom:18px;
}

.trust-card h3{
    color:#0B3C5D;
    margin-bottom:12px;
}

.trust-card p{
    color:#666;
}
/* ==========================
   BREADCRUMBS
========================== */

.breadcrumbs {
  padding: 24px 0;
  font-size: 15px;
}

.breadcrumbs a {
  color: #0B3C5D;
  text-decoration: none;
  font-weight: 600;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

/* ==========================
   Outline Buttons
========================== */

.btn-outline{
    display:inline-block;
    margin-top:20px;
    padding:12px 22px;
    background:#ffffff;
    color:#0B3C5D;
    border:2px solid #0B3C5D;
    border-radius:8px;
    text-decoration:none;
    font-weight:700;
    transition:.25s;
}

.btn-outline:hover{
    background:#0B3C5D;
    color:#ffffff;
}
/* ================================
   DECISION ZONE HERO
================================ */

.decision-hero {
  background: linear-gradient(135deg, #0b3c5d 0%, #082f49 100%);
  color: #fff;
  padding: 72px 0;
}

.decision-hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.decision-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}

.decision-hero h1 {
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.05;
  margin-bottom: 22px;
}

.decision-hero p {
  font-size: 19px;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
  margin-bottom: 28px;
}

.decision-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.decision-actions .btn {
  font-size: 18px;
  padding: 15px 24px;
}

.decision-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.decision-trust span {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}

.decision-card {
  background: #fff;
  color: #222;
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}

.decision-card h2 {
  color: #0b3c5d;
  font-size: 28px;
  margin-bottom: 14px;
}

.decision-card p {
  color: #444;
  font-size: 16px;
  margin-bottom: 20px;
}

.decision-list {
  list-style: none;
  margin: 0 0 24px 0;
  padding: 0;
}

.decision-list li {
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 700;
}

.decision-list li:last-child {
  border-bottom: none;
}

.decision-card-note {
  background: #f5f7fa;
  border-left: 5px solid #e53935;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 15px;
  color: #333;
}

/* MOBILE */

@media (max-width: 850px) {
  .decision-hero {
    padding: 52px 0;
  }

  .decision-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .decision-actions {
    flex-direction: column;
  }

  .decision-actions .btn {
    width: 100%;
    text-align: center;
  }

  .decision-card {
    padding: 24px;
  }
}
.hero-highlight{
    display:block;
    margin-top:14px;
    font-size:.72em;
    font-weight:700;
    color:#FFD54A;
}
/* ================================
   GRUAS24 DESIGN SYSTEM V2
================================ */

:root{
  --g24-navy:#062f4f;
  --g24-blue:#0B3C5D;
  --g24-red:#E53935;
  --g24-yellow:#FFD54A;
  --g24-light:#F5F8FC;
  --g24-border:#E5EAF0;
  --g24-text:#1F2933;
  --g24-muted:#5F6B7A;
  --g24-radius:18px;
  --g24-shadow:0 14px 40px rgba(6,47,79,.12);
  --g24-shadow-hover:0 22px 55px rgba(6,47,79,.18);
}

/* Global polish */

body{
  color:var(--g24-text);
  background:#fff;
}

.container{
  max-width:1180px;
}

/* Hero upgrade */

.hero{
  background:
    radial-gradient(circle at top right, rgba(255,213,74,.18), transparent 32%),
    linear-gradient(135deg, #062f4f 0%, #0B3C5D 55%, #08304f 100%);
  color:#fff;
  padding:86px 0 78px;
  position:relative;
}

.hero h1{
  font-size:clamp(38px, 6vw, 68px);
  line-height:1.02;
  letter-spacing:-1.5px;
  margin-bottom:22px;
}

.hero-text{
  max-width:760px;
  font-size:1.25rem;
  line-height:1.7;
  color:rgba(255,255,255,.92);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Button upgrade */

.btn{
  border-radius:999px;
  padding:15px 26px;
  font-weight:800;
  box-shadow:0 10px 25px rgba(0,0,0,.14);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.2);
}

.btn-primary{
  background:var(--g24-red);
  color:#fff;
}

.btn-secondary{
  background:#fff;
  color:var(--g24-blue);
}

/* Section rhythm */

.section{
  padding:78px 0;
}

.section-light{
  background:var(--g24-light);
}

.section-title{
  max-width:820px;
  margin:0 auto 44px;
  text-align:center;
}

.section-title h2{
  font-size:clamp(30px, 4vw, 46px);
  line-height:1.12;
  letter-spacing:-.8px;
  color:var(--g24-navy);
}

.section-title p{
  color:var(--g24-muted);
  font-size:1.12rem;
  line-height:1.75;
}

/* Card upgrade */

.card,
.trust-card,
.step-card{
  border:1px solid var(--g24-border);
  border-radius:var(--g24-radius);
  box-shadow:var(--g24-shadow);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.card:hover,
.trust-card:hover,
.step-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--g24-shadow-hover);
  border-color:rgba(11,60,93,.22);
}

.card h3,
.trust-card h3,
.step-card h3{
  color:var(--g24-navy);
  letter-spacing:-.3px;
}

.card p,
.trust-card p,
.step-card p{
  color:var(--g24-muted);
  line-height:1.7;
}

.card a,
.text-link{
  color:var(--g24-red);
  font-weight:800;
  text-decoration:none;
}

/* Icons */

.service-icon,
.trust-icon{
  width:54px;
  height:54px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(229,57,53,.12), rgba(255,213,74,.18));
  font-size:28px;
}

/* CTA box */

.cta-box{
  background:linear-gradient(135deg, var(--g24-navy), var(--g24-blue));
  color:#fff;
  border-radius:26px;
  padding:54px 34px;
  text-align:center;
  box-shadow:var(--g24-shadow-hover);
}

.cta-box h2{
  color:#fff;
  font-size:clamp(30px, 4vw, 46px);
}

.cta-box p{
  color:rgba(255,255,255,.9);
  max-width:720px;
  margin:12px auto 26px;
}

/* Header polish */

.site-header{
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* Breadcrumb polish */

.breadcrumbs{
  background:#fff;
  border-bottom:1px solid var(--g24-border);
}

/* Mobile */

@media(max-width:768px){
  .hero{
    padding:58px 0 62px;
  }

  .hero h1{
    font-size:42px;
  }

  .hero-text{
    font-size:1.08rem;
  }

  .hero-actions,
  .hero-buttons{
    flex-direction:column;
    gap:14px;
  }

  .hero-actions .btn,
  .hero-buttons .btn{
    width:100%;
    text-align:center;
  }

  .section{
    padding:56px 0;
  }

  .card,
  .trust-card,
  .step-card{
    border-radius:16px;
  }

  .cta-box{
    padding:42px 22px;
  }
}