/* ─────────── Токени ─────────── */
:root[data-theme="dark"]{
  --bg:#09090B; --bg-2:#0D0D10; --surf:#131316; --surf-2:#17171B; --surf-3:#1E1E23;
  --ink:#FAFAFA; --ink-2:#C9C9D1; --muted:#8A8A93; --faint:#56565E;
  --line:#232327; --line-2:#2C2C32;
  --acc:oklch(0.72 0.17 155); --acc-ink:#062B16;
  --acc-dim:oklch(0.72 0.17 155 / .13); --acc-line:oklch(0.72 0.17 155 / .32);
  --glow:oklch(0.72 0.17 155 / .18);
  --shadow:0 1px 2px rgb(0 0 0/.5), 0 12px 40px -12px rgb(0 0 0/.65);
  --grid:rgb(255 255 255 / .028); --grid-2:rgb(255 255 255 / .05); --grain:.05;
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --bg-2:#FAFAFA; --surf:#FFFFFF; --surf-2:#FAFAFA; --surf-3:#F4F4F5;
  --ink:#0C0C0E; --ink-2:#3F3F46; --muted:#6B6B74; --faint:#A1A1AA;
  --line:#E7E7EA; --line-2:#DEDEE2;
  --acc:oklch(0.52 0.17 155); --acc-ink:#FFFFFF;
  --acc-dim:oklch(0.52 0.17 155 / .09); --acc-line:oklch(0.52 0.17 155 / .28);
  --glow:oklch(0.52 0.17 155 / .1);
  --shadow:0 1px 2px rgb(0 0 0/.04), 0 12px 34px -14px rgb(0 0 0/.14);
  --grid:rgb(9 9 11 / .04); --grid-2:rgb(9 9 11 / .07); --grain:.04;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);position:relative;
  font-family:"Inter",system-ui,sans-serif;font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}

/* ─── Фон-креслення складу: сітка комірок + зерно ─── */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:56px 56px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 130% 90% at 50% -6%,#000 32%,transparent 78%);
  mask-image:radial-gradient(ellipse 130% 90% at 50% -6%,#000 32%,transparent 78%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;
  background-image: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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){body::after{display:none}}
.m{font-family:"Geist Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
:root{--display:"Geist",system-ui,sans-serif}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}

/* ─────────── Анімації ─────────── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ─────────── Навігація ─────────── */
nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(1.8) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
nav.stuck{border-bottom-color:var(--line)}
.navin{max-width:1140px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:9px}
.brand svg{width:auto;height:22px;color:var(--ink)}
.brand span{font-family:"Geist",sans-serif;font-size:16px;letter-spacing:-.02em}
.brand b{font-weight:700}.brand i{font-style:normal;font-weight:450;color:var(--muted)}
.navlinks{display:flex;align-items:center;gap:26px;margin-left:34px}
.navlinks>a{font-size:14px;color:var(--muted);transition:color .2s;padding:6px 0}
.navlinks>a:hover,.navlinks>a.on{color:var(--ink)}

/* Мега-меню «Можливості» */
.navin{position:relative}
.drop{position:static}
.dbtn{display:flex;align-items:center;gap:5px;font:inherit;font-size:14px;color:var(--muted);
  background:none;border:0;padding:6px 0;cursor:pointer;transition:color .2s;font-family:inherit}
.dbtn:hover,.dbtn.on,.drop.open .dbtn{color:var(--ink)}
.dbtn .cv{width:14px;height:14px;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.drop.open .dbtn .cv{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 6px);left:24px;right:24px;
  transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
  background:var(--surf);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  transition:opacity .2s ease-out,transform .22s cubic-bezier(.2,.7,.3,1),visibility .22s}
.drop.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:8px;
  background:var(--line);border-radius:16px 16px 0 0;overflow:hidden}
.mcol{background:var(--surf);padding:16px 16px 14px;border-radius:10px}
.mcol:hover{background:var(--surf-2)}
.mhead{display:flex;align-items:baseline;gap:8px;font-family:"Geist",sans-serif;font-size:15px;
  font-weight:600;color:var(--ink);letter-spacing:-.01em}
.mhead .mk{font-family:"Geist Mono",monospace;font-size:10px;font-weight:600;color:var(--acc);
  background:var(--acc-dim);padding:2px 6px;border-radius:5px;letter-spacing:.04em}
.mhead.on{color:var(--acc)}
.mcol .mp{font-size:12.5px;line-height:1.5;color:var(--muted);margin:7px 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mlinks{display:flex;flex-wrap:wrap;gap:4px 6px}
.mlinks a{font-size:12px;color:var(--ink-2);background:var(--surf-3);border-radius:6px;
  padding:3px 7px;transition:.15s;white-space:nowrap}
.mlinks a:hover{color:var(--acc);background:var(--acc-dim)}
.mfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 24px;border-top:1px solid var(--line);background:var(--bg-2);border-radius:0 0 16px 16px}
.mfoot span{font-size:13px;color:var(--muted)}
.mfoot span b{color:var(--ink);font-weight:600}
.mfoot a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--acc)}
.mfoot a svg{width:15px;height:15px;transition:transform .2s}
.mfoot a:hover svg{transform:translateX(3px)}
@media(max-width:1040px){.mgrid{grid-template-columns:repeat(2,1fr)}}
.sp{flex:1}
.tgl{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);
  background:var(--surf);border-radius:10px;cursor:pointer;color:var(--muted);flex:none;transition:.2s}
.tgl:hover{color:var(--ink);border-color:var(--line-2)}
.tgl svg{width:15px;height:15px}
:root[data-theme="dark"] .i-sun{display:block}:root[data-theme="dark"] .i-moon{display:none}
:root[data-theme="light"] .i-sun{display:none}:root[data-theme="light"] .i-moon{display:block}
.cta-btn{font-family:"Geist",sans-serif;font-size:14px;font-weight:600;padding:9px 18px;border-radius:10px;
  background:var(--acc);color:var(--acc-ink);white-space:nowrap;transition:.2s;display:inline-block}
