/* ── Шрифты лежат рядом: без обращения к fonts.googleapis.com ──
   font-display: swap – текст виден сразу системным шрифтом,
   подменяется, как только приедет свой.                      */
/* Golos Text 400 · cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/golostext-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Golos Text 400 · latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/golostext-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;
}
/* Golos Text 500 · cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/golostext-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Golos Text 500 · latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/golostext-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;
}
/* Golos Text 600 · cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/golostext-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Golos Text 600 · latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/golostext-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;
}
/* Source Serif 4 400 italic · cyrillic */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/sourceserif4-400i-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Source Serif 4 400 italic · latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/sourceserif4-400i-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;
}
/* Source Serif 4 400 · cyrillic */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/sourceserif4-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Source Serif 4 400 · latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/sourceserif4-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;
}
/* Source Serif 4 600 · cyrillic */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/sourceserif4-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Source Serif 4 600 · latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/sourceserif4-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;
}

/* ── дизайн-система Classical, встроена ── */
/* Classical — design-system tokens and component classes. Rebuilt 2026-09 from the coaching-landing reference: light airy ground, serif display over a clean grotesque, filled indigo pills, soft rounded cards, lavender washes, near-black feature bands. */


:root {
  --color-bg: #fbfbfd;
  --color-surface: #f4f3fa;
  --color-text: #16151c;
  --color-accent: #5a52e4; /* = accent-600; the filled-button step (white text passes) */
  --color-accent-2: #e0a33a;
  --color-divider: color-mix(in srgb, #16151c 10%, transparent);

  /* Dark band — hero overlays, CTA bands, footer */
  --color-dark: #0e0d12;
  --color-dark-raised: #17161f;
  --color-on-dark: #f4f3f8;
  --color-on-dark-muted: color-mix(in srgb, #f4f3f8 62%, transparent);

  /* Wash — the soft lavender gradient behind tinted sections (use via .wash) */
  --wash-1: #f8eef6;
  --wash-2: #ecebfc;

  /* Tonal ramps — generated in OKLCH on one shared lightness scale. */
  --color-neutral-100: #f7f7fa;
  --color-neutral-200: #ecebf1;
  --color-neutral-300: #dbdae3;
  --color-neutral-400: #bfbeca;
  --color-neutral-500: #a09fad;
  --color-neutral-600: #82818f;
  --color-neutral-700: #646371;
  --color-neutral-800: #47464f;
  --color-neutral-900: #2b2a31;

  --color-accent-100: #efeefd;
  --color-accent-200: #dedcfb;
  --color-accent-300: #c6c3f7;
  --color-accent-400: #a49ef1;
  --color-accent-500: #7d75ec;
  --color-accent-600: #5a52e4;
  --color-accent-700: #4640b8;
  --color-accent-800: #322d86;
  --color-accent-900: #211e58;

  --color-accent-2-100: #fdf3dc;
  --color-accent-2-200: #fae2b0;
  --color-accent-2-300: #f2cb79;
  --color-accent-2-400: #e5ad45;
  --color-accent-2-500: #d1921f;
  --color-accent-2-600: #ad7413;
  --color-accent-2-700: #87590e;
  --color-accent-2-800: #5f3e0a;
  --color-accent-2-900: #3d2807;

  --font-heading: "Source Serif 4", Georgia, serif;
  --font-heading-weight: 600;
  --font-body: "Golos Text", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Elevation — soft, wide, barely-tinted; never a hard drop. */
  --shadow-sm: 0 1px 3px color-mix(in srgb, #211e58 7%, transparent), 0 4px 14px color-mix(in srgb, #211e58 5%, transparent);
  --shadow-md: 0 8px 28px color-mix(in srgb, #211e58 10%, transparent);
  --shadow-lg: 0 24px 64px color-mix(in srgb, #211e58 16%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.14; letter-spacing: -0.01em; margin: 0 0 var(--space-3);
  text-wrap: pretty;
}
h1 { font-size: 56px; }
h2 { font-size: 40px; }
h3 { font-size: 24px; }
h4 { font-size: 22px; }
h5 { font-size: 17px; }
h6 { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 13px; margin-top: var(--space-2); color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 25%, transparent); }

/* — section moods — */
.wash { background: linear-gradient(160deg, var(--wash-1), var(--wash-2)); }
.dark { background: var(--color-dark); color: var(--color-on-dark); }
.dark .text-muted, .dark figcaption { color: var(--color-on-dark-muted); }
.dark a { color: var(--color-accent-400); }
.dark a:hover { color: var(--color-accent-300); }

/* — kicker (the small accent lead-in above a heading) — */
.kicker {
  display: block; font-family: var(--font-heading); font-style: italic; font-weight: 400;
  font-size: 18px; color: var(--color-accent); margin-bottom: var(--space-2);
}
.dark .kicker { color: var(--color-accent-400); }

/* — two-tone headline: wrap the trailing phrase — */
.dim { color: var(--color-neutral-600); }

/* — rules — */
.hr { height: 1px; border: 0; margin: var(--space-6) 0; background: var(--color-divider); }

/* — buttons: filled pills — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1.2;
  color: var(--color-text); background: transparent; border: 1px solid transparent;
  padding: 13px 26px; border-radius: var(--radius-pill);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); color: #fff; }
.btn-primary:active { background: var(--color-accent-800); border-color: var(--color-accent-800); }
.btn-secondary { border-color: var(--color-accent); color: var(--color-accent); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-accent) 9%, transparent); color: var(--color-accent-700); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.btn-ghost { color: var(--color-text); padding-inline: var(--space-3); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-text) 12%, transparent); }
.btn-icon { width: 44px; height: 44px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }
.dark .btn-secondary { border-color: var(--color-accent-400); color: var(--color-accent-300); }
.dark .btn-secondary:hover { background: color-mix(in srgb, var(--color-accent-400) 14%, transparent); color: var(--color-accent-200); }
.dark .btn-ghost { color: var(--color-on-dark); }
.dark .btn-ghost:hover { background: color-mix(in srgb, #f4f3f8 10%, transparent); }

/* — icon chip: the filled round icon that leads cards and list items — */
.icon-chip {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: #fff;
}
.icon-chip svg { display: block; }
.icon-chip-soft { background: var(--color-accent-100); color: var(--color-accent-700); }

/* — forms — */
.field > label {
  display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.input {
  width: 100%; min-height: 48px; padding: 12px 18px; font: inherit;
  font-size: 15px; color: var(--color-text); caret-color: var(--color-accent);
  background: #fff; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md);
}
.input::placeholder { color: var(--color-neutral-500); }
.input:hover { border-color: var(--color-neutral-400); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input-pill { border-radius: var(--radius-pill); }
textarea.input { min-height: 100px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; }
.radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-neutral-400); background: #fff; }
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px #fff; }
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg { display: inline-flex; padding: 4px; gap: 2px; background: var(--color-neutral-200); border-radius: var(--radius-pill); }
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer;
  border-radius: var(--radius-pill); color: var(--color-neutral-700);
}
.seg-opt:has(input:checked) { background: #fff; color: var(--color-text); box-shadow: var(--shadow-sm); }
.seg-opt:not(:has(input:checked)):hover { color: var(--color-text); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards: filled, rounded, softly lifted — */
.card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: #fff; border: 0; box-shadow: var(--shadow-sm);
}
.wash .card, .card-flat { box-shadow: none; background: color-mix(in srgb, #fff 72%, transparent); }
.dark .card { background: var(--color-dark-raised); box-shadow: none; }
.card-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-800); }
.dark .card-kicker { color: var(--color-accent-400); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 21px; line-height: 1.25; }
.card-body { margin: 0; font-size: 14.5px; color: color-mix(in srgb, currentColor 62%, transparent); flex: 1; }
.card-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: color-mix(in srgb, currentColor 50%, transparent); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500;
  padding: 5px 14px; border-radius: var(--radius-pill);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-700); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent-300); color: var(--color-accent-700); }

/* — navigation: quiet bar, pill-highlighted current page — */
.nav { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); }
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 21px; margin-right: auto; color: inherit; text-decoration: none;
}
.nav a:not(.nav-brand):not(.btn) {
  color: inherit; text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 9px 18px; border-radius: var(--radius-pill);
}
.nav a:not(.nav-brand):not(.btn):hover { background: color-mix(in srgb, currentColor 7%, transparent); }
.nav a[aria-current] { background: color-mix(in srgb, currentColor 9%, transparent); }
.nav .btn { margin-left: var(--space-2); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th {
  text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  padding: var(--space-3); border-bottom: 1px solid var(--color-divider);
}
.table td { padding: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 3%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-6);
  background: color-mix(in srgb, var(--color-dark) 55%, transparent);
}
.dialog {
  width: min(460px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-8); border-radius: var(--radius-lg);
  background: #fff; box-shadow: var(--shadow-lg);
}
.dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; }
.dialog-body { font-size: 15px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — imagery: big, softly rounded, untreated — */
.plate { border-radius: var(--radius-lg); overflow: hidden; }
.plate img, .plate image-slot { border-radius: inherit; }

/* Только раскладка. Весь вид – из styles.css. */
body { margin: 0; text-wrap: pretty; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.nav { padding-inline: max(clamp(20px, 4vw, 48px), calc((100% - 1160px) / 2 + 24px)); position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(8px); }
@media (max-width: 760px) { .nav a:not(.nav-brand):not(.btn) { display: none; } }
section { padding: clamp(56px, 8vw, 104px) 0; }
.sub { font-size: 17px; color: color-mix(in srgb, currentColor 62%, transparent); max-width: 54ch; }
.cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.note { margin-top: var(--space-4); font-size: 14px; color: color-mix(in srgb, currentColor 78%, transparent); }
h2 { font-size: clamp(30px, 3.6vw, 44px); margin: 0 0 var(--space-4); }
h3 { font-size: clamp(22px, 2.2vw, 28px); margin: 0 0 var(--space-3); }

/* hero */
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(38px, 5.2vw, 66px); margin-bottom: var(--space-4); }
.hero-figure { margin: 0; }
.hero-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.proof { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--space-6); font-size: 14px; color: color-mix(in srgb, currentColor 62%, transparent); }
.proof .dots { display: flex; }
.proof .dots i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-bg); }
.proof .dots i + i { margin-left: -9px; }

