/* ===================================================
   MOTION-X Design System
   =================================================== */

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

:root {
  /* Ultra-Modern Brand Colors */
  --primary: #8b5cf6;
  --primary-light: #a78bfa;
  --primary-dark: #6d28d9;
  --accent-fb: #3b82f6;
  --accent-yt: #ef4444;
  --accent-ai: #10b981;
  --gold: #f59e0b;
  --cyan: #06b6d4;
  --pink: #ec4899;

  /* Glassmorphism Dark Theme */
  --bg-dark: #050505;
  --bg-card: rgba(17, 17, 20, 0.4);
  --bg-glass: rgba(255, 255, 255, 0.03);
  --bg-glass-hover: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.15);
  --glass-edge: rgba(255, 255, 255, 0.12);

  /* Text */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #475569;

  /* Premium Gradients */
  --grad-purple: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);
  --grad-fb: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  --grad-yt: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  --grad-ai: linear-gradient(135deg, #059669 0%, #10b981 100%);
  --grad-dark: linear-gradient(180deg, #050505 0%, #0a0a0f 100%);
  --grad-glass: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);

  /* Neon Shadows */
  --shadow-purple: 0 0 40px rgba(139, 92, 246, 0.35);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 80px rgba(139, 92, 246, 0.2);

  /* Spacing */
  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --radius-xl: 40px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Hind Siliguri', sans-serif;
  background: var(--bg-dark);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}

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

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; }
.font-bn { font-family: 'Hind Siliguri', sans-serif; }
.gradient-text {
  background: var(--grad-purple);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.1); opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.btn:hover::after { opacity: 1; }

.btn-primary {
  background: var(--grad-purple);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3), inset 0 1px 1px rgba(255,255,255,0.4);
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5), inset 0 1px 1px rgba(255,255,255,0.5);
}
.btn-outline {
  background: var(--bg-glass);
  color: var(--text-primary);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(12px);
}
.btn-outline:hover {
  background: var(--bg-glass-hover);
  border-color: var(--primary-light);
  color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15);
}
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--bg-glass); color: var(--text-primary); }
.btn-lg { padding: 16px 32px; font-size: 16px; border-radius: var(--radius); }
.btn-sm { padding: 8px 16px; font-size: 12px; border-radius: 8px; }
.btn-icon { padding: 10px; border-radius: 10px; }

/* ---- Cards & Glassmorphism ---- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-card);
}
.card:hover {
  border-color: var(--glass-edge);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 20px rgba(139, 92, 246, 0.1);
  transform: translateY(-4px);
}
.glass-card {
  background: var(--grad-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-left: 1px solid rgba(255,255,255,0.12);
  border-right: 1px solid rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.02);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), var(--shadow-glow);
}

/* ---- Badge ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-free { background: rgba(0,212,170,0.15); color: var(--accent-ai); border: 1px solid rgba(0,212,170,0.3); }
.badge-premium { background: rgba(245,158,11,0.15); color: var(--gold); border: 1px solid rgba(245,158,11,0.3); }
.badge-fb { background: rgba(24,119,242,0.15); color: var(--accent-fb); border: 1px solid rgba(24,119,242,0.3); }
.badge-yt { background: rgba(255,0,0,0.15); color: var(--accent-yt); border: 1px solid rgba(255,0,0,0.3); }
.badge-ai { background: rgba(0,212,170,0.15); color: var(--accent-ai); border: 1px solid rgba(0,212,170,0.3); }
.badge-new { background: rgba(124,58,237,0.15); color: var(--primary-light); border: 1px solid rgba(124,58,237,0.3); }

/* ---- Navbar ---- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(5, 5, 5, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
@keyframes shineGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.navbar-brand:hover {
  transform: scale(1.04);
}
.brand-logo {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #06b6d4 100%);
  background-size: 200% 200%;
  animation: shineGradient 5s ease infinite;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 19px; color: #fff;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.6), inset 0 1px 1px rgba(255,255,255,0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.brand-name {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #ffffff 0%, #c084fc 40%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 15px rgba(192, 132, 252, 0.4));
}
.brand-name span {
  background: linear-gradient(135deg, #f43f5e 0%, #fb923c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Hero Slot Machine Character Tumbler Title ---- */
.brand-stylish-header {
  font-size: clamp(20px, 3.2vw, 34px);
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 12px;
  overflow: visible;
}

.hero-static-brand {
  background: linear-gradient(135deg, #a855f7 0%, #f43f5e 50%, #fb923c 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shineGradient 6s ease infinite;
  filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.4));
  letter-spacing: 0.5px;
  padding-left: 4px;
  padding-right: 4px;
  display: inline-flex;
  align-items: center;
  /* 2026-10-23 HEADING-CLIP-FIX: was height:48px / line-height:48px from the old 34px-font
     era. With the promo-OFF hero font at up to 72px, the gradient (background-clip:text)
     only painted a 48px strip, so the tops of the MOTION-X letters looked eaten/covered.
     The box now grows with the font — full glyphs, full gradient. */
  height: auto;
  line-height: 1.15;
  vertical-align: middle;
}

/* Slot Tumbler Box */
.hero-slot-box {
  display: inline-flex;
  height: 48px;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  border-radius: 12px;
  background: rgba(17, 17, 24, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0 16px;
  box-shadow: inset 0 0 12px rgba(168, 85, 247, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  min-width: 175px;
}

.slot-active-word {
  font-size: clamp(18px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: 0.8px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: filter 0.3s ease, transform 0.3s ease;
}


/* Fix: slot-char spans must be visible during scramble */
.slot-active-word .slot-char {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow: 0 0 8px rgba(255,255,255,0.6) !important;
}

/* Individual tumbling character span */
.slot-char {
  display: inline-block;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
  will-change: transform, opacity;
}

.slot-char.tumbling-up {
  animation: charTumbleUp 0.22s ease infinite alternate;
}

.slot-char.tumbling-down {
  animation: charTumbleDown 0.22s ease infinite alternate;
}

@keyframes charTumbleUp {
  0% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0px); }
  50% { transform: translateY(-10px) scale(0.9); opacity: 0.6; filter: blur(2px); }
  100% { transform: translateY(10px) scale(1.05); opacity: 0.8; filter: blur(1px); }
}

@keyframes charTumbleDown {
  0% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0px); }
  50% { transform: translateY(10px) scale(0.9); opacity: 0.6; filter: blur(2px); }
  100% { transform: translateY(-10px) scale(1.05); opacity: 0.8; filter: blur(1px); }
}

.word-gradient-1 {
  background: linear-gradient(135deg, #38bdf8 0%, #4ade80 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.5));
}

.word-gradient-2 {
  background: linear-gradient(135deg, #f43f5e 0%, #fb923c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(244, 63, 94, 0.5));
}

.word-gradient-3 {
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.5));
}

.word-gradient-4 {
  background: linear-gradient(135deg, #facc15 0%, #f97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.5));
}

@media (max-width: 576px) {
  .brand-stylish-header {
    font-size: 18px;
    gap: 6px;
  }
  .hero-slot-box {
    height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    min-width: 140px;
  }
  .slot-active-word {
    font-size: 16px !important;
  }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}
.nav-links a {
  padding: 10px 16px;
  border-radius: 10px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:hover, .nav-links a.active {
  color: var(--text-primary);
  background: var(--bg-glass-hover);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
}
.nav-actions { display: flex; align-items: center; gap: 12px; }
.lang-switcher {
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--bg-glass);
  border: 1px solid var(--glass-edge);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: all 0.3s;
  backdrop-filter: blur(8px);
}
.lang-switcher:hover { border-color: var(--primary-light); color: var(--primary-light); transform: translateY(-1px); }

/* ---- Hero & Cosmic Orbs ---- */
.hero {
  min-height: 100vh;
  padding: 60px 24px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(139, 92, 246, 0.15) 0%, transparent 80%);
  pointer-events: none;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  animation: float 8s ease-in-out infinite;
}
.orb-1 { width: 500px; height: 500px; background: rgba(139, 92, 246, 0.2); top: -150px; left: -100px; }
.orb-2 { width: 400px; height: 400px; background: rgba(236, 72, 153, 0.15); bottom: 50px; right: -100px; animation-delay: -4s; }
.orb-3 { width: 300px; height: 300px; background: rgba(6, 182, 212, 0.15); bottom: 20%; left: 20%; animation-delay: -2s; }
@keyframes float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-30px) scale(1.05); } }

.hero-content { position: relative; z-index: 1; max-width: 850px; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 20px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  color: var(--primary-light);
  margin-bottom: 24px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15);
}
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 900; margin-bottom: 16px; line-height: 1.15; }
.hero p { font-size: 16px; color: var(--text-secondary); max-width: 580px; margin: 0 0 28px; line-height: 1.7; }
.hero-actions { display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; }
@media (max-width: 992px) {
  .hero-actions { justify-content: center; }
}

/* ---- Enhanced Feature Chips & Interactive Metrics ---- */
.hero-feature-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  margin-bottom: 14px;
}
@media (max-width: 992px) {
  .hero-feature-chips {
    justify-content: center;
  }
}

.feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-chip:hover {
  border-color: rgba(168, 85, 247, 0.5);
  color: #ffffff;
  background: rgba(168, 85, 247, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.2);
}

.chip-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: pulseGlow 1.5s infinite;
}

@keyframes pulseGlow {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.btn-glow-pulse {
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.4), 0 4px 15px rgba(244, 63, 94, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-glow-pulse:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 35px rgba(168, 85, 247, 0.6), 0 6px 20px rgba(244, 63, 94, 0.5);
}

.btn-glass-hover {
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.btn-glass-hover:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.6);
  background: rgba(56, 189, 248, 0.1);
}

.hero-stats-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(17, 17, 24, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 16px 24px;
  margin-top: 20px;
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 992px) {
  .hero-stats-card {
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 16px;
  }
}

.stat-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 768px) {
  .stat-divider {
    display: none;
  }
}

/* ---- Side-by-Side Split Hero Layout ---- */
.hero-split-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 36px;
  align-items: center;
  text-align: left;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}
