/* QuickDry LA — sample B: storm / night. Self-hosted fonts (preloaded in index.html), no external resources. */
@font-face{font-family:"IBM Plex Mono";src:url(assets/fonts/plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Albert Sans";src:url(assets/fonts/albert-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --void:#03060d; --night:#060b18; --deep:#0a1428; --slate:#101d38; --steel:#1b2c4f;
  --cold:#2b6cff; --cyan:#2bd8ff; --ice:#9fd8ff; --mist:#c3d4ee; --white:#f4f9ff;
  /* solid CTA blue: white text on it stays >= 4.5:1 (--cold is only ~4.2:1) */
  --cta:#2160ea; --cta-hover:#1a4ed8;
  --warn:#ff6b3d;
  --hair:rgb(159 216 255 / .14); --hair-strong:rgb(159 216 255 / .32);
  --display:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --body:"Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pad:clamp(20px, 5vw, 64px);
  --max:1240px;
  --nav:64px;
  --bar:76px;
  --r:18px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;max-width:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 16px)}
body{
  margin:0;background:var(--void);color:var(--white);
  font:400 1.0625rem/1.6 var(--body);
  overflow-x:clip;
  background-image:radial-gradient(1200px 700px at 80% -10%, rgb(43 108 255 / .10), transparent 60%);
}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:200;background:var(--white);color:var(--void);padding:12px 16px;font-weight:700;border-radius:10px}
.skip:focus{top:12px}
.wrap{width:min(100% - 2*var(--pad), var(--max));margin-inline:auto}
.mono{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}

.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none;
  box-shadow:0 0 0 3px rgb(255 107 61 / .2), 0 0 12px rgb(255 107 61 / .6)}
.motion .live{animation:blink 2s steps(1,end) infinite}
@keyframes blink{50%{opacity:.3}}

/* ---------- glow CTA ---------- */
.glow{position:relative;isolation:isolate}
.glow::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1;opacity:.55;
  box-shadow:0 0 0 1px rgb(43 216 255 / .55), 0 0 28px 2px rgb(43 216 255 / .45), 0 0 60px 8px rgb(43 108 255 / .35);
  transition:opacity .3s}
