/* home.css — новый вид ГЛАВНОЙ страницы. Подключается ПОСЛЕ style.css и только
   в index.html: остальные страницы и кабинет остаются на базовых стилях.

   Почему слоем, а не переписыванием style.css:
   • style.css общий для index/paid/success/oferta/cabinet — правка задела бы всё
     сразу, включая кабинет;
   • он подключён без версии в имени, а nginx кэширует .css на 7 дней: правка
     дошла бы до вернувшихся посетителей только через неделю. У этого файла
     версия в адресе есть, поэтому выкладка доходит сразу.

   Все правила ограничены body.home2 — специфичность выше базовой, поэтому
   !important не нужен нигде. Разметку и зацепки JS слой не трогает.

   Шрифт заголовков лежит у нас: fonts.googleapis.com у аудитории с перекрытым
   интернетом открывается не всегда, а ждать шрифт с чужого домена странице
   про обход блокировок противопоказано. */

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 700;
  font-display: swap;                 /* текст виден сразу, шрифт подменяется молча */
  src: url("../fonts/unbounded-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/unbounded-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.home2 {
  --h-ink: #04070e;
  --h-card-a: rgba(255, 255, 255, .075);
  --h-card-b: rgba(255, 255, 255, .018);
  --h-line: rgba(255, 255, 255, .085);
  --h-line-2: rgba(255, 255, 255, .17);
  --h-blue: #4f7cff;
  --h-blue-lt: #7ea0ff;
  --h-cyan: #22d3ee;
  --h-violet: #7b5cff;
  --h-lift-1: 0 2px 4px rgba(0, 0, 0, .4);
  --h-lift-2: 0 18px 40px -18px rgba(0, 0, 0, .85);
  --h-lift-3: 0 30px 70px -24px rgba(0, 0, 0, .9);
  background: var(--h-ink);
}

/* Зерно поверх всей страницы: убирает полосы на градиентах и даёт материальность.
   body::before занят базовыми стилями — берём только ::after. */
body.home2::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* ── Типографика ───────────────────────────────────────────────────────── */
body.home2 h1,
body.home2 h2,
body.home2 .price-now {
  font-family: "Unbounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -.035em;
  text-wrap: balance;
}
/* Крупный кегль — только у героя главной. На success/paid/oferta h1 живёт
   внутри панели, и общий размер раздувал его до двух строк. */
