/* ---------- Self-hosted fonts (subsetted + axis-instanced) ----------
   No Google Fonts request: one less origin, one less DNS+TLS round trip,
   no third-party in the CSP, and nothing leaks to a third party on page load.
   Vazirmatn carries BOTH scripts for body text — one body typeface across
   Persian and Latin is a system decision, not a compromise: it keeps the
   x-height, colour and rhythm identical when the language is switched.
   Archivo (Latin display only) and JetBrains Mono (tabular data) are loaded
   for the roles Vazirmatn cannot serve. */
@font-face{font-family:'Vazirmatn';src:url('../fonts/vazirmatn.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo.woff2') format('woff2');
  font-weight:700 900;font-stretch:100% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jbm-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jbm-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

/* ============================================================
   KARA PARDAZAN — Landing Page (v2)
   + Bilingual EN / FA with full RTL mirroring
   + Ambient transmission-line layer, energised by scroll
   Every colour and type value comes from the approved token files.
   ============================================================ */

/* ---------- Brand colour tokens ---------- */
:root{
  --color-primary-50:#e7faf7;--color-primary-50:oklch(97% .02 185);--color-primary-100:#c3f3ec;--color-primary-100:oklch(93% .05 185);--color-primary-200:#93e3d8;--color-primary-200:oklch(86% .08 185);
  --color-primary-300:#5cc6b9;--color-primary-300:oklch(76% .10 185);--color-primary-400:#1aa598;--color-primary-400:oklch(65% .11 185);--color-primary-500:#00867a;--color-primary-500:oklch(55% .11 185);
  --color-primary-600:#00695f;--color-primary-600:oklch(46% .10 185);--color-primary-700:#005149;--color-primary-700:oklch(38% .09 185);--color-primary-800:#003932;--color-primary-800:oklch(30% .07 185);
  --color-primary-900:#00221e;--color-primary-900:oklch(22% .05 185);
  --color-secondary-100:#c4f0ff;--color-secondary-100:oklch(93% .05 220);--color-secondary-300:#52c1e1;--color-secondary-300:oklch(76% .11 220);--color-secondary-500:#008aaf;--color-secondary-500:oklch(58% .13 220);
  --color-secondary-600:#006e8f;--color-secondary-600:oklch(49% .12 220);--color-secondary-700:#00536c;--color-secondary-700:oklch(40% .10 220);--color-secondary-900:#002230;--color-secondary-900:oklch(23% .06 220);
  --color-accent-100:#ffdfcb;--color-accent-100:oklch(94% .06 45);--color-accent-300:#ffa578;--color-accent-300:oklch(81% .13 45);--color-accent-400:#ff9868;--color-accent-400:oklch(78% .14 45);
  --color-accent-500:#fa8c58;--color-accent-500:oklch(75% .15 45);--color-accent-600:#d46a34;--color-accent-600:oklch(64% .15 45);--color-accent-700:#ab4b16;--color-accent-700:oklch(53% .14 45);
  --color-accent-800:#7c350e;--color-accent-800:oklch(42% .11 45);--color-accent-900:#502007;--color-accent-900:oklch(31% .08 45);
  --color-success-100:#c5eec5;--color-success-100:oklch(91% .07 145);--color-success-500:#419547;--color-success-500:oklch(60% .14 145);--color-success-700:#1c5c23;--color-success-700:oklch(42% .11 145);
  --color-warning-100:#ffdcbc;--color-warning-100:oklch(93% .07 55);--color-warning-500:#ef852e;--color-warning-500:oklch(72% .16 55);--color-warning-700:#a14400;--color-warning-700:oklch(50% .15 55);
  --color-danger-100:#ffd0ca;--color-danger-100:oklch(91% .07 25);--color-danger-500:#cc272e;--color-danger-500:oklch(55% .20 25);--color-danger-700:#860010;--color-danger-700:oklch(39% .16 25);
  --color-info-500:#2f9fb1;--color-info-500:oklch(65% .10 210);
  --color-neutral-50:#f8f8f8;--color-neutral-50:oklch(98% 0 0);--color-neutral-100:#eeeeee;--color-neutral-100:oklch(95% 0 0);--color-neutral-200:#dedede;--color-neutral-200:oklch(90% 0 0);
  --color-neutral-300:#c4c4c4;--color-neutral-300:oklch(82% 0 0);--color-neutral-400:#9e9e9e;--color-neutral-400:oklch(70% 0 0);--color-neutral-500:#7a7a7a;--color-neutral-500:oklch(58% 0 0);
  --color-neutral-600:#585858;--color-neutral-600:oklch(46% 0 0);--color-neutral-700:#3d3d3d;--color-neutral-700:oklch(36% 0 0);--color-neutral-800:#242424;--color-neutral-800:oklch(26% 0 0);
  --color-neutral-900:#0b0b0b;--color-neutral-900:oklch(15% 0 0);

  --color-surface:var(--color-neutral-50);
  --color-surface-raised:#ffffff;--color-surface-raised:oklch(100% 0 0);
  --color-surface-sunken:#ebebeb;--color-surface-sunken:oklch(94% 0 0);
  --color-border:var(--color-neutral-200);
  --color-text-primary:var(--color-neutral-900);
  --color-text-secondary:var(--color-neutral-600);
  --color-text-on-primary:#ffffff;--color-text-on-primary:oklch(100% 0 0);
  --color-interactive-fill:var(--color-primary-600);
  --color-interactive-fill-hover:var(--color-primary-700);
  --color-interactive-text:var(--color-primary-700);
  --color-accent-text:var(--color-accent-800);
  --glow-strength:.28;
  --mesh-opacity:.30;
  --window-off:#cacaca;--window-off:oklch(84% 0 0);
  /* ambient transmission layer — deliberately weak, it is atmosphere, not content */
  --pylon-line:rgba(0,105,95,0.22);--pylon-line:oklch(46% .10 185 / .22);
  --pylon-wire:rgba(0,105,95,0.18);--pylon-wire:oklch(46% .10 185 / .18);
  --pylon-flow:rgba(212,106,52,0.75);--pylon-flow:oklch(64% .15 45 / .75);
  --pylon-max:.55;
}
[data-theme="dark"]{
  --color-surface:#0e1216;--color-surface:oklch(18% .01 240);
  --color-surface-raised:#191e21;--color-surface-raised:oklch(23% .01 240);
  --color-surface-sunken:#060a0d;--color-surface-sunken:oklch(14% .01 240);
  --color-border:#2e3437;--color-border:oklch(32% .01 240);
  --color-text-primary:#e8e8e8;--color-text-primary:oklch(93% 0 0);
  --color-text-secondary:#a4a4a4;--color-text-secondary:oklch(72% 0 0);
  --color-text-on-primary:#f8f8f8;--color-text-on-primary:oklch(98% 0 0);
  --color-primary-100:#002d28;--color-primary-100:oklch(26% .06 185);--color-primary-700:#00a99c;--color-primary-700:oklch(66% .12 185);
  --color-secondary-100:#002a38;--color-secondary-100:oklch(26% .06 220);--color-secondary-700:#00a0c5;--color-secondary-700:oklch(65% .13 220);
  --color-accent-100:#3b1908;--color-accent-100:oklch(26% .06 45);--color-accent-800:#ff9661;--color-accent-800:oklch(78% .15 45);
  --color-success-100:#0e2b10;--color-success-100:oklch(26% .06 145);--color-success-700:#54a859;--color-success-700:oklch(66% .14 145);
  --color-warning-100:#391b03;--color-warning-100:oklch(26% .06 55);--color-warning-700:#ff9b50;--color-warning-700:oklch(78% .15 55);
  --color-danger-100:#3c1715;--color-danger-100:oklch(26% .06 25);--color-danger-700:#ff645f;--color-danger-700:oklch(70% .19 25);
  --color-interactive-fill:#00786c;--color-interactive-fill:oklch(50% .12 185);
  --color-interactive-fill-hover:#008175;--color-interactive-fill-hover:oklch(53% .12 185);
  --color-interactive-text:#00b0a2;--color-interactive-text:oklch(68% .12 185);
  --color-accent-text:#ff9661;--color-accent-text:oklch(78% .15 45);
  --glow-strength:.85;
  --mesh-opacity:.55;
  --window-off:#202528;--window-off:oklch(26% .01 240);
  --pylon-line:rgba(0,169,156,0.16);--pylon-line:oklch(66% .12 185 / .16);
  --pylon-wire:rgba(0,169,156,0.13);--pylon-wire:oklch(66% .12 185 / .13);
  --pylon-flow:rgba(255,150,97,0.9);--pylon-flow:oklch(78% .15 45 / .9);
  --pylon-max:.9;
}

/* ---------- Type tokens ---------- */
:root{
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Vazirmatn',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --fs-caption:.75rem; --fs-sm:.8125rem; --fs-body:.875rem; --fs-md:1rem;
  --fs-lg:1.1875rem; --fs-xl:1.4375rem; --fs-2xl:1.75rem; --fs-display:2.0625rem;
  --lh-body:1.65; --lh-heading:1.15;
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1180px;
}
/* Persian: Vazirmatn everywhere, no letter-spacing (it breaks Persian joining),
   no uppercase transforms, looser leading. Latin numerals stay tabular. */
html[lang="fa"]{
  --font-display:'Vazirmatn',sans-serif;
  --font-body:'Vazirmatn',sans-serif;
  --lh-heading:1.45;
}
html[lang="fa"] h1,html[lang="fa"] h2,html[lang="fa"] h3{font-stretch:normal;letter-spacing:0;font-weight:800}
html[lang="fa"] .eyebrow,html[lang="fa"] .meter-title,html[lang="fa"] .scroll-hint,
html[lang="fa"] .stats small,html[lang="fa"] .readout small,html[lang="fa"] .card .k,
html[lang="fa"] .bar-label,html[lang="fa"] .hero-note,html[lang="fa"] .disclaimer,html[lang="fa"] .foot-mono{
  font-family:'Vazirmatn',sans-serif;letter-spacing:0;text-transform:none
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--color-surface);color:var(--color-text-primary);
  font-family:var(--font-body);font-size:var(--fs-md);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--font-display);font-weight:800;line-height:var(--lh-heading);margin:0;
  font-stretch:118%;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
