/* Vaniq — дизайн-система.
   Концепція: «руда і сталь». Світлий сталево-туманний фон, мідно-абрикосовий акцент (руда Кривбасу,
   розпечений метал), глибока бірюза й шавлія лише в даних і станах. Приглушена хрома, без неону.
   Типографіка: Unbounded (заголовки), Onest (текст), JetBrains Mono (дані, мітки).
   Світла тема основна; темна (графіт з міддю) вмикається перемикачем. */

:root{
  --bg: oklch(0.972 0.007 250);
  --bg-2: oklch(0.948 0.011 250);
  --surface: oklch(0.993 0.003 250);
  --surface-2: oklch(0.96 0.009 250);
  --line: oklch(0.86 0.014 250);
  --line-soft: oklch(0.91 0.01 250);
  --fg: oklch(0.25 0.03 262);
  --muted: oklch(0.48 0.025 258);
  --accent: oklch(0.66 0.125 48);
  --accent-ink: oklch(0.53 0.125 42);
  --accent-2: oklch(0.52 0.075 205);
  --signal: oklch(0.6 0.09 155);
  --warn: oklch(0.58 0.14 28);
  --on-accent: oklch(0.99 0.006 60);
  --glow: oklch(0.66 0.125 48 / 0.2);

  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem; --s9:7rem;
  --t-xs:.75rem; --t-sm:.875rem; --t-base:1.0625rem; --t-lg:1.25rem;
  --t-xl:clamp(1.45rem, 1.05rem + 1.6vw, 2.2rem);
  --t-2xl:clamp(1.9rem, 1.15rem + 3.2vw, 3.5rem);
  --t-hero:clamp(2.3rem, .9rem + 6vw, 5.8rem);
  --r:8px; --r-sm:4px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --maxw: 1240px;
  color-scheme: light;
}
:root[data-theme="dark"]{
  --bg: oklch(0.215 0.016 258);
  --bg-2: oklch(0.245 0.018 258);
  --surface: oklch(0.27 0.02 258);
  --surface-2: oklch(0.3 0.022 258);
  --line: oklch(0.38 0.022 258);
  --line-soft: oklch(0.32 0.02 258);
  --fg: oklch(0.94 0.012 80);
  --muted: oklch(0.74 0.02 255);
  --accent: oklch(0.78 0.11 55);
  --accent-ink: oklch(0.8 0.1 58);
  --accent-2: oklch(0.74 0.065 200);
  --signal: oklch(0.79 0.09 155);
  --warn: oklch(0.72 0.12 32);
  --on-accent: oklch(0.22 0.03 50);
  --glow: oklch(0.78 0.11 55 / 0.22);
  color-scheme: dark;
}

@view-transition { navigation: auto; }
::view-transition-old(root){ animation: vt-out .28s var(--ease) both; }
::view-transition-new(root){ animation: vt-in .42s var(--ease) both; }
@keyframes vt-out{ to{ opacity:0; transform: translateY(-10px); } }
@keyframes vt-in{ from{ opacity:0; transform: translateY(14px); } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top: 88px; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:var(--t-base); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img,svg{ max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--accent); color:var(--on-accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.08; margin:0; text-wrap:balance; letter-spacing:-.015em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; }
[hidden]{ display:none !important; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } ::view-transition-old(root),::view-transition-new(root){ animation:none; } }

/* фонова інженерна сітка */
.bg-grid{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px; opacity:.55;
  mask-image: radial-gradient(ellipse 80% 60% at 70% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 0%, #000 0%, transparent 70%); }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); }
@media (min-width: 700px){ .wrap{ padding-left:max(28px, env(safe-area-inset-left,0px)); padding-right:max(28px, env(safe-area-inset-right,0px)); } }
.mono{ font-family:var(--f-mono); }
.eyebrow{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:.6em; }
.eyebrow::before{ content:""; width:18px; height:1px; background:var(--accent); }
.eyebrow b{ color:var(--accent-ink); font-weight:600; }
.skip{ position:absolute; left:-999px; top:8px; background:var(--accent); color:var(--on-accent); padding:8px 12px; z-index:200; }
.skip:focus{ left:16px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* кнопки */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; min-height:48px; padding:0 1.3rem; border-radius:var(--r-sm); font:600 var(--t-sm)/1 var(--f-body); text-decoration:none; border:1px solid transparent; cursor:pointer; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .3s var(--ease); white-space:nowrap; }
.btn-primary{ background:var(--accent); color:var(--on-accent); box-shadow: 0 0 0 0 var(--glow); }
.btn-primary:hover{ box-shadow: 0 0 0 6px var(--glow); }
.btn-ghost{ border-color:var(--line); color:var(--fg); background:transparent; }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-ink); }
.btn .arr{ display:inline-block; transition: transform .25s var(--ease); }
.btn:hover .arr{ transform: translateX(4px); }
.btn[disabled]{ opacity:.6; cursor:progress; }
.link{ color:var(--accent-ink); text-decoration:none; font-weight:600; display:inline-flex; gap:.4em; align-items:center; }
.link:hover{ text-decoration:underline; text-underline-offset:4px; }

