/* =====================================================================
   datacenterforants.eu — Heidi Health brand edition
   Palette + type per Heidi Style Guide. Headings use Exposure (custom,
   licensed) — substituted here with Newsreader via --display so the real
   Exposure .woff2 can be dropped straight in.
   ===================================================================== */

:root{
  /* Heidi palette */
  --sand-25:#FCFAF8; --sand-50:#F9F4F1; --sand-100:#F6ECE4; --sand-150:#F4E7DD;
  --bark:#211217; --sunlight:#FBF582; --forest:#194B22; --sky:#B9CFFF;
  /* derived */
  --forest-700:#123819; --forest-600:#236130; --bark-800:#2c1a20; --sunlight-200:#FDF9A6;
  /* berry bands + balanced-flow accents */
  --blush:#F7EAE6; --wine:#5E2438; --wine-700:#3C1624;
  --flow-data:#FF9DBA; --flow-energy:#FBF582; --flow-cost:#B9CFFF;
  /* text */
  --ink:#211217; --ink-2:#755760; --ink-3:#8A7078; --inverted:#F9F4F1;
  /* lines */
  --line:#EAD9CC; --line-dark:rgba(249,244,241,.16);

  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px;
  --s12:48px; --s16:64px; --s24:96px; --s32:128px;
  --r-sm:4px; --r-md:8px; --r-lg:16px; --r-xl:28px;
  --maxw:1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--sand-50); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; margin:0; letter-spacing:-.018em; line-height:1.1; }
p{ margin:0; }
a{ color:var(--forest); text-decoration:none; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--sunlight); color:var(--bark); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--s8); }
.overline{
  font-family:var(--sans); font-size:12.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; color:var(--forest);
}
.on-dark .overline{ color:var(--sunlight); }

a:focus-visible,button:focus-visible,input:focus-visible,.seg:focus-visible{
  outline:2px solid var(--forest); outline-offset:2px; border-radius:var(--r-sm);
}
.on-dark a:focus-visible,.on-dark button:focus-visible,.on-dark input:focus-visible{ outline-color:var(--sunlight); }
.skip{ position:absolute; left:var(--s4); top:-60px; z-index:100; background:var(--bark); color:var(--inverted);
  padding:10px 16px; border-radius:var(--r-md); font-size:14px; transition:top .15s ease; }
.skip:focus{ top:var(--s4); }

/* ===== HEADER ====================================================== */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; }
section[id]{ scroll-margin-top:104px; }
.nav-utility{
  background:var(--bark); color:var(--inverted); font-size:12.5px; letter-spacing:.01em;
  height:38px; overflow:hidden; transition:height .28s ease,opacity .2s ease;
}
.nav-utility .wrap{ display:flex; align-items:center; justify-content:space-between; height:100%; }
.nav-utility .u-left{ display:flex; align-items:center; gap:9px; color:rgba(249,244,241,.85); }
.nav-utility .u-dot{ width:7px; height:7px; border-radius:50%; background:var(--sunlight); animation:pulse 2.6s ease-out infinite; flex:none; }
.nav-utility .u-right{ display:flex; align-items:center; gap:12px; color:rgba(249,244,241,.5); }
.nav-utility .u-right .dom{ color:var(--inverted); }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(251,245,130,.5) } 70%{ box-shadow:0 0 0 8px rgba(251,245,130,0) } 100%{ box-shadow:0 0 0 0 rgba(251,245,130,0) } }

.nav-main{ background:rgba(18,56,25,.82); backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line-dark); height:64px; }
.nav-main .wrap{ display:flex; align-items:center; justify-content:space-between; height:100%; }
.nav.scrolled .nav-utility{ height:0; opacity:0; }

