/* ============================================================================
   MegaStore Wind Systems — styles.css
   Cinematic dark-engineering one-pager. Vanilla CSS, design tokens.
   Tokens by website-designer · layout by website-architect.
============================================================================ */

/* ── TOKENS ───────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds & surfaces */
  --bg-base:#05080F; --bg-deep:#030508; --bg-s1:#070D1A; --bg-s2:#0C1526; --bg-s3:#111E34;
  --bg-panel:rgba(7,13,26,.72);

  /* Electric blue */
  --blue:#2E7BFF; --blue-bright:#4FC3FF; --blue-pale:#A8D4FF; --blue-dim:#1A4A8A;
  --blue-glow:rgba(46,123,255,.28); --blue-glow-soft:rgba(79,195,255,.14);

  /* Text */
  --tx:#E8EEF7; --tx-2:#8FA3BE; --tx-3:#4D6480; --tx-acc:#4FC3FF; --tx-stat:#fff; --tx-on-blue:#05080F;

  /* System / legend */
  --dc:#FF5A5A; --dc-dim:rgba(255,90,90,.20); --ac:#2E7BFF; --comm:#3DCC7E; --comm-dim:rgba(61,204,126,.22);

  /* Borders */
  --bd-hair:rgba(79,195,255,.10); --bd:rgba(79,195,255,.18); --bd-act:rgba(46,123,255,.55);
  --bd-dim:rgba(232,238,247,.07); --bd-glass:rgba(232,238,247,.06);

  /* Gradients */
  --grad-bg:linear-gradient(180deg,#05080F 0%,#07101F 40%,#0A1428 80%,#05080F 100%);
  --grad-hero:radial-gradient(ellipse 120% 70% at 50% 32%,#0A1F45 0%,#05080F 62%);
  --grad-stat:linear-gradient(135deg,#fff 0%,#A8D4FF 100%);
  --grad-progress:linear-gradient(90deg,#2E7BFF,#4FC3FF);
  --grad-ac:linear-gradient(90deg,transparent,#2E7BFF,transparent);
  --grad-dc:linear-gradient(90deg,transparent,#FF5A5A,transparent);

  /* Type */
  --f-head:'Saira','Space Grotesk',system-ui,sans-serif;
  --f-body:'Hanken Grotesk','Inter',system-ui,sans-serif;
  --f-mono:'Martian Mono','JetBrains Mono',ui-monospace,monospace;

  --fs-eyebrow:clamp(.625rem,.55rem + .2vw,.6875rem); --ls-eyebrow:.14em;
  --fs-h1:clamp(2.75rem,1.8rem + 4.2vw,5.5rem);
  --fs-h2:clamp(1.9rem,1.3rem + 2.4vw,3.5rem);
  --fs-h3:clamp(1.3rem,1rem + 1.3vw,1.9rem);
  --fs-stat:clamp(2.6rem,1.9rem + 2.8vw,4.6rem);
  --fs-stat-sm:clamp(1.8rem,1.4rem + 1.6vw,2.6rem);
  --fs-body-lg:clamp(1rem,.92rem + .3vw,1.18rem);
  --fs-body:clamp(.9rem,.84rem + .2vw,1rem);
  --fs-small:.8125rem;
  --lh-head:1.08; --lh-body:1.62; --lh-tight:1.3; --ls-head:-.025em;

  /* Spacing */
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;
  --section-py:clamp(56px,6.3vw,105px); --container-px:clamp(20px,5vw,72px); --container-max:1320px;

  /* Radius */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  /* Shadow / glow */
  --sh-md:0 8px 32px rgba(2,5,12,.55),0 2px 8px rgba(2,5,12,.35);
  --sh-lg:0 24px 64px rgba(2,5,12,.70),0 6px 24px rgba(2,5,12,.45);
  --glow-sm:0 0 16px rgba(46,123,255,.45),0 0 4px rgba(79,195,255,.30);
  --glow-md:0 0 40px rgba(46,123,255,.35),0 0 80px rgba(46,123,255,.15),0 0 8px rgba(79,195,255,.40);
  --glow-cyan:0 0 24px rgba(79,195,255,.50),0 0 8px rgba(79,195,255,.70);
  --glow-red:0 0 14px rgba(255,90,90,.45),0 0 4px rgba(255,90,90,.6);
  --glow-green:0 0 14px rgba(61,204,126,.4),0 0 4px rgba(61,204,126,.6);
  --card-top:inset 0 1px 0 rgba(79,195,255,.12),inset 0 0 0 1px rgba(79,195,255,.07);

  /* Blur / motion */
  --blur-glass:blur(18px) saturate(160%); --blur-sm:blur(8px);
  --dur-fast:150ms; --dur-norm:250ms; --dur-slow:400ms; --dur-reveal:700ms;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-decel:cubic-bezier(0,0,.2,1);

  /* z */
  --z-grain:30; --z-nav:50; --z-progress:60; --z-loader:100;
}

/* ── RESET / BASE ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body); font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--tx); background:var(--bg-base); overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* fixed background gradient + engineering grid */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; background:var(--grad-bg);
}
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(46,123,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,123,255,.05) 1px,transparent 1px),
    linear-gradient(rgba(46,123,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,123,255,.02) 1px,transparent 1px);
  background-size:88px 88px,88px 88px,22px 22px,22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 45%,#000 25%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 65% at 50% 45%,#000 25%,transparent 100%);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer}
::selection{background:rgba(46,123,255,.35);color:#fff}
:focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px;border-radius:var(--r-xs);box-shadow:0 0 0 4px rgba(79,195,255,.15)}
.skip-link{position:fixed;top:8px;left:8px;z-index:200;padding:10px 18px;background:var(--blue);color:var(--tx-on-blue);border-radius:var(--r-sm);font-weight:600;font-size:14px;transform:translateY(-160%);transition:transform var(--dur-norm) var(--ease-out)}
.skip-link:focus{transform:translateY(0)}

/* ── TYPO UTILITIES ───────────────────────────────────────────────────── */
.eyebrow{font-family:var(--f-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--tx-acc)}
.eyebrow--center{display:block;text-align:center}
.micro-label{font-family:var(--f-mono);font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--tx-acc);display:block}
.badge{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--bd-act);border-radius:var(--r-xs);background:rgba(46,123,255,.08);font-family:var(--f-mono);font-size:.6875rem;font-weight:500;letter-spacing:.06em;color:var(--blue-bright);box-shadow:var(--glow-sm);flex-shrink:0}
.accent{color:var(--tx-acc)}

.sec-head{margin-bottom:var(--sp-12);max-width:62ch}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-eyebrow{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.sec-eyebrow--center{justify-content:center}
.sec-title{font-family:var(--f-head);font-weight:700;font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:var(--ls-head);color:var(--tx);text-wrap:balance}
.sec-title--center{margin-inline:auto}
/* merged sub-block (e.g. Top View inside The Vision): smaller heading, tighter top gap */
.sec-head--sub{margin-top:clamp(32px,4vw,56px)}
.sec-title--sub{font-size:var(--fs-h3)}

/* ── LAYOUT ───────────────────────────────────────────────────────────── */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-px)}
.section{position:relative;padding-block:var(--section-py)}
.section--alt{background:linear-gradient(180deg,transparent,rgba(7,13,26,.6) 12%,rgba(7,13,26,.6) 88%,transparent)}

