/* ═══════════ V1 «ГОРИЗОНТ» — CORE (канон, значення НЕ міняти) ═══════════ */
:root{
  --tlo:#1B1C1F;--tlo-2:#16171A;--poverhnya:#27282A;--poverhnya-2:#2E3033;
  --sklo:rgba(23,24,27,.72);
  --tilo:#EDEFF2;--prygl:#C2C8CF;--prygl-2:#B7BDC5;
  --neon:#35E0E6;--plazma:#9A86FF;--poperedzhennya:#F5B14C;--krytychne:#FF6B6B;
  --neon-tlo:color-mix(in oklab,var(--neon) 14%,var(--poverhnya));
  --neon-liniya:color-mix(in oklab,var(--neon) 62%,transparent);
  --amber-tlo:color-mix(in oklab,var(--poperedzhennya) 15%,var(--poverhnya));
  --kryt-tlo:color-mix(in oklab,var(--krytychne) 15%,var(--poverhnya));
  --plazma-tlo:color-mix(in oklab,var(--plazma) 15%,var(--poverhnya));
  --mezha:color-mix(in oklab,#AEEFF2 16%,transparent);
  --mezha-m:color-mix(in oklab,#AEEFF2 9%,transparent);
  --rebro:color-mix(in oklab,var(--neon) 42%,transparent);
  --na-neoni:#062024;
  --disp:"Bahnschrift","DIN Condensed","Segoe UI",system-ui,sans-serif;
  --mono:"Consolas","SFMono-Regular","JetBrains Mono",ui-monospace,monospace;
  --f:"Segoe UI",system-ui,-apple-system,sans-serif;
  --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:20px;--sp6:24px;--sp8:32px;--sp10:40px;--sp12:48px;--sp16:64px;--sp20:80px;
  --r:10px;--r-lg:16px;--r-sm:6px;--r-full:999px;--cil:46px;
  --t-fast:150ms;--t:220ms;--ease:cubic-bezier(.2,.7,.2,1);--max:1200px;
  --tin-1:0 1px 2px rgba(0,0,0,.5),0 0 0 1px var(--mezha-m);
  --tin-2:0 2px 8px rgba(0,0,0,.5),0 18px 44px -20px rgba(53,224,230,.24),0 0 0 1px var(--mezha-m);
  --tin-neon:0 0 0 1px var(--rebro),0 0 24px -4px rgba(53,224,230,.5);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tlo);color:var(--tilo);font-family:var(--f);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;overflow-x:hidden;
  background-image:
    radial-gradient(80% 60% at 82% -8%,rgba(53,224,230,.10),transparent 60%),
    radial-gradient(70% 55% at 6% 4%,rgba(154,134,255,.10),transparent 62%);}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:600;line-height:1.06;
  letter-spacing:.01em;text-transform:uppercase;padding-bottom:.06em}
h1{font-size:clamp(2.4rem,1.2rem + 5.4vw,5rem)}
h2{font-size:clamp(1.7rem,1.1rem + 2.4vw,2.9rem)}
h3{font-size:1.15rem;letter-spacing:.03em}
p{margin:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--sp6)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.prygl{color:var(--prygl)}
.oko{font-family:var(--mono);font-size:.76rem;letter-spacing:.28em;text-transform:uppercase;color:var(--neon)}
:where(a,button,[tabindex],[role=button],input,select,summary):focus-visible{
  outline:2px solid var(--neon);outline-offset:3px;border-radius:var(--r-sm)}
.ik{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.skan{position:relative;height:1px;background:linear-gradient(90deg,transparent,var(--neon-liniya) 30%,var(--neon-liniya) 70%,transparent)}
.vuzol{display:inline-grid;place-items:center;width:8px;height:8px}
.vuzol::before{content:"";width:6px;height:6px;background:var(--neon);border-radius:1px;box-shadow:0 0 12px 1px rgba(53,224,230,.7)}
/* шапка */
.shapka{position:sticky;top:0;z-index:40;background:var(--sklo);
  backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--mezha-m)}
.shapka .wrap{display:flex;align-items:center;gap:var(--sp5);min-height:66px}
.brend{display:flex;align-items:center;gap:var(--sp3);min-width:0}
.brend .znak{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;
  background:linear-gradient(145deg,var(--neon),#12A9AE);color:var(--na-neoni);box-shadow:var(--tin-neon)}
.brend .znak svg{width:22px;height:22px;stroke:var(--na-neoni);stroke-width:2}
.brend b{font-family:var(--disp);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:1.02rem}
.brend small{display:block;font-family:var(--mono);font-size:.68rem;color:var(--prygl-2);letter-spacing:.05em}
.nav{display:flex;gap:var(--sp1);margin-left:var(--sp4)}
.nav a{padding:9px 13px;border-radius:var(--r-sm);color:var(--prygl);font-size:.92rem;font-weight:500;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.nav a:hover{background:var(--poverhnya);color:var(--tilo)}
.nav a[aria-current=page]{color:var(--neon);background:var(--neon-tlo)}
.roztyah{margin-left:auto}
.perem{display:inline-flex;border:1px solid var(--mezha);border-radius:var(--r-sm);overflow:hidden;font-family:var(--mono)}
.perem button{min-height:40px;padding:0 12px;background:transparent;border:0;color:var(--prygl);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;letter-spacing:.04em}
.perem button[aria-pressed=true]{background:var(--neon-tlo);color:var(--neon)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp2);min-height:var(--cil);
  padding:0 var(--sp5);border-radius:var(--r);background:var(--poverhnya);color:var(--tilo);
  border:1px solid var(--mezha);font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;box-shadow:var(--tin-1);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--tin-2)}
.btn:active{transform:translateY(0)}
.btn .ik{width:18px;height:18px}
.btn.holovna{background:#35E0E6 linear-gradient(140deg,var(--neon),#22C7CC);color:var(--na-neoni);border-color:transparent;box-shadow:var(--tin-neon)}
.btn.mala{min-height:40px;padding:0 var(--sp4);font-size:.88rem}
.btn.pryzrach{background:transparent;box-shadow:none;border-color:var(--mezha)}
.btn.pryzrach:hover{background:var(--poverhnya)}
/* герой */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--mezha-m)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 58% at 78% 8%,rgba(53,224,230,.22),transparent 60%),
    radial-gradient(42% 52% at 18% 88%,rgba(154,134,255,.20),transparent 62%),
    linear-gradient(180deg,transparent,rgba(20,21,24,.4));}
