/* ═══════════════════════════════════════════════════════════════
   TETRA AI — site stylesheet
   Brand: Navy #042C53 · Electric #378ADD · Sky #85B7EB · Ice #E6F1FB
   Headlines: Montserrat 700/800 · Body: Inter
   Structure: dark act (hero → problem → calculator) → light act
   (how → industries → case → pricing → faq) → dark close.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --navy:      #042C53;
  --electric:  #378ADD;
  --sky:       #85B7EB;
  --ice:       #E6F1FB;
  --white:     #FFFFFF;

  /* derived shades (navy deepened for the dark act backdrop) */
  --abyss:     #021A33;
  --abyss-2:   #01142A;

  /* text mixes */
  --ink:       #0A2540;                       /* body text on light  */
  --ink-mute:  #45638A;                       /* muted text on light */
  --dark-mute: #A9C8E8;                       /* muted text on dark  */
  --hairline-d: rgba(133,183,235,.16);        /* borders on dark     */
  --hairline-l: rgba(4,44,83,.12);            /* borders on light    */

  --font-head: "Montserrat", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --radius: 16px;
  --wrap: 1140px;

  --ease-out: cubic-bezier(.22,.9,.3,1);
}

/* ── reset-ish ── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
html,body{ overflow-x:clip }
body{
  font-family:var(--font-body);
  font-size:17px; line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,canvas{ display:block; max-width:100% }
[hidden]{ display:none !important }
a{ color:inherit }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }
h1,h2,h3{ font-family:var(--font-head); font-weight:800; letter-spacing:-.02em; line-height:1.08; text-wrap:balance }
section{ scroll-margin-top:84px }
::selection{ background:var(--electric); color:var(--white) }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,48px) }
.wrap--narrow{ max-width:840px }

/* ── buttons ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:15.5px; line-height:1;
  padding:15px 26px; border-radius:12px;
  text-decoration:none; white-space:nowrap;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out),
             background-color .25s, border-color .25s, color .25s;
}
.btn:focus-visible{ outline:2px solid var(--electric); outline-offset:3px }

.btn--solid{
  background:var(--electric); color:var(--white);
  box-shadow:0 8px 24px -10px rgba(55,138,221,.55);
}
.btn--solid:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -10px rgba(55,138,221,.7) }

.btn--nav{ background:var(--electric); color:var(--white); padding:11px 20px; font-size:14.5px; border-radius:10px }
.btn--nav:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(55,138,221,.65) }

.btn--ghost{
  background:transparent; color:var(--ice);
  border:1px solid var(--hairline-d);
}
.btn--ghost:hover{ border-color:var(--sky); transform:translateY(-1px) }

/* ═══════════════════════ NAV ═══════════════════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background-color .35s, box-shadow .35s, backdrop-filter .35s;
}
.nav.is-scrolled{
  background:rgba(2,22,42,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--hairline-d);
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:18px clamp(20px,5vw,48px);
  display:flex; align-items:center; gap:36px;
}
.nav__brand{ display:flex; align-items:center; gap:11px; text-decoration:none }
.nav__word{
  font-family:var(--font-head); font-weight:800; font-size:16px;
  letter-spacing:.24em; color:var(--white); transform:translateY(1px);
}
.nav__links{ display:flex; gap:30px; margin-left:auto }
.nav__links a{
  color:var(--dark-mute); text-decoration:none; font-size:15px; font-weight:500;
  transition:color .2s;
}
.nav__links a:hover{ color:var(--white) }
.nav__cta{ display:flex }
.nav__burger{ display:none }
.nav__mobile{ display:none }

/* ═══════════════════════ HERO ═══════════════════════ */
.hero{
  position:relative; overflow:clip;
  background:
    radial-gradient(58% 44% at 82% 4%, rgba(55,138,221,.17), transparent 68%),
    radial-gradient(52% 42% at 12% 88%, rgba(55,138,221,.10), transparent 65%),
    linear-gradient(178deg, var(--navy) 0%, #032546 52%, var(--abyss) 100%);
  color:var(--white);
  padding:clamp(140px,17vh,190px) 0 0;
}
.hero__mesh{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(38% 32% at 50% 38%, rgba(133,183,235,.08), transparent 70%);
}
.hero__inner{ z-index:2 }

/* film grain on the dark acts — kills banding, adds texture */
.grain{ position:relative }
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:240px 240px;
  opacity:.05; mix-blend-mode:overlay;
}
.hero__inner{
  position:relative;
  max-width:980px; margin-inline:auto;
  padding:0 clamp(20px,5vw,48px) clamp(72px,9vh,110px);
  text-align:center;
}
.hero__title{
  font-size:clamp(44px,8.4vw,86px);
  letter-spacing:-.03em; line-height:1.0;
  display:flex; flex-direction:column; align-items:center; gap:.04em;
}
.hero__l1,.hero__l2{ display:block }
.hero__uword{ position:relative; display:inline-block; color:var(--sky) }
.hero__uwave{
  position:absolute; left:2%; right:0; bottom:-.28em; width:96%; height:.24em;
  color:var(--electric); overflow:visible;
  opacity:0; animation:fadein .8s 1s forwards;
}
.hero__uwave path{                    /* signal flowing through the line, forever */
  stroke-dasharray:17 5;
  animation:dashflow 1.4s linear infinite;
}
@keyframes dashflow{ to{ stroke-dashoffset:-22 } }
@keyframes fadein{ to{ opacity:1 } }

