/* ============================================================
   DoLadu — сторінка продукту
   Мова взята з DOLADU_DESIGN_SYSTEM.md: кольори, скло, радіуси,
   типографіка. Ритм сторінки — власний (док §9 прямо це дозволяє).
   ============================================================ */

/* --- Шрифти з власного домену, не з CDN (док §5) --- */
@font-face { font-family:'Space Grotesk'; src:url('../fonts/SpaceGrotesk-Bold.ttf') format('truetype');
             font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('../fonts/SpaceGrotesk-Light.ttf') format('truetype');
             font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Azeret Mono'; src:url('../fonts/AzeretMono-Bold.ttf') format('truetype');
             font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Azeret Mono'; src:url('../fonts/AzeretMono-ExtraBold.ttf') format('truetype');
             font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-Medium.ttf') format('truetype');
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/Inter-Regular.ttf') format('truetype');
             font-weight:400; font-style:normal; font-display:swap; }

:root{
    /* Основа (док §1) */
    --bg:      #0a0c14;
    --ink:     #e0dde8;
    --muted:   rgba(255,255,255,0.28);
    --dim:     rgba(255,255,255,0.55);

    /* Кольори станів (док §3) — кожен щось означає */
    --ok:      #44CC88;
    --warn:    #F7D53E;
    --err:     #FF5555;
    --info:    #A3CBF5;
    --accent:  #6958CC;
    --teal:    #40DED3;
    /* Третій колір марки. Золотий і блакитний уже працюють, рожевий — ні. */
    --pink:      #e0568a;
    --pink-deep: #c33a68;

    /* Акценти вкладок (док §3) */
    --a-project: #6958CC;
    --a-ue5:     #19D4A0;
    --a-lookdev: #D6B92E;
    --a-vfx:     #FF9A5A;

    --sans:  'Space Grotesk', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
    --azeret:'Azeret Mono', ui-monospace, Consolas, monospace;
    --body:  'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

    --r-card: 12px;   /* лише два радіуси в системі, третього не додавати */
    --r-btn:  8px;

    --gutter: clamp(20px, 5vw, 80px);
    --maxw:   1240px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    font-size:16px;
    line-height:1.65;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

/* ============================================================
   ФОН-СЦЕНА — той самий шар, що працює фоном застосунку
   (Wireframecode). Один на всю сторінку, без другої сцени.
   ============================================================ */
.scene{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
/* Жива сітка — та сама, що у фоні застосунку. Реагує на мишу,
   тому лежить над плямами, але під затемненням і шумом. */
#neuralCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.scene__base{
    position:absolute; inset:0;
    background-color:#171b26;
    background-image:
        radial-gradient(145% 124% at 14% 24%, rgba(18,178,168,0.27) 0%, rgba(18,178,168,0.12) 28%, rgba(18,178,168,0) 62%),
        radial-gradient(72% 86% at 95% 70%, rgba(92,69,194,0.14) 0%, rgba(92,69,194,0.07) 18%, rgba(92,69,194,0.02) 27%, rgba(92,69,194,0) 38%),
        radial-gradient(88% 96% at 50% 58%, rgba(56,98,232,0.16) 0%, rgba(56,98,232,0.08) 30%, rgba(56,98,232,0) 66%),
        radial-gradient(115% 120% at 52% 48%, rgba(220,225,255,0.085) 0%, rgba(220,225,255,0) 60%),
        linear-gradient(155deg, #141923 0%, #192434 46%, #161b29 100%);
    background-size:220% 220%;
    background-position:center;
    animation: liquidFlow 54s cubic-bezier(0.4,0.05,0.2,0.95) infinite alternate;
}
@keyframes liquidFlow{
    0%   { background-position: 12% 18%; }
    50%  { background-position: 74% 56%; }
    100% { background-position: 34% 92%; }
}

/* Кольорові плями (blobs) — з тієї ж сцени */
.blob{ position:absolute; pointer-events:none; filter:blur(12px); }
.blob--purple{
    right:-22vw; top:54%; width:52vw; height:52vw;
    transform:translateY(-50%); transform-origin:100% 50%;
    border-radius:64% 30% 70% 24% / 30% 74% 22% 70%;
    background:
        radial-gradient(74% 60% at 62% 98%, rgba(63,36,150,0.30) 0%, rgba(63,36,150,0.18) 40%, rgba(63,36,150,0) 76%),
        radial-gradient(42% 38% at 36% 34%, rgba(168,122,255,0.18) 0%, rgba(168,122,255,0) 72%),
        radial-gradient(55% 52% at 64% 58%, rgba(91,69,200,0.23) 0%, rgba(91,69,200,0.13) 34%, rgba(91,69,200,0) 70%);
    animation: purpleDrift 32s ease-in-out infinite alternate;
}
.blob--cyan{
    left:-28vw; top:-4vw; width:44vw; height:44vw;
    transform-origin:0% 50%;
    border-radius:36% 62% 24% 76% / 62% 32% 72% 28%;
    background:
        radial-gradient(112% 96% at 72% 108%, rgba(10,74,96,0.30) 0%, rgba(10,74,96,0.19) 40%, rgba(10,74,96,0.08) 62%, rgba(10,74,96,0) 96%),
        radial-gradient(44% 40% at 62% 34%, rgba(118,255,233,0.16) 0%, rgba(118,255,233,0) 72%),
        radial-gradient(58% 54% at 42% 58%, rgba(29,198,184,0.22) 0%, rgba(29,198,184,0.12) 35%, rgba(29,198,184,0) 72%);
    animation: cyanDrift 34s ease-in-out infinite alternate;
}
@keyframes purpleDrift{ 0%{transform:translateY(-50%) scale(1) rotate(0deg);} 100%{transform:translateY(-54%) scale(1.08) rotate(8deg);} }
@keyframes cyanDrift  { 0%{transform:scale(1) rotate(0deg);} 100%{transform:translateY(4%) scale(1.10) rotate(-7deg);} }

/* Шум проти бендингу — дві частоти, як в оригіналі */
.scene__noise{
    position:absolute; inset:0; opacity:0.06; mix-blend-mode:multiply;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n1)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.28' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
    background-size:180px 180px, 260px 260px;
}
/* Віньєт + шар пульсації 12s */
.scene__vig{
    position:absolute; inset:0;
    box-shadow: inset 0 0 26px 28px rgba(0,0,0,0.09);
}
.scene__vig::after{
    content:""; position:absolute; inset:0;
    box-shadow: inset 0 0 40px 56px rgba(0,0,0,0.13);
    opacity:0; animation: vigPulse 12s ease-in-out infinite;
}
@keyframes vigPulse{ 0%,100%{opacity:0;} 50%{opacity:1;} }

/* Затемнення під контентом, щоб текст читався поверх сцени */
.scene__dim{ position:absolute; inset:0; background:rgba(10,12,20,0.55); }

/* ============================================================
   СІТКА
   ============================================================ */
.wrap{ position:relative; z-index:1; }
/* 15% порожньо · 70% колонка · 15% порожньо.
   На вузьких екранах відсотки задушили б текст — там звичайні поля. */
.container{ width:70%; max-width:1780px; margin:0 auto; padding:0; }
@media (max-width:1240px){ .container{ width:auto; max-width:none; padding:0 var(--gutter); } }
section{ padding: clamp(90px, 13vh, 170px) 0; }

/* ============================================================
   ТИПОГРАФІКА
   ============================================================ */
/* Підпис розділу — найвпізнаваніша деталь: капс, трекінг 3px,
   кольорова смуга акценту зліва (док §6) */
.kicker{
    font-family:var(--azeret); font-weight:800; font-size:9px;
    letter-spacing:3px; text-transform:uppercase;
    color:var(--dim);
    display:inline-flex; align-items:center; gap:10px;
    padding-left:10px; border-left:3px solid var(--accent);
    line-height:1.4; margin-bottom:26px;
}
.kicker--ue5{ border-left-color:var(--a-ue5); }
.kicker--lookdev{ border-left-color:var(--a-lookdev); }
.kicker--vfx{ border-left-color:var(--a-vfx); }
.kicker--info{ border-left-color:var(--info); }
.kicker--ok{ border-left-color:var(--ok); }

h1,h2,h3{ font-family:var(--sans); font-weight:700; line-height:1.02; letter-spacing:-0.02em; }

.h-display{ font-size:clamp(46px, 8.2vw, 132px); }
.h-big    { font-size:clamp(34px, 5.4vw, 78px); line-height:1.04; }
.h-mid    { font-size:clamp(26px, 3.2vw, 44px); line-height:1.1; }

.lead{
    font-family:var(--body); font-size:clamp(17px, 1.55vw, 22px);
    line-height:1.6; color:var(--dim); max-width:62ch;
}
.body-txt{ font-size:16px; line-height:1.75; color:var(--dim); max-width:60ch; }
.body-txt + .body-txt{ margin-top:16px; }
.body-txt strong{ color:var(--ink); font-weight:400; }

.thin{ font-weight:300; color:var(--muted); }

/* Числа й дані — завжди моно */
.num{ font-family:var(--mono); font-weight:500; }

/* ============================================================
   СКЛО — головний елемент (док §2)
   Градієнт зверху вниз + світла лінія по верхньому краю + blur 12
   ============================================================ */
.card{
    border-radius:var(--r-card);
    background: linear-gradient(to bottom,
        rgba(10,10,14,0.40) 0%,
        rgba(10,10,14,0.70) 10%,
        rgba(10,10,14,0.70) 100%);
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:
        inset 0  1px 0 rgba(255,255,255,0.14),
        inset 0 -1px 0 rgba(255,255,255,0.05),
        0 8px 22px rgba(0,0,0,0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ============================================================
   КНОПКИ (док §4) — рівень читається прозорістю, не насиченістю
   ============================================================ */
.btn{
    display:inline-flex; align-items:center; gap:10px;
    height:44px; padding:0 20px; border-radius:var(--r-btn);
    font-family:var(--mono); font-weight:500; font-size:11px;
    letter-spacing:1px; text-transform:uppercase; text-decoration:none;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
    white-space:nowrap;
}
.btn--primary{
    background: rgba(105,88,204,0.10);
    border:1px solid rgba(105,88,204,0.34);
    color: rgba(255,255,255,0.60);
}
.btn--primary:hover{
    background: rgba(105,88,204,0.18);
    border-color: rgba(105,88,204,0.50);
    color: rgba(255,255,255,0.86);
}
.btn--primary:active{ background: rgba(105,88,204,0.26); border-color: rgba(105,88,204,0.66); }

.btn--ghost{
    background: rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.50);
}
.btn--ghost:hover{ border-color:rgba(255,255,255,0.22); color:rgba(255,255,255,0.80); }

/* ============================================================
   ШАПКА
   ============================================================ */
.topbar{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0;
    transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
    border-bottom:1px solid transparent;
}
.topbar.is-stuck{
    background: rgba(10,12,20,0.72);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgba(255,255,255,0.06);
}
/* Всередині шапки — той самий контейнер, щоб лого стояло рівно
   над колонкою контенту, а не саме по собі. */
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand img{ height:26px; width:auto; display:block; }   /* лого з повною назвою */
.topbar__right{ display:flex; align-items:center; gap:10px; }
.topbar .btn{ height:34px; padding:0 14px; font-size:10px; }

/* Повернення на портфоліо */
.back-link{
    font-family:var(--mono); font-size:10px; letter-spacing:1px;
    color:var(--muted); text-decoration:none; text-transform:uppercase;
    transition:color .2s ease;
}
.back-link:hover{ color:var(--info); }

/* ============================================================
   ГЕРОЙ
   ============================================================ */
.hero{ min-height:100svh; display:flex; align-items:center; padding-top:90px; }
.hero__mark{ width:76px; height:76px; display:block; margin-bottom:30px; }
.hero h1{ margin-bottom:26px; }

.hero .lead{ margin-bottom:38px; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px; }

.hero__meta{
    display:flex; gap:22px; flex-wrap:wrap;
    font-family:var(--mono); font-size:11px; letter-spacing:0.6px; color:var(--muted);
}
.hero__meta span{ display:inline-flex; align-items:center; gap:7px; }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); flex-shrink:0; }
.dot--info{ background:var(--info); } .dot--warn{ background:var(--warn); }

