:root {
  --bg: #3d375e;
  --surface: #1b172e;
  --raised: #262140;
  --sunken: #120f20;
  --text: #f4f2fc;
  --muted: #b4afd0;
  --violet: #8b5cf6;
  --violet-d: #5b34c4;
  --cyan: #06b6d4;
  --cyan-d: #047a8f;
  --pink: #ec4899;
  --pink-d: #a8246a;
  --gold: #facc15;
  --gold-d: #a8860a;
  --hi: rgba(255, 255, 255, 0.18);
  --lo: rgba(0, 0, 0, 0.55);
  /* Real Physical Multi-Layer Cast Shadow Colors (Dark Studio Surface) */
  --shadow-contact-color: rgba(0, 0, 0, 0.9);
  --shadow-umbra-color: rgba(0, 0, 0, 0.96);
  --shadow-penumbra-color: rgba(2, 1, 8, 0.85);
  --surface-top-edge: rgba(255, 255, 255, 0.22);
  --slab: 0 20px 44px rgba(0, 0, 0, 0.88), 0 40px 80px rgba(0, 0, 0, 0.72);
  --well: 0 16px 38px rgba(0, 0, 0, 0.85);
  --hl: #3b2a7a;
}

[data-theme="light"] {
  --bg: #f2f0fa;
  --surface: #ffffff;
  --raised: #ebe7f8;
  --sunken: #e4dff4;
  --text: #161229;
  --muted: #565075;
  --hi: rgba(255, 255, 255, 0.95);
  --lo: rgba(60, 40, 120, 0.2);
  /* Real Physical Multi-Layer Cast Shadow Colors (Light Studio Surface) */
  --shadow-contact-color: rgba(24, 14, 62, 0.16);
  --shadow-umbra-color: rgba(24, 14, 62, 0.26);
  --shadow-penumbra-color: rgba(24, 14, 62, 0.15);
  --surface-top-edge: rgba(255, 255, 255, 0.98);
  --slab: 0 18px 40px rgba(32, 20, 78, 0.18), 0 36px 72px rgba(32, 20, 78, 0.12);
  --well: 0 14px 32px rgba(32, 20, 78, 0.16);
  --hl: #ffffff;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.25s ease, color 0.25s ease;
  overflow-x: hidden;
  margin: 0;
}

h1,
h2,
h3,
h4,
.brand-font {
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   TRANSPARENT TOP HEADER & FLUSH STICKY SCROLL HEADER (NO FLOATING BAR)
   ========================================================================== */
.site-header {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none !important;
}

.site-header.is-scrolled {
  background: rgba(18, 16, 29, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .site-header.is-scrolled {
  background: rgba(248, 247, 253, 0.92);
  box-shadow: 0 8px 24px rgba(65, 45, 135, 0.1);
}

/* ==========================================================================
   FEATURES DROPDOWN MENU (HOVER + CLICK SUPPORT)
   ========================================================================== */
.features-dropdown-card {
  background: rgba(24, 21, 43, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.65);
  border: none !important;
}

.feature-dropdown-item {
  text-decoration: none;
}

.feature-dropdown-item:hover {
  background: rgba(139, 92, 246, 0.18);
}

[data-theme="light"] .features-dropdown-card {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 45px rgba(65, 45, 135, 0.18);
}

[data-theme="light"] .feature-dropdown-item:hover {
  background: #f1effa;
}

/* ==========================================================================
   FLAT BUTTONS (NOT 3D)
   ========================================================================== */
.btn-flat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.btn-flat.btn-primary {
  background-color: #8b5cf6;
  color: #ffffff !important;
}

.btn-flat.btn-primary:hover {
  background-color: #7c3aed;
}

.btn-flat.btn-secondary {
  background-color: #06b6d4;
  color: #042f2e !important;
}

.btn-flat.btn-secondary:hover {
  background-color: #0891b2;
  color: #ffffff !important;
}

[data-theme="light"] .btn-flat.btn-primary {
  background-color: #7c3aed;
  color: #ffffff !important;
}

[data-theme="light"] .btn-flat.btn-primary:hover {
  background-color: #6d28d9;
}

[data-theme="light"] .btn-flat.btn-secondary {
  background-color: #0891b2;
  color: #ffffff !important;
}

[data-theme="light"] .btn-flat.btn-secondary:hover {
  background-color: #0e7490;
}

/* ==========================================================================
   CHATNITY BRAND LOGO & TWO-TONE WORDMARK ("Chat" + "nity")
   ========================================================================== */
.brand-logo-svg {
  filter: drop-shadow(0 3px 8px rgba(60, 176, 223, 0.35));
}

.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.brand-chat {
  color: #ffffff;
  transition: color 0.25s ease;
}

.brand-nity {
  color: #00b8d9;
}

[data-theme="light"] .brand-chat {
  color: #161229;
}

[data-theme="light"] .brand-nity {
  color: #009dc2;
}

/* ==========================================================================
   HERO SYNC VIDEO STATIC FRAME & PLAY BUTTON
   ========================================================================== */
.hero-watch-static-frame {
  background: #07191e;
}

@keyframes play-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.65), 0 8px 24px rgba(37, 99, 235, 0.65);
  }

  70% {
    box-shadow: 0 0 0 12px rgba(37, 99, 235, 0), 0 8px 24px rgba(37, 99, 235, 0.65);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0), 0 8px 24px rgba(37, 99, 235, 0.65);
  }
}

