/* FLYNNCOR — site styles
   Colors and fonts live in :root. Effects (shimmer, lightning, waves) are
   pure CSS; assets/js/site.js only adds menu, reveal, spotlight and form. */

@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/chakra-petch-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/chakra-petch-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/chakra-petch-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.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-latin-500-normal.woff2) format("woff2")}

:root{
  --bg:#05080b; --bg-2:#070b0f; --panel:#0a0f14; --chip:#111a22;
  --line:#16212a; --line-2:#1a2631; --line-3:#2a3a46;
  --text:#e6eef3; --bright:#f2f7fa; --soft:#b7c6d0; --muted:#9fb2be; --dim:#7d919d; --quiet:#6f8390;
  --cyan:#38c8ff; --cyan-hi:#8fdcff; --orange:#ff7a1a; --orange-text:#ff8f3d; --orange-glow:rgba(255,122,26,.5);
  --display:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(20px,5vw,64px);
  --header-h:80px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sweep:cubic-bezier(.45,.05,.25,1);
}
@media (max-width:999px){:root{--header-h:64px}}

html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--cyan-hi)}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;background:var(--cyan);color:#031018;font-weight:600;border-radius:2px}
.skip:focus{top:12px;color:#031018}
.wrap{width:min(1200px,100% - 2*var(--gutter));margin-inline:auto}

/* ---------- type helpers ---------- */
.kicker{font:500 13px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.h2{font:600 clamp(32px,4.2vw,48px)/1.08 var(--display);color:var(--bright);text-wrap:balance}
.lede{font-size:17px;line-height:1.6;color:var(--muted);max-width:460px;text-wrap:pretty}
.block{padding:clamp(72px,9vw,120px) 0;border-top:1px solid var(--line)}
.block--alt{background:var(--bg-2)}
.block__head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(32px,5vw,64px)}
@media (min-width:1000px){.block__head--split{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:64px}}
.block__head .stack{display:flex;flex-direction:column;gap:18px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:2px;border:1px solid var(--cyan);background:var(--cyan);color:#031018;font-weight:600;font-size:16px;cursor:pointer;transition:transform .2s,box-shadow .25s,filter .2s,background .2s,border-color .2s}
.btn:hover{color:#031018;transform:translateY(-2px);box-shadow:0 10px 32px rgba(56,200,255,.35);filter:brightness(1.08)}
.btn--ghost{background:transparent;border-color:var(--line-3);color:var(--text)}
.btn--ghost:hover{color:var(--bright);border-color:var(--cyan);background:rgba(56,200,255,.06);box-shadow:none;filter:none}
.btn--ghost .arrow{display:inline-block;transition:transform .2s}
.btn--ghost:hover .arrow{transform:translateX(4px)}
.btn--outline{height:44px;padding:0 20px;background:transparent;color:var(--cyan);font-weight:500;font-size:15px}
.btn--outline:hover{color:var(--bright);background:rgba(56,200,255,.08);box-shadow:none}
.btn--block{width:100%}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);border-bottom:1px solid rgba(120,170,200,.12);transition:background .3s,backdrop-filter .3s,border-color .3s}
.top.is-solid,.page--sub .top{background:rgba(3,5,7,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line)}
@media (max-width:999px){.top{background:#000}}
.top__in{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter)}
.brand{display:flex;align-items:center;gap:12px;color:var(--text)}
.brand:hover{color:var(--bright)}
.brand__mark{width:22px;height:28px}
.brand__lock{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.brand__word{font:600 18px/1 var(--display);letter-spacing:.22em;margin-right:-.22em}
.brand__sys{font:600 8px/1 var(--display);letter-spacing:.5em;margin-right:-.5em;color:var(--cyan)}
.nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px);font-size:15px}
.nav a:not(.btn){color:var(--soft);transition:color .2s}
.nav a:not(.btn):hover{color:#fff}
.nav a[aria-current="page"]{color:#fff;font-weight:500;padding-bottom:4px;border-bottom:2px solid var(--orange)}
@media (max-width:1180px){.nav .nav__opt{display:none}}
.menu{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:transparent;border:1px solid var(--line-3);border-radius:2px;cursor:pointer}
.drawer{position:absolute;top:var(--header-h);left:0;right:0;background:#000;border-bottom:1px solid var(--line);padding:8px var(--gutter) 24px;display:flex;flex-direction:column}
.drawer[hidden]{display:none}
.drawer a{padding:14px 0;border-bottom:1px solid var(--line);color:var(--text);font:600 18px/1.2 var(--display);letter-spacing:.04em}
.drawer .btn{margin-top:20px;border-bottom:1px solid var(--cyan)}
@media (max-width:999px){.nav{display:none}.menu{display:flex}.brand__mark{width:18px;height:23px}.brand__word{font-size:16px}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:#000}
.stage{position:absolute;left:0;width:100%;aspect-ratio:1712/1152;container-type:inline-size;pointer-events:none}
.stage img,.stage svg,.stage .fx{position:absolute;inset:0;width:100%;height:100%}
.stage img{object-fit:cover}
.hero__scrim{position:absolute;inset:auto 0 0 0;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,11,0) 0%,rgba(5,8,11,.82) 30%,var(--bg) 72%)}
.hero__spot{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(520px circle at var(--mx,50%) var(--my,45%),rgba(56,200,255,.13),transparent 62%)}
.hero__text{position:relative;display:flex;flex-direction:column;gap:22px}
.hero h1{font:600 clamp(38px,4.2vw,60px)/1.05 var(--display);letter-spacing:-.01em;color:var(--bright);text-wrap:balance}
.hero__sub{font-size:clamp(17px,1.35vw,19px);line-height:1.55;font-weight:300;color:var(--muted);max-width:680px;text-wrap:pretty}
.hero__cta{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}
.caret{display:inline-block;width:8px;height:1em;margin-left:6px;vertical-align:-2px;background:currentColor;animation:blink 1.1s steps(1) infinite}

@supports (animation-timeline: scroll()) {
  @media (min-width:1000px) {
    .stage{will-change:transform;animation:hero-parallax linear both;animation-timeline:scroll(root);animation-range:0px 100vh}
    @keyframes hero-parallax{to{transform:translateY(18%)}}
  }
}
@media (min-width:1000px){
  .hero{height:calc(40.3vw + 330px);min-height:720px}
  .stage{top:-4.17vw}
  .hero__scrim{top:34.7vw}
  .hero__text{position:absolute;left:0;right:0;top:40.3vw;align-items:center;text-align:center;padding:0 var(--gutter)}
  .hero__cta{justify-content:center}
}
@media (max-width:999px){
  .hero{padding-top:var(--header-h)}
  .hero__art{position:relative;height:60vw;overflow:hidden}
  .stage{width:104%;left:-2%;top:-9vw}
  .hero__art::after{content:"";position:absolute;inset:auto 0 0 0;height:36%;background:linear-gradient(180deg,rgba(5,8,11,0),var(--bg))}
  .hero__scrim,.hero__spot{display:none}
  .hero__text{background:var(--bg);padding:8px var(--gutter) 56px;gap:18px}
  .hero__text .kicker{font-size:11px;letter-spacing:.18em}
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%}
}

/* hero effects — positions are in % of the 1712×1152 hero image */
.fx-wave{filter:brightness(2.4) saturate(1.3);clip-path:inset(59% 0 0 0);-webkit-mask-image:linear-gradient(180deg,transparent 40%,#000 50%,transparent 60%);mask-image:linear-gradient(180deg,transparent 40%,#000 50%,transparent 60%);-webkit-mask-size:100% 300%;mask-size:100% 300%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:wave 9s cubic-bezier(.4,0,.8,.6) infinite both}
.fx-wave--o{filter:brightness(2.4) sepia(1) saturate(7) hue-rotate(-18deg);mix-blend-mode:screen;animation-delay:4.5s}
.fx-shine{filter:brightness(2.8) saturate(1.5);clip-path:inset(36% 3% 40% 5%);-webkit-mask-image:linear-gradient(100deg,transparent 44%,#000 50%,transparent 56%);mask-image:linear-gradient(100deg,transparent 44%,#000 50%,transparent 56%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:shimmer 10s var(--sweep) 1.2s infinite both}
.fx-shine--o{filter:brightness(2.6) sepia(1) saturate(8) hue-rotate(-18deg);mix-blend-mode:screen;-webkit-mask-image:linear-gradient(100deg,transparent 41%,#000 47%,transparent 52%);mask-image:linear-gradient(100deg,transparent 41%,#000 47%,transparent 52%);animation-delay:1.45s}
.fx-lit{clip-path:inset(38% 3% 40% 5%);mix-blend-mode:screen;filter:brightness(2.3) saturate(1.4);opacity:0;animation:sky var(--dur) linear var(--del) infinite both}
.fx-lit--o{filter:brightness(2.2) sepia(1) saturate(6) hue-rotate(-18deg)}
.stage .fx-arc{inset:auto;left:73.5%;top:37.5%;width:10.5%;height:9.5%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,140,40,.75),rgba(255,122,26,0));mix-blend-mode:screen;filter:blur(6px);animation:arc 3.2s ease-in-out infinite}
.fx-sky{opacity:0;mix-blend-mode:screen;animation:sky var(--dur) linear var(--del) infinite both}
.stage .fx-impact{inset:auto;width:6.4%;height:auto;aspect-ratio:1;translate:-50% -50%;border-radius:50%;mix-blend-mode:screen;opacity:0;animation:impact var(--dur) ease-out var(--del) infinite both}
.bolt{opacity:0;animation:flash var(--dur) linear var(--del) infinite both}
.bolt path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw var(--dur) linear var(--del) infinite both}
.bolt--c{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #7fdcff) drop-shadow(0 0 26px #38c8ff)}
.bolt--o{filter:drop-shadow(0 0 3px #fff3e6) drop-shadow(0 0 10px #ffb070) drop-shadow(0 0 26px #ff7a1a)}
.t1{--dur:8s;--del:1.8s}.t2{--dur:11s;--del:5.4s}.t3{--dur:13s;--del:8.6s}

.sys{position:absolute;left:8.2%;right:5.4%;top:58.6%;height:3.1cqw;display:flex;align-items:center;gap:1.4cqw}
.sys__line{height:max(1px,.14cqw);flex:1;background-image:linear-gradient(90deg,transparent 44%,rgba(255,122,26,.95) 48%,rgba(255,240,225,1) 50.5%,transparent 54%),linear-gradient(90deg,rgba(56,200,255,0),rgba(56,200,255,.75));background-size:300% 100%,100% 100%;background-repeat:no-repeat;box-shadow:0 0 10px rgba(56,200,255,.35);animation:line-run 10s var(--sweep) 1.2s infinite both}
.sys__tick{flex-shrink:0;width:1.5cqw;height:max(2px,.28cqw);background:var(--orange);box-shadow:0 0 10px rgba(255,122,26,.9),0 0 22px rgba(255,122,26,.5);animation:arc 3.2s ease-in-out infinite}
.sys__word{font:700 2.78cqw/1 var(--display);letter-spacing:.5em;margin-right:-.5em;text-transform:uppercase;white-space:nowrap;color:transparent;background-image:linear-gradient(100deg,#38c8ff 0%,#38c8ff 41%,#ff7a1a 45.5%,#fff 50%,#8fe3ff 53%,#38c8ff 56%,#38c8ff 100%);background-size:400% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;animation:sys-sweep 10s var(--sweep) 1.2s infinite both,sys-glow 3.2s ease-in-out infinite}

@keyframes shimmer{0%{-webkit-mask-position:100% 0;mask-position:100% 0}55%,100%{-webkit-mask-position:0% 0;mask-position:0% 0}}
@keyframes wave{0%{-webkit-mask-position:0 100%;mask-position:0 100%;opacity:0}7%{opacity:1}37%,100%{-webkit-mask-position:0 0%;mask-position:0 0%;opacity:0}}
@keyframes arc{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes line-run{0%{background-position:100% 0,0 0}55%,100%{background-position:0% 0,0 0}}
@keyframes sys-sweep{0%{background-position:100% 0}55%,100%{background-position:0% 0}}
@keyframes sys-glow{0%,100%{filter:drop-shadow(0 0 6px rgba(56,200,255,.7)) drop-shadow(0 0 18px rgba(56,200,255,.35))}50%{filter:drop-shadow(0 0 9px rgba(120,220,255,.95)) drop-shadow(0 0 28px rgba(56,200,255,.55))}}
@keyframes flash{0%{opacity:0}.5%{opacity:1}1.3%{opacity:.12}2.1%{opacity:1}3%{opacity:.45}4.6%,100%{opacity:0}}
@keyframes draw{0%{stroke-dashoffset:1}.5%,100%{stroke-dashoffset:0}}
@keyframes sky{0%{opacity:0}.5%{opacity:.85}1.3%{opacity:.08}2.1%{opacity:.65}6%,100%{opacity:0}}
@keyframes impact{0%{opacity:0;transform:scale(.3)}.6%{opacity:1;transform:scale(1)}6%,100%{opacity:0;transform:scale(1.7)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,122,26,.6)}60%{box-shadow:0 0 0 7px rgba(255,122,26,0)}}
@keyframes border-run{to{background-position:auto,200% 50%}}

.rise{animation:rise .9s var(--ease) both}
.d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s}

/* ---------- rail ---------- */
.rail{height:64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 48px;padding:0 var(--gutter);font:400 12px/1 var(--mono);letter-spacing:.24em;color:var(--dim)}
.rail .dot{width:5px;height:5px;border-radius:50%;background:var(--orange);animation:pulse 2.4s ease-out infinite}
@media (max-width:640px){.rail{height:auto;padding:18px var(--gutter);gap:10px 16px;font-size:10px;letter-spacing:.2em}.rail .dot{width:4px;height:4px}}

/* ---------- statement ---------- */
.statement{padding:clamp(72px,10vw,140px) 0}
.statement p{font:300 clamp(28px,3.2vw,46px)/1.25 var(--sans);letter-spacing:-.01em;color:var(--quiet);text-wrap:pretty;max-width:1120px}
.statement .w{color:var(--bright)}.statement .c{color:var(--cyan)}

/* ---------- cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:999px){.grid3,.grid2{grid-template-columns:1fr;gap:16px}}
.card{position:relative;display:flex;flex-direction:column;gap:20px;padding:32px;background:var(--panel);border:1px solid var(--line-2);border-radius:4px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(56,200,255,.16),transparent 60%);mix-blend-mode:screen;opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover{transform:translateY(-4px);border-color:rgba(56,200,255,.55);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.card:hover::before{opacity:1}
@media (max-width:999px){.card{padding:24px;gap:14px}}
.card__id{font:400 13px/1 var(--mono);letter-spacing:.1em;color:var(--dim)}
.card__label{font:400 12px/1.4 var(--mono);letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.card__title{font:600 clamp(24px,2vw,28px)/1.15 var(--display);color:var(--bright)}
.card>p:not([class]){font-size:16px;line-height:1.6;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.tags li{padding:6px 10px;background:var(--chip);border-radius:2px;font-size:13px;line-height:1.3;color:var(--soft)}
.card--feat{background:linear-gradient(#0b1219,#0b1219) padding-box,linear-gradient(90deg,#38c8ff,#ff7a1a,#38c8ff,#ff7a1a) border-box;background-size:auto,200% 100%;border:1px solid transparent;animation:border-run 6s linear infinite}
.card--feat:hover{border-color:transparent}

/* capability tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:999px){.tiles{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;gap:14px;padding:40px;background:var(--bg);transition:background .3s}
.tile:hover{background:#0a1219}
.tile svg{width:40px;height:40px;fill:none;stroke:var(--cyan);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease),filter .35s}
.tile:hover svg{transform:translateY(-3px) scale(1.08);filter:drop-shadow(0 0 10px rgba(56,200,255,.7))}
.tile h3{font-size:21px;font-weight:600;color:var(--bright);line-height:1.3}
.tile p{font-size:16px;line-height:1.6;color:var(--muted)}
@media (max-width:999px){.tile{flex-direction:row;gap:16px;padding:22px 20px}.tile svg{width:32px;height:32px;flex-shrink:0}.tile h3{font-size:18px;margin-bottom:6px}.tile p{font-size:15px}}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
@media (max-width:999px){.steps{grid-template-columns:1fr;gap:32px}}
.step{display:flex;flex-direction:column;gap:16px;padding-top:28px;border-top:2px solid var(--line-3);transition:border-color .3s}
.step:first-child,.step:hover{border-top-color:var(--cyan)}
.step__n{font:600 56px/1 var(--display);color:#24323d;transition:color .3s}
.step:hover .step__n{color:var(--cyan)}
.step h3{font-size:24px;font-weight:600;color:var(--bright)}
.step p{font-size:16px;line-height:1.6;color:var(--muted)}
@media (max-width:999px){.step{gap:10px;padding-top:20px}.step__n{font-size:40px}.step h3{font-size:20px}.step p{font-size:15px}}

/* principles */
.rule{display:flex;flex-direction:column;gap:14px;padding:36px;border:1px solid var(--line-2);border-radius:4px;transition:border-color .3s,background .3s}
.rule:hover{border-color:rgba(255,122,26,.5);background:rgba(255,122,26,.03)}
.rule__k{font:400 13px/1 var(--mono);letter-spacing:.1em;color:var(--orange-text)}
.rule h3{font:600 26px/1.2 var(--display);color:var(--bright)}
.rule p{font-size:16px;line-height:1.6;color:var(--muted)}
@media (max-width:999px){.rule{padding:24px;gap:10px}.rule h3{font-size:21px}.rule p{font-size:15px}}

/* ---------- contact ---------- */
.contact__in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:96px;align-items:start}
@media (max-width:999px){.contact__in{grid-template-columns:1fr;gap:32px}}
.contact__copy{display:flex;flex-direction:column;gap:22px}
.contact__copy .h2{font-size:clamp(34px,4.4vw,52px)}
.contact__copy p:not(.kicker){font-size:18px;line-height:1.6;color:var(--muted)}
.form{display:flex;flex-direction:column;gap:20px;padding:36px;background:var(--panel);border:1px solid var(--line-2);border-radius:4px}
@media (max-width:999px){.form{padding:22px;gap:18px}}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:500;color:var(--soft)}
.field input,.field textarea{height:48px;padding:0 14px;background:var(--bg);border:1px solid var(--line-3);border-radius:2px;color:var(--text);font-size:16px;transition:border-color .2s,box-shadow .2s}
.field textarea{height:auto;min-height:140px;padding:12px 14px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(56,200,255,.2)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form__note{font-size:13px;color:var(--dim);min-height:1.4em}
.form__note.is-ok{color:var(--cyan)}.form__note.is-err{color:var(--orange-text)}
.btn[disabled]{opacity:.6;cursor:wait;transform:none;box-shadow:none}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:48px 0;font-size:14px;color:var(--dim)}
.foot__in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot__brand{display:flex;align-items:center;gap:12px}
.foot__brand svg{width:18px;height:23px}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 32px}
.foot nav a{color:var(--muted);transition:color .2s}
.foot nav a:hover{color:#fff}
@media (max-width:640px){.foot__in{flex-direction:column-reverse;align-items:flex-start}}

/* ---------- pricing page ---------- */
.phead{position:relative;overflow:hidden;background:#000;padding:calc(var(--header-h) + clamp(64px,9vw,120px)) 0 clamp(64px,8vw,110px)}
.phead__grid{position:absolute;inset:0;background:url(/assets/img/hero.webp) center bottom/max(1712px,120%) auto no-repeat;opacity:.55}
.phead__grid.fx-wave{clip-path:none;filter:brightness(2.4) saturate(1.3);opacity:.55}
.phead__grid.fx-wave--o{filter:brightness(2.4) sepia(1) saturate(7) hue-rotate(-18deg)}
.phead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 45%,rgba(5,8,11,.9) 100%)}
.phead__in{position:relative;z-index:1;display:flex;flex-direction:column;gap:22px;max-width:820px}
@media (min-width:1000px){.phead__in{margin-inline:auto;align-items:center;text-align:center}}
.phead h1{font:600 clamp(38px,4.6vw,64px)/1.06 var(--display);color:var(--bright);text-wrap:balance}
.phead p:not(.kicker){font-size:clamp(17px,1.35vw,19px);line-height:1.55;font-weight:300;color:var(--muted)}

.price-card{gap:18px}
.price-card__top{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:24px}
.price-card h3{font-size:19px;font-weight:600;color:var(--bright)}
.price{display:flex;flex-direction:column;gap:4px}
.price__unit{font:400 11px/1.4 var(--mono);letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.price__num{font:600 46px/1 var(--display);color:var(--bright)}
.price-card>p:not([class]){font-size:15px;line-height:1.6}
.checks{display:flex;flex-direction:column;gap:9px;padding-top:16px;border-top:1px solid var(--line)}
.checks li{display:flex;gap:10px;font-size:15px;line-height:1.5;color:var(--soft)}
.checks svg{flex-shrink:0;width:16px;height:16px;margin-top:3px;fill:none;stroke:#7fd3f5;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card--feat .checks svg{stroke:var(--cyan)}
.checks li.off{color:#5d7080}.checks li.off svg{stroke:#3a4a56}
.badge{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;border-radius:2px;white-space:nowrap}
.badge--o{color:var(--orange-text);border:1px solid rgba(255,122,26,.45)}
.badge--c{color:#031018;background:var(--cyan)}
.tier{gap:22px;padding:36px}
@media (max-width:999px){.tier{padding:24px}}
.tier h3{font:600 24px/1.2 var(--display);color:var(--bright)}
.tier__price{display:flex;align-items:baseline;gap:8px}
.tier__price .price__num{font-size:56px}
.tier__price span:last-child{font-size:16px;color:var(--dim)}
.tier__year{margin-top:-12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.tier__year b{color:var(--bright);font-weight:600}
.tier__desc{font-size:15px;line-height:1.6;color:var(--muted)}
@media (min-width:1000px){.tier__desc{min-height:48px}}
.tier .checks{gap:11px;padding-top:20px}
.fine{margin-top:32px;font-size:14px;line-height:1.6;color:var(--dim);max-width:960px}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
@media (max-width:999px){.how{grid-template-columns:1fr;gap:28px}}
.how div{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:2px solid var(--line-3)}
.how div:first-child{border-top-color:var(--cyan)}
.how h3{font-size:22px;font-weight:600;color:var(--bright)}
.how p{font-size:16px;line-height:1.6;color:var(--muted)}
.cta-band{display:flex;justify-content:space-between;align-items:center;gap:32px 64px;flex-wrap:wrap}
.cta-band .h2{font-size:clamp(30px,3.4vw,44px)}
.cta-band p:not(.kicker){margin-top:14px;font-size:18px;color:var(--muted)}

/* ---------- reveal on scroll (only when JS runs) ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- 404 ---------- */
.lost{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:2rem var(--gutter);position:relative;overflow:hidden}
.lost::before{content:"";position:absolute;left:-20%;right:-20%;top:55%;bottom:-30%;background-image:linear-gradient(rgba(56,200,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(56,200,255,.22) 1px,transparent 1px);background-size:64px 64px;transform:perspective(600px) rotateX(64deg);transform-origin:top;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 20%,transparent 90%);mask-image:linear-gradient(to bottom,transparent,#000 20%,transparent 90%)}
.lost__code{font:700 clamp(6rem,22vw,14rem)/.9 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--cyan);text-shadow:0 0 40px rgba(56,200,255,.3)}
.lost__code span{-webkit-text-stroke-color:var(--orange);text-shadow:0 0 40px var(--orange-glow)}
.lost h1{margin-top:1.5rem;font:600 clamp(1.4rem,3vw,2rem)/1.1 var(--display);text-transform:uppercase;color:var(--bright)}
.lost p{margin:1rem auto 2rem;color:var(--muted);max-width:28rem}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fx-wave,.fx-shine,.fx-lit,.fx-sky,.fx-impact,.bolt,.caret{opacity:0!important}
  .js .reveal{opacity:1;transform:none}
}

/* tile text column */
.tile>div{display:flex;flex-direction:column;gap:14px}
@media (max-width:999px){.tile>div{gap:6px}.tile h3{margin-bottom:0}}

/* nav mark: the real chrome F. On the home page it stays hidden until the hero logo scrolls away */
.brand__img{width:180px;height:auto;filter:drop-shadow(0 0 8px rgba(56,200,255,.2))}
@media (max-width:999px){.brand__img{width:150px}}
.brand:hover .brand__img{filter:drop-shadow(0 0 10px rgba(56,200,255,.55))}
.top--home .brand{opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .4s,visibility .4s,transform .4s}
.top--home.show-brand .brand{opacity:1;visibility:visible;transform:none}

/* menu button: HUD corner brackets around two lines */
.menu{position:relative;border:0;background:transparent;width:44px;height:44px;margin-right:-6px;padding:0}
.menu::before,.menu::after{content:"";position:absolute;width:10px;height:10px;border-style:solid;transition:transform .3s var(--ease),border-color .3s}
.menu::before{top:6px;left:6px;border-width:1.5px 0 0 1.5px;border-color:var(--cyan)}
.menu::after{bottom:6px;right:6px;border-width:0 1.5px 1.5px 0;border-color:var(--orange)}
.menu:hover::before{transform:translate(-2px,-2px)}
.menu:hover::after{transform:translate(2px,2px)}
.menu__lines{position:absolute;left:14px;top:17px;width:16px;height:10px}
.menu__lines i{position:absolute;left:0;width:16px;height:1.5px;background:var(--text);border-radius:1px;transition:transform .3s var(--ease),top .3s var(--ease)}
.menu__lines i:first-child{top:1px}
.menu__lines i:last-child{top:7px}
.menu[aria-expanded="true"]::before{transform:translate(-2px,-2px);border-color:var(--orange)}
.menu[aria-expanded="true"]::after{transform:translate(2px,2px);border-color:var(--cyan)}
.menu[aria-expanded="true"] .menu__lines i:first-child{top:4px;transform:rotate(45deg)}
.menu[aria-expanded="true"] .menu__lines i:last-child{top:4px;transform:rotate(-45deg)}
.drawer .btn{color:#031018;font:600 16px/1 var(--sans);letter-spacing:0}