.cta-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line)}
.ghost:hover{border-color:var(--line-2);color:var(--ink);filter:none}

.burger{display:none;width:34px;height:34px;place-items:center;border:1px solid var(--line);
  background:var(--surf);border-radius:10px;cursor:pointer;color:var(--ink-2);flex:none;transition:.2s}
.burger:hover{color:var(--ink);border-color:var(--line-2)}
.burger svg{width:16px;height:16px}
.burger .x{display:none}
.burger[aria-expanded="true"] .x{display:block}
.burger[aria-expanded="true"] .lines{display:none}
.mnav{display:none;border-top:1px solid var(--line);background:var(--bg);padding:10px 24px 18px}
.mnav.open{display:block;animation:drop .28s cubic-bezier(.2,.7,.3,1)}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mnav a{display:block;padding:12px 2px;font-size:16px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.mnav a:last-of-type{border-bottom:none}
.mnav .cta-btn{display:block;text-align:center;margin-top:14px;padding:14px;color:var(--acc-ink)}
.mnav .mlabel{display:block;font-family:"Geist Mono",monospace;font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--acc);padding:18px 2px 8px}
.mnav .msub{padding:11px 2px}
.mnav .msub b{display:block;font-size:15.5px;font-weight:600;color:var(--ink)}
.mnav .msub i{display:block;font-style:normal;font-size:12px;line-height:1.45;color:var(--faint);margin-top:2px}
@media(max-width:900px){.navlinks{display:none}.burger{display:grid}.navin>.cta-btn{display:none}}

/* ─────────── Спільні секції ─────────── */
section{padding:96px 0}
.tag{font-family:"Geist Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--acc);margin-bottom:18px;display:inline-flex;align-items:center;gap:9px}
.tag::before{content:"";width:9px;height:9px;flex:none;
  background:linear-gradient(135deg,var(--acc) 0 50%,transparent 50%);border:1px solid var(--acc-line);border-radius:2px}
.center .tag{justify-content:center}
h2{font-family:var(--display);font-size:clamp(29px,4vw,46px);line-height:1.06;font-weight:700;
  letter-spacing:-.026em;max-width:19ch;margin-bottom:16px}
.sec-sub{font-size:17px;color:var(--muted);max-width:58ch;line-height:1.6}
.center{text-align:center;margin-left:auto;margin-right:auto}
.center h2,.center .sec-sub{margin-left:auto;margin-right:auto}
.ic{width:18px;height:18px;flex:none;margin-top:2px;color:var(--acc)}

/* ─────────── Герой лендінгу ─────────── */
.hero{position:relative;padding:86px 0 0;overflow:hidden}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero>.wrap{position:relative;z-index:1}
.hero::before{content:"";position:absolute;top:-320px;left:50%;transform:translateX(-50%);
  width:1100px;height:620px;background:radial-gradient(ellipse at center,var(--glow),transparent 66%);
  pointer-events:none;filter:blur(24px)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 13px 5px 6px;border-radius:999px;
  border:1px solid var(--line);background:var(--surf);font-size:13px;color:var(--ink-2);margin-bottom:26px}
.pill em{font-style:normal;font-family:"Geist Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.04em;
  background:var(--acc-dim);color:var(--acc);padding:3px 8px;border-radius:999px;text-transform:uppercase}
h1{font-family:var(--display);font-size:clamp(42px,6.4vw,78px);line-height:.99;font-weight:800;
  letter-spacing:-.035em;max-width:15ch;margin-bottom:22px}
h1 .hl{position:relative;white-space:nowrap;color:var(--acc)}
h1 .hl::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.06em;height:.34em;background:var(--acc-dim);
  border-radius:3px;z-index:-1}
.sub{font-size:clamp(16px,1.9vw,19px);color:var(--ink-2);max-width:56ch;line-height:1.6}
.hero-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap;align-items:center}
.note{font-size:13px;color:var(--faint);margin-top:16px}

/* макет застосунку */
.mock-wrap{margin-top:56px;position:relative;perspective:1400px}
.mock{position:relative;border:1px solid var(--line);border-radius:14px 14px 0 0;background:var(--surf);box-shadow:var(--shadow);
  overflow:hidden;transform:rotateX(3deg);transform-origin:top center}
/* промінь-сканер по макету */
.mock::after{content:"";position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,transparent,var(--glow) 60%,transparent);
  opacity:.55;animation:scan 5.2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes scan{0%{transform:translateY(-120px)}55%,100%{transform:translateY(560px)}}