/* шапка */
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:90; background:var(--bg); }
.progress{ position:fixed; left:0; right:0; top:env(safe-area-inset-top,0px); height:2px; background:var(--accent); transform-origin:0 50%; transform:scaleX(0); z-index:95; }
.site-head{ position:sticky; top:env(safe-area-inset-top,0px); z-index:80; background: color-mix(in oklch, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom:1px solid transparent; transition: border-color .3s var(--ease); }
.site-head.is-scrolled{ border-bottom-color: var(--line-soft); }
.head-row{ display:flex; align-items:center; gap:var(--s5); min-height:70px; }
.logo{ display:inline-flex; align-items:baseline; text-decoration:none; font-family:var(--f-display); font-weight:800; font-size:1.5rem; letter-spacing:-.04em; }
.logo .q{ color:var(--accent-ink); }
.logo .dot{ width:.3em; height:.3em; background:var(--accent); display:inline-block; margin-left:.1em; border-radius:1px; box-shadow:0 0 12px var(--glow); }
.nav{ display:flex; gap:var(--s2); margin-left:auto; }
.nav a{ text-decoration:none; font-size:var(--t-sm); color:var(--muted); padding:8px 12px; border-radius:var(--r-sm); transition: color .2s, background .2s; }
.nav a:hover{ color:var(--fg); background:var(--surface); }
.nav a[aria-current="page"]{ color:var(--fg); background:var(--surface); }
.head-actions{ display:flex; align-items:center; gap:var(--s2); }
.icon-btn{ width:44px; height:44px; border-radius:var(--r-sm); border:1px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; display:grid; place-items:center; }
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:hover{ border-color:var(--accent); }
.head-cta{ min-height:44px; }
.menu-btn{ display:none; }
@media (max-width: 960px){ .nav{ display:none; } .head-actions{ margin-left:auto; } .menu-btn{ display:grid; } }
@media (max-width: 460px){ .head-cta{ display:none; } }

.mnav{ position:fixed; inset:0; z-index:120; background:var(--bg); padding-top:env(safe-area-inset-top,0px); display:flex; flex-direction:column; }
.mnav-top{ display:flex; align-items:center; justify-content:space-between; min-height:70px; }
.mnav-links{ display:flex; flex-direction:column; gap:var(--s2); padding-block:var(--s6); }
.mnav-links a{ font-family:var(--f-display); font-size:clamp(1.6rem, 6vw, 2.4rem); text-decoration:none; padding-block:var(--s2); border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:baseline; }
.mnav-links a span{ font:400 var(--t-xs)/1 var(--f-mono); color:var(--muted); }
.mnav-foot{ margin-top:auto; padding-block:var(--s6) calc(var(--s6) + env(safe-area-inset-bottom,0px)); display:grid; gap:var(--s3); }

/* загальні секції */
.section{ padding-block: var(--s9) 0; }
.section.tight{ padding-block: var(--s8) 0; }
.sec-head{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s6); align-items:end; margin-bottom: var(--s7); }
.sec-head h2{ font-size: var(--t-2xl); margin-top: var(--s3); }
.sec-head p{ color:var(--muted); max-width:36em; }
@media (max-width: 820px){ .sec-head{ grid-template-columns: minmax(0,1fr); } }
.hl{ color:var(--accent-ink); }
.sweep{ background-image: linear-gradient(var(--accent), var(--accent)); background-repeat:no-repeat; background-position: 0 94%; background-size: 100% .09em; }

