/* ============================================================
   site.css — раскладка сайта ttwelve.ru
   Подключать ПОСЛЕ: tokens.css → typography.css → components.css
   ============================================================ */

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.container--narrow { max-width: var(--container-narrow); }

/* — Стекло: тон подбирается по теме (как в дизайн-системе) — */
:root {
  --glass-bg: rgba(250,249,247,0.72);
  --glass-strong: rgba(250,249,247,0.90);
  --glass-brd: rgba(20,20,25,0.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass-bg: rgba(22,20,26,0.66);
    --glass-strong: rgba(18,16,22,0.86);
    --glass-brd: rgba(255,255,255,0.12);
  }
}
:root[data-theme="dark"] {
  --glass-bg: rgba(22,20,26,0.66);
  --glass-strong: rgba(18,16,22,0.86);
  --glass-brd: rgba(255,255,255,0.12);
}

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass { background: var(--surface); }
}

.skip { position: absolute; left: -999px; }
.skip:focus {
  left: var(--space-4); top: var(--space-4);
  background: var(--raised); color: var(--ink);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  z-index: 100; text-decoration: none;
}

/* — Шапка — размытие на ::before, чтобы шапка не стала containing block
   для position:fixed (иначе ломается выезжающее меню на мобиле) — */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid var(--glass-brd);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header::before { background: var(--ground); }
}
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3) var(--space-5); row-gap: var(--space-2);
  padding-block: var(--space-3);
}
.tw-wordmark { text-decoration: none; }

/* — Тема: Авто / Полдень / Полночь — */
.theme-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; flex: none; }
.theme-toggle button {
  font: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium);
  padding: 0.4em 0.65em; background: var(--surface); color: var(--ink-soft);
  border: 0; border-left: 1px solid var(--line-strong); cursor: pointer;
}
.theme-toggle button:first-child { border-left: 0; }
.theme-toggle button:not([aria-pressed="true"]):hover { color: var(--ink); }
.theme-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-contrast); }

.site-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.site-nav a, .site-nav .navlink {
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--ink-soft); text-decoration: none;
  background: none; border: 0;
  padding: 0.5em 0.7em; border-radius: var(--radius-sm); cursor: pointer;
}
.site-nav a:not(.tw-btn):hover, .site-nav .navlink:hover {
  color: var(--ink); background: none;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.site-nav .navlink[aria-expanded="true"] { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--accent-ink); }

.has-menu { position: relative; }
.has-menu > .tw-menu { position: absolute; right: 0; top: calc(100% + var(--space-2)); display: none; z-index: 60; }
.has-menu.open > .tw-menu { display: block; }
.site-nav .tw-menu {
  background: var(--glass-bg);
  border-color: var(--glass-brd);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-nav .tw-menu { background: var(--glass-strong); }
}

.site-header__toggle { display: none; }

@media (max-width: 60rem) {
  .site-header__toggle { display: inline-flex; margin-left: auto; }
  .site-nav {
    position: fixed; inset: 0 0 0 auto; width: min(21rem, 84vw);
    flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: var(--space-7) var(--space-4);
    background: var(--glass-strong);
    border-left: 1px solid var(--glass-brd);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    overflow-y: auto;
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .site-nav { background: var(--raised); }
  }
  .site-nav.open { transform: none; }
  .has-menu > .tw-menu {
    position: static; display: block;
    background: none; box-shadow: none; border: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 0 0 var(--space-2) var(--space-3); margin: 0;
    min-width: 0;
  }
  .has-menu > .navlink { pointer-events: none; color: var(--ink-faint); }
}

/* — Крутящаяся «12» (акцент из showcase 03-editorial, шрифт — дисплейный сайта) — */
.tw-mark12 {
  position: absolute; top: 50%; right: 0; z-index: 0;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(5rem, 12vw, 12rem);
  line-height: 0.78;
  color: var(--accent);
  opacity: 0.8;
  pointer-events: none; user-select: none;
  will-change: transform;
}
.hero--signal > :not(.tw-mark12) { position: relative; z-index: 1; }
@media (max-width: 60rem) { .tw-mark12 { display: none; } }
@media (prefers-reduced-motion: reduce) { .tw-mark12 { transform: translateY(-50%) rotate(-8deg); } }

