/* 2xS Community — дизайн-система v1.1: токены и компоненты. */
/* DS v1.1 · 2xS Community
   Layout: одна колонка 1200px, крупная гротесковая типографика слева, один стеклянный объект справа; секции идут по порядку Hero → Темы → В фокусе → Инструменты → О проекте → Контакт.
   Светлая тема (Apple-inspired) — на :root; тёмная (Product Hub / Revolut-inspired) — в двух тёмных блоках. Один DOM, разные токены. */
@property --angle { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

:root{--gw1:#3E63DD;--gw2:#7A5AF0;--gw3:#E2537E;--gw4:#F07A52;--gw-hi:rgba(255,255,255,.9);--gw-sh:rgba(40,52,110,.22);
  /* Палитра — светлая */
  --bg:#F5F5F7; --bg-raised:#FFFFFF; --ink:#111216; --ink-2:#555A66; --ink-3:#868B97;
  --line:rgba(17,18,22,.09); --line-strong:rgba(17,18,22,.16);
  --surface:rgba(255,255,255,.66); --surface-solid:#FFFFFF; --surface-2:rgba(17,18,22,.045); --surface-hover:rgba(17,18,22,.07);
  --blue:#2E5BFF; --pink:#EE6FA0; --salmon:#FF9473; --violet:#8A6BFF;
  --blue-soft:rgba(46,91,255,.10); --pink-soft:rgba(238,111,160,.10); --salmon-soft:rgba(255,148,115,.12);
  --cta-bg:#15161B; --cta-fg:#FFFFFF; --cta-hover:#2A2C33;
  --header-bg:rgba(245,245,247,.74);
  --focus:#2E5BFF;
  --ok:#14804A; --ok-soft:rgba(20,128,74,.10); --warn:#9A5B00; --warn-soft:rgba(154,91,0,.10); --danger:#C23350; --danger-soft:rgba(194,51,80,.09);
  /* Стекло */
  --glass-hi:rgba(255,255,255,.62); --glass-lo:rgba(255,255,255,.10); --glass-edge:rgba(255,255,255,.9);
  --glass-shadow:rgba(46,91,255,.22); --glass-fallback:rgba(236,240,255,.92);
  --blob-a:#4F7BFF; --blob-b:#F48DB8; --blob-c:#FFA585; --blob-d:#9D85FF; --blob-op:.72;
  /* Секционные роли: обе темы используют одни и те же роли, меняются только значения */
  --topic-border:rgba(17,18,22,.07); --topic-pad:28px; --topic-end:rgba(255,255,255,.72);
  --topic-edge:rgba(255,255,255,1); --topic-shadow:0 1px 1px rgba(17,18,40,.04), 0 22px 44px -26px rgba(30,40,90,.28);
  --tint-blue:rgba(46,91,255,.10); --tint-violet:rgba(138,107,255,.11); --tint-salmon:rgba(255,148,115,.14);
  --panel-bg:#F5F5F7; --panel-border:rgba(17,18,22,.07); --panel-edge:rgba(255,255,255,1); --panel-shadow:0 1px 1px rgba(17,18,40,.04), 0 30px 60px -36px rgba(30,40,90,.30);
  --tools-bg:transparent; --tools-ink:#111216; --tools-ink-2:#555A66; --tools-line:rgba(17,18,22,.09); --tools-surface:rgba(255,255,255,.66); --tools-surface-hover:rgba(255,255,255,.94); --tools-cta-bg:#15161B; --tools-cta-fg:#FFFFFF; --tools-accent:#2E5BFF;
  --tools-blue:#2E5BFF; --tools-blue-soft:rgba(46,91,255,.10); --tools-surface-solid:#FFFFFF;
  --tools-lg-top:rgba(255,255,255,.78); --tools-lg-bot:rgba(255,255,255,.42); --tools-lg-line:rgba(17,18,22,.07); --tools-lg-edge:rgba(255,255,255,1); --tools-lg-edge2:rgba(255,255,255,.55); --tools-lg-spec:rgba(255,255,255,.9); --tools-lg-shadow:0 1px 1px rgba(17,18,40,.04), 0 22px 44px -26px rgba(30,40,90,.28);
  --ribbon-op:.5;
  --feature-canvas:#F5F5F7; --tools-canvas:#F5F5F7;
  /* Подсветка под курсором (карточки и плитки) */
  --glow:rgba(46,91,255,.13); --glow-blend:normal; --glow-size:320px; --glow-rest:0; --lg-spec-rest:.55;
  /* Стеклянная картинка героя: поле картинки растворяется в фоне страницы */
  --hero-blend:darken;
  /* Тени, подложки и постоянные цвета компонентов */
  --mask:#000000; --on-gradient:#FFFFFF; --paper:#FFFFFF; --letterbox:#000000; --qr-muted:#555A66;
  --gloss:rgba(255,255,255,.62); --gloss-0:rgba(255,255,255,0);
  --cta-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.12), 0 14px 30px -14px rgba(10,14,40,.55);
  --btn2-shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 24px -16px rgba(30,40,90,.3); --round-shadow:0 6px 16px -10px rgba(30,40,90,.35);
  --header-shadow:0 10px 30px -24px rgba(0,0,0,.4); --menu-shadow:0 30px 60px -30px rgba(0,0,0,.4);
  --pop-shadow:0 24px 60px -20px rgba(0,0,0,.5); --pop-shadow-sm:0 18px 40px -20px rgba(0,0,0,.35); --notice-shadow:0 20px 50px -24px rgba(0,0,0,.45);
  --tab-shadow:0 8px 24px -12px rgba(0,0,0,.55); --card-shadow-lg:0 40px 100px -40px rgba(0,0,0,.35); --frame-shadow:0 30px 80px -40px rgba(0,0,0,.4); --qr-shadow:0 30px 80px -40px rgba(0,0,0,.45);
  --knob:#FFFFFF; --knob-shadow:0 1px 3px rgba(0,0,0,.3); --scrim:rgba(5,6,10,.45); --frame-bg:#F2F4F8;
  /* Типографика */
  --font:'Onest', 'Golos Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --t-display:clamp(40px, 4.7vw, 68px); --t-h2:clamp(34px, 4.4vw, 56px); --t-h3:clamp(24px, 2.4vw, 32px);
  --t-lead:clamp(18px, 1.6vw, 21px); --t-body:16px; --t-small:14px; --t-micro:12px;
  /* Ритм */
  --r-xl:32px; --r-lg:24px; --r-md:16px; --r-sm:12px; --r-pill:999px;
  --sec:clamp(88px, 11vw, 148px); --wrap:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* Уровни пирамиды каталога */
  --l1:var(--blue); --l2:var(--violet); --l3:var(--pink); --l4:var(--salmon);
  --l1-soft:var(--blue-soft); --l2-soft:rgba(138,107,255,.12); --l3-soft:var(--pink-soft); --l4-soft:var(--salmon-soft);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --gw1:#7E9BFF;--gw2:#B49CFF;--gw3:#FF8DB4;--gw4:#FFB08F;--gw-hi:rgba(255,255,255,.25);--gw-sh:rgba(120,90,255,.35);
    --bg:#090B10; --bg-raised:#10131A; --ink:#F3F4F8; --ink-2:#A3A9B7; --ink-3:#6F7585;
    --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
    --surface:rgba(255,255,255,.045); --surface-solid:#141823; --surface-2:rgba(255,255,255,.06); --surface-hover:rgba(255,255,255,.09);
    --blue:#6489FF; --pink:#F48FBB; --salmon:#FFA58A; --violet:#A28EFF;
    --blue-soft:rgba(100,137,255,.16); --pink-soft:rgba(244,143,187,.14); --salmon-soft:rgba(255,165,138,.14);
    --cta-bg:#F3F4F8; --cta-fg:#0B0D12; --cta-hover:#FFFFFF;
    --header-bg:rgba(9,11,16,.72); --focus:#8CA7FF;
    --ok:#5DD39E; --ok-soft:rgba(93,211,158,.13); --warn:#F5C26B; --warn-soft:rgba(245,194,107,.13); --danger:#FF8A9E; --danger-soft:rgba(255,138,158,.13);
    --glass-hi:rgba(255,255,255,.16); --glass-lo:rgba(255,255,255,.02); --glass-edge:rgba(255,255,255,.55);
    --glass-shadow:rgba(140,90,255,.30); --glass-fallback:rgba(30,34,52,.94);
    --blob-a:#3D63FF; --blob-b:#E0619A; --blob-c:#FF8A66; --blob-d:#7B5CFF; --blob-op:.62;
    --topic-border:rgba(255,255,255,.08); --topic-pad:28px; --topic-end:rgba(255,255,255,.02);
    --topic-edge:rgba(255,255,255,.22); --topic-shadow:0 30px 60px -30px rgba(0,0,0,.7);
    --tint-blue:rgba(100,137,255,.30); --tint-violet:rgba(162,142,255,.28); --tint-salmon:rgba(255,165,138,.26);
    --panel-border:rgba(255,255,255,.08); --panel-edge:rgba(255,255,255,.08); --panel-shadow:0 0 0 transparent;
    --tools-bg:transparent; --tools-ink:#F3F4F8; --tools-ink-2:#A4AAB8; --tools-line:rgba(255,255,255,.09); --tools-surface:rgba(255,255,255,.045); --tools-surface-hover:rgba(255,255,255,.09); --tools-cta-bg:#F3F4F8; --tools-cta-fg:#0D0F15; --tools-accent:#8CA7FF;
    --tools-blue:#8CA7FF; --tools-blue-soft:rgba(140,167,255,.16); --tools-surface-solid:#161922;
    --tools-lg-top:rgba(255,255,255,.08); --tools-lg-bot:rgba(255,255,255,.02); --tools-lg-line:rgba(255,255,255,.08); --tools-lg-edge:rgba(255,255,255,.22); --tools-lg-edge2:rgba(255,255,255,.08); --tools-lg-spec:rgba(255,255,255,.14); --tools-lg-shadow:0 30px 60px -30px rgba(0,0,0,.7);
    --ribbon-op:.85;
    --feature-canvas:#111319; --tools-canvas:#090B10; --panel-bg:#111319;
    --glow:initial; --glow-blend:soft-light; --glow-rest:.55;
    --hero-blend:lighten;
    --l2-soft:rgba(162,142,255,.16);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --gw1:#7E9BFF;--gw2:#B49CFF;--gw3:#FF8DB4;--gw4:#FFB08F;--gw-hi:rgba(255,255,255,.25);--gw-sh:rgba(120,90,255,.35);
  --bg:#090B10; --bg-raised:#10131A; --ink:#F3F4F8; --ink-2:#A3A9B7; --ink-3:#6F7585;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --surface:rgba(255,255,255,.045); --surface-solid:#141823; --surface-2:rgba(255,255,255,.06); --surface-hover:rgba(255,255,255,.09);
  --blue:#6489FF; --pink:#F48FBB; --salmon:#FFA58A; --violet:#A28EFF;
  --blue-soft:rgba(100,137,255,.16); --pink-soft:rgba(244,143,187,.14); --salmon-soft:rgba(255,165,138,.14);
  --cta-bg:#F3F4F8; --cta-fg:#0B0D12; --cta-hover:#FFFFFF;
  --header-bg:rgba(9,11,16,.72); --focus:#8CA7FF;
  --ok:#5DD39E; --ok-soft:rgba(93,211,158,.13); --warn:#F5C26B; --warn-soft:rgba(245,194,107,.13); --danger:#FF8A9E; --danger-soft:rgba(255,138,158,.13);
  --glass-hi:rgba(255,255,255,.16); --glass-lo:rgba(255,255,255,.02); --glass-edge:rgba(255,255,255,.55);
  --glass-shadow:rgba(140,90,255,.30); --glass-fallback:rgba(30,34,52,.94);
  --blob-a:#3D63FF; --blob-b:#E0619A; --blob-c:#FF8A66; --blob-d:#7B5CFF; --blob-op:.62;
  --topic-border:rgba(255,255,255,.08); --topic-pad:28px; --topic-end:rgba(255,255,255,.02);
  --topic-edge:rgba(255,255,255,.22); --topic-shadow:0 30px 60px -30px rgba(0,0,0,.7);
  --tint-blue:rgba(100,137,255,.30); --tint-violet:rgba(162,142,255,.28); --tint-salmon:rgba(255,165,138,.26);
  --panel-border:rgba(255,255,255,.08); --panel-edge:rgba(255,255,255,.08); --panel-shadow:0 0 0 transparent;
  --tools-bg:transparent; --tools-ink:#F3F4F8; --tools-ink-2:#A4AAB8; --tools-line:rgba(255,255,255,.09); --tools-surface:rgba(255,255,255,.045); --tools-surface-hover:rgba(255,255,255,.09); --tools-cta-bg:#F3F4F8; --tools-cta-fg:#0D0F15; --tools-accent:#8CA7FF;
  --tools-blue:#8CA7FF; --tools-blue-soft:rgba(140,167,255,.16); --tools-surface-solid:#161922;
  --tools-lg-top:rgba(255,255,255,.08); --tools-lg-bot:rgba(255,255,255,.02); --tools-lg-line:rgba(255,255,255,.08); --tools-lg-edge:rgba(255,255,255,.22); --tools-lg-edge2:rgba(255,255,255,.08); --tools-lg-spec:rgba(255,255,255,.14); --tools-lg-shadow:0 30px 60px -30px rgba(0,0,0,.7);
  --ribbon-op:.85;
  --feature-canvas:#111319; --tools-canvas:#090B10; --panel-bg:#111319;
  --glow:initial; --glow-blend:soft-light; --glow-rest:.55;
  --hero-blend:lighten;
  --l2-soft:rgba(162,142,255,.16);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--t-body);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}