.hero__sub{
  max-width:640px; margin:26px auto 0;
  color:var(--dark-mute); font-size:clamp(16px,2vw,18.5px); line-height:1.7;
}

/* orchestrated entrance (disabled under reduced motion) */
.hero__title,.hero__sub,.console{ opacity:0; transform:translateY(26px) }
body.loaded .hero__title{ animation:risehero 1s .38s var(--ease-out) forwards }
body.loaded .hero__sub  { animation:rise .8s .58s var(--ease-out) forwards }
body.loaded .console    { animation:rise .9s .74s var(--ease-out) forwards }
/* once the entrance has played, hand transform control back to JS (3D tilt) */
body.settled .hero__title, body.settled .hero__sub{ animation:none; opacity:1; transform:none }
body.settled .console{ animation:none; opacity:1; transform:none }
@keyframes rise{ to{ opacity:1; transform:none } }
@keyframes risehero{
  from{ opacity:0; transform:translateY(30px); filter:blur(12px) }
  to  { opacity:1; transform:none; filter:blur(0) }
}

/* ── demo console ── */
.console{
  margin:46px auto 0; max-width:860px;
  background:linear-gradient(160deg, rgba(230,241,251,.07), rgba(230,241,251,.03));
  border:1px solid var(--hairline-d);
  border-radius:22px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.55), inset 0 1px 0 rgba(230,241,251,.09);
  overflow:clip;
  position:relative;
  --mx:50%; --my:30%;
  transition:transform .3s var(--ease-out), box-shadow .5s, border-color .5s;
  will-change:transform;
}
.console::before{                      /* cursor-tracking glow (desktop) */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(340px circle at var(--mx) var(--my), rgba(55,138,221,.13), transparent 65%);
  opacity:0; transition:opacity .5s;
}
.console:hover::before{ opacity:1 }
.console>*{ position:relative; z-index:1 }

/* the whole page listens while a call is live */
body.on-call .console{
  border-color:rgba(55,138,221,.5);
  box-shadow:0 40px 110px -36px rgba(55,138,221,.4), inset 0 1px 0 rgba(230,241,251,.12);
}
body.on-call .nav__brand .mark{ filter:drop-shadow(0 0 9px rgba(55,138,221,.85)) }
.nav__brand .mark{ transition:filter .6s }
.console__agents{
  display:grid; grid-template-columns:1fr 1px 1fr; align-items:stretch;
}
.agent{
  padding:clamp(26px,4vw,38px) clamp(20px,3.4vw,40px) clamp(22px,3vw,30px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.console__divider{ background:var(--hairline-d); margin:26px 0 }
.agent__sig{ height:28px; opacity:.9 }
.agent__meta{ display:flex; flex-direction:column; gap:2px; margin-bottom:8px }
.agent__name{ font-family:var(--font-head); font-weight:800; font-size:23px; letter-spacing:-.01em }
.agent__role{ color:var(--dark-mute); font-size:14.5px }
.btn--call{
  background:var(--electric); color:var(--white); width:100%; max-width:280px;
  padding:16px 22px; font-size:16px;
  box-shadow:0 10px 28px -10px rgba(55,138,221,.6);
  position:relative; overflow:clip;
}
.btn--call::after{                     /* light sweep on hover */
  content:""; position:absolute; top:0; bottom:0; left:-70%; width:44%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg); transition:left .6s var(--ease-out);
}
.btn--call:hover::after{ left:130% }
.btn--call:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -10px rgba(55,138,221,.75) }
.btn--call[disabled]{ opacity:.55; cursor:default; transform:none }
.agent__tel{
  color:var(--dark-mute); font-size:13.5px; text-decoration:none;
  border-bottom:1px solid transparent; transition:color .2s,border-color .2s;
  font-feature-settings:"tnum";
}
.agent__tel:hover{ color:var(--sky); border-color:var(--hairline-d) }
.agent__preview{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:2px; padding:7px 14px; border-radius:99px;
  border:1px solid var(--hairline-d); color:var(--sky);
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
  transition:border-color .25s, color .25s, background-color .25s;
}
.agent__preview:hover{ border-color:var(--electric); color:var(--white); background:rgba(55,138,221,.12) }
.agent__preview svg{ flex:0 0 auto }
.agent.previewing .agent__preview{ border-color:var(--electric); color:var(--white); background:rgba(55,138,221,.16) }
.console__note{
  text-align:center; color:rgba(169,200,232,.72); font-size:13px;
  padding:0 20px 20px;
}