/* розбиття заголовка */
[data-split] .line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
[data-split] .word{ display:inline-block; white-space:nowrap; }
[data-split] .ch{ display:inline-block; will-change:transform; }

/* HERO головної */
.hero{ padding-block: var(--s7) var(--s8); position:relative; }
.hero-grid{ display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: var(--s7); align-items:center; }
.hero h1{ font-size: var(--t-hero); font-weight:800; letter-spacing:-.04em; line-height:.98; margin-block: var(--s5); }
.lead{ font-size: var(--t-lg); color:var(--muted); max-width:34em; line-height:1.55; }
.ctas{ display:flex; flex-wrap:wrap; gap: var(--s3); margin-top: var(--s6); }
.note{ margin-top: var(--s4); font-size: var(--t-sm); color:var(--muted); }
.note b{ color:var(--fg); font-weight:600; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: minmax(0,1fr); gap: var(--s6); } }

/* прилад-рамка для сцен */
.instrument{ position:relative; border:1px solid var(--line); border-radius:var(--r); background: linear-gradient(180deg, var(--bg-2), var(--bg)); overflow:hidden; min-width:0; }
.instrument::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--fg) 8%, transparent); }
.inst-bar{ display:flex; justify-content:space-between; align-items:center; gap:var(--s3); padding: 10px 14px; border-bottom:1px solid var(--line-soft); font:var(--t-xs)/1 var(--f-mono); color:var(--muted); letter-spacing:.06em; }
.inst-bar .dots{ display:flex; gap:6px; }
.inst-bar .dots i{ width:7px; height:7px; border-radius:50%; background:var(--line); }
.inst-bar .live{ color:var(--signal); display:inline-flex; align-items:center; gap:6px; }
.inst-bar .live::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; animation: blink 1.6s infinite; }
@keyframes blink{ 50%{ opacity:.25; } }
.scene{ position:relative; display:block; width:100%; aspect-ratio: 16 / 10; }
.scene svg{ display:block; width:100%; height:100%; }
.scene canvas{ display:block; width:100%; height:100%; }
.hero-inst .scene{ aspect-ratio: 1 / .86; }
.hero-inst .readout{ position:absolute; right:14px; top:52px; text-align:right; font:var(--t-xs)/1.3 var(--f-mono); color:var(--muted); pointer-events:none; }
.hero-inst .readout strong{ display:block; font-size:1.7rem; color:var(--fg); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.hero-inst .toggle{ position:absolute; right:12px; bottom:12px; display:flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--bg); }
.hero-inst .toggle button{ font:600 var(--t-xs)/1 var(--f-mono); letter-spacing:.06em; padding:9px 11px; min-height:36px; background:transparent; color:var(--muted); border:0; cursor:pointer; }
.hero-inst .toggle button[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); }
.hero-inst .state{ position:absolute; left:14px; bottom:18px; font:var(--t-xs)/1 var(--f-mono); color:var(--muted); pointer-events:none; }
@media (max-width: 900px){ .hero-inst .scene{ aspect-ratio: 1 / .78; } }

/* біжучий рядок */
.ticker{ border-block:1px solid var(--line-soft); overflow:hidden; background:var(--bg-2); }
.ticker-track{ display:flex; width:max-content; gap:var(--s7); padding-block:var(--s4); animation: tick 46s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker span{ font-family:var(--f-mono); font-size:var(--t-sm); color:var(--muted); white-space:nowrap; display:inline-flex; align-items:center; gap:var(--s7); }
.ticker span::after{ content:""; width:5px; height:5px; background:var(--accent); display:inline-block; transform: rotate(45deg); }
@keyframes tick{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; flex-wrap:wrap; width:auto; } }