/* общие сетки */
.sec-head { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: var(--space-6) clamp(32px,5vw,72px); align-items: end; margin-bottom: clamp(28px,4vw,48px); }
.sec-head h2 { margin: 0; }
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.cards-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
.cards-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--space-4); }
.row-card { flex-direction: row; align-items: flex-start; gap: var(--space-4); }
.row-card .txt p { margin: 0; font-size: 15px; color: color-mix(in srgb, currentColor 62%, transparent); }
.row-card .txt h3 { margin: 0 0 var(--space-1); font-size: 17px; }
.split .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px,5vw,72px); align-items: center; }
.split-figure { margin: 0; }
.split-figure img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.band { border-radius: var(--radius-lg); padding: clamp(40px,5vw,72px); }
.band h2 { max-width: 20ch; }
.lead { font-size: 18px; max-width: 60ch; }
.muted { color: color-mix(in srgb, currentColor 62%, transparent); }

@media (max-width: 980px) { .cards-5 { grid-template-columns: repeat(2,1fr); } .cards-3 { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .hero .wrap, .split .wrap, .sec-head, .cards-2 { grid-template-columns: 1fr; }
  .hero-figure { order: -1; max-width: 420px; }
  .cards-5 { grid-template-columns: 1fr; }
}


/* ── Мобильная версия ── */
@media (max-width: 860px){
  .lesson-grid{grid-template-columns:1fr;gap:var(--space-6)}
  .lesson-grid .player{order:-1}
  #cta{grid-template-columns:1fr!important;gap:var(--space-6)!important}
  #cta .compass-wrap{order:-1}
  #cta .compass-wrap .ill{max-width:180px!important;margin:0 auto}
  .wrap.split{grid-template-columns:1fr!important;gap:var(--space-7)!important}
}
@media (max-width: 760px){
  .hour-ill{margin-top:var(--space-5)}
  .cust-side,.customs-ill .cps{display:none}
  .customs-ill{overflow:hidden}
  .customs-ill{max-width:300px;margin:0 auto}
  .route-spine{display:none}
  .walkpath{height:130px;margin:var(--space-5) 0 var(--space-6)}
  .walker2{width:34px;height:41px;bottom:52px}
  .plane{width:66px;height:42px}
  .gate{font-size:10px}
  .karta-link{height:56px}
  .karta-link .stn{width:11px;height:11px;margin-left:-5.5px}
  .stn.s1,.stn.s3,.stn.s5{top:12px}
  .stn.s2,.stn.s4{top:38px}
  .player-btn{width:56px;height:56px;margin-top:-28px;right:20px}
  .player-btn svg{width:20px;height:20px}
  .brief-num b{font-size:36px}
  .price-card .price-old{font-size:36px}
  .price-card .price-new{font-size:28px}
  .price-card .stamp{width:74px;right:6px;bottom:8px}
  .mini{height:112px;width:100%}
  .fit-row{padding:10px 12px;margin:0 -12px}
  .sec-head{gap:var(--space-4)}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%;justify-content:center}
  .proof{flex-wrap:wrap}
  .skyline{position:static;text-align:left;margin-top:var(--space-3);max-width:none;opacity:1;transform:none}
  .skyline b{font-size:16px}
  .skyline i{display:block;font-size:12px}
}
@media (max-width: 480px){
  .walkpath{height:112px}
  .walker2{width:28px;height:34px;bottom:44px}
  .plane{width:54px;height:34px}
  .brief-list li{font-size:13px}
  .table-scroll .table{min-width:480px}
}

