/* Стиль «премиум» поверх css-landing.css — на пробу. Вернуть старый вид — убрать подключение этого файла в index.html.
   Под собственников венчурных компаний: так выглядят Linear, Stripe, Vercel — продукты, которыми они пользуются каждый день.
   Глубина и мягкое свечение вместо плоских плашек. Правила прежние: текст 16px, серых подписей нет,
   цвет — только у смысла, кнопка без цвета. Фиолетово-бирюзовое свечение — фон, смысла не несёт:
   свечение за блоками, ореол кнопки, рамка строки над заголовком. Заголовки — чистого цвета текста, без перелива в серый: с ним страница бледнеет. */

:root {
  /* Фирменное свечение — каналы цвета, прозрачность задаёт место */
  --violet: 124, 92, 255; --cyan: 34, 211, 238;
  --bg: #05060b; --surface: #0b0d16; --line: rgba(255, 255, 255, .07); --line-strong: rgba(255, 255, 255, .14);
  --text: #f5f6fa; --text-2: #a3a8b3; --head: #ffffff;
  --low: #ff5c6a; --low-soft: rgba(255, 92, 106, .1);
  --good: #3ddc97; --good-soft: rgba(61, 220, 151, .09);
  --glow-1: rgba(var(--violet), .42); --glow-2: rgba(var(--cyan), .2); --ambient: .14;
  /* Стекло плашек — с холодным оттенком: нейтрально-белое на чёрном выглядит серым */
  --card: linear-gradient(180deg, rgba(190, 180, 255, .06), rgba(190, 180, 255, .018));
  --card-hi: linear-gradient(180deg, rgba(190, 180, 255, .1), rgba(190, 180, 255, .035));
  --card-edge: rgba(200, 190, 255, .1);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -24px rgba(0, 0, 0, .8);
  --btn-bg: #ffffff; --btn-text: #05060b; --btn-glow: rgba(var(--violet), .55);
  --fs-h2: 44px;
  /* Плашки проявляются при прокрутке — скрипт в index.html смотрит на этот флаг: без этого файла не проявляются */
  --reveal: 1;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f7fb; --surface: #ffffff; --line: rgba(15, 23, 42, .07); --line-strong: rgba(15, 23, 42, .14);
    --text: #0a0b12; --text-2: #4b5563; --head: #05060b;
    --low: #d6293a; --low-soft: rgba(214, 41, 58, .07);
    --good: #0b7d4c; --good-soft: rgba(11, 125, 76, .08);
    --glow-1: rgba(var(--violet), .2); --glow-2: rgba(var(--cyan), .16); --ambient: .07;
    --card: #ffffff; --card-hi: #ffffff;
    --card-edge: rgba(15, 23, 42, .08);
    --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 16px 40px -16px rgba(15, 23, 42, .14);
    --btn-bg: #0a0b12; --btn-text: #ffffff; --btn-glow: rgba(var(--violet), .45);
  }
}

/* Фон страницы: свечение то справа, то слева по всей длине — цвет есть не только на первом экране */
body { background: radial-gradient(900px 700px at 100% 26%, rgba(var(--violet), var(--ambient)), transparent 70%), radial-gradient(800px 600px at 0% 50%, rgba(var(--cyan), calc(var(--ambient) * .7)), transparent 70%), radial-gradient(900px 700px at 100% 76%, rgba(var(--violet), calc(var(--ambient) * .8)), transparent 70%), var(--bg); }

/* Заголовки: плотнее и ярче текста */
h1 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
h2, .h2 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; }
h1, h2, .h2, .case-title { color: var(--head); }

/* Разделы: без смены фона, между ними — тонкая линия, тающая к краям, с отсветом посередине */
section { position: relative; border-top: 0; }
section:nth-of-type(even) { background: none; }
section + section::before { content: ""; position: absolute; top: 0; left: 50%; width: min(var(--wrap), 100% - 2 * var(--side)); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--line-strong) 25%, rgba(var(--violet), .55) 50%, var(--line-strong) 75%, transparent); }

/* Плашки: стекло с подсветкой верхнего края и глубокой тенью */
.card, section:nth-of-type(even) .card { background: var(--card); border: 1px solid var(--card-edge); border-radius: 16px; box-shadow: var(--shadow); }

