@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════
   ПРИСЯЖНАЯ ПРОДАКШН · дизайн-система «Ризограф»
   Единственный источник истины. Обе страницы берут этот файл.

   Слои каскада: reset → tokens → base → layout → components → motion → utils
   Цвет: light-dark(), тема переключается автоматически и вручную.
   Движение: scroll-driven animations и view transitions - как улучшение,
   без них страница полностью работоспособна.
   ═══════════════════════════════════════════════════════════════════════ */

@layer reset, tokens, base, layout, components, motion, utils;

/* ─────────────────────────────────────────── ШРИФТЫ
   Свои. Два переменных семейства, только кириллица и латиница,
   четыре файла на 99 КБ. Ни одного обращения к чужому домену.
   Резервным подогнаны метрики: подмена не двигает макет (ноль CLS). */
@font-face{
  font-family:"Onest"; font-style:normal; font-display:swap; font-weight:400 700;
  src:url("assets/fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Onest"; font-style:normal; font-display:swap; font-weight:400 700;
  src:url("assets/fonts/onest-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-display:swap; font-weight:400 500;
  src:url("assets/fonts/jetbrains-mono-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-display:swap; font-weight:400 500;
  src:url("assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Onest Fallback"; src:local("Arial"), local("Helvetica Neue");
  size-adjust:104%; ascent-override:96%; descent-override:24%; line-gap-override:0%;
}
@font-face{
  font-family:"Mono Fallback"; src:local("Menlo"), local("Consolas"), local("DejaVu Sans Mono");
  size-adjust:97%; ascent-override:92%; descent-override:24%; line-gap-override:0%;
}

@layer reset{
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  img,svg,video{display:block;max-width:100%}
  button,input,textarea{font:inherit;color:inherit}
  :where(ul,ol){list-style:none}
  @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
}

/* ═══════════════════════════ 00 · ТОКЕНЫ ═══════════════════════════ */
@layer tokens{
  :root{
    color-scheme:light dark;

    /* Ризограф-дуотон. Каждая пара проверена на контраст в обеих темах:
       текст ≥ 4.5:1, границы управляющих элементов ≥ 3:1 (WCAG 2.2 AA). */
    --bg:    light-dark(#F4F1E8, #0F1330);
    --bg-2:  light-dark(#E8E3D4, #181D45);
    --bg-3:  light-dark(#DDD7C4, #212857);
    --text:  light-dark(#0F1330, #F4F1E8);
    --muted: light-dark(#54506A, #A9AECF);
    --edge:  light-dark(#807966, #6A72B8);          /* границы: ≥3:1 */
    --hair:  color-mix(in oklab, var(--edge) 42%, transparent);
    --fx:    light-dark(#C4004E, #FF3D77);           /* фуксия  */
    --mint:  light-dark(#00705C, #2BE8C4);           /* мята    */
    --fx-ink:   light-dark(#FF3D77, #FF3D77);        /* фуксия как заливка */
    --mint-ink: light-dark(#2BE8C4, #2BE8C4);
    --on-fx:   #0F1330;
    --on-mint: #0F1330;

    /* Типографика: rem, а не px - настройка кегля в браузере работает. */
    --f-sans:"Onest","Onest Fallback",system-ui,sans-serif;
    --f-mono:"JetBrains Mono","Mono Fallback",ui-monospace,monospace;
    --t-mega: clamp(2.75rem, 1.2rem + 7.2vw, 8.5rem);
    --t-d1:   clamp(2.1rem,  1.2rem + 4.2vw, 4.6rem);
    --t-d2:   clamp(1.55rem, 1.1rem + 2.1vw, 2.6rem);
    --t-d3:   clamp(1.15rem, 1rem + .8vw,   1.5rem);
    --t-lead: clamp(1.06rem, .98rem + .5vw, 1.35rem);
    --t-body: clamp(1rem, .96rem + .2vw, 1.1rem);
    --t-sm:   .875rem;
    --t-mono: .72rem;

    /* Мера строки: 60–70 знаков, а не 90. */
    --measure: 34ch;
    --measure-wide: 46ch;

    /* Ритм */
    --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem;
    --s6:6.5rem; --s7:10rem;
    --gut: clamp(1rem, .5rem + 1.2vw, 1.75rem);
    --pad: clamp(1.25rem, .4rem + 3.4vw, 5rem);
    --shell: 1600px;

    --grain:.085;                                    /* печатное зерно */
    --ease:      linear(0,.2 8%,.62 22%,.86 38%,.98 56%,1);
    --ease-out:  cubic-bezier(.16,1,.3,1);
    --radius:14px;
  }
  [data-theme="light"]{color-scheme:light}
  [data-theme="dark"] {color-scheme:dark}

  /* Вторая дверь печатается с другой краски. Одно правило в системе -
     страница у себя ничего не переопределяет. */
  [data-door="crew"]{
    --fx:      light-dark(#00705C, #2BE8C4);
    --mint:    light-dark(#C4004E, #FF3D77);
    --fx-ink:  #2BE8C4;
    --mint-ink:#FF3D77;
  }

  /* Ползунок анимируемой приводки: фирменный сдвиг ризографа */
  @property --reg{syntax:"<length>";inherits:true;initial-value:0px}
}

/* ═══════════════════════════ 01 · БАЗА ═════════════════════════════ */
@layer base{
  body{
    background:var(--bg); color:var(--text);
    font-family:var(--f-sans); font-size:var(--t-body); line-height:1.55;
    font-variant-numeric:tabular-nums; font-synthesis:none;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    min-height:100svh; position:relative;
  }

  /* Печатное зерно поверх всего. Никакой картинки - один SVG-фильтр. */
  body::after{
    content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
    opacity:var(--grain); mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* всё интерактивное поднято над зерном */
  a,button,summary,label,input,video,.skip{position:relative;z-index:2}
  h1,h2,h3,h4{font-weight:600;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
  h1{font-size:var(--t-d1)}
  h2{font-size:var(--t-d2)}
  h3{font-size:var(--t-d3);letter-spacing:-.02em;line-height:1.15}
  h4{font-size:1.02rem;font-weight:600;letter-spacing:-.015em}
  p{max-width:var(--measure);text-wrap:pretty}
  p + p{margin-top:var(--s2)}
  b,strong{font-weight:600}

  a{color:inherit;text-decoration:none;
    text-decoration-line:underline;text-decoration-color:var(--hair);
    text-underline-offset:.25em;text-decoration-thickness:1px;
    transition:text-decoration-color .18s}
  a:hover{text-decoration-color:var(--fx)}
  a.plain{text-decoration:none}

  ::selection{background:var(--fx-ink);color:var(--on-fx)}
  :focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:2px}

  /* Пропуск к содержимому: первый элемент в табуляции */
  .skip{position:absolute;left:var(--pad);top:-4rem;z-index:100;
    background:var(--fx-ink);color:var(--on-fx);padding:.7rem 1.1rem;
    font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.1em;
    text-transform:uppercase;transition:top .2s}
  .skip:focus{top:1rem}
}

/* ═══════════════════════════ 02 · СЕТКА ════════════════════════════ */
@layer layout{
  .shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
  .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut)}

  /* Композиционные раскладки - их пять, а не одна на всю страницу */
  .lay-main  {grid-column:1/-1}
  .lay-side  {grid-column:1/-1}
  .lay-offset{grid-column:1/-1}
  @media (min-width:60rem){
    .lay-main  {grid-column:1/8}
    .lay-side  {grid-column:9/-1}
    .lay-offset{grid-column:3/11}
    }

  .band{padding-block:var(--s6);position:relative}
  .band + .band:not(.band--tint){padding-top:0}
  .band--tint{background:var(--bg-2);padding-block:var(--s6);
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
    border-block:1px solid var(--hair)}

  /* Шапка раздела: номер, название, тонкая линия */
  .rule{display:flex;justify-content:space-between;align-items:baseline;
    gap:var(--s2);flex-wrap:wrap;border-top:1px solid var(--edge);
    padding-top:.65rem;margin-bottom:var(--s4)}
  .rule__n{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.16em;
    color:var(--fx);font-weight:500}
  .rule__t{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted)}
}

/* ═══════════════════════ 03 · КОМПОНЕНТЫ ══════════════════════════ */
@layer components{

  /* ── Шапка ────────────────────────────────────────────────────── */
  .mast{display:flex;align-items:center;justify-content:space-between;
    gap:var(--s3);flex-wrap:wrap;padding-block:1.1rem;
    border-bottom:1px solid var(--edge)}
  .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-height:44px}
  .brand svg{width:26px;height:26px;flex:none;view-transition-name:mark}
  .brand span{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.16em;
    text-transform:uppercase;color:var(--text)}
  .mast nav{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
  .mast nav a{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);text-decoration:none;
    display:inline-flex;align-items:center;min-height:44px;
    padding-block:.7rem;border-bottom:2px solid transparent}
  .mast nav a:hover{color:var(--text)}
  .mast nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--fx)}

  .theme{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
    padding:.45rem .8rem;background:none;border:1px solid var(--edge);
    border-radius:999px;cursor:pointer;font-family:var(--f-mono);
    font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted);transition:color .18s,border-color .18s}
  .theme:hover{color:var(--text);border-color:var(--text)}
  .theme svg{width:14px;height:14px}

  /* ── Первый экран ─────────────────────────────────────────────── */
  .hero{padding-block:clamp(3rem,9vh,7rem) var(--s5)}
  .hero__kicker{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.2em;
    text-transform:uppercase;color:var(--mint);margin-bottom:var(--s3);
    display:flex;align-items:center;gap:.6rem}
  .hero__kicker::before{content:"";width:8px;height:8px;border-radius:50%;
    background:var(--fx-ink);flex:none}

  /* Огромный заголовок с приводкой «мимо»: три слоя, как три прогона */
  .mega{font-size:var(--t-mega);line-height:1.06;letter-spacing:-.055em;
    font-weight:700;text-wrap:balance;max-width:15ch;position:relative;
    margin-bottom:var(--s4);
    overflow-wrap:break-word;hyphens:auto}   /* слово длиннее строки не рвёт макет */
  /* Акцент набран не двойником текста, а плашкой: первый прогон - фуксия,
     второй - мята, и он уходит на край плашки, а не на буквы.
     Никаких копий текста: буквы остаются одним контуром, а дерево
     доступности - одной строкой.
     Контраст текста на плашке: 5,35:1 в тёмной, 5,38:1 в светлой. */
  .mega em{font-style:normal;color:var(--bg);background:var(--fx);
    padding:.015em .09em .075em;
    box-decoration-break:clone;-webkit-box-decoration-break:clone;
    box-shadow:var(--reg) var(--reg) 0 var(--mint-ink)}
  .hero__sub{font-size:var(--t-lead);line-height:1.4;max-width:var(--measure-wide);
    color:var(--muted)}

  /* ── Карточка предложения ─────────────────────────────────────── */
  .pack{border-top:2px solid var(--fx);margin-top:var(--s5);
    container-type:inline-size}
  .pack__row{display:grid;grid-template-columns:1fr;gap:.35rem;
    padding-block:1.15rem;border-bottom:1px solid var(--hair)}
  @container (min-width:44rem){
    .pack__row{grid-template-columns:13rem 1fr;gap:var(--s3);align-items:start}
  }
  .pack dt{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);padding-top:.3rem}
  .pack dd{max-width:var(--measure-wide)}
  .pack dd b{font-size:1.2em;font-weight:600;color:var(--text);white-space:nowrap}
  .pack__act{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
    padding-top:var(--s4)}

  /* ── Кнопки ───────────────────────────────────────────────────── */
  .btn{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;
    padding:.9rem 1.5rem;border:2px solid var(--fx);background:var(--fx-ink);
    color:var(--on-fx);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;
    text-decoration:none;cursor:pointer;border-radius:2px;
    transition:translate .16s var(--ease-out), box-shadow .16s var(--ease-out)}
  .btn:hover{translate:-3px -3px;box-shadow:5px 5px 0 var(--mint-ink)}
  .btn:active{translate:0;box-shadow:0 0 0 var(--mint-ink)}
  .btn--ghost{background:none;color:var(--text);border-color:var(--edge)}
  .btn--ghost:hover{border-color:var(--text);box-shadow:5px 5px 0 var(--hair)}

  /* ── Лента кадров ─────────────────────────────────────────────── */
  .reel{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,19rem);
    gap:var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;
    padding-block:var(--s2) var(--s4);scrollbar-width:thin;
    scrollbar-color:var(--edge) transparent;
    padding-inline:var(--pad);margin-inline:calc(var(--pad) * -1)}
  .reel > *{scroll-snap-align:start}
  .shot{border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;
    background:var(--bg-2);position:relative}
  .shot img{width:100%;height:auto;aspect-ratio:9/16}
  .shot figcaption{position:absolute;inset:auto 0 0 0;padding:.6rem .8rem;
    font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.1em;
    color:#F4F1E8;background:linear-gradient(transparent,#0F1330 60%)}
  .reel__hint{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);display:flex;gap:.5rem;align-items:center}

  /* Играющая сцена. Ровно одна на весь сайт: видеостудия обязана
     показать движение, но страница не должна из-за этого шуметь. */
  .shot--play{border-color:var(--fx);box-shadow:9px 9px 0 var(--mint-ink)}
  .shot--is-live{border-color:var(--fx)}
  .shot__live{position:absolute;left:.6rem;top:.6rem;z-index:2;
    padding:.3rem .7rem;background:var(--fx-ink);color:var(--on-fx);border-radius:999px;
    font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
  .shot video{width:100%;height:auto;aspect-ratio:9/16;display:block}
  /* Управление вынесено из кадра: кнопка не должна закрывать субтитр
     или служебную строку - это и есть содержание кадра. */
  .shot--play{overflow:visible}
  .shot__pause{display:inline-flex;align-items:center;gap:.4rem;
    margin-top:.75rem;min-height:44px;padding:.5rem 1rem;cursor:pointer;
    background:none;border:1px solid var(--edge);border-radius:999px;
    color:var(--muted);font-family:var(--f-mono);font-size:.68rem;
    letter-spacing:.12em;text-transform:uppercase;
    transition:color .16s,border-color .16s}
  .shot__pause::before{content:"";width:9px;height:9px;border-radius:2px;
    background:var(--fx-ink)}
  .shot__pause[aria-pressed="true"]::before{clip-path:polygon(0 0,100% 50%,0 100%);border-radius:0}
  .shot__pause:hover{color:var(--text);border-color:var(--text)}

  /* Разворот: единственное место, где страница повышает голос второй раз */
  .spread{margin-block:var(--s6);padding-block:var(--s5);
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
    background:var(--bg-2);border-block:1px solid var(--hair);
    display:grid;gap:var(--s4);grid-template-columns:1fr;align-items:center;
    container-type:inline-size}
  @media (min-width:60rem){
    .spread{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s5)}
  }
  .spread__media{max-width:24rem;width:100%;justify-self:center;position:relative;
    border:1px solid var(--fx);border-radius:var(--radius)}
  .spread__media video{border-radius:var(--radius)}
  .spread h2{font-size:clamp(1.9rem,1.1rem+3.2vw,3.4rem);letter-spacing:-.045em;
    margin-bottom:var(--s3)}
  .spread .lead{font-size:clamp(1.1rem,1rem+.7vw,1.5rem)}
  .spread__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--s3);margin-top:var(--s4);border-top:1px solid var(--hair);padding-top:var(--s3)}
  .spread__meta dt{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
  .spread__meta dd{font-size:1.05rem;font-weight:600;letter-spacing:-.02em}

  /* ── Ризо-плашка: кейс, напечатанный в два прогона ────────────── */
  .plates{display:grid;gap:var(--gut);grid-template-columns:1fr;margin-top:var(--s4)}
  @media (min-width:60rem){.plates{grid-template-columns:repeat(3,1fr)}}
  .plate{position:relative;padding:var(--s3);background:var(--bg-2);
    border:1px solid var(--hair);border-radius:2px;isolation:isolate}
  .plate::before{content:"";position:absolute;inset:-1px;z-index:-1;
    border:2px solid var(--fx);border-radius:2px;
    translate:-7px -7px;opacity:.55}
  .plate__sum{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.14em;
    color:var(--fx);margin-bottom:.8rem;display:block}
  .plate h3{margin-bottom:.7rem}
  .plate p{font-size:var(--t-sm);color:var(--muted);max-width:none;line-height:1.6}

  /* ── Пара «нельзя → можно» ────────────────────────────────────── */
  .swaps{margin-top:var(--s4);border-top:1px solid var(--edge)}
  .swap{display:grid;gap:.6rem;padding-block:var(--s3);
    border-bottom:1px solid var(--hair);align-items:start;
    grid-template-columns:1fr}
  @media (min-width:52rem){
    .swap{grid-template-columns:1fr 3.5rem 1.2fr;gap:var(--gut);align-items:center}
  }
  /* Пары живут в общей 12-колоночной сетке секции, а не в своей копии */
  @supports (grid-template-columns:subgrid){
    @media (min-width:52rem){
      .swaps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--gut)}
      .swap{grid-column:1/-1;grid-template-columns:subgrid}
      .swap__no {grid-column:1/6}
      .swap__ar {grid-column:6/7}
      .swap__yes{grid-column:7/13}
    }
  }
  .swap__no{color:var(--muted);font-size:var(--t-sm);line-height:1.5;
    max-width:34ch;position:relative}
  .swap__no s{text-decoration:line-through;
    text-decoration-color:var(--fx);text-decoration-thickness:2px}
  .swap__ar{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--mint);
    letter-spacing:.1em}
  .swap__yes{font-size:var(--t-lead);line-height:1.32;font-weight:500;
    max-width:32ch;letter-spacing:-.015em}

  /* ── Расписание дня: одна ось, а не три ───────────────────────── */
  .tl{margin-top:var(--s4);container-type:inline-size}
  .tl__row{display:grid;grid-template-columns:1fr;gap:.4rem;
    padding-block:var(--s3);border-bottom:1px solid var(--hair)}
  @container (min-width:40rem){
    .tl__row{grid-template-columns:9rem 1fr;gap:var(--s3);align-items:start}
  }
  .tl__when{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.12em;
    text-transform:uppercase;color:var(--mint);padding-top:.3rem;
    display:flex;align-items:baseline;gap:.5rem}
  .tl__when b{color:var(--fx);font-weight:500}
  .tl__h{font-size:1.02rem;font-weight:600;letter-spacing:-.015em;line-height:1.25}
  .tl__row p{font-size:var(--t-sm);color:var(--muted);line-height:1.6;margin-top:.35rem}

  /* ── Договор: нативный <details>, ноль JS ─────────────────────── */
  .faq{border-top:1px solid var(--edge);margin-top:var(--s4);
    interpolate-size:allow-keywords}
  .faq details{border-bottom:1px solid var(--hair)}
  .faq summary{display:flex;justify-content:space-between;align-items:center;
    gap:var(--s2);list-style:none;cursor:pointer;min-height:56px;
    padding-block:1.1rem;font-size:var(--t-d3);font-weight:600;
    letter-spacing:-.02em;transition:color .18s}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:var(--fx)}
  .faq summary::after{content:"+";font-family:var(--f-mono);font-size:1.35rem;
    color:var(--fx);flex:none;transition:rotate .22s var(--ease-out);line-height:1}
  .faq details[open] > summary::after{rotate:45deg}
  .faq details p{padding-bottom:1.3rem;color:var(--muted);max-width:var(--measure-wide)}

  /* ── Цена: продукт и его этапы - разной величины ──────────────── */
  .tariffs{margin-top:var(--s4)}
  .tariff{border-top:1px solid var(--edge);padding-top:var(--s3);margin-top:var(--s4)}
  .tariff__top{display:flex;justify-content:space-between;align-items:baseline;
    gap:var(--s3);flex-wrap:wrap}
  .tariff__name{font-size:var(--t-d2);font-weight:600;letter-spacing:-.03em}
  .tariff__sum{font-family:var(--f-mono);font-size:1.15rem;color:var(--fx);
    white-space:nowrap;font-weight:500}
  .tariff > p{margin-top:.8rem;color:var(--muted);font-size:var(--t-sm);
    max-width:var(--measure-wide)}
  .stages{margin-top:var(--s3);padding-left:var(--s3);
    border-left:2px solid var(--mint);display:grid;gap:var(--s3)}
  .stage__top{display:flex;justify-content:space-between;align-items:baseline;
    gap:var(--s2);flex-wrap:wrap}
  .stage__name{font-size:1.02rem;font-weight:600}
  .stage__sum{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--mint);
    white-space:nowrap}
  .stage p{font-size:var(--t-sm);color:var(--muted);margin-top:.3rem;max-width:none}

  /* ── Список ───────────────────────────────────────────────────── */
  .ticks li{padding:.75rem 0 .75rem 1.7rem;position:relative;
    border-bottom:1px solid var(--hair);max-width:var(--measure-wide);
    font-size:var(--t-sm);color:var(--muted);line-height:1.6}
  .ticks li::before{content:"-";position:absolute;left:0;top:.75rem;
    color:var(--mint);font-family:var(--f-mono);font-size:.8rem}
  .ticks--no li::before{content:"×";color:var(--fx)}

  /* ── Заявка: плашки ───────────────────────────────────────────── */
  .pick{border:0;padding:var(--s3) 0;margin:0;border-bottom:1px solid var(--hair)}
  .pick legend{padding:0;font-size:var(--t-lead);font-weight:600;
    letter-spacing:-.02em;margin-bottom:.9rem}
  .chips{display:flex;flex-wrap:wrap;gap:.5rem}
  /* position:relative обязателен: иначе скрытый input уезжает
     к позиционированному предку и фокус утаскивает страницу вверх. */
  .chips label{position:relative;display:inline-flex;align-items:center;
    min-height:48px;padding:.7rem 1.1rem;cursor:pointer;user-select:none;
    border:1px solid var(--edge);border-radius:999px;
    font-family:var(--f-mono);font-size:.76rem;letter-spacing:.06em;
    color:var(--muted);
    transition:border-color .16s,color .16s,background-color .16s,translate .16s}
  .chips label:hover{border-color:var(--text);color:var(--text);translate:0 -2px}
  .chips input{position:absolute;inset:0;width:100%;height:100%;
    opacity:0;cursor:pointer;margin:0}
  .chips label:has(input:checked){background:var(--fx-ink);border-color:var(--fx-ink);
    color:var(--on-fx);font-weight:500}
  .chips label:has(input:focus-visible){outline:3px solid var(--mint);outline-offset:3px}

  .msg{margin-top:var(--s3);padding:var(--s3);background:var(--bg-2);
    border-left:3px solid var(--mint);font-family:var(--f-mono);
    font-size:var(--t-sm);line-height:1.65;color:var(--text);
    white-space:pre-line;max-width:var(--measure-wide);border-radius:2px}
  .msg:empty{display:none}
  .msg__cap{display:block;font-size:var(--t-mono);letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
  .acts{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}


  /* ── Работы: настоящие съёмки ─────────────────────────────────
     Обложка - обычный <img> с alt. Видео подставляется по клику,
     до нажатия не качается ни байта (preload="none" + отсутствие src). */
  .work{display:grid;gap:var(--gut);grid-template-columns:1fr;margin-top:var(--s4)}
  @media (min-width:52rem){.work{grid-template-columns:repeat(3,1fr)}}
  .work__item{position:relative;isolation:isolate}
  .work__frame{position:relative;border:1px solid var(--fx);border-radius:var(--radius);
    overflow:hidden;background:var(--bg-2)}
  .work__frame::before{content:"";position:absolute;inset:-1px;z-index:-1;
    border:2px solid var(--mint);border-radius:var(--radius);
    translate:-8px -8px;opacity:.6}
  .work__frame img,.work__frame video{width:100%;height:auto;aspect-ratio:9/16;
    object-fit:cover;display:block}
  .work__play{position:absolute;inset:0;z-index:2;width:100%;cursor:pointer;
    background:none;border:0;display:grid;place-items:center;color:#F4F1E8}
  .work__play span{display:inline-flex;align-items:center;gap:.6rem;
    min-height:52px;padding:.8rem 1.4rem;border-radius:999px;
    background:color-mix(in oklab,#0F1330 72%,transparent);
    border:1px solid var(--fx-ink);backdrop-filter:blur(8px);
    font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
    transition:background-color .18s,scale .18s}
  .work__play span::before{content:"";width:0;height:0;
    border-left:9px solid var(--fx-ink);border-block:6px solid transparent}
  .work__play:hover span{background:var(--fx-ink);color:var(--on-fx);scale:1.04}
  .work__play:hover span::before{border-left-color:var(--on-fx)}
  .work__cap{margin-top:.9rem}
  .work__cap b{display:block;font-size:1.02rem;font-weight:600;letter-spacing:-.02em;
    margin-bottom:.25rem}
  .work__cap span{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted)}

  /* ── Кто это «сама» ───────────────────────────────────────────── */
  .who{display:grid;gap:var(--s4);grid-template-columns:1fr;align-items:start;
    margin-top:var(--s4)}
  @media (min-width:60rem){
    .who{grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:var(--s5)}
  }
  .who__portrait{position:relative;isolation:isolate;border:1px solid var(--fx);
    border-radius:var(--radius);overflow:hidden}
  .who__portrait::before{content:"";position:absolute;inset:-1px;z-index:-1;
    border:2px solid var(--mint);border-radius:var(--radius);translate:-9px -9px;opacity:.6}
  .who__portrait img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}
  .who__facts{font-family:var(--f-mono);font-size:.8rem;line-height:1.9;
    margin-top:var(--s3);color:var(--muted)}
  .who__facts b{color:var(--text);font-weight:500}

  /* ── Подвал ───────────────────────────────────────────────────── */

  /* == Подвал: единый стандарт пяти сайтов ====================== */
  .foot{border-top:1px solid var(--edge);margin-top:var(--s6);
    padding-block:var(--s4) var(--s5)}
  .foot__grid{display:grid;gap:var(--s4);grid-template-columns:1fr;margin-bottom:var(--s4)}
  @media (min-width:52rem){.foot__grid{grid-template-columns:1.4fr 1fr 1fr;gap:var(--s5)}}
  .foot-h{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:.9rem}
  .foot__col ul{display:grid;gap:.1rem}
  .foot__col li{border:0;padding:0}
  .foot__col a{display:inline-flex;align-items:center;min-height:44px;
    font-size:.95rem;text-decoration-color:var(--hair)}
  .foot__col a:hover{text-decoration-color:var(--fx)}
  .foot__claim{font-size:.95rem;color:var(--muted);max-width:30ch}
  .foot__brand{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
  .foot__brand svg{width:22px;height:22px;flex:none}
  .foot__brand b{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.14em;
    text-transform:uppercase;font-weight:500}
  .foot-legal{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;
    border-top:1px solid var(--hair);padding-top:var(--s3);
    font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;
    color:var(--muted);max-width:none}
  .by{margin-top:.9rem;font-family:var(--f-mono);font-size:.72rem;
    letter-spacing:.05em;color:var(--muted);max-width:none}

  /* == Согласие перед контактами ================================ */
  .consent-check{display:flex;align-items:flex-start;gap:.8rem;cursor:pointer;
    margin-top:var(--s4);max-width:44ch;padding:.5rem 0;user-select:none}
  .consent-check input{flex:none;width:24px;height:24px;margin:0;cursor:pointer;
    accent-color:var(--fx-ink)}
  .consent-check span{font-size:.92rem;line-height:1.5;color:var(--muted);padding-top:.1rem}
  .consent-check a{color:var(--text);font-weight:600;
    text-decoration-color:var(--fx);text-decoration-thickness:1.5px}
  .consent-check a:hover{text-decoration-color:var(--text)}
  .consent-hint{margin-top:.7rem;font-size:.85rem;color:var(--fx);max-width:40ch}
  .consent-hint[hidden]{display:none}
  /* Заблокированное состояние ставит только скрипт. Без него кнопки живые.
     pointer-events не гасим: клик обязан дойти до обработчика, иначе
     подсказка не покажется и человек не поймёт, почему ничего не вышло. */
  #contactBtns[data-locked="true"] .contact-link{opacity:.45}
  #contactBtns[data-locked="true"] .contact-link:hover{translate:none;box-shadow:none}
  .consent-hint.is-alert{color:var(--fx);font-weight:600}
  .consent-hint.is-alert::before{content:"! ";font-family:var(--f-mono)}

  /* == Документ: политика, согласие, 404 ======================== */
  .doc{padding-block:var(--s5) 0;max-width:70ch}
  .doc__kicker{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.16em;
    text-transform:uppercase;color:var(--mint);margin-bottom:var(--s3)}
  .doc h1{font-size:clamp(1.9rem,1.2rem+2.6vw,3rem);margin-bottom:var(--s3)}
  .doc__sec{border-top:1px solid var(--hair);padding-top:var(--s3);margin-top:var(--s4)}
  .doc__sec h2{font-size:1.25rem;letter-spacing:-.02em;margin-bottom:.8rem}
  .doc__n{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.16em;
    color:var(--fx);display:block;margin-bottom:.5rem}
  .doc p{max-width:66ch;color:var(--muted)}
  .doc p strong{color:var(--text);font-weight:600}

  .foot__row{display:flex;justify-content:space-between;gap:var(--s3);
    flex-wrap:wrap;margin-bottom:var(--s4)}
  .foot p,.foot li{font-size:var(--t-sm);color:var(--muted);max-width:var(--measure-wide)}
  .foot .mono{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.12em;
    text-transform:uppercase}
  .foot .mono a{display:inline-flex;align-items:center;min-height:44px}
}

/* ═══════════════════════ 04 · ДВИЖЕНИЕ ════════════════════════════ */
@layer motion{

  /* Переходы между двумя дверьми: знак и заголовок перетекают.
     Без поддержки - обычная навигация, ничего не ломается.          */
  @view-transition{navigation:auto}
  ::view-transition-group(mark){animation-duration:.45s}

  /* Линия прочитанного. Ноль JS, ноль обработчиков скролла.
     Без поддержки scroll() правило просто не применяется.            */
  @supports (animation-timeline:scroll()){
    .progress{position:fixed;left:0;top:0;height:3px;width:100%;
      transform-origin:0 50%;z-index:60;
      background:linear-gradient(90deg,var(--fx-ink),var(--mint-ink));
      animation:grow linear both;animation-timeline:scroll(root block)}
    @keyframes grow{from{scale:0 1}to{scale:1 1}}

    /* Кадры проявляются, когда въезжают в окно */
    .shot{animation:enter linear both;
      animation-timeline:view(inline);animation-range:entry 5% cover 28%}
    @keyframes enter{from{opacity:0;translate:0 26px;filter:saturate(.4)}
                     to{opacity:1;translate:0 0;filter:saturate(1)}}

    /* Приводка «мимо» расходится по мере прокрутки первого экрана */
    .hero{animation:reg linear both;animation-timeline:view();
      animation-range:entry 0% cover 60%}
    @keyframes reg{from{--reg:3px}to{--reg:12px}}
  }
  /* Без scroll-driven - статичная приводка, эффект остаётся */
  @supports not (animation-timeline:scroll()){
    .hero{--reg:8px}
    .progress{display:none}
  }

  /* Раскрытие договора: нативно, без единой строки JS */
  @supports (interpolate-size:allow-keywords){
    .faq details::details-content{
      block-size:0;overflow:hidden;opacity:0;
      transition:block-size .32s var(--ease-out), opacity .24s,
                 content-visibility .32s allow-discrete}
    .faq details[open]::details-content{block-size:auto;opacity:1}
  }

  /* Появление плашки-кейса */
  @supports (animation-timeline:view()){
    .plate{animation:plate linear both;animation-timeline:view();
      animation-range:entry 10% cover 32%}
    @keyframes plate{from{opacity:0;translate:0 20px;rotate:-.6deg}
                     to{opacity:1;translate:0 0;rotate:0deg}}
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:1ms !important;animation-iteration-count:1 !important;
      transition-duration:1ms !important;animation-timeline:none !important}
    .hero{--reg:8px}
    .shot,.plate{opacity:1 !important;translate:none !important;rotate:none !important}
    .shot--play video{display:none}
    .shot--play{background:url(assets/scene-01-poster.jpg) center/cover}
    @view-transition{navigation:none}
  }
}

/* ═══════════════════════ 05 · УТИЛИТЫ ═════════════════════════════ */
@layer utils{
  .mono{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted)}
  .lead{font-size:var(--t-lead);line-height:1.45;max-width:var(--measure-wide)}
  .small{font-size:var(--t-sm);color:var(--muted);line-height:1.6;
    max-width:var(--measure-wide)}
  .fx{color:var(--fx)} .mint{color:var(--mint)}
  .mt2{margin-top:var(--s2)} .mt3{margin-top:var(--s3)} .mt4{margin-top:var(--s4)}
  .mt5{margin-top:var(--s5)}
  .mb2{margin-bottom:var(--s2)} .mb3{margin-bottom:var(--s3)}
  .mb4{margin-bottom:var(--s4)}
  .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
}

/* ═══════════════════════════ ПЕЧАТЬ ═══════════════════════════════ */
@media print{
  .progress,.theme,.reel__hint,.skip,.btn,.shot__pause{display:none}
  /* на монохромном принтере плашка превращается в серый прямоугольник
     с серым текстом - печатаем акцент контуром */
  .mega em{background:none !important;color:#000 !important;
    box-shadow:none !important;padding:0 !important;
    text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.12em}
  .shot video{display:none} .shot--play::after{content:"[ играющая сцена ]";
    font-family:var(--f-mono);font-size:10pt}
  body::after{display:none}
  .faq details{display:block}
  .faq details::details-content{block-size:auto !important;opacity:1 !important}
  body{background:#fff;color:#000;font-size:11pt}
  .plate::before{display:none}
}


/* == Уведомление о cookie ======================================
   Метрика не грузится, пока не нажали «Принять». Полоса снизу
   поверх всего, с отступом под системную панель телефона. */
.cookie{position:fixed;inset-inline:0;inset-block-end:0;z-index:90;
  padding:var(--s4) var(--gut) calc(var(--s4) + env(safe-area-inset-bottom,0px));
  background:var(--bg-2);border-block-start:2px solid var(--fx);
  box-shadow:0 -14px 44px -26px rgb(0 0 0/.6)}
.cookie[hidden]{display:none}
.cookie__box{max-width:var(--measure-wide);margin-inline:auto;
  display:grid;gap:.6rem 2rem;grid-template-columns:1fr auto;align-items:center}
.cookie__t{grid-column:1;grid-row:1;font-family:var(--f-sans);font-weight:700;
  color:var(--text);margin:0}
.cookie__p{grid-column:1;grid-row:2;font-size:.9rem;line-height:1.5;
  color:var(--muted);max-inline-size:64ch;margin:0}
.cookie__p a{color:var(--text);text-decoration-color:var(--fx)}
.cookie__row{grid-column:2;grid-row:1/3;display:flex;flex-wrap:wrap;gap:.6rem}
@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}}