/* Підказка «крути далі» */
.scroll-hint{
    position:absolute; bottom:34px; left:var(--gutter);
    font-family:var(--mono); font-size:10px; letter-spacing:2px;
    color:var(--muted); display:flex; align-items:center; gap:10px;
}
.scroll-hint i{ width:1px; height:26px; background:linear-gradient(to bottom, var(--muted), transparent); display:block; }

/* ============================================================
   БЛОКИ «ЗОБРАЖЕННЯ + ТЕКСТ» — чергування сторін
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center; }
.split--reverse .split__media{ order:2; }
.split--reverse .split__text{ order:1; }
.split__text .kicker{ margin-bottom:20px; }
.split__text h2{ margin-bottom:20px; }

/* Дві картинки поруч */
.shot-pair{ display:grid; gap:18px; }

/* ============================================================
   СКРІНШОТ — рамка з тим самим радіусом і бордером (док §7)
   ============================================================ */
.shot{
    border-radius:var(--r-card); overflow:hidden;
    border:1px solid rgba(255,255,255,0.06);
    background: rgba(8,8,10,0.70);
    box-shadow: 0 18px 50px rgba(0,0,0,0.42);
    display:block; position:relative;
}
.shot img{ display:block; width:100%; height:auto; }
.shot figcaption{
    font-family:var(--mono); font-size:clamp(11px,0.8vw,13px); letter-spacing:0.4px;
    color:var(--muted); padding:11px 14px;
    border-top:1px solid rgba(255,255,255,0.05);
}
.shot figcaption b{ color:var(--info); font-weight:500; }

