/* ============================================================
   NEXXUS — themes.css
   Multi-theme system with SVG texture overlays
   Themes: Cyber Neon (default), Midnight Matrix, Arctic Frost, Crimson Fortress
   ============================================================ */

/* ── Theme: Cyber Neon (Default) ───────────────────────────── */
[data-theme="cyber"], :root {
  --t-bg-primary:    #000008;
  --t-bg-secondary:  #050510;
  --t-bg-card:       rgba(5, 5, 20, 0.8);
  --t-accent:        #00f5ff;
  --t-accent2:       #0080ff;
  --t-accent3:       #8000ff;
  --t-green:         #00ff88;
  --t-red:           #ff2255;
  --t-text:          #e0e8ff;
  --t-text-muted:    #6080a0;
  --t-text-dim:      #304060;
  --t-glow:          0 0 20px rgba(0, 245, 255, 0.5);
  --t-glow2:         0 0 20px rgba(128, 0, 255, 0.5);
  --t-border:        rgba(0, 245, 255, 0.12);
  --t-border-active: rgba(0, 245, 255, 0.4);
  --t-gradient:      linear-gradient(135deg, #0080ff, #00f5ff);
  --t-gradient-bg:   linear-gradient(180deg, #000008, #050510);
  --t-nav-bg:        rgba(0, 0, 8, 0.5);
  --t-nav-border:    rgba(0, 245, 255, 0.08);
  --t-scrollbar:     linear-gradient(180deg, #00f5ff, #8000ff);
  --t-selection:     rgba(0, 245, 255, 0.25);
  --t-texture-color: #00f5ff;
}

/* ── Theme: Midnight Matrix ────────────────────────────────── */
[data-theme="matrix"] {
  --t-bg-primary:    #000a00;
  --t-bg-secondary:  #001200;
  --t-bg-card:       rgba(0, 15, 5, 0.85);
  --t-accent:        #00ff41;
  --t-accent2:       #00cc33;
  --t-accent3:       #008822;
  --t-green:         #00ff41;
  --t-red:           #ff3333;
  --t-text:          #b0ffb0;
  --t-text-muted:    #408040;
  --t-text-dim:      #205020;
  --t-glow:          0 0 20px rgba(0, 255, 65, 0.5);
  --t-glow2:         0 0 20px rgba(0, 204, 51, 0.4);
  --t-border:        rgba(0, 255, 65, 0.12);
  --t-border-active: rgba(0, 255, 65, 0.4);
  --t-gradient:      linear-gradient(135deg, #00cc33, #00ff41);
  --t-gradient-bg:   linear-gradient(180deg, #000a00, #001500);
  --t-nav-bg:        rgba(0, 10, 0, 0.6);
  --t-nav-border:    rgba(0, 255, 65, 0.08);
  --t-scrollbar:     linear-gradient(180deg, #00ff41, #00cc33);
  --t-selection:     rgba(0, 255, 65, 0.25);
  --t-texture-color: #00ff41;
}

/* ── Theme: Arctic Frost ───────────────────────────────────── */
[data-theme="arctic"] {
  --t-bg-primary:    #060a12;
  --t-bg-secondary:  #0a1020;
  --t-bg-card:       rgba(10, 18, 35, 0.85);
  --t-accent:        #88ccff;
  --t-accent2:       #4499dd;
  --t-accent3:       #2266aa;
  --t-green:         #66eebb;
  --t-red:           #ff6688;
  --t-text:          #d8e8f8;
  --t-text-muted:    #6088aa;
  --t-text-dim:      #304868;
  --t-glow:          0 0 20px rgba(136, 204, 255, 0.4);
  --t-glow2:         0 0 20px rgba(68, 153, 221, 0.3);
  --t-border:        rgba(136, 204, 255, 0.15);
  --t-border-active: rgba(136, 204, 255, 0.4);
  --t-gradient:      linear-gradient(135deg, #4499dd, #88ccff);
  --t-gradient-bg:   linear-gradient(180deg, #060a12, #0a1020);
  --t-nav-bg:        rgba(6, 10, 18, 0.6);
  --t-nav-border:    rgba(136, 204, 255, 0.08);
  --t-scrollbar:     linear-gradient(180deg, #88ccff, #4499dd);
  --t-selection:     rgba(136, 204, 255, 0.25);
  --t-texture-color: #88ccff;
}

/* ── Theme: Crimson Fortress ───────────────────────────────── */
[data-theme="crimson"] {
  --t-bg-primary:    #0a0004;
  --t-bg-secondary:  #120008;
  --t-bg-card:       rgba(18, 2, 8, 0.85);
  --t-accent:        #ff3355;
  --t-accent2:       #cc2244;
  --t-accent3:       #ff6622;
  --t-green:         #ff8844;
  --t-red:           #ff1133;
  --t-text:          #ffd8e0;
  --t-text-muted:    #a04060;
  --t-text-dim:      #602030;
  --t-glow:          0 0 20px rgba(255, 51, 85, 0.5);
  --t-glow2:         0 0 20px rgba(255, 102, 34, 0.4);
  --t-border:        rgba(255, 51, 85, 0.15);
  --t-border-active: rgba(255, 51, 85, 0.4);
  --t-gradient:      linear-gradient(135deg, #cc2244, #ff3355);
  --t-gradient-bg:   linear-gradient(180deg, #0a0004, #150008);
  --t-nav-bg:        rgba(10, 0, 4, 0.6);
  --t-nav-border:    rgba(255, 51, 85, 0.08);
  --t-scrollbar:     linear-gradient(180deg, #ff3355, #ff6622);
  --t-selection:     rgba(255, 51, 85, 0.25);
  --t-texture-color: #ff3355;
}

/* ── Theme: Void Nebula ────────────────────────────────────── */
[data-theme="nebula"] {
  --t-bg-primary:    #06001a;
  --t-bg-secondary:  #0a0028;
  --t-bg-card:       rgba(12, 2, 40, 0.85);
  --t-accent:        #c850ff;
  --t-accent2:       #7020e0;
  --t-accent3:       #ff40a0;
  --t-green:         #b060ff;
  --t-red:           #ff3077;
  --t-text:          #e8d0ff;
  --t-text-muted:    #8060b0;
  --t-text-dim:      #4a3070;
  --t-glow:          0 0 25px rgba(200, 80, 255, 0.55), 0 0 60px rgba(200, 80, 255, 0.2);
  --t-glow2:         0 0 25px rgba(255, 64, 160, 0.45);
  --t-border:        rgba(200, 80, 255, 0.15);
  --t-border-active: rgba(200, 80, 255, 0.45);
  --t-gradient:      linear-gradient(135deg, #7020e0, #c850ff, #ff40a0);
  --t-gradient-bg:   linear-gradient(180deg, #06001a, #0a0028);
  --t-nav-bg:        rgba(6, 0, 26, 0.65);
  --t-nav-border:    rgba(200, 80, 255, 0.1);
  --t-scrollbar:     linear-gradient(180deg, #c850ff, #ff40a0);
  --t-selection:     rgba(200, 80, 255, 0.3);
  --t-texture-color: #c850ff;
}

/* ── Theme: Holographic ────────────────────────────────────── */
[data-theme="holo"] {
  --t-bg-primary:    #020208;
  --t-bg-secondary:  #080818;
  --t-bg-card:       rgba(8, 8, 28, 0.8);
  --t-accent:        #00ffe0;
  --t-accent2:       #ff00cc;
  --t-accent3:       #ffcc00;
  --t-green:         #00ff88;
  --t-red:           #ff3366;
  --t-text:          #eef0ff;
  --t-text-muted:    #7080b0;
  --t-text-dim:      #3a4060;
  --t-glow:          0 0 20px rgba(0, 255, 224, 0.45), 0 0 40px rgba(255, 0, 204, 0.2);
  --t-glow2:         0 0 25px rgba(255, 0, 204, 0.4), 0 0 50px rgba(255, 204, 0, 0.15);
  --t-border:        rgba(0, 255, 224, 0.15);
  --t-border-active: rgba(255, 0, 204, 0.4);
  --t-gradient:      linear-gradient(135deg, #00ffe0, #ff00cc, #ffcc00);
  --t-gradient-bg:   linear-gradient(180deg, #020208, #080818);
  --t-nav-bg:        rgba(2, 2, 8, 0.55);
  --t-nav-border:    rgba(0, 255, 224, 0.08);
  --t-scrollbar:     linear-gradient(180deg, #00ffe0, #ff00cc, #ffcc00);
  --t-selection:     rgba(0, 255, 224, 0.2);
  --t-texture-color: #00ffe0;
}

/* ============================================================
   BRIDGE: Map theme tokens → base custom properties
   When [data-theme] is present, override the :root vars from main.css
   so EVERY element that uses var(--cyan) etc. responds automatically.
   ============================================================ */
[data-theme] {
  --bg-primary:    var(--t-bg-primary);
  --bg-secondary:  var(--t-bg-secondary);
  --bg-card:       var(--t-bg-card);
  --cyan:          var(--t-accent);
  --blue:          var(--t-accent2);
  --purple:        var(--t-accent3);
  --green:         var(--t-green);
  --red:           var(--t-red);
  --text-primary:  var(--t-text);
  --text-muted:    var(--t-text-muted);
  --text-dim:      var(--t-text-dim);
  --glow-cyan:     var(--t-glow);
  --glow-purple:   var(--t-glow2);
  --border-subtle: var(--t-border);
  --border-active: var(--t-border-active);
}

/* ============================================================
   THEME APPLICATION — Override main.css via custom properties
   ============================================================ */

/* Body & background */
[data-theme] body,
[data-theme].themed-root {
  background-color: var(--t-bg-primary);
  color: var(--t-text);
}

/* Navigation */
[data-theme] .nav {
  background: var(--t-nav-bg);
  border-bottom-color: var(--t-nav-border);
}
[data-theme] .nav.scrolled {
  background: color-mix(in srgb, var(--t-bg-primary) 92%, transparent);
}
[data-theme] .nav-logo {
  color: var(--t-accent);
  text-shadow: var(--t-glow);
}
[data-theme] .nav-logo span { color: var(--t-accent3); }
[data-theme] .nav-links a:hover,
[data-theme] .nav-links a.active { color: var(--t-accent); }
[data-theme] .nav-links a::after { background: var(--t-accent); }
[data-theme] .nav-cta {
  background: var(--t-gradient) !important;
}
[data-theme] .nav-cta:hover { box-shadow: var(--t-glow); }
[data-theme] .nav-hamburger span { background: var(--t-accent); }

/* Scrollbar */
[data-theme] ::-webkit-scrollbar-track { background: var(--t-bg-primary); }
[data-theme] ::-webkit-scrollbar-thumb { background: var(--t-scrollbar); }
[data-theme] ::-webkit-scrollbar-thumb:hover { background: var(--t-accent); }

/* Selection */
[data-theme] ::selection {
  background: var(--t-selection);
}

/* Links */
[data-theme] a { color: var(--t-accent); }

/* Hero */
[data-theme] .hero-tagline { color: var(--t-accent); }
[data-theme] .hero-title {
  color: var(--t-accent);
  animation-name: glow-pulse;
  text-shadow: 0 0 30px color-mix(in srgb, var(--t-accent) 70%, transparent),
               0 0 60px color-mix(in srgb, var(--t-accent) 40%, transparent),
               0 0 100px color-mix(in srgb, var(--t-accent) 20%, transparent);
}
[data-theme] .hero-subtitle { color: var(--t-text); }
[data-theme] .hero-sub2 { color: var(--t-text-muted); }
[data-theme] .hero-glow {
  background: radial-gradient(circle, color-mix(in srgb, var(--t-accent) 8%, transparent) 0%, color-mix(in srgb, var(--t-accent2) 4%, transparent) 40%, transparent 70%);
}
[data-theme] .hero-badge {
  background: color-mix(in srgb, var(--t-accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--t-accent) 15%, transparent);
  color: var(--t-text-muted);
}

/* Buttons */
[data-theme] .btn-primary {
  background: var(--t-gradient);
}
[data-theme] .btn-primary:hover {
  box-shadow: 0 8px 30px color-mix(in srgb, var(--t-accent) 40%, transparent);
}
[data-theme] .btn-outline {
  color: var(--t-accent);
  border-color: var(--t-accent);
}
[data-theme] .btn-outline:hover {
  background: var(--t-accent);
  box-shadow: var(--t-glow);
}
[data-theme] .btn-download {
  background: var(--t-gradient);
}

/* Stats bar */
[data-theme] .stats-bar {
  border-color: color-mix(in srgb, var(--t-accent) 10%, transparent);
}
[data-theme] .stat-number {
  color: var(--t-accent);
  text-shadow: var(--t-glow);
}
[data-theme] .stat-label { color: var(--t-text-muted); }
[data-theme] .stat-item + .stat-item::before {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--t-accent) 30%, transparent), transparent);
}

/* Tech strip */
[data-theme] .tech-strip {
  border-color: var(--t-border);
}
[data-theme] .tech-badge {
  color: var(--t-accent);
  border-color: color-mix(in srgb, var(--t-accent) 20%, transparent);
  background: color-mix(in srgb, var(--t-accent) 4%, transparent);
}
[data-theme] .tech-badge:hover {
  background: color-mix(in srgb, var(--t-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--t-accent) 50%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--t-accent) 15%, transparent);
}

/* Section titles */
[data-theme] .section-title { color: var(--t-text); }
[data-theme] .section-title span { color: var(--t-accent); }
[data-theme] .section-line {
  background: linear-gradient(90deg, var(--t-accent), var(--t-accent3));
  box-shadow: 0 0 12px color-mix(in srgb, var(--t-accent) 50%, transparent);
}
[data-theme] .section-subtitle { color: var(--t-text-muted); }
[data-theme] .section-divider {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--t-accent) 25%, transparent), color-mix(in srgb, var(--t-accent3) 15%, transparent), transparent);
}

/* Scan line */
[data-theme] .scan-line {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--t-accent) 80%, transparent), color-mix(in srgb, var(--t-accent) 40%, transparent), transparent);
}

/* ============================================================
   GLASS CARDS — with texture overlays
   ============================================================ */
[data-theme] .glass-card,
[data-theme] .app-card,
[data-theme] .feature-box,
[data-theme] .download-card,
[data-theme] .store-card,
[data-theme] .sysreq-card,
[data-theme] .accordion-item,
[data-theme] .build-note,
[data-theme] .dl-plat-card,
[data-theme] .dl-feature,
[data-theme] .dl-alpha-notice,
[data-theme] .dl-installer-block {
  background: var(--t-bg-card);
  border-color: var(--t-border);
  position: relative;
}

[data-theme] .glass-card:hover,
[data-theme] .app-card:hover,
[data-theme] .feature-box:hover,
[data-theme] .download-card:hover,
[data-theme] .store-card:hover,
[data-theme] .sysreq-card:hover,
[data-theme] .dl-plat-card:hover,
[data-theme] .dl-feature:hover {
  border-color: var(--t-border-active);
  box-shadow: var(--t-glow);
}

/* ============================================================
   TEXTURE OVERLAYS — Applied as ::after pseudo-elements
   ============================================================ */

/* Circuit board texture on feature boxes and cards */
.nx-texture-circuit {
  position: relative;
}
.nx-texture-circuit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/circuit-board.svg') repeat;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  mix-blend-mode: screen;
}

/* Hex grid texture on sections */
.nx-texture-hex {
  position: relative;
}
.nx-texture-hex::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/hex-grid.svg') repeat;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

/* Scan noise on buttons and headers */
.nx-texture-scan {
  position: relative;
}
.nx-texture-scan::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/scan-noise.svg') repeat;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  mix-blend-mode: screen;
}

/* Data stream texture on dividers */
.nx-texture-stream {
  position: relative;
}
.nx-texture-stream::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/data-stream.svg') repeat-x center;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

/* Glow border texture on interactive elements */
.nx-texture-glow {
  position: relative;
}
.nx-texture-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/glow-border.svg') repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  mix-blend-mode: screen;
}

/* Neural network texture on sections and panels */
.nx-texture-neural {
  position: relative;
}
.nx-texture-neural::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/neural-net.svg') repeat;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  mix-blend-mode: screen;
}

/* Diamond grid texture on premium elements */
.nx-texture-diamond {
  position: relative;
}
.nx-texture-diamond::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/diamond-grid.svg') repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  mix-blend-mode: screen;
}

/* Tech scanline texture on headers and banners */
.nx-texture-scanline {
  position: relative;
}
.nx-texture-scanline::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/tech-scanline.svg') repeat;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  mix-blend-mode: screen;
}

/* ============================================================
   AUTO-APPLY textures to themed elements
   ============================================================ */

/* Cards get circuit board texture */
[data-theme] .glass-card::after,
[data-theme] .feature-box::after,
[data-theme] .store-card::after,
[data-theme] .download-card::after,
[data-theme] .sysreq-card::after,
[data-theme] .dl-plat-card::after,
[data-theme] .dl-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/circuit-board.svg') repeat;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  mix-blend-mode: screen;
  transition: opacity 0.3s ease;
}

[data-theme] .glass-card:hover::after,
[data-theme] .feature-box:hover::after,
[data-theme] .store-card:hover::after,
[data-theme] .download-card:hover::after,
[data-theme] .sysreq-card:hover::after,
[data-theme] .dl-plat-card:hover::after,
[data-theme] .dl-feature:hover::after {
  opacity: 0.6;
}

/* App cards get hex grid texture */
[data-theme] .app-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/hex-grid.svg') repeat;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  mix-blend-mode: screen;
  transition: opacity 0.3s ease;
}
[data-theme] .app-card:hover::after {
  opacity: 0.55;
}

