@charset "utf-8";
/* ============================================================
   Opus Digital — дизайн-система
   Один файл на весь сайт. Слои: tokens → reset → base → layout
   → components → utilities.
   ============================================================ */

@layer tokens, reset, base, layout, components, utilities;

/* ---------- ШРИФТЫ ---------- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-cyrillic-wght-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-latin-wght-normal.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2014,U+2018-2019,U+201C-201D,U+2026,U+2192-2193}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+20A0-20BF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/unbounded-cyrillic-800-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/unbounded-latin-800-normal.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2014,U+2018-2019,U+201C-201D,U+2026,U+2192-2193}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2014,U+2018-2019,U+201C-201D,U+2026,U+2192-2193}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2014,U+2018-2019,U+201C-201D,U+2026,U+2192-2193}

/* ============================================================
   1. ТОКЕНЫ
   ============================================================ */
@layer tokens {
:root{
  color-scheme: light dark;

  /* — палитра OKLCH. Ключевые цвета бренда сохранены 1:1 — */
  --surface:      light-dark(oklch(95.8% .007 88),  oklch(17.5% .006 248));
  --surface-2:    light-dark(oklch(92.8% .011 90),  oklch(21.5% .007 248));
  --surface-3:    light-dark(oklch(89.5% .016 86),  oklch(25.5% .008 248));
  --surface-card: light-dark(oklch(97.6% .006 88),  oklch(22.5% .008 248));

  --text:         light-dark(oklch(22.5% .005 248), oklch(94.5% .006 88));
  --text-2:       light-dark(oklch(37.6% .011 248), oklch(80%   .008 88));
  --text-3:       light-dark(oklch(48%   .010 248), oklch(66%   .008 88));

  --line:         light-dark(oklch(84%   .016 90),  oklch(32%   .010 248));
  --line-soft:    light-dark(oklch(89%   .013 90),  oklch(26%   .008 248));

  /* бренд: -solid для плашек, -text для текста по фону */
  --brand-vivid:  oklch(62.7% .171 40);
  --brand-solid:  light-dark(oklch(54.7% .155 39),  oklch(73.2% .135 43));
  --brand-text:   light-dark(oklch(50%   .150 39),  oklch(78%   .120 45));
  --on-brand:     light-dark(oklch(99% .004 88),    oklch(17% .020 40));
  --brand-tint:   light-dark(oklch(93.5% .028 50),  oklch(27% .045 40));
  --brand-deep:   light-dark(oklch(51.4% .142 39),  oklch(64% .150 42));
  --brand-ondark: oklch(76% .130 45);   /* акцент по тёмному фону: ≥4.5:1 */

  --bp:           light-dark(oklch(42.9% .078 258), oklch(74% .070 258));
  --bp-grid:      light-dark(oklch(88%   .016 261), oklch(27% .016 258));

  /* инвертированные секции */
  --invert-bg:    light-dark(oklch(20.8% .005 248), oklch(11.5% .006 248));
  --invert-2:     light-dark(oklch(24%   .007 248), oklch(15%   .007 248));
  --invert-text:  oklch(95.8% .007 88);
  --invert-text2: oklch(78% .008 88);
  --invert-line:  color-mix(in oklab, var(--invert-text) 16%, transparent);

  --focus:        light-dark(oklch(58% .17 40), oklch(80% .14 45));

  /* — типографика — */
  --f-disp:'Unbounded','Manrope',sans-serif;
  --f-sans:'Manrope',system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  --s--2:clamp(.72rem,.70rem + .10vw,.78rem);
  --s--1:clamp(.79rem,.76rem + .16vw,.86rem);
  --s-0 :clamp(1rem,.96rem + .26vw,1.1rem);
  --s-1 :clamp(1.18rem,1.05rem + .62vw,1.5rem);
  --s-2 :clamp(1.5rem,1.22rem + 1.3vw,2.3rem);
  --s-3 :clamp(2rem,1.5rem + 2.4vw,3.5rem);
  --s-4 :clamp(2.4rem,1.5rem + 4.4vw,5.6rem);
  --s-5 :clamp(3rem,1.6rem + 6.4vw,7.6rem);

  /* — сетка и ритм — */
  --gutter:clamp(18px,4.5vw,56px);
  --content:1320px;
  --measure:60ch;
  --grid-unit:32px;
  --pad-sec:clamp(56px,9vw,132px);

  /* — движение — */
  --e-out:cubic-bezier(.2,.7,.2,1);
  --e-io :cubic-bezier(.65,0,.35,1);
  --d-1:120ms; --d-2:240ms; --d-3:460ms;

  --radius:7px;
  --radius-lg:14px;
}

/* Ручное переключение темы — перебивает системную */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"] {color-scheme:dark}
}

/* ============================================================
   2. RESET
   ============================================================ */
@layer reset {
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h,68px) + 16px)}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
img{height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0}
:where(h1,h2,h3,h4){font-weight:800;line-height:1.06;letter-spacing:-.022em;text-wrap:balance;overflow-wrap:break-word}
:where(p,li,dd){text-wrap:pretty}
}

/* ============================================================
   3. БАЗА
   ============================================================ */
