/**
 * Nova Studio Pro - Page-Specific Styles
 * Nova UI Kit: tokens, primitives, and block patterns
 *
 * GOVERNANCE (Phase 1.5)
 * ----------------------
 * 1. Token-only rule: Use var(--nova-*) for colors, spacing, radii, shadows, motion.
 *    Do NOT hard-code #hex, px values, or font-family names outside token definitions.
 * 2. Primitives: Reuse .nova-btn, .nova-input, .nova-card, .nova-toast for interactive elements.
 * 3. Block patterns: Hero, feature sections, info modules, compare grid, footer blocks
 *    all consume primitives and tokens — avoid one-off styles.
 * 4. Accessibility: Include focus-visible states; honor prefers-reduced-motion.
 * 5. QA gate: Before merging, run node --check on JS, read_lints on CSS, and visual walkthrough.
 */

/* ============================================
   NOVA UI KIT — TOKENS (Phase 1.5)
   Single source of truth for Studio Pro UI.
   Rules:
   - Prefer var(--nova-*) instead of hard-coded colors/sizes.
   - Keep the palette mostly monochrome; accent is used sparingly.
   ============================================ */

:root {
  /* Rendering hints */
  color-scheme: dark;

  /* Typography */
  --nova-font-sans: "Test Soehne Buch", Arial, sans-serif;
  --nova-font-sans-strong: "Test Soehne Kraftig", Arial, sans-serif;
  --nova-font-mono: "Test Soehne Mono Kraftig", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Core colors (dark) */
  --nova-bg: #0a0a0a;
  --nova-surface-1: rgba(255, 255, 255, 0.02);
  --nova-surface-2: rgba(255, 255, 255, 0.03);
  --nova-surface-3: rgba(255, 255, 255, 0.05);
  --nova-border-1: rgba(255, 255, 255, 0.08);
  --nova-border-2: rgba(255, 255, 255, 0.12);
  --nova-border-strong: rgba(255, 255, 255, 0.14);

  --nova-text-1: rgba(238, 238, 238, 0.92);
  --nova-text-2: rgba(238, 238, 238, 0.70);
  --nova-text-3: rgba(238, 238, 238, 0.55);
  --nova-text-4: rgba(238, 238, 238, 0.40);
  --nova-text-strong: #fff;

  /* Accent (use sparingly) */
  --nova-accent: #0953c7;
  --nova-accent-2: #4a9eff;
  --nova-accent-surface: rgba(9, 83, 199, 0.18);
  --nova-accent-border: rgba(9, 83, 199, 0.45);
  --nova-accent-hover: #0a5fd9;
  --nova-accent-selection: rgba(9, 83, 199, 0.4);

  /* Glass */
  --nova-glass-bg: rgba(20, 20, 20, 0.95);
  --nova-overlay-backdrop: rgba(0, 0, 0, 0.72);

  /* Spacing (4/8-based) */
  --nova-space-1: 4px;
  --nova-space-2: 8px;
  --nova-space-3: 12px;
  --nova-space-4: 16px;
  --nova-space-5: 20px;
  --nova-space-6: 24px;
  --nova-space-7: 32px;
  --nova-space-8: 40px;
  --nova-space-9: 48px;
  --nova-space-10: 60px;

  /* Radii */
  --nova-radius-sm: 10px;
  --nova-radius-md: 12px;
  --nova-radius-lg: 16px;
  --nova-radius-xl: 18px;
  --nova-radius-pill: 999px;

  /* Elevation */
  --nova-shadow-1: 0 10px 30px rgba(0, 0, 0, 0.35);
  --nova-shadow-2: 0 18px 60px rgba(0, 0, 0, 0.55);
  --nova-inset-1: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --nova-inset-hairline: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;

  /* Motion */
  --nova-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --nova-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nova-dur-1: 120ms;
  --nova-dur-2: 200ms;
  --nova-dur-3: 300ms;
  --nova-dur-4: 450ms;
}

html,
body {
  background-color: var(--nova-bg);
  color: var(--nova-text-1);
  /* Allow standard touch gestures (scroll, pinch-zoom, tap) while enabling JS handlers */
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

/* ============================================
   VIEW TRANSITIONS (Page Navigation)
   Smooth cross-fade when navigating between pages.
   Requires JS: navigation.addEventListener('navigate', ...)
   ============================================ */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
  animation-timing-function: var(--nova-ease-out);
}

::view-transition-old(root) {
  animation-name: nova-fade-out;
}

::view-transition-new(root) {
  animation-name: nova-fade-in;
}

@keyframes nova-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

@keyframes nova-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Shared elements persist across transitions */
.navbar-wrapper {
  view-transition-name: navbar;
}

.sticky-subnav {
  view-transition-name: subnav;
}

::view-transition-old(navbar),
::view-transition-new(navbar),
::view-transition-old(subnav),
::view-transition-new(subnav) {
  animation: none;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ============================================
   PRODUCT GALLERY (Hero Media System)
   Interactive angle/color switching gallery
   ============================================ */

.product-gallery {
  /* Behave like the original hero image layer (absolute, behind text) */
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nova-space-6);
  width: 100%;
  max-width: none;
  margin: 0;
  pointer-events: none;
}

.gallery-main {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Keep hero image clear of nav + controls */
  padding-top: 120px;
  padding-bottom: 170px;
}

.gallery-image {
  width: min(960px, 92vw);
  height: min(560px, 56vh);
  object-fit: contain;
  transition: opacity 0.4s var(--nova-ease-out), transform 0.4s var(--nova-ease-out);
  /* Allow vertical scrolling while handling horizontal swipe for gallery navigation */
  touch-action: pan-y;
}

.gallery-image.is-loading {
  opacity: 0.5;
}

.gallery-image.is-transitioning {
  opacity: 0;
  transform: scale(0.98);
}

.gallery-controls {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nova-space-4);
  z-index: 2;
  pointer-events: auto;
}

/* Angle Thumbnails */
.gallery-angles {
  display: flex;
  gap: var(--nova-space-2);
  padding: var(--nova-space-2);
  background: var(--nova-surface-2);
  border: 1px solid var(--nova-border-1);
  border-radius: var(--nova-radius-lg);
}

.angle-btn {
  width: 56px;
  height: 56px;
  padding: 4px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--nova-radius-md);
  cursor: pointer;
  transition: border-color var(--nova-dur-2) ease, background var(--nova-dur-2) ease;
  overflow: hidden;
}

.angle-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--nova-radius-md) - 4px);
  filter: brightness(0.8);
  transition: filter var(--nova-dur-2) ease;
}

.angle-btn:hover {
  background: var(--nova-surface-3);
}

.angle-btn:hover img {
  filter: brightness(1);
}

.angle-btn.is-active {
  border-color: var(--nova-accent);
  background: var(--nova-accent-surface);
}

.angle-btn.is-active img {
  filter: brightness(1);
}

.angle-btn:focus-visible {
  outline: 2px solid var(--nova-accent);
  outline-offset: 2px;
}

/* Color Pills */
.gallery-colors {
  display: flex;
  gap: var(--nova-space-3);
}

.color-btn {
  display: flex;
  align-items: center;
  gap: var(--nova-space-2);
  padding: var(--nova-space-2) var(--nova-space-4);
  background: var(--nova-surface-2);
  border: 1px solid var(--nova-border-1);
  border-radius: var(--nova-radius-pill);
  cursor: pointer;
  font-family: var(--nova-font-sans);
  font-size: 13px;
  color: var(--nova-text-2);
  transition: all var(--nova-dur-2) ease;
}

.color-btn:hover {
  background: var(--nova-surface-3);
  border-color: var(--nova-border-2);
  color: var(--nova-text-1);
}