/* перетворення */
.shifts{ border-top:1px solid var(--line-soft); }
.shift{ display:grid; grid-template-columns: minmax(0,1fr) 80px minmax(0,1.25fr) minmax(0,1fr); gap: var(--s5); align-items:center; padding-block: var(--s5); border-bottom:1px solid var(--line-soft); position:relative; isolation:isolate; }
.shift::before{ content:""; position:absolute; inset:0 -14px; background: linear-gradient(90deg, transparent, var(--surface) 30%, var(--surface) 70%, transparent); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .35s var(--ease); z-index:-1; }
.shift:hover::before{ transform: scaleY(1); }
.shift .from{ font-family:var(--f-display); font-size:var(--t-lg); color:var(--muted); text-decoration: line-through; text-decoration-color: var(--warn); text-decoration-thickness:2px; }
.shift .to{ font-family:var(--f-display); font-size:var(--t-xl); font-weight:600; }
.shift .via{ font-size:var(--t-sm); color:var(--muted); }
.shift .arrow{ height:2px; background:var(--line); position:relative; overflow:visible; }
.shift .arrow i{ position:absolute; inset:0; background:var(--accent); transform-origin:0 50%; }
.shift .arrow::after{ content:""; position:absolute; right:-1px; top:-4px; width:10px; height:10px; border-top:2px solid var(--accent); border-right:2px solid var(--accent); transform: rotate(45deg); }
@media (max-width: 820px){ .shift{ grid-template-columns: minmax(0,1fr); gap: var(--s2); } .shift .arrow{ width:64px; } }

/* сітка послуг */
.svc-grid{ display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--s4); }
.svc-card{ grid-column: span 4; position:relative; display:flex; flex-direction:column; gap:var(--s4); padding: var(--s5); border:1px solid var(--line-soft); border-radius:var(--r); background:var(--bg-2); text-decoration:none; overflow:hidden; min-width:0; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.svc-card:nth-child(1), .svc-card:nth-child(2), .svc-card:nth-child(6), .svc-card:nth-child(7){ grid-column: span 6; }
.svc-card:hover{ border-color:var(--accent); }
.svc-card .spot{ position:absolute; inset:0; pointer-events:none; background: radial-gradient(320px circle at var(--mx,50%) var(--my,0%), var(--glow), transparent 60%); opacity:0; transition: opacity .3s; }
.svc-card:hover .spot{ opacity:1; }
.svc-card .num{ font:var(--t-xs)/1 var(--f-mono); color:var(--muted); letter-spacing:.1em; }
.svc-card h3{ font-size:1.3rem; }
.svc-card p{ color:var(--muted); font-size:var(--t-sm); }
.svc-card .mini{ border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--bg); overflow:hidden; }
.svc-card .mini .scene{ aspect-ratio: 16 / 7; }
.svc-card .more{ margin-top:auto; font:600 var(--t-sm)/1 var(--f-body); color:var(--accent-ink); display:inline-flex; gap:.4em; align-items:center; }
.svc-card .more .arr{ transition: transform .25s var(--ease); }
.svc-card:hover .more .arr{ transform: translateX(4px); }
@media (max-width: 1000px){ .svc-card, .svc-card:nth-child(1), .svc-card:nth-child(2), .svc-card:nth-child(6), .svc-card:nth-child(7){ grid-column: span 6; } }
@media (max-width: 640px){ .svc-card, .svc-card:nth-child(n){ grid-column: span 12; } }

/* картки кейсів (головні) */
.case-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s4); }
.case-card{ display:flex; flex-direction:column; border:1px solid var(--line-soft); border-radius:var(--r); background:var(--bg-2); text-decoration:none; overflow:hidden; min-width:0; transition: border-color .3s var(--ease); position:relative; }
.case-card:hover{ border-color:var(--accent); }
.case-card .vis{ border-bottom:1px solid var(--line-soft); background:var(--bg); padding: var(--s4); }
.case-card .vis .scene{ aspect-ratio: 16 / 10; }
.case-card .body{ padding: var(--s5); display:flex; flex-direction:column; gap:var(--s3); flex:1; }
.case-card .meta{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.case-card h3{ font-size:1.2rem; line-height:1.2; }
.case-card p{ color:var(--muted); font-size:var(--t-sm); }
.case-card .more{ margin-top:auto; color:var(--accent-ink); font-weight:600; font-size:var(--t-sm); }
@media (max-width: 960px){ .case-grid{ grid-template-columns: minmax(0,1fr); } .case-card{ display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); } .case-card .vis{ border-bottom:0; border-right:1px solid var(--line-soft); display:flex; align-items:center; } }
@media (max-width: 640px){ .case-card{ display:flex; } .case-card .vis{ border-right:0; border-bottom:1px solid var(--line-soft); } }