.hero::after{content:"";position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(rgba(174,239,242,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(174,239,242,.05) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(120% 100% at 60% 0,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 100% at 60% 0,#000,transparent 78%)}
.hero .wrap{position:relative;z-index:1;padding:var(--sp20) var(--sp6) var(--sp16)}
.hero-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:var(--sp12);align-items:center}
.hero .oko-row{display:flex;align-items:center;gap:var(--sp3)}
.hero .oko-row .skan{flex:1;max-width:120px}
.hero h1{margin:var(--sp5) 0 var(--sp5)}
.hero h1 em{font-style:normal;color:var(--neon);text-shadow:0 0 34px rgba(53,224,230,.5)}
.hero .lid{font-size:1.16rem;color:var(--prygl);max-width:42ch;line-height:1.5}
.hero .cta{display:flex;gap:var(--sp3);flex-wrap:wrap;margin-top:var(--sp8)}
/* HUD-консоль */
.hud{position:relative;background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));
  border:1px solid var(--mezha);border-radius:var(--r-lg);box-shadow:var(--tin-2);overflow:hidden}
.hud::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--rebro) 20%,var(--rebro) 80%,transparent)}
.hud .hud-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--sp3);
  padding:var(--sp4) var(--sp5);border-bottom:1px solid var(--mezha-m)}
.hud .hud-hd .t{display:flex;align-items:center;gap:var(--sp2);font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--prygl);text-transform:uppercase}
.zhyvo{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--neon);text-transform:uppercase}
.zhyvo .puls{width:8px;height:8px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px 1px rgba(53,224,230,.8);animation:puls 2.4s var(--ease) infinite}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.35}}
.hud-body{padding:var(--sp5)}
.tiker{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sp3);
  padding:var(--sp3) 0;border-bottom:1px dashed var(--mezha-m)}
.tiker:last-child{border-bottom:0}
.tiker .k{font-size:.86rem;color:var(--prygl)}
.tiker .v{font-family:var(--mono);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--tilo)}
.tiker .v.neon{color:var(--neon)}
.hud-spark{margin:var(--sp4) 0 var(--sp2)}
.hud-spark svg{width:100%;height:auto;display:block}
.hud-spark figcaption{font-family:var(--mono);font-size:.72rem;color:var(--prygl-2);margin-top:var(--sp2);letter-spacing:.02em}
/* секції */
section{padding:var(--sp20) 0;position:relative}
.sec-hd{max-width:62ch;margin-bottom:var(--sp12)}
.sec-hd .oko-row{display:flex;align-items:center;gap:var(--sp3);margin-bottom:var(--sp4)}
.sec-hd .oko-row .skan{flex:1;max-width:80px}
.sec-hd h2{margin-bottom:var(--sp4)}
.sec-hd p{color:var(--prygl);font-size:1.06rem}
/* входи-консолі */
.vhody{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp5)}
.vhid{position:relative;display:flex;flex-direction:column;gap:var(--sp3);
  background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));border:1px solid var(--mezha);
  border-radius:var(--r-lg);padding:var(--sp6);box-shadow:var(--tin-1);overflow:hidden;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.vhid::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--rebro),transparent);opacity:.5;transition:opacity var(--t) var(--ease)}
.vhid:hover{transform:translateY(-4px);box-shadow:var(--tin-2);border-color:var(--rebro)}
.vhid:hover::before{opacity:1}
.vhid .idx{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;color:var(--neon)}
.vhid .znak{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:var(--neon-tlo);color:var(--neon);border:1px solid var(--mezha)}
.vhid .znak svg{width:26px;height:26px}
.vhid h3{color:var(--tilo)}
.vhid p{color:var(--prygl);font-size:.94rem;flex:1}
.vhid .ide{display:inline-flex;align-items:center;gap:7px;color:var(--neon);font-weight:600;font-size:.9rem;font-family:var(--mono);letter-spacing:.02em}
.vhid .ide .ik{width:16px;height:16px;transition:transform var(--t-fast) var(--ease)}
.vhid:hover .ide .ik{transform:translateX(4px)}
/* блок «живий» */
.tlo-blok{background:linear-gradient(180deg,var(--tlo-2),var(--tlo));border-top:1px solid var(--mezha-m);border-bottom:1px solid var(--mezha-m)}
.dokaz{display:grid;grid-template-columns:1fr .9fr;gap:var(--sp12);align-items:center}
.chomu{display:grid;gap:var(--sp5)}
.chomu .row{display:grid;grid-template-columns:auto 1fr;gap:var(--sp4);align-items:start}
.chomu .ci{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:11px;
  background:var(--poverhnya);border:1px solid var(--mezha);color:var(--neon);box-shadow:var(--tin-1)}
.chomu .ci svg{width:22px;height:22px}
.chomu b{color:var(--tilo);font-family:var(--disp);font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:1.02rem}
.chomu p{color:var(--prygl);font-size:.93rem;margin-top:4px}
.panel-chart{position:relative;background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));
  border:1px solid var(--mezha);border-radius:var(--r-lg);box-shadow:var(--tin-2);padding:var(--sp6);overflow:hidden}
.panel-chart::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--rebro),transparent)}
.panel-chart .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp4);font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:var(--prygl);text-transform:uppercase}
.panel-chart svg{width:100%;height:auto;display:block}
.panel-chart figcaption{color:var(--prygl);font-size:.82rem;margin-top:var(--sp4);line-height:1.45}
/* стати-HUD */
.staty{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp5)}
.stat{position:relative;background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));
  border:1px solid var(--mezha);border-radius:var(--r-lg);box-shadow:var(--tin-1);padding:var(--sp6);overflow:hidden}
