/* ==========================================================================
   SCANZLY V2 — AMOLED DARK & HIGH-CONTRAST LIGHT MODE DESIGN SYSTEM
   ========================================================================== */

:root {
  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', monospace;

  --canvas-bg: #fafafa;
  --surface-card: #ffffff;
  --surface-mockup: #f4f4f5;
  --border-card: rgba(0, 0, 0, 0.08);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --text-headline: #09090b;
  --text-body: #52525b;
  --text-muted: #71717a;
  --track-line: rgba(0, 0, 0, 0.12);
  --dot-border: rgba(0, 0, 0, 0.25);
  --dot-bg: #ffffff;

  --canvas-dark: #000000;
  --canvas-light: #fafafa;
  --text-dark-primary: #ffffff;
  --text-dark-muted: #cbd5e1;
  --text-light-primary: #09090b;
  --text-light-muted: #475569;
  --status-emerald-dark: #22c55e;
  --status-emerald-light: #16a34a;
}

.dark {
  --canvas-bg: #000000;
  --surface-card: #111116;
  --surface-mockup: #000000;
  --border-card: rgba(255, 255, 255, 0.1);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --text-headline: #ffffff;
  --text-body: #cbd5e1;
  --text-muted: #a1a1aa;
  --track-line: rgba(255, 255, 255, 0.1);
  --dot-border: rgba(255, 255, 255, 0.2);
  --dot-bg: #000000;
}
 
/* High-Contrast WCAG AA Utility Helpers */
.text-cyan-700 { color: #0e7490; }

/* Universal Base Smoothing */
html, body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-synthesis: none !important;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Stabilized Display Headings: Zero Transform Hacks, Mathematical Curves */
h1, h2, h3, h4, .hero-headline, .font-display {
  font-family: var(--font-display) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
  font-weight: 700;
  word-break: break-word;
  overflow-wrap: break-word;
  text-rendering: geometricPrecision !important;
  font-synthesis: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  will-change: auto !important;
  text-shadow: none !important;
}

h1, .hero-headline {
  font-weight: 800 !important;
  line-height: 1.05 !important;
}

/* Body Copy & Explanatory Prose */
p, .font-body, label, input, textarea {
  font-family: var(--font-body) !important;
  letter-spacing: -0.012em;
  line-height: 1.65;
  font-synthesis: none !important;
}

/* Numerical Pricing & Metric Accents */
.font-accent, .counter-val {
  font-family: var(--font-accent) !important;
  letter-spacing: -0.02em;
}

/* Micro-Telemetry Monospace */
.font-mono, [data-mono="true"] {
  font-family: var(--font-mono) !important;
  letter-spacing: -0.02em;
}

/* Theme Contrast Alignment */
.dark h1, .dark h2, .dark h3, .dark h4 {
  color: #ffffff !important;
  text-shadow: none !important;
}

html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3, html:not(.dark) h4 {
  color: #09090b !important;
  text-shadow: none !important;
}

.dark p {
  color: #a1a1aa !important;
}

html:not(.dark) p {
  color: #52525b !important;
}

/* Hardware Compositor Layer Isolation (Prevents 60fps Canvas Repaint Bleed) */
#global-matrix-layer,
#matrix-stream-canvas {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none !important;
  z-index: 0 !important;
  /* CRITICAL: Hardware compositor isolation prevents repaint bleed */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  contain: strict;
}

/* Compositor Layer Isolation Against 60fps Matrix Shimmer */
main, section, #hero-content, .edge-to-edge-stream-wrap {
  isolation: isolate;
  position: relative;
  z-index: 10;
  contain: layout;
}

.hero-headline {
  font-size: clamp(2.5rem, 6vw, 4.75rem) !important;
}