.logo{ display:flex; align-items:center; gap:11px; }
.logo svg{ display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.logo:hover svg{ transform:rotate(45deg); }
.logo .word{ font-family:var(--sans); font-size:15px; font-weight:500; color:var(--inverted); letter-spacing:-.01em; }
.logo .word b{ font-weight:700; }
.logo .word .tld{ color:var(--sunlight); }

.nav-links{ display:flex; align-items:center; gap:var(--s8); }
.nav-links a{ color:rgba(249,244,241,.88); font-size:14.5px; font-weight:500; transition:color .12s ease; }
.nav-links a:not(.nav-cta){ padding:8px 0; position:relative; }
.nav-links a:not(.nav-cta):hover{ color:var(--inverted); }
.nav-links a:not(.nav-cta)::after{ content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px; background:var(--sunlight); transition:right .22s ease; }
.nav-links a:not(.nav-cta):hover::after{ right:0; }
.nav-cta{ display:inline-flex; align-items:center; gap:9px; background:var(--sunlight); color:var(--bark)!important;
  padding:11px 22px; border-radius:999px; font-weight:600; transition:background .14s ease,transform .08s ease; }
.nav-cta .arr{ transition:transform .18s ease; }
.nav-cta:hover{ background:var(--sunlight-200); }
.nav-cta:hover .arr{ transform:translateX(3px); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; margin-right:-8px; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--inverted); margin:4px 0; transition:.2s; }