.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--rebro),transparent);opacity:.6}
.stat .v{font-family:var(--disp);font-size:3.2rem;font-weight:600;letter-spacing:0;line-height:.95;background:linear-gradient(120deg,var(--neon),var(--plazma));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.stat .k{color:var(--prygl);font-size:.9rem;margin-top:var(--sp3)}
.stat .chart{margin-top:var(--sp4)}
.stat .chart svg{width:100%;height:auto;display:block}
/* підвал */
.pidval{border-top:1px solid var(--mezha-m);background:var(--tlo-2)}
.pidval .wrap{padding:var(--sp12) var(--sp6);display:flex;justify-content:space-between;gap:var(--sp8);flex-wrap:wrap}
.pidval nav{display:flex;gap:var(--sp6);flex-wrap:wrap}
.pidval nav a{color:var(--prygl);font-size:.9rem}
.pidval nav a:hover{color:var(--neon)}
.pidval small{color:var(--prygl-2);font-size:.82rem;font-family:var(--mono);display:block;margin-top:var(--sp3)}

/* ═══════════ V1 «ГОРИЗОНТ» — РОЗШИРЕННЯ ЛЕНДИНГУ (нові секції, мова та ж) ═══════════ */
/* спільні дрібні елементи */
.dzherelo{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--prygl-2);
  border:1px solid var(--mezha-m);border-radius:var(--r-sm);padding:2px 7px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.dzherelo::before{content:"";width:4px;height:4px;border-radius:1px;background:var(--neon);opacity:.7}
.prelim{color:var(--poperedzhennya);border-color:color-mix(in oklab,var(--poperedzhennya) 30%,transparent)}
.prelim::before{background:var(--poperedzhennya)}
.oko-row{display:flex;align-items:center;gap:var(--sp3)}
.oko-row .skan{flex:1;max-width:80px}
/* HUD-стрічка (секція 2) */
.stuzhka{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp4)}
.tile{position:relative;background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));
  border:1px solid var(--mezha);border-radius:var(--r-lg);padding:var(--sp6);box-shadow:var(--tin-1);overflow:hidden}
.tile::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--rebro),transparent);opacity:.6}
.tile .v{font-family:var(--disp);font-weight:600;font-size:2.9rem;line-height:.95;color:var(--tilo);padding-bottom:.05em;display:flex;align-items:baseline;gap:6px}
.tile .v .su{font-family:var(--mono);font-size:1.05rem;font-weight:700;color:var(--prygl-2)}
.tile .v.neon{color:var(--neon)}
.tile .v.plaz{background:linear-gradient(120deg,var(--neon),var(--plazma));-webkit-background-clip:text;background-clip:text;color:transparent}
.tile .k{color:var(--prygl);font-size:.88rem;margin:var(--sp3) 0 var(--sp3)}
.tile .fut{display:flex;align-items:center;justify-content:space-between;gap:var(--sp2);margin-top:var(--sp3)}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.72rem;font-weight:700;
  letter-spacing:.04em;padding:4px 10px;border-radius:var(--r-full);border:1px solid var(--mezha)}
.badge .ik{width:14px;height:14px}
.badge.svizho{color:var(--neon);border-color:var(--rebro);background:var(--neon-tlo)}
/* 5 диференціаторів (секція 4) */
.dyf{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp5)}
.dyf-card{position:relative;display:flex;flex-direction:column;gap:var(--sp3);
  background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));border:1px solid var(--mezha);
  border-radius:var(--r-lg);padding:var(--sp6);box-shadow:var(--tin-1);overflow:hidden;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.dyf-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--rebro),transparent);opacity:.5;transition:opacity var(--t) var(--ease)}