@layer base {
body{
  margin:0;
  background:var(--surface);
  color:var(--text);
  font-family:var(--f-sans);
  font-size:var(--s-0);
  line-height:1.6;
  overflow-x:hidden;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
/* чертёжная сетка — фон всего документа */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(var(--bp-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--bp-grid) 1px,transparent 1px);
  background-size:var(--grid-unit) var(--grid-unit);
  background-position:-1px -1px;
  mask-image:radial-gradient(120% 65% at 50% 0%,#000 12%,transparent 78%);
  opacity:.85;
}

p{margin-block:.7em}
a{color:inherit;text-decoration-color:var(--brand-text);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color var(--d-1) var(--e-out)}
a:hover{text-decoration-color:var(--brand-vivid)}

:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:4px}
:target{scroll-margin-top:calc(var(--header-h,68px) + 24px)}

/* выделение текста: в тёмной теме приглушённый тон читался как артефакт вёрстки */
::selection{background:light-dark(oklch(88% .062 50), oklch(73.2% .135 43));
  color:light-dark(oklch(22.5% .005 248), oklch(17% .02 40));text-shadow:none}

.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:10px;top:10px;z-index:120;background:var(--text);color:var(--surface);padding:11px 16px;border-radius:var(--radius);text-decoration:none}

/* Служебные текстовые стили */
.mono{font-family:var(--f-mono);font-feature-settings:"ss02"}
.disp{font-family:var(--f-disp)}
.lead{font-size:var(--s-1);line-height:1.38;color:var(--text-2);font-weight:500;max-width:46ch}
.note{font-family:var(--f-mono);font-size:var(--s--1);color:var(--text-2);line-height:1.55}
.kick{font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.kick b{color:var(--brand-text);font-weight:500}
.nowrap{white-space:nowrap}
}

/* ============================================================
   4. РАСКЛАДКА — редакционная сетка на 12 колонок
   ============================================================ */
@layer layout {
.wrap{
  width:min(100% - var(--gutter)*2, var(--content));
  margin-inline:auto;
}
/* 12 колонок — основа всей асимметрии */
.grid12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(14px,1.6vw,26px);
  row-gap:0;
}
.sec{padding-block:var(--pad-sec);border-bottom:1px solid var(--line);position:relative}
.sec:last-of-type{border-bottom:0}

/* Рубрика секции живёт в узкой левой колонке и едет вместе со скроллом —
   так пустая колонка читается как поле чертежа, а не как забытое место. */
.sec-tag{
  grid-column:1/3;align-self:start;padding-top:.5em;
  position:sticky;top:calc(var(--header-h,68px) + 30px);z-index:2}
.sec-tag::after{content:"";display:block;height:0;border-top:1px dashed var(--line);margin:.85em 1.6em 0 0}
.invert .sec-tag::after{border-top-color:var(--invert-line)}
.sec-body{grid-column:3/13;min-width:0}
.sec-body>h2{max-width:20ch}
.sec-body>h2+.lead{margin-top:.72em}
.sec-body>*+div,.sec-body>*+.split-cfg,.sec-body>*+.split-form{margin-top:clamp(28px,3.6vw,52px)}
@media (max-width:900px){
  .sec-tag{position:static;grid-column:1/-1;margin-bottom:16px;padding-top:0}
  .sec-body{grid-column:1/-1}
}

/* два подчинённых столбца внутри секции */
.split-cfg{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(18px,2.4vw,40px);align-items:start}
.split-form{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,3vw,48px);align-items:start}
@media (max-width:900px){.split-cfg,.split-form{grid-template-columns:minmax(0,1fr)}}

/* Утилиты диапазонов */
.c-1-7{grid-column:1/8}
.c-1-8{grid-column:1/9}
.c-3-12{grid-column:3/12}
.c-3-13{grid-column:3/13}
.c-1-13{grid-column:1/-1}
.c-8-13{grid-column:8/13}
.c-9-13{grid-column:9/13}
@media (max-width:900px){
  .c-1-7,.c-1-8,.c-3-12,.c-3-13,.c-8-13,.c-9-13{grid-column:1/-1}
}
.stack>*+*{margin-top:var(--stack,18px)}
}

/* ============================================================
   5. КОМПОНЕНТЫ
   ============================================================ */
@layer components {

/* ---------- Кнопки ---------- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:var(--text);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-sans);font-weight:700;font-size:var(--s-0);line-height:1;
  padding:16px 26px;min-height:50px;border-radius:var(--radius);
  border:1.5px solid var(--btn-bd);background:var(--btn-bg);color:var(--btn-fg);
  text-decoration:none;cursor:pointer;position:relative;
  transition:transform var(--d-1) var(--e-out),box-shadow var(--d-2) var(--e-out),background-color var(--d-1) linear;
}
.btn-p{--btn-bg:var(--brand-solid);--btn-bd:var(--brand-solid);--btn-fg:var(--on-brand)}
.btn-s{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:var(--text)}
.btn-ghost{--btn-bd:var(--line);--btn-fg:var(--text-2)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 -1px color-mix(in oklab,var(--btn-bd) 55%,transparent)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-sm{padding:11px 18px;min-height:44px;font-size:var(--s--1)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}

/* стрелка, которая двигается по наведению */
.btn .arw{transition:transform var(--d-2) var(--e-out)}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- Шапка ---------- */
.top{
  position:sticky;top:0;z-index:40;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  transition:background-color var(--d-2) linear,color var(--d-2) linear,border-color var(--d-2) linear;
}
.top[data-over="dark"]{background:var(--invert-bg);color:var(--invert-text);border-color:var(--invert-line)}
.top[data-over="dark"] .nav a:not(.btn){color:var(--invert-text2)}
.top[data-over="dark"] .nav a:not(.btn):hover{color:var(--invert-text)}
.top[data-over="dark"] .btn-s{--btn-bd:var(--invert-line);--btn-fg:var(--invert-text)}
.top[data-over="dark"] .icon-btn{border-color:var(--invert-line);color:var(--invert-text)}
.top .bar{display:flex;align-items:center;gap:20px;padding-block:11px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.015em;text-decoration:none;color:inherit;font-size:var(--s-0)}
.brand svg{width:26px;height:26px;flex:none;overflow:visible}
.brand .spoke{transform-origin:60px 60px;transition:transform var(--d-3) var(--e-out)}
.brand:hover .spoke{transform:rotate(72deg)}
.nav{display:flex;gap:clamp(14px,1.8vw,26px);margin-left:auto;align-items:center}
.nav a:not(.btn){color:var(--text-2);text-decoration:none;font-size:var(--s-0);position:relative;padding-block:6px}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:2px;border-bottom:1.5px solid var(--brand-vivid);transition:right var(--d-2) var(--e-out)}
.nav a:not(.btn):hover{color:var(--text)}
.nav a:not(.btn):hover::after{right:0}
.nav a[aria-current]{color:var(--text)}
.nav a[aria-current]::after{right:0}
.nav .btn{padding:12px 18px;min-height:46px}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;border:1.5px solid var(--line);border-radius:var(--radius);
  cursor:pointer;color:var(--text-2);transition:color var(--d-1) linear,border-color var(--d-1) linear}