/* ── REVEAL ───────────────────────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out),filter var(--dur-reveal) var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none;filter:none}
[data-reveal-stagger]>*{opacity:0;transform:translateY(22px);filter:blur(5px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out),filter var(--dur-reveal) var(--ease-out)}
[data-reveal-stagger].is-in>*{opacity:1;transform:none;filter:none}

/* ── GLASS / BUTTONS ──────────────────────────────────────────────────── */
.glass{background:var(--bg-panel);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border:1px solid var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-md),var(--card-top)}
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--f-body);font-weight:600;font-size:var(--fs-body);border-radius:var(--r-sm);padding:13px 26px;border:1px solid transparent;transition:all var(--dur-norm) var(--ease-out)}
.btn--primary{background:var(--blue);color:var(--tx-on-blue);box-shadow:var(--glow-sm)}
.btn--primary:hover{background:#3D8AFF;box-shadow:var(--glow-md);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--tx);border-color:var(--bd)}
.btn--ghost:hover{border-color:var(--blue-bright);color:var(--blue-bright);background:rgba(46,123,255,.06)}

/* ── GRAIN / PROGRESS ─────────────────────────────────────────────────── */
.grain{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.02;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;animation:grain 12s steps(6) infinite}
@keyframes grain{0%{background-position:0 0}25%{background-position:64px 32px}50%{background-position:128px 0}75%{background-position:64px -32px}100%{background-position:0 0}}
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:var(--z-progress);background:var(--grad-progress);box-shadow:0 0 10px rgba(79,195,255,.6);transform-origin:left}

