/* =========================================================
   PULTEVENT — лендинг. Дизайн-система и стили.
   Тёмная премиальная тема, mobile-first, без фреймворков.
   ========================================================= */

/* ---------- 1. Переменные ---------- */
@font-face {
  font-family: "Pulte Manrope";
  src: url("/app/fonts/manrope-cyrillic-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-052F, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: "Pulte Manrope";
  src: url("/app/fonts/manrope-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F;
}
@font-face {
  font-family: "Pulte Manrope";
  src: url("/app/fonts/manrope-cyrillic-700-normal.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-052F, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: "Pulte Manrope";
  src: url("/app/fonts/manrope-latin-700-normal.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F;
}
@font-face {
  font-family: "Pulte Unbounded";
  src: url("/app/fonts/unbounded-cyrillic-700-normal.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-052F, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: "Pulte Unbounded";
  src: url("/app/fonts/unbounded-latin-700-normal.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F;
}
:root {
  --accent: #ff3b7f;
  --accent2: #7b2ff7;
  --bg: #0c0a14;
  --panel: #16131f;
  --panel-2: #1d1929;
  --text: #f4f1fb;
  --muted: #9a93b0;
  --faint: rgba(244, 241, 251, 0.12);
  --ok: #23d18b;
  --danger: #ff5470;
  --grad: linear-gradient(90deg, #ff3b7f, #7b2ff7);
  --grad-soft: linear-gradient(135deg, rgba(255, 59, 127, 0.16), rgba(123, 47, 247, 0.16));
  --ff-body: "Pulte Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-display: "Pulte Unbounded", "Pulte Manrope", system-ui, sans-serif;
  --radius-l: 20px;
  --radius-m: 16px;
  --radius-s: 12px;
  --max-w: 1200px;
  --section-pad: clamp(64px, 9vw, 120px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-card: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px rgba(255, 59, 127, 0.25), 0 20px 60px -15px rgba(255, 59, 127, 0.35);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Плавностью прокрутки управляет скрипт, а не CSS.
   Здесь стояло scroll-behavior:smooth — и оно перебивало параметр behavior
   в window.scrollTo из JS. На короткой дистанции это незаметно, а до блока
   тарифов около тридцати тысяч пикселей: браузер не осиливал такую анимацию,
   прокрутка не стартовала вовсе, и кнопка «Тарифы» просто ничего не делала.
   Теперь короткие переходы скрипт делает плавно, длинные — сразу. */
html { scroll-behavior: auto; }

/* Шапка залипающая (position:sticky), поэтому при переходе по якорю начало
   секции уезжало ей под низ — со стороны выглядело так, будто ссылка ведёт
   чуть выше нужного места. Отступ равен высоте шапки плюс воздух. */
:target,
section[id],
div[id^="sec-"] { scroll-margin-top: 92px; }
@media (max-width: 720px) {
  :target,
  section[id],
  div[id^="sec-"] { scroll-margin-top: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

section { position: relative; }

h1, h2, h3, h4 { font-weight: 800; letter-spacing: 0; line-height: 1.12; }
h1, h2, .logo { font-family: var(--ff-display); }

/* Фоновые сияния (аврора) */
.aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aurora::before, .aurora::after {
  content: "";
  position: absolute;
  width: clamp(280px, 50vw, 620px);
  height: clamp(280px, 50vw, 620px);
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
}
.aurora::before { background: var(--accent); top: -10%; left: -10%; }
.aurora::after { background: var(--accent2); bottom: -15%; right: -10%; }

/* ---------- 3. Типографика ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255, 59, 127, 0.1);
  border: 1px solid rgba(255, 59, 127, 0.25);
  padding: 6px 14px;
  border-radius: 999px;
}
.section-head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.section-head h2 {
  font-size: clamp(28px, 4.2vw, 44px);
  margin-top: 14px;
}
.section-head p {
  color: var(--muted);
  font-size: clamp(15px, 1.8vw, 18px);
  margin-top: 14px;
}
.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 4. Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease);
  cursor: pointer;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(255, 59, 127, 0.55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(255, 59, 127, 0.65); }
.btn-secondary {
  background: rgba(244, 241, 251, 0.05);
  border: 1px solid rgba(244, 241, 251, 0.18);
  color: var(--text);
}
.btn-secondary:hover { border-color: rgba(244, 241, 251, 0.4); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
  padding: 10px 18px;
}
.btn-ghost:hover { background: rgba(244, 241, 251, 0.06); }
.btn-block { width: 100%; }
.btn-lg { padding: 17px 32px; font-size: 16px; }

/* ---------- 5. Шапка ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12, 10, 20, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(244, 241, 251, 0.08);
  transition: background-color 0.3s var(--ease);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}
/* Шапке нужно больше ширины, чем контенту (логотип + меню + кнопки) */
.site-header .header-inner { max-width: 1440px; }
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.01em;
}
.logo .logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo .logo-mark svg { width: 20px; height: 20px; }
.logo-word { white-space: nowrap; }

.nav-main {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.15vw, 18px);
}
.nav-main a {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-main a:hover { color: var(--text); }
/* Вход в видеохаб. Выделен как DJ-пульт: у ведущего, который платформу
   ещё не видел, ролик снимает половину вопросов, поэтому пункт должен
   быть заметен, а не стоять серым в ряду прочих. */
.nav-main .nav-video {
  position: relative;
  padding-left: 22px;
  color: var(--text);
}
.nav-main .nav-video::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 14px; height: 12px;
  margin-top: -6px;
  border-radius: 3px;
  background: var(--grad);
  clip-path: polygon(0 0, 62% 0, 62% 100%, 0 100%, 0 0);
  opacity: .9;
}
.nav-main .nav-video::after {
  content: "";
  position: absolute;
  left: 9px; top: 50%;
  margin-top: -5px;
  border: 5px solid transparent;
  border-left-color: var(--accent2);
}
.nav-main .nav-video:hover { color: #fff; }

.nav-main .nav-dj {
  color: #f4f1fb;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(27, 205, 255, 0.14), rgba(255, 59, 127, 0.16));
  border: 1px solid rgba(255, 59, 127, 0.25);
}
.nav-main .nav-dj:hover {
  color: #fff;
  border-color: rgba(255, 59, 127, 0.45);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.lang-switch {
  position: relative;
}
.lang-switch-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(244, 241, 251, 0.16);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}
.lang-switch-btn svg { width: 14px; height: 14px; opacity: 0.7; }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--panel);
  border: 1px solid rgba(244, 241, 251, 0.12);
  border-radius: var(--radius-s);
  padding: 6px;
  min-width: 140px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.2s var(--ease);
  z-index: 50;
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.lang-menu button:hover { background: rgba(244, 241, 251, 0.08); }
.lang-menu button[aria-pressed="true"] { color: var(--accent); }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(244, 241, 251, 0.16);
}
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  margin-inline: auto;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px clamp(16px, 4vw, 32px) 18px;
  border-top: 1px solid rgba(244, 241, 251, 0.08);
  background: rgba(12, 10, 20, 0.96);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 12px 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid rgba(244, 241, 251, 0.06);
}
.mobile-nav .mobile-cta { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }

/* Сворачиваем полное меню в бургер раньше, чтобы шапка не переполнялась */
@media (max-width: 1240px) {
  .nav-main { display: none; }
  .burger { display: flex; }
}
/* Короткая подпись кнопки покупки — по умолчанию скрыта, полная видна */
.buy-btn .short,
.try-btn .short { display: none; }
/* Демо в шапке заметное, но не спорит с покупкой за внимание: рамка вместо
   заливки. Зелёный оттенок отделяет «бесплатно» от «купить». */
.header-actions .try-btn {
  white-space: nowrap;
  border-color: rgba(35, 209, 139, 0.5);
  color: #5ce0a0;
}
.header-actions .try-btn:hover {
  border-color: #23d18b;
  background: rgba(35, 209, 139, 0.12);
}
@media (max-width: 900px) {
  /* «Войти» уже есть в мобильном меню — не показываем пустую кнопку в шапке */
  .header-actions .btn-secondary.login-btn { display: none; }
}
@media (max-width: 1600px) {
  /* Две полные надписи рядом с меню и соцсетями не помещаются даже на
     широком ноутбуке — «Купить доступ» уезжал за край экрана. */
  .header-actions .try-btn .long { display: none; }
  .header-actions .try-btn .short { display: inline; }
  .header-actions .try-btn { padding: 11px 14px; }
}
@media (max-width: 560px) {
  /* На узких экранах кнопка покупки показывает короткий текст, но не пустеет */
  .header-actions .buy-btn .long { display: none; }
  .header-actions .buy-btn .short { display: inline; }
  .header-actions .buy-btn { padding: 11px 15px; }
  /* Совсем узко: демо есть первым пунктом в мобильном меню, в шапке прячем,
     чтобы логотип и бургер не сжались до нечитаемого. */
  .header-actions .try-btn { display: none; }
  .header-inner { gap: 8px; }
  .logo-word { font-size: 17px; }
  .lang-switch-btn { padding: 8px 10px; }
  .burger { width: 38px; height: 38px; }
}

/* ---------- 6. HERO ---------- */
.hero {
  padding-top: clamp(56px, 9vw, 96px);
  padding-bottom: clamp(56px, 9vw, 96px);
  overflow: hidden;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero-copy h1 {
  font-size: clamp(34px, 5.4vw, 60px);
  letter-spacing: -0.03em;
}
.hero-copy .lede {
  margin-top: 20px;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--muted);
  max-width: 56ch;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 14px;
}
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-meta svg { width: 16px; height: 16px; color: var(--ok); flex-shrink: 0; }

/* Визуал сцены */
.hero-visual { position: relative; }
.scene-mock {
  position: relative;
  border-radius: var(--radius-l);
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid rgba(244, 241, 251, 0.1);
  box-shadow: var(--shadow-card);
  padding: clamp(14px, 2vw, 22px);
  overflow: hidden;
}
.scene-mock::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: var(--grad-soft);
  filter: blur(60px);
  z-index: 0;
}
.scene-topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.scene-topbar .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(244,241,251,0.18); }
.scene-stage {
  position: relative;
  z-index: 1;
  aspect-ratio: 16/10;
  border-radius: var(--radius-m);
  background: radial-gradient(circle at 30% 20%, rgba(255,59,127,0.25), transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(123,47,247,0.3), transparent 55%),
              #100d1a;
  border: 1px solid rgba(244, 241, 251, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
}
.scene-stage .stage-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scene-stage .stage-icon svg { width: 32px; height: 32px; color: #fff; }
.scene-stage h3 { font-size: 18px; }
.scene-stage p { color: var(--muted); font-size: 13px; }
.scene-chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.scene-chips span {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(244, 241, 251, 0.06);
  border: 1px solid rgba(244, 241, 251, 0.1);
  color: var(--muted);
}
.float-badge {
  position: absolute;
  background: var(--panel);
  border: 1px solid rgba(244, 241, 251, 0.12);
  border-radius: var(--radius-s);
  padding: 10px 14px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  animation: floatY 5s ease-in-out infinite;
}
.float-badge svg { width: 18px; height: 18px; color: var(--ok); }
.badge-1 { top: -6%; right: -6%; animation-delay: 0.4s; }
.badge-2 { bottom: -6%; left: -6%; animation-delay: 1.1s; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .float-badge { animation: none; } }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { order: 0; }
  .hero-visual { order: 1; max-width: 520px; margin-inline: auto; width: 100%; }
}
@media (max-width: 480px) {
  .float-badge { position: static; display: inline-flex; margin: 6px 6px 0 0; animation: none; }
  .badge-1, .badge-2 { top: auto; right: auto; bottom: auto; left: auto; }
}

/* ---------- 7. Логотип-бар / соц.доказательство ---------- */
.trust-bar {
  padding-block: 28px;
  border-top: 1px solid rgba(244, 241, 251, 0.08);
  border-bottom: 1px solid rgba(244, 241, 251, 0.08);
}
.trust-bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 40px);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}
.trust-bar strong { color: var(--text); }

/* ---------- Живой результат в зале ---------- */
.event-proof {
  padding-block: clamp(64px, 8vw, 108px);
  background:
    radial-gradient(760px 460px at 12% 8%, rgba(255, 59, 127, 0.14), transparent 64%),
    radial-gradient(880px 520px at 90% 12%, rgba(27, 205, 255, 0.10), transparent 66%),
    linear-gradient(180deg, rgba(244, 241, 251, 0.018), rgba(123, 47, 247, 0.045) 48%, rgba(244, 241, 251, 0.018));
  overflow: hidden;
}
.event-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  align-items: stretch;
  gap: clamp(18px, 2.2vw, 28px);
}
.event-proof-card {
  grid-column: auto;
  min-width: 0;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(244, 241, 251, 0.12);
  background: #11101a;
  box-shadow: 0 24px 80px -46px rgba(0, 0, 0, 0.92);
  isolation: isolate;
}
.event-proof-card--wide {
  grid-column: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}
.event-proof-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.event-proof-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 6, 14, 0.04), rgba(8, 6, 14, 0.28) 42%, rgba(8, 6, 14, 0.86)),
    radial-gradient(460px 240px at 16% 12%, rgba(255, 59, 127, 0.18), transparent 64%);
}
.event-proof-card:hover img {
  filter: saturate(1.08) contrast(1.04);
}
.event-proof-copy {
  position: absolute;
  left: clamp(16px, 2vw, 24px);
  right: clamp(16px, 2vw, 24px);
  bottom: clamp(16px, 2vw, 24px);
  max-width: calc(100% - clamp(32px, 4vw, 48px));
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.event-proof-copy span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(10, 8, 18, 0.64);
  border: 1px solid rgba(244, 241, 251, 0.18);
  color: #ffd76a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.event-proof-copy h3 {
  max-width: min(620px, 100%);
  margin: 0;
  color: #fff;
  font-size: clamp(25px, 2.15vw, 38px);
  line-height: 1.08;
  letter-spacing: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.62);
}
.event-proof-copy p {
  max-width: min(600px, 100%);
  margin: 0;
  color: rgba(244, 241, 251, 0.82);
  font-size: 14.5px;
  line-height: 1.48;
  overflow-wrap: break-word;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
}
.event-proof-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: clamp(22px, 3vw, 34px) auto 0;
  padding: clamp(20px, 2.8vw, 28px);
  max-width: 1060px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 59, 127, 0.14), rgba(27, 205, 255, 0.08));
  border: 1px solid rgba(244, 241, 251, 0.12);
}
.event-proof-cta p {
  max-width: 690px;
  margin: 0;
  color: #ded8ef;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.5;
  font-weight: 650;
}
@media (max-width: 980px) {
  .event-proof-grid { grid-template-columns: 1fr; }
  .event-proof-card,
  .event-proof-card--wide { grid-column: auto; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .event-proof { padding-block: 58px; }
  .event-proof-grid { grid-template-columns: 1fr; gap: 14px; }
  .event-proof-card,
  .event-proof-card--wide { min-height: 0; aspect-ratio: 4 / 3; border-radius: 18px; }
  .event-proof-copy { left: 15px; right: 15px; bottom: 15px; }
  .event-proof-copy h3 { font-size: clamp(22px, 7vw, 30px); }
  .event-proof-copy p { font-size: 13.5px; }
  .event-proof-cta { flex-direction: column; align-items: flex-start; border-radius: 18px; }
  .event-proof-cta .btn { width: 100%; }
}

/* ---------- 8. Боль ведущего ---------- */
.pain {
  padding-block: var(--section-pad);
}
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 24px);
}
.pain-card {
  background: var(--panel);
  border: 1px solid rgba(244, 241, 251, 0.08);
  border-radius: var(--radius-l);
  padding: clamp(22px, 3vw, 30px);
}
.pain-card .pain-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 84, 112, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.pain-card .pain-icon svg { width: 26px; height: 26px; color: var(--danger); }
.pain-card h3 { font-size: 19px; margin-bottom: 10px; }
.pain-card p { color: var(--muted); font-size: 14.5px; }
.pain-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 40px);
  text-align: center;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 700;
}
.pain-arrow svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
@media (max-width: 860px) { .pain-grid { grid-template-columns: 1fr; } }