.dyf-card:hover{transform:translateY(-3px);box-shadow:var(--tin-2);border-color:var(--rebro)}
.dyf-card:hover::before{opacity:1}
.dyf-card .top{display:flex;align-items:center;gap:var(--sp3)}
.dyf-card .ci{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--neon-tlo);border:1px solid var(--mezha);color:var(--neon)}
.dyf-card .ci svg{width:22px;height:22px}
.dyf-card .idx{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--prygl-2)}
.dyf-card h3{color:var(--tilo)}
.dyf-card p{color:var(--prygl);font-size:.9rem;flex:1}
/* ── диф-ілюстрації: детальні авторські сцени (меридіан-мова, hairline, ≤3 акценти) ── */
.dyf-viz{margin:var(--sp3) 0}
.dyf-viz svg{width:100%;height:auto;display:block;border-radius:var(--r-sm)}
.dyf-viz text{font-family:var(--mono);font-weight:600}
.dyf-viz .dv-cap{font-size:6.4px;letter-spacing:.14em;fill:var(--prygl-2)}
.dyf-viz .end{text-anchor:end}
.dyf-viz .dv-lbl{font-size:7.4px;letter-spacing:.02em;fill:var(--prygl)}
.dyf-viz .dv-num{font-size:9px;font-weight:700;letter-spacing:.02em}
/* самодостатні підписи В ілюстрації: назва вузла + значення (легібельні на 390/1024/1440) */
.dyf-viz .dv-name{font-size:12px;letter-spacing:.03em;fill:var(--tilo)}
.dyf-viz .dv-sub{font-size:12px;letter-spacing:.02em;fill:var(--prygl)}
.dyf-viz .dv-mid{text-anchor:middle}
.dyf-viz .dv-hair{stroke:var(--mezha-m);fill:none;stroke-width:1}
.dyf-viz .dv-hair2{stroke:var(--mezha);fill:none;stroke-width:1}
@keyframes dv-dash{to{stroke-dashoffset:0}}
@keyframes dv-scan{0%{opacity:0;transform:translateX(0)}10%{opacity:.9}55%{opacity:.9}70%{opacity:0}100%{opacity:0;transform:translateX(var(--dv-sw,150px))}}
@keyframes dv-blink{0%,72%,100%{opacity:.28}82%,94%{opacity:1}}
@keyframes dv-breathe{0%,100%{opacity:.55}50%{opacity:1}}
.rukh .dyf-viz .dv-flow{stroke-dasharray:5 8;stroke-dashoffset:130;animation:dv-dash 3.6s linear infinite}
.rukh .dyf-viz .dv-orbit{stroke-dasharray:7 233;stroke-dashoffset:240;animation:dv-dash 8s linear infinite}
.rukh .dyf-viz .dv-sweep{animation:dv-scan 5s var(--ease) infinite}
.rukh .dyf-viz .dv-blink{animation:dv-blink 4.2s var(--ease) infinite}
.rukh .dyf-viz .dv-breathe{animation:dv-breathe 3.4s var(--ease) infinite}
.rukh .dyf-viz .dv-orbit-c{stroke-dasharray:4 96;stroke-dashoffset:100;animation:dv-dash 6.5s linear infinite}
.svit{display:flex;align-items:center;gap:8px;border-top:1px dashed var(--mezha-m);padding-top:var(--sp3);margin-top:auto}
.svit .lab{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--prygl-2);text-transform:uppercase}
.svit .nm{font-size:.82rem;color:var(--prygl)}
/* таби (секція 5) */
.taby-nav{display:inline-flex;gap:var(--sp1);border:1px solid var(--mezha);border-radius:var(--r);padding:4px;background:var(--tlo-2);flex-wrap:wrap}
.taby-nav button{min-height:44px;padding:0 var(--sp5);background:transparent;border:0;border-radius:var(--r-sm);color:var(--prygl);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.taby-nav button .ik{width:17px;height:17px}
.taby-nav button[aria-selected=true]{background:var(--neon-tlo);color:var(--neon)}
.tpanel{margin-top:var(--sp8)}
.tpanel[hidden]{display:none}
.kroky{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp4);counter-reset:krok}
.krok{position:relative;background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));border:1px solid var(--mezha);border-radius:var(--r-lg);padding:var(--sp5);box-shadow:var(--tin-1);overflow:hidden}
.krok::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--rebro),transparent);opacity:.5}
.krok .n{counter-increment:krok;font-family:var(--disp);font-weight:600;font-size:1.9rem;color:var(--neon);line-height:1;padding-bottom:.04em}
.krok .n::before{content:"0" counter(krok)}
.krok b{display:block;color:var(--tilo);font-family:var(--disp);font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:.98rem;margin:var(--sp3) 0 var(--sp2)}
.krok p{color:var(--prygl);font-size:.86rem}
.krok .liniya{position:absolute;top:38px;right:-8px;width:16px;height:1px;background:var(--neon-liniya);z-index:1}
/* matchmaking-віджет (секція 6) */
.metch{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--sp8);align-items:start}
.metch-ctrl{background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));border:1px solid var(--mezha);border-radius:var(--r-lg);padding:var(--sp6);box-shadow:var(--tin-1)}
.fgrupa{margin-bottom:var(--sp5)}
.fgrupa>.lab{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--prygl);margin-bottom:var(--sp3)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp2)}
.chip{min-height:38px;padding:0 var(--sp4);border-radius:var(--r-full);border:1px solid var(--mezha);background:var(--tlo-2);color:var(--prygl);font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.chip:hover{border-color:var(--rebro);color:var(--tilo)}
.chip[aria-pressed=true]{background:var(--neon-tlo);color:var(--neon);border-color:var(--rebro)}
.metch-out{background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));border:1px solid var(--mezha);border-radius:var(--r-lg);box-shadow:var(--tin-2);overflow:hidden;position:relative}
.metch-out::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--rebro) 20%,var(--rebro) 80%,transparent)}
.metch-out .hd{display:flex;align-items:center;justify-content:space-between;gap:var(--sp3);padding:var(--sp4) var(--sp5);border-bottom:1px solid var(--mezha-m);font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--prygl)}
.metch-list{padding:var(--sp5);display:grid;gap:var(--sp4)}
.mrow{display:grid;grid-template-columns:1fr auto;gap:var(--sp2) var(--sp4);align-items:center}
.mrow .nm{font-weight:600;color:var(--tilo);font-size:.94rem}
.mrow .meta{font-family:var(--mono);font-size:.72rem;color:var(--prygl-2);letter-spacing:.02em}
.mrow .pc{font-family:var(--mono);font-size:1.3rem;font-weight:700;color:var(--neon);text-align:right;line-height:1}
.mrow .barw{grid-column:1/-1;height:8px;border-radius:var(--r-full);background:var(--poverhnya-2);overflow:hidden;border:1px solid var(--mezha-m)}
.mrow .barw i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#17B6BB,var(--neon));width:0;transition:width var(--t) var(--ease)}
.mrow.lo .pc{color:var(--prygl)}
.mrow.lo .barw i{background:linear-gradient(90deg,#4a4d52,#6b7075)}
.metch-note{padding:0 var(--sp5) var(--sp5);color:var(--prygl-2);font-size:.78rem;line-height:1.5}
/* флагманські громади (секція 7) */
.hromady{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp5)}
.gcard{position:relative;display:flex;flex-direction:column;gap:var(--sp3);background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));border:1px solid var(--mezha);border-radius:var(--r-lg);padding:var(--sp5);box-shadow:var(--tin-1);overflow:hidden;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.gcard::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--rebro),transparent);opacity:.5;transition:opacity var(--t) var(--ease)}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--tin-2);border-color:var(--rebro)}
.gcard:hover::before{opacity:1}
.gcard .gtop{display:flex;align-items:center;justify-content:space-between;gap:var(--sp2)}
.gcard .rej{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--prygl-2);text-transform:uppercase}
.gcard h3{color:var(--tilo)}
.gcard .sektory{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.gtag{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--prygl);border:1px solid var(--mezha-m);border-radius:var(--r-sm);padding:3px 7px;background:var(--tlo-2)}
.gcard .ide{display:inline-flex;align-items:center;gap:7px;color:var(--neon);font-weight:600;font-size:.86rem;font-family:var(--mono)}
.gcard .ide .ik{width:15px;height:15px;transition:transform var(--t-fast) var(--ease)}
.gcard:hover .ide .ik{transform:translateX(4px)}
/* карта-прев'ю (секція 8) */
.mapa-wrap{position:relative;background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));border:1px solid var(--mezha);border-radius:var(--r-lg);box-shadow:var(--tin-2);overflow:hidden}
.mapa-wrap::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--rebro) 20%,var(--rebro) 80%,transparent);z-index:2}
.mapa-wrap svg{width:100%;height:auto;display:block}
.mapa-over{position:absolute;left:var(--sp5);bottom:var(--sp5);right:var(--sp5);display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap;z-index:2}
.mapa-leg{display:flex;gap:var(--sp5);flex-wrap:wrap;font-family:var(--mono);font-size:.74rem;color:var(--prygl)}
.mapa-leg span{display:inline-flex;align-items:center;gap:6px}
.mapa-leg .d{width:9px;height:9px;border-radius:2px}
.mapa-names{list-style:none;margin:var(--sp3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp3)}
.mapa-names li{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.84rem;color:var(--tilo);background:var(--tlo-2);border:1px solid var(--mezha);border-radius:999px;padding:4px 12px}
.mapa-names .d{width:8px;height:8px;border-radius:50%}
/* джерела капіталу (секція 9) */
.dzher{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp4)}
.dz{position:relative;background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));border:1px solid var(--mezha);border-radius:var(--r-lg);padding:var(--sp5);box-shadow:var(--tin-1);overflow:hidden;display:flex;flex-direction:column;gap:var(--sp2)}
.dz::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--rebro),transparent);opacity:.5}
.dz .nm{font-family:var(--disp);font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:1rem;color:var(--tilo);padding-bottom:.04em}
.dz .kat{font-size:.82rem;color:var(--prygl)}
.dz .ob{font-family:var(--mono);font-size:.86rem;color:var(--neon);margin-top:var(--sp2)}
.dz .aep{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:var(--sp3);font-family:var(--mono);font-size:.72rem;color:var(--prygl-2)}
.dz .aep .bar{flex:1;height:5px;border-radius:var(--r-full);background:var(--poverhnya-2);overflow:hidden;border:1px solid var(--mezha-m)}
.dz .aep .bar i{display:block;height:100%;background:linear-gradient(90deg,#17B6BB,var(--neon))}
/* контур свіжості (секція 10) */
.kontur{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp12);align-items:center}
.kontur-svg{position:relative;background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));border:1px solid var(--mezha);border-radius:var(--r-lg);box-shadow:var(--tin-2);padding:var(--sp6);overflow:hidden}
.kontur-svg::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--rebro),transparent)}
.kontur-svg svg{width:100%;height:auto;display:block}
.kontur-scroll{overflow-x:auto;overflow-y:hidden;border-radius:var(--r-sm)}
.kontur-scroll svg{min-width:300px}
@media (max-width:560px){.kontur-svg{padding:var(--sp4)}}
.kontur ol{margin:0;padding:0;list-style:none;display:grid;gap:var(--sp4);counter-reset:kk}
.kontur ol li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp4);align-items:start}
.kontur ol li .n{counter-increment:kk;width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--neon-tlo);border:1px solid var(--mezha);color:var(--neon);font-family:var(--mono);font-weight:700;font-size:.88rem}
.kontur ol li .n::before{content:counter(kk)}
.kontur ol li b{color:var(--tilo)}
.kontur ol li p{color:var(--prygl);font-size:.9rem;margin-top:3px}
/* довіра (секція 11) */
.dovira{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp5)}
.dov{position:relative;background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));border:1px solid var(--mezha);border-radius:var(--r-lg);padding:var(--sp6);box-shadow:var(--tin-1);overflow:hidden;display:flex;flex-direction:column;gap:var(--sp3)}
.dov::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--rebro),transparent);opacity:.5}
.dov .ci{width:44px;height:44px;display:grid;place-items:center;border-radius:11px;background:var(--poverhnya);border:1px solid var(--mezha);color:var(--neon)}
.dov .ci svg{width:22px;height:22px}
.dov h3{color:var(--tilo)}
.dov p{color:var(--prygl);font-size:.9rem}
/* позиціонування (секція 12) */
.pozytsiya{position:relative;background:linear-gradient(150deg,var(--tlo-2),var(--poverhnya));border:1px solid var(--mezha);border-radius:var(--r-lg);box-shadow:var(--tin-2);padding:var(--sp16) var(--sp12);overflow:hidden}
.pozytsiya::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 80% at 88% 10%,rgba(53,224,230,.14),transparent 60%),radial-gradient(50% 70% at 6% 96%,rgba(154,134,255,.14),transparent 62%)}
.pozytsiya>*{position:relative;z-index:1}
.pozytsiya .big{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.01em;line-height:1.1;
  font-size:clamp(1.5rem,1rem + 2.2vw,2.5rem);color:var(--tilo);max-width:22ch;padding-bottom:.05em}
