@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/archivo-700.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/archivo-800.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/ibm-plex-mono-500.woff2') format('woff2');}

:root{
  --navy:#16264A;
  --navy-2:#0E1A34;
  --blue:#345DAE;
  --cyan:#22C0D6;
  --ink:#161C29;
  --muted:#5A6478;
  --line:#DEE4EE;
  --tint:#F3F6FB;
  --white:#fff;
  --max:1180px;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 28px; }

/* ---- utility type ---- */
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
}
.eyebrow.on-dark{ color:var(--cyan); }
h1,h2,h3{ font-family:var(--display); font-weight:800; letter-spacing:-.02em; margin:0; }
h2{ font-size:clamp(28px,4vw,44px); line-height:1.08; color:var(--navy); }
h3{ font-size:20px; font-weight:700; letter-spacing:-.01em; }
.lede{ color:var(--muted); font-size:clamp(17px,1.5vw,19px); max-width:60ch; }
section{ padding:clamp(64px,8vw,110px) 0; }

/* ---- focus + motion floor ---- */
:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation:none !important; }
}

/* ---- nav ---- */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(14,26,52,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.10);
}
.nav .wrap{ display:flex; align-items:center; gap:28px; height:66px; }
.nav img{ width:104px; }
.nav nav{ margin-left:auto; display:flex; align-items:center; gap:26px; }
.nav nav a{
  color:#C6D2E8; text-decoration:none; font-size:14px; font-weight:500;
}
.nav nav a:hover{ color:#fff; }
.btn{
  display:inline-block; font-family:var(--display); font-weight:700; font-size:15px;
  letter-spacing:.01em; text-decoration:none; border:none; cursor:pointer;
  padding:13px 22px; border-radius:4px; background:var(--cyan); color:var(--navy-2);
  transition:background .18s ease, transform .18s ease;
}
.btn:hover{ background:#48d3e6; transform:translateY(-1px); }
.btn.ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); }
.btn.ghost:hover{ background:rgba(255,255,255,.08); }
.btn.solid{ background:var(--navy); color:#fff; }
.btn.solid:hover{ background:#1d3161; }
@media (max-width:860px){ .nav nav a{ display:none; } }

/* ---- hero ---- */
.hero{ position:relative; background:var(--navy-2); color:#fff; overflow:hidden; padding:0; }
.hero .bgimg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 50%; opacity:.36;
}
.hero .veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,26,52,.80) 0%, rgba(14,26,52,.90) 62%, rgba(14,26,52,.98) 100%);
}
.hero .wrap{ position:relative; padding-top:clamp(70px,9vw,120px); padding-bottom:0; }
.hero h1{
  font-size:clamp(38px,6.2vw,72px); line-height:1.02; color:#fff;
  max-width:16ch; margin:20px 0 0;
}
.hero h1 em{ font-style:normal; color:var(--cyan); }
.hero p{ color:#C6D2E8; font-size:clamp(17px,1.6vw,20px); max-width:56ch; margin:22px 0 0; }
.hero .actions{ display:flex; flex-wrap:wrap; gap:14px; margin:34px 0 clamp(56px,7vw,84px); }

/* spec rail */
.rail{
  position:relative; border-top:1px solid rgba(255,255,255,.16);
  display:grid; grid-template-columns:repeat(5,1fr);
}
.rail div{ padding:22px 20px 30px 0; }
.rail .v{ font-family:var(--display); font-weight:700; font-size:clamp(18px,2vw,24px); color:#fff; }
.rail .k{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:#8FA3C6; margin-top:6px; line-height:1.4;
}
@media (max-width:900px){ .rail{ grid-template-columns:repeat(2,1fr); } }

/* ---- signature: the switch ---- */
.switch-sec{ background:var(--tint); }
.switch-head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:26px; }
.tabs{
  display:inline-flex; background:#fff; border:1px solid var(--line);
  border-radius:6px; padding:5px; gap:4px;
}
.tabs button{
  font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.01em;
  border:none; background:transparent; color:var(--muted); cursor:pointer;
  padding:11px 18px; border-radius:4px; transition:background .2s ease, color .2s ease;
}
.tabs button[aria-selected="true"]{ background:var(--navy); color:#fff; }

.compare{ margin-top:38px; border-top:1px solid var(--line); }
.crow{
  display:grid; grid-template-columns:180px 1fr; gap:32px;
  padding:26px 0; border-bottom:1px solid var(--line); align-items:start;
}
.crow .label{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy); padding-top:5px;
}
.crow .val{ display:grid; }
.crow .val > div{
  grid-area:1/1; transition:opacity .28s ease, transform .28s ease, visibility 0s;
}
.crow .val .hub{ color:var(--muted); }
.crow .val .urlo strong{ font-weight:600; color:var(--ink); }
.crow .val .urlo{ color:var(--muted); }
.crow .val .off{ opacity:0; transform:translateY(6px); pointer-events:none; visibility:hidden; transition-delay:0s,0s,.28s; }
.tally{
  margin-top:30px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.tally .big{ font-family:var(--display); font-weight:800; font-size:clamp(30px,4vw,46px); color:var(--navy); letter-spacing:-.02em; }
.tally .note{ color:var(--muted); max-width:48ch; }
@media (max-width:700px){ .crow{ grid-template-columns:1fr; gap:8px; } }

/* ---- system ---- */
.grid5{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:44px; }
.card{
  border:1px solid var(--line); border-radius:8px; padding:22px 20px 24px; background:#fff;
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow:0 10px 30px rgba(22,38,74,.09); transform:translateY(-2px); }
.card .shot{ height:120px; display:flex; align-items:center; justify-content:center; }
.card .shot img{ max-height:120px; width:auto; mix-blend-mode:multiply; }
.card h3{ font-size:15.5px; margin-top:18px; color:var(--navy); }
.card p{ margin:6px 0 0; font-size:14.5px; color:var(--muted); line-height:1.5; }
@media (max-width:1000px){ .grid5{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid5{ grid-template-columns:1fr; } }

/* ---- transport (dark band) ---- */
.dark{ background:var(--navy); color:#fff; }
.dark h2{ color:#fff; }
.dark .lede{ color:#B9C7E0; }
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,80px); align-items:center; }
.specs{ display:grid; gap:2px; background:rgba(255,255,255,.14); border-radius:8px; overflow:hidden; }
.specs div{ background:var(--navy); padding:24px 26px; }
.specs .v{ font-family:var(--display); font-weight:800; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.02em; }
.specs .k{ font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:#8FA3C6; margin-top:7px; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }

/* ---- use cases ---- */
.uc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px; }
.uc{ border:1px solid var(--line); border-radius:8px; padding:26px 26px 28px; }
.uc .seg{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
}
.uc h3{ margin-top:12px; color:var(--navy); font-size:18px; }
.uc p{ margin:8px 0 0; color:var(--muted); font-size:15.5px; }
@media (max-width:760px){ .uc-grid{ grid-template-columns:1fr; } }

/* ---- why amt ---- */
.why{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px; }
.why .n{ font-family:var(--display); font-weight:800; font-size:22px; color:var(--navy); letter-spacing:-.01em; }
.why p{ color:var(--muted); margin:8px 0 0; font-size:15.5px; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.chip{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line); background:var(--tint); color:var(--navy);
  padding:9px 14px; border-radius:100px;
}
@media (max-width:760px){ .why{ grid-template-columns:1fr; gap:20px; } }

/* ---- form ---- */
.cta-sec{ background:var(--navy-2); color:#fff; }
.cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,72px); }
.cta-grid h2{ color:#fff; }
.cta-grid .lede{ color:#B9C7E0; margin-top:16px; }
.next{ margin-top:34px; list-style:none; padding:0; counter-reset:step; }
.next li{
  position:relative; padding:0 0 0 44px; margin-bottom:18px;
  font-size:15.5px; color:#C6D2E8; line-height:1.5;
}
.next li:last-child{ margin-bottom:0; }
.next li strong{ display:block; color:#fff; font-weight:600; margin-bottom:2px; }
.next li:before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:1px; width:28px; height:28px; border-radius:50%;
  background:rgba(34,192,214,.14); border:1px solid rgba(34,192,214,.55); color:var(--cyan);
  font-family:var(--mono); font-size:12px; text-align:center; line-height:27px;
}
form{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13); border-radius:10px; padding:28px; }
.field{ margin-bottom:16px; }
.field label{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:#9FB0CE; margin-bottom:7px;
}
.field input, .field select{
  width:100%; font-family:var(--body); font-size:15.5px; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:5px; padding:12px 13px;
}
.field input::placeholder{ color:#7F90AE; }
.field select option{ color:#16264A; }
.two-up{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
form .btn{ width:100%; margin-top:6px; cursor:pointer; border:0; font-family:var(--display); }
form .btn[disabled]{ opacity:.6; cursor:progress; }
form .fine{ font-size:13px; color:#8FA3C6; margin:14px 0 0; line-height:1.5; }
.field input:focus, .field select:focus, .consent input:focus{ outline:2px solid var(--cyan); outline-offset:1px; }
.field .msg{ display:none; font-size:12.5px; color:#FFB4B4; margin-top:6px; }
.field.bad input, .field.bad select{ border-color:#E97D7D; }
.field.bad .msg{ display:block; }
.consent{ display:flex; gap:11px; align-items:flex-start; margin:4px 0 18px; }
.consent input{ margin-top:3px; width:16px; height:16px; flex:none; accent-color:var(--cyan); }
.consent label{ font-size:13px; color:#9FB0CE; line-height:1.5; }
.consent.bad label{ color:#FFB4B4; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formnote{
  display:none; margin-top:14px; border-radius:6px; padding:14px 16px;
  font-size:14px; line-height:1.5;
}
.formnote.bad{ background:rgba(233,125,125,.12); border:1px solid rgba(233,125,125,.5); color:#FFD6D6; }
.thanks{
  display:none; background:rgba(34,192,214,.10); border:1px solid rgba(34,192,214,.5);
  border-radius:10px; padding:30px 28px;
}
.thanks h3{ font-family:var(--display); font-size:21px; color:#fff; margin:0 0 10px; }
.thanks p{ font-size:15.5px; color:#C6D2E8; line-height:1.6; margin:0; }
.thanks .tick{
  width:38px; height:38px; border-radius:50%; background:var(--cyan); color:var(--navy-2);
  font-size:20px; line-height:38px; text-align:center; margin-bottom:16px; font-weight:700;
}
@media (max-width:860px){ .cta-grid{ grid-template-columns:1fr; } }

/* ---- gated data sheet ---- */
.sheet-sec{ background:var(--tint); }
.sheet-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,72px); align-items:start; }
.sheet-grid ul{ list-style:none; margin:26px 0 0; padding:0; }
.sheet-grid ul li{
  position:relative; padding:0 0 0 22px; margin-bottom:11px;
  font-size:15.5px; color:var(--muted); line-height:1.5;
}
.sheet-grid ul li:before{
  content:''; position:absolute; left:0; top:9px; width:7px; height:7px;
  border-radius:50%; background:var(--cyan);
}
.sheet-panel{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:26px; display:grid; grid-template-columns:150px 1fr; gap:26px; align-items:start;
}
.sheet-panel .cover img{
  width:100%; border:1px solid var(--line); border-radius:4px;
  box-shadow:0 8px 24px rgba(22,38,74,.13);
}
.sheet-panel .cover span{
  display:block; margin-top:10px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:#8894AB; text-align:center;
}
.sheet-form .field label{ color:#5A6478; }
.sheet-form .field input{
  background:#fff; border:1px solid var(--line); color:var(--ink);
}
.sheet-form .field input::placeholder{ color:#9AA5B8; }
.sheet-form .field.bad input{ border-color:#C4543F; }
.sheet-form .field .msg{ color:#C4543F; }
.sheet-form .btn{ width:100%; margin-top:4px; cursor:pointer; border:0; font-family:var(--display); }
.sheet-form .btn[disabled]{ opacity:.6; cursor:progress; }
.sheet-form .fine{ font-size:12.5px; color:#8894AB; margin:12px 0 0; line-height:1.5; }
.sheet-note{
  display:none; margin-top:12px; border-radius:6px; padding:12px 14px; font-size:13.5px; line-height:1.5;
  background:rgba(196,84,63,.09); border:1px solid rgba(196,84,63,.35); color:#8E3A2A;
}
.sheet-done{ display:none; }
.sheet-done h3{ font-family:var(--display); font-size:19px; color:var(--navy); margin:0 0 8px; }
.sheet-done p{ font-size:15px; color:var(--muted); line-height:1.55; margin:0 0 16px; }
.sheet-done .btn{ display:inline-block; }
@media (max-width:960px){ .sheet-grid{ grid-template-columns:1fr; } }
@media (max-width:520px){ .sheet-panel{ grid-template-columns:1fr; } .sheet-panel .cover{ max-width:190px; margin:0 auto; } }

/* ---- end state (what stops happening) ---- */
.gone{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:46px;
       background:rgba(255,255,255,.14); border-radius:8px; overflow:hidden; }
.gone > div{ background:var(--navy); padding:28px 26px 30px; }
.gone .x{
  font-family:var(--mono); font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:#7C8FB4; text-decoration:line-through; text-decoration-color:rgba(34,192,214,.85);
  text-decoration-thickness:1.5px;
}
.gone .o{ margin-top:14px; font-size:16px; line-height:1.5; color:#fff; }
.gone .o strong{ font-family:var(--display); font-weight:700; color:var(--cyan); display:block; margin-bottom:4px; }
.gone-foot{
  margin-top:40px; padding-top:26px; border-top:1px solid rgba(255,255,255,.16);
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:baseline;
}
.gone-foot .fig{
  font-family:var(--display); font-weight:800; font-size:clamp(38px,5vw,58px);
  letter-spacing:-.03em; color:#fff; line-height:1; white-space:nowrap;
}
.gone-foot p{ margin:0; color:#B9C7E0; font-size:clamp(16px,1.5vw,18px); line-height:1.55; max-width:56ch; }
.gone-foot p em{ font-style:normal; color:#fff; }
@media (max-width:1000px){ .gone{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .gone{ grid-template-columns:1fr; } .gone-foot{ grid-template-columns:1fr; gap:14px; } }

/* ---- proof (off-grid endurance) ---- */
.proof-sec{ background:var(--navy-2); color:#fff; }
.proof-head{ max-width:60ch; }
.proof-head h2{ color:#fff; }
.proof-head .lede{ color:#B9C7E0; }
.proof-grid{ display:grid; grid-template-columns:1.15fr 1fr 1fr 1fr; gap:2px; margin-top:44px;
  background:rgba(255,255,255,.14); border-radius:8px; overflow:hidden; }
.proof-grid > div{ background:var(--navy); padding:26px 26px 28px; }
.proof-grid .banner{ display:flex; flex-direction:column; justify-content:center; }
.proof-grid .banner .k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); }
.proof-grid .banner .t{ font-family:var(--display); font-weight:800; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.01em; line-height:1.05; margin-top:8px; }
.proof-grid .m .v{ font-family:var(--display); font-weight:800; font-size:clamp(24px,2.8vw,34px); letter-spacing:-.02em; }
.proof-grid .m .k{ font-family:var(--body); font-size:13.5px; color:#B9C7E0; line-height:1.4; margin-top:9px; }
.proof-foot{ margin-top:26px; font-size:14px; color:#8FA3C6; line-height:1.55; max-width:74ch; }
.proof-foot b{ color:#D6E0F0; font-weight:600; }
@media (max-width:1000px){ .proof-grid{ grid-template-columns:1fr 1fr; } .proof-grid .banner{ grid-column:1 / -1; } }
@media (max-width:560px){ .proof-grid{ grid-template-columns:1fr; } .proof-grid .banner{ grid-column:auto; } }

/* ---- footer ---- */
footer{ background:var(--navy); color:#8FA3C6; padding:40px 0; font-size:14px; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; }
footer img{ width:44px; opacity:.9; }
footer a{ color:var(--cyan); text-decoration:none; }