a{color:inherit}
::selection{background:var(--color-accent-500);color:#0b0b0b;color:oklch(15% 0 0)}

.wrap{width:min(100% - 40px,var(--maxw));margin-inline:auto}
main{position:relative;z-index:1}
.eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-caption);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--color-interactive-text);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.lede{color:var(--color-text-secondary);font-size:var(--fs-lg);max-width:56ch}
section{padding:clamp(72px,9vw,132px) 0;position:relative}
.disclaimer{margin-top:22px;font-size:var(--fs-sm);color:var(--color-text-secondary);font-family:var(--font-mono)}

/* ---------- Ambient transmission-line layer ---------- */
.pylons{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity .8s var(--ease)}
.pylons svg{position:absolute;inset:0;width:100%;height:100%}
.pylons .lattice{stroke:var(--pylon-line);fill:none;stroke-width:1.2;stroke-linecap:round}
.pylons .wire{stroke:var(--pylon-wire);fill:none;stroke-width:1}
.pylons .flow{fill:none;stroke-width:2.2;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(250,140,88,0.45));filter:drop-shadow(0 0 6px oklch(75% .15 45 / .45))}
.pylons .far{opacity:.5}

/* ---------- Buttons ----------
   The light does two things only: it rings the edge, and it pools underneath.
   It never washes across the face of the button — the face stays a solid,
   readable surface. Ring = crisp 1.5px rotating conic, masked to the frame.
   Pool = the same conic, blurred, anchored to the lower half. */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;isolation:isolate;
  padding:14px 26px;border-radius:14px;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--font-body);font-size:var(--fs-body);font-weight:600;letter-spacing:.01em;
  color:var(--color-text-on-primary);
  background:linear-gradient(180deg,var(--color-interactive-fill),var(--color-interactive-fill));background:linear-gradient(180deg,color-mix(in oklch,var(--color-interactive-fill) 84%,white),var(--color-interactive-fill));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -2px 0 rgba(0,0,0,0.22),
    0 8px 20px -14px rgba(0,0,0,0.9);box-shadow:inset 0 1px 0 color-mix(in oklch,white 40%,transparent),
    inset 0 -2px 0 color-mix(in oklch,black 22%,transparent),
    0 8px 20px -14px oklch(0% 0 0 / .9);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn::before{ /* the ring */
  content:"";position:absolute;inset:-1.5px;z-index:-1;border-radius:15.5px;padding:1.5px;
  background:conic-gradient(from var(--a,0deg),
    #fa8c58, #008aaf, #00867a, #fa8c58);background:conic-gradient(from var(--a,0deg),
    oklch(75% .15 45), oklch(58% .13 220), oklch(55% .11 185), oklch(75% .15 45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:calc(.55 + var(--glow-strength) * .45);
  animation:spin 4.5s linear infinite;
}
.btn::after{ /* the pool of light beneath */
  content:"";position:absolute;z-index:-2;left:8%;right:8%;bottom:-7px;height:58%;border-radius:14px;
  background:conic-gradient(from var(--a,0deg),
    #fa8c58, #008aaf, #00867a, #fa8c58);background:conic-gradient(from var(--a,0deg),
    oklch(75% .15 45), oklch(58% .13 220), oklch(55% .11 185), oklch(75% .15 45));
  filter:blur(11px);opacity:calc(var(--glow-strength) * .8);
  animation:spin 4.5s linear infinite;
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{filter:blur(15px);opacity:calc(var(--glow-strength) * 1)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--color-surface);color:var(--color-text-primary);
  box-shadow:inset 0 0 0 1px var(--color-border)}
.btn.ghost::before{opacity:calc(.22 + var(--glow-strength) * .35)}
.btn.ghost::after{opacity:calc(var(--glow-strength) * .35)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--color-interactive-text)}
.btn .arrow{transition:transform .2s var(--ease)}
html[dir="rtl"] .btn .arrow{transform:scaleX(-1)}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--color-accent-500);outline-offset:3px;border-radius:6px}