.hero-split-grid > * {
  min-width: 0;
}
/* 2026-10-23 SMOOTH-FIX-3: promo video OFF → hero is single-column & centered from first paint */
.mx-promo-off .hero-right-video {
  display: none !important;
}
.mx-promo-off .hero-split-grid {
  grid-template-columns: 1fr !important;
  text-align: center;
}
.mx-promo-off .hero-left-content {
  align-items: center !important;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.mx-promo-off .hero-left-content h1 {
  justify-content: center;
}
/* 2026-10-23 ENTRY-JOLT-FIX: the CSS first-paint layout must be IDENTICAL to the final
   layout that renderHeroPromoVideo's OFF branch applies via inline styles seconds later.
   Before this, on entry the banner rendered full column width with smaller heading text,
   then the JS pass capped the banner at 600px and enlarged the texts — the visible
   "banner starts big, then the page jolts and settles" the owner reported on PC.
   These values mirror the JS OFF branch exactly, so that pass now changes nothing. */
.mx-promo-off .hero-split-grid {
  max-width: 100% !important;
  width: 100% !important;
}
.mx-promo-off .hero-left-content {
  max-width: 100% !important;
  width: 100% !important;
}
/* 2026-10-23 MOBILE-HERO-RESTORE (user order): the big promo-off h1 size applies
   on desktop only. At <=992px this !important rule outranked the site's own
   responsive-typography rule (max 24px), blowing the mobile heading up to 40px
   so the MX logo + MOTION-X + word box no longer fit one line and stacked.
   Scoping it to desktop restores the original mobile arrangement; the JS pass
   still sets the same clamp inline, where the <=992 !important rule wins as it
   always did - so no entry jolt returns on mobile either. */
@media (min-width: 993px) {
  .mx-promo-off .hero-left-content h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
  }
}
.mx-promo-off .hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important;
  max-width: 800px !important;
  margin: 0 auto 26px !important;
  text-align: center !important;
}
.mx-promo-off .hero-platform-anim-banner {
  max-width: 600px !important;
  margin: 20px auto !important;
}
@media (max-width: 992px) {
  .hero {
    min-height: 0 !important;
    display: block !important;
    padding-top: 12px !important;
  }
  .hero-split-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px;
  }
}
.hero-left-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
@media (max-width: 992px) {
  .hero-left-content {
    align-items: center;
  }
}

.hero-right-video {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  margin-top: 0;
}
@media (max-width: 992px) {
  .hero-right-video {
    margin-top: 24px;
  }
}

/* Widescreen Video Card in Split Layout (16:9 Perfect Frame Fit) */
.hero-video-card-split {
  background: rgba(17, 17, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 14px;
  backdrop-filter: blur(24px);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.75), 0 0 45px rgba(139, 92, 246, 0.3);
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.hero-video-card-split:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 55px rgba(139, 92, 246, 0.4);
  border-color: rgba(139, 92, 246, 0.5);
}
.hero-video-wrap-large {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  pointer-events: auto;
}
@supports not (aspect-ratio: 16 / 9) {
  .hero-video-wrap-large {
    height: 0;
    padding-bottom: 56.25%; /* 16:9 widescreen fallback */
  }
}
.hero-video-wrap-large iframe,
.hero-video-wrap-large video,
.hero-video-wrap-large .promo-iframe-element,
.hero-video-wrap-large .promo-native-element {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border: none; border-radius: var(--radius);
  object-fit: cover;
  pointer-events: auto;
}
.hero-sound-bar {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  position: relative;
  z-index: 10;
  pointer-events: auto; /* Ensures Sound Toggle button remains interactive */
}
.sound-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}
.sound-toggle-btn:hover {
  background: var(--primary);
  border-color: var(--primary-light);
  transform: scale(1.04);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

/* ---- Platform Animation Banner ---- */
.hero-platform-anim-banner {
  width: 100%;
  background: rgba(15, 15, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 12px 18px;
  backdrop-filter: blur(20px);
  margin: 14px 0 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.platform-slide-card {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  width: 100%;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.platform-slide-card.entering {
  transform: translateY(45px) translateX(100px) rotate(10deg);
  opacity: 0;
}
.platform-slide-card.exiting {
  transform: translateY(-30px);
  opacity: 0;
}

@media (max-width: 992px) {
  .platform-slide-card {
    justify-content: flex-start;
    text-align: left;
  }
}
.platform-logo-badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.platform-logo-badge.intro-phase {
  /* 2026-10-23: centered via JS-measured --mx-badge-cx (exact middle on every screen) */
  transform: translateX(var(--mx-badge-cx, 0px)) scale(1);
  opacity: 1;
}
/* Logo centered, then moves left */
.platform-logo-badge.center-phase {
  transform: translateX(var(--mx-badge-cx, 0px)) scale(1.1);
  opacity: 1;
}
@media (max-width: 992px) {
  .platform-logo-badge.intro-phase {
    transform: translateX(var(--mx-badge-cx, 0px)) scale(1);
  }
}
.platform-logo-badge.active-phase {
  transform: translateX(0) scale(1);
  opacity: 1;
}

.platform-slide-card:hover .platform-logo-badge {
  transform: scale(1.1) rotate(4deg);
}
.platform-logo-badge.logo-yt {
  background: radial-gradient(circle, #ff0000 0%, #b30000 100%);
  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);
}
.platform-logo-badge.logo-fb {
  background: radial-gradient(circle, #1877f2 0%, #0d52b6 100%);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}
.platform-logo-badge.logo-tiktok {
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 20px rgba(0, 242, 254, 0.3);
}
.platform-logo-badge.logo-prompt {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}
.platform-logo-badge.logo-ai {
  background: linear-gradient(135deg, #10a37f 0%, #059669 100%);
  box-shadow: 0 6px 20px rgba(16, 163, 127, 0.4);
}
.platform-text-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  min-width: 0;
  flex: 1;
}
.platform-text-box.active-phase {
  opacity: 1;
  transform: translateX(0);
}
.platform-typing-title {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.35;
}
.platform-text-title {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.platform-text-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.platform-dots-nav {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.platform-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}
.platform-dot.active {
  width: 24px;
  border-radius: 10px;
  background: var(--primary-light);
}

/* ---- Floating Elements ---- */
.floating-elements-container {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  overflow: hidden;
}
.float-item {
  position: absolute; pointer-events: auto;
  width: 65px; height: 65px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  cursor: grab;
  transition: border-color 0.3s, box-shadow 0.3s;
  user-select: none;
}
.float-item svg { width: 36px; height: 36px; fill: currentColor; }
.float-item:active { cursor: grabbing; }
.float-item:hover { border-color: var(--primary-light); box-shadow: var(--shadow-purple); }
.float-item.dragging { transition: none; z-index: 10; animation: none; }
.float-chatgpt { top: 15%; left: 8%; animation: floatSlow 9s ease-in-out infinite; }
.float-yt { top: 25%; right: 10%; animation: floatSlow 12s ease-in-out infinite reverse; color: #ff0000; }
.float-fb { bottom: 20%; left: 12%; animation: floatSlow 10s ease-in-out infinite; color: #1877f2; }
.float-pro { bottom: 25%; right: 12%; animation: floatSlow 11s ease-in-out infinite reverse; }
.float-ai { top: 60%; right: 25%; animation: floatSlow 8s ease-in-out infinite; color: #00d4aa; }
@keyframes floatSlow {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(15px, -20px) rotate(10deg); }
  66% { transform: translate(-10px, 15px) rotate(-5deg); }
}

/* Typing Effect */
.typing-wrapper {
  display: inline-flex;
  align-items: center;
}
.typing-text {
  background: var(--grad-purple);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
}
.cursor {
  display: inline-block;
  width: 4px;
  height: 1.1em;
  background-color: var(--primary-light);
  margin-left: 6px;
  animation: blink 1s step-end infinite;
  vertical-align: middle;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Hero Courses Preview */
.hero-courses-preview {
  display: flex; gap: 16px; margin-top: 48px; justify-content: center;
  z-index: 5; position: relative;
  flex-wrap: wrap;
}
.mini-course-card {
  background: rgba(17,17,19, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  padding: 12px 20px;
  border-radius: 100px;
  display: flex; align-items: center; gap: 12px;
  transition: all 0.3s;
  cursor: pointer; text-decoration: none; color: inherit;
}
.mini-course-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.05);
  border-color: var(--primary-light);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.2);
}
.mini-course-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.mini-course-fb { background: rgba(24,119,242,0.2); color: var(--accent-fb); }
.mini-course-yt { background: rgba(255,0,0,0.2); color: var(--accent-yt); }
.mini-course-ai { background: rgba(0,212,170,0.2); color: var(--accent-ai); }
.mini-course-text { font-size: 14px; font-weight: 700; }

/* ---- Viral & Products Section ---- */
.viral-section {
  padding: 80px 24px 0; max-width: 1200px; margin: 0 auto;
}
.viral-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media(max-width: 900px) { .viral-grid { grid-template-columns: 1fr; } }
.viral-col-header {
  font-size: 20px; font-weight: 800; margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.viral-thumbs {
  display: flex; flex-direction: column; gap: 16px; height: 100%;
}
.ai-tool-card {
  background: linear-gradient(160deg, #18181b 0%, #09090b 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px; text-align: center;
  transition: all 0.3s;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; text-decoration: none; color: inherit;
}
.ai-tool-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-ai);
  box-shadow: 0 12px 40px rgba(0, 212, 170, 0.15);
}
.ai-tool-icon {
  width: 72px; height: 72px;
  background: rgba(255,255,255,0.05);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,0.1);
}
.ai-tool-icon svg { width: 44px; height: 44px; fill: currentColor; }
.ai-tool-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.ai-tool-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.yt-thumb-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; gap: 16px;
  transition: all 0.3s;
  cursor: pointer;
  text-decoration: none; color: inherit;
}
.yt-thumb-card:hover {
  background: var(--bg-glass);
  border-color: var(--primary-light);
  transform: translateX(8px);
}
.yt-img-wrap {
  width: 160px; height: 90px;
  background: linear-gradient(135deg, #18181b, #27272a);
  border-radius: 8px; position: relative;
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.yt-img-wrap .play-icon {
  font-size: 28px; color: #fff; z-index: 2; opacity: 0.8;
}
.yt-badge {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,0.8);
  padding: 2px 6px; border-radius: 4px;
  font-size: 11px; font-weight: 700; color: #fff; z-index: 2;
}
.yt-badge.views { bottom: auto; top: 6px; left: 6px; right: auto; background: var(--accent-yt); }
.yt-info { display: flex; flex-direction: column; justify-content: center; }
.yt-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; line-height: 1.4; }
.yt-meta { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }

.products-display {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.product-card {
  background: linear-gradient(145deg, #111113 0%, #1a1a1e 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; justify-content: center;
}
.product-card:hover {
  border-color: var(--primary-light);
  box-shadow: 0 10px 40px rgba(124,58,237,0.15);
  transform: translateY(-4px);
}
.product-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin: 0 auto 16px;
  border: 1px solid rgba(255,255,255,0.1);
}
.product-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.product-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

/* ---- Section ---- */
.section { padding: 80px 24px; max-width: 1200px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 56px; }
.section-header h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 12px; }
.section-header p { color: var(--text-secondary); font-size: 16px; max-width: 500px; margin: 0 auto; }
.section-divider {
  width: 48px; height: 3px;
  background: var(--grad-purple);
  border-radius: 2px;
  margin: 16px auto;
}

/* ---- Category Cards ---- */
.categories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media(max-width:900px) { .categories-grid { grid-template-columns: 1fr; } }
.cat-card {
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  display: block;
}
.cat-card:hover { transform: translateY(-6px) scale(1.01); }
.cat-card-fb { background: linear-gradient(145deg, #0a2a5e 0%, #0f3d85 60%, #1877f2 100%); border-color: rgba(24,119,242,0.3); }
.cat-card-fb:hover { box-shadow: 0 20px 60px rgba(24,119,242,0.25); border-color: rgba(24,119,242,0.6); }
.cat-card-yt { background: linear-gradient(145deg, #3d0000 0%, #7a0000 60%, #cc0000 100%); border-color: rgba(255,0,0,0.3); }
.cat-card-yt:hover { box-shadow: 0 20px 60px rgba(255,0,0,0.2); border-color: rgba(255,0,0,0.5); }
.cat-card-ai { background: linear-gradient(145deg, #012a21 0%, #034d3c 60%, #00a882 100%); border-color: rgba(0,212,170,0.3); }
.cat-card-ai:hover { box-shadow: 0 20px 60px rgba(0,212,170,0.2); border-color: rgba(0,212,170,0.5); }
.cat-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  margin-bottom: 20px;
}
.cat-card h3 { font-size: 22px; margin-bottom: 8px; }
.cat-card p { color: rgba(255,255,255,0.7); font-size: 14px; margin-bottom: 20px; line-height: 1.6; }
.cat-count {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.6);
}
.cat-badge-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.cat-badge {
  padding: 4px 10px;
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.8);
}
.cat-arrow {
  position: absolute; right: 24px; bottom: 28px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: all 0.3s;
}
.cat-card:hover .cat-arrow { background: rgba(255,255,255,0.2); transform: translate(4px, -4px); }

/* ---- Course Grid ---- */
.courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.course-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.course-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.course-thumb {
  width: 100%; aspect-ratio: 16/9;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  position: relative; overflow: hidden;
}
/* 2026-10-23 SMOOTH-FIX-4: card images fade in softly instead of popping over a blank area */
.course-thumb img { width: 100%; height: 100%; object-fit: cover; animation: fadeIn 0.35s ease both; }
.ticker-card-thumb img { animation: fadeIn 0.35s ease both; }
/* 2026-10-23 SMOOTH-FIX-4: skeleton cards shown while course data loads */
.mx-skeleton-card {
  border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 14px;
  animation: mxSkeletonPulse 1.3s ease-in-out infinite;
}
.mx-skeleton-thumb { width: 100%; aspect-ratio: 16/9; background: rgba(255,255,255,0.06); }
.mx-skeleton-line { height: 12px; border-radius: 6px; background: rgba(255,255,255,0.07); margin: 12px 14px 0; }
.mx-skeleton-line.short { width: 55%; }
@keyframes mxSkeletonPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.course-thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
}
.course-lock-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px;
  opacity: 0;
  transition: opacity 0.3s;
}
.course-card:hover .course-lock-overlay { opacity: 1; }
.lock-icon { font-size: 28px; }
.lock-text { font-size: 12px; font-weight: 600; color: var(--gold); }
.course-body { padding: 20px; }
.course-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.course-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; line-height: 1.4; }
.course-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 16px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.course-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.course-price { font-size: 18px; font-weight: 800; }
.course-price.free { color: var(--accent-ai); }
.course-price.premium { color: var(--gold); }
.course-rating { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-secondary); }

/* ---- Filter Tabs ---- */
.filter-tabs {
  display: flex; gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.filter-tab {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; gap: 6px;
}
.filter-tab:hover { border-color: var(--border-hover); color: var(--text-primary); }
.filter-tab.active {
  background: rgba(124,58,237,0.15);
  border-color: var(--primary);
  color: var(--primary-light);
}
.filter-tab .tab-dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-fb { background: var(--accent-fb); }
.dot-yt { background: var(--accent-yt); }
.dot-ai { background: var(--accent-ai); }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: all 0.3s;
}
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal {
  background: #111113;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px;
  width: 100%; max-width: 480px;
  transform: scale(0.9) translateY(20px);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}
.modal-overlay.show .modal { transform: scale(1) translateY(0); }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: all 0.2s;
}
.modal-close:hover { background: rgba(255,0,0,0.1); color: #ff4444; }
.modal-logo { text-align: center; margin-bottom: 28px; }
.modal h2 { font-size: 24px; text-align: center; margin-bottom: 6px; }
.modal-sub { text-align: center; color: var(--text-secondary); font-size: 14px; margin-bottom: 28px; }
.modal-tabs {
  display: flex; background: var(--bg-glass); border-radius: 10px; padding: 4px;
  margin-bottom: 24px;
}
.modal-tab {
  flex: 1; padding: 10px; text-align: center;
  font-size: 14px; font-weight: 600;
  border-radius: 8px; cursor: pointer;
  color: var(--text-secondary); transition: all 0.2s;
}
.modal-tab.active { background: var(--primary); color: #fff; }

/* ---- Form ---- */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 6px;
}
.form-input {
  width: 100%; padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px; font-family: inherit;
  transition: all 0.2s; outline: none;
}
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.15); }
.form-input::placeholder { color: var(--text-muted); }
.phone-input-group { display: flex; gap: 8px; }
.phone-prefix {
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: 14px;
  cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.input-with-icon { position: relative; }
.input-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 16px; pointer-events: none;
}
.input-with-icon .form-input { padding-left: 44px; }
.form-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; color: var(--text-muted); font-size: 13px;
}
.form-divider::before, .form-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.social-login { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.social-btn {
  padding: 11px;
  background: var(--bg-glass); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary); font-size: 13px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 8px; justify-content: center;
  transition: all 0.2s; text-decoration: none;
}
.social-btn:hover { border-color: var(--border-hover); background: var(--bg-glass-hover); }
.agree-text { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 16px; }
.agree-text a { color: var(--primary-light); text-decoration: none; }

/* ---- Paywall Blur ---- */
.paywall-blur { filter: blur(6px); user-select: none; pointer-events: none; }
.paywall-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; z-index: 10;
}
.paywall-box {
  background: rgba(17,17,19,0.95);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius);
  padding: 28px; text-align: center;
  max-width: 300px;
  box-shadow: var(--shadow-purple);
}
.paywall-icon { font-size: 40px; margin-bottom: 12px; }
.paywall-box h3 { font-size: 18px; margin-bottom: 8px; }
.paywall-box p { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }

/* ---- Toast ---- */
.toast-container { position: fixed; top: 80px; right: 24px; z-index: 3000; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  min-width: 280px;
  animation: toastIn 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: var(--shadow-card);
}
.toast.success { border-left: 3px solid var(--accent-ai); }
.toast.error { border-left: 3px solid var(--accent-yt); }
.toast.info { border-left: 3px solid var(--primary-light); }
@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ---- Admin ---- */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 260px; height: 100vh;
  background: #0c0c0f;
  border-right: 1px solid var(--border);
  padding: 0;
  position: fixed; top: 0; left: 0;
  display: flex; flex-direction: column;
  z-index: 100;
}
.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
}
.sidebar-nav { flex: 1; padding: 16px 12px; overflow-y: auto; }
.sidebar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--text-secondary); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
  margin-bottom: 2px; text-decoration: none;
  border: none; background: none; width: 100%; text-align: left;
}
.sidebar-item:hover { background: var(--bg-glass); color: var(--text-primary); }
.sidebar-item.active { background: rgba(124,58,237,0.15); color: var(--primary-light); }
.sidebar-item .item-icon { width: 20px; text-align: center; font-size: 16px; }
.sidebar-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-muted); padding: 16px 14px 8px;
}
.admin-main { margin-left: 260px; flex: 1; padding: 32px; min-height: 100vh; }
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 32px;
}
.admin-topbar h1 { font-size: 24px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
}
.stat-card-label { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.stat-card-value { font-size: 2.2rem; font-weight: 800; }
.stat-card-change { font-size: 12px; color: var(--accent-ai); margin-top: 4px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; padding: 12px 16px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.data-table td { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 14px; }
.data-table tr:hover td { background: var(--bg-glass); }
.table-wrapper { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

@media (max-width: 900px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar {
    width: 100%; position: relative; min-height: auto;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .sidebar-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; }
  .sidebar-item { width: auto; font-size: 13px; padding: 8px 12px; }
  .admin-main { margin-left: 0; padding: 16px; width: 100%; }
}

/* ---- Checkout ---- */
.checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 24px; max-width: 900px; margin: 0 auto; }
@media(max-width:768px) { .checkout-layout { grid-template-columns: 1fr; } }
.payment-method {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  cursor: pointer; transition: all 0.2s; margin-bottom: 12px;
}
.payment-method.selected { border-color: var(--primary); background: rgba(124,58,237,0.08); }
.payment-logo {
  width: 76px; height: 38px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  overflow: hidden; flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;
}
.payment-logo:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.pay-bkash { background: linear-gradient(135deg, #e2136e 0%, #b80c56 100%); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.pay-nagad { background: linear-gradient(135deg, #f7941d 0%, #ee4036 100%); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.pay-rocket { background: linear-gradient(135deg, #a0338a 0%, #662d91 100%); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.step-indicator {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 32px;
}
.step {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
}
.step-circle {
  width: 28px; height: 28px;
  border-radius: 50%; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--text-muted);
}
.step.active .step-circle { border-color: var(--primary); background: var(--primary); color: #fff; }
.step.done .step-circle { border-color: var(--accent-ai); background: var(--accent-ai); color: #fff; }
.step-line { flex: 1; height: 2px; background: var(--border); }
.step.done + .step-line { background: var(--accent-ai); }

/* ---- Multi-Row TV Ticker Marquees ---- */
.multi-marquee-container {
  overflow: hidden;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(17, 19, 34, 0.7) 0%, rgba(9, 9, 15, 0.95) 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.marquee-row {
  overflow: hidden;
  position: relative;
  display: flex;
  width: 100%;
}

.marquee-track-forward {
  display: flex;
  gap: 16px;
  animation: marqueeForward 35s linear infinite;
  width: max-content;
}

.marquee-track-reverse {
  display: flex;
  gap: 16px;
  animation: marqueeReverse 35s linear infinite;
  width: max-content;
}

.marquee-track-forward:hover,
.marquee-track-reverse:hover {
  animation-play-state: paused;
}

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

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

.marquee-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.marquee-pill:hover {
  transform: translateY(-2px) scale(1.03);
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.5);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.25);
}

.pill-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.pill-badge-prompt { background: rgba(124, 58, 237, 0.25); color: #c4b5fd; border: 1px solid rgba(124, 58, 237, 0.4); }
.pill-badge-facebook { background: rgba(24, 119, 242, 0.25); color: #60a5fa; border: 1px solid rgba(24, 119, 242, 0.4); }
.pill-badge-youtube { background: rgba(239, 68, 68, 0.25); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.4); }
.pill-badge-tiktok { background: rgba(255, 255, 255, 0.15); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); }
.pill-badge-instagram { background: rgba(236, 72, 153, 0.25); color: #f472b6; border: 1px solid rgba(236, 72, 153, 0.4); }
.pill-badge-tool { background: rgba(6, 182, 212, 0.25); color: #67e8f9; border: 1px solid rgba(6, 182, 212, 0.4); }

.pill-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.pill-tag {
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
}

/* ---- Centered Large Hero Video Card & Official Logo Motion Banner ---- */
.hero-video-card-large {
  position: relative;
  background: rgba(17, 19, 34, 0.85);
  backdrop-filter: blur(24px);
  border: 2px solid rgba(124, 58, 237, 0.5);
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 50px rgba(124, 58, 237, 0.35);
  transition: all 0.3s ease;
}

.hero-video-card-large:hover {
  border-color: rgba(124, 58, 237, 0.7);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.9), 0 0 65px rgba(124, 58, 237, 0.5);
}

.hero-video-wrap-large {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 380px;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  position: relative;
}

@media (max-width: 768px) {
  .hero-video-wrap-large {
    min-height: 220px;
  }
}

.hero-platform-anim-banner {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0,0,0,0.4);
  overflow: hidden;
  min-height: 54px;
}

.platform-slide-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.platform-logo-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.platform-logo-box svg {
  width: 22px;
  height: 22px;
}

.logo-yt { background: #ff0000; color: #fff; }
.logo-fb { background: #1877f2; color: #fff; }
.logo-tiktok { background: #000; color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.logo-prompt { background: linear-gradient(135deg, #7c3aed, #06b6d4); color: #fff; }
.logo-ai { background: linear-gradient(135deg, #10a37f, #059669); color: #fff; }

.platform-slide-text {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
}

/* Vertical Headline Sliding Ticker (Single-Line) */
.headline-slider-wrap {
  height: 48px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.headline-slider-track {
  display: flex;
  flex-direction: column;
  animation: slideHeadlines 12s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.headline-slide-item {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 28px;
  font-weight: 900;
  white-space: nowrap;
}

@keyframes slideHeadlines {
  0%, 22% { transform: translateY(0); }
  25%, 47% { transform: translateY(-48px); }
  50%, 72% { transform: translateY(-96px); }
  75%, 97% { transform: translateY(-144px); }
  100% { transform: translateY(0); }
}

@media (max-width: 768px) {
  .headline-slider-wrap { height: 38px; }
  .headline-slide-item { height: 38px; font-size: 20px; }
  @keyframes slideHeadlines {
    0%, 22% { transform: translateY(0); }
    25%, 47% { transform: translateY(-38px); }
    50%, 72% { transform: translateY(-76px); }
    75%, 97% { transform: translateY(-114px); }
    100% { transform: translateY(0); }
  }
}

.hero-floating-badge {
  position: absolute;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  z-index: 10;
  animation: floatBadge 3.5s ease-in-out infinite alternate;
}

.badge-robot {
  top: -12px;
  left: -12px;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  border: 1px solid rgba(255,255,255,0.3);
}

.badge-chatgpt {
  bottom: 24px;
  right: -16px;
  background: linear-gradient(135deg, #10a37f, #059669);
  border: 1px solid rgba(255,255,255,0.3);
  animation-delay: 0.8s;
}

.badge-fb {
  bottom: -10px;
  left: 20px;
  background: linear-gradient(135deg, #1877f2, #0052cc);
  border: 1px solid rgba(255,255,255,0.3);
  animation-delay: 1.5s;
}

@keyframes floatBadge {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-8px) rotate(2deg); }
}

/* ---- Footer ---- */
.footer {
  background: #0c0c0f;
  border-top: 1px solid var(--border);
  padding: 60px 24px 32px;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
@media(max-width:768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-brand p { font-size: 14px; color: var(--text-secondary); margin-top: 12px; line-height: 1.7; }
.footer-col h4 { font-size: 14px; font-weight: 700; margin-bottom: 16px; color: var(--text-primary); }
.footer-col a {
  display: block; font-size: 14px; color: var(--text-secondary);
  text-decoration: none; margin-bottom: 10px; transition: color 0.2s;
}
.footer-col a:hover { color: var(--primary-light); }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { font-size: 13px; color: var(--text-muted); }
.social-links { display: flex; gap: 10px; }
.social-link {
  width: 36px; height: 36px;
  border-radius: 8px; background: var(--bg-glass);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); text-decoration: none; font-size: 14px;
  transition: all 0.2s;
}
.social-link:hover { border-color: var(--primary-light); color: var(--primary-light); }

/* ---- Whatsapp Float ---- */
.whatsapp-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  width: 56px; height: 56px;
  background: #25d366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 24px rgba(37,211,102,0.4);
  cursor: pointer; transition: all 0.3s;
  animation: pulse 2.5s ease-in-out infinite;
  text-decoration: none;
}
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(37,211,102,0.6); }
@keyframes pulse { 0%,100% { box-shadow: 0 4px 24px rgba(37,211,102,0.4); } 50% { box-shadow: 0 4px 40px rgba(37,211,102,0.7); } }
@keyframes livePulse { 0% { transform: scale(0.95); opacity: 0.8; } 50% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(0.95); opacity: 0; } }
@keyframes modalPop { 0% { opacity: 0; transform: scale(0.85) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }

/* ---- Telegram Float ---- */
.telegram-float {
  position: fixed; bottom: 92px; right: 24px; z-index: 999;
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #0088cc, #00c6ff);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 24px rgba(0,136,204,0.4);
  cursor: pointer; transition: all 0.3s;
  text-decoration: none;
}
.telegram-float:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(0,136,204,0.7); }

/* ---- Responsive ---- */
@media(max-width: 768px) {
  .nav-links { display: none; }
  .hero { padding: 12px 16px 40px; }
  .section { padding: 60px 16px; }
  .categories-grid { grid-template-columns: 1fr; }
  .courses-grid { grid-template-columns: 1fr; }
  .modal { padding: 28px 20px; }
  .admin-sidebar { transform: translateX(-100%); }
  .admin-main { margin-left: 0; padding: 20px 16px; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---- Utilities ---- */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.text-sm { font-size: 14px; }
.text-xs { font-size: 12px; }
.text-muted { color: var(--text-secondary); }
.text-center { text-align: center; }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* ---- Animations ---- */
.fade-in { animation: fadeIn 0.6s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-2 { animation-delay: 0.2s; }
.fade-in-delay-3 { animation-delay: 0.3s; }

/* ---- Skeleton Loader ---- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-glass) 25%, rgba(255,255,255,0.07) 50%, var(--bg-glass) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- Progress Bar ---- */
.progress-bar {
  width: 100%; height: 4px;
  background: var(--border); border-radius: 2px; overflow: hidden;
}
.progress-fill {
  height: 100%; background: var(--grad-purple);
  border-radius: 2px; transition: width 0.5s ease;
}

/* ---- Custom Scrollbars for Prompt Boxes & Tables ---- */
.prompt-scroll,
.prompt-box pre,
textarea.form-input {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-light) rgba(0, 0, 0, 0.3);
}
.prompt-scroll::-webkit-scrollbar,
.prompt-box pre::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.prompt-scroll::-webkit-scrollbar-track,
.prompt-box pre::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
.prompt-scroll::-webkit-scrollbar-thumb,
.prompt-box pre::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 4px;
}

/* ---- Pro Welcome Popup Animations ---- */
@keyframes popInModal {
  0% { opacity: 0; transform: scale(0.85) translateY(30px); }
  70% { transform: scale(1.02) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes tickPop {
  0% { opacity: 0; transform: translateX(-15px) scale(0.9); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.pro-tick-item {
  animation: tickPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  opacity: 0;
}

/* ---- Navbar Scroll Offset ---- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
[id], section, .courses-grid {
  scroll-margin-top: 90px;
}

/* ---- Courses Hero ---- */
.courses-hero {
  padding: 48px 24px 20px;
  text-align: center;
  background: var(--bg-body);
}
.courses-hero-inner h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; margin-bottom: 16px; line-height: 1.1; }
.courses-hero-inner p { font-size: 16px; color: var(--text-secondary); max-width: 600px; margin: 0 auto; line-height: 1.6; }

/* ---- 5-Item Static Stats Counter Bar ---- */
.hero-stats-bar-section {
  width: 100%;
  padding: 10px 0 35px 0;
  position: relative;
  z-index: 10;
}
.stats-bar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.stats-bar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  width: 100%;
}
.stat-bar-card {
  background: rgba(18, 24, 38, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.stat-bar-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.25);
  background: rgba(26, 34, 52, 0.85);
}
.stat-bar-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(99, 102, 241, 0.2);
}
.stat-bar-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.stat-bar-number {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.stat-bar-label {
  font-size: 0.8rem;
  color: var(--text-secondary, #94a3b8);
  font-weight: 500;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1024px) {
  .stats-bar-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}
@media (max-width: 640px) {
  .stats-bar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ---- 3-Row Live Resource Tickers Section ---- */
.resource-marquee-section {
  width: 100%;
  overflow: hidden;
}
.resource-tickers-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.ticker-row-block {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ticker-row-label {
  padding: 0 4px;
}

.ticker-label-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.badge-prompt {
  background: rgba(168, 85, 247, 0.15);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.35);
}
.badge-course {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.35);
}
.badge-aitool {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.marquee-track-container {
  overflow: hidden;
  width: 100%;
  display: flex;
  position: relative;
  padding: 6px 0;
  mask-image: none;
  -webkit-mask-image: none;
}
.marquee-track {
  display: flex;
  gap: 10px;
  width: max-content;
  will-change: transform;
}
.marquee-forward {
  animation: marqueeScrollForward 68s linear infinite;
}
.marquee-reverse {
  animation: marqueeScrollReverse 68s linear infinite;
}
.marquee-track-container:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marqueeScrollForward {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}
@keyframes marqueeScrollReverse {
  0% { transform: translateX(-33.333%); }
  100% { transform: translateX(0); }
}

/* Individual Sleek Rectangular Product Ticker Card (Square/Rect Box Format) */
.ticker-card-box {
  display: flex;
  flex-direction: column;
  background: rgba(18, 24, 38, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  width: 168px;
  flex-shrink: 0;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
.ticker-card-box:hover {
  border-color: rgba(99, 102, 241, 0.5);
  transform: translateY(-4px);
  background: rgba(26, 34, 54, 0.95);
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.2);
}
.ticker-card-thumb-wrap {
  width: 100%;
  height: 84px;
  position: relative;
  background: rgba(15, 23, 42, 0.8);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ticker-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.ticker-card-box:hover .ticker-card-img {
  transform: scale(1.06);
}
.ticker-card-icon-lg {
  font-size: 2.5rem;
  line-height: 1;
}
.ticker-card-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(6px);
  color: #a78bfa;
  border: none;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 0 0 0 6px;
  letter-spacing: 0.2px;
  line-height: 1.3;
  white-space: nowrap;
}
.ticker-card-body {
  padding: 7px 9px 9px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ticker-card-title {
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.ticker-card-desc {
  font-size: 0.64rem;
  color: var(--text-secondary, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.ticker-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.65rem;
  gap: 4px;
  min-height: 20px;
}
.ticker-card-rating {
  color: #fbbf24;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
}
.ticker-card-price {
  color: #34d399;
  font-weight: 700;
}

/* ---- 3 Featured Category Grid Blocks (4 Cards Per Category Row) ---- */
.category-sections-container {
  width: 100%;
}
.category-section-block {
  width: 100%;
  margin-bottom: 35px;
}
.category-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.category-block-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.category-block-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.icon-prompt { background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.3); }
.icon-course { background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.3); }
.icon-aitool { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); }

.category-block-title h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary, #f8fafc);
  margin: 0;
  line-height: 1.2;
}
.category-block-title p {
  font-size: 0.8rem;
  color: var(--text-secondary, #94a3b8);
  margin: 2px 0 0 0;
}
.category-block-more {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary-light, #818cf8);
  text-decoration: none;
  transition: color 0.2s ease;
}
.category-block-more:hover {
  color: #a78bfa;
}

.cat-cards-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
}
.cat-cards-grid-4 .ticker-card-box {
  width: 100% !important;
}

@media (max-width: 1024px) {
  .cat-cards-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media (max-width: 580px) {
  .cat-cards-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ===================================================
   MOBILE RESPONSIVENESS FIXES (SAFE OVERRIDES)
   =================================================== */
@media (max-width: 768px) {
  /* Prevent horizontal scroll */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Force ONLY major grids to single column */
  .courses-grid,
  .footer-grid,
  .hero-split-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Card fixes (excluding ticker/slider cards) */
  .course-card, .glass-card {
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Navbar adjustments for small screens */
  .navbar {
    padding: 0 8px !important;
    justify-content: space-between !important;
  }
  .navbar-brand {
    gap: 6px !important;
    flex-shrink: 1 !important;
  }
  .brand-logo {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }
  .brand-name {
    font-size: 16px !important;
  }
  .nav-actions {
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  #nav-auth {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  .navbar .btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
  .lang-switcher {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* Responsive typography */
  .brand-stylish-header, .hero-static-brand, h1, h2, h3 {
    line-height: 1.3 !important;
  }
  .brand-stylish-header {
    font-size: clamp(18px, 5vw, 24px) !important;
    white-space: normal !important;
  }
  .hero-slot-box {
    max-width: 100% !important;
    height: 40px !important;
    min-width: 140px !important;
  }
  .slot-active-word {
    font-size: 18px !important;
  }

  /* Make filter tabs scrollable without overflowing */
  .filter-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch;
  }
  .filter-tabs::-webkit-scrollbar {
    height: 4px;
    background: transparent;
  }
  .filter-tabs::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
  }
  .filter-tabs .btn {
    flex-shrink: 0 !important;
  }

  /* Spacing */
  .hero {
    padding: 12px 16px 30px !important;
  }
  
  /* Hide desktop specific elements */
  .nav-links {
    display: none !important;
  }
  
  /* Make ticker cards smaller on mobile */
  .ticker-card-box {
    width: 170px !important;
    border-radius: 10px !important;
  }
  .ticker-card-thumb-wrap {
    height: 90px !important;
  }
  .ticker-card-title {
    font-size: 13px !important;
  }
  .ticker-card-desc {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  .ticker-card-body {
    padding: 8px 10px !important;
  }
}

/* ==== Demo Grids (Hide Footer) ==== */
.cat-cards-grid-4 .course-footer {
  display: none !important;
}
/* (Removed leftover styling for hidden footer) */

/* ==== Golden Premium Card ==== */
.golden-card {
  position: relative;
  border: none !important;
  padding: 2px !important;
  background: transparent !important;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.2);
}
.golden-card::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: conic-gradient(
    #ca8a04, 
    #ca8a04 20%, 
    #fef08a 25%, 
    #ffffff 30%, 
    #fef08a 35%, 
    #ca8a04 40%, 
    #ca8a04 100%
  );
  animation: rotateGolden 3s linear infinite;
  z-index: -2;
}
.golden-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  /* SOLID base colors prevent the spinning circle from showing inside the card */
  background: linear-gradient(180deg, #2b2208 0%, #111114 100%);
  border-radius: calc(var(--radius, 14px) - 2px);
  z-index: -1;
}
.golden-card > .course-thumb,
.golden-card > .ticker-card-thumb-wrap {
  border-top-left-radius: calc(var(--radius, 14px) - 2px) !important;
  border-top-right-radius: calc(var(--radius, 14px) - 2px) !important;
  overflow: hidden;
}
@keyframes rotateGolden {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ============================================================
   MOBILE RESPONSIVENESS & COMPACT CARDS ENHANCEMENTS
   ============================================================ */

html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.mobile-menu-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  color: var(--text-primary);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 20px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  transition: all 0.2s;
}

.mobile-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--primary);
}

.mobile-menu-drawer {
  position: fixed;
  top: 65px;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(16px);
  border-bottom: 1.5px solid var(--border);
  padding: 16px 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.8);
  animation: fadeInDown 0.25s ease;
}

.mobile-menu-drawer.hidden {
  display: none !important;
}

.mobile-menu-drawer a {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s;
}

.mobile-menu-drawer a:hover, .mobile-menu-drawer a.active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.2));
  border-color: rgba(6, 182, 212, 0.4);
  color: #38bdf8;
}

@media (max-width: 992px) {
  .mobile-menu-toggle {
    display: flex !important;
  }
  .nav-links {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 10px 14px !important;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(12px) !important;
  }
  .nav-actions {
    gap: 6px !important;
    align-items: center !important;
  }
  #nav-auth {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  #nav-auth .btn-sm, #nav-auth a.btn-sm {
    padding: 4px 8px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Home Screen 2-Column Cards on Mobile */
  .cat-cards-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Mobile Floating Rotating Social Channels Widget & Stack */
  #floating-social-rotating {
    bottom: 12px !important;
    right: 12px !important;
  }
  #social-expand-menu-stack {
    bottom: 72px !important;
    right: 12px !important;
  }
  /* Help Center button - same level as social button on mobile */
  #mx-help-center-btn {
    bottom: 12px !important;
    left: 12px !important;
  }

  /* Compact 1-Column Cards for Course Catalog (#courses-grid) on Mobile */
  #courses-grid, .courses-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #courses-grid .course-card, .courses-grid .course-card {
    border-radius: 14px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  #courses-grid .course-thumb, .courses-grid .course-thumb {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .course-body {
    padding: 10px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: space-between !important;
  }
  .course-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 4px 0 2px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.35 !important;
    height: 35px !important;
  }
  .course-desc {
    display: none !important;
  }
  .course-meta {
    display: flex !important;
    gap: 3px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  .course-meta .badge {
    font-size: 8.5px !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
  }
  .course-footer {
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
  }
  .course-price {
    font-size: 13px !important;
    font-weight: 900 !important;
  }
  .course-rating {
    font-size: 9px !important;
    color: #94a3b8 !important;
  }
  .card-buy-btn {
    padding: 5px 9px !important;
    font-size: 10.5px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    font-weight: 800 !important;
  }
  
  .hero { padding: 12px 16px 40px; }
  .section { padding: 60px 16px; }
  .categories-grid { grid-template-columns: 1fr; }
  .courses-grid { grid-template-columns: 1fr; }
  .modal { padding: 28px 20px; }
  .admin-sidebar { transform: translateX(-100%); }
  .admin-main { margin-left: 0; padding: 20px 16px; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---- Utilities ---- */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.text-sm { font-size: 14px; }
.text-xs { font-size: 12px; }
.text-muted { color: var(--text-secondary); }
.text-center { text-align: center; }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* ---- Animations ---- */
.fade-in { animation: fadeIn 0.6s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-2 { animation-delay: 0.2s; }
.fade-in-delay-3 { animation-delay: 0.3s; }

/* ---- Skeleton Loader ---- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-glass) 25%, rgba(255,255,255,0.07) 50%, var(--bg-glass) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- Progress Bar ---- */
.progress-bar {
  width: 100%; height: 4px;
  background: var(--border); border-radius: 2px; overflow: hidden;
}
.progress-fill {
  height: 100%; background: var(--grad-purple);
  border-radius: 2px; transition: width 0.5s ease;
}

/* ---- Custom Scrollbars for Prompt Boxes & Tables ---- */
.prompt-scroll,
.prompt-box pre,
textarea.form-input {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-light) rgba(0, 0, 0, 0.3);
}
.prompt-scroll::-webkit-scrollbar,
.prompt-box pre::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.prompt-scroll::-webkit-scrollbar-track,
.prompt-box pre::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
.prompt-scroll::-webkit-scrollbar-thumb,
.prompt-box pre::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 4px;
}

/* ---- Pro Welcome Popup Animations ---- */
@keyframes popInModal {
  0% { opacity: 0; transform: scale(0.85) translateY(30px); }
  70% { transform: scale(1.02) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes tickPop {
  0% { opacity: 0; transform: translateX(-15px) scale(0.9); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.pro-tick-item {
  animation: tickPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  opacity: 0;
}

/* ---- Navbar Scroll Offset ---- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
[id], section, .courses-grid {
  scroll-margin-top: 90px;
}

/* ---- Courses Hero ---- */
.courses-hero {
  padding: 48px 24px 20px;
  text-align: center;
  background: var(--bg-body);
}
.courses-hero-inner h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; margin-bottom: 16px; line-height: 1.1; }
.courses-hero-inner p { font-size: 16px; color: var(--text-secondary); max-width: 600px; margin: 0 auto; line-height: 1.6; }

@media (max-width: 768px) {
  .courses-hero {
    padding: 16px 16px 5px !important;
  }
  .courses-hero-inner {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .courses-hero-inner .hero-pill {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
  .courses-hero-inner h1 {
    margin-bottom: 8px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .courses-hero-inner p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-width: 100% !important;
    margin: 0 auto 8px !important;
  }
}

/* ---- 5-Item Static Stats Counter Bar ---- */
.hero-stats-bar-section {
  width: 100%;
  padding: 10px 0 35px 0;
  position: relative;
  z-index: 10;
}
.stats-bar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.stats-bar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  width: 100%;
}
.stat-bar-card {
  background: rgba(18, 24, 38, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.stat-bar-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.25);
  background: rgba(26, 34, 52, 0.85);
}
.stat-bar-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(99, 102, 241, 0.2);
}
.stat-bar-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.stat-bar-number {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.stat-bar-label {
  font-size: 0.8rem;
  color: var(--text-secondary, #94a3b8);
  font-weight: 500;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1024px) {
  .stats-bar-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}
@media (max-width: 640px) {
  .stats-bar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ---- 3-Row Live Resource Tickers Section ---- */
.resource-marquee-section {
  width: 100%;
  overflow: hidden;
}
.resource-tickers-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.ticker-row-block {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ticker-row-label {
  padding: 0 4px;
}
.ticker-label-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.badge-prompt {
  background: rgba(168, 85, 247, 0.15);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.35);
}
.badge-course {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.35);
}
.badge-aitool {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.marquee-track-container {
  overflow: hidden;
  width: 100%;
  display: flex;
  position: relative;
  padding: 6px 0;
  mask-image: none;
  -webkit-mask-image: none;
}
.marquee-track {
  display: flex;
  gap: 10px;
  width: max-content;
  will-change: transform;
}
.marquee-forward {
  animation: marqueeScrollForward 68s linear infinite;
}
.marquee-reverse {
  animation: marqueeScrollReverse 68s linear infinite;
}
.marquee-track-container:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marqueeScrollForward {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}
@keyframes marqueeScrollReverse {
  0% { transform: translateX(-33.333%); }
  100% { transform: translateX(0); }
}

/* Individual Sleek Rectangular Product Ticker Card (Square/Rect Box Format) */
.ticker-card-box {
  display: flex;
  flex-direction: column;
  background: rgba(18, 24, 38, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  width: 168px;
  flex-shrink: 0;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
.ticker-card-box:hover {
  border-color: rgba(99, 102, 241, 0.5);
  transform: translateY(-4px);
  background: rgba(26, 34, 54, 0.95);
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.2);
}
.ticker-card-thumb-wrap {
  width: 100%;
  height: 84px;
  position: relative;
  background: rgba(15, 23, 42, 0.8);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ticker-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.ticker-card-box:hover .ticker-card-img {
  transform: scale(1.06);
}
.ticker-card-icon-lg {
  font-size: 2.5rem;
  line-height: 1;
}
.ticker-card-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(6px);
  color: #a78bfa;
  border: none;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 0 0 0 6px;
  letter-spacing: 0.2px;
  line-height: 1.3;
  white-space: nowrap;
}
.ticker-card-body {
  padding: 7px 9px 9px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ticker-card-title {
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.ticker-card-desc {
  font-size: 0.64rem;
  color: var(--text-secondary, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.ticker-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.65rem;
  gap: 4px;
  min-height: 20px;
}
.ticker-card-rating {
  color: #fbbf24;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
}
.ticker-card-price {
  color: #34d399;
  font-weight: 700;
}

/* ---- 3 Featured Category Grid Blocks (4 Cards Per Category Row) ---- */
.category-sections-container {
  width: 100%;
}
.category-section-block {
  width: 100%;
  margin-bottom: 35px;
}
.category-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.category-block-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.category-block-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.icon-prompt { background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.3); }
.icon-course { background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.3); }
.icon-aitool { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); }

.category-block-title h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary, #f8fafc);
  margin: 0;
  line-height: 1.2;
}
.category-block-title p {
  font-size: 0.8rem;
  color: var(--text-secondary, #94a3b8);
  margin: 2px 0 0 0;
}
.category-block-more {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary-light, #818cf8);
  text-decoration: none;
  transition: color 0.2s ease;
}
.category-block-more:hover {
  color: #a78bfa;
}

.cat-cards-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
}
.cat-cards-grid-4 .ticker-card-box {
  width: 100% !important;
}

@media (max-width: 1024px) {
  .cat-cards-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media (max-width: 580px) {
  .cat-cards-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ===================================================
   MOBILE RESPONSIVENESS FIXES (SAFE OVERRIDES)
   =================================================== */
@media (max-width: 768px) {
  /* Prevent horizontal scroll */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Force ONLY major grids to single column */
  .courses-grid,
  .footer-grid,
  .hero-split-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Card fixes (excluding ticker/slider cards) */
  .course-card, .glass-card {
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Navbar adjustments for small screens */
  .navbar {
    padding: 0 8px !important;
    justify-content: space-between !important;
  }
  .navbar-brand {
    gap: 6px !important;
    flex-shrink: 1 !important;
  }
  .brand-logo {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }
  .brand-name {
    font-size: 16px !important;
  }
  .nav-actions {
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  #nav-auth {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  .navbar .btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
  .lang-switcher {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* Responsive typography */
  .brand-stylish-header, .hero-static-brand, h1, h2, h3 {
    line-height: 1.3 !important;
  }
  .brand-stylish-header {
    font-size: clamp(18px, 5vw, 24px) !important;
    white-space: normal !important;
  }
  .hero-slot-box {
    max-width: 100% !important;
    height: 40px !important;
    min-width: 140px !important;
  }
  .slot-active-word {
    font-size: 18px !important;
  }

  /* Make filter tabs scrollable without overflowing */
  .filter-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch;
  }
  .filter-tabs::-webkit-scrollbar {
    height: 4px;
    background: transparent;
  }
  .filter-tabs::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
  }
  .filter-tabs .btn {
    flex-shrink: 0 !important;
  }

  /* Spacing */
  .hero {
    padding: 12px 16px 30px !important;
  }
  
  /* Hide desktop specific elements */
  .nav-links {
    display: none !important;
  }
  
  /* Make ticker cards smaller on mobile */
  .ticker-card-box {
    width: 170px !important;
    border-radius: 10px !important;
  }
  .ticker-card-thumb-wrap {
    height: 90px !important;
  }
  .ticker-card-title {
    font-size: 13px !important;
  }
  .ticker-card-desc {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  .ticker-card-body {
    padding: 8px 10px !important;
  }
}

/* ==== Demo Grids (Hide Footer) ==== */
.cat-cards-grid-4 .course-footer {
  display: none !important;
}
/* (Removed leftover styling for hidden footer) */

/* ==== Golden Premium Card ==== */
.golden-card {
  position: relative;
  border: none !important;
  padding: 2px !important;
  background: transparent !important;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.2);
}
.golden-card::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: conic-gradient(
    #ca8a04, 
    #ca8a04 20%, 
    #fef08a 25%, 
    #ffffff 30%, 
    #fef08a 35%, 
    #ca8a04 40%, 
    #ca8a04 100%
  );
  animation: rotateGolden 3s linear infinite;
  z-index: -2;
}
.golden-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  /* SOLID base colors prevent the spinning circle from showing inside the card */
  background: linear-gradient(180deg, #2b2208 0%, #111114 100%);
  border-radius: calc(var(--radius, 14px) - 2px);
  z-index: -1;
}
.golden-card > .course-thumb,
.golden-card > .ticker-card-thumb-wrap {
  border-top-left-radius: calc(var(--radius, 14px) - 2px) !important;
  border-top-right-radius: calc(var(--radius, 14px) - 2px) !important;
  overflow: hidden;
}
@keyframes rotateGolden {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ============================================================
   MOBILE RESPONSIVENESS & COMPACT CARDS ENHANCEMENTS
   ============================================================ */

html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.mobile-menu-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  color: var(--text-primary);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 20px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  transition: all 0.2s;
}

.mobile-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--primary);
}

.mobile-menu-drawer {
  position: fixed;
  top: 65px;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(16px);
  border-bottom: 1.5px solid var(--border);
  padding: 16px 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.8);
  animation: fadeInDown 0.25s ease;
}

.mobile-menu-drawer.hidden {
  display: none !important;
}

.mobile-menu-drawer a {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s;
}

.mobile-menu-drawer a:hover, .mobile-menu-drawer a.active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.2));
  border-color: rgba(6, 182, 212, 0.4);
  color: #38bdf8;
}

@media (max-width: 992px) {
  .mobile-menu-toggle {
    display: flex !important;
  }
  .nav-links {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 10px 14px !important;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(12px) !important;
  }
  .nav-actions {
    gap: 6px !important;
    align-items: center !important;
  }
  #nav-auth {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  #nav-auth .btn-sm, #nav-auth a.btn-sm {
    padding: 4px 8px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Home Screen Cards on Mobile */
  .cat-cards-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Compact Sleek Cards on Course Catalog Mobile Screen */
  #courses-grid, .courses-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #courses-grid .course-card, .courses-grid .course-card {
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  #courses-grid .course-thumb, .courses-grid .course-thumb {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
  .course-body {
    padding: 8px 10px !important;
  }
  .course-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    margin: 4px 0 2px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.3 !important;
    height: 31px !important;
  }
  .course-desc {
    display: none !important;
  }
  .course-meta {
    gap: 3px !important;
  }
  .course-meta .badge {
    font-size: 8.5px !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
  }
  .course-footer {
    margin-top: 6px !important;
    padding-top: 4px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .course-price {
    font-size: 13px !important;
  }
  .course-rating {
    font-size: 9.5px !important;
  }
  .card-buy-btn {
    padding: 4px 8px !important;
    font-size: 10.5px !important;
    border-radius: 6px !important;
  }
  .course-card {
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .course-thumb {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
  .course-body {
    padding: 12px 14px !important;
  }
  .course-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    margin: 6px 0 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.35 !important;
  }
  .course-desc {
    display: none !important; /* Compact cards on mobile by removing long body text */
  }
  .course-meta {
    gap: 4px !important;
  }
  .course-meta .badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
  .course-footer {
    margin-top: 8px !important;
    padding-top: 8px !important;
  }
  .hero {
    padding: 8px 14px 20px !important;
    min-height: 0 !important;
    display: block !important;
  }
  .hero-subtitle {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .category-section-block {
    margin-bottom: 28px !important;
  }
}


/* ============================================================
   MOBILE STATS BAR (3 ITEMS ONLY) & MOBILE NAVBAR FIXES
   ============================================================ */

@media (max-width: 768px) {
  /* Limit stats bar to exactly 3 items on mobile */
  .stats-bar-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 0 4px !important;
  }
  .stats-bar-grid .stat-bar-card:nth-child(n+4) {
    display: none !important; /* Hide 4th and 5th stat cards on mobile */
  }
  .stat-bar-card {
    padding: 8px 4px !important;
    border-radius: 10px !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 3px !important;
    min-width: 0 !important;
  }
  .stat-bar-icon {
    font-size: 16px !important;
  }
  .stat-bar-number {
    font-size: 12.5px !important;
    font-weight: 900 !important;
  }
  .stat-bar-label {
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Navbar Mobile Sizing Fixes */
  .navbar {
    padding: 8px 10px !important;
  }
  .nav-actions {
    gap: 4px !important;
  }
  #nav-auth {
    max-width: 180px !important;
    overflow: hidden !important;
  }
  
  .lang-switcher {
    padding: 4px 6px !important;
    font-size: 11px !important;
  }
}

/* Prominent High-Contrast Back Button */
.back-btn-prominent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(59, 130, 246, 0.25));
  border: 1.5px solid rgba(6, 182, 212, 0.6);
  border-radius: 30px;
  color: #38bdf8 !important;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none !important;
  margin-bottom: 20px;
  box-shadow: 0 4px 18px rgba(6, 182, 212, 0.25);
  backdrop-filter: blur(10px);
  transition: all 0.25s ease;
}
.back-btn-prominent:hover, .back-btn-prominent:active {
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  color: #ffffff !important;
  box-shadow: 0 6px 24px rgba(6, 182, 212, 0.5);
  transform: translateY(-2px);
}

/* Mobile Filter Tabs Horizontal Scroll Bar */
@media (max-width: 768px) {
  .filter-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 6px 4px !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important;  /* IE and Edge */
  }
  .filter-tabs::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
  }
  .filter-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    border-radius: 20px !important;
  }
}

/* ============================================================
   CARD LIKE BUTTON, LEGIBLE COURSE TITLES & FILTER PILLS
   ============================================================ */

/* High-Contrast Prominent Like Button */
.card-like-btn {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  border-top: none !important;
  border-right: none !important;
  color: #ffffff !important;
  border-radius: 0 0 0 20px !important;
  padding: 5px 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 0, 0, 0.4) !important;
}
.card-like-btn.liked, .card-like-btn:hover {
  background: rgba(15, 23, 42, 0.96) !important;
  border-color: rgba(239, 68, 68, 0.85) !important;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.45) !important;
  transform: scale(1.06) !important;
}
.card-like-btn:active {
  transform: scale(0.95) !important;
}

/* High-Contrast Clear Course Titles Across All Screens */
.course-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.4 !important;
  margin: 6px 0 4px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 40px !important;
  word-break: break-word !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

/* Filter Tabs & Pill Formatting */
.filter-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 4px 0 !important;
}

.filter-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 15px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 30px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.filter-tab:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: rgba(6, 182, 212, 0.5) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}
.filter-tab.active {
  background: linear-gradient(135deg, #06b6d4, #3b82f6) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.45) !important;
}

/* Custom Highlighted Filter Badges */
.filter-tab[data-cat="instagram"] {
  border-color: rgba(225, 48, 108, 0.5) !important;
  color: #f472b6 !important;
}
.filter-tab[data-cat="instagram"]:hover, .filter-tab[data-cat="instagram"].active {
  background: linear-gradient(135deg, #e1306c, #833ab4) !important;
  color: #ffffff !important;
  border-color: #f472b6 !important;
  box-shadow: 0 4px 16px rgba(225, 48, 108, 0.45) !important;
}

.filter-tab[data-type="golden"] {
  border-color: rgba(250, 204, 21, 0.6) !important;
  color: #facc15 !important;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.12), rgba(234, 179, 8, 0.12)) !important;
}
.filter-tab[data-type="golden"]:hover, .filter-tab[data-type="golden"].active {
  background: linear-gradient(135deg, #facc15, #eab308) !important;
  color: #0f172a !important;
  border-color: #fef08a !important;
  box-shadow: 0 4px 16px rgba(250, 204, 21, 0.5) !important;
}

.filter-tab[data-cat="facebook"] { border-color: rgba(59, 130, 246, 0.5) !important; color: #60a5fa !important; }
.filter-tab[data-cat="youtube"] { border-color: rgba(239, 68, 68, 0.5) !important; color: #f87171 !important; }
.filter-tab[data-cat="tiktok"] { border-color: rgba(6, 182, 212, 0.5) !important; color: #22d3ee !important; }
.filter-tab[data-cat="master_prompt"] { border-color: rgba(245, 158, 11, 0.5) !important; color: #fbbf24 !important; }
.filter-tab[data-cat="ai_tool"] { border-color: rgba(168, 85, 247, 0.5) !important; color: #c084fc !important; }

@media (max-width: 768px) {
  .course-title {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.38 !important;
    margin: 5px 0 3px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 38px !important;
    word-break: break-word !important;
    text-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.6) !important;
  }
  .filter-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 12px 10px 12px !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }
  .filter-tabs::-webkit-scrollbar { display: none !important; }
  .filter-tab {
    padding: 6px 13px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }
}

/* ============================================================
   VIBRANT HIGH-CONTRAST CATEGORY BADGES & COMPACT WRAPPED TABS
   ============================================================ */

/* High-Contrast Category Badges on Cards */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Facebook Badge - Vibrant Blue with Crisp White Text */
.badge-fb {
  background: linear-gradient(135deg, #1877f2, #0d52b6) !important;
  color: #ffffff !important;
  border: 1px solid #60a5fa !important;
  box-shadow: 0 2px 8px rgba(24, 119, 242, 0.45) !important;
}

/* YouTube Badge - Vivid Red with Crisp White Text */
.badge-yt {
  background: linear-gradient(135deg, #ff0000, #c80000) !important;
  color: #ffffff !important;
  border: 1px solid #f87171 !important;
  box-shadow: 0 2px 8px rgba(255, 0, 0, 0.45) !important;
}

/* Instagram Badge - Vibrant Pink-Purple Gradient */
.badge-ig {
  background: linear-gradient(135deg, #e1306c, #833ab4) !important;
  color: #ffffff !important;
  border: 1px solid #f472b6 !important;
  box-shadow: 0 2px 8px rgba(225, 48, 108, 0.45) !important;
}

/* TikTok Badge - Cyan-Dark Gradient */
.badge-tiktok {
  background: linear-gradient(135deg, #0f172a, #00f2fe) !important;
  color: #ffffff !important;
  border: 1px solid #22d3ee !important;
  box-shadow: 0 2px 8px rgba(0, 242, 254, 0.45) !important;
}

/* Master Prompt Badge - Golden Orange */
.badge-prompt {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  color: #ffffff !important;
  border: 1px solid #fbbf24 !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.45) !important;
}

/* AI Tool Badge - Electric Purple */
.badge-ai {
  background: linear-gradient(135deg, #7c3aed, #4c1d95) !important;
  color: #ffffff !important;
  border: 1px solid #c084fc !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.45) !important;
}

.badge-general {
  background: linear-gradient(135deg, #334155, #1e293b) !important;
  color: #f8fafc !important;
  border: 1px solid #64748b !important;
}

/* Compact Wrapping Filter Tabs - Fits Everything Inward */
.filter-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 4px 0 !important;
  box-sizing: border-box !important;
}

.filter-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 13px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  border-radius: 25px !important;
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin: 2px 0 !important;
}

@media (max-width: 768px) {
  .filter-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 2px 4px !important;
    gap: 5px 6px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .filter-tab {
    padding: 5px 10px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    border-radius: 20px !important;
    flex-shrink: 0 !important;
    margin: 2px 0 !important;
  }
}

/* ============================================================
   16:9 WIDESCREEN THUMBNAIL ASPECT RATIO & MATCHED TICKER SPEEDS
   ============================================================ */

.course-thumb {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #0f172a !important;
}
.course-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px 12px 0 0 !important;
}

@media (max-width: 768px) {
  .course-thumb {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
}

/* Removed conflicting .card-like-btn static override here */

/* Mobile Navigation Auth Badge & Logout Button Visibility */
@media (max-width: 768px) {
  #nav-auth {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    max-width: none !important;
    overflow: visible !important;
  }
  .mobile-logout-btn {
    display: inline-flex !important;
    padding: 3px 7px !important;
    font-size: 10.5px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }
}

/* Clean User Profile Nav Button & Click Dropdown Menu */
.user-profile-nav-wrap {
  position: relative !important;
  display: inline-block !important;
}

.user-profile-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 20px !important;
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  max-width: 170px !important;
  overflow: hidden !important;
}
.user-profile-btn:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.45) !important;
}

.user-dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  margin-top: 8px !important;
  width: 230px !important;
  background: rgba(15, 23, 42, 0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65) !important;
  z-index: 99999 !important;
  text-align: left !important;
}

.user-dropdown-menu.hidden {
  display: none !important;
}

.dropdown-user-name {
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
  word-break: break-word !important;
}

.dropdown-user-id {
  font-size: 11.5px !important;
  color: #38bdf8 !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

.dropdown-user-plan {
  font-size: 11px !important;
  color: #94a3b8 !important;
  margin-bottom: 8px !important;
}

.dropdown-divider {
  height: 1px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  margin: 10px 0 !important;
}

.dropdown-logout-btn {
  width: 100% !important;
  padding: 8px 12px !important;
  background: rgba(239, 68, 68, 0.18) !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  color: #f87171 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}
.dropdown-logout-btn:hover {
  background: rgba(239, 68, 68, 0.3) !important;
  color: #ffffff !important;
}

/* Mobile Fix for Platform Banner */
@media (max-width: 576px) {
  .hero-platform-anim-banner {
    padding: 6px 16px !important;
    gap: 8px !important;
    min-height: 44px !important;
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box !important;
    margin: 14px auto 20px !important;
  }
  .platform-slide-wrap {
    gap: 8px !important;
    width: 100% !important;
  }
  .platform-slide-card {
    gap: 10px !important;
    width: 100% !important;
  }
  .platform-logo-badge {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }
  .platform-logo-badge svg {
    width: 18px !important;
    height: 18px !important;
  }
  .platform-text-title {
    font-size: 12.5px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
  }
  .platform-text-subtitle {
    font-size: 10px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }
  .platform-logo-badge.intro-phase {
    transform: translateX(var(--mx-badge-cx, calc((100vw - 102px) / 2))) scale(1.2) !important;
  }
  /* 2026-10-23 MOBILE-BANNER-FIX (mirror the PC sequence): the card must rise STRAIGHT UP
     in the center — base .entering swept it diagonally up-left (translateX(100px) rotate) —
     and the badge must HOLD its centered position through center-phase (base rule
     dropped it to 0, so on mobile the logo drifted left while rising). Only active-phase
     slides it left, exactly like PC. The center offset is NOT a fixed 90px anymore:
     --mx-badge-cx is measured per-device in JS (app.js showSlide) so the badge sits at
     the TRUE center of the banner on any phone width (90px sat ~50px left of center). */
  .platform-slide-card.entering {
    transform: translateY(40px) !important;
    opacity: 0 !important;
  }
  .platform-logo-badge.center-phase {
    transform: translateX(var(--mx-badge-cx, calc((100vw - 102px) / 2))) scale(1.15) !important;
    opacity: 1 !important;
  }
  .platform-logo-badge.active-phase {
    transform: translateX(0) scale(1) !important;
    opacity: 1 !important;
  }
}

/* Mobile Pricing Fix */
@media (max-width: 576px) {
  .card[class*="pricing-card-"] {
    padding: 24px 18px !important;
  }
  .card[class*="pricing-card-"] h3 {
    font-size: 20px !important;
  }
  .card[class*="pricing-card-"] .pricing-price {
    font-size: 36px !important;
  }
}

/* Mobile hamburger - bigger touch target */
@media (max-width: 768px) {
  .mobile-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    z-index: 1001;
    position: relative;
  }
  /* Ensure navbar doesn't block touches */
  .navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
}

/* Compact checkout for mobile & desktop */
.checkout-layout .card {
  padding: 16px !important;
  margin-bottom: 12px !important;
}
.checkout-layout h3 {
  font-size: 15px !important;
  margin-bottom: 12px !important;
}
.payment-method {
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
}
.payment-method .payment-logo img {
  width: 32px !important;
  height: 32px !important;
}
#course-thumb {
  width: 44px !important;
  height: 44px !important;
  font-size: 24px !important;
}
@media (max-width: 768px) {
  .checkout-layout {
    gap: 12px !important;
    padding: 0 12px !important;
  }
  .checkout-layout .card {
    padding: 12px !important;
  }
  /* Make order summary collapsible on mobile */
  .checkout-layout > div:last-child .card {
    position: static !important;
  }
}

/* Package mode - compact spacing */
.package-mode .course-card {
  margin-bottom: 8px !important;
  padding: 8px !important;
}
.package-mode .course-card img {
  height: 120px !important;
  object-fit: cover;
}
#pkg-bar {
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom)) !important;
}
#pkg-bar > div > div:first-child {
  margin-bottom: 6px !important;
}
/* Reduce gaps in courses grid */
#courses-grid {
  gap: 10px !important;
}
@media (max-width: 768px) {
  #courses-grid {
    gap: 8px !important;
    padding: 0 8px !important;
  }
  .course-card {
    margin-bottom: 0 !important;
  }
}