/* live state */
.console__live{ padding:clamp(24px,4vw,34px) clamp(20px,4vw,44px) 8px }
.console__status{
  display:flex; align-items:center; gap:10px;
  font-weight:600; font-size:15.5px;
}
.live-dot{
  width:9px; height:9px; border-radius:50%;
  background:#59D08B; box-shadow:0 0 0 0 rgba(89,208,139,.5);
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(89,208,139,0) } 100%{ box-shadow:0 0 0 0 rgba(89,208,139,0) } }
.console__timer{
  margin-left:auto; font-feature-settings:"tnum";
  color:var(--dark-mute); font-weight:500; font-size:14.5px;
  border:1px solid var(--hairline-d); border-radius:99px; padding:4px 12px;
}
.console__timer.is-low{ color:#FFD9A8; border-color:rgba(255,217,168,.35) }
.console__transcript{
  min-height:96px; max-height:180px; overflow:hidden;
  margin:18px 0 6px; text-align:left;
  display:flex; flex-direction:column; justify-content:flex-end; gap:9px;
  font-size:15px; line-height:1.55;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 26%);
          mask-image:linear-gradient(to bottom, transparent, #000 26%);
}
.tr-line{ display:flex; gap:10px; opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s }
.tr-line.show{ opacity:1; transform:none }
.tr-line .who{ flex:0 0 auto; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding-top:3px }
.tr-line--agent .who{ color:var(--sky) }
.tr-line--you .who{ color:rgba(230,241,251,.55) }
.tr-line p{ color:rgba(230,241,251,.92) }
.btn--end{
  margin:10px auto 22px; display:flex;
  background:rgba(179,74,74,.16); color:#FFB9B0;
  border:1px solid rgba(217,106,95,.4);
  padding:12px 30px; border-radius:99px; font-size:14.5px;
}
.btn--end:hover{ background:rgba(179,74,74,.3); color:#fff }

/* done state */
.console__done{ padding:clamp(30px,5vw,44px) clamp(24px,5vw,60px) 14px }
.console__done-title{ font-family:var(--font-head); font-weight:800; font-size:clamp(20px,3vw,26px); letter-spacing:-.01em }
.console__done-sub{ color:var(--dark-mute); margin:10px auto 22px; max-width:520px }
.console__done-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:16px }

/* the line — live waveform band */
.console__waveband{
  border-top:1px solid var(--hairline-d);
  height:92px; position:relative;
}
.console__waveband canvas{ width:100%; height:100% }
.console__micnote{
  padding:14px 22px; text-align:center; font-size:14px;
  color:#FFD9A8; background:rgba(255,217,168,.06);
  border-top:1px solid rgba(255,217,168,.18);
}
.console__micnote a{ color:inherit }

/* ═══════════════════════ TRANSITION STRIPS ═══════════════════════ */
.strip{ position:relative; background:var(--abyss); padding:34px 0 30px }
.strip--flatline{ background:linear-gradient(180deg, var(--abyss) 0%, var(--abyss-2) 100%) }
.strip--answered{ background:linear-gradient(180deg, var(--abyss-2) 0%, var(--abyss) 100%) }
.strip__svg{ width:100%; height:64px }
.strip__svg path{ stroke:var(--sky); stroke-width:1.6; opacity:.6 }
/* the line draws itself as you scroll — dashoffset driven from js/site.js */
.strip__ringdot{ fill:var(--sky); opacity:0 }
.strip.in .strip__ringdot{ animation:ringdie 3.2s 1.2s ease-out forwards }
@keyframes ringdie{
  0%{ opacity:0 } 12%{ opacity:.95 } 26%{ opacity:.2 } 40%{ opacity:.85 }
  56%{ opacity:.15 } 70%{ opacity:.6 } 100%{ opacity:0 }
}
.strip__caption{
  text-align:center; color:rgba(169,200,232,.55);
  font-size:13.5px; letter-spacing:.02em; margin-top:2px;
}
.strip--answered .strip__svg path{ stroke:var(--electric); opacity:.75 }

/* ═══════════════════════ PROBLEM ═══════════════════════ */
.problem{
  background:var(--abyss-2); color:var(--white);
  padding:clamp(80px,11vh,130px) 0 clamp(60px,8vh,90px);
}
.problem__title{
  font-size:clamp(32px,5.4vw,54px); text-align:center;
  margin-bottom:clamp(40px,6vh,64px);
}
.problem__title em{ font-style:normal; color:var(--sky) }
.problem__capsule{
  max-width:680px; margin:-14px auto clamp(36px,5vh,52px); text-align:center;
  color:var(--dark-mute); font-size:clamp(15.5px,1.9vw,17px); line-height:1.7;
}
.lossstats__src{
  text-align:center; color:rgba(169,200,232,.42); font-size:12px;
  margin:-28px auto clamp(36px,5vh,52px); max-width:640px;
}

/* the moments it happens */
.moments{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  max-width:1040px; margin:0 auto clamp(44px,6vh,68px);
}
.moment{
  position:relative; border-radius:16px; overflow:hidden;
  aspect-ratio:4/3; margin:0;
  box-shadow:0 24px 50px -28px rgba(0,0,0,.7);
}
.moment img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.55) contrast(1.05) brightness(.8);
  transition:transform .8s var(--ease-out);
}
.moment:hover img{ transform:scale(1.045) }
.moment::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,44,83,.14) 30%, rgba(1,16,33,.82) 100%);
}
.moment figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:16px 18px; color:var(--ice);
  font-weight:600; font-size:14.5px; line-height:1.4; letter-spacing:.01em;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.lossflow{ margin:0 auto clamp(20px,3vh,32px); max-width:1000px }