/* ---------- Nav ---------- */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:var(--color-surface);background:color-mix(in oklch,var(--color-surface) 78%,transparent);
  border-bottom:1px solid var(--color-border);border-bottom:1px solid color-mix(in oklch,var(--color-border) 60%,transparent)}
.nav-in{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;
  font-stretch:112%;letter-spacing:-.01em;font-size:var(--fs-md);text-decoration:none}
.brand small{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-caption);
  color:var(--color-text-secondary);letter-spacing:.08em;text-transform:uppercase}
html[lang="fa"] .brand small{font-family:'Vazirmatn',sans-serif;letter-spacing:0;text-transform:none}
.nav-links{display:flex;gap:22px;margin-inline-start:auto}
.nav-links a{font-size:var(--fs-body);color:var(--color-text-secondary);text-decoration:none;
  padding:6px 2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav-links a:hover{color:var(--color-text-primary);border-color:var(--color-interactive-text)}
.nav-tools{display:flex;gap:8px;align-items:center}
.icon-btn{height:36px;min-width:36px;padding:0 10px;display:grid;place-items:center;border-radius:10px;cursor:pointer;
  background:var(--color-surface-raised);border:1px solid var(--color-border);color:var(--color-text-primary);
  font-family:var(--font-mono);font-size:var(--fs-caption);font-weight:700;letter-spacing:.06em;
  transition:border-color .2s,transform .2s}
.icon-btn:hover{border-color:var(--color-interactive-text);transform:translateY(-1px)}

/* ============================================================
   HERO — a strip-chart recorder, not a dashboard screenshot.
   The instrument of this industry is the chart recorder: a pen
   dragging one day of current across ruled paper. In light mode it
   IS paper (ruled grid, hatched ink). In dark mode the same geometry
   becomes an oscilloscope. Same drawing, two materials — so light
   mode is a design, not a de-glowed leftover.
   ============================================================ */
.hero{padding-top:clamp(24px,3.5vw,48px);padding-bottom:0;overflow:clip}
.hero-head{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,56px);align-items:end;
  margin-bottom:clamp(16px,2.4vw,26px)}
.hero-rule{display:flex;align-items:center;gap:12px;padding-bottom:10px;margin-bottom:16px;
  border-bottom:1px solid var(--color-border);font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-secondary);flex-wrap:wrap}
html[lang="fa"] .hero-rule{font-family:'Vazirmatn',sans-serif;letter-spacing:0;text-transform:none}
.hero h1{font-size:clamp(1.95rem,3.6vw,3.1rem);line-height:1.06;font-stretch:120%;font-weight:900;
  margin:0 0 16px;max-width:19ch}
html[lang="fa"] .hero h1{font-size:clamp(1.55rem,2.8vw,2.35rem);max-width:24ch;
  line-height:1.55}                       /* Persian needs leading; 1.06 crushes it */
html[lang="fa"] .hero h1 .lit{padding:.06em .12em .1em;line-height:1.7}
html[lang="fa"] .hero .lede{font-size:var(--fs-body);line-height:1.8;max-width:44ch}
/* The Persian phrase is short enough to hold one unbroken hatched strip.
   The English one is NOT — it must stay free to wrap, or it overruns its column. */
@media(min-width:720px){html[lang="fa"] .hero h1 .lit{white-space:nowrap}}
.hero-head > *{min-width:0}   /* grid children must be allowed to shrink, or they overflow */
/* The headline and the chart share one material: amber hatching = wasted energy. */
.hero h1 .lit{
  position:relative;color:var(--color-text-primary);
  background-image:repeating-linear-gradient(-45deg,
    var(--color-accent-500) 0 2px, transparent 2px 7px);background-image:repeating-linear-gradient(-45deg,
    color-mix(in oklch,var(--color-accent-500) 42%,transparent) 0 2px, transparent 2px 7px);
  box-shadow:inset 0 -.11em 0 var(--color-accent-500);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em .02em;
}
[data-theme="dark"] .hero h1 .lit{
  box-shadow:inset 0 -.11em 0 var(--color-accent-500), 0 0 26px -2px rgba(250,140,88,0.5);box-shadow:inset 0 -.11em 0 var(--color-accent-500), 0 0 26px -2px oklch(75% .15 45 / .5)}
.hero .lede{font-size:var(--fs-md);max-width:48ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0 0}
.hero-note{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--color-text-secondary);
  display:flex;align-items:center;gap:8px}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--color-success-500);flex:none;
  box-shadow:0 0 0 0 var(--color-success-500);box-shadow:0 0 0 0 color-mix(in oklch,var(--color-success-500) 70%,transparent);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* three findings of the day — a panel that fills its column, not a card floating at the bottom */
.hero-head{align-items:stretch}
.findings{display:flex;flex-direction:column;min-height:100%;
  padding-inline-start:clamp(16px,2vw,30px);border-inline-start:1px solid var(--color-border)}
.findings-head{display:flex;align-items:center;justify-content:space-between;gap:12px;white-space:nowrap;
  padding-bottom:12px;border-bottom:1px solid var(--color-border);
  font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-text-secondary)}