/* Заглушка, поки скріншота ще немає у файлах.
   Показує, який саме файл сюди покласти — щоб не гадати. */
.shot.is-empty img{ display:none; }
.shot.is-empty .shot__ph{ display:flex; }
.shot__ph{
    display:none; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; aspect-ratio:16/10; padding:24px; text-align:center;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.014) 0 10px, transparent 10px 20px);
}
.shot__ph .ph-label{
    font-family:var(--azeret); font-weight:800; font-size:9px; letter-spacing:3px;
    text-transform:uppercase; color:var(--warn);
}
.shot__ph .ph-file{
    font-family:var(--mono); font-size:12px; color:var(--dim);
    border:1px dashed rgba(255,255,255,0.14); border-radius:var(--r-btn);
    padding:8px 14px; word-break:break-all;
}
.shot__ph .ph-hint{ font-size:12px; color:var(--muted); max-width:38ch; line-height:1.55; }

/* ============================================================
   БЛОК ЗВІТУ — відтворений інтерфейс замість скріншота (док §6)
   ============================================================ */
.sec{
    border-radius:var(--r-card); overflow:hidden;
    background: rgba(8,8,10,0.70);
    border:1px solid rgba(255,255,255,0.07);
    box-shadow: 0 18px 50px rgba(0,0,0,0.42);
}
.sec-title{
    font-family:var(--azeret); font-weight:800; font-size:9px; letter-spacing:3px;
    text-transform:uppercase; color:rgba(255,255,255,0.72);
    padding:9px 12px 8px;
    border-left:3px solid var(--sec-accent, var(--accent));
    background:rgba(255,255,255,0.02);
}
.sep{ height:1px; background:rgba(255,255,255,0.05); margin:0 10px 6px; }
.row{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:6px 12px; font-size:11px;
}
.row .k{ color:rgba(255,255,255,0.55); font-family:var(--body); }
.row .v{ font-family:var(--mono); font-weight:500; color:var(--ink); white-space:nowrap; }
.row .v.ok{ color:var(--ok); } .row .v.warn{ color:var(--warn); }
.row .v.err{ color:var(--err); } .row .v.info{ color:var(--info); }
.sec__foot{ padding:10px 12px 12px; }

