@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

/* === CSS Variables === */
:root {
  --background: 0 0% 98%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --primary: 142 71% 36%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 14% 92%;
  --secondary-foreground: 222 47% 11%;
  --muted: 220 14% 94%;
  --muted-foreground: 220 9% 43%;
  --accent: 45 93% 48%;
  --accent-foreground: 222 47% 11%;
  --border: 220 13% 87%;
  --ring: 142 71% 36%;
  --radius: 0.75rem;
  --gold: 45 93% 48%;
  --gold-dark: 38 92% 40%;
  --emerald: 142 71% 36%;
  --emerald-dark: 142 76% 28%;
  --navy: 222 47% 11%;
  --navy-light: 222 40% 20%;
}

.dark {
  --background: 222 47% 8%;
  --foreground: 210 40% 96%;
  --card: 222 40% 12%;
  --card-foreground: 210 40% 96%;
  --primary: 142 71% 45%;
  --primary-foreground: 222 47% 8%;
  --secondary: 222 30% 18%;
  --secondary-foreground: 210 40% 96%;
  --muted: 222 30% 16%;
  --muted-foreground: 215 20% 55%;
  --accent: 45 93% 58%;
  --accent-foreground: 222 47% 8%;
  --border: 222 30% 20%;
  --ring: 142 71% 45%;
  --gold: 45 93% 58%;
  --gold-dark: 38 92% 50%;
  --emerald: 142 71% 45%;
  --emerald-dark: 142 76% 36%;
  --navy: 222 47% 8%;
  --navy-light: 222 40% 14%;
}

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid hsl(var(--border)); }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; }

/* === Layout === */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.container--narrow { max-width: 800px; }
.container--cards { max-width: 900px; }

/* === Header === */
.header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background) / 0.95);
  backdrop-filter: blur(12px);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem;
}
.header__logo img { height: 2.5rem; }
.header__nav { display: flex; align-items: center; gap: 2rem; }
.header__nav a {
  font-size: 0.875rem; font-weight: 500;
  color: hsl(var(--muted-foreground));
  transition: color 0.2s;
}
.header__nav a:hover { color: hsl(var(--foreground)); }
.header__actions { display: flex; align-items: center; gap: 0.75rem; }

/* Burger */
.burger { display: none; background: none; padding: 0.5rem; color: hsl(var(--foreground)); }
.burger svg { width: 1.5rem; height: 1.5rem; }
.mobile-menu {
  display: none; flex-direction: column; gap: 1rem;
  padding: 1rem 1.5rem 1.5rem; border-top: 1px solid hsl(var(--border));
  background: hsl(var(--background));
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 0.875rem; font-weight: 500; padding: 0.25rem 0;
  color: hsl(var(--muted-foreground)); transition: color 0.2s;
}
.mobile-menu a:hover { color: hsl(var(--foreground)); }
.mobile-menu__actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }

@media (max-width: 768px) {
  .header__nav, .header__actions { display: none; }
  .burger { display: block; }
}

/* === Theme Toggle === */
.theme-toggle {
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  color: hsl(var(--foreground));
}
.theme-toggle:hover { background: hsl(var(--muted)); }
.theme-toggle svg { width: 1.125rem; height: 1.125rem; }
.dark .theme-toggle .icon-sun { display: block; }
.dark .theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

/* === CTA Button === */
.cta-button {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--emerald-dark)));
  color: hsl(var(--primary-foreground));
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.75rem 2rem; border-radius: var(--radius);
  transition: all 0.3s; font-size: 0.85rem; display: inline-block; text-align: center;
}
.cta-button:hover {
  box-shadow: 0 0 25px hsl(142 71% 45% / 0.3);
  transform: translateY(-1px);
}

/* === Hero === */
.hero {
  padding: 5rem 1rem; text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, hsl(var(--primary) / 0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, hsl(var(--accent) / 0.04) 0%, transparent 40%);
}
.hero h1 { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; }
.hero p {
  color: hsl(var(--muted-foreground));
  font-size: 1.125rem; max-width: 640px; margin: 0 auto; line-height: 1.7;
}
@media (min-width: 768px) {
  .hero { padding: 7rem 1rem; }
  .hero h1 { font-size: 3rem; }
  .hero p { font-size: 1.25rem; }
}

/* === Glass Card === */
.glass-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.04);
  border-radius: var(--radius);
}
.dark .glass-card {
  background: linear-gradient(135deg, hsl(222 40% 13% / 0.9), hsl(222 40% 10% / 0.95));
  border: 1px solid hsl(222 30% 22%);
  backdrop-filter: blur(10px);
  box-shadow: none;
}
.glass-card--hover { transition: all 0.3s; }
.glass-card--hover:hover {
  border-color: hsl(var(--primary) / 0.4);
  box-shadow: 0 0 30px hsl(var(--primary) / 0.08);
  transform: translateY(-2px);
}