/* ── Ретюн палитры: теплее и характернее, роли системы сохранены ── */
:root{
  --color-bg:#fdfcfa;
  --color-accent:#4b45d8;
  --color-accent-2:#d98324;
  --wash-1:#fdefe4; --wash-2:#f3eefc;
  --wash-cool-1:#eef0fd; --wash-cool-2:#f7edf7;
  --ink-soft: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.wash-cool{ background:linear-gradient(160deg,var(--wash-cool-1),var(--wash-cool-2)); }

/* ── Появление при прокрутке ── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease-out,transform .6s ease-out}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* ── Иллюстрации ── */
.ill{display:block;width:100%;height:auto;overflow:visible}
.ill .draw{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.4s cubic-bezier(.3,.6,.3,1)}
.in .ill .draw,.ill.in .draw{stroke-dashoffset:0}
.ill .pop{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;transition:opacity .4s ease-out,transform .4s cubic-bezier(.3,1.4,.5,1)}
.in .ill .pop,.ill.in .pop{opacity:1;transform:none}

/* мягкие пятна за портретом */
.hero-figure{position:relative}
.blob{position:absolute;border-radius:50%;filter:blur(0);z-index:-1}
.blob-a{width:58%;aspect-ratio:1;left:-12%;top:-8%;background:color-mix(in srgb,var(--color-accent-200) 70%,transparent)}
.blob-b{width:42%;aspect-ratio:1;right:-8%;bottom:-6%;background:color-mix(in srgb,var(--color-accent-2-200) 70%,transparent)}

/* орбита «движение по кругу» */
.orbit-dot{transform-box:view-box;transform-origin:150px 150px;animation:orbitRun 13s linear infinite}
@keyframes orbitRun{to{transform:rotate(360deg)}}
.loop-burn{stroke-dasharray:100;stroke-dashoffset:100;animation:burnRun 13s linear infinite}
@keyframes burnRun{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}
.loop-back{transform-box:view-box;transform-origin:150px 46px;animation:backFlash 13s linear infinite}
@keyframes backFlash{0%,84%{opacity:0;transform:scale(.7)}88%{opacity:1;transform:scale(1.35)}94%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.crumbs circle{opacity:0;transform-box:fill-box;transform-origin:center;animation:crumbFall 13s cubic-bezier(.4,0,.9,.6) infinite}
@keyframes crumbFall{
  0%,86%{opacity:0;transform:none}
  88%{opacity:1;transform:none}
  99%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--dr))}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--dr))}
}
.loop-cost{opacity:0;transform-box:view-box;animation:costIn 13s linear infinite}
@keyframes costIn{0%,84%{opacity:0;transform:translateY(8px)}90%{opacity:1;transform:none}97%{opacity:1;transform:none}100%{opacity:0;transform:none}}

/* соединитель этапов КАРТА */
.karta-link{margin-bottom:calc(var(--space-4) * -1);height:56px}

/* путь встречи с фигурой */
.walkpath{position:relative;height:170px;margin:var(--space-6) 0 var(--space-8)}
.walker2{position:absolute;left:0;bottom:66px;width:44px;height:53px;transform-origin:bottom center;will-change:transform,opacity}
.walker2 .leg,.walker2 .arm{transform-box:view-box;transform-origin:19px 27px}
.walker2 .arm{transform-origin:19px 18px}
.walker2.step .leg-f{animation:strideA .58s ease-in-out infinite}
.walker2.step .leg-b{animation:strideB .58s ease-in-out infinite}
.walker2.step .arm-f{animation:strideB .58s ease-in-out infinite}
.walker2.step .arm-b{animation:strideA .58s ease-in-out infinite}
.walker2.step svg{animation:bob .58s ease-in-out infinite}
@keyframes strideA{0%,100%{transform:rotate(17deg)}50%{transform:rotate(-17deg)}}
@keyframes strideB{0%,100%{transform:rotate(-17deg)}50%{transform:rotate(17deg)}}
.walker2 svg{width:100%;height:100%;display:block}
.walker2.step svg{animation:bob .62s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}

/* мини-кривая в карточке кейса */
.mini{height:130px;width:300px;max-width:100%;margin:0 auto var(--space-3)}
/* кейс 1: задачи уходят в команду */
.t-load .t-box{transform-box:view-box;transform-origin:center;transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .5s ease}
.in .t-load .b1{transform:translate(112px,-30px);opacity:0;transition-delay:.5s}
.in .t-load .b2{transform:translate(148px,-16px);opacity:0;transition-delay:.7s}
.in .t-load .b3{transform:translate(211px,-32px);opacity:0;transition-delay:.9s}
.t-team .t-mate{opacity:0;transform:translateY(10px);transform-box:view-box;transition:opacity .45s ease-out,transform .45s cubic-bezier(.3,1.3,.5,1)}
.in .t-team .m1{opacity:1;transform:none;transition-delay:.95s}
.in .t-team .m2{opacity:1;transform:none;transition-delay:1.1s}
.in .t-team .m3{opacity:1;transform:none;transition-delay:1.25s}
.t-arrow{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .6s ease-out}
.in .t-arrow.a1{stroke-dashoffset:0;transition-delay:.35s}
.in .t-arrow.a2{stroke-dashoffset:0;transition-delay:.55s}
.in .t-arrow.a3{stroke-dashoffset:0;transition-delay:.75s}
/* кейс 2: неделя освобождается, появляется свой канал */
.cal-cells .c{fill:var(--color-neutral-300);transition:fill .4s ease,opacity .4s ease}
.in .cal-cells .c9,.in .cal-cells .c10,.in .cal-cells .c11,.in .cal-cells .c12{opacity:.25;transition-delay:.6s}
.in .cal-cells .c5,.in .cal-cells .c6{opacity:.25;transition-delay:.75s}
.in .cal-cells .c3,.in .cal-cells .c7{fill:var(--color-accent-300);transition-delay:.9s}
.cal-arrow{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .5s ease-out 1s}
.in .cal-arrow{stroke-dashoffset:0}
.cal-play{opacity:0;transform:scale(.6);transform-box:view-box;transform-origin:255px 67px;transition:opacity .4s ease-out 1.2s,transform .5s cubic-bezier(.25,1.5,.4,1) 1.2s}
.in .cal-play{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  .ill .draw{stroke-dashoffset:0;transition:none}
  .ill .pop{opacity:1;transform:none;transition:none}
  .orbit-dot,.walker2.step svg,.loop-burn,.loop-back,.loop-cost,.trail,.hg-fall circle,.steps .ft,.crumbs circle,.loop-back,.sieve-ill *,.price-card .stamp,.price-card .seat,.price-card .price-new,.t-mate,.t-owner,.cal-cells .c,.cal-play,.sheet-ill .goal circle,.sheet-ill .chk circle,.cust-side circle.pop,.player-bar i{animation:none}
  .sieve-ill .sp{opacity:1}.sieve-ill .sd,.sieve-ill .sb{opacity:1}
  .loop-cost{opacity:1}
}

.ill .grow rect{transform-box:fill-box;transform-origin:bottom center;transform:scaleY(0);transition:transform .7s cubic-bezier(.3,1.2,.4,1)}
.in .ill .grow rect,.ill.in .grow rect{transform:none}

