/* =============================================
   BETSIXTY CASINO - MAIN STYLESHEET
   Language: NL | Theme: Dark Premium
   ============================================= */

/* --- Local Fonts (@font-face) --- */

/* Bebas Neue — display / headings */
@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Outfit — variable font, covers weights 300–900 in one file */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-VariableFont_wght.woff2') format('woff2 supports variations'),
       url('../fonts/Outfit-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- CSS Variables --- */
:root {
  --color-bg-primary: #08080f;
  --color-bg-secondary: #10101e;
  --color-bg-card: #12122a;
  --color-bg-card-hover: #1a1a35;
  --color-accent-gold: #e2ff02;
  --color-accent-gold-light: #f9ff00;
  --color-accent-gold-dark: #b8c80a;
  --color-accent-green: #00c853;
  --color-text-primary: #ffffff;
  --color-text-secondary: #a0a8c0;
  --color-text-muted: #5a6080;
  --color-border: rgba(245, 166, 35, 0.15);
  --color-border-strong: rgba(245, 166, 35, 0.4);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --font-display: 'Bebas Neue', 'Arial Black', sans-serif;
  --font-body: 'Outfit', 'Arial', sans-serif;
  --transition-fast: 0.18s ease;
  --transition-med: 0.3s ease;
  --transition-slow: 0.5s ease;
  --shadow-gold: 0 0 20px rgba(245, 166, 35, 0.25);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-btn: 0 4px 16px rgba(245, 166, 35, 0.35);
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* --- Utility Classes --- */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: 2px;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.section-title span {
  color: var(--color-accent-gold);
}

.section-subtitle {
  color: var(--color-text-secondary);
  font-size: 15px;
  margin-bottom: 40px;
}

.section-header {
  margin-bottom: 40px;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--color-accent-gold-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent-gold); }

/* =============================================
   HEADER
   ============================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(8, 8, 15, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-med), box-shadow var(--transition-med);
}

.site-header.scrolled {
  background: rgba(8, 8, 15, 0.98);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 20px;
}

/* Logo */
.site-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-logo a {
  display: flex;
  align-items: center;
}

.site-logo img {
  height: 42px;
  width: auto;
  transition: transform var(--transition-fast);
}

.site-logo a:hover img {
  transform: scale(1.04);
}

/* Desktop Nav */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-menu a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text-secondary);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  position: relative;
}

.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--color-accent-gold);
  border-radius: 1px;
  transition: width var(--transition-med);
}

.nav-menu a:hover {
  color: var(--color-text-primary);
  background: rgba(245, 166, 35, 0.08);
}

.nav-menu a:hover::after {
  width: 60%;
}

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

/* Mobile Menu Toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
  flex-shrink: 0;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: all var(--transition-med);
}

.menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Nav Drawer */
.mobile-nav {
  display: none;
  position: fixed;
  top: 68px;
  left: 0;
  width: 100%;
  background: rgba(10, 10, 20, 0.98);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  padding: 20px;
  z-index: 999;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--transition-med), opacity var(--transition-med);
}

.mobile-nav.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.mobile-nav ul a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: var(--color-text-secondary);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.mobile-nav ul a:hover {
  color: var(--color-text-primary);
  background: rgba(245, 166, 35, 0.1);
}

.mobile-nav-actions {
  display: flex;
  gap: 10px;
}

.mobile-nav-actions .btn {
  flex: 1;
  text-align: center;
}

/* =============================================
   BUTTONS
   ============================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--transition-fast);
}

.btn:hover::after {
  background: rgba(255,255,255,0.08);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-accent-gold), var(--color-accent-gold-dark));
  color: #08080f;
  box-shadow: var(--shadow-btn);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-accent-gold-light), var(--color-accent-gold));
  box-shadow: 0 6px 24px rgba(245, 166, 35, 0.5);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--color-accent-gold);
  border: 1.5px solid var(--color-accent-gold);
}

.btn-secondary:hover {
  background: rgba(245, 166, 35, 0.1);
  box-shadow: var(--shadow-gold);
  transform: translateY(-1px);
}

.btn-green {
  background: linear-gradient(135deg, #00c853, #00a040);
  color: white;
  box-shadow: 0 4px 16px rgba(0, 200, 83, 0.3);
}

.btn-green:hover {
  background: linear-gradient(135deg, #00e060, #00c853);
  box-shadow: 0 6px 24px rgba(0, 200, 83, 0.45);
  transform: translateY(-1px);
}

.btn-lg {
  font-size: 16px;
  padding: 14px 32px;
  border-radius: var(--radius-md);
}

.btn-xl {
  font-size: 18px;
  padding: 16px 40px;
  border-radius: var(--radius-md);
}

/* =============================================
   HERO SECTION
   ============================================= */