html[lang="fa"] .findings-head{font-family:'Vazirmatn',sans-serif;letter-spacing:0;text-transform:none}
.findings-head b{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.findings-rows{display:flex;flex-direction:column;justify-content:center;gap:2px;flex:1;min-height:0}
.row{display:grid;gap:5px;padding:11px 2px;font-size:var(--fs-body);
  border-bottom:1px solid var(--color-border)}
.row-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.row-text{color:var(--color-text-secondary);line-height:1.5}
.findings-rows .row:last-child{border-bottom:0}
.row .tag{font-family:var(--font-mono);font-size:var(--fs-caption);
  font-variant-numeric:tabular-nums;font-weight:500;direction:ltr;flex:none;
  color:var(--color-text-primary)}
.findings-foot{display:flex;align-items:center;gap:8px;padding-top:12px;text-decoration:none;
  border-top:1px solid var(--color-border);font-size:var(--fs-caption);
  color:var(--color-interactive-text);transition:gap .2s var(--ease)}
.findings-foot:hover{gap:12px}

/* ---- the recorder itself: full-bleed, edge to edge ---- */
.recorder{position:relative;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  border-block:1px solid var(--color-border);background:var(--color-surface-raised);direction:ltr}
.rec-plot{position:relative;height:clamp(170px,24vh,260px);cursor:ew-resize}
.rec-plot svg{position:absolute;inset:0;width:100%;height:100%}
.grid-h{stroke:var(--color-border);stroke-width:1;vector-effect:non-scaling-stroke}
.grid-v{stroke:var(--color-border);stroke-width:1;opacity:.55;vector-effect:non-scaling-stroke}
.waste{fill:url(#hatch);stroke:none;transition:opacity .4s var(--ease)}
.before{fill:none;stroke:var(--color-neutral-400);stroke-width:1.5;stroke-dasharray:5 4;
  vector-effect:non-scaling-stroke}
[data-theme="dark"] .before{stroke:#696969;stroke:oklch(52% 0 0)}
.after{fill:none;stroke:var(--color-interactive-text);stroke-width:2.5;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px oklch(55% .11 185 / var(--glow-strength)))}
.mark{stroke:var(--color-accent-600);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke;opacity:.8}
.cursor{position:absolute;top:0;bottom:0;width:1px;background:var(--color-interactive-text);opacity:.55;
  pointer-events:none;transform:translateX(-.5px)}
.pen{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--color-accent-500);
  border:2px solid var(--color-surface-raised);pointer-events:none;transform:translate(-50%,-50%);
  box-shadow:0 0 14px 2px oklch(75% .15 45 / var(--glow-strength))}
.tip{position:absolute;transform:translate(-50%,-160%);pointer-events:none;white-space:nowrap;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;padding:7px 10px;
  font-family:var(--font-mono);font-size:var(--fs-caption);font-variant-numeric:tabular-nums;
  box-shadow:0 8px 24px -12px rgba(0,0,0,0.6);box-shadow:0 8px 24px -12px oklch(0% 0 0 / .6)}
.tip b{color:var(--color-accent-text)}
.ann{position:absolute;transform:translateX(-50%);top:10px;font-family:var(--font-mono);
  font-size:var(--fs-caption);color:var(--color-text-secondary);white-space:nowrap;pointer-events:none;
  padding:2px 6px;border-radius:6px;background:var(--color-surface-raised);background:color-mix(in oklch,var(--color-surface-raised) 82%,transparent)}
html[lang="fa"] .ann,html[lang="fa"] .tip{font-family:'Vazirmatn',sans-serif;direction:rtl}
.axis{display:flex;justify-content:space-between;padding:6px 16px;direction:ltr;
  font-family:var(--font-mono);font-size:var(--fs-caption);font-variant-numeric:tabular-nums;
  color:var(--color-text-secondary);border-top:1px solid var(--color-border)}

/* ---- controls under the chart ---- */
.rec-bar{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:16px 0 0}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:var(--fs-caption);color:var(--color-text-secondary)}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{width:14px;height:10px;border-radius:2px;flex:none}
.legend .sw-after{background:var(--color-interactive-text)}
.legend .sw-before{background:repeating-linear-gradient(90deg,var(--color-neutral-400) 0 4px,transparent 4px 7px)}
.legend .sw-waste{background:repeating-linear-gradient(-45deg,var(--color-accent-500) 0 2px,transparent 2px 5px);
  outline:1px solid var(--color-accent-500);outline:1px solid color-mix(in oklch,var(--color-accent-500) 60%,transparent)}
.scrub{width:100%;accent-color:var(--color-accent-500);margin-top:14px}
.kpi{display:flex;gap:22px;align-items:baseline}
.kpi div{text-align:start}
.kpi b{display:block;font-family:var(--font-mono);font-weight:700;font-size:var(--fs-xl);
  font-variant-numeric:tabular-nums;direction:ltr;color:var(--color-accent-text)}
.kpi small{font-size:var(--fs-caption);color:var(--color-text-secondary)}
/* Status = colour + icon + text label. Never colour alone. */
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;flex:none;
  justify-self:start;width:fit-content;
  font-size:var(--fs-caption);font-weight:600;font-family:var(--font-body)}
.chip svg{width:12px;height:12px;flex:none}
.chip.ok{background:var(--color-success-100);color:var(--color-success-700)}
.chip.warn{background:var(--color-warning-100);color:var(--color-warning-700)}
.chip.crit{background:var(--color-danger-100);color:var(--color-danger-700)}
.chip.ai{background:var(--color-accent-100);color:var(--color-accent-800)}

/* ============================================================
   AMBIENT HORIZON — where the electron came from.
   Drawn in the same technical hand as the rest of the page: hairlines,
   no photography, no green gradient, no leaves. A wind farm behind the
   tower at night; a solar field under the engine at dawn. It stays at
   4–12% opacity: you should feel it before you notice it.
   --clean rises with the scroll: as the building powers down, the
   turbines behind it come up. The message is structural, not decorative.
   ============================================================ */
.eco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.eco svg{position:absolute;inset:0;width:100%;height:100%}
.eco .land{fill:var(--color-primary-500);opacity:.055}
.eco .horizon{stroke:var(--color-primary-500);stroke-width:1;opacity:.16}
.eco .stalk{stroke:var(--color-primary-500);stroke-width:1.4;fill:none;stroke-linecap:round;
  opacity:calc(.13 + var(--clean,0) * .30)}
.eco .blade{stroke:var(--color-primary-400);stroke-width:1.6;fill:none;stroke-linecap:round;
  opacity:calc(.13 + var(--clean,0) * .34)}
.eco .hub{fill:var(--color-accent-500);opacity:calc(.10 + var(--clean,0) * .55)}
.eco .spin{animation:turn var(--dur,20s) linear infinite;
  transform-box:fill-box;transform-origin:center}
@keyframes turn{to{transform:rotate(360deg)}}
.eco .panel{stroke:var(--color-primary-500);stroke-width:1;fill:var(--color-secondary-500);
  fill-opacity:.05;opacity:.22}
.eco .sun{opacity:.5}
.lights-stage{position:relative}
.lights-stage .stage-in{position:relative;z-index:1}
.engine .wrap{position:relative;z-index:1}

