/* 11.11 — первый экран, итерация 3: общие токены и компоненты */
:root {
  color-scheme: dark;
  --bg: #09090B;
  --bg-2: #141518;
  --card: #1B1C20;
  --graphite: #36393F;
  --gold: #C9A45C;
  --gold-hi: #F1D18A;
  --champagne: #E6D3A8;
  --text: #F5F5F5;
  --muted: #A6A6AA;
  --gutter: clamp(16px, 4vw, 56px);
  --nav-h: 76px;
  --f-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --f-text: "Manrope", system-ui, sans-serif;
  --metal-border: linear-gradient(135deg, #8d9098 0%, #2b2d33 28%, #bfa070 50%, #2b2d33 72%, #7d8088 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 500 16px/1.5 var(--f-text);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- nav ---------- */
.nav { position: relative; z-index: 20; display: flex; align-items: center; gap: 36px; height: var(--nav-h); padding: 0 var(--gutter); }
.nav__logo img { height: 34px; width: auto; }
.nav__links { display: flex; gap: 30px; margin-left: auto; font-size: 14px; color: var(--muted); }
.nav__links a { transition: color .2s; }
.nav__links a:hover { color: var(--text); }
.nav__cta { margin-left: 8px; }
@media (max-width: 900px) {
  :root { --nav-h: 64px; }
  .nav { gap: 12px; }
  .nav__logo img { height: 28px; }
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 26px; border-radius: 12px; border: 0; cursor: pointer;
  font: 700 15px/1 var(--f-text); letter-spacing: .01em; white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 13px; border-radius: 10px; }
.btn--xl { min-height: 64px; padding: 0 34px; font-size: 17px; border-radius: 14px; }
.btn--xl .arr { width: 22px; height: 22px; transition: transform .25s ease; }
.btn--xl:hover .arr { transform: translateX(4px); }
.btn-gold { /* шампань, не жёлтое */
  color: #1a140a;
  background: linear-gradient(180deg, #F3E5C2 0%, #DCC08A 26%, #C3A065 56%, #A4824A 84%, #C9AC74 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(80,58,24,.5),
              0 1px 0 #5a4520, 0 18px 44px -16px rgba(201,164,92,.6);
}
.btn-gold:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(80,58,24,.5), 0 1px 0 #5a4520, 0 24px 50px -16px rgba(201,164,92,.75); }
.btn-ghost {
  color: var(--text);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.16);
}
.btn-ghost:hover { border-color: rgba(230,211,168,.5); transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

/* ---------- type ---------- */
.eyebrow { display: inline-block; font: 600 12px/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); }
.eyebrow b { font-weight: 700; color: var(--gold); }
.h1 { font: 800 clamp(34px, 4.4vw, 68px)/.98 var(--f-display); text-transform: uppercase; letter-spacing: -.015em; text-wrap: balance; }
.sub { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.45; color: #dcdcdf; text-wrap: balance; }
.meta { font-size: 14px; color: var(--muted); }

/* ---------- timer: большое металлическое табло ---------- */
.board {
  display: inline-grid; gap: 14px; padding: 18px 20px 20px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(34,35,40,.92), rgba(14,14,17,.96)) padding-box, var(--metal-border) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 70px -30px rgba(0,0,0,.95);
}
.board__lab { font: 600 12px/1 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.timer { display: inline-grid; grid-auto-flow: column; align-items: start; gap: 10px; }
.timer__cell {
  position: relative; min-width: 84px; padding: 14px 10px 10px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, #2b2d33 0%, #18191d 48%, #0f1013 52%, #1d1e23 100%) padding-box,
              linear-gradient(180deg, #a3a7ae, #2a2c31 45%, #6b5428 100%) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.6), 0 14px 26px -14px rgba(0,0,0,.95);
}
.timer__cell::before { /* мягкое отражение на верхней половине */
  content: ""; position: absolute; inset: 1px 1px 50% 1px; border-radius: 11px 11px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.07), transparent); pointer-events: none;
}
.timer__cell::after { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 1px; background: rgba(0,0,0,.7); }
.timer__num {
  display: block; font: 700 40px/1 var(--f-display); font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 0%, #e8e9ec 44%, #a6a9b0 56%, #f2f2f4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.6));
}
.timer__lab { display: block; margin-top: 8px; font: 600 10px/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.timer__sep { align-self: center; margin-top: -18px; font: 700 28px/1 var(--f-display); color: var(--gold); opacity: .8; }
.timer.is-ended .timer__cell, .timer.is-ended .timer__sep { display: none; }
.timer__ended { display: none; font: 700 20px/1.2 var(--f-display); color: var(--champagne); }
.timer.is-ended .timer__ended { display: block; }

/* ---------- metal ---------- */
[data-metal] svg { width: 100%; height: auto; overflow: visible; }

/* ---------- плейсхолдер трейдера ---------- */
.trader { position: absolute; bottom: 0; aspect-ratio: 400 / 560; }
.trader svg, .trader img { width: 100%; height: 100%; }
.trader img { /* контровой свет на вырезанном фото */
  object-fit: contain; object-position: 50% 100%;
  /* единый контровой свет для всех пятерых: тёплый, сверху-справа (со стороны 11.11), без контурной обводки */
  filter: drop-shadow(2px -2px 6px rgba(230,211,168,.24)) drop-shadow(0 0 22px rgba(230,211,168,.06));
}
.trader__tag {
  position: absolute; left: 50%; top: 31%; transform: translateX(-50%);
  padding: 4px 8px; border-radius: 6px; white-space: nowrap;
  font: 600 10px/1.2 var(--f-text); letter-spacing: .08em; text-transform: uppercase;
  color: var(--champagne); background: rgba(9,9,11,.72); border: 1px dashed rgba(201,164,92,.55);
}
.trader.d1 { filter: brightness(.86); }
.trader.d2 { filter: brightness(.7); }
/* на настоящих фото затемняем мягче — лица должны оставаться узнаваемыми */
.trader.d1:has(img) { filter: brightness(.94); }
.trader.d2:has(img) { filter: brightness(.94); } /* задний ряд — как боковые переднего (04.11): глубина держится размером и перекрытием */

@media (max-width: 560px) {
  .btn--xl { min-height: 58px; font-size: 16px; }
  .board { display: grid; padding: 14px 12px; }
  .board__lab { font-size: 10.5px; letter-spacing: .1em; line-height: 1.3; } /* «…осталось N дней» в одну строку на 360px */
  .timer { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 4px; }
  .timer.is-ended { display: block; }
  .timer__cell { min-width: 0; padding: 12px 4px 9px; }
  .timer__num { font-size: 30px; }
  .timer__sep { font-size: 20px; margin-top: -14px; }
  .timer__lab { font-size: 9px; letter-spacing: .1em; }
  .trader__tag { font-size: 8px; padding: 3px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- плавная прокрутка к разделам ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 16px; }
html.is-locked, html.is-locked body { overflow: hidden; }

/* ---------- модальное окно CRM-формы ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(5,5,7,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s ease; }
.modal__dialog {
  position: relative; width: min(100%, 624px); /* было 480 — окно с формой шире в 1,3 раза (10.11) */ max-height: calc(100svh - 32px); overflow: auto;
  padding: 36px 32px 30px; border-radius: 20px; outline: none;
  background: linear-gradient(180deg, #1d1e23, #111215) padding-box, var(--metal-border) border-box;
  border: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 40px 90px -30px #000;
  opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .22s ease, transform .22s ease;
}
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__dialog { opacity: 1; transform: none; }
.modal__close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
}
.modal__close:hover { color: var(--text); border-color: rgba(230,211,168,.5); }
.modal__close:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.modal__title { padding-right: 44px; font: 800 24px/1.15 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.modal__sub { margin-top: 10px; color: #cfcfd3; font-size: 15px; }
.modal__body { margin-top: 22px; }
.crm-demo { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.field input {
  min-height: 52px; padding: 0 16px; border-radius: 12px; font: 600 16px/1 var(--f-text); color: var(--text);
  background: #0c0d10; border: 1px solid rgba(255,255,255,.14);
}
.field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,164,92,.22); }
.field input[aria-invalid="true"] { border-color: #d07a6a; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--gold); flex: none; }
.check input[aria-invalid="true"] { outline: 2px solid #d07a6a; outline-offset: 2px; }
.crm-demo__err { padding: 10px 12px; border-radius: 10px; font-size: 13px; color: #f1c6bd; background: rgba(208,122,106,.12); border: 1px solid rgba(208,122,106,.35); }
.crm-demo__note { padding: 12px 14px; border-radius: 10px; font-size: 13px; color: var(--champagne); background: rgba(201,164,92,.08); border: 1px dashed rgba(201,164,92,.5); }
.modal__submit { width: 100%; min-height: 56px; margin-top: 4px; }
.crm-frame { position: relative; min-height: 320px; }
.crm-frame iframe { width: 100%; min-height: 420px; border: 0; border-radius: 12px; background: #0c0d10; }
.crm-frame__state { display: none; color: var(--muted); font-size: 14px; }
.crm-frame.is-loading .crm-frame__state, .crm-frame.is-error .crm-frame__state { display: block; margin-bottom: 12px; }
.crm-frame.is-error iframe { display: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--gold-hi); font: inherit; text-decoration: underline; cursor: pointer; }

/* заготовки следующих разделов — цели якорей, заменятся при вёрстке блоков */
.stub { min-height: 100svh; padding: 72px var(--gutter); border-top: 1px solid rgba(255,255,255,.06); color: var(--muted); }
.stub h2 { font: 800 clamp(20px, 3vw, 36px)/1.1 var(--f-display); color: var(--text); text-transform: uppercase; hyphens: auto; overflow-wrap: anywhere; }
.stub p { margin-top: 10px; font-size: 14px; }

@media (max-width: 560px) {
  .modal { align-items: end; padding: 0; }
  .modal__dialog { width: 100%; max-height: 92svh; border-radius: 20px 20px 0 0; padding: 30px 20px calc(24px + env(safe-area-inset-bottom)); }
  .modal__title { font-size: 21px; }
}

/* ================= Блок 2 · Выберите свой путь ================= */
.section-title { font: 800 clamp(30px, 3.6vw, 56px)/1.02 var(--f-display); text-transform: uppercase; letter-spacing: -.015em; text-wrap: balance; }
.paths { position: relative; isolation: isolate; padding: clamp(64px, 8vw, 120px) 0; }
.paths::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 40% at 50% 28%, rgba(201,164,92,.07), transparent 70%); }
/* та же сетка, что у первого экрана: левый край = левый край BLACK FRIDAY */
.paths__wrap { --edge: max(var(--gutter), calc((100% - 1640px) / 2)); padding: 0 var(--edge); display: grid; gap: clamp(28px, 3.4vw, 48px); }
@media (min-width: 761px) and (max-width: 900px), (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) { .paths__wrap { --edge: 6%; } } /* планшет: колонка 88%, как у текста первого экрана */
@media (max-width: 760px) { .paths__wrap { --edge: 16px; } } /* телефон: поле 16px, как у первого экрана */
.paths__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.path {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #1d1e23 0%, #141518 60%, #101114 100%) padding-box, var(--metal-border) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 40px 80px -40px rgba(0,0,0,.9);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.path { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); }
.path:hover { --lift: -4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 50px 90px -40px rgba(0,0,0,.95); }
.path::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.path--manual::before { background: radial-gradient(70% 55% at 75% 0%, rgba(201,164,92,.20), transparent 70%); }
.path--auto::before   { background: radial-gradient(70% 55% at 75% 0%, rgba(214,218,224,.14), transparent 70%); }
.path__art { height: clamp(150px, 16vw, 220px);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.path__art svg { width: 100%; height: 100%; display: block; }
.path__body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; align-content: stretch; justify-items: start; gap: 12px; padding: 0 clamp(22px, 2.6vw, 40px) clamp(26px, 2.8vw, 40px); }
.path__kicker { font: 600 12px/1.2 var(--f-text); letter-spacing: .18em; text-transform: uppercase; }
.path--manual .path__kicker { color: var(--gold); }
.path--auto .path__kicker   { color: #C9CDD3; }
.path__title { font: 800 clamp(26px, 2.6vw, 40px)/1.05 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; -webkit-background-clip: text; background-clip: text; color: transparent; }
.path--manual .path__title { background-image: linear-gradient(180deg, #FFF4D6 0%, #E9CD91 45%, #C9A45C 62%, #E9CD91 100%); }
.path--auto .path__title   { background-image: linear-gradient(180deg, #FFFFFF 0%, #E6E8EB 45%, #A4A9B1 62%, #E6E8EB 100%); }
.path__text { color: #cfcfd3; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; max-width: 34em; }
.path__btn { margin-top: 12px; min-height: 56px; align-self: end; } /* кнопки на одной линии внизу карточек */
.path__btn .arr { transition: transform .25s ease; }
.path__btn:hover .arr { transform: translateX(4px); }
.btn-silver {
  color: #121316;
  background: linear-gradient(180deg, #FFFFFF 0%, #E9EBEE 30%, #BFC3C9 56%, #9EA3AB 82%, #CDD0D5 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(60,64,72,.45), 0 1px 0 #4A4E55, 0 18px 40px -18px rgba(214,218,224,.35);
}
.btn-silver:hover { transform: translateY(-2px); filter: brightness(1.04); }
@media (max-width: 760px) {
  .paths__grid { grid-template-columns: minmax(0, 1fr); }
  .path__btn { width: 100%; }
  .path:hover { transform: none; }
  .path__title { font-size: clamp(19px, 6vw, 30px); overflow-wrap: anywhere; } /* «АВТОМАТИЧЕСКАЯ» помещается в карточку на 320–390 */
}
@media (prefers-reduced-motion: reduce) { .path, .path:hover { transition: none; transform: none; } }

/* ---- Блок 2 · анимации ---- */
/* появление при прокрутке: начальное состояние включает JS (без JS всё видно сразу) */
.js-reveal [data-reveal] { opacity: 0; translate: 0 26px; transition: opacity .8s ease, translate .9s cubic-bezier(.2,.7,.2,1); }
.js-reveal .path--auto[data-reveal] { transition-delay: .14s; }
.js-reveal.is-in [data-reveal] { opacity: 1; translate: 0 0; }
/* свечи вырастают по очереди, золотая зона подсвечивается, когда цена в неё заходит */
.js-reveal .dir-candles > * { transform-box: fill-box; transform-origin: 50% 50%; transform: scaleY(0); opacity: 0;
  transition: transform .45s cubic-bezier(.2,.8,.3,1), opacity .3s ease; transition-delay: calc(.35s + var(--i) * 45ms); }
.js-reveal.is-in .dir-candles > * { transform: scaleY(1); opacity: 1; }
.js-reveal .dir-zone { opacity: .25; transition: opacity .9s ease 1.05s; }
.js-reveal.is-in .dir-zone { opacity: 1; animation: zone-glow 1.4s ease 1.05s 1; }
@keyframes zone-glow { 0%, 100% { filter: none; } 40% { filter: brightness(1.9); } }
/* линия алгоритма рисуется, точки исполнения вспыхивают по одной */
.js-reveal .da-line, .js-reveal .da-line2 { stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .45s; }
.js-reveal .da-line { stroke-dasharray: var(--len); }
.js-reveal .da-line2 { stroke-dasharray: 3 5; stroke-dashoffset: 0; opacity: 0; transition: opacity 1s ease 1.2s; }
.js-reveal.is-in .da-line { stroke-dashoffset: 0; }
.js-reveal.is-in .da-line2 { opacity: 1; }
.js-reveal .da-dot { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); opacity: 0; transition: transform .5s cubic-bezier(.3,1.6,.5,1), opacity .3s ease; }
/* в svg перед точками стоит группа сетки — поэтому точки это g №2–5 */
.js-reveal .da-dot:nth-of-type(2) { transition-delay: .75s; } .js-reveal .da-dot:nth-of-type(3) { transition-delay: 1.05s; }
.js-reveal .da-dot:nth-of-type(4) { transition-delay: 1.35s; } .js-reveal .da-dot:nth-of-type(5) { transition-delay: 1.7s; }
.js-reveal.is-in .da-dot { transform: scale(1); opacity: 1; }
.da-pulse { filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); }
/* свет за курсором (ПК): мягкий отблеск по карточке и рамке */
.path::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,246,222,.09), transparent 45%); }
.path--auto::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(232,236,242,.08), transparent 45%); }
.path.is-hover::after { opacity: 1; }
.path.is-hover { transition: transform .12s ease-out, box-shadow .35s ease; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal], .js-reveal .dir-candles > *, .js-reveal .da-dot, .js-reveal .dir-zone, .js-reveal .da-line, .js-reveal .da-line2 { opacity: 1 !important; translate: none !important; transform: none !important; stroke-dashoffset: 0 !important; transition: none !important; animation: none !important; }
  .da-pulse, .path::after { display: none; }
}

/* ---- Блок 2 · непрерывное движение иллюстраций ---- */
/* график бежит справа налево (бесшовно: две копии серии), уровни и зона стоят на месте */
.dir-track { animation: dir-scroll 70s linear infinite; } /* медленнее: фон, а не главный объект */
@keyframes dir-scroll { to { transform: translateX(calc(var(--loop) * -1)); } }
.path__art svg { overflow: hidden; }
/* золотая зона медленно «дышит» */
.dir-zone { animation: zone-breathe 8s ease-in-out infinite; }
@keyframes zone-breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
/* пунктир алгоритма течёт */
.da-line2 { animation: dash-flow 1.6s linear infinite; }
@keyframes dash-flow { to { stroke-dashoffset: -16; } }
/* точки исполнения: мягкий ореол пульсирует по очереди */
.da-dot circle:first-child { transform-box: fill-box; transform-origin: 50% 50%; animation: dot-halo 4.2s ease-in-out infinite; }
.da-dot:nth-of-type(3) circle:first-child { animation-delay: .7s; }
.da-dot:nth-of-type(4) circle:first-child { animation-delay: 1.4s; }
.da-dot:nth-of-type(5) circle:first-child { animation-delay: 2.1s; }
@keyframes dot-halo { 0%, 100% { transform: scale(1); fill-opacity: .12; } 30% { transform: scale(1.9); fill-opacity: .22; } 60% { transform: scale(2.4); fill-opacity: 0; } }
/* блок вне экрана — анимации на паузе */
.paths.is-offscreen .dir-track, .paths.is-offscreen .dir-zone, .paths.is-offscreen .da-line2, .paths.is-offscreen .da-dot circle { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .dir-track, .dir-zone, .da-line2, .da-dot circle { animation: none !important; } }

/* правая иллюстрация живее: по главной линии постоянно скользит мягкий световой отрезок */
.da-glow { stroke-dasharray: 16 120; animation: glow-run 3.2s cubic-bezier(.45,0,.55,1) infinite; filter: drop-shadow(0 0 6px rgba(255,255,255,.7)); }
@keyframes glow-run { from { stroke-dashoffset: 16; } to { stroke-dashoffset: -104; } }
.paths.is-offscreen .da-glow { animation-play-state: paused; }
.js-reveal .da-glow { opacity: 0; transition: opacity .6s ease 2s; } .js-reveal.is-in .da-glow { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .da-glow { display: none; } }

/* ПК/планшет в 2 колонки: заголовки обеих карточек в одну строку одного кегля (кегль от ширины карточки),
   кнопки одной ширины — карточки зеркальны */
@media (min-width: 761px) {
  .path__btn { width: 290px; max-width: 100%; }
}
@media (min-width: 901px) and (orientation: landscape), (min-width: 1101px) {
  .path__body { container-type: inline-size; }
  .path__title { font-size: min(4.98cqi, 44px); white-space: nowrap; } /* крупнее, запас до края карточки сохраняется */
}
/* планшет в портрете: две колонки дают слишком мелкий заголовок — карточки друг под другом */
@media (min-width: 761px) and (max-width: 900px), (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .paths__grid { grid-template-columns: minmax(0, 1fr); }
}

/* «Цены от» — справа от кнопки, на одной линии; ряд прижат к низу карточки */
.path__cta { align-self: end; justify-self: stretch; margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.path__cta .path__btn { margin-top: 0; }
.path__price { display: grid; gap: 6px; }
.path__price span { font: 600 11px/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.path__price b { font: 800 clamp(24px, 2.1vw, 34px)/1 var(--f-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; -webkit-background-clip: text; background-clip: text; color: transparent; }
.path--manual .path__price b { background-image: linear-gradient(180deg, #FFF4D6 0%, #E9CD91 45%, #C9A45C 62%, #E9CD91 100%); }
.path--auto .path__price b   { background-image: linear-gradient(180deg, #FFFFFF 0%, #E6E8EB 45%, #A4A9B1 62%, #E6E8EB 100%); }
@media (max-width: 760px) { .path__cta { flex-direction: column-reverse; align-items: stretch; } .path__cta .path__btn { width: 100%; } .path__price { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; } }

/* максимальная скидка справа от кнопки: подпись + крупная металлическая цифра, как заголовки карточек */
.path__price { display: grid; gap: 6px; }
.path__price > span { font: 600 11px/1 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.path__price b { font: 800 clamp(34px, 3.1vw, 50px)/.9 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.path--manual .path__price b { background-image: linear-gradient(180deg, #FFF4D6 0%, #F8E6B9 20%, #E9CD91 40%, #C9A45C 50%, #A17B3F 56%, #C9A45C 66%, #E9CD91 82%, #F8E6B9 100%); }
.path--auto .path__price b   { background-image: linear-gradient(180deg, #FFFFFF 0%, #F4F5F7 25%, #C9CDD3 45%, #7E838C 53%, #B8BCC3 64%, #EEF0F2 85%, #FFFFFF 100%); }
@media (max-width: 760px) { .path__price { grid-auto-flow: column; justify-content: start; align-items: end; gap: 12px; } .path__price > span { padding-bottom: 6px; } }

/* скидка: (1) мягкий статичный ореол под цифрой; (2) блик — продолжение общего луча (BLACK → FRIDAY → 11.11 → кнопка → скидка), раз в 11 с */
.path__price { position: relative; isolation: isolate; }
.path__price::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: -22%; right: -26%; top: 22%; bottom: -60%; filter: blur(16px); }
.path--manual .path__price::before { background: radial-gradient(closest-side, rgba(241,209,138,.50), rgba(201,164,92,.20) 50%, transparent); }
.path--auto .path__price::before   { background: radial-gradient(closest-side, rgba(240,244,250,.34), rgba(190,196,204,.13) 50%, transparent); }
.path__price b { background-size: 300% 100%, 100% 100%; background-repeat: no-repeat; animation: off-shine 11s ease-in-out 4.6s infinite; }
.path--manual .path__price b { background-image: linear-gradient(105deg, transparent 41%, rgba(90,62,24,.4) 45%, rgba(255,248,226,.95) 49.5%, #FFFCEF 50%, rgba(255,248,226,.95) 50.5%, rgba(90,62,24,.4) 55%, transparent 59%), linear-gradient(180deg, #FFF4D6 0%, #F8E6B9 20%, #E9CD91 40%, #C9A45C 50%, #A17B3F 56%, #C9A45C 66%, #E9CD91 82%, #F8E6B9 100%); }
.path--auto .path__price b   { background-image: linear-gradient(105deg, transparent 41%, rgba(40,44,52,.4) 45%, rgba(255,255,255,.95) 49.5%, #FFFFFF 50%, rgba(255,255,255,.95) 50.5%, rgba(40,44,52,.4) 55%, transparent 59%), linear-gradient(180deg, #FFFFFF 0%, #F4F5F7 25%, #C9CDD3 45%, #7E838C 53%, #B8BCC3 64%, #EEF0F2 85%, #FFFFFF 100%); }
@keyframes off-shine { 0% { background-position: 100% 0, 0 0; } 14%, 100% { background-position: 0% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .path__price b { animation: none; background-position: 100% 0, 0 0; } }

/* ===== Первый экран · отклик на курсор (только мышь) ===== */
/* BLACK FRIDAY: лёгкий наклон + световое пятно за курсором (отдельный слой поверх, обрезан по буквам) */
.bf { --brx: 4deg; --bry: 9deg; /* постоянная лёгкая перспектива (как BLACK FRIDAY при наведении, 04.11); курсор доворачивает от неё */
  transform: perspective(900px) rotateX(var(--brx)) rotateY(var(--bry)); transition: transform .5s cubic-bezier(.2,.7,.2,1); transform-origin: 30% 50%; }
.bf.is-hover { transition: transform .12s ease-out; }
.bf__black, .bf__friday { position: relative; }
.bf__black::after, .bf__friday::after {
  content: attr(data-t); position: absolute; inset: 0; pointer-events: none; opacity: var(--la, 0); transition: opacity .45s ease;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: none; animation: none;
  background-image: radial-gradient(240px circle at var(--lx, 50%) var(--ly, 50%), rgba(255,255,255,.75), rgba(255,255,255,.18) 40%, transparent 70%);
  background-size: 100% 100%; background-repeat: no-repeat; mix-blend-mode: screen;
}
.bf__friday::after { background-image: radial-gradient(240px circle at var(--lx, 50%) var(--ly, 50%), rgba(255,246,214,.8), rgba(241,209,138,.22) 40%, transparent 70%); }
/* 11.11: свет за курсором — слой внутри SVG; лёгкая глубина — сдвиг цифр в сторону от курсора (люди стоят) */
.metal-cursor { opacity: var(--la, 0); transition: opacity .45s ease; mix-blend-mode: screen; }
.digits { translate: var(--ddx, 0px) var(--ddy, 0px); transition: translate .7s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .bf { transform: none !important; } .bf__black::after, .bf__friday::after, .metal-cursor { display: none; } .digits { translate: none !important; } }

/* табло таймера: отклик на курсор (ПК) — лёгкий наклон и свет по рамке и ячейкам */
.board { position: relative; transform: perspective(900px) rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.board.is-hover { transition: transform .12s ease-out, box-shadow .35s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 36px 80px -30px rgba(0,0,0,.95); }
.board::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255,246,222,.2), transparent 60%); }
.board::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .4s ease; padding: 1px;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(241,209,138,.9), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.board.is-hover::after, .board.is-hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .board { transform: none !important; } .board::after, .board::before { display: none; } }

/* ================= Блок 3 · Тарифы Smart Money ================= */
/* графитовые панели; золото — скидка, цена, места и кнопка. PRO — максимальная скидка, ULTIMATE — премиум-формат */
.tariffs { position: relative; isolation: isolate; padding: clamp(64px, 8vw, 120px) 0; }
.tariffs::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 30% at 85% 8%, rgba(201,164,92,.06), transparent 70%); }
.tariffs__wrap { --edge: max(var(--gutter), calc((100% - 1640px) / 2)); padding: 0 var(--edge); display: grid; gap: clamp(28px, 3.4vw, 48px); }
@media (min-width: 761px) and (max-width: 900px), (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) { .tariffs__wrap { --edge: 6%; } }
@media (max-width: 760px) { .tariffs__wrap { --edge: 16px; } .tariffs .section-title { font-size: min(30px, 7vw); overflow-wrap: anywhere; } } /* «СПЕЦИАЛЬНЫМ» влезает на 320–390 */
.tariffs__head { display: grid; gap: 16px; max-width: 980px; }
.tariffs__kicker { font: 600 12px/1.2 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.tariffs__lead { color: #cfcfd3; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; max-width: 40em; }

.tariffs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 2.2vw, 32px) clamp(16px, 1.6vw, 24px); padding-top: 12px; }
@media (max-width: 1100px) { .tariffs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .tariffs__grid { grid-template-columns: minmax(0, 1fr); } }

.tariff {
  position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0;
  padding: clamp(24px, 2vw, 32px); border-radius: 20px;
  background: linear-gradient(180deg, #1b1c20 0%, #141518 100%) padding-box, linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 40%, rgba(255,255,255,.08)) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 60px -36px rgba(0,0,0,.9);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
/* наклон + свет за курсором (ПК), как у карточек блока 2 */
.tariff::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,246,222,.09), transparent 45%); }
.tariff.is-hover { --lift: -4px; transition: transform .12s ease-out, box-shadow .35s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 50px 90px -40px rgba(0,0,0,.95); }
.tariff.is-hover::after { opacity: 1; }

/* метка на верхней кромке */
.tariff__badge { position: absolute; top: 0; left: 50%; translate: -50% -50%; z-index: 3; padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  font: 800 11px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; }

/* PRO · максимальная скидка: золотая рамка, тёплое свечение, золотая метка */
.tariff--best {
  background: radial-gradient(90% 40% at 50% 0%, rgba(201,164,92,.16), transparent 70%) padding-box, linear-gradient(180deg, #1e1d1f 0%, #151517 100%) padding-box,
    linear-gradient(160deg, #F8E6B9 0%, #C9A45C 30%, #6b5328 60%, #C9A45C 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(201,164,92,.12), 0 34px 80px -34px rgba(201,164,92,.38);
}
.tariff--best .tariff__badge { color: #1a140a; background: linear-gradient(180deg, #F3E5C2 0%, #DCC08A 30%, #C3A065 65%, #A4824A 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 24px -8px rgba(201,164,92,.7); }

/* ULTIMATE · премиум: «чёрная карта» — глубокий чёрный, шлифованный металл, золотая фаска и золотое имя */
.tariff--top {
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(241,209,138,.14), transparent 60%) padding-box,
    repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 1px, transparent 1px 7px) padding-box,
    linear-gradient(180deg, #121214 0%, #0b0b0d 100%) padding-box,
    linear-gradient(135deg, #F1D18A 0%, #5a4520 22%, #E9CD91 48%, #4a3a1c 72%, #C9A45C 100%) border-box;
  border-width: 1.5px;
  box-shadow: inset 0 1px 0 rgba(255,236,190,.12), 0 40px 90px -40px rgba(0,0,0,1), 0 0 60px -30px rgba(201,164,92,.35);
}
.tariff--top .tariff__badge { color: var(--gold-hi); background: #0d0d0f; border: 1px solid rgba(241,209,138,.6); box-shadow: 0 8px 24px -10px rgba(201,164,92,.6); }
.tariff--top .tariff__name { background-image: linear-gradient(180deg, #FFF4D6 0%, #F8E6B9 22%, #E9CD91 42%, #C9A45C 52%, #A17B3F 58%, #C9A45C 70%, #F8E6B9 100%); }
.tariff--top .tariff__price { border-color: rgba(201,164,92,.22); }
.tariff--top::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,236,190,.12), transparent 45%); }

.tariff__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tariff__kicker { font: 600 11px/1.3 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tariff__status { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; font: 700 11px/1 var(--f-text); letter-spacing: .04em; color: #cfcfd3; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.tariff__status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #6c6e74; }
.is-active .tariff__status { color: var(--champagne); border-color: rgba(201,164,92,.35); }
.is-active .tariff__status::before { background: var(--gold-hi); box-shadow: 0 0 0 3px rgba(241,209,138,.16); }

.tariff__name { font: 800 clamp(26px, 2.2vw, 36px)/1 var(--f-display); letter-spacing: -.01em; -webkit-background-clip: text; background-clip: text; color: transparent;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #E6E8EB 45%, #A4A9B1 62%, #E6E8EB 100%); }

/* цена: крупная металлическая скидка (как на 2-м экране) + старая цена и выгода справа, ниже — цена акции */
.tariff__price { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 14px 16px; padding: 20px 0; border-block: 1px solid rgba(255,255,255,.07); }
.tariff__off { position: relative; isolation: isolate; }
.tariff__off::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: -22%; right: -26%; top: 22%; bottom: -60%; filter: blur(16px);
  background: radial-gradient(closest-side, rgba(241,209,138,.50), rgba(201,164,92,.20) 50%, transparent); }
.tariff__off b { display: block; font: 800 clamp(38px, 3.3vw, 52px)/.9 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5));
  background-image: linear-gradient(105deg, transparent 41%, rgba(90,62,24,.4) 45%, rgba(255,248,226,.95) 49.5%, #FFFCEF 50%, rgba(255,248,226,.95) 50.5%, rgba(90,62,24,.4) 55%, transparent 59%), linear-gradient(180deg, #FFF4D6 0%, #F8E6B9 20%, #E9CD91 40%, #C9A45C 50%, #A17B3F 56%, #C9A45C 66%, #E9CD91 82%, #F8E6B9 100%);
  background-size: 300% 100%, 100% 100%; background-repeat: no-repeat; animation: off-shine 11s ease-in-out 4.8s infinite; }
.tariff__meta { display: grid; justify-items: end; gap: 10px; text-align: right; padding-bottom: 2px; }
/* старая цена — как зачёркнутый ценник: крупнее, светлее, золотая диагональ; выгода — золотая плашка */
.tariff__meta s { position: relative; padding: 0 2px; color: #d4d5d9; font: 700 clamp(16px, 1.3vw, 19px)/1 var(--f-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; text-decoration: none; }
.tariff__meta s::after { content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; border-radius: 1px; background: linear-gradient(90deg, #C9A45C, #F1D18A); rotate: -9deg; box-shadow: 0 0 6px rgba(241,209,138,.5); }
.tariff__gain { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 11px; border-radius: 999px; white-space: nowrap;
  font: 600 12px/1 var(--f-text); color: var(--champagne); background: linear-gradient(180deg, rgba(241,209,138,.18), rgba(201,164,92,.08)); border: 1px solid rgba(201,164,92,.45); }
.tariff__gain b { font: 800 13px/1 var(--f-text); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.tariff__new { grid-column: 1 / -1; font: 800 clamp(28px, 2.3vw, 38px)/1.05 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.tariff--top .tariff__new { -webkit-background-clip: text; background-clip: text; color: transparent;
  background-image: linear-gradient(180deg, #FFF4D6 0%, #F8E6B9 20%, #E9CD91 40%, #C9A45C 50%, #A17B3F 56%, #C9A45C 66%, #E9CD91 82%, #F8E6B9 100%); font-size: clamp(32px, 2.8vw, 44px); }

/* места по акции: отдельная плашка с крупной цифрой */
.tariff__seats { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(201,164,92,.12), rgba(201,164,92,.04)); border: 1px solid rgba(201,164,92,.28); }
.tariff__seats-label { display: flex; align-items: center; gap: 10px; font: 700 12px/1.25 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--champagne); }
.tariff__seats-label::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 0 4px rgba(241,209,138,.15); animation: seat-pulse 2.4s ease-in-out infinite; }
@keyframes seat-pulse { 50% { box-shadow: 0 0 0 7px rgba(241,209,138,0); } }
.tariff__seats-num { font: 800 30px/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--gold-hi); }
.tariff__seats-num small { font: 600 13px/1 var(--f-text); color: var(--muted); }
.tariff__bar { grid-column: 1 / -1; display: block; height: 4px; margin-top: 8px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.tariff__bar::after { content: ''; display: block; height: 100%; width: calc(var(--q) * 100%); background: linear-gradient(90deg, #A17B3F, #F1D18A); }

.tariff__text { color: #cfcfd3; font-size: 15px; line-height: 1.55; }

.tariff__foot { margin-top: auto; display: grid; gap: 14px; }
.tariff__more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none;
  font: 700 14px/1.2 var(--f-text); color: var(--text); border-top: 1px solid rgba(255,255,255,.07); }
.tariff__more summary::-webkit-details-marker { display: none; }
.tariff__more summary::after { content: ''; width: 9px; height: 9px; margin-right: 4px; border: solid var(--gold); border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); transition: transform .25s ease; }
.tariff__more[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.tariff__more summary:hover { color: var(--gold-hi); }
.tariff__more summary:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; border-radius: 4px; }
.tariff__more ul { list-style: none; display: grid; gap: 9px; padding: 4px 0 6px; font-size: 14px; line-height: 1.45; color: #cfcfd3; }
.tariff__more li { position: relative; padding-left: 22px; }
.tariff__more li::before { content: ''; position: absolute; left: 2px; top: .38em; width: 9px; height: 5px; border: solid var(--gold); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.tariff__link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--champagne); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(230,211,168,.4); }
.tariff__link:hover { color: var(--gold-hi); }
.tariff__btn { width: 100%; min-height: 54px; }
.tariff__btn:disabled { cursor: not-allowed; opacity: .55; transform: none; }
/* недоступный тариф: цена, скидка и места приглушены, карточка не «зовёт» */
.tariff:not(.is-active) .tariff__new, .tariff:not(.is-active) .tariff__name, .tariff:not(.is-active) .tariff__off, .tariff:not(.is-active) .tariff__seats { opacity: .45; filter: grayscale(1); }
.tariff:not(.is-active) .tariff__seats-label::before { animation: none; }

@media (max-width: 760px) { .tariff__name { font-size: 28px; } }

/* появление по очереди; наклон за курсором — без задержки (своё transition, иначе его перебивает правило появления) */
.js-reveal .tariff[data-reveal] { transition: opacity .8s ease, translate .9s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; transition-delay: calc(var(--i) * 70ms), calc(var(--i) * 70ms), 0s, 0s; }
.tariffs .tariff.is-hover { transition: opacity .8s ease, translate .9s ease, transform .12s ease-out, box-shadow .35s ease; }
@media (prefers-reduced-motion: reduce) {
  .tariff, .tariff.is-hover { transition: none; transform: none; }
  .tariff::after { display: none; }
  .tariff__off b { animation: none; background-position: 100% 0, 0 0; }
  .tariff__seats-label::before { animation: none; }
}
.title-gold { -webkit-background-clip: text; background-clip: text; color: transparent; background-image: linear-gradient(180deg, #FFF4D6 0%, #E9CD91 45%, #C9A45C 62%, #E9CD91 100%); } /* золотой акцент в заголовке, как «Ручная торговля» на 2-м экране */

/* кнопки всех тарифов — одна золотая (btn-gold), без исключений для PRO/ULTIMATE/закрытых (04.11) */

/* фоновый свечной график справа от заголовка — едва заметная ассоциация с рынком; на телефоне — полоса над заголовком */
.tariffs__wrap { position: relative; }
.tariffs__head, .tariffs__grid { position: relative; z-index: 1; }
.tariffs__candles { position: absolute; z-index: 0; top: -20px; right: var(--edge); width: min(34%, 520px); height: 300px; opacity: .55; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 35%, #000 80%, transparent), linear-gradient(180deg, transparent, #000 20%, #000 75%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 35%, #000 80%, transparent) intersect, linear-gradient(180deg, transparent, #000 20%, #000 75%, transparent); }
.tariffs__candles svg { display: block; width: 100%; height: 100%; }
.tariffs__candles-track { animation: tc-run 70s linear infinite; }
@keyframes tc-run { to { transform: translateX(-50%); } }
.tariffs.is-offscreen .tariffs__candles-track { animation-play-state: paused; }
@media (max-width: 900px) { .tariffs__candles { top: -78px; left: 0; right: 0; width: 100%; height: 70px; opacity: .45; } } /* планшет и телефон: полоса над надзаголовком, текст не перекрывает */
@media (prefers-reduced-motion: reduce) { .tariffs__candles-track { animation: none; } }
.tariffs::before { -webkit-mask: linear-gradient(180deg, transparent, #000 160px); mask: linear-gradient(180deg, transparent, #000 160px); } /* без шва на стыке с блоком 2 */

/* слоган первого экрана: «Один раз в году!» — белым жирным, «−75%» — металлическое золото с мягким ореолом, как скидки 2-го экрана.
   Кегль чуть больше текста, но заметно меньше BLACK FRIDAY — главный акцент не перетягивает */
.sub__lead { color: #fff; font-weight: 800; }
.sub__off { position: relative; isolation: isolate; display: inline-block; white-space: nowrap; padding: 0 .04em; font: 800 1.32em/1 var(--f-display); letter-spacing: -.01em; vertical-align: -.06em;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6));
  background-image: linear-gradient(180deg, #FFF4D6 0%, #F8E6B9 20%, #E9CD91 40%, #C9A45C 50%, #A17B3F 56%, #C9A45C 66%, #E9CD91 82%, #F8E6B9 100%); }
.sub__off::before { content: ''; position: absolute; z-index: -1; inset: -10% -18% -30%; pointer-events: none; filter: blur(12px);
  background: radial-gradient(closest-side, rgba(241,209,138,.38), rgba(201,164,92,.12) 55%, transparent); }

/* вау-эффект блока 3: холст поверх экрана на 2,6 с (клики проходят насквозь); скидка «подпрыгивает», когда досчитала */
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }
.tariff__off.fx-pop b { animation: fx-pop .6s cubic-bezier(.2,.8,.3,1.4), off-shine 11s ease-in-out 4.8s infinite; }
@keyframes fx-pop { 0% { scale: 1; } 40% { scale: 1.12; } 100% { scale: 1; } }
.copy .sub { color: #fff; font-weight: 700; } /* слоган целиком белым жирным; золотое «−75%» — единственный акцент */

/* ================= Блок 4 · Автоматическая торговля ================= */
/* та же карточка и золотая гамма, что в блоке 3; отличие — содержание и широкая карточка клуба */

/* условие вместо цены (депозит клуба): отдельная подпись и пояснение — не путается с ценой покупки */
.tariff__cond { display: grid; gap: 6px; padding: 20px 0; border-block: 1px solid rgba(201,164,92,.22); }
.tariff__cond-label { font: 700 12px/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--champagne); }
.tariff__cond-was s { position: relative; color: #d4d5d9; font: 700 clamp(16px, 1.3vw, 19px)/1 var(--f-display); text-decoration: none; padding: 0 2px; }
.tariff__cond-was s::after { content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; border-radius: 1px; background: linear-gradient(90deg, #C9A45C, #F1D18A); rotate: -9deg; box-shadow: 0 0 6px rgba(241,209,138,.5); }
.tariff__cond-now { font: 800 clamp(32px, 2.8vw, 44px)/1.05 var(--f-display); letter-spacing: -.02em; white-space: nowrap; -webkit-background-clip: text; background-clip: text; color: transparent;
  background-image: linear-gradient(180deg, #FFF4D6 0%, #F8E6B9 20%, #E9CD91 40%, #C9A45C 50%, #A17B3F 56%, #C9A45C 66%, #E9CD91 82%, #F8E6B9 100%); }
.tariff__cond-note { position: relative; padding-left: 26px; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.tariff__cond-note::before { content: 'i'; position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/1 var(--f-text); color: var(--gold-hi); border: 1px solid rgba(201,164,92,.55); }

/* Smart Million Club — широкая карточка на всю сетку: описание | условие | места и кнопка */
.tariff--club { grid-column: 1 / -1; }
@media (min-width: 761px) {
  .tariff--club { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 48px); row-gap: 14px; align-items: start; }
  .tariff--club .tariff__head { grid-column: 1 / -1; justify-content: flex-start; }
  .tariff--club .tariff__name { grid-column: 1; grid-row: 2; }
  .tariff--club .tariff__text { grid-column: 1; grid-row: 3; }
  .tariff--club .tariff__points { grid-column: 1; grid-row: 3 / 5; margin: 0; } /* 4 главных пункта клуба — под названием */
  .tariff--club .tariff__cond { grid-column: 2; grid-row: 2 / 5; padding: 0 0 0 clamp(24px, 3vw, 48px); border-block: 0; border-left: 1px solid rgba(201,164,92,.22); }
  .tariff--club .tariff__seats { grid-column: 3; grid-row: 2; }
  .tariff--club .tariff__foot { grid-column: 3; grid-row: 3 / 5; margin-top: 0; align-self: end; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .tariff--club { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tariff--club .tariff__cond { grid-column: 2; grid-row: 2 / 4; }
  .tariff--club .tariff__seats { grid-column: 1; grid-row: 4; }
  .tariff--club .tariff__foot { grid-column: 2; grid-row: 4; align-self: center; }
}
/* планшет: 3 советника в сетке из 2 колонок — Эксперт+ (максимальная скидка) на всю ширину, внутри две колонки, без пустоты справа */
@media (min-width: 761px) and (max-width: 1100px) {
  .tariffs--auto .tariff--best { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 16px; align-items: start; }
  .tariffs--auto .tariff--best .tariff__head { grid-column: 1 / -1; }
  .tariffs--auto .tariff--best .tariff__name { grid-column: 1; grid-row: 2; }
  .tariffs--auto .tariff--best .tariff__price { grid-column: 1; grid-row: 3 / 5; }
  .tariffs--auto .tariff--best .tariff__seats { grid-column: 2; grid-row: 2; }
  .tariffs--auto .tariff--best .tariff__text { grid-column: 2; grid-row: 3; }
  .tariffs--auto .tariff--best .tariff__foot { grid-column: 2; grid-row: 4; margin-top: 0; }
}

/* блок 4: платина — маркер автоторговли, как на 2-м экране (основа блока золотая) */
.tariffs__algo { opacity: .75; }
.tariffs__algo-glow { stroke-dasharray: 8 92; animation: ta-run 4.2s linear infinite; filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); }
@keyframes ta-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.tariffs__algo-dot circle:first-child { transform-box: fill-box; transform-origin: center; animation: ta-dot 4.2s ease-out infinite; animation-delay: calc(var(--n) * 1.05s); }
@keyframes ta-dot { 0%, 100% { scale: 1; opacity: .9; } 12% { scale: 1.9; opacity: 0; } 13% { scale: 1; opacity: 0; } 40% { opacity: .9; } }
.tariffs.is-offscreen .tariffs__algo-glow, .tariffs.is-offscreen .tariffs__algo-dot circle { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tariffs__algo-glow { animation: none; opacity: 0; } .tariffs__algo-dot circle { animation: none; } }
.tariff__markets { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.tariff__markets li { padding: 5px 9px; border-radius: 999px; font: 700 10.5px/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: #E6E8EB;
  background: linear-gradient(180deg, rgba(240,244,250,.08), rgba(240,244,250,.02)); border: 1px solid rgba(214,218,224,.32); }
/* блок 4 · платина — маркер автоторговли: светлее и теплее серебра, нейтральный серый без синевы, мягкая полоса отражения */
:root { --plat-hi: #F7F6F3; --plat: #E4E2DD; --plat-mid: #BDBAB3; --plat-line: rgba(228,226,221,.34); }
.title-plat { -webkit-background-clip: text; background-clip: text; color: transparent; background-image: linear-gradient(180deg, #FFFFFF 0%, #F7F6F3 22%, #E4E2DD 42%, #A8A59E 53%, #CFCCC6 64%, #F1EFEB 84%, #FFFFFF 100%); }
.tariffs__algo .tariffs__algo-dot circle:first-child { fill: var(--plat); }
.tariffs__algo .tariffs__algo-dot circle:last-child { fill: var(--plat-hi); }
.tariffs__algo g[stroke] { stroke: #BDBAB3; }
.tariff__markets li { color: var(--plat-hi); background: linear-gradient(180deg, rgba(247,246,243,.09), rgba(247,246,243,.02)); border-color: var(--plat-line); }
/* 2-й экран · карточка «Автоматическая торговля» в той же платине, что и блок 4 — единый цвет автоторговли */
.path--auto::before { background: radial-gradient(70% 55% at 75% 0%, rgba(228,226,221,.12), transparent 70%); }
.path--auto::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(247,244,236,.08), transparent 45%); }
.path--auto .path__kicker { color: #D2D0CB; }
.path--auto .path__title { background-image: linear-gradient(180deg, #FFFFFF 0%, #F1EFEB 45%, #B9B6AF 62%, #F1EFEB 100%); }
.path--auto .path__price::before { background: radial-gradient(closest-side, rgba(247,246,243,.32), rgba(201,198,190,.12) 50%, transparent); }
.path--auto .path__price b { background-image: linear-gradient(105deg, transparent 41%, rgba(60,56,48,.4) 45%, rgba(255,255,255,.95) 49.5%, #FFFFFF 50%, rgba(255,255,255,.95) 50.5%, rgba(60,56,48,.4) 55%, transparent 59%), linear-gradient(180deg, #FFFFFF 0%, #F7F6F3 22%, #E4E2DD 42%, #A8A59E 53%, #CFCCC6 64%, #F1EFEB 84%, #FFFFFF 100%); }
.btn-silver { color: #17150F; background: linear-gradient(180deg, #FFFFFF 0%, #F2F0EC 30%, #D2CFC8 56%, #ADA9A1 82%, #DAD7D1 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(70,66,58,.45), 0 1px 0 #55524B, 0 18px 40px -18px rgba(228,226,221,.35); }
.tariff__name { background-image: linear-gradient(180deg, #FFFFFF 0%, #F1EFEB 45%, #B9B6AF 62%, #F1EFEB 100%); } /* названия тарифов — платина, как вся «светлая металлика» блоков 2–4 */

/* ================= Финал · общий контейнер — та же сетка, что у блоков 2–4 ================= */
.why__wrap, .help__wrap, .faq__wrap, .foot__wrap { --edge: max(var(--gutter), calc((100% - 1640px) / 2)); padding: 0 var(--edge); }
@media (min-width: 761px) and (max-width: 900px), (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) { .why__wrap, .help__wrap, .faq__wrap, .foot__wrap { --edge: 6%; } }
@media (max-width: 760px) { .why__wrap, .help__wrap, .faq__wrap, .foot__wrap { --edge: 16px; } }
.why__kicker, .help__kicker, .faq__kicker { font: 600 12px/1.2 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

/* ---- «Не знаете, что выбрать?» — компактная панель по сетке карточек: текст в первых колонках, кнопка в последней ---- */
.help { padding: clamp(40px, 5vw, 72px) 0; }
.help__panel { --pad: clamp(24px, 2vw, 32px); position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(16px, 1.6vw, 24px); row-gap: 22px; align-items: center;
  padding: clamp(28px, 3vw, 44px) 0; border-radius: 22px; overflow: hidden;
  background: radial-gradient(60% 120% at 0% 0%, rgba(201,164,92,.12), transparent 60%) padding-box, linear-gradient(180deg, #17171a, #111113) padding-box, linear-gradient(135deg, rgba(241,209,138,.6), rgba(201,164,92,.18) 35%, rgba(255,255,255,.06) 65%, rgba(201,164,92,.3)) border-box;
  border: 1px solid transparent; box-shadow: 0 40px 80px -50px rgba(0,0,0,.9); }
.help__panel::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #F1D18A, #A17B3F); }
.help__main { grid-column: 1 / -2; display: flex; align-items: flex-start; gap: 22px; padding-left: var(--pad); min-width: 0; }
.help__ico { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-hi);
  background: radial-gradient(circle at 30% 25%, rgba(241,209,138,.28), rgba(201,164,92,.08) 70%); border: 1px solid rgba(201,164,92,.45); }
.help__text { display: grid; gap: 10px; max-width: 40em; }
.help__title { font: 800 clamp(24px, 2.4vw, 38px)/1.05 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.help__lead { color: var(--muted); font-size: 15px; line-height: 1.55; }
.help__btn { grid-column: -2; margin: 0 var(--pad); min-height: 56px; }
@media (max-width: 1100px) { .help__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .help__panel { grid-template-columns: minmax(0, 1fr); padding: var(--pad) 0; } .help__main { grid-column: 1; flex-direction: column; gap: 16px; padding-right: var(--pad); } .help__btn { grid-column: 1; } .help__ico { width: 44px; height: 44px; } }

/* ---- FAQ — строгий аккордеон: заголовок слева (колонка карточек), вопросы справа; тонкие разделители, золотые индикаторы ---- */
.faq { padding: clamp(64px, 8vw, 120px) 0 clamp(72px, 9vw, 140px); }
.faq__wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(16px, 1.6vw, 24px); align-items: start; }
.faq__head { display: grid; gap: 16px; position: sticky; top: 32px; }
.faq__lead { color: #cfcfd3; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; max-width: 26em; }
.faq__list { grid-column: 2 / -1; border-top: 1px solid rgba(255,255,255,.09); }
.faq__item { border-bottom: 1px solid rgba(255,255,255,.09); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 4px; cursor: pointer; list-style: none;
  font: 700 clamp(16px, 1.2vw, 19px)/1.35 var(--f-text); color: var(--text); transition: color .25s ease; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover, .faq__item[open] summary { color: var(--gold-hi); }
.faq__item summary:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; border-radius: 6px; }
.faq__ico { flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(201,164,92,.5); transition: background .3s ease, border-color .3s ease; }
.faq__ico::before, .faq__ico::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; border-radius: 1px; background: var(--gold-hi); translate: -50% -50%; transition: rotate .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease; }
.faq__ico::after { rotate: 90deg; }
.faq__item[open] .faq__ico { background: rgba(201,164,92,.14); border-color: rgba(241,209,138,.75); }
.faq__item[open] .faq__ico::after { rotate: 0deg; opacity: 0; }
.faq__a { overflow: hidden; }
.faq__a p { padding: 0 64px 26px 4px; color: #cfcfd3; font-size: 15.5px; line-height: 1.65; max-width: 46em; }
@media (max-width: 1100px) { .faq__wrap { grid-template-columns: minmax(0, 1fr); } .faq__head { position: static; } .faq__list { grid-column: 1; } }
@media (max-width: 760px) { .faq__item summary { padding: 20px 2px; gap: 16px; } .faq__a p { padding: 0 8px 22px 2px; font-size: 15px; } .faq__ico { width: 28px; height: 28px; } }

/* ---- футер ---- */
.foot { padding: 40px 0 48px; border-top: 1px solid rgba(255,255,255,.07); background: #070708; }
.foot__wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; }
.foot__logo img { height: 34px; width: auto; }
.foot__risk { color: #7d7e83; font-size: 12.5px; line-height: 1.6; max-width: 62em; }
.foot__copy { color: #7d7e83; font-size: 12.5px; white-space: nowrap; }
@media (max-width: 900px) { .foot__wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* появление финальных блоков (класс ставит скрипт; без JS всё видно сразу) */
.js-reveal-final [data-reveal] { opacity: 0; translate: 0 24px; transition: opacity .8s ease, translate .9s cubic-bezier(.2,.7,.2,1); }
.js-reveal-final.is-in [data-reveal] { opacity: 1; translate: 0 0; }
.js-reveal-final.is-in [data-reveal]:nth-child(2) { transition-delay: .08s; } .js-reveal-final.is-in [data-reveal]:nth-child(3) { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) { .js-reveal-final [data-reveal] { opacity: 1; translate: none; transition: none; } }
/* отступы между блоками 3→4→5→6→7 сокращены соразмерно (×0.7); стык 2→3 прежний */
:root { --gap-k: .7; }
#manual { padding-bottom: calc(clamp(64px, 8vw, 120px) * var(--gap-k)); }
#auto { padding-top: calc(clamp(64px, 8vw, 120px) * var(--gap-k)); padding-bottom: calc(clamp(64px, 8vw, 120px) * var(--gap-k)); }
.why { padding-top: calc(clamp(64px, 8vw, 120px) * var(--gap-k)); padding-bottom: calc(clamp(64px, 8vw, 120px) * var(--gap-k)); }
.help { padding-top: calc(clamp(40px, 5vw, 72px) * var(--gap-k)); padding-bottom: calc(clamp(40px, 5vw, 72px) * var(--gap-k)); }
.faq { padding-top: calc(clamp(64px, 8vw, 120px) * var(--gap-k)); }

/* ================= Финальный экран «Сейчас или снова через год?» — часы-арт-объект ================= */
.why { position: relative; isolation: isolate; overflow: hidden; }
.why::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; /* деликатное освещение сцены: тёплый свет за часами */
  background: radial-gradient(38% 46% at 50% 56%, rgba(201,164,92,.14), transparent 70%), radial-gradient(60% 30% at 50% 0%, rgba(201,164,92,.05), transparent 70%);
  -webkit-mask: linear-gradient(180deg, transparent, #000 160px, #000 calc(100% - 160px), transparent); mask: linear-gradient(180deg, transparent, #000 160px, #000 calc(100% - 160px), transparent); }
.why__wrap { display: grid; justify-items: center; gap: clamp(28px, 3vw, 44px); }
.why__head { display: grid; gap: 16px; justify-items: center; text-align: center; max-width: 860px; }
.why__title { font: 800 clamp(30px, 3.6vw, 56px)/1.1 var(--f-display); text-transform: uppercase; letter-spacing: -.015em; text-wrap: balance; color: var(--text); }
.why__acc { -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5));
  background-image: linear-gradient(105deg, transparent 41%, rgba(90,62,24,.4) 45%, rgba(255,248,226,.95) 49.5%, #FFFCEF 50%, rgba(255,248,226,.95) 50.5%, rgba(90,62,24,.4) 55%, transparent 59%), linear-gradient(180deg, #FFF4D6 0%, #F3DEAC 20%, #E9CD91 40%, #C9A45C 50%, #80602F 56%, #C9A45C 66%, #E9CD91 82%, #F3DEAC 100%);
  background-size: 300% 100%, 100% 100%; background-repeat: no-repeat; animation: off-shine 11s ease-in-out 5.6s infinite; }
.why__lead { color: #cfcfd3; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; max-width: 40em; text-wrap: balance; }

.why__stage { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 560px) minmax(0, 1fr); align-items: center; gap: clamp(24px, 3vw, 56px); }
.why__col { display: grid; gap: clamp(48px, 6vw, 96px); }
.why__col--l { text-align: right; justify-items: end; padding-bottom: clamp(24px, 4vw, 64px); }   /* лёгкая асимметрия: левая пара выше, правая ниже */
.why__col--r { padding-top: clamp(24px, 4vw, 64px); }
.why__arg { position: relative; display: grid; gap: 10px; max-width: 320px; padding-top: 22px; }
.why__arg::before { content: ''; position: absolute; top: 0; width: 56px; height: 2px; background: linear-gradient(90deg, #F3DEAC, #80602F); }
.why__col--l .why__arg::before { right: 0; background: linear-gradient(270deg, #F3DEAC, #80602F); }
.why__col--r .why__arg::before { left: 0; }
.why__num { font: 800 13px/1 var(--f-display); letter-spacing: .08em; color: var(--gold); }
.why__arg h3 { font: 800 clamp(16px, 1.3vw, 19px)/1.25 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--text); }
.why__arg p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.why__btn { margin-top: clamp(4px, 1vw, 12px); }

/* часы: единый объект, масштабируется целиком (цифры — внутри SVG, не смещаются) */
.why__clock { position: relative; perspective: 1400px; }
.why__clock::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -2%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.85), transparent); filter: blur(10px); z-index: -1; }
.clock { transform: translateY(var(--cpy, 0px)) rotateX(var(--crx, 0deg)) rotateY(var(--cry, 0deg)); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.clock__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 40px 60px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(201,164,92,.12)); }
.clock__glare { transform: translate(var(--gx, 0px), var(--gy, 0px)); transition: transform .6s ease; }
.clock__sheen { transform-box: view-box; transform-origin: 320px 360px; animation: ck-sheen 14s linear infinite; }       /* блик по корпусу — очень медленно */
@keyframes ck-sheen { to { transform: rotate(360deg); } }
.clock__sec { transform-origin: 320px 360px; animation: ck-turn 60s linear infinite; }
@keyframes ck-turn { to { transform: rotate(360deg); } }
.clock__g1 { transform-box: fill-box; transform-origin: center; animation: ck-turn 40s linear infinite; }
.clock__g2 { transform-box: fill-box; transform-origin: center; animation: ck-turn 20s linear infinite reverse; }
.clock__bal { transform-origin: 464px 300px; animation: ck-bal 2.6s ease-in-out infinite alternate; }
@keyframes ck-bal { from { transform: rotate(-32deg); } to { transform: rotate(32deg); } }
/* песок: сверху уровень опускается, внизу растёт горка, струйка течёт; в конце цикла мягко «переворачивается» */
.clock__sand-top { animation: ck-top 48s linear infinite; }
@keyframes ck-top { 0% { transform: translateY(0); } 92% { transform: translateY(98px); } 100% { transform: translateY(98px); } }
.clock__sand-bot { animation: ck-bot 48s linear infinite; }
@keyframes ck-bot { 0% { transform: translateY(46px); } 92% { transform: translateY(0); } 100% { transform: translateY(0); } }
.clock__sand { animation: ck-fade 48s linear infinite; }
@keyframes ck-fade { 0% { opacity: 0; } 3% { opacity: 1; } 93% { opacity: 1; } 100% { opacity: 0; } }
.clock__stream { animation: ck-stream .9s linear infinite; }
@keyframes ck-stream { to { stroke-dashoffset: -20; } }
.clock__svg.is-ended .clock__digits, .clock__svg.is-ended .clock__labels { opacity: 0; }
.clock__svg.is-ended .clock__ended { opacity: 1; }
.why.is-offscreen .clock *, .why.is-offscreen .clock__svg * { animation-play-state: paused !important; }

/* появление: часы проявляются со смещением и лёгким поворотом, аргументы — по очереди */
.js-reveal-final .why__clock { opacity: 0; translate: 0 40px; rotate: -4deg; scale: .96; transition: opacity 1.1s ease, translate 1.2s cubic-bezier(.2,.7,.2,1), rotate 1.4s cubic-bezier(.2,.7,.2,1), scale 1.2s cubic-bezier(.2,.7,.2,1); }
.js-reveal-final.is-in .why__clock { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
.js-reveal-final.is-in .why__col--l .why__arg:nth-child(1) { transition-delay: .35s; } .js-reveal-final.is-in .why__col--l .why__arg:nth-child(2) { transition-delay: .5s; }
.js-reveal-final.is-in .why__col--r .why__arg:nth-child(1) { transition-delay: .65s; } .js-reveal-final.is-in .why__col--r .why__arg:nth-child(2) { transition-delay: .8s; }
.js-reveal-final.is-in .why__btn { transition-delay: .9s; }

/* планшет: часы по центру, аргументы 2×2 под ними */
@media (max-width: 1100px) {
  .why__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "clock clock" "l r"; gap: 40px 32px; }
  .why__clock { grid-area: clock; justify-self: center; width: min(100%, 520px); }
  .why__col--l { grid-area: l; text-align: left; justify-items: start; padding: 0; }
  .why__col--r { grid-area: r; padding: 0; }
  .why__col { gap: 36px; }
  .why__col--l .why__arg::before { right: auto; left: 0; background: linear-gradient(90deg, #F3DEAC, #80602F); }
}
/* телефон: заголовок → часы → 4 аргумента столбиком → кнопка на всю ширину; без наклона и параллакса */
@media (max-width: 760px) {
  .why__stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "clock" "l" "r"; gap: 32px; }
  .why__clock { width: 100%; }
  .why__col { gap: 28px; }
  .why__arg { max-width: none; }
  .why__btn { width: 100%; }
  .clock { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .why__acc { animation: none; background-position: 100% 0, 0 0; }
  .clock, .clock * { animation: none !important; transition: none !important; }
  .clock__sand-top { transform: translateY(48px); } .clock__sand-bot { transform: translateY(22px); }  /* статичный вариант: песок наполовину */
  .js-reveal-final .why__clock { opacity: 1; translate: none; rotate: none; scale: 1; }
}

/* экран с часами · полировка */
.why__arg p { color: #c4c4c9; font-size: 16px; }                             /* было #A6A6AA / 15px — описания не теряются на чёрном */
.why__arg h3 { letter-spacing: 0; text-wrap: balance; }
.why__clock::before { content: ''; position: absolute; inset: 6% 6% 4%; z-index: -1; pointer-events: none; border-radius: 50%;  /* почти незаметный тёплый свет позади корпуса — отделяет от фона */
  background: radial-gradient(closest-side, rgba(201,164,92,.10), rgba(201,164,92,.04) 60%, transparent); filter: blur(24px); }
.clock__arc { transition: stroke-dasharray 1s linear; }
/* песок: уровень меняется плавно, смена цикла растянута — без видимого скачка */
.clock__sand-top { animation-timing-function: cubic-bezier(.35,0,.65,1); }
.clock__sand-bot { animation-timing-function: cubic-bezier(.35,0,.65,1); }
@keyframes ck-fade { 0% { opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .clock__arc { transition: none; } }
.clock__svg.is-ended .clock__seps, .clock__svg.is-ended .clock__cap { opacity: 0; } /* после окончания — только надпись на дисплее */
/* плашка помощи — под карточками блоков 3 и 4, в сетке тарифов (отдельная секция после часов убрана) */
/* помощь с выбором: в блоке 3 — тонкая строка без рамки; в блоке 4 — облегчённая плашка с контурной кнопкой (не спорит с «Оставить заявку») */
/* блок 3: строка помощи заметнее — компактная капсула по центру (рамка, иконка, белый вопрос, контурная кнопка); легче полной плашки блока 4 */
  background: linear-gradient(90deg, rgba(201,164,92,.12), rgba(255,255,255,.025)); border: 1px solid rgba(201,164,92,.45); box-shadow: 0 20px 50px -30px rgba(201,164,92,.5); }
/* экран с часами: шапка по левому краю, как у блоков 2–4 (часы и кнопка остаются по оси часов) */
.why__wrap { justify-items: stretch; }
.why__head { justify-items: start; text-align: left; max-width: 980px; }
.why__lead { text-wrap: pretty; }
.why__btn { justify-self: center; }
@media (max-width: 760px) { .why__btn { justify-self: stretch; } }


/* ================= Экран с коробкой: сцена по прокрутке (box.js) ================= */
.why { overflow: visible; overflow-x: clip; }                         /* clip вместо hidden: не ломает sticky */
.why__pin { position: relative; }
.why__scene { position: absolute; left: 0; top: 0; width: 800px; height: 900px; transform-origin: 0 0; pointer-events: none; z-index: 1; will-change: transform; }
.why__scene .bx { display: block; width: 800px; height: 900px; overflow: visible; }
.why__head, .why__col, .why__btn { position: relative; z-index: 2; }  /* текст всегда над сценой */
.why__boxslot { display: none; }
.why__clock::after { display: none; }
.js-reveal-final .why__clock { opacity: 1; translate: none; rotate: none; scale: 1; }
/* песок пересыпается постоянно */
.bx-sand-top { animation: bx-top 48s cubic-bezier(.35,0,.65,1) infinite; }
@keyframes bx-top { 0% { transform: translateY(0); } 92%, 100% { transform: translateY(128px); } }
.bx-sand-bot { animation: bx-bot 48s cubic-bezier(.35,0,.65,1) infinite; }
@keyframes bx-bot { 0% { transform: translateY(70px); } 92%, 100% { transform: translateY(0); } }
.bx-sand { animation: ck-fade 48s linear infinite; }
.bx-stream { animation: ck-stream .9s linear infinite; }
.bx.is-ended .bx-digits, .bx.is-ended .bx-labels, .bx.is-ended .bx-seps { opacity: 0; }
.bx.is-ended .bx-ended { opacity: 1; }
.why.is-offscreen .bx * { animation-play-state: paused !important; }

/* ПК: блок закреплён на время сцены; внутри — заголовок слева, ниже 3 колонки с часами по центру, кнопка */
.why.is-pinned { height: 230vh; padding: 0 !important; }
.why.is-pinned .why__pin { position: sticky; top: 0; height: 100vh; }
.why.is-pinned .why__wrap { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(16px, 2.4vh, 28px); padding-top: clamp(40px, 7vh, 80px); padding-bottom: clamp(28px, 5vh, 56px); }
.why.is-pinned .why__head { max-width: 46%; }
.why.is-pinned .why__stage { height: 100%; min-height: 0; }
.why.is-pinned .why__clock { height: 100%; }
.why.is-pinned .why__boxslot { display: block; position: absolute; left: 50%; right: max(var(--gutter), calc((100% - 1640px) / 2)); top: 10vh; bottom: 6vh; }
/* планшет и телефон: зона сцены в потоке, коробка → часы в одном месте */
@media (max-width: 1100px) { .why__clock { width: 100%; aspect-ratio: 1 / .96; } }
@media (min-width: 1101px) { .why:not(.is-pinned) .why__clock { height: 560px; } }
@media (prefers-reduced-motion: reduce) { .bx * { animation: none !important; } .bx-sand-top { transform: translateY(64px); } .bx-sand-bot { transform: translateY(35px); } }
/* закреплённый экран: шапка по левой линии сетки и в 2 строки; финал помещается в высоту экрана */
.why.is-pinned .why__head { justify-self: start; max-width: 52%; }
.why.is-pinned .why__boxslot { left: 56%; top: 8vh; bottom: 5vh; }
.why.is-pinned .why__wrap { padding-top: clamp(28px, 5.5vh, 72px); padding-bottom: clamp(20px, 3.5vh, 44px); gap: clamp(12px, 2vh, 24px); }
.why.is-pinned .why__col { gap: clamp(18px, 3.2vh, 40px); padding: 0; }
.why.is-pinned .why__arg { gap: 8px; padding-top: 18px; }
.why.is-pinned .why__arg p { font-size: 15px; line-height: 1.5; }
.why.is-pinned .why__stage { align-items: center; }
.why.is-pinned .why__arg, .why.is-pinned .why__btn { transition: none !important; } /* на ПК появление аргументов ведёт прокрутка, без задержек */
.why.is-pinned .why__head { max-width: 50%; }
/* ключевые пункты тарифа: коротко и по делу, золотые маркеры */
.tariff__points { list-style: none; display: grid; gap: 10px; }
.tariff__points li { position: relative; padding-left: 22px; color: #d6d6da; font-size: 15px; line-height: 1.45; }
.tariff__points li::before { content: ''; position: absolute; left: 2px; top: .42em; width: 9px; height: 5px; border: solid var(--gold); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.why__head { justify-self: start; } /* шапка всегда от левой линии сетки, на всех ширинах */

/* ================= Экран «Сейчас или снова через год?» · v3: текст слева, коробка справа, аргументы строкой ================= */
.why { overflow: hidden; padding: calc(clamp(64px, 8vw, 120px) * var(--gap-k, 1)) 0; height: auto; }
.why::before { background: radial-gradient(40% 55% at 74% 50%, rgba(201,164,92,.16), transparent 70%); -webkit-mask: linear-gradient(180deg, transparent, #000 140px, #000 calc(100% - 140px), transparent); mask: linear-gradient(180deg, transparent, #000 140px, #000 calc(100% - 140px), transparent); }
.why__wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head art" "cta art" "args args"; column-gap: clamp(24px, 3vw, 56px); row-gap: 0; align-items: start; justify-items: stretch; height: auto; padding-top: 0; padding-bottom: 0; }
.why__head { grid-area: head; align-self: end; justify-self: start; text-align: left; justify-items: start; max-width: 620px; gap: 18px; }
.why__title { font-size: clamp(32px, 3.6vw, 56px); }
.why__lead { text-align: left; text-wrap: pretty; }
.why__cta { grid-area: cta; align-self: start; display: grid; gap: 24px; justify-items: start; margin-top: clamp(24px, 2.6vw, 36px); }
.why__board { margin: 0; }
.why__btn { justify-self: start; margin: 0; }
.why__args { grid-area: args; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(16px, 2vw, 32px); margin-top: clamp(48px, 5vw, 80px); }
.why__arg { max-width: none; text-align: left; }
.why__arg::before { left: 0; right: auto; background: linear-gradient(90deg, #F3DEAC, #80602F); }
.why__arg h3 { font-size: clamp(15px, 1.15vw, 17px); }

/* сцена: слои-рендеры в единицах ширины сцены (cqw) — пропорции одинаковы на любой ширине */
.why__art { grid-area: art; position: relative; container-type: inline-size; width: 100%; max-width: 760px; justify-self: end; aspect-ratio: 1 / .9; pointer-events: none; }
.why__art > *, .why__hg > * { position: absolute; display: block; }
.why__glow { left: -12cqw; width: 124cqw; bottom: 22cqw; height: auto; mix-blend-mode: screen; opacity: .75; }
.why__boxback, .why__boxfront { left: 6cqw; width: 88cqw; height: auto; bottom: -6cqw; }
.why__boxfront { clip-path: inset(37.5% 0 0 0); }           /* передняя стенка поверх часов: часы стоят в коробке */
.why__hg { left: 34cqw; width: 32cqw; aspect-ratio: 640 / 849; bottom: 16cqw; }
.why__hg img, .why__hg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.why__lid { left: 4cqw; width: 52cqw; height: auto; bottom: 57cqw; rotate: -12deg; }
.why__p70 { left: -3cqw; width: 36cqw; height: auto; bottom: 30cqw; rotate: -4deg; filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); }
.why__p75 { right: -3cqw; width: 36cqw; height: auto; bottom: 34cqw; rotate: 4deg; filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); }

/* песок: сверху уровень опускается, внизу растёт горка; струйка течёт */
.why__sand-top { animation: ws-top 48s cubic-bezier(.35,0,.65,1) infinite; }
@keyframes ws-top { 0% { transform: translateY(0); } 92%, 100% { transform: translateY(230px); } }
.why__sand-bot { transform-box: fill-box; transform-origin: 50% 100%; animation: ws-bot 48s cubic-bezier(.35,0,.65,1) infinite; }
@keyframes ws-bot { 0% { transform: scaleY(.25); } 92%, 100% { transform: scaleY(1); } }
.why__sand { animation: ck-fade 48s linear infinite; }
.why__sand-stream { animation: ws-stream .9s linear infinite; }
@keyframes ws-stream { to { stroke-dashoffset: -44; } }
.why.is-offscreen .why__sand * { animation-play-state: paused; }

/* появление (один раз): коробка → крышка поднимается → часы выходят из коробки → скидки по очереди */
.js-reveal-final .why__art > * { transition: opacity .9s ease, translate 1.2s cubic-bezier(.2,.7,.2,1), rotate 1.2s cubic-bezier(.2,.7,.2,1); }
.js-reveal-final:not(.is-in) .why__lid { translate: 10cqw 26cqw; rotate: 0deg; }
.js-reveal-final:not(.is-in) .why__hg { translate: 0 20cqw; opacity: 0; }
.js-reveal-final:not(.is-in) .why__glow { opacity: 0; }
.js-reveal-final:not(.is-in) .why__p70 { translate: 8cqw 4cqw; opacity: 0; }
.js-reveal-final:not(.is-in) .why__p75 { translate: -8cqw 4cqw; opacity: 0; }
.js-reveal-final.is-in .why__lid { transition-delay: .2s; }
.js-reveal-final.is-in .why__glow { transition-delay: .35s; }
.js-reveal-final.is-in .why__hg { transition-delay: .55s; }
.js-reveal-final.is-in .why__p70 { transition-delay: 1.05s; }
.js-reveal-final.is-in .why__p75 { transition-delay: 1.25s; }
.js-reveal-final.is-in .why__args .why__arg:nth-child(2) { transition-delay: .1s; } .js-reveal-final.is-in .why__args .why__arg:nth-child(3) { transition-delay: .2s; } .js-reveal-final.is-in .why__args .why__arg:nth-child(4) { transition-delay: .3s; }

@media (max-width: 1100px) { .why__args { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .why__wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "art" "cta" "args"; }
  .why__art { justify-self: center; max-width: 600px; margin-top: 28px; }
}
@media (max-width: 760px) {
  .why__args { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .why__cta, .why__board, .why__btn { width: 100%; justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .why__sand * { animation: none !important; } .why__sand-top { transform: translateY(115px); } .why__sand-bot { transform: scaleY(.6); } .js-reveal-final .why__art > * { transition: none; translate: none !important; opacity: 1 !important; } }
.why__glow { mix-blend-mode: normal; opacity: .85; }   /* свечение с прозрачным фоном */
.why__hg { left: 32cqw; width: 36cqw; bottom: 14cqw; } /* часы крупнее — главный объект сцены */
.why__lid { bottom: 63cqw; }

/* ================= Коробка · вау-раскрытие (why.js ставит .js-why, при видимой сцене — .is-play) ================= */
.why__p70 > img, .why__p75 > img { position: absolute; inset: 0; width: 100%; height: auto; }
.why__p70, .why__p75 { aspect-ratio: 2 / 1; }
/* блик по металлу плашек: копия плашки, осветлённая и видимая только в бегущей полосе */
.why__shine { filter: brightness(2.1) saturate(.7); opacity: .85; -webkit-mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) 100% 0 / 300% 100% no-repeat; mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) 100% 0 / 300% 100% no-repeat; }
.why.is-play .why__shine { animation: wshine 11s ease-in-out 3.2s infinite; }
@keyframes wshine { 0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 12%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; } }
/* наклон сцены за курсором */
.why__art { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }

/* исходное состояние: коробка закрыта, внутри ничего не видно */
.why.js-why .why__art > * { transition: none; }
.why.js-why:not(.is-play) .why__art > * { opacity: 0; }
.why.js-why:not(.is-play) .why__lid { translate: 19.5cqw 33cqw; rotate: 7deg; scale: 1.385; }

/* таймлайн (сек): 0–0.3 появление · 0.7–1.2 дрожь · 1.25 крышка срывается, вспышка, искры · 1.5 часы · 1.9/2.05 скидки */
.why.is-play .why__boxback, .why.is-play .why__boxfront { animation: wbox 2s both; }
@keyframes wbox { 0% { opacity: 0; translate: 0 3cqw; } 15% { opacity: 1; translate: 0 0; rotate: 0deg; }
  35% { translate: .4cqw 0; rotate: .7deg; } 42% { translate: -.4cqw 0; rotate: -.7deg; } 49% { translate: .35cqw 0; rotate: .5deg; } 56% { translate: -.25cqw 0; rotate: -.3deg; }
  62% { translate: 0 0; rotate: 0deg; } 67% { translate: 0 .8cqw; } 74%, 100% { opacity: 1; translate: 0 0; rotate: 0deg; } }
.why.is-play .why__lid { animation: wlid 2s both; }
@keyframes wlid {
  0% { opacity: 0; translate: 19.5cqw 36cqw; rotate: 7deg; scale: 1.385; } 15% { opacity: 1; translate: 19.5cqw 33cqw; rotate: 7deg; scale: 1.385; }
  35% { translate: 19.9cqw 32.6cqw; rotate: 8.4deg; } 42% { translate: 19.1cqw 32.8cqw; rotate: 5.6deg; } 49% { translate: 19.8cqw 32.5cqw; rotate: 8deg; } 56% { translate: 19.3cqw 32.9cqw; rotate: 6.2deg; }
  62% { opacity: 1; translate: 19.5cqw 33cqw; rotate: 7deg; scale: 1.385; animation-timing-function: cubic-bezier(.15,.8,.25,1); }
  84% { translate: -1.2cqw -3cqw; rotate: -15deg; scale: 1; } 100% { opacity: 1; translate: 0 0; rotate: -12deg; scale: 1; } }
.why.is-play .why__glow { animation: wglow 2.8s both; }
@keyframes wglow { 0%, 44% { opacity: 0; scale: .7; } 52% { opacity: 1; scale: 1.2; } 100% { opacity: .85; scale: 1; } } /* вспышка — масштабом и прозрачностью, без фильтра (он уводит цвет в зелень) */
.why.is-play .why__hg { animation: whg 2.6s both; }
@keyframes whg { 0%, 56% { opacity: 0; translate: 0 26cqw; animation-timing-function: cubic-bezier(.2,.9,.3,1); } 78% { opacity: 1; translate: 0 -2.2cqw; } 88% { translate: 0 .7cqw; } 100% { opacity: 1; translate: 0 0; } }
.why.is-play .why__p70 { animation: wp70 2.8s both; }
@keyframes wp70 { 0%, 66% { opacity: 0; z-index: 1; translate: 22cqw 6cqw; scale: .3; rotate: 24deg; animation-timing-function: cubic-bezier(.2,.9,.3,1); } 74% { z-index: 1; } 76% { z-index: 4; } 86% { opacity: 1; translate: -1.2cqw -1.4cqw; scale: 1.07; rotate: -7deg; } 100% { opacity: 1; translate: 0 0; scale: 1; rotate: -4deg; } }
.why.is-play .why__p75 { animation: wp75 3s both; }
@keyframes wp75 { 0%, 66% { opacity: 0; z-index: 1; translate: -22cqw 6cqw; scale: .3; rotate: -24deg; animation-timing-function: cubic-bezier(.2,.9,.3,1); } 74% { z-index: 1; } 76% { z-index: 4; } 86% { opacity: 1; translate: 1.2cqw -1.4cqw; scale: 1.07; rotate: 7deg; } 100% { opacity: 1; translate: 0 0; scale: 1; rotate: 4deg; } }
/* искры из коробки */
.why__spark { position: absolute; left: 50cqw; bottom: 36cqw; width: calc(.9cqw * var(--z)); height: calc(.9cqw * var(--z)); border-radius: 50%; background: radial-gradient(circle, #FFF6DE, #F3DEAC 40%, rgba(201,164,92,0) 70%); opacity: 0; pointer-events: none; }
.why.is-play .why__spark { animation: wspark 1.5s cubic-bezier(.15,.7,.3,1) var(--d) both; }
@keyframes wspark { 0% { opacity: 0; translate: 0 0; } 8% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; translate: var(--dx) calc(var(--dy) + 6cqw); } }
@media (prefers-reduced-motion: reduce) { .why__shine, .why__spark { display: none; } .why__art { transform: none; } }
.why__boxfront { z-index: 3; } .why__p70, .why__p75 { z-index: 4; } .why__lid { z-index: 5; } /* плашки вылетают из коробки: в начале полёта — за передней стенкой */
/* FAQ · доработка: описание и ссылка на консультацию слева; строки на ~12% ниже; плюс поворачивается в крестик; переходы 220 мс */
.faq__head { gap: 0; }
.faq__head .section-title { margin-top: 16px; }
.faq__lead { margin-top: 28px; max-width: 380px; color: #c4c4c9; font-size: clamp(16px, 1.2vw, 17px); line-height: 1.6; }
.faq__help { justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 22px; padding: 6px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 600 15px/1.4 var(--f-text); color: var(--muted); transition: color .22s ease; }
.faq__help span { color: var(--gold-hi); font-weight: 700; transition: color .22s ease; }
.faq__help svg { color: var(--gold-hi); transition: translate .22s ease, color .22s ease; }
.faq__help:hover span, .faq__help:hover svg { color: #FFF4D6; }
.faq__help:hover svg { translate: 4px 0; }
.faq__help:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; border-radius: 4px; }
.faq__item summary { padding: 21px 4px; transition: color .22s ease; }
.faq__item summary:hover, .faq__item[open] summary { color: #F3DEAC; }
.faq__ico { transition: background .22s ease, border-color .22s ease, rotate .28s cubic-bezier(.2,.7,.2,1); }
.faq__ico::before, .faq__ico::after { transition: background .22s ease; }
.faq__item summary:hover .faq__ico { border-color: rgba(241,209,138,.85); }
.faq__item summary:hover .faq__ico::before, .faq__item summary:hover .faq__ico::after { background: #FFF4D6; }
.faq__item[open] .faq__ico { rotate: 45deg; }
.faq__item[open] .faq__ico::after { rotate: 90deg; opacity: 1; }      /* плюс целиком поворачивается в крестик */
.faq__a p { padding-top: 2px; color: #c9c9ce; }
@media (max-width: 760px) { .faq__item summary { padding: 18px 2px; } .faq__lead { margin-top: 20px; } .faq__help { margin-top: 16px; } }
@media (prefers-reduced-motion: reduce) { .faq__ico, .faq__help svg { transition: none; } }
/* FAQ · полировка: описание второстепенно, активная кнопка спокойнее */
.faq__lead { font-size: clamp(14.5px, 1.05vw, 15.5px); line-height: 1.65; }
.faq__item[open] .faq__ico { background: rgba(201,164,92,.06); }
/* FAQ · типографика вопросов и ответов: единый шрифт страницы (Manrope), легче рекламных заголовков (заголовок секции не меняется) */
.faq__item summary { font: 500 19px/1.4 var(--f-text); letter-spacing: -.01em; color: #F2F2F2; }
.faq__item summary:hover, .faq__item[open] summary { color: #E6C789; }
.faq__a p { font: 400 16.5px/1.6 var(--f-text); color: #BDBDBD; }
@media (max-width: 760px) { .faq__item summary { font-size: 17.5px; } .faq__a p { font-size: 15.5px; } }

/* ===== Блок «Часы-монумент» (#why2): часы на пьедестале, таймер на табличке, шкала акции ===== */
.why2 { position: relative; isolation: isolate; overflow-x: clip; padding: calc(clamp(64px, 8vw, 120px) * var(--gap-k)) 0; }
.why2::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 50% at 72% 42%, rgba(201,164,92,.13), transparent 70%); }
.why2__wrap { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; gap: 0; justify-items: stretch; height: auto; }
.why2__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head scene" "cta scene"; align-content: center; column-gap: clamp(24px, 3vw, 56px); row-gap: clamp(28px, 3vw, 44px); }
.why2__head { grid-area: head; align-self: end; container-type: inline-size; display: grid; gap: clamp(16px, 1.6vw, 24px); justify-items: start; }
/* заголовок в три строки по ширине левой колонки: самая длинная строка «ИЛИ СНОВА» ≈ 7.85em, делитель 8.7 — чуть мельче, с воздухом до часов */
.why2__title { font-size: clamp(32px, calc(100cqw / 8.7), 100px); line-height: 1.02; letter-spacing: -.02em; text-wrap: initial; }
.why2__title > span { display: block; }
.why2 .why__lead { max-width: 620px; }
.why2__cta { grid-area: cta; align-self: start; display: grid; gap: clamp(24px, 2.4vw, 36px); justify-items: start; }
.why2__btn { margin-top: 0; justify-self: start; }
.why2 .why__args { grid-area: auto; }

.why2__scale { width: min(100%, 460px); display: grid; gap: 8px; }
.why2__tf { font: 700 11px/1 var(--f-text); letter-spacing: .16em; color: #C9A45C; }
.why2__candles svg { display: block; width: 100%; height: auto; overflow: visible; }
.why2__axis { stroke: rgba(201,164,92,.35); stroke-width: 1; }
.why2__tick { stroke: rgba(201,164,92,.5); stroke-width: 1; }
.why2__c line { stroke: rgba(201,164,92,.3); stroke-width: 1.5; stroke-linecap: round; }
.why2__c rect { fill: none; stroke: rgba(201,164,92,.35); stroke-width: 1.5; }
.why2__c.is-past line { stroke: #E9CD91; }
.why2__c.is-past rect { fill: url(#why2-cg); stroke: none; }
.why2__c.is-now line { stroke: #E9CD91; }
.why2__c.is-now rect { fill: #0b0b0d; stroke: #FFF4D6; filter: drop-shadow(0 0 8px rgba(241,209,138,.9)); animation: why2-now 2.8s ease-in-out infinite; }
.why2__dates { position: relative; }
.why2__today { position: absolute; top: 0; transform: translateX(-50%); color: #F3DEAC; white-space: nowrap; }
@keyframes why2-now { 50% { opacity: .55; } }
.why2__dates { display: flex; justify-content: space-between; font: 600 12px/1 var(--f-text); letter-spacing: .14em; color: var(--muted); }

/* сцена: пропорции подобраны так, что основание часов стоит на верхней площадке пьедестала */
.why2__scene { grid-area: scene; position: relative; width: min(100%, 620px); aspect-ratio: 1 / 1.265; align-self: center; justify-self: start; }
.why2__glow { position: absolute; left: 50%; top: 38%; width: 170%; max-width: none; height: auto; transform: translate(-50%, -50%); opacity: .75; pointer-events: none; z-index: 0; }
.why2__ped { position: absolute; left: 0; top: 60.5%; width: 100%; height: auto; z-index: 1; }
.why2__hg { position: absolute; left: 14%; top: 0; width: 72%; aspect-ratio: 640 / 849; z-index: 2; transform-origin: 50% 50%; will-change: transform; }
.why2__hg img, .why2__sand { position: absolute; inset: 0; width: 100%; height: 100%; }
.why2__sand { z-index: -1; } /* песок за стеклом рендера */
.why2__plate { position: absolute; left: 16.3%; width: 67.4%; top: 73.8%; height: 12.9%; z-index: 3; container-type: inline-size;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqw; }
/* утопленное стекло: темнее, внутренняя тень по краям, блик рендера приглушён */
.why2__plate::before { content: ''; position: absolute; inset: 2% 1.2%; border-radius: 2cqw; pointer-events: none; background: rgba(6,4,2,.6);
  box-shadow: inset 0 0 3cqw rgba(0,0,0,.95), inset 0 1.4cqw 2cqw rgba(0,0,0,.7); }
.why2__plate > * { position: relative; }
.why2__lab { font: 600 max(9px, 2.3cqw)/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: #D9B36A; }
.why2__plate .timer { gap: 1.4cqw; }
.why2__plate .timer__cell { min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.why2__plate .timer__cell::before, .why2__plate .timer__cell::after { display: none; }
/* ячейки как у перекидных часов: золотой кант, утопленный фон, линия посередине */
.why2__plate .timer__num { padding: 1.1cqw 1.4cqw; border-radius: 1.4cqw; border: 1px solid transparent; font-size: 9cqw;
  color: #F6E3B4; -webkit-text-fill-color: #F6E3B4; filter: none; text-shadow: 0 0 1.6cqw rgba(241,209,138,.4), 0 1px 0 rgba(0,0,0,.8);
  background: linear-gradient(transparent calc(50% - .5px), rgba(0,0,0,.85) calc(50% - .5px), rgba(0,0,0,.85) calc(50% + .5px), transparent calc(50% + .5px)) padding-box,
              linear-gradient(180deg, #1d160d 0%, #0e0a06 50%, #070504 50%, #16110a 100%) padding-box,
              linear-gradient(180deg, #F3DEAC, #6b5428 55%, #C9A45C) border-box;
  -webkit-background-clip: padding-box, padding-box, border-box; background-clip: padding-box, padding-box, border-box;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.9), 0 1px 0 rgba(255,230,170,.15), 0 4px 10px -4px rgba(0,0,0,.9);
  opacity: .3; transition: opacity .6s ease; }
.why2__plate .timer__lab { margin-top: 1.1cqw; font-size: max(9px, 2cqw); color: #d2bf96; }
.why2__plate .timer__sep { margin-top: -4cqw; font-size: 6cqw; color: #E9CD91; }
.why2__plate.is-lit .timer__num { opacity: 1; animation: why2-lit 1.4s ease-out; }
@keyframes why2-lit { from { text-shadow: 0 0 4cqw rgba(255,240,200,1), 0 1px 0 rgba(0,0,0,.8); } to { text-shadow: 0 0 1.6cqw rgba(241,209,138,.4), 0 1px 0 rgba(0,0,0,.8); } }

@media (max-width: 900px) {
  .why2__top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "scene" "cta"; }
  .why2__scene { width: min(100%, 420px); justify-self: center; } /* планшет вертикально / телефон: часы по центру колонки */
}
@media (prefers-reduced-motion: reduce) { .why2__plate.is-lit .timer__num, .why2__c.is-now rect { animation: none; } }

/* плашки «Не знаете, что выбрать?» и сцена часов: тот же отклик на курсор, что у табло таймера (ПК) */
.help .help__panel, .why2__scene { transform: perspective(1200px) rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg)); }
.help .help__panel { transition: opacity .8s ease, translate .9s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.why2__scene { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.help .help__panel.is-hover, .why2__scene.is-hover { transition: opacity .8s ease, translate .9s cubic-bezier(.2,.7,.2,1), transform .12s ease-out, box-shadow .35s ease; }
.help .help__panel.is-hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 36px 80px -30px rgba(0,0,0,.95); }
.help__panel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255,246,222,.12), transparent 60%); }
.help__panel.is-hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .help .help__panel, .why2__scene { transform: none !important; } .help__panel::after { display: none; } }

/* #why2: таблички максимальных скидок по бокам часов (как у коробки) — вылетают из-за часов после переворота, дальше редкий блик */
.why2__p70, .why2__p75 { position: absolute; width: 38%; aspect-ratio: 2 / 1; z-index: 4; opacity: 0; filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); pointer-events: none; }
.why2__p70 > img, .why2__p75 > img { position: absolute; inset: 0; width: 100%; height: auto; }
.why2__p70 { left: -9%; top: 30%; rotate: -4deg; }
.why2__p75 { right: -5%; top: 41%; rotate: 4deg; }
.why2__scene.is-plq .why2__p70 { animation: w2p70 1.2s both; }
.why2__scene.is-plq .why2__p75 { animation: w2p75 1.3s .12s both; }
.why2__scene.is-plq .why__shine { animation: wshine 11s ease-in-out 2.4s infinite; }
@keyframes w2p70 { 0% { opacity: 0; z-index: 1; translate: 105% 18%; scale: .3; rotate: 22deg; animation-timing-function: cubic-bezier(.2,.9,.3,1); } 30% { z-index: 1; } 34% { z-index: 4; } 72% { opacity: 1; translate: -4% -5%; scale: 1.07; rotate: -7deg; } 100% { opacity: 1; translate: 0 0; scale: 1; rotate: -4deg; } }
@keyframes w2p75 { 0% { opacity: 0; z-index: 1; translate: -105% 18%; scale: .3; rotate: -22deg; animation-timing-function: cubic-bezier(.2,.9,.3,1); } 30% { z-index: 1; } 34% { z-index: 4; } 72% { opacity: 1; translate: 4% -5%; scale: 1.07; rotate: 7deg; } 100% { opacity: 1; translate: 0 0; scale: 1; rotate: 4deg; } }
@media (prefers-reduced-motion: reduce) { .why2__scene.is-plq .why2__p70, .why2__scene.is-plq .why2__p75 { animation: none; opacity: 1; } .why2__scene .why__shine { display: none; } }
/* рамка плашки «Не знаете, что выбрать?» светится за курсором, как у табло таймера: свечение — слоем под непрозрачной заливкой, видно только в 1px рамки */
.help__panel.is-hover { background: radial-gradient(60% 120% at 0% 0%, rgba(201,164,92,.12), transparent 60%) padding-box, linear-gradient(180deg, #17171a, #111113) padding-box,
  radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(241,209,138,.95), transparent 70%) border-box,
  linear-gradient(135deg, rgba(241,209,138,.6), rgba(201,164,92,.18) 35%, rgba(255,255,255,.06) 65%, rgba(201,164,92,.3)) border-box; }
/* #why2: холст взрыва золотой пыли перед оборотом часов (при наведении) */
.why2__fx { position: absolute; left: -25%; top: -20%; width: 150%; height: 140%; z-index: 5; pointer-events: none; }
/* первый экран: холст взрыва золотой пыли при наведении на BLACK FRIDAY и 11.11 (поверх экрана, клики проходят насквозь) */
.fx-burst { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 60; pointer-events: none; }
/* #why2, преимущества 01–04: номер, заголовок и описание всех колонок на общих горизонталях (subgrid), даже если заголовки разной длины */
.why2 .why__args { align-items: start; }
.why2 .why__arg { grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; align-content: start; }
/* #why2, свечи D1: вырастают по очереди при появлении; наведение/тап — перекрестие, подсказка, остальные свечи приглушаются */
.why2__scale { position: relative; }
.why2__c { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .3s ease, translate .3s ease, transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 70ms), filter .3s ease; }
.why2__scale:not(.is-drawn) .why2__c { opacity: 0; transform: scaleY(.15); }
.why2__hit { fill: transparent; cursor: pointer; }
.why2__cross { stroke: rgba(243,222,172,.55); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.why2__candles svg.has-pick .why2__cross { opacity: 1; }
.why2__candles svg.has-pick .why2__c:not(.is-pick) { opacity: .35; }
.why2__c.is-pick { translate: 0 -3px; filter: drop-shadow(0 0 8px rgba(241,209,138,.85)); }
.why2__tip { position: absolute; top: 0; translate: -50% -110%; padding: 7px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; z-index: 3;
  font: 600 12px/1 var(--f-text); color: #d8d8dc; background: rgba(14,14,17,.95); border: 1px solid rgba(201,164,92,.45); box-shadow: 0 10px 24px -10px rgba(0,0,0,.9); }
.why2__tip b { color: #F3DEAC; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .why2__c { transition: none; } }
/* первый экран: трейдеры оживают под курсором (ПК) — параллакс по глубине, человек под курсором выходит вперёд, остальные приглушаются */
.scene .trader { transform-origin: 50% 100%; transition: translate .7s cubic-bezier(.2,.7,.2,1), scale .45s cubic-bezier(.2,.7,.2,1), filter .45s ease; }
.scene .trader img { transition: filter .45s ease; }
.scene.has-pick .trader:not(.is-pick) { filter: brightness(.72); }
.scene .trader.is-pick { scale: 1.035; filter: brightness(1.08); }
.scene .trader.is-pick img { filter: drop-shadow(2px -2px 8px rgba(241,209,138,.45)) drop-shadow(0 0 28px rgba(230,211,168,.14)); }
@media (prefers-reduced-motion: reduce) { .scene .trader { translate: none !important; scale: none !important; } }
/* #why2, преимущества 01–04: при наведении золотая полоска над номером растягивается на всю колонку, по ней пробегает блик (ПК) */
.why2 .why__arg::before { left: 0; transition: width .6s cubic-bezier(.2,.7,.2,1); background-size: 100% 100%; }
@media (hover: hover) and (pointer: fine) {
  .why2 .why__arg:hover::before { width: 100%;
    background: linear-gradient(90deg, transparent 0 40%, rgba(255,250,235,.95) 50%, transparent 60% 100%) no-repeat, linear-gradient(90deg, #F3DEAC, #C9A45C 55%, rgba(128,96,47,.15));
    background-size: 40% 100%, 100% 100%; animation: why2-bar 1.1s .25s ease-in-out both; }
  .why2 .why__arg h3 { transition: color .3s ease; }
  .why2 .why__arg:hover h3 { color: #F3DEAC; }
}
@keyframes why2-bar { from { background-position: -60% 0, 0 0; } to { background-position: 160% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .why2 .why__arg::before { transition: none; } .why2 .why__arg:hover::before { animation: none; } }
/* #why2: таблички скидок нарисованы кодом — в одном стиле с ячейками таймера на пьедестале (золотой кант, утопленное тёмное стекло, металлические цифры) */
.why2__p70, .why2__p75 { container-type: inline-size; }
.why2__badge { position: absolute; inset: 20% 12%; display: grid; place-items: center; overflow: hidden; border-radius: 7cqw; border: max(2px, 1.2cqw) solid transparent;
  background: linear-gradient(180deg, #2a2116 0%, #0f0b07 48%, #060403 52%, #1a140c 100%) padding-box,
              linear-gradient(160deg, #FFF4D6 0%, #E9CD91 22%, #8E6A33 48%, #F3DEAC 70%, #A17B3F 100%) border-box;
  box-shadow: inset 0 1.4cqw 3cqw rgba(0,0,0,.85), inset 0 -.6cqw 0 rgba(255,230,170,.08), 0 0 0 .5cqw rgba(0,0,0,.55); }
.why2__badge::before { content: ''; position: absolute; inset: 0 0 52% 0; background: linear-gradient(180deg, rgba(255,255,255,.07), transparent); pointer-events: none; }
.why2__badge b { position: relative; font: 800 18cqw/1 var(--f-display); letter-spacing: -.02em; -webkit-background-clip: text; background-clip: text; color: transparent;
  background-image: linear-gradient(180deg, #FFF4D6 0%, #F3DEAC 30%, #C9A45C 52%, #8E6A33 62%, #E9CD91 100%); filter: drop-shadow(0 .5cqw 0 rgba(0,0,0,.7)); }
.why2__badge::after { content: ''; position: absolute; inset: -20% -60%; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255,246,222,.32) 50%, transparent 58%); translate: -70% 0; }
.why2__scene.is-plq .why2__badge::after { animation: why2-badge 11s ease-in-out 2.4s infinite; }
.why2__p75 .why2__badge::after { animation-delay: 2.9s !important; }
@keyframes why2-badge { 0%, 82% { translate: -70% 0; } 100% { translate: 70% 0; } }
@media (prefers-reduced-motion: reduce) { .why2__badge::after { display: none; } }
/* #why2: таймер — часть пьедестала. Вставка на рендере — трапеция (стенка наклонена, сверху ≈ на 11% уже),
   поэтому стекло с цифрами наклонено назад по нижнему краю; перспектива в cqw сцены — одинаково на любой ширине */
.why2__scene { container-type: inline-size; }
.why2__plate { left: 16%; width: 67.6%; top: 74%; height: 12.4%; transform-origin: 50% 100%; transform: perspective(52cqw) rotateX(25deg); }
.why2__plate::before { inset: 0; border-radius: 1.6cqw; }
/* #why2: читаемость таймера на наклонённой табличке — цифры крупнее и светлее, подписи контрастнее, двоеточия компактнее */
.why2__plate { gap: .8cqw; }
.why2__lab { font-size: max(9px, 2.2cqw); color: #E6C789; }
.why2__plate .timer { gap: 1cqw; }
.why2__plate .timer__num { font-size: 10.5cqw; padding: 1cqw 1.2cqw; color: #FFF3D6; -webkit-text-fill-color: #FFF3D6;
  text-shadow: 0 0 2cqw rgba(241,209,138,.55), 0 1px 0 rgba(0,0,0,.9); }
.why2__plate .timer__lab { margin-top: .9cqw; font-size: max(9px, 2.1cqw); color: #E8D7B0; letter-spacing: .12em; }
.why2__plate .timer__sep { font-size: 5cqw; margin-top: -4.4cqw; }
@media (max-width: 560px) { /* узкая табличка: подписи не должны упираться в нижний край рамки */
  .why2__lab, .why2__plate .timer__lab { font-size: 8px; }
  .why2__lab { letter-spacing: .12em; } /* «До конца распродажи осталось N дней» помещается и на 360px */
  .why2__plate .timer__num { font-size: 9.8cqw; }
}
/* #why2: таблички скидок — ссылки на тарифы. Наведение: табличка приподнимается и светится, выезжает превью тарифа; клик — прокрутка к карточке с пульсом */
a.why2__p70, a.why2__p75 { display: block; pointer-events: auto; cursor: pointer; text-decoration: none; color: inherit; }
.why2__badge { transition: translate .35s cubic-bezier(.2,.7,.2,1), scale .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
a.why2__p70:hover .why2__badge, a.why2__p75:hover .why2__badge, a.why2__p70:focus-visible .why2__badge, a.why2__p75:focus-visible .why2__badge {
  translate: 0 -5%; scale: 1.07;
  box-shadow: inset 0 1.4cqw 3cqw rgba(0,0,0,.85), inset 0 -.6cqw 0 rgba(255,230,170,.08), 0 0 0 .5cqw rgba(0,0,0,.55), 0 0 7cqw rgba(241,209,138,.5); }
a.why2__p70:focus-visible, a.why2__p75:focus-visible { outline: none; }
a.why2__p70:focus-visible .why2__badge, a.why2__p75:focus-visible .why2__badge { outline: 2px solid #F3DEAC; outline-offset: 3px; }
.why2__peek { position: absolute; top: 86%; left: 6%; z-index: 6; display: grid; gap: 4px; padding: 10px 14px; border-radius: 10px; white-space: nowrap; pointer-events: none;
  background: rgba(12,11,10,.96); border: 1px solid rgba(201,164,92,.5); box-shadow: 0 16px 36px -14px rgba(0,0,0,.95);
  font: 600 12px/1.3 var(--f-text); color: #F3DEAC; opacity: 0; translate: 0 -8px; transition: opacity .3s ease, translate .35s cubic-bezier(.2,.7,.2,1); }
.why2__p75 .why2__peek { left: auto; right: 6%; }
.why2__peek small { font: 700 10px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: #C9A45C; }
.why2__peek b { font: 800 15px/1.2 var(--f-display); letter-spacing: -.01em; color: #F5F5F5; }
@media (hover: hover) and (pointer: fine) { a.why2__p70:hover .why2__peek, a.why2__p75:hover .why2__peek { opacity: 1; translate: 0 0; } }
a.why2__p70:focus-visible .why2__peek, a.why2__p75:focus-visible .why2__peek { opacity: 1; translate: 0 0; }
/* карточка тарифа, к которой привела табличка: 2 вспышки золотой рамки */
.tariff.is-spot { animation: tariff-spot 2.6s ease-out; }
@keyframes tariff-spot { 0%, 30%, 60% { box-shadow: 0 0 0 2px #F3DEAC, 0 0 48px rgba(241,209,138,.45); } 15%, 45% { box-shadow: 0 0 0 1px rgba(243,222,172,.35), 0 0 14px rgba(241,209,138,.12); } 100% { box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .why2__badge, .why2__peek { transition: none; } .tariff.is-spot { animation: none; outline: 2px solid #F3DEAC; } }
/* самый выгодный тариф блока (is-max), ПК: по рамке обегает золотой блик, карточка светится наружу;
   скидка → выгода → кнопка вспыхивают по очереди — взгляд идёт к заявке */
@property --ring { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tariff__ring { position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .4s ease;
  background: conic-gradient(from var(--ring), transparent 0 62%, rgba(201,164,92,.6) 74%, #FFF4D6 84%, rgba(201,164,92,.6) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (hover: hover) and (pointer: fine) {
  .tariff.is-max:hover .tariff__ring { opacity: 1; animation: tariff-ring 3.2s linear infinite; }
  .tariff.is-max:hover { box-shadow: 0 0 0 1px rgba(243,222,172,.35), 0 0 60px -10px rgba(241,209,138,.35), 0 50px 90px -40px rgba(0,0,0,.95); }
  .tariff.is-max:hover .tariff__off { animation: max-flash .9s ease-out; }
  .tariff.is-max:hover .tariff__gain { animation: max-chip .9s .25s ease-out; }
  .tariff.is-max:hover .tariff__btn { animation: max-btn 1s .5s ease-out; }
}
@keyframes tariff-ring { to { --ring: 360deg; } }
@keyframes max-flash { 40% { filter: brightness(1.45) drop-shadow(0 0 14px rgba(241,209,138,.55)); } }
@keyframes max-chip { 40% { box-shadow: 0 0 0 1px rgba(243,222,172,.8), 0 0 18px rgba(241,209,138,.55); filter: brightness(1.25); } }
@keyframes max-btn { 40% { box-shadow: 0 0 0 1px rgba(255,244,214,.7), 0 0 30px rgba(241,209,138,.6); filter: brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { .tariff.is-max:hover .tariff__ring, .tariff.is-max:hover .tariff__off, .tariff.is-max:hover .tariff__gain, .tariff.is-max:hover .tariff__btn { animation: none; } }
/* лучший тариф, усиление: блик рамки толще, ярче и со светящимся шлейфом, карточка выше соседних, скидка «выпрыгивает» */
.tariff__ring { inset: -2px; padding: 2.5px; background: conic-gradient(from var(--ring), transparent 0 55%, rgba(201,164,92,.7) 68%, #FFF8E6 80%, #F3DEAC 86%, rgba(201,164,92,.7) 93%, transparent 100%); }
.tariff__ring::after { content: ''; position: absolute; inset: -6px; border-radius: inherit; background: inherit; filter: blur(10px); opacity: .75; }
@media (hover: hover) and (pointer: fine) {
  .tariff.is-max:hover .tariff__ring { animation-duration: 2.2s; }
  .tariff.is-max.is-hover { --lift: -12px; }
  .tariff.is-max:hover { box-shadow: 0 0 0 1px rgba(243,222,172,.6), 0 0 90px -8px rgba(241,209,138,.5), 0 60px 100px -40px rgba(0,0,0,.95); }
  .tariff.is-max:hover .tariff__badge { animation: max-badge 1.2s ease-out; }
}
@keyframes max-flash { 35% { filter: brightness(1.6) drop-shadow(0 0 22px rgba(241,209,138,.75)); scale: 1.1; } 100% { scale: 1; } }
@keyframes max-badge { 30% { scale: 1.1; box-shadow: 0 0 0 1px #FFF4D6, 0 0 30px rgba(241,209,138,.8); } }
.tariff__off { transform-origin: 0 60%; }
/* #why2 · финальная сборка типографики и ритма: подзаголовок в две ступени («через год» в тени, «уже сегодня» — золото, как «СЕЙЧАС»),
   шкала с понятной подписью и по ширине колонки, отступы левой колонки одним шагом */
.why2__head { gap: clamp(18px, 1.6vw, 24px); }
.why2__lead { max-width: 600px; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.45; text-wrap: pretty; }
.why2__lead-a { display: block; color: #8d8d93; font-weight: 500; }
.why2__lead-b { display: block; color: #F5F5F5; font-weight: 600; }
.why2__lead em { font-style: normal; font-weight: 700; -webkit-background-clip: text; background-clip: text; color: transparent;
  background-image: linear-gradient(180deg, #FFF4D6 0%, #F3DEAC 35%, #C9A45C 60%, #E9CD91 100%); }
.why2__cta { gap: clamp(28px, 2.6vw, 40px); }
.why2__scale { width: min(100%, 560px); gap: 10px; }
.why2__tf { display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: #8d8d93; }
.why2__tf b { padding: 4px 7px; border-radius: 5px; border: 1px solid rgba(201,164,92,.45); font: 700 11px/1 var(--f-text); letter-spacing: .08em; color: #C9A45C; }
.why2__dates { letter-spacing: .12em; }
/* #why2 · преимущества 01–04: отделены от сцены воздухом и общей линией, номера — крупные золотые «приборные» цифры, описания на тон тише */
.why2 .why__args { margin-top: clamp(56px, 6vw, 96px); padding-top: clamp(32px, 3vw, 48px); border-top: 1px solid rgba(255,255,255,.08); }
.why2 .why__num { font: 800 clamp(22px, 1.8vw, 28px)/1 var(--f-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-image: linear-gradient(180deg, #FFF4D6 0%, #F3DEAC 35%, #C9A45C 60%, #E9CD91 100%); }
.why2 .why__arg p { color: #a9a9af; max-width: 34ch; }
/* футер — минимализм: строка «логотип · навигация · Наверх», под линией документы в строку, дисклеймер ООО «МИР» мелко, © */
.foot { position: relative; background: #070708; }
.foot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,164,92,.6) 30%, #F3DEAC 50%, rgba(201,164,92,.6) 70%, transparent); }
.foot__wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px clamp(24px, 3vw, 48px); padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.07); }
.foot__docs a { color: #c4c4c9; text-decoration: none; background: linear-gradient(#F3DEAC, #F3DEAC) 0 100% / 0 1px no-repeat; transition: color .2s ease, background-size .3s ease; }
.foot__docs a:hover, .foot__docs a:focus-visible { color: #F3DEAC; background-size: 100% 1px; }
.foot__docs { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; }
.foot__docs li + li::before { content: '·'; margin: 0 12px; color: #5a5a60; }
.foot__docs a { color: #9a9aa0; }
.foot__risk { color: #66666c; font-size: 11.5px; line-height: 1.6; max-width: none; }
.foot__copy { color: #7d7e83; font-size: 12.5px; white-space: normal; }
.foot__top { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(201,164,92,.4); color: #E6C789; font: 600 13px/1 var(--f-text); text-decoration: none; transition: border-color .2s ease, background .2s ease; }
.foot__top:hover, .foot__top:focus-visible { border-color: #F3DEAC; background: rgba(201,164,92,.1); }
@media (max-width: 760px) {
  .foot__docs { flex-direction: column; gap: 10px; }
  .foot__docs li + li::before { content: none; }
}
/* #why2, планшет вертикально: часы — главный визуал экрана, крупнее (по центру колонки) */
@media (min-width: 761px) and (max-width: 900px), (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .why2__scene { width: min(100%, 560px); }
}

/* ===== Плавающая консультация (логика — consult.js, перенесена с marafon-bf-live): справа внизу поверх страницы.
   Кнопка — золотая «таблетка» как основные CTA, мигающая точка «онлайн»; панель — тёмная с золотой рамкой, как плашка помощи ===== */
.consult { position: fixed; right: 20px; bottom: 24px; z-index: 70; }
.consult-fab { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 20px 12px 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 14.5px/1.25 var(--f-text); color: #1a140a; text-align: left;
  background: linear-gradient(180deg, #F3E5C2 0%, #DCC08A 30%, #C3A065 65%, #A4824A 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(60,40,10,.3), 0 14px 32px -12px rgba(0,0,0,.9), 0 0 0 1px rgba(255,244,214,.25);
  animation: consult-pulse 2.8s ease-in-out infinite; transition: transform .2s ease, filter .2s ease; }
.consult-fab:hover { transform: translateY(-2px); filter: brightness(1.06); }
.consult-fab:active { transform: scale(.98); }
.consult-fab:focus-visible { outline: 2px solid #F3DEAC; outline-offset: 3px; }
.consult-fab svg { flex: none; }
.consult-fab-label { max-width: 230px; }
.consult-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #1a140a; flex: none; animation: consult-blink 1.6s ease-in-out infinite; }
@keyframes consult-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes consult-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(60,40,10,.3), 0 14px 32px -12px rgba(0,0,0,.9), 0 0 0 1px rgba(255,244,214,.25); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(60,40,10,.3), 0 14px 32px -12px rgba(0,0,0,.9), 0 0 0 6px rgba(241,209,138,.14), 0 0 28px rgba(241,209,138,.35); } }
.consult-panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: 300px; max-width: calc(100vw - 32px); padding: 22px 20px 20px; border-radius: 18px;
  background: radial-gradient(80% 60% at 0% 0%, rgba(201,164,92,.12), transparent 60%) padding-box, linear-gradient(180deg, #17171a, #0f0f11) padding-box,
              linear-gradient(135deg, rgba(241,209,138,.7), rgba(201,164,92,.2) 40%, rgba(255,255,255,.06) 70%, rgba(201,164,92,.35)) border-box;
  border: 1px solid transparent; box-shadow: 0 30px 70px -24px rgba(0,0,0,.95);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transform-origin: 100% 100%; transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility .25s; }
.consult.open .consult-panel { opacity: 1; visibility: visible; transform: none; }
.consult-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; background: none; border: 0; font-size: 22px; line-height: 1; color: #8d8d93; cursor: pointer; }
.consult-close:hover, .consult-close:focus-visible { color: #F3DEAC; }
.consult-kick { margin: 0 0 8px; font: 600 11px/1 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: #C9A45C; }
.consult-name { margin: 0 0 6px; padding-right: 26px; font: 800 16px/1.3 var(--f-display); color: #F5F5F5; }
.consult-hint { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: #a9a9af; }
.consult-links { display: grid; gap: 10px; }
.consult-link { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 16px; border-radius: 12px; text-decoration: none;
  font: 700 14px/1 var(--f-text); color: #F5F5F5; background: rgba(255,255,255,.03); border: 1px solid rgba(201,164,92,.4); transition: border-color .2s ease, background .2s ease, color .2s ease; }
.consult-link:hover, .consult-link:focus-visible { border-color: #F3DEAC; background: rgba(201,164,92,.1); color: #F3DEAC; }
.consult-link img, .consult-link svg { flex: none; border-radius: 50%; }
@media (max-width: 760px) { /* телефон: только круглая иконка, панель над ней */
  .consult { right: 14px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .consult-fab { padding: 15px; min-height: 0; }
  .consult-fab .consult-fab-label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .consult-fab, .consult-dot { animation: none; } .consult-panel { transition: none; } }
/* телефон: плашки −70% / −75% симметрично — видимый край каждой на линии поля 16px (не уходят за экран; 04.11) */
@media (max-width: 760px) { .why2__p70 { left: -4.2%; } .why2__p75 { right: -4.2%; } }
.tariff__hl { font-weight: 700; color: var(--gold-hi); white-space: nowrap; } /* ключевые цифры в составе тарифов (04.11) */

/* ===== Закрытые тарифы (05.11): PRO и Лайт с 17.11 10:00 («Набор закрыт»), все с 21.11 («Акция завершена») =====
   места в закрытых карточках не показываем; закрыт раньше срока («Набор закрыт» / «Мест нет») — карточка затемнена, поверх плашка (пилюля с золотыми линиями); после окончания акции плашек нет — карточки приглушены, на кнопках «Акция завершена» */
.tariff:not(.is-active) .tariff__seats { display: none; }
.tariff__lock { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; gap: 14px; padding: 0 22px; border-radius: inherit; pointer-events: none;
  background: rgba(8,8,10,.6); -webkit-backdrop-filter: grayscale(1) blur(1.5px); backdrop-filter: grayscale(1) blur(1.5px); }
.tariff__lock::before, .tariff__lock::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #E9CD91); box-shadow: 0 0 8px rgba(241,209,138,.5); }
.tariff__lock::after { background: linear-gradient(270deg, transparent, #E9CD91); }
.tariff__lock-p { flex: none; padding: 14px 22px; border-radius: 999px; border: 1px solid rgba(233,205,145,.65); background: rgba(12,11,9,.88);
  box-shadow: 0 0 40px -8px rgba(241,209,138,.35), inset 0 1px 0 rgba(255,255,255,.06); }
.tariff__lock-t { margin: 0; white-space: nowrap; font: 800 clamp(16px, 1.45vw, 21px)/1 'Unbounded', var(--f-display); letter-spacing: .06em; text-transform: uppercase;
  -webkit-background-clip: text; background-clip: text; color: transparent; background-image: linear-gradient(180deg, #FFF4D6 0%, #F3DEAC 35%, #C9A45C 58%, #E9CD91 100%); }
.tariff:is(.is-closed, .is-sold_out) { border-color: rgba(255,255,255,.08); }
.tariff:is(.is-closed, .is-sold_out) .tariff__badge { filter: grayscale(1) brightness(.55); }
.tariff--best:is(.is-closed, .is-sold_out), .tariff--top:is(.is-closed, .is-sold_out) { background: linear-gradient(180deg, #1e1d1f 0%, #151517 100%) padding-box, linear-gradient(160deg, #3b3a3c, #222224 60%, #3b3a3c) border-box; }
.tariff:is(.is-closed, .is-sold_out) .tariff__ring { display: none; }
.tariff:is(.is-closed, .is-sold_out), .tariff:is(.is-closed, .is-sold_out):hover { box-shadow: 0 30px 70px -40px rgba(0,0,0,.9) !important; }
/* после окончания акции (html.sale-ended ставит shared.js): кнопки-призывы не реагируют на клик и наведение, внешне те же, 05.11 */
html.sale-ended .btn:not(.modal__submit), html.sale-ended [data-crm] { pointer-events: none; cursor: default; }

/* ===== Форма Битрикс24 в окне заявки (09.11): inline-форма 1997; запасной путь — та же форма страницей + текст для «Комментария» ===== */
.crm-b24 { min-height: 240px; }
.crm-b24__lbl { margin: 0 0 6px; font: 600 13px/1.35 var(--f-text); color: var(--muted); }
.crm-b24__calc { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(201,164,92,.35); background: rgba(201,164,92,.06);
  white-space: pre-wrap; font: 500 13px/1.45 var(--f-text); color: #F3DEAC; }
.crm-b24__frame { display: block; width: 100%; height: 560px; border: 0; border-radius: 12px; background: #fff; }
.crm-b24 a { color: #E6C789 !important; } /* ссылки на соглашения в форме Битрикс24 — золото вместо синего */

/* 10.11: ручная торговля по группам — групповое обучение / индивидуальное сопровождение / клуб (перенесено из drafts/groups.css) */
.tariffs__grid[data-groups] { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(64px, 7vw, 112px); } /* 10.11: больше воздуха между группами — заголовок держится за свои карточки */
.tariffs__group { display: grid; gap: clamp(20px, 1.8vw, 28px); }
/* вариант A (10.11): заголовок группы — Unbounded, тёплая платина, золотая линия вправо */
.tariffs__group-t { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); margin: 0; font: 800 clamp(20px, 2.3vw, 36px)/1.05 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; color: var(--plat); }
.tariffs__group-t span { -webkit-background-clip: text; background-clip: text; color: transparent; background-image: linear-gradient(180deg, #FFFFFF 0%, #F1EFEB 45%, #B9B6AF 62%, #F1EFEB 100%); }
.tariffs__group-t::after { content: ''; flex: 1; min-width: 32px; height: 1px; background: linear-gradient(90deg, rgba(201,164,92,.6), rgba(201,164,92,0)); }
/* ПК: две групповые карточки широкие — внутри две колонки, чтобы текст не растягивался */
@media (min-width: 1101px) {
  .tariffs__group--group .tariff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto auto auto auto 1fr; column-gap: clamp(24px, 2.4vw, 40px); row-gap: 14px; align-items: start; }
  .tariffs__group--group .tariff__head { grid-column: 1 / -1; }
  .tariffs__group--group .tariff__name { grid-column: 1; grid-row: 2; }
  .tariffs__group--group .tariff__price { grid-column: 1; grid-row: 3; }
  .tariffs__group--group .tariff__seats { grid-column: 1; grid-row: 4; }
  .tariffs__group--group .tariff__foot { grid-column: 1; grid-row: 5; margin-top: 0; align-self: end; }
  .tariffs__group--group .tariff__points { grid-column: 2; grid-row: 2 / -1; margin: 0; padding-left: clamp(24px, 2.4vw, 40px); border-left: 1px solid rgba(255,255,255,.07); align-self: stretch; align-content: start; }
}
.tariffs__sub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 2.2vw, 32px) clamp(16px, 1.6vw, 24px); padding-top: 12px; }
.tariffs__group--group .tariffs__sub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .tariffs__sub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .tariffs__sub, .tariffs__group--group .tariffs__sub { grid-template-columns: minmax(0, 1fr); } }
/* планшет: 3 индивидуальных в 2 колонках — VIP на всю ширину, внутри две колонки (как Эксперт+ у советников) */
@media (min-width: 761px) and (max-width: 1100px) {
  .tariffs__group--ind .tariff:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 16px; align-items: start; }
  .tariffs__group--ind .tariff:last-child .tariff__head { grid-column: 1 / -1; }
  .tariffs__group--ind .tariff:last-child .tariff__name { grid-column: 1; grid-row: 2; }
  .tariffs__group--ind .tariff:last-child .tariff__price { grid-column: 1; grid-row: 3 / 5; }
  .tariffs__group--ind .tariff:last-child .tariff__seats { grid-column: 2; grid-row: 2; }
  .tariffs__group--ind .tariff:last-child .tariff__points { grid-column: 2; grid-row: 3; margin: 0; }
  .tariffs__group--ind .tariff:last-child .tariff__foot { grid-column: 2; grid-row: 4; margin-top: 0; }
  /* клуб: пункты налезали на места (баг есть и на основной странице) — пункты строкой 3, места строкой 4 */
  .tariff--club .tariff__points { grid-row: 3; }
}