/* Section backgrounds get hex grid */
[data-theme] .section {
  position: relative;
}
[data-theme] .hero::before,
[data-theme] .page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/hex-grid.svg') repeat;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

/* Section dividers get data stream */
[data-theme] .section-divider {
  position: relative;
  overflow: hidden;
  height: 3px;
}
[data-theme] .section-divider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/data-stream.svg') repeat-x center;
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Brain/AI section gets neural-net texture */
[data-theme] .brain-section,
[data-theme] .siliconet-section {
  position: relative;
}
[data-theme] .brain-section::before,
[data-theme] .siliconet-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/neural-net.svg') repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

/* Store cards get diamond grid texture */
[data-theme] .store-card.featured::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/diamond-grid.svg') repeat;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  mix-blend-mode: screen;
}

/* Installer block gets tech scanline texture */
[data-theme] .dl-installer-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/tech-scanline.svg') repeat;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  mix-blend-mode: screen;
}

/* Buttons get scan noise texture */
[data-theme] .btn-primary,
[data-theme] .btn-download,
[data-theme] .nav-cta,
[data-theme] .dl-primary-btn {
  position: relative;
  overflow: hidden;
}
[data-theme] .btn-primary::after,
[data-theme] .btn-download::after,
[data-theme] .dl-primary-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/scan-noise.svg') repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
  mix-blend-mode: overlay;
}