.hero-section {
  margin-top: 68px;
  min-height: auto;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--color-bg-primary);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 80% 50%, rgba(245, 166, 35, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 80% at 10% 20%, rgba(0, 100, 200, 0.08) 0%, transparent 60%);
}

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245, 166, 35, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 166, 35, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  min-height: auto;
  padding: 40px 0 40px;
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 166, 35, 0.1);
  border: 1px solid var(--color-border-strong);
  color: var(--color-accent-gold);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 24px;
  letter-spacing: 0.5px;
}

.hero-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent-green);
  box-shadow: 0 0 6px var(--color-accent-green);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--color-accent-green); }
  50% { opacity: 0.6; box-shadow: 0 0 12px var(--color-accent-green); }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(46px, 6vw, 86px);
  line-height: 1.05;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.hero-title span {
  color: var(--color-accent-gold);
  display: block;
}

.hero-subtitle {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--color-text-secondary);
  margin-bottom: 32px;
  line-height: 1.6;
  max-width: 480px;
}

.hero-bonus-box {
  background: rgba(245, 166, 35, 0.06);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.hero-bonus-amount {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1;
  color: var(--color-accent-gold);
  letter-spacing: 1px;
}

.hero-bonus-detail {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.hero-bonus-detail strong {
  display: block;
  color: var(--color-text-primary);
  font-size: 16px;
  margin-bottom: 2px;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 20px;
}

.hero-trust svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.hero-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-img-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
}

.hero-img-wrap img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(245, 166, 35, 0.1);
}

/* Floating stats on hero image */
.hero-stat {
  position: absolute;
  background: rgba(10, 10, 20, 0.9);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  backdrop-filter: blur(8px);
  animation: float-card 4s ease-in-out infinite;
}

.hero-stat:nth-child(2) { animation-delay: -2s; }

.hero-stat-value {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--color-accent-gold);
  letter-spacing: 1px;
  line-height: 1;
}

.hero-stat-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.stat-top-left {
  top: -20px;
  left: -20px;
}

.stat-bottom-right {
  bottom: -20px;
  right: -20px;
}

@keyframes float-card {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

/* =============================================
   BRAND DESCRIPTION SECTION
   ============================================= */

.brand-section {
  padding: 80px 0;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.brand-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
}

.brand-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}

.brand-feature {
  background: rgba(245, 166, 35, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: all var(--transition-med);
}

.brand-feature:hover {
  border-color: var(--color-border-strong);
  background: rgba(245, 166, 35, 0.08);
  transform: translateY(-3px);
}

.brand-feature-icon {
  font-size: 28px;
  margin-bottom: 10px;
}

.brand-feature-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}

.brand-feature-text {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.brand-stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brand-stat-item {
  text-align: center;
  padding: 24px;
  background: rgba(245, 166, 35, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-med);
}

.brand-stat-item:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-gold);
  transform: scale(1.02);
}

.brand-stat-number {
  font-family: var(--font-display);
  font-size: 52px;
  color: var(--color-accent-gold);
  line-height: 1;
  letter-spacing: 1px;
}

.brand-stat-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

/* =============================================
   GAMES SECTION
   ============================================= */

.games-section {
  padding: 80px 0;
}

/* Slider container */
.games-slider-wrap {
  position: relative;
  overflow: hidden;
}

.games-slider {
  display: flex;
  gap: 20px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.game-card {
  flex: 0 0 calc(20% - 16px);
  min-width: 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-med);
  position: relative;
}

.game-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), var(--shadow-gold);
}

.game-card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.game-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.game-card:hover .game-card-img img {
  transform: scale(1.07);
}