.icon-btn:hover{color:var(--text);border-color:var(--text)}
.icon-btn svg{width:19px;height:19px}
/* показываем значок той темы, в которую переключимся */
.theme-btn .sun{display:none}
.theme-btn .moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .theme-btn .moon{display:none}
  :root:not([data-theme]) .theme-btn .sun{display:block}
}
:root[data-theme="dark"] .theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="light"] .theme-btn .moon{display:block}
:root[data-theme="light"] .theme-btn .sun{display:none}

/* мобильное меню */
.burger{display:none}
.mobnav{display:none}
@media (max-width:900px){
  .nav a:not(.btn){display:none}
  .top .theme-btn{display:none}       /* переезжает в мобильное меню */
  .top .nav .btn{display:none}        /* тот же призыв уже есть в нижней полосе */
  .burger{display:inline-flex}
  .mobnav{
    display:block;position:fixed;inset:var(--header-h,68px) 0 auto 0;z-index:39;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 22px;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:transform var(--d-2) var(--e-out),opacity var(--d-2) var(--e-out),visibility var(--d-2)}
  .mobnav[data-open="true"]{transform:none;opacity:1;visibility:visible}
  .mobnav a{display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:16px 2px;min-height:52px;border-bottom:1px solid var(--line-soft);
    text-decoration:none;font-weight:600;font-size:var(--s-1)}
  .mobnav a .n{font-family:var(--f-mono);font-size:var(--s--1);color:var(--text-3)}
  .mobnav .btn{width:100%;margin-top:18px}
  .mobnav .theme-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding-top:18px;font-family:var(--f-mono);font-size:var(--s--1);color:var(--text-3)}
  .mobnav .theme-row .icon-btn{display:inline-flex}
}
.theme-row{display:none}
@media (max-width:900px){.top .bar{gap:12px}}

/* ---------- Инвертированные секции ---------- */
.invert{background:var(--invert-bg);color:var(--invert-text);border-bottom-color:var(--invert-line)}
.invert .kick{color:var(--invert-text2)}
.invert .kick b{color:var(--brand-ondark)}
.invert .kick::after{border-top-color:var(--invert-line)}
.invert .lead,.invert .note{color:var(--invert-text2)}
.invert .btn-s{--btn-bd:var(--invert-line);--btn-fg:var(--invert-text)}
.invert a{text-decoration-color:var(--brand-vivid)}

/* ---------- Первый экран ---------- */
.hero{position:relative;overflow:clip;padding-block:clamp(44px,7vw,92px) clamp(52px,8vw,104px)}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--invert-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--invert-line) 1px,transparent 1px);
  background-size:var(--grid-unit) var(--grid-unit);
  mask-image:radial-gradient(78% 62% at 74% 26%,#000,transparent 76%);
  opacity:.75}
.hero>*{position:relative;z-index:1}
.titleblock{
  display:flex;flex-wrap:wrap;font-family:var(--f-mono);font-size:var(--s--1);
  border:1px solid var(--invert-line);border-right:0;border-bottom:0;width:fit-content;max-width:100%}
.titleblock div{padding:7px 14px;border-right:1px solid var(--invert-line);border-bottom:1px solid var(--invert-line)}
.titleblock b{color:var(--brand-ondark);font-weight:500}
.hero h1{font-size:var(--s-4);margin-top:26px;max-width:15ch}
.hero h1 em{font-family:var(--f-disp);font-style:normal;color:var(--brand-vivid)}
.hero .fact{font-family:var(--f-mono);font-size:var(--s--1);color:var(--invert-text2);margin-top:18px;letter-spacing:.04em}
.worklinks{
  display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:38px;padding-top:20px;
  border-top:1px solid var(--invert-line);font-family:var(--f-mono);font-size:var(--s--1);color:var(--invert-text2)}
.worklinks a{color:var(--invert-text2);text-decoration:none;border-bottom:1px solid transparent;
  display:inline-flex;align-items:center;min-height:24px;transition:color var(--d-1),border-color var(--d-1)}
.worklinks a:hover{color:var(--brand-ondark);border-color:var(--brand-ondark)}
.hero-plot{grid-column:8/13;align-self:center;margin-top:clamp(28px,3vw,0px)}
.hero-plot svg{width:100%;height:auto;color:var(--invert-text)}
@media (max-width:900px){.hero-plot{display:none}}