/* — Бегущая строка (стиль showcase 03-editorial) — */
.tw-ticker {
  border-block: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  background: var(--surface);
}
.tw-ticker__track {
  display: inline-block;
  padding-block: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-soft);
  animation: tw-ticker 34s linear infinite;
}
.tw-ticker__track span { margin-inline: var(--space-5); }
.tw-ticker__track b { color: var(--accent-ink); font-weight: inherit; }
.tw-ticker:hover .tw-ticker__track { animation-play-state: paused; }
@keyframes tw-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tw-ticker__track { animation: none; } }

/* — Секции — */
.hero { padding-block: var(--space-9) var(--space-8); display: grid; gap: var(--space-4); }
.hero h1 { font-size: var(--text-3xl); line-height: var(--lh-3xl); max-width: 19ch; }
.hero > p { font-size: var(--text-md); color: var(--ink-soft); max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }

/* — Появление при скролле (только если работает JS) — */
.js [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal][data-delay="1"] { transition-delay: 60ms; }
.js [data-reveal][data-delay="2"] { transition-delay: 120ms; }
.js [data-reveal][data-delay="3"] { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* — Акцентный градиент на тексте (расцветка 1:1 из showcase 02-signal) — */
.grad-text {
  background: linear-gradient(100deg, #E27C4F, #f0b48f 60%, #5b9dff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================
   ФОН НА ВЕСЬ ЭКРАН — signal / lattice / aurora
   Один fixed-слой за всем контентом. Вставляется из site.js
   по атрибуту <body data-bg="...">. Двигается только контент.
   ============================================================ */
.tw-bg {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none; display: block;
}
body { background: var(--ground); }

/* тон линий и луча решётки — по теме */
:root {
  --lattice-line: rgba(20,20,25,0.06);
  --beam-ink:  rgba(20,20,25,0.05);
  --beam-soft: rgba(20,20,25,0.025);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lattice-line: rgba(255,255,255,0.06);
    --beam-ink:  rgba(255,255,255,0.09);
    --beam-soft: rgba(255,255,255,0.03);
  }
}
:root[data-theme="dark"] {
  --lattice-line: rgba(255,255,255,0.06);
  --beam-ink:  rgba(255,255,255,0.09);
  --beam-soft: rgba(255,255,255,0.03);
}

.tw-bg--lattice {
  background-image:
    repeating-linear-gradient(to right, var(--lattice-line) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(to bottom, var(--lattice-line) 0 1px, transparent 1px 10px);
  background-position: -1px -1px;
}
.tw-bg--lattice::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle 12rem at var(--bx, -300px) var(--by, -300px),
      var(--beam-ink) 0%, transparent 72%),
    radial-gradient(circle 20rem at var(--bx, -300px) var(--by, -300px),
      var(--beam-soft) 0%, transparent 70%),
    radial-gradient(circle 15rem at var(--blx, -300px) var(--bly, -300px),
      rgba(226,124,79,0.10) 0%, transparent 70%);
}
@media (hover: none) { .tw-bg--lattice::before { display: none; } }

/* Как в 04-aurora: вынос за экран + сильное размытие. Пятна точечные в
   верхней части, низ — чистый тёмный фон. */
.tw-bg--aurora {
  inset: -20%;
  width: 140%; height: 140%;
  filter: blur(70px) saturate(1.2);
  opacity: 0.78;
}
:root[data-theme="light"] .tw-bg--aurora { opacity: 0.5; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tw-bg--aurora { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) { .tw-bg--aurora { filter: blur(70px); } }

/* Тонировка поверх ночной авроры (только тёмная тема): лёгкий тон + виньетка.
   На светлой теме — не применяется. */
.tw-bg-scrim { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: transparent; }
:root[data-theme="dark"] .tw-bg-scrim {
  background:
    radial-gradient(140% 130% at 40% 4%, transparent 32%, rgba(7,6,11,0.36) 100%),
    rgba(9,8,13,0.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tw-bg-scrim {
    background:
      radial-gradient(140% 130% at 40% 4%, transparent 32%, rgba(7,6,11,0.36) 100%),
      rgba(9,8,13,0.14);
  }
}

/* Тёмный фон под авророй (как в исходнике), только на этой странице. */
:root[data-theme="dark"] body[data-bg="aurora"] { background: #0b0a10; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-bg="aurora"] { background: #0b0a10; }
}

/* Пятно-подсветка за курсором (как .glow в 04-aurora) */
.tw-glow {
  position: fixed; z-index: -1;
  width: 520px; height: 520px; border-radius: 50%;
  pointer-events: none;
  left: -999px; top: -999px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(226,124,79,0.18), transparent 70%);
}
:root[data-theme="light"] .tw-glow { background: radial-gradient(circle, rgba(226,124,79,0.12), transparent 70%); }
@media (hover: none) { .tw-glow { display: none; } }
@media (prefers-reduced-motion: reduce) { .tw-glow { display: none; } }

/* — Герой в стиле signal — */
.hero--signal {
  position: relative;
  padding-block: var(--space-9);
  display: grid; gap: var(--space-4);
}
.hero__kicker {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--accent-ink);
}
.hero--signal h1 { font-size: var(--text-3xl); line-height: var(--lh-3xl); max-width: 20ch; }
.hero--signal > p { font-size: var(--text-md); color: var(--ink-soft); max-width: 52ch; }

.hero__stats {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  margin-top: var(--space-5); padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.hero__stat { display: grid; gap: 2px; }
.hero__stat b {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums;
}
.hero__stat span {
  font-size: var(--text-xs); color: var(--ink-faint);
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-label);
}

/* — 3D-наклон карточек: любая плашка с [data-tilt] становится стеклянной
     (как задумано в showcase 04-aurora) — */
[data-tilt] {
  transform-style: preserve-3d; will-change: transform;
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  [data-tilt] { background: var(--surface); }
}
.pgrid, .pkgs { perspective: 1000px; }
.section--aurora { position: relative; }

.section { padding-block: var(--space-8); border-top: 1px solid var(--line); }
.section__label { display: block; margin-bottom: var(--space-2); }
.section__title { margin-bottom: var(--space-5); max-width: 26ch; }
.section__intro { color: var(--ink-soft); max-width: var(--measure); margin-bottom: var(--space-6); }

/* — Продукты — */
.pgroup + .pgroup { margin-top: var(--space-7); }
.pgroup__head { display: block; margin-bottom: var(--space-4); }
.pgrid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
a.pcard { text-decoration: none; color: inherit; display: grid; gap: var(--space-2); align-content: start; }
.pcard__name { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-lg); }
.pcard__desc { font-size: var(--text-sm); color: var(--ink-soft); }
.pcard__more { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--accent-ink); margin-top: var(--space-1); }
a.pcard:hover .pcard__name { color: var(--accent-ink); }
a.pcard:hover .pcard__more { text-decoration: underline; }