.pozytsiya .big em{font-style:normal;color:var(--neon)}
.pozytsiya .pd{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp6);margin-top:var(--sp10)}
.pozytsiya .pd .row{display:grid;grid-template-columns:auto 1fr;gap:var(--sp3);align-items:start}
.pozytsiya .pd .ci{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--neon-tlo);border:1px solid var(--mezha);color:var(--neon)}
.pozytsiya .pd .ci svg{width:18px;height:18px}
.pozytsiya .pd b{color:var(--tilo);font-size:.96rem}
.pozytsiya .pd p{color:var(--prygl);font-size:.86rem;margin-top:2px}
/* FAQ + фінальний CTA (секція 13) */
.faq{display:grid;gap:var(--sp3);max-width:64ch}
.faq details{background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));border:1px solid var(--mezha);border-radius:var(--r);overflow:hidden;box-shadow:var(--tin-1)}
.faq summary{list-style:none;cursor:pointer;padding:var(--sp5) var(--sp6);display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);
  font-family:var(--disp);font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:.96rem;color:var(--tilo)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ik{width:20px;height:20px;flex:none;color:var(--neon);transition:transform var(--t) var(--ease)}
.faq details[open] summary .ik{transform:rotate(45deg)}
.faq details[open] summary{border-bottom:1px solid var(--mezha-m)}
.faq .ans{padding:var(--sp5) var(--sp6);color:var(--prygl);font-size:.94rem;line-height:1.55}
.faq .ans .dzherelo{margin-top:var(--sp3)}
.cta-fin{position:relative;margin-top:var(--sp16);background:linear-gradient(150deg,var(--poverhnya),var(--tlo-2));border:1px solid var(--rebro);border-radius:var(--r-lg);box-shadow:var(--tin-neon);padding:var(--sp12);overflow:hidden;text-align:center}
.cta-fin::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(70% 120% at 50% -10%,rgba(53,224,230,.18),transparent 60%)}
.cta-fin>*{position:relative;z-index:1}
.cta-fin h2{margin-bottom:var(--sp4)}
.cta-fin p{color:var(--prygl);max-width:52ch;margin:0 auto var(--sp8);font-size:1.04rem}
.cta-fin .cta{display:flex;gap:var(--sp3);flex-wrap:wrap;justify-content:center}
/* партитура входу — ТІЛЬКИ transition (Г32: без animation/fill:forwards на transform) */
.rukh .zjava{opacity:0;transform:translateY(20px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.rukh .zjava.vydno{opacity:1;transform:none}
.rukh .stagr>*{opacity:0;transform:translateY(18px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.rukh .stagr.vydno>*{opacity:1;transform:none}
.rukh .stagr.vydno>*:nth-child(2){transition-delay:60ms}
.rukh .stagr.vydno>*:nth-child(3){transition-delay:120ms}
.rukh .stagr.vydno>*:nth-child(4){transition-delay:180ms}
.rukh .stagr.vydno>*:nth-child(5){transition-delay:240ms}

/* ═══════════ ГЛИБИНА v3 — розширення компонентів (мова та ж, значення токенів не міняні) ═══════════ */
/* герой · живі proof-pills */
.proof-pills{display:flex;flex-wrap:wrap;gap:var(--sp2);margin-top:var(--sp6)}
.ppill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--r-full);
  border:1px solid var(--mezha);background:var(--tlo-2);box-shadow:var(--tin-1)}
.ppill .pv{font-family:var(--mono);font-weight:700;font-size:.92rem;color:var(--neon);letter-spacing:-.01em}
.ppill .pk{font-size:.78rem;color:var(--prygl)}
.ppill .dot{width:7px;height:7px;border-radius:2px;background:var(--neon);box-shadow:0 0 8px 1px rgba(53,224,230,.6);flex:none}
.ppill.p2 .pv{color:var(--plazma)}.ppill.p2 .dot{background:var(--plazma);box-shadow:0 0 8px 1px rgba(154,134,255,.5)}
/* стрічка HUD · спарклайн + тренд + годинник */
.tile .spark{margin:var(--sp3) 0 0}
.tile .spark svg{width:100%;height:auto;display:block}
.tile .trend{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.02em}
.tile .trend.up{color:var(--neon)}.tile .trend.flat{color:var(--prygl-2)}
.tile .trend svg{width:13px;height:13px}
.hud-clock{font-family:var(--mono);font-size:.72rem;color:var(--prygl-2);letter-spacing:.04em}
.hud-clock b{color:var(--neon);font-weight:700}
.tile-help{cursor:help;border-bottom:1px dotted var(--mezha)}
/* секція 4 · розкладна деталь диференціатора */
.dyf-more{margin-top:var(--sp2);border-top:1px dashed var(--mezha-m);padding-top:var(--sp3)}
.dyf-more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.02em;color:var(--neon)}
.dyf-more summary::-webkit-details-marker{display:none}
.dyf-more summary .ik{width:15px;height:15px;transition:transform var(--t) var(--ease)}
.dyf-more[open] summary .ik{transform:rotate(45deg)}
.micro-tbl{margin-top:var(--sp3);display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--mezha-m);border:1px solid var(--mezha-m);border-radius:var(--r-sm);overflow:hidden}
.micro-tbl .mh{background:var(--tlo-2);padding:6px 9px;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--prygl-2)}
.micro-tbl .mc{background:var(--poverhnya);padding:8px 9px;font-size:.82rem;color:var(--tilo)}
.micro-tbl .mc.was{color:var(--prygl-2)}
/* секція 5 · flow + доставка + таймлайн */
.flow{display:flex;align-items:center;gap:var(--sp2);flex-wrap:wrap;margin-bottom:var(--sp8);
  background:var(--tlo-2);border:1px solid var(--mezha-m);border-radius:var(--r);padding:var(--sp4) var(--sp5);overflow-x:auto}
