/* ============================================================================
   puntcity.co — редизайн 2026-10
   Слой структурных переопределений поверх макетных файлов.
   Меняет расположение блоков и характер поверхностей, текст не трогает.
   ========================================================================= */

/* ── Общий фон: ледяной градиент вместо плоского ──────────────────────── */
body {
  background: linear-gradient(180deg, #f7f9ff 0%, var(--color-paper) 420px);
}

/* ── Шапка: полупрозрачное стекло вместо жёсткой обводки ──────────────── */
.site-header {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--color-line-soft), 0 8px 24px rgba(16, 20, 38, .05);
}

.site-nav__link {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  background: var(--color-ink);
  color: var(--color-paper);
}

.logo__tld {
  background: var(--color-amber);
  color: var(--color-ink);
  border-radius: var(--radius);
}

/* ── Кикер-плашки: фиолетовые вместо чернильных ───────────────────────── */
.kicker-pill { background: var(--color-brand); }

/* ── Кнопки героя: мягкая фиолетовая тень вместо жёсткой обводки ──────── */
.btn--lg { box-shadow: 0 12px 28px rgba(109, 40, 217, .22); }
.btn--light.btn--lg { box-shadow: inset 0 0 0 2px var(--color-line-strong); }

/* ── Герой: тёмная индиго-сцена, текст справа, постер слева ───────────── */
.hero {
  background:
    radial-gradient(900px 520px at 85% 10%, rgba(109, 40, 217, .35), transparent 60%),
    radial-gradient(700px 420px at 5% 95%, rgba(129, 140, 248, .22), transparent 60%),
    var(--color-ink);
  color: var(--color-paper);
}

.hero__text { padding: 72px var(--gutter) 72px 40px; }

.hero__title { color: var(--color-paper); }
.hero__title em { color: var(--color-amber); }
.hero__title .hero__accent { color: var(--color-brand-on-dark); }
.hero__line:last-child { color: var(--color-paper); }

.hero__lead { color: rgba(238, 241, 248, .72); }
.hero__note { color: rgba(238, 241, 248, .55); }

.hero__poster {
  width: 600px;
  background: linear-gradient(160deg, var(--color-flame), var(--color-brand));
  box-shadow: none;
}

.hero__stripe { background: rgba(245, 158, 11, .85); }

.hero__watermark {
  color: rgba(255, 255, 255, .22);
  -webkit-text-stroke: 0;
}

.hero__image {
  border-radius: var(--radius-2xl);
  box-shadow: 0 32px 64px rgba(9, 11, 24, .5);
}

@media (min-width: 768px) {
  .hero { flex-direction: row-reverse; }
  .hero__text { padding: 72px var(--gutter) 72px var(--space-13); }
}

@media (max-width: 767px) {
  .hero { flex-direction: column-reverse; }
  .hero__text { padding: var(--space-11) var(--gutter-mobile); }
}

/* ── Лента видов спорта: чернильная с золотыми метками ────────────────── */
.ticker {
  background: var(--color-ink);
  color: var(--color-amber);
  box-shadow: none;
}

/* ── Рынки: купон переезжает влево от списка матчей ───────────────────── */
@media (min-width: 1024px) {
  .betting { flex-direction: row-reverse; }
}

/* ── «Как это работает»: сцена справа, текст слева ────────────────────── */
@media (min-width: 768px) {
  .hiw { flex-direction: row-reverse; }
}

/* ── Обзор спортов: избранная лига переезжает влево ───────────────────── */
@media (min-width: 1024px) {
  .explore__grid { grid-template-columns: minmax(0, 380fr) minmax(0, 876fr); }
  .featured { grid-column: 1; grid-row: 1; }
  .explore__main { grid-column: 2; grid-row: 1; }
}

/* ── Нижние полосы ────────────────────────────────────────────────────── */
.support-strip { background: var(--color-flame); color: var(--color-ink); }

.betstop-strip { background: var(--color-ink); }
.betstop-strip__title { color: var(--color-paper); }
.betstop-strip__note { color: rgba(238, 241, 248, .65); }
.betstop-strip__cta { color: var(--color-amber); }

.payments-strip { background: var(--color-surface); }

/* ── Футер: индиго-глубина с золотыми акцентами ───────────────────────── */
.site-footer {
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(109, 40, 217, .30), transparent 60%),
    var(--color-ink);
}

.site-footer .logo__tld { background: var(--color-amber); color: var(--color-ink); }
.site-footer__slogan-accent { color: var(--color-amber); }