/* ── LOADER ───────────────────────────────────────────────────────────── */
.loader{position:fixed;inset:0;z-index:var(--z-loader);background:var(--bg-deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-6);transition:opacity .9s var(--ease-out),visibility .9s}
.loader.hidden{opacity:0;visibility:hidden}
.loader__mark{color:var(--blue-bright);animation:spin 4s linear infinite;filter:drop-shadow(var(--glow-cyan))}
@keyframes spin{to{transform:rotate(360deg)}}
.loader__name{font-family:var(--f-head);font-weight:600;letter-spacing:.04em;color:var(--tx)}
.loader__bar{width:200px;height:1px;background:var(--bd-dim);border-radius:var(--r-pill);overflow:hidden}
.loader__bar span{display:block;height:100%;width:0;background:var(--grad-progress);box-shadow:var(--glow-cyan);transition:width .3s linear}

/* ── NAV ──────────────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);height:64px;display:flex;align-items:center;justify-content:space-between;padding-inline:var(--container-px);
  background:rgba(5,8,15,0);backdrop-filter:blur(0);border-bottom:1px solid transparent;transition:background var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out),backdrop-filter var(--dur-slow)}
.nav.scrolled{background:rgba(5,8,15,.72);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);border-bottom-color:var(--bd-hair)}
.nav__logo{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--f-head);font-weight:500;letter-spacing:.02em;color:var(--tx);font-size:.95rem}
.nav__logo svg{color:var(--blue-bright)}
.nav__logo b{color:var(--blue-bright);font-weight:600}
.nav__dots{display:flex;align-items:center;gap:10px}
.nav__dot{position:relative;width:7px;height:7px;border-radius:var(--r-pill);background:var(--bd-dim);border:none;transition:all var(--dur-norm) var(--ease-out)}
.nav__dot:hover{background:var(--blue-dim)}
.nav__dot.active{width:22px;background:var(--blue-bright);box-shadow:var(--glow-cyan)}
.nav__right{display:flex;align-items:center;gap:14px}
.nav__lang{display:flex;gap:2px;border:1px solid var(--bd);border-radius:var(--r-pill);padding:2px;background:rgba(7,13,26,.55)}
.nav__lang button{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--tx-2);background:transparent;border:none;padding:5px 11px;border-radius:var(--r-pill);cursor:pointer;transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.nav__lang button.active{background:var(--blue);color:var(--tx-on-blue)}
.nav__lang button:hover:not(.active){color:var(--blue-bright)}
.nav__dot span{position:absolute;top:18px;left:50%;transform:translateX(-50%) translateY(4px);font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-pale);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-norm),transform var(--dur-norm)}
.nav__dot:hover span,.nav__dot:focus-visible span{opacity:1;transform:translateX(-50%) translateY(0)}

/* ════════════════ 00 · HERO ════════════════ */
.hero{min-height:100vh;padding:84px 0 40px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;overflow:hidden;background:var(--grad-hero)}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__video{position:relative;height:min(60vh,calc(100vh - 340px),620px);width:auto;max-width:94vw;z-index:1;object-fit:contain;pointer-events:none;mix-blend-mode:screen;transform:translateX(-4%);flex:0 0 auto}
/* hero wind — hand-drawn glowing streams (same as section 01), flowing across the turbine */
.hero__wind{position:absolute;left:0;right:0;top:4%;height:52%;z-index:1;pointer-events:none}
.hero__wind-svg{width:100%;height:100%;display:block}
/* hero wind tuning (hero-scoped, section 01 untouched): raised 5%, cores 50% thinner, all 40% more transparent */
.hero__wind .wind-cores{stroke-width:.75;opacity:.6}
.hero__wind .wind-bloom{opacity:.09}
.hero__wind .wind-glow{opacity:.25}
.hero__vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 30%,rgba(5,8,15,.55) 80%),linear-gradient(180deg,rgba(5,8,15,.4),transparent 25%,transparent 60%,rgba(5,8,15,.85))}
.hero__content{position:relative;z-index:3;margin-top:auto;padding:0 var(--container-px) 24px}
.hero__content .eyebrow{margin-bottom:var(--sp-5)}
.hero__title{font-family:var(--f-head);font-weight:800;font-size:var(--fs-h1);line-height:.98;letter-spacing:-.032em;color:var(--tx-stat);text-shadow:0 0 64px rgba(79,195,255,.30),0 0 26px rgba(46,123,255,.18)}
.hero__sub{margin-top:var(--sp-6);font-size:var(--fs-body-lg);color:var(--tx-2);max-width:30ch;margin-inline:auto}
.hero__stats{display:flex;gap:clamp(20px,4vw,52px);justify-content:center;margin-top:var(--sp-10);flex-wrap:wrap}
.hero__stat{display:flex;flex-direction:column;gap:4px}
.hero__stat b{font-family:var(--f-head);font-weight:700;font-size:var(--fs-stat-sm);color:var(--tx-stat);letter-spacing:-.02em;line-height:1}
.hero__stat span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-2)}
.hero__airflow{position:absolute;top:30%;z-index:2;display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-pale);opacity:.0}
.hero__airflow i{display:block;width:clamp(40px,7vw,90px);height:1px;background:var(--grad-ac)}
.hero__airflow--l{left:clamp(16px,5vw,80px)}
.hero__airflow--r{right:clamp(16px,5vw,80px);flex-direction:row}
.hero__strip{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:14px 0;border-top:1px solid var(--bd-hair);background:linear-gradient(180deg,transparent,rgba(5,8,15,.6));overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.hero__strip-track{display:flex;align-items:center;gap:22px;width:max-content;animation:marquee 24s linear infinite;font-family:var(--f-mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--tx-2)}
.hero__strip-track i{color:var(--blue-bright)}
@keyframes marquee{to{transform:translateX(-50%)}}
.hero__cue{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);z-index:4;display:none;flex-direction:column;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-2)}
.hero__cue svg{animation:bob 1.8s var(--ease-out) infinite;color:var(--blue-bright)}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}