.wrap{max-width:calc(var(--wrap) + 64px);margin:0 auto;padding-left:max(24px, env(safe-area-inset-left,0px));padding-right:max(24px, env(safe-area-inset-right,0px))}
@media (max-width:520px){.wrap{padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px))}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.theme-anim, .theme-anim *{transition:background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), fill .22s, stroke .22s, box-shadow .22s !important}

/* Кнопки */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:var(--r-pill);border:0;cursor:pointer;font-weight:600;font-size:16px;text-decoration:none;transition:transform .2s var(--ease), background-color .2s, box-shadow .2s;white-space:nowrap}
.btn svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--cta-bg);color:var(--cta-fg);box-shadow:var(--cta-shadow)}
.btn-primary:hover{background:var(--cta-hover);transform:translateY(-2px)}
.btn-secondary{background:var(--surface-2);color:var(--ink)}
.btn-secondary:hover{background:var(--surface-hover);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{height:40px;padding:0 18px;font-size:15px}
.btn-xs{height:32px;padding:0 12px;font-size:13px;gap:6px}
.btn-danger{background:var(--danger-soft);color:var(--danger)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.round{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;background:var(--surface-2);border:0;cursor:pointer;transition:background-color .2s, transform .25s var(--ease)}
.round svg{width:18px;height:18px}
.round:hover{background:var(--surface-hover)}

/* Шапка */
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;transition:background-color .3s, box-shadow .3s, backdrop-filter .3s}
.header.scrolled{background:var(--header-bg);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);box-shadow:0 1px 0 var(--line)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.header.scrolled{background:var(--bg)}}
.header-in{display:flex;align-items:center;gap:24px;height:76px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:21px;letter-spacing:-.03em;text-decoration:none;white-space:nowrap}
.logo .mark{height:30px;width:auto;transform:translateY(1px)}
.glass-word{position:relative;font-weight:700;letter-spacing:-.025em;color:transparent;
  background:linear-gradient(180deg,var(--gloss) 0 36%,var(--gloss-0) 44%),
    linear-gradient(100deg,var(--gw1) 0%,var(--gw2) 28%,var(--gw3) 52%,var(--gw4) 72%,var(--gw1) 100%);
  background-size:100% 100%,220% 100%;background-position:0 0,0% 0;
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 1px 0 var(--gw-hi)) drop-shadow(0 3px 6px var(--gw-sh));
  animation:gwSheen 9s ease-in-out infinite alternate}