.color-btn.is-active {
  background: var(--nova-accent-surface);
  border-color: var(--nova-accent);
  color: var(--nova-text-1);
}

.color-btn:focus-visible {
  outline: 2px solid var(--nova-accent);
  outline-offset: 2px;
}

.color-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.color-swatch--silver {
  background: linear-gradient(135deg, #e8e8e8 0%, #b8b8b8 100%);
}

.color-swatch--gray {
  background: linear-gradient(135deg, #5a5a5a 0%, #2a2a2a 100%);
}

.color-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Responsive */
@media (max-width: 768px) {
  .product-gallery {
    gap: var(--nova-space-4);
  }
  
  .gallery-main {
    padding-top: 88px;
    padding-bottom: 120px;
  }
  
  .gallery-image {
    width: min(520px, 92vw);
    height: min(420px, 50vh);
  }
  
  .angle-btn {
    width: 44px;
    height: 44px;
  }
  
  .gallery-colors {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .color-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-image {
    transition: none;
  }
}

/* ============================================
   ANNOUNCEMENT BANNER (Premium UI Pattern)
   ============================================ */

.nova-announcement {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(90deg, var(--nova-accent) 0%, #0a5fd9 100%);
  color: var(--nova-text-strong);
  font-family: var(--nova-font-sans-strong);
  font-size: 13px;
  text-align: center;
  padding: var(--nova-space-3) var(--nova-space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nova-space-4);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform var(--nova-dur-3) var(--nova-ease-out), opacity var(--nova-dur-3) var(--nova-ease-out);
}

.nova-announcement.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.nova-announcement.is-dismissed {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.nova-announcement__content {
  display: flex;
  align-items: center;
  gap: var(--nova-space-3);
}

.nova-announcement__badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: var(--nova-radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.nova-announcement__text {
  color: rgba(255, 255, 255, 0.95);
}

.nova-announcement__link {
  color: var(--nova-text-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--nova-dur-1) ease;
}

.nova-announcement__link:hover {
  opacity: 0.85;
}

.nova-announcement__dismiss {
  position: absolute;
  right: var(--nova-space-4);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: var(--nova-space-2);
  border-radius: var(--nova-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--nova-dur-1) ease, background var(--nova-dur-1) ease;
}

.nova-announcement__dismiss:hover {
  color: var(--nova-text-strong);
  background: rgba(255, 255, 255, 0.1);
}

.nova-announcement__dismiss svg {
  width: 16px;
  height: 16px;
}

/* Adjust body padding when banner is visible */
body.has-announcement {
  padding-top: 44px;
}

body.has-announcement .navbar-logo-left,
body.has-announcement .section {
  /* Offset fixed elements */
}

@media (max-width: 768px) {
  .nova-announcement {
    font-size: 12px;
    padding: var(--nova-space-3) var(--nova-space-9) var(--nova-space-3) var(--nova-space-4);
  }
  .nova-announcement__badge {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nova-announcement {
    transition: none;
  }
}

/* ============================================
   NOVA UI KIT — PRIMITIVES (Phase 1.5)
   ============================================ */

/* Buttons */
.nova-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--nova-text-1);
  font-family: var(--nova-font-sans-strong);
  font-size: 14px;
  line-height: 1;
  border-radius: var(--nova-radius-pill);
  padding: 12px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--nova-dur-2) ease, background var(--nova-dur-2) ease, border-color var(--nova-dur-2) ease, color var(--nova-dur-2) ease, box-shadow var(--nova-dur-2) ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nova-btn:focus-visible {
  outline: 2px solid var(--nova-accent);
  outline-offset: 3px;
}

.nova-btn[disabled],
.nova-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.nova-btn--primary {
  background: var(--nova-accent);
  border-color: var(--nova-accent);
  color: var(--nova-text-strong);
  box-shadow: 0 10px 24px rgba(9, 83, 199, 0.22);
}
.nova-btn--primary:hover { background: var(--nova-accent-hover); border-color: var(--nova-accent-hover); transform: translateY(-1px); }

.nova-btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--nova-text-1);
}
.nova-btn--secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); }

.nova-btn--ghost {
  background: transparent;
  border-color: var(--nova-border-1);
  color: var(--nova-text-2);
}
.nova-btn--ghost:hover { background: rgba(255, 255, 255, 0.05); color: var(--nova-text-1); }

/* Inputs */
.nova-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--nova-border-strong);
  border-radius: var(--nova-radius-md);
  color: var(--nova-text-1);
  font-family: var(--nova-font-sans-strong);
  font-size: 14px;
  outline: none;
  transition: border-color var(--nova-dur-2) ease, box-shadow var(--nova-dur-2) ease;
}
.nova-input::placeholder { color: var(--nova-text-4); }
.nova-input:focus { border-color: rgba(74, 158, 255, 0.55); box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.16); }

/* Cards */
.nova-card {
  background: var(--nova-surface-2);
  border: 1px solid var(--nova-border-1);
  border-radius: var(--nova-radius-lg);
  box-shadow: none;
}

/* Toasts */
.nova-toast-stack {
  position: fixed;
  right: 20px;
  top: 96px; /* sit below the nav bar */
  z-index: 4000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  pointer-events: none;
}

.nova-toast {
  pointer-events: auto;
  width: min(360px, calc(100vw - 32px));
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--nova-radius-lg);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.12);
  padding: 12px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #0a0a0a;
  opacity: 0;
  transform: translateY(8px);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition: opacity var(--nova-dur-2) ease, transform var(--nova-dur-2) ease;
}
.nova-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.nova-toast__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 4px;
  background: var(--nova-accent-2);
  opacity: 0.9;
}

.nova-toast__body { flex: 1; min-width: 0; }
.nova-toast__title {
  font-family: var(--nova-font-sans-strong);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.65);
  margin: 0 0 4px;
}
.nova-toast__message {
  font-family: var(--nova-font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: #0a0a0a;
  margin: 0;
}
.nova-toast__close {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.20);
  color: rgba(0, 0, 0, 0.65);
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  font-family: var(--nova-font-sans-strong);
  font-size: 12px;
}
.nova-toast__close:hover { border-color: rgba(0, 0, 0, 0.32); color: #0a0a0a; }

/* Bridge: hero/spec/section text onto tokens */
body .hero-specs li { color: var(--nova-text-2); font-family: var(--nova-font-sans-strong); }
body .hero-specs li::before { background: var(--nova-accent); }
body .price-badge { color: var(--nova-text-2); font-family: var(--nova-font-sans-strong); }
body .price-badge strong { color: var(--nova-text-1); }
body .section-kicker { color: var(--nova-text-3); font-family: var(--nova-font-sans-strong); }
body .section-headline { color: var(--nova-text-1); font-family: var(--nova-font-sans-strong); }
body .section-body { color: var(--nova-text-2); font-family: var(--nova-font-sans); }

/* Bridge: feature sections → Nova tokens */
body .feature-content {
  gap: var(--nova-space-10);
}
body .feature-text {
  max-width: 520px;
}
body .feature-visual {
  background: var(--nova-surface-2);
  border: 1px solid var(--nova-border-1);
  border-radius: var(--nova-radius-xl);
  box-shadow: var(--nova-shadow-1);
  transition: border-color var(--nova-dur-2) ease, box-shadow var(--nova-dur-2) ease;
}

/* Feature visuals that contain real images (no placeholder label overlay) */
.feature-visual--image {
  background: linear-gradient(145deg, rgba(35, 35, 35, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%);
  padding: 24px;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-visual--image::before {
  display: none;
}

.feature-img {
  width: 100%;
  height: 100%;
  max-height: 400px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3));
}

/* Ensure feature visuals are visible even if animation hasn't triggered */
.feature-visual--image {
  opacity: 1 !important;
  transform: none !important;
}

/* Detail callout block */
.detail-callout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--nova-space-10);
  align-items: center;
  padding: var(--nova-space-10);
  border-radius: var(--nova-radius-xl);
  background: var(--nova-surface-2);
  border: 1px solid var(--nova-border-1);
  box-shadow: var(--nova-shadow-1);
}