/* Footer gets glow border texture */
[data-theme] .footer {
  position: relative;
  border-top-color: var(--t-border);
}
[data-theme] .footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/textures/glow-border.svg') repeat;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
[data-theme] .footer > * {
  position: relative;
  z-index: 1;
}

/* Card content stays above texture */
[data-theme] .glass-card > *,
[data-theme] .feature-box > *,
[data-theme] .app-card > *,
[data-theme] .store-card > *,
[data-theme] .download-card > *,
[data-theme] .sysreq-card > *,
[data-theme] .dl-plat-card > *,
[data-theme] .dl-feature > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   THEMED ACCENT COLORS — Everything else
   ============================================================ */

/* Card statuses */
[data-theme] .card-name { color: var(--t-text); }
[data-theme] .card-tagline { color: var(--t-text-muted); }
[data-theme] .status-active { color: var(--t-green); border-color: color-mix(in srgb, var(--t-green) 30%, transparent); background: color-mix(in srgb, var(--t-green) 12%, transparent); }

/* Feature boxes */
[data-theme] .feature-box h3 { color: var(--t-text); }
[data-theme] .feature-box p { color: var(--t-text-muted); }
[data-theme] .feature-icon { filter: hue-rotate(0deg); }
[data-theme] .active-dot { background: var(--t-green); box-shadow: 0 0 6px var(--t-green); }
[data-theme] .active-dot-wrapper { color: var(--t-green); }