.tag{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--on-accent); background:var(--accent); padding:4px 8px; border-radius:2px; line-height:1.3; }
.tag.alt{ background:transparent; color:var(--muted); border:1px solid var(--line); }
.chip{ font-family:var(--f-mono); font-size:var(--t-xs); padding:5px 9px; border:1px solid var(--line); border-radius:2px; color:var(--muted); display:inline-block; }
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); }

/* процес */
.steps{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s5); list-style:none; position:relative; }
.steps-line{ position:absolute; left:0; right:0; top:22px; height:2px; pointer-events:none; }
.steps-line svg{ width:100%; height:4px; display:block; overflow:visible; }
.step{ position:relative; padding-top: var(--s7); min-width:0; }
.step .node{ position:absolute; top:12px; left:0; width:22px; height:22px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); display:grid; place-items:center; box-shadow: 0 0 0 6px var(--bg); }
.step .node::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.step .n{ font:var(--t-xs)/1 var(--f-mono); color:var(--muted); letter-spacing:.1em; }
.step h3{ font-size:1.2rem; margin-block: var(--s2) var(--s3); }
.step p{ color:var(--muted); font-size:var(--t-sm); }
@media (max-width: 860px){ .steps{ grid-template-columns: minmax(0,1fr); gap:0; } .steps-line{ display:none; } .step{ padding: 0 0 var(--s6) var(--s7); border-left:2px solid var(--line); margin-left:10px; } .step .node{ left:-12px; top:0; } }

/* формати */
.plans{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s4); }
.plan{ border:1px solid var(--line-soft); border-radius:var(--r); padding: var(--s5); display:flex; flex-direction:column; gap:var(--s4); background:var(--bg-2); position:relative; min-width:0; }
.plan.is-key{ border-color:var(--accent); background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 9%, var(--bg-2)), var(--bg-2)); }
.plan .badge{ position:absolute; top:-11px; left:var(--s5); background:var(--accent); color:var(--on-accent); font:600 var(--t-xs)/1 var(--f-mono); padding:5px 8px; letter-spacing:.06em; text-transform:uppercase; border-radius:2px; }
.plan .sub{ font:var(--t-xs)/1 var(--f-mono); color:var(--accent-ink); letter-spacing:.06em; text-transform:uppercase; }
.plan h3{ font-size:1.3rem; }
.plan p{ color:var(--muted); font-size:var(--t-sm); }
.plan ul{ list-style:none; display:grid; gap:var(--s2); font-size:var(--t-sm); }
.plan li{ display:grid; grid-template-columns: 16px minmax(0,1fr); gap:var(--s2); }
.plan li::before{ content:""; width:9px; height:2px; background:var(--accent); margin-top:.72em; }
.plan .pay{ margin-top:auto; padding-top:var(--s4); border-top:1px solid var(--line-soft); font-size:var(--t-sm); color:var(--muted); }
.plan .pic{ border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--bg); }
.plan .pic .scene{ aspect-ratio: 16/8; }
.callout{ margin-top:var(--s5); border:1px dashed var(--line); border-radius:var(--r); padding:var(--s5); display:flex; flex-wrap:wrap; gap:var(--s5); align-items:center; justify-content:space-between; }
.callout h3{ font-size:var(--t-lg); }
.callout p{ color:var(--muted); }
@media (max-width: 1080px){ .plans{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .plans{ grid-template-columns: minmax(0,1fr); } }

/* FAQ */
.faq{ max-width: 880px; border-top:1px solid var(--line-soft); }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:var(--s4); padding-block:var(--s5); font:600 var(--t-lg)/1.3 var(--f-body); }
.faq summary::-webkit-details-marker{ display:none; }
.faq .pm{ flex:none; width:22px; height:22px; position:relative; margin-top:.15em; }
.faq .pm::before, .faq .pm::after{ content:""; position:absolute; left:3px; right:3px; top:10px; height:2px; background:var(--accent); transition: transform .25s var(--ease); }
.faq .pm::after{ transform: rotate(90deg); }
.faq details[open] .pm::after{ transform: rotate(0); }
.faq .ans{ padding-bottom:var(--s5); color:var(--muted); max-width:44em; }