/* ---------- 9. Возможности (карточки модулей) ---------- */
.features { padding-block: var(--section-pad); }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 20px);
}
.feature-card {
  background: var(--panel);
  border: 1px solid rgba(244, 241, 251, 0.08);
  border-radius: var(--radius-m);
  padding: clamp(20px, 2.4vw, 26px);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 59, 127, 0.35);
  box-shadow: var(--shadow-glow);
}
.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--grad-soft);
  border: 1px solid rgba(255, 59, 127, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.feature-icon svg { width: 24px; height: 24px; color: var(--accent); }
.feature-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.feature-card p { color: var(--muted); font-size: 13.5px; }

@media (max-width: 1080px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .feature-grid { grid-template-columns: 1fr; } }

/* ---------- DJ-пульт на главной ---------- */
.dj-landing {
  padding-block: var(--section-pad);
  background:
    radial-gradient(800px 420px at 18% 28%, rgba(27, 205, 255, 0.12), transparent 62%),
    radial-gradient(780px 440px at 88% 22%, rgba(255, 59, 127, 0.18), transparent 62%),
    linear-gradient(180deg, rgba(244, 241, 251, 0.015), rgba(123, 47, 247, 0.06));
  overflow: hidden;
}
.dj-showcase {
  position: relative;
  isolation: isolate;
  max-width: 1180px;
  margin: 0 auto clamp(26px, 4vw, 42px);
  padding: clamp(8px, 1.4vw, 14px);
  border-radius: clamp(18px, 3vw, 28px);
  background:
    linear-gradient(135deg, rgba(255, 59, 127, 0.34), rgba(27, 205, 255, 0.22) 46%, rgba(123, 47, 247, 0.36)),
    rgba(244, 241, 251, 0.04);
  border: 1px solid rgba(244, 241, 251, 0.14);
  box-shadow:
    0 34px 100px -34px rgba(255, 59, 127, 0.55),
    0 24px 70px -34px rgba(27, 205, 255, 0.42);
}
.dj-showcase__glow {
  position: absolute;
  inset: -12%;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 18%, rgba(27, 205, 255, 0.22), transparent 34%),
    radial-gradient(circle at 82% 22%, rgba(255, 59, 127, 0.22), transparent 34%);
  filter: blur(28px);
  opacity: 0.7;
}
.dj-showcase picture,
.dj-showcase img {
  display: block;
  width: 100%;
}
.dj-showcase img {
  height: auto;
  border-radius: clamp(12px, 2.2vw, 18px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 20px 70px rgba(0, 0, 0, 0.42);
}
.dj-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 18px);
  max-width: 1120px;
  margin: 0 auto;
}
.dj-feature {
  min-width: 0;
  padding: clamp(18px, 2.3vw, 24px);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(244, 241, 251, 0.075), rgba(244, 241, 251, 0.035));
  border: 1px solid rgba(244, 241, 251, 0.11);
  box-shadow: 0 18px 54px -34px rgba(0, 0, 0, 0.8);
}
.dj-feature span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 28px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(27, 205, 255, 0.22), rgba(255, 59, 127, 0.22));
  color: #ffd76a;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.dj-feature h3 {
  font-size: clamp(18px, 2vw, 21px);
  margin-bottom: 8px;
}
.dj-feature p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.56;
}
.dj-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1120px;
  margin: clamp(24px, 4vw, 38px) auto 0;
  padding: clamp(20px, 3vw, 28px);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 59, 127, 0.16), rgba(27, 205, 255, 0.10), rgba(123, 47, 247, 0.16));
  border: 1px solid rgba(255, 59, 127, 0.28);
}
.dj-cta b {
  display: block;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.22;
}
.dj-cta p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
}
@media (max-width: 900px) {
  .dj-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dj-cta { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  .dj-landing { padding-block: 64px; }
  .dj-showcase {
    margin-inline: -8px;
    border-radius: 18px;
  }
  .dj-feature-grid { grid-template-columns: 1fr; }
  .dj-cta .btn { width: 100%; white-space: normal; }
}

/* ---------- 10. Типы праздников (чипы) ---------- */
.occasions { padding-block: var(--section-pad); }
.occasion-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.occasion-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid rgba(244, 241, 251, 0.08);
  border-radius: 999px;
  font-weight: 700;
  font-size: 14.5px;
  transition: border-color 0.25s, transform 0.25s var(--ease);
}
.occasion-chip:hover { border-color: rgba(255, 59, 127, 0.4); transform: translateY(-2px); }
.occasion-chip .ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.occasion-chip .ico svg { width: 18px; height: 18px; color: #fff; }
@media (max-width: 860px) { .occasion-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .occasion-grid { grid-template-columns: 1fr; } }

/* ---------- 11. Как это работает ---------- */
.steps { padding-block: var(--section-pad); }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 24px);
  position: relative;
}
.step-card {
  position: relative;
  background: var(--panel);
  border: 1px solid rgba(244, 241, 251, 0.08);
  border-radius: var(--radius-l);
  padding: clamp(22px, 2.6vw, 28px);
}
.step-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.step-card .step-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--grad-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.step-card .step-icon svg { width: 24px; height: 24px; color: var(--accent2); }
.step-card h3 { font-size: 17px; margin-bottom: 8px; }
.step-card p { color: var(--muted); font-size: 14px; }
@media (max-width: 980px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps-grid { grid-template-columns: 1fr; } }

/* ---------- 12. Второй экран ---------- */
.second-screen {
  padding-block: var(--section-pad);
  position: relative;
  overflow: hidden;
}
.second-screen-panel {
  position: relative;
  border-radius: 30px;
  background:
    radial-gradient(640px 320px at 84% 18%, rgba(27, 205, 255, 0.13), transparent 66%),
    radial-gradient(620px 360px at 8% 16%, rgba(255, 59, 127, 0.18), transparent 68%),
    linear-gradient(135deg, rgba(255,59,127,0.13), rgba(123,47,247,0.15)), var(--panel);
  border: 1px solid rgba(244, 241, 251, 0.14);
  padding: clamp(28px, 5vw, 56px);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(420px, 1.16fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  box-shadow: 0 34px 96px -60px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 59, 127, 0.08) inset;
}
.second-screen-copy h2 { font-size: clamp(27px, 3.4vw, 42px); margin-bottom: 16px; }
.second-screen-copy p { color: rgba(244, 241, 251, 0.72); font-size: 16px; margin-bottom: 14px; }
.second-screen-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.second-screen-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}
.second-screen-list svg { width: 18px; height: 18px; color: var(--ok); flex-shrink: 0; margin-top: 2px; }