.detail-image {
  border-radius: var(--nova-radius-xl);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(35, 35, 35, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%);
  border: 1px solid var(--nova-border-1);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.detail-img {
  width: 100%;
  height: 100%;
  max-height: 400px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3));
}

.detail-text .section-body {
  max-width: 54ch;
}

.detail-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nova-space-4);
  margin-top: var(--nova-space-6);
}

.detail-point {
  padding: var(--nova-space-4);
  border-radius: var(--nova-radius-lg);
  background: var(--nova-surface-1);
  border: 1px solid var(--nova-border-1);
}

.detail-point-title {
  font-family: var(--nova-font-sans-strong);
  color: var(--nova-text-1);
  font-size: 14px;
  margin-bottom: 6px;
}

.detail-point-body {
  color: var(--nova-text-2);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 991px) {
  .detail-callout {
    grid-template-columns: 1fr;
    padding: var(--nova-space-8);
  }
}
body .feature-visual:hover {
  border-color: var(--nova-border-2);
  box-shadow: var(--nova-shadow-2);
}
body .feature-bullets {
  margin-top: var(--nova-space-5);
}
body .feature-bullets li {
  color: var(--nova-text-2);
  font-family: var(--nova-font-sans-strong);
  padding: var(--nova-space-2) 0;
  padding-left: var(--nova-space-5);
}
body .feature-bullets li::before {
  color: var(--nova-accent);
}

/* Bridge: info modules → Nova tokens */
body .info-module {
  background: var(--nova-surface-2);
  border: 1px solid var(--nova-border-1);
  border-radius: var(--nova-radius-lg);
  color: var(--nova-text-1);
  box-shadow: none;
  transition: background var(--nova-dur-2) ease, border-color var(--nova-dur-2) ease, transform var(--nova-dur-2) ease, box-shadow var(--nova-dur-2) ease;
}
body .info-module:hover {
  background: var(--nova-surface-3);
  border-color: var(--nova-border-2);
  transform: translateY(-4px);
  box-shadow: var(--nova-shadow-1);
}
body .info-module-title { color: var(--nova-text-1); font-family: var(--nova-font-sans-strong); }
body .info-module-subtitle { color: var(--nova-text-3); font-family: var(--nova-font-sans-strong); }
body .info-module-list li { color: var(--nova-text-2); border-color: var(--nova-border-1); font-family: var(--nova-font-sans-strong); }
body .info-module-cta {
  color: var(--nova-accent);
  font-family: var(--nova-font-sans-strong);
  transition: gap var(--nova-dur-2) ease;
}
body .info-module-cta:hover { gap: 10px; }
body .info-module-icon {
  background: var(--nova-accent-surface);
  color: var(--nova-accent);
  border-radius: var(--nova-radius-md);
}

/* Bridge: existing classes → primitives (override inline CSS with higher specificity) */
body .hero-cta { font-family: var(--nova-font-sans-strong); border-radius: var(--nova-radius-pill); }
body .hero-cta-primary { background: var(--nova-accent); color: var(--nova-text-strong); }
body .hero-cta-primary:hover { background: var(--nova-accent-hover); }
body .hero-cta-secondary { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: var(--nova-text-1); }
body .hero-cta-secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); }

body .button-primary.w-button { background: var(--nova-accent); border-radius: var(--nova-radius-pill); }
body .button-primary.w-button:hover { background: var(--nova-accent-hover); }

body .footer-newsletter-input { border-radius: var(--nova-radius-sm); }
body .nova-search-input { border-radius: var(--nova-radius-md); }

body .compare-tool-btn { border-radius: var(--nova-radius-pill); font-family: var(--nova-font-sans-strong); }
body .sticky-buy-bar-cta { border-radius: var(--nova-radius-pill); font-family: var(--nova-font-sans-strong); }
body .nova-cookie-btn { border-radius: var(--nova-radius-sm); }

@media (prefers-reduced-motion: reduce) {
  .nova-btn,
  .hero-cta,
  .sticky-buy-bar-cta,
  .compare-tool-btn,
  .footer-newsletter-btn,
  .feature-visual,
  .info-module,
  .info-module-cta,
  .footer-trust-item,
  .footer-trust-icon,
  .footer-region select {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================
   SKELETON LOADING STATES
   ============================================ */

/* Base skeleton shimmer animation */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  border-radius: 8px;
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
  border-radius: 4px;
}

.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 70%; }
.skeleton-text.long { width: 100%; }

.skeleton-image {
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  border-radius: 16px;
}

.skeleton-button {
  display: inline-block;
  height: 48px;
  width: 160px;
  border-radius: 24px;
}

/* Feature visual skeleton */
.feature-visual.is-loading {
  background: linear-gradient(
    90deg,
    rgba(30, 30, 30, 0.8) 0%,
    rgba(40, 40, 40, 0.8) 50%,
    rgba(30, 30, 30, 0.8) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite ease-in-out;
}

.feature-visual.is-loading::before {
  content: '';
}

/* ============================================
   PROGRESSIVE IMAGE LOADING (Blur-up)
   ============================================ */

.progressive-image {
  position: relative;
  overflow: hidden;
}

.progressive-image img {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.progressive-image img.is-loaded {
  opacity: 1;
}

.progressive-image .placeholder {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  transform: scale(1.1);
  transition: opacity 0.4s ease 0.2s;
}

.progressive-image.is-loaded .placeholder {
  opacity: 0;
}

/* ============================================
   IMAGE LAZY LOADING STATES
   ============================================ */

img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img[loading="lazy"].is-loaded,
img.is-loaded {
  opacity: 1;
}

/* Hero image - critical, no lazy loading effect */
.hero-image {
  opacity: 1 !important;
}

/* ============================================
   CONTENT LOADING STATES
   ============================================ */

/* Table row loading */
.spec-table tr.is-loading td {
  position: relative;
  overflow: hidden;
}

.spec-table tr.is-loading td::after {
  content: '';
  position: absolute;
  inset: 8px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  border-radius: 4px;
}

/* Card loading */
.info-module.is-loading,
.best-for-card.is-loading {
  position: relative;
}

.info-module.is-loading::after,
.best-for-card.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  border-radius: inherit;
  pointer-events: none;
}

/* ============================================
   FORM LOADING STATES
   ============================================ */

.form-submit.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.form-submit.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   SMOOTH CONTENT TRANSITIONS
   ============================================ */

/* Price update animation */
.summary-total-price {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.summary-total-price.is-updating {
  transform: scale(1.05);
  opacity: 0.8;
}

/* Config option selection */
.config-option {
  transition: all 0.2s ease;
}

.config-option.selected {
  animation: select-pulse 0.3s ease;
}

@keyframes select-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* ============================================
   PAGE TRANSITION EFFECTS
   ============================================ */

/* Fade in main content */
.main-wrapper {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .navbar,
  .navbar-wrapper,
  .nav-menu-wrapper,
  .skip-link,
  .footer-dark,
  .hero-ctas,
  .summary-cta,
  .summary-secondary,
  .reserve-modal {
    display: none !important;
  }
  
  .main-wrapper {
    padding-top: 0 !important;
  }
  
  .spec-table {
    border: 1px solid #ccc;
  }
  
  .spec-table th,
  .spec-table td {
    border: 1px solid #ccc;
    color: #000;
  }
  
  body {
    background: #fff;
    color: #000;
  }
}

/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .feature-visual.is-loading,
  .info-module.is-loading::after,
  .best-for-card.is-loading::after,
  .spec-table tr.is-loading td::after {
    animation: none;
  }
  
  .form-submit.is-loading::after {
    animation: none;
  }
  
  .config-option.selected {
    animation: none;
  }
  
  .main-wrapper {
    animation: none;
  }
  
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
  .navbar-wrapper,
  .config-option,
  .info-module,
  .best-for-card {
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.5);
  }
  
  .nav-link-4,
  .section-kicker,
  .compare-label {
    color: rgba(255, 255, 255, 0.9);
  }
}

