/* Шаблон лендингов Tyrian: общие стили.
 *
 * Основа взята из разбора витринной страницы (../../okx-vip): холст 1440, чёрные панели в
 * шахматном порядке с нахлёстом, панели во всю ширину окна, светлый неподвижный фон,
 * «слоновая кость» на чёрном, одна фиолетовая кнопка. Здесь только то, что нужно любому
 * лендингу продукта: темы, шапка, сетка, панели, текст, кнопки, вопросы, финал и подвал.
 * Примеры интерфейса конкретного продукта живут в стилях его страницы.
 *
 * Темы: data-theme="light" (по умолчанию, светлый фон и чёрные панели) и "dark"
 * (чёрный фон, панели отделены тонкой линией). Все цвета берутся из переменных ниже.
 */

:root {
  --gap: 24px;  /* промежуток между панелями (02.11: было 2 px, блоки стояли «в прилипку») */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);

  /* На чёрных панелях: одинаково в обеих темах */
  --ivory: rgb(225 214 198);
  --ivory-2: rgb(225 214 198 / 0.72);
  --ivory-3: rgb(225 214 198 / 0.5);
  --ivory-4: rgb(225 214 198 / 0.32);
  --line: rgb(225 214 198 / 0.11);
  --line-2: rgb(225 214 198 / 0.2);
  --accent: #a06aff;
  --accent-soft: rgb(160 106 255 / 0.16);
  --accent-ink: #c4a3ff;
  --up: #63c99a;
  --down: #e9868a;
  --glow: rgb(160 106 255 / 0.3);

  /* Страница вокруг панелей: светлая тема */
  --page: #8e877d;
  --page-ink: #0d0d0d;
  --page-ink-2: rgb(13 13 13 / 0.66);
  --panel: #000;
  --panel-edge: transparent;
  --head: rgb(0 0 0 / 0.86);
  --head-line: rgb(255 255 255 / 0.06);
  --gutter: 69px;
}

:root[data-theme='dark'] {
  --page: #000;
  --page-ink: rgb(225 214 198);
  --page-ink-2: rgb(225 214 198 / 0.6);
  --panel: #040405;
  --panel-edge: rgb(255 255 255 / 0.075);
  --head: rgb(0 0 0 / 0.8);
}