.second-screen-visual {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(244, 241, 251, 0.16);
  background: #100d1a;
  box-shadow: 0 28px 80px -38px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.second-screen-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background:
    radial-gradient(520px 260px at 50% 28%, rgba(123, 47, 247, 0.18), transparent 68%),
    #090712;
}
.second-screen-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 6, 14, 0.02), rgba(8, 6, 14, 0.16)),
    radial-gradient(520px 220px at 18% 12%, rgba(255, 59, 127, 0.15), transparent 68%);
}
.second-screen-legend {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.second-screen-legend span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(12, 10, 20, 0.68);
  border: 1px solid rgba(244, 241, 251, 0.2);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.screen-box {
  border-radius: var(--radius-m);
  border: 1px solid rgba(244, 241, 251, 0.12);
  background: #100d1a;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.screen-box .screen-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 1px solid rgba(244, 241, 251, 0.08);
}
.screen-box .screen-body {
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 30%, rgba(255,59,127,0.22), transparent 60%), #0c0a14;
}
.screen-box.proj .screen-body svg { width: 46px; height: 46px; color: var(--accent); }
.screen-box.remote .screen-body { aspect-ratio: 9/14; flex-direction: column; gap: 8px; padding: 14px; }
.screen-box.remote .ctrl-row { display: flex; gap: 6px; width: 100%; }
.screen-box.remote .ctrl-btn { flex: 1; height: 26px; border-radius: 7px; background: rgba(244,241,251,0.08); }
.screen-box.remote .ctrl-btn.active { background: var(--grad); }

@media (max-width: 880px) {
  .second-screen-panel { grid-template-columns: 1fr; }
  .second-screen-visual { width: 100%; }
}
@media (max-width: 560px) {
  .second-screen-panel { border-radius: 22px; padding: 22px; }
  .second-screen-visual { border-radius: 18px; aspect-ratio: 16 / 9; }
  .second-screen-legend { left: 12px; right: 12px; bottom: 12px; }
  .second-screen-legend span { min-height: 30px; padding: 7px 10px; font-size: 11px; }
}

/* ---------- 13. Ноутбук и телевизор ---------- */
.device-showcase {
  padding-block: clamp(64px, 8vw, 108px);
  overflow: hidden;
  background:
    radial-gradient(740px 420px at 12% 16%, rgba(27, 205, 255, 0.1), transparent 64%),
    radial-gradient(760px 440px at 88% 10%, rgba(255, 59, 127, 0.12), transparent 66%),
    linear-gradient(180deg, rgba(244, 241, 251, 0.018), rgba(123, 47, 247, 0.038), rgba(244, 241, 251, 0.018));
}
.device-showcase .section-head { max-width: 900px; }
.device-showcase-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(244, 241, 251, 0.14);
  background: #100d1a;
  box-shadow:
    0 34px 100px -54px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.device-showcase-hero img,
.device-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background:
    radial-gradient(520px 260px at 50% 28%, rgba(27, 205, 255, 0.12), transparent 68%),
    #090712;
}
.device-showcase-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 6, 14, 0.02), rgba(8, 6, 14, 0.2) 72%, rgba(8, 6, 14, 0.48));
}
.device-showcase-badges {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.device-showcase-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(12, 10, 20, 0.7);
  border: 1px solid rgba(244, 241, 251, 0.18);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.device-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
  margin-top: clamp(18px, 3vw, 28px);
}
.device-card {
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(244, 241, 251, 0.06), rgba(244, 241, 251, 0.025));
  border: 1px solid rgba(244, 241, 251, 0.11);
  box-shadow: 0 26px 80px -54px rgba(0, 0, 0, 0.95);
}
.device-card img {
  aspect-ratio: 16 / 9;
  object-position: center;
}
.device-card div { padding: 18px 20px 22px; }
.device-card h3 {
  font-size: clamp(20px, 2vw, 26px);
  margin-bottom: 8px;
}
.device-card p,
.device-seo-note {
  color: rgba(244, 241, 251, 0.72);
  font-size: 15px;
  line-height: 1.55;
}
.device-seo-note {
  max-width: 880px;
  margin: clamp(18px, 3vw, 28px) auto 0;
  padding: 16px 20px;
  border-radius: 999px;
  text-align: center;
  background: rgba(244, 241, 251, 0.045);
  border: 1px solid rgba(244, 241, 251, 0.09);
}
@media (max-width: 760px) {
  .device-showcase-hero {
    border-radius: 20px;
    aspect-ratio: 16 / 9;
  }
  .device-showcase-grid { grid-template-columns: 1fr; }
  .device-showcase-badges {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .device-showcase-badges span {
    min-height: 30px;
    padding: 7px 10px;
    font-size: 11px;
  }
  .device-card { border-radius: 18px; }
  .device-seo-note {
    border-radius: 18px;
    text-align: left;
  }
}

/* ---------- 14. О создателе ---------- */
.creator { padding-block: var(--section-pad); }
.creator-card {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  background: var(--panel);
  border: 1px solid rgba(244, 241, 251, 0.08);
  border-radius: var(--radius-l);
  padding: clamp(26px, 4vw, 44px);
}
.creator-portrait {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-l);
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.creator-portrait svg { width: 46%; height: 46%; color: rgba(255,255,255,0.92); }
.creator-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.25), transparent 60%);
}
.creator-copy .eyebrow { margin-bottom: 14px; }
.creator-copy h2 { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 6px; }
.creator-copy .creator-role { color: var(--accent); font-weight: 700; font-size: 15px; margin-bottom: 16px; }
.creator-copy p { color: var(--muted); font-size: 15.5px; margin-bottom: 14px; }
.creator-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 36px);
  margin-top: 22px;
}
.creator-stats div strong { display: block; font-size: 26px; font-weight: 800; }
.creator-stats div span { color: var(--muted); font-size: 13px; }
/* Прямая речь автора. Блок «создано практиком» без неё читается как строчка
   из пресс-релиза: цифры есть, человека нет. */
.creator-quote {
  margin: 18px 0 4px;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,.04);
  border-radius: 0 14px 14px 0;
  color: #e6e1f5;
  font-size: 15.5px;
  line-height: 1.6;
  font-style: italic;
}
.creator-more { margin-top: 14px; font-size: 15px; }
.creator-more a { color: var(--accent); text-decoration: none; font-weight: 700; }
.creator-more a:hover { text-decoration: underline; }

@media (max-width: 820px) {
  .creator-card { grid-template-columns: 1fr; }
  .creator-portrait { max-width: 220px; margin-inline: auto; }
}

/* ---------- 14. Тарифы ---------- */
.pricing { padding-block: var(--section-pad); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 24px);
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid rgba(244, 241, 251, 0.1);
  border-radius: var(--radius-l);
  padding: clamp(26px, 3vw, 34px);
}
.price-card.popular {
  border-color: rgba(255, 59, 127, 0.5);
  box-shadow: var(--shadow-glow);
  background: linear-gradient(160deg, rgba(255,59,127,0.08), rgba(123,47,247,0.08)), var(--panel);
  transform: translateY(-8px);
}
.price-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
.price-card h3 { font-size: 18px; color: var(--muted); font-weight: 700; }
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-block: 14px 6px;
}
.price-amount .num { font-size: clamp(36px, 4.4vw, 48px); font-weight: 800; letter-spacing: -0.02em; }
.price-amount .cur { font-size: 20px; font-weight: 700; color: var(--muted); }
.price-period { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.price-features { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; flex-grow: 1; }
.price-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.price-features svg { width: 18px; height: 18px; color: var(--ok); flex-shrink: 0; margin-top: 2px; }
.price-card .btn { width: 100%; }

/* ---- Кнопки в карточках тарифов ----
   Раньше «Попробовать бесплатно» и «Взять на месяц» были btn-ghost: прозрачный
   фон и прозрачная рамка. На тёмной карточке это читалось как подпись, а не как
   кнопка, — рядом с яркой «Купить доступ навсегда» два тарифа из трёх выглядели
   некликабельными. Теперь у них своя рамка, заметная заливка и подсветка при
   наведении: фиолетовая у демо, бирюзовая у месяца, чтобы карточки различались
   и ни одна не спорила с главной розовой. */
.price-card .btn-ghost {
  padding: 14px 26px;
  font-weight: 800;
  color: var(--text);
  background: rgba(244, 241, 251, 0.06);
  border: 1.5px solid rgba(244, 241, 251, 0.28);
  box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.7);
}
.price-card .btn-ghost:hover,
.price-card .btn-ghost:focus-visible {
  transform: translateY(-2px);
  background: rgba(123, 47, 247, 0.16);
  border-color: rgba(154, 96, 255, 0.85);
  box-shadow: 0 14px 34px -12px rgba(123, 47, 247, 0.75);
}
/* Вторая карточка — платный месяц: свой цвет, чтобы глаз отличал её от демо. */
.price-card:has(.btn-ghost[data-plan="week"]) .btn-ghost,
.price-card .btn-ghost[data-plan="week"] {
  background: rgba(35, 209, 139, 0.10);
  border-color: rgba(35, 209, 139, 0.55);
}
.price-card .btn-ghost[data-plan="week"]:hover,
.price-card .btn-ghost[data-plan="week"]:focus-visible {
  background: rgba(35, 209, 139, 0.2);
  border-color: rgba(35, 209, 139, 0.95);
  box-shadow: 0 14px 34px -12px rgba(35, 209, 139, 0.6);
}
/* Палец на сенсорном экране не «наводится»: без active-состояния нажатие
   выглядит как промах. */
.price-card .btn-ghost:active { transform: translateY(0) scale(0.985); }
@media (prefers-reduced-motion: reduce) {
  .price-card .btn-ghost:hover, .price-card .btn-ghost:active { transform: none; }
}
.price-save { font-size: 12.5px; color: var(--ok); font-weight: 700; margin-top: 8px; text-align: center; }

.pricing-note {
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.pricing-note span { display: inline-flex; align-items: center; gap: 7px; }
.pricing-note svg { width: 15px; height: 15px; }

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .price-card.popular { transform: none; order: -1; }
}

/* ---------- 15. Отзывы ---------- */
.testimonials { padding-block: var(--section-pad); }
.testi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.4vw, 24px);
}
.testi-card {
  background: var(--panel);
  border: 1px solid rgba(244, 241, 251, 0.08);
  border-radius: var(--radius-l);
  padding: clamp(22px, 2.8vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testi-stars { display: flex; gap: 3px; }
.testi-stars svg { width: 16px; height: 16px; color: #ffc24b; }
.testi-card p.quote { font-size: 15px; color: var(--text); }
.testi-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testi-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
}
.testi-author div strong { display: block; font-size: 14px; }
.testi-author div span { color: var(--muted); font-size: 12.5px; }
@media (max-width: 760px) { .testi-grid { grid-template-columns: 1fr; } }

/* ---------- 16. FAQ ---------- */
.faq { padding-block: var(--section-pad); }
.faq-list { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--panel);
  border: 1px solid rgba(244, 241, 251, 0.08);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 15.5px;
  text-align: left;
}
.faq-q .chev { width: 20px; height: 20px; color: var(--muted); transition: transform 0.3s var(--ease); flex-shrink: 0; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); color: var(--accent); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease);
}
.faq-a-inner { padding: 0 22px 20px; color: var(--muted); font-size: 14.5px; }