@media(prefers-reduced-motion:reduce){.mock::after{display:none}}
.mock-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surf-2)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.mock-url{margin-left:10px;font-family:"Geist Mono",monospace;font-size:11px;color:var(--faint)}
.mock-body{display:grid;grid-template-columns:172px 1fr;min-height:340px}
.mock-side{border-right:1px solid var(--line);padding:14px 10px;background:var(--surf-2)}
.ms-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;font-size:12.5px;color:var(--muted);margin-bottom:2px}
.ms-item.on{background:var(--acc-dim);color:var(--acc);font-weight:600}
.ms-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;flex:none}
.mock-main{padding:16px 18px}
.mm-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.mm-head b{font-family:"Geist",sans-serif;font-size:14px;font-weight:600}
.mm-head span{font-family:"Geist Mono",monospace;font-size:11px;color:var(--faint)}
.mm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px}
.st{border:1px solid var(--line);border-radius:9px;padding:10px 11px;background:var(--bg-2)}
.st u{display:block;font-family:"Geist Mono",monospace;font-size:9.5px;color:var(--faint);text-decoration:none;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.st b{font-family:"Geist",sans-serif;font-size:17px;font-weight:650;letter-spacing:-.02em}
.st.up b{color:var(--acc)}
.mm-rows{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.row{display:grid;grid-template-columns:1fr 74px 88px 66px;gap:8px;padding:8.5px 12px;font-size:12px;
  border-bottom:1px solid var(--line);align-items:center;background:var(--surf)}
.row:last-child{border-bottom:none}
.row.h{background:var(--surf-2);font-family:"Geist Mono",monospace;font-size:9.5px;color:var(--faint);
  letter-spacing:.06em;text-transform:uppercase}
.row .nm{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-s{font-family:"Geist Mono",monospace;font-size:9.5px;font-weight:600;padding:2.5px 7px;border-radius:5px;
  text-align:center;letter-spacing:.03em}
.c-ok{background:var(--acc-dim);color:var(--acc)}
.c-wait{background:color-mix(in srgb,#F59E0B 15%,transparent);color:#D9A441}
.animate-row{animation:slidein .55s cubic-bezier(.2,.7,.3,1) backwards}
@keyframes slidein{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* ─────────── Смуга ─────────── */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);padding:26px 0;margin-top:-1px}
.strip-in{display:flex;align-items:center;gap:38px;flex-wrap:wrap;justify-content:center}
.strip span{font-family:"Geist Mono",monospace;font-size:11px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase}
.strip b{font-family:"Geist",sans-serif;font-size:16px;font-weight:600;color:var(--muted);transition:color .25s;letter-spacing:-.01em}
.strip b:hover{color:var(--ink)}

/* ─────────── Картки ─────────── */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:52px}
.card{border:1px solid var(--line);border-radius:16px;padding:28px;background:var(--surf)}
.card.bad{background:var(--bg-2)}
.card h3{font-family:"Geist",sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:20px}
.card.good h3{color:var(--acc)}
.card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.card li{display:flex;gap:12px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.card.bad .ic{color:var(--faint)}
.card.good li{color:var(--ink)}
@media(max-width:760px){.ba{grid-template-columns:1fr}}

.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.ben{border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--surf);transition:.28s}
.ben:hover{transform:translateY(-3px);border-color:var(--acc-line);box-shadow:var(--shadow)}
.ben .num{font-family:"Geist Mono",monospace;font-size:11px;color:var(--acc);font-weight:600;letter-spacing:.06em}
.ben h3{font-family:"Geist",sans-serif;font-size:19px;font-weight:640;letter-spacing:-.02em;margin:14px 0 9px}
.ben p{font-size:14.5px;color:var(--muted);line-height:1.55}
@media(max-width:900px){.benefits{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.benefits{grid-template-columns:1fr}}

/* ─────────── Фіча головної (hfeat) ─────────── */
.hfeat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:64px}
.hfeat.rev{direction:rtl}.hfeat.rev>*{direction:ltr}
.hfeat h3{font-family:"Geist",sans-serif;font-size:clamp(22px,2.6vw,30px);font-weight:650;letter-spacing:-.028em;margin-bottom:14px}
.hfeat p.lead{font-size:16px;color:var(--muted);line-height:1.6;margin-bottom:22px}
.hfeat ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.hfeat li{display:flex;gap:11px;font-size:15px;color:var(--ink-2);line-height:1.5}
.visual{border:1px solid var(--line);border-radius:16px;background:var(--surf);padding:24px;box-shadow:var(--shadow);
  min-height:280px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
@media(max-width:860px){.hfeat{grid-template-columns:1fr;gap:32px}.hfeat.rev{direction:ltr}}

.rack{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:100%;max-width:290px}
.bin{aspect-ratio:1;border:1px solid var(--line);border-radius:4px;background:var(--bg-2)}
.bin.f{background:var(--acc-dim);border-color:var(--acc-line)}
.bin.hit{background:var(--acc);border-color:var(--acc);animation:ping 2.6s ease-in-out infinite}
@keyframes ping{0%,72%,100%{box-shadow:0 0 0 0 var(--acc-line)}36%{box-shadow:0 0 0 7px transparent}}

.rings{position:relative;width:190px;height:190px}
.ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--acc-line);animation:spin 18s linear infinite}
.ring:nth-child(2){inset:26px;border-style:dashed;animation-duration:13s;animation-direction:reverse;opacity:.7}
.ring:nth-child(3){inset:52px;opacity:.45;animation-duration:22s}
.core{position:absolute;inset:76px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 34px 8px var(--glow);animation:breathe 3.4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.12);opacity:1}}

/* ─────────── Цифри ─────────── */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:52px}
.pf{position:relative;background:var(--surf);padding:34px 22px 26px;text-align:left;overflow:hidden}
.pf::before{content:attr(data-coord);position:absolute;top:12px;right:14px;font-family:"Geist Mono",monospace;
  font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--faint)}
.pf b{font-family:"Geist Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
  font-size:clamp(34px,4.6vw,54px);font-weight:600;letter-spacing:-.03em;display:block;line-height:1;color:var(--ink)}
.pf span{font-size:13px;color:var(--muted);margin-top:12px;display:block;max-width:20ch}
.pf:hover b{color:var(--acc)}
@media(max-width:820px){.proof{grid-template-columns:1fr 1fr}}

/* ─────────── Блоки модулів (лендінг) ─────────── */
.blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.blk{border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--surf);
  display:flex;flex-direction:column;transition:.28s;position:relative;overflow:hidden}
.blk:hover{transform:translateY(-3px);border-color:var(--acc-line);box-shadow:var(--shadow)}
.blk::after{content:"";position:absolute;inset:auto -40% -70% auto;width:180px;height:180px;
  background:radial-gradient(circle,var(--glow),transparent 68%);opacity:0;transition:opacity .35s;pointer-events:none}
.blk:hover::after{opacity:1}
.blk .kicker{font-family:"Geist Mono",monospace;font-size:10.5px;color:var(--acc);letter-spacing:.08em;
  text-transform:uppercase;font-weight:600}
.blk h3{font-family:"Geist",sans-serif;font-size:21px;font-weight:650;letter-spacing:-.022em;margin:13px 0 10px}
.blk p{font-size:14.5px;color:var(--muted);line-height:1.55;margin-bottom:18px}
.blk .mods-in{font-size:13px;color:var(--faint);line-height:1.6;margin-bottom:20px;flex:1}
.blk .go{display:inline-flex;align-items:center;gap:7px;font-family:"Geist",sans-serif;font-size:14px;
  font-weight:600;color:var(--acc)}