/* Desktop: bigger hero MOTION-X text */
@media (min-width: 993px) {
  .brand-stylish-header {
    font-size: clamp(32px, 4.5vw, 52px) !important;
  }
  .brand-logo {
    width: 68px !important;
    height: 68px !important;
    font-size: 28px !important;
  }
}

/* Desktop: hide MX box in hero title, show clean MOTION-X text */
@media (min-width: 993px) {
  .brand-stylish-header .brand-logo {
    display: none !important;
  }
}

/* Desktop: beautiful nav links */
@media (min-width: 993px) {
  .navbar .nav-links {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
  }
  .navbar .nav-links li a {
    padding: 10px 18px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #cbd5e1 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  .navbar .nav-links li a:hover {
    background: rgba(139,92,246,0.15) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
  }
  .navbar .nav-links li a.active {
    background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(236,72,153,0.25)) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(139,92,246,0.3) !important;
  }
  /* Desktop CTA button - show on desktop */
  .desktop-cta-btn {
    display: inline-flex !important;
  }
}
@media (max-width: 992px) {
  .desktop-cta-btn { display: none !important; }
}

/* PC ONLY: clean contained animation sequence */
@media (min-width: 993px) {
  .hero-platform-anim-banner {
    height: auto !important;
    min-height: 80px !important;
    overflow: hidden !important;
  }
  #platform-slide-container {
    height: auto !important;
    min-height: 80px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .platform-slide-card {
    justify-content: center !important;
    align-items: center !important;
  }
  /* Sequence: rise from below -> logo left -> text from right -> exit up */
  .platform-slide-card.entering {
    transform: translateY(40px) !important;
    opacity: 0 !important;
  }
  .platform-slide-card.exiting {
    transform: translateY(-40px) !important;
    opacity: 0 !important;
  }
  /* Ensure all 5 dots visible on PC */
  .platform-dots-nav {
    display: flex !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  .platform-dot {
    display: inline-block !important;
    visibility: visible !important;
  }
  /* PC: logo+text stay TOGETHER as one unit, centered */
  .platform-slide-card {
    max-width: 640px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
  }
  .platform-logo-badge {
    flex-shrink: 0 !important;
  }
  /* PC ONLY: logo phase sequence (mirrors mobile) */
  /* Phase 0 (intro): logo shifted right = appears centered (text hidden but occupies space).
     2026-10-23: shift is the JS-measured --mx-badge-cx — the OLD fixed 90px sat ~140px left
     of the banner's true center on PC (user's order: center it exactly, measured). */
  .platform-logo-badge.intro-phase {
    transform: translateX(var(--mx-badge-cx, 90px)) scale(1.2) !important;
    opacity: 1 !important;
  }
  /* Phase 1 (center): logo holds centered, slightly scaled */
  .platform-logo-badge.center-phase {
    transform: translateX(var(--mx-badge-cx, 90px)) scale(1.15) !important;
    opacity: 1 !important;
  }
  /* Phase 2 (active): logo slides LEFT to natural position as text enters from right */
  .platform-logo-badge.active-phase {
    transform: translateX(0) scale(1) !important;
    opacity: 1 !important;
  }
  .cat-cards-grid-4 {
    justify-content: center !important;
  }
  .platform-text-box {
    text-align: left !important;
  }
}

/* ===== PERFORMANCE (no visual change) ===== */
.product-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}
/* GPU acceleration for animated elements */
.stat-bar-card, .ticker-track, .platform-slide-card {
  will-change: transform;
  transform: translateZ(0);
}
/* Reduce animation workload on low-end */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile Library: TRUE horizontal scroll - one row, swipe sideways */
@media (max-width: 768px) {
  #library-grid {
    display: block !important;
  }
  /* Product cards container - horizontal scroll */
  #library-grid .lib-hscroll {
    display: flex !important;
    overflow-x: auto !important;
    gap: 12px !important;
    padding: 8px 4px 12px 4px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  #library-grid .lib-hscroll > * {
    flex: 0 0 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    scroll-snap-align: start;
  }
}