/* ════════════════ 01 · VISION ════════════════ */
.vision{overflow:hidden}
.vision__bg{position:absolute;inset:0;z-index:0;background:
  radial-gradient(ellipse 50% 40% at 80% 20%,rgba(46,123,255,.10),transparent 70%),
  linear-gradient(180deg,transparent,rgba(3,5,8,.4));}
.vision__inner{position:relative;z-index:1}
.vision__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--bd-dim);border:1px solid var(--bd-dim);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--sp-8)}
.vision__item{background:var(--bg-s1);padding:var(--sp-8) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);transition:background var(--dur-norm)}
.vision__item:hover{background:var(--bg-s2)}
.vision__item .v-num{font-family:var(--f-mono);font-size:11px;color:var(--blue-bright);letter-spacing:.1em}
.vision__item b{font-family:var(--f-head);font-weight:500;font-size:var(--fs-h3);color:var(--tx);line-height:1.15}
.vision__caption{color:var(--tx-2);max-width:54ch;font-size:var(--fs-body-lg)}
.vision__photo{position:relative;margin-bottom:var(--sp-10);border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg),var(--card-top)}
.vision__photo img{width:100%;height:clamp(240px,44vh,520px);object-fit:cover;display:block;filter:saturate(.92) contrast(1.03) brightness(.94)}
.vision__photo::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,15,.3),transparent 26%,transparent 64%,rgba(5,8,15,.66))}
.vision__air{position:absolute;bottom:18px;display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-pale);text-shadow:0 1px 8px rgba(0,0,0,.85);z-index:2}
.vision__air svg{color:var(--blue-bright)}
.vision__air--l{left:clamp(14px,3vw,28px)}
.vision__air--r{right:clamp(14px,3vw,28px)}