.game-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,8,15,0.9) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity var(--transition-med);
}

.game-card:hover .game-card-overlay {
  opacity: 1;
}

.game-card-overlay .btn {
  width: 100%;
  font-size: 15px;
  padding: 12px;
}

.game-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-accent-gold);
  color: #08080f;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.game-card-badge.hot { background: #f44336; color: white; }
.game-card-badge.new { background: #00c853; color: white; }

.game-card-info {
  padding: 14px 16px;
}

.game-card-name {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-card-provider {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Slider controls */
.slider-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  font-size: 18px;
}

.slider-btn:hover {
  background: var(--color-accent-gold);
  color: #08080f;
  border-color: var(--color-accent-gold);
  transform: scale(1.08);
}

.slider-dots {
  display: flex;
  gap: 8px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.slider-dot.active {
  background: var(--color-accent-gold);
  width: 24px;
  border-radius: 4px;
}

/* =============================================
   BANNER SECTION
   ============================================= */

.banner-section {
  padding: 80px 0;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.banner-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 60px rgba(245, 166, 35, 0.08);
  transition: box-shadow var(--transition-med);
}

.banner-wrap:hover {
  box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 80px rgba(245, 166, 35, 0.15);
}

.banner-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================================
   PROVIDERS SECTION
   ============================================= */

.providers-section {
  padding: 60px 0;
}

.providers-track-wrap {
  overflow: hidden;
  position: relative;
}

.providers-track-wrap::before,
.providers-track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
}

.providers-track-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg-primary), transparent);
}

.providers-track-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg-primary), transparent);
}

.providers-track {
  display: flex;
  gap: 30px;
  animation: scroll-providers 30s linear infinite;
}

.providers-track:hover {
  animation-play-state: paused;
}

.provider-item {
  flex-shrink: 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-muted);
  letter-spacing: 1px;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.provider-item:hover {
  border-color: var(--color-border-strong);
  color: var(--color-accent-gold);
  background: rgba(245, 166, 35, 0.06);
}

@keyframes scroll-providers {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =============================================
   FOOTER
   ============================================= */

.site-footer {
  background: #050508;
  border-top: 1px solid var(--color-border);
  padding-top: 60px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--color-border);
}

.footer-brand .site-logo img {
  height: 38px;
  margin-bottom: 16px;
}