/* Оцінка 0–100 */
.score{ display:flex; align-items:baseline; gap:12px; padding:14px 12px 6px; }
.score__num{ font-family:var(--mono); font-weight:500; font-size:46px; line-height:1; color:var(--ok); }
.score__max{ font-family:var(--mono); font-size:14px; color:var(--muted); }
.score__verdict{
    margin-left:auto; font-family:var(--azeret); font-weight:800; font-size:9px;
    letter-spacing:3px; color:var(--ok);
    border:1px solid rgba(68,204,136,0.34); border-radius:var(--r-btn); padding:6px 10px;
}
.bar{ height:4px; border-radius:999px; background:rgba(255,255,255,0.07); margin:8px 12px 14px; overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:999px;
        background:linear-gradient(to right, rgba(91,69,200,0.85), rgba(64,222,211,0.85)); }

/* ============================================================
   ГРАФІК ШВИДКОДІЇ — теж без скріншота
   ============================================================ */
.perf{ display:grid; gap:14px; padding:16px 14px 18px; }
.perf__row{ display:grid; grid-template-columns:112px 1fr auto; gap:14px; align-items:center; }
.perf__label{ font-family:var(--mono); font-size:10px; letter-spacing:0.5px; color:var(--muted); text-transform:uppercase; }
.perf__track{ height:9px; border-radius:999px; background:rgba(255,255,255,0.05); overflow:hidden; }
.perf__fill{ display:block; height:100%; border-radius:999px; width:0; transition:width 1.1s cubic-bezier(.22,.9,.28,1); }
.perf__fill--slow{ background:linear-gradient(to right, rgba(255,85,85,0.55), rgba(255,85,85,0.85)); }
.perf__fill--fast{ background:linear-gradient(to right, rgba(91,69,200,0.85), rgba(64,222,211,0.9)); }
.perf__val{ font-family:var(--mono); font-size:13px; color:var(--ink); min-width:76px; text-align:right; }
.perf__note{ font-size:12px; color:var(--muted); padding:0 14px 16px; line-height:1.6; }

