/* ==========================================================================
   JAYDYMILLA — OFFICIAL ARTIST DIGITAL PLATFORM
   Master Design System: Pure Black Stealth Editorial + Modern Pulse
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Kanit:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,600;1,800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ==========================================================================
   1. EDITORIAL THEME TOKENS
   ========================================================================== */
:root {
  /* Surfaces & Pure Black Foundation */
  --bg-primary: #000000;
  --bg-secondary: #050507;
  --bg-card: #0A0A0D;
  --bg-card-hover: #111116;
  --bg-surface-raised: #0F0F12;
  --bg-glass: rgba(10, 10, 13, 0.88);

  /* Editorial Accent Palette */
  --color-neon: #CBFE00;               /* Acid-Lime Chartreuse */
  --color-neon-hover: #D6FF1A;
  --color-neon-glow: rgba(203, 254, 0, 0.35);
  --color-magenta: #FF007F;            /* Mystic Portal Magenta */
  --color-cyan: #00E5FF;               /* Shamanic Blue */
  --color-amber: #FFB300;              /* Sunflower Amber */

  /* Text Hierarchy */
  --color-text-main: #FFFFFF;
  --color-text-secondary: #E2E8F0;
  --color-text-muted: #8E95A2;
  --color-text-dim: #4B5260;

  /* Typography */
  --font-kanit: 'Kanit', sans-serif;
  --font-serif-italic: 'Instrument Serif', Georgia, serif;
  --font-space: 'Space Grotesk', monospace;

  /* Borders & Strokes */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-active: rgba(255, 255, 255, 0.22);
  --border-neon: rgba(203, 254, 0, 0.4);
  --border-warm-btn: rgba(244, 239, 231, 0.35);

  /* Motion & Easing */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. BASE RESETS & SCENE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  background-color: var(--bg-primary);
  color: var(--color-text-main);
  font-family: var(--font-kanit);
  scroll-behavior: auto; /* Managed by Lenis */
}

body {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  background-color: var(--bg-primary);
  color: var(--color-text-main);
  font-family: var(--font-kanit);
  overflow-x: clip;
  position: relative;
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root,
#app,
main {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Inner Bounded Container Guarantee (Max 1440px with responsive padding) */
.inner-container {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.5rem, 3.5vw, 3.5rem);
  padding-right: clamp(1.5rem, 3.5vw, 3.5rem);
}

/* Typography Utility Classes */
.font-kanit {
  font-family: var(--font-kanit);
}

.font-serif-italic {
  font-family: var(--font-serif-italic);
  font-style: italic;
}

.font-space {
  font-family: var(--font-space);
}

.text-accent-lime {
  color: var(--color-neon);
}

.bg-accent-lime {
  background-color: var(--color-neon);
}

.border-accent-lime {
  border-color: var(--color-neon);
}

/* ==========================================================================
   3. SPECIALIZED TYPOGRAPHY RECIPES
   ========================================================================== */
/* Brushed Chrome Metallic Headline */
.hero-main-title {
  font-family: var(--font-kanit);
  font-size: clamp(3.8rem, 10.5vw, 9.8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.90;
  background: linear-gradient(180deg, #FFFFFF 0%, #A4A9B3 52%, #8A909C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-transform: lowercase;
  filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.65));
}

/* Stealth Titanium Shine Heading */
.stealth-heading {
  font-family: var(--font-kanit);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.96;
  background: linear-gradient(180deg, #FFFFFF 0%, #E2E8F0 45%, #7F8796 85%, #B4BAC7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Emotive Serif Accent Tag */
.serif-accent {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--color-neon);
  font-size: 1.18em;
  line-height: 0.85;
}

/* Monumental Numbers */
.monumental-number {
  font-family: var(--font-kanit);
  font-weight: 900;
  font-size: clamp(3.5rem, 6vw, 5.25rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.12);
  transition: color 0.35s var(--ease-editorial);
  user-select: none;
}

.group:hover .monumental-number {
  color: var(--color-neon);
}

/* ==========================================================================
   4. BUTTON SYSTEM (8px Standard Radius)
   ========================================================================== */
.btn-lime {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 8px;
  background-color: var(--color-neon);
  color: #000000;
  font-family: var(--font-kanit);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85rem 1.85rem;
  transition: all 0.25s var(--ease-editorial);
  box-shadow: 0 0 24px rgba(203, 254, 0, 0.25);
  cursor: pointer;
  border: 1px solid var(--color-neon);
  text-decoration: none;
  min-height: 46px;
}

.btn-lime:hover {
  background-color: var(--color-neon-hover);
  border-color: var(--color-neon-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 35px rgba(203, 254, 0, 0.45);
  color: #000000;
}

.btn-lime:active {
  transform: scale(0.98);
}

.btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #FFFFFF;
  border: 1px solid var(--border-warm-btn);
  font-family: var(--font-kanit);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85rem 1.85rem;
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-height: 46px;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: #FFFFFF;
  color: #FFFFFF;
  transform: translateY(-2px);
}

.btn-glass:active {
  transform: scale(0.98);
}

/* Compact Action Button */
.btn-compact {
  border-radius: 6px;
  padding: 0.55rem 1.15rem;
  font-size: 0.75rem;
  min-height: 38px;
}

#main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.35s var(--ease-editorial), opacity 0.35s var(--ease-editorial), background-color 0.3s ease;
}

#main-header.hero-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

#main-header.hero-left,
#main-header:not(.hero-active) {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

#main-header.scrolled {
  background: rgba(4, 4, 6, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.92);
}