/* CTA-смуга */
.cta-band{ margin-top: var(--s9); border-top:1px solid var(--line-soft); background: var(--bg-2); position:relative; overflow:hidden; }
.cta-band .wrap{ display:grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap:var(--s7); align-items:center; padding-block: var(--s8); }
.cta-band h2{ font-size: var(--t-2xl); font-weight:800; letter-spacing:-.03em; }
.cta-band p{ color:var(--muted); margin-top:var(--s4); max-width:34em; }
.cta-band .instrument .scene{ aspect-ratio: 16/10; }
@media (max-width: 860px){ .cta-band .wrap{ grid-template-columns: minmax(0,1fr); } }

/* шапка внутрішніх сторінок */
.page-hero{ padding-block: var(--s7) var(--s7); }
.page-hero .grid > *{ min-width:0; }
.page-hero .grid{ display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: var(--s7); align-items:center; }
.page-hero h1{ font-size: clamp(1.9rem, .9rem + 3.8vw, 4.1rem); font-weight:800; letter-spacing:-.035em; margin-block: var(--s4) var(--s5); line-height:1.02; }
.page-hero .instrument .scene{ aspect-ratio: 16 / 11; }
.crumbs{ font:var(--t-xs)/1.4 var(--f-mono); color:var(--muted); display:flex; flex-wrap:wrap; gap:.5em; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:var(--accent-ink); }
@media (max-width: 900px){ .page-hero .grid > *{ min-width:0; }
.page-hero .grid{ grid-template-columns: minmax(0,1fr); gap: var(--s6); } }

/* сторінка послуги */
.cols-2{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s7); }
@media (max-width: 860px){ .cols-2{ grid-template-columns: minmax(0,1fr); gap: var(--s6); } }
.symptoms{ list-style:none; display:grid; gap:var(--s3); }
.symptoms li{ display:grid; grid-template-columns: 28px minmax(0,1fr); gap:var(--s3); padding: var(--s4); border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--bg-2); }
.symptoms li::before{ content:"!"; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--warn); color:var(--warn); font:700 12px/19px var(--f-mono); text-align:center; }
.items{ list-style:none; border-top:1px solid var(--line-soft); }
.items li{ display:grid; grid-template-columns: 3rem minmax(0,1fr); gap:var(--s4); padding-block: var(--s5); border-bottom:1px solid var(--line-soft); }
.items .k{ font:var(--t-xs)/1.6 var(--f-mono); color:var(--accent-ink); }
.items h3{ font-family:var(--f-body); font-size:var(--t-lg); font-weight:600; margin-bottom:var(--s2); }
.items p{ color:var(--muted); }
.outcome{ list-style:none; display:grid; gap:var(--s3); }
.outcome li{ display:grid; grid-template-columns: 22px minmax(0,1fr); gap:var(--s3); }
.outcome li svg{ width:20px; height:20px; color:var(--signal); margin-top:.15em; }
.panel{ border:1px solid var(--line-soft); border-radius:var(--r); background:var(--bg-2); padding: var(--s6); }
.panel h2, .panel h3{ font-size:var(--t-lg); margin-bottom:var(--s4); }
.pager{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:var(--s4); margin-top: var(--s8); }
.pager a{ border:1px solid var(--line-soft); border-radius:var(--r); padding:var(--s5); text-decoration:none; display:grid; gap:var(--s2); transition: border-color .25s; }
.pager a:hover{ border-color:var(--accent); }
.pager .dir{ font:var(--t-xs)/1 var(--f-mono); color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }
.pager .t{ font-family:var(--f-display); font-size:1.1rem; }
.pager a:last-child{ text-align:right; }
@media (max-width: 600px){ .pager{ grid-template-columns: minmax(0,1fr); } .pager a:last-child{ text-align:left; } }