/* Store */
[data-theme] .product-name { color: var(--t-text); }
[data-theme] .product-price { color: var(--t-accent); text-shadow: 0 0 15px color-mix(in srgb, var(--t-accent) 40%, transparent); }
[data-theme] .product-desc { color: var(--t-text-muted); }
[data-theme] .product-features li::before { color: var(--t-accent); }
[data-theme] .btn-cart { color: var(--t-accent); border-color: color-mix(in srgb, var(--t-accent) 25%, transparent); background: color-mix(in srgb, var(--t-accent) 8%, transparent); }
[data-theme] .filter-tab { color: var(--t-text-muted); border-color: var(--t-border); }
[data-theme] .filter-tab:hover,
[data-theme] .filter-tab.active { color: var(--t-accent); border-color: var(--t-border-active); background: color-mix(in srgb, var(--t-accent) 10%, transparent); }

/* Modal */
[data-theme] .modal-overlay { background: color-mix(in srgb, var(--t-bg-primary) 95%, transparent); }
[data-theme] .modal-box { border-color: color-mix(in srgb, var(--t-accent) 25%, transparent); box-shadow: 0 0 60px color-mix(in srgb, var(--t-accent) 15%, transparent), 0 40px 80px rgba(0,0,0,0.8); }
[data-theme] .modal-name { color: var(--t-accent); }
[data-theme] .modal-close { color: var(--t-accent); border-color: color-mix(in srgb, var(--t-accent) 20%, transparent); background: color-mix(in srgb, var(--t-accent) 8%, transparent); }
[data-theme] .modal-close:hover { background: var(--t-accent); }
[data-theme] .modal-features li::before { color: var(--t-accent); }

