/* ============================================================================
   EXTON LOTO — дизайн-система новой версии.

   Визуальный язык взят из референса: почти чёрный фон, стеклянные поверхности
   с размытием, градиентные заголовки, тонкие светлые обводки вместо теней.

   Файл общий для всего проекта: следующие части лендинга и интерфейс игры
   опираются на эти же переменные, чтобы стиль не расходился по копиям.
   ========================================================================= */

:root {
  /* ── Палитра ───────────────────────────────────────────────────────────── */
  --bg:            #030305;
  --c-blue:        #007bff;
  --c-purple:      #8a2be2;
  --c-pink:        #ff007a;
  --c-orange:      #ff6a00;

  --glass:         rgba(255, 255, 255, 0.03);
  --glass-strong:  rgba(255, 255, 255, 0.05);
  --line:          rgba(255, 255, 255, 0.1);
  --line-bright:   rgba(255, 255, 255, 0.3);

  --text:          #ffffff;
  --text-muted:    #8892b0;

  /* Градиенты вынесены в переменные: они повторяются в логотипе, заголовках
     и соединителях, и разъезжаются, если их копировать по месту. */
  --grad-brand:    linear-gradient(90deg, var(--c-blue), var(--c-pink), var(--c-orange));
  --grad-title:    linear-gradient(90deg, var(--c-blue), var(--c-purple));

  /* ── Типографика ───────────────────────────────────────────────────────── */
  --font:          'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Размеры ───────────────────────────────────────────────────────────── */
  --radius:        24px;
  --radius-sm:     15px;
  --radius-pill:   30px;
  --blur:          12px;
  --tap:           44px;          /* минимальная площадь касания */
  --page-max:      1400px;
  --page-pad:      5%;
  --header-h:      82px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Обрезка задаётся и на html, и на body.
   `overflow-x: hidden` на одном лишь body не срабатывает: свойство всплывает
   на область просмотра, и декоративные шары, выходящие за край героя, всё
   равно дают горизонтальную прокрутку. `clip` таким свойством не обладает. */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  /* Шары в герое намеренно выходят за края — здесь они и обрезаются. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Шапка ─────────────────────────────────────────────────────────────── */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--page-pad);
  background: linear-gradient(to bottom, rgba(3, 3, 5, 0.9), transparent);
  backdrop-filter: blur(5px);
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: 900;
  letter-spacing: 3px;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.nav a {
  font-size: 0.9rem;
  letter-spacing: 1px;
  color: var(--text);
  transition: color 0.3s ease;
}

.nav a:hover { color: var(--c-pink); }

/* На узком экране пункты убираются: остаётся логотип и кнопка «Играть» —
   единственное действие, ради которого лендинг существует. */
@media (max-width: 720px) {
  .nav__links { display: none; }
}

/* ── Кнопки ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 16px 45px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
}

.btn:hover {
  border-color: var(--c-pink);
  box-shadow: 0 0 30px rgba(255, 0, 122, 0.4);
  transform: translateY(-3px);
}

.btn--compact { padding: 12px 26px; font-size: 0.9rem; }

/* Главное действие подсвечено заливкой: на стеклянном фоне обводки мало,
   чтобы кнопка читалась как основная. */
.btn--primary {
  background: linear-gradient(90deg, rgba(0, 123, 255, 0.25), rgba(255, 0, 122, 0.25));
  border-color: rgba(255, 255, 255, 0.25);
}

.btn--primary:hover {
  border-color: var(--c-orange);
  box-shadow: 0 0 40px rgba(255, 106, 0, 0.35);
}

/* ── Секции ───────────────────────────────────────────────────────────── */

.section {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(64px, 10vw, 120px) var(--page-pad);
}

.section__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-pink);
  margin-bottom: 12px;
}

.section__title {
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
}

.section__text {
  color: var(--text-muted);
  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.6;
  max-width: 720px;
}

.text-gradient {
  background: var(--grad-title);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Герой ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;          /* svh, а не vh: на мобильных браузерах панель
                                  адреса иначе срезает низ экрана */
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: calc(var(--header-h) + 40px) var(--page-pad) 64px;
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 3vw, 32px);
}

.hero__title {
  font-size: clamp(2.25rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

/* Вторая строка заголовка — контурная, как в референсе: даёт объём без
   второго цвета. */
.hero__outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);
}

.hero__text {
  color: var(--text-muted);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.5;
  max-width: 520px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__note {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Декоративные шары и телефон. Абсолютные, под содержимым, скрыты от
   озвучивания: они ничего не сообщают. Статичные — фоновый слой не движется. */
.hero__art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.hero__art img {
  position: absolute;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.6));
}

.art-phone   { right: 2%;  bottom: -6%; width: clamp(150px, 26vw, 320px); transform: rotate(-15deg); }
/* Связка шаров уведена в нижний левый угол: текстовая колонка занимает
   левую половину героя, и на высоте заголовка шары наезжали на буквы. */
.art-balls-a { left: -4%;  bottom: -8%;  width: clamp(84px, 14vw, 201px); }
.art-balls-b { right: 20%; top: 8%;     width: clamp(110px, 20vw, 301px); }
.art-ball-1  { right: 32%; bottom: 12%; width: clamp(44px, 7vw, 97px);  }
.art-ball-7  { right: 6%;  top: 26%;    width: clamp(44px, 7vw, 96px);  }

/* На узких экранах телефон и крупная связка шаров только мешают тексту. */
@media (max-width: 720px) {
  .art-balls-b, .art-ball-1 { display: none; }
  /* Телефон опущен ниже строки примечания и приглушён: на узком экране он
     идёт прямо под текстом, а не сбоку от него. */
  .art-phone { right: -12%; bottom: -8%; opacity: 0.45; }
  .art-balls-a { left: -12%; top: 8%; bottom: auto; opacity: 0.7; }
}

/* ── Стеклянные карточки ──────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  perspective: 1000px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  min-height: 280px;
  padding: clamp(24px, 4vw, 40px);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--blur));
  transform-style: preserve-3d;
  transition: border-color 0.3s ease;
}

.card:hover { border-color: var(--line-bright); }

.card__content { transform: translateZ(60px); pointer-events: none; }

.card h3 {
  font-size: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 10px;
  background: var(--grad-title);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card p { color: var(--text-muted); line-height: 1.6; }

.card__list {
  list-style: none;
  margin-top: 14px;
  display: grid;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.card__list li { display: grid; grid-template-columns: auto 1fr; gap: 10px; }

.card__list li::before {
  content: '>>';
  font-family: var(--font-mono);
  color: var(--c-blue);
}

/* Блик под курсором. Позиция задаётся из скрипта. */
.glare {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  transform: translateZ(1px);
}

/* ── Плашка-акцент ────────────────────────────────────────────────────── */

.note {
  margin-top: clamp(24px, 4vw, 40px);
  padding: 24px 28px;
  background: rgba(0, 0, 0, 0.4);
  border-left: 3px solid var(--c-blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.note--pink { border-left-color: var(--c-pink); }

/* ── Уровни NFT ───────────────────────────────────────────────────────── */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}

.tier {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 28px 20px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--blur));
  text-align: center;
  transition: border-color 0.3s, transform 0.3s;
}

.tier:hover { border-color: var(--line-bright); transform: translateY(-4px); }

.tier img { width: clamp(72px, 12vw, 110px); }

.tier__name {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Подвал ───────────────────────────────────────────────────────────── */

.footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 40px var(--page-pad) 64px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ── Уважение к настройкам движения ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}