/* ============================================================
   СІТКА МОЖЛИВОСТЕЙ
   ============================================================ */
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(268px,1fr)); gap:18px; }
.feature{ padding:24px 22px 26px; }
.feature__title{
    font-family:var(--azeret); font-weight:700; font-size:14px; letter-spacing:0.4px;
    color:var(--ink); margin:14px 0 10px;
}
.feature__txt{ font-size:14px; line-height:1.65; color:var(--dim); }
.feature__tag{
    font-family:var(--azeret); font-weight:800; font-size:9px; letter-spacing:3px;
    text-transform:uppercase; color:var(--f-accent, var(--accent));
    padding-left:9px; border-left:3px solid var(--f-accent, var(--accent));
}

/* ============================================================
   ЧИСЛА
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
        background:rgba(255,255,255,0.06); border-radius:var(--r-card); overflow:hidden; }
.stat{ background:rgba(10,12,20,0.72); padding:24px 20px; }
.stat__n{ font-family:var(--mono); font-weight:500; font-size:clamp(26px,3vw,38px); color:var(--ink); line-height:1; }
.stat__l{ font-family:var(--azeret); font-weight:800; font-size:9px; letter-spacing:3px;
          text-transform:uppercase; color:var(--muted); margin-top:10px; }

/* ============================================================
   ЦІНА / CTA
   ============================================================ */
.buy{ padding:clamp(30px,4vw,48px); }
.buy__grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; }
.plan-list{ list-style:none; display:grid; gap:11px; }
.plan-list li{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--dim); line-height:1.6; }
.plan-list li::before{
    content:""; width:6px; height:6px; border-radius:50%; background:var(--ok);
    margin-top:8px; flex-shrink:0;
}
.buy__cta{ display:flex; flex-direction:column; gap:12px; }
.buy__cta .btn{ justify-content:center; height:50px; font-size:12px; }
.buy__note{ font-size:12px; color:var(--muted); line-height:1.6; }
.buy__note a{ color:var(--info); }

/* ============================================================
   ПІДВАЛ
   ============================================================ */
footer{ border-top:1px solid rgba(255,255,255,0.06); padding:34px 0 46px;
         position:relative; z-index:1; }
/* Підвал НЕ в колонці: копірайт має стояти біля правого краю сторінки */
.foot{ padding:0 clamp(20px,3vw,48px); }
.foot{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
       font-family:var(--mono); font-size:11px; color:var(--muted); }
.foot a{ color:var(--muted); text-decoration:none; }
.foot a:hover{ color:var(--info); }
.foot__links{ grid-column:2; display:flex; gap:12px 26px; flex-wrap:wrap; justify-content:center;
              text-transform:uppercase; letter-spacing:1px; }
.foot__copy{ grid-column:3; text-align:right; }
@media (max-width:760px){
    .foot{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:16px; }
    .foot__links{ grid-column:1; } .foot__copy{ grid-column:1; text-align:center; }
}

/* ============================================================
   ПОЯВА ПРИ СКРОЛІ — працює в обидві сторони.
   Прокрутив далі — блок їде назад і гасне; повернувся — виїжджає
   знову. Тривалість 1.25 с: помітно повільніше за попередню версію.
   ============================================================ */
/* Ховаємо ЛИШЕ під .js-reveal — цей клас ставить сам скрипт.
   Якщо JS вимкнено або файл не завантажився, текст просто видно:
   сторінка продукту не має права зникнути через анімацію. */
.js-reveal .reveal{ opacity:0; transform:translateY(34px);
    transition:opacity 1.25s cubic-bezier(.22,.85,.3,1), transform 1.25s cubic-bezier(.22,.85,.3,1);
    will-change:opacity, transform; }
.js-reveal .reveal--left { transform:translate3d(-90px,20px,0); }
.js-reveal .reveal--right{ transform:translate3d( 90px,20px,0); }
.js-reveal .reveal.is-in{ opacity:1; transform:translate3d(0,0,0); }