.price-card{position:relative;overflow:hidden}
.price-card .price-old{font-family:var(--font-heading);font-size:44px;color:var(--color-neutral-700);position:relative;display:inline-block}
.price-card .price-old::after{content:"";position:absolute;left:-8px;right:-8px;top:52%;height:3px;border-radius:2px;background:var(--color-accent-2);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.3,1,.4,1) .35s}
.price-card.in .price-old::after{transform:scaleX(1)}
.price-card .price-new{font-family:var(--font-heading);font-size:34px;margin:0;color:var(--color-accent);opacity:0;transform:translateY(10px);transition:opacity .5s ease-out .8s,transform .5s cubic-bezier(.3,1.2,.4,1) .8s}
.price-card.in .price-new{opacity:1;transform:none}
.price-card .stamp{position:absolute;right:10px;bottom:12px;width:96px;opacity:0;transform:scale(1.5) rotate(-26deg);transition:opacity .3s ease-out 1.1s,transform .45s cubic-bezier(.2,1.5,.4,1) 1.1s}
.price-card.in .stamp{opacity:.72;transform:scale(1) rotate(-12deg)}
.seats{display:flex;gap:8px;justify-content:center;margin-top:var(--space-5)}
.seat{width:32px;height:9px;border-radius:5px;background:transparent;box-shadow:inset 0 0 0 2px var(--color-neutral-300);opacity:0;transform:translateY(6px);transition:opacity .3s ease-out,transform .3s ease-out}
.seat.on{background:var(--color-accent);box-shadow:none}
.price-card.in .seat{opacity:1;transform:none}
.price-card.in .seat:nth-child(1){transition-delay:1.25s}.price-card.in .seat:nth-child(2){transition-delay:1.35s}
.price-card.in .seat:nth-child(3){transition-delay:1.45s}.price-card.in .seat:nth-child(4){transition-delay:1.55s}
.price-card.in .seat:nth-child(5){transition-delay:1.65s}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--space-4) * -1);padding-inline:var(--space-4)}
.table-scroll .table{min-width:560px}
.hero{overflow:hidden}

.lesson-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.player{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:20px;
        box-shadow:var(--shadow-md);transition:transform .3s ease,box-shadow .3s ease}
.player:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.player-art{display:block;width:100%;height:auto;border-radius:20px}
.player-btn{position:absolute;right:34px;top:50%;margin-top:-38px;width:76px;height:76px;border-radius:50%;
            background:var(--color-accent);color:#fff;display:grid;place-items:center;transition:transform .3s cubic-bezier(.3,1.4,.5,1),background .25s ease}
.player-btn svg{width:28px;height:28px;margin-left:4px}
.player:hover .player-btn{transform:scale(1.1);background:var(--color-accent-2)}
.player-btn .ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--color-accent);opacity:0;animation:ringOut 2.6s ease-out infinite}
@keyframes ringOut{0%{transform:scale(.86);opacity:.7}70%{transform:scale(1.3);opacity:0}100%{opacity:0}}
.player-time{position:absolute;left:22px;bottom:20px;font-size:12px;font-weight:500;color:var(--color-on-dark-muted);letter-spacing:.02em}
.player-bar{position:absolute;left:22px;right:22px;bottom:12px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--color-on-dark) 18%,transparent);overflow:hidden}
.player-bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--color-accent-2);transition:width .6s ease}
.player:hover .player-bar i{width:34%}

.compass-wrap{position:relative}
#cta{overflow:hidden}
.compass-wrap .rays{position:absolute;inset:-40% -20%;width:140%;height:180%;pointer-events:none;z-index:0}
.compass-wrap .ill{position:relative;z-index:1}
.compass-wrap.track .compass-needle{animation:none;transition:transform .45s cubic-bezier(.3,1.2,.4,1)}

.brief-num{display:flex;align-items:baseline;gap:10px;margin:var(--space-2) 0 var(--space-3)}
.brief-num b{font-family:var(--font-heading);font-size:44px;font-weight:600;line-height:1;color:var(--color-text)}
.brief-num i{font-style:normal;font-size:14px;color:var(--ink-soft)}
.brief-bar{display:flex;gap:4px;height:9px;margin-bottom:var(--space-4)}
.brief-bar .seg{flex:1;border-radius:5px;background:var(--color-accent-200);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.3,1,.4,1)}
.brief.in .seg{transform:none}
.brief.in .s1{transition-delay:.25s}.brief.in .s2{transition-delay:.45s;background:var(--color-accent-300)}
.brief.in .s3{transition-delay:.65s;background:var(--color-accent)}
.brief-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.brief-list li{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ink-soft);
               opacity:0;transform:translateX(-6px);transition:opacity .4s ease-out,transform .4s ease-out}
.brief.in .brief-list li{opacity:1;transform:none}
.brief.in .brief-list li:nth-child(1){transition-delay:.8s}
.brief.in .brief-list li:nth-child(2){transition-delay:.92s}
.brief.in .brief-list li:nth-child(3){transition-delay:1.04s}
.brief-list .ic{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
                background:var(--color-accent-100);color:var(--color-accent)}

.sheet-ill{overflow:hidden}
.sheet-ill .sheet-paper{transform-box:view-box;transform-origin:210px 250px;opacity:0;transform:scale(.94);
                        transition:opacity .5s ease-out .35s,transform .6s cubic-bezier(.3,1.1,.4,1) .35s}
.in .sheet-ill{overflow:hidden}
.sheet-ill .sheet-paper{opacity:1;transform:none}
.sheet-ill .sc{transform-box:view-box;transition:transform .75s cubic-bezier(.35,1,.35,1),opacity .5s ease}
.sheet-ill .s-a{transform:translate(-90px,-58px) rotate(-12deg)}
.sheet-ill .s-b{transform:translate(150px,-40px) rotate(9deg)}
.sheet-ill .s-c{transform:translate(-70px,150px) rotate(6deg)}
.sheet-ill .s-d{transform:translate(140px,180px) rotate(-8deg)}
.in .sheet-ill .sc{transform:none;opacity:0;transition-delay:.05s,.55s}
.sheet-ill .chk{opacity:0;transform:translateX(-14px);transform-box:view-box;
                transition:opacity .45s ease-out,transform .45s cubic-bezier(.3,1.2,.4,1)}
.in .sheet-ill .c1{opacity:1;transform:none;transition-delay:.6s}
.in .sheet-ill .c2{opacity:1;transform:none;transition-delay:.75s}
.in .sheet-ill .c3{opacity:1;transform:none;transition-delay:.9s}
.sheet-ill .tick{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .35s ease-out}
.in .sheet-ill .c1 .tick{stroke-dashoffset:0;transition-delay:.85s}
.in .sheet-ill .c2 .tick{stroke-dashoffset:0;transition-delay:1s}
.in .sheet-ill .c3 .tick{stroke-dashoffset:0;transition-delay:1.15s}
.sheet-ill .goal{opacity:0;transform:scale(.4);transform-box:view-box;transform-origin:344px 210px;
                 transition:opacity .35s ease-out 1.45s,transform .5s cubic-bezier(.2,1.6,.4,1) 1.45s}