/* ════════════════ 02 · HOW IT WORKS ════════════════ */
.how__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.how__figure{width:100%}
.how__model{position:relative;width:100%;aspect-ratio:520/460;display:flex;align-items:center;justify-content:center}
.how__model--exploded{aspect-ratio:4/5}
.how__streams{position:absolute;inset:0;width:100%;height:100%}
.how__streams--back{z-index:0}
.how__streams--front{z-index:2;mix-blend-mode:screen}
.how__markers{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:0;transition:opacity .55s var(--ease-out)}
.how__markers.show{opacity:1}
.how__turbine{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;pointer-events:none}
.how__model--exploded .how__turbine{object-fit:contain}
.how__airflow{display:flex;justify-content:space-between;gap:16px;margin-top:-8px;position:relative;z-index:3;flex-wrap:wrap}
.how__air{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-pale)}
.how__air svg{color:var(--blue-bright)}
/* numbered call-outs — synced to the steps; the active one lights up */
.how__mk-lead{stroke:rgba(79,195,255,.28);stroke-width:1.3;transition:stroke var(--dur-norm),stroke-width var(--dur-norm),filter var(--dur-norm)}
.how__mk-dot{fill:var(--blue-bright);opacity:.45;transform-box:fill-box;transform-origin:center;transition:opacity var(--dur-norm),fill var(--dur-norm),transform var(--dur-norm)}
.how__mk-ring{fill:#0a1322;stroke:rgba(79,195,255,.40);stroke-width:1.4;transition:fill var(--dur-norm),stroke var(--dur-norm),stroke-width var(--dur-norm),filter var(--dur-norm)}
.how__mk-num{font-family:var(--f-mono);font-size:11px;fill:var(--blue-pale);transition:fill var(--dur-norm)}
.how__mk.active .how__mk-lead{stroke:var(--blue-bright);stroke-width:2;filter:drop-shadow(0 0 4px rgba(79,195,255,.7))}
.how__mk.active .how__mk-dot{opacity:1;fill:#cdeeff;transform:scale(1.5)}
.how__mk.active .how__mk-ring{fill:var(--blue);stroke:var(--blue-bright);stroke-width:1.8;filter:drop-shadow(0 0 7px rgba(46,123,255,.85))}
.how__mk.active .how__mk-num{fill:var(--tx-on-blue)}
/* glowing light-wind streams (section 02) */
.wind-bloom{opacity:.25}
.wind-glow{opacity:.69}
.wind-core{stroke-dasharray:50 230;animation:windflow 4s linear infinite}
@keyframes windflow{to{stroke-dashoffset:-280}}
.how__steps{display:flex;flex-direction:column;gap:var(--sp-5)}
.how__step{display:flex;gap:var(--sp-5);align-items:flex-start;padding:var(--sp-5) var(--sp-6);border:1px solid var(--bd-dim);border-radius:var(--r-md);background:rgba(7,13,26,.4);transition:border-color var(--dur-norm),background var(--dur-norm),transform var(--dur-norm)}
.how__step.active{border-color:var(--bd-act);background:rgba(46,123,255,.06);box-shadow:var(--card-top)}
.how__step b{font-family:var(--f-mono);font-size:13px;color:var(--blue-bright);width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--bd-act);border-radius:var(--r-pill);box-shadow:var(--glow-sm);transition:all var(--dur-norm)}
.how__step.active b{background:var(--blue);color:var(--tx-on-blue)}
.how__step p{color:var(--tx-2);font-size:var(--fs-body)}
.how__step.active p{color:var(--tx)}

/* ════════════════ 03 · LAYOUT ════════════════ */
.layout__figure{border:1px solid var(--bd-dim);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(7,13,26,.6),rgba(3,5,8,.6));padding:clamp(20px,3vw,40px);overflow:hidden}
.layout__figure svg{width:100%;height:auto;display:block;overflow:visible}
.layout__caption{margin-top:var(--sp-6);color:var(--tx-2);max-width:60ch}

/* ════════════════ 04 · DRIVE ════════════════ */
.drive__grid{display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.drive__figure{border:1px solid var(--bd-dim);border-radius:var(--r-lg);background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(46,123,255,.07),transparent 70%),rgba(3,5,8,.4);padding:clamp(16px,3vw,36px)}
.drive__figure svg{width:100%;height:auto;display:block;overflow:visible}
.drive__video{width:100%;height:auto;display:block;border-radius:var(--r-md);background:#05080f}
.spec-list{display:flex;flex-direction:column;gap:1px;background:var(--bd-dim);border:1px solid var(--bd-dim);border-radius:var(--r-md);overflow:hidden}
.spec-list div{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);background:var(--bg-s1);padding:var(--sp-5) var(--sp-6)}
.spec-list dt{font-family:var(--f-mono);font-size:var(--fs-small);color:var(--tx-2);letter-spacing:.02em}
.spec-list dd{font-family:var(--f-head);font-weight:500;color:var(--tx);text-align:right}