/* Ступінчаста поява для груп */





/* ============================================================
   МОБІЛЬНИЙ — одна колонка (док §9)
   ============================================================ */
@media (max-width: 900px){
    .split{ grid-template-columns:1fr; gap:34px; }
    .split--reverse .split__media,
    .split--reverse .split__text{ order:initial; }
    .buy__grid{ grid-template-columns:1fr; }
    .hero{ min-height:auto; padding-top:120px; padding-bottom:80px; }
    .scroll-hint{ display:none; }
    .topbar .brand b{ display:none; }
    /* На вузькому екрані бічний в'їзд зайвий — лишаємо тільки підйом */
    .js-reveal .reveal--left, .js-reveal .reveal--right{ transform:translateY(26px); }
}

@media (max-width: 560px){
    .hero__meta{ gap:12px 18px; }
    .topbar__right .btn span{ display:none; }
}

/* Повага до системного налаштування «менше руху» */
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .js-reveal .reveal, .js-reveal .reveal--left, .js-reveal .reveal--right{ opacity:1; transform:none; transition:none; }
    .scene__base, .blob, .scene__vig::after{ animation:none; }
    .perf__fill{ transition:none; }
}


/* ============================================================
   ШТОРКИ З ХЕШТЕГАМИ
   Один рядок — одна група інструментів. Закрита має «—»,
   відкрита «|»: та сама риска, повернута на 90°.
   ============================================================ */
.acc{ border-top:1px solid rgba(255,255,255,0.10); }
.acc__item{ border-bottom:1px solid rgba(255,255,255,0.10); }

.acc__head{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
    background:none; border:0; cursor:pointer; text-align:left;
    padding:clamp(18px,2.2vw,28px) 4px;
    color:inherit; font:inherit;
    transition:padding-left .5s cubic-bezier(.22,.85,.3,1);
}
.acc__head:hover{ padding-left:14px; }
.acc__head:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:var(--r-btn); }

.acc__title{
    font-family:var(--sans); font-weight:700; letter-spacing:-0.02em;
    font-size:clamp(24px,2.9vw,42px); line-height:1.1;
    color:var(--muted);
    transition:color .4s ease;
}
.acc__head:hover .acc__title{ color:var(--dim); }
.acc__item.is-open .acc__title{ color:var(--ink); }

/* Риска праворуч: — закрито, | відкрито */
.acc__sign{ position:relative; width:22px; height:22px; flex-shrink:0; }
.acc__sign::before{
    content:""; position:absolute; left:0; top:50%; width:22px; height:1.5px;
    background:var(--dim); transform:translateY(-50%) rotate(0deg);
    transition:transform .5s cubic-bezier(.22,.85,.3,1), background-color .4s ease;
}
.acc__item.is-open .acc__sign::before{ transform:translateY(-50%) rotate(90deg); background:var(--accent); }

/* Панель: висота рахується скриптом, тому анімація плавна */
.acc__panel{ height:0; overflow:hidden; transition:height .55s cubic-bezier(.22,.85,.3,1); }
.acc__inner{
    padding:0 4px clamp(22px,2.4vw,32px);
    max-width:74ch; font-size:16px; line-height:1.75; color:var(--dim);
}
.acc__inner .num{ color:var(--info); }

/* Без JS шторки просто відкриті — текст не має ховатись */
html:not(.js-reveal) .acc__panel{ height:auto; }

@media (max-width:600px){
    .acc__title{ font-size:20px; }
    .acc__head{ gap:14px; }
}