@keyframes gwSheen{to{background-position:0 0,100% 0}}
@media (prefers-reduced-motion:reduce){.glass-word{animation:none}}

.logo span{font-weight:600;letter-spacing:-.02em}
.logo b{font-weight:800}
.nav{display:flex;gap:6px;margin-left:auto}
.nav a{padding:8px 14px;border-radius:var(--r-pill);text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-2);transition:color .2s, background-color .2s}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:12px}
.theme-btn{width:40px;height:40px}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .theme-btn .sun{display:none}:root:not([data-theme="light"]) .theme-btn .moon{display:block}}
.burger{display:none}
.mnav{display:none}
@media (max-width:900px){
  .nav{display:none}
  .header-actions{margin-left:auto}
  .burger{display:inline-grid}
  .mnav{position:fixed;inset:76px 0 auto;z-index:49;background:var(--bg-raised);border-bottom:1px solid var(--line);padding:12px max(16px, env(safe-area-inset-left,0px)) 20px;flex-direction:column;gap:2px;box-shadow:var(--menu-shadow)}
  .mnav.open{display:flex}
  .mnav a{padding:14px 8px;font-size:18px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
}
@media (max-width:520px){.header-actions{gap:6px}.header-actions .btn-login{padding:0 14px}.logo{font-size:19px}.header-in{gap:12px}.round.theme-btn,.burger{width:38px;height:38px}}

/* Появление при прокрутке */
html.js .reveal{opacity:0;transform:translateY(14px)}
html.js .reveal.in{opacity:1;transform:none;transition:opacity .38s var(--ease), transform .38s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}

/* HERO */
.hero{position:relative;padding-block:clamp(28px,5vw,56px) clamp(56px,7vw,96px);overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:24px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow.accent{color:var(--blue)}
.hero h1{max-width:19ch;font-size:var(--t-display);font-weight:800;letter-spacing:-.045em;line-height:.98;margin-top:22px}
.hero .lead{font-size:var(--t-lead);color:var(--ink-2);max-width:30ch;margin-top:26px;line-height:1.45}
.hero .actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.hero-copy > *{animation:rise .8s var(--ease) both}
.hero-copy > :nth-child(2){animation-delay:.08s}
.hero-copy > :nth-child(3){animation-delay:.16s}
.hero-copy > :nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-art{order:-1;width:min(420px,88%);margin:0 auto -10px}}

/* Стеклянный объект */
.hero-art{mix-blend-mode:var(--hero-blend);position:relative;width:106%;max-width:680px;aspect-ratio:1/1;justify-self:end;margin-right:-3%;margin-block:-30px;z-index:0}
.hero-copy{position:relative;z-index:2}
/* Стеклянная сцена: WebGL-холст поверх статичного кадра того же рендера */
.glass-stage{position:relative;isolation:isolate}
.glass-stage{--px:0;--py:0;--sy:0}
.glass-stage .gfb{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;transform:translate3d(calc(var(--px) * 14px), calc(var(--py) * 10px + var(--sy) * 1px), 0) rotate(calc(var(--px) * .8deg));transition:transform .9s var(--ease)}
.only-dark{display:none!important}
:root[data-theme="dark"] .only-dark{display:block!important}:root[data-theme="dark"] .only-light{display:none!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .only-dark{display:block!important}:root:not([data-theme="light"]) .only-light{display:none!important}}
.glass-stage .gfb,.bg-art{-webkit-mask-image:linear-gradient(90deg,transparent,var(--mask) 9%,var(--mask) 91%,transparent),linear-gradient(180deg,transparent,var(--mask) 9%,var(--mask) 91%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,var(--mask) 9%,var(--mask) 91%,transparent),linear-gradient(180deg,transparent,var(--mask) 9%,var(--mask) 91%,transparent);mask-composite:intersect}
.ribbon-art .bg-art,.hero-waves .bg-art{-webkit-mask-image:linear-gradient(90deg,transparent,var(--mask) 12%,var(--mask) 100%),linear-gradient(180deg,transparent,var(--mask) 10%,var(--mask) 90%,transparent);mask-image:linear-gradient(90deg,transparent,var(--mask) 12%,var(--mask) 100%),linear-gradient(180deg,transparent,var(--mask) 10%,var(--mask) 90%,transparent)}
/* Линза героя: круглая растушёвка вместо прямоугольной и смешивание с фоном (--hero-blend) — края картинки не видны в обеих темах */
.hero-art .gfb{-webkit-mask-image:radial-gradient(closest-side,var(--mask) 70%,transparent 100%);mask-image:radial-gradient(closest-side,var(--mask) 70%,transparent 100%)}
.hero-art .gfb{animation:discIn 1.2s var(--ease) both}
@keyframes discIn{from{opacity:0;translate:0 28px;scale:.96}to{opacity:1;translate:0 0;scale:1}}

/* Секции */
.section{padding-block:var(--sec) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sec-head h2{font-size:var(--t-h2);margin-top:14px}
.sec-head .sub{color:var(--ink-2);font-size:var(--t-lead);max-width:44ch;margin-top:16px;line-height:1.45}

/* Темы */
.topics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.topic{position:relative;display:flex;flex-direction:column;gap:14px;padding:var(--topic-pad);border-radius:var(--r-lg);background:linear-gradient(160deg,var(--tint-a),var(--topic-end) 70%);border:1px solid var(--topic-border);box-shadow:inset 0 1px 0 var(--topic-edge),var(--topic-shadow);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);text-align:left;cursor:pointer;transition:transform .25s var(--ease), background-color .25s, border-color .25s;color:var(--ink)}
.topic[data-c="blue"]{--tint-a:var(--tint-blue);--c:var(--blue)}
.topic[data-c="violet"]{--tint-a:var(--tint-violet);--c:var(--violet)}
.topic[data-c="salmon"]{--tint-a:var(--tint-salmon);--c:var(--salmon)}
.topic:hover{transform:translateY(-3px)}
.topic .ico{display:block;width:40px;height:40px;color:var(--c)}
.topic .ico svg{width:100%;height:100%}
.topic h3{font-size:var(--t-h3)}
.topic p{color:var(--ink-2);max-width:30ch}
.topic .row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px}
.topic .bar{width:40px;height:3px;border-radius:2px;background:var(--c)}
.topic .round{transition:transform .3s var(--ease), background-color .2s}
.topic[aria-expanded="true"] .round{transform:rotate(90deg);background:var(--cta-bg);color:var(--cta-fg)}
.topic-panel{margin-top:20px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease), opacity .3s;opacity:0}
.topic-panel.open{grid-template-rows:1fr;opacity:1}
.topic-panel > div{min-height:0}
.topic-panel .inner{padding:32px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px}
.topic-panel h4{font-size:24px;letter-spacing:-.025em}
.topic-panel p{color:var(--ink-2);margin-top:12px;max-width:56ch}
.related{display:flex;flex-direction:column;gap:10px}
.related .lbl{font-size:13px;color:var(--ink-3)}
@media (max-width:900px){.topics-grid{grid-template-columns:1fr}.topic-panel .inner{grid-template-columns:1fr;padding:24px}}

/* В фокусе */
.feature{position:relative;border-radius:var(--r-xl);background:var(--panel-bg);border:1px solid var(--panel-border);overflow:hidden}
.feature-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:32px;padding:clamp(0px,4vw,56px) clamp(24px,4vw,56px)}
.feature h2{font-size:var(--t-h2);margin-top:14px}
.feature .sub{color:var(--ink-2);font-size:var(--t-lead);margin-top:20px;max-width:38ch;line-height:1.45}
.feature .actions{margin-top:30px}
.stack-wrap{position:relative;aspect-ratio:1.15/1}
@media (max-width:900px){.feature-grid{grid-template-columns:1fr}.stack-wrap{max-width:440px;width:100%;margin:0 auto}}