/* — «Почему» — */
.feature-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.feature h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold); margin: var(--space-2) 0; }
.feature p { font-size: var(--text-sm); color: var(--ink-soft); }
.feature__n { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-ink); }

/* — Метрики — */
.metrics { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.metric__value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.metric__label { font-size: var(--text-sm); color: var(--ink-soft); }

/* — Шаги — */
.steps { display: grid; gap: var(--space-4); counter-reset: s; max-width: var(--measure); }
.step { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-3); }
.step::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-ink); padding-top: 0.15em; }
.step h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.step p { font-size: var(--text-sm); color: var(--ink-soft); }

/* — Шаблон страницы продукта — */
.pt-hero { padding-block: var(--space-8) var(--space-7); display: grid; gap: var(--space-4); }
.pt-hero h1 { font-size: var(--text-3xl); line-height: var(--lh-3xl); max-width: 20ch; }
.pt-hero__sub { font-size: var(--text-md); color: var(--ink-soft); max-width: 52ch; }

/* — Lattice-герой на ИИ-страницах (Оператор, ОСАГО): каркас 1:1 из 01-lattice.
     Сетка и луч — общий фон .tw-bg--lattice, тут только раскладка экрана. — */
.hero--lattice {
  position: relative;
  min-height: min(44rem, 86vh);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: var(--space-4);
  padding-block: var(--space-8);
}
.hero--lattice > * { position: relative; z-index: 1; max-width: 44rem; }
.hero--lattice > p { margin-inline: auto; }
.hero__plate {
  position: absolute; left: 50%; top: 34%; z-index: 0;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 13vw, 10rem); font-weight: var(--weight-semibold);
  letter-spacing: 0.04em; line-height: 1;
  color: var(--ink); opacity: 0.05;
  white-space: nowrap; user-select: none; pointer-events: none;
}
.hero__core {
  width: min(40vw, 16rem); aspect-ratio: 1; display: block; margin: 0 auto var(--space-2);
}
.hero__tag {
  position: absolute; z-index: 1;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.04em; color: var(--ink-faint);
}
.hero__tag--tl { left: 0; top: var(--space-5); }
.hero__tag--tr { right: 0; top: var(--space-5); text-align: right; }
.hero__tag--bl { left: 0; bottom: var(--space-6); }
.hero__tag--br { right: 0; bottom: var(--space-6); text-align: right; }
@media (max-width: 46rem) {
  .hero--lattice .hero__tag { display: none; }
}
.hero--lattice .hero__kicker {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--accent-ink);
}
.hero--lattice .hero__actions { justify-content: center; }