/* ===== iso sprite shared styling (drawn on dark forest/bark) ======= */
.iso-host{ --ln:var(--inverted); --led:var(--sunlight); --led-glow:rgba(251,245,130,.95); }
.tile{ fill:rgba(249,244,241,.04); stroke:rgba(249,244,241,.3); stroke-width:1; stroke-dasharray:3 4; }
.tgrid{ stroke:rgba(249,244,241,.15); stroke-width:1; }
.floor{ stroke:rgba(249,244,241,.06); stroke-width:1; }
.route{ fill:none; stroke:var(--inverted); stroke-width:1.6; stroke-opacity:.92; }
.route-glow{ fill:none; stroke:var(--sunlight); stroke-width:6; stroke-opacity:.45; filter:url(#soft); }
.vig .bars rect{ fill:none; stroke:rgba(249,244,241,.5); stroke-width:1.4; }
.vig .bars rect:nth-child(odd){ fill:rgba(251,245,130,.14); }
.vig .baseline{ stroke:rgba(249,244,241,.4); stroke-width:1.2; }
.vig .sunarc{ fill:none; stroke:var(--sunlight); stroke-width:1.4; stroke-dasharray:2 6; stroke-opacity:.8; }
.vig .sun{ fill:none; stroke:var(--sunlight); stroke-width:1.6; }

/* ===== HERO (Forest) =============================================== */
.hero{ position:relative; overflow:hidden; color:var(--inverted);
  background:radial-gradient(135% 120% at 50% -10%, var(--forest-600) 0%, var(--forest) 48%, var(--forest-700) 100%); }
.hero .wrap{ position:relative; padding-top:84px; padding-bottom:var(--s12); text-align:left;
  display:grid; grid-template-columns:0.92fr 1.18fr; gap:var(--s12); align-items:center; min-height:84svh; }
.hero-copy{ max-width:560px; }
.hero .eyebrow{ display:inline-flex; align-items:center; gap:9px; color:var(--sunlight);
  border:1px solid rgba(249,244,241,.22); padding:7px 16px; border-radius:999px; margin-bottom:var(--s8); }
.hero .eyebrow .d{ width:6px; height:6px; border-radius:50%; background:var(--sunlight); }
.hero h1{ color:var(--inverted); font-size:clamp(33px,3.6vw,54px); line-height:1.05; letter-spacing:-.02em;
  max-width:15ch; margin:0; text-wrap:balance; }
.hero .sub{ color:rgba(249,244,241,.84); font-size:clamp(17px,1.5vw,19px); line-height:1.5;
  max-width:44ch; margin:var(--s6) 0 0; }
.waitform{ display:flex; gap:var(--s3); max-width:460px; margin:var(--s8) 0 0; }
.waitform input[type=email]{ flex:1; height:54px; padding:0 18px; border-radius:999px;
  border:1px solid rgba(249,244,241,.4); background:rgba(249,244,241,.1); color:var(--inverted); font-family:var(--sans); font-size:16px;
  transition:border-color .12s,background .12s; }
.waitform input[type=email]::placeholder{ color:rgba(249,244,241,.6); }
.waitform input[type=email]:focus{ outline:2px solid var(--sunlight); outline-offset:2px; border-color:var(--inverted); background:rgba(249,244,241,.16); }
.btn-light{ height:54px; padding:0 30px; border:0; border-radius:999px; cursor:pointer; background:var(--sunlight);
  color:var(--bark); font-family:var(--sans); font-size:16px; font-weight:600; white-space:nowrap;
  transition:background .12s,transform .08s; }
.btn-light:hover{ background:var(--sunlight-200); }
.btn-light:active{ transform:translateY(1px); }
.formnote{ color:var(--sunlight); font-size:13px; margin-top:var(--s3); min-height:1em; }

.hero-stage{ position:relative; margin:0; }
.hero-scene{ width:100%; max-width:640px; margin:0 auto; display:block; }

/* ===== SECTION SCAFFOLD ============================================ */
section{ position:relative; }
.band{ padding:var(--s24) 0; }
.band-sand{ background:var(--sand-50); }
.band-sand-100{ background:var(--sand-100); }
.band-cream{ background:var(--sand-25); }
.band-blush{ background:var(--blush); }
.band-wine{ background:var(--wine); color:var(--inverted);
  background-image:radial-gradient(120% 120% at 50% 0%, #72304B 0%, var(--wine) 52%, var(--wine-700) 100%); }
.band-wine .who-card{ --led:var(--forest); }
.band-forest{ background:var(--forest); color:var(--inverted);
  background-image:radial-gradient(120% 110% at 50% 0%, var(--forest-600) 0%, var(--forest) 55%, var(--forest-700) 100%); }
.band-bark{ background:var(--bark); color:var(--inverted); }
.sec-head{ max-width:64ch; margin-bottom:var(--s16); }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head .overline{ display:block; margin-bottom:var(--s4); }
.sec-head h2{ font-size:clamp(30px,4.4vw,48px); line-height:1.06; text-wrap:balance; }
.on-dark.sec-head h2{ color:var(--inverted); }
.sec-head p{ margin-top:var(--s6); font-size:19px; line-height:1.55; color:var(--ink-2); }
.on-dark.sec-head p,.band-forest .sec-head p,.band-bark .sec-head p{ color:rgba(249,244,241,.78); }

/* ===== PROBLEM GRID ================================================ */
.cards4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s6); }
.card{ background:var(--sand-25); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s8);
  transition:border-color .16s,transform .16s cubic-bezier(.2,.6,.2,1),box-shadow .16s; }
.card:hover{ border-color:var(--forest); transform:translateY(-3px); box-shadow:0 16px 34px -22px rgba(33,18,23,.32); }
.card .ic{ width:30px; height:30px; margin-bottom:var(--s6); color:var(--forest); }
.card h3{ font-size:24px; line-height:1.15; margin-bottom:var(--s3); }
.card p{ font-size:15.5px; line-height:1.5; color:var(--ink-2); }

/* ===== WHO HOSTS (building types — forest line art on sand) ======== */
.who-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6); }
.who-card{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--sand-25); padding:var(--s8) var(--s8) var(--s6); overflow:hidden;
  transition:border-color .18s,transform .18s,box-shadow .18s;
  --ln:var(--forest); --fc:transparent; --led:var(--forest); --led-glow:rgba(25,75,34,.35); }
.who-card:hover{ border-color:var(--forest); transform:translateY(-3px); box-shadow:0 18px 38px -24px rgba(33,18,23,.3); }
.who-card .ico{ height:140px; display:grid; place-items:center; margin-bottom:var(--s4); }
.who-card .ico svg{ height:160px; width:auto; }
.who-card .num{ font-size:12px; letter-spacing:.16em; color:var(--forest); font-weight:700; }
.who-card h3{ color:var(--ink); font-size:25px; margin:var(--s2) 0 var(--s2); }
.who-card p{ color:var(--ink-2); font-size:15px; line-height:1.5; }
.who-card .why{ margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--line);
  font-size:13.5px; color:var(--forest); font-weight:500; display:flex; align-items:center; gap:8px; }