/* ============================================
   STICKY BUY BAR
   ============================================ */

.sticky-buy-bar {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 24px;
  background: var(--nova-glass-bg);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--nova-border-2);
  border-radius: var(--nova-radius-pill);
  box-shadow: var(--nova-shadow-1), var(--nova-inset-hairline);
  transition: bottom var(--nova-dur-4) var(--nova-ease-standard), opacity var(--nova-dur-3) ease;
  opacity: 0;
}

.sticky-buy-bar.is-visible {
  bottom: 24px;
  opacity: 1;
}

.sticky-buy-bar-product {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sticky-buy-bar-image {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
}

.sticky-buy-bar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sticky-buy-bar-name {
  font-family: var(--nova-font-sans-strong);
  font-size: 14px;
  color: var(--nova-text-strong);
  line-height: 1.2;
}

.sticky-buy-bar-price {
  font-family: var(--nova-font-sans);
  font-size: 13px;
  color: var(--nova-text-2);
}

.sticky-buy-bar-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--nova-accent);
  color: var(--nova-text-strong);
  font-family: var(--nova-font-sans-strong);
  font-size: 14px;
  text-decoration: none;
  border-radius: var(--nova-radius-pill);
  transition: background var(--nova-dur-2) ease, transform var(--nova-dur-2) ease;
  white-space: nowrap;
}

.sticky-buy-bar-cta:hover {
  background: var(--nova-accent-hover);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .sticky-buy-bar {
    left: 16px;
    right: 16px;
    transform: none;
    justify-content: space-between;
    padding: 12px 16px;
  }

  .sticky-buy-bar.is-visible {
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  
  .sticky-buy-bar-image {
    width: 32px;
    height: 32px;
  }
  
  .sticky-buy-bar-name {
    font-size: 13px;
  }
  
  .sticky-buy-bar-price {
    font-size: 12px;
  }
}

/* ============================================
   SCROLL INDICATOR (Hero)
   ============================================ */

.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  cursor: pointer;
  z-index: 10;
}

.scroll-indicator:hover {
  opacity: 1;
}

.scroll-indicator-text {
  font-family: var(--nova-font-sans);
  font-size: 12px;
  color: var(--nova-text-2);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.scroll-indicator-icon {
  width: 24px;
  height: 40px;
  border: 2px solid var(--nova-text-4);
  border-radius: 12px;
  position: relative;
}

.scroll-indicator-icon::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  background: var(--nova-text-2);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollBounce 2s infinite;
}

