/* ==========================================================================
   EQ.team — компоненты страниц (навигация, герой, карточки, футер).
   Источник: дизайн-проект «Сайт завода строй групп» → Блог.dc.html.
   Подключается поверх css/eq/tokens/*.css и css/eq/site-theme.css.

   Обёртка страницы: <div class="eq light grad"> — светлая тема с градиентами
   (см. eq_wrap_class() в inc/eq-chrome.php). Тёмная — класс `light` снимается.
   ========================================================================== */

/* Фирменный акцент. Рампа пересчитана из #2ecc5a по формуле дизайна
   (renderVals: 50–400 — подмешивание белого, 500–900 — чёрного).
   Меняете акцент — пересчитайте всю рампу, иначе оттенки разъедутся. */
.eq {
	--indigo-050: #eefbf2;
	--indigo-100: #e0f7e6;
	--indigo-200: #c0f0ce;
	--indigo-300: #8ce3a4;
	--indigo-400: #58d67b;
	--indigo-500: #2cc256;
	--indigo-600: #2ecc5a;
	--indigo-700: #28af4d;
	--indigo-800: #219341;
	--indigo-900: #155c28;
	--color-brand: var(--indigo-600);
	--color-brand-bright: var(--indigo-500);
	--color-brand-deep: var(--indigo-800);
	--color-brand-hover: var(--indigo-700);
	--accent-rgb: 46, 204, 90;
	--focus-ring: rgba(46, 204, 90, .35);
	--shadow-cta: 0 10px 24px rgba(46, 204, 90, .28);
}

/* Утилиты из рантайма дизайнера (support.js) — только те, что нужны разметке.
   .wrap из support.js (flex-wrap) намеренно не берём: в макетах .wrap — это
   контейнер из site-theme.css. */
.eq .fx { display: flex; }
.eq .col { display: flex; flex-direction: column; }
.eq .ac { align-items: center; }
.eq .jc { justify-content: center; }
.eq .gap12 { gap: 12px; }
.eq .gap16 { gap: 16px; }