/* ---------- Карточки «боль» ---------- */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.card{
  border:1px solid var(--line);background:var(--surface-card);padding:clamp(20px,2vw,28px);
  transition:border-color var(--d-2) var(--e-out),transform var(--d-2) var(--e-out);
  container-type:inline-size}
.card:hover{border-color:var(--text);transform:translateY(-3px)}
.card .t{font-family:var(--f-mono);font-size:var(--s--1);color:var(--brand-text);letter-spacing:.09em;text-transform:uppercase}
.card h3{font-size:var(--s-1);margin:12px 0 8px}
.card p{margin:0;color:var(--text-2)}
.anchor{display:inline-flex;gap:8px;align-items:center;margin-top:30px;font-family:var(--f-mono);font-size:var(--s--1);color:var(--brand-text);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--brand-text) 40%,transparent);padding-bottom:3px}
.anchor:hover{border-color:var(--brand-text)}
.anchor .arw{transition:transform var(--d-2) var(--e-out)}
.anchor:hover .arw{transform:translateY(3px)}

/* ---------- Процесс ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.step{border-top:2px solid var(--text);padding-top:18px;position:relative}
.step::before{content:"";position:absolute;top:-2px;left:0;width:0;border-top:2px solid var(--brand-vivid);transition:width var(--d-3) var(--e-out)}
.step:hover::before{width:100%}
.step .n{font-family:var(--f-disp);font-size:var(--s-2);color:var(--brand-text);line-height:1;display:block}
.step h3{font-size:var(--s-0);margin:10px 0 6px}
.step p{margin:0;font-size:var(--s--1);color:var(--text-2);line-height:1.55}
.step .when{font-family:var(--f-mono);font-size:var(--s--1);color:var(--text-3);margin-top:10px;display:block}
.dimline{position:relative;margin-top:38px;height:32px}
.dimline .bar{position:absolute;left:0;right:0;top:50%;border-top:1.5px solid var(--bp)}
.dimline .bar::before,.dimline .bar::after{content:"";position:absolute;top:-7px;width:1.5px;height:15px;background:var(--bp)}
.dimline .bar::before{left:0}.dimline .bar::after{right:0}
.dimline .lab{position:absolute;top:50%;left:50%;translate:-50% -50%;background:var(--surface);padding:3px 16px;font-family:var(--f-mono);font-size:var(--s--1);color:var(--bp);letter-spacing:.06em;white-space:nowrap}

/* ---------- Продукты (subgrid) ---------- */
.prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.prod{
  border:1px solid var(--line);background:var(--surface-card);min-width:0;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 5;
  transition:border-color var(--d-2) var(--e-out),transform var(--d-2) var(--e-out)}
.prods{grid-template-rows:auto auto auto 1fr auto}
.cards3>*,.prods>*,.steps>*,.works-grid>*,.grid12>*{min-width:0}
.prod:hover{border-color:var(--text);transform:translateY(-3px)}
.prod.feat{border-color:var(--brand-solid);box-shadow:inset 0 0 0 1px var(--brand-solid)}
.prod .cap{
  font-family:var(--f-mono);font-size:var(--s--1);text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-2);padding:14px 20px;border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;align-items:baseline}
.prod .cap span{min-width:0}
.prod .cap .badge{color:var(--brand-text)}
.prod .price{font-family:var(--f-mono);font-size:var(--s-1);color:var(--brand-text);padding:18px 20px 2px;white-space:nowrap}
.prod .term{font-family:var(--f-mono);font-size:var(--s--1);color:var(--text-2);padding:0 20px 14px}
.prod dl{margin:0;padding:0 20px}
.prod .li{display:flex;align-items:baseline;gap:8px;padding:6px 0;font-size:var(--s--1);min-width:0}
.prod dt{order:1;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* пунктирная выноска — градиент, а не строка точек: не ломает раскладку */
.prod .li::after{order:2;content:"";flex:1 1 auto;min-width:14px;align-self:center;height:1px;
  background:repeating-linear-gradient(90deg,var(--line) 0 2px,transparent 2px 6px)}
.prod dd{order:3;flex:none;margin:0;font-family:var(--f-mono);white-space:nowrap;color:var(--text-2)}
.prod .foot{padding:20px}
.prod .foot .btn{width:100%}
@container (max-width:340px){.prod .cap{flex-direction:column;align-items:flex-start;gap:2px}}

/* ---------- Раскладка сеток по ширине ---------- */
@media (min-width:701px) and (max-width:1050px){
  .cards3,.prods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .cards3,.prods,.steps,.works-grid{grid-template-columns:minmax(0,1fr)}
}
/* subgrid имеет смысл, только когда три карточки стоят в один ряд */
@media (max-width:1050px){
  .prods{grid-template-rows:none}
  .prod{display:flex;flex-direction:column;grid-row:auto}
  .prod dl{flex:1}
}

/* ---------- Конфигуратор ---------- */
.cfg{border:1px solid var(--text);background:var(--surface-card);container-type:inline-size}
.cfg .cap{font-family:var(--f-mono);font-size:var(--s--1);text-transform:uppercase;letter-spacing:.1em;color:var(--text-2);padding:14px 20px;border-bottom:1px solid var(--text)}
.cfg-body{padding:22px 20px 6px}
.qlab{font-family:var(--f-mono);font-size:var(--s--1);color:var(--text-2);letter-spacing:.05em;text-transform:uppercase;margin:0}
.seg{display:flex;flex-wrap:wrap;gap:8px;margin:11px 0 20px}
.chip{
  font-family:var(--f-mono);font-size:var(--s--1);padding:12px 18px;min-height:48px;
  border:1.5px solid var(--line);border-radius:26px;cursor:pointer;color:var(--text-2);
  transition:border-color var(--d-1) var(--e-out),color var(--d-1) var(--e-out),background-color var(--d-1) var(--e-out)}
.chip:hover{border-color:var(--text-3);color:var(--text)}
.chip[aria-checked="true"]{border-color:var(--brand-solid);color:var(--brand-text);background:var(--brand-tint)}
.cfg .out{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;border-top:1px solid var(--text);padding:18px 20px}
.cfg .out .sum{font-family:var(--f-mono);font-size:var(--s--1);color:var(--text-2)}
.cfg .out .sum b{font-size:var(--s-1);color:var(--brand-text);font-weight:500;white-space:nowrap;
  transition:opacity var(--d-2) var(--e-out)}
@container (max-width:460px){.cfg .out{flex-direction:column;align-items:stretch}.cfg .out .btn{width:100%}}

/* ---------- Работы ---------- */
/* Легенда: термины объясняются здесь же, иначе это просто набор аббревиатур */
.legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:clamp(26px,3vw,40px);
  background:var(--invert-line);border:1px solid var(--invert-line);list-style:none;padding:0}