.sheet-ill .goal.g2{transform-origin:344px 272px;transition-delay:1.55s}
.in .sheet-ill .goal{opacity:1;transform:none}

.hour-ill{max-width:420px;margin-top:var(--space-6)}
.hg-sand-top{transform-box:fill-box;transform-origin:center bottom;transform:scaleY(1);transition:transform 3.2s cubic-bezier(.4,0,.5,1) .3s}
.in .hg-sand-top{transform:scaleY(.06)}
.hg-sand-bot{transform-box:fill-box;transform-origin:center bottom;transform:scaleY(.04);transition:transform 3.2s cubic-bezier(.4,0,.5,1) .3s}
.in .hg-sand-bot{transform:scaleY(1)}
.hg-fall circle{opacity:0}
.in .hg-fall circle{animation:grainFall 1.35s linear infinite}
@keyframes grainFall{0%{opacity:0;transform:translateY(-8px)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(58px)}}

/* ── Метод: линия как путь со следами ── */
.karta-link{position:relative;height:72px;margin:0 0 var(--space-4)}
.stn{position:absolute;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:var(--color-accent);
     opacity:0;transform:scale(.4);transition:opacity .35s ease-out,transform .45s cubic-bezier(.3,1.5,.5,1);box-shadow:0 0 0 5px var(--color-bg)}