@font-face{font-family:'Exposure';src:url('../../fonts/Exposure.otf') format('opentype');font-weight:400 900;font-display:swap}
.eq{--pg:#050705;--surf:#0f120e;--surf2:#0c0f0c;--bd:rgba(255,255,255,.07);--tx:rgba(255,255,255,.62);--txh:#fff;--txm:rgba(255,255,255,.5);--txf:rgba(255,255,255,.14);--cardsh:none;--navbg:rgba(18,20,18,.72);--navbd:rgba(255,255,255,.1);--navtx:rgba(255,255,255,.82);--logo:rgba(255,255,255,.72);--cta-bg:#fff;--cta-fg:#111;--cta-arw:var(--color-brand);--megabg:#17190f}
.eq.light{--pg:#ffffff;--surf:rgba(255,255,255,.5);--surf2:rgba(240,253,244,.55);--bd:rgba(3,46,21,.12);--tx:#4b5563;--txh:#07271a;--txm:#6b7280;--txf:rgba(3,46,21,.07);--cardsh:0 1px 2px rgba(3,46,21,.05),0 14px 34px rgba(3,46,21,.07);--navbg:rgba(255,255,255,.82);--navbd:rgba(3,46,21,.1);--navtx:#374151;--logo:#4b5563;--cta-bg:var(--color-brand);--cta-fg:#fff;--cta-arw:rgba(255,255,255,.24);--megabg:#ffffff}
.eq{background:var(--pg);color:var(--tx);font-family:'Golos Text',system-ui,sans-serif;overflow-x:clip;transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.eq *{box-sizing:border-box}
.eq a{text-decoration:none}
.eq-h{color:var(--txh);font-family:'Exposure','Golos Text',serif;font-weight:800;letter-spacing:-.025em;line-height:1.08;margin:0;font-size:40px}
.eq-sub{color:var(--txm);font-size:16px;line-height:1.55;margin:14px 0 0;max-width:560px}
.acc{color:var(--color-brand)}
/* GRADIENT VARIANT */
.eq.grad{background:radial-gradient(120% 70% at 50% -5%,rgba(var(--accent-rgb),.16) 0%,transparent 55%),radial-gradient(90% 60% at 100% 100%,rgba(var(--accent-rgb),.1) 0%,transparent 60%),var(--pg)}
.eq.grad.light{background:radial-gradient(120% 70% at 50% -5%,rgba(var(--accent-rgb),.12) 0%,transparent 55%),radial-gradient(90% 60% at 0% 100%,rgba(var(--accent-rgb),.08) 0%,transparent 60%),var(--pg)}
.eq.grad .dowork,.eq.grad .contact,.eq.grad .design-cta{background:linear-gradient(155deg,#12160f 0%,#0b0e0b 62%)}
.eq.grad .ai-panel{background:linear-gradient(155deg,rgba(var(--accent-rgb),.14) 0%,var(--surf2) 60%)}
.eq.grad .cta-dark,.eq.grad.light .phero-cta,.eq.grad.light .cta-hero,.eq.grad.light .eq-cta{background-image:linear-gradient(135deg,var(--color-brand-bright) 0%,var(--color-brand-deep) 100%)}
.eq.grad .cta-dark:hover,.eq.grad.light .phero-cta:hover,.eq.grad.light .cta-hero:hover,.eq.grad.light .eq-cta:hover{background-image:linear-gradient(135deg,var(--color-brand) 0%,var(--color-brand-deep) 100%)}
/* NAV */
.eq-nav{position:sticky;top:16px;z-index:40;margin:16px auto -82px;max-width:1240px;padding:0 20px;transition:top var(--dur-base) var(--ease),margin var(--dur-base) var(--ease)}
.eq-nav.scrolled{top:0;margin-top:0}
.eq-nav-inner{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 28px;background:var(--navbg);backdrop-filter:blur(14px);border:1px solid var(--navbd);border-radius:16px;position:relative;transition:height var(--dur-base) var(--ease),border-radius var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.eq-nav.scrolled .eq-nav-inner{height:54px;border-radius:0 0 16px 16px;box-shadow:0 10px 30px rgba(4,4,41,.16)}
.eq-navitem{display:flex;align-items:center;height:66px;transition:height var(--dur-base) var(--ease)}
.eq-nav.scrolled .eq-navitem{height:54px}
.eq-nav.scrolled .theme-tog{width:40px;height:40px}
.eq-nav.scrolled .eq-cta{height:40px}
.eq-nav.scrolled .eq-arw{width:28px;height:28px}
.eq-nav.scrolled .eq-logo{font-size:20px}
.eq-navitem .cv{transition:transform var(--dur-base) var(--ease)}
.eq-navitem:hover .cv{transform:rotate(180deg)}
.mega{position:absolute;top:60px;left:0;transform:translateY(8px);width:min(720px,80vw);background:var(--megabg);border:1px solid var(--navbd);border-radius:20px;padding:24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);box-shadow:0 24px 60px rgba(4,4,41,.22);z-index:50}
.mega.mega-r{left:auto;right:0}
.eq-navitem:hover .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.mega-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.mega-lead{grid-column:span 2;color:var(--txm);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 12px 10px}
.mega-item{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:12px;transition:background var(--dur-base) var(--ease)}
.mega-item:hover{background:rgba(var(--accent-rgb),.1);opacity:1}
.mega-ic{width:34px;height:34px;border-radius:9px;background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.3);color:var(--color-brand);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mega-t{display:block;color:var(--txh);font-size:14.5px;font-weight:600;line-height:1.2}
.mega-d{display:block;color:var(--txm);font-size:12.5px;line-height:1.35;margin-top:3px}
.eq-logo{font-size:22px;font-weight:800;letter-spacing:.12em;color:var(--txh);display:inline-flex;align-items:center}
/* Высота монограммы завязана на font-size, чтобы .eq-nav.scrolled её сжимал.
   Сдвиг вниз — оптический: у монограммы нет нижних выносных, и по
   геометрическому центру она смотрится приподнятой над соседними пунктами.
   Двигаем translateY, а не margin: margin растолкал бы флекс-строку шапки. */
.eq-logo svg{height:1em;width:auto;display:block;transform:translateY(2px)}
.eq-navlinks{display:flex;align-items:center;gap:30px}
.eq-navlink{display:inline-flex;align-items:center;gap:6px;color:var(--navtx);font-size:15px;font-weight:400}
.eq-navlink:hover{color:var(--color-brand)}
/* Активный раздел (см. eq_nav_section()) — только акцентный цвет. Насыщенность
   общая: жирный текст здесь скачет по ширине при переходе между страницами. */
.eq-navlink.is-on{color:var(--color-brand)}
.eq-navlink .cv{opacity:.75;flex-shrink:0;margin-top:1px}
.eq-navitem:hover .eq-navlink .cv{opacity:1;color:var(--color-brand)}
.mega::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.theme-tog{width:44px;height:44px;border-radius:11px;border:1px solid var(--navbd);background:transparent;color:var(--navtx);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:color var(--dur-base),border-color var(--dur-base)}
.theme-tog:hover{color:var(--color-brand);border-color:var(--color-brand)}
/* БУРГЕР — до 860px заменяет собой полосу ссылок (см. медиазапрос ниже). */
.eq-burger{display:none;width:44px;height:44px;border-radius:11px;border:1px solid var(--navbd);background:transparent;color:var(--navtx);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:color var(--dur-base),border-color var(--dur-base)}
.eq-burger:hover{color:var(--color-brand);border-color:var(--color-brand)}
.eq-burger .i-close{display:none}
.eq-nav.menu-open .eq-burger .i-bars{display:none}
.eq-nav.menu-open .eq-burger .i-close{display:block}
.eq-cta{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 6px 0 20px;background:var(--cta-bg);color:var(--cta-fg);border-radius:11px;font-size:14px;font-weight:600}
.eq-cta:hover{opacity:1}
.eq-arw{width:32px;height:32px;border-radius:8px;background:var(--cta-arw);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* SUBHERO — компактная шапка внутренних страниц (Услуги, Продукт) */
.subhero{padding:150px 0 8px;position:relative}
/* Крошки тему не переключали — лечится ремапом токенов ниже (.eq .crumbs). */
/* PARALLAX HERO (шапка) */
.phero{position:relative;padding-top:150px;height:min(215vh,1750px);overflow:hidden;perspective:1000px}
.phero-head{max-width:1280px;margin:0 auto;padding:40px 20px 56px;position:relative;z-index:5}
.phero-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--color-brand);font-size:13px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px}
.phero-eyebrow::before{content:"";width:26px;height:12px;border-radius:999px;background:var(--color-brand)}
.phero-hh{font-family:'Exposure','Golos Text',serif;font-size:68px;line-height:1.03;letter-spacing:-.03em;font-weight:800;color:var(--txh);margin:0;max-width:820px}
.phero-sub{font-size:18px;line-height:1.55;color:var(--tx);margin-top:26px;max-width:540px}
.phero-cta{display:inline-flex;align-items:center;gap:16px;height:60px;padding:0 8px 0 28px;background:var(--cta-bg);color:var(--cta-fg);border-radius:13px;font-size:16px;font-weight:400;margin-top:34px}
.phero-cta:hover{opacity:1}
.phero-cta .eq-arw{width:44px;height:44px;border-radius:10px}
.phero-actions{display:flex;align-items:center;gap:40px;flex-wrap:wrap;margin-top:34px}
.phero-actions .phero-cta{margin-top:0}
.phero-stats{display:flex;gap:36px;flex-wrap:wrap}
.phero-stat{display:flex;flex-direction:column;gap:4px}
.phero-stat-n{font-size:34px;font-weight:800;color:var(--color-brand);letter-spacing:-.02em;line-height:1}
.phero-stat-l{font-size:13px;color:var(--txm);max-width:150px;line-height:1.35}
.phero-3d{transform-style:preserve-3d;will-change:transform,opacity;padding-top:20px}
.prow{display:flex;flex-wrap:nowrap;gap:36px;margin-bottom:36px;will-change:transform}
.prow-rev{flex-direction:row-reverse}
.pcard{position:relative;height:380px;width:430px;flex-shrink:0;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(4,4,41,.2);display:block}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,7,5,.55));pointer-events:none}
.pcard-t{position:absolute;left:22px;bottom:18px;z-index:2;color:#fff;font-size:19px;font-weight:700;letter-spacing:-.01em}
.pcard-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;color:#fff;font-size:28px;font-weight:800;letter-spacing:.02em;text-align:center;padding:0 20px}
.pcard-k{position:absolute;left:22px;top:20px;z-index:2;color:rgba(255,255,255,.85);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.pcard-mark{position:absolute;right:18px;top:18px;z-index:2}
.pc-v{background:linear-gradient(150deg,rgba(var(--accent-rgb),.92) 0%,rgba(var(--accent-rgb),.32) 100%),#0c0f0c}
.pc-g{background:linear-gradient(150deg,#e6bd57 0%,#a76e2c 100%)}
.pc-d{background:linear-gradient(150deg,#232326 0%,#0c0f0c 100%);border:1px solid rgba(255,255,255,.09)}
/* HERO */
.hero{position:relative;overflow:hidden;min-height:780px}
.hero-waves,.hero-aurora{position:absolute;pointer-events:none;opacity:0;transition:opacity var(--dur-base) var(--ease)}
.hero-waves{top:-16%;right:-22%;width:1140px;height:1140px;background:repeating-radial-gradient(circle,transparent 0 30px,rgba(var(--accent-rgb),.02) 30px 33px,rgba(var(--accent-rgb),.5) 33px 37px,rgba(var(--accent-rgb),.12) 37px 60px);-webkit-mask:radial-gradient(circle at 62% 50%,#000 20%,transparent 66%);mask:radial-gradient(circle at 62% 50%,#000 20%,transparent 66%);filter:saturate(1.2)}
.hero-aurora{inset:0;background:radial-gradient(60% 55% at 78% 34%,rgba(var(--accent-rgb),.5) 0%,transparent 60%),radial-gradient(48% 44% at 92% 76%,rgba(var(--accent-rgb),.32) 0%,transparent 62%);filter:blur(30px)}
.hero-glow{position:absolute;top:6%;right:0;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.26) 0%,transparent 62%);pointer-events:none;transition:opacity var(--dur-base) var(--ease)}
.hero.mood-waves .hero-waves{opacity:1}
.hero.mood-aurora .hero-aurora{opacity:1}
.hero.mood-aurora .hero-glow{opacity:0}
.hero.mood-minimal .hero-glow{opacity:.45}
.eq.light .hero-waves{opacity:0}
.eq.light .hero.mood-waves .hero-waves{opacity:.7}
.hero-inner{position:relative;padding:210px 0 0;max-width:660px}
.hero-hh{font-family:'Exposure','Golos Text',serif;font-size:72px;line-height:1.02;letter-spacing:-.03em;font-weight:800;color:var(--txh);margin:0}
.hero-sub{font-size:18px;line-height:1.55;color:var(--tx);margin-top:28px;max-width:520px}
.cta-hero{display:inline-flex;align-items:center;gap:16px;height:60px;padding:0 8px 0 28px;background:var(--cta-bg);color:var(--cta-fg);border-radius:13px;font-size:16px;font-weight:600;margin-top:36px}
.cta-hero:hover{opacity:1}
.cta-hero .eq-arw{width:44px;height:44px;border-radius:10px}
.clients{position:relative;margin-top:80px;padding:30px 0 56px;border-top:1px solid var(--bd)}
.clients-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px 40px}
.client-logo{font-size:22px;font-weight:800;letter-spacing:.02em;color:var(--logo);white-space:nowrap}
/* CASES */
.case{display:flex;flex-direction:column;gap:16px}
.case-shot{position:relative;height:230px;border-radius:20px;overflow:hidden;background:var(--surf2);border:1px solid var(--bd)}
.case-badge{align-self:flex-start;display:inline-flex;padding:7px 15px;border-radius:999px;background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.3);color:var(--color-brand);font-size:13px;font-weight:600}
.case-title{color:var(--txh);font-size:21px;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:-2px 0 0}
.case-meta{font-size:14px;color:var(--txm);margin-top:auto}
.case-chips{display:flex;gap:8px;flex-wrap:wrap}
.case-chip{display:inline-flex;flex-direction:column;gap:2px;background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.3);border-radius:10px;padding:8px 14px}
.case-chip b{color:var(--color-brand);font-size:17px;font-weight:700}
.case-chip span{color:var(--txm);font-size:11px}
.ghost-btn{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 22px;background:transparent;color:var(--txh);border:1px solid var(--bd);border-radius:11px;font-size:14px;font-weight:600}
.ghost-btn:hover{border-color:var(--color-brand);opacity:1}
.ghost-btn .eq-arw{background:var(--color-brand);color:#fff}
/* STATEMENT — scroll stack */
.stack-sec{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start}
.stack-media{position:sticky;top:104px;height:min(620px,80vh)}
.stack-img{position:absolute;border-radius:24px;overflow:hidden;border:1px solid var(--bd);box-shadow:0 24px 60px rgba(4,4,41,.18)}
.stack-img.a{top:0;left:0;width:72%;height:70%;z-index:1}
.stack-img.b{bottom:0;right:0;width:60%;height:56%;z-index:2}
.stack-img .cap{position:absolute;left:16px;bottom:14px;z-index:2;display:inline-flex;padding:7px 14px;border-radius:999px;background:rgba(5,7,5,.55);backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:600}
.stack-col{display:flex;flex-direction:column;gap:34vh;padding-bottom:0}
.stack-block{background:var(--pg);padding:8px 0}
.stack-block .k{display:block;color:var(--color-brand);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.stack-block p{margin:0;color:var(--txh);font-size:30px;line-height:1.34;font-weight:700;letter-spacing:-.015em}
.eq-stat{padding:8px 4px}
.eq-stat-n{font-size:46px;font-weight:800;color:var(--color-brand);letter-spacing:-.02em;line-height:1}
.eq-stat-l{font-size:14px;color:var(--txm);margin-top:8px}
/* AI PANEL + SERVICE CHIPS */
.ai-panel{background:var(--surf2);border-radius:24px;padding:34px 36px}
.ai-title{display:flex;align-items:center;gap:12px;color:var(--txh);font-size:22px;font-weight:700}
.ai-bul{display:flex;align-items:flex-start;gap:12px;color:var(--tx);font-size:15px;line-height:1.4}
.ai-check{width:22px;height:22px;border-radius:6px;background:rgba(var(--accent-rgb),.15);border:1px solid rgba(var(--accent-rgb),.34);color:var(--color-brand);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px}
.chip-svc{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surf);border:1px solid var(--bd);border-radius:12px;padding:16px 18px;color:var(--txh);font-weight:600;font-size:15px;box-shadow:var(--cardsh);transition:border-color var(--dur-base),background var(--dur-base)}
.chip-svc:hover{border-color:rgba(var(--accent-rgb),.5)}
.chip-svc .ic{color:var(--color-brand);flex-shrink:0}
/* MARQUEE */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);padding:26px 0}
.marquee-track{display:inline-flex;gap:44px;animation:marq 26s linear infinite;will-change:transform}
.marquee-track span{font-size:38px;font-weight:800;letter-spacing:-.02em;color:var(--txf)}
.marquee-track span.acc{color:var(--color-brand);opacity:.85}
@keyframes marq{to{transform:translateX(-50%)}}
.logo-marq{overflow:hidden;padding:32px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* width:max-content обязателен: у inline-flex ширина схлопывается до контейнера
   (1280 вместо 3324), и translateX(-50%) уезжал на пол-экрана вместо периода —
   лента дёргалась на стыке. Отступ живёт в margin-right у картинки, а не в gap
   у трека: при gap между копиями на один промежуток меньше, чем внутри копии,
   и -50% промахивается мимо периода на половину отступа. */
.logo-marq-track{display:inline-flex;align-items:center;width:max-content;animation:marq 34s linear infinite;white-space:nowrap;will-change:transform}
.logo-marq-track:hover{animation-play-state:paused}
.logo-marq-img{height:30px;width:auto;flex-shrink:0;margin-right:70px;opacity:.55;filter:brightness(0) invert(1);transition:opacity var(--dur-base) var(--ease)}
.eq.light .logo-marq-img{filter:brightness(0);opacity:.42}
.logo-marq-img:hover{opacity:1}
/* DESIGN CALLOUT — всегда тёмный, для контраста */
.design-cta{background:#0c0f0c;border:1px solid rgba(255,255,255,.07);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1fr 1.1fr}
.design-cta-l{padding:48px 44px;display:flex;align-items:flex-end}
.design-cta-h{font-size:40px;font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--color-brand);margin:0}
.design-cta-r{padding:48px 44px;border-left:1px solid rgba(255,255,255,.07)}
.design-cta .eq-sub{color:rgba(255,255,255,.6)}
.design-cta .ai-bul{color:rgba(255,255,255,.72)}
/* REASONS — sticky card stack */
.why{display:block}
.why-head{position:sticky;top:120px}
.why-stack{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.reason{position:relative;overflow:hidden;background:linear-gradient(155deg,rgba(var(--accent-rgb),.22) 0%,rgba(var(--accent-rgb),.09) 62%);border-radius:20px;padding:44px 44px 46px;transition:transform .12s linear,opacity .12s linear}
.reason-bgic{position:absolute;right:20px;top:14px;color:rgba(var(--accent-rgb),.16);z-index:1;pointer-events:none}
.reason-ic{width:48px;height:48px;border-radius:50%;background:var(--color-brand);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px;position:relative;z-index:1}
.reason-t{color:var(--txh);font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.2;position:relative;z-index:1}
.reason-d{color:var(--txm);font-size:15px;line-height:1.6;margin-top:16px;position:relative;z-index:1}
.reason-price{position:relative;z-index:1;margin-top:16px;color:var(--color-brand);font-size:17px;font-weight:700;letter-spacing:-.01em}
.reason-buls{display:flex;flex-direction:column;gap:12px;margin-top:20px;position:relative;z-index:1}
/* DIFFERENTIATORS */
.diff{padding-top:22px;border-top:2px solid var(--color-brand)}
.diff-t{color:var(--txh);font-size:18px;font-weight:700;margin-bottom:10px}
.diff-d{color:var(--txm);font-size:14px;line-height:1.55}
/* PROCESS */
.pstep{position:relative;background:linear-gradient(155deg,rgba(var(--accent-rgb),.22) 0%,rgba(var(--accent-rgb),.09) 62%);border-radius:20px;padding:26px 26px 28px;overflow:hidden}
.pstep::after{content:"";position:absolute;right:-46px;bottom:-66px;width:200px;height:200px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 13px,rgba(var(--accent-rgb),.3) 13px 15px);-webkit-mask:radial-gradient(circle at 32% 32%,#000,transparent 72%);mask:radial-gradient(circle at 32% 32%,#000,transparent 72%);pointer-events:none}
.pstep-n{position:absolute;right:18px;top:-10px;font-size:92px;font-weight:800;color:rgba(var(--accent-rgb),.16);line-height:1;z-index:1}
.pstep-ic{width:46px;height:46px;border-radius:50%;background:var(--color-brand);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}
.pstep-head{display:flex;align-items:center;gap:14px;margin-bottom:12px;position:relative;z-index:1}
.pstep-t{color:var(--txh);font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.pstep-d{color:var(--txm);font-size:13.5px;line-height:1.5;margin-top:8px;position:relative;z-index:1}
/* DO WORK — чёрный блок */
.dowork{background:#0c0f0c;border:1px solid rgba(255,255,255,.07);border-radius:28px;padding:52px 48px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.dowork-x{font-size:66px;font-weight:800;color:var(--color-brand);letter-spacing:-.03em;line-height:1}
.dowork-lead{color:#fff;font-size:22px;font-weight:700;line-height:1.32;margin-top:16px;letter-spacing:-.01em}
.dowork-link{display:inline-flex;align-items:center;gap:10px;margin-top:26px;color:var(--color-brand);font-size:15px;font-weight:600}
.dowork-link:hover{opacity:1;gap:14px}
.dowork-r .k{display:block;color:var(--color-brand);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.dowork-r p{margin:0;color:#fff;font-size:27px;line-height:1.34;font-weight:700;letter-spacing:-.015em}
.dowork-r .sub{color:rgba(255,255,255,.55);font-size:15px;font-weight:400;line-height:1.55;margin-top:16px;letter-spacing:0}
/* FAQ */
.fq{border-top:1px solid var(--bd)}
.fq:last-child{border-bottom:1px solid var(--bd)}
.fq summary{padding:22px 4px;color:var(--txh);font-size:17px;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none}
.fq summary::-webkit-details-marker{display:none}
.fq .chev{color:var(--color-brand);font-size:18px;transition:transform var(--dur-base) var(--ease);flex-shrink:0}
.fq[open] .chev{transform:rotate(180deg)}
.fq .a{padding:0 4px 22px;color:var(--txm);font-size:15px;line-height:1.6;max-width:780px}
/* CONTACT — всегда тёмный */
.contact{background:#0c0f0c;border:1px solid rgba(255,255,255,.07);border-radius:40px;overflow:hidden}
.contact-grid{display:grid;grid-template-columns:1fr 1fr}
.contact-left{padding:52px 48px}
.contact-left .eq-h{color:#fff}
.contact-left .eq-sub{color:rgba(255,255,255,.6)}
.contact-right{padding:52px 48px;background:rgba(255,255,255,.02);border-left:1px solid rgba(255,255,255,.07)}
.contact .field-label{color:rgba(255,255,255,.6)}
.contact .field{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}
.contact .field:focus{border-color:var(--color-brand)}
.contact-row{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid rgba(255,255,255,.08)}
.contact-row:first-of-type{border-top:none}
.contact-ic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:var(--color-brand);flex-shrink:0}
.contact-k{font-size:13px;color:rgba(255,255,255,.5)}
.contact-v{font-size:15px;font-weight:600;color:#fff}
.mini-note{font-size:12px;color:rgba(255,255,255,.42);line-height:1.5;margin-top:16px}
.cta-dark{display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 8px 0 24px;background:var(--color-brand);color:#fff;border-radius:12px;font-size:15px;font-weight:600}
.cta-dark:hover{opacity:1}
.cta-dark .a2{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
/* FOOTER — всегда тёмный */
.eq-foot{padding:92px 0 48px;margin-top:-44px;font-size:14px;color:rgba(255,255,255,.5);background:#050705;border-top:1px solid rgba(255,255,255,.08)}
.eq-foot .eq-logo{color:#fff}
.eq-foot a{color:rgba(255,255,255,.5)}.eq-foot a:hover{color:#fff}
.case,.chip-svc,.ai-panel{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.eq-foot{position:relative;overflow:hidden}
.foot-mark{position:absolute;right:-1%;top:0;bottom:0;display:flex;align-items:center;font-size:min(46vh,360px);font-weight:800;letter-spacing:-.05em;line-height:.8;color:rgba(255,255,255,.05);white-space:nowrap;user-select:none;pointer-events:none;z-index:0}
@media(max-width:980px){.hero-hh{font-size:48px}.eq-h{font-size:32px}.stmt{font-size:24px}.design-cta,.contact-grid{grid-template-columns:1fr}.dowork{grid-template-columns:1fr;gap:28px;padding:36px 26px}.design-cta-r,.contact-right{border-left:none;border-top:1px solid rgba(255,255,255,.07)}.stack-sec{grid-template-columns:1fr;gap:20px}.stack-media{position:relative;height:300px}.stack-img.a{position:relative;width:100%;height:100%}.stack-img.b{display:none}.stack-block{position:static!important;top:auto!important}.stack-col{padding-bottom:0;gap:16px}.why{grid-template-columns:1fr;gap:22px}.why-head{position:static}.why-stack{padding-bottom:0;gap:16px}.reason{position:static!important;top:auto!important}}
/* Узкие экраны: ссылки уезжают в панель под шапкой, её открывает бургер.
   Мегаменю живёт на :hover — на тач-экранах его нет, поэтому в панели только
   разделы верхнего уровня; услуги и продукты открываются со своих хабов.
   ponytail: подпункты в панель не выносим — это ещё 11 строк списка. */
@media(max-width:860px){
	.eq-burger{display:flex}
	.eq-nav-inner{padding:0 10px 0 18px}
	/* Бургер добавил в ряд ещё 44px: без запрета переносов логотип и CTA
	   ломаются на две строки и раздувают шапку. */
	.eq-logo,.eq-cta{white-space:nowrap}
	.eq-logo{flex-shrink:0}
	.eq-navlinks{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:10px;background:var(--megabg);border:1px solid var(--navbd);border-radius:16px;box-shadow:0 24px 60px rgba(4,4,41,.22);z-index:50}
	.eq-nav.menu-open .eq-navlinks{display:flex}
	.eq-navitem{display:block;height:auto}
	.eq-navitem .cv{display:none}
	.mega{display:none}
	.eq-navlink{padding:12px 14px;border-radius:10px;font-size:16px}
	.eq-navlink:hover,.eq-navlink.is-on{background:rgba(var(--accent-rgb),.1)}
}
@media(max-width:620px){.hero-inner{padding-top:150px}.hero-hh{font-size:38px}.hero-sub{font-size:16px}.eq-h{font-size:26px}.eq-logo{letter-spacing:.22em}.contact-left,.contact-right,.design-cta-l,.design-cta-r,.ai-panel{padding:32px 24px}.clients-row{gap:16px 24px}.client-logo{font-size:16px}.eq-cta{font-size:13px;padding:0 6px 0 16px}.case-shot{height:200px}.foot-mark{font-size:clamp(64px,20vw,120px)}
/* Логотип + тема + CTA + бургер в 390px не влезали: бургер вылезал за карточку.
   Ужимаем отступы и кнопки — CTA остаётся с текстом. */
.eq-nav-inner{padding:0 8px 0 14px}.eq-nav-inner .gap12{gap:8px}.theme-tog,.eq-burger{width:40px;height:40px}}
.blog-hero{padding-top:140px}
.blog-hero-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.blog-feat{position:relative;border-radius:24px;overflow:hidden;height:340px;background:var(--surf2);border:1px solid var(--bd)}
.blog-feat-cap{position:absolute;left:26px;right:26px;bottom:24px;z-index:2}
.blog-feat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,7,5,.6));z-index:1}
.blog-feat-cap{position:absolute;z-index:2}
.blog-feat-t{color:#fff;font-size:24px;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin-top:8px}
.bchips{display:flex;gap:10px;flex-wrap:wrap}
.bchip{padding:8px 18px;border-radius:999px;border:1px solid var(--bd);color:var(--tx);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--dur-base) var(--ease)}
.bchip:hover{border-color:var(--color-brand);color:var(--color-brand)}
.bchip.on{background:#111;color:#fff;border-color:#111}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.bpost{display:flex;flex-direction:column;gap:12px}
.bpost-media{height:200px;border-radius:18px;overflow:hidden;background:var(--surf2);border:1px solid var(--bd)}
.bpost-cat{align-self:flex-start;font-size:12px;font-weight:700;color:var(--color-brand);letter-spacing:.04em;text-transform:uppercase}
.bpost-t{color:var(--txh);font-size:18px;font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:0}
.bpost-meta{color:var(--txm);font-size:13px}
@media(max-width:860px){.blog-hero-grid{grid-template-columns:1fr;gap:28px}.bgrid{grid-template-columns:1fr}}
.eq-mark{font-family:'Golos Text',sans-serif;font-weight:800;letter-spacing:0}
.started{position:relative;z-index:1;background:var(--pg);border-radius:0 0 44px 44px}
.started-head{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:44px;text-align:center}
.started-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--txm);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.started-eyebrow .dot{width:26px;height:12px;border-radius:999px;background:var(--color-brand)}
.scard{position:relative;overflow:hidden;background:linear-gradient(155deg,rgba(var(--accent-rgb),.22) 0%,rgba(var(--accent-rgb),.09) 62%);border-radius:20px;padding:44px 40px 46px;display:flex;flex-direction:column}
.scard-ic{width:48px;height:48px;border-radius:50%;background:var(--color-brand);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px}.scard-ic svg{width:22px;height:22px}
.scard-t{color:var(--txh);font-size:22px;font-weight:700;letter-spacing:-.015em;margin:0}
.scard-d{color:var(--txm);font-size:15px;line-height:1.55;margin:12px 0 26px;flex:1}
.btn-dark2{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;background:#111;color:#fff;border-radius:999px;padding:0 24px;height:48px;font-weight:600;font-size:14px}
.btn-dark2:hover{opacity:1;background:#000;gap:13px}
.eq.light .btn-dark2{background:#111}.eq.light .btn-dark2:hover{background:#000}
.foot-top{padding-bottom:36px;position:relative;z-index:1}
.foot-sub-t{color:#fff;font-size:19px;font-weight:700;letter-spacing:-.01em}
.foot-sub-d{color:rgba(255,255,255,.5);font-size:14px;line-height:1.5;margin:10px 0 18px;max-width:300px}
.foot-news{display:flex;gap:8px;max-width:360px}
.foot-news input{flex:1;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;padding:0 16px;font-size:14px;font-family:inherit}
.foot-news input::placeholder{color:rgba(255,255,255,.4)}
.foot-news button{width:48px;height:48px;border-radius:12px;border:none;background:var(--color-brand);color:#fff;font-size:19px;cursor:pointer;flex-shrink:0}
.foot-news button:hover{background:var(--color-brand-hover)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot-h{color:rgba(255,255,255,.5);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.foot-col{display:flex;flex-direction:column;gap:11px}
.foot-col a{color:rgba(255,255,255,.72);font-size:14px}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);position:relative;z-index:1}
.foot-soc{display:flex;gap:10px}
.foot-soc a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7)}
.foot-soc a:hover{color:#fff;background:rgba(255,255,255,.12)}
/* Колонки футера: правило сидело на .foot-top, а сетка — на .foot-cols, поэтому
   не работало и три колонки жались на любой ширине. Ниже 860px — две, ниже
   620px остаются две (в одну столбец из 11 ссылок вытягивается на пол-экрана),
   но плотнее. */
@media(max-width:860px){.eq-foot{padding:64px 0 36px}.foot-top{padding-bottom:26px}.foot-cols{grid-template-columns:repeat(2,1fr);gap:26px 18px}}
@media(max-width:620px){.eq-foot{padding:48px 0 28px}.foot-top{padding-bottom:20px}.foot-cols{gap:20px 14px;font-size:13px}.foot-col{gap:8px}.foot-h{margin-bottom:10px}.foot-bottom{padding-top:18px}.foot-soc a{width:36px;height:36px}}
a{color:var(--color-brand)}a:hover{opacity:.72}

/* ==========================================================================
   Адаптация под WordPress — то, что в макете делал рантайм дизайнера.
   ========================================================================== */

/* Шапка отбита от верха страницы на 16px, но её margin-top схлопывался наружу
   обёртки: .eq съезжала на 16px вниз, и сверху проступала серая полоса — фон
   <body> из tokens/base.css. flow-root изолирует поток, отступ остаётся внутри,
   и фон обёртки закрывает страницу целиком. (overflow-x:clip у .eq для этого не
   годится: clip, в отличие от hidden, BFC не создаёт.) */
.eq { display: flow-root; }

/* Иконку темы в макете выбирал <sc-if>; здесь в разметке обе, нужную
   показывает CSS: солнце — в тёмной теме, месяц — в светлой. */
.eq .theme-tog .i-moon { display: none; }
.eq.light .theme-tog .i-sun { display: none; }
.eq.light .theme-tog .i-moon { display: block; }

/* Карточки записей — ссылки целиком (в макете это были неактивные блоки). */
a.blog-feat { display: block; }

/* Затемнение снизу .blog-feat нужно подписи поверх картинки (рубрика и
   заголовок в блоге). На обложке статьи подписи нет — там оно просто пачкает
   низ картинки серой полосой. Привязываем к наличию подписи, а не к странице. */
.eq .blog-feat:not(:has(.blog-feat-cap))::after { display: none; }

/* Вместо <image-slot> — миниатюры WordPress. */
.eq .blog-feat img,
.eq .bpost-media img,
.eq .case-shot img { width: 100%; height: 100%; object-fit: cover; }

/* Запись без миниатюры: тот же мягкий градиент, что у карточек .reason/.pstep,
   вместо пустой плашки. Селектор из двух классов — иначе фон .bpost-media,
   объявленный ниже по файлу, перебьёт заливку. */
.eq .blog-feat.eq-noimg,
.eq .bpost-media.eq-noimg,
.eq .case-shot.eq-noimg {
	background: linear-gradient(155deg, rgba(var(--accent-rgb), .22) 0%, rgba(var(--accent-rgb), .09) 62%);
}

/* Пагинация «Показать ещё» — стрелка вниз в кружке CTA. */
.eq .ghost-btn .eq-arw svg { display: block; }

/* Правка бага макета: на мобильных карточки «Почему стоит работать с нами»
   остаются в две колонки по ~167px и текст рвётся по одному слову. В макете
   медиазапрос схлопывает .why, но сетка живёт в .why-stack — правило не
   срабатывает. Схлопываем то, что нужно. */
@media (max-width: 860px) {
	.eq .why-stack { grid-template-columns: 1fr; }
}

/* Заголовки карточек услуг стали ссылками на записи (в макете это был
   неактивный текст). Цвет берём у заголовка, иначе общее правило
   a{color:var(--color-brand)} красит их в акцентный зелёный.
   Затухание по a:hover оставляем: в макете карточка была мёртвым блоком
   и hover ей был не нужен, а ссылке нужен видимый отклик. */
.eq .reason-t a,
.eq .case-title a { color: inherit; }

/* Миниатюра кейса — ссылка: .case-shot из набора рассчитан на блок, ссылке
   нужен display:block, иначе строчный <a> не растянется на всю плашку. */
.eq .case-shot { display: block; }

/* Лента снимков проекта — справа от заголовка кейса, на месте обложки, поэтому
   высота у неё та же, что у .blog-feat (340px).
   Едет одной CSS-анимацией, без JS: дорожка сдвигается ровно на первую копию
   снимков, и на стыке начинается та же картинка — шва не видно. Сдвиг с
   поправкой на половину зазора: -50% приходится на середину зазора между
   копиями, и без неё лента дёргалась бы на 8px каждый круг.
   Снимки чуть повёрнуты через один — приём из макета ленты, который прислал
   владелец: ровный ряд читается таблицей, наклонённый — стопкой фотографий.
   Края растворяются маской, иначе снимки обрубались бы по границе блока. */
.eq .case-reel { position: relative; height: 340px; display: flex; align-items: center; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.eq .case-reel-t { display: flex; gap: 16px; width: max-content; animation: eq-case-reel 32s linear infinite; }
/* Наведение останавливает ленту: иначе снимок не рассмотреть — он уезжает. */
.eq .case-reel:hover .case-reel-t { animation-play-state: paused; }
.eq .case-reel-i { flex: 0 0 auto; width: 186px; height: 248px; border-radius: 18px; overflow: hidden; background: var(--surf2); border: 1px solid var(--bd); box-shadow: var(--cardsh); }
.eq .case-reel-i:nth-child(odd) { transform: rotate(-2deg); }
.eq .case-reel-i:nth-child(even) { transform: rotate(4deg); }
.eq .case-reel-i img { width: 100%; height: 100%; object-fit: cover; }
@keyframes eq-case-reel { to { transform: translateX(calc(-50% - 8px)); } }
/* Отключившим анимацию лента просто стоит: снимки видны, движения нет. */
@media (prefers-reduced-motion: reduce) {
	.eq .case-reel-t { animation: none; }
}

/* Текст записи из редактора. В макетах прозы нет ни на одной странице, а
   tokens/base.css глобально снимает отступы у <p> и заголовков — без своего
   стиля многоабзацный текст слипается в монолит. Минимум, чтобы читалось:
   ритм абзацев, воздух вокруг подзаголовков, маркеры у списков. */
.eq .eq-prose { color: var(--tx); font-size: 16px; line-height: 1.65; }
.eq .eq-prose > * { margin: 0; }
.eq .eq-prose > * + * { margin-top: 16px; }
/* scroll-margin-top — чтобы заголовок, к которому увёл якорь оглавления, не
   оказался под липкой шапкой (в прокрученном виде она занимает 54px сверху). */
.eq .eq-prose h2,
.eq .eq-prose h3 { color: var(--txh); line-height: 1.25; scroll-margin-top: 90px; }
.eq .eq-prose h2 { font-size: 24px; margin-top: 34px; }
.eq .eq-prose h3 { font-size: 19px; margin-top: 28px; }
/* Отступ сверху у первого элемента съедает выравнивание: в блоге он отрывает
   текст от обложки, на кейсе — уводит первый заголовок вниз от подписи слева. */
.eq .eq-prose > :first-child { margin-top: 0; }
.eq .eq-prose ul,
.eq .eq-prose ol { padding-left: 22px; }
.eq .eq-prose li { list-style: revert; }
.eq .eq-prose li + li { margin-top: 8px; }
/* Вложенный список — не абзац, но и не строка того же пункта: воздуха ему
   ровно столько же, сколько между пунктами. */
.eq .eq-prose li > ul,
.eq .eq-prose li > ol { margin-top: 8px; }
.eq .eq-prose img { max-width: 100%; height: auto; border-radius: 14px; }

/* Крошки из site-theme.css написаны на общих токенах: они статичны и в тёмной
   теме .current выпадает тёмно-серым на тёмном фоне. Переопределяем не правила
   компонента, а три токена, которые он читает, — тогда он сам едет за темой. */
.eq .crumbs {
	--text-muted: var(--txm);
	--border-strong: var(--txm);
	--text-body: var(--txh);
}

/* Статья: текст + правая колонка. Аналога в наборе нет — левая колонка по
   ширине прозы (720px), правая под оглавление и баннер, отступ 48px как у
   .blog-hero-grid. */
.eq .post-body { display: grid; grid-template-columns: minmax(0, 720px) 300px; gap: 48px; align-items: start; }
.eq .post-toc { position: sticky; top: 104px; } /* как у .stack-media */
.eq .post-toc-h { color: var(--txh); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; padding: 0 12px; }
.eq .post-toc-l { display: flex; flex-direction: column; gap: 2px; }
/* opacity:1 — глушим общее a:hover{opacity:.72}: ссылке и так меняется фон. */
.eq .post-toc-i { color: var(--txm); font-size: 14px; line-height: 1.4; padding: 9px 12px; border-radius: 10px; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.eq .post-toc-i:hover { background: rgba(var(--accent-rgb), .1); color: var(--color-brand); opacity: 1; }
.eq .post-toc-i.sub { padding-left: 26px; }

/* Карточка оглавления. Плашка — токен --txf: он и есть «едва заметная заливка
   поверх фона страницы», и в тёмной теме уезжает сам. Рамку не ставим: у
   карточки её нет и в макетах набора (.reason, .mega), заливки хватает. */
.eq .toc-card { background: var(--txf); border-radius: 20px; padding: 18px 8px; }

/* Баннер с заявкой под оглавлением. Градиент и радиус — те же, что у
   .cta-dark/.phero-cta в градиентной теме: баннер и есть большая кнопка, и
   выглядеть он должен из того же набора. Текст всегда белый: под ним
   акцентная заливка в обеих темах, --txh тут перевернулся бы наизнанку. */
.eq .rail-cta { margin-top: 20px; border-radius: 20px; padding: 26px 24px; background-image: linear-gradient(135deg, var(--color-brand-bright) 0%, var(--color-brand-deep) 100%); }
.eq .rail-cta-t { color: #fff; font-family: 'Exposure', 'Golos Text', serif; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.eq .rail-cta-d { color: rgba(255, 255, 255, .82); font-size: 14px; line-height: 1.5; margin: 12px 0 0; }
.eq .rail-cta-b { display: inline-flex; align-items: center; height: 42px; margin-top: 20px; padding: 0 22px; border-radius: 999px; background: #fff; color: var(--color-brand-deep); font-size: 14px; font-weight: 600; }
.eq .rail-cta-b:hover { opacity: .88; }

/* Кейс: подпись раздела слева, текст справа (раскладка eq.team). .stack-sec из
   набора не подошёл: его .95fr/1.05fr — это две равные колонки под крупные
   врезки, а здесь узкая подпись против широкого текста.
   Липкая подпись — не дубль оглавления справа, а указатель «где я сейчас»: пока
   раздел едет, его имя стоит под шапкой.
   Колонок на странице три, и в 1200px честно они не помещаются: 300px правой
   колонки и 48px до неё отдаём из общей ширины, остаток делят подпись и текст.
   Подпись ужимаем до 200px (в неё ложатся «Результаты» и «Подробности»,
   больше там ничего и нет), прозе достаётся ~610px против 720px у статьи —
   на строку меньше слов, но читаемость не страдает. */
.eq .case-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.eq .case-sec { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; }
.eq .case-sec + .case-sec { margin-top: 44px; }
.eq .case-sec-l { position: sticky; top: 104px; }
/* Подпись — та же типографика, что у .stack-block .k в наборе (заголовок
   раздела здесь — подпись, а не второй h2 в потоке текста). */
.eq .case-lbl { color: var(--color-brand); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; scroll-margin-top: 90px; }

@media (max-width: 860px) {
	/* Липкой колонке сбоку тут негде стоять. Скрывать жалко — на длинной
	   статье это единственная навигация, поэтому уносим её наверх обычным
	   списком, до текста. Баннер едет вместе с ней: разлучать их, чтобы увести
	   его вниз, — это второй блок разметки ради узкого экрана. */
	.eq .post-body,
	.eq .case-body { grid-template-columns: 1fr; gap: 28px; }
	.eq .post-toc { position: static; order: -1; }
	/* Кейс: колонки схлопываются, подпись встаёт над своим текстом. Липкой ей
	   тут быть незачем — она и так рядом. */
	.eq .case-sec { grid-template-columns: 1fr; gap: 16px; }
	.eq .case-sec-l { position: static; }
	.eq .case-sec + .case-sec { margin-top: 34px; }
}

/* Фоновое видео на 404 — во всю ширину окна, за содержимым.
   position:fixed, а не absolute: у .eq стоит overflow-x:clip, и absolute внутри
   него всё равно упёрся бы в ширину обёртки. fixed считает от вьюпорта — видео
   ложится ровно во всё окно и не едет при прокрутке.
   z-index:0 + .eq-nav со своим z-index:40 и секцией z-index:1 — видео остаётся
   позади всего, но выше фонового градиента страницы.
   object-fit:cover — кадр 16:9, окно любое: заполняем без полей и без растяжки.
   Завеса лёгкая — только чтобы шапка на кадре читалась. Цвет --pg, едет за темой.
   Карточка без заливки и рамки — текст лежит прямо на кадре. Раз так, цвета
   темы ему не годятся: тёмно-зелёный --txh в светлой теме на тёмном видео
   нечитаем. Пишем белым в обеих темах — кадр тёмный при любой, а завеса под
   текстом добирает контраст до нормы. */
.eq .err-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.eq .err-bg-v { width: 100%; height: 100%; object-fit: cover; }
/* Затемнение снизу — под текстом, а не по всему кадру: сверху видео остаётся
   как есть, внизу набирает плотность, и белый текст читается на любом кадре. */
.eq .err-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%); }
.eq .reason.err { background: none; border-color: rgba(255, 255, 255, .16); }
.eq .reason.err .eq-h { color: #fff; }
.eq .reason.err .eq-sub { color: rgba(255, 255, 255, .84); }
/* Цифра 404 фоном — на тёмном кадре акцентный зелёный по --accent-rgb тонет.
   Тот же приём, но белым и чуть плотнее. */
.eq .reason.err .err-n { color: rgba(255, 255, 255, .14); }
/* Кнопки-выходы: у .ghost-btn рамка и текст из токенов светлой темы. */
.eq .reason.err .ghost-btn { color: #fff; border-color: rgba(255, 255, 255, .3); }
.eq .reason.err .ghost-btn:hover { border-color: #fff; }
/* Содержимое — над видео. Без своего слоя оно оказалось бы под ним. */
.eq .err-bg ~ .sec { position: relative; z-index: 1; }
/* Отключившим анимацию видео не крутим — остаётся постер первым кадром. */
@media (prefers-reduced-motion: reduce) {
	.eq .err-bg-v { display: none; }
	.eq .err-bg { background: var(--pg); }
}

/* Код ошибки на 404. Приём — как у .pstep-n: цифра фоном за содержимым
   карточки .reason. Отличий два: размер тянется за вьюпортом (там цифра —
   мелкий порядковый номер, здесь она несёт всю страницу) и z-index:0 вместо 1,
   потому что содержимое лежит в .err-b и перекрывает её целиком.
   За края .reason цифра не вылезает — её режет его overflow:hidden. */
/* На ≤980px .reason сбрасывается в position:static!important — это reset
   липкой колонки «Почему мы», где карточки едут в .why-stack. Отдельно
   стоящей карточке 404 он не адресован, а без position цифра теряет
   контейнер, уезжает под шапку и перестаёт резаться overflow:hidden.
   Возвращаем позиционирование тем же !important. */
.eq .reason.err { position: relative !important; }
.eq .err-n { position: absolute; right: 24px; top: -14px; z-index: 0; font-size: clamp(104px, 17vw, 200px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: rgba(var(--accent-rgb), .16); pointer-events: none; }
.eq .err-b { position: relative; z-index: 1; }
/* Ряд ссылок-выходов: аналога в наборе нет — в макетах рядом стоят максимум
   две кнопки, здесь их четыре и на узком экране они обязаны переноситься. */
.eq .err-links { flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Поле поиска. Компонент .search из site-theme.css нарисован под светлый макет
   с белой заливкой намертво — в тёмной теме он белым пятном. Токенами это не
   лечится (там литеральный #fff), поэтому правим сами правила. */
.eq .search input { background: var(--surf); border-color: var(--bd); color: var(--txh); }
.eq .search input::placeholder { color: var(--txm); }
.eq .search .icon { color: var(--txm); display: flex; }