/* ============================================================
   СКРОЛБАР — точний переклад _STD_SCROLLBAR_QSS з hub_ui.py.
   Qt-альфа 220 -> 0.863, 250 -> 0.980. #5B45C8 -> #40DED3, згори вниз.
   ============================================================ */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom,
      rgba(91, 69, 200, 0.863) 0%,
      rgba(64, 222, 211, 0.863) 100%);
  border-radius:999px; min-height:20px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom,
      rgba(120, 90, 240, 0.98) 0%,
      rgba(80, 230, 220, 0.98) 100%);
}
::-webkit-scrollbar-thumb:horizontal {
  background: linear-gradient(to right,
      rgba(91, 69, 200, 0.863) 0%,
      rgba(64, 222, 211, 0.863) 100%);
  min-width:20px;
}
::-webkit-scrollbar-thumb:horizontal:hover {
  background: linear-gradient(to right,
      rgba(120, 90, 240, 0.98) 0%,
      rgba(80, 230, 220, 0.98) 100%);
}
::-webkit-scrollbar-corner { background:transparent; }
/* Firefox градієнтів на скролбарі не підтримує - беремо середину градієнта.
   ⚠ ВАЖЛИВО: цей блок ОБОВ'ЯЗКОВО має бути в @supports.
   Chrome від 121-ї версії, побачивши стандартні scrollbar-width/scrollbar-color,
   повністю ігнорує ::-webkit-scrollbar-* — і градієнт зникає, лишається
   плоский #4D94CD. Саме це й було видно. Firefox не знає selector(),
   тож умова спрацьовує тільки там, де webkit-псевдоелементів немає. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width:thin; scrollbar-color:#4D94CD transparent; }
}


/* ============================================================
   РОЖЕВИЙ - третій колір марки
   ============================================================ */
.kicker--pink{ border-left-color:var(--pink); }
.dot--pink{ background:var(--pink); box-shadow:0 0 8px rgba(224,86,138,0.5); }
.acc__title i{ font-style:normal; color:var(--pink); }
/* Три кольори марки як ПЛОСКІ акценти на окремих словах.
   Градієнта в тексті немає: він з'їдає читабельність на великому кеглі
   і сперечається з логотипом, де градієнт і має бути. */