.karta-link.in .stn{opacity:1;transform:none}
.stn.s1{left:10%;top:16px;transition-delay:.25s}
.stn.s2{left:30%;top:48px;transition-delay:.45s}
.stn.s3{left:50%;top:16px;transition-delay:.65s}
.stn.s4{left:70%;top:48px;transition-delay:.85s}
.stn.s5{left:90%;top:16px;background:var(--color-accent-2);transition-delay:1.05s}
.steps .ft{opacity:0;transform-box:fill-box;transform-origin:center}
.karta-link.in .steps .ft{animation:stepPrint 5.6s linear infinite}
@keyframes stepPrint{
  0%{opacity:0;transform:scale(.5)}
  4%{opacity:.9;transform:scale(1)}
  24%{opacity:.9}
  46%{opacity:.13}
  100%{opacity:0}
}
.cards-5 .card{transition:transform .35s ease,box-shadow .35s ease}
.cards-5 .card.lit{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.cards-5 .card .icon-chip{transition:background .3s ease,color .3s ease,transform .3s ease}
.cards-5 .card.lit .icon-chip{background:var(--color-accent);color:#fff;transform:scale(1.12)}

/* ── Фильтр: сито ── */
.sieve-ill{max-width:400px;justify-self:end}
.sieve-ill .sd{opacity:0;transform-box:fill-box;transform-origin:center;animation:sieveDrop 4.6s ease-in infinite}
.sieve-ill .d1{animation-delay:0s}.sieve-ill .d2{animation-delay:.5s}.sieve-ill .d3{animation-delay:1s}
.sieve-ill .d4{animation-delay:1.5s}.sieve-ill .d5{animation-delay:2s}
@keyframes sieveDrop{0%{opacity:0;transform:translateY(-16px)}8%{opacity:1;transform:none}26%{opacity:1;transform:translateY(58px)}32%{opacity:0;transform:translateY(66px)}100%{opacity:0;transform:translateY(66px)}}
.sieve-ill .sp{opacity:0;transform-box:fill-box;animation:sievePass 4.6s ease-out infinite}
.sieve-ill .p1{animation-delay:0s}.sieve-ill .p3{animation-delay:1s}.sieve-ill .p5{animation-delay:2s}
@keyframes sievePass{0%,26%{opacity:0;transform:translateY(-58px)}36%{opacity:1;transform:translateY(-14px)}46%{opacity:1;transform:none}74%{opacity:1;transform:none}84%{opacity:0;transform:translateY(10px)}100%{opacity:0}}
.sieve-ill .sb{opacity:0;transform-box:fill-box;animation:sieveBounce 4.6s cubic-bezier(.3,.1,.6,1) infinite}
.sieve-ill .b2{animation-delay:.5s}.sieve-ill .b4{animation-delay:1.5s}
@keyframes sieveBounce{0%,26%{opacity:0;transform:translateY(0)}31%{opacity:1;transform:translateY(0)}48%{opacity:1;transform:translate(26px,-34px)}72%{opacity:0;transform:translate(52px,20px)}100%{opacity:0}}
@media (max-width:860px){.sieve-ill{justify-self:start;max-width:320px;margin-top:var(--space-4)}}

/* ── Мелкая жизнь в статичных сценах ── */

/* Про деньги: печать дышит, свободные места мигают, цена подрагивает */
.price-card.in .stamp{animation:stampBreath 6s ease-in-out 2s infinite}
@keyframes stampBreath{0%,100%{transform:rotate(-12deg) scale(1)}45%{transform:rotate(-10.2deg) scale(1.035)}}
.price-card.in .seat:nth-child(4),.price-card.in .seat:nth-child(5){animation:seatBlink 2.8s ease-in-out infinite}
.price-card.in .seat:nth-child(5){animation-delay:.6s}
@keyframes seatBlink{0%,100%{box-shadow:inset 0 0 0 2px var(--color-neutral-300)}50%{box-shadow:inset 0 0 0 2px var(--color-accent-2)}}
.price-card.in .price-new{animation:freeGlow 5s ease-in-out 1.6s infinite}
@keyframes freeGlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* Кейс 1: команда дышит, задачи в руках покачиваются */
.in .t-team .t-mate{animation:mateBob 3.4s ease-in-out infinite}
.in .t-team .m2{animation-delay:.35s}.in .t-team .m3{animation-delay:.7s}
@keyframes mateBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.in .t-owner{transform-box:view-box;transform-origin:52px 50px;animation:ownerBreath 4.6s ease-in-out infinite}
@keyframes ownerBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

/* Кейс 2: освободившиеся слоты мерцают, кнопка играет */
.in .cal-cells .c3,.in .cal-cells .c7{animation:slotFree 3.2s ease-in-out infinite}
.in .cal-cells .c7{animation-delay:.5s}
@keyframes slotFree{0%,100%{fill:var(--color-accent-300)}50%{fill:var(--color-accent)}}
.in .cal-play{animation:playPulse 2.6s ease-in-out infinite}
@keyframes playPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}

/* Результат: цель пульсирует кольцом, галочки подмигивают */
.in .sheet-ill .goal circle:last-child{transform-box:view-box;transform-origin:344px 210px;animation:goalRing 2.8s ease-out infinite}
@keyframes goalRing{0%{transform:scale(.72);opacity:.6}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
.in .sheet-ill .chk circle{animation:chkGlow 4.4s ease-in-out infinite}
.in .sheet-ill .c2 circle{animation-delay:.5s}.in .sheet-ill .c3 circle{animation-delay:1s}
@keyframes chkGlow{0%,100%{fill:var(--color-accent-100)}50%{fill:var(--color-accent-200)}}

/* Таможня: способности пульсируют, штамп чуть качается */
.in .cust-side circle.pop{animation:dotPulse 3s ease-in-out infinite}
.in .cust-side circle.pop:nth-child(2){animation-delay:.2s}
.in .cust-side circle.pop:nth-child(3){animation-delay:.4s}
.in .cust-side circle.pop:nth-child(4){animation-delay:.6s}
.in .cust-side circle.pop:nth-child(5){animation-delay:.8s}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
.customs-ill .pop circle,.customs-ill .pop text{transform-box:fill-box;transform-origin:center}

/* Урок: полоса прогресса чуть ползет сама */
.player-bar i{animation:barCreep 7s ease-in-out infinite}
@keyframes barCreep{0%,100%{width:6%}50%{width:14%}}

/* ── Наведение ── */
.card{transition:transform .22s ease, box-shadow .22s ease, background .22s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.row-card:hover .icon-chip{transform:scale(1.08)}
.icon-chip{transition:transform .22s ease}
.table tbody tr{transition:background .18s ease}
.table tbody tr:hover{background:color-mix(in srgb,var(--color-accent-100) 60%,transparent)}
.faq-item{transition:padding-left .2s ease}
.faq-item:hover{padding-left:8px}
.faq-item:hover summary{color:var(--color-accent)}
.fit-row{display:flex;gap:var(--space-3);align-items:flex-start;padding:12px 14px;margin:0 -14px;border-radius:var(--radius-md);transition:background .2s ease}
.fit-row:hover{background:color-mix(in srgb,var(--color-accent-100) 70%,transparent)}
.fit-row .ic{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.fit-yes .ic{background:var(--color-accent-100);color:var(--color-accent)}
.fit-no .ic{background:var(--color-neutral-200);color:var(--color-neutral-600)}
.fit-row p{margin:0}

/* ── Сквозная маршрутная линия по лендингу ── */
.route-spine{position:fixed;left:max(16px,calc((100vw - 1160px)/2 - 34px));top:0;bottom:0;width:2px;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s ease}
.route-spine.on{opacity:1}
.route-spine .track{position:absolute;inset:0;background:color-mix(in srgb,var(--color-accent-200) 70%,transparent)}
.route-spine .fill{position:absolute;top:0;left:0;width:2px;height:0;background:var(--color-accent)}
.route-spine .pin{position:fixed;left:0;width:14px;height:14px;margin-left:-6px;border-radius:50%;background:var(--color-accent-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-accent-2) 22%,transparent)}
@media (max-width:1320px){.route-spine{display:none}}

/* ── Компас ── */
.compass-wrap{display:grid;place-items:center}
.compass-needle{transform-box:view-box;transform-origin:110px 110px;animation:needleHunt 14s cubic-bezier(.5,0,.5,1) infinite}
@keyframes needleHunt{
  0%{transform:rotate(-24deg)} 18%{transform:rotate(128deg)} 30%{transform:rotate(96deg)}
  48%{transform:rotate(232deg)} 60%{transform:rotate(208deg)} 78%{transform:rotate(318deg)}
  90%{transform:rotate(302deg)} 100%{transform:rotate(336deg)}
}
.dark .compass-needle{animation-duration:14s}
.compass-dial{transform-box:view-box;transform-origin:110px 110px;animation:dialSpin 90s linear infinite}
@keyframes dialSpin{to{transform:rotate(360deg)}}

/* ── Сумка и граница ── */
.bag-lid{transform-box:view-box;transform-origin:316px 146px;transform:rotate(0deg);transition:transform .8s cubic-bezier(.3,1.3,.5,1) .5s}
.in .bag-lid{transform:rotate(-17deg)}
.cross-item{transition:opacity .5s ease,color .5s ease}
.cross-line{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .5s ease-out}
.in .cross-line{stroke-dashoffset:0}

/* ── Самолёт ── */
.plane{position:absolute;left:0;top:0;width:92px;height:58px;opacity:0;transition:opacity .45s ease;will-change:transform}
.plane.on{opacity:1}
.gate{position:absolute;left:0;top:0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
      opacity:0;transition:opacity .4s ease;white-space:nowrap;transform:translate(-50%,0)}
.gate.on{opacity:1}
.skyline{position:absolute;right:0;bottom:2px;text-align:right;opacity:0;transform:translateY(10px);
         transition:opacity .5s ease-out,transform .5s cubic-bezier(.3,1.2,.4,1);max-width:340px}
.skyline.on{opacity:1;transform:none}
.skyline b{display:block;font-family:var(--font-heading);font-size:20px;font-weight:600;color:var(--color-text);line-height:1.25}
.skyline i{display:block;margin-top:4px;font-style:normal;font-size:13px;color:var(--ink-soft)}
@media (max-width:760px){.walkpath{height:130px}.skyline{max-width:190px}.skyline b{font-size:15px}.skyline i{display:none}}

@media (prefers-reduced-motion: reduce){
  .compass-needle,.compass-dial{animation:none}
  .bag-lid{transform:rotate(-17deg);transition:none}
  .cross-line{stroke-dashoffset:0}
  .card:hover{transform:none}
}


/* ── «Вопросы и ответы» одним экраном: слева вопросы, справа карточка ── */
.faq-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start}
.faq-main h2{margin-bottom:var(--space-3)}
.faq-main .sub{margin:0 0 var(--space-6)}
.faq-main .faq-list{max-width:none}
.faq-card .hour-ill{margin:var(--space-2) 0 var(--space-3);max-width:none}
.faq-card .brief-alt{margin-top:var(--space-2)}
#faq{padding-block:clamp(56px,6vw,88px)}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}}


/* ── Навигационный лист: три раздела = три карточки слева ── */
.ns .ns-paper{opacity:0;transform:scale(.95);transform-box:view-box;transform-origin:220px 270px;
  transition:opacity .5s ease-out .2s,transform .6s cubic-bezier(.3,1.1,.4,1) .2s}
.ns .ns-head{opacity:0;transition:opacity .5s ease-out .45s}
.ns .ns-sec{opacity:0;transform:translateY(8px);transform-box:view-box;
  transition:opacity .5s ease-out,transform .5s cubic-bezier(.3,1.1,.4,1)}
.ns .ns-sec[data-sec="1"]{transition-delay:.6s}
.ns .ns-sec[data-sec="2"]{transition-delay:1.25s}
.ns .ns-sec[data-sec="3"]{transition-delay:1.75s}
.ns .ns-row{opacity:0;transform:translateX(-10px);transform-box:view-box;
  transition:opacity .4s ease-out var(--d),transform .4s ease-out var(--d)}
.ns .ns-tick{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .35s ease-out calc(var(--d) + .2s)}
.ns .ns-limit{transform:scaleX(.2);opacity:0;transform-box:fill-box;transform-origin:left center;
  transition:transform .6s cubic-bezier(.3,1.1,.4,1) 1.4s,opacity .3s ease-out 1.4s}
.ns .ns-route{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s cubic-bezier(.3,.6,.3,1) 2s}
.ns .ns-route.b{transition-delay:2.25s}
.ns .ns-end{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;
  transition:opacity .3s ease-out 3s,transform .45s cubic-bezier(.3,1.6,.5,1) 3s}
.ns .ns-stamp{opacity:0;transform:scale(1.7) rotate(-28deg);transform-box:view-box;transform-origin:360px 62px;
  transition:opacity .25s ease-out 3.3s,transform .45s cubic-bezier(.2,1.6,.4,1) 3.3s}
.ns.in .ns-paper,.ns.in .ns-sec,.ns.in .ns-row{opacity:1;transform:none}
.ns.in .ns-head{opacity:1}
.ns.in .ns-tick,.ns.in .ns-route{stroke-dashoffset:0}
.ns.in .ns-limit{opacity:1;transform:none}
.ns.in .ns-end{opacity:1;transform:none}
.ns.in .ns-stamp{opacity:1;transform:rotate(-10deg)}
/* жизнь после сборки: ограничение подсвечивается, цель пульсирует */
.ns.in .ns-halo{transform-box:fill-box;transform-origin:center;animation:nsHalo 2.8s ease-out 3.4s infinite}
@keyframes nsHalo{0%{transform:scale(.7);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
/* наведение на карточку слева выделяет ее раздел листа */
.ns[data-hl] .ns-sec{opacity:.28;transition:opacity .25s ease,transform .25s ease}
.ns[data-hl="1"] .ns-sec[data-sec="1"],.ns[data-hl="2"] .ns-sec[data-sec="2"],.ns[data-hl="3"] .ns-sec[data-sec="3"]{opacity:1}
.row-card[data-sec]{cursor:default}
@media (prefers-reduced-motion: reduce){
  .ns .ns-paper,.ns .ns-head,.ns .ns-sec,.ns .ns-row,.ns .ns-limit,.ns .ns-end,.ns .ns-stamp{opacity:1;transform:none;transition:none}
  .ns .ns-stamp{transform:rotate(-10deg)}
  .ns .ns-tick,.ns .ns-route{stroke-dashoffset:0;transition:none}
  .ns.in .ns-halo{animation:none}
}

/* ── видео-слоты: пока файла нет, стоит нарисованная сцена ── */
.vslot{margin:0;position:relative}
.vslot > video{display:block;width:100%;height:auto;pointer-events:none;
  transition:opacity .45s ease}
.vslot:not(.has-video) > video{position:absolute;inset:0;opacity:0;visibility:hidden}
.vslot.has-video > svg{display:none}
.vslot.dip > video{opacity:0!important}

/* карточка: видео – самостоятельный кадр, поэтому фон секции не важен */
.vslot-card.has-video{border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-md);background:#f7f3ec}

/* подложка: видео под текстом, текст остается главным */
.vslot-bg{isolation:isolate}
.vslot-bg > video{position:absolute;inset:-10px -32px -20px;width:calc(100% + 64px);height:calc(100% + 30px);object-fit:cover;z-index:-1;
  border-radius:var(--radius-lg);opacity:0}
.vslot-bg.has-video > video{opacity:.35}
.vslot-hidden{display:none!important}

/* FAQ */
.faq-list { border-top: 1px solid var(--color-divider); max-width: 900px; }
.faq-item { border-bottom: 1px solid var(--color-divider); padding: var(--space-4) 0; }
.faq-item summary { cursor: pointer; list-style: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--color-accent); font-family: var(--font-body); font-size: 22px; line-height: 1; }
.faq-item[open] summary::after { content: '–'; }
.faq-item[open] summary { color: var(--color-accent); }
.faq-item p { margin: var(--space-3) 0 0; max-width: 70ch; }

/* footer */
.site-foot { background: var(--color-dark); color: var(--color-on-dark); padding: clamp(40px,5vw,64px) 0; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.foot-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 26px; margin: 0 0 var(--space-1); }

/* квиз */
[hidden] { display: none !important; }
#qz .dialog { width: min(560px, 100%); max-height: min(640px, calc(100dvh - 48px)); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.qz-bar { height: 3px; background: var(--color-neutral-200); flex: none; }
.qz-bar i { display: block; height: 100%; width: 0; background: var(--color-accent); transition: width .25s ease; }
.qz-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-6) 0; flex: none; }
#qz .dialog-body { padding: var(--space-6); overflow: auto; }
#qz .dialog-actions { padding: 0 var(--space-6) var(--space-6); flex: none; }
.qz-q { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; line-height: 1.25; margin: 0 0 var(--space-6); }
.qz-opts { display: flex; flex-direction: column; gap: var(--space-2); }
.qz-opt { text-align: left; width: 100%; font: inherit; font-size: 15px; line-height: 1.45; padding: 14px 18px; border-radius: var(--radius-md); border: 1px solid var(--color-neutral-300); background: #fff; color: var(--color-text); cursor: pointer; transition: border-color .15s, background .15s; }
.qz-opt:hover { border-color: var(--color-accent-400); background: var(--color-accent-100); }
.qz-opt.sel { border-color: var(--color-accent); background: var(--color-accent-100); }
.qz-fields { display: flex; flex-direction: column; gap: var(--space-4); }
.qz-err { color: #b3261e; font-size: 13px; margin: 6px 0 0; display: none; }
.qz-err.on { display: block; }
body.qz-open { overflow: hidden; }
@media (max-width: 520px) { .qz-q { font-size: 20px; } }

/* — точка идет по кругу и зажигает отметку, до которой дошла — */
.loop-marks circle{transform-box:fill-box;transform-origin:center;
  animation:markHit 13s linear infinite}
@keyframes markHit{
  0%{fill:var(--color-accent-2);transform:scale(1.75)}
  4%{fill:var(--color-accent-2);transform:scale(1.35)}
  13%{fill:var(--color-accent-400);transform:scale(1)}
  100%{fill:var(--color-accent-400);transform:scale(1)}
}
.loop-halos circle{transform-box:fill-box;transform-origin:center;opacity:0;
  animation:markHalo 13s linear infinite}
@keyframes markHalo{
  0%{opacity:.7;transform:scale(1)}
  9%{opacity:0;transform:scale(3.2)}
  100%{opacity:0;transform:scale(3.2)}
}
@media (prefers-reduced-motion: reduce){
  .loop-marks circle,.loop-halos circle{animation:none}
  .loop-halos circle{opacity:0}
}

/* — чемодан: чекпоинты реагируют на курсор — */
.customs-ill{pointer-events:auto}
.cps .cp{cursor:default}
.cps .cp-txt{transition:fill .18s ease-out,font-size .18s ease-out,font-weight .18s}
.cps .cp-dot{transition:r .18s cubic-bezier(.3,1.6,.5,1),fill .18s}
.cps .cp-arrow{transition:stroke .18s,stroke-width .18s,stroke-dashoffset 1.4s cubic-bezier(.3,.6,.3,1)}
.cps .cp:hover .cp-txt{fill:var(--color-accent-2-800);font-size:17.5px;font-weight:600}
.cps .cp:hover .cp-dot{r:8.5}
.cps .cp:hover .cp-arrow{stroke:var(--color-accent-2);stroke-width:4}

/* — круг: хвост кометы и свечение — */
.loop-tail{opacity:.45;transform-box:view-box;transform-origin:150px 150px;animation:orbitRun 13s linear infinite}
.orbit-dot .dot-glow{transform-box:fill-box;transform-origin:center;animation:dotGlow 2.6s ease-in-out infinite}
@keyframes dotGlow{0%,100%{transform:scale(1);opacity:.28}50%{transform:scale(2.1);opacity:.08}}
.loop-ticks{opacity:0;transition:opacity .8s ease-out .5s}
.in .loop-ticks{opacity:.55}

/* — метод: дорожка из следов — */
.feet{position:absolute;left:0;right:0;top:50%;height:0;
  display:flex;justify-content:space-around;align-items:center;pointer-events:none;padding:0 9%}
.feet .ft{position:relative;flex:none;width:14px;height:20px;border-radius:58% 58% 42% 42%;
  background:var(--color-accent-300);opacity:0;
  animation:stepIn .55s cubic-bezier(.3,1.2,.5,1) forwards;
  animation-delay:calc(.4s + var(--i) * .16s)}
.feet .ft::after{content:"";position:absolute;left:4px;top:-5px;
  width:6px;height:6px;border-radius:50%;background:inherit}
.feet .ft.f0{transform:translateY(-26px) rotate(11deg)}
.feet .ft.f1{transform:translateY(10px) rotate(-11deg);background:var(--color-accent-200)}
@keyframes stepIn{from{opacity:0}to{opacity:.75}}

/* — сито: мелочь проваливается вниз — */
.sift circle{opacity:0;animation:sift 3.3s ease-in infinite}
@keyframes sift{0%{opacity:0;transform:translateY(-14px)}
  18%{opacity:.9;transform:translateY(0)}
  70%{opacity:.55;transform:translateY(72px)}
  100%{opacity:0;transform:translateY(104px)}}

@media (prefers-reduced-motion: reduce){
  .loop-tail,.orbit-dot .dot-glow,.sift circle,.feet .ft{animation:none}
  .feet .ft{opacity:.85;transform:none}
}

/* компас ведет к кнопке до того, как его перехватит курсор */
/* слой лучей не трогаем: линия обрезается по его краю, направление читается */
.compass-wrap.lead .compass-needle{animation:none;transition:transform 1.15s cubic-bezier(.3,1.1,.4,1)}
.compass-wrap.lead #rayLine,.compass-wrap.lead #rayDot{transition:opacity .5s ease-out}
.btn-primary.found{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-accent-2) 70%,transparent);
  animation:foundPulse 1.6s ease-out 2}
@keyframes foundPulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-accent-2) 55%,transparent)}
  100%{box-shadow:0 0 0 16px transparent}}