.flow .fnode{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:var(--r-sm);
  background:var(--poverhnya);border:1px solid var(--mezha);white-space:nowrap;font-size:.84rem;color:var(--tilo);flex:none}
.flow .fnode .ci{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:var(--neon-tlo);color:var(--neon);border:1px solid var(--mezha-m);flex:none}
.flow .fnode .ci svg{width:15px;height:15px}
.flow .farr{color:var(--neon);flex:none}.flow .farr svg{width:18px;height:18px}
.flow .fnode.end{border-color:var(--rebro);box-shadow:var(--tin-1)}
.dostavka{margin-top:var(--sp6)}
.dostavka .lab{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--prygl);margin-bottom:var(--sp3);display:block}
.dostavka .items{display:flex;flex-wrap:wrap;gap:var(--sp2)}
.dtag{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--r-sm);
  border:1px solid var(--mezha);background:var(--tlo-2);font-size:.84rem;color:var(--tilo)}
.dtag svg{width:15px;height:15px;color:var(--neon);flex:none}
/* секція 6 · причини метчингу + тир */
.mrow .why{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.crit{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:.66rem;letter-spacing:.02em;
  padding:2px 7px;border-radius:var(--r-full);border:1px solid var(--mezha-m);color:var(--prygl-2)}
.crit.on{color:var(--neon);border-color:var(--rebro);background:var(--neon-tlo)}
.crit .g{font-weight:700}
.tier-lab{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 8px;border-radius:var(--r-full);border:1px solid var(--mezha-m);color:var(--prygl-2)}
.tier-hi{color:var(--neon);border-color:var(--rebro)}
.tier-md{color:var(--poperedzhennya);border-color:color-mix(in oklab,var(--poperedzhennya) 30%,transparent)}
.tier-sep{padding:var(--sp3) var(--sp5) 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--prygl-2);display:flex;align-items:center;gap:8px}
.tier-sep::after{content:"";flex:1;height:1px;background:var(--mezha-m)}
/* секція 7 · багатші картки + прецеденти */
.gcard .gmeta{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp2);margin:var(--sp1) 0}
.gcard .gm{display:flex;flex-direction:column;gap:2px}
.gcard .gm .gl{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--prygl-2)}
.gcard .gm .gv{font-family:var(--mono);font-size:.82rem;color:var(--neon);font-weight:700}
.gcard .gm .gv.pl{color:var(--poperedzhennya)}
.stage-bar{display:flex;gap:3px;margin-top:2px}
.stage-bar i{flex:1;height:4px;border-radius:2px;background:var(--poverhnya-2)}
.stage-bar i.on{background:var(--neon)}
.pretsedenty{margin-top:var(--sp8);border:1px solid var(--mezha);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));box-shadow:var(--tin-1);padding:var(--sp6);position:relative;overflow:hidden}
.pretsedenty::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--rebro),transparent);opacity:.5}
.pretsedenty .ph{display:flex;align-items:center;gap:var(--sp2);margin-bottom:var(--sp4)}
.pretsedenty .ph .oko{color:var(--neon)}
.pret-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp4)}
.pret{display:flex;flex-direction:column;gap:4px;border-left:2px solid var(--rebro);padding-left:var(--sp4)}
.pret b{color:var(--tilo);font-size:.92rem}
.pret .pd{font-family:var(--mono);font-size:.74rem;color:var(--neon)}
.pret p{color:var(--prygl);font-size:.82rem}
/* секція 8 · живіша карта */
.mapa-wrap svg .vnode{cursor:pointer}
.mapa-wrap svg .vnode circle.hit{transition:r var(--t) var(--ease)}
.mapa-readout{position:absolute;left:var(--sp5);top:var(--sp5);z-index:3;max-width:230px;
  background:var(--sklo);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--mezha);border-radius:var(--r);padding:var(--sp3) var(--sp4);box-shadow:var(--tin-2);
  transition:opacity var(--t) var(--ease)}