body {
  background-color: var(--canvas-bg) !important;
  color: var(--text-headline) !important;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode Global Background Continuity */
html.dark body,
.dark body {
  background-color: #000000 !important;
}

/* Enforce transparent surfaces from content-sheet downward so global matrix glyphs show through */
html.dark #content-sheet,
html.dark #services,
html.dark #custom-platforms,
html.dark #ai-automation,
html.dark #advantage,
html.dark #contact,
html.dark footer,
.dark #content-sheet,
.dark #services,
.dark #custom-platforms,
.dark #ai-automation,
.dark #advantage,
.dark #contact,
.dark footer {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}



/* ==========================================================================
   CONTENT PULL-UP CURTAIN SHEET (Elevated Drawer Surface)
   ========================================================================= */
/* Transparent content sheet for global ambient canvas continuity */
html.dark #content-sheet,
html.dark #content-drawer,
html.dark #capabilities,
html.dark #services,
.dark #content-sheet,
.dark #content-drawer,
.dark #capabilities,
.dark #services {
  background-color: transparent !important;
  background-image: none !important;
  border-top: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove any pseudo-elements creating horizontal dividing bars */
#content-sheet::before,
#content-sheet::after,
#capabilities::before,
#capabilities::after,
#services::before,
#services::after {
  display: none !important;
}

html:not(.dark) #content-sheet,
html.light #content-sheet {
  background-color: transparent !important;
  border-top: 1px solid var(--border-card) !important;
  box-shadow: 0 -20px 45px rgba(0, 0, 0, 0.06) !important;
}




/* ==========================================================================
   STANDALONE FLOATING LIQUID-GLASS PILLS: BRAND & NAVBAR
   ========================================================================== */
/* Fixed Header Wrapper Layer */
#brand-pill,
#nav-pill,
header[class*="fixed"],
nav[class*="fixed"] {
  position: fixed !important;
  top: max(1.5rem, env(safe-area-inset-top, 1.5rem));
  z-index: 9999 !important;
  pointer-events: auto !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  user-select: none;
  will-change: transform, box-shadow;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#brand-pill {
  left: 1.5rem;
}

#nav-pill {
  right: 1.5rem;
}

@media (max-width: 639px) {
  #brand-pill,
  #nav-pill,
  header[class*="fixed"],
  nav[class*="fixed"] {
    top: max(1rem, env(safe-area-inset-top, 1rem)) !important;
  }
  #brand-pill {
    left: 0.875rem !important;
  }
  #nav-pill {
    right: 0.875rem !important;
  }
}

/* Ultra-Compact Screen Optimization (<380px, e.g. iPhone SE / Android 360px) */
@media (max-width: 379px) {
  #brand-pill {
    left: max(0.5rem, env(safe-area-inset-left, 0.5rem)) !important;
    padding: 0.25rem 0.625rem !important;
    gap: 0.375rem !important;
  }
  #brand-pill span.text-sm {
    font-size: 0.8125rem !important;
  }
  #nav-pill {
    right: max(0.5rem, env(safe-area-inset-right, 0.5rem)) !important;
    padding: 0.25rem 0.5rem !important;
    gap: 0.375rem !important;
  }
  .navbar-cta-btn {
    padding: 0.25rem 0.625rem !important;
    font-size: 0.6875rem !important;
  }
}

/* Ensure child interactive items receive clicks */
#nav-pill a,
#nav-pill button,
#brand-pill,
#theme-toggle {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Invisible Buffer Shield on Nav Pill */
#nav-pill::before {
  content: '';
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -16px;
  right: -16px;
  background: transparent;
  z-index: -1;
  pointer-events: auto;
}

/* Dark Mode Tokens (Default & html.dark) */
#brand-pill,
html.dark #brand-pill,
#nav-pill,
html.dark #nav-pill {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(24px) saturate(200%) brightness(105%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(105%) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 65%, rgba(12, 12, 16, 0.35) 100%) padding-box !important;
  box-shadow:
    inset 0 0 8px 1px rgba(255, 255, 255, 0.15),
    0 0 14px 1px rgba(255, 255, 255, 0.08),
    0 8px 24px -4px rgba(0, 0, 0, 0.5) !important;
}