.nav-link {
  color: var(--color-text-muted);
  font-family: var(--font-kanit);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
  padding: 0.25rem 0;
}

.nav-link:hover {
  color: #FFFFFF;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--color-neon);
  transition: width 0.25s var(--ease-editorial);
}

.nav-link:hover::after {
  width: 100%;
}

/* Mobile Drawer */
#mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 380px;
  height: 100vh;
  height: 100dvh;
  background-color: #08080B;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 70;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-editorial);
  display: flex;
  flex-direction: column;
  padding: 2rem;
  box-shadow: -15px 0 45px rgba(0, 0, 0, 0.85);
}

#mobile-drawer.is-open {
  transform: translateX(0);
}

#drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 65;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   6. HERO SECTION & VIDEO 1
   ========================================================================== */
.hero-container {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(3rem, 7vh, 6rem);
  padding-top: 7rem;
  overflow: hidden;
}

.hero-video-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.02);
  filter: brightness(0.90) contrast(1.06);
}

/* Tri-Vignette Readability Architecture */
.hero-vignette-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-vignette-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 42%;
  background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.85) 45%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-vignette-text {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 65%, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 80%);
  pointer-events: none;
  z-index: 1;
}

/* Hero Content Layer */
.hero-content {
  position: relative;
  z-index: 2;
}

/* Identity Eyebrow Chip */
.identity-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 0.35rem 0.95rem;
  font-family: var(--font-space);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary);
  backdrop-filter: blur(8px);
}

.live-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-neon);
  box-shadow: 0 0 10px var(--color-neon);
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* ==========================================================================
   7. SCROLL-DRIVEN OPPOSING MARQUEE
   ========================================================================== */
.marquee-container {
  position: relative;
  z-index: 10;
  overflow: hidden;
  user-select: none;
  background-color: #000000;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 1.25rem 0;
}

.marquee-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-kanit);
  font-weight: 800;
  font-size: clamp(0.95rem, 1.8vw, 1.4rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  padding: 0 1.5rem;
  transition: color 0.2s ease;
}

.marquee-item:hover {
  color: var(--color-neon);
}

.marquee-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-neon);
}

/* ==========================================================================
   8. CINEMATIC 3D CYLINDER MOTION SHOWCASE (VIDEO 2)
   Sticky Viewport Frame & 3D Perspective Stage
   ========================================================================== */
#cinematic-motion {
  position: relative;
  width: 100%;
  height: 250vh;
  background-color: #000000;
  overflow-x: clip;
}

@media (max-width: 768px) {
  #cinematic-motion {
    height: 200vh;
  }
}