.mapa-readout .rn{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--tilo);font-size:1rem;padding-bottom:.04em}
.mapa-readout .rr{font-family:var(--mono);font-size:.72rem;color:var(--neon);margin-top:2px}
.mapa-readout .rs{font-size:.8rem;color:var(--prygl);margin-top:5px}
.mapa-readout .rc{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.mapa-readout .rc span{font-family:var(--mono);font-size:.64rem;color:var(--prygl);border:1px solid var(--mezha-m);border-radius:var(--r-sm);padding:2px 6px}
.mapa-counter{font-family:var(--mono);font-size:.72rem;color:var(--prygl)}
.mapa-counter b{color:var(--neon);font-weight:700}
/* секція 9 · фільтр + блоки + розподіл інструментів */
.dz-filtr{display:flex;flex-wrap:wrap;gap:var(--sp2);margin-bottom:var(--sp6);align-items:center}
.dz-filtr .lab{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--prygl-2);margin-right:var(--sp2)}
.inst-dist{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp3);margin-bottom:var(--sp8)}
.idist{background:var(--tlo-2);border:1px solid var(--mezha-m);border-radius:var(--r);padding:var(--sp4);text-align:center}
.idist .iv{font-family:var(--disp);font-weight:600;font-size:1.8rem;color:var(--tilo);line-height:1;padding-bottom:.04em}
.idist .ib{height:5px;border-radius:var(--r-full);background:var(--poverhnya-2);overflow:hidden;margin:8px 0 6px;border:1px solid var(--mezha-m)}
.idist .ib i{display:block;height:100%;background:linear-gradient(90deg,#17B6BB,var(--neon))}
.idist .ik2{font-family:var(--mono);font-size:.68rem;color:var(--prygl);letter-spacing:.02em}
.blok-hd{grid-column:1/-1;display:flex;align-items:center;gap:var(--sp3);margin:var(--sp5) 0 0}
.blok-hd:first-child{margin-top:0}
.blok-hd .bn{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:1rem;color:var(--tilo);padding-bottom:.04em}
.blok-hd .bc{font-family:var(--mono);font-size:.72rem;color:var(--neon);border:1px solid var(--rebro);border-radius:var(--r-full);padding:2px 9px;background:var(--neon-tlo)}
.blok-hd .bl{flex:1;height:1px;background:var(--mezha-m)}
.dz .fint{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.dz .ftag{font-family:var(--mono);font-size:.62rem;letter-spacing:.02em;color:var(--prygl);border:1px solid var(--mezha-m);border-radius:var(--r-sm);padding:2px 6px;background:var(--tlo-2)}
.dz[hidden]{display:none}
.dz.dim{opacity:.28;filter:saturate(.4)}
/* секція 10 · анімований обіг (stroke-dashoffset — НЕ transform; глушиться reduced-motion) */
@keyframes obih{to{stroke-dashoffset:0}}
.rukh .obih-dot{stroke-dasharray:6 654;stroke-dashoffset:660;animation:obih 9s linear infinite}
.kontur-contract{margin-top:var(--sp5);display:flex;align-items:center;gap:var(--sp3);
  border:1px dashed var(--rebro);border-radius:var(--r);padding:var(--sp3) var(--sp4);background:var(--neon-tlo)}
.kontur-contract svg{width:20px;height:20px;color:var(--neon);flex:none}
.kontur-contract p{font-size:.86rem;color:var(--prygl)}
.kontur-contract b{color:var(--tilo)}
/* секція 11 · легенда тегів надійності */
.tag-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp4);margin-bottom:var(--sp8)}
.tleg{display:flex;gap:var(--sp3);align-items:flex-start;background:var(--tlo-2);border:1px solid var(--mezha-m);border-radius:var(--r);padding:var(--sp4)}
.tleg .tg{font-family:var(--mono);font-size:.74rem;font-weight:700;padding:3px 8px;border-radius:var(--r-sm);flex:none;white-space:nowrap}
.tleg.p .tg{color:var(--neon);background:var(--neon-tlo);border:1px solid var(--rebro)}
.tleg.m .tg{color:var(--poperedzhennya);background:var(--poverhnya);border:1px solid color-mix(in oklab,var(--poperedzhennya) 34%,transparent)}
.tleg.n .tg{color:var(--prygl-2);background:var(--poverhnya);border:1px solid var(--mezha-m)}
.tleg .td b{color:var(--tilo);font-size:.86rem}
.tleg .td p{color:var(--prygl);font-size:.8rem;margin-top:2px}
/* секція 12 · value-chain */
.vlanciug{position:relative;margin-top:var(--sp8);background:var(--tlo-2);border:1px solid var(--mezha);border-radius:var(--r-lg);padding:var(--sp6);overflow:hidden}
.vlanciug::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--rebro),transparent);opacity:.5}
.vlanciug svg{width:100%;height:auto;display:block}
/* Ланцюг цінності — реальний HTML-текст (легібельність на будь-якій ширині) */
.vchain{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:var(--sp3);flex-wrap:nowrap}
.vchain .vstep{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:var(--sp4);background:var(--poverhnya);border:1px solid var(--mezha);border-radius:var(--r-md,12px)}
.vchain .vstep.is-hub{background:var(--neon-tlo);border-color:var(--rebro)}
.vchain .vstep+.vstep::before{content:"";position:absolute;left:calc(-1 * var(--sp3) - 1px);top:50%;width:var(--sp3);height:2px;transform:translateY(-50%);background:var(--neon)}
.vchain .vstep+.vstep::after{content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);border-left:6px solid var(--neon);border-top:4px solid transparent;border-bottom:4px solid transparent}
.vchain .vk{font-size:1rem;font-weight:600;line-height:1.2;color:var(--tilo)}
.vchain .vstep.is-hub .vk{font-family:var(--disp,var(--f));color:var(--neon)}
.vchain .vstep.is-cap .vk{color:var(--neon)}
.vchain .vd{font-size:.82rem;line-height:1.3;color:var(--prygl)}
.vsrc{display:flex;align-items:center;gap:var(--sp3);margin:var(--sp4) 0 0;padding:var(--sp3) var(--sp4);background:var(--tlo-2);border:1px solid var(--mezha-m,var(--mezha));border-left:2px dashed #9A86FF;border-radius:var(--r-md,12px)}
.vsrc-k{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--prygl-2);white-space:nowrap}
.vsrc-v{font-size:.9rem;color:var(--prygl)}
@media (max-width:640px){.vchain{flex-direction:column}
  .vchain .vstep+.vstep::before{left:50%;top:calc(-1 * var(--sp3) - 1px);width:2px;height:var(--sp3);transform:translateX(-50%)}
  .vchain .vstep+.vstep::after{left:50%;top:-7px;transform:translateX(-50%);border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid var(--neon);border-bottom:0}
  .vsrc{flex-direction:column;align-items:flex-start;gap:2px}}