.steps{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.steps.open{grid-template-rows:1fr}
.steps > div{min-height:0;overflow:hidden}
.steps ol{list-style:none;margin:0;padding:8px clamp(24px,4vw,56px) clamp(24px,4vw,56px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.steps li{counter-increment:s;padding:22px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.steps li h4{font-size:19px;margin-top:14px;letter-spacing:-.02em}
.steps li p{color:var(--ink-2);margin-top:8px;font-size:15px}
@media (max-width:900px){.steps ol{grid-template-columns:1fr}}

/* Исследования */
.research{margin-top:56px}
.research h3{font-size:22px;letter-spacing:-.02em}
.r-list{margin-top:18px;border-top:1px solid var(--line)}
.r-item{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:20px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--line);text-decoration:none;transition:background-color .2s, padding .25s var(--ease)}
.r-item:hover{background:var(--surface-2);padding-inline:14px}
.r-item time{color:var(--ink-3);font-size:14px;font-variant-numeric:tabular-nums}
.r-item b{font-weight:600;font-size:18px;letter-spacing:-.015em}
.r-item span{display:block;color:var(--ink-2);font-size:15px;margin-top:4px}
.r-item svg{width:18px;height:18px;color:var(--ink-3)}
@media (max-width:600px){.r-item{grid-template-columns:minmax(0,1fr) auto}.r-item time{grid-column:1/-1}}

/* Инструменты: секция в цветах текущей темы, значения — токены --tools-* */
.tools{--blue:var(--tools-blue);--blue-soft:var(--tools-blue-soft);--lg-top:var(--tools-lg-top);--lg-bot:var(--tools-lg-bot);--lg-line:var(--tools-lg-line);--lg-edge:var(--tools-lg-edge);--lg-edge2:var(--tools-lg-edge2);--lg-spec:var(--tools-lg-spec);--lg-shadow:var(--tools-lg-shadow);--surface-solid:var(--tools-surface-solid);--ink:var(--tools-ink);--ink-2:var(--tools-ink-2);--line:var(--tools-line);--surface:var(--tools-surface);--surface-hover:var(--tools-surface-hover);--cta-bg:var(--tools-cta-bg);--cta-fg:var(--tools-cta-fg);background:var(--tools-bg);color:var(--ink);margin-top:var(--sec);padding-block:var(--sec);position:relative;overflow:clip}
.tools-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.tools h2{font-size:var(--t-h2);margin-top:14px}
.tools .eyebrow.accent{color:var(--tools-accent)}
.tools .sub{color:var(--ink-2);font-size:var(--t-lead);margin-top:20px;max-width:38ch;line-height:1.45}
.sheets{position:relative;aspect-ratio:1.5/1}
.tool-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.tool{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);transition:transform .25s var(--ease), background-color .25s}
.tool:hover{transform:translateY(-3px);background:var(--surface-hover)}
.tool .ico{display:block;width:30px;height:30px;color:var(--ink)}
.tool .ico svg{display:block;width:100%;height:100%}
.tool h3{font-size:22px;letter-spacing:-.025em}
.tool p{color:var(--ink-2);font-size:15px}
.tool .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px}
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.danger{background:var(--danger-soft);color:var(--danger)}
.pill.blue{background:var(--blue-soft);color:var(--blue)}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.tool details{border-top:1px solid var(--line);padding-top:12px}
.tool summary{cursor:pointer;font-weight:600;font-size:14.5px;list-style:none;display:flex;align-items:center;gap:8px}
.tool summary::-webkit-details-marker{display:none}
.tool summary svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.tool details[open] summary svg{transform:rotate(90deg)}
.tool details p{margin-top:10px}
@media (max-width:900px){.tools-grid,.tool-cards{grid-template-columns:1fr}}

/* О проекте */
.about{position:relative;padding-block:var(--sec) 0;overflow:clip}
.about-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:48px;align-items:center}
.about-main{display:flex;flex-direction:column;gap:32px}
.about-main .author{max-width:520px}
.symbol{aspect-ratio:1/1;width:100%;max-width:520px;justify-self:end}
.about h2{font-size:var(--t-h2);margin-top:14px}
.about .sub{color:var(--ink-2);font-size:var(--t-lead);margin-top:20px;max-width:40ch;line-height:1.45}
.author{padding:28px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.author{background:var(--surface-solid)}}
.author .who{display:flex;gap:16px;align-items:center}
.monogram{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:19px;color:var(--on-gradient);background:conic-gradient(from 200deg, var(--blue), var(--violet), var(--pink), var(--salmon), var(--blue))}
.author h3{font-size:22px;letter-spacing:-.02em}
.author .role{color:var(--ink-2);font-size:15px;margin-top:2px}
.author p.txt{color:var(--ink-2);margin-top:18px}
.author .links{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}

/* Контакт */
.contact{position:relative;z-index:1;margin-top:clamp(64px,8vw,110px);border-radius:var(--r-xl);padding:clamp(28px,4vw,48px);background:linear-gradient(120deg, var(--surface), var(--surface)) padding-box;border:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center;overflow:hidden;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.contact::before{content:"";position:absolute;inset:-40% -10% auto 40%;height:180%;background:radial-gradient(circle at 30% 50%, var(--blob-a), transparent 45%), radial-gradient(circle at 70% 50%, var(--blob-b), transparent 45%);opacity:calc(var(--blob-op) * .35);filter:blur(40px);z-index:-1}
.contact h2{font-size:clamp(30px,3.6vw,46px)}
.contact .sub{color:var(--ink-2);margin-top:14px;max-width:44ch}
.channels{display:flex;flex-direction:column;gap:10px}
.channel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:var(--r-md);background:var(--bg-raised);border:1px solid var(--line)}
.channel .k{font-size:13px;color:var(--ink-3)}
.channel .v{font-weight:600;word-break:break-all}
.channel a.v{text-decoration:none}
.channel a.v:hover{text-decoration:underline}
@media (max-width:900px){.contact{grid-template-columns:1fr}}

/* Подвал */
.footer{padding-block:56px 40px;margin-top:64px;border-top:1px solid var(--line);color:var(--ink-2);font-size:15px}
.footer-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.footer nav{display:flex;gap:20px;flex-wrap:wrap}
.footer a{text-decoration:none}
.footer a:hover{color:var(--ink)}

/* ===== Вход ===== */
.auth{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;padding-block:40px}
.auth .bg{position:absolute;inset:0;pointer-events:none}
.auth .bg .blob{filter:blur(80px)}
.auth-card{position:relative;width:min(440px,100%);padding:36px;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:var(--card-shadow-lg)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.auth-card{background:var(--surface-solid)}}
.auth-card h1{font-size:34px;letter-spacing:-.035em;margin-top:28px}
.auth-card .sub{color:var(--ink-2);margin-top:10px}
.target{margin-top:20px;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-md);background:var(--blue-soft);color:var(--ink);font-size:14.5px}
.target svg{width:18px;height:18px;color:var(--blue);flex:none}
.field{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.field label{font-size:14px;font-weight:600}
.input{height:52px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--bg-raised);padding:0 16px;font:inherit;color:var(--ink);transition:border-color .2s, box-shadow .2s;width:100%}
.input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 4px var(--blue-soft)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.pw{position:relative}
.pw .input{padding-right:52px}
.pw button{position:absolute;right:6px;top:6px;width:40px;height:40px;border-radius:10px;border:0;background:transparent;cursor:pointer;color:var(--ink-3);display:grid;place-items:center}
.pw button svg{width:20px;height:20px}
.err{display:none;margin-top:16px;padding:12px 14px;border-radius:var(--r-md);background:var(--danger-soft);color:var(--danger);font-size:14.5px}
.err.show{display:block}
.auth-card .btn{width:100%;justify-content:center;margin-top:24px}
.auth-foot{margin-top:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.auth-foot a{text-decoration:none;font-weight:600;color:var(--ink)}
.auth-top{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));left:0;right:0}
.auth-top .wrap{display:flex;justify-content:space-between;align-items:center}