.fx .glow::after{animation:glow 4s ease-in-out infinite}
.glow:hover::after,.glow:focus-visible::after{opacity:1;animation:none}
@keyframes glow{0%,100%{opacity:.35}50%{opacity:.85}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;border-radius:999px;
  background:linear-gradient(135deg, var(--cta), var(--cta-hover) 60%, #1238a8);color:var(--white);text-decoration:none;font-weight:700;font-size:1.0625rem;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .2)}
.btn svg{width:20px;height:20px}
.btn:hover{background:linear-gradient(135deg, #2565f0, var(--cta))}
.btn-ghost{background:rgb(10 20 40 / .6);border:1px solid var(--hair-strong);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-ghost svg{color:var(--cyan)}
.btn-ghost small{font-size:.72rem;color:var(--ice);letter-spacing:.14em}
.btn-ghost:hover{background:rgb(27 44 79 / .8)}
.cta-strip{margin-top:clamp(36px, 6vw, 56px);display:flex;justify-content:center}

/* ---------- navbar ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgb(3 6 13 / .72);border-bottom:1px solid var(--hair);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.nav-row{display:flex;align-items:center;gap:12px;min-height:var(--nav)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-width:0}
.brand-drop{width:18px;height:22px;fill:var(--cyan);filter:drop-shadow(0 0 6px rgb(43 216 255 / .7))}
.brand b{font:800 1.3rem/1 var(--display);letter-spacing:-.04em}
.brand-tag{display:none;font-size:.8rem;color:var(--mist);padding-left:12px;border-left:1px solid var(--hair-strong)}
.nav-links{display:none}
.nav-live{display:none;align-items:center;gap:8px;font-size:.7rem;color:var(--ice)}
.nav-call{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;text-decoration:none;
  background:var(--cta);color:var(--white);font:500 .95rem/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.nav-call svg{width:18px;height:18px}
.nav-call:hover{background:var(--cta-hover)}
.nav-call-num{display:none}
@media (min-width:400px){.nav-call-num{display:inline}}
.menu-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--hair-strong);background:rgb(16 29 56 / .6);color:var(--white);cursor:pointer;padding:0;flex:none}
.menu-icon{display:grid;gap:6px;width:20px}
.menu-icon i{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease)}
.menu-btn[aria-expanded="true"] .menu-icon i:first-child{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-icon i:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ---------- full-screen menu (mobile) ---------- */
.menu{position:fixed;inset:0;z-index:55;padding:calc(var(--nav) + 24px) var(--pad) calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;overflow-y:auto;
  background:linear-gradient(180deg, rgb(6 11 24 / .98), rgb(3 6 13 / .99))}
.menu[hidden]{display:none}
.menu-sky{position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:radial-gradient(600px 300px at 20% 10%, rgb(43 108 255 / .25), transparent 70%), radial-gradient(500px 260px at 90% 80%, rgb(43 216 255 / .12), transparent 70%)}
.menu-links{position:relative;display:grid}
.menu-links a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair);text-decoration:none;
  font:800 clamp(2rem, 10vw, 3.4rem)/1.05 var(--display);letter-spacing:-.04em}
.menu-links a .mono{font-size:.75rem;color:var(--cyan);letter-spacing:.14em;font-weight:500}
.menu-links a:hover{color:var(--ice)}
.menu-call{position:relative;display:block;padding:20px 22px;border-radius:var(--r);background:var(--cta);color:var(--white);text-decoration:none}
.menu-call .mono{display:flex;align-items:center;gap:8px;font-size:.72rem}
.menu-call b{display:block;margin-top:8px;font:500 clamp(1.8rem, 9vw, 2.6rem)/1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.motion .menu:not([hidden]) .menu-links a{animation:menuIn .5s var(--ease) both}
.motion .menu:not([hidden]) .menu-links a:nth-child(2){animation-delay:.04s}
.motion .menu:not([hidden]) .menu-links a:nth-child(3){animation-delay:.08s}
.motion .menu:not([hidden]) .menu-links a:nth-child(4){animation-delay:.12s}
.motion .menu:not([hidden]) .menu-links a:nth-child(5){animation-delay:.16s}
@keyframes menuIn{from{opacity:0;transform:translateY(16px)}}
body.menu-open{overflow:hidden}

/* ---------- hero + storm sky ---------- */
.hero{position:relative;padding:28px 0 48px;overflow:hidden;isolation:isolate;min-height:min(100svh, 980px)}
.sky{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg, #02040a 0%, #061028 45%, #0a1836 75%, var(--void) 100%)}
.sky-layer{position:absolute;inset:-10% -6%}
.fx .sky-layer{will-change:transform}
.sky-glow{background:radial-gradient(60% 40% at 70% 18%, rgb(43 108 255 / .28), transparent 70%), radial-gradient(40% 30% at 15% 30%, rgb(43 216 255 / .10), transparent 70%)}
.clouds{background-repeat:repeat-x}
.clouds-far{opacity:.7;
  background-image:
    radial-gradient(closest-side, rgb(60 86 140 / .55), transparent),
    radial-gradient(closest-side, rgb(40 62 112 / .6), transparent),
    radial-gradient(closest-side, rgb(52 76 128 / .5), transparent),
    radial-gradient(closest-side, rgb(34 54 100 / .55), transparent);
  background-size:520px 200px, 680px 240px, 440px 170px, 760px 260px;
  background-position:0 6%, 300px 0, 640px 12%, 900px 4%}
.clouds-near{top:auto;bottom:-6%;height:60%;opacity:.9;
  background-image:
    radial-gradient(closest-side, rgb(6 12 28 / .95), transparent),
    radial-gradient(closest-side, rgb(10 18 38 / .9), transparent),
    radial-gradient(closest-side, rgb(4 8 20 / .95), transparent);
  background-size:700px 260px, 900px 300px, 600px 240px;
  background-position:0 100%, 420px 110%, 980px 95%}
/* clouds no longer animate background-position (a full-hero repaint every frame); they move with the
   camera drift / parallax transforms in script.js, and the drifting haze lives on the fog canvas */
.rain{inset:0;width:100%;height:100%;opacity:.8}
.fog{inset:0;width:100%;height:100%;opacity:.9}
.flash{inset:0;opacity:0;background:radial-gradient(70% 50% at var(--fx,70%) 10%, rgb(190 235 255 / .45), rgb(43 216 255 / .08) 50%, transparent 75%)}
.flash.on{animation:flash 1.1s ease-out}
@keyframes flash{0%{opacity:0}6%{opacity:.9}12%{opacity:.15}20%{opacity:.6}100%{opacity:0}}
.sky-fade{position:absolute;inset:auto 0 0 0;height:10%;background:linear-gradient(180deg, transparent, var(--void))}
/* reduced motion: no lightning; script.js keeps a slower, sparser shower and slow fog. Phones get the full storm. */
html:not(.fx) .flash{display:none}

.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;grid-template-areas:"copy" "call" "trust" "scene"}
.hero-copy{grid-area:copy;padding-top:12px}
.status{display:flex;align-items:center;gap:10px;font-size:.75rem;margin-bottom:16px}
.status span+span{color:var(--ice)}
.hero h1{font-size:clamp(2.6rem, 12vw, 6.4rem);max-width:12ch;
  background:linear-gradient(180deg, #ffffff 30%, #a9cfff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgb(43 108 255 / .25)}
.promise{margin-top:18px;font-size:1.125rem;color:var(--mist);max-width:44ch}
.promise strong{color:var(--white);font-weight:650}

/* call block */
.call{display:block;text-decoration:none;color:var(--white);border-radius:24px;padding:18px 20px 16px;
  background:linear-gradient(140deg, rgb(33 96 234 / .95), rgb(18 56 168 / .95) 55%, rgb(10 30 90 / .95));
  border:1px solid rgb(159 216 255 / .35);box-shadow:inset 0 1px 0 rgb(255 255 255 / .22), 0 30px 80px -30px rgb(43 108 255 / .9)}
.hero .call{grid-area:call}
.call-top,.call-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.7rem;letter-spacing:.18em}
.call-top span,.call-foot span{white-space:nowrap}
.call-top span:last-child{display:flex;align-items:center;gap:8px}
.call-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.call-num{display:block;font:500 clamp(2rem, 10.4vw, 7rem)/1.05 var(--mono);letter-spacing:-.03em;margin:10px 0;white-space:nowrap;font-variant-numeric:tabular-nums;
  text-shadow:0 0 30px rgb(43 216 255 / .5)}
.call-key{display:none}
.call-rule{display:block;height:1px;background:linear-gradient(90deg, rgb(255 255 255 / .7), rgb(43 216 255 / .3), transparent)}
.call-foot{margin-top:10px;color:var(--white)}
.call:hover{border-color:var(--cyan)}
.call:active{translate:0 1px}
@media (max-width:360px){.call-top,.call-foot{font-size:.6rem;letter-spacing:.1em}.call{padding-inline:14px}}

.trust{grid-area:trust;display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.trust strong{font-weight:700}
.trust a{color:var(--ice);text-underline-offset:3px;display:inline-block;padding:12px 0}
.chk{display:inline-flex;align-items:center;gap:8px}
.chk svg{width:16px;height:16px;color:var(--cyan)}

.scene{grid-area:scene;aspect-ratio:480/290;border-radius:var(--r);padding:10px;background:rgb(6 11 24 / .55);border:1px solid var(--hair);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.scene svg{width:100%;height:100%}
.scene :is(.sc-wet,.sc-pud,.sc-fill,.sc-tank,.sc-rot){transform-box:fill-box}
.sc-wet{transform-origin:50% 100%}
.sc-pud{transform-origin:50% 50%}
.sc-fill{transform-origin:0 50%}
.sc-tank{transform-origin:50% 100%}
.sc-rot{transform-origin:50% 50%}
.fx .sc-wet{animation:dWet 10s infinite}
.fx .sc-pud{animation:dPud 10s infinite}
.fx .sc-fill{animation:dFill 10s infinite}
.fx .sc-tank{animation:dTank 10s infinite}
.fx .sc-rot{animation:spin .7s linear infinite}
.fx .sc-air path{animation:dash .9s linear infinite}
.fx .sc-dtxt{animation:dDry 10s infinite}
.scene.off *{animation-play-state:paused!important}
@keyframes spin{to{rotate:360deg}}
@keyframes dash{to{stroke-dashoffset:-32}}
@keyframes dWet{0%,10%{scale:1 1;opacity:1}68%,88%{scale:1 .07;opacity:1}92%{scale:1 .07;opacity:0}93%{scale:1 1;opacity:0}100%{scale:1 1;opacity:1}}
@keyframes dPud{0%,10%{scale:1;opacity:1}62%{scale:.08 .3;opacity:0}93%{scale:1;opacity:0}100%{scale:1;opacity:1}}
@keyframes dFill{0%,8%{scale:0 1}68%,88%{scale:1 1}100%{scale:0 1}}
@keyframes dTank{0%,8%{scale:1 .14}68%,88%{scale:1 .86}97%,100%{scale:1 .14}}
@keyframes dDry{0%,64%,92%,100%{opacity:.6}70%,88%{opacity:1}}
/* static scene rests in its dry state */
html:not(.fx) .sc-wet{scale:1 .07}
html:not(.fx) .sc-pud{opacity:0}
html:not(.fx) .sc-tank{scale:1 .86}

/* ---------- 3D tilt cards (mouse hover, touch press, device orientation) ---------- */
.fx .tilt{transform:perspective(900px) rotateX(calc(var(--rx,0deg) + var(--gx,0deg))) rotateY(calc(var(--ry,0deg) + var(--gy,0deg))) translateZ(0);transform-style:preserve-3d;
  transition:transform .5s var(--ease);will-change:transform}
.fx .tilt.tilting{transition:transform .08s linear}
.card{position:relative;border-radius:var(--r);background:linear-gradient(160deg, rgb(27 44 79 / .55), rgb(10 20 40 / .75));
  border:1px solid var(--hair);box-shadow:inset 0 1px 0 rgb(159 216 255 / .08), 0 24px 60px -30px rgb(0 0 0 / .8)}
.card.tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgb(43 216 255 / .14), transparent 70%)}
.card.tilt:hover::before,.card.tilt.tilting::before{opacity:1}
.card:hover{border-color:var(--hair-strong)}

/* ---------- section scaffolding ---------- */
.sec{position:relative;padding:clamp(72px, 11vw, 140px) 0}
.sec + .sec::before{content:"";position:absolute;top:0;left:50%;width:min(100% - 2*var(--pad), var(--max));translate:-50% 0;height:1px;
  background:linear-gradient(90deg, transparent, var(--hair-strong), transparent)}
.chap{display:flex;align-items:center;gap:14px;font-size:.74rem;color:var(--cyan);margin-bottom:20px}
.chap::before{content:"";width:22px;height:1px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.chap-center{justify-content:center}
.sec h2{font-size:clamp(2.1rem, 8vw, 4.4rem);max-width:16ch}
.lead{margin-top:18px;color:var(--mist);font-size:1.15rem;max-width:56ch}

/* 01 now */
.now{background:linear-gradient(180deg, var(--void), var(--night))}
.now-grid{display:grid;gap:28px;margin-top:36px}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;gap:8px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hair);font-size:1.125rem;line-height:1.45;color:var(--mist)}
.steps li::before{content:counter(s, decimal-leading-zero);font:500 .9rem/1 var(--mono);color:var(--cyan);letter-spacing:.08em}
.steps strong{color:var(--white);font-weight:700}
.burst-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;margin-top:22px;padding:16px 20px;border-radius:14px;
  border:1px dashed var(--hair-strong);color:var(--mist);text-decoration:none;line-height:1.4}
.burst-cta .mono{display:block;font-size:.72rem;color:var(--cyan);margin-bottom:4px}
.burst-go{flex:none;font:800 .95rem/1 var(--display);color:var(--white);letter-spacing:-.01em}
.burst-cta:hover{border-style:solid;border-color:var(--cyan);background:rgb(43 216 255 / .06)}
.ac{align-self:start;padding:24px}
.ac .mono{font-size:.72rem;color:var(--warn)}
.ac h3{font-size:1.4rem;margin:12px 0 10px;letter-spacing:-.02em}
.ac > p:not(.mono){color:var(--mist)}
.ac .btn{width:100%;margin-top:20px}

/* 02 services */
.svc-grid{display:grid;gap:16px;margin-top:44px;perspective:1200px}
.svc{padding:26px 22px}
.svc svg{width:44px;height:44px;color:var(--cyan);margin-bottom:22px;filter:drop-shadow(0 0 8px rgb(43 216 255 / .45));transform:translateZ(30px)}
.svc h3{font-size:1.35rem;letter-spacing:-.02em;transform:translateZ(20px)}
.svc p{margin-top:10px;color:var(--mist);font-size:1rem}
.svc .tag{margin-top:18px;font-size:.66rem;color:var(--ice);letter-spacing:.14em;padding-top:14px;border-top:1px solid var(--hair)}

/* 03 pays */
.pays{background:radial-gradient(80% 60% at 0% 0%, rgb(43 108 255 / .12), transparent 70%), var(--night)}
.pays-grid{display:grid;gap:32px;margin-top:40px}
.payers{margin:0;padding:0;list-style:none}
.payers li{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:18px 0;border-bottom:1px solid var(--hair)}
.payers .mono{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--hair-strong);font-size:.75rem;color:var(--cyan)}
.payers b{font:700 1.2rem/1.25 var(--display);letter-spacing:-.02em}
.payers span:not(.mono){color:var(--mist)}
.flow{display:grid;gap:12px;align-self:start}
.flow .card{padding:22px}
.flow .mono{font-size:.68rem;color:var(--cyan)}
.flow h3{font-size:1.15rem;margin:10px 0 6px;letter-spacing:-.015em}
.flow p:not(.mono){color:var(--mist)}
.not-pa{margin-top:32px;padding:18px 22px;border-radius:14px;border-left:3px solid var(--cyan);background:rgb(43 216 255 / .07);font-size:1.0625rem;max-width:62ch;color:var(--mist)}
.not-pa strong{color:var(--white)}

/* 04 process */
.proc-grid{display:grid;gap:44px;margin-top:44px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 30px 56px}
.timeline li::before{content:attr(data-n);position:absolute;left:0;top:0;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--cyan);font:500 .8rem/1 var(--mono);background:var(--void);box-shadow:0 0 14px rgb(43 216 255 / .35)}
.timeline li:not(:last-child)::after{content:"";position:absolute;left:18px;top:36px;bottom:0;width:1px;background:linear-gradient(180deg, var(--cyan), transparent)}
.timeline h3{font-size:1.2rem;line-height:1.3;letter-spacing:-.015em;padding-top:6px}
.timeline p{color:var(--mist);margin-top:6px}
.chart{margin:0;padding:22px;color:var(--ice);align-self:start}
.chart-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.68rem;margin-bottom:16px}
.chip{color:var(--white);border:1px solid var(--hair-strong);border-radius:999px;padding:5px 10px}
.bars-plot{position:relative;height:230px;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,4vw,36px);align-items:end;
  border-bottom:1px solid var(--hair-strong);padding-top:28px;
  background:repeating-linear-gradient(0deg, transparent 0 calc(25% - 1px), var(--hair) calc(25% - 1px) 25%)}
