@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap");
@import url("theme.css"); /* тёмная тема: токены и правки компонентов */
/* ============================================================
   САЙТ АГЕНТСТВА · единый CSS
   1) Токены — из дизайн-системы «Агентство» (tokens.json v1)
   2) Компоненты — bundle.css дизайн-системы (без изменений)
   3) Сайт — контейнеры, шапка с мега-меню, заставка, разметка страниц
   ============================================================ */

/* ---------- 1. ТОКЕНЫ ---------- */
:root{
  color-scheme:light;
  /* цвет */
  --bg:#EAEBEB; --bg-2:#F4F5F5; --surface:#FFFFFF; --chip:#E2E4E3; --chip-hover:#D8DBDA;
  --line:#D6D9D8; --line-soft:#E3E5E4;
  --ink:#111111; --text:#1E1F1F; --muted:#505353; --muted-2:#7C807F;
  --graphite:#141515; --graphite-hover:#000000; --graphite-card:#2E3130;
  --forest-950:#0B1814; --forest-900:#0E2821; --forest-850:#0F1E18; --forest-800:#173A30; --forest-700:#21372E;
  --forest-line:rgba(255,255,255,0.10); --forest-text:#E7EEEA; --forest-muted:#A8B8B0;
  --sage:#D1E0D9; --sage-2:#C7D8C5; --sage-ink:#2F4A3F;
  --green:#2FB383; --green-ink:#1F7A58; --lime:#E3F04A; --lime-ink:#7E8A10; --olive:#9CA480;
  --amber:#F08A3C; --amber-soft:#FBE3CF; --error:#C2443C;
  /* шрифт */
  --font-display:"Montserrat","Arial",system-ui,sans-serif;
  --font-ui:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  /* отступы */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --space-7:48px; --space-8:64px; --space-9:96px; --space-10:140px;
  /* радиусы */
  --radius-xs:6px; --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px; --radius-pill:999px;
  /* тени */
  --shadow-card:0 1px 2px rgba(0,0,0,0.04), 0 10px 30px rgba(17,24,20,0.06);
  --shadow-float:0 18px 50px rgba(17,24,20,0.12);
  --shadow-btn:inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.18);
  --shadow-chip:inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-lime:0 0 0 3px rgba(227,240,74,0.35), 0 6px 16px rgba(160,170,20,0.25);
  --shadow-focus:0 0 0 3px #ffffff, 0 0 0 5px #2fb383;
  /* градиенты */
  --g-forest:radial-gradient(120% 90% at 30% 0%, #123A2F 0%, #0E2821 45%, #0B1814 100%);
  --g-forest-card:radial-gradient(90% 70% at 50% 35%, #24453A 0%, #152E26 45%, #0F1E18 100%);
  --g-tile:linear-gradient(180deg, #183F34 0%, #10271F 100%);
  --g-graphite:linear-gradient(180deg, #4A4F4D 0%, #2B2E2D 38%, #232625 100%);
  --g-lime-glow:radial-gradient(65% 60% at 50% 100%, rgba(220,229,107,1) 0%, rgba(220,229,107,0.55) 35%, rgba(220,229,107,0) 72%);
  /* сетка */
  --w-page:1280px; --w-content:1120px; --w-text:720px; --gutter:20px;
  /* алиасы, которыми пользуются превью компонентов */
  --c-bg:var(--bg); --c-bg-2:var(--bg-2); --c-ink:var(--ink); --c-muted:var(--muted); --c-muted-2:var(--muted-2);
  --c-graphite:var(--graphite); --c-line:var(--line); --c-line-soft:var(--line-soft); --c-green:var(--green);
  --r-sm:var(--radius-sm); --r-md:var(--radius-md); --r-lg:var(--radius-lg); --r-xl:var(--radius-xl);
  --sh-card:var(--shadow-card); --sh-float:var(--shadow-float); --f-display:var(--font-display); --f-ui:var(--font-ui);
}
@media (max-width:700px){:root{--gutter:16px}}

/* ---------- 2. КОМПОНЕНТЫ (bundle.css дизайн-системы) ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.55 var(--font-ui);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
.pv{padding:24px;display:grid;gap:16px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.lbl{display:block;font:600 11px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}

.h1,.h2{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;color:var(--ink);margin:0;text-wrap:balance}
.h1{font-size:clamp(40px,5.6vw,76px);line-height:1.04}
.h2{font-size:clamp(32px,4vw,56px);line-height:1.12}
.h3{font:600 clamp(22px,2vw,28px)/1.2 var(--font-ui);margin:0;color:var(--ink);letter-spacing:-.01em}
.h4{font:600 18px/1.3 var(--font-ui);margin:0;color:var(--ink)}
.lead{font-size:17px;line-height:1.5;color:var(--muted);margin:0}
.p{margin:0}
.small{font-size:13px}
.muted{color:var(--muted)}
.muted-2{color:var(--muted-2)}
.center{text-align:center}
.on-dark .h1,.on-dark .h2,.on-dark .h3,.on-dark .h4{color:#fff}
.on-dark .lead,.on-dark .muted{color:var(--forest-muted)}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font:500 13px var(--font-ui);color:var(--muted)}
.eyebrow::before{content:"";width:15px;height:8px;border:1.5px solid currentColor;border-radius:6px}
.eyebrow.green{color:var(--green-ink)}
.eyebrow.lime{color:var(--lime-ink)}
.on-dark .eyebrow{color:#7FE0B5}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 20px;border-radius:var(--radius-sm);border:0;cursor:pointer;
  font:600 15px/1 var(--font-ui);text-decoration:none;white-space:nowrap;transition:background 240ms cubic-bezier(.2,.7,.2,1),transform 140ms,box-shadow 240ms}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn-dark{background:var(--graphite);color:#fff;box-shadow:var(--shadow-btn)}
.btn-dark:hover{background:var(--graphite-hover)}
.btn-gray{background:var(--chip);color:var(--ink);box-shadow:var(--shadow-chip)}
.btn-gray:hover{background:var(--chip-hover)}
.btn-white{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.btn-white:hover{background:#F0F1F1}
.btn-ghost-dark{background:rgba(255,255,255,.02);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.08)}
.btn-lg{min-height:52px;padding:0 26px;font-size:16px}
.btn-sm{min-height:34px;padding:0 14px;font-size:13px}
.btn .arr{font-size:10px;opacity:.8}
.btn .ico{width:18px;height:14px;border:1.5px solid currentColor;border-radius:4px;display:inline-grid;place-items:center;font-size:7px}
.link{font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.link:hover{color:var(--green-ink)}
.is-loading{position:relative;color:transparent!important}
.is-loading::after{content:"";position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* чипы / сегменты / переключатель / бейджи */
.seg{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{min-width:44px;height:36px;padding:0 14px;border-radius:var(--radius-sm);border:0;background:var(--chip);box-shadow:var(--shadow-chip);font:600 13px var(--font-ui);color:var(--ink);cursor:pointer}
.chip:hover{background:var(--chip-hover)}
.chip[aria-pressed="true"]{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.chip-input{width:64px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--line);background:#fff;padding:0 14px;font:500 16px var(--font-ui)}
.switch{display:inline-flex;align-items:center;gap:10px;font:600 14px var(--font-ui);cursor:pointer}
.switch input{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:999px;background:#CFD3D1;position:relative;cursor:pointer;transition:background 240ms;margin:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform 240ms cubic-bezier(.2,.7,.2,1)}
.switch input:checked{background:var(--lime)}
.switch input:checked::after{transform:translateX(16px)}
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--radius-xs);font:600 11.5px var(--font-ui)}
.badge-hot{background:var(--amber-soft);color:#8A4210}
.badge-hot::before{content:"";width:9px;height:12px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:linear-gradient(#FFC36B,var(--amber))}
.badge-white{background:#fff;color:var(--ink);text-transform:uppercase;letter-spacing:.03em;font-size:10.5px}
.badge-soon{background:var(--chip);color:var(--muted);height:18px;font-size:10px;font-weight:500}
.badge-green{background:#DDEFE6;color:var(--green-ink)}
.select{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:var(--radius-sm);background:var(--chip);font:600 12px var(--font-ui)}

/* поля */
.form{background:#fff;border-radius:var(--radius-md);padding:28px;display:grid;gap:22px;box-shadow:var(--shadow-card)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:8px}
.field label,.label{font:600 14px var(--font-ui);color:var(--ink)}
.req{color:#3C7FD9;font-weight:500}
.input{width:100%;height:44px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--line);background:#fff;font:400 15px var(--font-ui);color:var(--text);transition:border-color 240ms,box-shadow 240ms}
textarea.input{height:auto;min-height:110px;padding:12px;resize:vertical;line-height:1.5}
select.input{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.input::placeholder{color:#A3A7A6}
.input:hover{border-color:#BFC3C2}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,.06)}
.input.is-error{border-color:var(--error)}
.err{font-size:12.5px;color:var(--error)}
.phone{display:flex;align-items:center;gap:8px;height:44px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 12px;background:#fff}
.phone input{border:0;flex:1;min-width:0;font:400 15px var(--font-ui);background:transparent}
.phone input:focus{outline:none}
.flag{width:18px;height:12px;border-radius:2px;background:linear-gradient(#2F6FD6 50%,#F5D33B 50%)}
.add{display:inline-flex;gap:8px;align-items:center;font:500 14px var(--font-ui);color:var(--muted);background:none;border:0;padding:0;cursor:pointer;justify-self:start}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{display:flex;gap:10px;align-items:flex-start}
.checks li::before{content:"";flex:none;width:10px;height:6px;margin-top:6px;border-left:1.6px solid var(--green);border-bottom:1.6px solid var(--green);transform:rotate(-45deg)}

/* прогресс */
.pg{display:grid;gap:8px}
.pg-head{display:flex;justify-content:space-between;gap:12px;font:500 13px var(--font-ui);color:var(--muted)}
.pg-head b{color:var(--ink);font-weight:600}
.bar{height:6px;border-radius:999px;background:#DCDFDE;overflow:hidden}
.bar > i{display:block;height:100%;border-radius:inherit;background:var(--graphite);width:var(--v,0%);transition:width 600ms cubic-bezier(.2,.7,.2,1)}
.bar.green > i{background:var(--green)}
.bar.lime > i{background:var(--lime);box-shadow:0 0 12px rgba(227,240,74,.8)}
.bar.thin{height:3px}
.on-dark .bar{background:rgba(255,255,255,.10)}
.on-dark .pg-head{color:var(--forest-muted)}
.on-dark .pg-head b{color:#fff}
.segbar{display:grid;grid-template-columns:repeat(var(--n,8),1fr);gap:4px}
.segbar span{height:6px;border-radius:999px;background:#DCDFDE}
.segbar span.on{background:var(--graphite)}
.segbar span.now{background:var(--green)}
.ring{--p:40;width:56px;height:56px;border-radius:50%;background:conic-gradient(var(--green) calc(var(--p)*1%),#DCDFDE 0);display:grid;place-items:center;flex:none}
.ring::before{content:attr(data-label);width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;font:600 12px var(--font-ui);color:var(--ink)}
.ring.sm{width:22px;height:22px}
.ring.sm::before{content:"";width:15px;height:15px}
.steps{display:flex;align-items:center;justify-content:center;gap:10px}
.step{flex:none;height:38px;padding:0 18px;border-radius:999px;display:grid;place-items:center;font:600 14px var(--font-ui);color:#fff;background:var(--olive);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.12)}
.step.now{background:var(--lime);color:var(--ink);box-shadow:var(--shadow-lime)}
.step.done{background:var(--graphite)}
.dots{flex:1;min-width:24px;height:4px;background:radial-gradient(circle,#8E9396 1.4px,transparent 1.6px) 0 0/10px 4px repeat-x}
.dots.done{background:radial-gradient(circle,var(--ink) 1.6px,transparent 1.8px) 0 0/10px 4px repeat-x}
.kpi{background:#fff;border-radius:var(--radius-md);padding:16px;display:grid;gap:10px;box-shadow:var(--shadow-card)}
.kpi .v{font:600 22px var(--font-ui);color:var(--ink)}
.kpi .s{font-size:12px;color:var(--muted-2)}

/* шапка */
.header{display:flex;align-items:center;gap:22px;height:60px;padding:0 10px 0 16px;background:rgba(250,250,250,.92);backdrop-filter:blur(10px);border-radius:var(--radius-lg);box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.07)}
.logo{display:flex;align-items:center;gap:10px;font:600 17px var(--font-ui);text-decoration:none;color:var(--ink);white-space:nowrap}
.logo i{width:32px;height:32px;border-radius:50%;background:var(--graphite);color:#fff;display:grid;place-items:center;font-style:normal;font:600 14px var(--font-display)}
/* Логотип YARDOS Digital Group (Дизайн-система/logo/README.md) */
:root{--logo-arrow:#1F7A58}
.yl{display:inline-flex;line-height:1;color:var(--ink);white-space:nowrap}
.yl svg{overflow:visible;flex:none}
.yl .yl-sq{fill:none;stroke:currentColor;stroke-width:4}
.yl .yl-ar{fill:none;stroke:var(--logo-arrow);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.yl b{font:600 1em/1 var(--font-display);letter-spacing:.06em;color:var(--ink)}
.yl-5b{font-size:var(--yl-size,11px);align-items:flex-start;gap:.6em}
.yl-5b .yl-m{height:3.24em;width:3.433em;margin-top:.158em}
.yl-5b .yl-t{display:flex;flex-direction:column;gap:.27em}
.yl-5b .yl-t span{font:400 1em/1 var(--font-display);letter-spacing:.06em;color:var(--muted)}
.yl-19{font-size:var(--yl-size,22px);align-items:center;gap:.5em}
.yl-19 .yl-m{height:1.15em;width:1.15em}
.yl-19 .yl-d{font:500 .46em/1 var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.footer .logo .yl-19{--yl-size:20px}
.hero-brand{display:flex;justify-content:center}
.hero-brand .yl-19{--yl-size:clamp(24px,3.4vw,38px)}
@media (max-width:420px){.hero-brand .yl-19{--yl-size:21px}}
.header nav{display:flex;gap:2px;flex:1}
.header nav > a,.header nav > button{padding:8px 12px;border-radius:var(--radius-sm);text-decoration:none;font:500 14px var(--font-ui);color:#3B3E3D;background:none;border:0;cursor:pointer;white-space:nowrap}
.header nav > a:hover,.header nav > button:hover{background:var(--chip)}
.header .right{display:flex;align-items:center;gap:8px}
.burger{display:none;width:44px;height:44px;border-radius:var(--radius-sm);border:0;background:var(--chip);cursor:pointer;font-size:18px}

/* тёмные блоки */
.dark-panel{background:var(--g-forest);border-radius:var(--radius-xl);padding:clamp(28px,5vw,72px);color:var(--forest-text);position:relative;overflow:hidden}
/* бархатный фон: свечение сверху + мягкий блик + зерно */
.dcard{position:relative;border-radius:var(--radius-lg);background:radial-gradient(55% 42% at 50% 42%,rgba(98,196,152,.30),transparent 72%),radial-gradient(90% 60% at 80% 115%,rgba(6,16,12,.85),transparent 70%),linear-gradient(165deg,#1E4135 0%,#132C24 50%,#0A1813 100%);min-height:340px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;overflow:hidden;color:#fff;box-shadow:0 20px 40px rgba(10,24,19,.25),inset 0 1px 0 rgba(255,255,255,.07)}
.dcard::before{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.07),transparent 38%,transparent 70%,rgba(255,255,255,.03)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.22;mix-blend-mode:overlay;pointer-events:none}
.dcard p{margin:0;color:var(--forest-muted);font-size:14px;position:relative}
.dcard h4{position:relative}
.dcard .art{position:absolute;left:0;right:0;top:0;height:84%;display:grid;place-items:center;pointer-events:none}
/* центр рисунка — на 42% высоты карточки: чуть выше середины. Без анимации (reduced-motion) элементы стоят в позиции --s/--o, --x/--y */
.pulse{position:relative;width:64px;height:64px;display:grid;place-items:center}
.pulse i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(190,236,212,.5);background:radial-gradient(circle,transparent 58%,rgba(120,214,168,.14));transform:scale(var(--s));opacity:var(--o);animation:dc-ripple 4.2s cubic-bezier(.2,.6,.3,1) infinite}
.pulse i:nth-child(1){--s:1.8;--o:.5}
.pulse i:nth-child(2){--s:2.8;--o:.3;animation-delay:1.4s}
.pulse i:nth-child(3){--s:3.8;--o:.15;animation-delay:2.8s}
@keyframes dc-ripple{0%{transform:scale(1);opacity:.65}100%{transform:scale(4.8);opacity:0}}
.plus{position:relative;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#F7F9F8,#B9C2BE);display:grid;place-items:center;font:300 34px var(--font-ui);color:#1C2A24;box-shadow:0 0 48px rgba(140,230,185,.35),0 10px 24px rgba(0,0,0,.35)}
/* «Собираем»: плитки летят снизу, слева и справа; блок вспыхивает при каждом касании (раз в секунду, зелёным и белым по очереди) */
.dock{position:relative;width:100%;height:100%}
.hub{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#F7F9F8,#B9C2BE);display:grid;place-items:center;color:#1C2A24;box-shadow:0 0 0 10px rgba(255,255,255,.04),0 0 48px rgba(140,230,185,.35),0 10px 24px rgba(0,0,0,.35);z-index:1;animation:dc-hub 2s ease-out infinite}
.hub::before,.hub::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;animation:dc-hit 2s ease-out infinite}
.hub::before{box-shadow:0 0 0 2px rgba(140,230,185,.8),0 0 24px rgba(120,214,168,.6)}
.hub::after{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 24px rgba(255,255,255,.5);animation-delay:1s}
.hub svg{width:32px;height:32px;position:relative}
@keyframes dc-hub{0%{transform:scale(1.08);box-shadow:0 0 0 10px rgba(140,230,185,.16),0 0 70px rgba(120,214,168,.75),0 10px 24px rgba(0,0,0,.35)}22%{transform:scale(1);box-shadow:0 0 0 10px rgba(255,255,255,.04),0 0 48px rgba(140,230,185,.35),0 10px 24px rgba(0,0,0,.35)}50%{transform:scale(1.06);box-shadow:0 0 0 10px rgba(255,255,255,.12),0 0 64px rgba(255,255,255,.55),0 10px 24px rgba(0,0,0,.35)}72%,100%{transform:scale(1);box-shadow:0 0 0 10px rgba(255,255,255,.04),0 0 48px rgba(140,230,185,.35),0 10px 24px rgba(0,0,0,.35)}}
@keyframes dc-hit{0%{transform:scale(1);opacity:.9}45%,100%{transform:scale(1.9);opacity:0}}
.dock i{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:10px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);box-shadow:0 6px 14px rgba(0,0,0,.25);transform:translate(var(--x),var(--y));animation:dc-dock 5s cubic-bezier(.35,.6,.3,1) infinite}
.dock i::after{content:"";position:absolute;inset:11px;border-radius:3px;border:1.5px solid rgba(255,255,255,.7)}
.dock i:nth-child(1){--x:-112px;--y:8px;animation-delay:0s}
.dock i:nth-child(2){--x:0px;--y:66px;animation-delay:-1s}
.dock i:nth-child(3){--x:112px;--y:-6px;animation-delay:-2s}
.dock i:nth-child(4){--x:-88px;--y:-44px;animation-delay:-3s}
.dock i:nth-child(5){--x:92px;--y:42px;animation-delay:-4s}
@keyframes dc-dock{0%{transform:translate(calc(var(--x) * 1.4),calc(var(--y) * 1.4)) scale(.9);opacity:0}25%{opacity:1}60%{transform:translate(var(--x),var(--y)) scale(1);opacity:1}92%{transform:translate(0,0) scale(.5);opacity:.9}100%{transform:translate(0,0) scale(.3);opacity:0}}
/* «Растим»: ветки покачиваются влево-вправо, пункты мигают */
.graph{width:100%;max-width:340px;height:auto;overflow:visible}
.graph .g-orbit{fill:none;stroke:rgba(255,255,255,.14)}
.graph .g-spoke{fill:none;stroke:rgba(190,236,212,.35);stroke-width:1.2;stroke-dasharray:3 6;animation:dc-flow 1.6s linear infinite}
.graph .g-edge{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.2}
.graph .g-arm{animation:dc-sway 4.6s ease-in-out infinite alternate}
.graph .g-t{animation-delay:-1.2s;animation-duration:5.2s}
.graph .g-r{animation-delay:-2.3s}
.graph .g-b{animation-delay:-3.4s;animation-duration:5.6s}
.graph .g-leaf circle{fill:#A9BBB2;animation:dc-blink 2s ease-in-out infinite}
.graph .g-leaf circle:nth-child(2n){animation-delay:-.7s}
.graph .g-sub circle{fill:#8FA49A}
.graph .g-sub circle:nth-child(odd){animation-delay:-1.3s}
.graph .g-node{fill:#7D8F86;stroke:#0F1E18;stroke-width:2}
.graph .g-core{fill:#E3EAE6;filter:drop-shadow(0 0 12px rgba(140,230,185,.55))}
@keyframes dc-sway{from{transform:translateX(-5px)}to{transform:translateX(5px)}}
@keyframes dc-flow{to{stroke-dashoffset:-18}}
@keyframes dc-blink{0%,100%{opacity:.35}50%{opacity:1}}
.acc{display:grid}
.acc-item{border-bottom:1px solid var(--forest-line);padding:22px 0}
.acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;padding:0;color:#E7EEEA;font:500 16px var(--font-ui);text-align:left;cursor:pointer}
.acc-btn::after{content:"";flex:none;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.6;transition:transform 240ms}
.acc-item.open .acc-btn{font-size:22px;color:#fff}
.acc-item.open .acc-btn::after{transform:rotate(-135deg)}
.acc-body{display:none;color:var(--forest-muted);font-size:14.5px;margin-top:8px}
.acc-item.open .acc-body{display:block}
.acc-line{height:2px;background:rgba(255,255,255,.08);margin-top:18px;border-radius:2px;overflow:hidden;display:none}
.acc-item.open .acc-line{display:block}
.acc-line i{display:block;height:100%;width:0;background:var(--green)}
.acc-item.open .acc-line i{animation:fill 6s linear forwards}
@keyframes fill{to{width:100%}}
.shot{border-radius:var(--radius-md);overflow:hidden;background:linear-gradient(160deg,#CAD9CF,#9CB7A6 55%,#6E8E7A);padding:22px;min-height:340px;display:grid;align-content:center}
.app{background:#fff;border-radius:12px;box-shadow:var(--shadow-float);padding:14px;display:grid;gap:8px;color:var(--text)}
.app .t{font:600 15px var(--font-ui);color:var(--ink)}
.app .r{display:grid;grid-template-columns:1fr 92px 24px;gap:8px;align-items:center;font-size:12.5px;padding:7px 4px;border-bottom:1px solid var(--line-soft)}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px}
.st::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid var(--c)}
.av{width:22px;height:22px;border-radius:50%;background:#C9CFCC;flex:none}
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.tile{aspect-ratio:1;border-radius:14px;background:var(--g-tile);display:grid;place-items:center;align-content:center;gap:8px;text-align:center;font:600 13px var(--font-ui);color:#E3ECE7;box-shadow:inset 0 0 0 1px rgba(80,180,140,.18),inset 0 1px 0 rgba(255,255,255,.06),0 10px 20px rgba(0,0,0,.25);padding:8px;text-decoration:none}
.tile svg{opacity:.85}
.tile.dim{opacity:.35}
.tile.white{background:#fff;color:var(--ink);grid-column:span 2;aspect-ratio:auto;place-items:stretch;padding:16px;text-align:left;align-content:center;font-weight:500}

/* светлые карточки */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bcard{background:var(--sage);border-radius:var(--radius-lg);padding:24px 24px 0;display:flex;flex-direction:column;gap:6px;overflow:hidden;min-height:300px}
.bcard p{margin:0;color:var(--sage-ink);font-size:14px}
.bcard .ui{margin-top:auto;background:#fff;border-radius:14px 14px 0 0;padding:14px;box-shadow:0 10px 30px rgba(30,60,45,.10);display:grid;gap:10px;font-size:13px}
.bcard.wide{grid-column:span 2}
.quote-sage{background:var(--sage-2);border-radius:var(--radius-sm);padding:16px 18px;display:grid;gap:8px;font-size:15px;color:#22302A}
.quote-sage small{color:#4F5F56}
.tcard{background:#fff;border-radius:var(--radius-md);padding:20px;display:grid;gap:16px;min-height:150px;box-shadow:var(--shadow-card)}
.tcard .q{font-size:13.5px;color:var(--text);margin:0}
.tcard .q::before{content:"\201C";display:block;font:600 40px/0.6 Georgia,serif;color:#C9CDCB;margin-bottom:6px}
.who{display:flex;gap:10px;align-items:center;font-size:12.5px}
.who .av{width:28px;height:28px}
.logos{display:flex;flex-wrap:wrap;gap:28px;align-items:center;font:700 15px var(--font-ui);color:#6F7472;letter-spacing:.02em}

/* тарифы */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.plans.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan{background:#fff;border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:14px}
.plan .name{font:500 19px var(--font-display);display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink)}
.plan .price{font:500 44px/1 var(--font-display);color:var(--ink)}
.plan .price small{font-size:26px;color:var(--muted-2);margin-right:4px}
.plan .note{font-size:13px;color:var(--muted)}
.plan .btn{width:100%}
.plan dl{display:grid;grid-template-columns:1fr auto;gap:8px;margin:0;font-size:14px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.plan dt{color:var(--muted-2)}
.plan dd{margin:0;text-align:right;color:var(--muted)}
.plan .inc{font:500 13px var(--font-ui);color:var(--lime-ink)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px}
.plan li{display:flex;gap:10px;align-items:center}
.plan li::before{content:"✓";flex:none;width:18px;height:18px;border-radius:50%;background:#C9CDCB;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
.plan.pro li::before{background:#6E7472}
.plan.hl{background:var(--g-graphite);color:#fff}
.plan.hl .price,.plan.hl .name{color:#fff}
.plan.hl .price small,.plan.hl dt{color:#9EA4A1}
.plan.hl dd,.plan.hl .note{color:#CDD2CF}
.plan.hl dl{border-color:rgba(255,255,255,.12)}
.plan.hl .inc{color:var(--lime)}
.plan.hl li::before{background:#fff;color:var(--graphite)}
.cmp{width:100%;border-collapse:collapse;font-size:14px}
.cmp th,.cmp td{padding:13px 10px;border-bottom:1px solid var(--line);text-align:center}
.cmp th:first-child,.cmp td:first-child{text-align:left;font-weight:500;color:var(--ink)}
.cmp thead th{border:0;vertical-align:bottom;font:500 16px var(--font-display);color:var(--ink)}
.cmp thead th small{display:block;font:400 12px var(--font-ui);color:var(--muted-2)}
.cmp .grp td{border:0;padding-top:28px;font:500 11px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* таймлайн-секция */
.glow-sec{position:relative;border-radius:var(--radius-xl);overflow:hidden;padding:64px 24px 72px;background:var(--bg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
.glow-sec::before{content:"";position:absolute;inset:auto -10% -30% -10%;height:80%;background:var(--g-lime-glow);pointer-events:none}
.glow-sec::after{content:"";position:absolute;width:900px;height:900px;left:50%;top:-30%;transform:translateX(-50%) rotate(-20deg);border-radius:50%;border:70px solid rgba(255,255,255,.55);filter:blur(2px);pointer-events:none}
.glow-sec > *{position:relative;z-index:1}
.tl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:rgba(255,255,255,.9);border-radius:var(--radius-md);box-shadow:var(--shadow-card);max-width:880px;margin:24px auto 0}
.tl-cards > div{padding:24px;display:grid;gap:14px;align-content:start;min-height:220px}
.tl-cards > div + div{border-left:1px solid var(--line-soft)}
.tl-cards h4{font:500 21px var(--font-display);text-align:center;margin:0;color:var(--ink)}
.tl-cards .foot{margin-top:auto;font-size:11.5px;color:var(--muted-2)}
.tl-cards .checks{font-size:13px}

/* кейсы */
.cases{display:grid;grid-template-columns:2.1fr repeat(5,1fr);gap:12px;height:300px;transition:grid-template-columns 600ms cubic-bezier(.2,.7,.2,1)}
.case{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--case-bg);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;color:#fff;text-decoration:none}
.case::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.55))}
.case > *{position:relative;z-index:1}
.case .mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);font:600 24px var(--font-display);letter-spacing:.02em;white-space:nowrap}
.case .meta{display:none;gap:4px}
.case.open .meta{display:grid}
.case .meta b{font-size:15px}
.case .meta span{font-size:12.5px;opacity:.75}
.play{position:absolute!important;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);display:none;place-items:center}
.case.open .play{display:grid}
.play::before{content:"";border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}

/* гарантии / FAQ / CTA / подвал / вкладки */
.sec-list{display:grid;gap:20px}
.sec-list > div{display:grid;grid-template-columns:160px 1fr;gap:20px;font-size:13.5px}
.sec-list b{font:600 15px var(--font-ui);color:var(--ink)}
.sec-list b::after{content:" ▸";font-size:10px;color:var(--muted-2)}
.cert{width:80px;border-radius:12px;background:#fff;box-shadow:var(--shadow-card);display:grid;gap:4px;justify-items:center;padding:12px 6px;font:700 11px var(--font-ui);color:var(--ink);border:2px solid #F0F1F1}
.cert i{font:800 15px var(--font-ui);font-style:normal;color:#2E5BB8}
.cert small{font-size:8.5px;color:var(--green-ink);font-weight:600}
.faq-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;font:500 16px var(--font-ui);color:#444A48}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:7px;height:7px;border-right:1.5px solid #9AA09D;border-bottom:1.5px solid #9AA09D;transform:rotate(45deg);margin-top:5px;flex:none}
.faq details[open] summary{font-size:22px;color:var(--ink)}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--ink)}
.faq p{margin:12px 0 0;color:var(--muted);font-size:14.5px}
.cta-banner{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:30px 48px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:linear-gradient(180deg,#F4F5F5,#DCDEDE);box-shadow:0 20px 40px rgba(0,0,0,.10),inset 0 1px 0 #fff}
.cta-banner::before{content:"";position:absolute;width:420px;height:420px;left:20%;top:-180px;border-radius:50%;border:44px solid rgba(255,255,255,.75)}
.cta-banner > *{position:relative}
.footer{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:24px;font-size:13px}
.footer h5{margin:0 0 14px;font:500 14px var(--font-ui);color:var(--ink)}
.footer a:not(.logo){display:block;color:var(--muted-2);text-decoration:none;margin-bottom:10px}
.footer a:not(.logo):hover{color:var(--ink)}
.tabs{display:flex;gap:4px;overflow-x:auto;padding:4px;scrollbar-width:none}
.tab{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:0;border-bottom:2px solid transparent;border-radius:var(--radius-sm);background:transparent;font:500 14.5px var(--font-ui);color:#4A4F4D;cursor:pointer;text-decoration:none}
.tab:hover{background:rgba(0,0,0,.04)}
.tab[aria-selected="true"]{background:linear-gradient(180deg,rgba(227,240,74,0) 0%,rgba(227,240,74,.35) 100%);color:var(--ink);border-bottom-color:var(--lime);border-radius:var(--radius-sm) var(--radius-sm) 2px 2px}

@media (max-width:700px){
  .g2,.g3,.g4,.bento,.faq-grid,.tl-cards{grid-template-columns:1fr}
  .split{grid-template-columns:minmax(0,1fr)!important}
  .plans,.plans.three{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tile.white{grid-column:span 3}
  .cases{grid-template-columns:1fr 1fr!important;height:auto}
  .case{min-height:200px}.case .meta,.case .play{display:grid}
  .bcard.wide{grid-column:auto}
  .tl-cards > div + div{border-left:0;border-top:1px solid var(--line-soft)}
  .header nav{display:none}.burger{display:inline-grid;place-items:center}.header .right{margin-left:auto}
  .footer{grid-template-columns:1fr 1fr}
  .sec-list > div{grid-template-columns:1fr;gap:6px}
  .f-row{grid-template-columns:1fr}
}
@media (max-width:480px){.plans,.plans.three{grid-template-columns:1fr}}
@media (max-width:520px){
  .btn-lg{white-space:normal;text-align:center;line-height:1.25;padding-block:12px}
  .steps{gap:6px}
  .step{height:34px;padding:0 12px;font-size:13px}
  .dots{min-width:10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- 3. САЙТ ---------- */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:96px}
.wrap{width:100%;max-width:var(--w-page);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap-content{max-width:var(--w-content)}
.wrap-text{max-width:var(--w-text)}
.sec{padding-block:var(--space-9)}
.sec-tight{padding-block:var(--space-7)}
.sec-head{display:grid;gap:14px;max-width:640px;margin-bottom:var(--space-6)}
.sec-head.center{justify-items:center;margin-left:auto;margin-right:auto;text-align:center}
.sec-head.split-head{max-width:none;grid-template-columns:1fr auto;align-items:end;gap:24px}
@media (max-width:700px){.sec-head.split-head{grid-template-columns:1fr}.sec{padding-block:var(--space-8)}}
.bg-2{background:var(--bg-2)}
.band{border-radius:var(--radius-xl);background:var(--bg-2);padding:clamp(24px,4vw,56px)}
.vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.draft{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--radius-xs);border:1px dashed var(--line);font:500 10.5px var(--font-ui);color:var(--muted-2);letter-spacing:.02em}

/* шапка сайта: плавающая полоса + мега-меню */
.site-header{position:sticky;top:0;z-index:50;padding:12px 0}
.site-header .header{position:relative}
.site-header .right{margin-left:auto}
.site-header nav{position:static}
.site-header nav button{display:inline-flex;align-items:center;gap:6px}
.site-header nav button .car{display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7;transition:transform 200ms}
.site-header nav button[aria-expanded="true"]{background:var(--chip)}
.site-header nav button[aria-expanded="true"] .car{transform:rotate(-135deg) translateY(-2px)}
.site-header nav a[aria-current="page"],.site-header nav button.is-current{color:var(--ink);box-shadow:inset 0 -2px 0 var(--lime)}
.mega{position:absolute;left:0;right:0;top:calc(100% + 10px);background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-float),0 0 0 1px rgba(0,0,0,.04);padding:28px 28px 22px;display:none;max-height:calc(100vh - 110px);overflow:auto;z-index:60}
.mega[data-open="true"]{display:block}
.mega-grid{display:grid;gap:26px 28px}
.mega.products .mega-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.mega.solutions .mega-grid{grid-template-columns:1fr 1fr 2fr}
.mcol ul.two li a{white-space:nowrap}
.mcol h4{margin:0 0 10px;font:600 11px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.mcol ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.mcol li a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 8px;margin:0 -8px;border-radius:var(--radius-sm);text-decoration:none;font:400 14px var(--font-ui);color:var(--text)}
.mcol li a:hover{background:var(--bg-2);color:var(--ink)}
.mcol li a span{font:500 12.5px var(--font-ui);color:var(--muted-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.mcol li a.star{font-weight:600;color:var(--ink)}
.mcol li a.star span{color:var(--green-ink);background:#DDEFE6;border-radius:999px;padding:2px 8px;font-weight:600}
.mcol ul.two{grid-template-columns:1fr 1fr;gap:1px 16px}
.mcol .more{display:inline-block;margin-top:8px;font:500 13px var(--font-ui);color:var(--muted);text-decoration:none}
.mcol .more:hover{color:var(--green-ink)}
.mega-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;border-top:1px solid var(--line-soft);padding-top:18px;font-size:13.5px;color:var(--muted)}
.mega-promise{display:inline-flex;align-items:center;gap:8px;background:var(--green-ink);color:#fff;border-radius:999px;padding:7px 14px;font:600 13.5px var(--font-ui)}
.mega-promise::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime)}
.mega-foot > span:nth-child(2){flex:1;min-width:220px}
.hide-m{}
@media (max-width:1100px){
  .site-header nav{display:none}
  .site-header .burger{display:inline-grid;place-items:center}
  .site-header .hide-m{display:none}
  .site-header nav.open{display:flex;flex-direction:column;align-items:stretch;position:fixed;left:0;right:0;top:84px;bottom:0;background:var(--bg);overflow:auto;padding:8px var(--gutter) 48px;gap:0;z-index:70}
  .site-header nav.open > a,.site-header nav.open > button{display:flex;justify-content:space-between;text-align:left;font-size:18px;padding:16px 4px;border-bottom:1px solid var(--line);border-radius:0;background:none}
  .site-header nav.open > *{flex:none}
  .site-header nav.open .mega{position:static;box-shadow:none;border-radius:0;padding:8px 4px 20px;background:transparent;max-height:none}
  .mega.products .mega-grid,.mega.solutions .mega-grid{grid-template-columns:1fr 1fr}
  .site-header nav.open .m-cta{display:flex;margin-top:20px}
}
@media (max-width:640px){.mega.products .mega-grid,.mega.solutions .mega-grid,.mcol ul.two{grid-template-columns:1fr}}
.m-cta{display:none}
.nav-open .site-header .header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#FAFAFA}
@media (max-width:520px){
  .site-header .logo .draft{display:none}
  .site-header .header{gap:10px;padding:0 8px 0 12px}
  .site-header .right .btn-dark{min-height:36px;padding:0 12px;font-size:13px}
  .site-header .burger{width:40px;height:40px}
}
.lang{white-space:nowrap;display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px;border-radius:var(--radius-sm);font:600 13px var(--font-ui);color:var(--muted);text-decoration:none}
.lang:hover{background:var(--chip);color:var(--ink)}
/* кнопка заставки — круглая, как кнопка темы (.theme-btn в theme.css) */
.replay-btn{width:40px;height:40px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:var(--chip);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-chip,none);text-decoration:none}
.replay-btn:hover{background:var(--chip-hover,var(--chip))}
.replay-btn:focus-visible{box-shadow:var(--shadow-focus);outline:0}
.replay-btn svg{width:16px;height:16px;margin-left:2px}

/* подвал сайта */
.site-footer{padding:var(--space-8) 0 var(--space-6);border-top:1px solid var(--line)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--muted-2)}

/* hero главной */
.hero{padding-block:clamp(40px,7vw,96px) clamp(32px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:22px}
.hero .h1{max-width:980px}
/* заголовок первого экрана — ровно две строки: site.js (fitHero) подбирает кегль так, чтобы длинная строка влезала в ширину; без JS строки переносятся как обычно */
.hero .h1-fit{width:100%;max-width:1120px}
.h1-fit .h1-l{display:block}
.h1-fit.is-fit .h1-l{white-space:nowrap}
.hero .lead{max-width:620px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* пункты первого экрана: стрелка из логотипа (лайм на тёмном, изумруд на светлом) */
.hero-points{list-style:none;margin:18px 0 16px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px;width:100%;max-width:860px;text-align:left;container-type:inline-size}
/* каждый пункт — три строки: название в одну, описание в две. Кегль тянется за шириной колонки (cqi), точно его подгоняет site.js (fitHero) через --hp-fs */
.hero-points li{display:grid;grid-template-columns:1.4em minmax(0,1fr);gap:.9em;align-items:start;font-size:var(--hp-fs,clamp(12px,2cqi - 2px,16px));line-height:1.5;color:var(--muted)}
.hero-points b{display:block;font-size:1.07em;font-weight:600;color:var(--ink)}
.hero-points.is-fit b{white-space:nowrap}
.hero-points .hp-d{display:block;min-height:3em;text-wrap:pretty}
.hero-points .hp-ar{width:1.3em;height:1.3em;margin-top:.37em;fill:none;stroke:var(--logo-arrow);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
@media (max-width:700px){.hero-points{grid-template-columns:1fr;gap:14px;max-width:520px}.hero-points li{font-size:var(--hp-fs,clamp(12px,4cqi - 1.5px,16px))}}
.hero-ui{margin-top:var(--space-6);width:100%;max-width:980px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-float);padding:22px 24px;display:grid;gap:16px;text-align:left}
.hero-ui .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hero-ui .ticks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;font-size:12px;color:var(--muted-2)}
.hero-ui .ticks div{display:grid;gap:3px}
.hero-ui .ticks b{font:600 12px var(--font-ui);color:var(--ink)}
.hero-ui .ticks div.on b{color:var(--green-ink)}
@media (max-width:700px){.hero-ui .ticks{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* страница-вкладка: верх */
.page-hero{padding-block:clamp(28px,5vw,64px) clamp(24px,4vw,48px);display:grid;gap:16px;max-width:820px}
.page-hero .crumbs{display:flex;gap:8px;font-size:13px;color:var(--muted-2)}
.page-hero .crumbs a{text-decoration:none;color:var(--muted)}
.page-hero .crumbs a:hover{color:var(--ink)}
.page-hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.subnav{position:sticky;top:84px;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);margin-bottom:var(--space-6);border-bottom:1px solid var(--line-soft)}
.subnav .tabs{padding:6px 0}

/* карточки продуктов / решений */
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pcard{background:#fff;border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-card);text-decoration:none;color:var(--text);position:relative;min-height:220px;transition:transform 200ms,box-shadow 240ms}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
.pcard .h4{font-size:19px}
.pcard p{margin:0;font-size:14px;color:var(--muted)}
.pcard .meta{margin-top:auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;padding-top:14px;border-top:1px solid var(--line-soft)}
.pcard .from{font:500 22px var(--font-display);color:var(--ink);white-space:nowrap}
.pcard .from small{font:500 13px var(--font-ui);color:var(--muted-2);margin-right:4px}
.pcard .term{font-size:12.5px;color:var(--muted-2)}
.pcard .case-ref{display:flex;flex-wrap:wrap;gap:6px}
.pcard .case-ref span{font:500 11px var(--font-ui);color:var(--green-ink);background:#DDEFE6;border-radius:var(--radius-xs);padding:2px 7px}
.pcard.star{box-shadow:var(--shadow-card),inset 0 0 0 1.5px var(--ink)}
.pcard.sage{background:var(--sage)}
.pcard.sage p{color:var(--sage-ink)}
.pcard.sage .meta{border-color:rgba(47,74,63,.15)}
.pcards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.pcard .case-ref span.new{color:var(--muted);background:var(--chip)}
/* каталог: дополнения со знаком «+» */
.add-head{display:flex;align-items:center;gap:16px;margin:48px 0 16px}
.add-head .h3{margin:0}
.add-head p{margin:4px 0 0;font-size:14px}
.plus-mark{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font:300 26px/1 var(--font-ui)}
.pcard.addon{border:1px dashed rgba(17,20,19,.16);box-shadow:none}
.pcard.addon:hover{border-style:solid;box-shadow:var(--shadow-card)}
.pcard.wide{grid-column:1/-1}
#a3-2{display:block;scroll-margin-top:150px}
.calc fieldset.is-off{opacity:.45}
.calc fieldset .need-note{display:none;font:400 13px var(--font-ui);color:var(--muted-2);margin-left:8px}
.calc fieldset.is-off .need-note{display:inline}
.pcard .wide-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:16px 32px}
@media (max-width:1100px){.pcards.four{grid-template-columns:1fr 1fr}}
@media (max-width:1000px){.pcards{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.pcard .wide-grid{grid-template-columns:1fr}}
@media (max-width:600px){.pcards,.pcards.four{grid-template-columns:1fr}}

/* строки каталога (модули) */
.mod-list{display:grid;gap:1px;background:var(--line-soft);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card)}
.mod-row{display:grid;grid-template-columns:1.1fr 2fr auto auto;gap:16px;align-items:center;padding:16px 20px;background:#fff;font-size:14px}
.mod-row b{font:600 15px var(--font-ui);color:var(--ink)}
.mod-row p{margin:0;color:var(--muted)}
.mod-row .from{font:500 16px var(--font-display);color:var(--ink);white-space:nowrap;text-align:right}
.mod-row .case-ref{display:flex;gap:6px;justify-content:flex-end}
.mod-row .case-ref span{font:500 11px var(--font-ui);color:var(--green-ink);background:#DDEFE6;border-radius:var(--radius-xs);padding:2px 7px}
.mod-row .case-ref span.new{color:var(--muted);background:var(--chip)}
@media (max-width:800px){.mod-row{grid-template-columns:1fr auto}.mod-row p{grid-column:1/-1}.mod-row .case-ref{grid-column:1/-1;justify-content:flex-start}}

/* сетка индустрий */
.ind-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ind{background:#fff;border-radius:var(--radius-md);padding:18px;display:grid;gap:8px;text-decoration:none;color:var(--text);box-shadow:var(--shadow-card);min-height:150px;align-content:start}
.ind:hover{box-shadow:var(--shadow-float)}
.ind b{font:600 15px var(--font-ui);color:var(--ink)}
.ind p{margin:0;font-size:13px;color:var(--muted)}
.ind .n{font:500 11px var(--font-ui);color:var(--muted-2);letter-spacing:.06em}
@media (max-width:1000px){.ind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ind-grid{grid-template-columns:1fr}}

/* кейс подробно */
.case-art{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-7);align-items:start;padding:var(--space-6) 0;border-top:1px solid var(--line)}
.case-art .shot-ph{aspect-ratio:16/10;border-radius:var(--radius-lg);background:var(--case-bg,var(--g-forest-card));display:grid;place-items:center;color:#fff;font:600 22px var(--font-display);position:relative;overflow:hidden}
.case-art .shot-ph small{position:absolute;left:16px;bottom:14px;font:500 11.5px var(--font-ui);color:rgba(255,255,255,.7)}
.case-art .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.case-art .cols h4{margin:0 0 6px;font:600 11px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.case-art .cols p{margin:0;font-size:14px;color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font:500 12.5px var(--font-ui);padding:5px 10px;border-radius:var(--radius-sm);background:var(--chip);color:var(--ink)}
@media (max-width:800px){.case-art{grid-template-columns:1fr}.case-art .cols{grid-template-columns:1fr}}

/* калькулятор */
.calc{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--space-6);align-items:start}
.calc .opts{display:grid;gap:10px}
.calc .opt{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:#fff;border-radius:var(--radius-md);padding:14px 16px;box-shadow:var(--shadow-card);cursor:pointer}
.calc .opt input{width:18px;height:18px;accent-color:var(--graphite);margin:0}
.calc .opt b{font:600 14.5px var(--font-ui);color:var(--ink)}
.calc .opt p{margin:0;font-size:13px;color:var(--muted)}
.calc .opt .pr{font:500 15px var(--font-display);color:var(--ink);white-space:nowrap}
.calc .total{position:sticky;top:104px;background:var(--g-graphite);color:#fff;border-radius:var(--radius-lg);padding:26px;display:grid;gap:14px}
.calc .total .sum{font:500 48px/1 var(--font-display)}
.calc .total .sum small{font-size:22px;color:#9EA4A1;margin-right:4px}
.calc .total ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px;color:#CDD2CF}
.calc .total li{display:flex;justify-content:space-between;gap:12px}
.calc .total .note{font-size:12px;color:#9EA4A1}
@media (max-width:800px){.calc{grid-template-columns:1fr}.calc .total{position:static}}

/* блог */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.post{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);display:grid;text-decoration:none;color:var(--text)}
.post .cover{aspect-ratio:16/9;background:linear-gradient(160deg,var(--sage),#9CB7A6)}
.post .cover.forest{background:var(--g-forest-card)}
.post .cover.gray{background:linear-gradient(180deg,#F4F5F5,#DCDEDE)}
.post .body{padding:20px;display:grid;gap:10px}
.post .body h3{margin:0;font:600 17px/1.3 var(--font-ui);color:var(--ink)}
.post .body p{margin:0;font-size:13.5px;color:var(--muted)}
.post .tag{font:500 11.5px var(--font-ui);color:var(--muted-2)}
@media (max-width:900px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.posts{grid-template-columns:1fr}}

/* контакты */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-7);align-items:start}
.contact-list{display:grid;gap:14px}
.contact-list a{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;background:#fff;border-radius:var(--radius-sm);text-decoration:none;color:var(--ink);box-shadow:var(--shadow-card);font:500 14.5px var(--font-ui)}
.contact-list a span{color:var(--muted-2);font-weight:400}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr}}

/* цены-вилки в тарифах не переносим на две строки */
.plan .price{font-size:clamp(30px,3vw,44px)}

/* переключатель языка RU / EN */
.lang-sw{display:inline-flex;align-items:center;gap:2px;height:34px;font:600 13px var(--font-ui)}
.lang-sw a,.lang-sw b{display:inline-grid;place-items:center;min-width:34px;height:30px;padding:0 8px;border-radius:var(--radius-xs)}
.lang-sw a{color:var(--muted);text-decoration:none}
.lang-sw a:hover{background:var(--chip);color:var(--ink)}
.lang-sw b{color:var(--ink);background:var(--chip)}
.m-cta .lang-sw{height:44px;margin-left:auto}
.m-cta .lang-sw a,.m-cta .lang-sw b{min-width:44px;height:44px}

/* очередь заказов */
.queue-note{background:#fff;border-radius:var(--radius-md);padding:18px 20px;box-shadow:var(--shadow-card);display:grid;gap:8px;font-size:14px}
.queue-note b{display:flex;align-items:center;gap:8px;font:600 15px var(--font-ui);color:var(--ink)}
.queue-note p{margin:0;color:var(--muted)}
.queue-note .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}

/* запись на звонок */
.booking{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-7);align-items:start}
.bk-days .chip{height:auto;min-height:44px;padding:6px 12px;display:inline-grid;justify-items:center;line-height:1.2}
.bk-days .chip small{font:500 11.5px var(--font-ui);color:var(--muted-2)}
.bk-days .chip[aria-pressed="true"] small{color:var(--ink)}
@media (max-width:800px){.booking{grid-template-columns:1fr;gap:var(--space-5)}}

/* ---------- ЗАСТАВКА (intro) ---------- */
#intro{position:fixed;inset:0;z-index:100;background:var(--forest-950);color:var(--forest-text);display:grid;place-items:center;overflow:hidden;padding:24px}
#intro[hidden]{display:none}
#intro .veil{position:absolute;inset:0;background:var(--g-forest);opacity:.9}
#intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s}
#intro video.show{opacity:1}
#intro .scene-fallback{position:absolute;inset:0;background:linear-gradient(180deg,#0B1814 0%,#123A2F 42%,#2F4A3F 60%,#0E2821 100%);opacity:0;transition:opacity 1.2s}
#intro .scene-fallback.show{opacity:1}
#intro .scene-fallback::before{content:"";position:absolute;left:50%;top:40%;width:360px;height:360px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(227,240,74,.35),rgba(227,240,74,0) 70%);animation:breath 7s ease-in-out infinite}
@keyframes breath{50%{transform:translate(-50%,-50%) scale(1.25)}}
#intro .stage{position:relative;z-index:2;width:min(760px,100%);text-align:center;display:grid;gap:26px;justify-items:center}
#intro .stage[hidden]{display:none}
#intro #st-play{position:static}
#intro .i-title{margin:0;font:500 clamp(24px,3.4vw,40px)/1.2 var(--font-display);letter-spacing:-.02em;color:#fff}
#intro .i-line{margin:0;opacity:0;transform:translateY(12px);filter:blur(4px);transition:opacity 1.45s cubic-bezier(.22,.61,.36,1),transform 1.45s cubic-bezier(.22,.61,.36,1),filter 1.45s cubic-bezier(.22,.61,.36,1);font:400 clamp(19px,2.6vw,30px)/1.4 var(--font-display);color:#fff;text-wrap:balance}
#intro .i-line.show{opacity:1;transform:none;filter:none}
/* первый экран: логотип → приветствие → «несколько секунд тишины» → кнопка, по очереди и плавно */
#intro .i-brand{display:block;line-height:0}
#intro .i-brand img{display:block;width:min(420px,78vw);height:auto}
#intro .i-greet{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.25em .45em;font:400 clamp(22px,2.6vw,32px)/1.2 var(--font-display);color:#fff}
#intro .i-greet .g-short{display:none}
#intro .i-logo{--yl-size:1em;--logo-arrow:#E3F04A;color:#fff}
#intro .i-logo b{color:#fff}
#intro .i-logo .yl-d{color:#A8B8B0}
@media (max-width:640px){#intro .i-greet{flex-direction:column;align-items:center;gap:14px}#intro .i-greet .g-full{display:none}#intro .i-greet .g-short{display:inline}#intro .i-logo{--yl-size:24px}}
/* смена «строки → сцены»: строки затухают, карточки проявляются по очереди */
#intro .stage{transition:opacity 1.1s cubic-bezier(.22,.61,.36,1)}
#intro .stage.fade-out{opacity:0}
#intro #st-scenes .scene{animation:i-rise 1.2s cubic-bezier(.22,.61,.36,1) backwards}
#intro #st-scenes .scene:nth-child(2){animation-delay:.25s}
#intro #st-scenes .scene:nth-child(3){animation-delay:.5s}
#intro #st-enter > *{animation:i-rise 1.4s cubic-bezier(.22,.61,.36,1) both}
#intro #st-enter > :nth-child(1){animation-delay:.2s}
#intro #st-enter > :nth-child(2){animation-delay:.9s}
#intro #st-enter > :nth-child(3){animation-delay:1.7s}
#intro #st-enter > :nth-child(4){animation-delay:2.5s}
#intro #st-enter > :nth-child(5){animation-delay:2.9s}
@keyframes i-rise{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@media (max-width:640px){#intro .i-brand img{width:min(150px,42vw)}}
#intro .i-hint{font-size:13px;color:var(--forest-muted)}
#intro .scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:min(900px,100%)}
#intro .scene{position:relative;aspect-ratio:3/4;border-radius:var(--radius-md);border:0;cursor:pointer;overflow:hidden;color:#fff;text-align:left;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;background:var(--sc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .5s,box-shadow .3s;font:inherit}
#intro .scene::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.75))}
#intro .scene:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
#intro .scene b{position:relative;z-index:1;font:500 20px var(--font-display)}
#intro .scene small{position:relative;z-index:1;color:#C9D6CF;font-size:13px}
#intro .scene .soon{position:absolute;top:12px;left:12px;z-index:1;font:500 10px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:#C9CFCB;background:rgba(0,0,0,.35);padding:3px 7px;border-radius:var(--radius-xs)}
#intro .scene[data-s="1"]{--sc:linear-gradient(180deg,#1E3A4A 0%,#5E7A5A 48%,#2F4A3F 52%,#0E2821 100%)}
#intro .scene[data-s="2"]{--sc:linear-gradient(180deg,#1E2C36 0%,#4F6B78 50%,#24414F 51%,#0F1E25 100%)}
#intro .scene[data-s="3"]{--sc:linear-gradient(180deg,#26221F 0%,#6A5847 55%,#3A2F27 56%,#17130F 100%)}
#intro .i-skip{position:absolute;z-index:3;bottom:22px;left:50%;transform:translateX(-50%);color:var(--forest-muted);font:13px var(--font-ui);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#intro .i-skip:hover{color:#fff}
#intro .i-mute{position:absolute;z-index:3;top:16px;right:16px}
#intro .cap{position:absolute;z-index:3;left:50%;bottom:56px;transform:translateX(-50%);font:500 12px var(--font-ui);color:#E9ECE6;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:var(--radius-xs);white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
#intro .prog{position:absolute;z-index:3;left:0;bottom:0;height:3px;width:0;background:var(--green)}
#intro .prog.go{width:100%;transition:width var(--dur,20s) linear}
@media (max-width:640px){#intro .scenes{grid-template-columns:1fr;max-width:340px}#intro .scene{aspect-ratio:16/7}}
@media (prefers-reduced-motion:reduce){#intro .i-line{transition:none;opacity:1;transform:none;filter:none}#intro #st-enter > *,#intro #st-scenes .scene{animation:none}#intro .stage{transition:none}}


/* ---------- 4. ПОРТФОЛИО · страница кейса (единая форма для всех проектов) ---------- */
.pf-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-7);align-items:end;padding-block:clamp(28px,5vw,64px) clamp(24px,4vw,40px)}
.pf-hero .page-hero{padding:0;max-width:none}
.pf-pass{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;background:#fff;border-radius:var(--radius-lg);padding:22px 24px;box-shadow:var(--shadow-card);margin:0}
.pf-pass div{display:grid;gap:3px;min-width:0}
.pf-pass dt{font:600 11px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.pf-pass dd{margin:0;font:500 14px/1.4 var(--font-ui);color:var(--ink);overflow-wrap:anywhere}
.pf-status{display:inline-flex;align-items:center;gap:6px}
.pf-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.pf-status.test::before{background:var(--amber)}
.pf-status.proto::before{background:var(--muted-2)}
/* навигация по разделам кейса */
.pf-nav{position:sticky;top:var(--hdr,84px);z-index:40;background:rgba(234,235,235,.92);backdrop-filter:blur(8px);border-block:1px solid var(--line-soft)}
.pf-nav .wrap{display:flex;gap:4px;overflow-x:auto;padding-block:8px;scrollbar-width:none}
.pf-nav a{flex:0 0 auto;padding:8px 14px;border-radius:var(--radius-pill);font:600 13px var(--font-ui);color:var(--muted);text-decoration:none;white-space:nowrap}
.pf-nav a:hover{background:var(--chip);color:var(--ink)}
.pf-nav a.cur{background:var(--ink);color:#fff}
/* галерея экранов */
.pf-gallery{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.pf-frame{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-float);overflow:hidden;border:1px solid var(--line-soft);margin:0}
.pf-frame .bar{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;background:#F4F5F5;border-bottom:1px solid var(--line-soft)}
.pf-frame .bar i{width:10px;height:10px;border-radius:50%;background:#D6D9D8;display:block}
.pf-frame .bar span{margin-left:8px;flex:1;height:18px;border-radius:6px;background:#fff;border:1px solid var(--line-soft);font:400 11px/18px var(--font-ui);color:var(--muted-2);padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-frame img{display:block;width:100%;height:auto;aspect-ratio:1440/900;object-fit:cover;object-position:top}
.pf-frame figcaption{padding:12px 16px;font-size:13px;color:var(--muted);border-top:1px solid var(--line-soft)}
.pf-thumbs{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.pf-thumbs button{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:center;width:100%;text-align:left;padding:8px;border:0;border-radius:var(--radius-sm);background:#fff;box-shadow:var(--shadow-card);cursor:pointer;font:500 13px/1.3 var(--font-ui);color:var(--ink)}
.pf-thumbs button img{width:84px;height:52px;object-fit:cover;object-position:top;border-radius:6px;border:1px solid var(--line-soft);display:block}
.pf-thumbs button small{display:block;font-size:11.5px;color:var(--muted-2);font-weight:400;margin-top:2px}
.pf-thumbs button[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pf-thumbs button:hover{background:var(--bg-2)}
/* телефоны */
.pf-phones{display:flex;gap:20px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x proximity}
.pf-phone{flex:0 0 232px;scroll-snap-align:start;display:grid;gap:10px;margin:0}
.pf-phone .shell{position:relative;border-radius:30px;background:#141515;padding:9px;box-shadow:0 18px 40px rgba(17,24,20,.22),inset 0 0 0 1px rgba(255,255,255,.12)}
.pf-phone .shell::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:84px;height:22px;background:#141515;border-radius:0 0 14px 14px;z-index:2}
.pf-phone .shell img{display:block;width:100%;height:auto;aspect-ratio:393/659;object-fit:cover;object-position:top;border-radius:22px;background:#fff}
.pf-phone figcaption{font-size:12.5px;color:var(--muted);text-align:center}
/* дизайн: палитра и шрифты */
.pf-design{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pf-card{background:#fff;border-radius:var(--radius-lg);padding:22px 24px;box-shadow:var(--shadow-card);display:grid;gap:14px;align-content:start}
.pf-card h3{font:600 15px var(--font-ui);margin:0;color:var(--ink)}
.pf-card ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px;color:var(--text)}
.pf-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.pf-swatch{display:grid;gap:6px;font:400 11.5px/1.3 var(--font-ui);color:var(--muted)}
.pf-swatch i{display:block;height:46px;border-radius:10px;border:1px solid rgba(0,0,0,.08)}
.pf-swatch b{display:block;font:600 12px var(--font-ui);color:var(--ink);letter-spacing:.02em}
.pf-type{display:grid;gap:10px}
.pf-type .sample{font-size:30px;line-height:1.1;color:var(--ink)}
.pf-type .meta{font-size:12.5px;color:var(--muted-2)}
/* таблицы кейса */
.pf-tbl{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card)}
.pf-tbl th,.pf-tbl td{padding:13px 14px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.pf-tbl thead th{font:600 11px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);background:var(--bg-2)}
.pf-tbl tbody th{font-weight:600;color:var(--ink);width:22%}
.pf-tbl tr:last-child td,.pf-tbl tr:last-child th{border-bottom:0}
.pf-tbl .muted{color:var(--muted)}
/* стороны продукта и «где применимо» */
.pf-sides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pf-side{background:var(--sage);border-radius:var(--radius-lg);padding:22px 24px;display:grid;gap:10px;align-content:start}
.pf-side .who{font:600 16px var(--font-ui);color:var(--ink)}
.pf-side .lbl{color:var(--sage-ink);opacity:.8}
.pf-side p{margin:0;font-size:14px;color:var(--sage-ink)}
.pf-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pf-next .pf-card ul{padding-left:0;list-style:none}
.pf-next .pf-card li{display:flex;gap:10px;align-items:flex-start}
.pf-next .pf-card li::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--green);margin-top:7px}
.pf-chips{display:flex;flex-wrap:wrap;gap:8px}
.pf-chips span{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--radius-pill);background:var(--chip);font:500 13px var(--font-ui);color:var(--ink)}
.pf-chips span.on{background:var(--lime);color:var(--ink)}
.pf-links a{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--radius-pill);background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:500 13px var(--font-ui);color:var(--ink);text-decoration:none}
.pf-links a::after{content:"→";font-size:12px;color:var(--muted-2)}
.pf-links a:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pf-note{display:grid;gap:8px;padding:18px 22px;border-radius:var(--radius-md);background:var(--amber-soft);color:#5E3A14;font-size:13.5px}
.pf-note b{color:#3F2609}
/* зелёная плашка «важно»: короткое пояснение под заголовком страницы */
.note-green{display:flex;gap:12px;align-items:flex-start;max-width:var(--w-text);margin-top:var(--space-4);padding:14px 18px;border-radius:var(--radius-md);background:rgba(47,179,131,.12);box-shadow:inset 4px 0 0 var(--green);color:var(--text);font-size:14.5px;line-height:1.5}
.note-green::before{content:"i";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font:700 13px/1 var(--font-ui)}
.note-green b{color:var(--green-ink)}
.note-green p{margin:0}
.note-green.mini{display:inline-flex;align-items:center;width:max-content;max-width:100%;margin-top:var(--space-3);padding:6px 14px 6px 8px;gap:8px;border-radius:var(--radius-pill);box-shadow:none;font:600 13px/1.3 var(--font-ui);color:var(--green-ink)}
.note-green.mini::before{width:18px;height:18px;margin-top:0;font-size:11px}
.pf-pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:var(--space-6);border-top:1px solid var(--line-soft)}
.pf-pager a{text-decoration:none;display:grid;gap:4px;font:600 15px var(--font-ui);color:var(--ink)}
.pf-pager a small{font:400 12px var(--font-ui);color:var(--muted-2)}
/* обзор портфолио на странице «Кейсы» */
.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pf-tile{display:grid;gap:0;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);text-decoration:none;color:inherit;transition:box-shadow 240ms,transform 240ms}
.pf-tile:hover{box-shadow:var(--shadow-float);transform:translateY(-2px)}
.pf-tile .pic{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.pf-tile .pic img.d{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.pf-tile .pic img.m{position:absolute;right:18px;bottom:-6px;width:27%;height:auto;aspect-ratio:393/560;object-fit:cover;object-position:top;border-radius:14px 14px 0 0;box-shadow:0 10px 30px rgba(0,0,0,.25);border:4px solid #141515;border-bottom:0}
.pf-tile .body{display:grid;gap:10px;padding:20px 22px 22px}
.pf-tile .body .h4{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.pf-tile .body .h4 small{font:500 12px var(--font-ui);color:var(--muted-2)}
.pf-tile .body p{margin:0;font-size:14px;color:var(--muted)}
@media (max-width:1100px){.pf-hero{grid-template-columns:1fr}.pf-gallery{grid-template-columns:1fr}.pf-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}.pf-design,.pf-sides{grid-template-columns:1fr}}
@media (max-width:700px){.pf-pass{grid-template-columns:1fr}.pf-thumbs{grid-template-columns:1fr}.pf-next,.pf-grid{grid-template-columns:1fr}.pf-phone{flex-basis:200px}.pf-tbl tbody th{width:auto}}

/* ---------- демо сборки в hero: 4 проекта × 7 этапов (assets/hero-demo.js) ---------- */
@property --p{syntax:'<number>';inherits:false;initial-value:0}
.hd .hd-title{display:grid;gap:2px}
.hd .hd-ctl{display:flex;align-items:center;gap:12px}
.hd-dots{display:flex;gap:6px}
.hd-dots button{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:#CFD3D2;cursor:pointer;transition:transform .2s,background .2s}
.hd-dots button[aria-selected="true"]{background:var(--graphite);transform:scale(1.25)}
.hd-dots button:focus-visible{box-shadow:var(--shadow-focus);outline:0}
.hero-ui .hd-ticks{grid-template-columns:repeat(7,minmax(0,1fr))}
.hero-ui .hd-ticks b{color:var(--muted-2);transition:color .3s}
.hero-ui .hd-ticks div.on b{color:var(--ink)}
.hero-ui .hd-ticks div.now b{color:var(--green-ink)}
.hd-scene{background:var(--bg-2);border-radius:var(--radius-md);padding:14px 16px 16px;display:grid;grid-template-rows:auto 1fr;gap:12px;min-height:470px;transition:opacity .35s}
.hd-body{align-self:center}
.hd-scene.swap{opacity:0;transition:none}
.hd-head{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:baseline}
.hd-stage{font:600 11.5px var(--font-ui);color:var(--green-ink);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.hd-desc{font-size:13px;color:var(--muted)}
.hd-cols{display:grid;grid-template-columns:1.45fr 1fr;gap:14px;align-items:start}
.hd [data-at]{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.hd [data-at].in{opacity:1;transform:none}
.hd li[data-until]:not(.in){display:none}
.hd-side{display:grid;gap:10px}
.hd-card{background:#fff;border-radius:12px;box-shadow:var(--shadow-card);padding:12px 14px;display:grid;gap:10px;align-content:start}
.hd-card h5{margin:0;font:600 11px var(--font-ui);color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em}
.hd-note{background:var(--sage);border-radius:12px;padding:12px 14px;display:grid;gap:3px}
.hd-note b{font:600 13px var(--font-ui);color:var(--sage-ink)}
.hd-note small{font-size:12px;color:var(--sage-ink);opacity:.85}
.hd-av{width:30px;height:30px;border-radius:50%;background:var(--sage);color:var(--sage-ink);display:grid;place-items:center;font:600 11.5px var(--font-ui);font-style:normal;flex:none}
.hd-av.agency{background:var(--graphite);color:#fff}
.hd-chips{display:flex;flex-wrap:wrap;gap:6px}
.hd-chip{font:500 12px var(--font-ui);padding:4px 9px;border-radius:999px;background:var(--chip);color:var(--text)}
.hd-chip.key{background:#fff;border:1px solid var(--line)}
.hd-chip.ent{background:var(--sage);color:var(--sage-ink)}
.hd-chip.ok{background:#DDEFE6;color:var(--green-ink);justify-self:start}
.hd-checks{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:13px}
.hd-checks li{display:flex;gap:8px;align-items:flex-start;line-height:1.35}
.hd-checks li::before{content:"";flex:none;width:9px;height:5px;margin-top:6px;border-left:1.6px solid var(--green);border-bottom:1.6px solid var(--green);transform:rotate(-45deg)}
.hd-checks li.bad{color:var(--error);font-weight:500}
.hd-checks li.bad::before{width:8px;height:8px;margin-top:4px;border:1.6px solid var(--error);border-radius:50%;transform:none}
.hd-checks li.fix{font-weight:500}
.hd-checks.two{grid-template-columns:1fr 1fr}
/* этап 1 · чат */
.hd-chat{background:#fff;border-radius:12px;box-shadow:var(--shadow-card);overflow:hidden}
.hd-chat-h{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line-soft)}
.hd-chat-h b{font:600 13px var(--font-ui);display:block}
.hd-chat-h small{display:block;font-size:11px;color:var(--green-ink)}
.hd-pill{margin-left:auto;font-size:11px;color:var(--muted-2);background:var(--chip);border-radius:999px;padding:3px 8px;white-space:nowrap}
.hd-msgs{padding:10px 12px 12px;display:grid;gap:8px;justify-items:start}
.hd-msg{max-width:90%;padding:8px 11px;border-radius:14px;font-size:13px;line-height:1.35;background:var(--bg);color:var(--text)}
.hd-msg.them{border-bottom-left-radius:4px}
.hd-msg.me{justify-self:end;background:var(--forest-900);color:var(--forest-text);border-bottom-right-radius:4px}
.hd-link{display:inline-block;margin-top:4px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.12);font-size:12px;font-weight:600}
.hd-msg.voice{display:flex;align-items:center;gap:8px}
.hd-msg.voice small{font-size:11px;color:var(--muted-2)}
.hd-play{width:22px;height:22px;border-radius:50%;background:var(--green);position:relative;flex:none;display:inline-block}
.hd-play::after{content:"";position:absolute;left:8px;top:6px;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.hd-wave{display:flex;align-items:center;gap:2px;height:22px}
.hd-wave b{width:3px;height:var(--h);background:var(--green-ink);border-radius:2px;animation:hdwave 1.1s ease-in-out infinite}
.hd-wave b:nth-child(odd){animation-delay:.35s}
@keyframes hdwave{50%{transform:scaleY(.4)}}
.hd-msg.files{display:flex;gap:6px;flex-wrap:wrap;background:transparent;padding:0;max-width:100%}
.hd-file{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:12px;font-weight:500}
.hd-file::before{content:"";width:9px;height:11px;border:1.4px solid var(--muted);border-radius:2px}
.hd-dl{margin:0;display:grid;gap:6px}
.hd-dl div{display:grid;grid-template-columns:60px 1fr;gap:8px;font-size:13px}
.hd-dl dt{color:var(--muted-2)}
.hd-dl dd{margin:0;font-weight:500;color:var(--ink)}
/* этап 2 · аккаунты */
.hd-rows{display:grid;gap:6px}
.hd-row{display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:8px 12px;box-shadow:var(--shadow-card)}
.hd-logo{width:30px;height:30px;border-radius:8px;background:var(--graphite);color:#fff;display:grid;place-items:center;font:600 11px var(--font-ui);font-style:normal;flex:none}
.hd-row > div b{font:600 13px var(--font-ui);display:block}
.hd-row small{font-size:11.5px;color:var(--muted-2)}
.hd-sts{margin-left:auto;position:relative;min-width:150px;height:22px}
.hd-st{position:absolute;right:0;top:0;font:600 11px var(--font-ui);padding:4px 8px;border-radius:6px;background:var(--chip);color:var(--muted);white-space:nowrap}
.hd-st.ok{background:#DDEFE6;color:var(--green-ink)}
.hd-st.wait{color:var(--muted-2)}
.hd-st.wait::before{content:"";display:inline-block;width:8px;height:8px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;margin-right:5px;vertical-align:-1px;animation:spin .9s linear infinite}
.hd-own{display:flex;gap:10px;align-items:center}
.hd-own b{font:600 13px var(--font-ui);display:block}
.hd-own small{font-size:11.5px;color:var(--muted-2)}
/* этап 3 · структура */
.hd-tree{background:#fff;border-radius:12px;padding:14px;box-shadow:var(--shadow-card)}
.hd-tree-root{display:inline-grid;gap:1px;background:var(--graphite);color:#fff;border-radius:8px;padding:7px 12px;font:600 13px var(--font-ui)}
.hd-tree-root small{font-weight:400;font-size:11px;opacity:.7}
.hd-tree ul{list-style:none;margin:10px 0 0 14px;padding:0 0 0 14px;border-left:1.5px solid var(--line);display:grid;gap:6px;justify-items:start}
.hd-tree li{position:relative;background:var(--bg);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:500}
.hd-tree li::before{content:"";position:absolute;left:-15px;top:50%;width:14px;height:1.5px;background:var(--line)}
/* этап 4 · сборка */
.hd-browser{background:#fff;border-radius:12px;box-shadow:var(--shadow-card);overflow:hidden}
.hd-bbar{display:flex;align-items:center;gap:5px;padding:8px 10px;border-bottom:1px solid var(--line-soft)}
.hd-bbar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.hd-bbar span{margin-left:8px;flex:1;font-size:11px;color:var(--muted-2);background:var(--bg);border-radius:6px;padding:3px 8px}
.hd-page{padding:10px;display:grid;gap:8px}
.hd-b{position:relative;border-radius:8px;background:var(--bg);padding:8px 10px}
.hd-b.bad{outline:2px solid var(--error);outline-offset:1px;background:#FBEBEA;transform:translateX(6px) rotate(-.5deg)!important}
.hd-b.head{display:flex;align-items:center;gap:8px;background:transparent;padding:2px 2px 8px;border-bottom:1px solid var(--line-soft);border-radius:0}
.hd-b.head b{font:600 13px var(--font-ui);margin-right:auto}
.hd-b.head span{width:28px;height:6px;border-radius:3px;background:var(--line)}
.hd-b.head .hd-cartb{width:auto;height:auto;font:600 11px var(--font-ui);background:var(--lime);color:var(--ink);padding:3px 8px;border-radius:999px;box-shadow:var(--shadow-lime)}
.hd-b > small{display:block;font-size:11px;color:var(--muted-2);margin-bottom:6px}
.hd-b-hero{display:flex;gap:12px;align-items:center;justify-content:space-between}
.hd-b-hero > div{display:grid;gap:8px;justify-items:start}
.hd-b-hero b{font:500 16px var(--font-display);letter-spacing:-.01em;line-height:1.2;max-width:320px;color:var(--ink)}
.hd-btn{font:600 11px var(--font-ui);background:var(--graphite);color:#fff;padding:5px 10px;border-radius:6px}
.hd-photo{width:64px;height:64px;border-radius:50%;flex:none;background:radial-gradient(circle at 50% 38%,#EBC9B0 0 26%,transparent 27%),radial-gradient(ellipse at 50% 100%,var(--sage-ink) 0 40%,transparent 41%),var(--sage)}
.hd-b-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;transition:gap .3s}
.hd-b-grid span{display:grid;gap:4px}
.hd-b-grid i{height:34px;border-radius:6px;background:linear-gradient(135deg,#E3E5E4,#F4F5F5)}
.hd-b-grid.photos i{background:linear-gradient(135deg,var(--sage-2),var(--sage))}
.hd-b-grid b{font:600 11px var(--font-ui)}
.hd-b.bad .hd-b-grid{grid-template-columns:repeat(6,22%);gap:0}
.hd-b-cart{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hd-b-cart b{font:600 13px var(--font-ui)}
.hd-b-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.hd-b-cal i{height:16px;border-radius:4px;background:#fff;border:1px solid var(--line-soft)}
.hd-b-cal i.free{background:#DDEFE6;border-color:var(--green)}
.hd-b.bad .hd-b-cal i.free{background:#fff;border-color:var(--line-soft)}
.hd-b-video{position:relative;height:124px;border-radius:8px;background:linear-gradient(160deg,var(--forest-900),var(--forest-700));display:grid;align-content:end;gap:4px;padding:10px;color:#fff;overflow:hidden}
.hd-face{position:absolute;left:50%;top:14px;width:46px;height:46px;border-radius:50%;background:#EBC9B0;transform:translateX(-50%)}
.hd-face::after{content:"";position:absolute;left:-28px;top:50px;width:102px;height:50px;border-radius:50px 50px 0 0;background:var(--sage-ink)}
.hd-play.big{position:absolute;left:10px;top:10px;width:28px;height:28px}
.hd-play.big::after{left:11px;top:8px;border-left-width:10px;border-top-width:6px;border-bottom-width:6px}
.hd-b-video b{font:500 12.5px var(--font-ui);position:relative;z-index:1;background:rgba(0,0,0,.4);padding:4px 8px;border-radius:6px;width:max-content;max-width:100%}
.hd-sub{font-size:10px;opacity:.75;position:relative;z-index:1}
.hd-b.bad .hd-b-video{filter:grayscale(1)}
.hd-b.bad .hd-play.big{background:var(--error)}
.hd-b-dash{display:grid;grid-template-columns:44px 1fr;gap:8px}
.hd-b-dash .side{background:var(--forest-900);border-radius:6px;padding:8px 6px;display:grid;gap:6px;align-content:start}
.hd-b-dash .side i{height:6px;border-radius:3px;background:rgba(255,255,255,.25)}
.hd-b-dash .side i:first-child{background:var(--lime)}
.hd-b-dash .main{display:grid;gap:7px;background:#fff;border-radius:6px;padding:8px}
.hd-pg{display:grid;gap:4px;font:500 11px var(--font-ui)}
.hd-bar{height:5px;border-radius:999px;background:#DCDFDE;overflow:hidden}
.hd-bar i{display:block;height:100%;background:var(--green);border-radius:inherit;transition:width .4s,background .3s}
.hd-b.bad .hd-pg:nth-child(2){color:var(--error)}
.hd-b.bad .hd-pg:nth-child(2) .hd-bar i{background:var(--error);width:82%!important}
.hd-b-cta b{font:600 13px var(--font-ui)}
.hd-err,.hd-ok{position:absolute;right:8px;top:-9px;font:600 11px var(--font-ui);font-style:normal;padding:3px 8px;border-radius:6px;background:var(--error);color:#fff;z-index:2}
.hd-ok{background:var(--green)}
.hd-log{display:grid;gap:7px;font-size:12.5px}
.hd-log div{display:flex;gap:8px;align-items:center;color:var(--text)}
.hd-log i{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.hd-log div.bad{color:var(--error)}
.hd-log div.bad i{background:var(--error)}
.hd-log div.fix i{background:var(--lime);box-shadow:0 0 6px rgba(227,240,74,.9)}
/* этап 5 · контент */
.hd-editor{display:grid;gap:10px}
.hd-ed-h{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--muted-2)}
.hd-langs{display:flex;gap:4px}
.hd-langs b{font:600 11px var(--font-ui);padding:2px 7px;border-radius:999px;background:var(--chip);color:var(--text)}
.hd-ed-body{background:#fff;border-radius:12px;padding:14px;box-shadow:var(--shadow-card);font-size:13px;line-height:1.5;min-height:104px}
.hd-ed-body p{margin:0 0 6px}
.hd-caret{display:inline-block;width:2px;height:14px;background:var(--ink);vertical-align:-2px;animation:hdcaret 1s steps(2) infinite}
@keyframes hdcaret{50%{opacity:0}}
.hd-arts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hd-art{background:#fff;border-radius:10px;padding:10px;box-shadow:var(--shadow-card);display:grid;gap:3px;align-content:start}
.hd-art small{font-size:10.5px;color:var(--muted-2)}
.hd-art b{font:600 12px var(--font-ui);line-height:1.3}
.hd-fine{font-size:11.5px;color:var(--muted-2);line-height:1.4}
/* этап 6 · проверка */
.hd-rings{display:flex;gap:16px;flex-wrap:wrap}
.hd-ring{display:grid;justify-items:center;gap:5px;font-size:11px;color:var(--muted)}
.hd-ring .ring{--p:0;transition:--p .9s ease}
.hd-ring.in .ring{--p:var(--v)}
.hd-devices{display:flex;align-items:flex-end;gap:10px;font-size:11.5px;color:var(--muted-2)}
.hd-dev{display:block;border:1.5px solid var(--ink);border-radius:4px;background:#fff;position:relative}
.hd-dev.ph{width:14px;height:24px}.hd-dev.tb{width:24px;height:30px}.hd-dev.pc{width:40px;height:26px;border-radius:3px}
.hd-dev i{position:absolute;inset:3px;background:#DDEFE6;border-radius:2px}
.hd-devices small{margin-left:4px}
/* этап 7 · запуск */
.hd-launch{display:grid;gap:12px}
.hd-live{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-card)}
.hd-lock{width:14px;height:11px;border:1.6px solid var(--green-ink);border-radius:3px;position:relative;margin-top:5px;flex:none}
.hd-lock::before{content:"";position:absolute;left:2px;top:-7px;width:6px;height:7px;border:1.6px solid var(--green-ink);border-bottom:0;border-radius:5px 5px 0 0}
.hd-live b{font:600 14px var(--font-ui);color:var(--ink);margin-right:auto;word-break:break-all}
.hd-next{background:var(--graphite);color:#fff;border-radius:12px;padding:12px 14px;display:grid;gap:2px}
.hd-next small{font-size:11px;opacity:.7}
.hd-next b{font:600 13px var(--font-ui)}
@media (max-width:700px){
  .hero-ui .hd-ticks{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hd-cols{grid-template-columns:1fr}
  .hd-scene{min-height:0;padding:12px}
  .hd-b-grid{grid-template-columns:repeat(3,1fr)}
  .hd-b.bad .hd-b-grid{grid-template-columns:repeat(3,44%)}
  .hd-arts{grid-template-columns:1fr}
  .hd-checks.two{grid-template-columns:1fr}
  .hd-sts{min-width:0}
  .hd-row small{display:none}
}

/* демо: стоковые фото в блоках */
.hd-b-hero.wide{display:grid;grid-template-columns:1fr 1.1fr;align-items:center}
.hd-hero-img{width:100%;height:84px;object-fit:cover;border-radius:6px;display:block}
img.hd-photo{object-fit:cover;object-position:50% 25%;background:none}
.hd-card-img{width:100%;height:46px;object-fit:cover;border-radius:6px;display:block;background:#E3E5E4}
.hd-b-video.has-img{height:150px}
.hd-video-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(.9)}
.hd-b-video.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,24,20,0) 40%,rgba(11,24,20,.75))}
.hd-b-video .hd-play.big,.hd-b-video b,.hd-b-video .hd-sub{z-index:2}
.hd-thumbs{display:flex;gap:4px}
.hd-thumbs img{width:34px;height:34px;object-fit:cover;border-radius:6px;display:block}
@media (max-width:700px){.hd-card-img{height:54px}.hd-hero-img{height:72px}}
main section[id]{scroll-margin-top:calc(var(--hdr,84px) + 64px)}

/* ---------- AI-помощник (assets/assistant.js) ---------- */
.as-fab{position:fixed;right:20px;bottom:20px;z-index:90;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border:0;border-radius:var(--radius-pill);background:var(--graphite);color:#fff;font:600 14px var(--font-ui);cursor:pointer;box-shadow:var(--shadow-float),var(--shadow-btn)}
.as-fab:hover{background:var(--graphite-hover)}
.as-fab:focus-visible,.as-panel button:focus-visible,.as-panel textarea:focus-visible{outline:0;box-shadow:var(--shadow-focus)}
.as-fab.on{opacity:0;pointer-events:none}
.as-dot{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(227,240,74,.25)}
.as-panel{position:fixed;right:20px;bottom:20px;z-index:91;width:min(400px,calc(100vw - 32px));height:min(600px,calc(100vh - 40px));display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-float),0 0 0 1px rgba(0,0,0,.05);overflow:hidden;font:15px/1.5 var(--font-ui);color:var(--text)}
.as-panel[hidden]{display:none}
.as-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--g-forest);color:var(--forest-text)}
.as-head b{display:block;font:600 15px var(--font-display);color:#fff}
.as-head small{color:var(--forest-muted);font-size:12px}
.as-x{width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.as-x:hover{background:rgba(255,255,255,.16)}
.as-tools{display:flex;align-items:center;gap:6px}
.as-ic{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.as-ic:hover,.as-ic[aria-pressed="true"]{background:rgba(255,255,255,.2)}
.as-list{flex:1;overflow-y:auto;padding:16px;background:var(--bg-2);display:flex;flex-direction:column;gap:8px}
.as-list[hidden],.as-log[hidden],.as-chips[hidden],.as-form[hidden]{display:none}
.as-list-h{margin:0 0 4px;font:600 14px var(--font-display);color:var(--ink)}
.as-item{display:flex;align-items:stretch;background:var(--surface);border-radius:var(--radius-sm);box-shadow:var(--shadow-card)}
.as-item.cur{box-shadow:inset 0 0 0 2px var(--green),var(--shadow-card)}
.as-open{flex:1;min-width:0;text-align:left;border:0;background:none;padding:10px 12px;cursor:pointer;font:inherit;color:var(--ink)}
.as-open b{display:block;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-open small{color:var(--muted-2);font-size:12px}
.as-del{width:40px;border:0;background:none;color:var(--muted-2);font-size:20px;cursor:pointer;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.as-del:hover{color:var(--error);background:var(--bg-2)}
.as-empty{margin:8px 0;color:var(--muted)}
.as-list .as-new2{align-self:flex-start;margin-top:6px}
.as-resume{margin-top:8px;display:block;width:100%;text-align:left;border:0;border-radius:var(--radius-sm);background:var(--chip);color:var(--ink);font:500 13px var(--font-ui);padding:8px 10px;cursor:pointer}
.as-resume:hover{background:var(--chip-hover)}
.as-log{position:relative;flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg-2)}
.as-msg{max-width:88%;padding:10px 14px;border-radius:var(--radius-md);overflow-wrap:anywhere}
.as-msg p{margin:0}.as-msg p+p,.as-msg ul+p,.as-msg p+ul{margin-top:8px}
.as-msg ul{margin:0;padding-left:18px}.as-msg li+li{margin-top:2px}
.as-msg.bot{align-self:flex-start;background:var(--surface);box-shadow:var(--shadow-card);border-bottom-left-radius:var(--radius-xs)}
.as-msg.me{align-self:flex-end;background:var(--graphite);color:#fff;border-bottom-right-radius:var(--radius-xs)}
.as-err{color:var(--error)}
.as-typing{display:flex;gap:5px;padding:4px 0}
.as-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted-2);animation:as-blink 1.2s infinite}
.as-typing i:nth-child(2){animation-delay:.2s}.as-typing i:nth-child(3){animation-delay:.4s}
@keyframes as-blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.as-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px;background:var(--bg-2)}
.as-chips:empty{display:none}
.as-chips button{border:0;border-radius:var(--radius-pill);background:var(--chip);color:var(--ink);font:500 13px var(--font-ui);padding:7px 12px;cursor:pointer;text-align:left}
.as-chips button:hover{background:var(--chip-hover)}
.as-chips.row{flex-wrap:nowrap;overflow-x:auto;padding-top:8px;border-top:1px solid var(--line-soft);scrollbar-width:none}
.as-chips.row::-webkit-scrollbar{display:none}
.as-chips.row button{flex:none;white-space:nowrap}
.as-msg a{color:var(--green-ink);text-underline-offset:2px}
.as-form{display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid var(--line-soft)}
.as-form textarea{flex:1;resize:none;min-height:44px;max-height:120px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);font:15px/1.4 var(--font-ui);color:var(--ink);background:var(--surface)}
.as-form .btn{min-width:44px;padding:0 14px}
.as-foot{padding:0 12px 12px;font-size:12px;color:var(--muted-2)}
.as-foot a{color:var(--green-ink)}
@media (max-width:700px){
  .as-fab{right:16px;bottom:16px}
  .as-panel{right:0;left:0;bottom:0;width:100%;height:min(88vh,100dvh);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
}
@media (prefers-reduced-motion:reduce){.as-typing i{animation:none;opacity:.6}}
@media (min-width:1101px){.pf-thumbs{max-height:min(640px,calc((min(100vw,var(--w-page)) - 2*var(--gutter) - 324px)*.625 + 80px));overflow-y:auto;padding:2px 6px 2px 2px;scrollbar-width:thin}}

/* ---------- обучение и наставничество (pages/learning.html, pages/social.html) ---------- */
.ln-teaser{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.ln-plats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ln-plats a{display:flex;align-items:center;min-height:52px;padding:0 16px;border-radius:var(--radius-md);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--forest-line);font:500 15px var(--font-ui);color:#fff;text-decoration:none}
.ln-plats a:hover{background:rgba(255,255,255,.13)}
.ln-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:ln}
.ln-steps li{counter-increment:ln;background:#fff;border-radius:var(--radius-md);padding:20px;display:grid;gap:8px;align-content:start;box-shadow:var(--shadow-card)}
.ln-steps li::before{content:counter(ln,decimal-leading-zero);font:500 26px var(--font-display);color:var(--muted-2)}
.ln-steps b{font:600 15px var(--font-ui);color:var(--ink)}
.ln-steps p{margin:0;font-size:13.5px;color:var(--muted)}
.ln-honest{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.ln-honest > div{background:var(--bg-2);border-radius:var(--radius-lg);padding:24px;display:grid;gap:12px;align-content:start}
.ln-no{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ln-no li{display:flex;gap:10px}
.ln-no li::before{content:"";flex:none;width:10px;height:1.6px;margin-top:9px;background:var(--muted-2)}
.ln-choose{display:grid;grid-template-columns:1fr 1.6fr;gap:32px}
.ln-q{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ln-q li{background:#fff;border-radius:var(--radius-md);padding:16px 18px;display:grid;gap:6px;font:500 15px/1.4 var(--font-ui);color:var(--ink)}
.ln-q .n{font:500 11px var(--font-ui);letter-spacing:.06em;color:var(--muted-2)}
.ln-explorer{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:start}
.ln-side{position:sticky;top:calc(var(--hdr,84px) + 12px);background:#fff;border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-card);display:grid;gap:10px}
.ln-side ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;scrollbar-width:none}
.ln-side ul a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--radius-sm);font:500 14px var(--font-ui);color:var(--text);text-decoration:none}
.ln-side ul a:hover{background:var(--bg-2);color:var(--ink)}
.ln-side ul a i,.ln-mono{display:grid;place-items:center;flex:none;font-style:normal;font-family:var(--font-ui);font-weight:600;letter-spacing:-.01em}
.ln-side ul a i{width:28px;height:28px;border-radius:8px;background:var(--chip);color:var(--ink);font-size:11px}
.ln-side ul a.on{background:linear-gradient(180deg,rgba(227,240,74,0) 0%,rgba(227,240,74,.35) 100%);color:var(--ink);box-shadow:inset 0 -2px 0 var(--lime)}
.ln-side ul a.on i{background:var(--graphite);color:#fff}
.ln-panels{display:grid;gap:20px}
.ln-panel{background:#fff;border-radius:var(--radius-lg);padding:clamp(20px,3vw,36px);box-shadow:var(--shadow-card);display:grid;gap:26px}
.ln-panel > div{display:grid;gap:10px}
.ln-ph{display:flex;gap:18px;align-items:flex-start}
.ln-ph > div{display:grid;gap:6px}
.ln-mono{width:56px;height:56px;border-radius:16px;background:var(--graphite);color:#fff;font-size:18px}
.ln-fit{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ln-fit > div{background:var(--sage);border-radius:var(--radius-md);padding:16px 18px;display:grid;gap:6px;align-content:start}
.ln-fit p{margin:0;font-size:14px;color:var(--sage-ink)}
.ln-fit .no{background:var(--bg-2)}
.ln-fit .no p{color:var(--muted)}
.ln-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.ln-cols > div{display:grid;gap:12px;align-content:start}
.ln-learn{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:lr}
.ln-learn li{counter-increment:lr;position:relative;padding-left:34px;font-size:14px;color:var(--text)}
.ln-learn li::before{content:counter(lr,decimal-leading-zero);position:absolute;left:0;top:1px;font:600 12px var(--font-ui);color:var(--muted-2)}
.ln-fmts{display:flex;flex-wrap:wrap;gap:10px}
.ln-fmt{flex:1 1 190px;display:grid;gap:4px;padding:12px 14px;border-radius:var(--radius-md);background:var(--bg-2);text-decoration:none;color:var(--text)}
.ln-fmt:hover{background:var(--chip)}
.ln-fmt b{font:600 14px var(--font-ui);color:var(--ink)}
.ln-fmt span{font:500 17px var(--font-display);color:var(--ink)}
.ln-fmt small{font:500 12px var(--font-ui);color:var(--muted-2)}
.ln-pf{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px solid var(--line-soft)}
.ln-pf p{margin:0}
@media (max-width:1000px){.ln-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .ln-explorer{grid-template-columns:minmax(0,1fr);gap:16px}
  .ln-side{top:calc(var(--hdr,72px) + 4px);z-index:30;padding:6px;border-radius:var(--radius-md)}
  .ln-side > .lbl,.ln-side > .link{display:none}
  .ln-side ul{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:4px}
  .ln-side ul a{flex:none}
}
@media (max-width:700px){
  .ln-teaser,.ln-honest,.ln-choose,.ln-fit,.ln-cols,.ln-q{grid-template-columns:minmax(0,1fr)}
  .ln-plats{grid-template-columns:1fr 1fr}
  .ln-ph{flex-direction:column;gap:12px}
}
@media (max-width:520px){.ln-steps{grid-template-columns:minmax(0,1fr)}.ln-pf .btn{width:100%;white-space:normal;text-align:center}}

/* ---------- шапка 25.10: шире на 5%, «О нас», выбор языка, вход в кабинет ---------- */
.site-header .wrap{max-width:calc(var(--w-page) * 1.05)}
.mega.drop{right:auto;width:min(580px,calc(100vw - 2 * var(--gutter)));padding:12px}
.dd-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dd-item{display:grid;gap:2px;padding:10px 12px;border-radius:var(--radius-sm);text-decoration:none;color:var(--ink)}
.dd-item b{font:600 14px var(--font-ui);display:flex;align-items:center;gap:8px}
.dd-item span{font-size:12.5px;color:var(--muted)}
a.dd-item:hover{background:var(--bg-2)}
a.dd-item.is-current{background:var(--bg-2);box-shadow:inset 3px 0 0 var(--lime)}
.dd-item.is-soon{cursor:default}
.dd-item.is-soon b{color:var(--muted)}
.soon-tag{font:600 10px var(--font-ui);font-style:normal;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--chip);border-radius:999px;padding:2px 7px}
.lang-dd{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:none;font:600 13px var(--font-ui);color:var(--ink);cursor:pointer}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{background:var(--chip)}
.lang-btn .car{display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;list-style:none;margin:0;padding:6px;background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-float),0 0 0 1px rgba(0,0,0,.05);z-index:70}
.lg-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--radius-sm);text-decoration:none;color:var(--ink);font-size:14px}
.lg-item b{width:24px;font:600 13px var(--font-ui);color:var(--muted)}
a.lg-item:hover{background:var(--bg-2)}
.lg-item.is-current b{color:var(--ink)}
.lg-item .tick{margin-left:auto;width:10px;height:6px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg) translateY(-2px)}
.lg-item.is-soon{color:var(--muted-2);cursor:default}
.lg-item.is-soon .soon-tag{margin-left:auto}
.lang-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px;flex-basis:100%}
.cab-btn{gap:8px}
.cab-ico{width:13px;height:13px;border:1.6px solid currentColor;border-radius:50% 50% 3px 3px;position:relative;flex:none}
.cab-ico::before{content:"";position:absolute;left:2.4px;top:-6px;width:5px;height:5px;border:1.6px solid currentColor;border-radius:50%}
@media (max-width:1100px){
  .site-header nav.open .dd-list,.site-header nav.open .lang-grid{grid-template-columns:1fr}
  .site-header nav.open .m-cta{flex-wrap:wrap}
}
@media (max-width:480px){.cab-btn .cab-ico{display:none}}

/* ---------- акценты меню: как стрелка логотипа — лимонный на тёмном, изумруд на светлом (лимонный на белом не читается) ---------- */
:root{--menu-accent:#1F7A58;--menu-accent-soft:#DDEFE6}
:root:not([data-theme="light"]){--menu-accent:#E3F04A;--menu-accent-soft:rgba(227,240,74,.14)}
.site-header nav a[aria-current="page"],.site-header nav button.is-current{box-shadow:inset 0 -2px 0 var(--menu-accent)}
a.dd-item.is-current{box-shadow:inset 3px 0 0 var(--menu-accent)}
:root .mcol li a.star span{color:var(--menu-accent);background:var(--menu-accent-soft)}
.mcol .more:hover{color:var(--menu-accent)}

/* ===== Мега-меню «Услуги» и «Решения»: слева разделы, справа их пункты (как у a-lux.kz) =====
   Выбранный пункт слева и правая область — одна подложка (var(--bg-2)): пункт «перетекает» в область справа. */
.mega.svc{right:auto;width:min(1180px,calc(100vw - 32px));padding:14px}
.msv2{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:420px}
.msv2.sm{min-height:300px;grid-template-columns:260px minmax(0,1fr)}
.msv-l{list-style:none;margin:0;padding:4px 0;display:grid;align-content:start;gap:2px}
.msv-cat{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 14px;border-radius:12px 0 0 12px;margin-right:0;text-decoration:none;color:var(--text);transition:background .18s,color .18s}
.msv-cat:hover{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}
.msv-cat[aria-current="true"]{background:var(--bg-2)}
.msv-cat[aria-current="true"]::after{content:"";position:absolute;right:-1px;top:0;bottom:0;width:2px;background:var(--bg-2)}
.msv-cat b{font:600 14.5px var(--font-ui);color:var(--ink)}
.msv-cat b em{font:600 10.5px var(--font-ui);font-style:normal;color:var(--green-ink);margin-left:6px}
.msv-cat span{font:600 12.5px var(--font-ui);color:var(--green-ink);white-space:nowrap}
.msv-r{min-width:0;background:var(--bg-2);border-radius:0 16px 16px 16px;padding:14px 16px}
.msv-p{display:grid;gap:10px;align-content:start;animation:msv-in .22s ease}
.msv-p[hidden]{display:none}
@keyframes msv-in{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.msv-p{animation:none}}
.msv-ph{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px 8px;border-bottom:1px solid var(--line-soft)}
.msv-ph > span{font-size:13px;color:var(--muted)}
/* услуги — список строк: название и цена в строку, описание под ними */
.msv-sg{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.msv-sg.two{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
.msv-s{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-content:start;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--text);transition:background .15s}
.msv-s:hover{background:var(--surface)}
.msv-s b{font:600 14px var(--font-ui);color:var(--ink)}
.msv-s.star b::after{content:"★";margin-left:6px;font-size:11px;color:var(--green-ink)}
.msv-s span{font:600 12.5px var(--font-ui);color:var(--green-ink);white-space:nowrap}
.msv-s small{grid-column:1/-1;font-size:12.5px;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mega.svc .mega-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:12px}
.mega.svc .mega-foot .more{font:600 13.5px var(--font-ui);color:var(--ink);text-decoration:none}
@media (max-width:1100px){.mega.svc{width:auto}.msv2,.msv2.sm{grid-template-columns:1fr;min-height:0}.msv-r{display:none}.msv-cat{border-radius:12px}.msv-cat[aria-current="true"]::after{display:none}}
/* выбранный пункт и правая область — одна ровная подложка без градиентов и свечения; выбранный пункт отмечен зелёным (26.10.2026) */
.msv-cat[aria-current="true"]{background:var(--bg-2)}
.msv-cat[aria-current="true"]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--green)}
.msv-cat[aria-current="true"] b{color:var(--green-ink)}
:root:not([data-theme="light"]) .msv-cat[aria-current="true"] b{color:var(--green)}
.msv-r{background:var(--bg-2)}

/* выпавшее меню: левая колонка ровно по высоте правой (верх и низ совпадают), без анимаций — мгновенный отклик (26.10.2026) */
.msv2{align-items:stretch}
.msv-l{padding:0;gap:0;grid-auto-rows:1fr;align-content:stretch;align-self:stretch}
.msv-l > li{display:grid}
.msv-cat,.msv-s{transition:none}
.msv-p{animation:none}
.msv-r{border-radius:16px}
.msv2:has(.msv-l > li:first-child .msv-cat[aria-current="true"]) .msv-r{border-top-left-radius:0}
.msv2:has(.msv-l > li:last-child .msv-cat[aria-current="true"]) .msv-r{border-bottom-left-radius:0}
.msv-cat{border-radius:12px 0 0 12px}

/* ===== 26.10.2026: стрелка из логотипа как маркер пунктов на всех экранах; заметные хлебные крошки ===== */
:root{--ar-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='16 -1 25 25'%3E%3Cpath d='M20 20 37 3M28.5 2.5h9v9' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.checks li::before,.hd-checks li::before,.pf-next .pf-card li::before{content:"";flex:none;width:.95em;height:.95em;margin-top:.28em;border:0;border-radius:0;transform:none;background:var(--logo-arrow);-webkit-mask:var(--ar-mask) center/contain no-repeat;mask:var(--ar-mask) center/contain no-repeat}
.page-hero .crumbs,.svx .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:500 14px/1.4 var(--font-ui);color:var(--muted)}
.page-hero .crumbs a,.svx .crumb a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--logo-arrow);text-decoration-thickness:2px;text-underline-offset:5px;transition:color .15s}
.page-hero .crumbs a:hover,.svx .crumb a:hover{color:var(--logo-arrow)}
.page-hero .crumbs > span[aria-hidden],.page-hero .crumbs > span:not(:last-child){color:var(--muted-2)}
.page-hero .crumbs > span:last-child{color:var(--text);font-weight:600}

/* меню «Решения» и страница решений: мало пунктов слева — они компактные сверху, вниз растёт только правая часть (26.10.2026) */
.msv2.few .msv-l{grid-auto-rows:auto;align-content:start;gap:2px}
.msv2.few:has(.msv-l > li:last-child .msv-cat[aria-current="true"]) .msv-r{border-bottom-left-radius:16px}
.sol-hub{padding-top:8px}
.sol-box{min-height:0;grid-template-columns:280px minmax(0,1fr)}
.sol-box .msv-l{position:sticky;top:96px;align-self:start}
.sol-box .msv-r{padding:24px}
.sol-p .msv-ph{display:grid;gap:4px;justify-content:start;margin-bottom:18px;padding-bottom:14px}
.sol-h{font:600 clamp(22px,2.4vw,30px)/1.15 var(--font-display);color:var(--ink);margin:0;letter-spacing:-.02em}
.sol-g{grid-template-columns:repeat(2,minmax(0,1fr))}
.sol-t{text-decoration:none;color:inherit}
.sol-t.star{box-shadow:0 0 0 1px rgba(227,240,74,.45),0 20px 40px -24px rgba(227,240,74,.35)}
.sol-ch{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sol-ch span{font:500 12px/1.3 var(--font-ui);padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:#D5E3DC}
.gt .pm .go{color:#E3F04A;font-weight:600}
.sol-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
.sol-r{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;padding:14px;border-radius:12px;text-decoration:none;color:var(--text)}
.sol-r:hover{background:var(--surface)}
.sol-r .ar{width:16px;height:16px;margin-top:3px;fill:none;stroke:var(--green);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.sol-r b{display:block;font:600 15px/1.3 var(--font-ui);color:var(--ink)}
.sol-r small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.sol-r p{margin:5px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.sol-r .go{display:block;margin-top:7px;font:600 12.5px var(--font-ui);color:var(--green-ink)}
:root:not([data-theme="light"]) .sol-r .go{color:var(--green)}
.sol-hl{outline:2px solid var(--green);outline-offset:2px}
.sol-tags{display:grid;gap:14px}
.sol-tg{display:flex;flex-wrap:wrap;gap:8px}
.sol-tg a{padding:7px 12px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--muted);text-decoration:none}
.sol-tg a:hover{color:var(--ink);border-color:var(--green)}
@media (max-width:1100px){.sol-box{grid-template-columns:1fr}.sol-box .msv-r{display:block;border-radius:16px}.sol-box .msv-l{position:static;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.sol-box .msv-cat{border-radius:12px}.sol-box .msv-cat[aria-current="true"]::after{display:none}}
@media (max-width:760px){.sol-g,.sol-rows{grid-template-columns:1fr}}

/* ===== 26.10.2026: призыв в подвале — яркий, салатово-изумрудный, со стрелкой из логотипа (не путать с тёмным призывом продвижения) ===== */
.cta-banner{padding:clamp(34px,5vw,64px) clamp(26px,5vw,64px);border-radius:32px;align-items:flex-end;isolation:isolate;
  background:conic-gradient(from 200deg at 85% 30%,#E3F04A,#B8EC6A,#4FD1A0,#2FB383,#E3F04A);background-size:140% 140%;animation:cta-flow 14s ease-in-out infinite alternate;
  box-shadow:0 40px 80px -40px rgba(47,179,131,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.cta-banner::before{content:"";position:absolute;inset:0;z-index:-1;border:0;border-radius:inherit;width:auto;height:auto;left:0;top:0;background:radial-gradient(60% 80% at 10% 100%,rgba(255,255,255,.45),transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes cta-flow{0%{background-position:0% 0%}100%{background-position:100% 100%}}
.cta-banner .cta-ar{position:absolute;right:clamp(140px,22vw,360px);top:-30px;width:clamp(160px,18vw,260px);height:clamp(160px,18vw,260px);fill:none;stroke:rgba(18,21,18,.12);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;animation:cta-ar 6s ease-in-out infinite;pointer-events:none}
@keyframes cta-ar{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-10px)}}
.cta-banner .cta-h{margin:0;max-width:640px;font:600 clamp(28px,3.6vw,48px)/1.05 var(--font-display);letter-spacing:-.025em;color:#121512}
.cta-banner .cta-p{margin:12px 0 0;font-size:clamp(15px,1.4vw,18px);color:#24301a}
.cta-banner .btn{background:#121512;color:#E3F04A;box-shadow:0 14px 30px -12px rgba(0,0,0,.45);min-height:56px;padding:0 28px;font-size:16px}
.cta-banner .btn:hover{background:#000}
@media (prefers-reduced-motion:reduce){.cta-banner,.cta-banner .cta-ar{animation:none}}
[data-theme="dark"] .cta-banner{background:conic-gradient(from 200deg at 85% 30%,#E3F04A,#B8EC6A,#4FD1A0,#2FB383,#E3F04A);background-size:140% 140%}

/* прежняя серая плашка призыва в подвале — для сравнения (26.10.2026) */
.cta-banner.cta-old{margin-top:18px;padding:30px 48px;border-radius:var(--radius-lg);align-items:center;animation:none;background:linear-gradient(180deg,#F4F5F5,#DCDEDE);box-shadow:0 20px 40px rgba(0,0,0,.10),inset 0 1px 0 #fff}
.cta-banner.cta-old::before{inset:auto;z-index:0;width:420px;height:420px;left:20%;top:-180px;border-radius:50%;border:44px solid rgba(255,255,255,.75);background:none}
.cta-banner.cta-old .cta-h{font:500 clamp(22px,2.4vw,30px)/1.2 var(--font-display);color:#121512;letter-spacing:-.01em}
.cta-banner.cta-old .cta-p{color:#4a524e}
.cta-banner.cta-old .btn{background:#121512;color:#fff;min-height:48px}
:root:not([data-theme="light"]) .cta-banner.cta-old{background:linear-gradient(180deg,#22282A,#161A19);box-shadow:0 20px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12)}
:root:not([data-theme="light"]) .cta-banner.cta-old::before{border-color:rgba(205,210,207,.85)}
:root:not([data-theme="light"]) .cta-banner.cta-old .cta-h{color:#F2F4F3}
:root:not([data-theme="light"]) .cta-banner.cta-old .cta-p{color:#AEB6B2}
:root:not([data-theme="light"]) .cta-banner.cta-old .btn{background:#F2F4F3;color:#121512}