:root {
  --color-bg: #0a1128;
  --color-bg-secondary: #05070f;
  --color-card: #101a3a;
  --color-accent: #d4af37;
  --color-accent-hover: #e6c65a;
  --color-text: #f4f6fb;
  --color-text-secondary: #aab2d6;
  --color-border: #202c58;
  --radius: 14px;

  --color-primary: #c9a227;
  --color-primary-hover: #e0bd45;
  --color-secondary: #060a18;
  --color-surface: #101a3a;
  --color-surface-elevated: #131f47;
  --color-soft-accent: #33290f;
  --color-hot: #f2c94c;
  --color-muted: #aab2d6;
  --color-overlay: #060a18;
  --color-cta: #d4af37;
  --color-gold: #d4af37;
  --color-ivory: #f4f6fb;
  --container: 1200px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Segoe UI", Arial, sans-serif;
}

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

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

ul { padding: 0; margin: 0; }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn--gold {
  background: var(--color-accent);
  color: var(--color-bg);
}

.btn--gold:hover { background: var(--color-accent-hover); }

.btn--primary {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  color: var(--color-bg);
}

.btn--primary:hover { background: var(--color-primary-hover); }

.btn--outline {
  border-color: var(--color-border);
  color: var(--color-text);
  background: transparent;
}

.btn--outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--lg { padding: 14px 28px; font-size: 16px; }

.btn--block { width: 100%; }

.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.topbar {
  background: var(--color-overlay);
  border-bottom: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-secondary);
}

.topbar__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar__nav { display: flex; gap: 18px; }

.topbar__nav a:hover { color: var(--color-accent); }

.mainbar__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; }

.logo img { border-radius: 8px; }

.mainbar__nav { display: flex; gap: 22px; font-size: 14px; }

.mainbar__nav a:hover { color: var(--color-accent); }

.mainbar__actions { display: flex; gap: 12px; }

@media (max-width: 960px) {
  .mainbar__nav { display: none; }
}

@media (max-width: 560px) {
  .topbar { display: none; }
}

@media (max-width: 480px) {
  header .btn.btn--gold { display: none; }
}

.hero--banner { position: relative; overflow: hidden; padding: 72px 24px 0; text-align: center; }

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("../img/banners/hero-bg.webp");
  background-size: cover;
  background-position: center;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, rgba(0, 0, 0, .55) 45%, var(--color-bg) 100%);
}

.hero__center { position: relative; max-width: 720px; margin: 0 auto; }

.hero__eyebrow {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero__title { font-size: 44px; line-height: 1.1; margin-bottom: 16px; color: var(--color-text); }

.hero__subtitle { color: var(--color-muted); margin: 0 auto 28px; max-width: 520px; }

.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }

.hero__stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 760px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.hero__stat { padding: 20px; text-align: center; border-right: 1px solid var(--color-border); }

.hero__stat:last-child { border-right: none; }

.hero__stat strong { display: block; font-size: 24px; color: var(--color-accent); margin-bottom: 4px; }

.hero__stat span { font-size: 12px; color: var(--color-muted); }

@media (max-width: 640px) {
  .hero__title { font-size: 32px; }
  .hero__stats { grid-template-columns: 1fr; }
  .hero__stat { border-right: none; border-bottom: 1px solid var(--color-border); }
  .hero__stat:last-child { border-bottom: none; }
}

.reviews {
  max-width: 1240px;
  margin: 0 auto 48px;
  padding: 0 24px;
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.section-lead {
  text-align: center;
  color: var(--color-muted);
  margin: 0 0 32px;
  font-size: 15px;
}

.review-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 22px;
}

.review-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.review-card__head img { border-radius: 50%; width: 48px; height: 48px; object-fit: cover; }

.review-card__name { font-weight: 700; }

.review-card__stars { color: var(--color-accent); display: flex; gap: 2px; margin-top: 4px; }

.review-card__text { font-size: 14px; color: var(--color-text-secondary); margin: 0 0 10px; }

.review-card__date { font-size: 12px; color: var(--color-text-secondary); opacity: 0.7; }

@media (max-width: 900px) {
  .reviews__grid { grid-template-columns: 1fr; }
}

.stats {
  max-width: 1240px;
  margin: 0 auto 48px;
  padding: 0 24px;
}

.stats-inner { max-width: 1240px; margin: 0 auto; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
}

.stat-value {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-accent);
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}

.stat-label { font-size: 13px; color: var(--color-muted); font-weight: 600; margin: 0; }

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .stats-grid { grid-template-columns: 1fr; }
}

.drop {
  max-width: 1240px;
  margin: 0 auto 48px;
  padding: 0 24px;
}

.drop__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: center;
  background: linear-gradient(135deg, var(--color-surface-elevated), var(--color-bg-secondary));
  border-radius: 24px;
  padding: 40px;
  color: var(--color-text);
}

.drop__tag {
  display: inline-block;
  background: var(--color-soft-accent);
  color: var(--color-hot);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

.drop__info h2 { font-size: 28px; margin-bottom: 14px; }

.drop__info p { color: var(--color-muted); margin-bottom: 22px; max-width: 460px; }

.drop__timer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.drop__timer-unit {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px 8px;
  text-align: center;
}

.drop__timer-unit strong { display: block; font-size: 28px; margin-bottom: 4px; color: var(--color-accent); }

.drop__timer-unit span { font-size: 12px; color: var(--color-muted); }

@media (max-width: 700px) {
  .drop__inner { grid-template-columns: 1fr; }
  .drop__timer { grid-template-columns: repeat(2, 1fr); }
}

.slots { max-width: 1240px; margin: 0 auto 48px; padding: 0 24px; }

.slots__head { margin-bottom: 20px; }

.slots__head h2 { font-size: 26px; margin-bottom: 6px; }

.slots__head p { color: var(--color-muted); }

.slots__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.slot-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.slot-card img { width: 100%; height: 180px; object-fit: cover; }

.slot-card__body { padding: 14px; }

.slot-card__title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }

.slot-card__provider { color: var(--color-muted); font-size: 12px; }

.slot-card__actions {
  position: absolute;
  inset: 0;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 17, 40, 0.82);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.slot-card:hover .slot-card__actions { opacity: 1; }

.slot-card__btn {
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
}

@media (max-width: 900px) {
  .slots__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .slots__grid { grid-template-columns: 1fr; }
}

.slots__head--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.slots__nav { display: flex; gap: 8px; }

.slots__arrow {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-size: 18px;
}

.slots__arrow:disabled { opacity: 0.35; cursor: not-allowed; }

.slots__viewport { overflow: hidden; }

.slots__track { display: flex; gap: 16px; transition: transform 0.3s ease; }

.slots__track .slot-card { flex: 0 0 220px; }

.slots__track .slot-card img { height: 160px; }

.slots__track .slot-card__actions { height: 160px; }

.slider-nav { display: flex; align-items: center; gap: 14px; }

.slider-nav__btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-size: 1rem;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}

.slider-nav__btn:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

.slider-nav__btn:disabled { opacity: 0.35; cursor: default; }

.slider-nav__count {
  color: var(--color-accent);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  min-width: 52px;
  text-align: center;
}

.slot-slider { overflow: hidden; }

.slot-slider__track { display: flex; gap: 14px; transition: transform 0.4s ease; }

.slot-slider__track .slot-card {
  flex: 0 0 220px;
  height: 300px;
}

.slot-slider__track .slot-card__media { position: absolute; inset: 0; }

.slot-slider__track .slot-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.88; }

.slot-slider__track .slot-card__num {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.85rem;
}

.slot-slider__track .slot-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px;
  background: linear-gradient(0deg, rgba(6, 10, 24, 0.95), transparent);
}

.slot-slider__track .slot-card__actions {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(6, 10, 24, 0.85);
}

@media (max-width: 640px) {
  .slots__track .slot-card, .slot-slider__track .slot-card { flex-basis: 180px; }
}

.about { background: var(--color-surface-elevated); padding: 56px 0; }

.about__inner { max-width: 900px; margin: 0 auto; padding: 0 24px; }

.about h2 { font-size: 28px; margin-bottom: 18px; }

.about h3 { font-size: 20px; margin: 26px 0 10px; color: var(--color-accent); }

.about h4 { font-size: 16px; margin: 16px 0 8px; }

.about p { color: var(--color-text); margin-bottom: 10px; }

.about ul { margin: 10px 0 10px 18px; list-style: disc; }

.about li { margin-bottom: 6px; color: var(--color-text-secondary); }

.site-footer {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  padding: 32px 0;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.site-footer .logo img { height: 34px; }

.footer-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.footer-nav a:hover { color: var(--color-accent); }

.site-footer__copy { font-size: 0.8rem; color: var(--color-text-secondary); margin: 0; }

.section-title {
  font-size: 30px;
  color: var(--color-accent);
  text-align: center;
  margin: 0 0 8px;
}

.wheel { max-width: 1240px; margin: 48px auto; padding: 0 24px; }

.wheel__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 44px;
}

.wheel__lead { color: var(--color-muted); margin: 12px 0 22px; max-width: 420px; }

.wheel__result { margin-top: 14px; font-size: 13px; color: var(--color-accent); min-height: 18px; }

.wheel__stage { position: relative; width: 280px; height: 280px; margin: 0 auto; }

.wheel__pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 20px solid var(--color-accent);
  z-index: 2;
}

.wheel__disc {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid var(--color-accent);
  background: conic-gradient(from 0deg,
    var(--color-bg-secondary) 0deg 60deg, var(--color-bg) 60deg 120deg,
    var(--color-bg-secondary) 120deg 180deg, var(--color-bg) 180deg 240deg,
    var(--color-bg-secondary) 240deg 300deg, var(--color-bg) 300deg 360deg);
  transition: transform 3.2s cubic-bezier(.17, .67, .16, 1);
}

.wheel__sector {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  margin-left: -48px;
  margin-top: -9px;
  text-align: center;
  transform: rotate(calc(60deg * var(--i) + 30deg)) translate(0, -92px) rotate(calc(-1 * (60deg * var(--i) + 30deg)));
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  pointer-events: none;
}

@media (max-width: 900px) {
  .wheel__wrap { grid-template-columns: 1fr; text-align: center; }
  .wheel__lead { margin-left: auto; margin-right: auto; }
}

.faq.section { padding: 72px 0 88px; background: var(--color-bg-secondary); }

.faq .section-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }

.faq .section-head h2 { font-size: 28px; margin-bottom: 10px; }

.faq-list {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item2 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 4px 20px;
  transition: border-color 0.2s ease;
}

.faq-item2[open] { border-color: var(--color-accent); }

.faq-item2 summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.faq-item2 summary::-webkit-details-marker { display: none; }

.faq-item2 summary::after {
  content: "+";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-soft-accent);
  color: var(--color-accent);
  font-size: 18px;
  font-weight: 700;
  transition: transform 0.25s ease;
}

.faq-item2[open] summary::after { transform: rotate(45deg); }

.faq-item2 p { margin: 0; color: var(--color-text-secondary); font-size: 14px; padding: 0 0 18px; }