/* ===== Клиентская оболочка ===== */
.cbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--header-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.cbar-in{display:flex;align-items:center;gap:14px;height:64px}
.cbar .sep{width:1px;height:22px;background:var(--line-strong)}
.cbar .title{font-weight:600;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbar .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.cbar .logo{font-size:18px}
@media (max-width:700px){.cbar .hide-sm{display:none}}
.mats{padding-block:56px 80px}
.mats h1{font-size:clamp(34px,4vw,48px);letter-spacing:-.04em}
.mats .sub{color:var(--ink-2);margin-top:10px}
.mat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:36px}
.mat{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);overflow:hidden;text-decoration:none;transition:transform .25s var(--ease)}
.mat:hover{transform:translateY(-3px)}
.mat .cover{aspect-ratio:16/8;position:relative;overflow:hidden;background:var(--surface-2)}
.mat .cover::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 30% 40%, var(--blob-a), transparent 45%), radial-gradient(circle at 70% 60%, var(--blob-b), transparent 45%);opacity:calc(var(--blob-op) * .8);filter:blur(30px)}
.mat .cover.alt::before{background:radial-gradient(circle at 60% 40%, var(--blob-d), transparent 45%), radial-gradient(circle at 30% 70%, var(--blob-c), transparent 45%)}
.mat .body{padding:22px;display:flex;flex-direction:column;gap:8px}
.mat h3{font-size:21px;letter-spacing:-.02em}
.mat .meta{color:var(--ink-3);font-size:14px;display:flex;gap:12px;flex-wrap:wrap}
.empty{margin-top:36px;padding:48px 32px;border-radius:var(--r-lg);border:1px dashed var(--line-strong);text-align:center;color:var(--ink-2)}
.empty h3{color:var(--ink);font-size:24px;letter-spacing:-.025em}
.empty p{max-width:48ch;margin:10px auto 0}
.redirect{margin-top:36px;padding:28px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;gap:16px}
.spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line-strong);border-top-color:var(--blue);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:700px){.mat-grid{grid-template-columns:1fr}}

.deck-stage{padding-block:24px 40px}
.deck-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--frame-bg);border:1px solid var(--line);box-shadow:var(--frame-shadow)}
.deck-ctrl{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.deck-ctrl .count{color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:14px}
.deck-end{margin-top:28px;padding:22px 24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.deck-end p{color:var(--ink-2)}

/* ===== Кабинет владельца ===== */
.owner{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.side{border-right:1px solid var(--line);padding:22px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;background:var(--bg)}
.side .logo{font-size:18px;padding:6px 10px 22px}
.side a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink-2);font-weight:500;font-size:15px}
.side a svg{width:18px;height:18px}
.side a:hover{background:var(--surface-2);color:var(--ink)}
.side a[aria-current="page"]{background:var(--surface-2);color:var(--ink);font-weight:600}
.side .grp{font-size:12px;color:var(--ink-3);padding:18px 12px 6px}
.side .bottom{margin-top:auto;font-size:13px;color:var(--ink-3);padding:12px}
.main{padding:28px clamp(16px,3vw,40px) 64px;min-width:0}
.ohead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ohead h1{font-size:32px;letter-spacing:-.035em}
.ohead p{color:var(--ink-2);margin-top:6px}
.card{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);padding:22px}
.tbl-wrap{overflow-x:auto;margin-top:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:720px}
th{text-align:left;font-weight:600;color:var(--ink-3);font-size:13px;padding:14px 16px;border-bottom:1px solid var(--line)}
td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td .muted{color:var(--ink-3);font-size:13px}
td.num{font-variant-numeric:tabular-nums}
.slug{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13px;color:var(--ink-2)}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.switch{position:relative;width:42px;height:24px;border-radius:12px;background:var(--line-strong);border:0;cursor:pointer;transition:background-color .2s;flex:none}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--knob);box-shadow:var(--knob-shadow);transition:transform .25s var(--ease)}
.switch[aria-checked="true"]{background:var(--blue)}
.switch[aria-checked="true"]::after{transform:translateX(18px)}
.sample{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--warn);background:var(--warn-soft);padding:4px 10px;border-radius:var(--r-pill);font-weight:600}
.two{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:20px;margin-top:22px;align-items:start}
.two .tbl-wrap{margin-top:0}
@media (max-width:1100px){.two{grid-template-columns:1fr}}
.checks{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.check{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line);font-size:14.5px;cursor:pointer}
.check input{accent-color:var(--blue);width:18px;height:18px}
.genpw{display:flex;gap:8px}
.genpw .input{font-family:ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:.04em}
.issued{margin-top:18px;padding:18px;border-radius:var(--r-md);background:var(--ok-soft);display:none}
.issued.show{display:block;animation:rise .4s var(--ease)}
.issued h4{font-size:16px;color:var(--ok);letter-spacing:0}
.issued .lnk{margin-top:10px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13px;word-break:break-all;color:var(--ink)}
.issued .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.issued .hint{font-size:13px;color:var(--ink-2);margin-top:10px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.stat{padding:18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.stat .k{font-size:13px;color:var(--ink-3)}
.stat .v{font-size:28px;font-weight:700;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chip{height:34px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:transparent;cursor:pointer;font-size:14px}
.chip[aria-pressed="true"]{background:var(--cta-bg);color:var(--cta-fg);border-color:transparent}
.drawer{position:fixed;inset:0;z-index:70;display:none}
.drawer.open{display:block}
.drawer .scrim{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(2px)}
.drawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(520px,100%);background:var(--bg-raised);border-left:1px solid var(--line);padding:28px max(24px, env(safe-area-inset-right,0px)) 28px 28px;overflow:auto;animation:slideIn .35s var(--ease)}
@keyframes slideIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.drawer h2{font-size:26px;letter-spacing:-.03em}
.flow{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.flow span{font-size:13px;padding:6px 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-3)}
.flow span.on{background:var(--blue-soft);color:var(--blue);font-weight:600}
.drop{margin-top:8px;padding:26px;border-radius:var(--r-md);border:1.5px dashed var(--line-strong);text-align:center;color:var(--ink-2);font-size:14.5px}
.inline-confirm{display:none;gap:6px;align-items:center}
.inline-confirm.show{display:inline-flex}
@media (max-width:900px){.owner{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);padding:12px}.side .grp,.side .bottom{display:none}.side .logo{padding:6px 10px;width:100%}}

/* ===== Дизайн-система ===== */
.ds{padding-block:48px 96px}
.ds h1{font-size:clamp(36px,4.4vw,56px);letter-spacing:-.04em}
.ds h2{font-size:26px;letter-spacing:-.03em;margin-top:56px}
.ds .sub{color:var(--ink-2);margin-top:10px;max-width:70ch}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:20px}
.sw{border-radius:var(--r-md);border:1px solid var(--line);overflow:hidden;background:var(--surface)}
.sw .c{height:72px}
.sw .n{padding:10px 12px;font-size:13px}
.sw .n b{display:block;font-weight:600}
.sw .n span{color:var(--ink-3);font-family:ui-monospace,Menlo,monospace;font-size:12px}
.type-row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:20px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.type-row .k{color:var(--ink-3);font-size:13px}
.comp-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}
.motion-tbl td:first-child{font-weight:600}

/* Главная: «В фокусе» идёт сразу за «Темами», поэтому верхний отступ меньше стандартного */
#featured{padding-top:clamp(40px,6vw,80px)}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:90;background:var(--cta-bg);color:var(--cta-fg);padding:12px 18px;border-radius:var(--r-pill);font-weight:600;font-size:14.5px;opacity:0;pointer-events:none;transition:opacity .25s, transform .3s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

[data-view]{display:none}
[data-view].active{display:block}