#brand-pill:hover,
html.dark #brand-pill:hover {
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow:
    inset 0 0 10px 1px rgba(255, 255, 255, 0.25),
    0 0 20px 2px rgba(255, 255, 255, 0.12),
    0 10px 28px -4px rgba(0, 0, 0, 0.6) !important;
}

/* Light Mode Tokens (Enhanced Tactile Depth) */
html:not(.dark) #brand-pill,
html.light #brand-pill,
html:not(.dark) #nav-pill,
html.light #nav-pill {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 1),
    0 6px 20px -4px rgba(0, 0, 0, 0.08),
    0 2px 6px -1px rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) #brand-pill:hover,
html.light #brand-pill:hover {
  border-color: rgba(0, 0, 0, 0.16) !important;
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 1),
    0 8px 24px -4px rgba(0, 0, 0, 0.12),
    0 2px 6px -1px rgba(0, 0, 0, 0.04) !important;
}

/* Nav Links Belt Styling: Hidden on mobile to prevent navbar collision */
#nav-links-belt {
  display: none;
  align-items: center;
  white-space: nowrap;
}

@media (min-width: 768px) {
  #nav-links-belt {
    display: flex;
  }
}

/* ==========================================================================
   THEME TOGGLE BUTTON STYLING
   ========================================================================== */
#theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
}

#theme-toggle svg {
  flex-shrink: 0;
}

/* ==========================================================================
   NAVBAR SPECIFIC CTA BUTTON (.navbar-cta-btn) — Zero Outer Glow Bleed
   ========================================================================== */
.navbar-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ==========================================================================
   GLOBAL LIQUID GLASS BUTTON SHADER (.liquid-glass-btn)
   ========================================================================= */
.liquid-glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  
  /* Dark Mode Contained Glow */
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 70%, rgba(12, 12, 16, 0.4) 100%) padding-box !important;
  box-shadow:
    inset 0 0 10px 1px rgba(255, 255, 255, 0.18),
    0 0 16px 1px rgba(255, 255, 255, 0.08) !important;
}

.liquid-glass-btn:hover {
  transform: scale(1.02);
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow:
    inset 0 0 14px 2px rgba(255, 255, 255, 0.3),
    0 0 24px 3px rgba(255, 255, 255, 0.2) !important;
}

/* Light Mode: Tactile Solid Surface & Separation */
html:not(.dark) .liquid-glass-btn,
html.light .liquid-glass-btn {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  background: #ffffff !important;
  color: #09090b !important;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) .liquid-glass-btn:hover,
html.light .liquid-glass-btn:hover {
  transform: scale(1.02);
  border-color: rgba(0, 0, 0, 0.2) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.09),
    0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

/* ==========================================================================
   MICRO CODE / PREVIEW CARD SURFACES
   ========================================================================= */
/* Custom Sleek Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: #000000;
}

html:not(.dark) ::-webkit-scrollbar-track,
html.light ::-webkit-scrollbar-track {
  background: #FAFAFA;
}

::-webkit-scrollbar-thumb {
  background: #27272A;
  border-radius: 9999px;
}

html:not(.dark) ::-webkit-scrollbar-thumb,
html.light ::-webkit-scrollbar-thumb {
  background: #D4D4D8;
}

::-webkit-scrollbar-thumb:hover {
  background: #3F3F46;
}

html:not(.dark) ::-webkit-scrollbar-thumb:hover,
html.light ::-webkit-scrollbar-thumb:hover {
  background: #A1A1AA;
}

/* ==========================================================================
   PILLAR 01: BIOMETRIC RADIAL RIPPLE BLOOM SHOWCASE (CONCEPT 3)
   ========================================================================== */
#ripple-layer-redesign {
  transform: translate3d(0, 0, 0);
  will-change: clip-path;
  transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

#ripple-wave-ring {
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
  will-change: transform, opacity, width, height;
}

#btn-show-before,
#btn-show-after {
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   PILLAR 02: SPATIAL ELEVATION & GPU ACCELERATION
   ========================================================================== */
#matrix-stream-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Strict Vertical Scroll Lock (Section 02) */
#custom-platforms,
#services {
  overflow-x: hidden !important;
  width: 100% !important;
}