body.home2 .hero h1 { font-size: clamp(34px, 6.2vw, 62px); line-height: 1.01; }
body.home2 .panel h1 { font-size: clamp(24px, 3.4vw, 30px); line-height: 1.12; }
body.home2 h3 { letter-spacing: -.012em; }
body.home2 .lead { color: #9fb0ce; }

/* ── Шапка: стекло и подсветка ─────────────────────────────────────────── */
body.home2 header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(to bottom, rgba(4, 7, 14, .95), rgba(4, 7, 14, .74));
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--h-line);
}
body.home2 .logo-mark {
  box-shadow: 0 0 20px rgba(79, 124, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* Кнопка бесплатного ключа в шапке. <details> — чтобы работало без JS и с клавиатуры. */
body.home2 .keydrop { position: relative; flex: none; }
body.home2 .keydrop > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 11px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: #eaf1ff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  border: 1px solid var(--h-line-2);
  box-shadow: var(--h-lift-1), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.home2 .keydrop > summary::-webkit-details-marker { display: none; }
body.home2 .keydrop > summary::marker { content: ""; }
/* В style.css у summary::after стоит «+» для аккордеона «Частых вопросов» —
   в шапке он не нужен, иначе кнопка выглядит как раскрывающийся пункт списка. */
body.home2 .keydrop > summary::after { content: none; }
body.home2 .keydrop > summary:hover {
  transform: translateY(-1px);
  border-color: rgba(126, 160, 255, .6);
  box-shadow: 0 0 22px rgba(79, 124, 255, .35), var(--h-lift-1);
}
body.home2 .keydrop[open] > summary { border-color: rgba(126, 160, 255, .85); }
body.home2 .keydrop svg { width: 16px; height: 16px; flex: none; stroke: var(--h-blue-lt); fill: none; stroke-width: 1.8; }
body.home2 .keycard {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 60;
  width: min(300px, calc(100vw - 32px));
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(23, 37, 64, .99), rgba(7, 12, 22, .995));
  border: 1px solid var(--h-line-2);
  box-shadow: var(--h-lift-3), inset 0 1px 0 rgba(255, 255, 255, .12);
}
body.home2 .keycard b { display: block; font-size: 15px; margin-bottom: 4px; }
body.home2 .keycard p { margin: 0 0 14px; font-size: 13px; color: #93a3c4; }
body.home2 .keycard img { display: block; width: 100%; height: auto; border-radius: 10px; background: #fff; padding: 9px; }
body.home2 .keycard .keyhint { margin: 12px 0 0; font-size: 12px; color: #627495; }

/* ── Герой ─────────────────────────────────────────────────────────────── */
/* overflow:hidden обязателен: источник света шире экрана, и без обрезки он даёт
   горизонтальную прокрутку всей страницы на телефоне. Сверху свет срезается
   незаметно — там всё равно стоит шапка со своим фоном. */
body.home2 .hero { position: relative; padding-top: 54px; overflow: hidden; }
/* Один источник света с мягким падением, а не заливка градиентом на весь экран. */
body.home2 .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(1100px, 130vw);
  height: 620px;
  left: 50%;
  top: -190px;
  transform: translateX(-50%);
  background:
    radial-gradient(44% 46% at 50% 50%, rgba(79, 124, 255, .3), transparent 70%),
    radial-gradient(30% 38% at 72% 42%, rgba(34, 211, 238, .16), transparent 72%),
    radial-gradient(28% 34% at 28% 58%, rgba(123, 92, 255, .2), transparent 72%);
  filter: blur(14px);
}
body.home2 .pill {
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
  border: 1px solid var(--h-line-2);
  box-shadow: var(--h-lift-1), inset 0 1px 0 rgba(255, 255, 255, .12);
}
body.home2 .grad {
  background: linear-gradient(120deg, var(--h-blue-lt), var(--h-cyan) 55%, var(--h-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Схема маршрута: то, за что человек платит, показано, а не описано словами. */
body.home2 .route {
  max-width: 560px;
  margin: 34px auto 0;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(22, 35, 60, .92), rgba(8, 13, 24, .96));
  border: 1px solid var(--h-line-2);
  box-shadow: var(--h-lift-3), inset 0 1px 0 rgba(255, 255, 255, .1);
}
body.home2 .route figcaption {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #627495;
  margin-bottom: 12px;
}
body.home2 .route svg { display: block; width: 100%; height: auto; }
body.home2 .route .dash {
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
  animation: home-draw 1.5s .3s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes home-draw { to { stroke-dashoffset: 0; } }

/* ── Кнопки ────────────────────────────────────────────────────────────── */
body.home2 .btn-primary {
  background: linear-gradient(180deg, var(--h-blue-lt), var(--h-blue) 60%, #3a63e0);
  border: 0;
  box-shadow: 0 0 40px rgba(79, 124, 255, .42), var(--h-lift-2), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .18s ease, box-shadow .18s ease;
}
body.home2 .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 58px rgba(79, 124, 255, .58), var(--h-lift-3), inset 0 1px 0 rgba(255, 255, 255, .45);
}
body.home2 .btn-ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
  border: 1px solid var(--h-line-2);
  box-shadow: var(--h-lift-1), inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* ── Плитки, шаги, страны: разные уровни подъёма, а не одна тень на всём ── */
body.home2 .card,
body.home2 .buy,
body.home2 .tgfree .tg-grid {
  position: relative;
  background: linear-gradient(170deg, var(--h-card-a), var(--h-card-b) 55%);
  border: 1px solid var(--h-line);
  box-shadow: var(--h-lift-2), inset 0 1px 0 rgba(255, 255, 255, .09);
}
/* Светлая кромка сверху: свет падает сверху, как у настоящего объекта. */
body.home2 .card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 160, 255, .6), transparent);
}
body.home2 .card { transition: transform .2s ease, border-color .2s ease; }
body.home2 .card:hover { transform: translateY(-3px); border-color: var(--h-line-2); }
body.home2 .card .ico {
  background: linear-gradient(160deg, rgba(79, 124, 255, .42), rgba(123, 92, 255, .22));
  border: 1px solid rgba(126, 160, 255, .35);
  box-shadow: 0 8px 20px -8px rgba(79, 124, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .28);
}
body.home2 .step {
  background: linear-gradient(170deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .014));
  border: 1px solid var(--h-line);
  box-shadow: var(--h-lift-1), inset 0 1px 0 rgba(255, 255, 255, .07);
}
body.home2 .flag {
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02));
  border: 1px solid var(--h-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ── Блок покупки: он приносит деньги, поэтому поднят выше всех ─────────── */
body.home2 .buy {
  border-color: var(--h-line-2);
  box-shadow: var(--h-lift-3), inset 0 1px 0 rgba(255, 255, 255, .1);
}
body.home2 .price-box {
  background: linear-gradient(170deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  border: 1px solid var(--h-line-2);
  box-shadow: var(--h-lift-2), inset 0 1px 0 rgba(255, 255, 255, .12);
}
body.home2 .price-now {
  background: linear-gradient(120deg, #fff, var(--h-blue-lt) 70%, var(--h-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
body.home2 .sum-row b { font-variant-numeric: tabular-nums; }

/* ── Страницы после оплаты: success, paid, оферта ──────────────────────────
   Человек приходит с новой главной и платит — попасть на страницу из прошлой
   версии именно в этот момент хуже всего. Тот же язык: свет, уровни, объём. */
body.home2 .page { position: relative; overflow: hidden; }
body.home2 .page::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(900px, 100%);
  height: 460px;
  left: 50%;
  top: -150px;
  transform: translateX(-50%);
  background:
    radial-gradient(46% 48% at 50% 50%, rgba(79, 124, 255, .22), transparent 70%),
    radial-gradient(30% 36% at 70% 46%, rgba(34, 211, 238, .12), transparent 72%);
  filter: blur(14px);
}
body.home2 .panel {
  background: linear-gradient(165deg, rgba(22, 35, 60, .95), rgba(8, 13, 24, .97));
  border-color: var(--h-line-2);
  box-shadow: var(--h-lift-3), inset 0 1px 0 rgba(255, 255, 255, .1);
}
body.home2 .stat,
body.home2 .device {
  position: relative;
  background: linear-gradient(170deg, var(--h-card-a), var(--h-card-b) 55%);
  border-color: var(--h-line);
  box-shadow: var(--h-lift-1), inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* Светлая кромка сверху — как у плиток главной: свет падает сверху. */
body.home2 .device::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 160, 255, .55), transparent);
}
body.home2 .stat b { font-variant-numeric: tabular-nums; }
/* Ссылка-подписка — то, за чем человек сюда пришёл: утопленное поле, чтобы
   читалось как значение, а не как элемент управления. */
body.home2 .copy-row input {
  background: rgba(0, 0, 0, .42);
  border-color: var(--h-line);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}
body.home2 .divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--h-line-2), transparent);
}

/* На узком экране подпись кнопки не влезает и выносит страницу вбок — ровно та
   же беда, из-за которой в style.css прячут лишние ссылки шапки. Тот же порог. */
@media (max-width: 720px) {
  /* Третий элемент в шапку на 375 px не помещается и выносит страницу вбок.
     На мобильном ключ и так под рукой: строка .hero-rescue в первом экране
     существует ровно для этого случая. */
  body.home2 .keydrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.home2 *,
  body.home2 *::before,
  body.home2 *::after { animation: none !important; transition: none !important; }
  body.home2 .route .dash { stroke-dashoffset: 0; }
}