.motion-sticky-frame {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh; /* Stable viewport height on mobile: prevents URL bar resize jumping */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(1.5rem, 3vh, 3rem) 0;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Stationary Top Header Layer */
.motion-header-layer {
  position: relative;
  z-index: 20;
  pointer-events: auto;
  text-align: center;
}

/* Ambient Radial Glow Behind Cylinder */
.motion-ambient-glow {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1050px, 95vw);
  height: min(1050px, 95vw);
  background: radial-gradient(ellipse at center, rgba(203, 254, 0, 0.07) 0%, rgba(203, 254, 0, 0.02) 42%, transparent 72%);
  pointer-events: none;
  z-index: 5;
}

/* 3D Visual Stage */
.motion-visual-stage {
  flex: 1;
  position: relative;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 10;
  pointer-events: auto;
}

.motion-stage-scaler {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: min(72vh, 680px);
  max-height: min(72vh, 680px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1.9);
  transform-origin: center center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  contain: layout paint;
}

@media (max-width: 1024px) {
  .motion-stage-scaler {
    height: min(66vh, 580px);
    max-height: min(66vh, 580px);
    transform: scale(1.62);
  }
}

@media (max-width: 768px) {
  .motion-stage-scaler {
    height: min(58vh, 480px);
    max-height: min(58vh, 480px);
    transform: scale(1.38);
  }
}

/* Hardware-Accelerated Video Cylinder Scrubber */
.motion-ring-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #000000;
  /* Universal hardware black-level crushing (avoids SVG filter failure on iOS WebKit / mobile GPUs) */
  filter: contrast(1.10) brightness(0.95);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  pointer-events: auto;
}

/* Desktop Chromium/Firefox enhancement where SVG filter graphs on video are supported */
@media (min-width: 769px) {
  @supports (filter: url('#video-black-level')) {
    .motion-ring-video {
      filter: url(#video-black-level);
    }
  }
}

@media (max-width: 768px) {
  .motion-ring-video {
    /* Guarantees video is 100% visible on iPhone Safari and Android mobile */
    filter: contrast(1.08) brightness(0.95) !important;
  }
}

/* Bottom Metadata Badge */
.motion-footer-layer {
  position: relative;
  z-index: 20;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   9. DUAL-LAYER INTERACTIVE REVEAL (PORTRAIT STORY)
   ========================================================================== */
.reveal-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  cursor: crosshair;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75);
}

.reveal-base-img,
.reveal-discovered-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  user-select: none;
  pointer-events: none;
}

.reveal-mask-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  will-change: mask-image, -webkit-mask-image, opacity;
  transform: translateZ(0);
}

/* Reveal Corner Badge */
.reveal-badge {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 10;
  background: rgba(4, 4, 6, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  font-family: var(--font-space);
  font-size: 0.6875rem;
  color: var(--color-secondary);
  pointer-events: none;
}

@media (hover: none) or (pointer: coarse) {
  .reveal-container {
    cursor: default;
    -webkit-touch-callout: none;
    user-select: none;
  }
}

/* ==========================================================================
   10. CARDS & ARCHITECTURAL GRID
   ========================================================================== */
.stealth-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  transition: all 0.3s var(--ease-editorial);
  position: relative;
  overflow: hidden;
}

.stealth-card:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--border-active);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
}

.stealth-card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(203, 254, 0, 0.4), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stealth-card:hover .stealth-card-glow {
  opacity: 1;
}

/* ==========================================================================
   11. RELEASE CATALOG & TRACK LIST
   ========================================================================== */
.track-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  transition: all 0.25s var(--ease-editorial);
  position: relative;
}

.track-card:hover {
  background-color: var(--bg-card-hover);
  border-color: rgba(203, 254, 0, 0.35);
  transform: translateX(4px);
}

.track-card.is-playing {
  border-color: var(--color-neon);
  background-color: rgba(203, 254, 0, 0.04);
}

.track-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.track-card:hover .track-play-btn,
.track-play-btn:hover {
  background-color: var(--color-neon);
  border-color: var(--color-neon);
  color: #000000;
  transform: scale(1.06);
}

.track-card.is-playing .track-play-btn {
  background-color: var(--color-neon);
  color: #000000;
  box-shadow: 0 0 16px rgba(203, 254, 0, 0.5);
}

/* Equalizer Visualizer Bars */
.eq-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.eq-bar {
  width: 2px;
  background-color: var(--color-neon);
  border-radius: 1px;
}

