:root {
    --purple-rgb: 76 1 156;
    --purple-light-rgb: 101 35 177;
    --purple-soft-rgb: 189 156 247;
    --purple: #4c019c;
    --purple-light: #6523b1;
    --purple-soft: #bd9cf7;
    --site-bg: #f7f2ff;
    --site-bg-elevated: #efe6ff;
    --site-text: #201136;
    --site-text-muted: #6b5a8c;
    --site-surface: #ffffff;
    --site-border: rgb(76 1 156 / 0.12);
    --site-glow: rgb(76 1 156 / 0.24);
    --site-overlay: rgb(247 242 255 / 0.9);
    --site-mesh-intensity: 0.08;
    --mobile-menu-bg: rgb(240 237 230 / 0.98);
    --mobile-menu-bg-dark: rgb(10 10 15 / 0.98);
    --site-bg-dark: #11071e;
    --site-bg-dark-elevated: #1b1031;
    --site-text-dark: #f7f3ff;
    --site-text-dark-muted: #c8bae7;
    --site-surface-dark: #1d1233;
    --site-border-dark: rgb(189 156 247 / 0.16);
    --site-glow-dark: rgb(189 156 247 / 0.28);
    --site-overlay-dark: rgb(17 7 30 / 0.9);
    --site-mesh-intensity-dark: 0.16;
    --purple-dark: #bd9cf7;
    --purple-light-dark: #6523b1;
    --purple-soft-dark: #4c019c;
    --gradient-main: linear-gradient(135deg, var(--purple) 0%, var(--purple-light) 72%, var(--purple-soft) 100%);
    --gradient-main-dark: linear-gradient(135deg, var(--purple-soft) 0%, var(--purple-light) 58%, var(--purple) 100%);
    --gradient-main-active: var(--gradient-main);
    --gradient-surface: linear-gradient(180deg, rgb(255 255 255 / 0.96) 0%, rgb(var(--purple-soft-rgb) / 0.08) 100%);
    --gradient-surface-dark: linear-gradient(180deg, rgb(var(--purple-light-rgb) / 0.16) 0%, rgb(17 7 30 / 0.96) 100%);
    --gradient-section-light: linear-gradient(135deg, var(--site-bg) 0%, var(--site-bg-elevated) 58%, rgb(var(--purple-rgb) / 0.22) 100%);
    --gradient-section-dark: linear-gradient(135deg, var(--site-bg-dark) 0%, var(--site-surface-dark) 68%, rgb(var(--purple-rgb) / 0.84) 100%);
    --gradient-section-emphasis: var(--gradient-section-light);
    --gradient-principles-spot-light: linear-gradient(145deg, rgb(16 8 29 / 0.96), rgb(43 25 71 / 0.96));
    --gradient-principles-spot-dark: linear-gradient(145deg, rgb(252 248 255 / 0.98), rgb(235 223 252 / 0.98));
    --gradient-principles-card-light: linear-gradient(145deg, rgb(17 9 30 / 0.9), rgb(48 28 78 / 0.86));
    --gradient-principles-card-dark: linear-gradient(145deg, rgb(252 248 255 / 0.94), rgb(237 227 252 / 0.9));
    --principles-text-light: #f7f3ff;
    --principles-text-dark: #201136;
    --hero-mesh-light: radial-gradient(ellipse 80% 60% at 20% 30%, rgb(var(--purple-rgb) / 0.08) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 70%, rgb(var(--purple-light-rgb) / 0.07) 0%, rgb(var(--purple-soft-rgb) / 0.07) 38%, transparent 68%);
    --hero-mesh-dark: radial-gradient(ellipse 80% 60% at 20% 30%, rgb(var(--purple-rgb) / 0.16) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 70%, rgb(var(--purple-soft-rgb) / 0.12) 0%, rgb(var(--purple-light-rgb) / 0.1) 38%, transparent 68%);
    --product-glow-light: radial-gradient(ellipse at center, rgb(var(--purple-rgb) / 0.08) 0%, rgb(var(--purple-soft-rgb) / 0.05) 34%, transparent 72%);
    --product-glow-dark: radial-gradient(ellipse at center, rgb(var(--purple-rgb) / 0.16) 0%, rgb(var(--purple-soft-rgb) / 0.08) 38%, transparent 74%);
    --gradient-grid-light: linear-gradient(rgb(var(--purple-rgb) / 0.45) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--purple-rgb) / 0.45) 1px, transparent 1px);
    --gradient-grid-dark: linear-gradient(rgb(var(--purple-soft-rgb) / 0.45) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--purple-soft-rgb) / 0.45) 1px, transparent 1px);
    --gradient-grid: var(--gradient-grid-light);
    --gradient-image-overlay: linear-gradient(to top, rgb(0 0 0 / 0.60), transparent);
    --gradient-glass-highlight: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
    --gradient-range-fill: linear-gradient(90deg, var(--purple), var(--purple-light));
    --gradient-divider-line: linear-gradient(90deg, transparent, var(--site-border), var(--site-glow), transparent);
    --font-body: 'Onest', sans-serif;
    --font-display: 'Unbounded', sans-serif;
    --font-scale: 100%;
    --purple-glow: rgb(var(--purple-rgb) / 0.16);
    --grain-opacity: 0.025;
  }

  * { box-sizing: border-box; }

  body {
    transition: background-color 0.4s ease, color 0.4s ease;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--font-scale);
    font-family: var(--font-body);
    text-rendering: optimizeLegibility;
  }

  /* Grain texture — lightweight CSS-only approach */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAElBMVEUAAAAAAAAAAAAAAAAAAAAAAADgKxmiAAAABnRSTlMAESIzRFVm2a5nAAAAcklEQVQ4y9WSMQ6AMAxDHRj4/5eZqRILqWAnkC5t4tiJIYSI1YzVjK0ZWzO2ZmzN2JqxNWNrxtaMrRlbM7ZmbM3YmrE1Y2vG1oytGVsz9hsZ+42M/UbGfiNjv5Gx38jYb2TsNzL2Gxn7jYz9Rm7GBgzbJruSMAAAAABJRU5ErkJggg==");
    opacity: 0.03;
    pointer-events: none;
    z-index: 9999;
    will-change: opacity;
  }