.bar{height:calc(var(--v) / 40 * 100%);position:relative;border-radius:8px 8px 0 0;
  background:linear-gradient(180deg, var(--cyan), rgb(43 108 255 / .5));box-shadow:0 0 24px -4px rgb(43 216 255 / .5)}
.bar:first-of-type{background:linear-gradient(180deg, var(--cold), rgb(43 108 255 / .35))}
.bar i{position:absolute;bottom:100%;left:0;right:0;text-align:center;padding-bottom:6px;font:500 .95rem/1 var(--mono);font-style:normal;color:var(--white)}
.goal{position:absolute;left:0;right:0;bottom:calc(12 / 40 * (100% - 28px));border-top:2px dashed var(--white);z-index:1;opacity:.85}
.legend{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:14px;font-size:.72rem;color:var(--white)}
.legend .dash{width:28px;border-top:2px dashed var(--white)}
.bars-x{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,4vw,36px);text-align:center;font-size:.7rem;margin-top:10px}
.chart figcaption{margin-top:14px;font-size:.95rem;color:var(--mist)}
/* bars fill from the floor while their labels count up (script.js) to the printed values */
.js.motion .bars-plot .bar{height:0;transition:height 1.2s var(--ease)}
.js.motion .bars-plot .bar i{opacity:0;transition:opacity .3s}
.js.motion .bars-plot.in .bar{height:calc(var(--v) / 40 * 100%)}
.js.motion .bars-plot.in .bar i{opacity:1}
.js.motion .bars-plot .goal{transform-origin:0 50%;scale:0 1;transition:scale 1s var(--ease) 1.2s}
.js.motion .bars-plot.in .goal{scale:1 1}
.js.motion .bars-plot .bar:nth-child(3),.js.motion .bars-plot .bar:nth-child(3) i{transition-delay:.12s}
.js.motion .bars-plot .bar:nth-child(4),.js.motion .bars-plot .bar:nth-child(4) i{transition-delay:.24s}
.js.motion .bars-plot .bar:nth-child(5),.js.motion .bars-plot .bar:nth-child(5) i{transition-delay:.36s}