/* ---------- 17. Финальный CTA ---------- */
.final-cta { padding-block: var(--section-pad); }
.final-cta-panel {
  position: relative;
  text-align: center;
  border-radius: var(--radius-l);
  padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 40px);
  background: var(--grad);
  overflow: hidden;
}
.final-cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.25), transparent 55%);
}
.final-cta-panel h2 {
  position: relative;
  font-size: clamp(26px, 4.2vw, 42px);
  color: #fff;
  max-width: 18ch;
  margin-inline: auto;
}
.final-cta-panel p {
  position: relative;
  color: rgba(255,255,255,0.9);
  font-size: clamp(15px, 1.8vw, 17px);
  margin-top: 14px;
  max-width: 52ch;
  margin-inline: auto;
}
.final-cta-actions {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.final-cta-panel .btn-primary { background: #fff; color: #1a0d22; box-shadow: 0 10px 30px -8px rgba(0,0,0,0.4); }
.final-cta-panel .btn-secondary { border-color: rgba(255,255,255,0.5); }

/* ---------- 18. Подвал ---------- */
.site-footer { padding-top: var(--section-pad); border-top: 1px solid rgba(244, 241, 251, 0.08); }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(24px, 4vw, 40px);
  padding-bottom: clamp(32px, 5vw, 56px);
}
.footer-brand .logo { margin-bottom: 14px; }
.footer-brand p { color: var(--muted); font-size: 14px; max-width: 32ch; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(244, 241, 251, 0.06);
  border: 1px solid rgba(244, 241, 251, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-social svg { width: 18px; height: 18px; }
.footer-social a:hover { background: rgba(124, 92, 255, 0.18); border-color: var(--accent); color: var(--accent); }
.footer-urgent { margin-top: 14px; font-size: 13.5px; }
.footer-urgent a { color: var(--accent); font-weight: 600; }
.footer-urgent a:hover { text-decoration: underline; }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 14.5px; color: var(--text); }
.footer-col a:hover { color: var(--accent); }

.footer-cloud {
  padding-block: 24px;
  border-top: 1px solid rgba(244, 241, 251, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-cloud a, .footer-cloud span {
  font-size: 12.5px;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(244, 241, 251, 0.04);
}

.footer-partners {
  padding-block: 20px;
  border-top: 1px solid rgba(244, 241, 251, 0.08);
}
.footer-partners-lead {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 12px;
  max-width: 820px;
}
.footer-partners-lead a { color: var(--text); font-weight: 700; }
.footer-partners-lead a:hover { color: var(--accent); }
.footer-partners-links { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-partners-links a {
  font-size: 12.5px;
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(244, 241, 251, 0.12);
  background: rgba(244, 241, 251, 0.03);
  transition: color .2s, border-color .2s, background .2s;
}
.footer-partners-links a:hover { color: var(--text); border-color: rgba(255,59,127,.5); background: rgba(255,59,127,.08); }
.footer-partners-links a b { color: var(--text); font-weight: 800; }

.footer-bottom {
  padding-block: 22px;
  border-top: 1px solid rgba(244, 241, 251, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
}
.footer-bottom .legal-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--text); }

@media (max-width: 880px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ---------- 19. Cookie-баннер ---------- */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 140%);
  width: min(640px, calc(100% - 32px));
  background: var(--panel);
  border: 1px solid rgba(244, 241, 251, 0.14);
  border-radius: var(--radius-m);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
  z-index: 200;
  transition: transform 0.4s var(--ease);
}
.cookie-banner.visible { transform: translate(-50%, 0); }
.cookie-banner p { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.cookie-banner p a { color: var(--accent); font-weight: 600; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions .btn { padding: 10px 18px; font-size: 13.5px; }

.cookie-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 6, 14, 0.7);
  backdrop-filter: blur(6px);
}
.cookie-settings-modal.visible { display: flex; }
.cookie-settings-box {
  width: min(440px, 100%);
  background: var(--panel);
  border: 1px solid rgba(244, 241, 251, 0.12);
  border-radius: var(--radius-m);
  padding: 26px;
  max-height: 86vh;
  overflow-y: auto;
}
.cookie-settings-box h3 { font-size: 18px; margin-bottom: 16px; }
.cookie-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(244, 241, 251, 0.08);
}
.cookie-row div strong { display: block; font-size: 14px; }
.cookie-row div span { color: var(--muted); font-size: 12.5px; }
.toggle { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.toggle input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.toggle .track {
  position: absolute;
  inset: 0;
  background: rgba(244, 241, 251, 0.15);
  border-radius: 999px;
  transition: background-color 0.25s;
}
.toggle .track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.25s var(--ease);
}
.toggle input:checked + .track { background: var(--grad); }
.toggle input:checked + .track::after { transform: translateX(18px); }
.toggle input:disabled + .track { opacity: 0.6; cursor: not-allowed; }
.cookie-settings-actions { display: flex; gap: 10px; margin-top: 20px; }

/* ---------- 20. Чат-виджет «Никита» ---------- */
.chat-launcher {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 34px -10px rgba(255, 59, 127, 0.6);
  z-index: 150;
  transition: transform 0.25s var(--ease);
}
.chat-launcher:hover { transform: scale(1.06); }
.chat-launcher svg { width: 26px; height: 26px; color: #fff; }
.chat-launcher .chat-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ok);
  border: 2px solid var(--bg);
}

.chat-window {
  position: fixed;
  right: clamp(10px, 3vw, 28px);
  bottom: clamp(82px, 12vw, 100px);
  width: min(360px, calc(100vw - 20px));
  max-height: min(560px, calc(100vh - 120px));
  background: var(--panel);
  border: 1px solid rgba(244, 241, 251, 0.12);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.98);
  transition: all 0.25s var(--ease);
}
.chat-window.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--grad-soft);
  border-bottom: 1px solid rgba(244, 241, 251, 0.1);
}
.chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.chat-head div strong { display: block; font-size: 14.5px; }
.chat-head div span { color: var(--ok); font-size: 12px; display: flex; align-items: center; gap: 5px; }
.chat-head div span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.chat-close { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.chat-close:hover { background: rgba(244, 241, 251, 0.08); }
.chat-close svg { width: 18px; height: 18px; }

/* Прямые контакты видны сразу после открытия поддержки. */
.chat-messengers{display:flex;flex-direction:column;gap:8px;width:100%;padding:12px 18px;border-bottom:1px solid rgba(244,241,251,.1);flex-shrink:0}
.chat-messengers-title{font-size:12px;line-height:1.3;font-weight:650;color:#c8bfd5}
.chat-messengers-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.chat-messenger{min-width:0;min-height:46px;padding:7px 4px;display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid rgba(255,255,255,.15);border-radius:12px;color:#f8f5ff;text-decoration:none;font-size:11px;line-height:1.2;font-weight:700;transition:background .18s,border-color .18s}
.chat-messenger svg{width:18px;height:18px;flex:none}
.chat-messenger--telegram{background:rgba(42,165,230,.14)}
.chat-messenger--whatsapp{background:rgba(37,211,102,.13)}
.chat-messenger--max{background:rgba(160,95,245,.18)}
.chat-messenger:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.14)}
.chat-messenger:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:350px){.chat-messengers-links{grid-template-columns:1fr}.chat-messenger{min-height:44px}}
.chat-body { min-height: 40px; padding: 16px 18px; overflow-y: auto; flex-grow: 1; display: flex; flex-direction: column; gap: 12px; }
.chat-msg {
  background: rgba(244, 241, 251, 0.06);
  border-radius: 14px 14px 14px 4px;
  padding: 11px 14px;
  font-size: 13.5px;
  max-width: 88%;
}
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-suggestions button {
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 59, 127, 0.1);
  border: 1px solid rgba(255, 59, 127, 0.25);
  color: var(--accent);
  font-weight: 600;
}
.chat-suggestions button:hover { background: rgba(255, 59, 127, 0.18); }