@media (max-width: 768px), (prefers-reduced-motion: reduce) {
body::after { opacity: 0.01; }
}

  .font-display { font-family: var(--font-display); }
  .font-body { font-family: var(--font-body); }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 2px; }
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    iframe.sketchfab-embed { width: 100%; height: 100%; border: none; pointer-events: all; }

  /* Selection */
  ::selection { background: rgb(var(--purple-rgb) / 0.22); color: inherit; }

  /* Nav glass */
  .nav-glass {
    background: var(--site-overlay);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
  .dark .nav-glass {
    background: var(--site-overlay-dark);
  }

  .dark {
    --gradient-section-emphasis: var(--gradient-section-dark);
  }

  /* Buttons */
  @keyframes smoothFadeIn {
    0% { opacity: 0; transform: translateY(8px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -12px, 0); }
  }
.animate-smooth-in {
    animation: smoothFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Enhanced Button Hover Glow */
.btn-primary {
    background: var(--gradient-main-active);
    box-shadow: 0 10px 30px var(--site-glow);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-glass-highlight);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover {
    box-shadow: 0 14px 38px var(--site-glow), 0 0 0 1px var(--site-border);
    transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); }
  /* Badge */
  .badge-purple {
    background: rgb(var(--purple-rgb) / 0.08);
    border: 1px solid rgb(var(--purple-rgb) / 0.16);
  }

  /* Card hover */
  .card-hover {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    contain: layout style paint;
  }
  .card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 0 0 1px var(--site-border);
  }
  .dark .card-hover:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.42), 0 0 0 1px var(--site-border-dark);
  }

  /* Product image bg */
  .product-img-bg {
    background: var(--product-glow-light), rgba(247, 242, 255, 0.5);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .dark .product-img-bg {
    background: var(--product-glow-dark), rgba(29, 18, 51, 0.5);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .dark {
    --gradient-grid: var(--gradient-grid-dark);
    --gradient-main-active: var(--gradient-main-dark);
  }

  .hero-mesh {
    background: var(--hero-mesh-light);
  }
  .dark .hero-mesh {
    background: var(--hero-mesh-dark);
  }

  .glow-purple { box-shadow: 0 0 40px rgb(var(--purple-rgb) / 0.18), 0 0 80px rgb(var(--purple-soft-rgb) / 0.14); }
  .glow-purple-sm { box-shadow: 0 0 20px rgb(var(--purple-rgb) / 0.22); }

  .stat-card {
    background: var(--gradient-surface);
    border: 1px solid var(--site-border);
    contain: layout style;
  }
  .dark .stat-card {
    background: var(--gradient-surface-dark);
    border: 1px solid var(--site-border-dark);
  }

  .principles-frame {
    border: 1px solid transparent;
    background:
      var(--gradient-principles-spot-light) padding-box,
      var(--gradient-main-active) border-box;
    color: var(--principles-text-light);
  }
  .dark .principles-frame {
    background:
      var(--gradient-principles-spot-dark) padding-box,
      var(--gradient-main-active) border-box;
    color: var(--principles-text-dark);
  }
  .principle-line {
    position: relative;
    padding-left: 1.5rem;
    padding: 1.1rem 1rem 1.1rem 1.5rem;
    border-radius: 1rem;
    border: none;
    background: transparent;
    color: var(--principles-text-light);
  }
  .principle-line::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 1rem;
    bottom: 1rem;
    width: 2px;
    background: rgb(255 255 255 / 0.45);
    border-radius: 1px;
  }
  .dark .principle-line {
    background: transparent;
    color: var(--principles-text-dark);
  }
  .dark .principle-line::before {
    background: rgb(32 17 54 / 0.35);
  }

  .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
  }

  .footer-gradient {
    background: var(--site-overlay);
  }

  .faq-answer {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
  }
  .faq-answer.open {
    max-height: 500px;
    opacity: 1;
  }

  /* Filter chip */
  .filter-chip { cursor: pointer; user-select: none; }
  .filter-chip input { display: none; }
  .chip-label {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
    border: 1.5px solid var(--site-border);
    background: color-mix(in srgb, var(--site-surface) 78%, transparent);
    color: var(--site-text-muted);
    cursor: pointer;
    transition: all 0.2s;
  }
  .dark .chip-label {
    background: color-mix(in srgb, var(--site-surface-dark) 32%, transparent);
    border-color: var(--site-border-dark);
    color: var(--site-text-dark-muted);
  }
  .chip-label:hover { border-color: var(--purple); color: var(--purple); }
  .filter-chip input:checked + .chip-label {
    background: var(--purple) !important;
    color: var(--site-surface) !important;
    border-color: var(--purple) !important;
    box-shadow: 0 6px 18px var(--site-glow);
  }
  .chip-label.disabled { opacity: 0.25; cursor: not-allowed; pointer-events: none; }

  /* Range slider */
  .range-track { position: relative; height: 3px; border-radius: 2px; background: var(--site-border); }
  .dark .range-track { background: var(--site-border-dark); }
  .range-fill { position: absolute; height: 100%; border-radius: 2px; background: var(--gradient-range-fill); pointer-events: none; }
  input.range-thumb { -webkit-appearance: none; appearance: none; position: absolute; width: 100%; height: 3px; background: transparent; outline: none; pointer-events: none; top: 0; left: 0; margin: 0; }
  input.range-thumb::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--purple); cursor: pointer; border: 2px solid var(--site-surface); box-shadow: 0 0 0 2px var(--purple); pointer-events: all; transition: transform 0.15s; }
  input.range-thumb::-webkit-slider-thumb:hover { transform: scale(1.2); }
  input.range-thumb::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--purple); cursor: pointer; border: 2px solid var(--site-surface); pointer-events: all; }

  /* BMS toggle */
  .bms-toggle { display: flex; background: color-mix(in srgb, var(--site-bg-elevated) 44%, transparent); border-radius: 999px; padding: 2px; border: 1px solid var(--site-border); }
  .dark .bms-toggle { background: color-mix(in srgb, var(--site-bg-dark-elevated) 52%, transparent); border-color: var(--site-border-dark); }
  .bms-btn { flex: 1; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-align: center; cursor: pointer; transition: all 0.2s; color: var(--site-text-muted); white-space: nowrap; }
  .dark .bms-btn { color: var(--site-text-dark-muted); }
  .bms-btn.active { background: var(--purple); color: var(--site-surface); box-shadow: 0 6px 16px var(--site-glow); }

  /* Filter panel animation */
  .filter-panel-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.4,0,0.2,1); }
  .filter-panel-body.open { grid-template-rows: 1fr; }
  .filter-panel-inner { overflow: hidden; min-height: 0; }

  /* Active filter tag */
  .active-tag { animation: tagIn 0.2s ease; }
  @keyframes tagIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

  /* Mobile menu */
  .mobile-menu { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
  .mobile-menu-bg { background: rgb(240 237 230 / 0.98); background: var(--mobile-menu-bg); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
  .dark .mobile-menu-bg { background: rgb(10 10 15 / 0.98); background: var(--mobile-menu-bg-dark); }
  .menu-toggle {
    color: var(--site-text);
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: color 0.25s ease;
  }
  .menu-toggle:hover {
    color: var(--purple);
  }
  .menu-toggle__line { background: currentColor; }
  .dark .menu-toggle {
    color: var(--site-text-dark);
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
  .dark .menu-toggle:hover {
    color: var(--purple-soft);
  }

  /* Spec table */
  .spec-row { background: var(--site-surface); }
  .spec-row:nth-child(even) { background: color-mix(in srgb, var(--site-bg-elevated) 44%, transparent); }
  .dark .spec-row { background: var(--site-surface-dark); }
  .dark .spec-row:nth-child(even) { background: color-mix(in srgb, var(--site-bg-dark-elevated) 58%, transparent); }

  /* Accessibility */
  .accessibility-mode { filter: grayscale(100%) contrast(120%); font-size: 110%; }
  .accessibility-mode * { transition: none !important; animation: none !important; text-shadow: none !important; box-shadow: none !important; letter-spacing: 0.05em !important; }

  /* Footer gradient */
  .footer-line { height: 1px; background: var(--gradient-divider-line); }

  /* Section divider */
  .section-divider { height: 1px; background: var(--gradient-divider-line); }

  /* Input number cleanup */
  input[type=number] { -moz-appearance: textfield; }
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  /* Custom order modal scroll */
  .modal-scroll { scrollbar-width: thin; scrollbar-color: var(--purple) transparent; }
  .modal-scroll::-webkit-scrollbar { width: 3px; }
  .modal-scroll::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 2px; }

  html { scroll-behavior: smooth; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--purple) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--site-glow);
  border-radius: 6px;
}
.dark :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  box-shadow: 0 0 0 4px var(--site-glow-dark);
}


  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }


.site-theme {
  background-color: var(--site-bg);
  color: var(--site-text);
  font-family: var(--font-body);
}

.dark .site-theme {
  background-color: var(--site-bg-dark);
  color: var(--site-text-dark);
}

.site-high-contrast {
  filter: contrast(130%);
}

.site-reduce-motion *,
.site-reduce-motion *::before,
.site-reduce-motion *::after {
  animation: none !important;
  transition-duration: 0.01ms !important;
}

/* Mobile fixes - prevent horizontal scroll */
html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

#root {
  overflow-x: hidden;
  width: 100%;
}

@media (max-width: 767px) {
  html, body, #root {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative;
  }

  body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Fix elements overflowing viewport */
  * {
    max-width: 100%;
  }

  img, video, iframe, svg {
    max-width: 100%;
    height: auto;
  }

  /* Prevent fixed elements from causing scroll */
  .fixed {
    max-width: 100vw;
  }

  /* Mobile menu improvements */
  .mobile-menu {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .fixed.mobile-menu {
    justify-content: flex-start;
    padding-top: 7rem;
    padding-bottom: 6rem;
  }

  /* Prevent long words from overflowing */
  p, h1, h2, h3, h4, h5, h6, span, a, li {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Enable soft hyphenation only in long-form copy blocks */
  .longform-copy,
  .longform-copy p,
  .longform-copy li,
  .hyphenate {
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  /* Better touch targets only for large nav/menu actions */
  .mobile-menu a,
  .mobile-menu .nav-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .header-controls .menu-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Sector slider dots must stay compact in mobile view */
  .sector-dot {
    min-height: 0;
    height: 6px;
    display: block;
    line-height: 0;
  }

  /* Grid improvements */
  .grid {
    overflow-x: hidden;
  }

  /* Prevent horizontal scroll from flex */
  [class*="flex"] {
    min-width: 0;
  }

  /* Text overflow prevention */
  .truncate {
    max-width: 100%;
  }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

.btn-gradient-shine {
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple) 30%, var(--purple-light) 60%, var(--purple-soft) 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: background-position 0.5s ease;
}

.btn-gradient-shine:hover,
.btn-gradient-shine:focus-visible {
  animation: gradientShift 4s ease infinite;
}

.btn-gradient-shine:active {
  animation-duration: 1.5s;
}