#lossflowCanvas{ width:100%; aspect-ratio:1000/240; display:block;
  -webkit-mask-image:radial-gradient(115% 115% at 50% 50%, #000 62%, transparent 97%);
          mask-image:radial-gradient(115% 115% at 50% 50%, #000 62%, transparent 97%);
}
@media (max-width:780px){ #lossflowCanvas{ aspect-ratio:1000/300 } }
.lossflow__start{ color:rgba(169,200,232,.75); font-size:14.5px; margin-bottom:4px }
.lossflow__end{ color:rgba(217,106,95,.9); font-size:14.5px; text-align:right; margin-top:2px }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.lossstats{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
  max-width:820px; margin:0 auto clamp(40px,6vh,60px);
}
.lossstat{ text-align:center; padding:10px 20px }
.lossstat+.lossstat{ border-left:1px solid var(--hairline-d) }
.lossstat__n{
  display:block; font-family:var(--font-head); font-weight:800;
  font-size:clamp(56px,9vw,92px); letter-spacing:-.03em; line-height:1;
  color:var(--white); font-feature-settings:"tnum";
}
.lossstat--red .lossstat__n{ color:#E89C93 }
.lossstat__t{
  display:block; color:var(--dark-mute); font-size:15px; line-height:1.5;
  max-width:24ch; margin:12px auto 0;
}
.problem__copy{ max-width:660px; margin-inline:auto; text-align:center; color:var(--dark-mute); font-size:clamp(16px,2vw,18px) }
.problem__punch{
  margin-top:18px; color:var(--white); font-weight:600;
  font-size:clamp(17px,2.2vw,20px);
}

/* ═══════════════════════ CALCULATOR ═══════════════════════ */
.calc{ background:var(--abyss-2); padding:0 0 clamp(90px,12vh,140px); color:var(--white) }
.calc__card{
  max-width:920px; margin-inline:auto;
  background:linear-gradient(165deg, rgba(230,241,251,.07), rgba(230,241,251,.025));
  border:1px solid var(--hairline-d); border-radius:24px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.6);
  padding:clamp(30px,5vw,54px);
}
.calc__intro h2{ font-size:clamp(26px,3.6vw,36px) }
.calc__intro p{ color:var(--dark-mute); margin-top:12px; max-width:560px }
.calc__controls{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,44px);
  margin:34px 0 8px;
}
.calc__field label{
  display:block; font-size:13.5px; font-weight:600; letter-spacing:.04em;
  color:var(--sky); margin-bottom:10px;
}
.calc__field output{ color:var(--white); font-feature-settings:"tnum" }

.select-wrap{ position:relative }
.select-wrap::after{
  content:""; position:absolute; right:16px; top:50%; width:9px; height:9px;
  border-right:1.8px solid var(--sky); border-bottom:1.8px solid var(--sky);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.select-wrap select{
  width:100%; appearance:none; -webkit-appearance:none;
  background:rgba(2,26,51,.6); color:var(--white);
  border:1px solid var(--hairline-d); border-radius:12px;
  padding:14px 44px 14px 16px; font:inherit; font-size:15.5px;
}
.select-wrap select:focus-visible{ outline:2px solid var(--electric); outline-offset:2px }

input[type=range]{
  width:100%; appearance:none; -webkit-appearance:none; height:34px; background:transparent;
  --pct:14%;
}
input[type=range]::-webkit-slider-runnable-track{
  height:4px; border-radius:99px;
  background:linear-gradient(to right, var(--electric) var(--pct), rgba(133,183,235,.22) var(--pct));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--white); border:5px solid var(--electric);
  margin-top:-9px; box-shadow:0 2px 10px rgba(0,0,0,.4);
}
input[type=range]::-moz-range-track{
  height:4px; border-radius:99px; background:rgba(133,183,235,.22);
}
input[type=range]::-moz-range-progress{ height:4px; border-radius:99px; background:var(--electric) }
input[type=range]::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%;
  background:var(--white); border:5px solid var(--electric);
}
input[type=range]:focus-visible{ outline:2px solid var(--electric); outline-offset:4px; border-radius:8px }
.calc__scale{ display:flex; justify-content:space-between; color:rgba(169,200,232,.5); font-size:12px; margin-top:-4px; font-feature-settings:"tnum" }

.calc__result{
  border-top:1px solid var(--hairline-d);
  margin-top:26px; padding-top:28px; text-align:center;
  position:relative;
}
.calc__drain{                        /* revenue quietly draining away */
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}
.calc__result>p{ position:relative; z-index:1 }
.calc__result-label{ color:var(--dark-mute); font-size:15px }
.calc__result-figure{
  font-family:var(--font-head); font-weight:800;
  font-size:clamp(38px,6.4vw,64px); letter-spacing:-.02em; line-height:1.15;
  font-feature-settings:"tnum"; margin:6px 0 12px; color:var(--white);
}
.calc__result-figure.pulse{ animation:figpulse .55s var(--ease-out) }
@keyframes figpulse{
  30%{ text-shadow:0 0 34px rgba(55,138,221,.85); transform:scale(1.015) }
}
.calc__math{ color:rgba(169,200,232,.62); font-size:13.5px; max-width:560px; margin:0 auto 18px }
.calc__anchor{ font-weight:600; color:var(--sky) }
.calc__anchor a{ color:var(--electric) }

/* ═══════════════════════ LIGHT ACT · shared ═══════════════════════ */
.how,.industries,.case,.pricing,.faq{ padding:clamp(80px,11vh,130px) 0 }
.how h2,.industries h2,.case h2,.pricing h2,.faq h2{
  font-size:clamp(30px,4.6vw,46px); color:var(--navy);
}
.how__sub,.industries__sub,.pricing__sub{
  color:var(--ink-mute); margin-top:14px; max-width:620px; font-size:clamp(16px,2vw,18px);
}