/* ===== Liquid Glass (DS v1.1) — функциональный слой: шапка, кнопки, карточки, панели ===== */
:root{--lg-top:rgba(255,255,255,.78);--lg-bot:rgba(255,255,255,.42);--lg-line:rgba(17,18,22,.07);--lg-edge:rgba(255,255,255,1);--lg-edge2:rgba(255,255,255,.55);--lg-spec:rgba(255,255,255,.9);--lg-shadow:0 1px 1px rgba(17,18,40,.04), 0 22px 44px -26px rgba(30,40,90,.28)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--lg-top:rgba(255,255,255,.10);--lg-bot:rgba(255,255,255,.025);--lg-line:rgba(255,255,255,.07);--lg-edge:rgba(255,255,255,.26);--lg-edge2:rgba(255,255,255,.10);--lg-spec:rgba(255,255,255,.16);--lg-shadow:0 30px 60px -30px rgba(0,0,0,.75)}}
:root[data-theme="dark"]{--lg-top:rgba(255,255,255,.10);--lg-bot:rgba(255,255,255,.025);--lg-line:rgba(255,255,255,.07);--lg-edge:rgba(255,255,255,.26);--lg-edge2:rgba(255,255,255,.10);--lg-spec:rgba(255,255,255,.16);--lg-shadow:0 30px 60px -30px rgba(0,0,0,.75)}
.lg{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--lg-top),var(--lg-bot));border:1px solid var(--lg-line);box-shadow:inset 0 1px 0 var(--lg-edge),var(--lg-shadow);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%)}
.lg::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,var(--lg-edge),transparent 30%,transparent 70%,var(--lg-edge2));-webkit-mask:linear-gradient(var(--mask) 0 0) content-box,linear-gradient(var(--mask) 0 0);-webkit-mask-composite:xor;mask:linear-gradient(var(--mask) 0 0) content-box exclude,linear-gradient(var(--mask) 0 0);pointer-events:none}
.lg::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(320px circle at var(--mx,20%) var(--my,-10%),var(--lg-spec),transparent 62%);opacity:var(--lg-spec-rest);transition:opacity .35s var(--ease);pointer-events:none;mix-blend-mode:soft-light}
.lg > *{position:relative;z-index:1}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.lg{background:var(--surface-solid)}}
@media (prefers-reduced-transparency: reduce){.lg{background:var(--surface-solid);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Капсулы */
.btn-secondary{background:linear-gradient(180deg,var(--lg-top),var(--lg-bot));border:1px solid var(--lg-line);box-shadow:inset 0 1px 0 var(--lg-edge),var(--btn2-shadow);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%)}
.btn-secondary:hover{background:linear-gradient(180deg,var(--lg-top),var(--lg-top))}
.round{background:linear-gradient(180deg,var(--lg-top),var(--lg-bot));border:1px solid var(--lg-line);box-shadow:inset 0 1px 0 var(--lg-edge),var(--round-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.btn-ghost{background:linear-gradient(180deg,var(--lg-top),var(--lg-bot));border:1px solid var(--lg-line);box-shadow:inset 0 1px 0 var(--lg-edge)}
.header.scrolled{background:linear-gradient(180deg,var(--lg-top),var(--lg-bot));box-shadow:inset 0 -1px 0 var(--lg-line),var(--header-shadow);backdrop-filter:blur(24px) saturate(190%);-webkit-backdrop-filter:blur(24px) saturate(190%)}
/* Темы — тонированное стекло в обеих темах */
.topic .round{width:46px;height:46px}
.feature{box-shadow:inset 0 1px 0 var(--panel-edge),var(--panel-shadow)}

/* Подсветка под курсором — единый эффект для карточек и плиток (список совпадает с GLOW в site.js и deck.js).
   Только мышь/тачпад: на сенсорных экранах не показывается; при reduced motion блик не следует за курсором. */
.topic,.tool,.author,.steps li,.r-item,.channel,.mat,.stat,.card,.auth-card,.deck-end,.sol,.tier,.task,.dir-item,.side-card,.stat-t,.clist li{position:relative}
:is(.topic,.tool,.author,.steps li,.r-item,.channel,.mat,.stat,.card,.auth-card,.deck-end,.sol,.tier,.task,.dir-item,.side-card,.stat-t,.clist li):not(.lg){isolation:isolate}
:is(.topic,.tool,.author,.steps li,.r-item,.channel,.mat,.stat,.card,.auth-card,.deck-end,.sol,.tier,.task,.dir-item,.side-card,.stat-t,.clist li)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(var(--glow-size) circle at var(--mx,20%) var(--my,-10%),var(--glow,var(--lg-spec)),transparent 62%);mix-blend-mode:var(--glow-blend);opacity:var(--glow-rest);transition:opacity .35s var(--ease)}
:is(.topic,.tool,.author,.steps li,.r-item,.channel,.mat,.stat,.card,.auth-card,.deck-end,.sol,.tier,.task,.dir-item,.side-card,.stat-t,.clist li):not(.lg)::after{z-index:-1;--glow-rest:0}
@media (hover:hover) and (pointer:fine){:is(.topic,.tool,.author,.steps li,.r-item,.channel,.mat,.stat,.card,.auth-card,.deck-end,.sol,.tier,.task,.dir-item,.side-card,.stat-t,.clist li):hover::after{opacity:1}}

/* Графика: объекты и фоны в цвет страницы */
.hero{isolation:isolate}
.hero-waves{position:absolute;left:0;right:0;bottom:-70px;z-index:-1;pointer-events:none}
.hero-waves .bg-art,.topics-waves .bg-art,.ribbon-art .bg-art{width:100%;height:auto}
.topics-waves{position:relative;margin-top:-10px;pointer-events:none;transform:scaleX(-1);opacity:.75}
.ribbon-art{position:absolute;right:0;bottom:60px;width:min(1280px,96%);z-index:0;pointer-events:none}
.stack-wrap{aspect-ratio:1419/1108}
.hero-art .gfb{animation:discIn 1.2s var(--ease) both}
.symbol .gfb{transform:translate3d(calc(var(--px) * 10px), calc(var(--py) * 8px + var(--sy) * .6px), 0)}
@media (max-width:900px){.ribbon-art{bottom:auto;top:40%;opacity:.6}}

/* ===== Страницы ИА v1.1: каталог решений, направления, карточка решения, конфиденциальность ===== */
html{scroll-padding-top:92px}
.nav a[aria-current="page"]{color:var(--ink);background:var(--surface-2)}
.mnav a[aria-current="page"]{color:var(--blue)}
.dc-blue{--dc:var(--blue)}.dc-violet{--dc:var(--violet)}.dc-salmon{--dc:var(--salmon)}.dc-neutral{--dc:var(--ink-3)}
.c-l1{--c:var(--l1)}.c-l2{--c:var(--l2)}.c-l3{--c:var(--l3)}.c-l4{--c:var(--l4)}

/* Заголовок страницы второго уровня */
.page{padding-bottom:24px}
.page-hero{position:relative;padding-block:clamp(20px,4vw,48px) clamp(32px,4vw,56px);overflow-x:clip;isolation:isolate}
.page-hero .grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:center}
.page-hero h1{font-size:clamp(38px,4.6vw,64px);font-weight:800;letter-spacing:-.045em;line-height:1;margin-top:18px;max-width:18ch}
.page-hero .lead{font-size:var(--t-lead);color:var(--ink-2);max-width:44ch;margin-top:22px;line-height:1.45}
.page-hero .actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.page-hero .eyebrow-gap{margin-top:22px}
.page-hero .art{position:relative;aspect-ratio:1.2/1;max-width:520px;width:100%;justify-self:end}
.page-hero .art.square{aspect-ratio:1/1;max-width:440px}
.art.panel{background:var(--feature-canvas);border-radius:var(--r-xl)}
@media (max-width:520px){.page-hero h1{font-size:clamp(28px,8.2vw,38px);overflow-wrap:break-word;hyphens:auto}}
@media (max-width:900px){.page-hero .grid{grid-template-columns:1fr}.page-hero .art{order:-1;max-width:340px;justify-self:center;margin-bottom:-24px}}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:var(--ink-3)}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:.6}
.block{padding-top:clamp(56px,7vw,96px)}
.block-first{padding-top:8px}
.block h2.h,h2.h.h-lg{font-size:clamp(30px,3.4vw,44px);margin-top:12px}
.block h2.h.h-md{font-size:clamp(26px,2.8vw,34px)}
.block .sub{color:var(--ink-2);font-size:var(--t-lead);max-width:52ch;margin-top:14px;line-height:1.45}
.block-rel{padding-top:clamp(48px,6vw,80px)}
.block-rel .sol-grid{margin-top:22px}
.mt-l{margin-top:36px}
.page .contact{margin-top:clamp(56px,7vw,96px)}