/* Brain / SilicoNet */
[data-theme] .brain-text h2 span { color: var(--t-accent); }
[data-theme] .brain-features li::before { color: var(--t-accent); }
[data-theme] #brain-canvas { border-color: var(--t-border); }

/* Accordion */
[data-theme] .accordion-item { border-color: var(--t-border); background: var(--t-bg-card); }
[data-theme] .accordion-item:hover { border-color: color-mix(in srgb, var(--t-accent) 25%, transparent); }
[data-theme] .accordion-trigger { color: var(--t-text); }
[data-theme] .accordion-arrow { color: var(--t-accent); }
[data-theme] .accordion-body ol li::before { color: var(--t-accent); border-color: color-mix(in srgb, var(--t-accent) 25%, transparent); background: color-mix(in srgb, var(--t-accent) 10%, transparent); }

/* Download page elements */
[data-theme] .dl-badge-release { color: var(--t-accent3); border-color: color-mix(in srgb, var(--t-accent3) 40%, transparent); background: color-mix(in srgb, var(--t-accent3) 12%, transparent); }
[data-theme] .dl-badge-tests { color: var(--t-green); }
[data-theme] .dl-badge-telemetry { color: var(--t-accent); border-color: color-mix(in srgb, var(--t-accent) 30%, transparent); }