/* 05 rebuild */
.rb-poster{padding:28px 20px 32px;overflow:hidden;
  background:linear-gradient(160deg, rgb(43 108 255 / .14), rgb(6 11 24 / .9) 60%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgb(159 216 255 / .05) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgb(159 216 255 / .05) 31px 32px)}
.rb-rail{display:none}
.rb-grid{display:grid;gap:24px}
.rb-art{margin:0}
.rb-art svg{width:100%;height:auto;aspect-ratio:452/448}
.rb-studs{stroke:var(--mist);stroke-opacity:.7;stroke-width:1.5}
.rb-cab{stroke:var(--cyan);stroke-width:2;filter:drop-shadow(0 0 4px rgb(43 216 255 / .6))}
.rb-floor{stroke:var(--cold);stroke-opacity:.6;stroke-width:1.1}
.rb-legend{display:flex;gap:18px;margin-top:10px;font-size:.7rem}
.rb-legend span{display:flex;align-items:center;gap:8px}
.rb-legend span::before{content:"";width:16px;height:2px;background:var(--mist)}
.rb-legend span:nth-child(2)::before{background:var(--cyan)}
.rb-legend span:nth-child(3)::before{background:var(--cold)}
.rebuild h2{font-size:clamp(3rem, 14vw, 7rem);letter-spacing:-.05em;max-width:none;
  background:linear-gradient(180deg, #fff, #8fbaff);-webkit-background-clip:text;background-clip:text;color:transparent}
.rb-sub{margin-top:16px;font-weight:700;font-size:1.35rem;line-height:1.3;color:var(--ice)}
.rb-line{margin-top:10px;font-size:1.125rem;color:var(--mist)}
.rb-micro{margin-top:28px;font-size:.76rem;color:var(--white)}
.js.motion .rb-art path{stroke-dasharray:3000;stroke-dashoffset:3000}
.js.motion .rb-art.in path{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s cubic-bezier(.45,.05,.25,1)}
.js.motion .rb-art.in .rb-cab path{transition-delay:.6s}
.js.motion .rb-art.in .rb-floor path{transition-delay:1.1s}

/* 06 area */
.area-grid{display:grid;gap:28px;margin-top:36px}
.cities{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cities li{padding:14px 16px;border-radius:12px;border:1px solid var(--hair);background:rgb(16 29 56 / .4);font-weight:600;display:flex;align-items:center;gap:10px;transition:border-color .3s, box-shadow .3s}
.cities li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);flex:none}
.cities li:hover{border-color:var(--hair-strong);box-shadow:0 0 24px -8px rgb(43 216 255 / .5)}
.ask{font-size:1.2rem;color:var(--mist)}
.ask a{color:var(--white);font-weight:700;text-underline-offset:5px;text-decoration-color:var(--cyan);display:inline-block;padding:12px 0}

/* 07 credentials */
.cred-grid{display:grid;gap:32px}
.spec{margin:0;padding:6px 22px}
.spec div{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--hair)}
.spec div:last-child{border-bottom:0}
.spec dt{font-size:.7rem;color:var(--cyan)}
.spec dd{margin:0;font-size:1.1rem;font-weight:500}
.spec dd a{color:var(--ice);font-size:1rem;text-underline-offset:3px;margin-left:6px;white-space:nowrap;display:inline-block;padding:12px 0}