/* Цифры масштаба (выводятся только подтверждённые) */
.stats-home{position:relative;z-index:1;margin-top:clamp(24px,4vw,40px)}
.stats-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.stat-t{padding:22px 22px 20px;border-radius:var(--r-lg)}
.stat-t .v{min-height:44px;display:flex;align-items:center;font-size:40px;font-weight:800;letter-spacing:-.04em}
.stat-t .k{color:var(--ink-2);font-size:15px;margin-top:8px}
@media (max-width:900px){.stats-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-home{margin-top:64px}}

/* Направления: фокусные карточки-ссылки и компактная строка */
a.topic{text-decoration:none}
.topic .cnt{font-size:14px;font-weight:600;color:var(--ink-2)}
.topics-tight{margin-top:20px}
.dir-more{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:28px}
.dir-more .lbl{font-size:14px;color:var(--ink-3);margin-right:4px}
.dir-related{margin-top:32px}
.dchip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;font-family:inherit;transition:transform .2s var(--ease)}
.dchip b{font-weight:600;color:var(--ink-3);font-size:13px;font-variant-numeric:tabular-nums}
.dchip:hover{transform:translateY(-1px)}
.dchip.all{font-weight:600}
.dchip svg{width:16px;height:16px}

/* Пирамида уровней */
.pyr{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.pyr .tier{--w:100%;width:var(--w);min-height:62px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;cursor:pointer;text-align:left;color:var(--ink);text-decoration:none;font-family:inherit;transition:transform .25s var(--ease), box-shadow .25s}
.pyr a.tier:hover{transform:translateY(-2px)}
.pyr span.tier{cursor:default}
.pyr .tier[data-l="4"]{--w:46%;--c:var(--l4);--cs:var(--l4-soft)}
.pyr .tier[data-l="3"]{--w:64%;--c:var(--l3);--cs:var(--l3-soft)}
.pyr .tier[data-l="2"]{--w:82%;--c:var(--l2);--cs:var(--l2-soft)}
.pyr .tier[data-l="1"]{--w:100%;--c:var(--l1);--cs:var(--l1-soft)}
.pyr .tier.lg{background:linear-gradient(180deg,var(--cs),transparent 140%),linear-gradient(180deg,var(--lg-top),var(--lg-bot))}
.pyr .tier .t{display:flex;flex-direction:column;min-width:0}
.pyr .tier .n{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.pyr .tier .name{font-size:17px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.pyr .tier .num{font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.pyr .tier[aria-current="true"],.pyr .tier.on{box-shadow:inset 0 0 0 2px var(--c),var(--lg-shadow)}
.pyr.sm .tier{min-height:44px;padding:8px 14px;border-radius:13px}
.pyr.sm .tier .name{font-size:14.5px}
.pyr.sm .tier .n{font-size:10.5px}
@media (max-width:520px){.pyr .tier[data-l="4"]{--w:62%}.pyr .tier[data-l="3"]{--w:76%}.pyr .tier[data-l="2"]{--w:88%}.pyr .tier{padding:10px 14px}.pyr .tier .name{font-size:15px}}

/* Каталог на главной */
.catalog-sec{padding-top:clamp(64px,8vw,112px)}
.cat-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.cat-intro h2{font-size:var(--t-h2);margin-top:14px}
.cat-intro .sub{color:var(--ink-2);font-size:var(--t-lead);margin-top:18px;max-width:40ch;line-height:1.45}
.cat-intro .actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:900px){.cat-intro{grid-template-columns:1fr;gap:32px}}

/* Карточка решения в списке */
.sol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.sol-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.sol-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.sol-grid.four,.sol-grid{grid-template-columns:1fr}}
.sol{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--r-lg);text-decoration:none;color:var(--ink);transition:transform .25s var(--ease)}
.sol:hover{transform:translateY(-3px)}
.sol .top{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sol h3{font-size:20px;letter-spacing:-.025em;line-height:1.15}
.sol p{color:var(--ink-2);font-size:15px;line-height:1.5}
.sol .foot{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3)}
.sol .foot svg{width:18px;height:18px;color:var(--ink-2);flex:none}
.lvl{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.lvl i{font-style:normal;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;color:var(--on-gradient);font-size:10.5px;line-height:1}
.lvl.l1{color:var(--l1);background:var(--l1-soft)}.lvl.l2{color:var(--l2);background:var(--l2-soft)}.lvl.l3{color:var(--l3);background:var(--l3-soft)}.lvl.l4{color:var(--l4);background:var(--l4-soft)}
.lvl.l1 i{background:var(--l1)}.lvl.l2 i{background:var(--l2)}.lvl.l3 i{background:var(--l3)}.lvl.l4 i{background:var(--l4)}
.dtag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--surface-2);white-space:nowrap}
.dtag i{width:7px;height:7px;border-radius:50%;background:var(--dc,var(--ink-3))}

/* Каталог: поиск и фильтры (ссылки — работают без JS) */
.cat-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
.search{position:relative;flex:1 1 320px;max-width:520px;margin:0}
.search > svg{position:absolute;left:16px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.search .input{padding-left:46px;border-radius:999px;height:50px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg .chip{height:40px;display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-family:inherit;text-decoration:none}
.seg .chip .d{width:8px;height:8px;border-radius:50%;background:var(--c,var(--ink-3))}
.seg .chip[aria-current="true"]{background:var(--cta-bg);color:var(--cta-fg);border-color:transparent}
.seg .chip[aria-current="true"] .d{background:currentColor}
.cat{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;margin-top:28px;align-items:start}
.facets{position:sticky;top:92px;padding:18px;border-radius:var(--r-lg)}
.facets h4{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:6px 8px 8px}
.facets h4 + .fl{margin-bottom:14px}
.fl{display:flex;flex-direction:column;gap:2px}
.fl a{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:12px;text-decoration:none;font-size:15px;color:var(--ink-2)}
.fl a:hover{background:var(--surface-2);color:var(--ink)}
.fl a[aria-current="true"]{background:var(--surface-2);color:var(--ink);font-weight:600}
.fl a i{width:9px;height:9px;border-radius:50%;background:var(--dc,var(--ink-3));flex:none}
.fl a b{margin-left:auto;font-weight:600;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.fl a.big{font-size:16px;color:var(--ink);font-weight:600}
.res-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;color:var(--ink-2);font-size:15px}
.res-head .active{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.res-head .reset{color:var(--blue);font-weight:600;text-decoration:none;font-size:15px}
.lvl-group + .lvl-group{margin-top:32px}
.lvl-group > h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font-size:22px;letter-spacing:-.025em;margin-bottom:14px}
.lvl-group > h3 small{font-size:14px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.cat-empty{padding:48px 24px;border-radius:var(--r-lg);border:1px dashed var(--line-strong);text-align:center;color:var(--ink-2)}
.cat-empty h3{color:var(--ink);font-size:22px}
.cat-empty p{margin-top:8px}
.mfilters{display:none}
#catRoot.loading #catResults{opacity:.6;transition:opacity .2s}
@media (max-width:900px){
  .cat{grid-template-columns:1fr}
  .facets{display:none}
  .mfilters{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin-top:16px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,var(--mask) 88%,transparent);mask-image:linear-gradient(90deg,var(--mask) 88%,transparent)}
  .mfilters::-webkit-scrollbar{display:none}
  .mfilters .dchip{flex:none;height:38px;font-size:14.5px;border:0}
  .mfilters .dchip[aria-current="true"]{background:var(--cta-bg);color:var(--cta-fg)}
  .mfilters .dchip[aria-current="true"] b{color:inherit;opacity:.7}
  .search{flex-basis:100%;max-width:none}
}
@media (max-width:700px){
  .lvl-group > h3 small{flex-basis:100%}
  .seg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;width:100%}
  .seg::-webkit-scrollbar{display:none}.seg .chip{flex:none}
}

/* Карточка решения: страница */
.sol-hero .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.sol-hero h1{max-width:22ch}
.sol-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}
.sol-main section + section{margin-top:44px}
.sol-main h2{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.03em}
.sol-main p.t{color:var(--ink-2);font-size:17px;line-height:1.6;margin-top:14px;max-width:62ch}
.olist{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:o}
.olist li{counter-increment:o;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);font-size:16px}
.olist li::before{content:counter(o);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-weight:700;font-size:14px}
.clist{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.clist li{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);font-size:15.5px}
.clist li svg{width:20px;height:20px;color:var(--ok);flex:none;margin-top:1px}
@media (max-width:700px){.clist{grid-template-columns:1fr}}
.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.tagrow span{height:34px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;background:var(--surface-2);font-size:14.5px;color:var(--ink)}
.sol-aside{position:sticky;top:92px;padding:24px;border-radius:var(--r-lg);display:flex;flex-direction:column;gap:18px}
.sol-aside .k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.sol-aside .v{margin-top:6px;font-weight:600;font-size:16px}
.sol-aside .v a{text-decoration:none}
.sol-aside .btn{width:100%;justify-content:center}
.sol-aside hr{border:0;border-top:1px solid var(--line);margin:0}
.sol-aside .tier.off{opacity:.5}
.sol-aside .pyr .tier[data-l="4"]{--w:52%}.sol-aside .pyr .tier[data-l="3"]{--w:68%}.sol-aside .pyr .tier[data-l="2"]{--w:84%}
@media (max-width:1000px){.sol-layout{grid-template-columns:1fr}.sol-aside{position:static}}