/* ==========================================================================
   PILLAR 03: ASYMMETRICAL FLOATING LOGO CLOUD & DIRECTIONAL KPIS
   ========================================================================== */
50% { transform: translate3d(-2px, 6px, 0) rotate(-1deg); }
}

/* Section 03 Typography Clean-Up: Zero Fuzzy Halos */
#decrypt-visible {
  text-shadow: none !important;
  filter: none !important;
}

/* ==========================================================================
   STRICT Z-INDEX & STACKING ISOLATION (CONCEPT 3)
   ========================================================================== */
/* Ground all background canvases & ambient glows to prevent click-jacking */
canvas,
#global-matrix-layer,
#matrix-stream-canvas {
  pointer-events: none !important;
  z-index: 0 !important;
}

#global-matrix-layer,
#matrix-stream-canvas {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

/* Ensure content sections stay strictly below z-index 100 */
main,
section,
#hero-section,
#capabilities-sheet,
#flagship-showcase,
#custom-platforms,
#ai-automation,
#advantage,
#contact,
#content-sheet,
footer {
  position: relative;
  z-index: 10 !important;
}

/* Light Mode Typography Hierarchy */
html:not(.dark) #custom-platforms h3,
html.light #custom-platforms h3 {
  color: #09090b !important;
}

html:not(.dark) #custom-platforms p,
html.light #custom-platforms p {
  color: #52525b !important;
}

/* Light Mode Metrics Bar */
html:not(.dark) #custom-platforms .border-t,
html.light #custom-platforms .border-t {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) #custom-platforms .bg-white\/\[0\.02\],
html.light #custom-platforms .bg-white\/\[0\.02\] {
  background-color: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

html:not(.dark) #custom-platforms .text-zinc-400,
html.light #custom-platforms .text-zinc-400 {
  color: #71717a !important;
}

html:not(.dark) #custom-platforms .text-white,
html.light #custom-platforms .text-white {
  color: #09090b !important;
}

/* Light Mode Arrow Navigation Buttons */
html:not(.dark) #stream-prev,
html:not(.dark) #stream-next,
html.light #stream-prev,
html.light #stream-next {
  background-color: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #09090b !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) #stream-prev:hover,
html:not(.dark) #stream-next:hover,
html.light #stream-prev:hover,
html.light #stream-next:hover {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
   LIGHT MODE: ELEVATED STUDIO DEPTH & BENTO CARDS
   ========================================================================== */
/* Light Mode Studio Canvas & Drawer Depth */
html:not(.dark) body,
html.light body {
  background-color: #FAFAFA !important;
}

html:not(.dark) #content-sheet,
html.light #content-sheet {
  background-color: transparent !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 -20px 45px rgba(0, 0, 0, 0.05) !important;
}

/* Light Mode Glass Bento Cards & Floating Tiles */
html:not(.dark) .text-zinc-400,
html.light .text-zinc-400 {
  color: #6b7280 !important;
}

/* ==========================================================================
   2. PHYSICS ENGINE & DECRYPTION STYLES (SECTION 03)
   ========================================================================== */
#physics-stage,
#symmetrical-stage {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.physics-logo {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
  will-change: transform;
  user-select: none;
  transition: filter 0.3s ease;
}

@media (max-width: 640px) {
  .physics-logo img {
    height: 2rem !important; /* 32px height on mobile */
    width: auto !important;
    max-width: 72px !important;
  }

  #physics-stage {
    min-height: 520px !important;
  }
}

#decrypt-visible {
  text-shadow: 0 0 35px rgba(52, 211, 153, 0.35);
}

.h-13 { height: 3.25rem; }
.h-14 { height: 3.5rem; }
.h-15 { height: 3.75rem; }
.h-16 { height: 4rem; }
@media (min-width: 640px) {
  .sm\:h-15 { height: 3.75rem; }
  .sm\:h-16 { height: 4rem; }
  }

.hover\:scale-110:hover {
  transform: scale(1.1);
}