/* 08 faq */
.faq{margin-top:32px;max-width:860px;display:grid;gap:10px}
.faq details{border-radius:14px;border:1px solid var(--hair);background:rgb(10 20 40 / .55);padding:0 20px;transition:border-color .3s, background .3s}
.faq details[open]{border-color:var(--hair-strong);background:rgb(16 29 56 / .6)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:12px 0;font:700 1.125rem/1.35 var(--body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 1.4rem/1 var(--mono);color:var(--cyan);flex:none;width:28px;text-align:center;transition:rotate .3s var(--ease)}
.faq details[open] summary::after{rotate:45deg}
.faq p{color:var(--mist);padding:0 0 20px;max-width:64ch}

/* 09 final */
.final{text-align:center;overflow:hidden;isolation:isolate}
.final-sky{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(80% 70% at 50% 0%, rgb(43 108 255 / .35), transparent 70%), radial-gradient(50% 40% at 50% 100%, rgb(43 216 255 / .12), transparent 70%), var(--night)}
.final-drop{width:44px;height:53px;margin:0 auto 20px;fill:var(--cyan);filter:drop-shadow(0 0 14px rgb(43 216 255 / .8))}
.final h2{margin-inline:auto;font-size:clamp(1.9rem, 6.4vw, 3.6rem);max-width:20ch}
.final .call{max-width:900px;margin:36px auto 0;text-align:left}
.final .call-num{font-size:clamp(2rem, 10.4vw, 5.4rem)}
.final-sub{margin-top:22px;color:var(--mist)}

/* ---------- footer (large type) ---------- */
.foot{position:relative;padding:56px 0 40px;border-top:1px solid var(--hair);color:var(--mist);font-size:.98rem;overflow:hidden}
.foot-mark{display:block;text-decoration:none;line-height:.8}
.foot-mark span{display:block;font:900 clamp(4.2rem, 22vw, 18rem)/.82 var(--display);letter-spacing:-.07em;
  background:linear-gradient(180deg, rgb(159 216 255 / .9), rgb(43 108 255 / .15) 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-grid{display:grid;gap:18px;margin-top:36px;padding-top:24px;border-top:1px solid var(--hair)}
.foot-grid p + p{margin-top:6px}
.foot strong{color:var(--white);font-weight:600}
.foot a{text-underline-offset:3px;display:inline-block;padding:12px 0}
.foot-contact a{color:var(--white)}
.foot-svc{font-size:.68rem;margin-top:14px!important;color:var(--ice)}

/* ---------- sticky mobile call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background:rgb(3 6 13 / .88);border-top:1px solid var(--hair-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;border-radius:999px;
  background:linear-gradient(135deg, var(--cta), #1238a8);color:var(--white);text-decoration:none;font:700 1.125rem/1 var(--body)}
.callbar a svg{width:20px;height:20px}
.callbar .tnum{font-family:var(--mono);font-weight:500}
.callbar small{font:500 .75rem/1 var(--mono);letter-spacing:.14em}
body{padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom))}

/* ---------- reveal ---------- */
.js.motion .reveal{opacity:0;translate:0 18px;transition:opacity .7s var(--ease) calc(var(--i,0) * 80ms), translate .7s var(--ease) calc(var(--i,0) * 80ms), transform .5s var(--ease)}
.js.motion .reveal.tilting{transition:opacity .7s var(--ease), translate .7s var(--ease), transform .08s linear}
.js.motion .reveal.in{opacity:1;translate:0 0}

/* ---------- ≥ 600 ---------- */
@media (min-width:600px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .cities{grid-template-columns:repeat(3, 1fr)}
  .spec div{grid-template-columns:170px 1fr;align-items:baseline}
  .foot-grid{grid-template-columns:1fr 1fr;column-gap:48px}
}

/* ---------- desktop ≥ 900 ---------- */
@media (min-width:900px){
  :root{--nav:72px}
  body{padding-bottom:0}
  .callbar{display:none}
  .menu-btn{display:none}
  .menu{display:none!important}
  .brand-tag{display:inline}
  .nav-row{gap:28px}
  .nav-links{display:flex;gap:26px;font-size:.95rem}
  .nav-links a{text-decoration:none;color:var(--mist);padding:10px 0;position:relative}
  .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--cyan);scale:0 1;transition:scale .3s var(--ease);box-shadow:0 0 6px var(--cyan)}
  .nav-links a:hover{color:var(--white)}
  .nav-links a:hover::after{scale:1 1}
  .nav-call{min-height:48px;padding:0 20px;font-size:1rem}

  .hero{padding:56px 0 72px;display:flex;align-items:center}
  .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"copy scene" "call call" "trust trust";column-gap:56px;row-gap:28px;align-items:center}
  .hero h1{font-size:clamp(3.6rem, 6.4vw, 6.6rem)}
  .promise{font-size:1.3rem}
  .call{padding:24px 34px 22px;border-radius:28px}
  .call-top,.call-foot{font-size:.78rem}
  .call-num{font-size:clamp(3.8rem, 7.6vw, 7.2rem)}
  .call-key{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;flex:none;width:clamp(150px, 14vw, 190px);aspect-ratio:1/.62;
    border-radius:18px;background:var(--white);color:var(--void);font:800 1.15rem/1 var(--display);letter-spacing:-.01em;box-shadow:0 0 40px -6px rgb(43 216 255 / .7)}
  .call-key svg{width:34px;height:34px;color:var(--cold)}
  .call:hover .call-key{background:#dff4ff}
  .final .call-key{width:150px}

  .now-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:start}
  .svc-grid{grid-template-columns:repeat(4, 1fr)}
  .pays-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:start}
  .proc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px}
  .rb-poster{padding:48px 56px 52px 84px}
  .rb-rail{display:block;position:absolute;left:30px;top:100px;writing-mode:vertical-rl;font-size:.7rem;color:var(--ice)}
  .rb-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
  .area-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:end}
  .cred-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
  .foot{padding-top:80px}
}