.legend li{background:var(--invert-bg);padding:14px 16px;display:grid;gap:5px}
.legend b{font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.1em;color:var(--brand-ondark);font-weight:500}
.legend span{font-size:var(--s--1);color:var(--invert-text2);line-height:1.4}
@media (max-width:900px){.legend{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.legend{grid-template-columns:minmax(0,1fr)}}

/* Асимметричная сетка проектов: 6 колонок, разный вес карточек */
.proj-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(20px,2.4vw,30px)}
.proj-grid>*{min-width:0}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}
@media (max-width:1050px){.s2,.s3,.s4{grid-column:span 3}}
@media (max-width:700px){.s2,.s3,.s4,.s6{grid-column:span 6}}

.proj{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--invert-line);background:var(--invert-2);
  padding:clamp(20px,2.1vw,30px);overflow:clip;text-decoration:none;color:inherit;
  transition:border-color var(--d-2) var(--e-out),transform var(--d-2) var(--e-out),background-color var(--d-2) var(--e-out)}
.proj:hover{border-color:var(--brand-ondark);transform:translateY(-3px)}
.proj .no{
  position:absolute;top:-.18em;right:.24em;font-family:var(--f-disp);
  font-size:clamp(3.2rem,6vw,5.4rem);line-height:1;color:var(--invert-text);
  opacity:.07;pointer-events:none;transition:opacity var(--d-3) var(--e-out),color var(--d-3) var(--e-out)}
.proj:hover .no{opacity:.16;color:var(--brand-ondark)}
.proj .k{font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-ondark);margin:0}
.proj h3{font-size:var(--s-1);margin:10px 0 0;max-width:22ch;position:relative}
.proj .t{margin:12px 0 0;color:var(--invert-text2);font-size:var(--s--1);line-height:1.55;flex:1;max-width:52ch}
.proj .tags{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 0;padding:0;list-style:none}
.proj .tags li{font-family:var(--f-mono);font-size:var(--s--2);letter-spacing:.04em;
  padding:5px 10px;border:1px solid var(--invert-line);border-radius:20px;color:var(--invert-text2)}
/* Карточка «ваша ниша» — сетка, а не флекс: колоночный flex-wrap
   раскладывал её в несколько колонок и выносил текст за границы. */
.proj.blank{
  border-style:dashed;background:transparent;
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto);
  gap:10px clamp(16px,2.2vw,30px);align-items:baseline}
.proj.blank .no{top:-.28em;right:.3em;font-weight:400}
.proj.blank .k{grid-column:1/-1}
.proj.blank h3{grid-column:1;margin:0;max-width:16ch}
.proj.blank .t{grid-column:2;margin:0;max-width:46ch}
.proj.blank .go{grid-column:3;justify-self:end;white-space:nowrap;
  font-family:var(--f-mono);font-size:var(--s--1);color:var(--brand-ondark);
  display:inline-flex;gap:7px;align-items:center;min-height:24px}
.proj.blank:hover .go .arw{transform:translateX(4px)}
.proj .go .arw{transition:transform var(--d-2) var(--e-out)}
@media (max-width:900px){
  .proj.blank{grid-template-columns:minmax(0,1fr);gap:8px}
  .proj.blank .k,.proj.blank h3,.proj.blank .t,.proj.blank .go{grid-column:1;max-width:none}
  .proj.blank .go{justify-self:start;margin-top:6px}
}

/* ---------- Таблица сравнения ---------- */
.tablewrap{border:1px solid var(--text);overflow-x:auto;background:var(--surface-card)}
table.cmp{border-collapse:collapse;width:100%;min-width:660px;font-size:var(--s--1)}
table.cmp th,table.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}
table.cmp thead th{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--text-2);font-weight:500;white-space:nowrap}
table.cmp th[scope=row]{font-family:var(--f-sans);font-weight:600;color:var(--text);position:sticky;left:0;background:var(--surface-card);z-index:1;white-space:nowrap}
table.cmp td{color:var(--text-2)}
table.cmp .us{background:var(--brand-tint);color:var(--text);font-weight:600;white-space:nowrap}
table.cmp thead .us{background:var(--brand-solid);color:var(--on-brand)}