@keyframes scrollBounce {
  0%, 100% { 
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  50% { 
    transform: translateX(-50%) translateY(10px);
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-indicator-icon::before {
    animation: none;
  }
}

@media (max-width: 768px) {
  .scroll-indicator {
    bottom: 24px;
  }
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */

.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--nova-glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--nova-border-1);
  border-radius: 50%;
  color: var(--nova-text-1);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: transform var(--nova-dur-3) ease, opacity var(--nova-dur-3) ease, background var(--nova-dur-2) ease, border-color var(--nova-dur-2) ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: rgba(9, 83, 199, 0.9);
  border-color: var(--nova-accent-border);
  transform: translateY(-2px);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* Hide back-to-top when sticky bar is visible */
.sticky-buy-bar.is-visible ~ .back-to-top {
  right: auto;
  left: 24px;
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 100px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
}

/* ============================================
   NEWSLETTER SIGNUP (Footer)
   ============================================ */

.footer-newsletter {
  background: var(--nova-surface-2);
  border: 1px solid var(--nova-border-1);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 40px;
}

.footer-newsletter-title {
  font-family: var(--nova-font-sans-strong);
  font-size: 20px;
  color: var(--nova-text-1);
  margin: 0 0 8px;
}

.footer-newsletter-text {
  font-family: var(--nova-font-sans);
  font-size: 14px;
  color: var(--nova-text-3);
  margin: 0 0 20px;
}

.footer-newsletter-form {
  display: flex;
  gap: 12px;
}

.footer-newsletter-input {
  flex: 1;
  padding: 12px 16px;
  background: var(--nova-surface-3);
  border: 1px solid var(--nova-border-strong);
  border-radius: var(--nova-radius-sm);
  color: var(--nova-text-1);
  font-family: var(--nova-font-sans);
  font-size: 14px;
}

.footer-newsletter-input:focus {
  outline: none;
  border-color: var(--nova-accent);
}

.footer-newsletter-input::placeholder {
  color: var(--nova-text-4);
}

.footer-newsletter-btn {
  padding: 12px 24px;
  background: var(--nova-accent);
  color: var(--nova-text-strong);
  font-family: var(--nova-font-sans-strong);
  font-size: 14px;
  border: none;
  border-radius: var(--nova-radius-sm);
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.footer-newsletter-btn:hover {
  background: var(--nova-accent-hover);
}

.footer-newsletter-success {
  display: none;
  padding: 16px;
  background: rgba(9, 83, 199, 0.1);
  border: 1px solid rgba(9, 83, 199, 0.3);
  border-radius: var(--nova-radius-sm);
  color: var(--nova-text-1);
  font-family: var(--nova-font-sans);
  font-size: 14px;
}

.footer-newsletter-success.show {
  display: block;
}

@media (max-width: 600px) {
  .footer-newsletter-form {
    flex-direction: column;
  }
}

/* ============================================
   TRUST SIGNALS (Footer)
   ============================================ */

.footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nova-space-6);
  padding: var(--nova-space-6) 0;
  border-top: 1px solid var(--nova-border-1);
  border-bottom: 1px solid var(--nova-border-1);
  margin: var(--nova-space-6) 0;
}

.footer-trust-item {
  display: flex;
  align-items: center;
  gap: var(--nova-space-3);
  font-family: var(--nova-font-sans);
  font-size: 13px;
  color: var(--nova-text-2);
  transition: color var(--nova-dur-2) ease;
}

.footer-trust-item:hover {
  color: var(--nova-text-1);
}

.footer-trust-icon {
  width: 20px;
  height: 20px;
  opacity: 0.7;
  transition: opacity var(--nova-dur-2) ease;
}

.footer-trust-item:hover .footer-trust-icon {
  opacity: 1;
}

.footer-trust-icon svg {
  width: 100%;
  height: 100%;
}

/* ============================================
   COMPANY INFO (Footer)
   ============================================ */

.footer-company {
  font-family: var(--nova-font-sans);
  font-size: 13px;
  color: var(--nova-text-4);
  line-height: 1.6;
  margin-top: var(--nova-space-4);
}

.footer-company strong {
  color: var(--nova-text-2);
  font-family: var(--nova-font-sans-strong);
}

/* ============================================
   REGION / LANGUAGE SELECTOR (placeholder)
   ============================================ */

.footer-region {
  margin-top: var(--nova-space-4);
  display: flex;
  gap: var(--nova-space-3);
  align-items: center;
  flex-wrap: wrap;
}

.footer-region label {
  color: var(--nova-text-3);
  font-family: var(--nova-font-sans-strong);
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.footer-region select {
  background: var(--nova-surface-3);
  border: 1px solid var(--nova-border-2);
  color: var(--nova-text-1);
  border-radius: var(--nova-radius-sm);
  padding: var(--nova-space-3) var(--nova-space-3);
  font-family: var(--nova-font-sans-strong);
  font-size: 13px;
  transition: border-color var(--nova-dur-2) ease;
}

.footer-region select:hover {
  border-color: var(--nova-border-strong);
}

.footer-region select:focus {
  outline: none;
  border-color: var(--nova-accent);
}

/* ============================================
   TECH SPECS: COLLAPSIBLE SECTIONS
   ============================================ */

.spec-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.spec-section:last-of-type {
  border-bottom: none;
}

.spec-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.spec-section-header:hover {
  color: #fff;
}

.spec-section-header h2 {
  margin: 0;
  font-size: 18px;
}

.spec-section-toggle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
  color: rgba(238, 238, 238, 0.5);
  transition: transform 0.3s ease;
}

@media (max-width: 520px) {
  .spec-section-header {
    padding: 20px 20px;
  }
}

.spec-section.is-collapsed .spec-section-toggle {
  transform: rotate(-90deg);
}

.spec-section-content {
  max-height: 2000px;
  overflow: hidden;
  transition: max-height 0.4s ease-out, opacity 0.3s ease;
  opacity: 1;
}

.spec-section.is-collapsed .spec-section-content {
  max-height: 0;
  opacity: 0;
}

/* ============================================
   TECH SPECS: JUMP NAVIGATION
   ============================================ */

.specs-jump-nav {
  position: sticky;
  top: 100px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0;
  margin-bottom: 24px;
  background: linear-gradient(to bottom, var(--nova-bg) 0%, var(--nova-bg) 80%, transparent 100%);
  z-index: 50;
}

.specs-jump-link {
  display: inline-block;
  padding: 8px 16px;
  background: var(--nova-surface-3);
  border: 1px solid var(--nova-border-1);
  border-radius: 999px;
  color: var(--nova-text-2);
  font-family: var(--nova-font-sans-strong);
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.specs-jump-link:hover,
.specs-jump-link.is-active {
  background: var(--nova-accent-surface);
  border-color: var(--nova-accent-border);
  color: var(--nova-text-strong);
}

@media (max-width: 768px) {
  .specs-jump-nav {
    top: 72px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    margin: 0 -16px 24px;
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .specs-jump-link {
    flex-shrink: 0;
  }
}

/* ============================================
   COMPARE: STICKY HEADERS
   ============================================ */

.compare-table-wrapper {
  position: relative;
}

@media (max-width: 768px) {
  .compare-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.compare-header-row {
  position: sticky;
  top: 80px;
  z-index: 40;
  background: var(--nova-bg);
}

@media (max-width: 768px) {
  .compare-header-row {
    top: 72px;
  }
}

@media (max-width: 768px) {
  /* Allow specs tables to scroll horizontally on phones */
  .spec-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .spec-table th,
  .spec-table td {
    font-size: 13px;
    padding: 12px 10px;
  }
}

.compare-header-row::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--nova-border-1);
}

/* ============================================
   COMPARE: HIGHLIGHT WINS
   ============================================ */

.compare-cell.is-winner {
  position: relative;
}

.compare-cell.is-winner::before {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.compare-cell.is-winner .compare-value {
  color: #22c55e;
}

/* ============================================
   FOOTNOTES SYSTEM
   ============================================ */

.footnote-ref {
  font-size: 0.75em;
  vertical-align: super;
  color: var(--nova-accent);
  text-decoration: none;
  margin-left: 2px;
}

.footnote-ref:hover {
  text-decoration: underline;
}

.footnotes-section {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footnotes-title {
  font-family: var(--nova-font-sans-strong);
  font-size: 14px;
  color: var(--nova-text-3);
  margin: 0 0 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footnotes-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footnotes-list li {
  font-family: var(--nova-font-sans);
  font-size: 12px;
  color: var(--nova-text-3);
  line-height: 1.6;
  margin-bottom: 12px;
  padding-left: 24px;
  position: relative;
}

.footnotes-list li::before {
  content: attr(data-footnote);
  position: absolute;
  left: 0;
  color: var(--nova-accent);
  font-weight: bold;
}

/* ============================================
   STAGGERED TEXT ANIMATION
   ============================================ */

.stagger-lines .line {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-lines.is-visible .line {
  opacity: 1;
  transform: translateY(0);
}

.stagger-lines.is-visible .line:nth-child(1) { transition-delay: 0s; }
.stagger-lines.is-visible .line:nth-child(2) { transition-delay: 0.1s; }
.stagger-lines.is-visible .line:nth-child(3) { transition-delay: 0.2s; }
.stagger-lines.is-visible .line:nth-child(4) { transition-delay: 0.3s; }
.stagger-lines.is-visible .line:nth-child(5) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .stagger-lines .line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   FEATURE SECTION STAGGER (Premium Pattern)
   Reveals feature sections with staggered children
   ============================================ */

.feature-content {
  --stagger-base: 0s;
}

.feature-content > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--nova-ease-out), transform 0.6s var(--nova-ease-out);
}

.feature-content.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.feature-content.is-visible > *:nth-child(1) { transition-delay: calc(var(--stagger-base) + 0s); }
.feature-content.is-visible > *:nth-child(2) { transition-delay: calc(var(--stagger-base) + 0.12s); }
.feature-content.is-visible > *:nth-child(3) { transition-delay: calc(var(--stagger-base) + 0.24s); }
.feature-content.is-visible > *:nth-child(4) { transition-delay: calc(var(--stagger-base) + 0.36s); }

/* Feature text children also stagger */
.feature-text > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--nova-ease-out), transform 0.5s var(--nova-ease-out);
}

.feature-content.is-visible .feature-text > * {
  opacity: 1;
  transform: translateY(0);
}

.feature-content.is-visible .feature-text > *:nth-child(1) { transition-delay: 0.1s; }
.feature-content.is-visible .feature-text > *:nth-child(2) { transition-delay: 0.2s; }
.feature-content.is-visible .feature-text > *:nth-child(3) { transition-delay: 0.3s; }
.feature-content.is-visible .feature-text > *:nth-child(4) { transition-delay: 0.4s; }
.feature-content.is-visible .feature-text > *:nth-child(5) { transition-delay: 0.5s; }

/* Feature visual entrance */
.feature-visual {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  transition: opacity 0.7s var(--nova-ease-out), 
              transform 0.7s var(--nova-ease-out),
              border-color var(--nova-dur-2) ease, 
              box-shadow var(--nova-dur-2) ease;
}

/* Visuals with images: always visible (no animation delay) */
.feature-visual.feature-visual--image {
  opacity: 1 !important;
  transform: none !important;
}

.feature-content.is-visible .feature-visual {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .feature-content > *,
  .feature-text > *,
  .feature-visual {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   MICRO-INTERACTIONS (Enhanced)
   ============================================ */

/* CTA Pulse Animation */
@keyframes nova-pulse {
  0%, 100% {
    box-shadow: 0 10px 24px rgba(9, 83, 199, 0.22);
  }
  50% {
    box-shadow: 0 10px 30px rgba(9, 83, 199, 0.35), 0 0 0 4px rgba(9, 83, 199, 0.15);
  }
}

.hero-cta-primary,
.sticky-buy-bar .nova-btn--primary {
  animation: nova-pulse 3s ease-in-out infinite;
  animation-delay: 2s;
}

.hero-cta-primary:hover,
.sticky-buy-bar .nova-btn--primary:hover {
  animation: none;
}

/* Focus ring enhancement */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--nova-accent);
  outline-offset: 3px;
}

/* Link underline animation */
.nova-link-animate {
  position: relative;
  text-decoration: none;
}

.nova-link-animate::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--nova-dur-2) var(--nova-ease-out);
}