/* =====================================================================
   Premium layer: type polish, grain, glass, split headlines, hero entrance + exit,
   marquee, scroll progress, pinned process story, glow/press, cursor glow, page leave.
   Hidden start states only apply under .js.motion and only to elements script.js has
   prepared (.reveal / .split), so content stays visible if JS fails.
   ===================================================================== */
@view-transition{navigation:auto}
@property --rr{syntax:"<length>";inherits:false;initial-value:160px}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3{font-kerning:normal}
.hero h1{line-height:.96;letter-spacing:-.045em;padding-bottom:.12em;margin-bottom:-.12em}
.rebuild h2{padding-bottom:.12em;margin-bottom:-.12em}
.sec h2{letter-spacing:-.04em}
.lead,.promise{text-wrap:pretty}
::selection{background:rgb(43 216 255 / .35);color:var(--white)}

/* film grain (inline SVG noise, no request) */
body::before{content:"";position:fixed;inset:-25%;z-index:90;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px}
.motion body::before{animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-6%,4%,0)}40%{transform:translate3d(5%,-7%,0)}60%{transform:translate3d(-3%,8%,0)}80%{transform:translate3d(7%,2%,0)}100%{transform:translate3d(-4%,-5%,0)}}

/* scroll progress under the nav */
.js .nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;transform-origin:0 50%;scale:var(--sp,0) 1;
  background:linear-gradient(90deg, var(--cold), var(--cyan));box-shadow:0 0 10px rgb(43 216 255 / .7)}

/* hero: cinematic vignette, staged entrance, scroll exit */
.sky::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 38%, transparent 55%, rgb(2 4 10 / .75) 100%)}
.js.motion .sky{animation:skyIn 1.8s ease-out backwards}
@keyframes skyIn{from{opacity:0}}
@keyframes rise{from{opacity:0;translate:0 26px}}
.js.motion .hero .status{animation:rise .9s var(--ease) .1s backwards}
.js.motion .hero .scene{animation:rise 1.1s var(--ease) .45s backwards}
.js.motion .hero .promise{animation:rise .9s var(--ease) .7s backwards}
.js.motion .hero .call{animation:rise 1s var(--ease) .85s backwards}
.js.motion .hero .trust{animation:rise .9s var(--ease) 1s backwards}
.fx .hero-copy{translate:0 calc(var(--hs,0) * -70px);opacity:calc(1 - var(--hs,0) * .75)}
.fx .hero .scene{translate:0 calc(var(--hs,0) * -36px)}
.scene{box-shadow:inset 0 1px 0 rgb(159 216 255 / .08), 0 40px 90px -40px rgb(43 108 255 / .6)}

/* split headlines: words (h2) and characters (h1) rise in; textContent is unchanged */
.split .w{display:inline-block;white-space:nowrap}
.split .wi,.split .ch{display:inline-block}
.js.motion .split .wi{opacity:0;translate:0 .55em;
  transition:opacity .8s var(--ease) calc(var(--i) * 55ms), translate .9s var(--ease) calc(var(--i) * 55ms)}
.js.motion .split .ch{opacity:0;translate:0 .42em;filter:blur(10px);
  transition:opacity .7s var(--ease) calc(120ms + var(--i) * 26ms), translate .9s var(--ease) calc(120ms + var(--i) * 26ms), filter .8s var(--ease) calc(120ms + var(--i) * 26ms)}