.hero-watch-play-btn {
  animation: play-pulse-ring 2.2s infinite;
}

/* ==========================================================================
   COMPREHENSIVE LIGHT THEME ([data-theme="light"]) OVERRIDES FOR ALL CONTENT
   ========================================================================== */
[data-theme="light"] #mobileNavDrawer .mobile-drawer-panel {
  background: #ffffff !important;
  color: #161229 !important;
}

/* Pure, Clean Studio Background so Dynamic Content Cast Shadows Stand Out Clearly */
#parallaxBg .bg-dark-base {
  background: var(--bg);
  opacity: 1;
}

[data-theme="light"] #parallaxBg .bg-dark-base {
  background: var(--bg) !important;
  opacity: 1 !important;
}

/* Convert general white text to deep indigo-slate in Light Mode */
[data-theme="light"] .text-white,
[data-theme="light"] .text-white\/90,
[data-theme="light"] .text-white\/85 {
  color: #161229 !important;
}

[data-theme="light"] .text-\[\#a29fbd\] {
  color: #565075 !important;
}

/* Convert all dark showcase containers (.static-workspace-dark) to crisp Light Mode surfaces */
[data-theme="light"] .static-workspace-dark {
  background-color: #ffffff !important;
  color: #161229 !important;
}

[data-theme="light"] .static-workspace-dark .bg-\[\#18152b\],
[data-theme="light"] .static-workspace-dark .bg-\[\#1c1830\],
[data-theme="light"] .static-workspace-dark .bg-\[\#161326\] {
  background-color: #ffffff !important;
}

[data-theme="light"] .static-workspace-dark .bg-\[\#151224\],
[data-theme="light"] .static-workspace-dark .bg-\[\#151226\],
[data-theme="light"] .static-workspace-dark .bg-\[\#141124\] {
  background-color: #f1effa !important;
}

[data-theme="light"] .static-workspace-dark .bg-\[\#12101e\],
[data-theme="light"] .static-workspace-dark .bg-\[\#131021\] {
  background-color: #f6f4fc !important;
}

[data-theme="light"] .static-workspace-dark .bg-\[\#272340\],
[data-theme="light"] .static-workspace-dark .bg-\[\#221d3a\],
[data-theme="light"] .static-workspace-dark .bg-\[\#1b1730\],
[data-theme="light"] .static-workspace-dark .bg-\[\#0d0b16\] {
  background-color: #edeaf8 !important;
  color: #161229 !important;
}

[data-theme="light"] .static-workspace-dark .bg-white\/5,
[data-theme="light"] .static-workspace-dark .bg-black\/35,
[data-theme="light"] .features-dropdown-card .bg-white\/5 {
  background-color: #e6e1f7 !important;
  color: #3f395e !important;
}

[data-theme="light"] .mobile-nav-link:hover,
[data-theme="light"] #mobileFeaturesToggle:hover {
  background-color: #f1effa !important;
}

/* High-contrast accent text colors in Light Mode */
[data-theme="light"] .text-yellow-300,
[data-theme="light"] .text-yellow-400,
[data-theme="light"] .text-\[\#facc15\],
[data-theme="light"] .text-amber-300,
[data-theme="light"] .text-amber-400,
[data-theme="light"] .text-amber-200\/80 {
  color: #b45309 !important;
}

[data-theme="light"] .text-emerald-300,
[data-theme="light"] .text-emerald-400,
[data-theme="light"] .text-emerald-300\/80 {
  color: #047857 !important;
}

[data-theme="light"] .static-workspace-dark .mod-promote-row {
  background-color: rgba(16, 185, 129, 0.14) !important;
}

[data-theme="light"] .static-workspace-dark .mod-promote-row:hover {
  background-color: rgba(16, 185, 129, 0.22) !important;
}

[data-theme="light"] .text-rose-300,
[data-theme="light"] .text-rose-400,
[data-theme="light"] .text-rose-200\/80,
[data-theme="light"] .text-rose-300\/80 {
  color: #be123c !important;
}

[data-theme="light"] .text-cyan-300,
[data-theme="light"] .text-cyan-400,
[data-theme="light"] .text-\[\#67e8f9\],
[data-theme="light"] .text-\[\#06b6d4\],
[data-theme="light"] .text-cyan-200\/80 {
  color: #0e7490 !important;
}

[data-theme="light"] .brand-nity {
  color: #009dc2 !important;
}

[data-theme="light"] .text-purple-300,
[data-theme="light"] .text-purple-200\/70,
[data-theme="light"] .text-\[\#a78bfa\] {
  color: #6d28d9 !important;
}

[data-theme="light"] .text-pink-300,
[data-theme="light"] .text-pink-400,
[data-theme="light"] .text-pink-300\/80,
[data-theme="light"] .text-\[\#f472b6\] {
  color: #be185d !important;
}

[data-theme="light"] .text-blue-300 {
  color: #1d4ed8 !important;
}

[data-theme="light"] .text-orange-300,
[data-theme="light"] .text-orange-200\/80 {
  color: #c2410c !important;
}

/* Preserve white text inside solid colored badges and buttons in Light Mode */
[data-theme="light"] .bg-\[\#8b5cf6\],
[data-theme="light"] .bg-\[\#8b5cf6\] .text-white,
[data-theme="light"] .bg-\[\#2563eb\],
[data-theme="light"] .bg-\[\#2563eb\] .text-white,
[data-theme="light"] .bg-\[\#ef4444\],
[data-theme="light"] .bg-\[\#ef4444\] .text-white,
[data-theme="light"] .bg-red-700,
[data-theme="light"] .bg-red-700 .text-white,
[data-theme="light"] .bg-emerald-500,
[data-theme="light"] .bg-orange-500,
[data-theme="light"] .bg-rose-500,
[data-theme="light"] .from-\[\#8b5cf6\].to-\[\#ec4899\],
[data-theme="light"] .hero-watch-play-btn {
  color: #ffffff !important;
}

/* Keep light-card UI previews (Sync Video Popup & Moderation Modal card) crisp in both themes */
.ui-card-light,
.ui-card-light .text-slate-900 {
  color: #0f172a !important;
}

/* Enforce zero borders across all feature content cards, slabs, wells, and showcases */
.slab,
.well,
.ui-card-light,
.static-workspace-dark,
[data-tilt-mode],
.hero-overlap-card,
.paint-content-showcase,
.paint-frameless-hero {
  border: none !important;
}

/* ==========================================================================
   DYNAMIC REAL PHYSICAL CAST SHADOW ENGINE WHEN CONTENT MOVES UP AND DOWN
   ========================================================================== */
.slab,
.well,
.static-workspace-dark,
.ui-card-light,
#heroTiltCard,
.hero-overlap-card {
  box-shadow:
    0 var(--real-contact-y, 6px) var(--real-contact-blur, 14px) -2px var(--shadow-contact-color),
    var(--real-shadow-x, 0px) var(--real-shadow-y, 26px) var(--real-shadow-blur, 52px) var(--real-shadow-spread, -4px) var(--shadow-umbra-color),
    var(--real-shadow-x, 0px) var(--real-penumbra-y, 44px) var(--real-penumbra-blur, 86px) -8px var(--shadow-penumbra-color),
    inset 0 1px 0 var(--surface-top-edge) !important;
}

/* ==========================================================================
   CINEMATIC SCROLL PROGRESS BAR
   ========================================================================== */
.cinematic-scroll-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3.5px;
  width: 100%;
  z-index: 100;
  pointer-events: none;
  transform-origin: 0% 50%;
  transform: scaleX(var(--scroll-progress, 0));
  background: linear-gradient(90deg, #8b5cf6 0%, #06b6d4 50%, #ec4899 80%, #facc15 100%);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.85), 0 0 28px rgba(6, 182, 212, 0.55);
  will-change: transform;
}

/* ==========================================================================
   VERTICAL CONTENT MOTION & REAL SHADOW HARDWARE ACCELERATION
   ========================================================================== */
[data-cinematic-hero],
[data-cinematic-side],
[data-cinematic-item] {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

[data-cinematic-row] {
  position: relative;
}

/* ==========================================================================
   UNIVERSAL 3D MOUSE-TILT SYSTEM
   (Applied ONLY to Static Content Cards — Never to Description Text)
   ========================================================================== */
.hero-stage-wrapper {
  position: relative;
  isolation: isolate;
}

#heroTiltCard {
  position: relative;
  z-index: 10;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Overlapping Hero Mini-Cards always stay strictly on top (z-index: 30) in their own compositing layer */
.hero-overlap-card {
  z-index: 30 !important;
  isolation: isolate;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

[data-tilt-mode] {
  position: relative;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-tilt-mode].is-resetting {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dynamic Specular Glare Overlay on Static Content Cards */
.tilt-glare,
.hero-glare {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 25;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-glare {
  background: radial-gradient(560px circle at var(--glare-x, 50%) var(--glare-y, 30%),
      rgba(255, 255, 255, 0.12),
      rgba(139, 92, 246, 0.07) 38%,
      transparent 70%);
}

[data-tilt-mode="perspective-swing"]>.tilt-glare {
  background: radial-gradient(460px circle at var(--glare-x, 50%) var(--glare-y, 50%),
      rgba(236, 72, 153, 0.15),
      rgba(139, 92, 246, 0.1) 42%,
      transparent 72%);
}

[data-tilt-mode="reverse-depth"]>.tilt-glare {
  background: radial-gradient(460px circle at var(--glare-x, 50%) var(--glare-y, 50%),
      rgba(6, 182, 212, 0.16),
      rgba(250, 204, 21, 0.08) 45%,
      transparent 74%);
}

[data-tilt-mode="magnetic-glow"]>.tilt-glare {
  background: radial-gradient(320px circle at var(--glare-x, 50%) var(--glare-y, 50%),
      rgba(139, 92, 246, 0.18),
      rgba(6, 182, 212, 0.08) 45%,
      transparent 70%);
}

[data-tilt-mode="spotlight-prism"]>.tilt-glare {
  background: radial-gradient(340px circle at var(--glare-x, 50%) var(--glare-y, 50%),
      rgba(255, 255, 255, 0.14),
      rgba(236, 72, 153, 0.1) 35%,
      rgba(6, 182, 212, 0.08) 60%,
      transparent 78%);
}

[data-tilt-mode="float-overlap"]>.tilt-glare {
  background: radial-gradient(260px circle at var(--glare-x, 50%) var(--glare-y, 50%),
      rgba(255, 255, 255, 0.16),
      rgba(139, 92, 246, 0.1) 45%,
      transparent 75%);
}

[data-tilt-mode]:hover>.tilt-glare,
#heroTiltCard:hover .hero-glare {
  opacity: 1;
}

[data-tilt-mode="magnetic-glow"]:hover {
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 0 28px rgba(139, 92, 246, 0.25);
}

[data-tilt-mode="spotlight-prism"]:hover {
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 0 28px rgba(6, 182, 212, 0.25);
}

[data-theme="light"] [data-tilt-mode="magnetic-glow"]:hover {
  box-shadow: 0 20px 45px rgba(65, 45, 135, 0.18), 0 0 28px rgba(139, 92, 246, 0.2);
}

[data-theme="light"] [data-tilt-mode="spotlight-prism"]:hover {
  box-shadow: 0 20px 45px rgba(65, 45, 135, 0.18), 0 0 28px rgba(6, 182, 212, 0.2);
}

/* Pop-out 3D inner badge effect on hover */
[data-tilt-mode] .tilt-pop-badge {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-tilt-mode]:hover .tilt-pop-badge {
  transform: translateY(-3px) scale(1.06);
}

/* ==========================================================================
   SYNC VIDEO OPTIMIZED VIDEO CLIP & STAGE VISUALS
   ========================================================================== */
.watch-video-canvas {
  background: #06080f;
  position: relative;
  overflow: hidden;
}

.watch-party-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateZ(0);
  will-change: transform;
  filter: saturate(1.12) contrast(1.04);
}

/* ==========================================================================
   PAINT STUDIO RESPONSIVE LANDING PAGE IMAGES (PICTURE ONLY)
   ========================================================================== */
.paint-landing-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
}

.paint-mini-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
}

.paint-chat-thumb {
  width: 118px;
  height: 66px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  display: block;
}

/* ==========================================================================
   NEON GLOW & STYLED USERNAME EFFECTS FOR RANDOM ROSTER (DARK + LIGHT)
   ========================================================================== */
.glow-neon-pink {
  color: #f0abfc !important;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-style: italic;
  font-size: 1.15em;
  text-shadow: 0 0 10px rgba(217, 70, 239, 0.85), 0 0 20px rgba(168, 85, 247, 0.5);
}

.glow-rose-serif {
  color: #f472b6 !important;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(244, 114, 182, 0.75), 0 0 16px rgba(219, 39, 119, 0.45);
}

.glow-solar-orange {
  color: #fb923c !important;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(251, 146, 60, 0.9), 0 0 20px rgba(234, 88, 12, 0.55);
}

.glow-gold-caps {
  color: #f59e0b !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.8), 0 0 24px rgba(217, 119, 6, 0.4);
}

.glow-crimson-italic {
  color: #fb7185 !important;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(244, 63, 94, 0.85);
}

.glow-prism-gradient {
  background: linear-gradient(90deg, #ef4444 0%, #f59e0b 25%, #10b981 65%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
}

.glow-frost-serif {
  color: #cbd5e1 !important;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(203, 213, 225, 0.6);
}

.glow-violet-script {
  color: #e9d5ff !important;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 1.15em;
  text-shadow: 0 0 12px rgba(192, 132, 252, 0.95), 0 0 22px rgba(147, 51, 234, 0.7);
}

.glow-royal-cinzel {
  color: #f3e8ff !important;
  font-family: 'Cinzel', serif;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-shadow: 0 0 12px rgba(192, 132, 252, 1), 0 0 25px rgba(168, 85, 247, 0.8), 0 0 35px rgba(147, 51, 234, 0.5);
}

.glow-ruby-bold {
  color: #ffe4e6 !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(244, 63, 94, 0.95), 0 0 25px rgba(225, 29, 72, 0.7);
}

.glow-cyber-cyan {
  color: #67e8f9 !important;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(6, 182, 212, 0.9), 0 0 20px rgba(8, 145, 178, 0.6);
}

.glow-emerald-mint {
  color: #6ee7b7 !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.85), 0 0 18px rgba(5, 150, 105, 0.5);
}

/* Light Mode high-contrast username styles */
[data-theme="light"] .glow-neon-pink {
  color: #a21caf !important;
  text-shadow: none;
}

[data-theme="light"] .glow-rose-serif {
  color: #be185d !important;
  text-shadow: none;
}

[data-theme="light"] .glow-solar-orange {
  color: #c2410c !important;
  text-shadow: none;
}

[data-theme="light"] .glow-gold-caps {
  color: #b45309 !important;
  text-shadow: none;
}

[data-theme="light"] .glow-crimson-italic {
  color: #be123c !important;
  text-shadow: none;
}

[data-theme="light"] .glow-frost-serif {
  color: #334155 !important;
  text-shadow: none;
}

[data-theme="light"] .glow-violet-script {
  color: #6d28d9 !important;
  text-shadow: none;
}

[data-theme="light"] .glow-royal-cinzel {
  color: #5b21b6 !important;
  text-shadow: none;
}

[data-theme="light"] .glow-ruby-bold {
  color: #be123c !important;
  text-shadow: none;
}

[data-theme="light"] .glow-cyber-cyan {
  color: #0e7490 !important;
  text-shadow: none;
}

[data-theme="light"] .glow-emerald-mint {
  color: #047857 !important;
  text-shadow: none;
}

/* ==========================================================================
   BORDERLESS SLABS, WELLS & THEME KNOB
   ========================================================================== */
.slab {
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--slab);
}

.well {
  background: var(--sunken);
  box-shadow: var(--well);
  border-radius: 16px;
}

/* Round Theme Knob */
.knob {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--raised);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

[data-theme="light"] .knob {
  box-shadow: 0 4px 12px rgba(65, 45, 135, 0.14);
}

.knob:hover {
  transform: translateY(-2px);
}

/* ==========================================================================
   ANIMATIONS: CROWN COIN
   ========================================================================== */
@keyframes coin-float {

  0%,
  100% {
    transform: translateY(0px);
    filter: drop-shadow(0 14px 20px rgba(202, 138, 4, 0.45));
  }

  50% {
    transform: translateY(-10px);
    filter: drop-shadow(0 24px 30px rgba(202, 138, 4, 0.7));
  }
}

.coin-floating {
  animation: coin-float 4.2s ease-in-out infinite;
}

/* Headline Shadow */
.text-headline {
  text-shadow: 0 2px 0 rgba(58, 42, 122, 0.7), 0 10px 24px rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .text-headline {
  text-shadow: 0 2px 0 #dcd6f5, 0 8px 18px rgba(70, 50, 140, 0.14);
}

/* Custom Scrollbar for Static Previews */
.custom-scroll::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.35);
  border-radius: 9999px;
}

/* ==========================================================================
   PAINT STUDIO FRAMELESS & PIC-ONLY DYNAMIC REAL DROP-SHADOW EFFECTS
   ========================================================================== */
.paint-frameless-hero {
  position: relative;
  z-index: 30;
  display: block;
  text-decoration: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.paint-frameless-hero img {
  filter:
    drop-shadow(0 var(--real-contact-y, 6px) var(--real-contact-blur, 12px) var(--shadow-contact-color)) drop-shadow(var(--real-shadow-x, 0px) var(--real-shadow-y, 26px) var(--real-shadow-blur, 38px) var(--shadow-umbra-color));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.paint-frameless-hero:hover img {
  transform: scale(1.06) translateY(-6px);
}

.paint-content-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.paint-content-showcase img {
  filter:
    drop-shadow(0 var(--real-contact-y, 6px) var(--real-contact-blur, 14px) var(--shadow-contact-color)) drop-shadow(var(--real-shadow-x, 0px) var(--real-shadow-y, 28px) var(--real-shadow-blur, 42px) var(--shadow-umbra-color));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

.paint-content-showcase:hover img {
  transform: scale(1.04) translateY(-8px);
}

/* ==========================================================================
   VERTICAL TIMELINE ROADMAP UI (MATCHING REFERENCE SCREENSHOT)
   ========================================================================== */
.roadmap-timeline {
  position: relative;
}

.roadmap-timeline-line {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 22px;
  width: 2px;
  background: rgba(139, 92, 246, 0.28);
  pointer-events: none;
}

@media (min-width: 768px) {
  .roadmap-timeline-line {
    left: 30px;
  }
}

[data-theme="light"] .roadmap-timeline-line {
  background: rgba(109, 40, 217, 0.25);
}

.roadmap-node {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.roadmap-node-completed {
  background: #7c3aed;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px #9333ea, 0 6px 18px rgba(124, 58, 237, 0.55);
}

[data-theme="light"] .roadmap-node-completed {
  background: #7c3aed;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px #7c3aed, 0 6px 16px rgba(124, 58, 237, 0.35);
}

.roadmap-node-upcoming {
  background: var(--sunken);
  box-shadow: inset 0 0 0 2px #7c3aed, 0 4px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .roadmap-node-upcoming {
  background: #ffffff;
  box-shadow: inset 0 0 0 2px #7c3aed, 0 4px 12px rgba(109, 40, 217, 0.16);
}

.roadmap-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  border-radius: 9999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.roadmap-badge-completed {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
}

[data-theme="light"] .roadmap-badge-completed {
  background: rgba(16, 185, 129, 0.16);
  color: #047857;
}

.roadmap-badge-progress {
  background: rgba(6, 182, 212, 0.16);
  color: #22d3ee;
}

[data-theme="light"] .roadmap-badge-progress {
  background: rgba(8, 145, 178, 0.15);
  color: #0e7490;
}

.roadmap-badge-planned {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

[data-theme="light"] .roadmap-badge-planned {
  background: rgba(109, 40, 217, 0.1);
  color: #565075;
}

/* ==========================================================================
   DEDICATED PAGE SUB-NAVIGATION TABS (ABOUT / CONTACT / PRIVACY / TERMS)
   ========================================================================== */
.page-tab-btn {
  background: var(--surface);
  color: var(--muted);
}

.page-tab-btn:hover {
  background: var(--raised);
  color: var(--text);
}

.page-tab-btn.is-active {
  background: #8b5cf6 !important;
  color: #ffffff !important;
}

.nav-top-link.is-active {
  color: #06b6d4 !important;
}

/* ==========================================================================
   VIP DIAMOND FEATURE & ANIMATED .GIF COVER BACKGROUND
   ========================================================================== */
.vip-diamond-emblem {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.22) 0%, rgba(139, 92, 246, 0.26) 50%, rgba(56, 189, 248, 0.22) 100%);
  box-shadow: 0 8px 20px rgba(6, 182, 212, 0.2);
}

.vip-diamond-pill {
  background: rgba(6, 182, 212, 0.16);
  color: #67e8f9 !important;
}

[data-theme="light"] .vip-diamond-pill {
  background: rgba(8, 145, 178, 0.14) !important;
  color: #0e7490 !important;
}

.vip-perk-tile {
  background: rgba(13, 11, 22, 0.72);
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.vip-perk-tile:hover {
  background: rgba(18, 15, 32, 0.92);
  transform: translateY(-2px);
}

[data-theme="light"] .vip-perk-tile {
  background: #f3f0fc !important;
}

[data-theme="light"] .vip-perk-tile:hover {
  background: #ebe5fa !important;
}

.vip-gif-cover-banner {
  background: linear-gradient(125deg, #1e1b4b 0%, #3b0764 38%, #0f172a 72%, #164e63 100%);
}

.vip-gif-cover-motion {
  position: absolute;
  inset: -35%;
  background:
    radial-gradient(circle at 25% 35%, rgba(6, 182, 212, 0.55) 0%, transparent 45%),
    radial-gradient(circle at 75% 65%, rgba(236, 72, 153, 0.5) 0%, transparent 48%),
    radial-gradient(circle at 55% 25%, rgba(139, 92, 246, 0.6) 0%, transparent 50%);
  filter: blur(18px);
  animation: vipGifCoverWave 7s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes vipGifCoverWave {
  0% {
    transform: translate3d(-6%, -4%, 0) scale(1) rotate(0deg);
  }

  50% {
    transform: translate3d(5%, 4%, 0) scale(1.08) rotate(4deg);
  }

  100% {
    transform: translate3d(-3%, 6%, 0) scale(1.03) rotate(-3deg);
  }
}

[data-theme="light"] .vip-gif-cover-banner .text-white,
[data-theme="light"] .vip-gif-cover-banner .text-white\/80,
[data-theme="light"] .vip-gif-cover-banner .text-cyan-300 {
  color: #ffffff !important;
}

/* Respect Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {

  [data-cinematic-hero],
  [data-cinematic-side],
  [data-cinematic-item],
  .parallax-layer,
  [data-tilt-mode],
  .vip-gif-cover-motion {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }
}



/* ============================================================
   GLOBAL DUAL THEME ENGINE FOR AUTH & OTP POPUP
   ============================================================ */

/* 1. DARK THEME (DEFAULT) */
.pure-auth-card {
  background-color: #181726;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
}

.pure-auth-title {
  color: #ffffff;
}

.pure-auth-title .brand-accent {
  color: #06b6d4;
}

.pure-auth-subtitle {
  color: #94a3b8;
}

.pure-auth-close {
  background: none;
  color: #94a3b8;
}

.pure-auth-close:hover {
  background: none;
  color: #ffffff;
}

.pure-auth-tabs-wrap {
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.pure-tab-btn.active {
  background: #8b5cf6;
  color: #ffffff;
}

.pure-tab-btn:not(.active) {
  color: #94a3b8;
}

.pure-tab-btn:not(.active):hover {
  color: #ffffff;
}

.pure-auth-label {
  color: #cbd5e1;
}

.pure-auth-input,
.pure-auth-select {
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  outline: none;
}

.pure-auth-input::placeholder {
  color: #64748b;
}

.pure-auth-input:focus,
.pure-auth-select:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
  background-color: rgba(0, 0, 0, 0.5);
}

.pure-auth-select option {
  background-color: #181726;
  color: #ffffff;
}

.otp-digit {
  width: 44px;
  height: 52px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.4);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  outline: none;
  transition: all 0.2s ease;
}

.otp-digit:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
  background-color: rgba(0, 0, 0, 0.6);
}

.pure-auth-otp-icon-wrap {
  background-color: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
}

.pure-auth-otp-desc {
  color: #cbd5e1;
}

.pure-auth-foot-text {
  color: #94a3b8;
}

.pure-auth-link {
  color: #06b6d4;
}

.pure-auth-link:hover {
  text-decoration: underline;
}

/* 2. LIGHT THEME ([data-theme="light"]) - HIGH CONTRAST LIGHT POPUP & VISIBLE TYPING */
[data-theme="light"] #pureAuthModal {
  background-color: rgba(15, 23, 42, 0.45);
}

[data-theme="light"] .pure-auth-card {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18), 0 10px 25px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .pure-auth-title {
  color: #0f172a !important;
}

[data-theme="light"] .pure-auth-title .brand-accent {
  color: #0284c7 !important;
}

[data-theme="light"] .pure-auth-subtitle {
  color: #475569 !important;
}

[data-theme="light"] .pure-auth-close {
  background: none;
  color: #64748b !important;
}

[data-theme="light"] .pure-auth-close:hover {
  background: none;
  color: #0f172a !important;
}

[data-theme="light"] .pure-auth-tabs-wrap {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .pure-tab-btn.active {
  background: #6366f1 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}

[data-theme="light"] .pure-tab-btn:not(.active) {
  color: #475569 !important;
}

[data-theme="light"] .pure-tab-btn:not(.active):hover {
  color: #0f172a !important;
}

[data-theme="light"] .pure-auth-label {
  color: #1e293b !important;
  font-weight: 600 !important;
}

[data-theme="light"] .pure-auth-input,
[data-theme="light"] .pure-auth-select {
  background-color: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  /* DARK TEXT WHILE TYPING! */
}

[data-theme="light"] .pure-auth-input::placeholder {
  color: #94a3b8 !important;
}

[data-theme="light"] .pure-auth-input:focus,
[data-theme="light"] .pure-auth-select:focus {
  background-color: #ffffff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
  color: #0f172a !important;
}

[data-theme="light"] .pure-auth-select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="light"] .otp-digit {
  background-color: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  /* DARK DIGITS WHILE TYPING! */
}

[data-theme="light"] .otp-digit:focus {
  background-color: #ffffff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
  color: #0f172a !important;
}

[data-theme="light"] .otp-digit.otp-success {
  border-color: #16a34a !important;
  color: #16a34a !important;
  background-color: #f0fdf4 !important;
}

[data-theme="light"] .otp-digit.otp-error {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
  background-color: #fef2f2 !important;
}

[data-theme="light"] .pure-auth-otp-icon-wrap {
  background-color: #ede9fe !important;
  border-color: #c4b5fd !important;
  color: #7c3aed !important;
}

[data-theme="light"] .pure-auth-otp-desc {
  color: #334155 !important;
}

[data-theme="light"] .pure-auth-foot-text {
  color: #475569 !important;
}

[data-theme="light"] .pure-auth-link {
  color: #4f46e5 !important;
}

[data-theme="light"] .pure-auth-link:hover {
  color: #4338ca !important;
}

[data-theme="light"] #pureAuthError {
  background-color: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

[data-theme="light"] #pureAuthSuccess {
  background-color: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #15803d !important;
}

/* Real-Time Input Validation Indicators */
.input-valid {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 1px #10b981 !important;
}
.input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef4444 !important;
}

/* Terms & Conditions Modal Styling (Dark & Light Theme) */
#pureTermsModal .pure-auth-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #181726;
  color: #ffffff;
}
#termsScrollBox {
  background: rgba(0, 0, 0, 0.4);
  color: #e2e8f0;
}
[data-theme="light"] #pureTermsModal {
  background-color: rgba(15, 23, 42, 0.55);
}
[data-theme="light"] #pureTermsModal .pure-auth-card {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25) !important;
}
[data-theme="light"] #termsScrollBox {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}
[data-theme="light"] #termsScrollBox p {
  color: #334155 !important;
}
[data-theme="light"] #termsScrollBox strong {
  color: #0f172a !important;
}
[data-theme="light"] #termsScrollNotice.bg-amber-500\/15 {
  background-color: #fef3c7 !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}
[data-theme="light"] #termsScrollNotice.bg-emerald-500\/15 {
  background-color: #dcfce7 !important;
  border-color: #bbf7d0 !important;
  color: #166534 !important;
}
[data-theme="light"] #pureTermsModal .border-b,
[data-theme="light"] #pureTermsModal .border-t {
  border-color: #e2e8f0 !important;
}
/* ============================================================
   AUTH BUTTONS & CTA DUAL THEME STYLES (LIGHT & DARK)
   ============================================================ */

/* 1. Ghost "Sign In" Button (Header, Drawer) */
.auth-btn-ghost {
  color: #e2e8f0;
  background-color: transparent;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.auth-btn-ghost:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .auth-btn-ghost {
  color: #0f172a !important; /* CRISP DARK SLATE IN LIGHT MODE */
  background-color: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .auth-btn-ghost:hover {
  color: #000000 !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* 2. Vibrant Gradient "Register" Button */
.auth-btn-gradient {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.auth-btn-gradient:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%) !important;
}
/* ALWAYS retain crisp white text on vibrant gradient buttons in BOTH themes */
.auth-btn-gradient,
.auth-btn-gradient *,
[data-theme="light"] .auth-btn-gradient,
[data-theme="light"] .auth-btn-gradient * {
  color: #ffffff !important;
}

/* 3. Glass "Sign In" Button (Hero, Pre-Footer) */
.auth-btn-glass {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  backdrop-filter: blur(8px);
}
.auth-btn-glass:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
[data-theme="light"] .auth-btn-glass {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .auth-btn-glass *,
[data-theme="light"] .auth-btn-glass span {
  color: #0f172a !important;
}
[data-theme="light"] .auth-btn-glass:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #000000 !important;
}

/* 4. Pre-Footer Banner Dual Theme */
.pre-footer-cta-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.18), rgba(236, 72, 153, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  color: #ffffff;
}
.pre-footer-cta-card h2 {
  color: #ffffff;
}
.pre-footer-cta-card p {
  color: #d1d5db;
}
.pre-footer-cta-card .badge-members {
  background-color: rgba(255, 255, 255, 0.1);
  color: #06b6d4;
}
[data-theme="light"] .pre-footer-cta-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}
[data-theme="light"] .pre-footer-cta-card h2 {
  color: #0f172a !important;
}
[data-theme="light"] .pre-footer-cta-card p {
  color: #475569 !important;
}
[data-theme="light"] .pre-footer-cta-card .badge-members {
  background-color: #f1f5f9 !important;
  color: #0284c7 !important;
}

/* 5. Protect Primary Flat Buttons from general text-white override */
.btn-flat.btn-primary,
.btn-flat.btn-primary *,
[data-theme="light"] .btn-flat.btn-primary,
[data-theme="light"] .btn-flat.btn-primary * {
  color: #ffffff !important;
}

/* ==========================================================================
   HERO WORKSPACE & MOBILE VIEW ENHANCEMENTS (RESPONSIVE & DUAL-THEME)
   ========================================================================== */

/* Mobile Hero Column Switcher Tabs */
.hero-mobile-tab {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.hero-mobile-tab.active {
  background-color: #8b5cf6 !important;
  color: #ffffff !important;
}
.hero-mobile-tab:not(.active) {
  color: #a29fbd;
}
.hero-mobile-tab:not(.active):hover {
  color: #ffffff;
}

/* Light Mode Overrides for Mobile Tabs */
[data-theme="light"] .hero-mobile-tab.active {
  background-color: #7c3aed !important;
  color: #ffffff !important;
}
[data-theme="light"] .hero-mobile-tab:not(.active) {
  color: #475569 !important;
  font-weight: 600;
}
[data-theme="light"] .hero-mobile-tab:not(.active):hover {
  color: #0f172a !important;
}

/* Ensure Chat Feed on Mobile Doesn't Clip or Horizontal Overflow */
@media (max-width: 640px) {
  #heroTiltCard {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .paint-chat-thumb {
    width: 86px;
    height: 52px;
  }
  #heroColChat .custom-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* Ensure overlap cards on mobile have clean spacing and no clipping */
@media (max-width: 1023px) {
  #heroOverlapWatchParty,
  #heroOverlapPaintStudio {
    position: static !important;
    transform: none !important;
    max-width: 100% !important;
  }
}