/* — Дешифратор текста [data-sc] — */
.sc { display: inline-block; }
.sc__sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.sc__vis { white-space: pre-wrap; }

/* — Живой диалог (self-typing console) — */
.tw-console {
  max-width: 30rem; width: 100%; margin: 0 auto;
  background: var(--glass-bg); border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg); overflow: hidden;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow-lg);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .tw-console { background: var(--surface); }
}
.tw-console__top {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--glass-brd);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--ink-faint); text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.tw-console__dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #4caf7d; flex: none;
  box-shadow: 0 0 0 0 rgba(76,175,125,0.5); animation: twPulse 2s infinite;
}
@keyframes twPulse {
  70% { box-shadow: 0 0 0 0.55rem rgba(76,175,125,0); }
  100% { box-shadow: 0 0 0 0 rgba(76,175,125,0); }
}
.tw-console__wave { margin-left: auto; display: flex; align-items: flex-end; gap: 2px; height: 1rem; }
.tw-console__wave i { width: 3px; background: var(--accent); border-radius: 2px; animation: twEq 0.9s ease-in-out infinite; }
.tw-console__wave i:nth-child(2) { animation-delay: 0.1s; }
.tw-console__wave i:nth-child(3) { animation-delay: 0.2s; }
.tw-console__wave i:nth-child(4) { animation-delay: 0.3s; }
.tw-console__wave i:nth-child(5) { animation-delay: 0.15s; }
@keyframes twEq { 0%, 100% { height: 20%; } 50% { height: 100%; } }
.tw-console__body {
  padding: var(--space-4); height: 17rem; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-3);
  font-size: var(--text-sm); text-align: left;
}
.tw-console__line { display: flex; gap: var(--space-2); opacity: 0; transform: translateY(6px); animation: twSay 0.4s forwards; }
@keyframes twSay { to { opacity: 1; transform: none; } }
.tw-console__who {
  flex: none; width: 3.6rem; padding-top: 2px;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.tw-console__bubble {
  background: var(--sunken); border: 1px solid var(--line);
  border-radius: 0.6rem; padding: var(--space-2) var(--space-3);
}
.tw-console__line--bot .tw-console__bubble { background: var(--accent-soft); border-color: var(--accent-line); }
@media (prefers-reduced-motion: reduce) { .tw-console__dot, .tw-console__wave i { animation: none; } }

/* — Демо-дашборд учёта: ДДС и ОПиУ — */
.tw-dash {
  border-radius: var(--radius-lg); padding: var(--space-6);
  display: grid; gap: var(--space-6);
}
.tw-dash__tiles {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.tw-dash__tile {
  display: grid; gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--glass-brd); border-radius: var(--radius-md);
  background: var(--surface);
}
.tw-dash__tile span {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-faint);
}
.tw-dash__tile b {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums;
}
.tw-dash__charts { display: grid; gap: var(--space-6); grid-template-columns: 1fr 1fr; }
@media (max-width: 46rem) { .tw-dash__charts { grid-template-columns: 1fr; } }
.tw-chart { display: grid; gap: var(--space-2); margin: 0; }
.tw-chart figcaption {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-soft);
}
.tw-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.tw-chart__axis { stroke: var(--line-strong); stroke-width: 1; }
.tw-chart__bars rect {
  transform: scaleY(0); transform-box: fill-box;
  transition: transform 0.7s var(--ease-out);
}
.tw-chart__bars rect.in  { transform-origin: bottom; fill: #3f9c73; }
.tw-chart__bars rect.out { transform-origin: top; fill: var(--accent); opacity: 0.85; }
[data-chart].is-drawn .tw-chart__bars rect { transform: scaleY(1); }
.tw-chart__area {
  fill: var(--accent); opacity: 0; transform: translateY(10px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-chart].is-drawn .tw-chart__area { opacity: 0.12; transform: none; }
.tw-chart__line {
  fill: none; stroke: var(--accent-ink); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
.tw-chart__legend {
  display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--ink-soft);
}
.tw-chart__legend span { display: inline-flex; align-items: center; gap: 6px; }
.tw-chart__legend span::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px; background: currentColor;
}
.tw-chart__legend .in::before,
.tw-chart__legend .rev::before { background: #3f9c73; }
.tw-chart__legend .out::before { background: var(--accent); }
.tw-chart__legend .prof::before { background: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) {
  .tw-chart__bars rect, .tw-chart__area, .tw-chart__line { transition: none; }
}

/* — Бейдж отзывов Яндекса: показываем вариант под тему — */
.footer-rating { flex-basis: 100%; order: -1; margin-bottom: var(--space-2); line-height: 0; }
.rating-badge { border: 0; vertical-align: middle; }
.rating-badge--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rating-badge--light { display: none; }
  :root:not([data-theme="light"]) .rating-badge--dark { display: inline-block; }
}
:root[data-theme="dark"] .rating-badge--light { display: none; }
:root[data-theme="dark"] .rating-badge--dark { display: inline-block; }
:root[data-theme="light"] .rating-badge--light { display: inline-block; }
:root[data-theme="light"] .rating-badge--dark { display: none; }
.pt-two { display: grid; gap: var(--space-6); grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 46rem) { .pt-two { grid-template-columns: 1fr; } }
.pains { display: grid; gap: var(--space-3); }
.pain { padding-left: var(--space-4); border-left: 2px solid var(--accent-line); color: var(--ink-soft); }
.fit-list { display: grid; gap: var(--space-3); max-width: var(--measure); }
.fit-list div { padding-left: var(--space-4); position: relative; color: var(--ink-soft); }
.fit-list div::before { content: "—"; position: absolute; left: 0; color: var(--accent-ink); }

/* — FAQ — */
.faq { max-width: var(--measure); }
.faq details { border-bottom: 1px solid var(--line); padding: var(--space-4) 0; }
.faq summary { font-weight: var(--weight-medium); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-ink); font-family: var(--font-mono); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { margin-top: var(--space-3); color: var(--ink-soft); font-size: var(--text-sm); }

/* — CTA-полоса — */
.cta-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(30rem 22rem at 100% 0%, rgba(226,124,79,0.12), transparent 68%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-7);
  display: grid; gap: var(--space-4); justify-items: start;
}
.cta-band.glass {
  background:
    radial-gradient(30rem 22rem at 100% 0%, rgba(226,124,79,0.14), transparent 68%),
    var(--glass-bg);
}
.cta-band > * { position: relative; }
.cta-band h2 { max-width: 20ch; }
.cta-band p { color: var(--ink-soft); max-width: 46ch; }