/* ---------- Схема AEO ---------- */
.aeo-fig{margin:0}
.aeo-fig svg{width:100%;height:auto;color:var(--text)}
.aeo-fig figcaption{font-family:var(--f-mono);font-size:var(--s--1);color:var(--text-3);margin-top:12px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:17px 0;font-weight:600;min-height:52px;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:13px;height:13px;
  background:linear-gradient(var(--brand-text) 0 0) center/100% 1.6px no-repeat,
             linear-gradient(var(--brand-text) 0 0) center/1.6px 100% no-repeat;
  transition:rotate var(--d-2) var(--e-out)}
.faq details[open] summary::after{background:linear-gradient(var(--brand-text) 0 0) center/100% 1.6px no-repeat;rotate:180deg}
.faq p{margin:0 0 18px;color:var(--text-2);max-width:60ch}

/* ---------- Карточка контактов ---------- */
.contact-card{border:1px solid var(--text);background:var(--surface-card);
  position:sticky;top:calc(var(--header-h,68px) + 20px)}
@media (max-width:900px){.contact-card{position:static}}
.contact-card .who-row{display:flex;gap:14px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--text)}
.contact-card .who-row img{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none}
.contact-card .who{font-family:var(--f-mono);font-size:var(--s--1);color:var(--text-2);line-height:1.4;margin:0}
.contact-card .who b{display:block;font-family:var(--f-sans);font-size:var(--s-0);color:var(--text);margin-bottom:2px}
.contact-body{padding:20px;display:grid;gap:16px}
.cc-lead{margin:0;color:var(--text-2)}
.cc-spec{margin:0;padding:12px 14px;border:1px dashed var(--line);
  font-family:var(--f-mono);font-size:var(--s--1);line-height:1.5;color:var(--text-2)}

/* согласие: цель 24×24, объяснение до кнопок, а не после */
.consent-check{display:flex;gap:12px;align-items:flex-start;font-family:var(--f-mono);
  font-size:var(--s--1);color:var(--text-2);line-height:1.5;cursor:pointer}
.consent-check input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--brand-solid);cursor:pointer}
.consent-check a{color:var(--brand-text)}
.consent-hint{margin:0;font-family:var(--f-mono);font-size:var(--s--1);color:var(--text-3);
  display:flex;gap:8px;align-items:baseline;transition:color var(--d-2) linear}
.consent-hint::before{content:"↓";color:var(--brand-text)}
.consent-hint.is-alert{color:var(--brand-text);font-weight:500}
@media (prefers-reduced-motion:no-preference){
  .consent-hint.is-alert{animation:hint-pulse 500ms var(--e-out) 2}
}
@keyframes hint-pulse{50%{opacity:.35}}

.msg-btns{display:grid;gap:10px}
.msg-btns .btn{width:100%;justify-content:center}
/* заблокировано — видно, что это состояние, а не оформление */
.msg-btns[data-locked="true"] .contact-link{
  opacity:.42;filter:grayscale(.5);cursor:not-allowed;
  transform:none!important;box-shadow:none!important}

/* ---------- Быстрая связь: полоса снизу на телефоне ----------
   Галочка согласия закрывает кнопки в карточке — а здесь связь
   доступна всегда, чтобы не терять звонки с телефона. */
.quickbar{display:none}
@media (max-width:900px){
  .quickbar{
    display:flex;gap:10px;align-items:center;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
    background:color-mix(in oklab, var(--surface) 92%, transparent);
    border-top:1px solid var(--line);
    backdrop-filter:blur(10px)}
  .quickbar .btn{flex:1 1 auto;min-width:0;justify-content:center}
  .qb-icon{
    flex:none;width:48px;height:48px;display:grid;place-items:center;
    border:1px solid var(--text);border-radius:var(--radius);
    color:var(--text);text-decoration:none;
    transition:background var(--d-1) var(--e-out),color var(--d-1) var(--e-out)}
  .qb-icon svg{width:21px;height:21px}
  .qb-icon:hover,.qb-icon:focus-visible{background:var(--text);color:var(--surface)}
  /* полоса не должна накрывать конец подвала */
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  /* при открытом меню полоса мешает — убираем */
  .mobnav[data-open="true"] ~ .quickbar{display:none}
}
@media print{.quickbar{display:none!important}}

/* ---------- Подвал ---------- */
.site-foot{padding-block:clamp(40px,5vw,68px) clamp(44px,5vw,72px);border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,1.6vw,26px);row-gap:30px}
.foot-brand{grid-column:1/5}
.foot-col{grid-column:span 2}
.foot-col:nth-of-type(2){grid-column:5/8}
.foot-col:nth-of-type(3){grid-column:8/11}
.foot-col:nth-of-type(4){grid-column:11/13}
.foot-col .foot-h{font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:500;margin-bottom:12px}
.foot-col ul{display:grid;gap:9px;list-style:none;padding:0;margin:0}
.foot-col a{color:var(--text-2);text-decoration:none;font-size:var(--s--1)}
.foot-col a:hover{color:var(--text);text-decoration:underline;text-decoration-color:var(--brand-text)}
.foot-legal{grid-column:1/-1;border-top:1px solid var(--line-soft);padding-top:20px;font-family:var(--f-mono);font-size:var(--s--2);color:var(--text-3);line-height:1.6;display:flex;flex-wrap:wrap;gap:6px 22px}
@media (max-width:900px){
  .foot-brand{grid-column:1/-1}
  .foot-col,.foot-col:nth-of-type(2),.foot-col:nth-of-type(3),.foot-col:nth-of-type(4){grid-column:span 6}
}
@media (max-width:560px){.foot-col,.foot-col:nth-of-type(2),.foot-col:nth-of-type(3),.foot-col:nth-of-type(4){grid-column:1/-1}}