/* секція 13 · маршрутизатор «для кого ви» */
.router{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp5);margin:var(--sp10) 0 0}
.rcard{position:relative;display:flex;flex-direction:column;gap:var(--sp3);background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));border:1px solid var(--mezha);border-radius:var(--r-lg);padding:var(--sp6);box-shadow:var(--tin-1);overflow:hidden;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.rcard::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--rebro),transparent);opacity:.5;transition:opacity var(--t) var(--ease)}
.rcard:hover{transform:translateY(-3px);box-shadow:var(--tin-2);border-color:var(--rebro)}
.rcard:hover::before{opacity:1}
.rcard .ci{width:44px;height:44px;display:grid;place-items:center;border-radius:11px;background:var(--neon-tlo);border:1px solid var(--mezha);color:var(--neon)}
.rcard .ci svg{width:24px;height:24px}
.rcard h3{color:var(--tilo)}
.rcard p{color:var(--prygl);font-size:.88rem;flex:1}
.rcard .ide{display:inline-flex;align-items:center;gap:7px;color:var(--neon);font-weight:600;font-size:.88rem;font-family:var(--mono)}
.rcard .ide .ik{width:16px;height:16px;transition:transform var(--t-fast) var(--ease)}
.rcard:hover .ide .ik{transform:translateX(4px)}
.pidval nav.mapa-sait{display:grid;grid-template-columns:repeat(3,auto);gap:var(--sp3) var(--sp8);align-items:start}
.pidval .col b{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--prygl-2);margin-bottom:var(--sp2)}
.pidval .col a{display:block;margin-bottom:6px}
/* адаптив */
@media (max-width:1000px){
  .metch{grid-template-columns:1fr}
  .dyf,.dovira{grid-template-columns:repeat(2,1fr)}
  .dzher{grid-template-columns:repeat(3,1fr)}
  .hromady{grid-template-columns:repeat(2,1fr)}
  .kroky{grid-template-columns:repeat(2,1fr)}
  .kontur{grid-template-columns:1fr;gap:var(--sp10)}
  .pozytsiya .pd{grid-template-columns:1fr}
  .inst-dist{grid-template-columns:repeat(3,1fr)}
  .tag-legend,.pret-grid{grid-template-columns:1fr}
  .router{grid-template-columns:1fr}
}
@media (max-width:900px){
  .hero-grid,.dokaz{grid-template-columns:1fr;gap:var(--sp10)}
  .vhody,.staty{grid-template-columns:1fr}
  .stuzhka{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
}
@media (max-width:600px){
  .brend small{display:none}
  .perem{display:none}
  .hero .wrap{padding:var(--sp16) var(--sp5) var(--sp12)}
  section{padding:var(--sp16) 0}
  .kab-txt{display:none}
  .btn.mala.kab{width:44px;padding:0}
  .stuzhka,.dyf,.dovira,.dzher,.hromady,.kroky{grid-template-columns:1fr}
  .pozytsiya{padding:var(--sp10) var(--sp6)}
  .krok .liniya{display:none}
  .inst-dist{grid-template-columns:repeat(2,1fr)}
  .micro-tbl{grid-template-columns:1fr}
  .pidval nav.mapa-sait{grid-template-columns:1fr 1fr}
  .dzherelo{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* ═══ КРАФТ-ШАР ІНДЕКСУ · «кінематографічні дата-сцени» (Прохід A) ═══════════
   Три шари глибини навколо лінійних dv-сцен: (фон) volumetric top-light + filmic
   зерно → (мід) наявна сцена → (перед) фосфор-bloom на неон-акцентах + елевація.
   Зерно/bloom — статичні фільтри (лишаються під reduced-motion; рух не додаю). */
:root{--zerno:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.dyf-viz{position:relative;border-radius:var(--r-sm);isolation:isolate;
  box-shadow:0 1px 2px rgba(0,0,0,.42),0 24px 52px -30px rgba(53,224,230,.30),0 0 0 1px var(--mezha-m)}
.dyf-viz>svg{position:relative;z-index:1;border-radius:inherit}
.dyf-viz::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:radial-gradient(130% 82% at 50% -12%,rgba(53,224,230,.11),transparent 58%);mix-blend-mode:screen}
.dyf-viz::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background-image:var(--zerno);background-size:140px 140px;opacity:.05;mix-blend-mode:overlay}
.dyf-viz .dv-flow,.dyf-viz .dv-orbit-c,.dyf-viz .dv-orbit,.dyf-viz .dv-sweep,.dyf-viz .dv-breathe{filter:url(#ix-bloom)}
/* HUD-спарк лендинга — той самий кінематографічний bloom на неон-трасі */
.hud-spark svg path[stroke^="#35"],.hud-spark svg circle[fill^="#35"]{filter:url(#ix-bloom)}
/* hero: filmic-зерно + м'яка вінʼєтка глибини над mesh (контент лишається зверху) */
.hero{isolation:isolate}
.hero>.wrap{position:relative;z-index:2}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(75% 58% at 80% 16%,rgba(53,224,230,.10),transparent 55%),
    radial-gradient(120% 100% at 50% 120%,rgba(0,0,0,.34),transparent 60%),var(--zerno);
  background-size:cover,cover,150px 150px;opacity:.9;mix-blend-mode:screen}
/* V1→server: перемикач мови як посилання (progressive, без JS) */
.perem a{min-height:40px;padding:0 12px;display:inline-flex;align-items:center;color:var(--prygl);font:inherit;font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.04em;cursor:pointer;text-decoration:none}
.perem a[aria-pressed=true]{background:var(--neon-tlo);color:var(--neon)}
.viewseg a{display:inline-flex;align-items:center;gap:6px;text-decoration:none}