.who-card .why .dot{ width:6px; height:6px; border-radius:50%; background:var(--sunlight); border:1px solid var(--forest); flex:none; }

/* ===== MANIFESTO (Bark) ============================================ */
.manifesto .lead{ font-family:var(--display); font-style:italic; font-size:clamp(28px,3.6vw,40px);
  line-height:1.18; color:var(--inverted); text-wrap:balance; font-weight:400; }
.manifesto .body p{ color:rgba(249,244,241,.82); font-size:17.5px; line-height:1.6; margin-top:var(--s6); }
.manifesto .body p:first-child{ margin-top:0; }
.manifesto .body em{ color:var(--sunlight); font-style:normal; }

/* ===== HOW IT WORKS ================================================ */
.steps{ display:grid; gap:var(--s24); }
.step{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s16); align-items:center; }
.step.flip .media{ order:2; }
.step .media{ border-radius:var(--r-lg); overflow:hidden; position:relative;
  background:radial-gradient(120% 110% at 50% 0%, var(--forest-600), var(--forest) 60%, var(--forest-700));
  border:1px solid var(--forest-700); aspect-ratio:4/3; display:grid; place-items:center;
  --ln:var(--inverted); --led:var(--sunlight); --led-glow:rgba(251,245,130,.95); }
.step .media .vig{ width:88%; }
.step .copy .overline{ display:block; margin-bottom:var(--s4); }
.step .copy h3{ font-size:clamp(26px,3.2vw,38px); line-height:1.1; }
.step .copy p{ margin-top:var(--s6); font-size:17px; line-height:1.6; color:var(--ink-2); max-width:46ch; }
.step .specs{ list-style:none; margin:var(--s8) 0 0; padding:0; max-width:46ch; }
.step .specs li{ display:flex; justify-content:space-between; gap:var(--s6); padding:var(--s3) 0;
  border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink-2); }
.step .specs li b{ color:var(--ink); font-weight:600; }

/* ===== HOST A NODE ================================================= */
.host .grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s16); align-items:start; }
.earn{ list-style:none; margin:0; padding:0; }
.earn li{ display:grid; grid-template-columns:30px 1fr; gap:var(--s6); padding:var(--s6) 0; border-bottom:1px solid var(--line); }
.earn li:first-child{ padding-top:0; }
.earn .ic{ width:28px; height:28px; margin-top:3px; color:var(--forest); }
.earn h3{ font-size:22px; line-height:1.15; }
.earn p{ font-size:15px; color:var(--ink-2); margin-top:var(--s2); line-height:1.5; }

.dash{ background:var(--bark); color:var(--inverted); border-radius:var(--r-lg); padding:var(--s8); position:sticky; top:96px;
  border:1px solid var(--bark-800); box-shadow:0 24px 50px -30px rgba(33,18,23,.5); }
.dash .dhead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s6); }
.dash .dhead .live{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--sunlight); letter-spacing:.04em; }
.dash .dot{ width:7px; height:7px; border-radius:50%; background:var(--sunlight); }
.dash .label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(249,244,241,.55); }
.dash .big{ font-family:var(--display); font-weight:500; font-size:46px; color:var(--inverted); margin:var(--s2) 0 var(--s6); letter-spacing:-.01em; }
.dash .row{ display:flex; justify-content:space-between; font-size:14px; padding:var(--s3) 0;
  border-bottom:1px solid var(--line-dark); color:rgba(249,244,241,.78); }
.dash .row:last-of-type{ border-bottom:0; }
.dash .row b{ color:var(--inverted); font-weight:600; }
.dash .row .k{ color:var(--sunlight); }
.dash .spark{ display:flex; align-items:flex-end; gap:4px; height:50px; margin-top:var(--s6); }
.dash .spark i{ flex:1; background:linear-gradient(180deg,var(--sunlight),var(--forest-600)); border-radius:2px 2px 0 0; opacity:.92; }

