/* ================= Theme: navy + orange (2026) ================= */
:root{
  --navy:#0E1B3D;--navy-2:#16264F;--navy-3:#22346A;
  --orange:#FF6A1A;--orange-d:#E85A0C;--orange-soft:#FFF1E8;
  --blue:#3B82F6;--blue-soft:#EAF2FF;
  --bg:#F6F7FB;--card:#FFFFFF;--ink:#0E1B3D;--muted:#5B6787;--line:#E4E8F2;
  --wa:#16A34A;--wa-d:#12873D;
  --red:var(--orange);--red-d:var(--orange-d);--soft:var(--blue-soft);
  --r:24px;--shadow:0 1px 2px rgba(14,27,61,.04),0 12px 32px -12px rgba(14,27,61,.14)
}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;background:var(--bg);color:var(--ink)}
h1,h2,h3,.logo,.track span,.rt{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;letter-spacing:-.035em}
h3{font-weight:700;letter-spacing:-.02em}
::selection{background:var(--orange)}
.progress{background:var(--orange)}

/* top bar + header */
.topbar{background:var(--navy);font-size:13px}
.topbar a{color:var(--orange);font-weight:700}
header{background:rgba(246,247,251,.85);border:0;backdrop-filter:saturate(1.6) blur(14px)}
header.scrolled{box-shadow:0 1px 0 var(--line)}
.logo{color:var(--navy);font-size:20px}
.logo small{color:var(--muted)}
nav{background:#fff;border-radius:999px;padding:6px;box-shadow:var(--shadow)}
nav a{margin:0;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);transition:background .25s,color .25s}
nav a:after{display:none}
nav a:hover{color:var(--navy)}
nav a.active{background:var(--navy);color:#fff}

/* hero: big rounded navy panel */
.hero{background:var(--navy);color:#fff;margin:8px 16px 0;border-radius:32px;padding:72px 0 36px;position:relative;overflow:hidden;isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 70%)}
.hero h1{font-size:clamp(40px,6vw,80px);line-height:1.02}
.hero h1 .w:nth-last-child(-n+4) span{color:var(--orange)}
.hero .lead{color:#B8C2DC}
.status{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;padding:7px 14px 7px 12px;border-radius:999px}
.status i,.status i:after{background:#4ADE80}
.scene-wrap{background:#fff;border-radius:28px;padding:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.facts{border-top:1px solid rgba(255,255,255,.12)}
.facts b{color:#fff}
.facts span{color:#B8C2DC}
.facts>div{padding-right:16px}
.facts>div:not(:last-child){border-right:1px solid rgba(255,255,255,.08)}
.facts>div{padding-left:16px}.facts>div:first-child{padding-left:0}

/* buttons */
.btn{box-shadow:none}
.btn-red{background:var(--orange);color:#fff;box-shadow:0 12px 28px -12px rgba(255,106,26,.8)}
.btn-red:before{background:var(--orange-d)}
.btn-red .bi svg{stroke:var(--orange)}
.btn-wa{background:var(--wa)}.btn-wa:before{background:var(--wa-d)}
.btn-wa .bi svg{fill:var(--wa)}
.hero .btn-wa{background:#fff;color:var(--navy)}.hero .btn-wa:before{background:#EEF2FA}
.hero .btn-wa .bi{background:var(--wa)}.hero .btn-wa .bi svg{fill:#fff}

/* marquee: flat, navy on orange */
.marquee{background:var(--orange);color:var(--navy);transform:none;margin:16px;border-radius:20px;padding:18px 0}
.track svg{fill:var(--navy)}

/* sections */
section{padding:96px 0}
.alt{background:transparent}
.alt>.wrap{background:#fff;border-radius:32px;padding:56px;box-shadow:var(--shadow)}
.head h2,section h2{font-size:clamp(32px,4.2vw,54px);line-height:1.05}
.head p,.split-head p{color:var(--muted)}
.wave{display:none}

/* cards */
.grid{gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 24px 48px -20px rgba(14,27,61,.3)}
.card .num{color:var(--muted);font-weight:600}
.chip{background:var(--orange-soft);color:var(--orange);border-radius:18px}
.card:hover .chip{background:var(--orange);color:#fff}
.card .act a{background:var(--orange-soft);color:var(--orange-d)}
.card .act a:last-child{background:#E8F7EE;color:var(--wa-d)}
.pin{stroke:var(--orange)}

/* lists, steps, process, before/after */
.list li{border-color:var(--line)}
.list li b{color:var(--orange-d)}
.pstep span{border-color:var(--orange);color:var(--orange)}
.pstep.lit span{background:var(--orange);color:#fff;box-shadow:0 0 0 6px var(--orange-soft)}
.pline path{stroke:var(--orange)}
.ba{border-radius:var(--r);box-shadow:var(--shadow);border:0}
.ba-h{background:var(--orange)}.ba-h:after{background:var(--orange)}
.steps li:before{border-color:var(--orange);color:var(--orange)}

/* page headers on inner pages */
.page-head{background:var(--navy);color:#fff;margin:8px 16px 0;border-radius:32px;padding:72px 0;border:0}
.page-head p{color:#B8C2DC}

/* forms */
input,select,textarea{border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:14px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--orange);outline-offset:1px;background:#fff}
.map{border-radius:var(--r);border:0;box-shadow:var(--shadow)}

/* CTA band */
.band{background:var(--orange);color:var(--navy);border-radius:32px}
.band p{color:rgba(14,27,61,.75)}
.band .btn.on-red.btn-red{background:var(--navy);color:#fff}
.band .btn.on-red.btn-red .bi{background:#fff}.band .btn.on-red.btn-red .bi svg{stroke:var(--navy)}
.band .btn.on-red.btn-red:before{background:var(--navy-3)}
.band .btn-wa{background:#fff;color:var(--navy)}.band .btn-wa .bi{background:var(--wa)}.band .btn-wa .bi svg{fill:#fff}

/* footer */
footer{background:var(--navy);color:#fff;border:0;margin:16px;border-radius:32px;padding:56px 0 40px}
footer p,footer a,.copy{color:#B8C2DC}
footer a:hover{color:var(--orange)}
footer h4{color:#fff}

/* floating buttons */
.float a.c{background:var(--orange)}.float .c:after{border-color:var(--orange)}
.mbar{padding:10px;gap:10px;background:rgba(246,247,251,.9);backdrop-filter:blur(10px)}
.mbar a{border-radius:999px;padding:14px}
.mbar .c{background:var(--orange);animation:none}

@media(max-width:860px){
  nav{border-radius:20px;top:76px;left:16px;right:16px;padding:8px}
  nav a{border-radius:12px}
  .hero,.page-head{margin:6px 10px 0;border-radius:24px;padding:48px 0 28px}
  .alt>.wrap{padding:32px 20px;border-radius:24px;margin:0 10px;width:auto}
  .facts>div{border:0!important;padding-left:0}
  footer{margin:10px;padding-bottom:100px}
  .band{margin:0 10px 10px}
}

/* mobile header */
.menu{width:44px;height:44px;padding:0;border:0;border-radius:14px;background:var(--navy);display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.menu i{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .3s,opacity .3s}
.menu.x i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu.x i:nth-child(2){opacity:0}
.menu.x i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:860px){
  .menu{display:flex}
  header .wrap{height:64px;gap:12px;padding:0 16px}
  .logo{gap:10px;min-width:0;font-size:16px;line-height:1.15}
  .logo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .logo small{font-size:10px;margin-top:2px}
  .logo-mark{width:38px;height:38px}
  nav{top:70px}
  .topbar .wrap{justify-content:center;gap:6px 14px;font-size:12px}
}

/* areas by zone */
.zone{background:#fff;border-radius:var(--r);padding:28px;box-shadow:var(--shadow);margin-bottom:18px}
.zone h3{display:flex;align-items:center;gap:10px;font-size:22px;margin-bottom:16px}
.zone h3 .pin{margin:0}
.zone h3 span{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted);background:var(--bg);padding:5px 12px;border-radius:999px;letter-spacing:0}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pills a{padding:10px 16px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:14px;font-weight:600;transition:background .25s,color .25s,transform .25s}
.pills a:hover{background:var(--orange);color:#fff;border-color:var(--orange);transform:translateY(-2px)}
.zone-note{margin-top:24px;color:var(--muted)}.zone-note a{color:var(--orange-d);font-weight:700}
.foot-areas{line-height:1.8;margin-top:24px}