.js.motion .split.in :is(.wi,.ch){opacity:1;translate:0 0;filter:none}
/* if script.js never runs, the h1 still fades in on its own */
.js.motion .hero h1:not(.split){animation:rise .8s var(--ease) 1.2s backwards}
/* gradient text has to live on each piece once split */
.hero h1.split,.rebuild h2.split{background:none}
.hero h1.split .ch{background:linear-gradient(180deg, #ffffff 30%, #a9cfff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.12em;margin-bottom:-.12em}
.rebuild h2.split .wi{background:linear-gradient(180deg, #fff, #8fbaff);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.12em;margin-bottom:-.12em}

/* marquee (filled by script.js from the footer service line; height reserved up front) */
.marquee{display:none}
.js .marquee{display:flex;align-items:center;position:relative;height:clamp(72px, 10vw, 132px);overflow:hidden;
  border-block:1px solid var(--hair);background:linear-gradient(180deg, rgb(10 20 40 / .55), rgb(3 6 13 / .2));
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)}
.mq-track{display:flex;flex:none;width:max-content}
.mq-group{display:flex;align-items:center;flex:none}
.mq-group span{padding:0 .45em;font:800 clamp(2rem, 5.6vw, 4.6rem)/1 var(--display);letter-spacing:-.045em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgb(159 216 255 / .55)}
.mq-group span:nth-of-type(2n){color:var(--white);-webkit-text-stroke:0;text-shadow:0 0 30px rgb(43 216 255 / .35)}
.mq-group i{display:block;flex:none;width:clamp(14px, 1.5vw, 22px)}
.mq-group svg{width:100%;height:auto;fill:var(--cyan);filter:drop-shadow(0 0 8px rgb(43 216 255 / .8))}
.motion .mq-track{animation:mq 42s linear infinite}
.marquee.off .mq-track,.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translate3d(-50%,0,0)}}

/* glass cards with a specular edge */
.card:not(.rb-poster){background:linear-gradient(160deg, rgb(27 44 79 / .42), rgb(10 20 40 / .62));
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
.card{box-shadow:inset 0 1px 0 rgb(255 255 255 / .07), 0 30px 70px -36px rgb(0 0 0 / .9)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(145deg, rgb(159 216 255 / .5), rgb(159 216 255 / .06) 35%, transparent 60%, rgb(43 216 255 / .28));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card:hover{box-shadow:inset 0 1px 0 rgb(255 255 255 / .1), 0 30px 70px -36px rgb(0 0 0 / .9), 0 0 70px -24px rgb(43 216 255 / .45)}

/* glow buttons: pointer spotlight, press ripple, magnetic pull (script.js sets translate) */
.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(var(--rr) circle at var(--mx,50%) var(--my,50%), rgb(255 255 255 / .26), transparent 70%)}
@media (hover:hover) and (pointer:fine){.glow:hover::before{opacity:1}}
.glow.press::before{animation:press .7s ease-out}
@keyframes press{from{--rr:12px;opacity:1}to{--rr:420px;opacity:0}}
.btn,.nav-call{transition:translate .45s var(--ease), background .3s}

/* 01: AC card pins beside the steps; 04: chart pins while the timeline tells the job */
.js .timeline{position:relative}
.js .timeline::before{content:"";position:absolute;left:17px;top:18px;bottom:30px;width:3px;border-radius:3px;pointer-events:none;
  transform-origin:50% 0;scale:1 var(--p,0);background:linear-gradient(180deg, var(--cyan), var(--cold));box-shadow:0 0 14px rgb(43 216 255 / .8)}
.timeline li::before{transition:background .4s, color .4s, box-shadow .4s}
.timeline li.lit::before{background:var(--cyan);color:var(--void);box-shadow:0 0 0 6px rgb(43 216 255 / .15), 0 0 28px rgb(43 216 255 / .8)}
.timeline h3{transition:color .4s}
.js .timeline li:not(.lit) h3{color:var(--mist)}

/* moisture bars: wet sheen on the fill */
.bar::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgb(255 255 255 / .45), transparent 12%), repeating-linear-gradient(180deg, transparent 0 14px, rgb(255 255 255 / .07) 14px 16px);
  background-size:100% 100%, 100% 32px}
.motion .bar::after{animation:seep 2.4s linear infinite}
@keyframes seep{to{background-position:0 0, 0 32px}}
.final-sky{inset:-20% 0}

/* cursor glow (desktop pointer) */
.cursor-glow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:3;
  opacity:0;transition:opacity .5s;mix-blend-mode:screen;will-change:transform;
  background:radial-gradient(closest-side, rgb(43 216 255 / .13), rgb(43 108 255 / .06) 45%, transparent)}
.cursor-glow.on{opacity:1}