/* список послуг (сторінка /services) */
.svc-rows{ border-top:1px solid var(--line-soft); }
.svc-row{ display:grid; grid-template-columns: 4rem minmax(0,1.1fr) minmax(0,1fr) minmax(0,.8fr); gap: var(--s5); align-items:center; padding-block: var(--s6); border-bottom:1px solid var(--line-soft); text-decoration:none; position:relative; isolation:isolate; }
.svc-row::before{ content:""; position:absolute; inset:0 -16px; background:var(--bg-2); transform:scaleX(0); transform-origin:0 50%; transition: transform .45s var(--ease); z-index:-1; border-radius:var(--r); }
.svc-row:hover::before{ transform:scaleX(1); }
.svc-row .n{ font:var(--t-sm)/1 var(--f-mono); color:var(--accent-ink); }
.svc-row h2{ font-size:var(--t-xl); }
.svc-row p{ color:var(--muted); }
.svc-row .thumb{ border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--bg); overflow:hidden; }
.svc-row .thumb .scene{ aspect-ratio: 16/8; }
@media (max-width: 900px){ .svc-row{ grid-template-columns: 3rem minmax(0,1fr); } .svc-row p{ grid-column: 2; } .svc-row .thumb{ grid-column: 1 / -1; } }

/* сторінка кейсу */
.case-meta{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; }
.case-meta div{ background:var(--bg); padding: var(--s4) var(--s5); }
.case-meta dt{ font:var(--t-xs)/1 var(--f-mono); color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--s2); }
.case-meta dd{ margin:0; font-weight:600; }
@media (max-width: 760px){ .case-meta{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.timeline{ list-style:none; position:relative; display:grid; gap:var(--s5); }
.timeline::before{ content:""; position:absolute; left:10px; top:8px; bottom:8px; width:2px; background:var(--line); }
.timeline li{ position:relative; padding-left: var(--s7); }
.timeline li::before{ content:""; position:absolute; left:4px; top:6px; width:14px; height:14px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); }
.timeline h3{ font-family:var(--f-body); font-size:var(--t-lg); font-weight:600; margin-bottom:var(--s2); }
.timeline p{ color:var(--muted); }
.result{ border:1px solid var(--accent); border-radius:var(--r); padding: var(--s6); background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 8%, var(--bg-2)), var(--bg-2)); }
.result p{ font-size:var(--t-lg); line-height:1.5; }
.metrics{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s4); }
.metric b{ display:block; font-family:var(--f-display); font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); font-weight:600; letter-spacing:-.03em; line-height:1.05; font-variant-numeric: tabular-nums; color:var(--fg); }
.metric span{ font:var(--t-xs)/1.4 var(--f-mono); color:var(--muted); }
.metrics.boxed .metric{ border:1px solid var(--line-soft); border-radius:var(--r-sm); padding: var(--s5); background:var(--bg-2); }
@media (max-width: 560px){ .metrics{ grid-template-columns: minmax(0,1fr); } }

