:root{
    --navy:#0b1c3f;
    --navy-deep:#081530;
    --gold:#e7a325;
    --gold-soft:#f4c968;
    --ink:#12203d;
    --grey-50:#f6f7fb;
    --grey-100:#eef0f6;
    --grey-400:#8891a6;
    --grey-600:#5a6480;
    --white:#ffffff;
    --line:#e3e6ef;
    --green:#1f9d63;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
 
  body{font-family:'Inter', sans-serif; color:var(--ink); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{font-family:'Sora', sans-serif; font-weight:700; color:var(--navy); line-height:1.2;}
  a{text-decoration:none; color:inherit;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  ul{list-style:none;}

  /* ---------- Header ---------- */
  header{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
  .nav-row{display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
  .logo{display:flex; align-items:center; gap:10px; font-family:'Sora'; font-weight:800; font-size:19px; color:var(--navy);}
  .logo span{color:var(--gold);}
  nav.main-nav{display:flex; gap:34px; font-size:15px; font-weight:500; color:var(--ink);}
  nav.main-nav a.active{color:var(--gold); font-weight:600;}
  .nav-cta{display:flex; align-items:center; gap:18px;}
  .phone{font-weight:700; color:var(--navy); font-size:15px;}
  .btn{display:inline-block; padding:12px 24px; border-radius:4px; font-weight:600; font-size:14px; transition:transform .15s ease, box-shadow .15s ease; border:none; cursor:pointer;}
  .btn-gold{background:var(--gold); color:var(--navy-deep);}
  .btn-gold:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(231,163,37,.35);}
  .btn-outline{border:1.5px solid var(--navy); color:var(--navy); background:transparent;}
  .btn-outline:hover{background:var(--navy); color:var(--white);}
  .btn-ghost-light{border:1.5px solid rgba(255,255,255,.4); color:var(--white);}
  .btn-ghost-light:hover{background:rgba(255,255,255,.12);}

  /* ---------- Hero ---------- */
  .page-hero{background:linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 55%, #142a56 100%); position:relative; overflow:hidden; padding:64px 0 76px; text-align:center;}
  .page-hero::after{content:""; position:absolute; right:-100px; top:-160px; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, rgba(231,163,37,.16) 0%, rgba(231,163,37,0) 70%);}
  .crumb{display:flex; align-items:center; justify-content:center; gap:8px; color:rgba(255,255,255,.55); font-size:13px; margin-bottom:22px; position:relative;}
  .crumb a{color:var(--gold-soft);}
  .page-hero h1{color:var(--white); font-size:42px; max-width:640px; margin:0 auto; position:relative;}
  .page-hero p.lede{color:rgba(255,255,255,.72); font-size:17px; max-width:560px; margin:18px auto 0; position:relative;}
  .hero-actions{display:flex; justify-content:center; gap:14px; margin-top:30px; flex-wrap:wrap; position:relative;}

  /* ---------- Overview strip ---------- */
  .overview{border-bottom:1px solid var(--line);}
  .overview .wrap{display:grid; grid-template-columns:repeat(4,1fr); padding:34px 32px;}
  .ov-item{padding:0 22px; border-left:1px solid var(--line); text-align:left;}
  .ov-item:first-child{border-left:none; padding-left:0;}
  .ov-item .num{font-family:'Sora'; font-weight:800; font-size:26px; color:var(--navy);}
  .ov-item .label{font-size:13px; color:var(--grey-600); margin-top:4px;}

  /* ---------- Timeline ---------- */
  .process{padding:60px 0;}
  .section-head{max-width:600px; margin:0 auto 60px; text-align:center;}
  .eyebrow{font-size:13px; font-weight:600; color:var(--gold); margin-bottom:14px;}
  .section-head .eyebrow{display:flex; justify-content:center;}
  .section-head h2{font-size:32px;}
  .section-head p{color:var(--grey-600); margin-top:12px; font-size:15.5px;}

  .steps{position:relative; max-width:820px; margin:0 auto;}
  .steps::before{content:""; position:absolute; left:27px; top:12px; bottom:12px; width:2px; background:var(--line);}
  .step-row{display:grid; grid-template-columns:56px 1fr; gap:26px; padding-bottom:52px; position:relative;}
  .step-row:last-child{padding-bottom:0;}
  .step-num{
    width:56px; height:56px; border-radius:50%; background:var(--navy); color:var(--gold-soft);
    display:flex; align-items:center; justify-content:center; font-family:'Sora'; font-weight:800; font-size:19px;
    position:relative; z-index:1; flex:none;
  }
  .step-body{padding-top:8px;}
  .step-body .tag{font-size:12px; font-weight:700; color:var(--gold); letter-spacing:.02em; margin-bottom:6px;}
  .step-body h3{font-size:19px; margin-bottom:8px;}
  .step-body p{font-size:14.5px; color:var(--grey-600); max-width:560px;}

  /* ---------- Two-col highlight ---------- */
  .highlight{background:var(--grey-50); padding:60px 0;}
  .hl-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
  .hl-media{border-radius:8px; overflow:hidden;}
  .hl-media img{width:100%; height:400px; object-fit:cover;}
  .hl-text h2{font-size:30px; margin-bottom:18px; max-width:440px;}
  .hl-text p{color:var(--grey-600); font-size:15.5px; margin-bottom:24px; max-width:460px;}
  .hl-list li{display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; font-size:14.5px; color:var(--ink);}
  .hl-list li svg{width:18px; height:18px; flex:none; margin-top:2px; stroke:var(--gold);}

  /* ---------- Why it works ---------- */
  .why{padding:60px 0;}
  .why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .why-card{border:1px solid var(--line); border-radius:8px; padding:30px 26px;}
  .why-card .icon{width:44px; height:44px; border-radius:8px; background:var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
  .why-card .icon svg{width:20px; height:20px; stroke:var(--gold-soft);}
  .why-card h3{font-size:17px; margin-bottom:8px;}
  .why-card p{font-size:14px; color:var(--grey-600);}

  /* ---------- CTA ---------- */
  .cta{background:linear-gradient(120deg, var(--navy-deep), var(--navy)); padding:64px 0; margin:0 32px 32px; border-radius:10px; max-width:1180px; margin-left:auto; margin-right:auto;}
  .cta .wrap{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding:0 48px;}
  .cta h2{color:var(--white); font-size:28px; max-width:420px;}
  .cta .actions{display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
  .cta .phone-lg{color:var(--white); font-size:20px; font-weight:700;}

  /* ---------- Footer ---------- */
  footer{background:var(--navy-deep); color:rgba(255,255,255,.6); padding:56px 0 26px; margin-top:24px; font-size:13.5px;}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1);}
  .foot-grid h5{color:var(--white); font-size:14px; margin-bottom:16px; font-family:'Sora';}
  .foot-grid ul li{margin-bottom:10px;}
  .foot-bottom{padding-top:22px; display:flex; justify-content:space-between;}

  @media (max-width:900px){
    .overview .wrap{grid-template-columns:repeat(2,1fr); row-gap:24px;}
    .steps::before{left:23px;}
    .step-row{grid-template-columns:48px 1fr; gap:18px;}
    .step-num{width:48px; height:48px; font-size:16px;}
    .hl-grid{grid-template-columns:1fr;}
    .why-grid{grid-template-columns:1fr;}
    nav.main-nav{display:none;}
    .foot-grid{grid-template-columns:repeat(2,1fr);}
    .page-hero h1{font-size:30px;}
  }