/* ===== WAITLIST (Forest) =========================================== */
.signup{ position:relative; overflow:hidden; color:var(--inverted);
  background:radial-gradient(120% 130% at 50% 0%, var(--forest-600) 0%, var(--forest) 55%, var(--forest-700) 100%); }
.signup .wrap{ position:relative; padding-top:var(--s24); padding-bottom:var(--s24); text-align:center; }
.signup .inner{ max-width:680px; margin:0 auto; }
.signup h2{ color:var(--inverted); font-size:clamp(30px,4.4vw,48px); line-height:1.06; }
.signup .sub{ color:rgba(249,244,241,.8); font-size:19px; line-height:1.55; margin:var(--s6) auto 0; max-width:50ch; }
.segment{ display:inline-flex; gap:var(--s2); margin:var(--s12) auto var(--s6); flex-wrap:wrap;
  background:rgba(249,244,241,.08); padding:5px; border-radius:999px; border:1px solid rgba(249,244,241,.16); }
.seg{ appearance:none; -webkit-appearance:none; cursor:pointer; border:0; background:transparent; color:rgba(249,244,241,.85);
  font-family:var(--sans); font-size:14.5px; font-weight:500; padding:10px 22px; border-radius:999px; transition:background .14s,color .14s; }
.seg:hover{ color:var(--inverted); }
.seg[aria-checked=true]{ background:var(--sunlight); color:var(--bark); }
.signupform{ display:flex; gap:var(--s3); max-width:480px; margin:0 auto; }
.signupform input[type=email]{ flex:1; height:54px; padding:0 18px; border-radius:999px;
  border:1px solid rgba(249,244,241,.35); background:rgba(249,244,241,.1); color:var(--inverted); font-family:var(--sans); font-size:16px;
  transition:border-color .12s,background .12s; }
.signupform input[type=email]::placeholder{ color:rgba(249,244,241,.55); }
.signupform input[type=email]:focus{ outline:2px solid var(--sunlight); outline-offset:2px; border-color:var(--inverted); }
.btn-berry{ height:54px; padding:0 32px; border:0; border-radius:999px; cursor:pointer; background:var(--sunlight);
  color:var(--bark); font-family:var(--sans); font-size:16px; font-weight:600; white-space:nowrap; transition:background .12s,transform .08s; }
.btn-berry:hover{ background:var(--sunlight-200); }
.btn-berry:active{ transform:translateY(1px); }
.success{ display:none; align-items:center; justify-content:center; gap:var(--s3); margin-top:var(--s6); color:var(--inverted); font-size:16px; }
.success.show{ display:flex; }
.success .chk{ width:24px; height:24px; border-radius:50%; background:var(--sunlight); display:grid; place-items:center; color:var(--bark); font-size:14px; }

/* ===== FOOTER (Bark) =============================================== */
.foot{ background:var(--forest-700); color:rgba(249,244,241,.66); padding:var(--s16) 0; border-top:1px solid rgba(249,244,241,.12); }
.foot .wrap{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s12); flex-wrap:wrap; }
.foot .logo{ flex-direction:column; align-items:flex-start; gap:var(--s4); }
.foot .logo .word{ color:var(--inverted); }
.foot .col{ font-size:13.5px; line-height:1.8; }
.foot .col .h{ color:rgba(249,244,241,.5); text-transform:uppercase; letter-spacing:.12em; font-size:11px; margin-bottom:var(--s3); }
.foot .col a{ color:var(--inverted); display:block; }
.foot .col a:hover{ color:var(--sunlight); }
.foot .entity{ color:rgba(249,244,241,.55); font-size:13px; }
.foot .legal{ margin-top:var(--s12); font-size:12px; color:rgba(249,244,241,.45); line-height:1.65; max-width:90ch; }
.foot .legal a{ color:rgba(249,244,241,.7); text-decoration:underline; text-underline-offset:2px; }