.is-playing .eq-bar:nth-child(1) { animation: eq-bounce 0.8s infinite ease-in-out; }
.is-playing .eq-bar:nth-child(2) { animation: eq-bounce 1.1s infinite ease-in-out 0.2s; }
.is-playing .eq-bar:nth-child(3) { animation: eq-bounce 0.7s infinite ease-in-out 0.4s; }
.is-playing .eq-bar:nth-child(4) { animation: eq-bounce 1.0s infinite ease-in-out 0.1s; }

@keyframes eq-bounce {
  0%, 100% { height: 3px; }
  50% { height: 14px; }
}

/* ==========================================================================
   12. PERSISTENT AUDIO DOCK (#sticky-bar)
   ========================================================================== */
#sticky-bar {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(780px, calc(100% - 2rem));
  background: rgba(8, 8, 11, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 55;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.9), 0 0 25px rgba(203, 254, 0, 0.08);
  transition: transform 0.3s var(--ease-editorial), opacity 0.3s ease;
}

#sticky-bar.dock-hidden {
  transform: translate(-50%, 120%);
  opacity: 0;
  pointer-events: none;
}

.dock-play-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--color-neon);
  border: none;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 16px rgba(203, 254, 0, 0.35);
  flex-shrink: 0;
}

.dock-play-btn:hover {
  transform: scale(1.08);
  background-color: var(--color-neon-hover);
}

.dock-scrubber {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  outline: none;
  cursor: pointer;
  position: relative;
}

.dock-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-neon);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(203, 254, 0, 0.8);
  transition: transform 0.15s ease;
}

.dock-scrubber::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

.dock-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
  cursor: pointer;
}

.dock-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-neon);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(203, 254, 0, 0.8);
  transition: transform 0.15s ease;
}

.dock-volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

/* ==========================================================================
   13. FORM INPUTS & CONVERSION LAYER
   ========================================================================== */
.stealth-input,
.stealth-textarea,
.stealth-select {
  width: 100%;
  background-color: #050507;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.85rem 1.15rem;
  color: #FFFFFF;
  font-family: var(--font-kanit);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stealth-input:focus,
.stealth-textarea:focus,
.stealth-select:focus {
  border-color: var(--color-neon);
  box-shadow: 0 0 12px rgba(203, 254, 0, 0.2);
}

.stealth-select option {
  background-color: #0A0A0D;
  color: #FFFFFF;
}

/* ==========================================================================
   14. MODALS & OVERLAYS
   ========================================================================== */
.stealth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-editorial);
}

.stealth-modal-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.stealth-modal-card {
  width: 100%;
  max-width: 540px;
  background-color: #0A0A0D;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.95);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s var(--ease-editorial);
}

.stealth-modal-overlay.is-active .stealth-modal-card {
  transform: translateY(0) scale(1);
}

/* ==========================================================================
   15. ACCORDIONS & COLLAPSIBLES
   ========================================================================== */
.service-accordion-row {
  background-color: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: background-color 0.25s var(--ease-editorial), border-color 0.25s ease;
  cursor: pointer;
}

.service-accordion-row:not(.is-active):hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.service-accordion-row.is-active {
  background-color: var(--color-neon) !important;
  color: #000000 !important;
  border-bottom-color: rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 10px 30px -8px rgba(203, 254, 0, 0.25);
}

.service-accordion-row.is-active * {
  color: #000000 !important;
}

.service-accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease-editorial), opacity 0.25s ease;
  opacity: 0;
}

.service-accordion-row.is-active .service-accordion-body {
  grid-template-rows: 1fr;
  opacity: 1;
}

.service-accordion-inner {
  overflow: hidden;
}

/* ==========================================================================
   16. FOOTER & WATERMARK
   ========================================================================== */
.footer-watermark {
  font-family: var(--font-kanit);
  font-weight: 900;
  font-size: clamp(3.2rem, 15vw, 15rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.03);
  text-align: center;
  user-select: none;
  pointer-events: none;
}

/* Ambient Subtle Background Grid Pattern */
.stealth-ambient-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

/* Section Spacing Anchor */
section[id] {
  scroll-margin-top: 6rem;
}