.blk .go svg{width:15px;height:15px;transition:transform .25s}
.blk:hover .go svg{transform:translateX(3px)}
@media(max-width:940px){.blocks{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.blocks{grid-template-columns:1fr}}

/* ─────────── Сторінка блоку ─────────── */
.phero{position:relative;padding:64px 0 56px;border-bottom:1px solid var(--line);overflow:hidden}
.phero::before{content:"";position:absolute;top:-360px;left:20%;width:760px;height:560px;
  background:radial-gradient(ellipse at center,var(--glow),transparent 68%);pointer-events:none;filter:blur(22px)}
.crumb{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin-bottom:22px;transition:color .2s}
.crumb:hover{color:var(--ink)}
.crumb svg{width:14px;height:14px}
.phero h1{font-size:clamp(32px,4.6vw,52px);margin-bottom:18px;max-width:18ch}
.phero .sub{max-width:60ch}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.chips span{font-family:"Geist Mono",monospace;font-size:11.5px;padding:5px 11px;border-radius:8px;
  border:1px solid var(--line);background:var(--surf);color:var(--muted)}

/* ─────────── Поблокові акценти + мотиви ─────────── */
.pg{
  --blk-dim:color-mix(in srgb,var(--blk) 13%,transparent);
  --blk-line:color-mix(in srgb,var(--blk) 34%,transparent);
  --blk-glow:color-mix(in srgb,var(--blk) 20%,transparent);
  --blk-hair:color-mix(in srgb,var(--blk) 26%,transparent);
  --blk-faint:color-mix(in srgb,var(--blk) 7%,transparent);
}
/* Різні фони секцій розмітки */
.feat{position:relative;isolation:isolate}
.feat>.wrap,.feat>*{position:relative;z-index:1}
.feat::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.sec-b1::after{background:radial-gradient(var(--blk-faint) 1.3px,transparent 1.5px);background-size:24px 24px}
.sec-b2::after{background:repeating-linear-gradient(90deg,var(--blk-faint) 0 1px,transparent 1px 42px)}
.sec-b3::after{background:linear-gradient(var(--blk-faint) 1px,transparent 1px),linear-gradient(90deg,var(--blk-faint) 1px,transparent 1px);background-size:44px 44px}
.sec-b4{background:var(--bg-2)}
.sec-b4::after{background:radial-gradient(760px 360px at 88% 8%,var(--blk-dim),transparent 68%);mask:none;-webkit-mask:none}
.sec-b5::after{background:repeating-linear-gradient(58deg,transparent 0 40px,var(--blk-faint) 40px 41px)}
.phero .pmotif{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.phero .wrap{position:relative;z-index:1}
.pg .phero::before{background:radial-gradient(ellipse at center,var(--blk-glow),transparent 66%)}
/* акценти в межах блоку */
.pg .tag{color:var(--blk)}
.pg .tag::before{background:linear-gradient(135deg,var(--blk) 0 50%,transparent 50%);border-color:var(--blk-line)}
.pg .mod-grid .side .n{color:var(--blk)}
.pg .gives .ic{color:var(--blk)}
.pg .chips span:hover{border-color:var(--blk-line);color:var(--blk)}
.pg .pn:hover{border-color:var(--blk-line)}
.pg .crumb:hover{color:var(--blk)}

/* Продажі — потік замовлень (діагональні лінії до одного вікна) */
.pg-prodazhi .pmotif{background:repeating-linear-gradient(64deg,transparent 0 43px,var(--blk-hair) 43px 44px);
  -webkit-mask:radial-gradient(115% 92% at 82% -4%,#000,transparent 66%);mask:radial-gradient(115% 92% at 82% -4%,#000,transparent 66%);opacity:.7}
/* Склад — сітка комірок */
.pg-sklad .pmotif{background:linear-gradient(var(--blk-hair) 1px,transparent 1px),linear-gradient(90deg,var(--blk-hair) 1px,transparent 1px);
  background-size:52px 52px;-webkit-mask:radial-gradient(112% 92% at 80% -4%,#000,transparent 70%);mask:radial-gradient(112% 92% at 80% -4%,#000,transparent 70%)}
/* Закупівлі — смуги залишків */
.pg-zakupivli .pmotif{background:repeating-linear-gradient(90deg,var(--blk-hair) 0 2px,transparent 2px 30px);
  -webkit-mask:radial-gradient(120% 96% at 82% -6%,#000,transparent 68%);mask:radial-gradient(120% 96% at 82% -6%,#000,transparent 68%);opacity:.85}
/* Гроші — лінії гросбуху */
.pg-hroshi .pmotif{background:repeating-linear-gradient(0deg,transparent 0 33px,var(--blk-hair) 33px 34px);
  -webkit-mask:radial-gradient(120% 100% at 82% -6%,#000,transparent 70%);mask:radial-gradient(120% 100% at 82% -6%,#000,transparent 70%);opacity:.8}
/* LevoAI — свічення + промінь */
.pg-levoai .pmotif{background:radial-gradient(440px 320px at 80% 6%,var(--blk-glow),transparent 68%),
  radial-gradient(300px 260px at 94% 44%,color-mix(in srgb,var(--blk) 13%,transparent),transparent 70%)}
.pg-levoai .pmotif::after{content:"";position:absolute;inset:-40% -10%;
  background:linear-gradient(114deg,transparent 46%,var(--blk-glow) 50%,transparent 54%);
  animation:sweep 6.5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes sweep{0%{transform:translateX(-32%)}55%,100%{transform:translateX(38%)}}
/* Команда — вузли/люди */
.pg-komanda .pmotif{background:radial-gradient(var(--blk-hair) 1.4px,transparent 1.7px);background-size:30px 30px;
  -webkit-mask:radial-gradient(112% 92% at 78% -4%,#000,transparent 70%);mask:radial-gradient(112% 92% at 78% -4%,#000,transparent 70%)}
@media(prefers-reduced-motion:reduce){.pg-levoai .pmotif::after{display:none}}

/* ═══════════ Анімовані фіче-блоки ═══════════ */
.pg .phero h1{font-family:var(--dfont,var(--display))}
.phero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.phero-copy{min-width:0}
@media(max-width:900px){.phero-in{grid-template-columns:1fr;gap:36px}.phero-demo{order:2}}

.feat{padding:62px 0;border-bottom:1px solid var(--line);position:relative}
.feat-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feat.rev .feat-copy{order:2}
.feat-n{font-family:"Geist Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.11em;color:var(--blk);
  display:inline-flex;align-items:center;gap:9px;margin-bottom:15px;text-transform:uppercase}
.feat-n::before{content:"";width:22px;height:1px;background:var(--blk-line)}
.feat-copy h3{font-family:var(--dfont,var(--display));font-size:clamp(23px,2.9vw,33px);font-weight:700;
  letter-spacing:-.02em;line-height:1.08;margin-bottom:14px}
.feat-copy>p{font-size:16px;color:var(--muted);line-height:1.62;max-width:46ch;margin-bottom:24px}
.anim-list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.anim-list li{display:flex;gap:12px;font-size:14.5px;color:var(--ink-2);line-height:1.5;align-items:flex-start}
.anim-list .ic{width:22px;height:22px;flex:none;margin-top:0;color:var(--blk);border-radius:7px;
  background:var(--blk-dim);padding:4px;box-sizing:border-box}
.anim-list .ic path{stroke-dasharray:20;stroke-dashoffset:20}
.anim-list li.in .ic path{animation:draw .5s cubic-bezier(.6,0,.3,1) .12s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media(max-width:860px){.feat-in{grid-template-columns:1fr;gap:26px}.feat.rev .feat-copy{order:0}}

/* Рамка демо */
.dframe{position:relative;border:1px solid var(--line);border-radius:16px;background:var(--surf);
  box-shadow:var(--shadow);overflow:hidden}
.phero-demo .dframe,.feat-demo .dframe{aspect-ratio:4/3}
.dbar{display:flex;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surf-2);align-items:center}
.dbar i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.dbar b{margin-left:8px;font-family:"Geist Mono",monospace;font-size:10.5px;color:var(--faint);font-weight:500}
.dbody{position:relative;height:calc(100% - 41px);padding:18px;overflow:hidden}
@media(prefers-reduced-motion:reduce){.dbody *{animation:none!important}}

/* w-grid — Склад: сітка комірок + скан */
.w-grid{position:relative;height:100%;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:7px}
.w-grid span{border:1px solid var(--line);border-radius:5px;background:var(--surf-2)}
.w-grid span.on{background:var(--blk-dim);border-color:var(--blk-line);animation:cellpulse 3.6s ease-in-out infinite}
.w-grid span.on:nth-of-type(3){animation-delay:.4s}.w-grid span.on:nth-of-type(8){animation-delay:1.1s}
.w-grid span.on:nth-of-type(11){animation-delay:1.7s}.w-grid span.on:nth-of-type(16){animation-delay:2.3s}
.w-grid span.tgt{background:var(--blk);border-color:var(--blk);box-shadow:0 0 0 3px var(--blk-dim);animation:tgtblink 2.4s ease-in-out infinite}
@keyframes cellpulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes tgtblink{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.w-grid .scan{position:absolute;left:0;right:0;top:0;height:34%;grid-column:1/-1;border:none;background:linear-gradient(180deg,transparent,var(--blk-glow),transparent);
  animation:gscan 4s cubic-bezier(.5,0,.5,1) infinite;pointer-events:none}
@keyframes gscan{0%{transform:translateY(-40%)}55%,100%{transform:translateY(310%)}}
.w-grid .coord{position:absolute;right:2px;top:-2px;font-family:"Geist Mono",monospace;font-size:10px;font-weight:600;
  color:var(--blk);background:var(--surf);padding:1px 5px;border-radius:4px;border:1px solid var(--blk-line)}

/* w-flow — Продажі/Команда: вузли + сигнал */
.w-flow{position:relative;height:100%}
.w-flow .node{position:absolute;font-family:"Geist Mono",monospace;font-size:10.5px;font-weight:600;color:var(--ink-2);
  background:var(--surf-2);border:1px solid var(--line);border-radius:7px;padding:5px 9px}
.w-flow .src{top:8%}.w-flow .s1{left:2%}.w-flow .s2{left:36%}.w-flow .s3{left:70%}
.w-flow .hub{left:50%;bottom:8%;transform:translateX(-50%);color:var(--blk);border-color:var(--blk-line);background:var(--blk-dim)}
.w-flow svg{position:absolute;inset:0;width:100%;height:100%}
.w-flow path{fill:none;stroke:var(--blk-line);stroke-width:1.5}
.w-flow path.sig{stroke:var(--blk);stroke-dasharray:5 9;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-14}}

/* w-bars — Закупівлі/Гроші: смуги */
.w-bars{display:flex;align-items:flex-end;gap:10px;height:100%;padding:8px 0}
.w-bars i{position:relative;flex:1;height:var(--h,60%);min-height:22px;background:var(--surf-3);
  border-radius:6px 6px 0 0;overflow:hidden}
.w-bars i u{position:absolute;left:0;right:0;bottom:0;height:100%;background:var(--blk-dim);
  border-top:2px solid var(--blk-line);transform-origin:bottom;animation:fill 3.4s ease-in-out infinite}
.w-bars i.hot u{background:var(--blk);border-color:var(--blk)}
.w-bars i:nth-child(2) u{animation-delay:.18s}.w-bars i:nth-child(3) u{animation-delay:.36s}
.w-bars i:nth-child(4) u{animation-delay:.54s}.w-bars i:nth-child(5) u{animation-delay:.72s}
.w-bars i:nth-child(6) u{animation-delay:.9s}.w-bars i:nth-child(7) u{animation-delay:1.08s}
@keyframes fill{0%{transform:scaleY(.2)}55%{transform:scaleY(1)}100%{transform:scaleY(1)}}

/* w-chart — Гроші: лінія що малюється */
.w-chart{position:relative;height:100%}
.w-chart svg{width:100%;height:100%}
.w-chart .grid{stroke:var(--line);stroke-width:1}
.w-chart .area{fill:var(--blk-dim)}
.w-chart .ln{fill:none;stroke:var(--blk);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:520;stroke-dashoffset:520;animation:drawln 4s ease-in-out infinite}
.w-chart .dot{fill:var(--blk);animation:dotpulse 4s ease-in-out infinite}
@keyframes drawln{0%{stroke-dashoffset:520}45%,100%{stroke-dashoffset:0}}
@keyframes dotpulse{0%,44%{opacity:0}50%{opacity:1}100%{opacity:1}}

/* w-chat — LevoAI: діалог що друкується */
.w-chat{display:flex;flex-direction:column;gap:11px;height:100%;justify-content:center}
.w-chat .q{align-self:flex-end;background:var(--surf-3);color:var(--ink-2);font-size:12.5px;padding:8px 12px;
  border-radius:12px 12px 3px 12px;max-width:78%;animation:pop .5s .3s both}
.w-chat .a{align-self:flex-start;background:var(--blk-dim);border:1px solid var(--blk-line);color:var(--ink);font-size:12.5px;
  padding:8px 12px;border-radius:12px 12px 12px 3px;max-width:82%;overflow:hidden;white-space:nowrap;
  animation:type 2.2s steps(30) 1s both, pop .5s 1s both}
.w-chat .a b{color:var(--blk)}
@keyframes pop{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@keyframes type{0%{max-width:0}100%{max-width:82%}}
.w-chat .glow{position:absolute;inset:0;background:radial-gradient(200px 140px at 80% 30%,var(--blk-glow),transparent 70%);pointer-events:none}

/* w-steps — пайплайн з тригером і статусами «Готово» */
.w-steps{display:flex;flex-direction:column;justify-content:center;gap:12px;height:100%;position:relative;padding-left:6px}
.w-steps::before{content:"";position:absolute;left:13px;top:40px;bottom:20px;width:2px;background:var(--line)}
.w-steps .strig{display:flex;align-items:center;gap:11px;font-family:"Geist Mono",monospace;font-size:11px;
  font-weight:500;color:var(--muted);margin-bottom:2px}
.w-steps .tp{width:14px;height:14px;flex:none;border-radius:4px;background:var(--blk);box-shadow:0 0 0 4px var(--blk-dim);
  animation:tgtblink 2s ease-in-out infinite}
.w-steps .step{display:flex;align-items:center;gap:11px;position:relative;z-index:1}
.w-steps .sd{width:14px;height:14px;flex:none;border-radius:50%;border:2px solid var(--line-2);background:var(--surf);
  animation:sdon .6s var(--d,.5s) both}
.w-steps .step b{font-family:"Geist Mono",monospace;font-weight:500;font-size:12.5px;color:var(--ink-2);flex:1}
.w-steps .sb{font-family:"Geist Mono",monospace;font-size:10px;font-weight:600;color:var(--blk);background:var(--blk-dim);
  border:1px solid var(--blk-line);border-radius:999px;padding:2px 9px;opacity:0;animation:pop .5s var(--d,.5s) forwards}
.w-steps .sb::before{content:"✓ "}
@keyframes sdon{to{border-color:var(--blk);background:var(--blk);box-shadow:0 0 0 4px var(--blk-dim)}}

/* w-cards — звʼязані картки-записи */
.w-cards{position:relative;height:100%}
.w-cards svg{position:absolute;inset:0;width:100%;height:100%}
.w-cards path{fill:none;stroke:var(--line-2);stroke-width:1.5}
.w-cards path.sig{stroke:var(--blk);stroke-dasharray:5 8;animation:flow 1.1s linear infinite}
.w-cards .rec{position:absolute;background:var(--surf);border:1px solid var(--line);border-radius:9px;padding:8px 11px;
  box-shadow:var(--shadow);min-width:104px;animation:pop .5s both}
.w-cards .rec b{display:block;font-family:"Geist Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
.w-cards .rec i{font-style:normal;font-size:13px;font-weight:600;color:var(--ink);font-family:"Geist",sans-serif}
.w-cards .r1{top:6%;left:50%;transform:translateX(-50%);animation-delay:.2s}
.w-cards .r2{bottom:6%;left:2%;animation-delay:.5s}
.w-cards .r3{bottom:6%;right:2%;animation-delay:.8s}
.w-cards .rec:hover{border-color:var(--blk-line)}

/* w-counter — метрика-лічильник */
.w-counter{display:flex;flex-direction:column;justify-content:center;height:100%;gap:2px}
.w-counter .lbl{font-family:"Geist Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.w-counter .num{font-family:"Geist Mono",monospace;font-variant-numeric:tabular-nums;font-size:clamp(38px,5vw,58px);
  font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--blk)}
.w-counter .spark{width:100%;height:56px;margin-top:12px}
.w-counter .spark .area{fill:var(--blk-dim)}
.w-counter .spark .ln{fill:none;stroke:var(--blk);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:340;stroke-dashoffset:340;animation:drawln 3.6s ease-in-out infinite}

/* Пакети по лініях (flow) */
.w-flow .pkt{fill:var(--blk)}
/* Чат: індикатор набору + джерело */
.w-chat .typing{align-self:flex-start;display:flex;gap:5px;padding:10px 13px;background:var(--blk-dim);
  border:1px solid var(--blk-line);border-radius:12px 12px 12px 3px;width:-moz-fit-content;width:fit-content;
  animation:pop .4s .9s both,tfade .01s 2.05s forwards}
.w-chat .typing span{width:6px;height:6px;border-radius:50%;background:var(--blk);animation:tblink 1.2s infinite}
.w-chat .typing span:nth-child(2){animation-delay:.2s}.w-chat .typing span:nth-child(3){animation-delay:.4s}
@keyframes tblink{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
@keyframes tfade{to{opacity:0;height:0;padding:0;border:0;margin:0;overflow:hidden}}
.w-chat .a{animation:type 2s steps(28) 2.15s both,pop .5s 2.15s both}
.w-chat .src{align-self:flex-start;font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.03em;
  color:var(--faint);opacity:0;animation:pop .5s 4.3s both}

/* Компактний рядок модуля (без демо) */
.feat.compact{padding:38px 0}
.feat.compact .feat-copy{max-width:none}
.feat.compact .feat-copy>p{max-width:62ch}
.anim-list.two{grid-template-columns:1fr 1fr;gap:13px 44px}
@media(max-width:760px){.anim-list.two{grid-template-columns:1fr}}

/* Мотив WMS — сітка комірок + рухомий скан */
.pg-wms .pmotif{background:linear-gradient(var(--blk-hair) 1px,transparent 1px),linear-gradient(90deg,var(--blk-hair) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask:radial-gradient(112% 92% at 80% -4%,#000,transparent 70%);mask:radial-gradient(112% 92% at 80% -4%,#000,transparent 70%)}
.pg-wms .pmotif::after{content:"";position:absolute;left:0;right:0;top:0;height:38%;
  background:linear-gradient(180deg,transparent,var(--blk-glow),transparent);animation:wscan 5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes wscan{0%{transform:translateY(-100%)}55%,100%{transform:translateY(340%)}}
@media(prefers-reduced-motion:reduce){.pg-wms .pmotif::after{display:none}}

.mod-sec{padding:56px 0;border-bottom:1px solid var(--line)}
.mod-grid{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start}
.mod-grid .side h3{font-family:"Geist",sans-serif;font-size:24px;font-weight:650;letter-spacing:-.025em;margin-bottom:12px}
.mod-grid .side p{font-size:15px;color:var(--muted);line-height:1.6}
.mod-grid .side .n{font-family:"Geist Mono",monospace;font-size:11px;color:var(--acc);font-weight:600;
  letter-spacing:.08em;display:block;margin-bottom:12px}
.gives{border:1px solid var(--line);border-radius:16px;background:var(--surf);padding:26px}
.gives h4{font-family:"Geist Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin:0 0 18px}
.gives ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gives li{display:flex;gap:11px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
@media(max-width:900px){.mod-grid{grid-template-columns:1fr;gap:24px}.gives ul{grid-template-columns:1fr}}

/* ─────────── Що нового ─────────── */
.news-grid{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start}
.news-grid .side h3{font-family:"Geist",sans-serif;font-size:22px;font-weight:650;letter-spacing:-.02em;margin-bottom:10px}
.news-grid .side p{font-size:14px;color:var(--muted)}
.news-grid .side .n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:var(--acc-dim);color:var(--acc);font-size:13px;font-weight:700;margin-bottom:14px}
.news-list{display:grid;gap:14px}
.nitem{border:1px solid var(--line);border-radius:14px;background:var(--surf);padding:20px 22px;transition:.25s}
.nitem:hover{border-color:var(--acc-line);transform:translateY(-2px);box-shadow:var(--shadow)}
.nitem h4{font-family:"Geist",sans-serif;font-size:16.5px;font-weight:620;letter-spacing:-.015em;margin:0 0 7px}
.nitem p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.rdc{border:1px dashed var(--line-2);border-radius:14px;background:var(--surf);padding:22px;
  position:relative;transition:.25s}
.rdc:hover{border-style:solid;border-color:var(--acc-line);transform:translateY(-3px)}
.rdc h4{font-family:"Geist",sans-serif;font-size:16px;font-weight:620;letter-spacing:-.015em;margin:0 0 8px}
.rdc p{font-size:14px;line-height:1.58;color:var(--muted)}
@media(max-width:900px){
  .news-grid{grid-template-columns:1fr;gap:22px}
  .road{grid-template-columns:1fr}
}
@media(min-width:901px) and (max-width:1040px){.road{grid-template-columns:repeat(2,1fr)}}

.pagenav{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:56px 0}
.pn{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--surf);transition:.25s}
.pn:hover{border-color:var(--acc-line);transform:translateY(-2px)}
.pn u{display:block;font-family:"Geist Mono",monospace;font-size:10.5px;color:var(--faint);text-decoration:none;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px}
.pn b{font-family:"Geist",sans-serif;font-size:17px;font-weight:640;letter-spacing:-.02em}
.pn.next{text-align:right}
@media(max-width:640px){.pagenav{grid-template-columns:1fr}.pn.next{text-align:left}}

/* ─────────── Фінал ─────────── */
.final{position:relative;text-align:center;padding:110px 0;border-top:1px solid var(--line);overflow:hidden}
.final::before{content:"";position:absolute;bottom:-260px;left:50%;transform:translateX(-50%);width:900px;height:520px;
  background:radial-gradient(ellipse at center,var(--glow),transparent 68%);pointer-events:none;filter:blur(20px)}
.final h2{margin:0 auto 18px;max-width:17ch}
.final p{color:var(--muted);font-size:17px;max-width:48ch;margin:0 auto 32px}

/* ─────────── Нижній бар ─────────── */
footer{border-top:1px solid var(--line);background:var(--bg-2)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:56px 0 44px}
.fcol h5{font-family:"Geist Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);margin:0 0 16px}
.fcol a{display:block;font-size:14px;color:var(--muted);padding:5px 0;transition:color .2s}
.fcol a:hover{color:var(--ink)}
.fabout .brand{margin-bottom:14px}
.fabout p{font-size:14px;color:var(--muted);line-height:1.6;max-width:34ch;margin-bottom:18px}
.fabout .cta-btn{font-size:13px;padding:10px 18px;color:var(--acc-ink)}
.fabout .cta-btn:hover{color:var(--acc-ink)}
.foot-bot{border-top:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap}
.foot-bot p{font-size:13px;color:var(--faint)}
.foot-bot .dotline{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--faint)}
.foot-bot .live{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:p 2.4s ease-in-out infinite}
@keyframes p{0%,100%{opacity:1}50%{opacity:.35}}
@media(max-width:860px){.foot-top{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr;gap:28px;padding:40px 0 32px}}

/* ─────────── Нижній бар: пошук + AI ─────────── */
.askbar{position:fixed;left:0;right:0;bottom:22px;z-index:60;display:flex;justify-content:center;pointer-events:none;padding:0 16px}
.askpill{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;max-width:100%;
  padding:11px 14px 11px 16px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--surf) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 8px 30px -8px rgb(0 0 0/.28),0 2px 8px -2px rgb(0 0 0/.12);
  color:var(--muted);font:inherit;font-size:14px;cursor:pointer;transition:.2s}
.askpill:hover{color:var(--ink);border-color:var(--line-2);transform:translateY(-1px)}
.askpill svg{width:17px;height:17px;flex:none;color:var(--acc)}
.askpill span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.askpill kbd{font-family:"Geist Mono",monospace;font-size:11px;font-weight:600;color:var(--faint);
  border:1px solid var(--line);border-radius:5px;padding:1px 7px;background:var(--bg-2)}

.askwrap{position:fixed;inset:0;z-index:80}
.askwrap[hidden]{display:none}
.askback{position:absolute;inset:0;background:color-mix(in srgb,#000 42%,transparent);backdrop-filter:blur(3px);animation:afade .2s}
.askpanel{position:absolute;left:50%;top:12vh;transform:translateX(-50%);width:min(92vw,640px);
  background:var(--surf);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px -20px rgb(0 0 0/.5);
  overflow:hidden;animation:apop .24s cubic-bezier(.2,.7,.3,1)}
@keyframes afade{from{opacity:0}}
@keyframes apop{from{opacity:0;transform:translate(-50%,-8px)}}
.askin{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.askin .asi{width:19px;height:19px;flex:none;color:var(--muted)}
.askin input{flex:1;border:0;background:none;outline:none;font:inherit;font-size:16px;color:var(--ink)}
.askin input::placeholder{color:var(--faint)}
.askesc{font-family:"Geist Mono",monospace;font-size:11px;font-weight:600;color:var(--faint);
  border:1px solid var(--line);border-radius:6px;padding:3px 8px;background:var(--bg-2);cursor:pointer}
.askbody{max-height:52vh;overflow-y:auto;padding:8px}
.askresults{display:flex;flex-direction:column;gap:2px}
.askr{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;transition:.12s;cursor:pointer}
.askr:hover,.askr.sel{background:var(--surf-2)}
.askr .rk{font-family:"Geist Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--acc);background:var(--acc-dim);border-radius:5px;padding:3px 7px;flex:none}
.askr .rt{font-size:14.5px;font-weight:600;color:var(--ink);flex:none}
.askr .rd{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.askr .rgo{color:var(--faint);flex:none}.askr .rgo svg{width:15px;height:15px}
.askempty{padding:22px 14px;text-align:center;color:var(--muted);font-size:14px}
.askai{padding:16px 16px 6px}
.askai .aihead{display:flex;align-items:center;gap:8px;font-family:"Geist Mono",monospace;font-size:10.5px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.askai .aihead svg{width:14px;height:14px}
.askai .aitext{font-size:15px;line-height:1.62;color:var(--ink-2);white-space:pre-wrap}
.askai .aidots{display:inline-flex;gap:5px;align-items:center}
.askai .aidots i{width:7px;height:7px;border-radius:50%;background:var(--acc);animation:tblink 1.2s infinite}
.askai .aidots i:nth-child(2){animation-delay:.2s}.askai .aidots i:nth-child(3){animation-delay:.4s}
.askai .aicta{margin-top:16px}
.askfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--line);background:var(--bg-2)}
.askaibtn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--acc-ink);background:var(--acc);border:0;border-radius:10px;padding:9px 15px;cursor:pointer;transition:.18s}
.askaibtn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.askaibtn svg{width:15px;height:15px}
.askhint{font-size:12px;color:var(--faint)}
@media(max-width:560px){.askr .rd{display:none}.askpanel{top:8vh;width:94vw}}

/* ─────────── Терміни: тултіпи в описах ─────────── */
.term{border-bottom:1.5px dotted var(--acc-line);cursor:help;position:relative;transition:border-color .15s}
.term:hover,.term:focus-visible{border-bottom-color:var(--acc);outline:none}
.term::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);
  width:max-content;max-width:min(280px,72vw);background:var(--ink);color:var(--bg);font-family:"Inter",sans-serif;
  font-size:12.5px;font-weight:400;line-height:1.5;letter-spacing:0;text-align:left;padding:9px 12px;border-radius:10px;
  box-shadow:0 12px 32px -8px rgb(0 0 0/.4);pointer-events:none;z-index:70;white-space:normal;display:none}
.term::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink);z-index:70;display:none}
.term:hover::after,.term:focus-visible::after,.term:hover::before,.term:focus-visible::before{display:block;animation:tipin .16s ease-out}
@keyframes tipin{from{opacity:0;transform:translateX(-50%) translateY(5px)}}

/* ─────────── Сторінка словника ─────────── */
.gterms{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
.gterm{background:var(--surf);padding:24px 26px;transition:background .2s}
.gterm:hover{background:var(--surf-2)}
.gterm h3{font-family:"Geist",sans-serif;font-size:17px;font-weight:640;letter-spacing:-.015em;margin-bottom:9px;color:var(--ink)}
.gterm p{font-size:14.5px;line-height:1.62;color:var(--muted)}
@media(max-width:720px){.gterms{grid-template-columns:1fr}}
.pg .term{border-bottom-color:var(--blk-line)}
.pg .term:hover,.pg .term:focus-visible{border-bottom-color:var(--blk)}