/* ===== RESPONSIVE ================================================== */
@media (max-width:980px){
  .manifesto .grid,.host .grid{ grid-template-columns:1fr; gap:var(--s12); }
  .dash{ position:static; }
  .step{ grid-template-columns:1fr; gap:var(--s8); }
  .step.flip .media{ order:0; }
  .step .media{ order:-1; }
  .who-grid{ grid-template-columns:repeat(2,1fr); }
  .hero .wrap{ grid-template-columns:1fr; min-height:auto; text-align:center; padding-top:116px; padding-bottom:var(--s16); gap:var(--s8); }
  .hero-copy{ max-width:none; }
  .hero h1{ max-width:18ch; margin-left:auto; margin-right:auto; }
  .hero .sub{ margin-left:auto; margin-right:auto; }
  .waitform{ margin-left:auto; margin-right:auto; }
  .hero-stage{ margin-top:var(--s4); }
  .hero-scene{ max-width:560px; }
}
@media (max-width:768px){
  .wrap{ padding:0 var(--s6); }
  .band{ padding:var(--s16) 0; }
  .sec-head{ margin-bottom:var(--s12); }
  .cards4{ grid-template-columns:1fr 1fr; }
  .nav-utility{ display:none; }
  .nav-main{ height:60px; }
  section[id]{ scroll-margin-top:68px; }
  .nav-links{ position:fixed; top:60px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--forest); border-bottom:1px solid var(--line-dark); padding:var(--s4) var(--s6) var(--s8);
    transform:translateY(-130%); transition:transform .25s ease; box-shadow:0 18px 30px -24px rgba(0,0,0,.5); }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ padding:var(--s4) 0; font-size:17px; border-bottom:1px solid var(--line-dark); }
  .nav-links a:last-child{ border-bottom:0; }
  .nav-cta{ margin-top:var(--s4); justify-content:center; }
  .nav-toggle{ display:block; }
  .waitform,.signupform{ flex-direction:column; max-width:400px; }
  .waitform .btn-light,.signupform .btn-berry{ width:100%; }
}
@media (max-width:560px){
  .band{ padding:var(--s12) 0; }
  .card{ padding:var(--s6); }
  .cards4,.who-grid{ grid-template-columns:1fr; }
  .dash{ padding:var(--s6); }
  .segment{ display:flex; }
  .seg{ flex:1; text-align:center; }
}
/* ===== STEP ILLUSTRATIONS (line-art, awaiting professional imagery) === */
.step .media .stepart{ width:82%; height:auto; }
.step .media .vig{ width:82%; height:auto; }
.art-floor{ stroke:rgba(249,244,241,.14); stroke-width:1.2; }
.art-top{ fill:rgba(249,244,241,.10); stroke:var(--inverted); stroke-width:1.6; stroke-linejoin:round; }
.art-l{ fill:rgba(10,22,12,.30); stroke:var(--inverted); stroke-width:1.6; stroke-linejoin:round; }
.art-r{ fill:rgba(10,22,12,.46); stroke:var(--inverted); stroke-width:1.6; stroke-linejoin:round; }
.art-line{ stroke:rgba(249,244,241,.4); stroke-width:1.2; }
.art-led{ fill:var(--sunlight); filter:drop-shadow(0 0 6px var(--sunlight)); animation:corePulse 2s ease-in-out infinite; }
.art-route{ fill:none; stroke:rgba(249,244,241,.5); stroke-width:1.4; }
.art-node-top{ fill:rgba(249,244,241,.12); stroke:var(--inverted); stroke-width:1.4; stroke-linejoin:round; }
.art-pdot{ fill:var(--sunlight); filter:drop-shadow(0 0 4px var(--sunlight)); }