.about-photo img{aspect-ratio:4/5;object-fit:cover;object-position:50% 15%}

/* ── Правки мобильной раскладки ────────────────────────────────────── */
@media (max-width: 560px){
  /* шапка: кнопка не должна выталкивать страницу вбок */
  .nav{padding-inline:16px;gap:12px}
  .nav .btn-primary{font-size:14px;padding:11px 15px;white-space:nowrap}
  .nav-brand{font-size:18px}
}
@media (max-width: 420px){
  .nav .btn-primary{font-size:13px;padding:10px 12px}
}
@media (max-width: 760px){
  /* Навигационный лист: подписи читаемого размера, кадр шире */
  .vslot-card{margin-inline:-8px}
  .ns .ns-row text,.ns text[font-size="14"]{font-size:15.5px}
}

/* ── Поле телефона (intl-tel-input) в светлой теме ──────────────────── */
.iti{width:100%;display:block}
.iti input[type=tel]{width:100%}
.iti__selected-country{background:transparent;border-radius:var(--radius-md) 0 0 var(--radius-md)}
.iti__selected-country:hover,.iti__selected-country-primary:hover{background:var(--color-accent-100)}
.iti__selected-dial-code{color:var(--ink-soft);font-size:15px}
.iti__arrow{border-top-color:var(--color-neutral-600)}
.iti__arrow--up{border-bottom-color:var(--color-neutral-600)}