.footer-brand-text {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 300px;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.social-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 16px;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.social-btn:hover {
  background: rgba(245, 166, 35, 0.1);
  border-color: var(--color-border-strong);
  color: var(--color-accent-gold);
  transform: translateY(-2px);
}

.footer-col-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  color: var(--color-text-primary);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 13px;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

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

.footer-bottom {
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-disclaimer {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 600px;
}

.footer-age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(245, 166, 35, 0.1);
  border: 1.5px solid var(--color-accent-gold);
  color: var(--color-accent-gold);
  font-weight: 900;
  font-size: 12px;
  flex-shrink: 0;
}

.footer-copyright {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* =============================================
   ANIMATIONS ON LOAD
   ============================================= */

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
.fade-in-delay-4 { transition-delay: 0.4s; }

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 1100px) {
  .game-card {
    flex: 0 0 calc(25% - 15px);
  }

  .brand-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .brand-stats {
    flex-direction: row;
  }

  .brand-stat-item {
    flex: 1;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 0;
    min-height: auto;
  }

  .hero-image {
    order: -1;
  }

  .hero-img-wrap {
    max-width: 100%;
  }

  .hero-stat {
    display: none;
  }

  .game-card {
    flex: 0 0 calc(33.33% - 14px);
  }

  .nav-menu, .header-actions {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .mobile-nav {
    display: block;
  }
}

@media (max-width: 680px) {
  .header-inner {
    height: 60px;
  }

  .mobile-nav {
    top: 60px;
  }

  .hero-section {
    margin-top: 60px;
  }

  .game-card {
    flex: 0 0 calc(50% - 10px);
  }

  .brand-features {
    grid-template-columns: 1fr;
  }

  .brand-stats {
    flex-direction: column;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .hero-bonus-box {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta .btn {
    text-align: center;
    justify-content: center;
  }

  .section-title {
    font-size: 30px;
  }
}

@media (max-width: 480px) {
  .game-card {
    flex: 0 0 calc(50% - 10px);
  }

  .container {
    padding: 0 16px;
  }

  .hero-title {
    font-size: 38px;
  }
}

/* =============================================
   TABLES
   ============================================= */

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
  margin: 32px 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

thead {
  background: linear-gradient(135deg, var(--color-bg-card), rgba(226, 255, 2, 0.06));
}

thead tr {
  border-bottom: 2px solid var(--color-accent-gold);
}

th {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-accent-gold);
  padding: 14px 18px;
  text-align: left;
  white-space: nowrap;
}

tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

tbody tr:last-child {
  border-bottom: none;
}

tbody tr:nth-child(even) {
  background: rgba(226, 255, 2, 0.025);
}

tbody tr:hover {
  background: rgba(226, 255, 2, 0.05);
}

td {
  padding: 13px 18px;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.5;
  vertical-align: middle;
}

td:first-child {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Responsive table */
@media (max-width: 680px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-radius: var(--radius-sm);
  }

  th, td {
    padding: 10px 14px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  th, td {
    padding: 9px 12px;
    font-size: 12px;
  }
}

/* =============================================
   LISTS — ol, ul (prose / article content)
   ============================================= */

/* Re-enable list styles for content areas
   (overrides the global ul { list-style: none } reset) */
main ol,
main ul,
article ol,
article ul,
section ol,
section ul,
.prose ol,
.prose ul,
.content-text ol,
.content-text ul,
.description-section ol,
.description-section ul {
  padding-left: 1.5em;
  margin: 14px 0 20px;
  box-sizing: border-box;
  max-width: 100%;
}

/* Ordered list */
main ol,
article ol,
section ol,
.prose ol,
.content-text ol,
.description-section ol {
  list-style: decimal;
}

main ol li,
article ol li,
section ol li,
.prose ol li,
.content-text ol li,
.description-section ol li {
  list-style: decimal;
  padding-left: 0.4em;
  margin-bottom: 8px;
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

main ol li::marker,
article ol li::marker,
section ol li::marker,
.prose ol li::marker,
.content-text ol li::marker,
.description-section ol li::marker {
  color: var(--color-accent-gold);
  font-weight: 700;
}

/* Unordered list */
main ul,
article ul,
section ul,
.prose ul,
.content-text ul,
.description-section ul {
  list-style: disc;
}

main ul li,
article ul li,
section ul li,
.prose ul li,
.content-text ul li,
.description-section ul li {
  list-style: disc;
  padding-left: 0.4em;
  margin-bottom: 8px;
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

main ul li::marker,
article ul li::marker,
section ul li::marker,
.prose ul li::marker,
.content-text ul li::marker,
.description-section ul li::marker {
  color: var(--color-accent-gold);
}

/* Nested lists */
main ol ol, main ol ul,
main ul ul, main ul ol,
article ol ol, article ol ul,
article ul ul, article ul ol,
section ol ol, section ol ul,
section ul ul, section ul ol {
  margin: 6px 0 6px 1em;
}

/* Protect nav / UI lists from getting bullet styles */
nav ul, nav ol,
.nav-menu ul,
.mobile-nav ul,
.footer-links,
.footer-links ul,
.header-actions ul,
.providers-track,
.slider-dots,
.sidebar-nav ul,
.breadcrumbs ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* Responsive lists */
@media (max-width: 680px) {
  main ol, main ul,
  article ol, article ul,
  section ol, section ul,
  .prose ol, .prose ul,
  .description-section ol,
  .description-section ul {
    padding-left: 1.25em;
  }

  main ol li, main ul li,
  article ol li, article ul li,
  section ol li, section ul li,
  .prose ol li, .prose ul li,
  .description-section ol li,
  .description-section ul li {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  main ol, main ul,
  article ol, article ul,
  section ol, section ul,
  .prose ol, .prose ul,
  .description-section ol,
  .description-section ul {
    padding-left: 1.1em;
  }

  main ol li, main ul li,
  article ol li, article ul li,
  section ol li, section ul li,
  .prose ol li, .prose ul li,
  .description-section ol li,
  .description-section ul li {
    font-size: 13px;
  }
}