/* ============================================================
   Self-hosted fonts — Inter + JetBrains Mono (Latin + Cyrillic)
   woff2, served from landing/fonts/ — no request leaves to Google.
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/inter-800-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/inter-800-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/inter-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/inter-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, 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-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrainsmono-500-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrainsmono-500-cyrillic.woff2') format('woff2');
  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-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrainsmono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrainsmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, 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-weight: 600;
  font-display: swap;
  src: url('fonts/jetbrainsmono-600-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/jetbrainsmono-600-cyrillic.woff2') format('woff2');
  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-weight: 600;
  font-display: swap;
  src: url('fonts/jetbrainsmono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/jetbrainsmono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Caveat — небрежный рукописный почерк (подпись «StaffKit» над hero-заголовком).
   Латиницы достаточно — название бренда из ASCII-букв. */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/caveat-600-latin.woff2') format('woff2');
}

/* ============================================================
   StaffKit — Landing design system
   Palette inherited from the product app (styles.css)
   ============================================================ */

:root {
  /* Surfaces */
  --bg:        #08080A;
  --bg-1:      #0E0E10;
  --bg-2:      #141417;
  --surface:   #1A1A1E;
  --surface-2: #232328;
  --hairline:  rgba(255,255,255,0.08);
  --hairline-2:rgba(255,255,255,0.13);

  /* Text */
  --text:      #F4F4F6;
  --text-2:    #C2C2CA;
  --muted:     #8E8E96;
  --muted-2:   #7A7A82;

  /* Типографическая шкала — непрерывные clamp() от 320px, без «ступенек»
     в медиа-запросах. Раздаются на классах .h-display/.h2/.h3/.lede в 10-base. */
  --fs-display: clamp(30px, 5.8vw + 8px, 86px);
  --fs-h2:      clamp(27px, 2.6vw + 17px, 50px);
  --fs-h3:      clamp(19px, 0.9vw + 16px, 27px);
  --fs-lede:    clamp(16px, 0.45vw + 14.5px, 20px);

  /* Мера строки — комфортная ширина чтения */
  --measure-lede: 54ch;
  --measure-body: 62ch;

  /* Вертикальный ритм */
  --sp-2: 12px;
  --sp-3: clamp(16px, 2vw, 24px);
  --sp-4: clamp(24px, 3vw, 40px);
  --sp-5: clamp(40px, 5vw, 64px);
  --sp-6: clamp(56px, 7vw, 96px);
  --sp-section: clamp(64px, 9vw, 128px);

  /* Brand + accents — violet ramp anchored on the real logo (#470490, rgb 71,4,144).
     --logo-core IS the logo color; the --coral/--purple ramp is the brightened,
     in-hue accent system used for buttons/text on the near-black bg (pure #470490
     fails contrast on small UI, so accents live a few stops lighter at the same hue). */
  --logo-core: #470490;
  --coral:     #8E25E4;
  --coral-2:   #B26AF0;
  --coral-deep:#6611B0;
  --orange:    #FF9500;
  --green:     #3FB14E;
  --green-soft:#8DD485;
  --blue:      #5A82C2;
  --blue-soft: #9DBAE0;
  --purple:    #8E25E4;
  --purple-soft:#D1B0F2;

  /* Logo tile = the real mark (deep violet, subtle diagonal toward brighter violet). */
  --logo-grad:  linear-gradient(140deg, #470490 0%, #5C12B0 100%);
  --coral-grad: linear-gradient(135deg, #B26AF0 0%, #8E25E4 55%, #6611B0 100%);

  /* Geometry */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --maxw: 1180px;
  --pad-section: var(--sp-section); /* легаси-алиас: секции по всему лендингу используют --pad-section */

  /* Поверхности и свечения — фиолетовая аура на почти чёрном фоне */
  --glow-violet: rgba(142,37,228,.14);
  --glow-deep:   rgba(102,17,176,.12);
  --glow-soft:   rgba(178,106,240,.07);
  --border-grad: linear-gradient(180deg, rgba(178,106,240,.28), rgba(142,37,228,.05));
  --glass:       rgba(18,18,22,.72);
  --shadow-glow: 0 0 80px -30px rgba(142,37,228,.35);

  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -30px rgba(0,0,0,0.8);
  --shadow-pop:  0 40px 120px -40px rgba(0,0,0,0.9);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
/* overflow-x: clip — отсекает горизонтальный вынос, не создавая scroll-контейнер
   (в отличие от hidden на body, clip не ломает position:sticky у потомков). */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, не hidden: hidden делает body scroll-контейнером и убивает sticky у потомков */
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: rgba(142,37,228,0.32); color: #fff; }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: var(--pad-section) 0; position: relative; }
.section--tight { padding: clamp(56px, 8vw, 104px) 0; }
.section-line { border-top: 1px solid var(--hairline); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 2px;
  background: var(--coral); box-shadow: 0 0 0 4px rgba(142,37,228,0.18);
}
.eyebrow.center { justify-content: center; }

/* letter-spacing/line-height на группе — только fallback; точные значения раздаются на классах */
h1,h2,h3 { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.h-display { font-size: var(--fs-display); line-height: 1.06; letter-spacing: -0.028em; }
.h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.022em; }
.h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.012em; }
.lede { font-size: var(--fs-lede); color: var(--text-2); line-height: 1.55; max-width: var(--measure-lede); }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

.section-head { max-width: 720px; }
.section-head .h2 { margin-top: 18px; }
.section-head p { margin: 18px 0 0; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
/* .lede теперь ограничен мерой (54ch) — в центрированных шапках сам блок тоже центрируем */
.section-head.center .lede,
.section-head.center p { margin-inline: auto; }

.grad-text {
  background: linear-gradient(120deg, #D1B0F2, #8E25E4 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes gradShimmer {
  0%   { background-position: 115% 0; }
  100% { background-position: -45% 0; }
}

/* ---------- Доступность / интеракции по умолчанию ---------- */
:focus-visible { outline: 2px solid var(--coral-2); outline-offset: 2px; }
a, button { -webkit-tap-highlight-color: transparent; }

/* Цифры одной ширины — счётчики и суммы не «прыгают» при смене значений */
.cnt, .side-stat, .cov-pct, .an-kpi .v, .price-amt .num { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 24px; border-radius: 11px;
  font-family: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), background .18s, border-color .18s, box-shadow .18s;
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn-primary {
  background: var(--coral-grad); color: #fff;
  box-shadow: 0 12px 34px -12px rgba(142,37,228,0.7), 0 1px 0 rgba(255,255,255,0.22) inset;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 46px -14px rgba(142,37,228,0.78), 0 1px 0 rgba(255,255,255,0.22) inset; }
.btn-ghost { background: rgba(255,255,255,0.055); color: var(--text); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.btn-ghost:hover { background: rgba(255,255,255,0.11); border-color: transparent; transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn-sm { height: 42px; padding: 0 18px; font-size: 14.5px; border-radius: 10px; }
.btn-block { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}
/* Узкие телефоны: длинные подписи кнопок переносятся, а не вылезают за экран */
@media (max-width: 360px) {
  .btn { white-space: normal; height: auto; min-height: 50px; padding: 12px 18px; text-align: center; }
}

.link-arrow { display: inline-flex; align-items: center; gap: 7px; color: var(--coral-2); font-weight: 600; font-size: 15px; }
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  border-radius: 13px; font-size: 12px; font-weight: 600; letter-spacing: .1px;
  background: var(--surface); color: var(--text-2); border: 1px solid var(--hairline);
  white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; }
.chip.green  { background: rgba(63,177,78,0.13);  color: var(--green-soft); border-color: rgba(63,177,78,0.22); }
.chip.coral  { background: rgba(142,37,228,0.14);  color: var(--coral-2);    border-color: rgba(142,37,228,0.26); }
.chip.blue   { background: rgba(90,130,194,0.16); color: var(--blue-soft);  border-color: rgba(90,130,194,0.26); }
.chip.purple { background: rgba(142,37,228,0.15); color: var(--purple-soft);border-color: rgba(142,37,228,0.26); }
.chip.orange { background: rgba(255,149,0,0.14);  color: #FFB857;           border-color: rgba(255,149,0,0.26); }

/* ---------- Cards ---------- */
/* Градиентная кромка: фон в padding-box, --border-grad в border-box сквозь прозрачный бордер */
.card {
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--border-grad) border-box;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  /* iOS Safari: a fixed element with backdrop-filter detaches and scrolls with
     the page unless it lives on its own compositor layer. translateZ(0) pins it.
     Also: never transition backdrop-filter — animating it makes iOS jump the bar
     mid-scroll (the "nav floats into the middle of the page" bug). */
  transform: translateZ(0);
  transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(10,10,12,0.72);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--hairline);
}
/* пока мобильное меню открыто, шапка глухая — стекло меню не просвечивает сквозь неё */
body.menu-open .nav { background: rgba(10,10,12,0.97); }
.nav-inner { display: flex; align-items: center; gap: 26px; height: 70px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--logo-grad);
  display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff;
  box-shadow: 0 6px 18px -6px rgba(142,37,228,0.7);
}
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 14px; }
/* только прямые ссылки бара: внутри мега-панели свои стили, линк-стили бара туда не текут */
.nav-links > a {
  padding: 9px 13px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: var(--text-2);
  transition: background .15s, color .15s;
}
.nav-links > a:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-login { font-size: 14.5px; font-weight: 600; color: var(--text-2); padding: 9px 6px; }
.nav-login:hover { color: var(--text); }
.nav-burger { display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--hairline-2);
  background: rgba(255,255,255,0.04); color: #fff; cursor: pointer; align-items: center; justify-content: center;
  transition: transform .15s ease-out, background .15s; }
.nav-burger:active { transform: scale(.97); }
.nav-burger svg { width: 20px; height: 20px; }

/* Мобильное меню живёт в DOM постоянно — display не переключается,
   вход/выход анимируются opacity+transform, visibility прячет его от таба/ридера */
.mobile-menu {
  position: fixed; inset: 70px 0 auto 0; z-index: 99;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  padding: 16px 28px 26px;
  padding-left: calc(28px + env(safe-area-inset-left));
  padding-right: calc(28px + env(safe-area-inset-right));
  padding-bottom: calc(26px + env(safe-area-inset-bottom));
  max-height: calc(100dvh - 70px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(-10px); visibility: hidden; pointer-events: none;
  transition: opacity .22s, transform .28s cubic-bezier(.2,.8,.25,1), visibility 0s .25s;
}
.mobile-menu.open {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity .22s, transform .28s cubic-bezier(.2,.8,.25,1);
}
.mobile-menu a { padding: 13px 8px; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--hairline); }
.mobile-menu .btn { margin-top: 14px; }

/* узкие телефоны: шапка ужимается, но кнопка остаётся тапабельной */
@media (max-width: 480px) {
  .nav-inner { gap: 12px; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn-sm { height: 38px; padding: 0 12px; font-size: 13.5px; }
  .brand { font-size: 17px; }
}
@media (max-width: 400px) {
  /* CTA в шапке прячем — дубль есть в hero и в мобильном меню */
  .nav-actions > .btn-primary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transform: none; transition: opacity .15s linear, visibility 0s .15s; }
  .mobile-menu.open { transition: opacity .15s linear; }
  .nav-burger { transition: none; }
  .nav-burger:active { transform: none; }
}
/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding: 158px 0 60px; overflow: hidden; }
.hero-glow {
  position: absolute; top: -340px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 760px; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(142,37,228,0.17), rgba(142,37,228,0) 70%);
  filter: blur(20px);
}
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
}
/* перспективный «пол» — та же 64px-сетка, уложенная в плоскость к горизонту */
.hero-floor {
  position: absolute; bottom: 0; left: 0; right: 0; height: 40%;
  pointer-events: none; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(900px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
          mask-image: linear-gradient(to top, #000, transparent);
}
.hero-inner { position: relative; text-align: center; max-width: 900px; margin: 0 auto; }
.hero h1 { margin: 24px 0 0; }
.hero .lede { margin: 26px auto 0; max-width: 660px; }
.hero-cta { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.hero-trust { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 26px; color: var(--muted); font-size: 13.5px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { width: 15px; height: 15px; color: var(--green); }

.announce {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 100px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--hairline-2); font-size: 13px; color: var(--text-2);
}
.announce b { color: var(--text); font-weight: 600; }
.announce .tag { background: var(--coral-grad); color: #fff; font-weight: 700; font-size: 11px;
  padding: 3px 9px; border-radius: 100px; letter-spacing: .3px; }

/* аватар — базовый примитив; живёт здесь исторически, переиспользуется
   в оверлеях (autogen/availability/payroll) и серпантине — не удалять */
.av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }

/* --- «StaffKit» — рукописная подпись над заголовком (как будто ручкой, небрежно) --- */
.hero-sign-wrap { display: block; position: relative; margin: 0 0 clamp(2px, 0.8vw, 12px); }
/* halo-кольца за подписью: тонкая гравировка, растворяется по краям */
.hero-sign-wrap::before {
  content: ""; position: absolute; left: 50%; top: -95px; z-index: -1;
  width: 640px; height: 560px; margin-left: -320px; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 140px, transparent 0 78px, rgba(178,106,240,.06) 80px 82px);
  -webkit-mask-image: radial-gradient(50% 50% at 50% 140px, #000 25%, transparent 70%);
          mask-image: radial-gradient(50% 50% at 50% 140px, #000 25%, transparent 70%);
}
.hero-sign {
  display: inline-block; position: relative; line-height: 1;
  transform: rotate(-3deg); transform-origin: center;
  pointer-events: none; user-select: none;
}
.hero-sign-ink {
  display: block;
  font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  font-weight: 600; font-size: clamp(40px, 6.4vw, 84px); line-height: 0.8;
  letter-spacing: 0.5px; color: var(--coral-2);
  text-shadow: 0 0 30px rgba(142,37,228,0.5), 0 2px 2px rgba(0,0,0,0.35);
}
.hero-sign-underline {
  display: block; width: 78%; height: auto; margin: -3px 0 0 8px;
  color: var(--coral); overflow: visible;
  filter: drop-shadow(0 1px 9px rgba(142,37,228,0.45));
}
/* подчёркивание видно по умолчанию (без JS / reduced-motion); с JS — дорисовывается «от руки» */
.hero-sign-underline path { stroke-dasharray: 300; stroke-dashoffset: 0; }
html.js .hero-sign-wrap.reveal.in .hero-sign-underline path {
  animation: heroSignDraw .85s cubic-bezier(.6,.05,.2,1) .18s both;
}
@keyframes heroSignDraw { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.js .hero-sign-wrap.reveal.in .hero-sign-underline path { animation: none; }
}
/* на узких экранах подпись чуть компактнее и ровнее */
@media (max-width: 560px) {
  .hero-sign { transform: rotate(-2deg); }
  .hero-sign-underline { width: 72%; }
  /* лид в 7 строк не читается с телефона: второе предложение прячем, кегль компактнее */
  .hero-lede-more { display: none; }
  .hero .hero-lede { font-size: 15.5px; }
}
/* ============================================================
   SECTION DIVIDERS — тонкий градиентный hairline
   (105-ambient-v11.css позже уточняет его ::before-вариантом
   с брендовым ядром; у секций нет border-radius — border-image ок)
   ============================================================ */
.section-line { border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(178,106,240,.25), transparent) 1; }

/* ============================================================
   LOGO / INDUSTRY STRIP
   ============================================================ */
.trust-strip { padding: 38px 0; }
.trust-strip p { text-align: center; color: var(--muted-2); font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; margin: 0 0 22px; }
.logo-row { display: flex; flex-wrap: wrap; gap: 14px 18px; justify-content: center; align-items: center; }
.logo-pill { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 12px;
  border: 1px solid var(--hairline); background: var(--bg-2); color: var(--text-2); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.logo-pill .gl { width: 9px; height: 9px; border-radius: 3px; }

/* ============================================================
   STATS BAND
   ============================================================ */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat-cell { padding: 6px 34px; border-left: 1px solid var(--hairline); }
.stat-cell:first-child { padding-left: 0; border-left: none; }
.stat-num { font-size: clamp(40px, 4.6vw, 60px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.stat-num .grad-text { display: inline; }
.stat-cap { color: var(--muted); font-size: 13.5px; margin-top: 16px; line-height: 1.45; max-width: 210px; }

/* ============================================================
   PILLARS
   ============================================================ */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.pillar { padding: 30px; border-radius: var(--r-xl); border: 1px solid var(--hairline); background: var(--bg-2); position: relative; overflow: hidden; transition: border-color .25s, transform .25s; }
.pillar:hover { border-color: var(--hairline-2); transform: translateY(-3px); }
.pillar-num { font-family: var(--mono); font-size: 12px; color: var(--muted-2); font-weight: 600; }
.pillar-ic { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; margin: 16px 0 20px; }
.pillar-ic svg { width: 25px; height: 25px; }
.pillar h3 { font-size: var(--fs-h3); }
.pillar p { color: var(--text-2); font-size: 15px; margin: 12px 0 18px; }
.pillar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pillar li { display: flex; gap: 10px; font-size: 14px; color: var(--text-2); }
.pillar li svg { width: 17px; height: 17px; color: var(--coral-2); flex-shrink: 0; margin-top: 2px; }
.pillar-glow { position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; border-radius: 50%; filter: blur(40px); opacity: .5; }

/* ============================================================
   FEATURE ROWS
   ============================================================ */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 84px); align-items: center; }
.feature + .feature { margin-top: clamp(64px, 9vw, 130px); }
.feature.rev .feat-text { order: 2; }
.feat-text h3 { margin: 18px 0 0; }
.feat-text p { margin: 16px 0 0; color: var(--text-2); font-size: var(--fs-lede); max-width: var(--measure-lede); }
.feat-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.feat-points li { display: flex; gap: 13px; }
.feat-points .fp-ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(142,37,228,0.12); color: var(--coral-2); display: grid; place-items: center; flex-shrink: 0; }
.feat-points .fp-ic svg { width: 16px; height: 16px; }
.feat-points b { font-weight: 600; }
.feat-points .fp-t { font-size: 15px; color: var(--text-2); }
.feat-points .fp-t b { color: var(--text); }

.feat-visual {
  border-radius: var(--r-xl); border: 1px solid var(--hairline-2); background: linear-gradient(180deg, #16161A, #101013);
  box-shadow: var(--shadow-card); padding: 20px; position: relative; overflow: hidden;
}

/* schedule grid mock */
.sg { border-radius: 12px; overflow: hidden; border: 1px solid var(--hairline); }
.sg-row { display: grid; grid-template-columns: 98px repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
.sg-row:first-child { border-top: none; }
.sg-c { padding: 7px 5px; border-left: 1px solid var(--hairline); min-height: 46px; display: flex; align-items: center; min-width: 0; }
.sg-c:first-child { border-left: none; }
.sg-head { background: rgba(255,255,255,0.03); font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; min-height: 32px; }
.sg-emp { gap: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; min-width: 0; overflow: hidden; }
.sg-shift { border-radius: 6px; padding: 5px 4px; font-size: 9.5px; font-weight: 700; width: 100%; text-align: center; white-space: nowrap; }
.sg-shift.b { background: rgba(90,130,194,0.25); color: var(--blue-soft); }
.sg-shift.p { background: rgba(142,37,228,0.25); color: var(--purple-soft); }
.sg-shift.g { background: rgba(63,177,78,0.22); color: var(--green-soft); }
.sg-shift.empty { background: transparent; border: 1px dashed rgba(255,149,0,0.4); color: #FFB857; }
.autoassign-tag { position: absolute; right: 28px; bottom: 28px; }

/* terminal / face mock */
.terminal-mock { display: flex; gap: 18px; align-items: stretch; }
.terminal { width: 168px; flex-shrink: 0; border-radius: 18px; border: 1px solid var(--hairline-2); background: #0C0C0E; padding: 14px; position: relative; }
.terminal-cam { aspect-ratio: 3/4; border-radius: 13px; background: radial-gradient(120% 90% at 50% 30%, rgba(90,130,194,0.18), rgba(0,0,0,0)) , repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 8px, transparent 8px 16px), #111; position: relative; overflow: hidden; display: grid; place-items: center; }
.face-frame { width: 92px; height: 112px; border-radius: 46px / 56px; border: 2px solid rgba(63,177,78,0.7); box-shadow: 0 0 28px rgba(63,177,78,0.3); position: relative; }
.face-frame .corner { position: absolute; width: 16px; height: 16px; border: 2px solid var(--green); }
.scan {
  position: absolute; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, transparent, var(--green), transparent);
  box-shadow: 0 0 12px var(--green); animation: scan 2.6s ease-in-out infinite;
}
@keyframes scan { 0%,100% { top: 18%; } 50% { top: 78%; } }
.terminal-status { margin-top: 11px; text-align: center; }
.terminal-status .ok { font-size: 12px; font-weight: 700; color: var(--green-soft); }
.terminal-status .nm2 { font-size: 13px; font-weight: 700; margin-top: 3px; }
.terminal-status .tm { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.event-list { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.event { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--hairline); }
.event .ev-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.event .ev-nm { font-size: 13px; font-weight: 600; }
.event .ev-meta { font-size: 11px; color: var(--muted); }
.event .ev-time { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.event .ev-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }

/* analytics mock */
.an-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.an-kpi { background: var(--bg-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 13px; }
.an-kpi .v { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.an-kpi .l { font-size: 11px; color: var(--muted); margin-top: 2px; }
.an-kpi .d { font-size: 11px; font-weight: 700; margin-top: 6px; }
.an-kpi .d.up { color: var(--green-soft); }
.an-kpi .d.down { color: var(--coral-2); }
.an-chart { margin-top: 12px; background: var(--bg-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px 14px 12px; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 116px; }
.bars .b { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--blue), rgba(90,130,194,0.25)); position: relative; }
.bars .b.hot { background: linear-gradient(180deg, var(--coral-2), rgba(142,37,228,0.3)); }
.bars-x { display: flex; gap: 8px; margin-top: 8px; }
.bars-x span { flex: 1; text-align: center; font-size: 10px; color: var(--muted); }
.heat { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 12px; }
.heat i { aspect-ratio: 1; border-radius: 3px; }

/* phone mock */
.phone-wrap { display: grid; place-items: center; }
.phone {
  width: 248px; border-radius: 38px; border: 1px solid var(--hairline-2); background: #0C0C0E; padding: 11px;
  box-shadow: var(--shadow-pop); position: relative;
}
.phone-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 86px; height: 24px; border-radius: 13px; background: #000; z-index: 2; }
.phone-screen { border-radius: 28px; background: var(--bg-1); overflow: hidden; height: 488px; }
.ph-top { padding: 34px 18px 14px; }
.ph-hello { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.ph-date { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ph-shift-card { margin: 16px 18px 0; border-radius: 16px; background: var(--coral-grad); padding: 16px; color: #fff; }
.ph-shift-card .lab { font-size: 11px; opacity: .85; font-weight: 600; }
.ph-shift-card .tm { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; margin-top: 3px; }
.ph-shift-card .pl { font-size: 12px; opacity: .9; margin-top: 2px; }
.ph-checkin { margin-top: 13px; height: 40px; border-radius: 11px; background: rgba(255,255,255,0.22); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.ph-list { padding: 16px 18px; }
.ph-li { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.ph-li .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.ph-li .t { font-size: 13px; font-weight: 600; }
.ph-li .s { font-size: 11px; color: var(--muted); }
.ph-li .ch { margin-left: auto; }

/* ============================================================
   INTEGRATIONS
   ============================================================ */
.integ-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 50px; }
.integ {
  padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--hairline); background: var(--bg-2);
  display: flex; flex-direction: column; gap: 12px; transition: border-color .2s, background .2s; min-height: 132px;
}
.integ:hover { border-color: var(--hairline-2); background: var(--surface); }
.integ .iz { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.integ .it { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.integ .ic2 { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.integ .icat { margin-top: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-2); }

/* ============================================================
   COMPARISON
   ============================================================ */
.cmp { margin-top: 50px; border: 1px solid var(--hairline); border-radius: var(--r-xl); overflow: hidden; background: var(--bg-2); }
.cmp-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; border-top: 1px solid var(--hairline); }
.cmp-row:first-child { border-top: none; }
.cmp-c { padding: 17px 22px; display: flex; align-items: center; font-size: 14.5px; }
.cmp-c.feat { color: var(--text-2); font-weight: 500; }
.cmp-c.them { color: var(--muted); border-left: 1px solid var(--hairline); justify-content: center; }
.cmp-c.us { background: rgba(142,37,228,0.05); border-left: 1px solid rgba(142,37,228,0.18); justify-content: center; font-weight: 600; }
.cmp-head .cmp-c { font-weight: 800; font-size: 15px; }
.cmp-head .us { color: var(--coral-2); }
.cmp-head .them { color: var(--text-2); }
.cmp-c svg { width: 19px; height: 19px; }
.yes { color: var(--green); } .no { color: var(--muted-2); }

/* ============================================================
   PRICING — «попробуй бесплатно» (65-pricing.html)
   Герой лесенки — бесплатный «Базовый»: лифт, стекло, glow и
   единственный btn-primary секции. Платные — спокойные ступени.
   Цветовая дисциплина: зелёный в секции = семантика «0 ₽»
   (пилюля героя, чипы платных, гарантии), фиолетовый — цвет
   действия и бренда. Источник света один — glow героя.
   ============================================================ */
.price-lede { margin: 16px auto 0; max-width: 620px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }

.price-name { font-size: 15px; font-weight: 700; }
.price-amt { margin: 14px 0 8px; display: flex; align-items: baseline; gap: 8px; }
.price-amt .num { font-size: clamp(38px, 3.6vw, 46px); font-weight: 800; letter-spacing: -0.035em; line-height: .95; }
.price-amt .per { font-size: 13px; line-height: 1.2; color: var(--muted); }
.price-meta { font-size: 13px; color: var(--muted); line-height: 1.5; }
.price-plus { margin: 20px 0 14px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 12px; font-weight: 700; letter-spacing: .2px; color: var(--text-2); }
.price-feats { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.price-feats li { display: flex; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.price-feats svg { width: 17px; height: 17px; color: var(--coral-2); flex-shrink: 0; margin-top: 2px; }

/* верхняя строка карты — «ступень» лесенки; фиксированная min-height
   держит имена и цены трёх карт на общих линиях */
.price-top { display: flex; align-items: center; min-height: 18px; margin-bottom: 12px; }
.price-step { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* пилюля живёт в строке имени тарифа — короткое имя + чип всегда умещаются */
.price-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.price-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.price-pill--free { color: var(--green-soft); background: rgba(63,177,78,.12); border: 1px solid rgba(63,177,78,.32); box-shadow: 0 0 24px rgba(63,177,78,.15); }
.price-pill--terminal { color: var(--coral-2); background: rgba(142,37,228,.08); border: 1px solid rgba(178,106,240,.32); }

/* зелёный чип «Первый месяц — 0 ₽» — всегда в одном блоке с настоящей ценой */
.price-chip { display: inline-flex; align-items: center; margin: 2px 0 10px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .2px; color: var(--green-soft); background: rgba(63,177,78,.10); border: 1px solid rgba(63,177,78,.25); align-self: flex-start; }

.price-tiers { display: grid; grid-template-columns: 1.14fr 1fr 1fr; gap: 18px; align-items: stretch; margin-top: 56px; }
.price-tier {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  padding: 30px 28px 26px; border-radius: var(--r-xl);
  border: 1px solid transparent;
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--border-grad) border-box;
  box-shadow: var(--shadow-card);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.price-tier:hover { transform: translateY(-4px); }
.price-tier .btn { margin-top: auto; }
.price-trust { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }

/* герой — бесплатный тариф: приподнят отрицательными полями, стекло,
   градиентная кромка и брендовое свечение (переехали с прежней middle-карты) */
.price-tier--hero {
  margin: -18px 0;
  padding: 38px 30px 30px;
  background:
    linear-gradient(160deg, rgba(142,37,228,0.12), rgba(142,37,228,0) 55%) padding-box,
    linear-gradient(var(--glass), var(--glass)) padding-box,
    linear-gradient(160deg, rgba(178,106,240,.45), rgba(142,37,228,.14) 45%, rgba(142,37,228,.05)) border-box;
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255,255,255,0.09), 0 44px 110px -50px rgba(102,17,176,0.5);
}
.price-tier--hero .price-amt .num { font-size: clamp(46px, 4.4vw, 58px); }
.price-tier--hero .price-trust { color: var(--text-2); }
/* пятно смотрит из левого верхнего угла внутрь секции (карта — крайняя левая) */
.price-tier-glow { position: absolute; top: -100px; left: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(142,37,228,0.38), transparent 70%); filter: blur(30px); pointer-events: none; animation: glowPulse 10s ease-in-out infinite; transition: filter .45s ease; }
.price-tier--hero:hover .price-tier-glow { filter: blur(26px) brightness(1.4) saturate(1.15); }
.price-tier--hero > :not(.price-tier-glow) { position: relative; z-index: 1; }

/* CTA героя — единственная primary секции, на ступень крупнее остальных */
.price-cta-hero { height: 58px; font-size: 17px; }

/* гарантии под лесенкой — общий «фундамент нулевого риска» */
.price-guar { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: center; }
.price-guar span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.price-guar svg { width: 15px; height: 15px; color: var(--green-soft); flex-shrink: 0; }

/* узкая трёхколоночная полоса: чуть меньше боковые поля и кегль CTA,
   чтобы подпись со стрелкой не упиралась в кромку карточки */
@media (max-width: 1160px) and (min-width: 1001px) {
  .price-tier { padding-left: 20px; padding-right: 20px; }
  .price-tier .btn-block { font-size: 14.5px; }
  .price-cta-hero { font-size: 16px; }
}
@media (max-width: 1000px) {
  .price-tiers { grid-template-columns: 1fr; gap: 16px; max-width: 620px; margin-left: auto; margin-right: auto; }
  .price-tier--hero { margin: 0; padding: 32px 28px 28px; }
}
@media (max-width: 560px) {
  .price-tiers { margin-top: 40px; }
  .price-tier { padding: 24px 18px 22px; }
  .price-tier--hero { padding: 26px 18px 24px; }
  #pricing .btn-block { font-size: 15px; }
  .price-cta-hero { height: 54px; }
  .price-guar { flex-direction: column; gap: 10px; align-items: flex-start; max-width: 420px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 400px) {
  .price-amt .num { font-size: 36px; }
  .price-tier--hero .price-amt .num { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .price-tier-glow { animation: none !important; transition: none !important; }
  .price-tier, .price-tier:hover { transform: none; transition: none; }
}

/* ============================================================
   COMPLIANCE
   ============================================================ */
.comp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 76px); align-items: center; }
.comp-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.comp-badge { padding: 22px 24px; border: none; border-radius: 0; background: none; border-top: 1px solid var(--hairline); }
.comp-badge:nth-child(odd) { padding-left: 0; }
.comp-badge:nth-child(even) { border-left: 1px solid var(--hairline); }
.comp-badge .cb-ic { width: auto; height: 26px; border-radius: 0; background: none; color: var(--coral-2); display: flex; align-items: center; margin-bottom: 14px; }
.comp-badge h4 { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; }
.comp-badge p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.comp-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.comp-list li { display: flex; gap: 10px; font-size: 14px; color: var(--text-2); }
.comp-list svg { width: 17px; height: 17px; color: var(--green); flex-shrink: 0; margin-top: 2px; }

/* ============================================================
   CTA
   ============================================================ */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(142,37,228,0.17), rgba(142,37,228,0.05)), var(--bg-1); padding: clamp(44px, 7vw, 80px); text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 50px 130px -55px rgba(142,37,228,0.45); }
.cta-band .glow { position: absolute; bottom: -200px; left: 50%; transform: translateX(-50%); width: 700px; height: 420px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(142,37,228,0.3), transparent 70%); filter: blur(24px); pointer-events: none; }
.cta-band .h2 { position: relative; }
.cta-band p { position: relative; margin: 18px auto 0; max-width: 520px; }
.cta-band .hero-cta { position: relative; }
@media (max-width: 560px) {
  .cta-band { padding: 40px 20px; border-radius: var(--r-lg); }
  /* заголовок остаётся по центру, абзац — влево для читаемости */
  .cta-band p { text-align: left; font-size: 16px; line-height: 1.5; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--hairline); padding: 64px 0 40px; }
.footer-top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; }
.footer-brand p { color: var(--muted); font-size: 14px; margin: 16px 0 0; max-width: 280px; }
.footer-col h5 { margin: 0 0 16px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-2); font-weight: 700; }
.footer-col a { display: block; color: var(--text-2); font-size: 14px; padding: 8px 0; transition: color .15s; }
.footer-col a:hover { color: var(--text); }
.footer-req { margin: 50px 0 0; padding-top: 26px; border-top: 1px solid var(--hairline); color: var(--muted-2); font-size: 12.5px; line-height: 1.6; }
.footer-req a { color: var(--text-2); }
.footer-req a:hover { color: var(--text); text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; padding-top: 18px; color: var(--muted); font-size: 13px; }
.footer-bottom .reg { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 560px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { } /* always visible — opacity never animated, so a stalled clock can't hide content */
html.js .reveal.in { animation: skReveal .6s cubic-bezier(.2,.7,.3,1); }
@keyframes skReveal { from { transform: translateY(16px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  html.js .reveal.in { animation: none; }
  .scan { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .shot-body { grid-template-columns: 1fr; }
  .mini-side { display: none; }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .integ-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .nav-links, .nav-login { display: none; }
  .nav-burger { display: flex; }
  .pillars { grid-template-columns: 1fr; }
  .feature, .feature.rev { grid-template-columns: 1fr; }
  .feature.rev .feat-text { order: 0; }
  .comp { grid-template-columns: 1fr; }
  .cmp-row { grid-template-columns: 1.4fr 0.8fr 0.8fr; }
  .cmp-c { padding: 14px; font-size: 13px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .float-badge { display: none; }
  .cov-row { grid-template-columns: repeat(4, 1fr); }
  .stats-band, .integ-grid { grid-template-columns: 1fr; }
  .stat-cell { padding: 16px 0; border-left: none; border-top: 1px solid var(--hairline); }
  .stat-cell:first-child { border-top: none; padding-top: 0; }
  .stat-cap { max-width: none; }
  .comp-list { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero { padding-top: 128px; }
}
@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
}

/* ============================================================
   v2 — ANIMATIONS, AUTOGEN SPOTLIGHT, PRICE HERO, FIXES
   ============================================================ */

/* --- gradient headline: calm base everywhere; the hero H1 gets a slow drifting sheen --- */
.grad-text {
  background: linear-gradient(115deg, #C7B6FF 0%, #B26AF0 52%, #8E25E4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .grad-text {
  background: linear-gradient(115deg, #8E25E4 0%, #B26AF0 34%, #C7B6FF 50%, #B26AF0 66%, #8E25E4 100%);
  background-size: 210% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: gradShimmer 8.5s ease-in-out infinite;
}

/* --- hero glow breathing + auroras --- */
.hero-glow { animation: glowPulse 12s ease-in-out infinite; }
@keyframes glowPulse {
  0%,100% { transform: translateX(-50%) scale(1); opacity: .58; }
  50% { transform: translateX(-50%) scale(1.05); opacity: .76; }
}
/* глубокая фиолетовая аврора справа сверху — медленно дрейфует */
.hero::before {
  content: ""; position: absolute; top: -120px; right: -160px; width: 620px; height: 620px;
  pointer-events: none; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(102,17,176,0.12), transparent 70%);
  filter: blur(20px); animation: heroDrift 14s ease-in-out infinite;
}
@keyframes heroDrift {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(-42px,28px,0) scale(1.06); }
}
/* вторая аврора — холодный синий отсвет, статичный и тихий */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(40% 60% at 80% 10%, rgba(90,130,194,.10), transparent 65%);
}
.hero .wrap { position: relative; z-index: 1; }

/* --- primary button sheen --- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.58), transparent);
  transform: skewX(-22deg); transition: left .6s cubic-bezier(.2,.7,.3,1); pointer-events: none;
}
.btn-primary:hover::after { left: 140%; }

/* --- card hover lift for integrations & feature visuals --- */
.feat-visual { transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; }
.feature:hover .feat-visual { transform: translateY(-4px); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8); }

/* --- richer reveal entrance (translate only, opacity-safe) --- */
@keyframes skReveal { from { transform: translateY(26px); } to { transform: none; } }

/* fix: autoassign tag no longer overlaps the grid */
.autoassign-tag { position: static; display: block; margin-top: 14px; }

/* ============================================================
   AUTOGEN SPOTLIGHT
   ============================================================ */
.auto-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.auto-demo {
  border-radius: var(--r-xl); border: 1px solid var(--hairline-2);
  background: linear-gradient(180deg, #16161A, #101013); box-shadow: var(--shadow-card);
  padding: 18px; position: relative; overflow: hidden;
}
.auto-demo-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; padding: 4px 6px 14px; }
.auto-spark { width: 28px; height: 28px; border-radius: 8px; background: var(--coral-grad); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(142,37,228,0.8); }
.auto-status { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--green-soft); background: rgba(63,177,78,0.14); border: 1px solid rgba(63,177,78,0.26); padding: 3px 10px; border-radius: 100px; }
.auto-board { position: relative; display: block; border-radius: 14px; border: 1px solid var(--hairline); background: var(--bg-2); padding: 13px; overflow: hidden; }
.auto-roles { display: grid; grid-template-rows: repeat(4, 1fr); gap: 9px; font-size: 11px; color: var(--muted); font-weight: 600; }
.auto-roles span { display: flex; align-items: center; }
.auto-cells { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); gap: 9px; }
.ac {
  border-radius: 8px; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  background: rgba(90,130,194,0.2); color: var(--blue-soft);
  animation: acPop .5s var(--d, 0s) both; will-change: transform;
}
@keyframes acPop { 0% { transform: scale(.5); } 70% { transform: scale(1.06); } 100% { transform: scale(1); } }
.ac.b { background: rgba(142,37,228,0.22); color: var(--purple-soft); }
.ac.g { background: rgba(63,177,78,0.2); color: var(--green-soft); }
.ac.p { background: rgba(255,149,0,0.15); color: #FFB857; }
.ac.open { background: transparent; border: 1px dashed rgba(142,37,228,0.55); color: var(--coral-2); }
.auto-sweep {
  position: absolute; top: 0; bottom: 0; width: 38%; left: -38%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(142,37,228,0.22), transparent);
  animation: sweep 3.4s ease-in-out infinite;
}
@keyframes sweep { 0% { left: -38%; } 100% { left: 100%; } }
.auto-foot { margin-top: 15px; padding: 0 4px; }
.auto-bar-line { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.auto-bar-fill { display: block; height: 100%; width: 100%; background: var(--coral-grad); border-radius: 3px; transform-origin: left; animation: fillBar 2.6s cubic-bezier(.3,.7,.2,1); }
@keyframes fillBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.auto-foot-txt { margin-top: 11px; font-size: 13px; color: var(--text-2); }
.auto-foot-txt b { color: var(--text); }
.ok-text { color: var(--coral-2); font-weight: 600; }

/* PRICE HERO удалён 16.07.2026: тарифы стали лесенкой из трёх карточек
   (.price-tiers / .price-tier), стили живут в 40-sections.css. */

/* ============================================================
   v2 RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .auto-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ac { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow, .hero::before, .grad-text,
  .auto-sweep, .ac, .auto-bar-fill { animation: none !important; }
  .btn-primary::after { transition: none !important; }
}

/* ============================================================
   INTEGRATIONS MARQUEE (replaces monogram grid)
   ============================================================ */
.marquee {
  margin-top: 50px; display: flex; flex-direction: column; gap: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-row { display: flex; gap: 16px; overflow: hidden; }
.marquee-track { display: flex; gap: 16px; flex-shrink: 0; width: max-content; animation: scrollX 42s linear infinite; }
.marquee-track.rev { animation-direction: reverse; }
.marquee-row:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollX { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 16px)); } }
.ichip {
  display: inline-flex; align-items: center; gap: 12px; padding: 15px 22px; border-radius: 14px;
  border: 1px solid var(--hairline); background: var(--bg-2); white-space: nowrap;
  transition: border-color .2s, background .2s, transform .2s;
}
.ichip:hover { border-color: var(--hairline-2); background: var(--surface); transform: translateY(-3px); }
.idot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ichip b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.ichip i { font-size: 12px; font-style: normal; color: var(--muted); font-weight: 500; }
.marquee-note { text-align: center; margin-top: 24px; color: var(--muted); font-size: 14px; }
.marquee-note a { color: var(--coral-2); font-weight: 600; }

/* ============================================================
   INTERACTIVE AUTOGEN
   ============================================================ */
.auto-run {
  display: inline-flex; align-items: center; gap: 9px; margin-left: auto;
  height: 34px; padding: 0 15px; border-radius: 9px; border: 1px solid var(--hairline-2);
  background: rgba(142,37,228,0.14); color: var(--coral-2); font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: background .18s, transform .18s, border-color .18s; white-space: nowrap;
}
.auto-run:hover { background: rgba(142,37,228,0.24); border-color: rgba(142,37,228,0.5); transform: translateY(-1px); }
.auto-run:active { transform: scale(.96); }
.auto-run svg { width: 14px; height: 14px; }
.auto-run.running { pointer-events: none; opacity: .65; }
.auto-run.pressed { transform: scale(.88); background: rgba(142,37,228,0.38); border-color: rgba(142,37,228,0.7); box-shadow: 0 0 0 5px rgba(142,37,228,0.22), 0 0 22px rgba(142,37,228,0.6); }
.auto-board.building .ac { opacity: 0; }
.auto-board.building .ac.lit { opacity: 1; animation: acPop .42s both; }
.auto-count { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
  .auto-board.building .ac { opacity: 1 !important; }
}

/* ============================================================
   PROCESS PIPELINE (replaces pillar cards)
   ============================================================ */
.flow { position: relative; margin-top: 60px; }
.flow-spine {
  position: absolute; top: 24px; left: 16.6%; right: 16.6%; height: 2px; z-index: 0; border-radius: 2px;
  background: linear-gradient(90deg, rgba(142,37,228,0.1), rgba(142,37,228,0.55) 50%, rgba(142,37,228,0.1));
}
.flow-pulse {
  position: absolute; top: 50%; left: 0; width: 52px; height: 5px; transform: translateY(-50%); border-radius: 6px;
  background: linear-gradient(90deg, transparent, var(--coral-2) 38%, #fff 50%, var(--coral-2) 62%, transparent);
  box-shadow: 0 0 18px var(--coral-2); animation: flowPulse 4.4s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes flowPulse { 0% { left: -8%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 108%; opacity: 0; } }
.flow-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; z-index: 1; }
.stage { position: relative; padding-top: 66px; }
.stage-node {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--coral-2);
  background: var(--bg-1); border: 1px solid rgba(142,37,228,0.45); z-index: 2;
  box-shadow: 0 0 0 7px var(--bg), 0 10px 28px -10px rgba(142,37,228,0.7);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.stage:hover .stage-node { transform: translateX(-50%) translateY(-3px) scale(1.06); border-color: var(--coral-2); box-shadow: 0 0 0 7px var(--bg), 0 16px 36px -10px rgba(142,37,228,0.9); }
.stage-card { background: var(--bg-2); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 30px 26px 24px; height: 100%; transition: border-color .25s, transform .25s, background .25s; }
.stage:hover .stage-card { border-color: rgba(142,37,228,0.4); transform: translateY(-5px); background: var(--surface); }
.stage-ic { color: var(--coral-2); margin-bottom: 18px; }
.stage-ic svg { width: 30px; height: 30px; }
.stage-card h3 { font-size: 21px; }
.stage-card p { color: var(--text-2); font-size: 15px; margin: 12px 0 18px; }
.stage-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.stage-list li { display: flex; gap: 10px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--hairline); font-size: 13.5px; color: var(--text-2); }
.stage-list li:last-child { border-bottom: none; padding-bottom: 0; }
.sl-mk { width: 14px; height: 14px; color: var(--coral-2); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 820px) {
  .flow-stages { grid-template-columns: 1fr; gap: 40px; }
  .flow-spine { display: none; }
  .stage { padding-top: 0; }
  .stage-node { position: static; transform: none; margin-bottom: 18px; box-shadow: 0 10px 28px -10px rgba(142,37,228,0.7); }
}

/* ============================================================
   SCROLL-SCRUBBED AUTOGEN
   ============================================================ */
.auto-board.scrub .ac { opacity: 0; transform: translateY(-14px) scale(.5); transition: transform .5s cubic-bezier(.2,.9,.3,1.15); animation: none; }
.auto-board.scrub .ac.on { opacity: 1; transform: none; }
.auto-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); }
.auto-hint svg { width: 14px; height: 14px; animation: hintBob 1.8s ease-in-out infinite; }
@keyframes hintBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
  .flow-pulse { animation: none !important; }
  .auto-board.scrub .ac { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   HERO DASHBOARD — файл-носитель бывшего hero-мокапа.
   Сам мокап (.hero-shot-wrap: scroll-fill, «Сейчас в смене»,
   карточка уведомлений) вырезан из 20-hero.html вместе со стилями
   (редизайн 07.2026). Файл остаётся в манифесте: ниже живут стили
   планировочной сетки (autogen) и интерактивного расписания фичи №1.
   ============================================================ */

/* ============================================================
   PLANNING GRID (autogen applies live)
   ============================================================ */
.auto-grid { display: block; }
.auto-grid .auto-text { max-width: 768px; margin: 0 auto 42px; text-align: center; }
.auto-grid .feat-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; margin-top: 30px; }
@media (max-width: 820px) { .auto-grid .feat-points { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }

.pg-role { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; padding: 2px 4px 14px; }
.pg-roledot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(63,177,78,0.16); }
.pg-rolesub { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.auto-board { overflow-x: auto; }
.pg { display: grid; grid-template-columns: 172px repeat(7, 1fr); gap: 7px; min-width: 940px; align-items: stretch; }
.pgh { display: flex; align-items: baseline; justify-content: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0 10px; border-bottom: 2px solid rgba(63,177,78,0.35); }
.pgh b { font-size: 16px; color: var(--text); letter-spacing: -0.02em; }
.pg-corner { justify-content: flex-start; color: var(--muted-2); padding-left: 4px; border-bottom-color: transparent; }
.pg-corner span { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; }
.pgs { display: flex; align-items: center; gap: 9px; padding: 8px 6px; min-width: 0; align-self: center; }
.pgs .av.sm { width: 28px; height: 28px; font-size: 9px; flex-shrink: 0; }
.pgs-tx { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1; min-width: 0; }
.pgs-nm { font-size: 12px; font-weight: 600; line-height: 1.18; min-width: 0; }
.pgs-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 9.5px; color: var(--muted); white-space: nowrap; font-family: var(--mono); }
.pgs-load { align-self: flex-start; padding-top: 10px; font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

/* нагрузка cell with 3 shift requirements */
.pgl { display: flex; flex-direction: column; gap: 6px; padding: 9px 9px 11px; border-radius: 10px; background: rgba(255,255,255,0.018); border: 1px solid var(--hairline); }
.pgl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.pgl-pct { font-size: 14px; font-weight: 800; color: #FF9F45; font-family: var(--mono); }
.pgl-sub { font-size: 9px; color: var(--muted); white-space: nowrap; }
.pgl-bar { height: 3px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin-top: -2px; }
.pgl-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FF8A00, #FFB347); border-radius: 2px; transition: width .35s ease; }
.req { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: 7px; background: rgba(255,255,255,0.022); border: 1px solid var(--hairline); border-top: 2px solid var(--blue); }
.req.ut { border-top-color: #5a82c2; }
.req.dn { border-top-color: #3FB14E; }
.req.ve { border-top-color: #8E25E4; }
.req-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.req-nm { font-size: 10.5px; font-weight: 700; color: var(--text-2); }
.req-tm { font-size: 8.5px; color: var(--muted); font-family: var(--mono); }
.req-b { font-size: 9.5px; font-weight: 800; flex-shrink: 0; font-family: var(--mono); }
.req-b.red { color: #e0788a; }
.req-b.grn { color: var(--green-soft); }

/* day cells */
.pc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; border-radius: 9px; border: 1px solid var(--hairline); text-align: center; background: rgba(255,255,255,0.012); }
.pc.ok { color: var(--green-soft); background: rgba(63,177,78,0.05); border-color: rgba(63,177,78,0.2); }
.pc.no { color: #e0788a; background: rgba(216,120,138,0.05); border: 1px dashed rgba(216,120,138,0.45); }
.pc.add { color: var(--muted-2); background: transparent; border: 1px dashed var(--hairline-2); font-size: 18px; font-weight: 400; }
.pc.rng { color: var(--green-soft); background: rgba(63,177,78,0.04); border-color: rgba(63,177,78,0.18); font-size: 11px; font-weight: 700; font-family: var(--mono); }
.pc.shift span { font-size: 11px; font-weight: 700; line-height: 1; }
.pc.shift i { font-size: 9px; font-style: normal; font-family: var(--mono); opacity: .85; }
.pc.shift.dn { background: rgba(63,177,78,0.2); color: #9fe6a8; border-color: rgba(63,177,78,0.5); }
.pc.shift.ve { background: rgba(142,37,228,0.22); color: var(--purple-soft); border-color: rgba(142,37,228,0.5); }

/* ── v19: mini planning grid — the simplified «Авто-расстановка» teaser on the main
   page. The dense .pg grid moved to the deep-dive (fd-auto); this is the calm
   rota: 5 employees × 6 days, no Нагрузка row, three cell types only (shift
   chip / available check / empty). Reuses .pc + .pc.shift.dn/.ve/.ok/.add and
   the live build engine (#autoBoard, .ac → .on). New classes only, so the full
   .pg grid in the detail stays untouched, and .pgm has NO min-width — it fits
   any card width and never triggers .auto-board's horizontal scroll. ── */
.pgm { display: grid; grid-template-columns: 116px repeat(6, 1fr); gap: 6px; align-items: stretch; }
.pgmh { font-size: 10px; color: var(--muted); padding: 3px 0 8px; text-align: center; border-bottom: 1.5px solid rgba(63,177,78,0.3); }
.pgmh b { font-size: 14px; color: var(--text); display: block; letter-spacing: -0.02em; }
.pgm-corner { border-bottom-color: transparent; }
.pgms { display: flex; align-items: center; gap: 7px; padding: 5px 4px; min-width: 0; }
.pgms .av.sm { width: 24px; height: 24px; font-size: 8.5px; flex-shrink: 0; }
.pgms-tx { display: flex; flex-direction: column; min-width: 0; }
.pgms-nm { font-size: 11px; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgms-ct { font-size: 9px; color: var(--muted); font-family: var(--mono); }
.pcm { min-height: 38px; border-radius: 8px; gap: 1px; }
.pcm.shift span { font-size: 10px; }
.pcm.shift i { font-size: 8.5px; }
.pcm.add { font-size: 15px; }
.pcm.add.gap { font-size: 13px; font-family: var(--mono); color: var(--muted-2); }
@media (max-width: 560px) {
  /* shift chips have a hard min-width, so drop Пт+Сб and show the Пн–Чт sample —
     it fits a phone with no horizontal scroll and still carries the honest gap (Чт) */
  .pgm { grid-template-columns: 76px repeat(4, minmax(0, 1fr)); gap: 4px; }
  .pgm > :nth-child(7n), .pgm > :nth-child(7n+6) { display: none; }
  .pgms { gap: 6px; padding: 4px 2px; }
  .pgms .av.sm { width: 21px; height: 21px; }
  .pgms-nm { font-size: 10px; }
  .pcm { min-height: 36px; }
  .pcm.shift span { font-size: 9px; }
  .pcm.shift i { font-size: 7.5px; }
}

/* ============================================================
   FEATURE-1 INTERACTIVE SCHEDULE (autogen applies)
   ============================================================ */
.sg-visual { position: relative; }
.sg { position: relative; }
#sgBoard { padding: 16px; }
.av-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.av-title { font-size: 14px; font-weight: 700; }
.av-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.av-prog { font-size: 12px; color: var(--muted); white-space: nowrap; }
.av-prog b { color: var(--green-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.av-barline { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-bottom: 16px; }
.av-barfill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3FB14E, #5BD46B); border-radius: 3px; transition: width .5s ease; }
.av-grid { position: relative; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.sg-shift.av-ok { background: rgba(63,177,78,0.16); color: #9fe6a8; }
.sg-shift.av-no { background: rgba(255,255,255,0.04); color: var(--muted-2); }
.sg-shift.av-rng { background: rgba(90,130,194,0.22); color: var(--blue-soft); }
.sg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 14px; margin-top: 14px; flex-wrap: wrap; }
.sg-foot .autoassign-tag { position: static; margin: 0; transition: opacity .4s ease; }
.sg-run {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--hairline-2); background: rgba(142,37,228,0.16); color: var(--coral-2);
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .18s, transform .18s, border-color .18s; flex-shrink: 0;
}
.sg-run:hover { background: rgba(142,37,228,0.26); border-color: rgba(142,37,228,0.5); transform: translateY(-1px); }
.sg-run:active { transform: scale(.96); }
.sg-run.running { opacity: .6; pointer-events: none; }
.sg-run svg { width: 12px; height: 12px; }
/* build animation: shifts drop in one-by-one (opacity instant = frozen-safe, transform animated) */
.sg.building .sg-shift { opacity: 0; transform: scale(.5) translateY(-10px); }
.sg.building .sg-shift.in { opacity: 1; transform: none; transition: transform .5s cubic-bezier(.18,.9,.3,1.1); }
.sg-sweep {
  position: absolute; top: 0; bottom: 0; width: 34%; left: -34%; pointer-events: none; z-index: 2; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(142,37,228,0.22), transparent);
}
.sg.sweeping .sg-sweep { opacity: 1; animation: sgSweep 1.1s cubic-bezier(.4,0,.3,1) infinite; }
@keyframes sgSweep { from { left: -34%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .sg.building .sg-shift { opacity: 1 !important; transform: none !important; }
  .sg.sweeping .sg-sweep { animation: none !important; opacity: 0; }
}

/* ============================================================
   v3 — lead modal + form · mobile nav CTA fix
   ============================================================ */

/* The inline nav CTA lives in the burger menu on mobile — hide it so
   the burger button stops getting pushed off the right edge. */
@media (max-width: 820px) {
  .nav-actions .btn { display: none; }
}

/* --- overlay --- */
.lead-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(4, 4, 6, 0.74);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.lead-overlay.open { opacity: 1; visibility: visible; }
/* Robust scroll-lock for fullscreen overlays. Plain `overflow:hidden` does
   NOT pin <body> in iOS in-app browsers (Telegram's WKWebView): the page
   still scrolls under the overlay and the dynamic top bar leaves an
   intermittent gap above the fixed panel. Pinning with position:fixed +
   a negative top offset (set inline from JS) anchors the overlay to the
   real visual top. */
body.lead-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* --- modal card --- */
.lead-modal {
  position: relative;
  width: 100%; max-width: 468px;
  max-height: calc(100dvh - 48px); overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  padding: 30px 30px 26px;
  transform: translateY(16px) scale(.985);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}
.lead-overlay.open .lead-modal { transform: none; }
.lead-modal::-webkit-scrollbar { width: 8px; }
.lead-modal::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 8px; }

.lead-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--hairline); background: rgba(255,255,255,0.03);
  color: var(--muted); cursor: pointer; transition: .18s; z-index: 1;
}
.lead-close:hover { background: rgba(255,255,255,0.08); color: var(--text); border-color: var(--hairline-2); }
.lead-close svg { width: 18px; height: 18px; }

/* --- header --- */
.lead-head { margin-bottom: 20px; padding-right: 30px; }
.lead-kick {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--coral-2); margin-bottom: 12px;
}
.lead-kick::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 10px var(--coral); }
.lead-head h3 { margin: 0 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; }
.lead-head p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }

/* --- form fields --- */
.lead-form { display: block; }
.lead-row { display: flex; gap: 12px; }
.lead-row .lead-field { flex: 1; }
.lead-field { margin-bottom: 14px; }
.lead-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.lead-field label .req-star { color: var(--coral-2); }
.lead-field input,
.lead-field select {
  width: 100%; height: 47px; padding: 0 14px;
  border-radius: 12px; background: var(--bg-2);
  border: 1px solid var(--hairline-2); color: var(--text);
  font-family: inherit; font-size: 15px; line-height: 47px;
  transition: border-color .18s, box-shadow .18s, background .18s;
  -webkit-appearance: none; appearance: none;
}
.lead-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E8E96' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.lead-field input::placeholder { color: var(--muted-2); }
.lead-field input:focus,
.lead-field select:focus {
  outline: none; border-color: var(--coral); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(142,37,228, 0.22);
}
.lead-field.err input,
.lead-field.err select { border-color: #E5484D; }
/* Фокус-ринг у ошибочного поля — красный, не фиолетовый */
.lead-field.err input:focus,
.lead-field.err select:focus { border-color: #E5484D; box-shadow: 0 0 0 3px rgba(229,72,77, 0.22); }
.lead-err { display: none; color: #F2696D; font-size: 12px; margin-top: 6px; }
.lead-field.err .lead-err { display: block; }

/* --- consent --- */
.lead-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; }
.lead-consent input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--coral); cursor: pointer; }
.lead-consent label { font-size: 12px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.lead-consent a { color: var(--coral-2); text-decoration: underline; text-underline-offset: 2px; }
.lead-consent.err label { color: #F2696D; }

.lead-form .btn { width: 100%; transition: transform .2s ease-out, box-shadow .2s; }
.lead-form .btn:active { transform: scale(.97); }
.lead-close:active { transform: scale(.94); }
.lead-form .btn[disabled] { opacity: .65; pointer-events: none; }
.lead-submit-err {
  margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px;
  background: rgba(242, 105, 109, .12); border: 1px solid rgba(242, 105, 109, .35);
  color: #F2696D; font-size: 12.5px; line-height: 1.4;
}
.lead-submit-err[hidden] { display: none; }
.lead-note { margin: 13px 0 0; text-align: center; font-size: 12px; color: var(--muted-2); }
.lead-note svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }

/* --- success state --- */
.lead-success { text-align: center; padding: 14px 6px 6px; }
.lead-success .ok-ic {
  width: 66px; height: 66px; margin: 4px auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--coral-grad);
  box-shadow: 0 14px 38px -12px rgba(142,37,228, 0.8);
  animation: okPop .3s ease-out both;
}
@keyframes okPop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.lead-success .ok-ic svg { width: 32px; height: 32px; color: #fff; }
.lead-success h3 { margin: 0 0 10px; font-size: 23px; font-weight: 800; letter-spacing: -0.02em; }
.lead-success p { margin: 0 auto 22px; max-width: 340px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.lead-success .btn { display: inline-flex; }

/* P1: 16px в полях на мобильных — иначе iOS зумит страницу при фокусе */
@media (max-width: 560px) {
  .lead-field input,
  .lead-field select { font-size: 16px; }
}
@media (max-width: 480px) {
  .lead-overlay { padding: 12px; }
  .lead-modal { padding: 26px 20px 22px; border-radius: var(--r-lg); max-height: calc(100dvh - 24px); overflow-y: auto; }
  .lead-row { flex-direction: column; gap: 0; }
  .lead-head h3 { font-size: 21px; }
}
@media (max-width: 400px) {
  .lead-modal { padding: 22px 16px 18px; }
  .lead-head h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lead-overlay, .lead-modal { transition: opacity .01s; }
  .lead-modal { transform: none; }
  .lead-success .ok-ic { animation: none; }
  .lead-form .btn, .lead-close { transition: none; }
  .lead-form .btn:active, .lead-close:active { transform: none; }
}

/* ============================================================
   v4 — scroll-driven flow draw · top progress bar
   ============================================================ */

/* --- top scroll-progress bar --- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #B26AF0, #8E25E4 50%, #6611B0);
  box-shadow: 0 0 12px rgba(142,37,228,0.65);
  will-change: transform; pointer-events: none;
}

/* --- "Один цикл": spine draws + nodes ignite as you scroll through --- */
.flow-fill {
  position: absolute; top: 24px; left: 16.6%; width: 66.8%; height: 2px; z-index: 1;
  border-radius: 2px; transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--coral), var(--coral-2));
  box-shadow: 0 0 14px 1px rgba(142,37,228,0.85);
  will-change: transform;
}
.stage-node.lit {
  color: #fff; border-color: var(--coral-2); background: var(--coral-grad);
  box-shadow: 0 0 0 7px var(--bg), 0 0 30px -2px rgba(142,37,228,0.95);
  transform: translateX(-50%) translateY(-2px) scale(1.06);
}
html.js .flow-anim .stage-card {
  opacity: 0; transform: translateY(26px);
  transition: opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}
html.js .flow-anim .stage.flow-lit .stage-card { opacity: 1; transform: translateY(0); }

@media (max-width: 820px) {
  .flow-fill { display: none; }
  html.js .flow-anim .stage-card { opacity: 1; transform: none; }
  /* node is static (not centered) on mobile — keep the lit lift but drop the -50% shift */
  .stage-node.lit { transform: translateY(-2px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .flow-fill { transform: scaleX(1); }
  html.js .flow-anim .stage-card { opacity: 1; transform: none; }
}

/* --- cursor-reactive: 3D-tilt targets (features + pricing) --- */
.tilt3d { transition: transform .22s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.tilt3d.tilting { transition: transform .08s linear; }
@media (hover: none), (prefers-reduced-motion: reduce) { .tilt3d { transition: none; } }

/* shared live-status dot (hero chat presence + «на смене» pill) */
.ldot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); flex: none; }

/* --- mobile refinements --- */
@media (max-width: 560px) {
  .scroll-progress { height: 2px; }
}
/* #launch на узких экранах: компактнее вертикальная рельса.
   База .ls-* живёт в 100-restructure-v10.css (поздний файл манифеста) —
   скоупим через #launch: ID-специфичность перебивает его классовые правила. */
@media (max-width: 400px) {
  #launch .ls-step { padding-left: 64px; }
  #launch .ls-node { width: 46px; height: 46px; }
  #launch .ls-body { font-size: 14px; }
}

/* ============================================================
   v6 — FAQ / objections accordion
   ============================================================ */
.faq { max-width: 820px; margin: clamp(36px, 4vw, 50px) auto 0; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item:first-child { border-top: 1px solid var(--hairline); }
.faq-q {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 18px;
  padding: 24px 6px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--text); text-align: left;
  transition: color .2s;
}
.faq-q:hover { color: var(--coral-2); }
.faq-q:focus-visible { outline: 2px solid var(--coral-2); outline-offset: -4px; border-radius: 10px; }
.faq-ic {
  margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--hairline-2); color: var(--muted);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), color .2s, border-color .2s, background .2s;
}
.faq-q:hover .faq-ic { color: var(--coral-2); border-color: rgba(142,37,228,0.4); }
.faq-ic svg { width: 16px; height: 16px; }
.faq-item.open .faq-ic { transform: rotate(180deg); color: #fff; background: var(--coral-grad); border-color: transparent; }
/* микро: иконка «поджимается» при нажатии, сохраняя разворот в открытом состоянии */
.faq-q:active .faq-ic { transform: scale(.9); }
.faq-item.open .faq-q:active .faq-ic { transform: rotate(180deg) scale(.9); }
/* плавный аккордеон на grid-rows (0fr → 1fr), без max-height-магии */
.faq-a {
  display: grid; grid-template-rows: 0fr;
  overflow: hidden; /* не даёт нижнему padding обёртки выглядывать в свёрнутом виде */
  transition: grid-template-rows .3s ease-out;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner {
  overflow: hidden; min-height: 0;
  padding: 0 6px; max-width: 700px; font-size: 15.5px; line-height: 1.62; color: var(--text-2);
}
/* нижний отступ ответа — только в раскрытом виде: как padding-bottom на прямом
   grid-элементе он «подпирает» 0fr-трек, и в свёрнутом FAQ выглядывает первая строка */
.faq-item.open .faq-a-inner { padding-bottom: 24px; }

@media (max-width: 560px) {
  .faq-q { font-size: 15.5px; padding: 20px 2px; gap: 12px; }
  .faq-a-inner { font-size: 15px; line-height: 1.55; }
  .faq-item.open .faq-a-inner { padding-bottom: 20px; }
}
@media (max-width: 400px) {
  .faq-q { font-size: 15px; gap: 10px; }
  .faq-ic { width: 26px; height: 26px; flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-ic { transition: none; }
}
/* ============================================================
   v7 — mobile fixes (hero scale, dashboard mock, terminal stack)
   ============================================================ */
@media (max-width: 640px) {
  /* The hero dashboard is a desktop-scale mock — at phone width its content
     clips on the right and the scroll-reveal leaves a tall empty box (~2.7
     screens). The product is shown in the features + journey below, so drop
     the mock on phones and keep the hero a clean one-screen. */
  .hero-shot-wrap { display: none; }
  .hero { padding-bottom: 40px; }
}
@media (max-width: 560px) {
  /* .h-display override removed — --fs-display (05-tokens) is a continuous
     clamp from 320px, no competing mobile font-size needed. */
  /* Terminal mock: stack instead of overflowing side-by-side. */
  .terminal-mock { flex-direction: column; }
  .terminal-mock .terminal { width: 100%; max-width: 240px; margin: 0 auto; }
  .terminal-mock .event-list { width: 100%; }
}

/* ============================================================
   v8 — ФОТ formula constructor
   ============================================================ */
.pay-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 26px; align-items: start; margin-top: 38px; }
.pay-build { background: var(--bg-1); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 22px; }
.pay-build-h { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--text-2); margin-bottom: 16px; }
.pay-build-ic { color: var(--coral-2); display: flex; }
.pay-formula-list { display: flex; flex-direction: column; gap: 8px; }
.pay-formula { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left; width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--hairline); cursor: pointer; transition: border-color .18s, background .18s, transform .18s; font-family: inherit; }
.pay-formula:hover, .pay-formula.active { border-color: rgba(142,37,228,0.5); background: var(--surface); transform: translateX(3px); }
.pf-name { font-size: 13px; font-weight: 600; color: var(--text); }
.pf-code { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pf-code b { color: var(--coral-2); font-weight: 600; }
.pay-fns { margin-top: 16px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pay-fns-l { color: var(--muted); }
.pay-fns span:not(.pay-fns-l) { font-family: var(--mono); font-size: 11px; color: var(--blue-soft); background: rgba(90,130,194,0.14); padding: 3px 8px; border-radius: 6px; }
.pay-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.pay-table-wrap { background: var(--bg-1); border: 1px solid var(--hairline-2); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.pay-table-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--hairline); }
.pay-table-t { font-size: 13px; font-weight: 700; color: var(--text-2); }
.pay-toggle { display: inline-flex; align-items: center; gap: 9px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--bg-2); border: 1px solid var(--hairline-2); border-radius: 99px; padding: 6px 14px 6px 7px; cursor: pointer; transition: color .18s, border-color .18s; white-space: nowrap; }
.pay-toggle .pay-tg { width: 30px; height: 18px; border-radius: 99px; background: var(--surface-2); position: relative; transition: background .2s; flex: none; }
.pay-toggle .pay-tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.pay-toggle.on { color: var(--text); border-color: rgba(142,37,228,0.4); }
.pay-toggle.on .pay-tg { background: var(--coral); }
.pay-toggle.on .pay-tg::after { transform: translateX(12px); background: #fff; }

.pay-scroll { overflow-x: auto; }
.pay-table { min-width: 560px; }
.pay-row { display: grid; grid-template-columns: var(--pay-cols, 1.6fr 0.55fr 0.9fr 0.85fr 0.85fr 0.85fr 0.9fr 1fr); align-items: center; padding: 11px 18px; border-top: 1px solid var(--hairline); font-size: 13px; }
.pay-row > span { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.pay-row .pay-c-emp { text-align: left; display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 600; }
.pay-row .pay-c-emp .av.sm { width: 26px; height: 26px; font-size: 9px; }
.pay-head { border-top: none; }
.pay-head > span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-2); }
.pay-c-staj { color: var(--green-soft) !important; }
.pay-c-premia { color: var(--coral-2) !important; }
.pay-c-ndfl { color: #F2696D !important; }
.pay-c-meal { color: var(--blue-soft) !important; }
.pay-c-total { font-weight: 800; color: var(--text) !important; }
.pay-foot { border-top: 2px solid rgba(142,37,228,0.4); background: rgba(142,37,228,0.05); }
.pay-foot .pay-c-emp { font-weight: 800; }
.pay-foot > span { color: var(--text-2); font-weight: 700; }
.pay-table.off-staj .pay-c-staj, .pay-table.off-premia .pay-c-premia, .pay-table.off-meal .pay-c-meal, .pay-table.off-ndfl .pay-c-ndfl { display: none; }
.pay-cols-hint { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pay-cols-hint b { color: var(--coral-2); font-weight: 700; }
.pf-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.pf-add { width: 20px; height: 20px; border-radius: 6px; flex: none; display: grid; place-items: center; border: 1px solid var(--hairline-2); position: relative; transition: background .2s, border-color .2s; }
.pf-add::before { content: ""; position: absolute; width: 9px; height: 1.6px; border-radius: 2px; background: var(--muted); }
.pf-add::after { content: ""; position: absolute; width: 1.6px; height: 9px; border-radius: 2px; background: var(--muted); transition: height .2s; }
.pay-formula.active .pf-add { background: var(--coral-grad); border-color: transparent; }
.pay-formula.active .pf-add::before { background: #fff; }
.pay-formula.active .pf-add::after { height: 0; }
.pay-trace { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-top: 1px solid var(--hairline); font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.pay-trace svg { color: var(--coral-2); flex: none; }

@media (max-width: 920px) {
  .pay-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   v9 — mobile app showcase
   ============================================================ */
.app-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; margin-top: 36px; }
.app-phones { display: flex; align-items: flex-start; justify-content: center; }
.app-phone { position: relative; }
.app-phone-1 { z-index: 2; transform: translate3d(0, var(--ppar1, 0px), 0); }
.app-phone-2 { z-index: 1; margin-left: -58px; margin-top: 30px; transform: rotate(2.5deg) translate3d(0, var(--ppar2, 0px), 0); }

/* #app scope — base .phone/.phone-screen live in 40-sections.css; here only
   section-local fixes: контент не клипается (высота может расти), но экран
   держит телефонную пропорцию через min-height, остаток пространства уходит
   под home-индикатор у нижней кромки — как у настоящего телефона */
#app .phone-screen { display: flex; flex-direction: column; height: auto; min-height: 482px; padding-bottom: 10px; }
#app .phone-screen::after {
  content: ""; display: block; flex: none;
  width: 88px; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,0.16);
  margin: auto auto 2px; /* margin-top:auto прижимает к низу экрана */
}
#app .ph-shift-card .tm { font-size: clamp(20px, 6.2vw, 26px); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.02em; }
#app .ph-quick { margin: 12px 16px 14px; gap: 8px; }

/* phone 1 — home */
.ph-on { display: inline-flex; align-items: center; gap: 7px; margin: 0 18px; padding: 5px 11px; border-radius: 99px; font-size: 11px; font-weight: 700; color: var(--green-soft); background: rgba(63,177,78,0.14); }
.ph-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 18px 0; }
.ph-qa { display: flex; align-items: center; gap: 9px; padding: 11px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--hairline); }
.ph-qa-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.ph-qa b { font-size: 16px; font-weight: 800; }
.ph-qa div span { display: block; font-size: 10.5px; color: var(--muted); }

/* phone 2 — schedule */
.ph-seg { display: flex; gap: 4px; margin: 30px 18px 0; padding: 3px; border-radius: 11px; background: var(--bg-2); }
.ph-seg span { flex: 1; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); padding: 7px; border-radius: 8px; }
.ph-seg span.on { background: var(--surface-2); color: var(--text); }
.ph-sched-h { margin: 16px 18px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); }
.ph-sl { padding: 0 14px; display: flex; flex-direction: column; }
.ph-srow { display: flex; align-items: center; gap: 11px; padding: 11px 4px; border-top: 1px solid var(--hairline); }
.ph-srow:first-child { border-top: none; }
.ph-sd { width: 30px; flex: none; text-align: center; font-size: 10px; color: var(--muted); line-height: 1.1; }
.ph-sd b { display: block; font-size: 15px; color: var(--text); font-weight: 700; }
.ph-sx { flex: 1; min-width: 0; }
.ph-snm { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.ph-stm { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.ph-srow.swap .ph-snm { color: var(--coral-2); }
.ph-sb { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--surface-2); color: var(--muted); flex: none; }
.ph-sb.green { background: rgba(63,177,78,0.16); color: var(--green-soft); }
.ph-sb.coral { background: rgba(142,37,228,0.16); color: var(--coral-2); }

/* info column */
.app-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.app-feats li { display: flex; gap: 14px; align-items: flex-start; }
/* no chip-box — icon sits inline over a soft accent glow */
.af-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: var(--blue-soft);
  background: radial-gradient(closest-side, rgba(90,130,194,0.22), transparent 76%); }
.af-ic svg { width: 22px; height: 22px; }
.app-feats li > div b { display: block; font-size: 15px; font-weight: 700; }
.app-feats li > div span { display: block; font-size: 13.5px; color: var(--text-2); margin-top: 2px; line-height: 1.45; }
.app-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.app-store { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text); background: rgba(255,255,255,0.05); border: 0; border-radius: 10px; padding: 9px 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); transition: background .2s, transform .2s ease-out; }
.app-store:hover { background: rgba(255,255,255,0.09); transform: translateY(-1px); }
.app-store:active { transform: scale(.97); }
.app-native { font-size: 12.5px; color: var(--muted); }

@media (max-width: 920px) {
  .app-grid { grid-template-columns: 1fr; gap: 28px; }
  .app-phones { order: 2; }
}
@media (max-width: 560px) {
  .app-phone-2 { display: none; }
  .app-phone-1 { margin: 0 auto; }
  #app .phone { width: min(264px, 80vw); }
  .app-grid { gap: 22px; }
  .app-feats li > div span { font-size: 13.5px; line-height: 1.5; }
}
@media (max-width: 400px) {
  #app .ph-shift-card { margin: 14px 14px 0; padding: 14px; }
  .app-badges { gap: 8px; }
  .app-store { padding: 8px 12px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-store { transition: none; }
  .app-store:hover, .app-store:active { transform: none; }
}

/* ============================================================
   v10 — restructure: hero lede · all-in-one strip · launch
          timeline · comparison polish
   ============================================================ */

/* hero lede sits between the headline and the CTA */
.hero-lede { max-width: 624px; margin-top: 22px; }

/* --- all-in-one capability strip (post-hero "everything together") --- */
.aio-section { text-align: center; }
.aio-h {
  max-width: 760px; margin: 0 auto; line-height: 1.45; letter-spacing: -0.01em;
  font-size: clamp(16px, 2vw, 20px); font-weight: 600; color: var(--text-2);
}
.aio-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.aio-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 100px;
  font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--hairline);
  transition: border-color .2s, background .2s, transform .2s, color .2s;
}
.aio-pill svg { width: 15px; height: 15px; color: var(--green); flex-shrink: 0; }
.aio-pill:hover { border-color: rgba(142,37,228,0.4); background: var(--surface); color: var(--text); transform: translateY(-2px); }

/* --- launch / onboarding timeline — borderless spine (no card boxes) ---
   Steps hang off a single lit rail; temperature arc indigo→purple→green.
   Keeps .launch (JS hook #launch .launch) + .launch-line (--launch-p fill). */
.launch {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 46px; margin-top: 60px;
}
/* the spine: ambient rail + scroll-driven fill (--launch-p set by 55-onboarding-spine.js) */
.launch-line {
  position: absolute; top: 26px; left: 16.6%; right: 16.6%; height: 2px;
  z-index: 0; border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(102,17,176,0.10), rgba(102,17,176,0.42) 12%,
    rgba(142,37,228,0.46) 50%,
    rgba(63,177,78,0.42) 88%, rgba(63,177,78,0.10));
}
.launch-line::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, #6611B0 0%, #8E25E4 52%, #3FB14E 100%);
  box-shadow: 0 0 12px rgba(142,37,228,0.55);
  transform: scaleX(var(--launch-p, 0)); transform-origin: left;
  transition: transform .15s linear;
}

/* a step is just content threaded on the rail — no container, no border */
.ls-step { position: relative; z-index: 1; padding-top: 66px; transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.ls-step::before {                       /* faint per-column ambient, tied to the node colour */
  content: ""; position: absolute; left: 50%; top: -34px; width: 116%; height: 250px;
  transform: translateX(-50%); z-index: -1; pointer-events: none;
  /* gradient centre sits below the box top and the colour fully fades before the top
     edge — otherwise the box's flat top cut the haze into a hard horizontal line above
     the node. Still pools the light downward through the column. */
  background: radial-gradient(58% 52% at 50% 34%, rgba(var(--ac), var(--glow, .06)), transparent 60%);
}
.ls-head { display: flex; flex-direction: column; align-items: center; }

/* node sits ON the spine; brightens as the scroll fill reaches it (.is-on via JS).
   No opaque `0 0 0 7px var(--bg)` halo ring: on the section's ambient backdrop that
   near-black ring read as a dark moat that clipped the node's own glow. The node's
   opaque circle already masks the rail behind it, so the spine runs flush to the bead. */
.ls-node {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-1); color: rgb(var(--act));
  box-shadow: inset 0 0 0 1.5px rgba(var(--ac), 0.30);
  transition: box-shadow .45s cubic-bezier(.2,.7,.3,1), color .45s, background .45s;
}
.ls-node svg { width: 22px; height: 22px; }
.ls-node--dot.is-on  { box-shadow: inset 0 0 0 1.5px rgba(var(--ac), 0.65), 0 10px 26px -14px rgba(var(--ac), 0.75); }
.ls-node--live.is-on { background: var(--coral-grad); color: #fff; box-shadow: 0 0 18px rgba(142,37,228,0.45), 0 12px 30px -10px rgba(142,37,228,0.8); }
.ls-node--win.is-on  { background: linear-gradient(135deg,#8DD485 0%,#3FB14E 60%,#2C8C3A 100%); color: #06120A; box-shadow: 0 0 22px rgba(63,177,78,0.5), 0 16px 40px -12px rgba(63,177,78,0.85); }

.ls-kick {
  margin-top: 16px; font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase; color: rgb(var(--act));
  font-variant-numeric: tabular-nums;
}
.ls-title { margin: 13px 0 0; font-size: 19px; text-align: center; color: var(--text); }
.ls-body  { margin: 10px auto 0; max-width: 28ch; font-size: 14.5px; line-height: 1.55; color: var(--text-2); text-align: center; }

/* proof: ONE pill primitive at three escalating fills */
.ls-proof { display: flex; justify-content: center; margin-top: 18px; }
.ls-pill {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2px;
  color: var(--text-2); font-variant-numeric: tabular-nums;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(var(--ac), 0.06); box-shadow: inset 0 0 0 1px rgba(var(--ac), 0.18);
}
.ls-pill b { color: rgb(var(--act)); font-weight: 700; }
.ls-pill--live { background: rgba(var(--ac), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--ac), 0.24); }
.ls-live { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--act)); box-shadow: 0 0 0 4px rgba(var(--ac), 0.16), 0 0 9px rgba(var(--ac), 0.65); }
.ls-pill--win { color: var(--text); background: rgba(var(--ac), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--ac), 0.32); }
.ls-pill--win svg { width: 14px; height: 14px; color: rgb(var(--act)); }

.ls-step:hover { transform: translateY(-3px); }
.ls-step:hover .ls-node { box-shadow: 0 0 24px rgba(var(--ac), 0.55), 0 16px 42px -12px rgba(var(--ac), 0.9); }

.launch-cta { display: flex; justify-content: center; margin-top: 64px; }

/* mobile: spine becomes a vertical rail, steps stack left-aligned */
@media (max-width: 820px) {
  .launch { grid-template-columns: 1fr; gap: 40px; margin-top: 44px; }
  .launch-line { display: none; }
  .launch::before {
    content: ""; position: absolute; top: 26px; bottom: 30px; left: 26px; width: 2px;
    border-radius: 2px; z-index: 0;
    background: linear-gradient(180deg, rgba(102,17,176,0.5), rgba(142,37,228,0.5) 52%, rgba(63,177,78,0.45));
  }
  .ls-step { padding: 0 0 0 72px; }
  .ls-step::before { left: 26px; top: -8px; width: 240px; height: 150px; transform: none; background: radial-gradient(70% 70% at 0% 20%, rgba(var(--ac), var(--glow, .06)), transparent 62%); }
  .ls-head { align-items: flex-start; }
  .ls-node { left: 0; top: 0; transform: none; }
  .ls-kick { margin-top: 17px; }
  .ls-title, .ls-body { text-align: left; }
  .ls-body { margin-left: 0; max-width: 44ch; }
  .ls-proof { justify-content: flex-start; }
}

/* --- comparison "как было / как стало" --- */
.cmp-c.us { gap: 8px; color: var(--text); }
.cmp-c.us svg { width: 17px; height: 17px; flex-shrink: 0; }
.cmp-c.feat { font-weight: 600; }

@media (max-width: 560px) {
  .aio-pill { font-size: 13px; padding: 8px 13px; }
  .cmp-row.cmp-head { display: none; }
  .cmp-row { grid-template-columns: 1fr; padding: 6px 0; border-top: none; }
  .cmp-row + .cmp-row { border-top: 1px solid var(--hairline); padding-top: 14px; }
  .cmp-c { padding: 3px 16px; }
  .cmp-c.feat { font-weight: 700; color: var(--text); }
  .cmp-c.them, .cmp-c.us { justify-content: flex-start; border-left: none; background: none; }
  .cmp-c.them { color: var(--muted); }
  .cmp-c.them::before { content: "Было:"; margin-right: 6px; color: var(--muted); font-weight: 600; }
  .cmp-c.us::before { content: "StaffKit:"; margin-right: 6px; color: var(--coral-2); font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
  .aio-pill, .ls-step, .ls-node, .launch-line::after { transition: none; }
  .ls-step:hover { transform: none; }
}

/* hero mock — honest "demo data" tag */
.shot-demo { font-size: 10.5px; color: var(--muted-2); border: 1px solid var(--hairline); padding: 2px 8px; border-radius: 6px; font-family: var(--mono); white-space: nowrap; }
@media (max-width: 560px) { .shot-demo { display: none; } }
/* ============================================================
   v11 — ambient backdrop · texture · refined dividers · polish
   ============================================================ */

/* Ambient glow painted as the body's own fixed background — colored depth
   behind every section instead of flat black. Robust: no transparency,
   no negative z-index. Fixed to the viewport so it drifts under content. */
body {
  background:
    radial-gradient(58vw 52vw at 4% 2%,   rgba(142,37,228,0.14), transparent 60%),
    radial-gradient(48vw 46vw at 104% 30%, rgba(102,17,176,0.11),  transparent 55%),
    radial-gradient(62vw 56vw at 30% 104%, rgba(90,130,194,0.09),  transparent 60%),
    radial-gradient(40vw 40vw at 88% 88%,  rgba(142,37,228,0.08),  transparent 60%),
    var(--bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* subtle film grain (premium texture over the content) */
.bg-grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* refined section dividers: gradient hairline with a brand-tinted core */
.section-line { border-top: none; }
.section-line::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--hairline-2) 16%, rgba(142,37,228,0.30) 50%, var(--hairline-2) 84%, transparent);
}

/* nav links: animated gradient underline — только прямые ссылки бара,
   чтобы не наследовалось ссылками внутри мега-панели */
.nav-links > a { position: relative; }
.nav-links > a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--coral-grad); transform: scaleX(0); transform-origin: left;
  transition: transform .26s cubic-bezier(.2,.7,.3,1);
}
.nav-links > a:hover::after { transform: scaleX(1); }

/* footer links: gentle slide on hover */
.footer-col a { transition: color .15s, transform .15s ease; }
.footer-col a:hover { transform: translateX(3px); }

/* brand mark: soft ambient glow on hover */
.brand-mark { transition: box-shadow .3s, transform .3s; }
.brand:hover .brand-mark { transform: translateY(-1px) rotate(-3deg); box-shadow: 0 8px 22px -6px rgba(142,37,228,0.9); }

@media (max-width: 560px) {
  .bg-grain { display: none; }
  body { background-attachment: scroll; }
}

/* feature sections unified to standalone (eyebrow + h2) */
.feat-text .h2 { margin: 14px 0 0; }


/* ============================================================
   v12 — bold hero: roster auto-assembly + cursor spotlight
   ============================================================ */
/* ① shift-grid that assembles behind the headline */
.hero-roster {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  display: grid; grid-template-columns: repeat(var(--cols, 14), 1fr); gap: 9px;
  padding: 92px 3vw 0; opacity: .5;
  -webkit-mask-image: radial-gradient(125% 80% at 50% 4%, #000 10%, rgba(0,0,0,0.45) 38%, transparent 66%);
          mask-image: radial-gradient(125% 80% at 50% 4%, #000 10%, rgba(0,0,0,0.45) 38%, transparent 66%);
}
.rcell { aspect-ratio: 16 / 9; border-radius: 6px; border: 1px solid rgba(255,255,255,0.035); }
.rcell.shift { border-color: transparent; }
.rcell.shift.p { background: rgba(142,37,228,0.24); box-shadow: 0 0 22px -6px rgba(142,37,228,0.5); }
.rcell.shift.g { background: rgba(63,177,78,0.18); }
.rcell.shift.b { background: rgba(90,130,194,0.22); }
.rcell.shift.o { background: rgba(255,149,0,0.16); }
.hero-roster.play .rcell.shift {
  opacity: 0; transform: scale(.35);
  animation: rPop .55s var(--d, 0ms) forwards cubic-bezier(.2,.85,.3,1.25);
}
@keyframes rPop { to { opacity: 1; transform: none; } }

/* ② cursor spotlight */
.hero-spot {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 28%), rgba(142,37,228,0.18), rgba(142,37,228,0) 60%);
  transition: opacity .45s ease;
}
.hero.spot-on .hero-spot { opacity: 1; }

/* на телефоне сетка не прячется, а становится тихим фоном под заголовком:
   приглушена, сборка быстрее (задержки обрезаны — вся волна укладывается в ~1.1s) */
@media (max-width: 640px) {
  .hero-roster {
    opacity: .32; padding: 76px 4vw 0; gap: 7px;
    -webkit-mask-image: radial-gradient(160% 62% at 50% 0%, #000 6%, rgba(0,0,0,.42) 30%, transparent 56%);
            mask-image: radial-gradient(160% 62% at 50% 0%, #000 6%, rgba(0,0,0,.42) 30%, transparent 56%);
  }
  .rcell { border-radius: 5px; border-color: rgba(255,255,255,.03); }
  .hero-roster.play .rcell.shift { animation-duration: .45s; animation-delay: min(var(--d, 0ms), 700ms); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-roster.play .rcell.shift { animation: none; opacity: 1; transform: none; }
}
/* ============================================================
   v14 — capabilities card grid (overview) + FLIP detail overlay
   ============================================================ */
.cap-board {
  margin-top: 44px; padding: clamp(18px, 2.6vw, 34px); border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0)), var(--bg-2);
  box-shadow: var(--shadow-card);
}
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cap-card {
  position: relative; display: flex; flex-direction: column; gap: 11px; padding: 24px;
  text-align: left; cursor: pointer; font-family: inherit; color: var(--text);
  border-radius: var(--r-lg); border: 1px solid var(--hairline); background: var(--bg-1); overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, background .25s, box-shadow .25s;
}
.cap-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 78% at 50% -18%, rgba(var(--ac),0.20), transparent 70%); transition: opacity .3s;
}
.cap-card:hover { transform: translateY(-5px); border-color: rgba(var(--ac),0.5); background: var(--surface); box-shadow: 0 26px 52px -26px rgba(var(--ac),0.55); }
.cap-card:hover::before { opacity: 1; }
.cap-card:focus-visible { outline: 2px solid rgba(var(--ac),0.75); outline-offset: 3px; }
.cap-card:active { transform: translateY(-2px) scale(.99); }
.cap-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: rgb(var(--ac)); background: rgba(var(--ac),0.13); position: relative; }
.cap-ic svg { width: 23px; height: 23px; }
.cap-t { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; position: relative; }
.cap-d { font-size: 14px; color: var(--text-2); line-height: 1.5; flex: 1; position: relative; }
.cap-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: rgb(var(--ac)); position: relative; }
.cap-more svg { width: 15px; height: 15px; transition: transform .25s; }
.cap-card:hover .cap-more svg { transform: translateX(4px); }
@media (max-width: 900px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cap-grid { grid-template-columns: 1fr; } }

/* --- FLIP detail overlay --- */
.feat-detail { position: fixed; inset: 0; z-index: 200; }
.feat-detail[hidden] { display: none; }
.fd-scrim { position: absolute; inset: 0; background: rgba(4,4,6,0.72); backdrop-filter: blur(9px) saturate(140%); -webkit-backdrop-filter: blur(9px) saturate(140%); opacity: 0; transition: opacity .42s ease; }
.feat-detail.open .fd-scrim { opacity: 1; }
.fd-panel {
  position: absolute; inset: clamp(0px, 4vw, 56px); overflow: hidden; transform-origin: 0 0; will-change: transform;
  border-radius: var(--r-xl); border: 1px solid var(--hairline-2); box-shadow: var(--shadow-pop);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(var(--fd-accent),0.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)), var(--bg-1);
}
.fd-close { position: absolute; top: 20px; left: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 16px 0 11px; border-radius: 11px; border: 1px solid var(--hairline-2);
  background: rgba(255,255,255,0.04); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .2s, border-color .2s, transform .15s ease-out; }
.fd-close:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.22); }
.fd-close:active { transform: scale(.96); }
.fd-close svg { width: 18px; height: 18px; }
.fd-inner { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 24px; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.feat-detail.shown .fd-inner { opacity: 1; transform: none; }
.fd-head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 26px; }
.fd-ic { width: 66px; height: 66px; border-radius: 19px; display: grid; place-items: center; color: rgb(var(--fd-accent)); background: rgba(var(--fd-accent),0.15); box-shadow: 0 16px 40px -16px rgba(var(--fd-accent),0.7); }
.fd-ic svg { width: 33px; height: 33px; }
.fd-title { font-size: clamp(28px, 4vw, 46px); font-weight: 800; letter-spacing: -0.025em; }
.fd-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 420px; color: var(--muted); }
.fd-empty svg { width: 40px; height: 40px; color: rgba(var(--fd-accent),0.7); }
.fd-empty p { font-size: 15px; line-height: 1.55; }
@media (max-width: 560px) {
  .fd-panel { inset: 0; border-radius: 0; border: none; }
  .fd-inner { padding: 88px 20px 40px; }
  /* кнопка «Назад» не залезает под вырез/скругления экрана */
  .fd-close { top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); }
}
@media (prefers-reduced-motion: reduce) {
  .cap-card { transition: none; }
  .fd-panel, .fd-inner { transition: opacity .2s ease !important; }
  .fd-close { transition: background .2s, border-color .2s; }
}


/* ============================================================
   v15 — existing feature blocks packaged as cards (подложка)
   ============================================================ */
/* borderless raised surface — defined by a lit top edge + soft depth, NOT a 1px outline */
.feat-card {
  position: relative; padding: clamp(24px, 3.4vw, 52px); border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 42%), var(--bg-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 42px 100px -55px rgba(0,0,0,0.95);
  transition: box-shadow .28s, transform .28s;
}
.feat-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 46px 110px -48px rgba(var(--ac),0.42), 0 42px 100px -55px rgba(0,0,0,0.95); }
.feat-card-more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: clamp(22px, 3vw, 34px);
  height: 42px; padding: 0 20px; border-radius: 99px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(var(--ac),0.4); background: rgba(var(--ac),0.10); color: rgb(var(--ac));
  font-family: inherit; font-size: 14px; font-weight: 600;
  transition: background .2s, border-color .2s, transform .2s;
}
.feat-card-more svg { width: 15px; height: 15px; transition: transform .2s; }
.feat-card-more:hover { background: rgba(var(--ac),0.18); border-color: rgba(var(--ac),0.65); }
.feat-card-more:hover svg { transform: translateX(4px); }
.feat-card-more:focus-visible { outline: 2px solid rgba(var(--ac),0.75); outline-offset: 3px; }
.feat-card-more:active { transform: scale(.97); }

/* occasional attention nudge — applied from landing.js at random, sparse intervals */
@keyframes feat-more-nudge {
  0%   { transform: translateY(0);    box-shadow: 0 0 0 0  rgba(var(--ac),0); }
  12%  { transform: translateY(-3px); box-shadow: 0 0 0 5px  rgba(var(--ac),0.16); }
  26%  { transform: translateY(0);    box-shadow: 0 0 0 12px rgba(var(--ac),0); }
  40%  { transform: translateY(-2px); }
  54%  { transform: translateY(0); }
  100% { transform: translateY(0);    box-shadow: 0 0 0 0  rgba(var(--ac),0); }
}
@keyframes feat-more-nudge-arrow {
  0%, 100% { transform: translateX(0); }
  18%      { transform: translateX(5px); }
  36%      { transform: translateX(0); }
  52%      { transform: translateX(3px); }
  68%      { transform: translateX(0); }
}
.feat-card-more.nudge {
  animation: feat-more-nudge 1.5s cubic-bezier(.34,1.4,.64,1) both;
  background: rgba(var(--ac),0.17); border-color: rgba(var(--ac),0.6);
}
.feat-card-more.nudge svg { animation: feat-more-nudge-arrow 1.5s ease-in-out both; }
@media (prefers-reduced-motion: reduce) {
  .feat-card-more.nudge, .feat-card-more.nudge svg { animation: none; }
}

/* tighter rhythm + drop the line divider for card sections */
.section:has(> .wrap > .feat-card) { padding-top: clamp(18px, 2.6vw, 38px); padding-bottom: clamp(18px, 2.6vw, 38px); }
.section-line:has(> .wrap > .feat-card)::before { display: none; }
/* the last feature block flows straight into the single-card app section, so
   drop its big block padding on that side — otherwise the app card floats
   after a ~96px void while the cards above it sit ~38px apart */
.feat-block:has(+ #app) { padding-bottom: clamp(18px, 2.6vw, 38px); }
@media (prefers-reduced-motion: reduce) { .feat-card, .feat-card-more { transition: none; } }

/* hide demo-board scrollbars (keep horizontal scroll, drop the white bar) */
.auto-board, .pay-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.auto-board::-webkit-scrollbar, .pay-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* easter egg — barely-there, glows on hover */
.egg { font-family: var(--mono); font-size: 11px; letter-spacing: 3px; color: var(--text); opacity: .022; cursor: default; user-select: none; transition: opacity .45s ease, color .45s ease, text-shadow .45s ease, letter-spacing .45s ease; }
.egg:hover { opacity: .92; color: var(--coral-2); letter-spacing: 5px; text-shadow: 0 0 16px rgba(142,37,228,0.85); }
@media (max-width: 640px) { .egg { display: none; } }

/* узкие экраны: кнопка «подробнее» во всю ширину карточки */
@media (max-width: 560px) {
  .feat-card-more { width: 100%; justify-content: center; height: 46px; }
}


/* ============================================================
   v16 — feature BLOCKS (3 grouped stages) + new card animations
   ============================================================ */

/* --- block header + stacked cards --- */
.feat-block { position: relative; padding: clamp(48px, 7vw, 96px) 0; }
.feat-block-head { display: flex; gap: clamp(16px, 2.4vw, 26px); align-items: flex-start; max-width: 880px; margin-bottom: clamp(28px, 4vw, 50px); }
.fbh-num {
  flex-shrink: 0; font-family: var(--mono); font-weight: 700; line-height: 1;
  font-size: clamp(18px, 2.1vw, 26px);
  width: clamp(50px, 5.6vw, 64px); height: clamp(50px, 5.6vw, 64px);
  display: grid; place-items: center; border-radius: 17px; color: #fff;
  background: var(--coral-grad); box-shadow: 0 16px 38px -18px rgba(142,37,228,0.9);
}
.fbh-tx { min-width: 0; }
.fbh-tx .h2 { margin: 2px 0 0; }
.fbh-tx .lede { margin: 13px 0 0; max-width: 620px; }
.feat-stack { display: flex; flex-direction: column; gap: clamp(20px, 2.8vw, 38px); }
@media (max-width: 560px) { .feat-block-head { gap: 13px; } .fbh-num { border-radius: 14px; } }

/* ============================================================
   ANIM · Обмен сменами (request -> approve loop)
   ============================================================ */
.swap-demo { display: flex; flex-direction: column; gap: 15px; min-height: 268px; justify-content: center; }
.swap-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.swap-st { position: relative; display: inline-grid; }
.swap-st .sst { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid var(--hairline); }
.sst .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sst-wait { background: rgba(255,149,0,0.13); color: #FFB857; border-color: rgba(255,149,0,0.28); animation: sstWait 6s ease-in-out infinite; }
.sst-ok { background: rgba(63,177,78,0.14); color: var(--green-soft); border-color: rgba(63,177,78,0.30); animation: sstOk 6s ease-in-out infinite; }
.swap-sub { font-size: 12px; color: var(--muted); font-family: var(--mono); white-space: nowrap; }
.swap-flow { display: grid; gap: 12px; background: var(--bg-1); border: 1px solid var(--hairline); border-radius: 16px; padding: 16px; }
.swap-emp { display: flex; align-items: center; gap: 11px; }
.swap-emp .se-nm { font-size: 13.5px; font-weight: 700; }
.swap-emp .se-rl { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.swap-mid { display: flex; align-items: center; gap: 12px; padding-left: 41px; }
.swap-card { flex: 1; border: 1px solid rgba(142,37,228,0.34); background: rgba(142,37,228,0.08); border-radius: 11px; padding: 9px 13px; animation: swapCard 6s ease-in-out infinite; }
.swc-nm { font-size: 12.5px; font-weight: 700; color: var(--purple-soft); }
.swc-tm { font-size: 11px; color: var(--muted); font-family: var(--mono); margin-top: 2px; }
.swap-arrow { width: 22px; height: 22px; color: var(--purple-soft); flex-shrink: 0; animation: swapArrow 6s ease-in-out infinite; }
.swap-approve { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 13px; background: rgba(63,177,78,0.08); border: 1px solid rgba(63,177,78,0.26); animation: swapAppr 6s ease-in-out infinite both; }
.sa-ic { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--green); }
.sa-ic svg { width: 15px; height: 15px; }
.sa-tx { font-size: 12.5px; color: var(--text-2); }
.sa-tx b { color: var(--text); }
@keyframes sstWait { 0%, 50% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes sstOk { 0%, 52% { opacity: 0; } 62%, 100% { opacity: 1; } }
@keyframes swapCard { 0%, 30%, 62%, 100% { transform: translateX(0); box-shadow: none; } 46% { transform: translateX(7px); box-shadow: 0 0 0 3px rgba(142,37,228,0.18); } }
@keyframes swapArrow { 0%, 30%, 62%, 100% { opacity: .45; transform: translateX(0); } 46% { opacity: 1; transform: translateX(5px); } }
@keyframes swapAppr { 0%, 52% { opacity: 0; transform: translateY(10px); } 64%, 100% { opacity: 1; transform: translateY(0); } }

/* ============================================================
   ANIM · Задачи (checklist progressively completes)
   ============================================================ */
.task-demo { display: flex; flex-direction: column; gap: 13px; min-height: 268px; justify-content: center; }
.task-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.task-prog { font-size: 12px; color: var(--muted); white-space: nowrap; }
.task-prog b { color: var(--green-soft); font-variant-numeric: tabular-nums; }
.task-bar { height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.task-fill { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #3FB14E, #5BD46B); animation: taskFill 6s ease-in-out infinite; }
.task-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.task-list li { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--hairline); }
.task-box { width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center; border: 1.5px solid var(--hairline-2); color: #fff; }
.task-box svg { width: 15px; height: 15px; }
.task-tx { font-size: 13px; color: var(--text-2); }
.task-list li.tpend .task-box { color: #FFB857; border-color: rgba(255,149,0,0.42); }
.task-list li.tpend .task-tx { color: var(--muted); }
.task-list li.tdone .task-box { animation: taskBox 6s ease-in-out infinite both; animation-delay: calc(var(--ti) * 0.85s); }
.task-list li.tdone .tck { stroke-dasharray: 26; stroke-dashoffset: 26; animation: taskCheck 6s ease-in-out infinite both; animation-delay: calc(var(--ti) * 0.85s); }
.task-list li.tdone .task-tx { animation: taskTx 6s ease-in-out infinite both; animation-delay: calc(var(--ti) * 0.85s); }
@keyframes taskBox { 0%, 9% { background: transparent; border-color: var(--hairline-2); transform: scale(1); } 15% { transform: scale(1.14); } 22%, 100% { background: var(--green); border-color: var(--green); transform: scale(1); } }
@keyframes taskCheck { 0%, 11% { stroke-dashoffset: 26; } 26%, 100% { stroke-dashoffset: 0; } }
@keyframes taskTx { 0%, 13% { color: var(--text-2); } 26%, 100% { color: var(--text); } }
@keyframes taskFill { 0%, 5% { width: 0; } 58%, 100% { width: 75%; } }

/* ============================================================
   ANIM · Чаты (messages stream in + typing indicator)
   ============================================================ */
.chat-demo { display: flex; flex-direction: column; gap: 13px; min-height: 268px; }
.chat-h { display: flex; align-items: center; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid var(--hairline); }
.chat-h .ch-x { flex: 1; min-width: 0; }
.chat-h .ch-t { font-size: 13px; font-weight: 700; }
.chat-h .ch-s { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ch-live { margin-left: auto; }
.chat-body { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.cmsg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; animation: cmsgIn 7s ease-in-out infinite both; animation-delay: calc(var(--ci) * 0.8s); }
.cmsg.out { align-self: flex-end; flex-direction: row-reverse; }
.av.xs { width: 24px; height: 24px; font-size: 9px; }
.cb { padding: 9px 12px; border-radius: 14px; border-bottom-left-radius: 5px; font-size: 12.5px; line-height: 1.42; color: var(--text-2); background: var(--surface); border: 1px solid var(--hairline); }
.cmsg.in .cb b { display: block; font-size: 11px; font-weight: 700; color: var(--purple-soft); margin-bottom: 3px; }
.cmsg.out .cb { background: rgba(142,37,228,0.16); border-color: rgba(142,37,228,0.30); color: var(--text); border-bottom-left-radius: 14px; border-bottom-right-radius: 5px; }
.cb-typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 13px; }
.cb-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: chatTyped 1.2s ease-in-out infinite; }
.cb-typing i:nth-child(2) { animation-delay: .18s; }
.cb-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes chatTyped { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes cmsgIn { 0% { opacity: 0; transform: translateY(10px); } 9% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; transform: translateY(0); } }

/* ============================================================
   ANIM · Автоперенос (packet travels the pipeline, nodes light up)
   ============================================================ */
.pipe-demo { display: flex; flex-direction: column; gap: 16px; min-height: 268px; justify-content: center; }
.pipe-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pipe-chip { background: rgba(102,17,176,0.14); color: #A9B0FF; border-color: rgba(102,17,176,0.32); }
.pipe-sub { font-size: 12px; color: var(--green-soft); font-weight: 700; white-space: nowrap; }
.pipe { position: relative; display: flex; flex-direction: column; gap: 13px; }
.pipe-rail { position: absolute; left: 21px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--surface-2); }
.pipe-pkt { position: absolute; left: -4px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--coral-deep); box-shadow: 0 0 14px 2px rgba(102,17,176,0.9); animation: pipePkt 4.4s cubic-bezier(.45,.05,.55,.95) infinite; }
.pnode { position: relative; display: flex; align-items: center; gap: 13px; padding-left: 48px; min-height: 44px; z-index: 1; }
/* Each node lights as the packet passes it, then ALL reset together at the end
   of the 4.4s cycle. Per-node keyframes (not animation-delay) keep the reset
   synchronized — a positive delay only offsets the first loop, which let a lower
   node glow while an upper one was still dark. */
.pn-dot { position: absolute; left: 15px; top: 50%; margin-top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-1); border: 2px solid var(--surface-2); z-index: 2; animation: pnDot0 4.4s ease-in-out infinite; }
.pn-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center; color: var(--muted); background: var(--bg-1); border: 1px solid var(--hairline); animation: pnIc0 4.4s ease-in-out infinite; }
.pipe .pnode:nth-of-type(2) .pn-dot { animation-name: pnDot1; }
.pipe .pnode:nth-of-type(2) .pn-ic  { animation-name: pnIc1; }
.pipe .pnode:nth-of-type(3) .pn-dot { animation-name: pnDot2; }
.pipe .pnode:nth-of-type(3) .pn-ic  { animation-name: pnIc2; }
.pipe .pnode:nth-of-type(4) .pn-dot { animation-name: pnDot3; }
.pipe .pnode:nth-of-type(4) .pn-ic  { animation-name: pnIc3; }
.pn-ic svg { width: 19px; height: 19px; }
.pn-t { font-size: 13.5px; font-weight: 700; }
.pn-s { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
@keyframes pipePkt { 0% { top: 0; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
/* off = dark, on = green. Each node's "on" window starts when the packet reaches
   it (~12% / 37% / 62% / 87% down the rail) and every node switches off together
   at 99% so the next packet starts from a clean, all-dark pipe. */
@keyframes pnDot0 { 0%,5% { background: var(--bg-1); border-color: var(--surface-2); box-shadow: none; } 10%,95% { background: var(--green); border-color: var(--green); box-shadow: 0 0 10px rgba(63,177,78,0.65); } 99%,100% { background: var(--bg-1); border-color: var(--surface-2); box-shadow: none; } }
@keyframes pnDot1 { 0%,28% { background: var(--bg-1); border-color: var(--surface-2); box-shadow: none; } 33%,95% { background: var(--green); border-color: var(--green); box-shadow: 0 0 10px rgba(63,177,78,0.65); } 99%,100% { background: var(--bg-1); border-color: var(--surface-2); box-shadow: none; } }
@keyframes pnDot2 { 0%,52% { background: var(--bg-1); border-color: var(--surface-2); box-shadow: none; } 57%,95% { background: var(--green); border-color: var(--green); box-shadow: 0 0 10px rgba(63,177,78,0.65); } 99%,100% { background: var(--bg-1); border-color: var(--surface-2); box-shadow: none; } }
@keyframes pnDot3 { 0%,75% { background: var(--bg-1); border-color: var(--surface-2); box-shadow: none; } 80%,95% { background: var(--green); border-color: var(--green); box-shadow: 0 0 10px rgba(63,177,78,0.65); } 99%,100% { background: var(--bg-1); border-color: var(--surface-2); box-shadow: none; } }
@keyframes pnIc0 { 0%,5% { color: var(--muted); border-color: var(--hairline); background: var(--bg-1); } 10%,95% { color: var(--green-soft); border-color: rgba(63,177,78,0.40); background: rgba(63,177,78,0.08); } 99%,100% { color: var(--muted); border-color: var(--hairline); background: var(--bg-1); } }
@keyframes pnIc1 { 0%,28% { color: var(--muted); border-color: var(--hairline); background: var(--bg-1); } 33%,95% { color: var(--green-soft); border-color: rgba(63,177,78,0.40); background: rgba(63,177,78,0.08); } 99%,100% { color: var(--muted); border-color: var(--hairline); background: var(--bg-1); } }
@keyframes pnIc2 { 0%,52% { color: var(--muted); border-color: var(--hairline); background: var(--bg-1); } 57%,95% { color: var(--green-soft); border-color: rgba(63,177,78,0.40); background: rgba(63,177,78,0.08); } 99%,100% { color: var(--muted); border-color: var(--hairline); background: var(--bg-1); } }
@keyframes pnIc3 { 0%,75% { color: var(--muted); border-color: var(--hairline); background: var(--bg-1); } 80%,95% { color: var(--green-soft); border-color: rgba(63,177,78,0.40); background: rgba(63,177,78,0.08); } 99%,100% { color: var(--muted); border-color: var(--hairline); background: var(--bg-1); } }

/* --- reduced-motion: freeze every new demo at a readable end-state --- */
@media (prefers-reduced-motion: reduce) {
  .sst-wait { opacity: 0; animation: none; }
  .sst-ok { opacity: 1; animation: none; }
  .swap-card, .swap-arrow { animation: none; }
  .swap-approve { animation: none; opacity: 1; transform: none; }
  .task-fill { animation: none; width: 75%; }
  .task-list li.tdone .task-box { animation: none; background: var(--green); border-color: var(--green); }
  .task-list li.tdone .tck { animation: none; stroke-dashoffset: 0; }
  .task-list li.tdone .task-tx { animation: none; color: var(--text); }
  .cmsg { animation: none; opacity: 1; transform: none; }
  .cb-typing i { animation: none; }
  .pipe-pkt { animation: none; opacity: 0; }
  .pn-dot { animation: none; background: var(--green); border-color: var(--green); }
  .pn-ic { animation: none; color: var(--green-soft); border-color: rgba(63,177,78,0.40); background: rgba(63,177,78,0.08); }
}

/* keep the divider on grouped block sections (they don't directly wrap a feat-card) */
.feat-block.section-line::before { display: block; }

/* --- очень узкие экраны: компактный номер блока, демо без фикс-высоты --- */
@media (max-width: 400px) {
  .fbh-num { width: 44px; height: 44px; font-size: 17px; border-radius: 12px; }
  .swap-demo, .task-demo, .chat-demo, .pipe-demo { min-height: 0; }
  .swap-mid { padding-left: 0; }
}

/* ============================================================
   v16 — feature detail: rich content inside the FLIP overlay
   DIRECTION B — "Editorial & tactile"
   Borders carry intention (top-lit / masked-gradient hairlines, per-type
   rim colour), strong hierarchy across card families, springy tactile
   hover/press, JS-triggered staggered entrance (.is-revealed on #fdRich),
   KPI count-up. All motion gated behind prefers-reduced-motion.
   ============================================================ */
/* rich mode turns the centered stub into a scrollable long-form panel */
.fd-fallback:not([hidden]) { display: flex; flex-direction: column; align-items: center; }
.fd-inner.is-rich {
  display: block; padding: 0; text-align: left;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--surface-2) transparent;
}
.fd-inner.is-rich::-webkit-scrollbar { width: 9px; }
.fd-inner.is-rich::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
/* keep the Назад button legible while content scrolls under it */
.feat-detail.shown .fd-close { background: rgba(14,14,16,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.fdc {
  --fa: var(--fd-accent, 102,17,176);
  /* one reusable editorial easing + a softer reading width for long-form */
  --fdc-spring: cubic-bezier(.2,.9,.25,1.04);
  --fdc-ease: cubic-bezier(.2,.8,.2,1);
  max-width: 960px; margin: 0 auto;
  padding: clamp(80px, 11vh, 116px) clamp(20px, 5vw, 56px) clamp(56px, 8vh, 96px);
}
.fdc > * + * { margin-top: clamp(40px, 6vw, 72px); }

/* ---------- hero: editorial, kicker rule under the eyebrow ---------- */
.fdc-hero { text-align: center; max-width: 760px; margin-inline: auto; }
.fdc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 15px 6px 11px; border-radius: 99px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em; color: rgb(var(--fa));
  /* masked gradient ring instead of flat tint — top-lit, accent-warm */
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(var(--fa),0.13), rgba(var(--fa),0.07)) padding-box,
    linear-gradient(180deg, rgba(var(--fa),0.55), rgba(var(--fa),0.18)) border-box;
}
.fdc-eyebrow svg { width: 15px; height: 15px; }
.fdc-title { margin: 22px 0 0; font-size: clamp(30px, 5vw, 52px); font-weight: 800; letter-spacing: -0.028em; line-height: 1.04; }
.fdc-lede { margin: 20px auto 0; max-width: 660px; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6; color: var(--text-2); }
.fdc-lede i { font-style: italic; color: var(--text); }

/* ---------- KPI row: editorial stat plates ---------- */
/* No flat hairline. A top-lit rim-light (project --shadow-card token) plus an
   oversized gradient number and a short accent rule below it = curated metric,
   not a generated grid. Each tile reacts with a springy lift. */
.fdc-kpis { margin-top: clamp(34px, 4.6vw, 52px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fdc-kpi {
  position: relative; display: flex; flex-direction: column; gap: 9px; padding: 24px 20px 22px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(135% 115% at 0% 0%, rgba(var(--fa),0.16), transparent 58%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  box-shadow: var(--shadow-card);
  transition: transform .26s var(--fdc-spring), box-shadow .26s var(--fdc-ease);
}
.fdc-kpi b {
  font-size: clamp(28px, 3.6vw, 38px); font-weight: 800; letter-spacing: -0.022em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, rgb(var(--fa)), color-mix(in srgb, rgb(var(--fa)) 55%, #ffffff));
  -webkit-background-clip: text; background-clip: text; color: rgb(var(--fa)); -webkit-text-fill-color: transparent;
}
/* accent rule sits between number and caption — the editorial signature */
.fdc-kpi b::after {
  content: ""; display: block; width: 26px; height: 2px; margin-top: 12px; border-radius: 2px;
  background: linear-gradient(90deg, rgb(var(--fa)), transparent);
  transition: width .3s var(--fdc-spring);
}
.fdc-kpi span { font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
@media (hover: hover) {
  .fdc-kpi:hover { transform: translateY(-4px); box-shadow: var(--shadow-card), 0 22px 48px -26px rgba(var(--fa),0.6); }
  .fdc-kpi:hover b::after { width: 44px; }
}

/* ---------- section heading: editorial accent tick ---------- */
.fdc-h3 {
  position: relative; margin: 0 0 24px; padding-left: 16px;
  font-size: clamp(21px, 2.6vw, 28px); font-weight: 700; letter-spacing: -0.02em;
}
.fdc-h3::before {
  content: ""; position: absolute; left: 0; top: .14em; bottom: .14em; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, rgb(var(--fa)), rgba(var(--fa),0.25));
}

/* ---------- steps: connecting spine + animated number badges ---------- */
.fdc-steps {
  position: relative; margin: clamp(34px, 4.5vw, 48px) 0 0; padding: 0;
  display: flex; gap: 28px; align-items: flex-start;
}
/* Блок-цепочка «один факт через всю цепочку» скрыт во ВСЕХ деталках (по запросу).
   display:none → разметка остаётся в DOM, вернуть = удалить эти два правила.
   Отдельными правилами (не через запятую): без :has сетка всё равно скроется. */
.fdc-steps { display: none; }
/* и заголовок, если он стоит вплотную к блоку (в смешанных секциях h3 шапит другой
   контент и не примыкает к .fdc-steps — там заголовок остаётся). */
.fdc-h3:has(+ .fdc-steps) { display: none; }
/* шаги сразу под заголовком — отступ уже даёт h3 (margin-bottom), не дублируем */
.fdc-h3 + .fdc-steps { margin-top: 0; }
/* две независимые колонки: правую (чётные шаги) опускаем целиком → шахматный порядок,
   а зазоры между карточками внутри каждой колонки равны (1↔3 = 3↔5, 2↔4 = 4↔6). */
.fdc-col {
  flex: 1 1 0; min-width: 0; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 39px;
}
.fdc-col-b { margin-top: 56px; }
/* faint vertical spine down the gutter ties the 2-col flow together */
.fdc-steps::before {
  content: ""; position: absolute; top: 12px; bottom: 12px; left: 50%; width: 1px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(var(--fa),0.30) 12%, rgba(var(--fa),0.30) 88%, transparent);
  pointer-events: none;
}
.fdc-step {
  position: relative; display: flex; gap: 16px; padding: 22px; border-radius: var(--r-lg);
  border: 1px solid transparent;
  /* top-lit fill + accent-warm masked rim, distinct from the KPI plates */
  /* NB: every non-final layer must be a gradient — a bare <color> in a
     non-final background layer invalidates the whole shorthand. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 42%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(160deg, rgba(var(--fa),0.34), var(--hairline) 55%) border-box;
  transition: transform .26s var(--fdc-spring), box-shadow .26s var(--fdc-ease), background .26s;
}
@media (hover: hover) {
  .fdc-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card), 0 18px 40px -24px rgba(var(--fa),0.55);
    background:
      linear-gradient(180deg, rgba(var(--fa),0.06), transparent 42%) padding-box,
      linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
      linear-gradient(160deg, rgba(var(--fa),0.65), rgba(var(--fa),0.18) 60%) border-box;
  }
  .fdc-step:hover .fdc-step-n { transform: scale(1.09) rotate(-3deg); box-shadow: 0 10px 24px -10px rgba(var(--fa),0.85); }
}
.fdc-step-n {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: rgb(var(--fa));
  /* real depth: gradient body + inset rim-light + soft accent border */
  background: linear-gradient(160deg, rgba(var(--fa),0.30), rgba(var(--fa),0.10));
  border: 1px solid rgba(var(--fa),0.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 4px 12px -8px rgba(var(--fa),0.6);
  transition: transform .26s var(--fdc-spring), box-shadow .26s var(--fdc-ease);
}
.fdc-step-b h4 { margin: 5px 0 7px; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.fdc-step-b p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }

/* ---------- capabilities grid: dense, restrained, corner-glow on hover ---------- */
/* Kept lighter than KPI/step (it's a 9-up dense grid) but every card reacts:
   a cursor-following accent corner-glow + icon micro-motion. */
.fdc-caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 20px; }
/* «Стикер»: плоская заливка + жёсткая офсет-тень + лёгкий ручной наклон.
   Тень — не размытая (0 blur), цвета акцента, как у наклейки на поверхности. */
.fdc-cap {
  position: relative; isolation: isolate; display: flex; gap: 14px; padding: 18px 20px;
  border-radius: 16px;
  background: var(--bg-1);
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 6px 7px 0 0 rgba(var(--fa), 0.34);
  transition: transform .26s var(--fdc-spring), border-color .22s var(--fdc-ease), box-shadow .26s var(--fdc-ease);
}
/* наклон «от руки» — зеркально через жёлоб, с лёгким разбросом по строкам */
.fdc-cap:nth-child(odd)  { --tilt: -.7deg; }
.fdc-cap:nth-child(even) { --tilt:  .7deg; }
.fdc-cap:nth-child(4n)   { --tilt:  .45deg; }
.fdc-cap:nth-child(4n+1) { --tilt: -.45deg; }
/* corner glow follows the pointer via --mx/--my (set in JS); falls back to top-left */
.fdc-cap::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
  background: radial-gradient(180px 140px at var(--mx, 18%) var(--my, 0%), rgba(var(--fa),0.16), transparent 62%);
  transition: opacity .25s ease;
}
.fdc-cap > * { position: relative; z-index: 1; }
.fdc-cap-ic {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: #fff;
  background: rgb(var(--fa));
  box-shadow: 2px 3px 0 0 rgba(var(--fa), 0.40), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform .24s var(--fdc-spring), box-shadow .24s var(--fdc-ease);
}
.fdc-cap-ic svg { width: 21px; height: 21px; }
.fdc-cap b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -0.005em; }
.fdc-cap p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
@media (hover: hover) {
  /* «отклеиваем» стикер: выравниваем наклон, приподнимаем и растим жёсткую тень */
  .fdc-cap:hover {
    transform: translateY(-4px) rotate(0deg) scale(1.012);
    box-shadow: 11px 14px 0 0 rgba(var(--fa),0.30), 0 26px 50px -28px rgba(var(--fa),0.7);
  }
  .fdc-cap:hover::before { opacity: 1; }
  .fdc-cap:hover .fdc-cap-ic {
    transform: translate(-1px,-1px) rotate(-7deg) scale(1.07);
    box-shadow: 4px 6px 0 0 rgba(var(--fa),0.46), inset 0 1px 0 rgba(255,255,255,0.28);
  }
}

/* ---------- pull-quote: the emotional beat, real editorial blockquote ---------- */
.fdc-quote {
  position: relative; display: flex; gap: 22px; align-items: flex-start;
  padding: clamp(28px, 3.6vw, 44px); border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid transparent;
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(var(--fa),0.16), transparent 60%) padding-box,
    linear-gradient(180deg, var(--surface), var(--bg-2)) padding-box,
    linear-gradient(150deg, rgba(var(--fa),0.55), rgba(var(--fa),0.14)) border-box;
  box-shadow: var(--shadow-card);
}
/* oversized opening quotation glyph — the pull-quote tell */
.fdc-quote::before {
  content: "\201C"; position: absolute; top: -.18em; right: .12em; z-index: 0;
  font-family: Georgia, "Times New Roman", serif; font-size: clamp(120px, 16vw, 200px); line-height: 1;
  color: rgba(var(--fa),0.10); pointer-events: none;
}
.fdc-quote-ic {
  position: relative; z-index: 1; flex-shrink: 0; width: 54px; height: 54px; border-radius: 15px;
  display: grid; place-items: center; color: rgb(var(--fa));
  background: linear-gradient(160deg, rgba(var(--fa),0.24), rgba(var(--fa),0.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 14px 36px -16px rgba(var(--fa),0.75);
}
.fdc-quote-ic svg { width: 27px; height: 27px; }
.fdc-quote p { position: relative; z-index: 1; margin: 0; font-size: clamp(16px, 1.9vw, 21px); line-height: 1.55; color: var(--text); font-weight: 450; align-self: center; }
.fdc-quote p b { font-weight: 700; color: rgb(var(--fa)); }

/* ---------- before / after: deepened semantic contrast ---------- */
.fdc-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fdc-ba-col {
  padding: 24px; border-radius: var(--r-lg); border: 1px solid transparent;
  transition: transform .24s var(--fdc-spring), box-shadow .24s var(--fdc-ease);
}
.fdc-ba-before {
  background:
    linear-gradient(180deg, rgba(224,120,138,0.11), transparent 60%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(160deg, rgba(224,120,138,0.40), var(--hairline) 60%) border-box;
}
.fdc-ba-after {
  background:
    linear-gradient(180deg, rgba(63,177,78,0.12), transparent 60%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(160deg, rgba(63,177,78,0.45), var(--hairline) 60%) border-box;
}
@media (hover: hover) {
  .fdc-ba-before:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(224,120,138,0.4); }
  .fdc-ba-after:hover  { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(63,177,78,0.45); }
}
.fdc-ba-tag { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.fdc-ba-before .fdc-ba-tag { color: #e88a99; background: rgba(224,120,138,0.14); }
.fdc-ba-after .fdc-ba-tag { color: var(--green-soft); background: rgba(63,177,78,0.15); }
.fdc-ba-col ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.fdc-ba-col li { position: relative; padding-left: 30px; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.fdc-ba-col li::before { content: ""; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; background-repeat: no-repeat; background-position: center; background-size: 19px 19px; }
.fdc-ba-before li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0788a' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.fdc-ba-after li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238DD485' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }

/* ---------- FAQ accordion: hover affordance on closed rows + focus ring ---------- */
.fdc-faq { display: flex; flex-direction: column; gap: 12px; }
.fdc-faq-item {
  position: relative; border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent 60%), var(--bg-1);
  overflow: hidden; transition: border-color .25s, background .25s, box-shadow .25s var(--fdc-ease);
}
/* active row gains an accent left-edge in addition to the rim tint */
.fdc-faq-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, rgb(var(--fa)), rgba(var(--fa),0.3));
  transform: scaleY(0); transform-origin: top; transition: transform .3s var(--fdc-spring); pointer-events: none;
}
.fdc-faq-item.is-open { border-color: rgba(var(--fa),0.40); background: linear-gradient(180deg, rgba(var(--fa),0.05), transparent 60%), var(--bg-1); }
.fdc-faq-item.is-open::before { transform: scaleY(1); }
@media (hover: hover) {
  .fdc-faq-item:not(.is-open):hover { border-color: var(--hairline-2); box-shadow: 0 12px 30px -24px rgba(var(--fa),0.5); }
  .fdc-faq-item:not(.is-open):hover .fdc-faq-q { color: rgb(var(--fa)); }
  .fdc-faq-item:not(.is-open):hover .fdc-faq-chev { color: var(--text-2); transform: translateY(2px); }
}
.fdc-faq-q {
  width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px;
  background: none; border: 0; cursor: pointer; font-family: inherit; color: var(--text); text-align: left;
  font-size: 15.5px; font-weight: 600; transition: color .2s, transform .12s var(--fdc-ease);
}
.fdc-faq-q:active { transform: scale(.99); }
.fdc-faq-q:focus-visible { outline: 2px solid rgb(var(--fa)); outline-offset: -3px; border-radius: var(--r-lg); }
.fdc-faq-chev { width: 19px; height: 19px; flex-shrink: 0; color: var(--muted); transition: transform .3s ease, color .25s; }
.fdc-faq-item.is-open .fdc-faq-chev { transform: rotate(180deg); color: rgb(var(--fa)); }
.fdc-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--fdc-ease); }
.fdc-faq-item.is-open .fdc-faq-a { grid-template-rows: 1fr; }
.fdc-faq-a > div { overflow: hidden; min-height: 0; }
.fdc-faq-a p { margin: 0; padding: 0 20px 19px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* ---------- closing CTA: heaviest, brightest, ambient sweep ---------- */
.fdc-cta {
  position: relative; overflow: hidden; text-align: center; padding: clamp(36px, 4.6vw, 56px) 24px;
  border-radius: var(--r-xl); border: 1px solid transparent;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(var(--fa),0.18), transparent 58%) padding-box,
    linear-gradient(180deg, var(--surface), var(--bg-2)) padding-box,
    linear-gradient(160deg, rgba(var(--fa),0.55), rgba(var(--fa),0.16)) border-box;
  box-shadow: var(--shadow-card);
}
/* slow ambient light bar that drifts once on reveal (looped, very subtle) */
.fdc-cta::after {
  content: ""; position: absolute; top: 0; left: -40%; width: 36%; height: 100%; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--fa),0.10), transparent);
  transform: skewX(-18deg);
}
.fdc-cta > * { position: relative; z-index: 1; }
.fdc-cta h3 { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: -0.02em; }
.fdc-cta p { margin: 12px auto 0; max-width: 460px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.fdc-cta .btn { margin-top: 26px; }
.fdc-cta .btn-primary { box-shadow: 0 14px 34px -12px rgba(var(--fa),0.6); }
@media (hover: hover) {
  .fdc-cta .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 46px -12px rgba(var(--fa),0.85); }
}

/* ============================================================
   ENTRANCE — staggered reveal fired on overlay open
   Template-cloned nodes are invisible to the global IntersectionObserver,
   so the v16 IIFE adds .is-revealed to #fdRich (after .shown) and sets a
   per-card --d delay. Resting state = hidden; revealed state transitions in.
   ============================================================ */
/* default (no-JS / pre-reveal): fully visible so content is never lost */
.fd-rich .fdc-kpi,
.fd-rich .fdc-step,
.fd-rich .fdc-cap,
.fd-rich .fdc-quote,
.fd-rich .fdc-ba-col,
.fd-rich .fdc-faq-item,
.fd-rich .fdc-cta,
.fd-rich .fdc-h3,
.fd-rich .fdc-hero > * { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* arm the hidden state ONLY once JS confirms it will animate (html.js) */
  html.js .fd-rich.fdc-armed .fdc-kpi,
  html.js .fd-rich.fdc-armed .fdc-step,
  html.js .fd-rich.fdc-armed .fdc-quote,
  html.js .fd-rich.fdc-armed .fdc-ba-col,
  html.js .fd-rich.fdc-armed .fdc-faq-item,
  html.js .fd-rich.fdc-armed .fdc-cta,
  html.js .fd-rich.fdc-armed .fdc-h3,
  html.js .fd-rich.fdc-armed .fdc-hero > * {
    opacity: 0; transform: translateY(20px);
  }
  html.js .fd-rich.is-revealed .fdc-kpi,
  html.js .fd-rich.is-revealed .fdc-step,
  html.js .fd-rich.is-revealed .fdc-quote,
  html.js .fd-rich.is-revealed .fdc-ba-col,
  html.js .fd-rich.is-revealed .fdc-faq-item,
  html.js .fd-rich.is-revealed .fdc-cta,
  html.js .fd-rich.is-revealed .fdc-h3,
  html.js .fd-rich.is-revealed .fdc-hero > * {
    opacity: 1; transform: none;
    transition: opacity .5s ease-out, transform .55s var(--fdc-spring);
    transition-delay: var(--d, 0s);
  }
  /* the pull-quote enters with a touch of scale — it's the beat */
  html.js .fd-rich.fdc-armed .fdc-quote { transform: translateY(20px) scale(.985); }
  html.js .fd-rich.is-revealed .fdc-quote { transform: none; }
  /* стикер-карточки: собственный keyframe-вход (с наклоном), чтобы entrance
     не перебивал transform у :hover и не тянул --d-задержку в наведение.
     backwards-fill прячет до старта, а после анимации управление возвращается
     базовому rotate(--tilt) — поэтому :hover спокойно его перекрывает. */
  html.js .fd-rich.fdc-armed .fdc-cap { opacity: 0; }
  html.js .fd-rich.is-revealed .fdc-cap {
    opacity: 1;
    animation: fdcCapIn .58s var(--fdc-spring) backwards;
    animation-delay: var(--d, 0s);
  }
  /* before/after list items tick in one-by-one (--li set in JS) */
  html.js .fd-rich.fdc-armed .fdc-ba-col li { opacity: 0; transform: translateX(-8px); }
  html.js .fd-rich.is-revealed .fdc-ba-col li {
    opacity: 1; transform: none;
    transition: opacity .4s ease-out, transform .45s var(--fdc-spring);
    transition-delay: calc(var(--colD, 0s) + var(--li, 0) * 55ms);
  }
  /* ambient micro-motion (only after reveal settles) */
  html.js .fd-rich.is-revealed .fdc-quote-ic { animation: floaty 6s ease-in-out 1s infinite; }
  html.js .fd-rich.is-revealed .fdc-cta::after { animation: fdcSheen 5.5s var(--fdc-ease) 1s infinite; }
}
@keyframes fdcSheen { 0% { left: -40%; } 55%, 100% { left: 130%; } }
/* стикер «прилетает» снизу и оседает под своим углом наклона */
@keyframes fdcCapIn {
  from { opacity: 0; transform: translateY(22px) rotate(var(--tilt, 0deg)); }
  to   { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
}

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .fdc-kpis { grid-template-columns: repeat(2, 1fr); }
  .fdc-caps, .fdc-ba { grid-template-columns: 1fr; }
  /* одна колонка: распускаем обёртки и возвращаем порядок 1,2,3,4,5,6 */
  .fdc-steps { flex-direction: column; gap: 24px; }
  .fdc-col { display: contents; }
  .fdc-col-b { margin-top: 0; }
  .fdc-col-a > li:nth-child(1) { order: 1; }
  .fdc-col-a > li:nth-child(2) { order: 3; }
  .fdc-col-a > li:nth-child(3) { order: 5; }
  .fdc-col-b > li:nth-child(1) { order: 2; }
  .fdc-col-b > li:nth-child(2) { order: 4; }
  .fdc-col-b > li:nth-child(3) { order: 6; }
  .fdc-steps::before { display: none; }
  .fdc-quote { flex-direction: column; gap: 16px; }
  .fdc-quote::before { font-size: 110px; }
  .fdc > * + * { margin-top: 44px; }
}
@media (max-width: 560px) {
  /* лид читается с левого края (заголовок hero остаётся по центру) */
  .fdc-lede { font-size: 16px; line-height: 1.5; text-align: left; }
  /* стикеры: офсет-тень скромнее и без наклона — в одну колонку ровнее
     (.fdc-caps .fdc-cap — чтобы перебить nth-child-наклоны той же специфичности) */
  .fdc-caps .fdc-cap { --tilt: 0deg; box-shadow: 4px 5px 0 0 rgba(var(--fa),0.34); }
}
@media (max-width: 400px) {
  .fdc { padding-inline: 16px; }
  .fdc-title { font-size: clamp(26px, 7.6vw, 30px); }
  .fdc-kpis { gap: 10px; }
  .fdc-kpi { padding: 18px 14px 16px; }
  .fdc-kpi b { font-size: 26px; }
}

/* ---------- reduced motion: kill all new motion, force final state ---------- */
@media (prefers-reduced-motion: reduce) {
  .fdc-kpi, .fdc-step, .fdc-step-n, .fdc-cap, .fdc-cap-ic, .fdc-ba-col,
  .fdc-faq-item, .fdc-faq-item::before, .fdc-faq-chev, .fdc-faq-a, .fdc-faq-q,
  .fdc-cta .btn-primary, .fdc-kpi b::after {
    transition: none !important;
  }
  .fd-rich .fdc-kpi, .fd-rich .fdc-step, .fd-rich .fdc-cap, .fd-rich .fdc-quote,
  .fd-rich .fdc-ba-col, .fd-rich .fdc-faq-item, .fd-rich .fdc-cta,
  .fd-rich .fdc-h3, .fd-rich .fdc-hero > *, .fd-rich .fdc-ba-col li {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .fdc-kpi:hover, .fdc-step:hover, .fdc-cap:hover, .fdc-ba-col:hover { transform: none; }
  .fdc-quote-ic, .fdc-cta::after { animation: none !important; }
}


/* ============================================================
   v17 — features-intro umbrella header (eyebrow + thesis h2 + stepper)
   ============================================================ */
/* ===== features-intro · «Один цикл» umbrella header (hybrid A+B) =====
   Родитель над тремя блоками .fbh-num. Редакторская шапка + сдержанный
   степпер из ghost-колец, который превью-показывает 3 названия этапов и
   передачу данных. Узлы — маленькие КРУГЛЫЕ ghost-кольца → не конфликтуют
   с большими СПЛОШНЫМИ КВАДРАТНЫМИ .fbh-num ниже. Чистый CSS, reduced-motion-safe.
   Все переменные/классы уже существуют в landing.css. Вставлять В КОНЕЦ
   стилевого блока степперов (например после .fr-num ~стр.1837), либо в любой
   нижний кастомный блок — каскад не критичен, селекторы изолированы префиксом .fi-. */

.fi-stepper {
  --fi-spine: linear-gradient(90deg,
      rgba(142,37,228,0.08), rgba(142,37,228,0.42) 50%, rgba(142,37,228,0.08));
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2.4vw, 30px);
  max-width: 860px;
  margin: clamp(40px, 5vw, 60px) auto 0;
}

/* hairline spine за рядом узлов, на высоте их центра */
.fi-spine {
  position: absolute;
  top: 23px;
  left: 16.6%;
  right: 16.6%;
  height: 2px;
  z-index: 0;
  border-radius: 2px;
  overflow: hidden;
  background: var(--fi-spine);
}
/* лёгкий импульс, идущий 01 → 03 = «данные идут сами» */
.fi-pulse {
  position: absolute;
  inset: 0 auto 0 -34%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(178,106,240,0.9), transparent);
  animation: fiFlow 4.2s cubic-bezier(.4,.1,.3,1) infinite;
}
@keyframes fiFlow { 0% { left: -34%; } 62%, 100% { left: 100%; } }

.fi-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

/* GHOST-узел: прозрачная заливка, тонкое coral-кольцо, сплошной mono-номер.
   Намеренно легче сплошного градиентного КВАДРАТА .fbh-num ниже. */
.fi-node {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--coral-2);
  background: var(--bg-1);
  border: 1.5px solid rgba(142,37,228,0.45);
  box-shadow: 0 0 0 6px var(--bg), 0 10px 26px -16px rgba(142,37,228,0.85);
}

.fi-title {
  margin-top: 15px;
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text);
}
/* передача данных: доказывает непрерывность, конкретно */
.fi-handoff {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
}
.fi-handoff i { font-style: normal; color: var(--coral-2); padding: 0 1px; }

/* MOBILE: вертикальный spine + столбик шагов (зеркалит .launch на узких) */
@media (max-width: 720px) {
  .fi-stepper {
    grid-template-columns: 1fr;
    gap: 26px;
    max-width: 380px;
  }
  .fi-spine {
    top: 23px;
    bottom: 23px;
    left: 22px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg,
        rgba(142,37,228,0.08), rgba(142,37,228,0.42) 50%, rgba(142,37,228,0.08));
  }
  .fi-pulse {
    inset: -34% 0 auto 0;
    width: auto;
    height: 34%;
    animation-name: fiFlowV;
  }
  @keyframes fiFlowV { 0% { top: -34%; } 62%, 100% { top: 100%; } }
  .fi-step {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 16px;
    flex-wrap: wrap;
    padding-left: 0;
  }
  .fi-node { flex: 0 0 auto; }
  .fi-title { margin-top: 0; flex: 1 1 auto; }
  .fi-handoff { margin-top: 0; flex: 1 1 100%; padding-left: 62px; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .fi-pulse { animation: none; opacity: 0; }
}
/* MOBILE XS: передача данных плотнее, без переполнения на 320 */
@media (max-width: 400px) {
  .fi-handoff { padding-left: 58px; font-size: 11.5px; }
}

/* soft "просто спросить" CTA */
.cta-ask-row { text-align: center; margin-top: 14px; }
.cta-ask {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color .2s;
}
.cta-ask:hover { color: var(--coral-2); }
.cta-ask:focus-visible { outline: 2px solid var(--coral-2); outline-offset: 3px; }

/* ============================================================
   v17 — PLATFORM MEGA-MENU ("Платформа" nav dropdown)
   A 7shifts-style stage timeline: pills → arrow rail → feature
   columns. Opened on hover / focus / tap via .nav-mega.open (JS).
   ============================================================ */
.nav-mega { position: relative; display: inline-flex; align-items: center; }

.nav-mega-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: 9px;
  font-family: inherit; font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--text-2); background: none; border: 0; cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-mega-trigger:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.nav-mega-trigger:focus-visible { outline: 2px solid var(--coral-2); outline-offset: 3px; }
.nav-mega-trigger .mega-chev { width: 15px; height: 15px; opacity: .75;
  transition: transform .28s cubic-bezier(.2,.7,.3,1); }

/* ---- panel shell (fixed, centred under the bar) ---- */
.mega-panel {
  position: fixed; top: 52px; left: 50%;
  width: min(1120px, calc(100vw - 40px));
  padding-top: 18px;                 /* transparent bridge from trigger to card */
  z-index: 130;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.25,1), visibility 0s linear .22s;
}
.mega-card {
  position: relative; pointer-events: auto;
  padding: 26px 28px 20px;
  /* стекло: прозрачный бордер + градиентная кромка через background-clip,
     декоративные слои прижаты к padding-box, чтобы не красить кромку */
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  background:
    radial-gradient(130% 150% at 12% -20%, rgba(142,37,228,0.13), transparent 55%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0)) padding-box,
    linear-gradient(var(--glass), var(--glass)) padding-box,
    var(--border-grad) border-box;
  -webkit-backdrop-filter: saturate(150%) blur(22px);
  backdrop-filter: saturate(150%) blur(22px);
  box-shadow: var(--shadow-pop), 0 1px 0 rgba(255,255,255,0.06) inset;
  max-height: calc(100vh - 84px); overflow: auto;
}
.mega-card::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(178,106,240,0.65), rgba(102,17,176,0.5), transparent);
}

/* ---- open state (toggled by JS for hover, focus and tap alike) ---- */
.nav-mega.open .mega-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .2s ease, transform .3s cubic-bezier(.2,.8,.25,1);
}
.nav-mega.open .nav-mega-trigger { background: rgba(255,255,255,0.06); color: var(--text); }
.nav-mega.open .nav-mega-trigger .mega-chev { transform: rotate(180deg); opacity: 1; }

/* ---- head ---- */
.mega-head { margin-bottom: 18px; }
.mega-eyebrow {
  display: inline-block; margin-bottom: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--coral-2);
}
.mega-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); }

/* ---- three stacked grids sharing one column template ----
   minmax(0,1fr) forces strictly equal tracks so the rail dots stay
   centred on their columns even when a label is long enough to wrap. */
.mega-pills, .mega-rail, .mega-lists {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 18px;
}

.mega-pillcell { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 62px; }
.mega-pill {
  display: inline-flex; align-items: center; height: 28px; padding: 0 13px; border-radius: 9px;
  font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em;
  color: rgb(var(--acc));
  background: rgba(var(--acc), 0.14);
  border: 1px solid rgba(var(--acc), 0.30);
}
.mega-tag { font-size: 12.5px; line-height: 1.42; color: var(--muted); max-width: 96%; }

/* ---- timeline rail ---- */
.mega-rail { position: relative; height: 30px; align-items: center; margin: 6px 0 16px; }
.mega-rail::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(255,255,255,0.04), var(--hairline-2) 10%, var(--hairline-2) 90%, rgba(255,255,255,0.04));
}
.mega-rail::after {                  /* arrowhead at the end of the line */
  content: ""; position: absolute; right: 5.2%; top: 50%; width: 7px; height: 7px;
  border-top: 2px solid var(--hairline-2); border-right: 2px solid var(--hairline-2);
  transform: translateY(-50%) rotate(45deg);
}
.mega-dot {
  justify-self: center; position: relative; z-index: 1;
  width: 11px; height: 11px; border-radius: 50%;
  background: rgb(var(--acc));
  box-shadow: 0 0 0 4px rgba(var(--acc), 0.16), 0 0 13px rgba(var(--acc), 0.55);
}
/* sequential left→right "comet" ping across the 5 stage dots while the panel is open */
.mega-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 0 rgba(var(--acc), 0.55);
}
.nav-mega.open .mega-dot::after { animation: megaDotPing 3.6s ease-out infinite; }
.nav-mega.open .mega-rail > :nth-child(1)::after { animation-delay: .15s; }
.nav-mega.open .mega-rail > :nth-child(2)::after { animation-delay: .43s; }
.nav-mega.open .mega-rail > :nth-child(3)::after { animation-delay: .71s; }
.nav-mega.open .mega-rail > :nth-child(4)::after { animation-delay: .99s; }
.nav-mega.open .mega-rail > :nth-child(5)::after { animation-delay: 1.27s; }
@keyframes megaDotPing {
  0%   { opacity: 0; box-shadow: 0 0 0 0 rgba(var(--acc), 0.55); }
  8%   { opacity: 1; }
  34%  { opacity: 0; box-shadow: 0 0 0 9px rgba(var(--acc), 0); }
  100% { opacity: 0; box-shadow: 0 0 0 9px rgba(var(--acc), 0); }
}
@media (prefers-reduced-motion: reduce) { .nav-mega.open .mega-dot::after { animation: none; } }

/* ---- feature columns ---- */
.mega-col { display: flex; flex-direction: column; gap: 3px; }
.mega-item {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  padding: 9px 10px; border-radius: 11px;
  font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--text-2);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.mega-item .mega-ic {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  color: rgb(var(--acc));
  background: rgba(var(--acc), 0.12);
  border: 1px solid rgba(var(--acc), 0.20);
  transition: background .16s ease, border-color .16s ease, transform .18s cubic-bezier(.3,.8,.3,1.3), box-shadow .18s ease;
}
.mega-item .mega-ic svg { width: 18px; height: 18px; }
.mega-item:hover { background: rgba(var(--acc), 0.10); color: var(--text); transform: translateX(3px); }
.mega-item:hover .mega-ic { background: rgba(var(--acc), 0.26); border-color: rgba(var(--acc), 0.5); transform: scale(1.1); box-shadow: 0 6px 16px -8px rgba(var(--acc), 0.8); }
.mega-item:focus-visible { outline: 2px solid rgb(var(--acc)); outline-offset: 1px; }

/* линк-стили бара внутрь панели больше не текут: в 20-navbar/105-ambient
   селектор ужат до ".nav-links > a", нейтрализатор не нужен */

/* ---- per-column accent (same order across all three grids) ---- */
.mega-card { --c1: 178,106,240; --c2: 157,186,224; --c3: 255,184,84; --c4: 141,212,133; --c5: 238,147,192; }
.mega-pills > :nth-child(1), .mega-rail > :nth-child(1), .mega-lists > :nth-child(1) { --acc: var(--c1); }
.mega-pills > :nth-child(2), .mega-rail > :nth-child(2), .mega-lists > :nth-child(2) { --acc: var(--c2); }
.mega-pills > :nth-child(3), .mega-rail > :nth-child(3), .mega-lists > :nth-child(3) { --acc: var(--c3); }
.mega-pills > :nth-child(4), .mega-rail > :nth-child(4), .mega-lists > :nth-child(4) { --acc: var(--c4); }
.mega-pills > :nth-child(5), .mega-rail > :nth-child(5), .mega-lists > :nth-child(5) { --acc: var(--c5); }

/* ---- footer band ---- */
.mega-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline);
}
.mega-foot-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--coral-2); }
.mega-foot-link svg { width: 16px; height: 16px; transition: transform .2s; }
.mega-foot-link:hover svg { transform: translateX(4px); }
.mega-foot-cta { display: inline-flex; align-items: center; gap: 14px; }
.mega-foot-note { font-size: 13px; color: var(--muted); }

/* ---- entrance: pill + dot + column rise per stage, left → right ---- */
.mega-pillcell { opacity: 0; transform: translateY(9px);
  transition: opacity .32s ease, transform .4s cubic-bezier(.2,.8,.25,1); }
.mega-dot { opacity: 0; transform: scale(.3);
  transition: opacity .3s ease, transform .42s cubic-bezier(.2,.9,.3,1.25); }
.mega-col { opacity: 0; transform: translateY(11px);
  transition: opacity .34s ease, transform .44s cubic-bezier(.2,.8,.25,1); }
.nav-mega.open .mega-pillcell,
.nav-mega.open .mega-dot,
.nav-mega.open .mega-col { opacity: 1; transform: none; }
.nav-mega.open .mega-pills > :nth-child(1),
.nav-mega.open .mega-rail  > :nth-child(1),
.nav-mega.open .mega-lists > :nth-child(1) { transition-delay: .04s; }
.nav-mega.open .mega-pills > :nth-child(2),
.nav-mega.open .mega-rail  > :nth-child(2),
.nav-mega.open .mega-lists > :nth-child(2) { transition-delay: .09s; }
.nav-mega.open .mega-pills > :nth-child(3),
.nav-mega.open .mega-rail  > :nth-child(3),
.nav-mega.open .mega-lists > :nth-child(3) { transition-delay: .14s; }
.nav-mega.open .mega-pills > :nth-child(4),
.nav-mega.open .mega-rail  > :nth-child(4),
.nav-mega.open .mega-lists > :nth-child(4) { transition-delay: .19s; }
.nav-mega.open .mega-pills > :nth-child(5),
.nav-mega.open .mega-rail  > :nth-child(5),
.nav-mega.open .mega-lists > :nth-child(5) { transition-delay: .24s; }

/* ---- a touch tighter on smaller laptops ---- */
@media (max-width: 1000px) {
  .mega-card { padding: 22px 22px 18px; }
  .mega-title { font-size: 20px; }
  .mega-pills, .mega-rail, .mega-lists { gap: 0 12px; }
  .mega-item { font-size: 12.8px; gap: 9px; padding: 8px 8px; }
  .mega-item .mega-ic { width: 30px; height: 30px; }
  .mega-tag { font-size: 12px; }
}

/* ---- mobile menu: platform group label ---- */
.mm-head {
  padding: 10px 8px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); border-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mega-panel { transform: translateX(-50%); transition: opacity .15s linear, visibility 0s linear .15s; }
  .nav-mega.open .mega-panel { transform: translateX(-50%); transition: opacity .15s linear; }
  .mega-pillcell, .mega-dot, .mega-col { opacity: 1 !important; transform: none !important; transition: none; }
  .nav-mega-trigger .mega-chev, .mega-item, .mega-foot-link svg { transition: none; }
}

/* === FEATURE DETAIL CSS: availability === */
/* ============================================================
   Feature deep-dive "availability" — scoped custom CSS.
   Every selector is prefixed .fdc--availability so it can never
   collide with the shared .fdc-* base or the 8 sibling features.
   Accent is ALWAYS rgb(var(--fa)); motion reuses --fdc-spring /
   --fdc-ease; surfaces reuse the :root tokens.
   ============================================================ */

/* ---- the signature interactive element: a live availability board.
   It auto-plays a staggered "answers arriving" cascade on open
   (keyed off the host .fd-rich.is-revealed, exactly like the base
   reveal), then settles into a hoverable grid. No JS required. ---- */

.fdc--availability .av-demo {
  position: relative;
  overflow: hidden;
  margin-bottom: clamp(28px, 3.6vw, 40px);
  border-radius: var(--r-xl);
  padding: clamp(16px, 2.4vw, 22px);
  border: 1px solid transparent;
  /* heaviest plate in the section — radial accent corner wash +
     surface→bg-2 fill + accent-to-hairline rim + the project shadow.
     Non-final layers are all gradients (border-box shorthand rule). */
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(var(--fa), 0.16), transparent 56%) padding-box,
    linear-gradient(170deg, var(--surface), var(--bg-2)) padding-box,
    linear-gradient(150deg, rgba(var(--fa), 0.50), var(--hairline) 50%, rgba(255, 255, 255, 0.02)) border-box;
  box-shadow: var(--shadow-card);
}

.fdc--availability .av-demo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.fdc--availability .av-demo-title {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.fdc--availability .av-demo-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}
.fdc--availability .av-demo-ratio {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.fdc--availability .av-demo-ratio b {
  font-size: 15px;
  font-weight: 800;
  color: rgb(var(--fa));
}

/* progress bar — fills toward "собрана" once revealed */
.fdc--availability .av-demo-bar {
  position: relative;
  margin: 13px 0 14px;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.fdc--availability .av-demo-fill {
  position: absolute;
  inset: 0;
  width: 90%; /* 36/40, visible by default (no-JS / reduced-motion) */
  border-radius: 99px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(var(--fa), 0.65), rgb(var(--fa)));
  box-shadow: 0 0 18px -2px rgba(var(--fa), 0.7);
}

/* ---- the answer grid ---- */
.fdc--availability .av-demo-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fdc--availability .av-demo-row {
  display: grid;
  grid-template-columns: minmax(96px, 1.4fr) repeat(5, 1fr);
  gap: 6px;
  align-items: center;
}
.fdc--availability .av-demo-rowhead {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}
.fdc--availability .av-demo-rowhead > span {
  text-align: center;
}
.fdc--availability .av-demo-emp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.fdc--availability .av-demo-dot {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: rgb(var(--av-seed));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* a single answer cell — distinct, intentional borders per state */
.fdc--availability .av-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition:
    transform 0.24s var(--fdc-spring),
    box-shadow 0.24s var(--fdc-ease),
    filter 0.24s var(--fdc-ease);
}
/* "могу" — green, semantic */
.fdc--availability .av-ok {
  color: #9fe2a4;
  background:
    linear-gradient(180deg, rgba(63, 177, 78, 0.10), transparent 60%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(160deg, rgba(63, 177, 78, 0.55), var(--hairline) 60%) border-box;
}
/* "не могу" — red, semantic */
.fdc--availability .av-no {
  color: #f0a6b4;
  background:
    linear-gradient(180deg, rgba(224, 120, 138, 0.12), transparent 60%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(160deg, rgba(224, 120, 138, 0.60), var(--hairline) 60%) border-box;
}
/* a time-window answer — accent (feature colour), mono-ish numerals */
.fdc--availability .av-win {
  color: rgb(var(--fa));
  font-variant-numeric: tabular-nums;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(var(--fa), 0.18), transparent 60%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(160deg, rgba(var(--fa), 0.62), var(--hairline) 58%) border-box;
}

/* hover enrichment (pointers only; the demo is NOT hover-dependent) */
@media (hover: hover) {
  .fdc--availability .av-cell:hover {
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.12);
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.8);
    z-index: 2;
  }
  .fdc--availability .av-win:hover {
    box-shadow: 0 8px 22px -8px rgba(var(--fa), 0.7);
  }
}

/* a diagonal sheen that sweeps the grid once it settles */
.fdc--availability .av-demo-sweep {
  position: absolute;
  inset: -40% -10%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(var(--fa), 0.16) 50%, transparent 58%);
  transform: translateX(-120%);
  opacity: 0;
}

/* footer chip = "собрана" with a soft pulsing dot */
.fdc--availability .av-demo-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}
.fdc--availability .av-demo-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  color: #9fe2a4;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(63, 177, 78, 0.14), rgba(63, 177, 78, 0.06)) padding-box,
    linear-gradient(180deg, rgba(63, 177, 78, 0.55), rgba(63, 177, 78, 0.18)) border-box;
}
.fdc--availability .av-demo-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3fb14e;
  box-shadow: 0 0 0 0 rgba(63, 177, 78, 0.55);
}

/* «Напомнить не проставившим» — coral action button mirroring the in-app
   control (bg-brand-coral #E94560 + BellRing). A click fires a little
   send-off: the bell rings, notification pings fly up, and the button
   resolves to «Отправлено», so the gesture reads as «увед улетел команде». */
.fdc--availability .av-remind {
  position: relative;
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  padding: 7px 15px;
  border: none;
  border-radius: 99px;
  font: inherit;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #ED5A72, #E94560);
  box-shadow: 0 7px 20px -9px rgba(233, 69, 96, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform .2s var(--fdc-spring), box-shadow .28s var(--fdc-ease),
    background .35s var(--fdc-ease), filter .2s var(--fdc-ease);
}
@media (hover: hover) {
  .fdc--availability .av-remind:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 11px 26px -9px rgba(233, 69, 96, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }
}
.fdc--availability .av-remind:active { transform: translateY(0) scale(0.97); }
.fdc--availability .av-remind:focus-visible { outline: 2px solid #ED5A72; outline-offset: 2px; }

.fdc--availability .av-remind-face {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: opacity .3s var(--fdc-ease), transform .3s var(--fdc-spring);
}
.fdc--availability .av-remind-ic { display: inline-flex; transform-origin: 50% 20%; }
.fdc--availability .av-remind-ic svg { width: 14px; height: 14px; }
.fdc--availability .av-remind-face--ok { opacity: 0; transform: translateY(7px); }

/* notification pings that rise out of the bell when sent */
.fdc--availability .av-remind-burst {
  position: absolute;
  left: 17px; top: 50%;
  width: 0; height: 0;
  pointer-events: none;
}
.fdc--availability .av-remind-burst i {
  position: absolute; left: 0; top: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 9px rgba(255, 255, 255, 0.85);
  opacity: 0;
}

/* ---- sent! ---- */
.fdc--availability .av-remind.is-sent {
  pointer-events: none;
  background: linear-gradient(180deg, #4FD069, #2FA94A);
  box-shadow: 0 7px 20px -9px rgba(63, 177, 78, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: background .3s var(--fdc-ease) .5s, box-shadow .3s var(--fdc-ease) .5s;
}
.fdc--availability .av-remind.is-sent .av-remind-face {
  animation: avFaceOut .28s var(--fdc-ease) .5s forwards;
}
.fdc--availability .av-remind.is-sent .av-remind-face--ok {
  animation: avFaceIn .32s var(--fdc-spring) .62s forwards;
}
.fdc--availability .av-remind.is-sent .av-remind-face:not(.av-remind-face--ok) .av-remind-ic {
  animation: avBell .62s var(--fdc-ease);
}
.fdc--availability .av-remind.is-sent .av-remind-burst i {
  animation: avPing .9s var(--fdc-ease) forwards;
}
.fdc--availability .av-remind.is-sent .av-remind-burst i:nth-child(1) { --px: -17px; animation-delay: .02s; }
.fdc--availability .av-remind.is-sent .av-remind-burst i:nth-child(2) { --px: -6px;  animation-delay: .09s; }
.fdc--availability .av-remind.is-sent .av-remind-burst i:nth-child(3) { --px: 6px;   animation-delay: .15s; }
.fdc--availability .av-remind.is-sent .av-remind-burst i:nth-child(4) { --px: 16px;  animation-delay: .22s; }

@keyframes avBell {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(17deg); }
  32% { transform: rotate(-14deg); }
  49% { transform: rotate(10deg); }
  66% { transform: rotate(-6deg); }
  83% { transform: rotate(3deg); }
}
@keyframes avPing {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--px, 0), -34px) scale(1); }
}
@keyframes avFaceOut { to { opacity: 0; transform: translateY(-7px); } }
@keyframes avFaceIn  { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 560px) {
  .fdc--availability .av-remind { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fdc--availability .av-remind.is-sent .av-remind-face,
  .fdc--availability .av-remind.is-sent .av-remind-face--ok,
  .fdc--availability .av-remind.is-sent .av-remind-ic,
  .fdc--availability .av-remind.is-sent .av-remind-burst i { animation: none; }
  .fdc--availability .av-remind.is-sent .av-remind-face { opacity: 0; }
  .fdc--availability .av-remind.is-sent .av-remind-face--ok { opacity: 1; transform: none; }
}
/* #4 — match the main-page «Сбор доступности» palette: green progress + count,
   blue time-windows, muted «не могу» — drop the purple feature accent so the
   detail view reads identical to the card preview on the main page. */
.fdc--availability .av-demo { --fa: 63, 177, 78; }
.fdc--availability .av-demo-ratio b { color: var(--green-soft); }
.fdc--availability .av-demo-fill {
  background: linear-gradient(90deg, #3FB14E, #5BD46B);
  box-shadow: 0 0 16px -3px rgba(63, 177, 78, 0.7);
}
.fdc--availability .av-cell.av-win {
  color: var(--blue-soft);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(90, 130, 194, 0.20), transparent 60%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(160deg, rgba(90, 130, 194, 0.60), var(--hairline) 58%) border-box;
}
.fdc--availability .av-cell.av-no {
  color: var(--muted-2);
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(var(--hairline), var(--hairline)) border-box;
}
@media (hover: hover) {
  .fdc--availability .av-cell.av-win:hover { box-shadow: 0 8px 22px -8px rgba(90, 130, 194, 0.7); }
}

/* ---------- the auto-play, keyed off the host reveal class ----------
   Mirrors how the base keys its reveals on .fd-rich.is-revealed, so it
   fires on every open regardless of when the template is cloned in.
   Resting (pre-reveal / no-JS) state above is already the FINAL filled
   board — content is never hidden waiting for a class. ---------- */

/* cells start collapsed only AFTER we know the reveal will run */
.fd-rich.is-revealed .fdc--availability .av-cell {
  animation: avCellIn 0.5s var(--fdc-spring) backwards;
  animation-delay: calc(var(--av-i, 1) * 80ms + 120ms);
}
.fd-rich.is-revealed .fdc--availability .av-demo-fill {
  animation: avFill 1.3s var(--fdc-ease) backwards;
  animation-delay: 0.2s;
}
.fd-rich.is-revealed .fdc--availability .av-demo-sweep {
  animation: avSweep 1.1s var(--fdc-ease) 0.9s 1 forwards;
}
.fd-rich.is-revealed .fdc--availability .av-demo-pulse {
  animation: avPulse 2.4s ease-out 1.1s infinite;
}

@keyframes avCellIn {
  from { opacity: 0; transform: translateY(6px) scale(0.82); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes avFill {
  from { width: 0%; }
  to   { width: 90%; }
}
@keyframes avSweep {
  from { transform: translateX(-120%); opacity: 0; }
  35%  { opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}
@keyframes avPulse {
  0%   { box-shadow: 0 0 0 0 rgba(63, 177, 78, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(63, 177, 78, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 177, 78, 0); }
}

/* narrow screens: keep the board legible, drop the day count gracefully */
@media (max-width: 560px) {
  .fdc--availability .av-demo-row {
    grid-template-columns: minmax(72px, 1fr) repeat(5, 1fr);
    gap: 4px;
  }
  .fdc--availability .av-demo-emp { font-size: 11px; gap: 5px; }
  .fdc--availability .av-demo-dot { width: 18px; height: 18px; font-size: 8px; }
  .fdc--availability .av-cell { height: 24px; font-size: 10px; }
}

/* reduced motion: kill the cascade/sweep/pulse, show the final state */
@media (prefers-reduced-motion: reduce) {
  .fd-rich.is-revealed .fdc--availability .av-cell,
  .fd-rich.is-revealed .fdc--availability .av-demo-fill,
  .fd-rich.is-revealed .fdc--availability .av-demo-sweep,
  .fd-rich.is-revealed .fdc--availability .av-demo-pulse {
    animation: none;
  }
  .fdc--availability .av-cell { opacity: 1; transform: none; }
  .fdc--availability .av-demo-fill { width: 90%; }
  .fdc--availability .av-cell,
  .fdc--availability .av-win { transition: none; }
}

/* === FEATURE DETAIL CSS: swaps === */
/* ============================================================
   Feature "swaps" — Обмен сменами · scoped custom CSS
   Every selector is prefixed .fdc--swaps so it can never leak
   into the shared kit or a sibling deep-dive. Accent is taken
   from the card via rgb(var(--fa)); no hex accents here.
   ============================================================ */

/* ---- 1. The signature element: dual-approval "relay" ---------
   A self-contained CSS demo of the real two-stage handshake:
   Коллега принимает → Менеджер одобряет → График пересобран.
   Hovering / focusing the relay drives the track fill + node
   "lights" left-to-right, mirroring the real status pipeline. */

.fdc--swaps .swaps-relay {
  position: relative;
  border-radius: var(--r-lg);
  padding: clamp(20px, 3.4vw, 30px) clamp(18px, 3vw, 30px) clamp(22px, 3.4vw, 32px);
  border: 1px solid transparent;
  /* Technique A — layered gradient rim (no flat hairline). */
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--fa), 0.16), transparent 46%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%) padding-box,
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(150deg, rgba(var(--fa), 0.42), var(--hairline) 58%) border-box;
  box-shadow: var(--shadow-card);
  transition: box-shadow .5s var(--fdc-ease), transform .5s var(--fdc-spring);
}

.fdc--swaps .swaps-relay-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(22px, 3vw, 30px);
}
.fdc--swaps .swaps-relay-head b {
  font-size: clamp(15px, 2vw, 17px);
  letter-spacing: -0.01em;
  color: var(--text);
}
.fdc--swaps .swaps-relay-head .swaps-relay-day {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* the rail that the three nodes sit on */
.fdc--swaps .swaps-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* track line behind the nodes */
.fdc--swaps .swaps-rail::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: 26px;
  height: 3px;
  border-radius: 3px;
  background: var(--hairline-2);
}
/* progress fill — JS drives --sw-fill, the line sweeps to meet each node in turn */
.fdc--swaps .swaps-rail::after {
  content: "";
  position: absolute;
  left: 11%;
  top: 26px;
  height: 3px;
  width: var(--sw-fill, 0%);
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(var(--fa), 0.5), rgb(var(--fa)));
  box-shadow: 0 0 14px rgba(var(--fa), 0.55);
  transition: width 1s var(--fdc-ease);
}

.fdc--swaps .swaps-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
}
.fdc--swaps .swaps-node-dot {
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(160deg, var(--hairline-2), var(--hairline)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: color .5s var(--fdc-ease), transform .5s var(--fdc-spring),
    box-shadow .5s var(--fdc-ease), background .5s var(--fdc-ease);
}
.fdc--swaps .swaps-node-dot svg { width: 23px; height: 23px; }
.fdc--swaps .swaps-node-t {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: -0.01em;
}
.fdc--swaps .swaps-node-s {
  display: grid;
  justify-items: center;
  font-size: 11px;
  color: var(--muted);
  min-height: 14px;
  transition: opacity .3s var(--fdc-ease);   /* used by the rewind curtain */
}
/* wait/done captions share one grid cell (the container sizes to the taller of
   the two, so a multi-line caption never overflows). They DON'T cross-fade at
   the same time — "wait" leaves first, then "done" arrives — so the two texts
   are never both visible at once (no garbled overlap mid-transition). */
.fdc--swaps .swaps-node-s .s-wait,
.fdc--swaps .swaps-node-s .s-done { grid-area: 1 / 1; }
.fdc--swaps .swaps-node-s .s-wait { opacity: 1; transition: opacity .22s var(--fdc-ease); }
.fdc--swaps .swaps-node-s .s-done { color: var(--text); font-weight: 500; opacity: 0; transition: opacity .3s var(--fdc-ease) .2s; }

/* small pending pip on each node, before activation */
.fdc--swaps .swaps-node-dot::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--orange);
  border: 2px solid var(--bg-2);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity .5s var(--fdc-ease), transform .5s var(--fdc-spring), background .45s var(--fdc-ease);
}
.fdc--swaps .swaps-node[data-state="wait"] .swaps-node-dot::after { opacity: 1; transform: scale(1); }

/* ACTIVATION is state-driven: bindRelay() in landing.js advances each node's
   data-state wait→done in turn, so the dot, its pip and its caption resolve
   together — a true left-to-right handshake instead of everything firing at
   once on hover. Degrades to the resolved still under reduced-motion (below). */

/* a resolved node — dot lights to accent, caption swaps, title brightens */
.fdc--swaps .swaps-node[data-state="done"] .swaps-node-dot {
  color: rgb(var(--fa));
  transform: scale(1.06);
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    linear-gradient(160deg, rgba(var(--fa), 0.7), rgba(var(--fa), 0.2)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 22px -12px rgba(var(--fa), 0.8);
}
.fdc--swaps .swaps-node[data-state="done"] .swaps-node-t { color: var(--text); }
.fdc--swaps .swaps-node[data-state="done"] .swaps-node-s .s-wait { opacity: 0; }
.fdc--swaps .swaps-node[data-state="done"] .swaps-node-s .s-done { opacity: 1; }

/* the pip flips from amber "pending" to green "done" the instant its node
   resolves, with one soft ring-pulse so the eye catches the step */
.fdc--swaps .swaps-node[data-state="done"] .swaps-node-dot::after {
  background: rgb(63, 177, 78);
  animation: swaps-pip-pop .7s var(--fdc-ease);
}
@keyframes swaps-pip-pop {
  0%   { box-shadow: 0 0 0 0 rgba(63, 177, 78, 0.55); }
  100% { box-shadow: 0 0 0 9px rgba(63, 177, 78, 0); }
}

/* REWIND CURTAIN — when the loop resets, captions fade out together; while
   they're hidden bindRelay() snaps every node back to "wait" with inner
   transitions off, so the two texts never overlap on the way back either. */
.fdc--swaps .swaps-relay.is-rewinding .swaps-node-s { opacity: 0; }
.fdc--swaps .swaps-relay.is-rewinding .swaps-node-s .s-wait,
.fdc--swaps .swaps-relay.is-rewinding .swaps-node-s .s-done { transition: none; }

/* interaction lift — freezes a readable frame (pause handled in JS) */
.fdc--swaps .swaps-relay:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card), 0 30px 70px -40px rgba(var(--fa), 0.6);
}
@media (hover: hover) {
  .fdc--swaps .swaps-relay:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card), 0 30px 70px -40px rgba(var(--fa), 0.6);
  }
}

/* hint line under the relay */
.fdc--swaps .swaps-relay-hint {
  margin-top: clamp(20px, 2.8vw, 26px);
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}
.fdc--swaps .swaps-relay-hint b { color: rgb(var(--fa)); font-weight: 600; }

/* ---- 2. Transfer vs Swap — CSS-only radio toggle ------------
   Two real modes from the product. Pure :checked, no JS. */

.fdc--swaps .swaps-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fdc--swaps .swaps-mode { position: relative; }
.fdc--swaps .swaps-mode input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.fdc--swaps .swaps-mode label {
  display: block;
  cursor: pointer;
  height: 100%;
  border-radius: var(--r-lg);
  padding: clamp(16px, 2.4vw, 22px);
  border: 1px solid transparent;
  /* distinct, intentional rim — lighter than the relay */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 44%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(155deg, rgba(var(--fa), 0.22), var(--hairline) 56%) border-box;
  transition: transform .5s var(--fdc-spring), box-shadow .45s var(--fdc-ease),
    background .45s var(--fdc-ease);
}
.fdc--swaps .swaps-mode-h {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}
.fdc--swaps .swaps-mode-ic {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: rgb(var(--fa));
  background: rgba(var(--fa), 0.12);
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(var(--fa), 0.12), rgba(var(--fa), 0.12)) padding-box,
    linear-gradient(160deg, rgba(var(--fa), 0.45), transparent) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: transform .55s var(--fdc-spring);
}
.fdc--swaps .swaps-mode-ic svg { width: 20px; height: 20px; }
.fdc--swaps .swaps-mode-h b {
  font-size: 14.5px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.fdc--swaps .swaps-mode-h b small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}
.fdc--swaps .swaps-mode p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
}

/* mini direction diagram inside each mode */
.fdc--swaps .swaps-mode-dia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.fdc--swaps .swaps-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  white-space: nowrap;
}
.fdc--swaps .swaps-mode-dia svg {
  width: 26px;
  height: 16px;
  color: rgb(var(--fa));
  flex: none;
}

/* checked = brighten rim + lift + accent wash; icon nudges */
.fdc--swaps .swaps-mode input:checked + label {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(var(--fa), 0.14), transparent 50%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 44%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(155deg, rgba(var(--fa), 0.6), rgba(var(--fa), 0.16) 60%) border-box;
  box-shadow: var(--shadow-card), 0 18px 44px -30px rgba(var(--fa), 0.8);
}
.fdc--swaps .swaps-mode input:checked + label .swaps-mode-ic { transform: scale(1.08) rotate(-4deg); }
.fdc--swaps .swaps-mode input:focus-visible + label {
  outline: 2px solid rgb(var(--fa));
  outline-offset: 3px;
}
@media (hover: hover) {
  .fdc--swaps .swaps-mode label:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card), 0 20px 46px -32px rgba(var(--fa), 0.7);
  }
  .fdc--swaps .swaps-mode label:hover .swaps-mode-ic { transform: scale(1.06) rotate(-3deg); }
}

/* ---- 3. tighten the bespoke section spacing ------------------ */
.fdc--swaps .swaps-sec-sub {
  margin: -8px 0 22px;
  font-size: 14px;
  color: var(--text-2);
  max-width: 60ch;
}

/* ---- 4. responsive ------------------------------------------ */
@media (max-width: 620px) {
  .fdc--swaps .swaps-modes { grid-template-columns: 1fr; }
  .fdc--swaps .swaps-node-t { font-size: 12px; }
  .fdc--swaps .swaps-rail::before,
  .fdc--swaps .swaps-rail::after { top: 23px; }
  .fdc--swaps .swaps-node-dot { width: 48px; height: 48px; }
}

/* ---- 5. reduced motion: kill bespoke motion, keep final state */
@media (prefers-reduced-motion: reduce) {
  .fdc--swaps .swaps-relay,
  .fdc--swaps .swaps-relay-head,
  .fdc--swaps .swaps-node-dot,
  .fdc--swaps .swaps-node-s,
  .fdc--swaps .swaps-rail::after,
  .fdc--swaps .swaps-mode label,
  .fdc--swaps .swaps-mode-ic {
    transition: none !important;
  }
  /* show the relay in its resolved state so the story still reads */
  .fdc--swaps .swaps-rail::after { width: 78%; }
  .fdc--swaps .swaps-node .swaps-node-dot { color: rgb(var(--fa)); }
  .fdc--swaps .swaps-node .swaps-node-dot::after { background: rgb(63, 177, 78); }
  .fdc--swaps .swaps-node-s .s-wait { opacity: 0; }
  .fdc--swaps .swaps-node-s .s-done { opacity: 1; }
}

/* === FEATURE DETAIL CSS: terminal === */
/* ============================================================
   Feature "market" — Биржа смен · scoped custom CSS
   Every selector is prefixed .fdc--market so it can never leak
   into the shared kit or a sibling deep-dive. Accent is taken
   from the card via rgb(var(--fa)); no hex accents here.
   ============================================================ */

/* ---- 1. Signature: маршрут открытой смены по сети ------------
   A self-playing CSS demo of how an open shift travels the network:
   Точка публикует → видит вся сеть → коллега берёт, вы одобряете.
   Three nodes light in turn on a calm infinite loop while the rail
   fill sweeps to meet them — no JS, degrades to the resolved still. */

.fdc--market .market-rail {
  position: relative;
  border-radius: var(--r-lg);
  padding: clamp(20px, 3.4vw, 30px) clamp(18px, 3vw, 30px) clamp(22px, 3.4vw, 32px);
  border: 1px solid transparent;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--fa), 0.16), transparent 46%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%) padding-box,
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(150deg, rgba(var(--fa), 0.42), var(--hairline) 58%) border-box;
  box-shadow: var(--shadow-card);
}
.fdc--market .market-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(24px, 3.2vw, 32px);
}
.fdc--market .market-rail-head b {
  font-size: clamp(15px, 2vw, 17px);
  letter-spacing: -0.01em;
  color: var(--text);
}
.fdc--market .market-rail-head .market-rail-net {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.fdc--market .market-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
/* track line behind the nodes */
.fdc--market .market-track::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 27px;
  height: 3px;
  border-radius: 3px;
  background: var(--hairline-2);
}
/* progress fill — sweeps to each node in turn, then hands off to the next loop */
.fdc--market .market-track::after {
  content: "";
  position: absolute;
  left: 12%;
  top: 27px;
  height: 3px;
  width: 6%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(var(--fa), 0.5), rgb(var(--fa)));
  box-shadow: 0 0 14px rgba(var(--fa), 0.55);
}
html.js .fdc--market .market-track::after { animation: marketSweep 4.8s var(--fdc-ease) infinite; }
@keyframes marketSweep {
  0%, 6%   { width: 6%;  opacity: .5; }
  40%      { width: 50%; opacity: 1; }
  70%, 84% { width: 88%; opacity: 1; }
  94%,100% { width: 88%; opacity: 0; }
}

.fdc--market .market-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
}
.fdc--market .market-node-dot {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(160deg, var(--hairline-2), var(--hairline)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.fdc--market .market-node-dot svg { width: 23px; height: 23px; }
.fdc--market .market-node-t {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: -0.01em;
}
.fdc--market .market-node-s {
  font-size: 11px;
  color: var(--muted);
  min-height: 14px;
}

/* rolling activation — each node lights in turn, calm infinite wave */
html.js .fdc--market .market-node .market-node-dot {
  animation: marketNode 4.8s var(--fdc-ease) infinite both;
}
html.js .fdc--market .market-node:nth-child(1) .market-node-dot { animation-delay: 0s; }
html.js .fdc--market .market-node:nth-child(2) .market-node-dot { animation-delay: 1s; }
html.js .fdc--market .market-node:nth-child(3) .market-node-dot { animation-delay: 2s; }
@keyframes marketNode {
  0%, 4% {
    color: var(--muted);
    transform: scale(1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  14%, 58% {
    color: rgb(var(--fa));
    transform: scale(1.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 22px -12px rgba(var(--fa), 0.8);
  }
  76%, 100% {
    color: var(--muted);
    transform: scale(1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

.fdc--market .market-rail-hint {
  margin-top: clamp(20px, 2.8vw, 26px);
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}
.fdc--market .market-rail-hint b { color: rgb(var(--fa)); font-weight: 600; }

/* ---- 2. Two ways to share — CSS-only radio toggle -----------
   Broadcast the open shift to the whole network, or target one
   nearby point. Pure :checked, no JS. */

.fdc--market .market-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fdc--market .market-mode { position: relative; }
.fdc--market .market-mode input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.fdc--market .market-mode label {
  display: block;
  cursor: pointer;
  height: 100%;
  border-radius: var(--r-lg);
  padding: clamp(16px, 2.4vw, 22px);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 44%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(155deg, rgba(var(--fa), 0.22), var(--hairline) 56%) border-box;
  transition: transform .5s var(--fdc-spring), box-shadow .45s var(--fdc-ease),
    background .45s var(--fdc-ease);
}
.fdc--market .market-mode-h {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}
.fdc--market .market-mode-ic {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: rgb(var(--fa));
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(var(--fa), 0.12), rgba(var(--fa), 0.12)) padding-box,
    linear-gradient(160deg, rgba(var(--fa), 0.45), transparent) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: transform .55s var(--fdc-spring);
}
.fdc--market .market-mode-ic svg { width: 20px; height: 20px; }
.fdc--market .market-mode-h b {
  font-size: 14.5px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.fdc--market .market-mode-h b small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}
.fdc--market .market-mode p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
}
.fdc--market .market-mode-dia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.fdc--market .market-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  white-space: nowrap;
}
.fdc--market .market-chip--net {
  color: rgb(var(--fa));
  background: rgba(var(--fa), 0.12);
  border-color: rgba(var(--fa), 0.3);
}
.fdc--market .market-mode-dia svg {
  width: 26px;
  height: 16px;
  color: rgb(var(--fa));
  flex: none;
}

/* checked = brighten rim + lift + accent wash; icon nudges */
.fdc--market .market-mode input:checked + label {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(var(--fa), 0.14), transparent 50%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 44%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(155deg, rgba(var(--fa), 0.6), rgba(var(--fa), 0.16) 60%) border-box;
  box-shadow: var(--shadow-card), 0 18px 44px -30px rgba(var(--fa), 0.8);
}
.fdc--market .market-mode input:checked + label .market-mode-ic { transform: scale(1.08) rotate(-4deg); }
.fdc--market .market-mode input:focus-visible + label {
  outline: 2px solid rgb(var(--fa));
  outline-offset: 3px;
}
@media (hover: hover) {
  .fdc--market .market-mode label:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card), 0 20px 46px -32px rgba(var(--fa), 0.7);
  }
  .fdc--market .market-mode label:hover .market-mode-ic { transform: scale(1.06) rotate(-3deg); }
}

/* ---- 3. tighten the bespoke section spacing ----------------- */
.fdc--market .market-sec-sub {
  margin: -8px 0 22px;
  font-size: 14px;
  color: var(--text-2);
  max-width: 60ch;
}

/* ---- 4. responsive ----------------------------------------- */
@media (max-width: 620px) {
  .fdc--market .market-modes { grid-template-columns: 1fr; }
  .fdc--market .market-node-t { font-size: 12px; }
  .fdc--market .market-track::before,
  .fdc--market .market-track::after { top: 24px; }
  .fdc--market .market-node-dot { width: 48px; height: 48px; }
}

/* ---- 5. reduced motion: kill bespoke motion, keep final state */
@media (prefers-reduced-motion: reduce) {
  html.js .fdc--market .market-track::after,
  html.js .fdc--market .market-node .market-node-dot {
    animation: none !important;
  }
  /* show the route in its resolved state so the story still reads */
  .fdc--market .market-track::after { width: 88%; opacity: 1; }
  .fdc--market .market-node .market-node-dot {
    color: rgb(var(--fa));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 22px -12px rgba(var(--fa), 0.8);
  }
}

/* === FEATURE DETAIL CSS: market end === */
/* ============================================================
   Feature deep-dive — "terminal" (Терминал прихода/ухода)
   All selectors scoped under .fdc--terminal. Accent via rgb(var(--fa)).
   ============================================================ */

/* ---------- live demo: scan → event → timesheet ---------- */
.fdc--terminal .term-demo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) auto minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  margin-top: 4px;
}

/* device: heaviest cell — radial accent wash + layered gradient rim */
.fdc--terminal .term-device {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 16px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background:
    radial-gradient(130% 110% at 50% 0%, rgba(var(--fa), 0.16), transparent 60%) padding-box,
    linear-gradient(180deg, var(--surface), var(--bg-2)) padding-box,
    linear-gradient(160deg, rgba(var(--fa), 0.5), var(--hairline) 52%, rgba(255,255,255,0.02)) border-box;
  box-shadow: var(--shadow-card);
  transition: transform .3s var(--fdc-spring), box-shadow .3s var(--fdc-ease);
}

.fdc--terminal .term-cam {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(var(--fa), 0.10), transparent 65%) padding-box,
    linear-gradient(180deg, #0b0b0d, #050506) padding-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.fdc--terminal .term-face {
  width: 46%; height: 46%;
  color: rgba(255,255,255,0.22);
  transition: color .5s var(--fdc-ease);
}
.fdc--terminal .term-corner {
  position: absolute; width: 16px; height: 16px;
  border: 2px solid rgb(var(--fa));
  opacity: .85;
}
.fdc--terminal .term-corner.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.fdc--terminal .term-corner.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.fdc--terminal .term-corner.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.fdc--terminal .term-corner.br { bottom: 10px; right: 10px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }

/* scanning bar */
.fdc--terminal .term-scan {
  position: absolute; left: 12px; right: 12px; top: 14px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--fa)), transparent);
  box-shadow: 0 0 14px 2px rgba(var(--fa), 0.55);
  opacity: 0;
}

/* readout chips */
.fdc--terminal .term-readout { display: flex; flex-direction: column; gap: 4px; min-height: 58px; }
.fdc--terminal .term-ok {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 3px 10px 3px 7px; border-radius: 99px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  color: rgb(var(--fa));
  background:
    linear-gradient(rgba(var(--fa),0.16), rgba(var(--fa),0.08)) padding-box,
    linear-gradient(180deg, rgba(var(--fa),0.55), rgba(var(--fa),0.2)) border-box;
  border: 1px solid transparent;
  opacity: 0; transform: scale(.94);
  transition: opacity .35s var(--fdc-ease), transform .35s var(--fdc-spring);
}
.fdc--terminal .term-ok svg { width: 13px; height: 13px; }
.fdc--terminal .term-name { font-size: 15px; font-weight: 700; color: var(--text); }
.fdc--terminal .term-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* the pipe / arrow between device and sheet */
.fdc--terminal .term-pipe {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  color: rgb(var(--fa));
}
.fdc--terminal .term-arrow {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(var(--fa),0.14), rgba(var(--fa),0.06)) padding-box,
    linear-gradient(180deg, rgba(var(--fa),0.55), rgba(var(--fa),0.18)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.fdc--terminal .term-arrow svg { width: 18px; height: 18px; }
.fdc--terminal .term-pipe-l {
  font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--muted);
  text-align: center; max-width: 70px; line-height: 1.25;
}

/* timesheet: mid-weight — top-light fill + 160deg accent rim */
.fdc--terminal .term-sheet {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 44%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(160deg, rgba(var(--fa), 0.32), var(--hairline) 56%) border-box;
  box-shadow: var(--shadow-card);
  transition: transform .3s var(--fdc-spring), box-shadow .3s var(--fdc-ease);
}
.fdc--terminal .term-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: var(--r);
  background: rgba(255,255,255,0.022);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  opacity: 0; transform: translateY(8px);
}
.fdc--terminal .term-dot { width: 8px; height: 8px; border-radius: 50%; }
.fdc--terminal .term-dot.in   { background: rgb(63,177,78);   box-shadow: 0 0 8px rgba(63,177,78,0.7); }
.fdc--terminal .term-dot.late { background: var(--orange);    box-shadow: 0 0 8px rgba(255,149,0,0.6); }
.fdc--terminal .term-dot.out  { background: var(--blue-soft); box-shadow: 0 0 8px rgba(157,186,224,0.5); }
.fdc--terminal .term-rn { font-size: 13px; font-weight: 600; color: var(--text); }
.fdc--terminal .term-rt { display: none; }
.fdc--terminal .term-rv { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; justify-self: end; }
.fdc--terminal .term-row--late .term-rv { color: var(--orange); font-weight: 600; }

.fdc--terminal .term-cap {
  margin: 18px auto 0; max-width: 720px; text-align: center;
  font-size: 14.5px; line-height: 1.55; color: var(--text-2);
}

/* hover replays / intensifies the demo */
@media (hover: hover) {
  .fdc--terminal .term-demo:hover .term-device { transform: translateY(-3px); box-shadow: var(--shadow-card), 0 22px 48px -26px rgba(var(--fa), 0.55); }
  .fdc--terminal .term-demo:hover .term-sheet  { transform: translateY(-3px); box-shadow: var(--shadow-card), 0 22px 48px -26px rgba(var(--fa), 0.4); }
}

/* ---------- auto-play once the overlay reveals ---------- */
.fd-rich.is-revealed .fdc--terminal .term-scan { animation: term-scan-run 2s var(--fdc-ease) .25s 2; }
.fd-rich.is-revealed .fdc--terminal .term-face { animation: term-face-lock 2.4s var(--fdc-ease) .25s forwards; }
.fd-rich.is-revealed .fdc--terminal .term-ok   { animation: term-pop-in .5s var(--fdc-spring) 1.35s forwards; }
.fd-rich.is-revealed .fdc--terminal .term-row--in   { animation: term-row-in .5s var(--fdc-spring) 1.55s forwards; }
.fd-rich.is-revealed .fdc--terminal .term-row--late { animation: term-row-in .5s var(--fdc-spring) 1.75s forwards; }
.fd-rich.is-revealed .fdc--terminal .term-row--out  { animation: term-row-in .5s var(--fdc-spring) 1.95s forwards; }

@keyframes term-scan-run {
  0%   { opacity: 0; transform: translateY(0); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(100% + 56px)); }
}
@keyframes term-face-lock {
  0%, 55% { color: rgba(255,255,255,0.22); }
  100%    { color: rgb(var(--fa)); }
}
@keyframes term-pop-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes term-row-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- verify-method switcher (CSS-only radios) ---------- */
.fdc--terminal .term-modes {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: stretch;
}
.fdc--terminal .term-radio { position: absolute; opacity: 0; pointer-events: none; }
.fdc--terminal .term-modes-tabs { display: flex; flex-direction: column; gap: 8px; }
.fdc--terminal .term-tab {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px;
  border-radius: var(--r);
  cursor: pointer;
  color: var(--text-2);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), transparent 60%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(160deg, var(--hairline), rgba(255,255,255,0.03)) border-box;
  transition: transform .22s var(--fdc-spring), color .22s var(--fdc-ease), background .22s var(--fdc-ease);
}
.fdc--terminal .term-tab svg { width: 20px; height: 20px; flex: none; }
.fdc--terminal .term-tab span { font-size: 14px; font-weight: 600; }

@media (hover: hover) {
  .fdc--terminal .term-tab:hover { transform: translateX(2px); color: var(--text); }
}

/* checked tab — accent rim + tint + scaled icon */
.fdc--terminal #term-m-face:checked  ~ .term-modes-tabs label[for="term-m-face"],
.fdc--terminal #term-m-fp:checked    ~ .term-modes-tabs label[for="term-m-fp"],
.fdc--terminal #term-m-card:checked  ~ .term-modes-tabs label[for="term-m-card"],
.fdc--terminal #term-m-pin:checked   ~ .term-modes-tabs label[for="term-m-pin"] {
  color: rgb(var(--fa));
  background:
    radial-gradient(120% 120% at 0% 50%, rgba(var(--fa),0.16), transparent 62%) padding-box,
    linear-gradient(var(--surface), var(--bg-2)) padding-box,
    linear-gradient(155deg, rgba(var(--fa),0.55), var(--hairline) 50%) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 12px 26px -18px rgba(var(--fa),0.7);
}
.fdc--terminal .term-radio:focus-visible ~ .term-modes-tabs label { outline-offset: 2px; }
.fdc--terminal #term-m-face:focus-visible  ~ .term-modes-tabs label[for="term-m-face"],
.fdc--terminal #term-m-fp:focus-visible    ~ .term-modes-tabs label[for="term-m-fp"],
.fdc--terminal #term-m-card:focus-visible  ~ .term-modes-tabs label[for="term-m-card"],
.fdc--terminal #term-m-pin:focus-visible   ~ .term-modes-tabs label[for="term-m-pin"] {
  outline: 2px solid rgb(var(--fa)); outline-offset: 2px;
}

/* stage — heavier plate that holds the active panel */
.fdc--terminal .term-modes-stage {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background:
    radial-gradient(120% 110% at 100% 0%, rgba(var(--fa),0.14), transparent 60%) padding-box,
    linear-gradient(180deg, var(--surface), var(--bg-2)) padding-box,
    linear-gradient(155deg, rgba(var(--fa),0.45), var(--hairline) 50%) border-box;
  box-shadow: var(--shadow-card);
  display: grid;
}
.fdc--terminal .term-mode-panel {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: 10px;
  justify-content: center;
  padding: clamp(20px, 3vw, 30px);
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity .45s var(--fdc-ease), transform .45s var(--fdc-spring);
}
.fdc--terminal .term-mode-panel b { font-size: 18px; font-weight: 700; color: rgb(var(--fa)); }
.fdc--terminal .term-mode-panel p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); margin: 0; }

.fdc--terminal #term-m-face:checked ~ .term-modes-stage [data-mode="face"],
.fdc--terminal #term-m-fp:checked   ~ .term-modes-stage [data-mode="fp"],
.fdc--terminal #term-m-card:checked ~ .term-modes-stage [data-mode="card"],
.fdc--terminal #term-m-pin:checked  ~ .term-modes-stage [data-mode="pin"] {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .fdc--terminal .term-demo { grid-template-columns: 1fr; }
  .fdc--terminal .term-pipe { flex-direction: row; gap: 10px; justify-content: center; }
  .fdc--terminal .term-pipe .term-arrow { transform: rotate(90deg); }
  .fdc--terminal .term-pipe-l { max-width: none; }
  .fdc--terminal .term-modes { grid-template-columns: 1fr; }
  .fdc--terminal .term-modes-tabs { flex-direction: row; flex-wrap: wrap; }
  .fdc--terminal .term-tab { flex: 1 1 calc(50% - 4px); }
}

/* ---------- reduced motion: show final state, no looping ---------- */
@media (prefers-reduced-motion: reduce) {
  .fd-rich.is-revealed .fdc--terminal .term-scan,
  .fd-rich.is-revealed .fdc--terminal .term-face,
  .fd-rich.is-revealed .fdc--terminal .term-ok,
  .fd-rich.is-revealed .fdc--terminal .term-row--in,
  .fd-rich.is-revealed .fdc--terminal .term-row--late,
  .fd-rich.is-revealed .fdc--terminal .term-row--out { animation: none; }
  .fdc--terminal .term-scan { opacity: 0; }
  .fdc--terminal .term-face { color: rgb(var(--fa)); }
  .fdc--terminal .term-ok { opacity: 1; transform: none; }
  .fdc--terminal .term-row { opacity: 1; transform: none; }
  .fdc--terminal .term-tab,
  .fdc--terminal .term-mode-panel,
  .fdc--terminal .term-device,
  .fdc--terminal .term-sheet { transition: none; }
}

/* === FEATURE DETAIL CSS: tasks === */
/* ============================================================
   Feature deep-dive — "tasks" (Задачи для сотрудников)
   All selectors scoped under .fdc--tasks. Accent via rgb(var(--fa)).
   Centerpiece: a CSS-only "live shift checklist" demo that auto-fills
   on entrance (keyed off the host .fd-rich.is-revealed) and is also
   hover-interactive per row. No JS. Reduced-motion + no-JS safe.
   ============================================================ */

/* ---- demo shell: heaviest "device-like" surface in the page ---- */
.fdc--tasks .fdt-demo {
  position: relative;
  padding: clamp(18px, 3vw, 26px);
  border-radius: var(--r-xl);
  border: 1px solid transparent;
  /* layered border-box rim: accent corner-wash + solid base + accent→hairline rim
     (every non-final layer is a gradient — required by the shorthand). */
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(var(--fa), 0.17), transparent 56%) padding-box,
    linear-gradient(180deg, var(--surface), var(--bg-2)) padding-box,
    linear-gradient(155deg, rgba(var(--fa), 0.55), var(--hairline-2) 44%, rgba(255,255,255,0.02)) border-box;
  box-shadow: var(--shadow-card), 0 30px 70px -38px rgba(0,0,0,0.85);
  overflow: hidden;
}
/* soft ambient sheen across the demo top */
.fdc--tasks .fdt-demo::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 30%);
  pointer-events: none;
}

.fdc--tasks .fdt-demo-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.fdc--tasks .fdt-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 99px;
  font-size: 13px; font-weight: 600; color: rgb(var(--fa));
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(var(--fa),0.14), rgba(var(--fa),0.07)) padding-box,
    linear-gradient(180deg, rgba(var(--fa),0.5), rgba(var(--fa),0.16)) border-box;
}
.fdc--tasks .fdt-chip-dot {
  width: 7px; height: 7px; border-radius: 99px; background: rgb(var(--fa));
  box-shadow: 0 0 0 0 rgba(var(--fa), 0.55);
  animation: fdt-pulse 2.4s var(--fdc-ease) infinite;
}
@keyframes fdt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--fa), 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--fa), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--fa), 0); }
}
.fdc--tasks .fdt-prog {
  font-size: 13px; font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.fdc--tasks .fdt-prog-n { color: rgb(var(--fa)); font-weight: 800; }

/* ---- progress bar: fills as the list ticks ---- */
.fdc--tasks .fdt-bar {
  position: relative; height: 6px; border-radius: 99px;
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.4);
  overflow: hidden; margin-bottom: 16px;
}
.fdc--tasks .fdt-fill {
  position: absolute; inset: 0 100% 0 0; /* width via right inset → 0% */
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(var(--fa),0.65), rgb(var(--fa)));
  box-shadow: 0 0 12px -2px rgba(var(--fa), 0.7);
}

/* ---- the rows ---- */
.fdc--tasks .fdt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fdc--tasks .fdt-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r);
  border: 1px solid transparent;
  /* mid-weight rim, distinct from the demo shell */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), transparent 60%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(160deg, rgba(var(--fa),0.22), var(--hairline) 60%) border-box;
  transition: transform .24s var(--fdc-spring), border-color .24s var(--fdc-ease), background .3s var(--fdc-ease);
}
.fdc--tasks .fdt-box {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  transition: background .3s var(--fdc-ease), border-color .3s var(--fdc-ease), transform .3s var(--fdc-spring);
}
.fdc--tasks .fdt-ck {
  width: 14px; height: 14px; color: #fff;
  /* draw-on check: animate the stroke */
  stroke-dasharray: 26; stroke-dashoffset: 26;
  transition: stroke-dashoffset .35s var(--fdc-ease);
}
.fdc--tasks .fdt-tx {
  flex: 1 1 auto; min-width: 0;
  font-size: 14.5px; line-height: 1.35; color: var(--text);
  transition: color .3s var(--fdc-ease);
}
.fdc--tasks .fdt-meta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: var(--muted);
  padding: 3px 9px; border-radius: 99px;
  border: 1px solid var(--hairline);
  white-space: nowrap;
  transition: color .3s var(--fdc-ease), border-color .3s var(--fdc-ease), background .3s var(--fdc-ease);
}
.fdc--tasks .fdt-meta svg { width: 12px; height: 12px; }
.fdc--tasks .fdt-meta-photo { color: rgb(var(--fa)); border-color: rgba(var(--fa),0.4); background: rgba(var(--fa),0.10); }
.fdc--tasks .fdt-meta-hi { color: #E9889A; border-color: rgba(224,120,138,0.45); background: rgba(224,120,138,0.10); }

/* === DONE state (shared by auto-fill + hover) ============= */
.fdc--tasks .fdt-item.is-on .fdt-box,
.fdc--tasks .fdt-demo:hover .fdt-item:hover .fdt-box {
  background: linear-gradient(135deg, rgb(var(--fa)), color-mix(in srgb, rgb(var(--fa)) 60%, #fff));
  border-color: transparent;
  transform: scale(1.06);
}
.fdc--tasks .fdt-item.is-on .fdt-ck,
.fdc--tasks .fdt-demo:hover .fdt-item:hover .fdt-ck { stroke-dashoffset: 0; }
.fdc--tasks .fdt-item.is-on .fdt-tx,
.fdc--tasks .fdt-demo:hover .fdt-item:hover .fdt-tx { color: var(--text-2); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.25); }
.fdc--tasks .fdt-item.is-on .fdt-meta:not(.fdt-meta-photo):not(.fdt-meta-hi),
.fdc--tasks .fdt-demo:hover .fdt-item:hover .fdt-meta:not(.fdt-meta-photo):not(.fdt-meta-hi) {
  color: #8DD485; border-color: rgba(63,177,78,0.4); background: rgba(63,177,78,0.10);
}

/* hover on a row also lifts + brightens its rim */
@media (hover: hover) {
  .fdc--tasks .fdt-item:hover {
    transform: translateX(3px);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%) padding-box,
      linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
      linear-gradient(160deg, rgba(var(--fa),0.55), var(--hairline-2) 60%) border-box;
  }
}

.fdc--tasks .fdt-demo-foot {
  position: relative;
  margin: 16px 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--muted);
}

/* ============================================================
   AUTO-PLAY on entrance — keyed off the host reveal class so it
   plays whenever the overlay opens (content is re-cloned each time,
   so the animation re-runs naturally). Resting state = fully done
   and visible, so no-JS / pre-reveal never loses content.
   ============================================================ */

/* resting (no-JS / pre-reveal): show as completed-but-static so the cell
   is meaningful even if the reveal class never lands. */
.fdc--tasks .fdt-fill { right: 0; }
.fdc--tasks .fdt-item { /* base rim already set; checks shown via .is-on only */ }

/* when revealed, REPLAY the fill from 0 → 100% and tick rows in sequence */
.fd-rich.is-revealed .fdc--tasks .fdt-fill {
  animation: fdt-fill 2.6s var(--fdc-ease) .45s both;
}
@keyframes fdt-fill {
  0%   { right: 100%; }
  18%  { right: 75%; }  /* after row 1 */
  42%  { right: 50%; }  /* after row 2 */
  66%  { right: 25%; }  /* after row 3 */
  100% { right: 0%; }   /* after row 4 */
}

/* progress number ticks 0→1→2→3→4 in sync with the fill.
   The literal "0" in the <b> is hidden; a ::before pseudo shows the
   animated count (content keyframes on a pseudo-element are supported).
   Resting (no anim): ::before shows "4" so it reads complete. */
.fdc--tasks .fdt-prog-n { position: relative; color: transparent; }
.fdc--tasks .fdt-prog-n::before {
  content: "4"; position: absolute; left: 0; top: 0;
  color: rgb(var(--fa)); font-weight: 800;
}
.fd-rich.is-revealed .fdc--tasks .fdt-prog-n::before {
  animation: fdt-num 2.6s steps(4, jump-none) .45s both;
}
@keyframes fdt-num {
  0%   { content: "0"; }
  18%  { content: "1"; }
  42%  { content: "2"; }
  66%  { content: "3"; }
  100% { content: "4"; }
}

/* each row auto-checks with a staggered delay; uses the same .is-on visuals
   via a dedicated keyframe so it is independent of any toggled class. */
.fd-rich.is-revealed .fdc--tasks .fdt-item .fdt-box { animation: fdt-box-on .4s var(--fdc-spring) both; animation-delay: calc(.55s + var(--i) * .55s); }
.fd-rich.is-revealed .fdc--tasks .fdt-item .fdt-ck  { animation: fdt-ck-on .4s var(--fdc-ease) both;   animation-delay: calc(.62s + var(--i) * .55s); }
.fd-rich.is-revealed .fdc--tasks .fdt-item .fdt-tx  { animation: fdt-tx-on .4s var(--fdc-ease) both;   animation-delay: calc(.62s + var(--i) * .55s); }
.fd-rich.is-revealed .fdc--tasks .fdt-item .fdt-meta:not(.fdt-meta-photo):not(.fdt-meta-hi) {
  animation: fdt-meta-on .4s var(--fdc-ease) both; animation-delay: calc(.62s + var(--i) * .55s);
}

@keyframes fdt-box-on {
  from { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.18); transform: scale(1); }
  60%  { transform: scale(1.14); }
  to   { background: linear-gradient(135deg, rgb(var(--fa)), color-mix(in srgb, rgb(var(--fa)) 60%, #fff)); border-color: transparent; transform: scale(1.06); }
}
@keyframes fdt-ck-on { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }
@keyframes fdt-tx-on {
  from { color: var(--text); }
  to   { color: var(--text-2); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.25); }
}
@keyframes fdt-meta-on {
  from { color: var(--muted); border-color: var(--hairline); background: transparent; }
  to   { color: #8DD485; border-color: rgba(63,177,78,0.4); background: rgba(63,177,78,0.10); }
}

/* photo row's meta pulses subtly while "being completed" */
.fd-rich.is-revealed .fdc--tasks .fdt-item[style*="--i:1"] .fdt-meta-photo {
  animation: fdt-photo-flash 1.1s var(--fdc-ease) 1.45s 1 both;
}
@keyframes fdt-photo-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--fa), 0); }
  40%      { box-shadow: 0 0 0 4px rgba(var(--fa), 0.18); }
}

/* keep the resting (final) visual after animations finish: rows that have
   played should LOOK done. Because keyframes use `both`, the final frame
   sticks — so once revealed, rows remain checked. Hover still re-triggers
   the row-level done look interactively. */

/* ============================================================
   Reduced motion: no auto-play, no pulse. Show the demo in a clear,
   meaningful static state (progress full, rows checked).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fdc--tasks .fdt-chip-dot { animation: none; }
  .fdc--tasks .fdt-fill,
  .fd-rich.is-revealed .fdc--tasks .fdt-fill { animation: none; right: 25%; } /* 3/4 done, matches "3/4" story */
  .fd-rich.is-revealed .fdc--tasks .fdt-item .fdt-box,
  .fd-rich.is-revealed .fdc--tasks .fdt-item .fdt-ck,
  .fd-rich.is-revealed .fdc--tasks .fdt-item .fdt-tx,
  .fd-rich.is-revealed .fdc--tasks .fdt-item .fdt-meta { animation: none; }
  /* statically mark the first three rows done */
  .fdc--tasks .fdt-item:nth-child(-n+3) .fdt-box {
    background: linear-gradient(135deg, rgb(var(--fa)), color-mix(in srgb, rgb(var(--fa)) 60%, #fff));
    border-color: transparent;
  }
  .fdc--tasks .fdt-item:nth-child(-n+3) .fdt-ck { stroke-dashoffset: 0; }
  .fdc--tasks .fdt-item:nth-child(-n+3) .fdt-tx { color: var(--text-2); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.25); }
  .fdc--tasks .fdt-item:nth-child(-n+3) .fdt-meta:not(.fdt-meta-photo):not(.fdt-meta-hi) { color: #8DD485; border-color: rgba(63,177,78,0.4); background: rgba(63,177,78,0.10); }
  .fdc--tasks .fdt-prog-n::before { content: "3"; animation: none; }
}

/* small screens: keep the meta tags from crowding the text */
@media (max-width: 560px) {
  .fdc--tasks .fdt-tx { font-size: 13.5px; }
  .fdc--tasks .fdt-meta { font-size: 10.5px; padding: 2px 7px; }
}

/* === FEATURE DETAIL CSS: chat === */
/* ============================================================================
   Feature deep-dive — "chat" (Чаты). All selectors scoped under .fdc--chat.
   Accent strictly via rgb(var(--fa)) / rgba(var(--fa),x). No hardcoded hex
   accents. Reuses shared tokens (--bg-1, --bg-2, --surface, --r-lg, --hairline,
   --shadow-card, --fdc-spring, --fdc-ease). One feature-specific interactive
   element: a CSS-only channel switcher with a live, streaming demo thread.
   ============================================================================ */

/* ---- interactive chat stage: the shell ---------------------------------- */
/* Heaviest cell type here. Gradient border-box rim (accent -> hairline),
   radial accent corner wash, top-light inset, project elevation token. */
.fdc--chat .chat-stage {
  position: relative;
  border-radius: var(--r-xl);
  padding: 6px;
  border: 1px solid transparent;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(var(--fa), 0.18), transparent 55%) padding-box,
    linear-gradient(180deg, var(--surface), var(--bg-1)) padding-box,
    linear-gradient(150deg, rgba(var(--fa), 0.55), var(--hairline) 50%, rgba(255, 255, 255, 0.02)) border-box;
  box-shadow: var(--shadow-card), 0 36px 90px -50px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}
/* ambient accent blob, slow oscillation (design-intel: cinematic dark) */
.fdc--chat .chat-stage::before {
  content: "";
  position: absolute;
  inset: -40% 30% auto -20%;
  height: 260px;
  background: radial-gradient(closest-side, rgba(var(--fa), 0.20), transparent 70%);
  filter: blur(8px);
  opacity: 0.9;
  pointer-events: none;
  animation: csBlob 14s ease-in-out infinite alternate;
}
@keyframes csBlob {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(60px, 28px, 0) scale(1.12); }
}

/* ---- tabs (radio-driven, CSS-only) -------------------------------------- */
.fdc--chat .chat-stage-tabs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px;
}
.fdc--chat .cs-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.fdc--chat .cs-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--r);
  cursor: pointer;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 60%) padding-box,
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(160deg, var(--hairline), rgba(255, 255, 255, 0.02)) border-box;
  transition:
    transform 0.24s var(--fdc-spring),
    background 0.26s var(--fdc-ease),
    border-color 0.26s var(--fdc-ease);
}
.fdc--chat .cs-tab-ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: color 0.26s var(--fdc-ease), background 0.26s var(--fdc-ease), transform 0.26s var(--fdc-spring);
}
.fdc--chat .cs-tab-ic svg { width: 16px; height: 16px; }
.fdc--chat .cs-tab-tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.fdc--chat .cs-tab-tx b { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.fdc--chat .cs-tab-tx i { font-style: normal; font-size: 10.5px; color: var(--muted); margin-top: 2px; }

@media (hover: hover) {
  .fdc--chat .cs-tab:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--fa), 0.32);
  }
  .fdc--chat .cs-tab:hover .cs-tab-ic { color: rgb(var(--fa)); transform: scale(1.06); }
}

/* checked state — accent rim + accent icon tile */
.fdc--chat .cs-radio:checked + .cs-tab {
  border-color: transparent;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(var(--fa), 0.20), transparent 60%) padding-box,
    linear-gradient(var(--surface), var(--bg-2)) padding-box,
    linear-gradient(150deg, rgba(var(--fa), 0.65), rgba(var(--fa), 0.12) 60%) border-box;
  box-shadow: 0 10px 26px -16px rgba(var(--fa), 0.7);
}
.fdc--chat .cs-radio:checked + .cs-tab .cs-tab-ic {
  color: #fff;
  background: linear-gradient(150deg, rgb(var(--fa)), rgba(var(--fa), 0.7));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 14px -8px rgba(var(--fa), 0.8);
}
.fdc--chat .cs-radio:checked + .cs-tab .cs-tab-tx i { color: rgb(var(--fa)); }
.fdc--chat .cs-radio:focus-visible + .cs-tab {
  outline: 2px solid rgb(var(--fa));
  outline-offset: 2px;
}

/* ---- the panel + thread switching --------------------------------------- */
.fdc--chat .chat-stage-panel {
  position: relative;
  z-index: 1;
  margin: 0 6px;
  padding: 16px 16px 14px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(165deg, rgba(var(--fa), 0.22), var(--hairline) 55%) border-box;
  min-height: 318px;
}
.fdc--chat .cs-thread { display: none; flex-direction: column; gap: 11px; }
/* default visible (no-JS / pre-radio-evaluation safety) — first thread shows */
.fdc--chat #cs-shift:checked ~ .chat-stage-panel .cs-thread[data-ch="shift"],
.fdc--chat #cs-ann:checked   ~ .chat-stage-panel .cs-thread[data-ch="ann"],
.fdc--chat #cs-dm:checked    ~ .chat-stage-panel .cs-thread[data-ch="dm"] {
  display: flex;
}

/* thread header bar */
.fdc--chat .cs-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 11px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--hairline);
}
.fdc--chat .cs-ldot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(63, 177, 78, 0.5);
  animation: csPulse 2.4s ease-out infinite;
}
@keyframes csPulse {
  0%   { box-shadow: 0 0 0 0 rgba(63, 177, 78, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(63, 177, 78, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 177, 78, 0); }
}
.fdc--chat .cs-lock {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 7px; color: rgb(var(--fa));
  background: rgba(var(--fa), 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.fdc--chat .cs-lock svg { width: 13px; height: 13px; }
.fdc--chat .cs-bar-t { font-size: 13px; font-weight: 700; color: var(--text); }
.fdc--chat .cs-bar-s { margin-left: auto; font-size: 11px; color: var(--muted); }

/* messages */
.fdc--chat .cs-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 86%;
}
.fdc--chat .cs-out { align-self: flex-end; flex-direction: row-reverse; }
.fdc--chat .cs-av {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  font-size: 10.5px; font-weight: 700; color: #fff; letter-spacing: 0.02em;
  background: linear-gradient(150deg, rgb(var(--av)), rgba(var(--av), 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.fdc--chat .cs-bub {
  position: relative;
  padding: 9px 12px;
  border-radius: 14px;
  border-bottom-left-radius: 5px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
}
.fdc--chat .cs-bub b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--purple-soft);
  margin-bottom: 3px;
}
.fdc--chat .cs-bub-me {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 5px;
  color: var(--text);
  border-color: rgba(var(--fa), 0.32);
  background: linear-gradient(180deg, rgba(var(--fa), 0.20), rgba(var(--fa), 0.10));
}
/* sent / read tick */
.fdc--chat .cs-tick {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 7px;
  color: rgb(var(--fa));
}
.fdc--chat .cs-tick svg { width: 14px; height: 11px; }

/* inline mention chip */
.fdc--chat .cs-mention {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: rgb(var(--fa));
  background: rgba(var(--fa), 0.14);
  border: 1px solid rgba(var(--fa), 0.3);
}

/* attachment chip */
.fdc--chat .cs-att {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(150deg, rgba(var(--fa), 0.4), var(--hairline) 60%) border-box;
}
.fdc--chat .cs-att-ic {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 7px; color: rgb(var(--fa));
  background: rgba(var(--fa), 0.14);
}
.fdc--chat .cs-att-ic svg { width: 14px; height: 14px; }
.fdc--chat .cs-att-tx { display: flex; flex-direction: column; line-height: 1.25; }
.fdc--chat .cs-att-tx b { display: block; margin: 0; font-size: 12px; color: var(--text); }
.fdc--chat .cs-att-tx i { font-style: normal; font-size: 10.5px; color: rgb(var(--fa)); }

/* reaction chip */
.fdc--chat .cs-react {
  display: inline-flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: rgb(var(--fa));
  background: rgba(var(--fa), 0.14);
  border: 1px solid rgba(var(--fa), 0.3);
}
.fdc--chat .cs-react-e { letter-spacing: 0.02em; }

/* read-only banner (announcement channel) */
.fdc--chat .cs-readonly {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  padding: 11px 13px;
  border-radius: var(--r);
  font-size: 12px;
  color: var(--text-2);
  border: 1px dashed rgba(var(--fa), 0.4);
  background: rgba(var(--fa), 0.06);
}
.fdc--chat .cs-lock-sm {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 7px; color: rgb(var(--fa));
  background: rgba(var(--fa), 0.14);
}
.fdc--chat .cs-lock-sm svg { width: 12px; height: 12px; }

/* typing indicator */
.fdc--chat .cs-bub-typing {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 12px 13px;
}
.fdc--chat .cs-bub-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  animation: csTyped 1.2s ease-in-out infinite;
}
.fdc--chat .cs-bub-typing i:nth-child(2) { animation-delay: 0.18s; }
.fdc--chat .cs-bub-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes csTyped {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* composer mock footer */
.fdc--chat .chat-stage-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(160deg, var(--hairline), rgba(255, 255, 255, 0.02)) border-box;
}
.fdc--chat .cs-foot-ic { display: grid; place-items: center; color: var(--muted); flex: none; }
.fdc--chat .cs-foot-ic svg { width: 18px; height: 18px; }
.fdc--chat .cs-foot-input { flex: 1; font-size: 13px; color: var(--muted-2); }
.fdc--chat .cs-foot-send {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 10px; color: #fff;
  background: linear-gradient(150deg, rgb(var(--fa)), rgba(var(--fa), 0.7));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 18px -10px rgba(var(--fa), 0.8);
  transition: transform 0.24s var(--fdc-spring);
}
.fdc--chat .cs-foot-send svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .fdc--chat .chat-stage:hover .cs-foot-send { transform: scale(1.05); }
}
/* announcement channel: composer reads as locked */
.fdc--chat #cs-ann:checked ~ .chat-stage-foot .cs-foot-input { color: var(--muted); }
.fdc--chat #cs-ann:checked ~ .chat-stage-foot .cs-foot-send {
  background: var(--surface-2);
  color: var(--muted);
  box-shadow: none;
}

.fdc--chat .chat-stage-hint {
  margin-top: 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---- entrance: messages stream in when overlay reveals ------------------ */
/* Keyed off the host reveal class (.fd-rich.is-revealed) — mirrors the base
   reveal pattern; custom element is fully visible by default otherwise. */
.fdc--chat .cs-msg {
  opacity: 1;
  transform: none;
}
.fd-rich.is-revealed .fdc--chat .cs-thread:not([hidden]) .cs-msg {
  opacity: 0;
  transform: translateY(10px);
  animation: csMsgIn 0.5s var(--fdc-spring) forwards;
  animation-delay: calc(0.5s + var(--m) * 0.45s);
}
@keyframes csMsgIn {
  to { opacity: 1; transform: translateY(0); }
}
/* re-stream on each channel switch: restart the entrance for the now-checked thread */
.fdc--chat .cs-radio:checked ~ .chat-stage-panel .cs-thread .cs-msg {
  opacity: 0;
  transform: translateY(10px);
  animation: csMsgIn 0.5s var(--fdc-spring) forwards;
  animation-delay: calc(var(--m) * 0.32s);
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 600px) {
  .fdc--chat .chat-stage-tabs { grid-template-columns: 1fr; }
  .fdc--chat .cs-tab-tx b { white-space: normal; }
  .fdc--chat .chat-stage-panel { min-height: 0; }
  .fdc--chat .cs-msg { max-width: 94%; }
}

/* ---- reduced motion: kill all custom motion, force final visible state --- */
@media (prefers-reduced-motion: reduce) {
  .fdc--chat .chat-stage::before { animation: none; }
  .fdc--chat .cs-ldot { animation: none; }
  .fdc--chat .cs-bub-typing i { animation: none; opacity: 0.6; }
  .fdc--chat .cs-msg,
  .fd-rich.is-revealed .fdc--chat .cs-thread:not([hidden]) .cs-msg,
  .fdc--chat .cs-radio:checked ~ .chat-stage-panel .cs-thread .cs-msg {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .fdc--chat .cs-tab,
  .fdc--chat .cs-tab-ic,
  .fdc--chat .cs-foot-send { transition: none; }
}

/* === FEATURE DETAIL CSS: transfer === */
/* =========================================================================
   Feature deep-dive: "transfer" — Автоперенос: график и ФОТ
   All selectors scoped under .fdc--transfer. Accent via rgb(var(--fa)) only.
   Two interactive pieces:
     1. .tf-pipe — animated data-flow rail where a packet sweeps
        terminal → план/факт → Т-13 → ФОТ and lights each node as it arrives.
     2. .tf-cut  — hover/focus-reveal план/факт/зачтено bars (вычет перерыва).
   ========================================================================= */

/* ---------- 1. DATA-FLOW PIPE ------------------------------------------- */
.fdc--transfer .tf-pipe {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 clamp(28px, 4vw, 40px);
  padding: clamp(22px, 3vw, 30px) clamp(16px, 2.6vw, 26px) clamp(20px, 2.8vw, 26px);
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  /* heavier "transport surface": radial accent wash + surface fill + accent rim */
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(var(--fa), 0.14), transparent 60%) padding-box,
    linear-gradient(180deg, var(--surface), var(--bg-2)) padding-box,
    linear-gradient(150deg, rgba(var(--fa), 0.46), var(--hairline) 52%, rgba(255, 255, 255, 0.02)) border-box;
  box-shadow: var(--shadow-card);
}

/* the rail the packet travels along — sits behind the stage nodes */
.fdc--transfer .tf-rail {
  position: absolute;
  /* span the content box (== the pipe's horizontal padding) so the packet's
     0%→100% travel maps onto the node centres and the light-ups stay in sync */
  left: clamp(16px, 2.6vw, 26px);
  right: clamp(16px, 2.6vw, 26px);
  top: calc(clamp(22px, 3vw, 30px) + 23px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(var(--fa), 0.10), rgba(var(--fa), 0.32), rgba(var(--fa), 0.10));
  overflow: visible;
}
/* a comet/packet that runs the rail once content reveals, then loops gently */
.fdc--transfer .tf-pkt {
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 6px;
  margin-top: -3px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgb(var(--fa)));
  box-shadow: 0 0 14px 2px rgba(var(--fa), 0.55);
  opacity: 0;
}

.fdc--transfer .tf-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.fdc--transfer .tf-ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: rgb(var(--fa));
  border: 1px solid transparent;
  /* SOLID tile: an opaque surface base under the accent tint, so the rail
     never shows through the node (was a see-through accent-only wash) */
  background:
    linear-gradient(180deg, rgba(var(--fa), 0.30), rgba(var(--fa), 0.10)) padding-box,
    linear-gradient(180deg, var(--surface-2), var(--bg-2)) padding-box,
    linear-gradient(180deg, rgba(var(--fa), 0.72), rgba(var(--fa), 0.22)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 16px -10px rgba(var(--fa), 0.55);
  /* resting = fully opaque & readable; the packet adds a glow as it passes */
  transition: transform .3s var(--fdc-spring), box-shadow .3s var(--fdc-ease), filter .3s var(--fdc-ease);
}
.fdc--transfer .tf-ic svg { width: 23px; height: 23px; }
.fdc--transfer .tf-stage-t { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.fdc--transfer .tf-stage-s { font-size: 11.5px; line-height: 1.35; color: var(--muted); max-width: 15ch; }

/* connector arrow between stages (skip the last) — a clean chevron centred
   in the gap at the icon's vertical midline */
.fdc--transfer .tf-stage:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 19.5px;                 /* box centre lands on the 46px icon's midline (23px) */
  left: calc(100% + 2.5px);    /* box centre lands on the 12px gap's midline */
  width: 7px;
  height: 7px;
  border-top: 2px solid rgba(var(--fa), 0.85);
  border-right: 2px solid rgba(var(--fa), 0.85);
  transform: rotate(45deg);
}

/* hover the whole pipe → glow every node (also on focus-within; matters most
   in reduced-motion / no-animation contexts where the cascade isn't running) */
@media (hover: hover) {
  .fdc--transfer .tf-pipe:hover .tf-ic {
    transform: scale(1.04);
    filter: brightness(1.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 22px -10px rgba(var(--fa), 0.85);
  }
}
.fdc--transfer .tf-pipe:focus-within .tf-ic { transform: scale(1.03); filter: brightness(1.08); }

/* play the flow once revealed: a packet sweeps the rail and each node lights
   up EXACTLY as the packet passes it. The packet runs LINEARLY (so left% ==
   progress%) and every node's pulse shares the packet's 2.8s period; the
   per-node delay = packet-start + (node-centre fraction) × period, which
   phase-locks the bright flash to the packet's arrival, loop after loop. */
.fd-rich.is-revealed .fdc--transfer .tf-pkt {
  animation: tf-run 2.8s linear .35s infinite;
}
.fd-rich.is-revealed .fdc--transfer .tf-ic {
  animation: tf-pulse 2.8s var(--fdc-ease) calc(.68s + var(--si) * .71s) infinite;
}
@keyframes tf-run {
  0%   { left: 0;    opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
/* glow-based flash (no opacity dip — the tile is solid): bright as the packet
   arrives (cycle 0%/100%), resting through the middle of the cycle */
@keyframes tf-pulse {
  0%, 100% {
    transform: scale(1.08);
    filter: brightness(1.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 12px 26px -8px rgba(var(--fa), 0.85);
  }
  16%, 84% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 16px -10px rgba(var(--fa), 0.5);
  }
}

/* ---------- 2. PLAN / FACT / CREDITED — вычет перерыва ------------------
   План vs фактическое присутствие у терминала vs зачтённые часы. Перерыв
   не идёт в оплату; на hover/focus сегмент перерыва «схлопывается» к зачёту.
   Без JS, работает на клонированном поддереве. */
.fdc--transfer .tf-cut {
  position: relative;
  padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 30px) clamp(20px, 2.8vw, 26px);
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(var(--fa), 0.12), transparent 56%) padding-box,
    linear-gradient(180deg, var(--bg-1), var(--bg-2)) padding-box,
    linear-gradient(160deg, rgba(var(--fa), 0.40), var(--hairline) 50%) border-box;
  box-shadow: var(--shadow-card);
  transition: box-shadow .3s var(--fdc-ease), transform .3s var(--fdc-spring);
}
@media (hover: hover) {
  .fdc--transfer .tf-cut:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card), 0 24px 50px -28px rgba(var(--fa), 0.6);
  }
}
.fdc--transfer .tf-cut-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.fdc--transfer .tf-cut-name { font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.fdc--transfer .tf-cut-hint {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: rgb(var(--fa)); white-space: nowrap;
}

.fdc--transfer .tf-bars { display: flex; flex-direction: column; gap: 13px; }
.fdc--transfer .tf-bar { display: grid; grid-template-columns: 120px 1fr 64px; align-items: center; gap: 12px; }
.fdc--transfer .tf-bar-l { font-size: 12.5px; color: var(--text-2); }
.fdc--transfer .tf-bar-v { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }

.fdc--transfer .tf-bar-track {
  position: relative;
  height: 12px;
  border-radius: 99px;
  /* inset rail — depth via inner shadow, no flat outline */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.fdc--transfer .tf-bar-fill {
  position: absolute;
  inset: 0;
  width: var(--w);
  border-radius: 99px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .7s var(--fdc-spring);
}
.fd-rich.is-revealed .fdc--transfer .tf-bar-fill { transform: scaleX(1); }

/* plan = muted neutral fill */
.fdc--transfer .tf-bar-plan .tf-bar-fill {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.10));
}
/* fact = присутствие у терминала, полный акцент */
.fdc--transfer .tf-bar-fact .tf-bar-fill {
  background: linear-gradient(90deg, rgba(var(--fa), 0.85), rgba(var(--fa), 0.45));
}
/* хвост перерыва за зачтёнными часами — нейтральная штриховка (не оплачивается) */
.fdc--transfer .tf-bar-over {
  position: absolute;
  top: 0; bottom: 0;
  left: 70%;
  width: 9%;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.26) 0 4px, rgba(255, 255, 255, 0.07) 4px 8px);
  opacity: 1;
  transition: opacity .45s var(--fdc-ease) .55s, transform .45s var(--fdc-spring) .55s;
  transform-origin: left center;
}
/* credited = акцентная заливка, ровно отработанные часы */
.fdc--transfer .tf-bar-applied .tf-bar-fill {
  background: linear-gradient(90deg, rgba(var(--fa), 0.9), rgba(var(--fa), 0.55));
}

.fdc--transfer .tf-cut-note {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.fdc--transfer .tf-cut-note b { color: var(--text); font-weight: 700; }

/* THE REVEAL: на hover/focus хвост перерыва схлопывается к зачтённым часам */
@media (hover: hover) {
  .fdc--transfer .tf-cut:hover .tf-bar-over { transform: scaleX(0); opacity: 0; }
}
.fdc--transfer .tf-cut:focus-within .tf-bar-over { transform: scaleX(0); opacity: 0; }

/* ---------- responsive ------------------------------------------------- */
@media (max-width: 680px) {
  .fdc--transfer .tf-pipe { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .fdc--transfer .tf-rail { display: none; }
  .fdc--transfer .tf-stage:not(:last-child)::after { display: none; }
  .fdc--transfer .tf-bar { grid-template-columns: 100px 1fr 60px; gap: 9px; }
  .fdc--transfer .tf-bar-l { font-size: 11.5px; }
}

/* ---------- reduced motion: everything visible, no looping motion ------- */
@media (prefers-reduced-motion: reduce) {
  .fdc--transfer .tf-pkt { display: none; }
  .fd-rich.is-revealed .fdc--transfer .tf-ic { animation: none; }
  .fdc--transfer .tf-ic { transform: none; }
  .fdc--transfer .tf-bar-fill { transition: none; transform: scaleX(1); }
  .fdc--transfer .tf-bar-over { transition: none; }
}

/* === FEATURE DETAIL CSS: payroll === */
/* ============================================================================
   Feature deep-dive — "payroll" (Расчёт ФОТ)
   All selectors scoped under .fdc--payroll. Accent via rgb(var(--fa)) only.
   Centerpiece: a CSS-only "column builder" — toggling checkboxes recomputes
   the live ФОТ total via :has(), mirroring the real pay-formula interaction.
   ============================================================================ */

/* --- section ledes ------------------------------------------------------- */
.fdc--payroll .pay-demo-lede {
  max-width: 64ch;
  margin: 14px 0 26px;
  color: var(--text-2);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.6;
}

/* --- the interactive demo shell ----------------------------------------- */
.fdc--payroll .pay-demo {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 760px) {
  .fdc--payroll .pay-demo { grid-template-columns: 1fr; }
}

/* shared "panel" treatment — gradient border-box rim, top-light fill, depth.
   Technique A + B + C from the contract. No flat hairline. */
.fdc--payroll .pay-demo-cols,
.fdc--payroll .pay-demo-out {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: 18px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--fa), 0.10), transparent 55%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(155deg, rgba(var(--fa), 0.40), var(--hairline) 58%) border-box;
  box-shadow: var(--shadow-card);
}

.fdc--payroll .pay-demo-cap {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* --- the column toggles (the clickable cells) --------------------------- */
.fdc--payroll .pay-col {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  margin-bottom: 9px;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  user-select: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 45%) padding-box,
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(150deg, rgba(255, 255, 255, 0.10), var(--hairline) 60%) border-box;
  transition:
    transform 0.28s var(--fdc-spring),
    box-shadow 0.3s var(--fdc-ease),
    background 0.3s var(--fdc-ease);
}
.fdc--payroll .pay-col:last-of-type { margin-bottom: 0; }

.fdc--payroll .pay-col-dot {
  width: 17px;
  height: 17px;
  border-radius: 6px;
  border: 1.5px solid var(--hairline-2);
  position: relative;
  flex: 0 0 auto;
  transition: border-color 0.25s var(--fdc-ease), background 0.25s var(--fdc-ease);
}
.fdc--payroll .pay-col-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E");
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s var(--fdc-ease), transform 0.28s var(--fdc-spring);
}

.fdc--payroll .pay-col-txt { min-width: 0; }
.fdc--payroll .pay-col-txt b {
  display: block;
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 600;
}
.fdc--payroll .pay-col-txt code {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fdc--payroll .pay-col-tag {
  flex: 0 0 auto;
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}
.fdc--payroll .pay-col-tag--add {
  color: rgb(141, 212, 133);
  background: rgba(63, 177, 78, 0.13);
}
.fdc--payroll .pay-col-tag--sub {
  color: rgb(224, 120, 138);
  background: rgba(224, 120, 138, 0.13);
}

/* checked state — accent rim + filled checkbox + accent label */
.fdc--payroll .pay-chk:checked + .pay-col {
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(var(--fa), 0.14), transparent 60%) padding-box,
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(150deg, rgba(var(--fa), 0.55), rgba(var(--fa), 0.18) 70%) border-box;
}
.fdc--payroll .pay-chk:checked + .pay-col .pay-col-dot {
  background: rgb(var(--fa));
  border-color: rgb(var(--fa));
}
.fdc--payroll .pay-chk:checked + .pay-col .pay-col-dot::after {
  opacity: 1;
  transform: scale(1);
}

/* base column is locked-on (disabled checkbox) — give it a quiet "always" look */
.fdc--payroll .pay-col--base { cursor: default; }
.fdc--payroll .pay-col--base .pay-col-dot { background: rgba(var(--fa), 0.55); border-color: rgba(var(--fa), 0.6); }
.fdc--payroll .pay-col--base .pay-col-dot::after { opacity: 1; transform: scale(1); }

/* hover / focus / press — lift + accent glow + dot nudge (mandate) */
@media (hover: hover) {
  .fdc--payroll .pay-col:not(.pay-col--base):hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -18px rgba(var(--fa), 0.7);
  }
  .fdc--payroll .pay-col:not(.pay-col--base):hover .pay-col-dot { border-color: rgb(var(--fa)); }
}
.fdc--payroll .pay-col:not(.pay-col--base):active { transform: translateY(0) scale(0.99); }
.fdc--payroll .pay-chk:focus-visible + .pay-col {
  outline: 2px solid rgb(var(--fa));
  outline-offset: 2px;
}

/* --- functions strip ---------------------------------------------------- */
.fdc--payroll .pay-fns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.fdc--payroll .pay-fns-l {
  font-size: 0.72rem;
  color: var(--muted);
  margin-right: 2px;
}
.fdc--payroll .pay-fns span:not(.pay-fns-l) {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: rgb(var(--fa));
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(var(--fa), 0.10);
  border: 1px solid rgba(var(--fa), 0.22);
}

/* --- the output ledger -------------------------------------------------- */
.fdc--payroll .pay-out-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.9rem;
  transition: opacity 0.3s var(--fdc-ease), max-height 0.35s var(--fdc-ease), padding 0.3s var(--fdc-ease);
}
.fdc--payroll .pay-out-l { color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.fdc--payroll .pay-out-v { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

.fdc--payroll .pay-out-sign {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}
.fdc--payroll .pay-out-sign--add { color: rgb(141, 212, 133); background: rgba(63, 177, 78, 0.15); }
.fdc--payroll .pay-out-sign--sub { color: rgb(224, 120, 138); background: rgba(224, 120, 138, 0.15); }

/* rows collapse when their column is off (CSS-only, via :has on the demo) */
.fdc--payroll .pay-demo:not(:has(#pay-c-staj:checked)) .pay-out-row--staj,
.fdc--payroll .pay-demo:not(:has(#pay-c-meal:checked)) .pay-out-row--meal,
.fdc--payroll .pay-demo:not(:has(#pay-c-prem:checked)) .pay-out-row--prem,
.fdc--payroll .pay-demo:not(:has(#pay-c-ndfl:checked)) .pay-out-row--ndfl {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  border-bottom-width: 0;
  pointer-events: none;
}
.fdc--payroll .pay-out-row { max-height: 60px; overflow: hidden; }

/* total plate — heaviest cell in this group (Technique E hierarchy) */
.fdc--payroll .pay-out-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
  padding: 16px 16px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background:
    radial-gradient(130% 130% at 100% 0%, rgba(var(--fa), 0.20), transparent 60%) padding-box,
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(150deg, rgba(var(--fa), 0.6), rgba(var(--fa), 0.2) 70%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--shadow-card);
}
.fdc--payroll .pay-out-total .pay-out-l { color: var(--text); font-weight: 600; font-size: 0.95rem; }
.fdc--payroll .pay-out-total .pay-out-v {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, rgb(var(--fa)), color-mix(in srgb, rgb(var(--fa)) 55%, #fff));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- the live-total selector: show exactly ONE precomputed number ------- */
/* All 16 combinations of staj/meal/prem/ndfl are enumerated so EVERY toggle
   state shows the mathematically correct total (base 167 290 + staj 8 365
   + meal 14 450 + prem 40 000 − ndfl 27 913). One :has() rule per combo. */
.fdc--payroll .pay-num { display: none; }

/* base only */
.fdc--payroll .pay-demo:not(:has(#pay-c-staj:checked)):not(:has(#pay-c-meal:checked)):not(:has(#pay-c-prem:checked)):not(:has(#pay-c-ndfl:checked)) .pay-num--base { display: inline; }
/* n */
.fdc--payroll .pay-demo:not(:has(#pay-c-staj:checked)):not(:has(#pay-c-meal:checked)):not(:has(#pay-c-prem:checked)):has(#pay-c-ndfl:checked) .pay-num--n { display: inline; }
/* p */
.fdc--payroll .pay-demo:not(:has(#pay-c-staj:checked)):not(:has(#pay-c-meal:checked)):has(#pay-c-prem:checked):not(:has(#pay-c-ndfl:checked)) .pay-num--p { display: inline; }
/* pn */
.fdc--payroll .pay-demo:not(:has(#pay-c-staj:checked)):not(:has(#pay-c-meal:checked)):has(#pay-c-prem:checked):has(#pay-c-ndfl:checked) .pay-num--pn { display: inline; }
/* m */
.fdc--payroll .pay-demo:not(:has(#pay-c-staj:checked)):has(#pay-c-meal:checked):not(:has(#pay-c-prem:checked)):not(:has(#pay-c-ndfl:checked)) .pay-num--m { display: inline; }
/* mn */
.fdc--payroll .pay-demo:not(:has(#pay-c-staj:checked)):has(#pay-c-meal:checked):not(:has(#pay-c-prem:checked)):has(#pay-c-ndfl:checked) .pay-num--mn { display: inline; }
/* mp */
.fdc--payroll .pay-demo:not(:has(#pay-c-staj:checked)):has(#pay-c-meal:checked):has(#pay-c-prem:checked):not(:has(#pay-c-ndfl:checked)) .pay-num--mp { display: inline; }
/* mpn */
.fdc--payroll .pay-demo:not(:has(#pay-c-staj:checked)):has(#pay-c-meal:checked):has(#pay-c-prem:checked):has(#pay-c-ndfl:checked) .pay-num--mpn { display: inline; }
/* s */
.fdc--payroll .pay-demo:has(#pay-c-staj:checked):not(:has(#pay-c-meal:checked)):not(:has(#pay-c-prem:checked)):not(:has(#pay-c-ndfl:checked)) .pay-num--s { display: inline; }
/* sn */
.fdc--payroll .pay-demo:has(#pay-c-staj:checked):not(:has(#pay-c-meal:checked)):not(:has(#pay-c-prem:checked)):has(#pay-c-ndfl:checked) .pay-num--sn { display: inline; }
/* sp */
.fdc--payroll .pay-demo:has(#pay-c-staj:checked):not(:has(#pay-c-meal:checked)):has(#pay-c-prem:checked):not(:has(#pay-c-ndfl:checked)) .pay-num--sp { display: inline; }
/* spn */
.fdc--payroll .pay-demo:has(#pay-c-staj:checked):not(:has(#pay-c-meal:checked)):has(#pay-c-prem:checked):has(#pay-c-ndfl:checked) .pay-num--spn { display: inline; }
/* sm */
.fdc--payroll .pay-demo:has(#pay-c-staj:checked):has(#pay-c-meal:checked):not(:has(#pay-c-prem:checked)):not(:has(#pay-c-ndfl:checked)) .pay-num--sm { display: inline; }
/* smn */
.fdc--payroll .pay-demo:has(#pay-c-staj:checked):has(#pay-c-meal:checked):not(:has(#pay-c-prem:checked)):has(#pay-c-ndfl:checked) .pay-num--smn { display: inline; }
/* smp */
.fdc--payroll .pay-demo:has(#pay-c-staj:checked):has(#pay-c-meal:checked):has(#pay-c-prem:checked):not(:has(#pay-c-ndfl:checked)) .pay-num--smp { display: inline; }
/* smpn */
.fdc--payroll .pay-demo:has(#pay-c-staj:checked):has(#pay-c-meal:checked):has(#pay-c-prem:checked):has(#pay-c-ndfl:checked) .pay-num--smpn { display: inline; }

/* total number "tick" animation when the set changes (re-fires on :has change
   only via re-render — kept subtle and reduced-motion safe) */
.fdc--payroll .pay-num { animation: payTotalIn 0.4s var(--fdc-spring); }
@keyframes payTotalIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.fdc--payroll .pay-demo-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}
.fdc--payroll .pay-demo-hint svg { flex: 0 0 auto; color: rgb(var(--fa)); }

/* ensure custom demo is visible by default (not in stagger selector) */
.fdc--payroll .pay-demo { opacity: 1; }

/* --- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fdc--payroll .pay-col,
  .fdc--payroll .pay-col-dot,
  .fdc--payroll .pay-col-dot::after,
  .fdc--payroll .pay-out-row,
  .fdc--payroll .pay-num,
  .fdc--payroll .pdt-bench-bar span,
  .fdc--payroll .pdt-flash {
    transition: none;
    animation: none;
  }
}

/* ============================================================
   v17 — payroll detail: grand in-app-style ФОТ table (.pdt-*)
   Replaces the old 2-col .pay-demo summary; numbers recompute
   live in JS (bindPayTable). Scoped .fdc--payroll .pdt — never
   touches base. Accent --fa (=178,106,240 violet) for ИТОГО.
   ============================================================ */
.fdc--payroll .pdt { display: block; }

/* ---- 1. HERO: giant live ФОТ number + доля ФОТ в выручке ---- */
.fdc--payroll .pdt-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  align-items: center;
  margin: 0 0 16px;
  padding: 22px 24px;
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 110% at 100% 0%, rgba(var(--fa), 0.18), transparent 55%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 42%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(150deg, rgba(var(--fa), 0.5), var(--hairline) 60%) border-box;
  box-shadow: var(--shadow-card);
}
.fdc--payroll .pdt-hero-cap {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.fdc--payroll .pdt-hero-num {
  font-family: var(--mono);
  font-weight: 800;
  font-size: clamp(38px, 6.4vw, 62px);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fdc--payroll .pdt-hero-val {
  background: linear-gradient(135deg, var(--coral-2), #fff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--coral-2);
}
.fdc--payroll .pdt-hero-cur {
  -webkit-text-fill-color: initial;
  color: var(--muted);
  font-size: 0.5em;
  font-weight: 700;
}
.fdc--payroll .pdt-hero-delta {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  color: var(--green-soft);
  background: rgba(63, 177, 78, 0.13);
  font-variant-numeric: tabular-nums;
}
.fdc--payroll .pdt-hero-delta.is-ded {
  color: #F2696D;
  background: rgba(242, 105, 109, 0.13);
}
.fdc--payroll .pdt-hero-bench {
  text-align: center;
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid var(--hairline-2);
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box;
}
.fdc--payroll .pdt-bench-pct {
  font-family: var(--mono);
  font-weight: 800;
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--fdc-ease);
}
.fdc--payroll .pdt-bench-cap {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.35;
}
.fdc--payroll .pdt-bench-bar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  margin-top: 11px;
  overflow: hidden;
}
.fdc--payroll .pdt-bench-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width 0.5s var(--fdc-ease), background 0.3s var(--fdc-ease);
}
/* норма-метка на отметке 27% шкалы 0–50% */
.fdc--payroll .pdt-bench-bar::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 54%;
  width: 2px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
}
/* пороги нормы — общие для hero-бенчмарка и строки % в подвале */
.fdc--payroll .pct--ok .pdt-bench-pct,
.fdc--payroll .pct--ok.pdt-foot-pct .pdt-foot-pct-v { color: var(--green-soft); }
.fdc--payroll .pct--ok .pdt-bench-bar span { background: var(--green); }
.fdc--payroll .pct--warn .pdt-bench-pct,
.fdc--payroll .pct--warn.pdt-foot-pct .pdt-foot-pct-v { color: #E0A34D; }
.fdc--payroll .pct--warn .pdt-bench-bar span { background: #E0A34D; }
.fdc--payroll .pct--bad .pdt-bench-pct,
.fdc--payroll .pct--bad.pdt-foot-pct .pdt-foot-pct-v { color: #F2696D; }
.fdc--payroll .pct--bad .pdt-bench-bar span { background: #F2696D; }

/* ---- 2. RAIL: horizontal toggle cards (reused .pay-col) ---- */
.fdc--payroll .pdt-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 9px;
  margin: 0 0 16px;
}
.fdc--payroll .pdt-rail-cap {
  flex-basis: 100%;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.fdc--payroll .pdt-rail .pay-col {
  flex: 1 1 258px;
  min-width: 230px;
  margin-bottom: 0;
}
/* checkboxes are visually hidden but stay in the tab order — keyboard users
   Tab to a column and Space toggles it; the focus ring lands on the adjacent
   .pay-col via the .pay-chk:focus-visible + .pay-col rule. */
.fdc--payroll .pay-chk {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
/* intermediate widths (≤960px content column): keep 3 cards per row */
@media (min-width: 761px) and (max-width: 960px) {
  .fdc--payroll .pdt-rail .pay-col { flex-basis: 220px; min-width: 200px; }
}
.fdc--payroll .pdt-rail .pay-fns {
  flex-basis: 100%;
  margin-top: 4px;
}
.fdc--payroll .pdt-rail-meta {
  flex-basis: 100%;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}
.fdc--payroll .pdt-rail-meta b { color: var(--coral-2); font-weight: 800; }

/* ---- 3. TABLE CARD ---- */
.fdc--payroll .pdt-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.fdc--payroll .pdt-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--hairline);
}
.fdc--payroll .pdt-bar-t { font-size: 13px; font-weight: 700; color: var(--text-2); }
.fdc--payroll .pdt-bar-s { font-size: 11px; color: var(--muted); white-space: nowrap; }
.fdc--payroll .pdt-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-2) transparent;
}
.fdc--payroll .pdt-scroll::-webkit-scrollbar { height: 7px; }
.fdc--payroll .pdt-scroll::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 99px; }

/* ---- the table itself ---- */
.fdc--payroll .pdt-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}
.fdc--payroll .pdt-table th,
.fdc--payroll .pdt-table td {
  padding: 10px 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-top: 1px solid var(--hairline);
}
/* sticky Сотрудник (left) + ИТОГО (right) survive horizontal scroll */
.fdc--payroll .pdt-table .pdt-c-emp {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left;
  background: var(--surface);
  background-clip: padding-box;
  min-width: 168px;
}
.fdc--payroll .pdt-table .pdt-c-total {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--surface);
  background-clip: padding-box;
  font-family: var(--mono);
  min-width: 112px;
}
/* group bands */
.fdc--payroll .pdt-band th {
  border-top: none;
  padding: 9px 11px 5px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-2);
}
/* th.* raises specificity to (0,2,1) so the colored band rules beat
   `.pdt-band th { border-top: none }` (same specificity, later source). */
.fdc--payroll th.pdt-band-ref { color: var(--muted); }
.fdc--payroll th.pdt-band-earn { color: var(--green-soft); border-top: 2px solid var(--green); }
.fdc--payroll th.pdt-band-ded { color: #F2696D; border-top: 2px solid #F2696D; }
.fdc--payroll th.pdt-band-total { color: var(--coral-2); border-top: 2px solid rgba(178,106,240, 0.55); }
/* label row */
.fdc--payroll .pdt-head th {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted-2);
}
.fdc--payroll .pdt-head .pdt-c-emp { text-align: left; }
.fdc--payroll .pdt-head .pdt-c-staj,
.fdc--payroll .pdt-head .pdt-c-prem { color: var(--green-soft); }
.fdc--payroll .pdt-head .pdt-c-meal { color: var(--blue-soft); }
.fdc--payroll .pdt-head .pdt-c-ndfl { color: #F2696D; }
.fdc--payroll .pdt-head .pdt-c-total { color: var(--coral-2); }
/* employee identity cell */
.fdc--payroll .pdt-emp { display: flex; align-items: center; gap: 9px; }
.fdc--payroll .pdt-emp .av.sm { width: 26px; height: 26px; font-size: 9px; flex: none; }
.fdc--payroll .pdt-emp-x { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.fdc--payroll .pdt-emp-x b { color: var(--text); font-weight: 600; font-size: 12.5px; }
.fdc--payroll .pdt-emp-x i { color: var(--muted); font-size: 10px; font-style: normal; }
/* body value tints */
.fdc--payroll .pdt-row td { color: var(--text-2); }
.fdc--payroll .pdt-row .pdt-c-base { color: var(--text); font-weight: 600; }
.fdc--payroll .pdt-row .pdt-c-hours,
.fdc--payroll .pdt-row .pdt-c-rate { color: var(--muted); }
.fdc--payroll .pdt-row .pdt-c-staj,
.fdc--payroll .pdt-row .pdt-c-prem { color: var(--green-soft); }
.fdc--payroll .pdt-row .pdt-c-meal { color: var(--blue-soft); }
.fdc--payroll .pdt-row .pdt-c-ndfl { color: #F2696D; }
.fdc--payroll .pdt-row .pdt-c-total { color: var(--text); font-weight: 800; }
.fdc--payroll .pdt-table td.pdt-c-rate { background: rgba(255, 255, 255, 0.012); }
@media (hover: hover) {
  .fdc--payroll .pdt-row:hover td { background: rgba(255, 255, 255, 0.025); }
  .fdc--payroll .pdt-row:hover .pdt-c-emp,
  .fdc--payroll .pdt-row:hover .pdt-c-total { background: #1f1f25; }
}
/* role section header */
.fdc--payroll .pdt-sec td {
  background: rgba(255, 255, 255, 0.022);
  border-top: 1px solid var(--hairline-2);
}
.fdc--payroll .pdt-sec .pdt-c-emp,
.fdc--payroll .pdt-sec .pdt-c-total { background: #1c1c20; }
.fdc--payroll .pdt-sec-head { text-align: left; font-weight: 700; color: var(--text); }
.fdc--payroll .pdt-sec-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  margin-right: 8px;
  vertical-align: middle;
}
.fdc--payroll .pdt-sec-n { color: var(--muted); font-weight: 500; margin-left: 6px; font-size: 11.5px; }
.fdc--payroll .pdt-sec-sum { text-align: left; color: var(--text-2); font-weight: 600; font-size: 11.5px; }
.fdc--payroll .pdt-sec-total { color: var(--coral-2); font-weight: 800; }
/* footer band */
.fdc--payroll .pdt-foot td { border-top: 1px solid var(--hairline); }
.fdc--payroll .pdt-foot-totals td {
  border-top: 2px solid rgba(178,106,240, 0.4);
  background: rgba(178,106,240, 0.06);
  font-weight: 800;
}
.fdc--payroll .pdt-foot-totals .pdt-c-emp { text-align: left; color: var(--text); }
.fdc--payroll .pdt-foot-totals .pdt-c-base { color: var(--text); }
.fdc--payroll .pdt-foot-totals .pdt-c-staj,
.fdc--payroll .pdt-foot-totals .pdt-c-prem { color: var(--green-soft); }
.fdc--payroll .pdt-foot-totals .pdt-c-meal { color: var(--blue-soft); }
.fdc--payroll .pdt-foot-totals .pdt-c-ndfl { color: #F2696D; }
.fdc--payroll .pdt-foot-totals .pdt-c-total { color: var(--coral-2); font-size: 15px; }
.fdc--payroll .pdt-foot-totals .pdt-c-emp,
.fdc--payroll .pdt-foot-totals .pdt-c-total { background: #201d29; }
.fdc--payroll .pdt-foot-rev td,
.fdc--payroll .pdt-foot-pct td { font-size: 11.5px; }
.fdc--payroll .pdt-foot-rev .pdt-c-emp,
.fdc--payroll .pdt-foot-pct .pdt-c-emp { text-align: left; color: var(--text-2); font-weight: 600; }
.fdc--payroll .pdt-foot-rev .pdt-c-total { color: var(--text-2); font-weight: 700; }
.fdc--payroll .pdt-foot-pct .pdt-foot-pct-v { font-weight: 800; }
.fdc--payroll .pdt-foot-pct i { color: var(--muted); font-weight: 400; font-style: normal; margin-left: 7px; }
.fdc--payroll .pdt-foot-rev .pdt-c-emp,
.fdc--payroll .pdt-foot-rev .pdt-c-total,
.fdc--payroll .pdt-foot-pct .pdt-c-emp,
.fdc--payroll .pdt-foot-pct .pdt-c-total { background: var(--surface); }
/* hide toggled-off columns (cell-level, реальная таблица) */
.fdc--payroll .pdt-table.off-staj .col-staj,
.fdc--payroll .pdt-table.off-meal .col-meal,
.fdc--payroll .pdt-table.off-prem .col-prem,
.fdc--payroll .pdt-table.off-ndfl .col-ndfl { display: none; }
/* recompute flash pulse (box-shadow → safe on sticky cells) */
.fdc--payroll .pdt-flash { animation: pdtFlash 0.5s var(--fdc-ease); }
@keyframes pdtFlash {
  0% { box-shadow: inset 0 0 0 100px rgba(178,106,240, 0.22); }
  100% { box-shadow: inset 0 0 0 100px rgba(178,106,240, 0); }
}

/* ensure the demo is visible by default (not in stagger selector) */
.fdc--payroll .pdt { opacity: 1; }

@media (max-width: 760px) {
  .fdc--payroll .pdt-hero { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .fdc--payroll .pdt-hero-bench { max-width: 320px; }
  .fdc--payroll .pdt-rail .pay-col { flex-basis: 100%; min-width: 0; }
  .fdc--payroll .pdt-table { font-size: 12px; }
  .fdc--payroll .pdt-table th,
  .fdc--payroll .pdt-table td { padding: 9px 9px; }
  .fdc--payroll .pdt-band th { font-size: 9.5px; }
}

/* === FEATURE DETAIL CSS: analytics === */
/* ============================================================
   Feature deep-dive "analytics" — scoped custom CSS
   All selectors start with .fdc--analytics (never touches base).
   Accent is the bare R,G,B triple in --fa → use rgb(var(--fa)).
   ============================================================ */

/* ---------- the live dashboard board (container) ---------- */
.fdc--analytics .an-board {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  padding: clamp(16px, 2.6vw, 26px);
  /* layered background-rim (Technique A): every non-final layer is a gradient */
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--fa), 0.12), transparent 60%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 38%) padding-box,
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(150deg, rgba(var(--fa), 0.42), var(--hairline) 52%) border-box;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* faint grid texture behind the board, accent-tinted */
.fdc--analytics .an-board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--fa), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--fa), 0.05) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 72%);
  mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 72%);
  opacity: 0.6;
}
.fdc--analytics .an-board > * { position: relative; z-index: 1; }

/* ---------- header: tabs + period chip ---------- */
.fdc--analytics .an-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.fdc--analytics .an-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.fdc--analytics .an-tab {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box;
  cursor: default;
  transition: color 0.25s var(--fdc-ease), background 0.25s var(--fdc-ease),
    border-color 0.25s var(--fdc-ease), transform 0.3s var(--fdc-spring);
}
.fdc--analytics .an-tab.is-on {
  color: rgb(var(--fa));
  background:
    linear-gradient(rgba(var(--fa), 0.14), rgba(var(--fa), 0.14)) padding-box,
    linear-gradient(120deg, rgba(var(--fa), 0.6), rgba(var(--fa), 0.18)) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@media (hover: hover) {
  .fdc--analytics .an-tab:not(.is-on):hover {
    color: var(--text);
    background: linear-gradient(var(--surface), var(--surface)) padding-box;
    transform: translateY(-1px);
  }
}
.fdc--analytics .an-period {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  padding: 6px 10px 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline-2);
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box;
}
.fdc--analytics .an-period svg { width: 13px; height: 13px; opacity: 0.7; }

/* ---------- top stat row ---------- */
.fdc--analytics .an-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.fdc--analytics .an-stat {
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: 14px 16px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(var(--fa), 0.10), transparent 58%) padding-box,
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(160deg, rgba(var(--fa), 0.30), var(--hairline) 55%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.34s var(--fdc-spring), box-shadow 0.34s var(--fdc-ease);
}
.fdc--analytics .an-stat-l {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.fdc--analytics .an-stat-v {
  display: block;
  margin-top: 4px;
  font-size: clamp(24px, 3.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fdc--analytics .an-stat-v i { font-style: normal; font-size: 0.62em; color: var(--muted); margin-left: 1px; }
.fdc--analytics .an-stat-d {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 700;
}
.fdc--analytics .an-stat-d svg { width: 12px; height: 12px; }
.fdc--analytics .an-stat-d.up { color: rgb(63, 177, 78); }
.fdc--analytics .an-stat-d.down { color: rgb(63, 177, 78); } /* both shown deltas are "good" */
@media (hover: hover) {
  .fdc--analytics .an-stat:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 16px 34px -20px rgba(var(--fa), 0.7);
  }
}

/* ---------- hover hint line ---------- */
.fdc--analytics .an-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}
.fdc--analytics .an-hint svg { width: 14px; height: 14px; color: rgb(var(--fa)); }

/* ---------- grid: heatmap + bar chart ---------- */
.fdc--analytics .an-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  align-items: stretch;
}

/* heatmap card */
.fdc--analytics .an-heat,
.fdc--analytics .an-chart {
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 42%) padding-box,
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(160deg, rgba(var(--fa), 0.28), var(--hairline) 58%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.fdc--analytics .an-heat-row {
  display: grid;
  grid-template-columns: 46px repeat(7, 1fr);
  gap: 5px;
  align-items: center;
}
.fdc--analytics .an-heat-row + .an-heat-row { margin-top: 5px; }
.fdc--analytics .an-heat-legend span {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted-2);
  text-align: center;
}
.fdc--analytics .an-heat-rl {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
}
.fdc--analytics .an-cell {
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  /* default off-state; scale up on reveal */
  background: rgba(var(--fa), 0.06);
  transform: scale(0.6);
  opacity: 0;
  transition: transform 0.3s var(--fdc-spring), box-shadow 0.25s var(--fdc-ease),
    filter 0.25s var(--fdc-ease);
}
/* intensity ramp via accent alpha — non-generic accent fill, not flat gray */
.fdc--analytics .an-cell.l1 { background: rgba(var(--fa), 0.10); }
.fdc--analytics .an-cell.l2 { background: rgba(var(--fa), 0.22); }
.fdc--analytics .an-cell.l3 { background: rgba(var(--fa), 0.38); }
.fdc--analytics .an-cell.l4 { background: rgba(var(--fa), 0.58); }
.fdc--analytics .an-cell.l5 {
  background: rgba(var(--fa), 0.85);
  box-shadow: 0 0 0 1px rgba(var(--fa), 0.4), 0 6px 16px -8px rgba(var(--fa), 0.8);
}
@media (hover: hover) {
  .fdc--analytics .an-cell:hover {
    transform: scale(1.14);
    filter: brightness(1.25) saturate(1.1);
    box-shadow: 0 0 0 1px rgba(var(--fa), 0.7), 0 8px 18px -8px rgba(var(--fa), 0.9);
    z-index: 2;
  }
}

/* bar chart card */
.fdc--analytics .an-chart {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.fdc--analytics .an-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: end;
  height: 118px;
}
.fdc--analytics .an-bar {
  position: relative;
  display: block;
  align-self: end;
  height: 100%;
  border-radius: 6px 6px 3px 3px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}
.fdc--analytics .an-bar i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0; /* animates to --h on reveal */
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, rgba(var(--fa), 0.95), rgba(var(--fa), 0.45));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: height 0.7s var(--fdc-spring), filter 0.25s var(--fdc-ease);
}
.fdc--analytics .an-bar.is-hot i {
  background: linear-gradient(180deg, rgb(var(--fa)), rgba(var(--fa), 0.6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 18px -4px rgba(var(--fa), 0.85);
}
@media (hover: hover) {
  .fdc--analytics .an-bar:hover i { filter: brightness(1.2); }
}
.fdc--analytics .an-bars-x {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.fdc--analytics .an-bars-x span {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted-2);
  text-align: center;
}

/* ---------- system insight strip ---------- */
.fdc--analytics .an-insight {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: 13px 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
  background:
    linear-gradient(rgba(var(--fa), 0.07), rgba(var(--fa), 0.07)) padding-box,
    linear-gradient(120deg, rgba(var(--fa), 0.5), var(--hairline) 60%) border-box;
}
.fdc--analytics .an-insight b { color: var(--text); font-weight: 700; }
.fdc--analytics .an-insight-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: rgb(var(--fa));
  background: rgba(var(--fa), 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.fdc--analytics .an-insight-ic svg { width: 16px; height: 16px; }

/* ---------- reveal animation, keyed off host class (same pattern as base) ---------- */
.fd-rich.is-revealed .fdc--analytics .an-cell {
  transform: scale(1);
  opacity: 1;
  /* stagger by column via inline order: use nth-child cascade */
}
/* per-cell stagger so the heatmap "fills in" */
.fd-rich.is-revealed .fdc--analytics .an-cell:nth-child(2) { transition-delay: 0.04s; }
.fd-rich.is-revealed .fdc--analytics .an-cell:nth-child(3) { transition-delay: 0.08s; }
.fd-rich.is-revealed .fdc--analytics .an-cell:nth-child(4) { transition-delay: 0.12s; }
.fd-rich.is-revealed .fdc--analytics .an-cell:nth-child(5) { transition-delay: 0.16s; }
.fd-rich.is-revealed .fdc--analytics .an-cell:nth-child(6) { transition-delay: 0.20s; }
.fd-rich.is-revealed .fdc--analytics .an-cell:nth-child(7) { transition-delay: 0.24s; }
.fd-rich.is-revealed .fdc--analytics .an-cell:nth-child(8) { transition-delay: 0.28s; }

.fd-rich.is-revealed .fdc--analytics .an-bar i { height: var(--h); }
.fd-rich.is-revealed .fdc--analytics .an-bar:nth-child(1) i { transition-delay: 0.05s; }
.fd-rich.is-revealed .fdc--analytics .an-bar:nth-child(2) i { transition-delay: 0.11s; }
.fd-rich.is-revealed .fdc--analytics .an-bar:nth-child(3) i { transition-delay: 0.17s; }
.fd-rich.is-revealed .fdc--analytics .an-bar:nth-child(4) i { transition-delay: 0.23s; }
.fd-rich.is-revealed .fdc--analytics .an-bar:nth-child(5) i { transition-delay: 0.29s; }
.fd-rich.is-revealed .fdc--analytics .an-bar:nth-child(6) i { transition-delay: 0.35s; }
.fd-rich.is-revealed .fdc--analytics .an-bar:nth-child(7) i { transition-delay: 0.41s; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .fdc--analytics .an-grid { grid-template-columns: 1fr; }
  .fdc--analytics .an-stats { grid-template-columns: 1fr; }
  .fdc--analytics .an-heat-row { grid-template-columns: 40px repeat(7, 1fr); gap: 4px; }
  .fdc--analytics .an-cell { height: 20px; }
}

/* ---------- reduced motion: everything visible, no motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fdc--analytics .an-cell {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .fdc--analytics .an-bar i {
    height: var(--h) !important;
    transition: none !important;
  }
  .fdc--analytics .an-tab,
  .fdc--analytics .an-stat {
    transition: none !important;
  }
}

/* === FEATURE DETAIL CSS: app === */
/* =========================================================================
   Feature deep-dive: "iiko" — Интеграция с iiko (POS).
   Scoped under .fdc--iiko. Accent via rgb(var(--fa)) (iiko red).
   Three pieces, two of them are faithful ports of the REAL web-admin views
   from src/features/pos/components/analytics so the landing shows the actual
   product, not marketing mock-ups:
     1. .iiko-sync — connection console iikoCloud ⇄ StaffKit (identity of
        "интеграция": nodes + packet + the data that flows).
     2. .iiko-rev  — «Выручка по дням» (daily-revenue-chart): verdict header,
        metric segmented toggle, gradient bars, dashed benchmark, date axis.
     3. .iiko-vh   — «Выручка на подтверждённый час» (verified-hour-card):
        proof-scale with hatched gap + 80% threshold + contrast tiles.
   Content is VISIBLE at rest; motion is gated on .fd-rich.is-revealed, so
   reduced-motion needs no reveal fallback.
   ========================================================================= */

/* shared card shell for all three demos */
.fdc--iiko .iiko-sync,
.fdc--iiko .iiko-rev,
.fdc--iiko .iiko-vh {
  padding: clamp(16px, 2.6vw, 24px);
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background:
    radial-gradient(120% 130% at 50% -12%, rgba(var(--fa), 0.13), transparent 60%) padding-box,
    linear-gradient(180deg, var(--surface), var(--bg-2)) padding-box,
    linear-gradient(150deg, rgba(var(--fa), 0.44), var(--hairline) 52%, rgba(255, 255, 255, 0.02)) border-box;
  box-shadow: var(--shadow-card);
}
.fdc--iiko .fdc-note {
  margin: -4px 0 14px;
  font-size: 13px; line-height: 1.5; color: var(--text-2);
}

/* ---- 1. connection console ------------------------------------------- */
.fdc--iiko .iiko-sync-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: clamp(15px, 2.2vw, 20px);
}
.fdc--iiko .iiko-sync-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--green-soft);
  background: rgba(63, 177, 78, 0.12); border: 1px solid rgba(63, 177, 78, 0.24);
  padding: 5px 12px 5px 9px; border-radius: 10px;
}
.fdc--iiko .iiko-sync-status i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(63, 177, 78, 0.2); flex-shrink: 0;
}
.fd-rich.is-revealed .fdc--iiko .iiko-sync-status i { animation: iiko-live 1.9s ease-in-out infinite; }
@keyframes iiko-live { 0%, 100% { box-shadow: 0 0 0 2px rgba(63, 177, 78, 0.3); } 50% { box-shadow: 0 0 0 6px rgba(63, 177, 78, 0); } }
.fdc--iiko .iiko-sync-loc { font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

.fdc--iiko .iiko-flow {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch; gap: clamp(10px, 2vw, 20px); margin-bottom: clamp(14px, 2.2vw, 18px);
}
.fdc--iiko .iiko-node {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 16px; border-radius: 14px; border: 1px solid transparent;
  background:
    linear-gradient(180deg, var(--surface-2), var(--bg-2)) padding-box,
    linear-gradient(160deg, rgba(255, 255, 255, 0.12), var(--hairline)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.fdc--iiko .iiko-node--sk { align-items: flex-end; text-align: right; }
.fdc--iiko .iiko-badge {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 800; font-size: 12.5px; letter-spacing: -0.03em; color: #fff; margin-bottom: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.fdc--iiko .iiko-badge--iiko { background: linear-gradient(160deg, rgba(var(--fa), 0.98), rgba(var(--fa), 0.62)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px -10px rgba(var(--fa), 0.85); }
.fdc--iiko .iiko-badge--sk { background: var(--coral-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px -10px rgba(142, 37, 228, 0.85); }
.fdc--iiko .iiko-node b { font-size: 14px; color: var(--text); letter-spacing: -0.01em; }
.fdc--iiko .iiko-node i { font-size: 11px; color: var(--muted); font-style: normal; }

.fdc--iiko .iiko-rail {
  position: relative; align-self: center; min-width: 40px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(var(--fa), 0.1), rgba(var(--fa), 0.45), rgba(var(--fa), 0.1)); overflow: visible;
}
.fdc--iiko .iiko-pkt {
  position: absolute; top: 50%; left: 0; width: 26px; height: 6px; margin-top: -3px;
  border-radius: 99px; background: linear-gradient(90deg, transparent, rgb(var(--fa)));
  box-shadow: 0 0 14px 2px rgba(var(--fa), 0.6); opacity: 0;
}
.fd-rich.is-revealed .fdc--iiko .iiko-pkt { animation: iiko-run 2.4s linear .4s infinite; }
@keyframes iiko-run { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.fdc--iiko .iiko-tokens { display: flex; flex-wrap: wrap; gap: 8px; }
.fdc--iiko .iiko-token {
  font-size: 12px; font-weight: 650; color: rgb(var(--fa));
  padding: 5px 11px; border-radius: 8px;
  background: rgba(var(--fa), 0.12); border: 1px solid rgba(var(--fa), 0.26);
}
.fd-rich.is-revealed .fdc--iiko .iiko-token { animation: iiko-pop .5s var(--fdc-spring) both; animation-delay: calc(.5s + var(--si, 0) * .08s); }

/* ---- 2. «Выручка по дням» (daily-revenue-chart) ----------------------- */
.fdc--iiko .iiko-rev-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.fdc--iiko .iiko-rev-big { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.05; }
.fdc--iiko .iiko-rev-big span { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.fdc--iiko .iiko-rev-sub { margin-top: 6px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fdc--iiko .iiko-up { color: var(--green-soft); font-weight: 700; }
/* segmented metric toggle */
.fdc--iiko .iiko-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hairline); }
.fdc--iiko .iiko-seg-i { font-size: 12px; font-weight: 650; color: var(--muted); padding: 5px 12px; border-radius: 8px; cursor: default; }
.fdc--iiko .iiko-seg-i.is-on { color: #fff; background: var(--surface-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 12px -6px rgba(0, 0, 0, 0.7); }

.fdc--iiko .iiko-rev-chart { display: grid; grid-template-columns: 34px 1fr; gap: 6px; }
.fdc--iiko .iiko-rev-yaxis { position: relative; }
.fdc--iiko .iiko-rev-yaxis span { position: absolute; right: 2px; transform: translateY(50%); font-size: 9px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fdc--iiko .iiko-rev-plot { position: relative; height: 150px; }
.fdc--iiko .iiko-rev-grid i { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(255, 255, 255, 0.055); }
.fdc--iiko .iiko-rev-bench { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(var(--fa), 0.75); z-index: 3; transform-origin: left; }
.fd-rich.is-revealed .fdc--iiko .iiko-rev-bench { animation: iiko-grow-x .7s var(--fdc-ease) .3s both; }
.fdc--iiko .iiko-rev-bench-l { position: absolute; right: 0; top: 0; transform: translateY(-50%); font-size: 9px; font-weight: 600; color: rgba(255, 255, 255, 0.72); background: rgba(14, 14, 16, 0.85); padding: 1px 5px; border-radius: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fdc--iiko .iiko-rev-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; }
.fdc--iiko .iiko-rev-bar { position: relative; flex: 1; min-width: 0; height: 100%; }
.fdc--iiko .iiko-rev-bar i {
  position: absolute; left: 18%; right: 18%; bottom: 0; height: var(--h, 40%);
  border-radius: 4px 4px 0 0; transform-origin: bottom;
  background: linear-gradient(180deg, rgba(var(--fa), 1) 0%, rgba(var(--fa), 0.8) 56%, rgba(var(--fa), 0.5) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.fdc--iiko .iiko-rev-bar.is-peak i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 22px -3px rgba(var(--fa), 0.85); }
.fd-rich.is-revealed .fdc--iiko .iiko-rev-bar i { animation: iiko-rise .62s var(--fdc-ease) both; animation-delay: calc(.15s + var(--i, 0) * .05s); }
.fdc--iiko .iiko-rev-x { display: flex; gap: 3px; margin-top: 7px; }
.fdc--iiko .iiko-rev-x span { flex: 1; min-width: 0; text-align: center; font-size: 9px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- 3. «Выручка на подтверждённый час» (verified-hour-card) ---------- */
.fdc--iiko .iiko-vh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.fdc--iiko .iiko-vh-cap { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fdc--iiko .iiko-vh-big { display: flex; align-items: baseline; gap: 9px; margin-top: 5px; }
.fdc--iiko .iiko-vh-big b { font-size: 28px; font-weight: 800; line-height: 1; color: var(--green-soft); font-variant-numeric: tabular-nums; }
.fdc--iiko .iiko-vh-big span { font-size: 11.5px; color: var(--text-2); }
.fdc--iiko .iiko-vh-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800;
  padding: 5px 11px; border-radius: 99px; color: var(--green-soft);
  background: rgba(63, 177, 78, 0.14); border: 1px solid rgba(63, 177, 78, 0.26);
}
.fdc--iiko .iiko-vh-pill svg { width: 13px; height: 13px; }
.fdc--iiko .iiko-vh-scale { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.fdc--iiko .iiko-vh-track { position: relative; height: 10px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.fdc--iiko .iiko-vh-hatch { position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(255, 255, 255, 0.05) 4px, rgba(255, 255, 255, 0.05) 5px); }
.fdc--iiko .iiko-vh-fill {
  position: absolute; inset: 0 auto 0 0; width: var(--w, 92%); border-radius: 99px; transform-origin: left;
  background: linear-gradient(90deg, rgba(63, 177, 78, 0.82), var(--green));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 16px -4px rgba(63, 177, 78, 0.75);
}
.fd-rich.is-revealed .fdc--iiko .iiko-vh-fill { animation: iiko-grow-x .82s var(--fdc-ease) both; }
.fdc--iiko .iiko-vh-thr { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.4); z-index: 2; }
.fdc--iiko .iiko-vh-legend { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-variant-numeric: tabular-nums; }
.fdc--iiko .iiko-vh-on { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); }
.fdc--iiko .iiko-vh-on i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.fdc--iiko .iiko-vh-off { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.fdc--iiko .iiko-vh-off i { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.09); background-image: repeating-linear-gradient(45deg, transparent 0, transparent 2px, rgba(255, 255, 255, 0.25) 2px, rgba(255, 255, 255, 0.25) 3px); }
.fdc--iiko .iiko-vh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fdc--iiko .iiko-vh-tile { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.fdc--iiko .iiko-vh-tl { font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.fdc--iiko .iiko-vh-tile b { display: block; margin-top: 5px; font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.fdc--iiko .iiko-vh-tile b.ok { color: var(--green-soft); }
.fdc--iiko .iiko-vh-th { margin-top: 3px; font-size: 10px; line-height: 1.35; color: var(--muted); }

/* shared keyframes */
@keyframes iiko-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes iiko-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes iiko-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 460px) {
  .fdc--iiko .iiko-flow { grid-template-columns: 1fr; gap: 10px; }
  .fdc--iiko .iiko-node--sk { align-items: flex-start; text-align: left; }
  .fdc--iiko .iiko-rail { width: 2px; min-width: 0; height: 24px; justify-self: center; background: linear-gradient(180deg, rgba(var(--fa), 0.1), rgba(var(--fa), 0.45), rgba(var(--fa), 0.1)); }
  .fdc--iiko .iiko-pkt { display: none; }
  .fdc--iiko .iiko-vh-tiles { grid-template-columns: 1fr; }
  .fdc--iiko .iiko-seg { width: 100%; }
  .fdc--iiko .iiko-seg-i { flex: 1; text-align: center; }
}

/* ---- reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fdc--iiko .iiko-pkt { display: none; }
  .fd-rich.is-revealed .fdc--iiko .iiko-token,
  .fd-rich.is-revealed .fdc--iiko .iiko-sync-status i,
  .fd-rich.is-revealed .fdc--iiko .iiko-rev-bar i,
  .fd-rich.is-revealed .fdc--iiko .iiko-rev-bench,
  .fd-rich.is-revealed .fdc--iiko .iiko-vh-fill { animation: none; }
}
/* ============================================================
   Feature deep-dive — "app" (Мобильное приложение)
   All selectors scoped under .fdc--app. Accent via rgb(var(--fa)).
   ============================================================ */

/* ---- Interactive phone demo : layout shell ---- */
.fdc--app .app-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* radios are the CSS-only tab state machine — keep them out of flow */
.fdc--app .app-tab-in {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fdc--app .app-phone {
  position: relative;
  width: min(340px, 86vw);
}

/* The bezel — premium dark device frame, NOT a flat hairline:
   layered top-light fill + solid base + accent->hairline border-box rim */
.fdc--app .app-bezel {
  position: relative;
  border-radius: 40px;
  padding: 12px 12px 0;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), transparent 30%) padding-box,
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(155deg, rgba(var(--fa),0.55), var(--hairline-2) 60%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 40px 90px -38px rgba(0,0,0,0.9),
    0 0 0 1px rgba(0,0,0,0.4);
}

.fdc--app .app-notch {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 116px; height: 24px;
  background: var(--bg);
  border-radius: 0 0 16px 16px;
  z-index: 4;
}

.fdc--app .app-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 18px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.2px;
}
.fdc--app .app-sb-r svg { width: 18px; height: 12px; opacity: 0.8; }

/* The screen area — clipped, with its own inset surface */
.fdc--app .app-screens {
  position: relative;
  /* Screen scales with the phone width instead of a fixed height (which went
     squat at the modal's ~308px width). 19/26 keeps the device compact — the
     taller 19/40 left a band of empty surface under the content. Tweak the 26
     to make the device taller/shorter. */
  aspect-ratio: 19 / 26;
  min-height: 380px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(var(--fa),0.14), transparent 60%),
    var(--bg-1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* every screen stacked, only the checked one shows */
.fdc--app .app-screen {
  position: absolute;
  inset: 0;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.985);
  transition:
    opacity 0.36s var(--fdc-ease),
    transform 0.44s var(--fdc-spring),
    visibility 0s linear 0.36s;
}
.fdc--app #appTabHome:checked  ~ .app-bezel .app-screen-home,
.fdc--app #appTabSched:checked ~ .app-bezel .app-screen-sched,
.fdc--app #appTabChat:checked  ~ .app-bezel .app-screen-chat,
.fdc--app #appTabMe:checked    ~ .app-bezel .app-screen-me {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.38s var(--fdc-ease),
    transform 0.48s var(--fdc-spring),
    visibility 0s;
}

/* ---- Shared screen cells (intentional borders, never flat hairline) ---- */
.fdc--app .app-row,
.fdc--app .app-shift,
.fdc--app .app-qa,
.fdc--app .app-srow,
.fdc--app .app-crow,
.fdc--app .app-me-stat,
.fdc--app .app-me-r {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, rgba(var(--fa),0.22), var(--hairline) 65%) border-box;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ---- HOME screen ---- */
.fdc--app .app-greet { display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 4px; }
.fdc--app .app-greet-h { font-size: 16px; font-weight: 800; color: var(--text); }
.fdc--app .app-greet-d { font-size: 11.5px; color: var(--muted); }

.fdc--app .app-banner { display: flex; align-items: center; gap: 10px; padding: 11px 12px; }
.fdc--app .app-banner-ic {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: rgb(var(--fa));
  background: rgba(var(--fa),0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.fdc--app .app-banner-ic svg { width: 17px; height: 17px; }
.fdc--app .app-banner-b { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fdc--app .app-banner-b b { font-size: 13px; font-weight: 700; color: var(--text); }
.fdc--app .app-banner-b span { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fdc--app .app-chip {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--text-2);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.fdc--app .app-chip-orange { color: var(--orange); background: rgba(255,149,0,0.14); border-color: rgba(255,149,0,0.35); }
.fdc--app .app-chip-green  { color: var(--green-soft); background: rgba(63,177,78,0.14); border-color: rgba(63,177,78,0.35); }

.fdc--app .app-shift { display: flex; align-items: center; gap: 12px; padding: 13px 13px; }
.fdc--app .app-shift-bar { flex: 0 0 auto; width: 5px; align-self: stretch; border-radius: 3px; background: rgb(var(--fa)); }
.fdc--app .app-shift-b { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fdc--app .app-shift-lab { font-size: 9.5px; font-weight: 800; letter-spacing: 0.6px; color: rgb(var(--fa)); }
.fdc--app .app-shift-nm { font-size: 15px; font-weight: 800; color: var(--text); }
.fdc--app .app-shift-tm { font-size: 11px; color: var(--muted); }
.fdc--app .app-live {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; color: var(--green-soft);
}
.fdc--app .app-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(63,177,78,0.55);
  animation: appLivePulse 2s var(--fdc-ease) infinite;
}
@keyframes appLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(63,177,78,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(63,177,78,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,177,78,0); }
}

.fdc--app .app-quick { display: flex; gap: 10px; }
.fdc--app .app-qa { flex: 1; display: flex; align-items: center; gap: 9px; padding: 11px 11px; }
.fdc--app .app-qa-ic {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.fdc--app .app-qa-ic svg { width: 15px; height: 15px; }
.fdc--app .app-qa div { display: flex; flex-direction: column; line-height: 1.1; }
.fdc--app .app-qa b { font-size: 16px; font-weight: 800; color: var(--text); }
.fdc--app .app-qa span { font-size: 10.5px; color: var(--muted); }

.fdc--app .app-ic-violet { color: rgb(178,106,240); background: rgba(142,37,228,0.18); }
.fdc--app .app-ic-green  { color: rgb(141,212,133); background: rgba(63,177,78,0.16); }
.fdc--app .app-ic-blue   { color: rgb(157,186,224); background: rgba(90,130,194,0.20); }

/* ---- SCHEDULE screen ---- */
.fdc--app .app-seg {
  display: flex; gap: 4px;
  padding: 3px;
  border-radius: 11px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline);
}
.fdc--app .app-seg span {
  flex: 1; text-align: center;
  font-size: 12px; font-weight: 700;
  padding: 6px 0;
  border-radius: 8px;
  color: var(--muted);
}
.fdc--app .app-seg-on {
  color: var(--text) !important;
  background: rgba(var(--fa),0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.fdc--app .app-sched-h { font-size: 12px; font-weight: 700; color: var(--text-2); padding: 2px 2px; }

.fdc--app .app-srow { display: flex; align-items: center; gap: 10px; padding: 9px 11px; }
.fdc--app .app-sd {
  flex: 0 0 auto; width: 30px;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  font-size: 9px; font-weight: 700; color: var(--muted);
}
.fdc--app .app-sd b { font-size: 15px; color: var(--text); margin-top: 1px; }
.fdc--app .app-sx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fdc--app .app-snm { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fdc--app .app-stm { font-size: 10.5px; color: var(--muted); }
.fdc--app .app-sb {
  flex: 0 0 auto;
  font-size: 9.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline);
}
.fdc--app .app-sb-green  { color: var(--green-soft); background: rgba(63,177,78,0.14); border-color: rgba(63,177,78,0.32); }
.fdc--app .app-sb-orange { color: var(--orange); background: rgba(255,149,0,0.14); border-color: rgba(255,149,0,0.32); }
.fdc--app .app-srow-swap {
  background:
    linear-gradient(180deg, rgba(255,149,0,0.05), transparent 60%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, rgba(255,149,0,0.30), var(--hairline) 65%) border-box;
}

/* ---- CHAT screen ---- */
.fdc--app .app-chat-h { font-size: 16px; font-weight: 800; color: var(--text); padding: 2px 2px 2px; }
.fdc--app .app-crow { display: flex; align-items: center; gap: 11px; padding: 10px 11px; }
.fdc--app .app-cav {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 11px;
  font-size: 12px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.fdc--app .app-cx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fdc--app .app-cnm { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fdc--app .app-cmsg { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fdc--app .app-cbadge {
  flex: 0 0 auto;
  min-width: 19px; height: 19px;
  display: grid; place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
  color: #fff;
  background: rgb(var(--fa));
  box-shadow: 0 2px 8px -2px rgba(var(--fa),0.7);
}

/* ---- PROFILE screen ---- */
.fdc--app .app-me-head { display: flex; align-items: center; gap: 12px; padding: 2px 2px 4px; }
.fdc--app .app-me-av {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  font-size: 15px; font-weight: 800;
  color: rgb(var(--fa));
  background: rgba(var(--fa),0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.fdc--app .app-me-head > div { display: flex; flex-direction: column; gap: 2px; }
.fdc--app .app-me-nm { font-size: 16px; font-weight: 800; color: var(--text); }
.fdc--app .app-me-role { font-size: 11.5px; color: var(--muted); }

.fdc--app .app-me-stat { display: flex; align-items: center; gap: 11px; padding: 12px 12px; }
.fdc--app .app-me-ic {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.fdc--app .app-me-ic svg { width: 17px; height: 17px; }
.fdc--app .app-me-sb { display: flex; flex-direction: column; gap: 2px; }
.fdc--app .app-me-sb b { font-size: 13px; font-weight: 700; color: var(--text); }
.fdc--app .app-me-sb span { font-size: 11px; color: var(--muted); }

.fdc--app .app-me-prog {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
.fdc--app .app-me-fill {
  display: block;
  height: 100%;
  width: 64%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--fa),0.65), var(--green));
}
.fdc--app .app-me-rows { display: flex; flex-direction: column; gap: 8px; }
.fdc--app .app-me-r {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
}

/* ---- TAB BAR (the interactive control) ---- */
.fdc--app .app-tabbar {
  display: flex;
  padding: 8px 6px 12px;
  border-top: 1px solid var(--hairline);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent),
    var(--bg-2);
}
.fdc--app .app-tabb {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px 5px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--muted-2);
  transition: color 0.2s var(--fdc-ease), background 0.2s var(--fdc-ease), transform 0.3s var(--fdc-spring);
  -webkit-tap-highlight-color: transparent;
}
.fdc--app .app-tabb svg { width: 21px; height: 21px; }
.fdc--app .app-tabb span { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1px; }

/* active tab — accent + tiny lift, driven by the matching radio */
.fdc--app #appTabHome:checked  ~ .app-bezel .app-tabb[data-t="home"],
.fdc--app #appTabSched:checked ~ .app-bezel .app-tabb[data-t="sched"],
.fdc--app #appTabChat:checked  ~ .app-bezel .app-tabb[data-t="chat"],
.fdc--app #appTabMe:checked    ~ .app-bezel .app-tabb[data-t="me"] {
  color: rgb(var(--fa));
  background: rgba(var(--fa),0.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* keyboard focus ring for accessibility (radio is visually hidden) */
.fdc--app .app-tab-in:focus-visible ~ .app-bezel .app-tabb[data-t="home"],
.fdc--app #appTabHome:focus-visible ~ .app-bezel .app-tabb[data-t="home"],
.fdc--app #appTabSched:focus-visible ~ .app-bezel .app-tabb[data-t="sched"],
.fdc--app #appTabChat:focus-visible ~ .app-bezel .app-tabb[data-t="chat"],
.fdc--app #appTabMe:focus-visible ~ .app-bezel .app-tabb[data-t="me"] {
  outline: 2px solid rgb(var(--fa));
  outline-offset: 2px;
}

@media (hover: hover) {
  .fdc--app .app-tabb:hover { color: var(--text-2); transform: translateY(-1px); }
}
.fdc--app .app-tabb:active { transform: scale(0.94); }

/* ---- caption / hint under the phone ---- */
.fdc--app .app-demo-cap { display: flex; justify-content: center; }
.fdc--app .app-demo-hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(120deg, rgba(var(--fa),0.4), var(--hairline) 70%) border-box;
}
.fdc--app .app-demo-hint svg { width: 16px; height: 16px; color: rgb(var(--fa)); flex: 0 0 auto; }

/* ---- narrow viewports: wider phone, slightly taller screen, tighter cells ---- */
@media (max-width: 560px) {
  .fdc--app .app-phone { width: min(300px, 88vw); }
  .fdc--app .app-screens { aspect-ratio: 19 / 28; }
  .fdc--app .app-screen { padding: 12px 12px 14px; gap: 9px; }
}


/* ============================================================
   MOBILE POLISH — comprehensive small-screen pass (≤768 / ≤560 / ≤400)
   Appended block: keeps all phone overrides in one reviewable place.
   ============================================================ */

/* ---- Feature demo cards: keep wide widgets inside their card ---- */
@media (max-width: 600px) {
  /* Availability grid was clipped (overflow:hidden) — let it scroll instead,
     and keep day columns wide enough to stay legible. */
  .av-grid {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .av-grid::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .av-grid .sg-row { min-width: 384px; }

  /* "Запросить доступность" no longer overflows the viewport — it wraps
     under the status pill and spans the full row. */
  .sg-foot { flex-wrap: wrap; row-gap: 12px; }
  .sg-foot .autoassign-tag { flex: 1 1 auto; }
  .sg-foot .sg-run { flex: 1 1 100%; justify-content: center; }
}

/* ---- Общий типографический проход ≤560: заголовки/eyebrow по центру,
        абзацы — влево (длинный центрированный текст плохо читается) ---- */
@media (max-width: 560px) {
  .lede, .section-head p { font-size: 16px; line-height: 1.5; text-align: left; }
  .section-head.center { text-align: center; }
  .section-head.center p { text-align: left; }
  /* .h2 (класс, не элемент) — иначе проигрывает по специфичности базовому
     .section-head .h2 { margin-top:18px } из 10-base */
  .section-head h2, .section-head .h2 { margin-top: 12px; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .fdc--app .app-screen,
  .fdc--app .app-tabb,
  .fdc--app .app-live-dot {
    transition: none !important;
    animation: none !important;
  }
  .fdc--app .app-screen { transform: none; }
}

/* ============================================================
   VPN / connectivity notice
   Всплывает снизу, только если личный кабинет недостижим (обычно VPN/сервер).
   ============================================================ */
.vpn-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 200;
  width: min(560px, calc(100vw - 32px));
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 149, 0, 0.32);
  background: rgba(20, 20, 23, 0.92);
  box-shadow: var(--shadow-pop);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  opacity: 0;
  /* В скрытом состоянии плашка остаётся в потоке (display:flex перебивает
     [hidden]) и при opacity:0 всё равно ловит клики. Она лежит на bottom:20px
     поверх cookie-плашки (z-index 200 > 190), поэтому без pointer-events:none
     «съедала» нажатие на cookie-кнопку и уводила на скрытую ссылку «Войти». */
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .25, 1);
}
.vpn-banner.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.vpn-ic {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 149, 0, 0.14);
  color: var(--orange);
}
.vpn-ic svg { width: 19px; height: 19px; }

.vpn-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vpn-text strong { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.vpn-text span { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }

.vpn-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.vpn-retry {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--coral-2);
  text-decoration: none;
  background: rgba(142,37,228, 0.12);
  border: 1px solid rgba(142,37,228, 0.28);
  border-radius: 9px;
  padding: 7px 11px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, border-color .2s, opacity .2s;
}
.vpn-retry:hover { background: rgba(142,37,228, 0.2); border-color: rgba(142,37,228, 0.45); }
.vpn-retry.checking { opacity: .6; pointer-events: none; }

/* лёгкий pending на самой кнопке «Войти», пока идёт проверка доступности ЛК */
.nav-login.vpn-checking { opacity: .6; pointer-events: none; }

.vpn-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.vpn-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-2); }
.vpn-close svg { width: 16px; height: 16px; }

/* Веб-ЛК — десктопный сценарий: на мобиле плашка про «вход в ЛК» неуместна. */
@media (max-width: 767px) {
  .vpn-banner { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .vpn-banner { transition: opacity .2s ease; transform: translate(-50%, 0); }
}

/* ============================================================
   Cookie / ПДн notice (152-ФЗ)
   Информационная плашка об обработке данных + ссылка на Политику.
   ============================================================ */
.cookie-notice {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 190;
  width: min(540px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--hairline-2);
  background: rgba(20, 20, 23, 0.94);
  box-shadow: var(--shadow-pop);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  opacity: 0;
  /* Скрытая плашка не должна перехватывать клики по тому, что под ней. */
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .25, 1);
}
.cookie-notice.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.cookie-ic {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(142,37,228, 0.14);
  color: var(--coral-2);
}
.cookie-ic svg { width: 19px; height: 19px; }

.cookie-text { flex: 1; min-width: 0; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.cookie-text b { color: var(--text); font-weight: 700; }
.cookie-text a { color: var(--coral-2); font-weight: 600; }
.cookie-text a:hover { text-decoration: underline; }

.cookie-actions { flex-shrink: 0; display: flex; align-items: center; }
.cookie-accept {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--coral-grad);
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(142,37,228, 0.9);
  transition: filter .2s, transform .15s;
}
.cookie-accept:hover { filter: brightness(1.08); }
.cookie-accept:active { transform: translateY(1px); }

/* консент-лейбл лид-формы: ссылки на документы видимы */
.lead-consent a { color: var(--coral-2); font-weight: 600; }
.lead-consent a:hover { text-decoration: underline; }

/* Когда видна cookie-плашка, VPN-плашка встаёт над ней (обе по центру снизу).
   Высоту cookie-плашки кладём в --cookie-h из JS, чтобы стопка не наезжала
   при любом переносе текста. */
body.cookie-open .vpn-banner.show { bottom: calc(var(--cookie-h, 88px) + 36px); }

@media (max-width: 560px) {
  .cookie-notice { flex-wrap: wrap; }
  .cookie-actions { width: 100%; }
  .cookie-accept { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-notice { transition: opacity .2s ease; transform: translate(-50%, 0); }
}

/* ============================================================= */
/* ВОЗМОЖНОСТИ · СЕРПАНТИН (interactive capability map)          */
/* ============================================================= */
.sk-serp .section-head { margin-bottom: clamp(40px, 5vw, 72px); }

.serp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 464px);
  gap: clamp(28px, 3.5vw, 56px);
  align-items: start;
  --serp-auto: 5s;
}

/* ---- LEFT: serpentine map ---- */
.serp-map {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 4px 0;
}
.serp-stage {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 500px;
}
.serp-stage--l { margin-right: auto; align-items: flex-start; text-align: left; }
.serp-stage--r { margin-left: auto; align-items: flex-end; text-align: right; }

.serp-node { display: flex; align-items: center; gap: 16px; }
.serp-stage--r .serp-node { flex-direction: row-reverse; }

.serp-node-num {
  flex-shrink: 0;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #fff;
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,0.30), rgba(255,255,255,0) 55%),
    linear-gradient(155deg, rgb(var(--st)) 0%, rgba(var(--st),0.66) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 14px 40px -10px rgba(var(--st),0.65),
    0 0 0 7px rgba(var(--st),0.07);
  position: relative;
}
.serp-node-num::after {
  content: "";
  position: absolute; inset: -7px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--st),0.40);
  opacity: 0;
}
html.js .serp-stage.is-on .serp-node-num::after { animation: serpRing 2.6s ease-out infinite; }
@keyframes serpRing {
  0%   { opacity: .55; transform: scale(.86); }
  70%  { opacity: 0;   transform: scale(1.28); }
  100% { opacity: 0;   transform: scale(1.28); }
}
.serp-node-t { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.025em; margin: 0; line-height: 1.08; }
.serp-node-s { font-size: 14.5px; color: var(--muted); margin: 5px 0 0; line-height: 1.45; max-width: 30ch; }
.serp-stage--r .serp-node-s { margin-left: auto; }

/* chips cluster — scattered by X */
.serp-chips { display: flex; flex-direction: column; gap: 13px; width: 100%; }
.serp-stage--r .serp-chips { align-items: flex-end; }
.serp-stage--l .serp-chips { align-items: flex-start; }

.serp-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 20px 11px 11px;
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255,255,255,0.024), rgba(255,255,255,0)), var(--bg-2);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  font-family: inherit;
  color: var(--text-2);
  transform: translateX(calc(var(--dx, 0) * 1px));
  transition: transform .32s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s, background .25s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.serp-stage--r .serp-chip { transform: translateX(calc(var(--dx, 0) * -1px)); }
.serp-chip-ic {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(var(--ac), 0.13);
  color: rgb(var(--ac));
  transition: background .25s, transform .25s, box-shadow .25s;
}
.serp-chip-ic svg { width: 19px; height: 19px; }
.serp-chip-t { font-size: 15px; font-weight: 650; color: var(--text); white-space: nowrap; }

.serp-chip:hover {
  border-color: rgba(var(--ac), 0.42);
  color: var(--text);
  box-shadow: var(--shadow-card), 0 26px 56px -34px rgba(var(--ac), 0.6);
}
.serp-stage--l .serp-chip:hover { transform: translateX(calc(var(--dx, 0) * 1px)) translateY(-3px); }
.serp-stage--r .serp-chip:hover { transform: translateX(calc(var(--dx, 0) * -1px)) translateY(-3px); }
.serp-chip:hover .serp-chip-ic { background: rgba(var(--ac), 0.2); transform: scale(1.06); }
.serp-chip:focus-visible { outline: 2px solid rgba(var(--ac), 0.75); outline-offset: 3px; }

.serp-chip.is-active {
  border-color: rgba(var(--ac), 0.62);
  background: linear-gradient(180deg, rgba(var(--ac), 0.14), rgba(var(--ac), 0.05)), var(--bg-2);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(var(--ac), 0.3), 0 30px 64px -34px rgba(var(--ac), 0.7);
}
.serp-chip.is-active .serp-chip-ic {
  background: rgba(var(--ac), 0.24);
  box-shadow: 0 0 0 1px rgba(var(--ac), 0.35), 0 8px 22px -8px rgba(var(--ac), 0.8);
}
.serp-chip.is-active .serp-chip-t { color: #fff; }

/* connectors */
.serp-link {
  width: clamp(168px, 38%, 248px);
  aspect-ratio: 240 / 132;
  margin: -2px auto;
  display: block;
  color: rgba(165, 146, 236, 0.55);
  pointer-events: none;
}
/* Каждый коннектор «выходит» из-под чипов своего этапа: 02-й этап прижат вправо,
   поэтому стрелка из него тоже прижимается вправо (иначе старт висит в пустоте). */
.serp-link--lr { margin-left: auto; margin-right: 0; }
.serp-link svg { width: 100%; height: 100%; display: block; overflow: visible; }
.serp-link-path {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 6;
}
html.js .serp-link-path { animation: serpDash 2.2s linear infinite; }
@keyframes serpDash { to { stroke-dashoffset: -16; } }
.serp-link-chev { stroke: rgba(209,176,242, 0.7); stroke-width: 2; fill: none; }
.serp-link-dot { fill: #C9B6FF; filter: drop-shadow(0 0 5px rgba(178,106,240, 0.95)); }

/* ---- RIGHT: detail panel ---- */
.serp-panel {
  /* sticky: карта слева высокая, и при выборе чипа из нижних этапов (03 «Аналитика»)
     статичная карточка оставалась за верхом экрана — теперь она едет вместе со скроллом */
  position: sticky;
  top: 90px; /* фиксированный навбар 70px + отступ */
  scroll-margin-top: 90px; /* доскролл по клику на чип не заводит панель под навбар */
  scroll-margin-bottom: 16px;
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.serp-panel::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(115% 80% at 88% -8%, rgba(var(--ac), 0.14), transparent 60%);
  opacity: .9; pointer-events: none;
  transition: background .45s ease;
}
.serp-panel > * { position: relative; }
.serp-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.serp-panel-badge {
  display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 12px;
  border-radius: 13px;
  font-size: 12px; font-weight: 700; letter-spacing: .2px;
  background: rgba(var(--ac), 0.14);
  color: rgb(var(--ac));
  border: 1px solid rgba(var(--ac), 0.26);
  white-space: nowrap;
}
.serp-panel-badge b { font-weight: 800; }
.serp-panel-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--ac)); box-shadow: 0 0 0 3px rgba(var(--ac), 0.22); }
.serp-panel-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.serp-panel-t { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.028em; line-height: 1.1; margin: 0 0 12px; }
.serp-panel-d { font-size: 15.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 18px; }

.serp-panel-viz {
  min-height: 190px;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline-2);
  background: linear-gradient(180deg, #17171B, #101013);
  padding: 14px;
  margin-bottom: 18px;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.serp-panel-points { margin-top: 2px; margin-bottom: 20px; }
.serp-panel-points .fp-t { font-size: 14.5px; }
.serp-panel-more { margin-top: auto; align-self: flex-start; }

/* swap cross-fade */
.serp-panel.is-swapping .serp-panel-t,
.serp-panel.is-swapping .serp-panel-d,
.serp-panel.is-swapping .serp-panel-viz,
.serp-panel.is-swapping .serp-panel-points,
.serp-panel.is-swapping .serp-panel-eyebrow,
.serp-panel.is-swapping .serp-panel-badge { opacity: 0; transform: translateY(7px); }
.serp-panel-t, .serp-panel-d, .serp-panel-viz, .serp-panel-points, .serp-panel-eyebrow, .serp-panel-badge {
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.3,1);
}

/* viz entrance */
.serp-viz { width: 100%; height: 100%; display: flex; flex-direction: column; }
.serp-viz--availability .av-grid .sg-row { min-width: 0; }
.serp-viz--availability .av-top { margin-bottom: 10px; }
.serp-viz--availability .sg-c { min-height: 38px; padding: 5px 4px; }
.serp-viz--availability .sg-head { min-height: 26px; }
.serp-viz--availability .sg-emp { font-size: 10.5px; }
html.js .serp-viz--availability .sg-shift {
  animation: serpPop .5s cubic-bezier(.18,.9,.3,1.1) both;
  animation-delay: calc(var(--i, 0) * 26ms + 120ms);
}
@keyframes serpPop { from { opacity: 0; transform: scale(.6) translateY(-6px); } to { opacity: 1; transform: none; } }

/* shared viz bits */
.sv-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 11px; }
.sv-pill { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 9px; background: rgba(var(--ac),0.14); color: rgb(var(--ac)); border: 1px solid rgba(var(--ac),0.24); white-space: nowrap; }
.sv-pill--ok { background: rgba(63,177,78,.15); color: var(--green-soft); border-color: rgba(63,177,78,.26); }
.sv-spark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(var(--ac),.16); color: rgb(var(--ac)); }
.sv-spark svg { width: 12px; height: 12px; }
.sv-bar { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.sv-bar > span { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, rgb(var(--ac)), rgba(var(--ac),.5)); transition: width .8s cubic-bezier(.2,.7,.3,1); }
.sv-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }

/* auto */
.serp-viz--auto .sv-auto { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; flex: 1; align-content: center; }
.serp-viz--auto .sv-cell { height: 26px; border-radius: 7px; background: rgba(255,255,255,0.04); border: 1px solid var(--hairline); }
html.js .serp-viz--auto .sv-cell { animation: serpPop .46s cubic-bezier(.18,.9,.3,1.1) both; animation-delay: calc(var(--i,0) * 34ms + 120ms); }
.serp-viz--auto .sv-cell.d { background: rgba(102,17,176,0.26); border-color: rgba(102,17,176,0.36); }
.serp-viz--auto .sv-cell.e { background: rgba(142,37,228,0.26); border-color: rgba(142,37,228,0.36); }
.serp-viz--auto .sv-cell.g { background: rgba(63,177,78,0.2); border-color: rgba(63,177,78,0.32); }
.serp-viz--auto .sv-foot { margin-top: 11px; }

/* swaps */
.serp-viz--swaps .sv-swap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; flex: 1; }
.serp-viz--swaps .sv-emp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.serp-viz--swaps .sv-emp--to { flex-direction: row-reverse; text-align: right; }
.serp-viz--swaps .sv-emp b { font-size: 12px; display: block; white-space: nowrap; }
.serp-viz--swaps .sv-emp i { font-size: 10px; color: var(--muted); font-style: normal; }
.serp-viz--swaps .sv-swap-card {
  text-align: center; padding: 8px 10px; border-radius: 10px;
  background: rgba(142,37,228,0.12); border: 1px solid rgba(142,37,228,0.28);
}
html.js .serp-viz--swaps .sv-swap-card { animation: serpSlideX 1.1s cubic-bezier(.4,0,.3,1) .35s both; }
@keyframes serpSlideX { 0% { transform: translateX(-18px); opacity: .4; } 55% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); } }
.serp-viz--swaps .sv-swap-card b { font-size: 11.5px; display: block; color: var(--purple-soft); }
.serp-viz--swaps .sv-swap-card i { font-size: 10.5px; color: var(--muted); font-style: normal; font-variant-numeric: tabular-nums; }
.serp-viz--swaps .sv-approve {
  margin-top: 12px; display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 10px;
  background: rgba(63,177,78,0.1); border: 1px solid rgba(63,177,78,0.22);
  font-size: 12px; color: var(--green-soft);
}
html.js .serp-viz--swaps .sv-approve { animation: serpFadeUp .5s ease 1.2s both; }
.serp-viz--swaps .sv-check { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; font-size: 11px; font-weight: 800; flex-shrink: 0; }

/* market — биржа смен (открытая смена уходит свободному коллеге соседней точки) */
.serp-viz--market .sv-mkt { display: flex; flex-direction: column; gap: 9px; flex: 1; justify-content: center; }
.serp-viz--market .sv-mkt-open {
  position: relative;
  padding: 11px 13px; border-radius: 12px;
  background: radial-gradient(130% 150% at 100% 0%, rgba(var(--ac),0.14), transparent 60%), rgba(255,255,255,0.03);
  border: 1px solid rgba(var(--ac),0.3);
}
html.js .serp-viz--market .sv-mkt-open { animation: serpFadeUp .46s ease both; }
.serp-viz--market .sv-mkt-loc { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--text-2); }
.serp-viz--market .sv-mkt-pin { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--ac)); box-shadow: 0 0 0 3px rgba(var(--ac),0.2); flex-shrink: 0; }
html.js .serp-viz--market .sv-mkt-pin { animation: serpMktPin 1.9s ease-in-out infinite; }
@keyframes serpMktPin { 0%,100% { box-shadow: 0 0 0 2px rgba(var(--ac),0.3); } 50% { box-shadow: 0 0 0 6px rgba(var(--ac),0); } }
.serp-viz--market .sv-mkt-gap { margin-left: auto; font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; color: #FFB857; background: rgba(255,149,0,0.13); border: 1px solid rgba(255,149,0,0.24); white-space: nowrap; }
.serp-viz--market .sv-mkt-shift { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; }
.serp-viz--market .sv-mkt-shift b { font-size: 12.5px; color: var(--text); }
.serp-viz--market .sv-mkt-shift i { font-size: 10.5px; color: var(--muted); font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.serp-viz--market .sv-mkt-claim { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 11px; background: rgba(255,255,255,0.03); border: 1px solid var(--hairline); }
html.js .serp-viz--market .sv-mkt-claim { animation: serpSlideX 1s cubic-bezier(.4,0,.3,1) .45s both; }
.serp-viz--market .sv-mkt-who { min-width: 0; }
.serp-viz--market .sv-mkt-who b { font-size: 12px; display: block; white-space: nowrap; }
.serp-viz--market .sv-mkt-who i { font-size: 10px; color: var(--muted); font-style: normal; }
.serp-viz--market .sv-mkt-take { margin-left: auto; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 7px; color: rgb(var(--ac)); background: rgba(var(--ac),0.14); border: 1px solid rgba(var(--ac),0.26); white-space: nowrap; }
.serp-viz--market .sv-mkt-done { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px; background: rgba(63,177,78,0.1); border: 1px solid rgba(63,177,78,0.22); font-size: 11.5px; color: var(--green-soft); }
html.js .serp-viz--market .sv-mkt-done { animation: serpFadeUp .5s ease 1.3s both; }
.serp-viz--market .sv-check { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; font-size: 11px; font-weight: 800; flex-shrink: 0; }

/* terminal — биометрический вход */
.serp-viz--terminal .sv-term-head { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--text-2); margin-bottom: 11px; }
.serp-viz--terminal .sv-live { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(63,177,78,.2); }
html.js .serp-viz--terminal .sv-live { animation: serpPulseDot 1.8s ease-in-out infinite; }
@keyframes serpPulseDot { 0%,100% { box-shadow: 0 0 0 2px rgba(63,177,78,.28); } 50% { box-shadow: 0 0 0 6px rgba(63,177,78,0); } }
.serp-viz--terminal .sv-term { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center; }
.serp-viz--terminal .sv-cam { position: relative; height: 104px; border-radius: 13px; background: radial-gradient(125% 110% at 50% 24%, #24242f, #0b0b0f 72%); border: 1px solid var(--hairline-2); overflow: hidden; color: var(--green-soft); }
.serp-viz--terminal .sv-cam-c { position: absolute; width: 13px; height: 13px; border: 2px solid rgba(63,177,78,.65); }
.serp-viz--terminal .sv-cam-c1 { top: 9px; left: 9px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.serp-viz--terminal .sv-cam-c2 { top: 9px; right: 9px; border-left: 0; border-bottom: 0; border-radius: 0 5px 0 0; }
.serp-viz--terminal .sv-cam-c3 { bottom: 9px; left: 9px; border-right: 0; border-top: 0; border-radius: 0 0 0 5px; }
.serp-viz--terminal .sv-cam-c4 { bottom: 9px; right: 9px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }
.serp-viz--terminal .sv-face { position: absolute; left: 50%; top: 52%; width: 56px; height: 56px; transform: translate(-50%,-50%); opacity: .5; }
.serp-viz--terminal .sv-face circle, .serp-viz--terminal .sv-face path { stroke: rgba(141,212,133,.75); stroke-width: 2; }
.serp-viz--terminal .sv-scan { position: absolute; left: 13px; right: 13px; height: 2px; top: 16px; background: linear-gradient(90deg, transparent, var(--green-soft), transparent); box-shadow: 0 0 12px 1px rgba(63,177,78,.8); border-radius: 2px; }
html.js .serp-viz--terminal .sv-scan { animation: serpScan 2.6s ease-in-out infinite; }
@keyframes serpScan { 0%,100% { top: 16px; opacity: .45; } 50% { top: 86px; opacity: 1; } }
.serp-viz--terminal .sv-match { position: absolute; right: 8px; bottom: 8px; width: 21px; height: 21px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px rgba(63,177,78,.25); }
.serp-viz--terminal .sv-match svg { width: 12px; height: 12px; }
html.js .serp-viz--terminal .sv-match { animation: serpMatchPop 2.6s ease-in-out infinite; }
@keyframes serpMatchPop { 0%,32% { opacity: 0; transform: scale(.3); } 48%,88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.3); } }
.serp-viz--terminal .sv-readout .sv-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--green-soft); }
.serp-viz--terminal .sv-ok-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(63,177,78,.2); }
.serp-viz--terminal .sv-readout b { font-size: 16px; display: block; margin: 4px 0 2px; }
.serp-viz--terminal .sv-readout i { font-size: 11px; color: var(--muted); font-style: normal; font-variant-numeric: tabular-nums; }
.serp-viz--terminal .sv-ontime { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 10px; font-weight: 700; color: var(--green-soft); background: rgba(63,177,78,.13); border: 1px solid rgba(63,177,78,.24); padding: 2px 8px 2px 6px; border-radius: 7px; }
.serp-viz--terminal .sv-ontime svg { width: 10px; height: 10px; }
.serp-viz--terminal .sv-feed { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.serp-viz--terminal .sv-event { display: flex; align-items: center; gap: 9px; padding: 7px 11px; border-radius: 9px; background: rgba(255,255,255,0.03); border: 1px solid var(--hairline); font-size: 12px; }
html.js .serp-viz--terminal .sv-event { animation: serpFadeUp .42s ease both; }
html.js .serp-viz--terminal .sv-event:nth-child(2) { animation-delay: .12s; }
.serp-viz--terminal .sv-event b { font-weight: 650; }
.serp-viz--terminal .sv-tag { margin-left: auto; font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.serp-viz--terminal .sv-tag.ok { color: var(--green-soft); background: rgba(63,177,78,.13); border: 1px solid rgba(63,177,78,.22); }
.serp-viz--terminal .sv-tag.late { color: #FFB857; background: rgba(255,149,0,.13); border: 1px solid rgba(255,149,0,.24); }
.serp-viz--terminal .sv-event-tag { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* tasks */
.serp-viz--tasks .sv-prog { margin-left: auto; font-size: 11px; color: var(--muted); }
.serp-viz--tasks .sv-prog b { color: var(--green-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.serp-viz--tasks .sv-tasks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.serp-viz--tasks .sv-tasks li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.serp-viz--tasks .sv-tbox { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--hairline-2); display: grid; place-items: center; flex-shrink: 0; }
.serp-viz--tasks .sv-tasks li.d .sv-tbox { background: var(--green); border-color: var(--green); color: #fff; }
.serp-viz--tasks .sv-tasks li.d { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.25); }
.serp-viz--tasks .sv-tbox svg { width: 11px; height: 11px; }
html.js .serp-viz--tasks .sv-tasks li { animation: serpFadeUp .42s ease both; animation-delay: calc(var(--i,0) * 90ms + 160ms); }

/* chat */
.serp-viz--chat .sv-chat-h { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 11px; }
.serp-viz--chat .sv-chat-h b { font-size: 12px; display: block; }
.serp-viz--chat .sv-chat-h i { font-size: 10px; color: var(--muted); font-style: normal; }
.serp-viz--chat .sv-bub { max-width: 78%; padding: 8px 11px; border-radius: 13px; font-size: 12px; line-height: 1.35; margin-bottom: 8px; }
.serp-viz--chat .sv-in { background: var(--surface-2); border-bottom-left-radius: 4px; color: var(--text-2); }
.serp-viz--chat .sv-out { background: rgba(142,37,228,0.2); border: 1px solid rgba(142,37,228,0.3); color: #E7DFFB; margin-left: auto; border-bottom-right-radius: 4px; }
.serp-viz--chat .sv-bub b { display: block; font-size: 10px; color: var(--purple-soft); margin-bottom: 1px; }
html.js .serp-viz--chat .sv-bub { animation: serpFadeUp .42s ease both; animation-delay: calc(var(--i,0) * 0.34s + 0.2s); }
.serp-viz--chat .sv-typing { display: inline-flex; gap: 3px; padding: 9px 12px; background: var(--surface-2); border-radius: 13px; border-bottom-left-radius: 4px; }
.serp-viz--chat .sv-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
html.js .serp-viz--chat .sv-typing i { animation: serpBlink 1.1s ease-in-out infinite; }
html.js .serp-viz--chat .sv-typing i:nth-child(2) { animation-delay: .18s; }
html.js .serp-viz--chat .sv-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes serpBlink { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* transfer */
.serp-viz--transfer .sv-pipe { display: flex; align-items: center; gap: 6px; flex: 1; }
.serp-viz--transfer .sv-pnode { flex: 1; text-align: center; padding: 12px 6px; border-radius: 11px; background: rgba(255,255,255,0.03); border: 1px solid var(--hairline); transition: background .3s, border-color .3s, box-shadow .3s; }
.serp-viz--transfer .sv-pnode .sv-pic { width: 30px; height: 30px; border-radius: 9px; margin: 0 auto 7px; display: grid; place-items: center; background: rgba(var(--ac),0.14); color: rgb(var(--ac)); }
.serp-viz--transfer .sv-pnode .sv-pic svg { width: 16px; height: 16px; }
.serp-viz--transfer .sv-pnode b { font-size: 11px; display: block; }
.serp-viz--transfer .sv-pnode i { font-size: 9.5px; color: var(--muted); font-style: normal; }
html.js .serp-viz--transfer .sv-pnode { animation: serpLight .5s ease both; animation-delay: calc(var(--i,0) * 0.5s + 0.25s); }
@keyframes serpLight { from { opacity: .35; } to { opacity: 1; border-color: rgba(var(--ac),0.3); box-shadow: 0 12px 30px -18px rgba(var(--ac),0.7); } }
.serp-viz--transfer .sv-parrow { color: rgba(var(--ac),0.6); flex-shrink: 0; display: grid; place-items: center; }
.serp-viz--transfer .sv-parrow svg { width: 16px; height: 16px; }
.serp-viz--transfer .sv-pfoot { margin-top: 11px; font-size: 11px; color: var(--muted); text-align: center; }

/* payroll */
.serp-viz--payroll { justify-content: center; }
.serp-viz--payroll .sv-pay-hero { text-align: left; }
.serp-viz--payroll .sv-pay-cap { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.serp-viz--payroll .sv-pay-num { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; letter-spacing: -0.03em; margin: 5px 0; font-variant-numeric: tabular-nums; }
.serp-viz--payroll .sv-pay-num span { font-size: 18px; color: var(--muted); font-weight: 700; }
.serp-viz--payroll .sv-pay-delta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--green-soft); background: rgba(63,177,78,0.12); border: 1px solid rgba(63,177,78,0.24); padding: 4px 10px; border-radius: 9px; }
.serp-viz--payroll .sv-pay-cols { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.serp-viz--payroll .sv-paycol { flex: 1; min-width: 0; padding: 9px 11px; border-radius: 9px; background: rgba(255,255,255,0.03); border: 1px solid var(--hairline); }
.serp-viz--payroll .sv-paycol b { font-size: 11.5px; display: block; }
.serp-viz--payroll .sv-paycol code { font-size: 10px; color: var(--muted); font-family: var(--mono); }
.serp-viz--payroll .sv-paycol.add b { color: var(--green-soft); }
.serp-viz--payroll .sv-paycol.sub b { color: #FFB857; }

/* analytics */
.serp-viz--analytics .sv-an-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.serp-viz--analytics .sv-an-stat { padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,0.03); border: 1px solid var(--hairline); }
.serp-viz--analytics .sv-an-stat span { font-size: 9.5px; color: var(--muted); display: block; }
.serp-viz--analytics .sv-an-stat b { font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.serp-viz--analytics .sv-an-stat i { font-size: 10px; font-style: normal; font-weight: 700; }
.serp-viz--analytics .sv-an-stat i.up { color: var(--green-soft); }
.serp-viz--analytics .sv-an-stat i.down { color: #FFB857; }
.serp-viz--analytics .sv-bars { display: flex; align-items: flex-end; gap: 7px; height: 56px; padding-top: 4px; }
.serp-viz--analytics .sv-abar { flex: 1; border-radius: 5px 5px 2px 2px; background: rgba(255,149,0,0.28); border: 1px solid rgba(255,149,0,0.34); transform-origin: bottom; }
.serp-viz--analytics .sv-abar.hot { background: rgba(255,149,0,0.5); border-color: rgba(255,149,0,0.6); }
html.js .serp-viz--analytics .sv-abar { animation: serpGrow .6s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--i,0) * 60ms + 150ms); }
@keyframes serpGrow { from { transform: scaleY(.04); opacity: .3; } to { transform: scaleY(1); opacity: 1; } }

/* iiko — интеграция с POS: связка iikoCloud ⇄ StaffKit + пришедшие цифры */
.serp-viz--iiko .sv-iiko-head { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; }
.serp-viz--iiko .sv-iiko-logo {
  font-weight: 800; font-size: 12.5px; letter-spacing: -0.03em; color: #fff;
  padding: 3px 8px; border-radius: 7px;
  background: linear-gradient(180deg, rgba(var(--ac),0.95), rgba(var(--ac),0.7));
  box-shadow: 0 4px 12px -5px rgba(var(--ac),0.8), inset 0 1px 0 rgba(255,255,255,0.25);
}
.serp-viz--iiko .sv-iiko-htx { font-size: 12px; font-weight: 700; color: var(--text-2); }
.serp-viz--iiko .sv-iiko-status {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; color: var(--green-soft);
  background: rgba(63,177,78,.12); border: 1px solid rgba(63,177,78,.24);
  padding: 3px 9px 3px 7px; border-radius: 8px; white-space: nowrap;
}
.serp-viz--iiko .sv-iiko-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(63,177,78,.2); flex-shrink: 0; }
html.js .serp-viz--iiko .sv-iiko-status i { animation: serpPulseDot 1.9s ease-in-out infinite; }

.serp-viz--iiko .sv-iiko-link { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; margin-bottom: 13px; }
.serp-viz--iiko .sv-iiko-end {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 11px 13px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--hairline);
}
.serp-viz--iiko .sv-iiko-end--sk { align-items: flex-end; text-align: right; }
.serp-viz--iiko .sv-iiko-badge {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-weight: 800; font-size: 11px; letter-spacing: -0.03em; color: #fff; margin-bottom: 5px;
}
.serp-viz--iiko .sv-iiko-badge--iiko { background: linear-gradient(160deg, rgba(var(--ac),0.95), rgba(var(--ac),0.6)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 16px -9px rgba(var(--ac),0.85); }
.serp-viz--iiko .sv-iiko-badge--sk { background: var(--coral-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 16px -9px rgba(142,37,228,0.85); }
.serp-viz--iiko .sv-iiko-end b { font-size: 12px; color: var(--text); }
.serp-viz--iiko .sv-iiko-end i { font-size: 9.5px; color: var(--muted); font-style: normal; }

.serp-viz--iiko .sv-iiko-wire { position: relative; align-self: center; height: 2px; min-width: 44px; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--ac),0.12), rgba(var(--ac),0.42), rgba(var(--ac),0.12)); }
.serp-viz--iiko .sv-iiko-dot { position: absolute; top: 50%; left: 4%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: rgb(var(--ac)); box-shadow: 0 0 8px 1px rgba(var(--ac),0.85); opacity: 0; }
html.js .serp-viz--iiko .sv-iiko-dot { animation: serpIikoFlow 1.9s linear infinite; animation-delay: calc(var(--i,0) * 0.63s); }
@keyframes serpIikoFlow { 0% { left: 4%; opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { left: 96%; opacity: 0; } }

.serp-viz--iiko .sv-iiko-rows { display: flex; flex-direction: column; gap: 7px; margin-top: auto; }
.serp-viz--iiko .sv-iiko-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 9px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--hairline);
}
.serp-viz--iiko .sv-iiko-k { font-size: 11.5px; color: var(--text-2); }
.serp-viz--iiko .sv-iiko-v { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.serp-viz--iiko .sv-iiko-good { color: var(--green-soft); }
html.js .serp-viz--iiko .sv-iiko-row { animation: serpFadeUp .46s ease both; animation-delay: calc(var(--i,0) * 100ms + 240ms); }

@keyframes serpFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- autoplay: per-tab progress timer on the active chip ---- */
.serp-chip::after {
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 7px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgb(var(--ac)), rgba(var(--ac), 0.35));
  transform: scaleX(0); transform-origin: left;
  opacity: 0;
  pointer-events: none;
}
html.js .serp-chip.is-active.serp-aplay::after {
  opacity: .95;
  animation: serpChipProg var(--serp-auto, 5s) linear forwards;
}
@keyframes serpChipProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* читает пользователь (навёл/сфокусировал) — таймер замирает */
html.js .serp:hover .serp-chip.is-active.serp-aplay::after,
html.js .serp:focus-within .serp-chip.is-active.serp-aplay::after { animation-play-state: paused; }

/* ---- map entrance (transform-only → контент виден даже без срабатывания IO) ---- */
@keyframes serpStageInL { from { transform: translateX(-34px); } to { transform: none; } }
@keyframes serpStageInR { from { transform: translateX(34px); } to { transform: none; } }
html.js .serp.in .serp-stage--l { animation: serpStageInL .7s cubic-bezier(.2,.7,.3,1) both; }
html.js .serp.in .serp-stage--r { animation: serpStageInR .7s cubic-bezier(.2,.7,.3,1) both; }
html.js .serp.in .serp-stage:nth-of-type(2) { animation-delay: .14s; }
html.js .serp.in .serp-stage:nth-of-type(3) { animation-delay: .28s; }
html.js .serp.in .serp-link { animation: serpFadeUp .6s ease both; }
html.js .serp.in .serp-link:nth-of-type(1) { animation-delay: .22s; }
html.js .serp.in .serp-link:nth-of-type(2) { animation-delay: .36s; }
html.js .serp.in .serp-panel { animation: serpFadeUp .7s cubic-bezier(.2,.7,.3,1) .12s both; }

/* ---- «сюда можно нажать» — редкая ghost-подсказка курсором ---- */
.serp-ghost {
  position: absolute; left: 0; top: 0;
  width: 27px; height: 27px;
  margin-left: -5px; margin-top: -3px;
  opacity: 0; pointer-events: none; z-index: 6;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.6));
  will-change: transform, opacity;
}
.serp-ghost svg { width: 100%; height: 100%; display: block; }
.serp-ghost .gp { fill: #fff; stroke: #0a0a0d; stroke-width: 1.1; stroke-linejoin: round; }
html.js .serp-ghost.tapping { animation: serpGhostTap 1.25s cubic-bezier(.3,.7,.3,1) both; }
@keyframes serpGhostTap {
  0%   { opacity: 0; transform: translate(13px,-13px) scale(.55); }
  22%  { opacity: 1; transform: translate(0,0) scale(1.06); }
  34%  { transform: translate(0,0) scale(1); }
  45%  { transform: translate(1px,4px) scale(.84); }   /* нажатие */
  60%  { transform: translate(0,0) scale(1); }          /* отпускание */
  84%  { opacity: 1; }
  100% { opacity: 0; transform: translate(2px,-7px) scale(.9); }
}
.serp-chip.serp-hint::before {
  content: ""; position: absolute; inset: -2px;
  border-radius: 18px;
  border: 1.5px solid rgba(var(--ac), .7);
  box-shadow: 0 0 22px -2px rgba(var(--ac), .55);
  opacity: 0; pointer-events: none;
}
html.js .serp-chip.serp-hint::before { animation: serpHintRing 1.25s ease both; }
@keyframes serpHintRing {
  0%,36% { opacity: 0; transform: scale(.99); }
  50%    { opacity: 1; transform: scale(1); }
  100%   { opacity: 0; transform: scale(1.06); }
}
html.js .serp-chip.serp-hint .serp-chip-ic { animation: serpHintPress .6s ease .46s both; }
@keyframes serpHintPress { 0%,100% { transform: scale(1); } 45% { transform: scale(.82); } }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .serp { grid-template-columns: 1fr; gap: 36px; }
  .serp-panel { display: none; }
  .serp-stage { max-width: min(520px, 100%); margin-inline: auto; align-items: center; text-align: center; }
  .serp-stage--r { align-items: center; text-align: center; }
  .serp-stage--r .serp-node { flex-direction: row; }
  .serp-stage--r .serp-node-s, .serp-stage--l .serp-node-s { margin-inline: auto; }
  .serp-chips, .serp-stage--r .serp-chips, .serp-stage--l .serp-chips { align-items: center; }
  /* Этапы здесь центрируются, поэтому и второй коннектор центрируем — иначе он
     остаётся прижатым вправо (десктоп-правило) и «выходит из угла». */
  .serp-link--lr { margin-inline: auto; }
  /* P0: инлайн-сдвиги --dx на узких экранах клиппают чипы за край — гасим */
  .serp-chip, .serp-stage--r .serp-chip { transform: none; }
  .serp-stage--l .serp-chip:hover, .serp-stage--r .serp-chip:hover { transform: translateY(-3px); }
  .serp-chip:active,
  .serp-stage--l .serp-chip:active,
  .serp-stage--r .serp-chip:active { transform: scale(.97); transition-duration: 150ms; }
}
@media (max-width: 560px) {
  /* чистый столбик: этапы и чипы во всю ширину, без центрирования */
  .serp-map { padding-inline: 10px; }
  .serp-stage { max-width: 100%; margin-inline: 0; align-items: stretch; text-align: left; }
  .serp-stage--r .serp-node { flex-direction: row; }
  .serp-node { gap: 12px; justify-content: flex-start; }
  .serp-node-num { width: 46px; height: 46px; font-size: 16px; }
  .serp-node-num::after { inset: -5px; }
  .serp-node-s,
  .serp-stage--r .serp-node-s,
  .serp-stage--l .serp-node-s { margin-inline: 0; max-width: none; font-size: 13.5px; }
  .serp-chips,
  .serp-stage--r .serp-chips,
  .serp-stage--l .serp-chips { align-items: stretch; gap: 10px; }
  .serp-chip { width: 100%; max-width: none; padding: 10px 14px 10px 10px; border-radius: 14px; }
  .serp-chip-t { white-space: normal; line-height: 1.25; }
  /* коннектор — вертикальная нить вместо SVG-дуги */
  .serp-link {
    width: 2px; height: 40px; aspect-ratio: auto;
    margin: 4px auto; border-radius: 2px;
    background: linear-gradient(180deg, rgba(178,106,240,.5), rgba(142,37,228,.12));
  }
  .serp-link svg { display: none; }
  .serp-panel { padding: 20px 16px; }
}
@media (max-width: 400px) {
  .serp-node-num { width: 42px; height: 42px; font-size: 15px; }
  .serp-node-t { font-size: 19px; }
  .serp-chip-ic { width: 34px; height: 34px; }
  .serp-chip-t { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .serp-ghost { display: none; }
  html.js .serp-chip.serp-hint::before,
  html.js .serp-chip.serp-hint .serp-chip-ic,
  html.js .serp-chip.is-active.serp-aplay::after,
  html.js .serp.in .serp-stage--l,
  html.js .serp.in .serp-stage--r,
  html.js .serp.in .serp-link,
  html.js .serp.in .serp-panel,
  html.js .serp-link-path,
  html.js .serp-viz--availability .sg-shift,
  html.js .serp-viz--auto .sv-cell,
  html.js .serp-viz--swaps .sv-swap-card,
  html.js .serp-viz--swaps .sv-approve,
  html.js .serp-viz--market .sv-mkt-open,
  html.js .serp-viz--market .sv-mkt-pin,
  html.js .serp-viz--market .sv-mkt-claim,
  html.js .serp-viz--market .sv-mkt-done,
  html.js .serp-viz--terminal .sv-scan,
  html.js .serp-viz--terminal .sv-live,
  html.js .serp-viz--terminal .sv-match,
  html.js .serp-viz--terminal .sv-event,
  html.js .serp-viz--tasks .sv-tasks li,
  html.js .serp-viz--chat .sv-bub,
  html.js .serp-viz--chat .sv-typing i,
  html.js .serp-viz--transfer .sv-pnode,
  html.js .serp-viz--analytics .sv-abar,
  html.js .serp-viz--iiko .sv-iiko-status i,
  html.js .serp-viz--iiko .sv-iiko-dot,
  html.js .serp-viz--iiko .sv-iiko-row,
  html.js .serp-stage.is-on .serp-node-num::after {
    animation: none !important;
  }
  .serp-link-dot { display: none; }
  .serp-panel.is-swapping .serp-panel-t,
  .serp-panel.is-swapping .serp-panel-d,
  .serp-panel.is-swapping .serp-panel-viz,
  .serp-panel.is-swapping .serp-panel-points,
  .serp-panel.is-swapping .serp-panel-eyebrow,
  .serp-panel.is-swapping .serp-panel-badge { opacity: 1; transform: none; }
}
/* reduced-motion: гасим и пружинку нажатия (задана только в зоне ≤980) */
@media (prefers-reduced-motion: reduce) and (max-width: 980px) {
  .serp-chip:active,
  .serp-stage--l .serp-chip:active,
  .serp-stage--r .serp-chip:active { transform: none; transition-duration: 0s; }
}
/* ============================================================
   #live — «Кто сейчас на смене»: live-доска с главного экрана.
   Отдельный компонент (.lvb-*), партиал: html/35-live.html.
   Вёрстка и палитра срисованы с продуктового LiveShiftTimeline:
   карточка #1E1E3A, коралл #E94560 (маркер «сейчас»), зелёный
   #6BCC60, оранж #FF9500, синий текст #8A9BFF, вторичный #8E8EA0.
   На мобиле веб-вид сохраняется: доска держит min-width, обёртка
   скроллится по X (без overscroll-behavior — см. готчу wheel-trap).
   ============================================================ */

#live .section-head { margin-bottom: clamp(40px, 5vw, 64px); }

.lvb-wrap { max-width: 880px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.lvb {
  --lvb-name: 176px;
  --lvb-pill: 132px;
  --lvb-gap: 10px;
  min-width: 640px;
  border-radius: 14px;
  padding: 16px 16px 14px;
  background: #1E1E3A;
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,0.06),
    0 22px 50px -26px rgba(0,0,0,0.72);
}

/* ---------- шапка ---------- */
.lvb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lvb-ic {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 12px;
  background: rgba(107,204,96,0.15); color: #6BCC60;
}
.lvb-ic svg { width: 18px; height: 18px; }
.lvb-ping {
  position: absolute; top: -2px; right: -2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #6BCC60;
  box-shadow: 0 0 0 2px #1E1E3A;
  animation: lvb-pulse 2s ease-in-out infinite;
}
.lvb-t { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lvb-t b { font-weight: 600; color: #8E8EA0; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.lvb-open {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  color: #E94560; background: rgba(233,69,96,0.10);
}
.lvb-open svg { width: 13px; height: 13px; }
/* На десктопе кнопка — «Открыть расписание»; на мобиле сжимается до «Расписание» (как в iOS). */
.lvb-open-mini { display: none; }

/* ---------- чипы-фильтры (группы + статусы) ---------- */
.lvb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.lvb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px;
  font-size: 11px; font-weight: 600;
  color: #8E8EA0; background: rgba(255,255,255,0.05);
  white-space: nowrap;
}
.lvb-chip.is-on { color: #fff; background: rgba(255,255,255,0.11); }
.lvb-chip > i { width: 8px; height: 8px; border-radius: 3px; background: var(--c); flex: none; }
.lvb-chip--ok   { color: #6BCC60; background: rgba(107,204,96,0.12); }
.lvb-chip--late { color: #FF9500; background: rgba(255,149,0,0.12); }

/* ---------- линейка часов ---------- */
.lvb-ruler {
  position: relative; height: 38px; margin: 0 var(--lvb-pill) 2px var(--lvb-name);
}
.lvb-ruler > span {
  position: absolute; bottom: 2px; left: calc(var(--x) * 1%); transform: translateX(-50%);
  font-size: 10px; color: #8E8EA0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums;
}
.lvb-ruler > span::after {
  content: ''; position: absolute; left: 50%; top: calc(100% + 1px);
  width: 1px; height: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent);
}
.lvb-nowtag {
  position: absolute; top: 0; left: calc(var(--x) * 1%); transform: translateX(-50%);
  font-size: 9px; font-weight: 700; letter-spacing: .08em; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 2px 6px; border-radius: 5px;
  color: #E94560; background: rgba(233,69,96,0.12);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.10);
}
.lvb-nowdot {
  position: absolute; bottom: -4px; left: calc(var(--x) * 1%); transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: #E94560;
  box-shadow: 0 0 0 2px rgba(30,30,58,0.9), 0 0 9px 2px rgba(233,69,96,0.5);
  z-index: 2;
}

/* ---------- тело доски ---------- */
.lvb-body { position: relative; }
.lvb-track {
  position: absolute; top: 0; bottom: 34px;
  left: var(--lvb-name); right: var(--lvb-pill);
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 20% 100%;
}
.lvb-nowline {
  position: absolute; top: -4px; bottom: 0; left: calc(var(--x) * 1%);
  width: 2px; transform: translateX(-1px); border-radius: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.10));
  box-shadow: 0 0 8px 0 rgba(255,255,255,0.25);
}

.lvb-grp {
  display: flex; align-items: baseline; gap: 6px;
  padding: 10px 0 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #8E8EA0;
}
.lvb-grp:first-of-type { padding-top: 2px; }
.lvb-grp b { font-weight: 600; color: rgba(255,255,255,0.30); font-variant-numeric: tabular-nums; }

.lvb-row {
  display: flex; align-items: center; gap: var(--lvb-gap);
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lvb-emp {
  flex: none; width: calc(var(--lvb-name) - var(--lvb-gap));
  display: flex; align-items: center; gap: 8px;
  overflow: hidden;
}
.lvb-who { display: flex; flex-direction: column; min-width: 0; }
.lvb-name {
  font-size: 13px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Настенное время смены — на десктопе живёт ВНУТРИ бара, поэтому здесь скрыто.
   На мобиле (iOS-раскладка) оно переезжает в левую колонку под имя (см. @media). */
.lvb-time {
  display: none;
  font-size: 11px; font-weight: 500; color: #8E8EA0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lvb-av {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: #fff;
}
.lvb-lane { position: relative; flex: 1; min-width: 0; height: 32px; }
.lvb-bar {
  position: absolute; top: 2px; bottom: 2px;
  left: calc(var(--l) * 1%); width: calc(var(--w) * 1%);
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px; border-radius: 6px;
  font-size: 11px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 62%);
  background-color: rgb(var(--rc));
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.20), 0 2px 6px -3px rgba(0,0,0,0.55);
}
.lvb-bar > b { font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.lvb-bar > span { font-weight: 600; color: rgba(255,255,255,0.85); overflow: hidden; text-overflow: ellipsis; }

/* будущая смена: призрачная заливка цвета роли + синяя левая кромка (как в приложении) */
.lvb-bar--up {
  color: rgba(255,255,255,0.80);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 62%);
  background-color: rgba(var(--rc), 0.34);
  box-shadow: inset 2px 0 0 0 #8A9BFF, inset 0 0 0 1px rgba(var(--rc), 0.45);
  animation: lvb-breathe 3.2s ease-in-out infinite;
}
.lvb-bar--up > span { color: rgba(255,255,255,0.65); }

/* опоздание: диагональная янтарная штриховка на тёмной базе (как в приложении) */
.lvb-bar--late {
  background-color: #1E1E3A;
  background-image: repeating-linear-gradient(45deg, rgba(255,149,0,0.95) 0 7px, rgba(255,149,0,0.45) 7px 14px);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.14), 0 2px 6px -3px rgba(0,0,0,0.55);
}
.lvb-bar--late > b {
  padding: 1.5px 6px; border-radius: 5px;
  background: rgba(14,14,26,0.78);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10);
}

.lvb-pillcol { flex: none; width: calc(var(--lvb-pill) - var(--lvb-gap)); display: flex; justify-content: flex-end; }
.lvb-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.lvb-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: lvb-pulse 2s ease-in-out infinite; }
.lvb-pill svg { width: 12px; height: 12px; flex: none; }
.lvb-pill.ok   { color: #6BCC60; background: rgba(107,204,96,0.15); }
.lvb-pill.late { color: #FF9500; background: rgba(255,149,0,0.15); }
.lvb-pill.up   { color: #8A9BFF; background: rgba(138,155,255,0.12); }

/* ---------- полоса «В отпуске» ---------- */
.lvb-foot {
  display: flex; align-items: center; gap: 7px;
  margin-top: 10px; padding-top: 2px;
  /* без своего border-top: линию уже рисует border-bottom последней строки */
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #8E8EA0;
}
.lvb-foot svg { width: 13px; height: 13px; flex: none; opacity: .85; }
.lvb-vchip {
  font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none;
  padding: 2px 8px; border-radius: 6px;
  color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.05);
}

@keyframes lvb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes lvb-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

/* ---------- мобилка: раскладка как в iOS-карточке (LiveShiftTimelineCard) ----------
   Веб-вид с горизонтальным скроллом не помещался на телефоне. Вместо него —
   компактная 2-колоночная сетка iOS: слева «карточка человека» (аватар + имя +
   время + статус-пилюля СТОПКОЙ), справа — весь оставшийся трек под бар-таймлайн.
   Отдельного правого столбца пилюли нет (статус привязан к человеку, живёт под ним).
   Приём: переиспользуем --lvb-name как ЛЕВУЮ колонку, а --lvb-pill как ПРАВЫЙ гуттер
   трека — тогда линейка часов (.lvb-ruler), сетка (.lvb-track) и линия «сейчас»
   считают геометрию по тем же переменным, что и раньше, без отдельных оверрайдов,
   и бары остаются выровнены с линейкой пиксель-в-пиксель. */
@media (max-width: 720px) {
  .lvb-wrap { max-width: none; margin: 0; padding: 0; overflow-x: visible; }
  .lvb {
    /* Пол 140px, чтобы на узких телефонах длинная пилюля («через 18 мин»)
       уместилась под именем и не залезала на трек; потолок 150px. */
    --lvb-name: clamp(140px, 44vw, 150px);  /* левая «карточка человека» */
    --lvb-pill: 14px;                        /* теперь это ПРАВЫЙ гуттер трека (не столбец пилюли) */
    --lvb-gap: 0px;
    min-width: 0;
    padding: 14px 14px 12px;
  }

  /* Шапка: длинную «Открыть расписание» сжимаем до «Расписание →». */
  .lvb-open-full { display: none; }
  .lvb-open-mini { display: inline; }
  .lvb-open { margin-left: auto; padding: 6px 10px; }
  /* Часы «· 19:42» в заголовке на узком экране не влезают рядом с кнопкой и
     обрезались бы в «…». Прячем — текущее время всё равно есть в бейдже «СЕЙЧАС». */
  .lvb-t b { display: none; }

  /* Линейка часов: на узком треке подписи шага 20% (≈30px) стыкуются вплотную.
     Показываем через одну (16:00 · 20:00) — как прореживает часы iOS-карточка. */
  .lvb-ruler > span:nth-of-type(2),
  .lvb-ruler > span:nth-of-type(4) { display: none; }

  /* Строка → CSS-сетка: слева стопка [emp / pill], справа бар-трек на всю высоту,
     плюс пустой правый гуттер. Колонка «lane» (1fr) = ровно та же зона
     [левая колонка … 100%−гуттер], по которой считает линейка и линия «сейчас». */
  .lvb-row {
    display: grid;
    grid-template-columns: var(--lvb-name) 1fr var(--lvb-pill);
    grid-template-areas:
      "emp  lane gut"
      "pill lane gut";
    align-items: center;
    column-gap: 0;
    padding: 8px 0;
  }
  .lvb-emp {
    grid-area: emp; align-self: end;
    width: auto; align-items: flex-start; gap: 9px; overflow: visible;
  }
  .lvb-time { display: block; }
  .lvb-lane { grid-area: lane; align-self: center; }
  /* Пилюля переезжает ПОД имя: отступ ≈ ширина аватара (30) + gap (7) = 37px.
     Чуть компактнее, чем на десктопе, — чтобы длинные подписи влезали в узкую колонку. */
  .lvb-pillcol {
    grid-area: pill; align-self: start;
    width: auto; justify-content: flex-start;
    padding-left: 37px; margin-top: 4px; overflow: hidden;
  }
  .lvb-pill { font-size: 9px; padding: 3px 6px; gap: 4px; }
  .lvb-pill svg { width: 11px; height: 11px; }
  .lvb-pill i { width: 5px; height: 5px; }

  /* Время смены теперь в левой колонке — из бара его убираем, оставляя чистый
     цветной сегмент с именем смены (как на iOS). */
  .lvb-bar { font-size: 10.5px; padding: 0 7px; }
  .lvb-bar > b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lvb-ping, .lvb-pill i, .lvb-bar--up { animation: none; }
}