/* === Poker Room Card === */
.room-card {
  padding: 1rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
@media (min-width: 768px) {
  .room-card { flex-direction: row; gap: 1.5rem; }
}
.room-card__logo {
  width: 8rem; height: 4rem;
  display: flex; align-items: center; justify-content: center;
  background: hsl(var(--foreground) / 0.05);
  border-radius: calc(var(--radius) - 2px);
  padding: 0.5rem; flex-shrink: 0;
}
.room-card__logo img { max-height: 3rem; max-width: 100%; object-fit: contain; }
.room-card__logo .logo-light { display: block; }
.room-card__logo .logo-dark { display: none; }
.dark .room-card__logo .logo-light.has-dark { display: none; }
.dark .room-card__logo .logo-dark { display: block; }

.room-card__stars { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; flex-shrink: 0; min-width: 120px; }
.stars { display: flex; gap: 2px; }
.stars svg { width: 1rem; height: 1rem; fill: hsl(var(--gold)); color: hsl(var(--gold)); }
.room-card__reviews { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }

.room-card__bonus { text-align: center; flex: 1; min-width: 140px; }
.room-card__bonus-amount {
  font-size: 1.5rem; font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  color: hsl(var(--accent));
}
@media (min-width: 768px) { .room-card__bonus-amount { font-size: 1.875rem; } }
.room-card__bonus-desc { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; }

.room-card__rating { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.rating-badge {
  background: linear-gradient(135deg, hsl(var(--gold)), hsl(var(--gold-dark)));
  color: hsl(var(--background));
  font-weight: 800; border-radius: var(--radius);
  padding: 0.25rem 0.75rem; font-size: 1.25rem;
}
@media (min-width: 768px) { .rating-badge { font-size: 1.5rem; } }
.room-card__rating-label { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; }

/* === Section === */
.section { padding: 4rem 1rem; }
.section-divider {
  background: linear-gradient(90deg, transparent, hsl(var(--border)), transparent);
  height: 1px; margin-bottom: 4rem;
}
.section__title {
  font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 1rem;
}
@media (min-width: 768px) { .section__title { font-size: 2.25rem; } }
.section__subtitle {
  color: hsl(var(--muted-foreground)); text-align: center;
  margin-bottom: 3rem; max-width: 640px; margin-left: auto; margin-right: auto;
}

/* === Steps Grid === */
.steps-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.step-card { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.step-number {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--emerald-dark)));
  color: hsl(var(--primary-foreground));
  width: 3rem; height: 3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem; flex-shrink: 0;
}
.step-card h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.125rem; }
.step-card p { color: hsl(var(--muted-foreground)); font-size: 0.875rem; line-height: 1.7; }

.step-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }

/* === Reviews === */
.reviews-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }

.review-card { padding: 1.5rem; display: flex; flex-direction: column; height: 100%; }
.review-card__text {
  font-size: 0.875rem; color: hsl(var(--muted-foreground));
  line-height: 1.7; flex: 1; margin-bottom: 1rem;
}
.review-card__author {
  display: flex; align-items: center; gap: 0.75rem;
  padding-top: 1rem; border-top: 1px solid hsl(var(--border));
}
.review-card__avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.review-card__name { font-weight: 600; font-size: 0.875rem; }
.review-card__about { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }

/* === FAQ === */
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius); overflow: hidden;
  transition: border-color 0.3s;
}
.faq-item:hover { border-color: hsl(var(--primary) / 0.3); }
.faq-item__btn {
  width: 100%; text-align: left; background: none;
  padding: 1rem 1.5rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
  font-weight: 600; font-size: 0.875rem;
  color: hsl(var(--foreground));
  transition: background 0.2s;
}
@media (min-width: 768px) { .faq-item__btn { font-size: 1rem; } }
.faq-item__btn:hover { background: hsl(var(--secondary) / 0.3); }
.faq-item__icon {
  color: hsl(var(--muted-foreground));
  font-size: 1.25rem; flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-item.open .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer {
  display: none; padding: 0 1.5rem 1.25rem;
  font-size: 0.875rem; color: hsl(var(--muted-foreground));
  line-height: 1.7; white-space: pre-line;
}
.faq-item.open .faq-item__answer { display: block; animation: fadeIn 0.3s ease; }

/* === Footer === */
.footer {
  border-top: 1px solid hsl(var(--border));
  padding: 2.5rem 1rem;
}
.footer__inner {
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: 1rem;
}
@media (min-width: 768px) { .footer__inner { flex-direction: row; } }
.footer__logo { height: 2rem; opacity: 0.6; }
.footer__logo--light { display: block; filter: invert(1); }
.footer__logo--dark { display: none; }
.dark .footer__logo--light { display: none; filter: none; }
.dark .footer__logo--dark { display: block; }
.footer__copy { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }

/* === CTA Center === */
.cta-center { text-align: center; margin-top: 2.5rem; }
.cta-button--lg { font-size: 1rem; padding: 1rem 2.5rem; }

/* === Poker Room List === */
.room-list { display: flex; flex-direction: column; gap: 1rem; }

/* === Animations === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.reveal { opacity: 0; }
.reveal.visible { animation: fadeUp 0.6s ease-out forwards; }