/* ════════════════ 05 · TUNNEL ════════════════ */
.tunnel__grid{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(28px,4vw,56px);align-items:start}
.tunnel__figure{border:1px solid var(--bd-dim);border-radius:var(--r-lg);background:rgba(3,5,8,.5);padding:clamp(16px,2.5vw,32px)}
.tunnel__figure svg{width:100%;height:auto;display:block}
.tunnel__figure img{width:100%;height:auto;display:block;border-radius:var(--r-md)}
.tunnel__side{display:flex;flex-direction:column;gap:var(--sp-6)}
.tunnel__legend{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.tunnel__legend li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);color:var(--tx-2);line-height:1.35}
.tunnel__legend b{font-family:var(--f-mono);font-size:11px;color:var(--blue-bright);width:20px;height:20px;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--bd-act);border-radius:var(--r-xs)}
.tunnel__access{padding:var(--sp-6)}
.tunnel__access-list{margin-top:var(--sp-4);display:flex;flex-direction:column;gap:10px}
.tunnel__access-list li{display:flex;gap:10px;align-items:center;font-size:var(--fs-small);color:var(--tx-2)}
.tunnel__access-list .icon{color:var(--blue-bright);flex-shrink:0}

/* ════════════════ 06 · ELECTRICAL ════════════════ */
.elec__figure{border:1px solid var(--bd-dim);border-radius:var(--r-lg);background:rgba(3,5,8,.5);padding:clamp(16px,3vw,36px);overflow:hidden}
.elec__figure svg{width:100%;height:auto;display:block;overflow:visible}
.elec__legend{display:flex;gap:var(--sp-8);flex-wrap:wrap;margin-top:var(--sp-6);justify-content:center}
.legend-item{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:var(--fs-small);color:var(--tx-2)}
.legend-item .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.legend-item.ac .dot{background:var(--ac);box-shadow:var(--glow-sm)}
.legend-item.dc .dot{background:var(--dc);box-shadow:var(--glow-red)}
.legend-item.comm .dot{width:18px;height:0;border-radius:0;border-top:2px dashed var(--comm);box-shadow:none}

/* ════════════════ 07 · CARDS / 08 · TILES ════════════════ */
.cards{display:grid;gap:var(--sp-6)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;padding:var(--sp-8);background:var(--bg-s1);border:1px solid var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-md),var(--card-top);overflow:hidden;transition:transform var(--dur-slow) var(--ease-out),border-color var(--dur-norm),box-shadow var(--dur-slow)}
.card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--dur-slow);background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(46,123,255,.13),transparent 65%)}
.card:hover{transform:translateY(-6px);border-color:var(--bd-act);box-shadow:var(--sh-lg),var(--glow-sm)}
.card:hover::after{opacity:1}
.card .icon{color:var(--blue-bright);margin-bottom:var(--sp-6)}
.card h3{font-family:var(--f-head);font-weight:500;font-size:var(--fs-h3);color:var(--tx);margin-bottom:var(--sp-3);line-height:1.2}
.card p{color:var(--tx-2);font-size:var(--fs-small)}

.tiles{display:grid;gap:var(--sp-6)}
.tiles--4{grid-template-columns:repeat(4,1fr)}
.tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-5);padding:var(--sp-10) var(--sp-6);background:rgba(7,13,26,.5);border:1px solid var(--bd-dim);border-radius:var(--r-lg);transition:border-color var(--dur-norm),transform var(--dur-norm),background var(--dur-norm)}
.tile:hover{border-color:var(--bd-act);transform:translateY(-4px);background:rgba(12,21,38,.6)}
.tile .icon{color:var(--blue-bright)}
.tile b{font-family:var(--f-head);font-weight:500;font-size:1.05rem;color:var(--tx);line-height:1.25}