/* ---------- Signature: lights-out scroll ---------- */
.lights{background:var(--color-surface-sunken);border-block:1px solid var(--color-border);padding:0}
.lights-track{height:340vh;position:relative}
.lights-stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.stage-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;width:min(100% - 40px,var(--maxw))}
.tower{position:relative;justify-self:center;width:100%;max-width:380px}
.tower svg{width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,0.35));filter:drop-shadow(0 30px 60px oklch(0% 0 0 / .35))}
.win{fill:var(--color-accent-500);transition:fill .5s var(--ease),opacity .5s var(--ease);opacity:1}
.win.off{fill:var(--window-off);opacity:.55}
.win.keep{fill:var(--color-primary-400)}
.halo{transition:opacity .6s var(--ease)}
.lights-copy h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin:18px 0 16px}
.lights-copy #lEyebrow,.lights-copy h2,.lights-copy .lede{transition:opacity .3s var(--ease)}
.lights-copy.swap #lEyebrow,.lights-copy.swap h2,.lights-copy.swap .lede{opacity:0}
.lights-copy h2{min-height:2.2em}
.lights-copy .lede{min-height:5.4em}
.readout{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}
.readout div{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:14px;padding:14px}
.readout b{display:block;font-family:var(--font-mono);font-weight:700;font-size:var(--fs-xl);
  font-variant-numeric:tabular-nums;color:var(--color-text-primary);direction:ltr;text-align:start}
.readout small{font-size:var(--fs-caption);color:var(--color-text-secondary);letter-spacing:.04em}
.scroll-hint{margin-top:22px;font-family:var(--font-mono);font-size:var(--fs-caption);
  color:var(--color-text-secondary);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.scroll-hint i{width:1px;height:16px;background:currentColor;animation:drop 1.6s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(-6px);opacity:0}50%{opacity:1}100%{transform:translateY(6px);opacity:0}}

/* ---------- Personas ---------- */
.seg{display:inline-flex;padding:4px;gap:4px;border-radius:14px;background:var(--color-surface-sunken);
  border:1px solid var(--color-border);margin:26px 0 34px;flex-wrap:wrap}
.seg button{border:0;background:transparent;cursor:pointer;color:var(--color-text-secondary);
  font-family:var(--font-body);font-size:var(--fs-body);font-weight:600;padding:10px 18px;border-radius:10px;
  transition:color .2s,background .2s}
.seg button[aria-selected="true"]{background:var(--color-surface-raised);color:var(--color-interactive-text);
  box-shadow:0 0 0 1px var(--color-border),0 0 22px -6px oklch(55% .11 185 / var(--glow-strength))}
.persona{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.persona:focus-visible{outline:2px solid var(--color-accent-500);outline-offset:8px;border-radius:12px}
.plist{display:grid;gap:14px;margin-top:22px;padding:0;list-style:none}
.plist li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-md);color:var(--color-text-secondary)}
.plist svg{margin-top:3px;flex:none;color:var(--color-interactive-text)}
.plist b{color:var(--color-text-primary);font-weight:600}
.meter-title{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-text-secondary)}
.pstat{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:20px;padding:26px}
.pstat .big{font-family:var(--font-mono);font-weight:700;font-size:clamp(2.2rem,4.5vw,3.2rem);
  font-variant-numeric:tabular-nums;color:var(--color-accent-text);direction:ltr;text-align:start;
  text-shadow:0 0 26px oklch(75% .15 45 / calc(var(--glow-strength) * .55))}
.bars{display:grid;gap:10px;margin-top:22px}
.bar{height:8px;border-radius:999px;background:var(--color-surface-sunken);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--color-primary-500),var(--color-accent-500));transition:width 1.1s var(--ease)}
.bar-label{display:flex;justify-content:space-between;font-size:var(--fs-caption);
  font-family:var(--font-mono);color:var(--color-text-secondary);margin-bottom:6px}

/* ---------- Engine ---------- */
.engine{overflow:clip;background:var(--color-surface-sunken);border-block:1px solid var(--color-border)}
.engine-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.cards{display:grid;gap:14px}
.card{position:relative;background:var(--color-surface-raised);border:1px solid var(--color-border);
  border-radius:18px;padding:22px 24px;overflow:hidden;transition:border-color .3s,transform .3s var(--ease)}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(220px 160px at var(--mx,50%) var(--my,50%),rgba(250,140,88,0.13),transparent 70%);background:radial-gradient(220px 160px at var(--mx,50%) var(--my,50%),oklch(75% .15 45 / .13),transparent 70%)}
.card:hover{transform:translateY(-3px);border-color:var(--color-interactive-text);border-color:color-mix(in oklch,var(--color-interactive-text) 55%,transparent)}
.card:hover::before{opacity:1}
.card h3{font-size:var(--fs-lg);font-stretch:110%;margin-bottom:8px}
.card p{font-size:var(--fs-body);color:var(--color-text-secondary)}
.card .k{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--color-accent-text);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;display:block}
.hexwrap{justify-self:center;width:100%;max-width:460px}
.node{fill:var(--color-accent-500)}
.edge{stroke:var(--color-secondary-500);stroke-width:1;opacity:.5}
.facet{fill:none;stroke:var(--color-primary-500);stroke-width:1.5;opacity:.75}

/* The two open sections (#who and #proof) now sit next to each other, so the
   transmission line runs behind both as one long band instead of two windows.
   Their shared seam loses its double padding. */
.open-band{background:transparent}
#who{padding-bottom:clamp(40px,5vw,64px)}
#proof{padding-top:clamp(40px,5vw,64px)}

/* ---------- Numbers ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--color-border);
  border:1px solid var(--color-border);border-radius:20px;overflow:hidden}
.stats div{background:var(--color-surface);padding:30px 24px}
.stats b{display:block;font-family:var(--font-mono);font-weight:700;font-size:var(--fs-2xl);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;direction:ltr;text-align:start}
.stats small{font-size:var(--fs-caption);color:var(--color-text-secondary);letter-spacing:.06em;
  text-transform:uppercase;font-family:var(--font-mono)}

/* ---------- Final CTA + footer ---------- */
.final{text-align:center;position:relative;overflow:clip}
.final::before{content:"";position:absolute;inset:auto 50% -180px auto;translate:50% 0;width:760px;height:360px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,134,122,0.26),transparent 70%);background:radial-gradient(50% 50% at 50% 50%,oklch(55% .11 185 / .26),transparent 70%);pointer-events:none}
.final h2{font-size:clamp(2rem,4.6vw,3.4rem);max-width:20ch;margin-inline:auto}
.final .hero-actions{justify-content:center}
.final .eyebrow,.final .hero-note{justify-content:center}
footer{border-top:1px solid var(--color-border);padding:40px 0;font-size:var(--fs-body);
  color:var(--color-text-secondary);position:relative;z-index:1;background:var(--color-surface)}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot-fa{font-family:'Vazirmatn',sans-serif;direction:rtl}