/* ---------- Хлебные крошки ---------- */
.crumbs{font-family:var(--f-mono);font-size:var(--s--1);color:var(--text-3);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--brand-text);text-decoration:none;display:inline-flex;align-items:center;min-height:24px}
.crumbs a:hover{text-decoration:underline}
.invert .crumbs{color:var(--invert-text2)}
.invert .crumbs a{color:var(--brand-ondark)}

/* ---------- Статья ---------- */
.article-head{padding-block:clamp(28px,4vw,52px) clamp(22px,3vw,36px)}
.article-head h1{font-size:var(--s-3);margin-top:16px;max-width:20ch}
.article-meta{font-family:var(--f-mono);font-size:var(--s--1);color:var(--text-3);margin-top:16px;display:flex;gap:8px 16px;flex-wrap:wrap}
.art-aside{grid-column:1/4;min-width:0}
.art-body{grid-column:4/12;min-width:0}
@media (max-width:900px){.art-aside,.art-body{grid-column:1/-1}}
.art-lead{font-size:1.12em!important;color:var(--text)!important;line-height:1.5!important}
.prose{max-width:var(--measure);font-size:clamp(1.02rem,.99rem + .2vw,1.14rem);line-height:1.68;color:var(--text)}
.prose :where(p){margin:0;color:var(--text-2)}
.prose>*+*{margin-top:1.05em}
.prose>p:first-of-type{font-size:1.1em;color:var(--text);line-height:1.55}
.prose h2{font-size:var(--s-2);margin-top:1.9em;letter-spacing:-.02em}
.prose h3{font-size:var(--s-1);margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.25em;display:grid;gap:.5em;color:var(--text-2)}
.prose li::marker{color:var(--brand-text)}
.prose a{color:var(--text);text-decoration-color:var(--brand-text)}
.prose strong{color:var(--text)}
.prose blockquote{border-left:2px solid var(--brand-solid);padding-left:1.1em;margin-left:0;color:var(--text);font-size:1.05em}
.prose table{width:100%;border-collapse:collapse;font-size:var(--s--1)}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.prose code{font-family:var(--f-mono);font-size:.92em;background:var(--surface-3);padding:.1em .35em;border-radius:4px}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:2.2em}
.prose .callout{border:1px solid var(--line);border-left:2px solid var(--brand-solid);background:var(--surface-card);padding:18px 20px;font-size:.97em}
.prose .callout p{margin:0;color:var(--text)}

/* прогресс чтения — scroll-driven, без JS */
.readbar{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;z-index:60;
  background:var(--brand-vivid);scale:0 1}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .readbar{animation:readgrow linear;animation-timeline:scroll(root block)}
  }
}
@keyframes readgrow{from{scale:0 1}to{scale:1 1}}

/* оглавление статьи */
.toc{position:sticky;top:calc(var(--header-h,68px) + 28px);font-family:var(--f-mono);font-size:var(--s--1)}
.toc h2{font-size:var(--s--1);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:500;margin-bottom:14px}
.toc ol{display:grid;gap:11px;counter-reset:t;padding:0;list-style:none}
.toc a{display:flex;gap:10px;color:var(--text-2);text-decoration:none;line-height:1.4;min-height:24px;align-items:flex-start;padding-block:3px}
.toc a::before{counter-increment:t;content:counter(t,decimal-leading-zero);color:var(--text-3);flex:none}
.toc a:hover{color:var(--brand-text)}
@media (max-width:900px){.toc{position:static;border:1px solid var(--line);padding:18px;margin-bottom:28px}}

/* карточки статей в списке */
.post-list{display:grid;gap:0;border-top:1px solid var(--line)}
.post{
  display:grid;grid-template-columns:auto 1fr;gap:6px clamp(20px,4vw,64px);align-items:start;
  padding-block:clamp(22px,2.6vw,34px);border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:background-color var(--d-2) var(--e-out)}
.post:hover{background:var(--surface-card)}
.post:hover h2{color:var(--brand-text)}
.post .pmeta{font-family:var(--f-mono);font-size:var(--s--1);color:var(--text-3);white-space:nowrap;padding-top:.35em}
.post h2{font-size:var(--s-1);margin:0;transition:color var(--d-1) linear;max-width:26ch}
.post p{margin:8px 0 0;color:var(--text-2);font-size:var(--s--1);max-width:62ch}
.post .go{grid-column:2;margin-top:12px;font-family:var(--f-mono);font-size:var(--s--1);color:var(--brand-text);display:inline-flex;gap:7px;align-items:center}
.post .go .arw{transition:transform var(--d-2) var(--e-out)}
.post:hover .go .arw{transform:translateX(4px)}
@media (max-width:700px){
  .post{grid-template-columns:1fr}
  .post .go{grid-column:1}
}

/* ---------- Кейс ---------- */
.case-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.case-facts div{background:var(--surface-card);padding:18px 20px}
.case-facts dt{font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.case-facts dd{margin:8px 0 0;font-size:var(--s-1);font-weight:700;letter-spacing:-.02em}


/* ---------- Страница «Работы» ---------- */
.terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(20px,2.4vw,30px)}
.terms>div{background:var(--surface-card);padding:20px 22px}
.terms dt{font-family:var(--f-disp);font-size:var(--s-1);color:var(--brand-text);display:grid;gap:4px}
.terms dt span{font-family:var(--f-mono);font-size:var(--s--2);letter-spacing:.04em;color:var(--text-3);
  text-transform:none;font-weight:400}