/* ═══════════════════════ HOW ═══════════════════════ */
.how{ background:var(--white) }
.steps{
  list-style:none; counter-reset:step;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,36px);
  margin-top:clamp(44px,6vh,64px); position:relative;
}
.steps::before{                       /* the line runs through the stations */
  content:""; position:absolute; left:2%; right:2%; top:36px; height:1.5px;
  background:linear-gradient(to right, transparent, rgba(55,138,221,.4) 8%, rgba(55,138,221,.4) 92%, transparent);
}
.step{ position:relative }
.step__glyph{
  width:72px; height:72px; padding:14px;
  background:var(--white); border:1.5px solid rgba(55,138,221,.45); border-radius:20px;
  color:var(--navy); position:relative; z-index:1;
  box-shadow:0 10px 24px -14px rgba(4,44,83,.3);
}
.step h3{
  font-family:var(--font-body); font-weight:700; font-size:17.5px; letter-spacing:-.01em;
  color:var(--navy); margin:18px 0 8px; display:flex; align-items:baseline; gap:10px;
}
.step__n{
  font-family:var(--font-head); font-weight:800; color:var(--electric);
  font-size:14px; font-feature-settings:"tnum";
}
.step p{ color:var(--ink-mute); font-size:15px; line-height:1.6 }

/* ═══════════════════════ INDUSTRIES ═══════════════════════ */
.industries{ background:var(--ice) }
.industries__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-top:clamp(36px,5vh,52px);
}
.indcard{
  background:var(--white); border:1px solid var(--hairline-l); border-radius:var(--radius);
  padding:26px 26px 22px; text-decoration:none; display:block;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
}
.indcard:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 48px -26px rgba(4,44,83,.32);
  border-color:rgba(55,138,221,.45);
}
.indcard__ic{ width:38px; height:38px; color:var(--electric); margin-bottom:16px;
  transition:transform .35s var(--ease-out);
}
.indcard:hover .indcard__ic{ transform:translateY(-3px) }
@keyframes icondraw{ from{ stroke-dashoffset:300 } to{ stroke-dashoffset:0 } }
.indcard:hover .indcard__ic [stroke]{
  stroke-dasharray:300; animation:icondraw .9s var(--ease-out) forwards;
}
.indcard h3{ font-size:19px; color:var(--navy); letter-spacing:-.015em }
.indcard p{ color:var(--ink-mute); font-size:14.5px; margin:7px 0 14px; line-height:1.55 }
.indcard__agent{
  color:var(--electric); font-weight:600; font-size:14px;
  transition:letter-spacing .25s var(--ease-out);
}
.indcard:hover .indcard__agent{ letter-spacing:.02em }

/* ═══════════════════════ CASE STUDY ═══════════════════════ */
.case{ background:var(--white) }
.case__grid{
  display:grid; grid-template-columns:5fr 7fr; gap:clamp(32px,5vw,72px);
  align-items:start;
}
.case__where{
  display:flex; flex-direction:column; gap:2px; margin-bottom:16px;
  font-size:14px; letter-spacing:.05em;
}
.case__where strong{ color:var(--electric); font-weight:700 }
.case__where span{ color:var(--ink-mute); font-weight:500 }
.case__head h2{ font-size:clamp(32px,4.8vw,50px) }
.case__body p{ color:var(--ink-mute); font-size:clamp(16px,1.9vw,17.5px); line-height:1.75 }
.case__body p+p{ margin-top:20px }
.case__body .case__honest{
  color:var(--navy); font-weight:500;
  border-top:1px solid var(--hairline-l); padding-top:20px; margin-top:26px;
}
.case__photo{
  margin:26px 0 0; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 26px 52px -28px rgba(4,44,83,.4);
}
.case__photo img{
  width:100%; aspect-ratio:16/11; object-fit:cover; display:block;
  filter:saturate(.85) contrast(1.03);
}

/* ═══════════════════════ PRICING ═══════════════════════ */
.pricing{ background:var(--ice) }
.pricing__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-top:clamp(40px,5vh,56px); align-items:stretch;
}
.plan{
  background:var(--white); border:1px solid var(--hairline-l); border-radius:20px;
  padding:32px 30px; display:flex; flex-direction:column; text-align:left;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.plan:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -26px rgba(4,44,83,.3) }
.plan h3{ font-size:21px; color:var(--navy) }
.plan__for{ color:var(--ink-mute); font-size:14px; margin:6px 0 22px; min-height:2.6em }
.plan__price{ color:var(--navy); font-size:17px; font-weight:500 }
.plan__amt{
  font-family:var(--font-head); font-weight:800; font-size:46px;
  letter-spacing:-.02em; font-feature-settings:"tnum";
}
.plan__setup{ color:var(--ink-mute); font-size:13.5px; margin-top:2px }
.plan__vol{
  margin:18px 0 26px; padding:10px 14px; border-radius:10px;
  background:rgba(55,138,221,.08); color:var(--navy);
  font-weight:600; font-size:14.5px;
}
.btn--plan{
  margin-top:auto; border:1.5px solid var(--electric); color:var(--electric);
  background:transparent; width:100%;
}
.btn--plan:hover{ background:rgba(55,138,221,.08); transform:translateY(-1px) }
.btn--plan-solid{ background:var(--electric); color:var(--white); border-color:var(--electric) }
.btn--plan-solid:hover{ box-shadow:0 14px 30px -10px rgba(55,138,221,.6) }