/* фільтри й картки інших кейсів */
.filters{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.filters button{ font:500 var(--t-sm)/1 var(--f-body); padding:10px 14px; min-height:44px; border-radius:var(--r-sm); border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; }
.filters button[aria-pressed="true"]{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; margin-top: var(--s5); }
.card{ background:var(--bg); padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); min-width:0; transition: background .25s var(--ease); position:relative; }
.card:hover{ background:var(--bg-2); }
.card.is-out{ display:none; }
.card .k{ display:flex; justify-content:space-between; gap:var(--s3); font:var(--t-xs)/1.3 var(--f-mono); color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
.card .k .st{ color:var(--accent-ink); }
.card h3{ font-size:1.02rem; line-height:1.3; }
.card p{ color:var(--muted); font-size:var(--t-sm); }
.card .r{ margin-top:auto; padding-top:var(--s3); border-top:1px dashed var(--line); font-size:var(--t-sm); }
@media (max-width: 960px){ .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .cards{ grid-template-columns: minmax(0,1fr); } }

/* про мене */
.about-grid{ display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: var(--s8); align-items:start; }
.big-quote{ font-family:var(--f-display); font-size:var(--t-xl); line-height:1.28; font-weight:400; }
.big-quote em{ font-style:normal; color:var(--accent-ink); }
.prose{ display:grid; gap:var(--s5); color:var(--muted); max-width:40em; }
.prose strong{ color:var(--fg); font-weight:600; }
.facts{ list-style:none; border-top:1px solid var(--line-soft); }
.facts li{ display:grid; grid-template-columns: 8rem minmax(0,1fr); gap:var(--s4); padding-block:var(--s4); border-bottom:1px solid var(--line-soft); }
.facts .l{ font:var(--t-xs)/1.6 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
@media (max-width: 900px){ .about-grid{ grid-template-columns: minmax(0,1fr); gap: var(--s6); } .facts li{ grid-template-columns: minmax(0,1fr); gap: var(--s1); } }
.principles{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s4); }
.principle{ border:1px solid var(--line-soft); border-radius:var(--r); padding:var(--s5); background:var(--bg-2); display:grid; gap:var(--s3); align-content:start; }
.principle .n{ font:var(--t-xs)/1 var(--f-mono); color:var(--accent-ink); }
.principle h3{ font-size:1.1rem; }
.principle p{ color:var(--muted); font-size:var(--t-sm); }
@media (max-width: 860px){ .principles{ grid-template-columns: minmax(0,1fr); } }

/* контакти й форма */
.contact-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: var(--s8); align-items:start; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns: minmax(0,1fr); gap: var(--s6); } }
.contact-list{ list-style:none; display:grid; gap:var(--s3); margin-top:var(--s6); }
.contact-list li{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }
.contact-list .l{ font:var(--t-xs)/1 var(--f-mono); color:var(--muted); width:6.5rem; letter-spacing:.08em; text-transform:uppercase; }
.contact-list .v{ font-family:var(--f-mono); user-select:all; }
.copy{ font:600 var(--t-xs)/1 var(--f-mono); padding:8px 10px; border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:2px; cursor:pointer; min-height:32px; }
.copy:hover{ color:var(--fg); border-color:var(--accent); }
.form{ display:grid; gap:var(--s4); background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--r); padding:var(--s6); }
.field{ display:grid; gap:var(--s2); }
.field label{ font-size:var(--t-sm); font-weight:500; }
.field .help{ font-size:var(--t-xs); color:var(--muted); }
.field input, .field textarea, .field select{ font:inherit; font-size:1rem; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; min-height:48px; width:100%; transition: border-color .2s, box-shadow .2s; }
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--glow); }
.field [aria-invalid="true"]{ border-color:var(--warn); }
.field .err{ font-size:var(--t-xs); color:var(--warn); min-height:1em; }
.chips-select{ display:flex; flex-wrap:wrap; gap:var(--s2); border:0; padding:0; margin:0; }
.chips-select legend{ font-size:var(--t-sm); font-weight:500; margin-bottom:var(--s2); padding:0; }
.chips-select label{ position:relative; }
.chips-select input{ position:absolute; opacity:0; pointer-events:none; }
.chips-select span{ display:inline-block; padding:9px 12px; min-height:40px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:var(--t-sm); color:var(--muted); cursor:pointer; transition: all .2s; }
.chips-select input:checked + span{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.chips-select input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ border-radius:var(--r-sm); padding:var(--s4); font-size:var(--t-sm); display:grid; gap:var(--s2); }
.form-status.ok{ border:1px solid var(--signal); color:var(--fg); }
.form-status.err{ border:1px solid var(--warn); color:var(--fg); }
.form-status pre{ margin:0; white-space:pre-wrap; font:var(--t-sm)/1.5 var(--f-mono); user-select:all; }

/* 404 */
.nf{ min-height: 70vh; display:grid; place-items:center; text-align:center; padding-block:var(--s8); }
.nf .code{ font-family:var(--f-display); font-size: clamp(5rem, 22vw, 14rem); font-weight:800; letter-spacing:-.05em; line-height:.9; }

/* підвал */
.foot{ border-top:1px solid var(--line-soft); padding-block: var(--s8) calc(var(--s6) + env(safe-area-inset-bottom,0px)); font-size:var(--t-sm); color:var(--muted); margin-top: var(--s9); }
.cta-band + .foot{ margin-top:0; }
.foot-grid{ display:grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap: var(--s6); }
.foot h4{ font:600 var(--t-xs)/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--fg); margin-bottom:var(--s4); }
.foot ul{ list-style:none; display:grid; gap:var(--s2); }
.foot a{ text-decoration:none; }
.foot a:hover{ color:var(--accent-ink); }
.foot .logo{ font-size:1.3rem; color:var(--fg); }
.foot-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s4); margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line-soft); font:var(--t-xs)/1.4 var(--f-mono); }
@media (max-width: 860px){ .foot-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } .foot-grid > :first-child{ grid-column: 1 / -1; } }