.c-gold{ color:#f7d53e; }
.c-blue{ color:var(--info); }
.c-pink{ color:var(--pink); }

.note{
    margin-top:22px; padding:12px 16px; border-radius:var(--r-btn);
    border-left:3px solid var(--ok); background:rgba(68,204,136,0.06);
    font-size:14px; line-height:1.6; color:var(--dim); max-width:66ch;
}
.note b{ font-weight:400; }
.note--info{ border-left-color:var(--info); background:rgba(163,203,245,0.06); }

.narrow .body-txt--wide{ max-width:74ch; font-size:17px; }
.narrow .body-txt + .body-txt{ margin-top:18px; }

.hero__sub{
    font-family:var(--sans); font-weight:300;
    font-size:clamp(20px,2.1vw,30px); line-height:1.3;
    color:var(--dim); margin-bottom:26px; max-width:24ch;
}


/* ============================================================
   ВКЛАДКИ: текст їде, зображення стоїть на місці й змінюється
   ============================================================ */
/* Перекіс на користь зображення: скріншоти щільні, і кожен зайвий
   піксель ширини тут вартує більше, ніж у колонці тексту. */
.ws__grid{
    display:grid; grid-template-columns:0.85fr 1.15fr;
    gap:clamp(26px,2.8vw,52px); align-items:start;
    margin-top:clamp(40px,6vh,90px);   /* відбій від вступного абзацу секції */
}
.ws__step{
    min-height:88vh; display:flex; flex-direction:column; justify-content:center;
    opacity:.24; transition:opacity .7s ease;
}
.ws__step.is-active{ opacity:1; }
/* Назва вкладки крупніша за звичайний підпис розділу: у цій секції
   вона працює як заголовок, а не як дрібна позначка. */
.ws__tab{
    font-family:var(--azeret); font-weight:800;
    font-size:clamp(11px,0.78vw,14px); letter-spacing:3px;
    text-transform:uppercase; color:var(--tab,var(--accent));
    padding-left:12px; border-left:3px solid var(--tab,var(--accent));
    margin-bottom:24px;
}
.ws__step h3{ margin-bottom:22px; }

/* Текст поруч зі скріншотом мусить триматись із ним в одній вазі:
   на 16px він губився поруч із щільним інтерфейсом на картинці. */
.ws__step .body-txt{
    font-size:clamp(17px,1.15vw,21px);
    line-height:1.7;
    max-width:none;
}
.ws__solves{
    margin-top:24px; font-family:var(--mono);
    font-size:clamp(13px,0.95vw,16px); letter-spacing:.3px;
    color:var(--dim); line-height:1.7;
}
.ws__solves span{
    color:var(--pink); text-transform:uppercase; letter-spacing:2px;
    margin-right:12px; font-size:clamp(10px,0.72vw,12px);
}

.ws__media{
    position:relative;
    /* Крок центрує текст у блоці 88vh, тож його середина ~44vh від верху
       сітки. Зсуваємо картинку вниз, щоб перша пара «текст — знімок»
       читалась на одному рівні, а не знімок навпроти вступу секції. */
    padding-top:clamp(50px,17vh,190px);
}
/* Висоту задає ПЕРШИЙ знімок у звичайному потоці, решта лежать поверх нього.
   Раніше тут була фіксована висота + object-fit:cover, і скріншоти
   обрізало до майже квадрата. Тепер вікно застосунку видно цілком. */
.ws__sticky{ position:sticky; top:14vh; }
.ws__shot{
    position:absolute; inset:0; margin:0;
    opacity:0; transform:translate3d(42px,0,0) scale(.985);
    transition:opacity .75s cubic-bezier(.22,.85,.3,1), transform .75s cubic-bezier(.22,.85,.3,1);
    pointer-events:none;
}
.ws__shot:first-child{ position:relative; }   /* задає висоту стосу */
.ws__shot.is-active{ opacity:1; transform:translate3d(0,0,0) scale(1); pointer-events:auto; }
.ws__shot img{ display:block; width:100%; height:auto; }

@media (max-width:1000px){
    .ws__grid{ grid-template-columns:1fr; gap:0; margin-top:34px; }
    .ws__media{ padding-top:0; }
    .ws__step{ min-height:0; opacity:1; margin-bottom:26px; }
    .ws__media{ display:none; }
}


/* ============================================================
   ФОРМАТИ
   ============================================================ */
.fmt{ border-top:1px solid rgba(255,255,255,0.10); }
.fmt__row{
    display:grid; grid-template-columns:140px 1fr; gap:20px; align-items:baseline;
    padding:16px 2px; border-bottom:1px solid rgba(255,255,255,0.10);
}
.fmt__k{
    font-family:var(--azeret); font-weight:800; font-size:9px; letter-spacing:3px;
    text-transform:uppercase; color:var(--muted);
}
.fmt__v{ font-family:var(--mono); font-size:14px; color:var(--ink); line-height:1.8; }
@media (max-width:620px){ .fmt__row{ grid-template-columns:1fr; gap:8px; } }


/* ============================================================
   ЦІНА
   ============================================================ */
.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.plan{ padding:28px 24px 26px; position:relative; }
.plan__name{
    font-family:var(--azeret); font-weight:800; font-size:9px; letter-spacing:3px;
    text-transform:uppercase; color:var(--muted); margin-bottom:16px;
}
.plan__price{ font-family:var(--mono); font-weight:500; font-size:clamp(26px,2.6vw,34px); color:var(--ink); line-height:1; }
.plan__price span{ font-size:13px; color:var(--muted); margin-left:8px; }
.plan__note{ margin-top:14px; font-size:14px; line-height:1.6; color:var(--dim); }
.plan--best{ border-color:rgba(224,86,138,0.34); }
.plan--best .plan__name{ color:var(--pink); }
.plan__badge{
    position:absolute; top:-1px; right:18px;
    font-family:var(--azeret); font-weight:800; font-size:8px; letter-spacing:2.4px;
    text-transform:uppercase; color:#0a0c14; background:var(--pink);
    padding:4px 9px; border-radius:0 0 6px 6px;
}
.plans__foot{
    margin-top:24px; font-family:var(--mono); font-size:13px; color:var(--dim); letter-spacing:.3px;
}


/* ============================================================
   ФІНАЛЬНА КАРТКА: лого вгорі справа, кнопки внизу
   ============================================================ */
.buy__top{ display:grid; grid-template-columns:1.2fr auto; gap:clamp(26px,4vw,60px); align-items:start; }
.buy__logo{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; text-align:right; }
.buy__logo img{ width:clamp(190px,17vw,260px); height:auto; display:block; opacity:.94; }
.buy__logo-sub{
    font-family:var(--mono); font-size:11px; letter-spacing:1.2px; color:var(--muted);
}
.buy__actions{
    margin-top:clamp(30px,4vw,48px); padding-top:clamp(24px,3vw,32px);
    border-top:1px solid rgba(255,255,255,0.08);
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.btn--big{ height:52px; padding:0 26px; font-size:12px; }
.buy__actions .buy__note{ margin-left:auto; max-width:38ch; text-align:right; }
@media (max-width:860px){
    .buy__top{ grid-template-columns:1fr; }
    .buy__logo{ align-items:flex-start; text-align:left; }
    .buy__actions{ flex-direction:column; align-items:stretch; }
    .buy__actions .btn{ justify-content:center; }
    .buy__actions .buy__note{ margin-left:0; text-align:left; max-width:none; }
}