.terms dd{margin:12px 0 0;color:var(--text-2);font-size:var(--s--1);line-height:1.55;max-width:46ch}
@media (max-width:760px){.terms{grid-template-columns:minmax(0,1fr)}}

.wcases{display:grid;gap:clamp(14px,1.8vw,22px)}
.wcase{border:1px solid var(--line);background:var(--surface-card);overflow:clip;
  transition:border-color var(--d-2) var(--e-out)}
.wcase:hover{border-color:var(--text-3)}
.wcase:target{border-color:var(--brand-solid);box-shadow:inset 0 0 0 1px var(--brand-solid)}
.wcase-head{display:flex;gap:clamp(16px,2vw,28px);align-items:baseline;
  padding:clamp(18px,2vw,26px);border-bottom:1px solid var(--line);background:var(--surface-2)}
.wcase-head .no{font-family:var(--f-disp);font-size:clamp(2rem,3.4vw,3.2rem);line-height:1;
  color:var(--brand-text);flex:none}
.wcase-head .k{font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-3);margin:0}
.wcase-head h2{font-size:var(--s-1);margin:8px 0 0;max-width:28ch}
.wcase-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);
  padding:clamp(20px,2.4vw,30px)}
.wcase-body h3{font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);font-weight:500;margin-bottom:10px}
.wcase-body p{margin:0;color:var(--text-2);font-size:var(--s--1);line-height:1.6}
.wcase-body ul:not(.tags){margin:0;padding-left:1.1em;display:grid;gap:7px;color:var(--text-2);
  font-size:var(--s--1);line-height:1.5}
.wcase-body ul:not(.tags) li::marker{color:var(--brand-text)}
.wcase-body .tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:16px 0 0;
  border-top:1px solid var(--line-soft);list-style:none}
.wcase-body .tags li{font-family:var(--f-mono);font-size:var(--s--2);letter-spacing:.04em;
  padding:5px 11px;border:1px solid var(--line);border-radius:20px;color:var(--text-2);background:var(--surface)}
@media (max-width:900px){.wcase-body{grid-template-columns:minmax(0,1fr)}}

/* ---------- 404 ---------- */
.err{min-height:70svh;display:grid;align-content:center;padding-block:clamp(50px,10vw,120px)}
.err .code{font-family:var(--f-disp);font-size:var(--s-5);line-height:.9;color:var(--brand-text)}
.err h1{font-size:var(--s-3);margin-top:20px;max-width:18ch}
}

/* ============================================================
   6. УТИЛИТЫ И ДВИЖЕНИЕ
   ============================================================ */
@layer utilities {
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.mt-s{margin-top:16px}.mt-m{margin-top:clamp(24px,3vw,38px)}.mt-l{margin-top:clamp(34px,4.4vw,58px)}

/* Появление при скролле. База — видимо; анимация лишь добавляет вход.
   Так контент не пропадает при печати, в скриншотах и без поддержки. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @media (min-width:701px){
      /* data-r ставит скрипт только тем блокам, что при загрузке ниже экрана.
         Без JS, при печати и в скриншотах контент виден всегда. */
      .reveal[data-r]{animation:rise linear both;animation-timeline:view();animation-range:entry 4% entry 86%}
    }
  }
}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Переходы между страницами */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out 140ms var(--e-io) both}
  ::view-transition-new(root){animation:vt-in 260ms var(--e-out) both}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .readbar{display:none}
}

@media print{
  body::before,.top,.mobnav,.readbar,.icon-btn{display:none!important}
  .contact-card{position:static;break-inside:avoid}
  .consent-check,.consent-hint{display:none!important}
  .msg-btns[data-locked="true"] .contact-link{opacity:1;filter:none}
  .sec{padding-block:20px;break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}
}


/* ─────────────────────────── Уведомление о cookie
   Метрика не грузится, пока не нажали «Принять». Полоса снизу поверх всего.
   Выше по слою, чем quickbar: две фиксированные полосы друг на друге
   читаются как ошибка, поэтому сначала решаем про cookie. */
.cookie{position:fixed;inset-inline:0;inset-block-end:0;z-index:90;
  padding:var(--s4) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom,0px));
  background:var(--invert-bg);color:var(--invert-text);
  box-shadow:0 -14px 44px -26px rgb(0 0 0/.55)}
.cookie[hidden]{display:none}
.cookie__box{width:min(100% - var(--gutter)*2, var(--content));margin-inline:auto;
  display:grid;gap:10px 32px;grid-template-columns:1fr auto;align-items:center}
.cookie__t{grid-column:1;grid-row:1;font-family:var(--f-disp);color:var(--invert-text);margin:0}
.cookie__p{grid-column:1;grid-row:2;font-family:var(--f-mono);font-size:var(--s--1);
  line-height:1.55;color:var(--invert-text2);max-inline-size:64ch;margin:0}
.cookie__p a{color:var(--brand-ondark)}
.cookie__row{grid-column:2;grid-row:1/3;display:flex;flex-wrap:wrap;gap:10px}
.cookie__row .btn{--btn-fg:var(--invert-text);--btn-bd:var(--invert-line)}
.cookie__row .btn.is-yes{--btn-bg:var(--brand-solid);--btn-fg:var(--on-brand);--btn-bd:var(--brand-solid)}
/* пока баннер виден, нижнюю полосу связи прячем */
body:has(.cookie:not([hidden])) .quickbar{display:none}
@media (max-width:720px){
  .cookie__box{grid-template-columns:1fr}
  .cookie__t,.cookie__p,.cookie__row{grid-column:1}
  .cookie__row{grid-row:auto}
}
@media print{.cookie{display:none}}