* { box-sizing: border-box; }
html { background: var(--page); color-scheme: light; scroll-padding-top: 72px; scroll-behavior: smooth; }
html.is-calm { scroll-behavior: auto; }  /* ?still=1 и «меньше движения»: класс ставит landing.js */
:root[data-theme='dark'] { color-scheme: dark; }
body { margin: 0; font: 400 14px/1.4 var(--font); color: var(--page-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
main { overflow-x: clip; }
main[data-enter] { animation: lp-enter 0.7s var(--ease) both; }
@keyframes lp-enter { from { opacity: 0; transform: translateY(24px); } }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Неподвижный фон ------------------------------------------------------------------ */
.lp-bg { position: fixed; inset: 0; z-index: -1; transition: opacity 0.6s var(--ease); }
.lp-bg::before, .lp-bg::after { content: ''; position: absolute; inset: 0; transition: opacity 0.8s var(--ease); }
.lp-bg::before {
  background:
    radial-gradient(60% 55% at 18% 10%, rgb(238 233 224 / 0.92), transparent 70%),
    radial-gradient(55% 60% at 90% 94%, rgb(88 82 75 / 0.78), transparent 72%),
    radial-gradient(45% 40% at 80% 16%, rgb(198 190 178 / 0.8), transparent 70%),
    linear-gradient(140deg, #bbb4a8, #8e877d 52%, #6b655d);
}
.lp-bg::after {
  background:
    radial-gradient(70% 50% at 50% 118%, rgb(96 38 197 / 0.22), transparent 70%),
    radial-gradient(46% 42% at 16% 12%, rgb(225 214 198 / 0.075), transparent 70%),
    radial-gradient(36% 36% at 22% 40%, rgb(96 38 197 / 0.12), transparent 70%),
    #000;
  opacity: 0;
}
:root[data-theme='dark'] .lp-bg::before { opacity: 0; }
:root[data-theme='dark'] .lp-bg::after { opacity: 1; }
.lp-grain { position: absolute; inset: 0; opacity: 0.22; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme='dark'] .lp-grain { opacity: 0.08; mix-blend-mode: screen; }

/* ---- Шапка: прилипает, под ней размытие ---------------------------------------------- */
.lp-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px; color: #fafafa; background: var(--head); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 -1px 0 var(--head-line); white-space: nowrap; }
.lp-brand { display: flex; align-items: center; gap: 9px; margin-right: 20px; font: 700 16px/1 var(--font); letter-spacing: -0.01em; text-decoration: none; }
.lp-brand svg { width: 22px; height: 22px; }
.lp-brand svg.tt-logo, .lp-foot svg.tt-logo { width: 18px; height: 23px; }
.lp-nav { display: flex; gap: 2px; margin-right: auto; overflow: hidden; }
.lp-nav a { padding: 8px 10px; border-radius: 8px; font: 500 14px/16px var(--font); color: rgb(250 250 250 / 0.72); text-decoration: none; transition: color 0.16s, background 0.16s; }
.lp-nav a:hover { color: #fff; background: rgb(255 255 255 / 0.06); }
.lp-nav a { position: relative; }
.lp-nav a::after { content: ''; position: absolute; right: 10px; bottom: 2px; left: 10px; height: 2px; border-radius: 1px; background: var(--accent); box-shadow: 0 0 8px var(--accent); opacity: 0; transform: scaleX(0.3); transition: opacity 0.3s, transform 0.4s var(--ease); }
.lp-nav a[aria-current='true'] { color: #fff; }
.lp-nav a[aria-current='true']::after { opacity: 1; transform: none; }
.lp-mark { padding: 3px 7px; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 4px; font: 600 10px/14px var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.62); }
.lp-seg { display: inline-flex; padding: 2px; border-radius: 999px; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.lp-seg button { min-width: 34px; height: 28px; padding: 0 9px; border: 0; border-radius: 999px; background: none; font: 600 11px/1 var(--font); letter-spacing: 0.06em; color: rgb(255 255 255 / 0.56); transition: color 0.16s, background 0.2s var(--ease); }
.lp-seg button:hover { color: #fff; }
.lp-seg button[aria-pressed='true'] { color: #000; background: #f2ede6; }
.lp-icon-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: rgb(255 255 255 / 0.8); background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); transition: color 0.16s, background 0.16s; }
.lp-icon-btn:hover { color: #fff; background: rgb(255 255 255 / 0.12); }
.lp-icon-btn svg { width: 16px; height: 16px; }
.lp-theme .i-sun { display: none; }
:root[data-theme='dark'] .lp-theme .i-sun { display: block; }
:root[data-theme='dark'] .lp-theme .i-moon { display: none; }
.lp-top .cta { height: 36px; min-width: 0; padding: 0 16px; font-size: 14px; }
/* Меню разделов для окон у́же 1200: лист под шапкой */
.lp-menu-btn { display: none; }
.lp-menu-btn path { transition: d 0.3s var(--ease); }
.lp-menu-btn[aria-expanded='true'] path { d: path('M6 6l12 12M18 6 6 18'); }
.lp-sheet { position: absolute; top: 100%; right: 12px; left: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px; border-radius: 18px; background: #050506; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 48px rgb(0 0 0 / 0.5); animation: lp-sheet 0.3s var(--ease) both; }
.lp-sheet[hidden] { display: none; }
@keyframes lp-sheet { from { opacity: 0; transform: translateY(-8px); } }
.lp-sheet a { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 14px; border-radius: 12px; font: 500 17px/1 var(--font); color: #fafafa; text-decoration: none; }
.lp-sheet a:hover, .lp-sheet a[aria-current='true'] { background: rgb(255 255 255 / 0.07); }
.lp-sheet a::after { content: ''; width: 7px; height: 7px; border: solid rgb(255 255 255 / 0.4); border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); }
.lp-top .lp-sheet .cta { display: inline-flex; height: 48px; margin-top: 6px; width: 100%; font-size: 16px; }

/* ---- Холст 1440 и ряды --------------------------------------------------------------- */
.canvas { position: relative; max-width: 1440px; margin: 0 auto; padding: 80px var(--gutter) 96px; }
.row { position: relative; display: flex; gap: var(--gap); margin-top: var(--gap); }
/* Ряд с нахлёстом (pull-200/300) это прозрачная коробка поверх низа соседней панели: сам ряд не ловит нажатия,
   нажимаются только панели. Финал поднят на 200 и накрывает последний вопрос: мышь получают только его кнопки. */
.canvas > .row, .row { pointer-events: none; }
.row > .pn { pointer-events: auto; }
.row-right { justify-content: flex-end; }
.row-gap { margin-top: calc(var(--gap) * 3); }
.pull-200 { margin-top: -200px; }
.pull-300 { margin-top: -300px; }
.row-full { width: 100vw; margin-left: calc(50% - 50vw); }

/* Панель: чёрная, радиус 30. Прозрачность, подъём и размытие содержимого задаёт прокрутка.
   Обрезка clip, а не hidden: с hidden панель становится контейнером прокрутки, «прилипание» (sticky) внутри неё
   не работает, а фокус или прокрутка к кнопке сдвигали содержимое вбок на запас слоя света. */
.pn { position: relative; flex: none; overflow: clip; width: calc(50% - var(--gap) / 2); border-radius: 30px; color: var(--ivory); background: var(--panel); box-shadow: inset 0 0 0 1px var(--panel-edge); will-change: transform, opacity; }
.pn-in { position: relative; z-index: 2; padding: 56px; transition: filter 0.7s var(--ease); will-change: transform, filter; }
.pn.is-soft .pn-in { filter: blur(10px) brightness(1.24); }
.pn.span { width: 100%; }
.pn.wide { width: 100%; border-radius: 30px; }
.row-full { padding: 0 var(--gap); }
.pn.wide > .pn-in { max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Свет под курсором: пятно идёт за указателем, ярче всего у самой точки. */
.pn-glow { position: absolute; inset: -34%; z-index: 0; background: radial-gradient(circle at var(--gx, 36%) var(--gy, 28%), var(--glow), transparent 34%); opacity: 0; transform: scale(0.8); transition: opacity 0.6s var(--ease), transform 0.9s var(--ease); pointer-events: none; }
.pn:hover .pn-glow { opacity: 1; transform: none; }
/* На сенсорных экранах «наведение» залипает после касания и заливает панель фиолетовым: свет только для мыши */
@media (hover: none) { .pn-glow { display: none; } }

/* ---- Текст на панелях ----------------------------------------------------------------- */
.eyebrow { display: flex; align-items: center; gap: 10px; font: 600 12px/16px var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-2); }
.eyebrow b { font-weight: 600; color: var(--ivory); }
.eyebrow i { width: 18px; height: 1px; background: var(--ivory-3); }
.pn h2 { font: 500 56px/1.06 var(--font); letter-spacing: -0.03em; text-wrap: balance; }
.pn h2.big { font-size: 62px; }
.pn h2.mid { font-size: 48px; }
.pn p.lead, .pn .lead { font: 400 20px/28px var(--font); color: var(--ivory-2); text-wrap: pretty; }
.eyebrow + h2 { margin-top: 32px; }
h2 + .lead { max-width: 520px; margin-top: 21px; }
.fine { font: 400 13px/18px var(--font); color: rgb(225 214 198 / 0.56); }

/* Короткая надпись прописными над числом, число нежирное с единицей рядом (манера MONOLITH) */
.stat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.stat small { font: 600 12px/15px var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-3); }
.stat strong { font: 400 30px/34px var(--font); letter-spacing: -0.03em; color: var(--ivory); font-variant-numeric: tabular-nums; }
.stat strong em { margin-left: 4px; font-style: normal; font-size: 14px; letter-spacing: 0; color: var(--ivory-3); }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 4px; font: 600 11px/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ivory-2); white-space: nowrap; }

/* ---- Кнопки --------------------------------------------------------------------------- */
/* Главная: «пилюля» 56 с градиентом приложения (#8A2FFF → #0D0127) и бликом под пальцем */
.cta {
  position: relative; overflow: hidden; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 10px;
  min-width: 128px; height: 56px; padding: 0 26px; border: 0; border-radius: 60px; color: #fff; text-decoration: none;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, #8a2fff 0%, #6026c5 25%, #4a21a7 37.5%, #351c8a 50%, #210f59 75%, #170840 87.5%, #0d0127 100%);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.34), inset 0 -1px 2px rgb(0 0 0 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 12px 28px -14px rgb(138 47 255 / 0.9);
  font: 500 17px/20px var(--font); white-space: nowrap; transition: transform 0.24s var(--spring), filter 0.16s;
}
.cta::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 0%), rgb(255 255 255 / 0.28), transparent 60%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.cta:hover { filter: brightness(1.1); }
.cta:hover::after { opacity: 1; }
.cta:active { transform: scale(0.97); }
.cta svg { width: 16px; height: 16px; }
.cta.sm { height: 44px; min-width: 0; padding: 0 20px; font-size: 15px; }
/* Тихая: чёрная выпуклая, свет только по канту */
.ghost { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; color: var(--ivory); background: linear-gradient(#141416, #050506); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 0 0 1px rgb(255 255 255 / 0.09), 0 6px 14px -8px #000; font: 500 14px/16px var(--font); white-space: nowrap; transition: transform 0.2s var(--spring), box-shadow 0.2s; }
.ghost:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(160 106 255 / 0.5), 0 6px 18px -8px rgb(138 47 255 / 0.7); }
.ghost:active { transform: scale(0.97); }
.ghost.lg { height: 56px; padding: 0 24px; font-size: 17px; }  /* рядом с главной кнопкой: одна высота */
.ghost svg { width: 14px; height: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--ivory-2); font: 500 13px/1 var(--font); white-space: nowrap; transition: color 0.16s, border-color 0.16s, background 0.16s; }
.chip:hover { color: var(--ivory); border-color: rgb(225 214 198 / 0.36); }
.chip[aria-pressed='true'], .chip.is-on { color: var(--ivory); border-color: rgb(160 106 255 / 0.7); background: var(--accent-soft); }

/* ---- Строка-девиз рядом с панелью ---------------------------------------------------- */
.side, .intro, .final h2, .final-act p { transition: color 0.5s var(--ease); }
.side { pointer-events: none; position: relative; z-index: 10; display: flex; flex: none; justify-content: center; width: calc(50% - var(--gap) / 2); font: 500 20px/28px var(--font); text-align: center; color: var(--page-ink); }
.side p { max-width: 460px; text-wrap: balance; }
.side small { display: block; margin-top: 10px; font: 400 15px/22px var(--font); color: var(--page-ink-2); }
.side.mid { align-items: center; padding: 0 40px; }
.side.low { align-items: flex-end; padding: 0 60px 200px; }
.side.high { align-items: flex-start; padding: 140px 60px 0; }

/* ---- Вопросы ---------------------------------------------------------------------------- */
.faq-list { border-bottom: 1px solid var(--line-2); }
.faq-item { border-top: 1px solid var(--line-2); }
.faq-item > button { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 26px 0; border: 0; background: none; text-align: left; font: 500 18px/24px var(--font); color: var(--ivory); }
.faq-item > button i { position: relative; flex: none; width: 14px; height: 14px; margin-right: 6px; }
.faq-item > button i::before, .faq-item > button i::after { content: ''; position: absolute; top: 6px; left: 0; width: 14px; height: 1.6px; border-radius: 1px; background: currentColor; transition: transform 0.3s var(--ease); }
.faq-item > button i::after { transform: rotate(90deg); }
.faq-item > button[aria-expanded='true'] i::after { transform: rotate(0); }
.faq-item > div { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.faq-item > button[aria-expanded='true'] + div { grid-template-rows: 1fr; }
.faq-item > div > p { overflow: hidden; max-width: 760px; font: 400 16px/25px var(--font); color: var(--ivory-2); }
.faq-item > button[aria-expanded='true'] + div > p { padding-bottom: 26px; }

/* ---- Финал: экран «приклеен», надпись проявляется из размытия ------------------------ */
.final { position: relative; height: calc(var(--vh, 100vh) + 240px); margin-top: -200px; }
.final, .final > section { pointer-events: none; }
.final .final-act, .final a, .final button { pointer-events: auto; }
.final > section { position: sticky; top: 0; display: flex; align-items: center; justify-content: center; height: var(--vh, 100vh); }
.final-in { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 16px; text-align: center; }
.final h2 { margin-bottom: 44px; font: 500 clamp(40px, 6.6vw, 120px)/1.08 var(--font); letter-spacing: -0.04em; color: var(--page-ink); text-wrap: balance; }
.final h2, .final .final-act { transition: filter 0.7s var(--ease); will-change: transform, opacity, filter; }
.final .is-soft { filter: blur(50px); }
.final-act { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.final-act p { font: 400 15px/22px var(--font); color: var(--page-ink-2); }

.lp-foot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px 48px; padding: 56px var(--gutter) 32px; color: rgb(255 255 255 / 0.56); background: #000; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); font: 400 14px/20px var(--font); }
.lp-foot svg { width: 22px; height: 22px; }
.lp-foot b { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: #fafafa; }
.lp-foot-brand p { max-width: 320px; margin-top: 14px; }
.lp-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-foot-cols div { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; }
.lp-foot h4 { margin: 0 0 4px; font: 600 12px/16px var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.4); }
.lp-foot a { color: rgb(255 255 255 / 0.72); text-decoration: none; transition: color 0.16s; }
.lp-foot a:hover { color: #fff; }
/* Все лендинги: ряд ссылок над нижней строкой подвала, текущая страница отмечена */
.lp-foot-sites { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 0.08); }
.lp-foot-sites div { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-foot-sites a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); font-size: 13px; white-space: nowrap; transition: color 0.16s, box-shadow 0.16s, background 0.16s; }
.lp-foot-sites a:hover { box-shadow: inset 0 0 0 1px rgb(160 106 255 / 0.55); }
.lp-foot-sites a[aria-current='page'] { color: #fff; background: rgb(160 106 255 / 0.16); box-shadow: inset 0 0 0 1px rgb(160 106 255 / 0.7); }
.lp-foot-sites .lp-foot-index { color: rgb(255 255 255 / 0.56); }
.lp-foot-base { display: flex; flex-wrap: wrap; gap: 8px 24px; grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 0.08); font-size: 13px; }
.lp-foot-base span:last-child { margin-left: auto; }

:is(.cta, .ghost, .chip, .faq-item > button, .lp-seg button, .lp-icon-btn, .lp-nav a):focus-visible { outline: 2px solid #b28aff; outline-offset: 3px; }
.lp-nav a:focus-visible, .lp-seg button:focus-visible { outline-offset: -2px; }  /* у меню обрезка по краю: рамка внутрь */
/* Остальные кнопки, ссылки и переключатели примеров: та же рамка. Вес как у одного класса: свои правила страницы важнее. */
:where(main, .lp-foot, .lp-sheet) :where(button, a[href], select, summary, input:is([type='checkbox'], [type='radio'], [type='range']), [role='button'], [role='tab'], [tabindex]:not([tabindex='-1'])):focus-visible { outline: 2px solid #b28aff; outline-offset: 2px; }

.lp-toast:not([hidden]) { animation: lp-toast 0.35s var(--spring) both; }
@keyframes lp-toast { from { opacity: 0; transform: translate(-50%, 12px) scale(0.96); } }
.lp-toast { position: fixed; bottom: 24px; left: 50%; z-index: 41; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px; color: var(--ivory); background: #000; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 12px 30px rgb(0 0 0 / 0.4); transform: translateX(-50%); font: 500 14px/20px var(--font); }
.lp-toast[hidden] { display: none; }
.lp-toast::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* ---- Окно у́же 1440: та же сетка, текст мельче ----------------------------------------- */
@media (max-width: 1439.98px) {
  .pn h2 { font-size: clamp(36px, 3.9vw, 56px); }
  .pn h2.big { font-size: clamp(40px, 4.3vw, 62px); }
  .pn h2.mid { font-size: clamp(32px, 3.4vw, 48px); }
}

/* Шапка на 1200–1380: метка «Макет» уходит, пункты меню плотнее, чтобы последний не обрезался */
@media (max-width: 1379.98px) {
  .lp-top .lp-mark { display: none; }
}
@media (min-width: 1200px) and (max-width: 1379.98px) {
  .lp-brand { margin-right: 12px; }
  .lp-nav a { padding: 8px 8px; }
}

@media (max-width: 1199.98px) {
  .lp-nav { display: none; }
  .lp-menu-btn { display: grid; }
  .lp-brand { margin-right: auto; }
}

@media (max-width: 1099.98px) {
  :root { --gutter: 32px; }
  .canvas { padding: 56px var(--gutter) 72px; }
  .pn-in { padding: 40px; }
  :root { --gap: 18px; }
  .pn .lead { font-size: 18px; line-height: 26px; }
}

/* ---- Телефон и узкий планшет: один столбец ------------------------------------------- */
@media (max-width: 859.98px) {
  :root { --gutter: 16px; }
  .lp-top { gap: 8px; height: 52px; padding: 0 12px; }
  .lp-mark { display: none; }
  .lp-top .cta { display: none; }
  .canvas { padding: 20px var(--gutter) 56px; }
  :root { --gap: 14px; }
  .row { display: block; margin-top: var(--gap); }
  .pull-200, .pull-300 { margin-top: var(--gap); }
  .row-gap { margin-top: calc(var(--gap) * 2); }
  .row-full { padding: 0; }
  .row-full { width: auto; margin-left: 0; }
  .pn, .pn.wide { width: 100%; border-radius: 24px; }
  .pn-in { padding: 28px 20px; }
  .pn.wide > .pn-in { padding-left: 20px; padding-right: 20px; }
  .pn h2, .pn h2.big, .pn h2.mid { font-size: 32px; line-height: 38px; letter-spacing: -0.025em; }
  .pn .lead { font-size: 16px; line-height: 24px; }
  .eyebrow + h2 { margin-top: 20px; }
  h2 + .lead { margin-top: 14px; }
  .side, .side.mid, .side.low, .side.high { width: 100%; height: auto; padding: 22px 12px; font-size: 18px; line-height: 26px; }
  .faq-item > button { padding: 20px 0; font-size: 16px; }
  .final { margin-top: -80px; }
  .final h2 { margin-bottom: 32px; }
  .lp-foot { grid-template-columns: minmax(0, 1fr); padding: 36px 16px 40px; }
  .lp-foot-base span:last-child { margin-left: 0; }
}

@media (max-width: 379.98px) {
  .lp-seg button { min-width: 30px; padding: 0 7px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  main[data-enter] { animation: none; }
  .pn-in, .final h2, .final .final-act { transition: none; }
}

/* ===== 09.11 Данил: кнопки «Глянец 2» на всех лендингах (как на главной). Главная — чёрный лак: блик сверху, тонкая фиолетовая
   полоса света снизу (видна и без наведения), под пальцем свет ярче. Вторая кнопка пары (.ghost.lg и .ghost после .cta) —
   ссылка с тонким подчёркиванием и круглой чёрной стрелкой. Остальные .ghost (переключатели и вкладки в демо) не меняются. ===== */
.cta { border-radius: 16px; color: #fff; filter: none;
  background: radial-gradient(120% 70% at 50% -10%, rgb(255 255 255 / 0.2), transparent 55%), linear-gradient(180deg, #2b2b31 0%, #111114 46%, #030304 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.32), inset 0 -1px 0 rgb(184 146 255 / 0.55), inset 0 -10px 18px -10px rgb(160 106 255 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 1px 0 1px rgb(0 0 0 / 0.9), 0 16px 30px -16px rgb(0 0 0 / 1); }
.cta::before { content: ''; position: absolute; left: 18%; right: 18%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #d7c2ff, transparent); pointer-events: none; }
.cta::after { opacity: 0.7; background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 130%), rgb(170 120 255 / 0.5), transparent 65%); }
.cta:hover { filter: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.36), inset 0 -1px 0 rgb(200 170 255 / 0.8), inset 0 -12px 20px -10px rgb(160 106 255 / 0.6), inset 0 0 0 1px rgb(200 170 255 / 0.3), 0 1px 0 1px rgb(0 0 0 / 0.9), 0 16px 30px -16px rgb(0 0 0 / 1); }
.cta:hover::after { opacity: 1; }
.cta:active { transform: translateY(1px) scale(0.985); }
.cta.sm { border-radius: 13px; }
:is(.ghost.lg, .cta ~ .ghost) { gap: 12px; padding: 0 4px; background: none; box-shadow: none; color: var(--ivory, #f5f5f7); }
:is(.ghost.lg, .cta ~ .ghost):hover { box-shadow: none; }
:is(.ghost.lg, .cta ~ .ghost) > span:first-child, :is(.ghost.lg, .cta ~ .ghost):not(:has(> span)) { background: linear-gradient(rgb(245 245 247 / 0.3), rgb(245 245 247 / 0.3)) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-image 0.2s; }
:is(.ghost.lg, .cta ~ .ghost):hover > span:first-child, :is(.ghost.lg, .cta ~ .ghost):not(:has(> span)):hover { background-image: linear-gradient(#b48cff, #b48cff); }
:is(.ghost.lg, .cta ~ .ghost) > svg { box-sizing: content-box; width: 12px; height: 12px; padding: 8px; border-radius: 50%; color: #fff; background: linear-gradient(180deg, #26262b, #050506); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), inset 0 0 0 1px rgb(255 255 255 / 0.1); transition: transform 0.3s var(--ease, ease); }
:is(.ghost.lg, .cta ~ .ghost):hover > svg { transform: translateX(3px); }
/* вторая кнопка без вложенного <span> (текст прямо в ссылке): подчёркивание текста, а не линия по низу всей кнопки */
:is(.ghost.lg, .cta ~ .ghost):not(:has(> span)) { background: none; padding-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgb(245 245 247 / 0.3); }
:is(.ghost.lg, .cta ~ .ghost):not(:has(> span)):hover { background: none; text-decoration-color: #b48cff; }