/* Кнопки: заливка без цвета, ореол — фирменного цвета, при наведении кнопка приподнимается */
.btn { border-radius: 10px; background: var(--btn-bg); color: var(--btn-text); box-shadow: 0 8px 28px -8px var(--btn-glow); transition: transform .15s, box-shadow .15s, opacity .15s; }
.btn:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 14px 36px -8px var(--btn-glow); }
.btn-line { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--text); }

/* Первый экран: свечение и сетка, тающая книзу; пример разбора парит над фоном */
.hero { overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero::before { background: radial-gradient(700px 480px at 74% 38%, var(--glow-1), transparent 70%), radial-gradient(560px 380px at 12% 0%, var(--glow-2), transparent 70%); }
.hero::after { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 75%); }
.hero .wrap { position: relative; z-index: 1; }
.eyebrow { display: inline-block; padding: 6px 16px; border: 1px solid rgba(var(--violet), .45); border-radius: 999px; background: linear-gradient(90deg, rgba(var(--violet), .16), rgba(var(--cyan), .08)); font-size: var(--fs-body); font-weight: 600; }
/* Без размытия фона: под примером только свечение, размывать нечего, а прокрутку оно тормозит */
.preview, section:nth-of-type(even) .preview { background: var(--card-hi); box-shadow: var(--shadow), 0 0 120px -24px var(--glow-1); }
.tag { background: var(--card); }

/* Крупные цифры — крупнее. Процент в примере первого экрана — размером заголовка: крупнее первый экран не влезает в ноутбук */
.stat-num { font-size: 72px; }
.stat-num, .preview-fit { letter-spacing: -0.04em; }

/* «Узнаёте»: отмеченная ситуация — с ореолом */
.pain-item { border-radius: 16px; background: var(--card); border-color: var(--card-edge); box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.pain-item[aria-pressed="true"] { box-shadow: var(--shadow), 0 0 0 1px var(--text); }

/* Калькулятор: итог — красное свечение, это смысл «плохо» */
.field-box { border-radius: 10px; background: var(--card); border-color: var(--line-strong); }
.calc-result { border: 1px solid color-mix(in srgb, var(--low) 25%, transparent); border-radius: 16px; background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--low) 16%, transparent), transparent 60%), var(--low-soft); }
.calc-sum { font-size: 72px; letter-spacing: -0.04em; }

/* Пример разбора: подсветка за плашкой — главный экспонат страницы */
.sample, section:nth-of-type(even) .sample { box-shadow: var(--shadow), 0 0 160px -40px var(--glow-1); }

/* Шаги: номер в квадрате с отсветом */
.step-num { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(var(--violet), .4); border-radius: 14px; background: linear-gradient(180deg, rgba(var(--violet), .2), rgba(var(--violet), .04)); font-size: var(--fs-h3); }

/* Продукты: главный — программа — выделен ореолом */
.product:first-child { border-color: rgba(var(--violet), .35); box-shadow: var(--shadow), 0 0 100px -30px var(--glow-1); }
.pay { border: 1px solid color-mix(in srgb, var(--good) 25%, transparent); }

/* Последний призыв: свечение из-под заголовка */
.final { overflow: hidden; }
.final::after { content: ""; position: absolute; left: 50%; top: 0; width: 960px; height: 640px; transform: translate(-50%, -25%); background: radial-gradient(closest-side, var(--glow-1), transparent); pointer-events: none; }
.final .wrap { position: relative; z-index: 1; }

/* Плашки проявляются снизу, когда доходят до экрана, — скрипт в index.html. Анимация идёт по времени, а не за прокруткой:
   привязанная к прокрутке держит каждую плашку отдельным слоем, и прокрутка дёргается. Без скрипта всё видно сразу */
.pre-reveal { opacity: 0; }

@media (max-width: 900px) {
  :root { --fs-hero: 40px; --fs-h2: 30px; }
  .stat-num, .preview-fit { font-size: var(--fs-hero); }
  .calc-sum { font-size: var(--fs-h2); }
  .hero::after { background-size: 40px 40px; }
}

/* Телефон: строка над заголовком — в две строки, круглая капсула на две строки выглядит пузырём */
@media (max-width: 700px) {
  .eyebrow { border-radius: 12px; }
}