.chat-form { padding: 14px 16px; border-top: 1px solid rgba(244, 241, 251, 0.1); display: flex; flex-direction: column; gap: 8px; }
.chat-form input, .chat-form textarea {
  width: 100%;
  background: rgba(244, 241, 251, 0.05);
  border: 1px solid rgba(244, 241, 251, 0.14);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
}
.chat-form textarea { resize: vertical; min-height: 56px; }
.chat-form .btn { width: 100%; }
.chat-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; line-height: 1.4; color: #9a93b0; cursor: pointer; }
.chat-consent input { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; accent-color: #ff3b7f; cursor: pointer; }
.chat-consent a { color: #ff3b7f; }
.chat-success { display: none; padding: 16px 18px; font-size: 13.5px; color: var(--ok); }
.chat-success.visible { display: block; }

/* ---------- 21. Reveal-анимации ---------- */
.reveal { opacity: 1; transform: none; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 22. Утилиты ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  z-index: 999;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ---------- 23. Большие экраны / проектор ---------- */
@media (min-width: 1600px) {
  :root { --max-w: 1320px; }
  body { font-size: 17px; }
}

/* Подпись под демо-кнопкой в hero */
.hero-demo-note{color:var(--muted);font-size:13px;margin-top:10px}

/* ===== Фото создателя + сайт/почта ===== */
.creator-portrait{aspect-ratio:4/5}
.creator-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.creator-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.creator-links a{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;text-decoration:none;
  padding:9px 16px;border-radius:11px;border:1px solid rgba(255,255,255,.14);color:var(--text);transition:.15s}
.creator-links a.creator-site{background:var(--grad);border:none;color:#fff;box-shadow:0 8px 22px rgba(123,47,247,.35)}
.creator-links a:hover{transform:translateY(-1px);border-color:var(--accent)}

/* ===== Галерея скриншотов ===== */
.screens{padding-block:clamp(48px,7vw,88px)}
.screens-grid{columns:2;column-gap:clamp(16px,2.4vw,26px);margin-top:clamp(24px,4vw,40px)}
.screens-grid .shot{break-inside:avoid;margin:0 0 clamp(16px,2.4vw,26px);border-radius:18px;overflow:hidden;
  position:relative;border:1.6px solid transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
    linear-gradient(135deg,var(--accent),#ffc83d 45%,var(--accent2)) border-box;
  box-shadow:0 18px 50px -14px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.screens-grid .shot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.14) 48%,transparent 64%);
  transform:translateX(-130%)}
.screens-grid .shot:hover{transform:translateY(-6px);
  box-shadow:0 26px 72px -14px rgba(255,59,127,.42), inset 0 0 0 1px rgba(255,255,255,.06)}
.screens-grid .shot:hover::after{animation:shotSheen 1.1s ease}
@keyframes shotSheen{to{transform:translateX(130%)}}
.screens-grid .shot img{display:block;width:100%;height:auto;transition:transform .6s var(--ease)}
.screens-grid .shot:hover img{transform:scale(1.045)}
.screens-grid .shot figcaption{padding:12px 16px;font-size:14px;color:var(--muted);font-weight:600;
  position:relative;z-index:3;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
@media (max-width:720px){ .screens-grid{columns:1} }

/* ===== Кнопка «наверх» ===== */
.to-top{position:fixed;left:24px;bottom:24px;z-index:290;width:46px;height:46px;border:none;border-radius:50%;cursor:pointer;color:#fff;background:linear-gradient(135deg,#ff3b7f,#7b2ff7);box-shadow:0 10px 26px rgba(123,47,247,.45);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease}
.to-top.show{opacity:1;transform:none}
.to-top svg{width:22px;height:22px}

/* ===== Секция «Как пользоваться» (видео) ===== */
.howto{padding:72px 0}
.howto h2{text-align:center;margin:0}
.howto .section-sub{text-align:center;max-width:660px;margin:12px auto 30px;color:#9a93b0;line-height:1.55}
.howto-video{max-width:900px;margin:0 auto;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 90px rgba(0,0,0,.5);background:#000}
.howto-video video{display:block;width:100%;height:auto}

/* ===== YouTube-туториал (кликабельная обложка → YouTube) ===== */
.yt-tutorial{max-width:900px;margin:28px auto 0}
.yt-lead{text-align:center;color:#9a93b0;font-size:15px;line-height:1.55;margin:0 0 16px}
.yt-card{position:relative;display:block;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 90px rgba(0,0,0,.5);background:#000;aspect-ratio:16/9;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.yt-card:hover{transform:translateY(-3px);box-shadow:0 36px 100px rgba(0,0,0,.6)}
.yt-thumb{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease),filter .25s var(--ease)}
.yt-card:hover .yt-thumb{transform:scale(1.03);filter:brightness(.82)}
.yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:84px;height:60px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.yt-play svg{width:100%;height:100%}
/* Значок «плей» — в фирменном цвете платформы. Красный треугольник YouTube на
   кнопке, ведущей на RuTube, сбивал с толку. */
.yt-play .yt-play-bg{fill:#00a1e0;opacity:.94;transition:opacity .25s var(--ease)}
.yt-card:hover .yt-play .yt-play-bg{opacity:1}
.yt-badge{position:absolute;left:16px;bottom:14px;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:rgba(12,10,20,.72);backdrop-filter:blur(6px);color:#fff;font-size:13px;font-weight:700;letter-spacing:.01em}
@media (max-width:560px){.yt-play{width:64px;height:46px}.yt-badge{font-size:12px;left:12px;bottom:12px}}
/* Запасная ссылка: обзор лежит и на YouTube — кому-то так привычнее */
.yt-alt{text-align:center;margin:12px 0 0;font-size:14px}
.yt-alt a{color:#9a93b0;text-decoration:none;border-bottom:1px dashed rgba(154,147,176,.45);padding-bottom:1px;transition:color .18s,border-color .18s}
.yt-alt a:hover{color:#fff;border-color:rgba(255,255,255,.6)}

/* ===== Живой чат-виджет: сообщения и ввод ===== */
.chat-msg{max-width:82%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.45;word-break:break-word;white-space:pre-wrap}
.chat-msg.them{align-self:flex-start;background:rgba(255,255,255,0.06);color:#f4f1fb;border-bottom-left-radius:5px}
.chat-msg.me{align-self:flex-end;background:linear-gradient(90deg,#ff3b7f,#7b2ff7);color:#fff;border-bottom-right-radius:5px}
.chat-quick{display:flex;flex-wrap:wrap;gap:8px}
.chat-quick button{background:rgba(255,59,127,0.12);border:1px solid rgba(255,59,127,0.35);color:#ff9ec2;border-radius:16px;padding:7px 13px;font-size:13px;cursor:pointer;font-family:inherit}
.chat-quick button:hover{background:rgba(255,59,127,0.2)}
.chat-firstfields{display:flex;flex-direction:column;gap:8px}
.chat-inputrow{display:flex;gap:8px;align-items:center}
.chat-inputrow input{flex:1}
.chat-send-btn{flex:0 0 44px;width:44px;height:44px;border:none;border-radius:12px;background:linear-gradient(135deg,#ff3b7f,#7b2ff7);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-send-btn:hover{filter:brightness(1.08)}
.chat-send-btn svg{width:20px;height:20px}
.chat-send-btn:disabled{opacity:.6;cursor:default}
.chat-consent.need{outline:1px solid #ff5d6c;border-radius:8px;padding:4px}

/* =====================================================================
   ПРАЗДНИЧНЫЕ АНИМАЦИИ И ИНТЕРАКТИВ (v2) — vanilla, CSP-safe
   ===================================================================== */

/* Шкала прогресса скролла */
#scrollProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;
  background:linear-gradient(90deg,var(--accent),var(--accent2),#ffc83d);
  box-shadow:0 0 14px rgba(255,59,127,.6);transition:width .12s linear;border-radius:0 3px 3px 0}

/* Плавающие частицы в hero */
.hero{position:relative;overflow:hidden}
.hero-particles{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.9}
.hero > .container{position:relative;z-index:2}
.hero .aurora{z-index:0}

/* Мерцание заголовка */
.hero-copy h1{background-image:linear-gradient(100deg,var(--text) 20%,#ffd3e6 40%,#c9b8ff 55%,var(--text) 75%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:heroShine 7s ease-in-out infinite}
@keyframes heroShine{0%,100%{background-position:0% center}50%{background-position:120% center}}

/* 3D-наклон макета сцены */
.hero-visual{perspective:1000px}
.hero-visual .scene-mock{transition:transform .25s var(--ease);transform-style:preserve-3d;will-change:transform}

/* Бегущая лента типов праздников */
.occasions-marquee{position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.occasions-marquee .marquee-track{display:flex;gap:14px;width:max-content;animation:evpMarquee 34s linear infinite}
.occasions-marquee:hover .marquee-track{animation-play-state:paused}
.occasions-marquee .occasion-chip{flex:0 0 auto;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.occasions-marquee .occasion-chip:hover{transform:translateY(-4px);box-shadow:var(--shadow-glow)}
@keyframes evpMarquee{to{transform:translateX(calc(-50% - 7px))}}

/* Карусель отзывов */
.testimonials.carousel-on .testi-viewport{overflow:hidden}
.testimonials.carousel-on .testi-grid{display:flex;flex-wrap:nowrap;gap:24px;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);will-change:transform}
.testimonials.carousel-on .testi-card{flex:0 0 100%;opacity:1;transform:none}
@media(min-width:760px){.testimonials.carousel-on .testi-card{flex-basis:calc(50% - 12px)}}
@media(min-width:1100px){.testimonials.carousel-on .testi-card{flex-basis:calc(33.333% - 16px)}}
.testi-dots{display:flex;gap:9px;justify-content:center;margin-top:26px}
.testi-dots button{width:9px;height:9px;padding:0;border:none;border-radius:50%;
  background:rgba(255,255,255,.22);cursor:pointer;transition:.28s var(--ease)}
.testi-dots button:hover{background:rgba(255,255,255,.4)}
.testi-dots button.active{width:28px;border-radius:6px;background:var(--grad)}

/* Искры от кнопок */
.spark{position:fixed;pointer-events:none;z-index:3000;border-radius:50%;will-change:transform,opacity}

/* Реквизит на кнопках */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:none}
.btn-primary:hover::after{animation:btnSheen .9s ease}
@keyframes btnSheen{to{left:130%}}

/* Пульсация точки/иконок в чипах при наведении */
.occasion-chip .ico{transition:transform .3s var(--ease)}
.occasion-chip:hover .ico{transform:rotate(-8deg) scale(1.12)}

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .hero-copy h1{animation:none}
  .occasions-marquee .marquee-track{animation:none;flex-wrap:wrap;justify-content:center}
  #scrollProgress{display:none}
}
@media (max-width: 760px) {
  .aurora::before,
  .aurora::after { filter: blur(54px); opacity: 0.22; }
  .hero-rays,
  .hero-conf,
  .section-divider { display: none; }
  .hero-copy h1 { animation: none; color: var(--text); background-image: none; }
  .hero-visual .scene-mock,
  .screens-grid .shot,
  .occasion-chip,
  .illus-item,
  .rev-card { transition: none; }
  .occasions-marquee .marquee-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}

/* Логотип-медальон (картинка вместо SVG-значка) */
.logo .logo-img{width:40px;height:40px;border-radius:50%;background:none!important;object-fit:cover;
  padding:0;box-shadow:0 0 16px rgba(255,180,60,.35);flex:0 0 auto}

/* Реальные скриншоты вместо нарисованных макетов */
.scene-stage{padding:0;overflow:hidden}
.scene-stage img{width:100%;height:100%;object-fit:cover;display:block}
.screen-box .screen-body{padding:0;overflow:hidden}
.screen-box .screen-body img{width:100%;height:100%;object-fit:cover;display:block}
.screen-box.remote .screen-body{aspect-ratio:16/10;padding:0;flex-direction:row;gap:0}

/* Интерактивное колесо в hero (JS) */
#heroStage{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
#heroWheel{height:98%;width:auto;max-width:98%;aspect-ratio:1;display:block;transition:transform .18s var(--ease)}
#heroStage:hover #heroWheel{transform:scale(1.015)}
.hero-wheel-hint{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:3;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:700;font-size:12.5px;
  padding:7px 15px;border-radius:999px;cursor:pointer;transition:.25s var(--ease);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-wheel-hint:hover{background:rgba(255,255,255,.2);transform:translateX(-50%) translateY(-1px)}
.hero-wheel-res{position:absolute;bottom:7%;left:50%;transform:translate(-50%,10px);opacity:0;transition:.4s var(--ease);z-index:3;
  background:rgba(20,17,30,.94);border:1.5px solid rgba(255,215,106,.55);color:#fff;font-weight:800;
  font-size:clamp(15px,2.1vw,22px);padding:9px 22px;border-radius:14px;white-space:nowrap;pointer-events:none;
  box-shadow:0 8px 30px rgba(0,0,0,.5)}
.hero-wheel-res.show{opacity:1;transform:translate(-50%,0)}
.hero-spark{position:fixed;pointer-events:none;z-index:1200;border-radius:50%;will-change:transform,opacity}

/* ===== Декоративные ассеты (ChatGPT-арт) ===== */
.hero{position:relative;overflow:hidden}
.hero-grid{position:relative;z-index:2}
.hero-decor{position:absolute;pointer-events:none;z-index:0}
.hero-rays{top:-8%;left:50%;transform:translateX(-50%);width:min(1100px,120%);opacity:.45;mix-blend-mode:screen}
.hero-conf{top:2%;right:-6%;width:min(640px,64%);opacity:.5;mix-blend-mode:screen}

/* Витрина: hero-сцена + иконки модулей */
.showcase{position:relative;padding:36px 0 8px}
.showcase-hero{position:relative;max-width:1000px;margin:0 auto;border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 80px rgba(123,47,247,.30)}
.showcase-hero .sc-shot{width:100%;display:block}
.showcase-hero .sc-conf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;mix-blend-mode:screen;pointer-events:none}
.showcase-icons{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;max-width:1000px;margin:28px auto 0}
.sc-ic{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.sc-ic img{width:clamp(62px,9vw,108px);height:auto;filter:drop-shadow(0 8px 22px rgba(255,59,127,.4));transition:transform .22s ease}
.sc-ic:hover img{transform:translateY(-7px) scale(1.06)}
.sc-ic span{font-size:13px;color:var(--muted);font-weight:600}
.section-divider{display:block;width:100%;max-width:1200px;margin:34px auto 0;opacity:.8;pointer-events:none}
.steps-info{display:block;width:100%;max-width:940px;margin:0 auto 30px;border-radius:16px;
  border:1px solid rgba(255,255,255,.06);box-shadow:0 16px 54px rgba(0,0,0,.42)}
@media(max-width:760px){ .showcase-icons{grid-template-columns:repeat(3,1fr);gap:12px} }
@media(max-width:420px){ .showcase-icons{grid-template-columns:repeat(3,1fr)} .sc-ic span{font-size:11px} }

/* центрирование блоков тарифов с 2 карточками */
.pricing-grid.pg-2{grid-template-columns:repeat(2,minmax(260px,340px));justify-content:center}
@media (max-width:900px){.pricing-grid.pg-2{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}

/* флаги в переключателе языков */
.lang-menu{position:fixed!important;top:0;left:0;right:0;width:100%;min-width:0;transform:translateY(-100%);border-radius:0 0 18px 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:16px 18px 20px;max-height:none;overflow:visible;box-shadow:0 18px 44px rgba(0,0,0,.5);z-index:1000}
.lang-switch.open .lang-menu{transform:translateY(0)}
.lang-menu button{display:flex;align-items:center;gap:9px;text-align:left;white-space:nowrap;padding:10px 12px;font-size:14px;border-radius:10px}
.lang-flag{width:20px;height:14px;flex:0 0 20px;border-radius:2px;overflow:hidden;display:inline-flex;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.lang-flag svg{width:100%;height:100%;display:block}

/* галерея отзывов ведущих */
.rev-sub{text-align:center;color:#b9b3d0;max-width:640px;margin:0 auto 22px;font-size:15px}
.rev-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin:0 0 34px}
.rev-card{border:0;padding:0;background:none;cursor:zoom-in;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s ease,box-shadow .2s}
.rev-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.rev-card img{width:100%;height:auto;display:block;border-radius:14px}
.rev-lb{position:fixed;inset:0;background:rgba(5,4,10,.9);display:none;align-items:center;justify-content:center;z-index:100000;padding:20px}
.rev-lb.open{display:flex}
.rev-lb img{max-width:min(92vw,520px);max-height:92vh;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.7)}
.rev-lb .rev-close{position:absolute;top:14px;right:22px;font-size:34px;color:#fff;cursor:pointer;background:none;border:0;line-height:1}
.rev-lb .rev-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:34px;color:#fff;background:rgba(0,0,0,.35);border:0;cursor:pointer;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.rev-lb .rev-prev{left:14px}.rev-lb .rev-next{right:14px}
@media(max-width:560px){.rev-gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.rev-lb .rev-nav{width:44px;height:44px;font-size:26px}}

/* новые иконки (растровые, прозрачные) */
.feature-icon{background:none!important;border:none!important;width:56px;height:56px}
.feature-icon img{width:100%;height:100%;object-fit:contain;display:block}
.pain-card .pain-icon{background:none;width:60px;height:60px}
.pain-icon img{width:100%;height:100%;object-fit:contain;display:block}
.hero-ic{width:22px;height:22px;object-fit:contain;vertical-align:middle;margin-right:3px}
.need-card .em-ic,.rl-card .em-ic{width:48px;height:48px;object-fit:contain;display:block}

/* галерея PULTEVENT в деле — сетка 3 в ряд */
.illus-sec{padding:20px 0 40px}
.illus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:0 auto;padding:0 20px}
.illus-item{background:linear-gradient(160deg,rgba(123,47,247,.12),rgba(255,59,127,.06));border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:14px;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;transition:transform .2s ease,border-color .2s ease,box-shadow .2s}
.illus-item:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 16px 40px rgba(123,47,247,.28)}
.illus-item img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 26px rgba(0,0,0,.4))}
@media(max-width:900px){.illus-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:560px){.illus-grid{grid-template-columns:1fr}}

/* видеообзор на лендинге */
.hero-video-sec{padding:6px 0 34px}
.hv-frame{max-width:900px;margin:0 auto;position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;box-shadow:0 22px 60px rgba(123,47,247,.35);border:1px solid rgba(255,255,255,.1)}
.hv-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:940px){.hv-frame{margin:0 16px;max-width:none}}

.hv-frame .hv-play{position:absolute;inset:0;display:block;text-decoration:none}
.hv-frame .hv-play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.hv-frame .hv-play:hover img{transform:scale(1.03)}
.hv-frame .hv-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;border-radius:50%;background:linear-gradient(135deg,#ff3b7f,#7b2ff7);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px rgba(0,0,0,.55);transition:transform .2s ease}
.hv-frame .hv-play:hover .hv-btn{transform:translate(-50%,-50%) scale(1.09)}
.hv-frame .hv-btn svg{width:36px;height:36px;margin-left:5px}
.hv-frame .hv-lbl{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#fff;font-weight:700;font-size:15px;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.hv-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35));pointer-events:none}

/* Соц-иконки в шапке */
.header-social{display:flex;gap:8px;align-items:center;margin-right:4px}
.header-social a{width:34px;height:34px;border-radius:9px;background:rgba(244,241,251,.06);border:1px solid rgba(244,241,251,.1);display:flex;align-items:center;justify-content:center;color:var(--text,#f4f1fb);transition:.15s}
.header-social svg{width:17px;height:17px}
.header-social a:hover{background:rgba(124,92,255,.18);border-color:var(--accent);color:var(--accent)}
@media(max-width:900px){.header-social{display:none}}

.pricing-grid.pg-3{grid-template-columns:repeat(3,minmax(220px,320px));justify-content:center}
@media (max-width:900px){.pricing-grid.pg-3{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
/* На телефоне месячный тариф — первый: он должен быть виден без длинной прокрутки. */
@media (max-width:900px){.pricing-grid.pg-3 .price-card.monthly{order:-1}.pricing-grid.pg-3 .price-card.popular{order:0}}

/* ===================== КАТАЛОГ ИГР ===================== */
.games {
  padding: 96px 0;
  background:
    radial-gradient(720px 420px at 14% 8%, rgba(255, 59, 127, 0.13), transparent 62%),
    radial-gradient(780px 480px at 88% 16%, rgba(123, 47, 247, 0.16), transparent 66%),
    linear-gradient(180deg, transparent, rgba(244, 241, 251, 0.018) 18%, transparent 86%);
}
.games-group { margin-bottom: 50px; }
.games-group:last-of-type { margin-bottom: 26px; }
.games-group-head { margin-bottom: 20px; }
.games-group-head h3 {
  margin: 0 0 4px;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--text, #f4f1fb);
  letter-spacing: -0.01em;
}
.games-group-head p { margin: 0; color: #b9b3d0; font-size: 15px; line-height: 1.5; }

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}
.game-card {
  --g1: #ff3b7f;
  --g2: #7b2ff7;
  --g3: #1bcdff;
  --poster-glyph: "?";
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 306px;
  padding: 14px 14px 18px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(244, 241, 251, 0.075), rgba(244, 241, 251, 0.032)),
    radial-gradient(220px 140px at 72% 18%, color-mix(in srgb, var(--g2) 34%, transparent), transparent 70%);
  border: 1px solid rgba(244, 241, 251, 0.115);
  text-decoration: none;
  color: inherit;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 18px 58px -42px rgba(0, 0, 0, 0.9);
  transition: transform .22s var(--ease, ease), border-color .22s, background .22s, box-shadow .22s;
}
.game-card::before {
  content: "";
  display: block;
  width: 100%;
  height: 150px;
  margin-bottom: 8px;
  border-radius: 17px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.55) 0 2px, transparent 3px 100%),
    radial-gradient(circle at 76% 24%, rgba(255,255,255,.38) 0 2px, transparent 3px 100%),
    radial-gradient(circle at 34% 78%, rgba(255,255,255,.18) 0 2px, transparent 3px 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--g1) 92%, #fff 4%), color-mix(in srgb, var(--g2) 88%, #000 4%) 56%, color-mix(in srgb, var(--g3) 78%, #090714 12%));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 -42px 70px rgba(5,4,12,.32), inset 0 0 0 1px rgba(255,255,255,.04);
}
.game-card::after {
  content: var(--poster-glyph);
  position: absolute;
  top: 35px;
  right: 24px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 74px;
  height: 74px;
  padding: 0 11px;
  border-radius: 24px;
  color: #fff;
  font-size: 29px;
  font-weight: 1000;
  letter-spacing: -0.04em;
  background:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.08)),
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.32), transparent 55%);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 18px 42px rgba(0,0,0,.34), 0 0 26px color-mix(in srgb, var(--g1) 44%, transparent);
  text-shadow: 0 2px 12px rgba(0,0,0,.32);
}
.game-card .game-ico {
  position: absolute;
  top: 36px;
  left: 28px;
  z-index: 2;
  width: 84px;
  height: 84px;
  border-radius: 26px;
  font-size: 0;
  line-height: 1;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.92), rgba(255,255,255,.28) 38%, transparent 39%),
    linear-gradient(135deg, rgba(255,255,255,.23), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 18px 36px rgba(0,0,0,.3), inset 0 0 20px rgba(255,255,255,.11);
}
.game-card .game-ico::before,
.game-card .game-ico::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 7px solid rgba(255,255,255,.78);
  box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--g1) 68%, transparent);
}
.game-card .game-ico::after {
  inset: auto 17px 17px auto;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow:
    -34px -5px 0 -4px rgba(255,255,255,.86),
    -18px -23px 0 -6px rgba(255,255,255,.78),
    0 0 24px color-mix(in srgb, var(--g3) 52%, transparent);
}
a.game-card:hover,
.game-card:hover {
  transform: translateY(-5px);
  background:
    linear-gradient(180deg, rgba(244, 241, 251, 0.105), rgba(244, 241, 251, 0.045)),
    radial-gradient(240px 160px at 72% 18%, color-mix(in srgb, var(--g2) 42%, transparent), transparent 70%);
  border-color: color-mix(in srgb, var(--g1) 50%, rgba(255,255,255,.12));
  box-shadow: 0 30px 82px -46px color-mix(in srgb, var(--g1) 55%, #000 45%);
}
.game-name {
  font-weight: 850;
  font-size: 18px;
  line-height: 1.16;
  color: var(--text, #f4f1fb);
  letter-spacing: -0.01em;
}
.game-desc { font-size: 13.5px; line-height: 1.48; color: #c4bdd8; }

.games-group:nth-of-type(2) .game-card:nth-child(1){--g1:#ff4d7d;--g2:#7b2ff7;--g3:#ffc83d;--poster-glyph:"КТО"}
.games-group:nth-of-type(2) .game-card:nth-child(2){--g1:#1bcdff;--g2:#7b2ff7;--g3:#ffb24d;--poster-glyph:"PHOTO"}
.games-group:nth-of-type(2) .game-card:nth-child(3){--g1:#ff8a3d;--g2:#d92bd5;--g3:#ffd76a;--poster-glyph:"360"}
.games-group:nth-of-type(2) .game-card:nth-child(4){--g1:#ffc83d;--g2:#ff3b7f;--g3:#7b2ff7;--poster-glyph:"777"}
.games-group:nth-of-type(2) .game-card:nth-child(5){--g1:#ff4d7d;--g2:#1bcdff;--g3:#7b2ff7;--poster-glyph:"REC"}
.games-group:nth-of-type(2) .game-card:nth-child(6){--g1:#7b2ff7;--g2:#23d18b;--g3:#ffd76a;--poster-glyph:"CELL"}

.games-group:nth-of-type(3) .game-card:nth-child(1){--g1:#ff3b7f;--g2:#3da5ff;--g3:#ffd76a;--poster-glyph:"IQ"}
.games-group:nth-of-type(3) .game-card:nth-child(2){--g1:#ffd76a;--g2:#ff3b7f;--g3:#7b2ff7;--poster-glyph:"1500"}
.games-group:nth-of-type(3) .game-card:nth-child(3){--g1:#23d18b;--g2:#3da5ff;--g3:#ff3b7f;--poster-glyph:"4X"}
.games-group:nth-of-type(3) .game-card:nth-child(4){--g1:#7b2ff7;--g2:#ff8a3d;--g3:#23d18b;--poster-glyph:"TRUE"}
.games-group:nth-of-type(3) .game-card:nth-child(5){--g1:#ff8a3d;--g2:#7b2ff7;--g3:#1bcdff;--poster-glyph:"TIME"}
.games-group:nth-of-type(3) .game-card:nth-child(6){--g1:#1bcdff;--g2:#ff3b7f;--g3:#ffd76a;--poster-glyph:"EDIT"}

.games-group:nth-of-type(4) .game-card:nth-child(1){--g1:#ff8a3d;--g2:#7b2ff7;--g3:#ffd76a;--poster-glyph:"WORD"}
.games-group:nth-of-type(4) .game-card:nth-child(2){--g1:#ffd76a;--g2:#d92bd5;--g3:#3da5ff;--poster-glyph:"SPIN"}
.games-group:nth-of-type(4) .game-card:nth-child(3){--g1:#23d18b;--g2:#7b2ff7;--g3:#1bcdff;--poster-glyph:"GRID"}
.games-group:nth-of-type(4) .game-card:nth-child(4){--g1:#ff4d7d;--g2:#ff8a3d;--g3:#ffd76a;--poster-glyph:"QUOTE"}
.games-group:nth-of-type(4) .game-card:nth-child(5){--g1:#3da5ff;--g2:#7b2ff7;--g3:#ff3b7f;--poster-glyph:"CODE"}
.games-group:nth-of-type(4) .game-card:nth-child(6){--g1:#23d18b;--g2:#ff3b7f;--g3:#ffd76a;--poster-glyph:"LINK"}

.games-group:nth-of-type(5) .game-card:nth-child(1){--g1:#1bcdff;--g2:#7b2ff7;--g3:#ff3b7f;--poster-glyph:"PLAY"}
.games-group:nth-of-type(5) .game-card:nth-child(2){--g1:#ff3b7f;--g2:#7b2ff7;--g3:#ffd76a;--poster-glyph:"VOCAL"}
.games-group:nth-of-type(5) .game-card:nth-child(3){--g1:#ff8a3d;--g2:#ff3b7f;--g3:#1bcdff;--poster-glyph:"BPM"}
.games-group:nth-of-type(5) .game-card:nth-child(4){--g1:#23d18b;--g2:#3da5ff;--g3:#ffd76a;--poster-glyph:"MOVE"}
.games-group:nth-of-type(5) .game-card:nth-child(5){--g1:#3da5ff;--g2:#23d18b;--g3:#ff3b7f;--poster-glyph:"STEP"}
.games-group:nth-of-type(5) .game-card:nth-child(6){--g1:#ffd76a;--g2:#ff3b7f;--g3:#7b2ff7;--poster-glyph:"STAR"}

.games-group:nth-of-type(6) .game-card:nth-child(1){--g1:#23d18b;--g2:#3da5ff;--g3:#7b2ff7;--poster-glyph:"QR"}
.games-group:nth-of-type(6) .game-card:nth-child(2){--g1:#ff8a3d;--g2:#ff3b7f;--g3:#ffd76a;--poster-glyph:"LOL"}
.games-group:nth-of-type(6) .game-card:nth-child(3){--g1:#7b2ff7;--g2:#1bcdff;--g3:#23d18b;--poster-glyph:"3D"}
.games-group:nth-of-type(6) .game-card:nth-child(4){--g1:#ff3b7f;--g2:#3da5ff;--g3:#ffd76a;--poster-glyph:"FEED"}
.games-group:nth-of-type(6) .game-card:nth-child(5){--g1:#1bcdff;--g2:#ff3b7f;--g3:#7b2ff7;--poster-glyph:"CAM"}

.games-group:nth-of-type(7) .game-card:nth-child(1){--g1:#23d18b;--g2:#ff8a3d;--g3:#ffd76a;--poster-glyph:"SHOW"}
.games-group:nth-of-type(7) .game-card:nth-child(2){--g1:#ff3b7f;--g2:#7b2ff7;--g3:#ffd76a;--poster-glyph:"DO"}
.games-group:nth-of-type(7) .game-card:nth-child(3){--g1:#111827;--g2:#7b2ff7;--g3:#ff3b7f;--poster-glyph:"ROLE"}
.games-group:nth-of-type(7) .game-card:nth-child(4){--g1:#ffd76a;--g2:#ff8a3d;--g3:#7b2ff7;--poster-glyph:"RND"}

.games-group:nth-of-type(8) .game-card:nth-child(1){--g1:#ff3b7f;--g2:#7b2ff7;--g3:#ffd76a;--poster-glyph:"SHOW"}
.games-group:nth-of-type(8) .game-card:nth-child(2){--g1:#ffd76a;--g2:#ff3b7f;--g3:#23d18b;--poster-glyph:"SCORE"}
.games-group:nth-of-type(8) .game-card:nth-child(3){--g1:#3da5ff;--g2:#7b2ff7;--g3:#ffd76a;--poster-glyph:"00:60"}
.games-group:nth-of-type(8) .game-card:nth-child(4){--g1:#ff8a3d;--g2:#23d18b;--g3:#ffd76a;--poster-glyph:"PAUSE"}
.games-group:nth-of-type(8) .game-card:nth-child(5){--g1:#7b2ff7;--g2:#3da5ff;--g3:#ff3b7f;--poster-glyph:"PLAN"}
.games-group:nth-of-type(8) .game-card:nth-child(6){--g1:#1bcdff;--g2:#ff3b7f;--g3:#ffd76a;--poster-glyph:"SFX"}
.games-group:nth-of-type(8) .game-card:nth-child(7){--g1:#23d18b;--g2:#7b2ff7;--g3:#3da5ff;--poster-glyph:"SLIDE"}
.games-group:nth-of-type(8) .game-card:nth-child(8){--g1:#1b7cff;--g2:#ff3b7f;--g3:#ffd76a;--poster-glyph:"2027"}

.games-note {
  text-align: center;
  margin: 26px auto 0;
  max-width: 680px;
  color: #b9b3d0;
  font-size: 14.5px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .games { padding: 66px 0; }
  .games-grid { grid-template-columns: 1fr; gap: 14px; }
  .game-card { min-height: 272px; padding: 12px 12px 16px; border-radius: 18px; }
  .game-card::before { height: 124px; border-radius: 14px; }
  .game-card::after { top: 27px; right: 22px; min-width: 60px; height: 60px; border-radius: 18px; font-size: 22px; }
  .game-card .game-ico { top: 28px; left: 24px; width: 68px; height: 68px; border-radius: 20px; }
  .game-card .game-ico::before { inset: 15px; border-width: 6px; }
  .game-card .game-ico::after { width: 19px; height: 19px; border-radius: 6px; }
  .game-name { font-size: 17px; }
  .game-desc { font-size: 13px; }
  .games-group-head h3 { font-size: 22px; }
}

/* Реальные AI-обложки игр: живые картинки вместо декоративных CSS-плиток */
.game-card {
  min-height: unset;
  padding: clamp(12px, 1.2vw, 15px) clamp(12px, 1.2vw, 15px) clamp(18px, 1.6vw, 22px);
}
.game-card::before,
.game-card::after,
.game-card .game-ico {
  display: none !important;
}
.game-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
  border-radius: 18px;
  overflow: hidden;
  background: #100d19;
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    0 18px 42px -24px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset;
}
.game-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
  transition: transform .34s var(--ease, ease), filter .34s var(--ease, ease);
}
a.game-card:hover .game-cover img,
.game-card:hover .game-cover img {
  transform: scale(1.018);
  filter: saturate(1.08) contrast(1.04);
}
.game-name,
.game-desc {
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .game-card {
    min-height: unset;
    padding: 11px 11px 16px;
  }
  .game-cover {
    border-radius: 15px;
    margin-bottom: 10px;
  }
}

/* Nine related covers share one image request; each tile retains a 16:9 frame. */
.game-cover--atlas {
  background-image: var(--atlas);
  background-size: 300% 300%;
  background-position: var(--atlas-x) var(--atlas-y);
  background-repeat: no-repeat;
}


/* =========================================================
   ШОУРИЛ — лента роликов с реальных площадок
   Съёмка вертикальная (телефон), поэтому карточка 9:16.
   В ленте крутится облегчённое превью без звука, полная
   версия с музыкой открывается в модальном плеере.
   ========================================================= */
.reel { padding: clamp(28px, 5vw, 56px) 0 clamp(20px, 4vw, 40px); }
.reel .section-head { margin-bottom: clamp(18px, 3vw, 30px); }

.reel-wrap { position: relative; }

/* Горизонтальная прокрутка вместо сетки: семь вертикальных карточек в ряд
   не помещаются даже на широком мониторе, а лента читается как рилсы. */
.reel-track {
  display: flex;
  gap: clamp(10px, 1.4vw, 18px);
  list-style: none;
  margin: 0;
  padding: 4px 0 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 59, 127, .5) transparent;
}
.reel-track::-webkit-scrollbar { height: 6px; }
.reel-track::-webkit-scrollbar-track { background: rgba(255, 255, 255, .06); border-radius: 3px; }
.reel-track::-webkit-scrollbar-thumb { background: rgba(255, 59, 127, .55); border-radius: 3px; }

.reel-item { flex: 0 0 auto; scroll-snap-align: start; }

.reel-card {
  position: relative;
  display: block;
  width: clamp(150px, 17vw, 214px);
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  overflow: hidden;
  background: var(--panel-2);
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.reel-card:hover,
.reel-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(255, 59, 127, .55);
  box-shadow: 0 22px 48px -18px rgba(255, 59, 127, .55);
}

.reel-prev {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Постер живёт в атрибуте poster, но пока превью не загружено, фон должен
     быть тёмным, иначе на светлой теме браузера мигает белый прямоугольник. */
  background: #0c0a14;
}

/* Затемнение снизу — под подпись. Отдельным слоем, чтобы не трогать видео. */
.reel-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  background: linear-gradient(180deg, rgba(12, 10, 20, 0), rgba(12, 10, 20, .88));
  pointer-events: none;
}

.reel-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff3b7f, #7b2ff7);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
  opacity: .92;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
  z-index: 2;
}
/* Треугольник рисуем границей: лишний svg на семь карточек ни к чему. */
.reel-play::before {
  content: "";
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.reel-card:hover .reel-play,
.reel-card:focus-visible .reel-play { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }

.reel-cap {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}

.reel-nav {
  position: absolute;
  top: calc(50% - 14px);
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(22, 19, 31, .86);
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.reel-nav:hover { background: rgba(255, 59, 127, .85); transform: translateY(-50%) scale(1.06); }
.reel-nav--prev { left: -10px; }
.reel-nav--next { right: -10px; }
.reel-nav[hidden] { display: none; }

.reel-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- Модальный плеер ---------- */
.reel-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.reel-modal[hidden] { display: none; }
.reel-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 11, .88);
  backdrop-filter: blur(4px);
}
.reel-modal-box {
  position: relative;
  z-index: 1;
  /* 44vh — это 78vh, пересчитанные в ширину для кадра 9:16. Без такого предела
     окно оставалось широким, а видео упиралось в высоту, и по бокам появлялись
     чёрные поля. */
  max-width: min(430px, 92vw, 44vh);
  width: 100%;
  animation: reelIn .28s var(--ease);
}
@keyframes reelIn { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
.reel-modal-box video {
  width: 100%;
  max-height: 78vh;
  display: block;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9);
}
.reel-modal-cap {
  margin-top: 12px;
  text-align: center;
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
}
.reel-modal-x {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(22, 19, 31, .95);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.reel-modal-x:hover { background: var(--accent); }

@media (max-width: 700px) {
  .reel-nav { display: none; }
  .reel-card { width: 46vw; }
  .reel-modal-x { top: -6px; right: 4px; }
}

/* Кому анимация мешает — статичные постеры без движения. */
@media (prefers-reduced-motion: reduce) {
  .reel-card, .reel-play, .reel-nav { transition: none; }
  .reel-modal-box { animation: none; }
}

/* ===== Блок «для аниматоров» на главной =====
   Аниматоры приходят по своим запросам и должны сразу увидеть, что раздел
   для них есть, а не искать его в общем списке возможностей. */
.anim-sec{padding:clamp(48px,7vw,96px) 0;background:linear-gradient(160deg,rgba(24,16,44,.6),rgba(12,10,20,0))}
.anim-head{text-align:center;max-width:820px;margin:0 auto clamp(24px,3vw,40px)}
.anim-kick{display:inline-block;margin-bottom:12px;padding:7px 14px;border-radius:999px;
  background:rgba(255,211,77,.12);border:1px solid rgba(255,211,77,.32);color:#ffe76e;
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.anim-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:28px}
.anim-card{padding:20px 22px;border-radius:20px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.anim-card b{display:block;margin-bottom:8px;font-size:17px;color:#fff}
.anim-card span{color:#b9b2cc;font-size:15px;line-height:1.5}
.anim-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
@media(max-width:640px){.anim-links{flex-direction:column}.anim-links a{text-align:center}}

/* ===== Кнопка канала в шапке =====
   Канал — место, где ведущие читают обновления платформы. Поэтому не третья
   иконка в ряду мессенджеров, а отдельная кнопка с подписью. На узком экране
   подпись гаснет первой: значок узнаваем и без неё. */
.nav-tg{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:11px;
  text-decoration:none;font-size:14px;font-weight:700;white-space:nowrap;
  color:#8fd9f7;background:rgba(41,171,226,.13);border:1px solid rgba(41,171,226,.32);
  transition:.16s}
.nav-tg:hover{color:#fff;background:rgba(41,171,226,.26);border-color:rgba(41,171,226,.6)}
.nav-tg svg{width:17px;height:17px;flex:0 0 auto}
@media(max-width:1180px){.nav-tg span{display:none}.nav-tg{padding:8px 10px}}

/* ===== Шапка на ноутбуке: тесно после появления кнопки «Канал» =====
   Замер на живой странице: логотип 200, меню из восьми пунктов 592,
   правый блок 579 (язык 64, канал 94, соцсети 118, демо 111, покупка 160).
   С зазорами и полями это 1443 px — на экране 1440 «Купить доступ» уже
   уезжала за край. Ниже 1240 меню сворачивается в бургер, поэтому лечить
   нужно только полосу 1241–1560.

   Порядок уступок — от наименее ценного к наиболее ценному:
   1) зазоры и поля,  2) подпись у «Канала» (значок узнаваем и без неё),
   3) ряд соцсетей (значок Telegram в нём дублирует кнопку канала, а
      WhatsApp и МАКС есть в блоке контактов и в подвале).
   Сами кнопки «Бесплатно» и «Купить доступ» не трогаем ни на одном шаге. */
/* уступка перенесена в замер шапки, см. .hdr-s* ниже: зазоры */
/* Запас кончился: гасим подпись «Канал» — освобождает 49 px */
/* уступка перенесена в замер шапки, см. .hdr-s* ниже: подпись «Канал» */
/* Ещё теснее: убираем ряд соцсетей — освобождает 126 px */
/* уступка перенесена в замер шапки, см. .hdr-s* ниже: соцсети */
/* У самой границы бургера подтягиваем зазоры и кегль меню */
@media (min-width:1241px) and (max-width:1290px){
  .site-header .header-inner{gap:10px;padding-inline:16px}
  .site-header .nav-main{gap:10px}
  .site-header .nav-main a{font-size:13.5px}
  .site-header .header-actions{gap:6px}
}

/* ===== Блок «Нужен ведущий» на страницах материалов =====
   Стоит в конце каждой статьи: человек, который дочитал разбор про
   организацию праздника, нередко приходит к мысли, что вести самому он не
   хочет. Кнопки в строку, на узком экране — друг под другом. */
.host-cta .host-contacts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
.host-cta .host-contacts .btn{white-space:nowrap}
.host-cta h2{margin-bottom:12px}
@media (max-width:560px){
  .host-cta .host-contacts{flex-direction:column;align-items:stretch}
  .host-cta .host-contacts .btn{width:100%;justify-content:center}
}


/* ═══ Шапка подгоняется по факту, а не по угаданным ширинам ═══
   Уровни включает скрипт: он меряет, влезло ли содержимое, и добавляет
   следующий класс, пока не влезет. Порядок — от того, чего не жалко, к
   тому, что нужно: зазоры → подпись у «Канала» → ряд соцсетей → кегль
   меню → бургер. Кнопки «Бесплатно» и «Купить доступ» не сжимаются и не
   прячутся ни на одном уровне: ради них человек сюда и пришёл. */
.site-header .header-inner{min-width:0}
.site-header .nav-main{flex:0 0 auto}
.site-header .header-actions{flex:0 0 auto}

.site-header.hdr-s1 .header-inner{gap:12px;padding-inline:24px}
.site-header.hdr-s1 .nav-main{gap:12px}
.site-header.hdr-s1 .header-actions{gap:8px}

.site-header.hdr-s2 .nav-tg span{display:none}
.site-header.hdr-s2 .nav-tg{padding:8px 10px}

.site-header.hdr-s3 .header-social{display:none}

.site-header.hdr-s4 .header-inner{gap:8px;padding-inline:16px}
.site-header.hdr-s4 .nav-main{gap:9px}
.site-header.hdr-s4 .nav-main a{font-size:13px}
.site-header.hdr-s4 .lang-btn{padding:7px 9px}

/* Запас кончился совсем: меню уходит в бургер. Лучше так, чем обрезанная
   кнопка покупки — её всё равно не нажать. */
.site-header.hdr-burger .nav-main{display:none}
.site-header.hdr-burger .burger{display:inline-flex}

/* =========================================================
   НОВОЕ НА ПЛАТФОРМЕ — витрина продуктов и новых разделов.
   Три полосы (для пары / разделы пульта / работа и доход), в каждой
   сетка на 4 колонки; главные продукты — широкие карточки на 2.
   Цвет карточки задаётся парой --c1/--c2 прямо в разметке, чтобы
   новые продукты добавлялись без правки стилей.
   ========================================================= */
.novoe { padding-block: var(--section-pad); overflow: hidden; }
.novoe-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(600px 380px at 12% 8%, rgba(255, 59, 127, 0.16), transparent 70%),
    radial-gradient(640px 420px at 90% 55%, rgba(123, 47, 247, 0.18), transparent 70%),
    radial-gradient(520px 340px at 30% 100%, rgba(27, 205, 255, 0.10), transparent 70%);
}
.novoe .container { position: relative; z-index: 1; }
.nw-band + .nw-band { margin-top: clamp(28px, 4vw, 44px); }
.nw-band-title {
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #d9d3ee; margin: 0 0 14px;
}
.nw-band-title::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, rgba(244, 241, 251, 0.22), transparent);
}
.nw-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.nw-card {
  --c1: #ff3b7f; --c2: #7b2ff7;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
  padding: clamp(18px, 2vw, 22px);
  border-radius: 22px;
  color: inherit; text-decoration: none;
  background:
    radial-gradient(260px 160px at 85% 0%, color-mix(in srgb, var(--c1) 22%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(244, 241, 251, 0.075), rgba(244, 241, 251, 0.03));
  border: 1px solid rgba(244, 241, 251, 0.11);
  box-shadow: 0 18px 58px -42px rgba(0, 0, 0, 0.9);
  transition: transform .22s var(--ease), border-color .22s, box-shadow .22s;
}
.nw-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c1) 55%, rgba(255, 255, 255, 0.12));
  box-shadow: 0 30px 80px -44px color-mix(in srgb, var(--c1) 70%, #000 30%);
}
.nw-card--wide { grid-column: span 2; flex-direction: row; align-items: flex-start; gap: clamp(16px, 2vw, 24px); }
.nw-art {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: #110e1c;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .9);
}
.nw-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.nw-card--wide .nw-art { width: 42%; }
.nw-band-mark {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: linear-gradient(135deg, #ffba74, #ff4d8d 55%, #8b6cff);
  box-shadow: 0 0 18px rgba(255, 77, 141, .35);
}
.nw-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1 1 auto; height: 100%; }
.nw-tag {
  align-self: flex-start;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  color: color-mix(in srgb, var(--c1) 70%, #fff 30%);
  background: color-mix(in srgb, var(--c1) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c1) 34%, transparent);
}
.nw-name { font-weight: 850; font-size: clamp(17px, 1.7vw, 19px); line-height: 1.2; overflow-wrap: anywhere; }
.nw-card--wide .nw-name { font-family: var(--ff-display); font-size: clamp(19px, 2.1vw, 24px); }
.nw-desc { color: #bdb6d6; font-size: 14.5px; line-height: 1.55; }
.nw-card--wide .nw-desc { font-size: 15.5px; }
.nw-go {
  margin-top: auto; padding-top: 6px;
  font-weight: 800; font-size: 14.5px;
  color: color-mix(in srgb, var(--c1) 55%, #fff 45%);
}
@media (max-width: 1100px) {
  .nw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .nw-grid { grid-template-columns: 1fr; }
  .nw-card--wide { grid-column: auto; }
  .nw-card { flex-direction: column; gap: 14px; }
  .nw-card--wide .nw-art { width: 100%; }
  .nw-card--wide .nw-name { font-size: 19px; }
  .nw-card--wide .nw-desc { font-size: 14.5px; }
}