.iti__country-selector{background:var(--color-surface);border:1px solid var(--color-divider);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.iti__dropdown-content{background:transparent;border:0;box-shadow:none}
.iti__search-input-wrapper{background:var(--color-surface);border-bottom:1px solid var(--color-divider)}
.iti__search-input{background:transparent;color:var(--color-text);border:0;font-size:15px}
.iti__search-input::placeholder{color:var(--color-neutral-600)}
.iti__search-icon-svg,.iti__search-icon svg{stroke:var(--color-neutral-600);color:var(--color-neutral-600)}
.iti__country-list{background:transparent}
.iti__country{color:var(--color-text);font-size:15px}
.iti__country.iti__highlight,.iti__country:hover,.iti__country[aria-selected="true"]{background:var(--color-accent-100);color:var(--color-accent-900)}
.iti__dial-code{color:var(--ink-soft);font-size:14px}
.iti__divider{border-bottom-color:var(--color-divider)}
.iti__search-empty-state{color:var(--ink-soft)}

/* список обязан быть выше модалки квиза, иначе окажется под ней */
.iti--detached-country-selector{z-index:10050}
.iti--fullscreen-popup.iti--detached-country-selector{background:rgba(22,21,28,.55);backdrop-filter:blur(4px)}
@media(max-width:600px){
  .iti--inline-country-selector.iti--detached-country-selector{left:12px!important;width:calc(100vw - 24px)!important;max-width:none}
  .iti--inline-country-selector .iti__country-selector{width:100%!important;max-width:100%}
}
.field.err .input,.field.err .iti input[type=tel]{border-color:var(--color-accent-2)}

/* ── Правки раскладки по замечаниям ────────────────────────────────── */
@media (min-width: 861px){
  /* «Статус остался там…» – заголовок в две строки, текст рядом в три.
     Зазор между колонками уменьшен: вместе им нужно на 20px больше,
     чем дает стандартные 72px.                                        */
  section:has(.customs-ill) .sec-head{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--space-6) 40px}
  section:has(.customs-ill) .sec-head h2{font-size:clamp(30px,2.5vw,36px)}
  /* «Что меняется после разбора» и «Разбор, курсы и самостоятельный поиск»
     – одной строкой во всю ширину: второй колонки в этих шапках нет     */
  section:has(.team-ill) .sec-head,
  section:has(.table) .sec-head{grid-template-columns:1fr}
  /* «После записи придет видеоурок…» – в одну строку */
  #cta{grid-template-columns:1.32fr .68fr!important}
}
/* «Разбор работает не для всех» – отступ от заголовка */
#fit .sec-head .sub{margin-top:var(--space-3)}

/* первый экран начинается ближе к шапке */
.hero{padding-top:clamp(28px,3.4vw,48px)}