.nova-link-animate:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Testimonial card hover */
.nova-testimonial:hover {
  transform: translateY(-4px);
  border-color: var(--nova-border-2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

/* FAQ item hover state */
.nova-faq__item:hover .nova-faq__trigger {
  color: var(--nova-text-strong);
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta-primary,
  .sticky-buy-bar .nova-btn--primary {
    animation: none;
  }
  .nova-link-animate::after {
    transition: none;
  }
  .nova-testimonial:hover,
  .nova-faq__item:hover .nova-faq__trigger {
    transform: none;
    transition: none;
  }
}

/* ============================================
   COMMAND PALETTE (Cmd+K Search)
   ============================================ */

.nova-command {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--nova-dur-2) var(--nova-ease-standard), visibility var(--nova-dur-2);
}

.nova-command.is-open {
  opacity: 1;
  visibility: visible;
}

.nova-command__backdrop {
  position: absolute;
  inset: 0;
  background: var(--nova-overlay-backdrop);
}

.nova-command__dialog {
  position: relative;
  width: min(560px, 90vw);
  max-height: 400px;
  background: var(--nova-glass-bg);
  border: 1px solid var(--nova-border-1);
  border-radius: var(--nova-radius-lg);
  box-shadow: var(--nova-shadow-2), var(--nova-inset-hairline);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.96);
  transition: transform var(--nova-dur-2) var(--nova-ease-out);
}

.nova-command.is-open .nova-command__dialog {
  transform: scale(1);
}

.nova-command__header {
  display: flex;
  align-items: center;
  padding: var(--nova-space-4) var(--nova-space-5);
  border-bottom: 1px solid var(--nova-border-1);
  gap: var(--nova-space-3);
}

.nova-command__icon {
  width: 18px;
  height: 18px;
  color: var(--nova-text-3);
  flex-shrink: 0;
}

.nova-command__input {
  flex-grow: 1;
  background: transparent;
  border: none;
  font-family: var(--nova-font-sans);
  font-size: 16px;
  color: var(--nova-text-1);
  outline: none;
}

.nova-command__input::placeholder {
  color: var(--nova-text-4);
}

.nova-command__shortcut {
  font-family: var(--nova-font-mono);
  font-size: 11px;
  color: var(--nova-text-4);
  background: var(--nova-surface-2);
  padding: 3px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.nova-command__results {
  overflow-y: auto;
  padding: var(--nova-space-2) 0;
  flex-grow: 1;
}

.nova-command__group {
  padding: var(--nova-space-2) var(--nova-space-5);
}

.nova-command__group-title {
  font-family: var(--nova-font-sans);
  font-size: 11px;
  color: var(--nova-text-4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--nova-space-2);
}

.nova-command__item {
  display: flex;
  align-items: center;
  gap: var(--nova-space-3);
  padding: var(--nova-space-3) var(--nova-space-4);
  border-radius: var(--nova-radius-sm);
  cursor: pointer;
  transition: background var(--nova-dur-1) ease;
  text-decoration: none;
}

.nova-command__item:hover,
.nova-command__item.is-active {
  background: var(--nova-surface-2);
}

.nova-command__item-icon {
  width: 16px;
  height: 16px;
  color: var(--nova-text-3);
  flex-shrink: 0;
}

.nova-command__item-text {
  flex-grow: 1;
  font-family: var(--nova-font-sans);
  font-size: 14px;
  color: var(--nova-text-1);
}

.nova-command__item-hint {
  font-family: var(--nova-font-sans);
  font-size: 12px;
  color: var(--nova-text-4);
}

.nova-command__empty {
  text-align: center;
  padding: var(--nova-space-8);
  color: var(--nova-text-3);
  font-family: var(--nova-font-sans);
  font-size: 14px;
}

.nova-command__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nova-space-3) var(--nova-space-5);
  border-top: 1px solid var(--nova-border-1);
  font-family: var(--nova-font-sans);
  font-size: 12px;
  color: var(--nova-text-4);
}

.nova-command__footer kbd {
  font-family: var(--nova-font-mono);
  background: var(--nova-surface-2);
  padding: 2px 5px;
  border-radius: 3px;
  margin: 0 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nova-command,
  .nova-command__dialog {
    transition: none;
  }
}

/* ============================================
   SHEET / DRAWER MODAL (Premium UI Pattern)
   ============================================ */

.nova-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: var(--nova-overlay-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--nova-dur-3) var(--nova-ease-standard), visibility var(--nova-dur-3);
}

.nova-sheet-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.nova-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 90vw);
  z-index: 8001;
  background: var(--nova-glass-bg);
  border-left: 1px solid var(--nova-border-1);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform var(--nova-dur-3) var(--nova-ease-out);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nova-sheet.is-open {
  transform: translateX(0);
}

.nova-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nova-space-5) var(--nova-space-6);
  border-bottom: 1px solid var(--nova-border-1);
  flex-shrink: 0;
}

.nova-sheet__title {
  font-family: var(--nova-font-sans-strong);
  font-size: 16px;
  color: var(--nova-text-1);
  margin: 0;
}

.nova-sheet__close {
  background: transparent;
  border: none;
  padding: var(--nova-space-2);
  cursor: pointer;
  color: var(--nova-text-3);
  border-radius: var(--nova-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--nova-dur-1) ease, background var(--nova-dur-1) ease;
}

.nova-sheet__close:hover {
  color: var(--nova-text-1);
  background: var(--nova-surface-2);
}

.nova-sheet__close:focus-visible {
  outline: 2px solid var(--nova-accent);
  outline-offset: 2px;
}

.nova-sheet__close svg {
  width: 20px;
  height: 20px;
}

.nova-sheet__body {
  flex-grow: 1;
  overflow-y: auto;
  padding: var(--nova-space-6);
}

.nova-sheet__footer {
  padding: var(--nova-space-5) var(--nova-space-6);
  border-top: 1px solid var(--nova-border-1);
  flex-shrink: 0;
}

/* Cart Preview Specific */
.nova-cart-item {
  display: flex;
  gap: var(--nova-space-4);
  padding: var(--nova-space-4) 0;
  border-bottom: 1px solid var(--nova-border-1);
}

.nova-cart-item:last-child {
  border-bottom: none;
}

.nova-cart-item__image {
  width: 64px;
  height: 64px;
  background: var(--nova-surface-2);
  border-radius: var(--nova-radius-sm);
  flex-shrink: 0;
}

.nova-cart-item__details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nova-cart-item__name {
  font-family: var(--nova-font-sans-strong);
  font-size: 14px;
  color: var(--nova-text-1);
}

.nova-cart-item__config {
  font-family: var(--nova-font-sans);
  font-size: 13px;
  color: var(--nova-text-3);
}

.nova-cart-item__price {
  font-family: var(--nova-font-mono);
  font-size: 14px;
  color: var(--nova-text-2);
}

.nova-cart-empty {
  text-align: center;
  padding: var(--nova-space-9) var(--nova-space-6);
  color: var(--nova-text-3);
}

.nova-cart-empty__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--nova-space-4);
  color: var(--nova-text-4);
}

@media (prefers-reduced-motion: reduce) {
  .nova-sheet,
  .nova-sheet-backdrop {
    transition: none;
  }
}

/* ============================================
   SOCIAL PROOF / TESTIMONIALS
   ============================================ */

.nova-social-proof {
  padding: var(--nova-space-10) 0;
  background: var(--nova-surface-1);
}

.nova-social-proof__header {
  text-align: center;
  margin-bottom: var(--nova-space-9);
}