.foot-mono{font-family:var(--font-mono);font-size:var(--fs-caption)}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Articles ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--color-border);
  border-block:1px solid var(--color-border)}
.post{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px 26px 26px;
  background:var(--color-surface);text-decoration:none;transition:background .25s var(--ease)}
.post:hover{background:var(--color-surface-raised)}
.post-meta{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-text-secondary)}
html[lang="fa"] .post-meta{font-family:'Vazirmatn',sans-serif;letter-spacing:0;text-transform:none}
.post-date{font-variant-numeric:tabular-nums;direction:ltr;font-family:var(--font-mono)}
.post h3{font-size:var(--fs-lg);font-stretch:110%}
.post p{font-size:var(--fs-body);color:var(--color-text-secondary)}
.post-go{margin-top:auto;padding-top:14px;color:var(--color-interactive-text);font-size:var(--fs-lg);
  transition:transform .25s var(--ease)}
html[dir="rtl"] .post-go{transform:scaleX(-1)}
.post:hover .post-go{transform:translateX(5px)}
html[dir="rtl"] .post:hover .post-go{transform:scaleX(-1) translateX(5px)}

/* ---------- Contact ---------- */
.contact{background:var(--color-surface-sunken);border-block:1px solid var(--color-border)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.channels{display:grid;gap:0;margin:32px 0 0;border-top:1px solid var(--color-border)}
.channels div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--color-border)}
.channels dt{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-text-secondary)}
html[lang="fa"] .channels dt{font-family:'Vazirmatn',sans-serif;letter-spacing:0;text-transform:none}
.channels dd{margin:0;font-size:var(--fs-body)}
.channels a{color:var(--color-interactive-text);text-decoration:none}
.channels a:hover{text-decoration:underline}
.form-card{background:var(--color-surface-raised);border:1px solid var(--color-border);
  border-radius:20px;padding:clamp(22px,3vw,30px);display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font-size:var(--fs-caption);color:var(--color-text-secondary)}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:var(--fs-body);color:var(--color-text-primary);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:11px;
  padding:11px 13px;width:100%;transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--color-interactive-text);
  box-shadow:0 0 0 3px var(--color-interactive-text);box-shadow:0 0 0 3px color-mix(in oklch,var(--color-interactive-text) 22%,transparent)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--color-danger-500);
  box-shadow:0 0 0 3px var(--color-danger-500);box-shadow:0 0 0 3px color-mix(in oklch,var(--color-danger-500) 18%,transparent)}
.form-card .btn{justify-content:center;margin-top:4px}
.form-note{font-size:var(--fs-caption);color:var(--color-text-secondary);text-align:center}
.form-note.ok{color:var(--color-success-700);font-weight:600}
.form-note.err{color:var(--color-danger-700);font-weight:600}

/* ---------- Footer ---------- */
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-bottom:30px;
  border-bottom:1px solid var(--color-border)}
.foot-cols nav{display:flex;flex-direction:column;gap:9px}
.foot-cols nav b{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-text-primary);margin-bottom:5px}
html[lang="fa"] .foot-cols nav b{font-family:'Vazirmatn',sans-serif;letter-spacing:0;text-transform:none}
.foot-cols nav a{text-decoration:none;font-size:var(--fs-body);transition:color .2s}
.foot-cols nav a:hover{color:var(--color-interactive-text)}
.foot-in{padding-top:24px}

/* ---------- Skip link ---------- */
.skip{position:fixed;top:-60px;inset-inline-start:16px;z-index:80;padding:10px 16px;border-radius:0 0 10px 10px;
  background:var(--color-surface-raised);border:1px solid var(--color-border);color:var(--color-text-primary);
  text-decoration:none;font-size:var(--fs-body);transition:top .2s var(--ease)}
.skip:focus{top:0}

/* Sections far below the fold are not rendered until they are near the viewport.
   contain-intrinsic-size keeps the scrollbar honest so nothing jumps. */
#who,#proof,#knowledge,#company,#contact,footer{content-visibility:auto;contain-intrinsic-size:auto 700px}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* The hero is a thesis: the trace must be visible on first paint, not below the fold.
   On a normal desktop viewport the whole instrument fits; on short screens the page
   simply scrolls as usual rather than squashing the type. */
@media(min-height:760px) and (min-width:900px){
  .hero{display:flex;flex-direction:column;min-height:calc(100svh - 64px);justify-content:center}
  .hero .wrap:first-of-type{flex:0 0 auto}
  .rec-plot{height:clamp(190px,26vh,280px)}
}

/* ============================================================
   RESPONSIVE — the phone is where most people meet this page first,
   so it is treated as a design, not as a fallback.
   ============================================================ */
.burger{display:none}