.hover\:scale-115:hover {
  transform: scale(1.15);
}

/* ==========================================================================
   3. SCANZLY ADVANTAGE ZIG-ZAG TIMELINE STYLES (SECTION 04)
   ========================================================================== */
.adv-dot.active {
  border-color: #10b981 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.8) !important;
  transform: scale(1.3);
}

.dark .adv-dot.active {
  border-color: #34d399 !important;
  background-color: #060608 !important;
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.9) !important;
}

.adv-dot.active div {
  background-color: #10b981 !important;
}

.dark .adv-dot.active div {
  background-color: #34d399 !important;
}

/* Progressive Enhancement for Section 04 Zig-Zag Spine: Defaults to visible if JS fails */
.adv-content {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Once JS mounts, activate scroll reveals for unrevealed milestones */
#adv-zigzag-container.js-mounted .adv-row[data-side="left"] .adv-content:not(.revealed) {
  opacity: 0 !important;
  transform: translateX(-40px) !important;
}

#adv-zigzag-container.js-mounted .adv-row[data-side="right"] .adv-content:not(.revealed) {
  opacity: 0 !important;
  transform: translateX(40px) !important;
}

.adv-content.revealed {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* ==========================================================================
   4. EXPANDING SEPARATORS (CAPABILITY SHOWCASES)
   ========================================================================== */
.adv-expand-divider .expand-line {
  will-change: transform;
  transform: scaleX(0);
}

.adv-expand-divider.is-expanded .expand-line {
  transform: scaleX(1) !important;
}

/* ==========================================================================
   5. NAVBAR-MATCHING BENTO GLASS SHADER
   ========================================================================== */
.navbar-glass-card {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  background:
    radial-gradient(
      70% 2em at center 120%,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.03) 50%,
      transparent 100%
    ) padding-box,
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.08),
      rgba(10, 10, 14, 0.45) 75%
    ) padding-box !important;
  box-shadow:
    inset 0.2em 0.2em 0.3em -0.1em rgba(255, 255, 255, 0.25),
    inset -0.2em -0.2em 0.3em -0.1em rgba(0, 0, 0, 0.4),
    0 8px 24px -4px rgba(0, 0, 0, 0.6) !important;
}

.navbar-glass-card:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow:
    inset 0.2em 0.2em 0.4em -0.05em rgba(255, 255, 255, 0.35),
    inset -0.2em -0.2em 0.3em -0.1em rgba(0, 0, 0, 0.3),
    0 20px 40px -10px rgba(0, 0, 0, 0.85) !important;
}

/* Light Mode Bento Glass */
html:not(.dark) .navbar-glass-card,
html.light .navbar-glass-card {
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  background:
    radial-gradient(
      70% 2em at center 120%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.6) 60%,
      transparent 100%
    ) padding-box,
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.95),
      rgba(240, 240, 246, 0.8)
    ) padding-box !important;
  box-shadow:
    inset 0.2em 0.2em 0.3em -0.1em rgba(255, 255, 255, 1),
    0 1px 2px 0 rgba(0, 0, 0, 0.04),
    0 8px 24px -4px rgba(15, 23, 42, 0.07) !important;
}

html:not(.dark) .navbar-glass-card:hover,
html.light .navbar-glass-card:hover {
  border-color: rgba(0, 0, 0, 0.16) !important;
  box-shadow:
    inset 0.2em 0.2em 0.4em -0.05em rgba(255, 255, 255, 1),
    0 2px 4px 0 rgba(0, 0, 0, 0.04),
    0 16px 32px -6px rgba(15, 23, 42, 0.10) !important;
}

/* ==========================================================================
   6. DUAL-THEME CARD SURFACES & 3D CYLINDER (SECTION 02)
   ========================================================================== */
/* Explicit High-Contrast Card Surfaces */
.dashboard-surface {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08) !important;
}

.dark .dashboard-surface {
  background-color: #0c0d12 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9) !important;
}


/* ==========================================================================
   SECTION 02: FULL-WIDTH EDGE-TO-EDGE CAROUSEL & CARD ELEVATION ENGINE
   ========================================================================== */