/* ════════════════ 09 · ECONOMICS ════════════════ */
.econ__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bd-dim);border:1px solid var(--bd-dim);border-radius:var(--r-lg);overflow:hidden;margin-top:var(--sp-4)}
.kpi{background:var(--bg-s1);padding:var(--sp-6);display:flex;flex-direction:column;gap:6px;min-height:118px;justify-content:center}
.kpi__num{font-family:var(--f-head);font-weight:700;font-size:var(--fs-stat-sm);letter-spacing:-.03em;line-height:.95;color:var(--tx-stat);font-variant-numeric:tabular-nums}
.kpi__num em{font-style:normal;font-size:.5em;color:var(--blue-bright);font-family:var(--f-mono);letter-spacing:0;margin-left:2px}
.kpi__label{font-size:var(--fs-small);color:var(--tx-2);line-height:1.3}
.kpi--wide{grid-column:1 / -1}
.financial{padding:var(--sp-6);margin-bottom:var(--sp-6)}
.financial__row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-4)}
.financial__cell{display:flex;flex-direction:column;gap:4px}
.financial__cell b{font-family:var(--f-head);font-weight:700;font-size:var(--fs-stat-sm);color:var(--blue-bright);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.financial__cell b em{font-style:normal;font-size:.5em;color:var(--tx-2);font-family:var(--f-mono)}
.financial__cell span{font-size:var(--fs-small);color:var(--tx-2)}
.table-wrap{padding:var(--sp-6)}
.invest-table{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-size:var(--fs-small);margin-top:var(--sp-4)}
.invest-table td{padding:11px var(--sp-3);border-bottom:1px solid var(--bd-dim);color:var(--tx-2)}
.invest-table td:last-child{text-align:right;color:var(--tx);font-weight:500}
.invest-table tr:last-child td{border-bottom:none}
.invest-table tr.hl td{background:rgba(46,123,255,.07);color:var(--tx)}
.invest-table tr.hl td:first-child{border-left:2px solid var(--blue);color:var(--blue-bright)}
.invest-table tr.hl td:last-child{color:var(--blue-bright)}
.footnote{margin-top:var(--sp-4);font-size:11px;color:var(--tx-2);font-style:italic;line-height:1.4}

/* ════════════════ 10 · CONSTRUCTION ════════════════ */
.stepper{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4)}
.stepper::before{content:'';position:absolute;top:27px;left:10%;right:10%;height:1px;background:var(--bd-dim)}
.stepper__progress{position:absolute;top:27px;left:10%;height:1px;width:0;background:var(--grad-progress);box-shadow:var(--glow-cyan);z-index:1}
.step-item{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-4)}
.step-item__dot{width:54px;height:54px;border-radius:50%;background:var(--bg-s2);border:1px solid var(--bd-act);display:grid;place-items:center;font-family:var(--f-mono);font-size:14px;color:var(--blue-bright);box-shadow:var(--glow-sm);transition:all var(--dur-slow)}
.step-item.active .step-item__dot{background:var(--blue);color:var(--tx-on-blue);box-shadow:var(--glow-md)}
.step-item__label{font-size:var(--fs-small);color:var(--tx-2);max-width:130px;line-height:1.35}
.step-item.active .step-item__label{color:var(--tx)}

/* ════════════════ 11 · SCALABLE ════════════════ */
.scale{overflow:hidden;min-height:78vh;display:flex;align-items:center}
.scale__bg{position:absolute;inset:0;z-index:0;background:
  radial-gradient(ellipse 90% 60% at 50% 120%,rgba(46,123,255,.20),transparent 60%),
  linear-gradient(180deg,rgba(3,5,8,.2),rgba(5,8,15,.6))}
.scale__line{position:absolute;left:0;right:0;bottom:14%;height:120px;z-index:0;opacity:.9}
.scale__line svg{width:100%;height:100%;display:block}
.scale__inner{position:relative;z-index:1;width:100%}
.scale__callouts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);max-width:840px}
.callout{padding:var(--sp-8)}
.callout b{font-family:var(--f-head);font-weight:700;font-size:var(--fs-h3);color:var(--tx);display:block;margin-bottom:var(--sp-3)}
.callout p{color:var(--tx-2);font-size:var(--fs-body)}
.callout{transition:transform var(--dur-norm) var(--ease-out),border-color var(--dur-norm),box-shadow var(--dur-slow)}
.callout:hover{transform:translateY(-4px);border-color:var(--bd-act);box-shadow:var(--sh-md),var(--glow-sm)}

/* ════════════════ 12 · FUTURE ════════════════ */
.future{min-height:100vh;display:flex;flex-direction:column;justify-content:center;text-align:center;overflow:hidden}
.future__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.future__inner{position:relative;z-index:2}
.future__points{display:flex;gap:clamp(16px,3vw,40px);justify-content:center;flex-wrap:wrap;margin:var(--sp-12) auto 0;max-width:920px}
.future__point{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);max-width:180px}
.future__point .icon{color:var(--blue-bright)}
.future__point span{font-size:var(--fs-small);color:var(--tx-2);line-height:1.35}
.future__cta{margin-top:var(--sp-12)}
.footer{position:relative;z-index:2;margin-top:var(--sp-20);padding-top:var(--sp-6);display:flex;gap:var(--sp-4);align-items:center;justify-content:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3)}
.footer i{color:var(--blue-dim)}