/* Footer */
[data-theme] .footer { background: color-mix(in srgb, var(--t-bg-primary) 95%, transparent); }
[data-theme] .footer-brand .logo { color: var(--t-accent); text-shadow: var(--t-glow); }
[data-theme] .footer-links a { color: var(--t-text-muted); }
[data-theme] .footer-links a:hover { color: var(--t-accent); }
[data-theme] .footer-col h4 { color: var(--t-text); }
[data-theme] .social-link { border-color: var(--t-border); color: var(--t-text-muted); }
[data-theme] .social-link:hover { color: var(--t-accent); border-color: var(--t-border-active); }

/* Page hero (inner pages) */
[data-theme] .page-hero h1 span { color: var(--t-accent); }
[data-theme] .page-hero p { color: var(--t-text-muted); }
[data-theme] .page-hero-eyebrow { color: var(--t-accent); }

/* Privacy note */
[data-theme] .privacy-note { border-color: color-mix(in srgb, var(--t-accent2) 20%, transparent); background: color-mix(in srgb, var(--t-accent2) 5%, transparent); }
[data-theme] .privacy-note h4 { color: var(--t-accent2); }

/* Waitlist */
[data-theme] .waitlist-banner { border-color: color-mix(in srgb, var(--t-accent) 20%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--t-accent) 6%, transparent), color-mix(in srgb, var(--t-accent3) 6%, transparent)); }
[data-theme] .waitlist-input { border-color: color-mix(in srgb, var(--t-accent) 20%, transparent); }
[data-theme] .waitlist-input:focus { border-color: var(--t-accent); }

/* Terminal */
[data-theme] .terminal-block { border-color: color-mix(in srgb, var(--t-accent) 15%, transparent); }
[data-theme] .copy-btn { color: var(--t-accent); border-color: color-mix(in srgb, var(--t-accent) 20%, transparent); }
[data-theme] .term-prompt { color: var(--t-accent); }
[data-theme] .build-note strong { color: var(--t-accent); }

/* Sysreq table */
[data-theme] .sysreq-table th { color: var(--t-accent); }
[data-theme] .sysreq-list li::before { color: var(--t-accent); }

/* App info */
[data-theme] .app-info h2 span { color: var(--t-accent); }
[data-theme] .app-feature-list li::before { color: var(--t-accent); }
[data-theme] .tech-block { border-color: color-mix(in srgb, var(--t-accent) 10%, transparent); }
[data-theme] .tech-block .tech-label { color: var(--t-accent); }
[data-theme] .app-section-visual { border-color: var(--t-border); }

/* ============================================================
   SETTINGS PANEL — Theme Picker Swatches
   ============================================================ */