@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false }
.plan--popular{
  background:var(--navy); color:var(--white); position:relative;
  box-shadow:0 30px 60px -30px rgba(4,44,83,.55);
}
.plan--popular::after{                 /* slow travelling light on the border */
  content:""; position:absolute; inset:-1.5px; border-radius:21px; padding:1.5px;
  background:conic-gradient(from var(--ang),
    rgba(55,138,221,0) 0%, rgba(133,183,235,.95) 10%, rgba(55,138,221,0) 24%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spinborder 7s linear infinite; pointer-events:none;
}
@keyframes spinborder{ to{ --ang:360deg } }
.plan--popular:hover{ box-shadow:0 36px 70px -30px rgba(4,44,83,.6) }
.plan--popular h3,.plan--popular .plan__price{ color:var(--white) }
.plan--popular .plan__for,.plan--popular .plan__setup{ color:var(--dark-mute) }
.plan--popular .plan__vol{ background:rgba(230,241,251,.1); color:var(--ice) }
.plan__flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--electric); color:var(--white);
  font-size:12.5px; font-weight:700; letter-spacing:.06em;
  padding:5px 14px; border-radius:99px; white-space:nowrap;
}

.pricing__includes{
  margin-top:clamp(36px,5vh,48px);
  background:var(--white); border:1px solid var(--hairline-l); border-radius:20px;
  padding:clamp(26px,4vw,40px);
}
.pricing__inc-title{
  font-family:var(--font-head); font-weight:800; color:var(--navy);
  font-size:17px; margin-bottom:18px; letter-spacing:-.01em;
}
.pricing__includes ul{
  list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px 40px;
}
.pricing__includes li{
  color:var(--ink-mute); font-size:15.5px; padding-left:24px; position:relative;
}
.pricing__includes li::before{        /* tiny waveform tick — brand bullet */
  content:""; position:absolute; left:0; top:.42em; width:13px; height:11px;
  background:
    linear-gradient(var(--electric),var(--electric)) 0 50%/2.2px 5px,
    linear-gradient(var(--electric),var(--electric)) 5px 50%/2.2px 11px,
    linear-gradient(var(--electric),var(--electric)) 10px 50%/2.2px 7px;
  background-repeat:no-repeat;
}
.pricing__foot{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--hairline-l);
  color:var(--ink-mute); font-size:14px;
}

/* ═══════════════════════ FAQ ═══════════════════════ */
.faq{ background:var(--white) }
.faq h2{ text-align:center; margin-bottom:clamp(30px,4vh,44px) }
.qa{ border-bottom:1px solid var(--hairline-l) }
.qa:first-child{ border-top:1px solid var(--hairline-l) }
.qa summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:18px;
  padding:22px 4px; font-weight:600; font-size:clamp(16px,2vw,17.5px);
  color:var(--navy);
}
.qa summary::-webkit-details-marker{ display:none }
.qa summary::after{
  content:""; flex:0 0 12px; height:12px; margin-left:auto;
  background:
    linear-gradient(var(--electric),var(--electric)) 50% 50%/12px 2px no-repeat,
    linear-gradient(var(--electric),var(--electric)) 50% 50%/2px 12px no-repeat;
  transition:transform .3s var(--ease-out);
}
.qa[open] summary::after{ transform:rotate(45deg) scale(.92);
  background:
    linear-gradient(var(--electric),var(--electric)) 50% 50%/12px 2px no-repeat,
    linear-gradient(var(--electric),var(--electric)) 50% 50%/2px 12px no-repeat;
}
.qa__a{ padding:0 40px 24px 4px; color:var(--ink-mute); line-height:1.7; max-width:56em }

/* ═══════════════════════ BOOK ═══════════════════════ */
.book{
  position:relative; overflow:clip; color:var(--white);
  background:
    radial-gradient(50% 40% at 88% 10%, rgba(55,138,221,.16), transparent 65%),
    radial-gradient(46% 44% at 6% 90%, rgba(55,138,221,.09), transparent 60%),
    linear-gradient(184deg, var(--navy), var(--abyss) 90%);
  padding:clamp(84px,11vh,130px) 0;
}
.book__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px);
  align-items:center; position:relative;
}
.book__copy h2{ font-size:clamp(32px,4.8vw,50px) }
.book__copy>p{ color:var(--dark-mute); margin-top:18px; font-size:clamp(16px,2vw,18px); line-height:1.7 }
.book__copy em{ font-style:italic; color:var(--ice) }
.book__cohort{
  border-left:none; color:var(--sky) !important; font-weight:500;
}
.book__alt{ font-size:15px !important }
.book__alt a{ color:var(--sky) }