/* Full Width Track Headroom */
.edge-to-edge-stream-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

#feature-stream-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: hidden !important;
  user-select: none !important;
  will-change: scroll-position;
}

#feature-stream-track::-webkit-scrollbar {
  display: none !important;
}

/* Base Dashboard Card State */
.floating-spatial-tile {
  flex-shrink: 0;
  width: 380px;
  transform: translateY(0) scale(1) translateZ(0);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease !important;
  cursor: pointer;
  will-change: transform, box-shadow;
  position: relative;
  z-index: 10;
}

@media (min-width: 640px) {
  .floating-spatial-tile {
    width: 440px;
  }
}

/* Hover State: Absolute Pause, -24px Lift, 15% Expansion, Neutral Ambient Shadow */
.floating-spatial-tile:hover {
  transform: translateY(-24px) scale(1.15) translateZ(0) !important;
  z-index: 50 !important;
  box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.18),
              0 16px 32px -16px rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
}

html.dark .floating-spatial-tile:hover,
.dark .floating-spatial-tile:hover {
  box-shadow: 0 35px 75px -15px rgba(0, 0, 0, 0.9),
              0 20px 40px -20px rgba(0, 0, 0, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.carousel-slide {
  transform-style: flat !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
}

/* Canvas Crisp Scaling */
.carousel-slide canvas {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ==========================================================================
   SECTION 01: SHOWCASE VIEWPORT FRAME SHADOW & DEPTH SYSTEM
   ========================================================================== */
/* Light Mode Softer, Diffused Ambient Shadow */
html:not(.dark) #before-after-container,
html.light #before-after-container,
html:not(.dark) .showcase-frame-shadow,
html.light .showcase-frame-shadow {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.03),
    0 12px 24px -4px rgba(15, 23, 42, 0.05),
    0 24px 48px -12px rgba(15, 23, 42, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Dark Mode Preserved */
html.dark #before-after-container,
.dark #before-after-container {
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.95), 0 0 1px 1px rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   APPLE OPTICAL RACK-FOCUS HARDWARE LAYERING & SEGMENTED CONTROLS
   ========================================================================== */
/* Hardware-Accelerated Optical Rack Focus Layer */
.showcase-rack-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Extended to 1.1s for a luxurious, calm camera transition */
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, filter;
}

/* In Focus: Crisp, Full Opacity, Pinned Edge-to-Edge */
.showcase-rack-layer.is-focused {
  opacity: 1;
  filter: blur(0px);
  z-index: 10;
}

/* Defocused: Optical Blur & Fade ONLY (Zero Downscale, Zero Exposed Gaps) */
.showcase-rack-layer.is-defocused {
  opacity: 0;
  filter: blur(12px);
  z-index: 5;
}

/* Segmented Control Pill Active States */
.showcase-toggle-btn.active-toggle,
.seg-btn-active {
  background-color: #ffffff !important;
  color: #09090b !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Inactive State handling */
html:not(.dark) .showcase-toggle-btn:not(.active-toggle),
html.light .showcase-toggle-btn:not(.active-toggle),
html:not(.dark) .seg-btn-inactive,
html.light .seg-btn-inactive {
  background-color: transparent !important;
  color: #52525b !important;
}

html:not(.dark) .showcase-toggle-btn:not(.active-toggle):hover,
html.light .showcase-toggle-btn:not(.active-toggle):hover,
html:not(.dark) .seg-btn-inactive:hover,
html.light .seg-btn-inactive:hover {
  color: #09090b !important;
}

.dark .showcase-toggle-btn:not(.active-toggle),
.dark .seg-btn-inactive {
  background-color: transparent !important;
  color: #a1a1aa !important;
}

.dark .showcase-toggle-btn:not(.active-toggle):hover,
.dark .seg-btn-inactive:hover {
  color: #ffffff !important;
}

/* Segmented Control Pill Transition Smoothness */
#btn-view-original,
#btn-view-redesign {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}