.nova-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--nova-space-6);
  margin-bottom: var(--nova-space-9);
}

.nova-testimonial {
  background: var(--nova-surface-2);
  border: 1px solid var(--nova-border-1);
  border-radius: var(--nova-radius-lg);
  padding: var(--nova-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--nova-space-5);
}

.nova-testimonial__quote {
  font-family: var(--nova-font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--nova-text-2);
  flex-grow: 1;
}

.nova-testimonial__quote::before {
  content: '"';
  font-size: 24px;
  color: var(--nova-accent);
  font-weight: 600;
}

.nova-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--nova-space-3);
}

.nova-testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--nova-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nova-font-sans-strong);
  font-size: 16px;
  color: var(--nova-text-3);
}

.nova-testimonial__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nova-testimonial__name {
  font-family: var(--nova-font-sans-strong);
  font-size: 14px;
  color: var(--nova-text-1);
}

.nova-testimonial__role {
  font-family: var(--nova-font-sans);
  font-size: 13px;
  color: var(--nova-text-3);
}

/* Logo carousel */
.nova-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--nova-space-8);
  opacity: 0.6;
}

.nova-logo {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.5;
  transition: opacity var(--nova-dur-2) ease;
}

.nova-logo:hover {
  opacity: 0.8;
}

.nova-logos__title {
  width: 100%;
  text-align: center;
  margin-bottom: var(--nova-space-5);
  font-family: var(--nova-font-sans);
  font-size: 13px;
  color: var(--nova-text-4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .nova-testimonials {
    grid-template-columns: 1fr;
  }
  .nova-logos {
    gap: var(--nova-space-6);
  }
  .nova-logo {
    height: 22px;
  }
}

/* ============================================
   NUMBER COUNTER ANIMATION
   ============================================ */

[data-counter] {
  font-variant-numeric: tabular-nums;
}

[data-counter].is-counted {
  /* Optional: add subtle effect when done */
}

.nova-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--nova-space-7);
  padding: var(--nova-space-9) 0;
}

.nova-stat {
  text-align: center;
}

.nova-stat__value {
  font-family: var(--nova-font-sans-strong);
  font-size: clamp(40px, 8vw, 64px);
  font-weight: 600;
  line-height: 1;
  color: var(--nova-text-strong);
  margin-bottom: var(--nova-space-3);
}

.nova-stat__label {
  font-family: var(--nova-font-sans);
  font-size: 14px;
  color: var(--nova-text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .nova-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--nova-space-6);
  }
  .nova-stat__value {
    font-size: 36px;
  }
}

/* ============================================
   FAQ ACCORDION (Premium UI Pattern)
   ============================================ */

.nova-faq {
  max-width: 800px;
  margin: 0 auto;
}

.nova-faq__item {
  border-bottom: 1px solid var(--nova-border-1);
}

.nova-faq__item:first-child {
  border-top: 1px solid var(--nova-border-1);
}

.nova-faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nova-space-6) 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--nova-text-1);
  font-family: var(--nova-font-sans-strong);
  font-size: 17px;
  line-height: 1.4;
  transition: color var(--nova-dur-2) ease;
}

.nova-faq__trigger:hover {
  color: var(--nova-text-strong);
}

.nova-faq__trigger:focus-visible {
  outline: 2px solid var(--nova-accent);
  outline-offset: 2px;
}

.nova-faq__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: var(--nova-space-4);
  color: var(--nova-text-3);
  transition: transform var(--nova-dur-3) var(--nova-ease-out), color var(--nova-dur-2) ease;
}

.nova-faq__item.is-open .nova-faq__icon {
  transform: rotate(45deg);
  color: var(--nova-accent);
}

.nova-faq__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--nova-dur-3) var(--nova-ease-out);
}

.nova-faq__item.is-open .nova-faq__content {
  grid-template-rows: 1fr;
}

.nova-faq__inner {
  overflow: hidden;
}

.nova-faq__answer {
  padding-bottom: var(--nova-space-6);
  color: var(--nova-text-2);
  font-family: var(--nova-font-sans);
  font-size: 15px;
  line-height: 1.7;
}

.nova-faq__answer p {
  margin: 0 0 var(--nova-space-4);
}

.nova-faq__answer p:last-child {
  margin-bottom: 0;
}

.nova-faq__answer a {
  color: var(--nova-accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nova-faq__answer a:hover {
  color: var(--nova-accent);
}

@media (max-width: 768px) {
  .nova-faq__trigger {
    font-size: 15px;
    padding: var(--nova-space-5) 0;
  }
  .nova-faq__answer {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nova-faq__content,
  .nova-faq__icon {
    transition: none;
  }
}

/* ============================================
   IN THE BOX SECTION
   ============================================ */

.in-the-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  padding: 40px 0;
}

.in-the-box-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.in-the-box-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.in-the-box-icon svg {
  width: 24px;
  height: 24px;
  color: rgba(238, 238, 238, 0.7);
}

.in-the-box-text {
  font-family: Test Soehne Buch, Arial, sans-serif;
  font-size: 14px;
  color: rgba(238, 238, 238, 0.8);
  line-height: 1.4;
}

/* ============================================
   DARK MODE TWEAKS (for consistency)
   ============================================ */

/* Ensure consistent dark background */
html {
  background-color: var(--nova-bg);
}

body {
  background-color: var(--nova-bg);
}

/* ============================================
   TOP NAV ICON BUTTON (Search)
   ============================================ */

.nova-nav-icon-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   BREADCRUMBS
   ============================================ */

.nova-breadcrumbs {
  max-width: 1100px;
  margin: 0 auto;
  padding: 104px 24px 0;
}

.nova-breadcrumbs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--nova-text-3);
  font-family: var(--nova-font-sans-strong);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.nova-breadcrumbs-list a {
  color: var(--nova-text-2);
  text-decoration: none;
}

.nova-breadcrumbs-list a:hover {
  color: var(--nova-text-strong);
  text-decoration: underline;
}

/* ============================================
   SEARCH OVERLAY (Placeholder)
   ============================================ */

.nova-overlay-open,
.nova-overlay-open body {
  overflow: hidden !important;
}

.nova-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}

.nova-overlay.is-open {
  display: block;
}

.nova-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: var(--nova-overlay-backdrop);
}

.nova-overlay-panel {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 32px));
  background: var(--nova-glass-bg);
  border: 1px solid var(--nova-border-2);
  border-radius: var(--nova-radius-xl);
  box-shadow: var(--nova-shadow-2);
  padding: 18px;
}

.nova-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.nova-overlay-title {
  color: var(--nova-text-1);
  font-family: var(--nova-font-sans-strong);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.nova-overlay-close {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--nova-border-2);
  color: var(--nova-text-1);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: var(--nova-font-sans-strong);
  font-size: 12px;
}

.nova-overlay-close:hover {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--nova-text-strong);
}

.nova-search-input {
  width: 100%;
  padding: 14px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--nova-border-strong);
  border-radius: var(--nova-radius-md);
  color: var(--nova-text-1);
  font-family: var(--nova-font-sans-strong);
  font-size: 15px;
}

.nova-search-input:focus {
  outline: none;
  border-color: var(--nova-accent);
}

.nova-overlay-hint {
  margin-top: 12px;
  color: var(--nova-text-3);
  font-family: var(--nova-font-sans);
  font-size: 14px;
  line-height: 1.6;
}

/* Hero: typography + film CTA */
.section-slide1 .heading {
  font-size: clamp(56px, 8vw, 112px);
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.section-slide1 .heading-2 {
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.3;
}

.hero-cta-film {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.18);
}

.nova-film-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  background: #000;
}