.book__form{
  background:var(--white); border-radius:22px;
  padding:clamp(26px,4vw,40px);
  box-shadow:0 50px 100px -50px rgba(0,0,0,.6);
  display:grid; grid-template-columns:1fr 1fr; gap:16px 14px;
  position:relative;
}
.field{ grid-column:1 / -1; display:flex; flex-direction:column; gap:7px }
.field--half{ grid-column:auto }
.field label{ font-size:13.5px; font-weight:600; color:var(--navy) }
.field .opt{ color:var(--ink-mute); font-weight:400 }
.field input,.field textarea,.select-wrap--form select{
  border:1px solid rgba(4,44,83,.18); border-radius:10px;
  padding:13px 14px; font:inherit; font-size:15.5px; color:var(--ink);
  background:var(--white); width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.field textarea{ resize:vertical; min-height:76px }
.field input:focus-visible,.field textarea:focus-visible,.select-wrap--form select:focus-visible{
  outline:none; border-color:var(--electric); box-shadow:0 0 0 3px rgba(55,138,221,.18);
}
.select-wrap--form::after{ border-color:var(--navy) }
.select-wrap--form select{ appearance:none; -webkit-appearance:none; padding-right:40px }
.btn--submit{ grid-column:1 / -1; width:100%; padding:17px; font-size:16px }
.book__fineprint{ grid-column:1/-1; text-align:center; color:var(--ink-mute); font-size:12.5px }
.hp{ position:absolute; left:-9999px; }
.book__thanks{
  position:absolute; inset:0; background:var(--white); border-radius:22px;
  display:grid; place-content:center; text-align:center; padding:40px; gap:10px;
}
.book__thanks[hidden]{ display:none }
.book__thanks strong{ font-family:var(--font-head); font-size:22px; color:var(--navy); letter-spacing:-.01em }
.book__thanks p{ color:var(--ink-mute); max-width:40ch }
.book__error{
  grid-column:1/-1; text-align:center; font-size:14px;
  color:#9E3B3B; background:rgba(217,106,95,.09);
  border:1px solid rgba(217,106,95,.3); border-radius:10px; padding:11px 14px;
}
.book__error a{ color:inherit; font-weight:600 }
.book__previewnote{ font-size:12.5px; color:rgba(69,99,138,.65) !important }

/* ═══════════════════════ FOOTER ═══════════════════════ */
.footer{
  background:var(--abyss-2); color:var(--dark-mute);
  padding:clamp(56px,8vh,84px) 0 44px; text-align:center;
  border-top:1px solid rgba(133,183,235,.08);
}
.footer__brand{ display:flex; flex-direction:column; align-items:center; gap:18px }
.footer__tag{
  font-family:var(--font-head); font-weight:700; font-size:clamp(17px,2.4vw,21px);
  color:var(--ice); letter-spacing:-.01em; max-width:26ch;
}
.footer__nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px;
  margin:30px 0 26px; font-size:14.5px;
}
.footer__nav a{ color:var(--dark-mute); text-decoration:none; transition:color .2s }
.footer__nav a:hover{ color:var(--white) }
.footer__nav span{ color:rgba(133,183,235,.3) }
.footer__contact{ font-size:14.5px; display:flex; flex-direction:column; gap:6px }
.footer__contact a{ color:var(--sky); text-decoration:none }
.footer__contact a:hover{ text-decoration:underline }
.footer__contact p{ font-feature-settings:"tnum" }
.footer__legal{ margin-top:30px; font-size:13px; color:rgba(169,200,232,.45) }

/* ═══════════════════════ LEGAL / UTILITY PAGES ═══════════════════════ */
.legalhead{
  background:linear-gradient(178deg, var(--navy) 0%, var(--abyss) 100%);
  color:var(--white); padding:clamp(130px,16vh,170px) 0 clamp(44px,6vh,64px);
  position:relative; overflow:clip;
}
.legalhead h1{ font-size:clamp(30px,4.6vw,46px) }
.legalhead p{ color:var(--dark-mute); margin-top:12px; font-size:15px }
.legalbody{ background:var(--white); padding:clamp(48px,7vh,80px) 0 clamp(70px,9vh,110px) }
.legalbody .wrap--narrow{ max-width:760px }
.legalbody h2{
  font-size:clamp(20px,2.6vw,25px); color:var(--navy);
  margin:44px 0 14px; letter-spacing:-.015em;
}
.legalbody h2:first-child{ margin-top:0 }
.legalbody p, .legalbody li{ color:var(--ink-mute); line-height:1.75; font-size:16px }
.legalbody p+p{ margin-top:14px }
.legalbody ul{ margin:14px 0 14px 22px }
.legalbody li+li{ margin-top:8px }
.legalbody strong{ color:var(--navy); font-weight:600 }
.legalbody a{ color:var(--electric) }

/* 404 */
.lost{
  min-height:100svh; display:grid; place-content:center; text-align:center;
  background:linear-gradient(178deg, var(--navy) 0%, var(--abyss) 100%);
  color:var(--white); padding:40px 24px; position:relative; overflow:clip;
}
.lost h1{ font-size:clamp(38px,7vw,64px); margin:26px 0 14px }
.lost p{ color:var(--dark-mute); max-width:44ch; margin:0 auto 30px; line-height:1.7 }
.lost__row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
.lost svg.mark{ margin:0 auto }