/* SVG diagram shared bits */
.svg-mono{font-family:var(--f-mono);fill:var(--tx-2);font-size:11px;letter-spacing:.04em}
.svg-mono-acc{font-family:var(--f-mono);fill:var(--blue-bright);font-size:11px}
.svg-label{font-family:var(--f-head);fill:var(--tx);font-size:13px;font-weight:500}
.dim-line{stroke:var(--blue-pale);stroke-width:1}
.flow-pulse{fill:var(--blue-bright)}
/* electrical flow pulses */
.flow{fill:none;stroke-width:2.2;stroke-linecap:round}
.flow.ac{stroke:var(--ac);stroke-dasharray:9 13;animation:flow 1.1s linear infinite}
.flow.dc{stroke:var(--dc);stroke-dasharray:9 13;animation:flow 1.1s linear infinite;filter:drop-shadow(0 0 3px rgba(255,90,90,.5))}
.flow.comm{stroke:var(--comm);stroke-dasharray:5 9;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-44}}
/* top-view turbine fans (section 03) */
.fan-blades{transform-box:fill-box;transform-origin:center}
@keyframes fanspin{to{transform:rotate(360deg)}}
/* hero photo background (.hero__bg) is always shown; turbine canvas sits over it */

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .tiles--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav__dots{display:none}
  .nav__cta{display:none}
  .how__grid,.drive__grid,.tunnel__grid,.econ__grid{grid-template-columns:1fr;gap:var(--sp-10)}
  .tunnel__legend{grid-template-columns:1fr 1fr}
  .stepper{grid-template-columns:1fr;gap:var(--sp-6)}
  .stepper::before,.stepper__progress{left:27px;right:auto;top:10%;bottom:10%;width:1px;height:auto}
  .stepper__progress{height:0;width:1px}
  .step-item{flex-direction:row;text-align:left;align-items:center;gap:var(--sp-5)}
  .step-item__label{max-width:none}
  .scale__callouts{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cards--4,.tiles--4{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr}
  .financial__row{grid-template-columns:1fr}
  .tunnel__legend{grid-template-columns:1fr}
  .hero__airflow{display:none}
  .hero__stats{gap:24px}
}

/* ════════════════ ✦ FUTURISTIC LAYER — spotlight · ambient · sweep ════════════════ */
/* cursor spotlight: panels glow toward the pointer (premium-tech) */
.tile,.callout,.kpi,.how__step{position:relative;overflow:hidden}
.card,.tile,.callout,.kpi,.how__step{--mx:50%;--my:50%}
.card::before,.tile::before,.callout::before,.kpi::before,.how__step::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;
  transition:opacity var(--dur-slow) var(--ease-out);
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(79,195,255,.26),rgba(46,123,255,.09) 44%,transparent 68%);
}
.card:hover::before,.tile:hover::before,.callout:hover::before,.kpi:hover::before,.how__step:hover::before{opacity:1}
.kpi:hover,.how__step:hover{border-color:var(--bd-act)}
.card>*,.tile>*,.callout>*,.kpi>*,.how__step>*{position:relative;z-index:1}

/* hero: ambient light that breathes behind the content */
.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 48% at 50% 40%,rgba(46,123,255,.16),transparent 70%);
  animation:heroPulse 7.5s ease-in-out infinite}
@keyframes heroPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
/* turbine grounding: soft light pool + contact shadow under the base */
.hero__ground{position:absolute;left:48%;top:57%;transform:translateX(-50%);width:min(42vw,440px);height:160px;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 36% 52% at 50% 36%,rgba(2,5,12,.55),transparent 66%),radial-gradient(ellipse 54% 70% at 50% 50%,rgba(46,123,255,.16),transparent 72%);
  filter:blur(5px)}

/* primary button: light-sweep on hover */
.btn{position:relative;overflow:hidden}
.btn--primary::after{content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);transition:left .65s var(--ease-out)}
.btn--primary:hover::after{left:150%}
.nav__cta{transition:all var(--dur-norm) var(--ease-out)}
.nav__cta:hover{box-shadow:var(--glow-sm)}

/* ── REDUCED MOTION ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal],[data-reveal-stagger]>*{opacity:1!important;transform:none!important;filter:none!important}
  .grain{animation:none}
  .hero__strip-track{animation:none}
  .loader__mark{animation:none}
  .flow{animation:none}
  .fan-blades{animation:none!important}
}