/* ===== HERO SCENE — brain · chip · balanced flows · privacy ======== */
.hero-scene{ overflow:visible; }
.hero-scene .route-glow.data{ stroke:var(--flow-data); }
.hero-scene .route-glow.energy{ stroke:var(--flow-energy); }
.hero-scene .route-glow.cost{ stroke:var(--flow-cost); }
.hero-scene .pdot{ filter:drop-shadow(0 0 5px currentColor); }
.hero-scene .pdot.data{ fill:var(--flow-data); color:var(--flow-data); }
.hero-scene .pdot.energy{ fill:var(--flow-energy); color:var(--flow-energy); }
.hero-scene .pdot.cost{ fill:var(--flow-cost); color:var(--flow-cost); }
.hero-scene .board-trace{ stroke:var(--flow-energy); stroke-opacity:.4; stroke-width:1; }
.hero-scene .board-pad{ fill:var(--flow-energy); opacity:.5; }
.hero-scene .sov-ring{ fill:none; stroke:var(--flow-energy); stroke-opacity:.22; stroke-width:1.4; stroke-dasharray:2 11; animation:sovMarch 7s linear infinite; }
.hero-scene .chip-top{ fill:rgba(249,244,241,.10); stroke:var(--inverted); stroke-width:1.6; stroke-linejoin:round; }
.hero-scene .chip-side{ fill:rgba(10,22,12,.28); stroke:var(--inverted); stroke-width:1.6; stroke-linejoin:round; }
.hero-scene .chip-side2{ fill:rgba(10,22,12,.45); stroke:var(--inverted); stroke-width:1.6; stroke-linejoin:round; }
.hero-scene .chip-pin{ stroke:var(--inverted); stroke-width:2; stroke-opacity:.7; stroke-linecap:round; }
.hero-scene .die{ fill:rgba(251,245,130,.10); stroke:var(--flow-energy); stroke-width:1; stroke-opacity:.8; }
.hero-scene .chip-trace{ stroke:var(--flow-energy); stroke-width:1; stroke-opacity:.55; }
.hero-scene .chip-core{ fill:var(--flow-energy); filter:drop-shadow(0 0 7px var(--flow-energy)); animation:corePulse 2s ease-in-out infinite; }
.hero-scene .shield{ fill:rgba(185,207,255,.14); stroke:var(--flow-cost); stroke-width:1.6; stroke-linejoin:round; filter:drop-shadow(0 0 8px rgba(185,207,255,.45)); }
.hero-scene .shield-key{ fill:var(--flow-cost); }
.hero-scene .eu-star{ fill:var(--flow-energy); opacity:.92; filter:drop-shadow(0 0 5px rgba(251,245,130,.85)); animation:twinkle 3.2s ease-in-out infinite; }
.hero-scene .brain-halo{ fill:var(--flow-data); opacity:.16; filter:url(#soft); animation:corePulse 2.6s ease-in-out infinite; }
.hero-scene .brain-line{ fill:none; stroke:var(--inverted); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hero-scene .brain-core{ fill:var(--flow-data); filter:drop-shadow(0 0 7px var(--flow-data)); animation:corePulse 2.6s ease-in-out infinite; }
.hero-scene .chip-halo{ fill:var(--flow-data); opacity:.14; filter:url(#soft); animation:corePulse 2.6s ease-in-out infinite; }
.hero-scene .synapse{ fill:none; stroke:var(--flow-data); stroke-width:1.2; stroke-opacity:.72; stroke-linecap:round; }
.hero-scene .neuron{ fill:var(--flow-data); filter:drop-shadow(0 0 4px var(--flow-data)); animation:twinkle 3s ease-in-out infinite; }
.hero-scene .eu-border{ fill:none; stroke:var(--flow-energy); stroke-width:1.4; stroke-opacity:.34; stroke-dasharray:1 15; animation:sovMarch 30s linear infinite; }
.hero-scene .flab-bg{ fill:rgba(12,34,17,.66); stroke:rgba(249,244,241,.12); stroke-width:1; }
.hero-scene .flab{ font-family:var(--sans); font-size:17px; font-weight:700; letter-spacing:.13em; fill:var(--inverted); }
.hero-scene .flab-sub{ font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.06em; fill:rgba(249,244,241,.62); }
.hero-scene .fdot{ filter:drop-shadow(0 0 4px currentColor); }
.hero-scene .fdot.data{ fill:var(--flow-data); color:var(--flow-data); }
.hero-scene .fdot.energy{ fill:var(--flow-energy); color:var(--flow-energy); }
.hero-scene .fdot.cost{ fill:var(--flow-cost); color:var(--flow-cost); }
@keyframes corePulse{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
@keyframes twinkle{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }
@keyframes sovMarch{ to{ stroke-dashoffset:-130 } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}