.nx-swatch-cyber { background: linear-gradient(135deg, #0080ff, #00f5ff); }
.nx-swatch-matrix { background: linear-gradient(135deg, #00cc33, #00ff41); }
.nx-swatch-arctic { background: linear-gradient(135deg, #4499dd, #88ccff); }
.nx-swatch-crimson { background: linear-gradient(135deg, #cc2244, #ff3355); }
.nx-swatch-nebula { background: linear-gradient(135deg, #7020e0, #c850ff, #ff40a0); }
.nx-swatch-holo { background: linear-gradient(135deg, #00ffe0, #ff00cc, #ffcc00); }

/* ============================================================
   VOID NEBULA — Premium Effects
   Deep-space nebula clouds, aurora edge glow on cards
   ============================================================ */
[data-theme="nebula"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 30%, rgba(112, 32, 224, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 80% 70%, rgba(255, 64, 160, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(200, 80, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: nebula-drift 20s ease-in-out infinite alternate;
}

@keyframes nebula-drift {
  0%   { opacity: 0.7; transform: scale(1) translate(0, 0); }
  50%  { opacity: 1;   transform: scale(1.05) translate(-1%, 2%); }
  100% { opacity: 0.8; transform: scale(1.02) translate(1%, -1%); }
}

[data-theme="nebula"] .glass-card,
[data-theme="nebula"] .app-card,
[data-theme="nebula"] .feature-box,
[data-theme="nebula"] .release-card,
[data-theme="nebula"] .store-card {
  box-shadow:
    inset 0 0 30px rgba(200, 80, 255, 0.04),
    0 0 1px rgba(200, 80, 255, 0.3),
    0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="nebula"] .glass-card:hover,
[data-theme="nebula"] .app-card:hover,
[data-theme="nebula"] .feature-box:hover,
[data-theme="nebula"] .store-card:hover {
  box-shadow:
    inset 0 0 40px rgba(200, 80, 255, 0.08),
    0 0 2px rgba(255, 64, 160, 0.5),
    0 0 30px rgba(200, 80, 255, 0.15),
    0 8px 30px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   HOLOGRAPHIC — Premium Effects
   Prismatic rainbow borders, chromatic shimmer, iridescent cards
   ============================================================ */
[data-theme="holo"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(0, 255, 224, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 60% at 70% 80%, rgba(255, 0, 204, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(255, 204, 0, 0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: holo-shift 12s ease-in-out infinite alternate;
}

@keyframes holo-shift {
  0%   { filter: hue-rotate(0deg);   opacity: 0.8; }
  50%  { filter: hue-rotate(30deg);  opacity: 1; }
  100% { filter: hue-rotate(-20deg); opacity: 0.85; }
}

/* Prismatic rainbow border on cards */
[data-theme="holo"] .glass-card,
[data-theme="holo"] .app-card,
[data-theme="holo"] .feature-box,
[data-theme="holo"] .release-card,
[data-theme="holo"] .store-card,
[data-theme="holo"] .dl-plat-card {
  border-image: linear-gradient(135deg, #00ffe0, #ff00cc, #ffcc00, #00ffe0) 1;
  border-width: 1px;
  border-style: solid;
  box-shadow:
    0 0 1px rgba(0, 255, 224, 0.3),
    0 0 1px rgba(255, 0, 204, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="holo"] .glass-card:hover,
[data-theme="holo"] .app-card:hover,
[data-theme="holo"] .feature-box:hover,
[data-theme="holo"] .store-card:hover,
[data-theme="holo"] .dl-plat-card:hover {
  box-shadow:
    0 0 4px rgba(0, 255, 224, 0.5),
    0 0 4px rgba(255, 0, 204, 0.4),
    0 0 20px rgba(255, 204, 0, 0.15),
    0 8px 40px rgba(0, 0, 0, 0.5);
  animation: holo-border-shift 3s linear infinite;
}

@keyframes holo-border-shift {
  0%   { border-image: linear-gradient(135deg, #00ffe0, #ff00cc, #ffcc00, #00ffe0) 1; }
  33%  { border-image: linear-gradient(135deg, #ffcc00, #00ffe0, #ff00cc, #ffcc00) 1; }
  66%  { border-image: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffe0, #ff00cc) 1; }
  100% { border-image: linear-gradient(135deg, #00ffe0, #ff00cc, #ffcc00, #00ffe0) 1; }
}

/* Holographic shimmer overlay on cards */
[data-theme="holo"] .glass-card::before,
[data-theme="holo"] .feature-box::before,
[data-theme="holo"] .store-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(0, 255, 224, 0.06) 40%,
    rgba(255, 0, 204, 0.06) 50%,
    rgba(255, 204, 0, 0.06) 60%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: holo-shimmer 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

@keyframes holo-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Holographic text glow for hero titles */
[data-theme="holo"] .hero-title,
[data-theme="holo"] h1 {
  background: linear-gradient(90deg, #00ffe0, #ff00cc, #ffcc00, #00ffe0);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: holo-text 6s linear infinite;
}

@keyframes holo-text {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ============================================================
   3D DEPTH EFFECTS — All themes
   Perspective transforms, parallax layers, depth cards
   ============================================================ */

/* 3D perspective container for sections */
[data-theme] .hero,
[data-theme] .page-hero,
[data-theme] main {
  perspective: 1200px;
}

/* Cards lift on hover with 3D tilt */
[data-theme] .glass-card,
[data-theme] .app-card,
[data-theme] .feature-box,
[data-theme] .store-card,
[data-theme] .dl-plat-card,
[data-theme] .release-card {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}

[data-theme] .glass-card:hover,
[data-theme] .feature-box:hover,
[data-theme] .store-card:hover,
[data-theme] .dl-plat-card:hover,
[data-theme] .release-card:hover {
  transform: translateY(-6px) rotateX(2deg) rotateY(-1deg);
}

[data-theme] .app-card:hover {
  transform: translateY(-8px) rotateX(1.5deg) scale(1.02);
}

/* Glassmorphism upgrade for cards */
[data-theme] .glass-card,
[data-theme] .release-card,
[data-theme] .app-version-card {
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}

/* Animated depth gradient for page backgrounds */
[data-theme] body::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40vh;
  background: linear-gradient(to top, var(--t-bg-primary), transparent);
  pointer-events: none;
  z-index: 0;
}

/* Floating particles via CSS (lightweight, no JS) */
[data-theme] body {
  position: relative;
  overflow-x: hidden;
}

.nx-particle {
  position: fixed;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--t-accent, #00f5ff);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: nx-float-particle linear infinite;
}

@keyframes nx-float-particle {
  0%   { opacity: 0; transform: translateY(100vh) translateX(0); }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-10vh) translateX(40px); }
}

/* ============================================================
   HIGH CONTRAST MODE
   ============================================================ */
[data-a11y-contrast="high"] {
  --t-text: #ffffff;
  --t-text-muted: #c0c0c0;
  --t-text-dim: #888888;
  --t-border: rgba(255, 255, 255, 0.25);
  --t-border-active: rgba(255, 255, 255, 0.6);
}
[data-a11y-contrast="high"] .nav-links a { color: #c0c0c0; }
[data-a11y-contrast="high"] .nav-links a:hover,
[data-a11y-contrast="high"] .nav-links a.active { color: #ffffff; }

/* ============================================================
   LARGE TEXT MODE
   ============================================================ */
[data-a11y-text="large"] {
  font-size: 18px;
}
[data-a11y-text="large"] .nav-links a { font-size: 1rem; }
[data-a11y-text="large"] p { font-size: 1.05rem; }
[data-a11y-text="large"] .section-subtitle { font-size: 1.1rem; }
[data-a11y-text="large"] .feature-box p,
[data-a11y-text="large"] .product-desc,
[data-a11y-text="large"] .app-info p { font-size: 0.95rem; }

/* ============================================================
   REDUCED MOTION MODE
   ============================================================ */
[data-a11y-motion="reduced"] *,
[data-a11y-motion="reduced"] *::before,
[data-a11y-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.15s !important;
}
[data-a11y-motion="reduced"] .scan-line { display: none; }
[data-a11y-motion="reduced"] .animate-in { opacity: 1; transform: none; }
[data-a11y-motion="reduced"] .app-card { animation: none; }

/* ============================================================
   DYSLEXIA-FRIENDLY MODE
   ============================================================ */
[data-a11y-font="dyslexia"] body,
[data-a11y-font="dyslexia"] p,
[data-a11y-font="dyslexia"] li,
[data-a11y-font="dyslexia"] span,
[data-a11y-font="dyslexia"] a,
[data-a11y-font="dyslexia"] .nav-links a,
[data-a11y-font="dyslexia"] .footer-links a {
  font-family: 'Comic Sans MS', 'OpenDyslexic', system-ui, sans-serif !important;
  letter-spacing: 0.05em;
  word-spacing: 0.15em;
  line-height: 1.8;
}