/* — Пакеты Студии — */
.pkgs { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: start; }
.pkgs--single { grid-template-columns: minmax(16rem, 22rem); }
.pkg { display: grid; gap: var(--space-3); }
.pkg__name { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-lg); }
.pkg__price { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.pkg__price span { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--ink-faint); }
.pkg ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.pkg li { font-size: var(--text-sm); color: var(--ink-soft); padding-left: var(--space-4); position: relative; }
.pkg li::before { content: "—"; position: absolute; left: 0; color: var(--accent-ink); }

/* — Контакты — */
.contact-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 46rem) { .contact-grid { grid-template-columns: 1fr; } }
.channels { display: grid; gap: var(--space-4); }
.channel { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-3); align-items: baseline; }
.channel__k { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-faint); }
.channel a { color: var(--accent-ink); text-decoration: none; }
.channel a:hover { text-decoration: underline; }

/* — Сертификат / регалии — */
.cert { margin: var(--space-6) 0 0; max-width: 34rem; }
.cert img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.cert__fallback { display: none; }
.cert--noimg img { display: none; }
.cert--noimg .cert__fallback {
  display: grid; gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background:
    radial-gradient(24rem 16rem at 100% 0%, var(--accent-soft), transparent 72%),
    var(--surface);
}
.cert__brand { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); }
.cert__brand span { color: var(--accent-ink); }
.cert__title { font-size: var(--text-sm); color: var(--ink-soft); max-width: 30ch; }
.cert__name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.cert figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--ink-faint); letter-spacing: var(--tracking-label);
}