.nova-film-note {
  margin-top: 12px;
  color: rgba(238, 238, 238, 0.55);
  font-family: Test Soehne Buch, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.6;
}

/* ============================================
   COMPARE: TOOLBAR + STICKY HEADER CELLS
   ============================================ */

.compare-tools {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 24px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.compare-tool-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--nova-border-strong);
  background: var(--nova-surface-2);
  color: var(--nova-text-1);
  border-radius: 999px;
  padding: 10px 14px;
  font-family: var(--nova-font-sans-strong);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.compare-tool-btn:hover {
  background: var(--nova-surface-3);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--nova-text-strong);
}

.compare-tool-btn.is-active {
  background: var(--nova-accent-surface);
  border-color: var(--nova-accent-border);
  color: var(--nova-text-strong);
}

/* Sticky header: compare page uses display: contents; make each header cell sticky */
.compare-header-cell {
  position: sticky;
  top: 92px;
  z-index: 60;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.compare-header-cell:first-child {
  z-index: 65;
}

/* ============================================
   EXPLORE: 360 VIEWER + GALLERY RAIL
   ============================================ */

.nova-360 {
  position: relative;
  margin-top: 24px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Allow vertical scrolling while handling horizontal drag for 360 rotation */
  touch-action: pan-y;
}

.nova-360-img {
  width: 100%;
  height: auto;
  display: block;
}

.nova-360-hint {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(238, 238, 238, 0.9);
  font-family: Test Soehne Kraftig, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  pointer-events: none;
}

.nova-360-fallback {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(238, 238, 238, 0.7);
  font-family: Test Soehne Buch, Arial, sans-serif;
  font-size: 12px;
  pointer-events: none;
  display: none;
}

.nova-360.is-unavailable .nova-360-hint {
  display: none;
}
.nova-360.is-unavailable .nova-360-fallback {
  display: block;
}

.nova-gallery-rail {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.nova-gallery-item {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(30, 30, 30, 0.95) 0%, rgba(15, 15, 15, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  aspect-ratio: 4 / 3;
  position: relative;
}

.nova-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 12px;
}

/* Premium stacked-edge treatment */
.nova-gallery-rail--stacked .nova-gallery-item {
  position: relative;
  transition: transform 0.3s var(--nova-ease-out), box-shadow 0.3s var(--nova-ease-out);
}

.nova-gallery-rail--stacked .nova-gallery-item::before,
.nova-gallery-rail--stacked .nova-gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}

/* Shadow plate behind (offset down-right) */
.nova-gallery-rail--stacked .nova-gallery-item::before {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transform: translate(4px, 4px);
}

/* Second shadow plate (offset more) */
.nova-gallery-rail--stacked .nova-gallery-item::after {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.02);
  transform: translate(8px, 8px);
}

/* Inner highlight edge */
.nova-gallery-rail--stacked .nova-gallery-item {
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 20px rgba(0, 0, 0, 0.3);
}

.nova-gallery-rail--stacked .nova-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
  .nova-gallery-rail {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .nova-gallery-rail--stacked .nova-gallery-item::before,
  .nova-gallery-rail--stacked .nova-gallery-item::after {
    display: none;
  }
}

/* ============================================
   COOKIE CONSENT (minimal)
   ============================================ */

.nova-cookie {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2500;
  display: none;
}

.nova-cookie.is-visible {
  display: block;
}

.nova-cookie-inner {
  max-width: 980px;
  margin: 0 auto;
  background: var(--nova-glass-bg);
  border: 1px solid var(--nova-border-2);
  border-radius: 16px;
  padding: 16px 16px;
  box-shadow: var(--nova-shadow-2);
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.nova-cookie-text {
  color: var(--nova-text-2);
  font-family: var(--nova-font-sans);
  font-size: 14px;
  line-height: 1.5;
}

.nova-cookie-text a {
  color: var(--nova-accent);
  text-decoration: none;
}
.nova-cookie-text a:hover { text-decoration: underline; }

.nova-cookie-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

.nova-cookie-btn {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--nova-font-sans-strong);
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--nova-border-strong);
  background: rgba(255, 255, 255, 0.06);
  color: var(--nova-text-1);
}

.nova-cookie-btn-primary {
  background: var(--nova-accent);
  border-color: var(--nova-accent);
  color: var(--nova-text-strong);
}

@media (max-width: 600px) {
  .nova-cookie-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .nova-cookie-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  /* Hero text block should not sit too low on phones */
  .section-slide1 .container {
    margin-top: clamp(240px, 36vh, 420px) !important;
  }

  .nova-breadcrumbs {
    padding-top: 72px;
  }
  .nova-overlay-panel {
    top: 72px;
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Selection color */
::selection {
  background: var(--nova-accent-selection);
  color: var(--nova-text-strong);
}

/* ============================================
   STUDIO PRO — MOBILE OVERRIDES (AUTHORITATIVE)
   Anti-drift: keep this block at EOF.
   ============================================ */

@media (max-width: 768px) {
  /* HIDE the floating subnav pill on mobile to clean up UI */
  .navbar-wrapper {
    display: none !important;
  }

  /* Ensure Sticky Buy Bar is positioned correctly at bottom */
  .sticky-buy-bar.is-visible {
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    z-index: 9000 !important;
  }

  /* Back to top offset */
  .back-to-top {
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 80px) !important;
  }

  /* Body padding adjustment since subnav is gone */
  body {
    padding-bottom: 0 !important; /* Let sticky bar handle overlay if needed */
  }
}

@media (max-width: 768px) {
  /* RTL visual correctness (Arabic pages). */
  html[dir="rtl"] .compare-header-cell,
  html[dir="rtl"] .compare-cell {
    text-align: right !important;
  }

  html[dir="rtl"] .compare-cell:first-child {
    text-align: right !important;
  }

  html[dir="rtl"] .spec-table th,
  html[dir="rtl"] .spec-table td {
    text-align: right !important;
  }

  html[dir="rtl"] .nova-breadcrumbs-list {
    justify-content: flex-start;
  }
}


/* ============================================
   MOBILE CONFIGURATOR FIXES (Visual Bleed)
   ============================================ */
@media (max-width: 768px) {
  /* Fix Container Padding & Bleed */
  .buy-container { 
    padding: 100px 20px 120px !important; 
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Fix Card Width */
  .configurator { 
    padding: 24px 20px !important; 
    border-radius: 24px !important; 
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Allow Progress Bar to Scroll */
  .config-progress { 
    margin-bottom: 24px !important;
    max-width: 100% !important;
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 12px !important; 
  }

  /* Fix Font Sizes */
  .config-title { font-size: 28px !important; line-height: 1.2 !important; }
  
  /* Force 1-Column Options */
  .config-options { grid-template-columns: 1fr !important; }
  
  /* Disable Sticky Preview on Mobile */
  .summary-card { 
    padding: 24px !important; 
    border-radius: 24px !important; 
    position: static !important;
  }
  .config-hero-preview { 
    position: static !important; 
    top: auto !important; 
    margin-bottom: 32px !important;
  }
}

/* ============================================
   MOBILE OVERVIEW SPACING FIXES
   ============================================ */
@media (max-width: 768px) {
  /* Fix Hero Spacing */
  .section-slide1 {
    min-height: 100svh !important;
    padding-bottom: 100px !important;
  }
  .section-slide1 .container {
    margin-top: 340px !important; /* Ensure text clears the image */
  }
  
  /* Fix Explore 3D Viewer Spacing */
  .section-slidesps1x#explore {
    padding-bottom: 140px !important; /* Clear the sticky buy bar */
  }
}

@media (max-width: 768px) {
  /* Fix Logo Container Width */
  .navbar-logo-left-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .navbar-logo-left {
    width: 100% !important;
  }
}