/* ================= ПАЛИТРА =================
     Цвета хранятся тройками каналов, а не готовым цветом: одна и та же
     переменная годится и для сплошной заливки, и для полупрозрачной,
     и для утилит Tailwind вида border-steel/40. Смена темы — это подмена
     значений здесь, а не второй набор правил на весь файл. */
  :root {
    --c-bg:     9 9 9;         /* холст */
    --c-text:   247 249 250;   /* основной текст */
    --c-muted:  160 167 173;   /* приглушённый текст */
    --c-prose:  207 212 216;   /* тело статьи */
    --c-accent: 250 88 56;     /* акцент и CTA */
    --c-line:   71 84 103;     /* бордеры */
    --c-hint:   107 107 107;   /* подсказки в полях */
    --c-fill:   240 240 240;   /* заливка строк услуг */
    --c-glow:   149 28 4;      /* атмосферное свечение */
    --c-deep:   52 10 1;       /* тёмная тёплая поверхность */
    --c-deeper: 26 5 0;
    --c-sphere: 27 10 5;       /* тело сферы */

    --shade: 0 0 0;            /* чем затемняем объём */
    --star-alpha: 1;           /* звёздное поле видно */
    --c-scrim: 9 9 9;          /* подложка под модалкой */
  }

  /* Светлая тема. Акцент здесь темнее: rgb(250 88 56) на светлом фоне
     даёт 3.08:1 и не проходит AA как текст. Выбранный тон даёт 5.59:1
     как текст и 5.84:1 под светлым текстом на кнопке. */
  :root[data-theme="light"] {
    --c-bg:     250 250 248;
    --c-text:   17 18 20;
    --c-muted:  88 94 102;
    --c-prose:  44 48 54;
    --c-accent: 186 52 26;
    --c-line:   199 204 211;
    --c-hint:   108 112 118;
    --c-fill:   17 18 20;
    --c-glow:   255 214 196;
    --c-deep:   255 236 228;
    --c-deeper: 255 246 241;
    --c-sphere: 255 233 223;

    --shade: 120 96 88;
    --star-alpha: 0;           /* звёзды на светлом фоне неуместны */
    --c-scrim: 24 22 21;
  }

  /* Эффекты, построенные на темноте, переменными не переносятся —
     им нужна отдельная светлая раскладка. */
  :root[data-theme="light"] #starfield { display: none; }

  :root[data-theme="light"] .cosmic-veil { opacity: .55; }

  :root[data-theme="light"] .rook3d { opacity: .28; }
  :root[data-theme="light"] .rook3d .tier {
    background:
      linear-gradient(90deg,
        rgb(226 219 214) 0%, rgb(240 234 229) 16%, rgb(250 246 243) 36%,
        rgb(255 252 250) 54%, rgb(238 231 226) 76%, rgb(221 213 208) 100%);
    box-shadow:
      inset -16px 0 34px -22px rgb(var(--c-accent) / .5),
      inset 20px 0 40px -24px rgb(var(--shade) / .28);
  }
  :root[data-theme="light"] .rook3d::after {
    background: radial-gradient(50% 50% at 50% 50%, rgb(var(--shade) / .16), transparent 70%);
  }

  /* Сфера остаётся тёплой и объёмной, но тень мягче: на светлом холсте
     чёрный ореол выглядел бы грязным пятном. */
  :root[data-theme="light"] .orbit-core {
    box-shadow:
      inset calc(var(--dx) * -20px) calc(var(--dy) * -20px) 46px -18px rgb(var(--c-accent) / .55),
      inset calc(var(--dx) * 24px) calc(var(--dy) * 24px) 54px -22px rgb(var(--shade) / .34),
      calc(var(--dx) * 22px) calc(var(--dy) * 22px) 76px -16px rgb(var(--c-accent) / .22);
  }

  /* Логотипы клиентов: на светлом фоне их надо не осветлять, а затемнять. */
  :root[data-theme="light"] .client-logo {
    filter: brightness(0);
    opacity: .55;
  }
  :root[data-theme="light"] .client-logo--onblack {
    filter: grayscale(1) brightness(.55) invert(1);
    mix-blend-mode: multiply;
  }

  /* Матовое стекло на светлом фоне должно быть светлее холста, а не темнее. */
  :root[data-theme="light"] .frost {
    background: rgb(255 255 255 / .72);
    border-color: rgb(var(--c-line) / .8);
  }
  :root[data-theme="light"] .frost-hover:hover,
  :root[data-theme="light"] .frost-hover:focus-within {
    background: rgb(255 255 255 / .92);
  }
  :root[data-theme="light"] .svc-row { background: rgb(255 255 255 / .6); }
  :root[data-theme="light"] .svc-row:hover,
  :root[data-theme="light"] .svc-row[open],
  :root[data-theme="light"] .svc-row:focus-within { background: rgb(255 255 255 / .9); }
  :root[data-theme="light"] .lead-input { background: rgb(255 255 255 / .9); }
  :root[data-theme="light"] .orbit-node { background: rgb(255 255 255 / .5); }
  :root[data-theme="light"] .note { background: rgb(255 255 255 / .7); }

  /* Контур гигантского номера кейса на светлом фоне почти не виден */
  :root[data-theme="light"] .case-mark { -webkit-text-stroke-color: rgb(var(--c-text) / .12); }

  html { scroll-behavior: smooth; }
  body {
    background: rgb(var(--c-bg));
    overflow-x: hidden;
    transition: background-color .35s ease;
  }
  @media (prefers-reduced-motion: reduce) { body { transition: none; } }

  /* ---------- Небесный радиальный свет (dope: Cosmic Gradient) ---------- */
  .cosmic-veil {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(58% 46% at 50% 6%,  rgb(var(--c-glow) / .58) 0%, rgb(var(--c-glow) / 0) 68%),
      radial-gradient(40% 34% at 78% 22%, rgb(var(--c-accent) / .26) 0%, rgb(var(--c-accent) / 0) 70%),
      radial-gradient(46% 40% at 16% 34%, rgb(var(--c-deep) / .55) 0%, rgb(var(--c-deep) / 0) 72%);
  }
  /* 21 TSI: blur(15px) как атмосферный приём */
  .veil-blur { filter: blur(15px); }

  /* ---------- Матовое стекло (dope: Frosted Pane) ---------- */
  .frost {
    background: rgb(var(--c-text) / .045);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgb(var(--c-line) / .45);
  }
  .frost-hover { transition: border-color .3s ease, background-color .3s ease; }
  .frost-hover:hover, .frost-hover:focus-within {
    border-color: rgb(var(--c-accent) / .55);
    background: rgb(var(--c-text) / .07);
  }

  /* ---------- Поле градиента (dope: Gradient Field rgb(var(--c-deep))) ---------- */
  .gradient-field {
    background: linear-gradient(142deg, rgb(var(--c-deep)) 0%, rgb(var(--c-deeper)) 62%, rgb(var(--c-bg)) 100%);
    border: 1px solid rgb(var(--c-glow) / .4);
  }

  /* ---------- 21 TSI: контурная pill-кнопка, 70px радиус, только вторичное ---------- */
  .pill-outline {
    border: 1px solid rgb(var(--c-text) / .55);
    border-radius: 70px;
    transition: border-color .4s cubic-bezier(.22,1,.36,1), background-color .4s cubic-bezier(.22,1,.36,1);
  }
  .pill-outline:hover, .pill-outline:focus-visible {
    border-color: rgb(var(--c-text));
    background: rgb(var(--c-text) / .08);
  }

  /* ---------- Появление секций ---------- */
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }

  /* ---------- Бегущая лента ---------- */
  .ribbon { overflow: hidden; white-space: nowrap; }
  .ribbon-inner { display: inline-block; animation: drift 46s linear infinite; }
  .ribbon-reverse .ribbon-inner { animation-direction: reverse; }
  @keyframes drift { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }

  /* ---------- Лента клиентов ---------- */
  .marquee { overflow: hidden; }
  .marquee-track { display: flex; gap: 20px; width: max-content; animation: mscroll 36s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  /* набор логотипов повторён трижды, поэтому цикл — ровно треть ширины */
  @keyframes mscroll { to { transform: translateX(-33.3333%); } }
  /* Логотипы клиентов: разноцветные исходники приводим к одному белому
     весу, иначе лента распадается на пёстрые пятна. */
  .client-logo {
    height: 30px; width: auto; max-width: 156px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .48;
    transition: opacity .3s ease;
  }
  .marquee li:hover .client-logo { opacity: 1; }
  /* Логотип без альфа-канала, на чёрной подложке: инвертировать нельзя —
     зальётся весь прямоугольник. Режим screen гасит чёрный фон на тёмном
     холсте и оставляет только сам знак. */
  .client-logo--onblack {
    /* обесцвечиваем и подтягиваем яркость, чтобы вес совпал с остальными */
    filter: grayscale(1) brightness(1.55);
    mix-blend-mode: screen;
  }

  /* ---------- Прогресс ---------- */
  .progress-line {
    position: absolute; left: 0; bottom: -1px; height: 1px; width: 0%;
    background: linear-gradient(90deg, rgb(var(--c-accent) / 0), rgb(var(--c-accent)));
    transition: width .12s linear;
  }

  /* ---------- Объёмная ладья на фоне ----------
     Собрана из ярусов-цилиндров: эллиптические торцы + горизонтальный
     градиент дают объём, тёплый контровой свет справа привязывает
     фигуру к акценту. Двигается параллаксом при скролле. */
  .rook3d {
    position: absolute;
    pointer-events: none;
    user-select: none;
    width: 300px; height: 430px;
    opacity: .5;
    will-change: transform;
  }
  .rook3d .tier {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50% / 20% 20% 16% 16%;
    background:
      linear-gradient(90deg,
        #060302 0%, #140704 16%, #2a0e06 36%,
        #3a1408 54%, #1e0a05 76%, #070302 100%);
    box-shadow:
      inset -16px 0 34px -22px rgb(var(--c-accent) / .95),
      inset 20px 0 40px -24px rgba(0, 0, 0, .9);
  }
  .rook3d .r-base   { width: 268px; height: 58px;  bottom: 0; }
  .rook3d .r-plinth { width: 214px; height: 34px;  bottom: 46px; }
  .rook3d .r-body   { width: 150px; height: 196px; bottom: 74px; border-radius: 50% / 12% 12% 8% 8%; }
  .rook3d .r-collar { width: 206px; height: 38px;  bottom: 258px; }
  .rook3d .r-crown  { width: 232px; height: 62px;  bottom: 288px; }
  .rook3d .merlon   { width: 44px;  height: 54px;  bottom: 338px; border-radius: 34% / 26% 26% 12% 12%; }
  .rook3d .m1 { transform: translateX(-50%) translateX(-84px); }
  .rook3d .m2 { transform: translateX(-50%) translateX(-28px); }
  .rook3d .m3 { transform: translateX(-50%) translateX(28px); }
  .rook3d .m4 { transform: translateX(-50%) translateX(84px); }
  .rook3d::after {
    content: "";
    position: absolute; left: 50%; bottom: -26px;
    width: 320px; height: 90px; transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgb(var(--c-accent) / .3), transparent 70%);
    filter: blur(14px);
  }
  @media (max-width: 767px) {
    .rook3d { width: 210px; height: 300px; opacity: .32; }
    .rook3d .r-base   { width: 188px; height: 41px; }
    .rook3d .r-plinth { width: 150px; height: 24px; bottom: 32px; }
    .rook3d .r-body   { width: 105px; height: 137px; bottom: 52px; }
    .rook3d .r-collar { width: 144px; height: 27px; bottom: 180px; }
    .rook3d .r-crown  { width: 162px; height: 43px; bottom: 201px; }
    .rook3d .merlon   { width: 31px; height: 38px; bottom: 236px; }
    .rook3d .m1 { transform: translateX(-50%) translateX(-59px); }
    .rook3d .m2 { transform: translateX(-50%) translateX(-20px); }
    .rook3d .m3 { transform: translateX(-50%) translateX(20px); }
    .rook3d .m4 { transform: translateX(-50%) translateX(59px); }
    .rook3d::after { width: 224px; height: 63px; }
  }

  /* ---------- Строки услуг с прогрессивной заливкой ----------
     Приём из dope.security: гигантский моно-капс с трекингом 0.2em.
     Два слоя одного текста — нижний контурный, верхний сплошной
     и обрезанный по ширине. По умолчанию залито на 100%:
     без JS и при reduced-motion текст читаем. */
  .svc-row {
    border: 1px solid rgb(var(--c-line) / .4);
    border-radius: 19.2px;
    background: rgb(var(--c-text) / .02);
    transition: border-color .4s cubic-bezier(.22,1,.36,1), background-color .4s cubic-bezier(.22,1,.36,1);
  }
  .svc-row:hover, .svc-row[open], .svc-row:focus-within {
    border-color: rgb(var(--c-accent) / .5);
    background: rgb(var(--c-text) / .045);
  }
  /* Номер-якорь перед названием. В заливке не участвует. */
  .row-num {
    flex-shrink: 0;
    line-height: 1;
    color: rgb(var(--c-accent));
    font-family: "JetBrains Mono", monospace;
    font-size: clamp(12px, 1.7vw, 20px);
    letter-spacing: 0.1em;
    padding-top: .35em;
  }
  .row-type {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-family: "JetBrains Mono", monospace;
    font-weight: 400;
    font-size: clamp(15px, 3.9vw, 56px);
    letter-spacing: 0.2em;
    line-height: 1.1;
  }
  .row-outline {
    color: transparent;
    -webkit-text-stroke: 1px rgb(var(--c-text) / .55);
  }
  .row-fill {
    position: absolute;
    left: 0; top: 0;
    color: rgb(var(--c-fill));
    clip-path: none;
  }
  .rows-animated .row-fill {
    clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0);
    transition: clip-path .18s linear;
  }
  .row-arrow { transition: transform .4s cubic-bezier(.22,1,.36,1); }
  .svc-row[open] .row-arrow { transform: rotate(90deg); }

  /* ---------- Кейсы-главы (подача dope.security) ----------
     Каждый кейс — отдельная «глава»: гигантский контурный номер на фоне,
     вращающееся кольцо из подписи вокруг светящегося ядра,
     тонкая линия-таймлайн через всю ширину. */
  .case-mark {
    position: absolute;
    right: 2%;
    max-width: 100%;
    overflow: hidden;
    top: 50%;
    transform: translateY(-50%);
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: clamp(180px, 30vw, 460px);
    line-height: .8;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 1px rgb(var(--c-text) / .07);
    pointer-events: none;
    user-select: none;
  }
  /* На детальной странице номер уходит влево — справа стоит кольцо. */
  .case-mark--left { right: auto; left: -1%; }

  .case-line {
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: rgb(var(--c-line) / .45);
    pointer-events: none;
  }
  .case-line::after {
    content: "";
    position: absolute; right: 12%; top: 50%;
    width: 7px; height: 7px; margin-top: -3.5px;
    border-radius: 9999px;
    background: rgb(var(--c-accent));
    box-shadow: 0 0 14px rgb(var(--c-accent) / .95);
  }
  .orbit-wrap { position: relative; width: min(80vw, 340px); aspect-ratio: 1/1; }
  .orbit {
    position: absolute; inset: 0;
    animation: orbit-spin 34s linear infinite;
  }
  .orbit-rev { animation-direction: reverse; }
  @keyframes orbit-spin { to { transform: rotate(360deg); } }
  .orbit text {
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px;
    letter-spacing: .28em;
    fill: rgb(var(--c-text) / .62);
    text-transform: uppercase;
  }
  /* Сфера. Свет управляется переменными: --lx/--ly — точка блика,
     --dx/--dy — единичный вектор «куда светит» (от -1 до 1).
     JS обновляет их по положению курсора; значения ниже — состояние покоя. */
  .orbit-core {
    position: absolute;
    left: 50%; top: 50%;
    width: 62%; aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    border-radius: 9999px;

    --lx: 36%;
    --ly: 30%;
    --dx: -0.42;
    --dy: -0.58;

    background:
      /* горячее пятно */
      radial-gradient(30% 30% at var(--lx) var(--ly),
        rgba(255, 176, 148, .55), rgba(255, 140, 110, .16) 55%, transparent 72%),
      /* рассеянный свет */
      radial-gradient(72% 72% at var(--lx) var(--ly),
        rgb(var(--c-accent) / .46), rgb(var(--c-accent) / .07) 52%, transparent 76%),
      /* тело сферы */
      radial-gradient(50% 50% at 50% 50%, rgb(var(--c-sphere)), rgb(var(--c-bg)) 78%);

    box-shadow:
      /* подсветка кромки со стороны света */
      inset calc(var(--dx) * -20px) calc(var(--dy) * -20px) 46px -18px rgb(var(--c-accent) / .72),
      /* затемнение противоположной стороны */
      inset calc(var(--dx) * 24px) calc(var(--dy) * 24px) 54px -22px rgba(0, 0, 0, .95),
      /* ореол смещается в сторону света */
      calc(var(--dx) * 22px) calc(var(--dy) * 22px) 76px -16px rgb(var(--c-accent) / .34);
  }

  /* ---------- Маркер, катящийся по сфере ----------
     Не персонаж, а элемент интерфейса: капсула из матового стекла
     с тонкой линейной пиктограммой — тот же язык, что у чипов и колец.
     Обёртка вращается вокруг центра сферы, капсула контр-вращается,
     поэтому пиктограмма всегда стоит ровно. */
  .orbit-walker {
    position: absolute;
    left: 50%; top: 50%;
    width: 62%; aspect-ratio: 1 / 1;
    z-index: 2;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(-38deg);
    animation: orbit-roll 13s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  }
  @keyframes orbit-roll {
    from { transform: translate(-50%, -50%) rotate(-38deg); }
    to   { transform: translate(-50%, -50%) rotate(38deg); }
  }

  .orbit-node {
    position: absolute;
    left: 50%; top: 0;
    width: 24%; aspect-ratio: 1 / 1;
    transform: translate(-50%, -54%);
    display: grid;
    place-items: center;
    border-radius: 9999px;
    background: rgb(var(--c-text) / .055);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgb(var(--c-text) / .34);
    box-shadow:
      0 0 20px -5px rgb(var(--c-accent) / .6),
      inset 0 0 14px -7px rgb(var(--c-accent) / .85);
    /* гасим наклон обёртки, чтобы пиктограмма не заваливалась */
    rotate: 38deg;
    animation: orbit-roll-counter 13s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  }
  @keyframes orbit-roll-counter {
    from { rotate: 38deg; }
    to   { rotate: -38deg; }
  }

  .orbit-node svg { width: 58%; height: auto; display: block; }

  @media (prefers-reduced-motion: reduce) {
    .orbit-walker { animation: none; transform: translate(-50%, -50%) rotate(-12deg); }
    .orbit-node { animation: none; rotate: 12deg; }
  }

  /* ---------- Построчное появление текста ----------
     Каждая строка живёт в маске с overflow:hidden и выезжает снизу.
     Разбивку по строкам делает JS после раскладки, поэтому переносы
     всегда совпадают с реальными. Без JS текст виден как обычно. */
  .reveal-line {
    display: block;
    overflow: hidden;
    /* хвосты букв (у, р, д) не должны срезаться маской */
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
  }
  .reveal-line > span {
    display: block;
    transform: translateY(110%);
    opacity: 0;
    transition:
      transform .9s cubic-bezier(.22, 1, .36, 1),
      opacity .9s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--d, 0ms);
  }
  .is-lit .reveal-line > span { transform: translateY(0); opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .reveal-line > span { transform: none; opacity: 1; transition: none; }
  }

  /* ---------- Аккордеоны ---------- */
  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }
  .faq-icon { transition: transform .4s cubic-bezier(.22,1,.36,1); display: inline-block; }
  details[open] .faq-icon { transform: rotate(45deg); }

  /* ---------- Модалка ---------- */
  dialog#lead-modal { background: transparent; border: none; padding: 0; max-width: 100%; }
  /* Затемнение под модалкой всегда тёмное: на светлой теме белая подложка
     не отделяла бы окно от страницы. */
  dialog#lead-modal::backdrop { background: rgb(var(--c-scrim) / .82); backdrop-filter: blur(10px); }
  .lead-input {
    width: 100%; background: rgb(var(--c-text) / .05);
    border: 1px solid rgb(var(--c-line) / .6); border-radius: 8px;
    color: rgb(var(--c-text)); padding: 13px 15px;
    font-family: Montserrat, sans-serif; font-size: 16px; font-weight: 400;
  }
  .lead-input::placeholder { color: rgb(var(--c-hint)); }
  .lead-input:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; border-color: rgb(var(--c-accent)); }

  /* Галочка согласия: цель для пальца не меньше 20px, цвет — акцентный */
  .lead-check {
    width: 20px; height: 20px; flex: 0 0 auto; margin: 0;
    accent-color: rgb(var(--c-accent)); cursor: pointer;
  }
  .lead-check:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 3px; }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .ribbon-inner, .marquee-track { animation: none; }
    .faq-icon, .progress-line, .client-logo, .frost-hover, .pill-outline { transition: none; }
    .orbit { animation: none; }
    /* строки остаются полностью залитыми и читаемыми */
    .svc-row, .row-fill, .row-arrow { transition: none; }
    .row-fill { clip-path: none !important; }
    .marquee { overflow-x: auto; }
    [data-parallax] { translate: none !important; }
  }

  /* ================= ВНУТРЕННИЕ СТРАНИЦЫ ================= */

  /* Категории кейсов: ряд ссылок, у активной — подчёркивание во всю ширину.
     Линия есть у каждой, но сжата в точку: переключение анимируется,
     а скрипту достаточно переставить один класс. */
  .cat-link {
    display: inline-block;
    color: rgb(var(--c-text));
    transition: color .3s ease;
  }
  .cat-link:hover { color: rgb(var(--c-accent)); }
  .cat-link.is-active { color: rgb(var(--c-accent)); }
  .cat-link:focus-visible {
    outline: 2px solid rgb(var(--c-accent));
    outline-offset: 4px;
    border-radius: 2px;
  }
  .cat-link__line {
    display: block;
    height: 2px;
    margin-top: 8px;
    background: rgb(var(--c-accent));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  }
  .cat-link.is-active .cat-link__line { transform: scaleX(1); }

  /* Карточки проявляются при смене категории, а не возникают рывком.
     transform в переходе — для возврата карточки после наклона за курсором. */
  .card-link { transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
  .cases-swapping .card-link { opacity: 0; }

  /* Пока курсор ведёт карточку, доводка не нужна — иначе наклон запаздывает */
  .card-link:hover { transition: opacity .3s ease, transform 0s; }

  @media (prefers-reduced-motion: reduce) {
    .cat-link, .cat-link__line, .card-link { transition: none; }
  }

  /* Хлебные крошки */
  .crumbs a { color: rgb(var(--c-muted)); transition: color .3s ease; }
  .crumbs a:hover { color: rgb(var(--c-text)); }

  /* Тело статьи: узкая мера, ритм по вертикали */
  .prose { max-width: 68ch; }
  .prose > * + * { margin-top: 1.5em; }
  .prose p {
    font-size: 17px; line-height: 1.75; font-weight: 300;
    color: rgb(var(--c-prose)); letter-spacing: .002em;
  }
  .prose h2 {
    margin-top: 2.4em;
    font-family: "Playfair Display", serif;
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 400; line-height: 1.15; letter-spacing: -.03em;
    color: rgb(var(--c-text));
  }
  .prose h3 {
    margin-top: 1.9em;
    font-family: Montserrat, sans-serif;
    font-size: 19px; font-weight: 500; letter-spacing: -.01em;
    color: rgb(var(--c-text));
  }
  .prose ul, .prose ol { padding-left: 1.35em; }
  .prose li {
    font-size: 17px; line-height: 1.7; font-weight: 300; color: rgb(var(--c-prose));
    margin-top: .6em;
  }
  .prose li::marker { color: rgb(var(--c-accent)); }
  .prose strong { color: rgb(var(--c-text)); font-weight: 500; }
  .prose a { color: rgb(var(--c-accent)); text-underline-offset: 3px; text-decoration: underline; }
  .prose a:hover { color: rgb(var(--c-text)); }

  /* Картинки в тексте: не шире колонки, без искажения пропорций */
  .prose img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid rgb(var(--c-line) / .5);
  }

  /* Врезка-цитата */
  .pull {
    margin: 2.6em 0;
    padding-left: 26px;
    border-left: 2px solid rgb(var(--c-accent));
    font-family: "Playfair Display", serif;
    font-size: clamp(21px, 2.6vw, 27px);
    font-weight: 400; line-height: 1.35; letter-spacing: -.02em;
    color: rgb(var(--c-text));
  }

  /* Блок-замечание */
  .note {
    margin: 2.2em 0;
    padding: 22px 24px;
    border: 1px solid rgb(var(--c-line) / .5);
    border-radius: 19.2px;
    background: rgb(var(--c-text) / .03);
  }
  .note p { font-size: 15px; line-height: 1.65; margin: 0; }
  .note p + p { margin-top: .9em; }

  /* Карточка в списке (кейс или статья) */
  .card-link {
    display: block;
    border: 1px solid rgb(var(--c-line) / .4);
    border-radius: 19.2px;
    background: rgb(var(--c-text) / .02);
    transition: border-color .4s cubic-bezier(.22,1,.36,1), background-color .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1);
  }
  .card-link:hover, .card-link:focus-visible {
    border-color: rgb(var(--c-accent) / .55);
    background: rgb(var(--c-text) / .05);
    transform: translateY(-3px);
  }

  /* Полоса прогресса чтения статьи */
  .read-line {
    position: fixed; left: 0; top: 0; z-index: 50;
    height: 2px; width: 0%;
    background: linear-gradient(90deg, rgb(var(--c-accent) / 0), rgb(var(--c-accent)));
  }

  @media (prefers-reduced-motion: reduce) {
    .card-link { transition: none; }
    .card-link:hover, .card-link:focus-visible { transform: none; }
  }

  /* Оглавление статьи — липкая колонка справа */
  .toc a {
    display: block;
    padding: 7px 0 7px 14px;
    border-left: 1px solid rgb(var(--c-line) / .5);
    font-size: 13px; line-height: 1.4; font-weight: 300;
    color: rgb(var(--c-muted));
    transition: color .3s ease, border-color .3s ease;
  }
  .toc a:hover { color: rgb(var(--c-text)); border-color: rgb(var(--c-muted)); }
  .toc a[aria-current="true"] { color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent)); }
  @media (prefers-reduced-motion: reduce) { .toc a { transition: none; } }