@media(max-width:900px){
  .hero-head,.stage-in,.persona,.engine-grid{grid-template-columns:1fr;gap:32px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .posts{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr;gap:24px}
  #findingsSlot .status-line{margin-top:26px}
  #findingsSlot .findings{border-inline-start:0;padding-inline-start:0;margin-top:22px;
    border-top:1px solid var(--color-border);padding-top:18px}
  #findingsSlot .findings-rows{gap:0}
  .pylons{opacity:0 !important}   /* atmosphere is a desktop luxury; on a phone it is noise */
  .eco{opacity:.6}

  /* --- navigation: a real menu, not a hidden one --- */
  .burger{display:grid}
  .nav-in > .btn,.nav-tools > .btn{display:none}   /* the CTA moves inside the menu */
  .nav-links{
    position:fixed;top:64px;inset-inline:0;display:flex;flex-direction:column;gap:0;
    margin:0;padding:6px 20px 18px;z-index:49;
    background:var(--color-surface);background:color-mix(in oklch,var(--color-surface) 97%,transparent);
    border-bottom:1px solid var(--color-border);
    transform:translateY(-115%);transition:transform .32s var(--ease);
    box-shadow:0 20px 40px -30px rgba(0,0,0,0.8);box-shadow:0 20px 40px -30px oklch(0% 0 0 / .8);
  }
  .nav-links.open{transform:none}
  .nav-links a{padding:15px 2px;border-bottom:1px solid var(--color-border);font-size:var(--fs-md)}
  .nav-links .btn{margin-top:16px;justify-content:center;display:inline-flex}
  .icon-btn{height:40px;min-width:40px}   /* 40px minimum tap target */


  /* --- hero, portrait: every pixel is budgeted so the whole trace is above the fold --- */
  .hero{padding-top:16px}
  .hero-rule{margin-bottom:12px;padding-bottom:8px}
  .hero h1{font-size:clamp(1.8rem,7.2vw,2.3rem);margin-bottom:12px}
  html[lang="fa"] .hero h1{font-size:clamp(1.4rem,5.4vw,1.85rem);line-height:1.5}
  .hero .lede{font-size:var(--fs-sm);line-height:1.7}
  .hero-actions{margin-top:16px;gap:10px}
  .hero-actions .btn{flex:1 1 0;min-width:0;padding:12px 14px;justify-content:center;text-align:center}
  .status-line{margin-top:0}
  .rec-plot{height:170px}
  .rec-bar{padding-top:14px}
  .scenario-note{margin-top:12px}

  /* --- hero (legacy block) --- */
  .hero{padding-top:16px}
  .hero h1{font-size:clamp(1.85rem,7.6vw,2.5rem);max-width:none}
  html[lang="fa"] .hero h1{font-size:clamp(1.45rem,5.8vw,2rem);max-width:none}
  .hero .lede{max-width:none}
  .hero-rule{font-size:11px;gap:8px}
  .hero-rule span:last-child{display:none}   /* one line, or it wraps into two */
  .hero-actions .btn{flex:1 1 100%;justify-content:center}
  .rec-plot{height:180px;cursor:default}
  .ann{display:none}                          /* annotations collide at this width */
  .axis{padding:6px 12px;font-size:11px}
  .axis span:nth-child(even){display:none}    /* 00 · 08 · 16 · 24 */
  .rec-bar{grid-template-columns:1fr;gap:16px}
  .kpi{justify-content:space-between}
  .scrub{height:34px}                         /* thumb needs real room under a thumb */

  /* --- the tower: it must still fit one screen, or the whole story breaks --- */
  .lights-track{height:280vh}
  .lights-stage{height:100svh;min-height:520px;padding:0}
  .stage-in{gap:18px;align-content:center}
  .tower{max-width:180px;order:-1}
  .lights-copy h2{font-size:clamp(1.35rem,5.6vw,1.8rem);margin:10px 0 10px;min-height:0}
  .lights-copy .lede{font-size:var(--fs-body);min-height:0}
  .readout{gap:7px;margin-top:16px}
  .readout div{padding:10px 8px}
  .readout b{font-size:var(--fs-md)}
  .readout small{font-size:11px;line-height:1.35}
  .scroll-hint{display:none}                  /* on a phone, scrolling is not a discovery */

  /* --- everything else --- */
  section{padding:clamp(56px,11vw,80px) 0}
  .seg{width:100%}
  .seg button{flex:1;padding:11px 8px}
  .sec-head{align-items:start}
  .sec-head .btn{width:100%;justify-content:center}
  .channels div{flex-direction:column;gap:4px}
  .final h2{max-width:none}
}

@media(max-width:900px){
  .nav-in{height:56px}
  .nav-links{top:56px}
}
@media(max-width:900px) and (max-height:700px) and (orientation:portrait){
  .rec-plot{height:142px}
  .hero{padding-top:12px}
  .hero-rule{margin-bottom:10px;padding-bottom:6px}
  .hero .lede{font-size:12.5px;line-height:1.65}
  .hero-actions{margin-top:12px}
}
@media(max-width:420px){
  .stats{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
  .kpi{gap:14px}
  .kpi b{font-size:var(--fs-lg)}
}

/* touch: the range thumb has to be catchable with a finger */
@media(pointer:coarse){
  .scrub{accent-color:var(--color-accent-500)}
  .scrub::-webkit-slider-thumb{width:26px;height:26px}
  .post,.row,.nav-links a{-webkit-tap-highlight-color:transparent}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .pylons .flow{display:none} /* no travelling current; the towers stay, still and quiet */
  .eco .spin{animation:none}   /* the blades hold still */
}


/* ---------- Credibility release additions ---------- */
.nav-links > .btn{display:none}
.status-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}
.status-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--color-border);
  border-radius:999px;background:var(--color-surface-raised);background:color-mix(in oklch,var(--color-surface-raised) 82%,transparent);
  color:var(--color-text-secondary);font-size:var(--fs-caption)}
.status-pill b{color:var(--color-text-primary);font-weight:600}
.scenario-note{font-size:var(--fs-caption);color:var(--color-text-secondary);margin-top:14px;
  padding-inline-start:14px;border-inline-start:2px solid var(--color-accent-500)}
.phase-wrap{padding-top:0!important}
.phase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);
  background:none;border:0;position:relative;padding-top:26px}
/* the rail the three stations sit on */
.phase-grid::before{content:"";position:absolute;top:6px;inset-inline:8%;height:1px;
  background:linear-gradient(90deg,var(--color-success-500),var(--color-accent-500),var(--color-secondary-500));
  opacity:.35}
.phase{position:relative;background:var(--color-surface-raised);border:1px solid var(--color-border);
  border-radius:18px;padding:24px;min-height:0;transition:transform .3s var(--ease),border-color .3s}
.phase::before{content:"";position:absolute;top:-26px;inset-inline-start:26px;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--color-surface);background:var(--color-border)}
.phase::after{content:"";position:absolute;top:-21px;inset-inline-start:30px;width:1px;height:21px;
  background:var(--color-border)}
.phase:hover{transform:translateY(-3px)}
.phase .phase-no{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--color-text-secondary);
  letter-spacing:.1em}
html[lang="fa"] .phase .phase-no{font-family:'Vazirmatn',sans-serif;letter-spacing:0}
.phase h3{font-size:var(--fs-lg);margin:10px 0 8px}
.phase p{font-size:var(--fs-body);color:var(--color-text-secondary)}
/* status is never colour alone: each card also carries its own word (فعال / پایلوت / نقشه راه) */
.phase.current{border-color:var(--color-success-500);border-color:color-mix(in oklch,var(--color-success-500) 45%,var(--color-border))}
.phase.current::before{background:var(--color-success-500);box-shadow:0 0 10px var(--color-success-500)}
.phase.current .phase-no{color:var(--color-success-700)}
.phase.pilot::before{background:var(--color-accent-500)}
.phase.pilot .phase-no{color:var(--color-accent-text)}
.phase.roadmap::before{background:var(--color-secondary-500)}
.phase.roadmap .phase-no{color:var(--color-interactive-text)}
.phase.roadmap{opacity:.88}
.company{background:var(--color-surface-sunken);border-block:1px solid var(--color-border)}
.company-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.company-facts{display:grid;gap:1px;background:var(--color-border);border:1px solid var(--color-border);
  border-radius:20px;overflow:hidden}