/* Направление */
.dir-hero h1{display:flex;align-items:center;gap:18px}
.dir-hero .dico{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;color:var(--dc);flex:none}
.dir-hero .dico svg{width:32px;height:32px}
.pill.count-pill{height:52px;padding:0 18px;font-size:15px}
.tasks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px}
.task{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:var(--r-lg)}
.task .q{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--salmon-soft);color:var(--salmon);font-weight:800;flex:none}
.task p{font-size:16.5px;font-weight:500;line-height:1.45}
@media (max-width:700px){.tasks{grid-template-columns:1fr}}
.levels4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px;align-items:start}
.lcol{display:flex;flex-direction:column;gap:12px}
.lcol > header{padding:14px 16px;border-radius:var(--r-md);border-top:3px solid var(--c);background:var(--surface)}
.lcol > header .n{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.lcol > header h3{font-size:19px;margin-top:4px;letter-spacing:-.02em}
.lcol > header p{font-size:13.5px;color:var(--ink-2);margin-top:4px;line-height:1.4}
.lcol .sol{padding:18px}
.lcol .sol h3{font-size:17.5px}
.lcol .none{padding:16px;border-radius:var(--r-md);border:1px dashed var(--line-strong);color:var(--ink-3);font-size:14px}
@media (max-width:1100px){.levels4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.levels4{grid-template-columns:1fr}}
.mats-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;margin-top:28px}
.mats-row .r-list{margin-top:14px}
@media (max-width:900px){.mats-row{grid-template-columns:1fr}}
.side-card{padding:26px;border-radius:var(--r-lg)}
.side-card h3{font-size:22px;letter-spacing:-.025em}
.side-card p{color:var(--ink-2);margin-top:10px}
.side-card .actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}

/* Направления: обзор */
.dir-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.dir-item{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r-lg);text-decoration:none;color:var(--ink);transition:transform .25s var(--ease)}
.dir-item:hover{transform:translateY(-3px)}
.dir-item h3{font-size:19px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.dir-item h3 i{width:9px;height:9px;border-radius:50%;background:var(--dc);flex:none}
.dir-item p{color:var(--ink-2);font-size:15px}
.dir-item .meta{margin-top:auto;padding-top:8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mini-l{display:inline-flex;gap:3px;align-items:flex-end;height:18px}
.mini-l span{width:8px;border-radius:2px;background:var(--surface-hover)}
.mini-l span.l1{height:9px;--c:var(--l1)}.mini-l span.l2{height:12px;--c:var(--l2)}.mini-l span.l3{height:15px;--c:var(--l3)}.mini-l span.l4{height:18px;--c:var(--l4)}
.mini-l span.on{background:var(--c)}
@media (max-width:1000px){.dir-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.dir-list{grid-template-columns:1fr}}

/* Экспресс-скоринг на главной */
.score-teaser{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center;margin-top:28px;padding:clamp(24px,3.4vw,40px);border-radius:var(--r-xl)}
.score-teaser h3{font-size:clamp(26px,2.8vw,36px);letter-spacing:-.035em;margin-top:12px}
.score-teaser p.d{color:var(--ink-2);margin-top:12px;font-size:17px;max-width:46ch}
.score-teaser .actions{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.st8{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.st8 span{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:13.5px;font-weight:600}
.st8 span em{font-style:normal;font-size:11px;font-weight:700;color:var(--blue)}
@media (max-width:900px){.score-teaser{grid-template-columns:1fr}}
@media (max-width:420px){.st8{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Сообщество на главной: участники */
.m2{background:conic-gradient(from 120deg, var(--violet), var(--pink), var(--blue), var(--violet))}
.m3{background:conic-gradient(from 40deg, var(--salmon), var(--pink), var(--violet), var(--salmon))}
.m4{background:conic-gradient(from 300deg, var(--blue), var(--salmon), var(--violet), var(--blue))}
.faces{display:flex;align-items:center;margin-top:22px}
.faces .monogram{width:44px;height:44px;font-size:14px;border:2px solid var(--bg);margin-left:-10px}
.faces .monogram:first-child{margin-left:0}
.faces span.more{margin-left:14px;font-size:14.5px;color:var(--ink-2)}
@media (max-width:900px){.about-grid{grid-template-columns:minmax(0,1fr)}.faces{flex-wrap:wrap;row-gap:8px}.faces .monogram{width:38px;height:38px;font-size:12.5px;margin-left:-8px}}

/* Конфиденциальность */
.doc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start;margin-top:12px}
.toc{position:sticky;top:92px;display:flex;flex-direction:column;gap:2px;font-size:14.5px}
.toc a{padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--ink-2)}
.toc a:hover{background:var(--surface-2);color:var(--ink)}
.doc-body section{padding:28px 0;border-bottom:1px solid var(--line)}
.doc-body section:first-child{padding-top:0}
.doc-body h2{font-size:24px;letter-spacing:-.03em}
.doc-body p,.doc-body li{color:var(--ink-2);font-size:16.5px;line-height:1.65}
.doc-body p{margin-top:12px;max-width:68ch}
.doc-body ul{margin:12px 0 0;padding-left:20px;max-width:68ch}
.doc-body li + li{margin-top:6px}
.doc-body b{color:var(--ink)}
.doc-body code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:14px;background:var(--surface-2);padding:2px 7px;border-radius:6px;color:var(--ink);word-break:break-all}
.kv{margin:16px 0 0;border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;background:var(--surface)}
.kv div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:15.5px}
.kv div:last-child{border-bottom:0}
.kv dt{color:var(--ink-3);font-size:14px}
.kv dd{margin:0;color:var(--ink)}
@media (max-width:900px){.doc{grid-template-columns:1fr;gap:20px}.toc{position:static;flex-direction:row;flex-wrap:wrap}.toc a{background:var(--surface-2)}.kv div{grid-template-columns:1fr;gap:4px}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0s !important;transition-duration:.001ms !important}
  html.js .reveal{opacity:1;transform:none}
}