/* page-leave wipe (same-site links only) */
.curtain{position:fixed;inset:0;z-index:300;pointer-events:none;
  background:radial-gradient(circle at var(--cx,50%) var(--cy,50%), #0b1d42, var(--void) 60%);
  clip-path:circle(0px at var(--cx,50%) var(--cy,50%));transition:clip-path .6s cubic-bezier(.7,0,.2,1)}
.leaving .curtain{clip-path:circle(150vmax at var(--cx,50%) var(--cy,50%));pointer-events:auto}

@media (min-width:900px){
  .ac{position:sticky;top:calc(var(--nav) + 32px)}
  .chart{position:sticky;top:calc(var(--nav) + 40px)}
  .timeline li{padding-bottom:clamp(30px, 16vh, 150px)}
  .timeline li:last-child{padding-bottom:30px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tilt{transform:none!important}
  .flash,.cursor-glow,.curtain{display:none}
  .split .wi,.split .ch{opacity:1!important;translate:none!important;filter:none!important}
}

/* =====================================================================
   Iteration 2: cinematic hero (light bloom behind the call card, lightning flare, glass sheen),
   display type polish, glowing numbered eyebrows, glass / glow pass on cards and section dividers.
   Decorative only: pseudo-elements, no new copy, nothing that changes box sizes.
   ===================================================================== */
/* type: tighter display tracking, optical sizing (SF / variable fonts pick the display cut at large sizes) */
html{font-optical-sizing:auto}
h1,h2,h3{font-optical-sizing:auto;font-synthesis:none}
.hero h1{letter-spacing:-.055em;word-spacing:.02em}
.sec h2{letter-spacing:-.047em}
.rebuild h2{letter-spacing:-.058em}
:is(.svc,.ac,.flow,.timeline) h3{letter-spacing:-.028em}
.promise strong{letter-spacing:-.005em}
.call-num{letter-spacing:-.045em}

/* numbered eyebrows: the number glows, the rule draws in when the eyebrow reveals */
.chap-n{color:#e6f9ff;
  text-shadow:0 0 6px rgb(43 216 255 / .95), 0 0 18px rgb(43 216 255 / .6), 0 0 34px rgb(43 108 255 / .45)}
.chap::before{width:28px;height:2px;border-radius:2px;background:linear-gradient(90deg, transparent, var(--cyan));
  box-shadow:0 0 10px rgb(43 216 255 / .9), 0 0 22px rgb(43 216 255 / .4)}
.js.motion .chap.reveal::before{transform-origin:100% 50%;scale:0 1;transition:scale .9s var(--ease) .15s}
.js.motion .chap.reveal.in::before{scale:1 1}
.fx .chap.in .chap-n{animation:chapGlow 1.6s var(--ease) .2s backwards}
@keyframes chapGlow{from{text-shadow:0 0 0 rgb(43 216 255 / 0);color:var(--cyan)}40%{text-shadow:0 0 10px #fff, 0 0 30px rgb(43 216 255 / 1), 0 0 60px rgb(43 108 255 / .8)}}

/* hero light bloom: sits in the call card's grid cell (no extra track, no layout change), breathes, flares on lightning */
.hero-grid::before,.hero-grid::after{content:"";grid-area:call;position:relative;z-index:0;pointer-events:none;margin:-22% -14%;border-radius:50%}
.hero-grid::before{background:radial-gradient(50% 50% at 50% 52%, rgb(43 108 255 / .5), rgb(43 160 255 / .2) 42%, transparent 70%);opacity:.85}
.hero-grid::after{background:radial-gradient(46% 46% at 50% 50%, rgb(200 236 255 / .35), rgb(43 216 255 / .12) 45%, transparent 70%);opacity:0}
.fx .hero-grid::before{animation:bloom 7s ease-in-out infinite;will-change:transform, opacity}
.fx .hero.bolt .hero-grid::after{animation:flare 1.1s ease-out}
@keyframes bloom{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes flare{0%{opacity:0}8%{opacity:1}16%{opacity:.3}26%{opacity:.8}100%{opacity:0}}
@media (min-width:900px){.hero-grid::before,.hero-grid::after{margin:-14% -6%}}
.fx .hero-copy{will-change:transform, opacity}

/* call card: glass sheen, inner rims */
.call{background:
  linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / 0) 38%),
  radial-gradient(120% 90% at 0% 0%, rgb(120 190 255 / .28), transparent 55%),
  linear-gradient(140deg, rgb(33 96 234 / .95), rgb(18 56 168 / .95) 55%, rgb(10 30 90 / .95));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .32), inset 0 -1px 0 rgb(43 216 255 / .25), 0 30px 80px -30px rgb(43 108 255 / .95), 0 0 0 1px rgb(43 216 255 / .08)}
/* a point of light runs along the card's rule (the rule is 1px tall, so clipping it can't cut off anything) */
.call-rule{position:relative;overflow:hidden}
.call-rule::after{content:"";position:absolute;top:0;bottom:0;left:0;width:22%;pointer-events:none;opacity:0;
  background:linear-gradient(90deg, transparent, #fff 50%, transparent);transform:translateX(-110%)}
.fx .call-rule::after{opacity:1;animation:runner 5.5s cubic-bezier(.5,0,.25,1) 2.6s infinite}
@keyframes runner{0%{transform:translateX(-110%)}45%,100%{transform:translateX(560%)}}

/* cards: deeper glass (specular corner, inner rim, ambient blue glow even without hover) */
.card:not(.rb-poster){background:
  radial-gradient(120% 70% at 0% 0%, rgb(159 216 255 / .09), transparent 55%),
  linear-gradient(160deg, rgb(27 44 79 / .42), rgb(10 20 40 / .62))}
.card{box-shadow:inset 0 1px 0 rgb(255 255 255 / .1), inset 0 0 0 1px rgb(159 216 255 / .03), 0 30px 70px -36px rgb(0 0 0 / .9), 0 0 60px -34px rgb(43 108 255 / .55)}
.card:hover{box-shadow:inset 0 1px 0 rgb(255 255 255 / .12), 0 30px 70px -36px rgb(0 0 0 / .9), 0 0 70px -22px rgb(43 216 255 / .5)}
.scene{background:radial-gradient(120% 80% at 0% 0%, rgb(159 216 255 / .07), transparent 55%), rgb(6 11 24 / .55)}
.faq details,.cities li{box-shadow:inset 0 1px 0 rgb(255 255 255 / .05)}

/* section dividers: glowing hairline with a bright centre node */
.sec + .sec::before{height:1px;background:linear-gradient(90deg, transparent, rgb(159 216 255 / .22) 20%, rgb(43 216 255 / .75) 50%, rgb(159 216 255 / .22) 80%, transparent);
  box-shadow:0 0 14px rgb(43 216 255 / .35)}
.sec + .sec::after{content:"";position:absolute;top:-14px;left:50%;width:min(60vw, 520px);height:28px;translate:-50% 0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgb(43 216 255 / .22), rgb(43 108 255 / .08) 50%, transparent 75%)}

@media (prefers-reduced-motion:reduce){
  .chap.reveal::before{scale:1 1!important}
}


/* mobile overflow fix: grid items and flex children may shrink; phone number scales to the card, never the viewport */
.hero-grid>*,.call,.call-row,.call-top,.call-foot{min-width:0;max-width:100%}
.call{container-type:inline-size;width:100%;overflow:hidden}
.call-top,.call-foot{flex-wrap:wrap;row-gap:4px;font-size:clamp(.56rem,2.9cqi,.78rem);letter-spacing:clamp(.06em,.5cqi,.18em)}
.call-top span,.call-foot span{min-width:0}
.call-num{max-width:100%;font-size:clamp(1.45rem,10cqi,7rem);letter-spacing:-.045em}
.final .call-num{font-size:clamp(1.45rem,10cqi,5.4rem)}
@media (min-width:600px){.call-num{font-size:clamp(2.4rem,9cqi,7.2rem)}.final .call-num{font-size:clamp(2.4rem,9cqi,5.4rem)}}
@supports not (width:1cqi){.call-num{font-size:clamp(1.45rem,8.4vw,3rem)}.call-top,.call-foot{font-size:.62rem;letter-spacing:.08em}}