.company-facts article{background:var(--color-surface-raised);padding:20px 22px}
.company-facts b{display:block;font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:.08em;color:var(--color-accent-text);margin-bottom:6px}
html[lang="fa"] .company-facts b{font-family:'Vazirmatn',sans-serif;letter-spacing:0}
.company-facts span{color:var(--color-text-secondary);font-size:var(--fs-body)}
.trust-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.trust-list span{padding:7px 11px;border:1px solid var(--color-border);border-radius:999px;
  font-size:var(--fs-caption);color:var(--color-text-secondary);background:var(--color-surface-raised)}
.form-card button:disabled{cursor:not-allowed;opacity:.58;filter:saturate(.7)}
.form-card .field-help{font-size:11px;color:var(--color-text-secondary)}
.contact-action{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.contact-action a{font-size:var(--fs-body)}
.pstat .big.word{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.7rem);letter-spacing:0}
.no-js{padding:14px 20px;background:var(--color-warning-100);color:var(--color-warning-700);text-align:center}

@media(max-width:900px){
  .nav-links > .btn{display:inline-flex}
  .phase-grid,.company-grid{grid-template-columns:1fr}
  .phase-grid{padding-top:0;gap:12px}
  .phase-grid::before{display:none}
  .phase::before,.phase::after{display:none}
  .phase{min-height:0;padding:20px}
  /* On a phone the readout was stretched edge-to-edge and became a band lying
     across the trace. It is a readout, not a banner: pin it to the top corner
     (where the night hours leave the plot empty), keep it to one line, and make
     it glass so the curve stays visible THROUGH it rather than behind it. */
  .tip{
    top:8px!important;bottom:auto!important;left:auto!important;right:auto!important;
    transform:none!important;width:auto;max-width:calc(100% - 20px);
    white-space:nowrap;text-align:start;line-height:1.4;
    padding:6px 10px;font-size:11px;border-radius:999px;
    background:rgba(20,26,30,.55);
    background:var(--color-surface);background:color-mix(in oklch,var(--color-surface) 55%,transparent);
    -webkit-backdrop-filter:blur(12px) saturate(1.3);
    backdrop-filter:blur(12px) saturate(1.3);
    border:1px solid var(--color-border);border:1px solid color-mix(in oklch,var(--color-border) 70%,transparent);
    box-shadow:none;
  }
  html[dir="rtl"] .tip{right:10px!important}
  html[dir="ltr"] .tip{left:10px!important}
  .tip b{margin-inline-start:6px}
  .status-line{align-items:stretch}
  .status-pill{flex:1 1 100%}
}

/* ============================================================
   CORPORATE ADDITIONS — honeypot, consent, legal footer
   ============================================================ */
/* the honeypot must be invisible to people and untouched by assistive tech,
   but still a real, fillable field for a bot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:flex;align-items:flex-start;gap:10px;margin-top:4px}
.consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--color-interactive-fill)}
.consent label{font-size:var(--fs-caption);color:var(--color-text-secondary);line-height:1.7}
.consent a{color:var(--color-interactive-text);text-decoration:underline;margin-inline-start:4px}

.foot-badge{font-size:var(--fs-caption);color:var(--color-text-secondary);margin-top:12px}
.foot-legal{padding:20px 0;border-top:1px solid var(--color-border);
  display:grid;gap:6px;font-size:var(--fs-caption);color:var(--color-text-secondary);line-height:1.9}
.foot-legal b{color:var(--color-text-primary);font-weight:600}
.foot-cols{grid-template-columns:1.3fr 1fr 1fr 1fr}
@media(max-width:900px){.foot-cols{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.foot-cols{grid-template-columns:1fr}}

/* legal / policy pages share the site shell */
.page{padding:clamp(56px,8vw,96px) 0;max-width:none}
.page-body{max-width:70ch}
.page-body h2{font-size:var(--fs-xl);margin:32px 0 12px}
.page-body h3{font-size:var(--fs-lg);margin:24px 0 8px}
.page-body p,.page-body li{color:var(--color-text-secondary);font-size:var(--fs-md);line-height:1.9}
.page-body ul{padding-inline-start:20px;display:grid;gap:8px;margin:12px 0}
.page-body a{color:var(--color-interactive-text)}
.page-body .updated{font-family:var(--font-mono);font-size:var(--fs-caption);
  color:var(--color-text-secondary);margin-bottom:24px}
html[lang="fa"] .page-body .updated{font-family:'Vazirmatn',sans-serif}
.err-code{font-family:var(--font-mono);font-size:clamp(3rem,10vw,6rem);font-weight:700;
  color:var(--color-interactive-text);line-height:1}

/* ---------- Social channels ---------- */
.social{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.social a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
  background:var(--color-surface-raised);border:1px solid var(--color-border);
  color:var(--color-text-secondary);text-decoration:none;
  transition:color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.social a:hover{
  color:var(--color-interactive-text);
  border-color:var(--color-interactive-text);border-color:color-mix(in oklch,var(--color-interactive-text) 55%,transparent);
  transform:translateY(-2px);
  box-shadow:0 6px 18px -10px rgba(0,134,122,0.9);box-shadow:0 6px 18px -10px oklch(55% .11 185 / .9)}
.social a:focus-visible{outline:2px solid var(--color-accent-500);outline-offset:3px}
.social svg{width:17px;height:17px}
.social-title{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-text-primary);margin-top:18px;display:block}
html[lang="fa"] .social-title{font-family:'Vazirmatn',sans-serif;letter-spacing:0;text-transform:none}
@media(max-width:900px){.social a{width:42px;height:42px}}

/* ============================================================
   SOCIAL — icons carry an accessible name, never colour or shape alone.
   Empty handles are not rendered at all: an icon that links nowhere is a lie.
   ============================================================ */
.social{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.social a{
  display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  color:var(--color-text-secondary);text-decoration:none;
  background:var(--color-surface-raised);border:1px solid var(--color-border);
  transition:color .2s,border-color .2s,transform .2s var(--ease)}
.social a:hover{color:var(--color-interactive-text);
  border-color:var(--color-interactive-text);border-color:color-mix(in oklch,var(--color-interactive-text) 55%,transparent);
  transform:translateY(-2px)}
.social a svg{width:17px;height:17px}
.social a.wordmark{width:auto;padding:0 12px;font-family:var(--font-body);
  font-size:var(--fs-caption);font-weight:600;letter-spacing:0}
#socialContact{margin:24px 0 4px}