/* ═══════════════════════ GUIDE / ARTICLE PAGES ═══════════════════════ */
.crumbs{ font-size:13px; color:var(--dark-mute); margin-bottom:14px }
.crumbs a{ color:var(--sky); text-decoration:none }
.crumbs a:hover{ text-decoration:underline }
.guide{ background:var(--white); padding:clamp(48px,7vh,80px) 0 clamp(70px,9vh,110px) }
.guide .wrap--narrow{ max-width:820px }
.guide h2{ font-size:clamp(24px,3.2vw,32px); color:var(--navy); margin:54px 0 16px; letter-spacing:-.015em }
.guide h2:first-of-type{ margin-top:0 }
.guide h3{ font-family:var(--font-body); font-weight:700; font-size:18px; color:var(--navy); margin:28px 0 10px }
.guide p,.guide li{ color:var(--ink-mute); line-height:1.75; font-size:16.5px }
.guide p+p{ margin-top:14px }
.guide ul,.guide ol{ margin:14px 0 14px 24px }
.guide li+li{ margin-top:8px }
.guide strong{ color:var(--navy); font-weight:600 }
.guide a{ color:var(--electric) }
.guide .capsule{                     /* the direct answer, before anything else */
  background:var(--ice); border:1px solid var(--hairline-l); border-radius:var(--radius);
  padding:22px 26px; margin:0 0 36px;
  color:var(--ink); font-size:17px; line-height:1.7;
}
.tablewrap{ overflow-x:auto; margin:20px 0 }
.guide table{ width:100%; border-collapse:collapse; font-size:15px; min-width:640px }
.guide th,.guide td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--hairline-l); vertical-align:top; color:var(--ink-mute) }
.guide th{ color:var(--navy); font-weight:700; font-size:13.5px; letter-spacing:.03em; border-bottom:2px solid rgba(4,44,83,.22) }
.guide td:first-child{ color:var(--navy); font-weight:600 }
.guide .src{ font-size:12.5px; color:rgba(69,99,138,.65) }
.guide .faq__list{ margin-top:8px }
.guide__cta{
  margin-top:52px; background:linear-gradient(184deg, var(--navy), var(--abyss));
  border-radius:20px; padding:clamp(28px,4vw,40px); text-align:center; color:var(--white);
}
.guide__cta .g-cta-h{ font-family:var(--font-head); font-weight:800; font-size:clamp(22px,3vw,28px); letter-spacing:-.015em; color:var(--white) }
.guide__cta p{ color:var(--dark-mute); margin:10px auto 22px; max-width:44em }

/* ═══════════════════════ SCROLL REVEALS ═══════════════════════ */
.reveal{ opacity:0; transform:translateY(24px);
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.reveal.in{ opacity:1; transform:none }
/* gentle stagger inside grids */
.industries__grid .reveal:nth-child(2),
.pricing__grid .reveal:nth-child(2), .steps .reveal:nth-child(2){ transition-delay:.1s }
.industries__grid .reveal:nth-child(3),
.pricing__grid .reveal:nth-child(3), .steps .reveal:nth-child(3){ transition-delay:.2s }
.industries__grid .reveal:nth-child(4),
.steps .reveal:nth-child(4){ transition-delay:.3s }
.industries__grid .reveal:nth-child(5){ transition-delay:.4s }
.industries__grid .reveal:nth-child(6){ transition-delay:.5s }

/* ═══════════════════════ REDUCED MOTION ═══════════════════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation:none !important; transition:none !important }
  .hero__title,.hero__sub,.console,.reveal{ opacity:1 !important; transform:none !important }
  .hero__uwave{ opacity:1 }
  .hero__uwave path,.strip__wave-out,.strip__wave-in{ stroke-dasharray:none !important; stroke-dashoffset:0 !important }
  .strip__ringdot{ opacity:.5 }
}

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width: 1020px){
  .industries__grid{ grid-template-columns:1fr 1fr }
  .steps{ grid-template-columns:1fr 1fr; gap:36px 28px }
  .steps::before{ display:none }
  .case__grid{ grid-template-columns:1fr; gap:24px }
  .book__grid{ grid-template-columns:1fr; gap:44px }
}

@media (max-width: 780px){
  body{ font-size:16px }
  .nav__links,.nav__cta{ display:none }
  .nav__burger{
    display:flex; flex-direction:column; gap:6px; margin-left:auto;
    padding:10px; border-radius:8px;
  }
  .nav__burger span{ width:24px; height:2px; background:var(--ice); border-radius:2px; transition:transform .3s, opacity .3s }
  .nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg) }
  .nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg) }
  .nav__mobile{
    display:flex; flex-direction:column; gap:4px;
    background:rgba(2,20,42,.97);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    padding:12px 24px 24px; box-shadow:0 1px 0 var(--hairline-d) inset;
  }
  .nav__mobile[hidden]{ display:none }
  .nav__mobile a{
    color:var(--ice); text-decoration:none; font-size:17px; font-weight:500;
    padding:13px 4px; border-bottom:1px solid rgba(133,183,235,.09);
  }
  .nav__mobile .btn{ margin-top:14px; border-bottom:none; text-align:center }

  .hero{ padding-top:118px }
  .console__agents{ grid-template-columns:1fr }
  .console__divider{ margin:0 26px; height:1px }
  .agent{ padding:24px 22px 20px }
  .console__waveband{ height:72px }

  .lossstat__t{ max-width:none; font-size:14px }
  .lossstat{ padding:6px 12px }
  .moments{ grid-template-columns:1fr; max-width:440px }
  .moment{ aspect-ratio:16/10 }

  .calc__controls{ grid-template-columns:1fr }

  .steps{ grid-template-columns:1fr; gap:34px }
  .industries__grid{ grid-template-columns:1fr }
  .pricing__grid{ grid-template-columns:1fr; gap:26px }
  .plan--popular{ order:-1 }
  .pricing__includes ul{ grid-template-columns:1fr }
  .book__form{ grid-template-columns:1fr }
  .field--half{ grid-column:1 / -1 }
}

@media (max-width: 420px){
  .hero__title{ font-size:40px }
  .btn--call{ max-width:none }
}