/* — Проза (О компании, юр. страницы) — */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); }
.prose p, .prose li { color: var(--ink-soft); }
.prose ol, .prose ul { padding-left: var(--space-5); display: grid; gap: var(--space-2); }

/* — Подвал — */
.site-footer { margin-top: var(--space-8); }
.site-footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between;
  padding: var(--space-4) 0; color: var(--ink-faint); font-size: var(--text-xs);
}

/* — Кнопка «наверх» — */
.to-top {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 45;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--glass-brd); border-radius: var(--radius-pill);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  color: var(--ink); cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.to-top:hover { border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 46rem) {
  .to-top { width: 2.5rem; height: 2.5rem; right: var(--space-3); bottom: var(--space-3); }
}

/* — Мобильная версия ≤768px: компактнее отступы, одна колонка, меньше заголовки — */
@media (max-width: 48rem) {
  .container { padding-inline: var(--space-4); }
  .section { padding-block: var(--space-6); }
  .hero, .hero--signal, .hero--lattice, .pt-hero { padding-block: var(--space-7) var(--space-6); }
  .hero--lattice { min-height: auto; }
  .hero__plate { font-size: clamp(2.25rem, 17vw, 5rem); top: 30%; }
  .pgrid, .feature-grid, .metrics, .pkgs, .steps { grid-template-columns: 1fr; }
  .hero--signal h1, .hero--lattice h1, .pt-hero h1, .hero h1,
  .section__title, .cta-band h2 { font-size: 1.5rem; line-height: 1.15; }
  .hero__stats { gap: var(--space-4); }
  .cta-band { padding: var(--space-5); }
}