/* ═══════════════════════════════════════════════════════════════════
   FinSight — Luxe Pro Layer
   Quiet Luxury × Futuristic Quant × Refined Glassmorphism
   Loads after detail-pro / index-pro / mobile-pro.
   Activates via body.luxe (alongside body.pro).
═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   1.0 Tokens — motion / shadow / glass / glow have moved to
   tokens.css (single source of truth). This file now only owns
   body.luxe component rules and the ambient-orb background.
─────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────
   2.0 Body — amplified ambient orbs (volumetric mood)
─────────────────────────────────────────────────────────── */
body.luxe::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 12% 8%,
      rgba(var(--accent-rgb), 0.13) 0%,
      transparent 55%),
    radial-gradient(ellipse 55% 45% at 92% 18%,
      rgba(var(--accent-rgb), 0.10) 0%,
      transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 95%,
      rgba(var(--accent-rgb), 0.07) 0%,
      transparent 60%);
  filter: blur(60px) saturate(120%);
  transition: opacity .6s var(--ease-smooth);
}
body.luxe.light::before {
  background:
    radial-gradient(ellipse 60% 50% at 12% 8%,
      rgba(var(--accent-rgb), 0.06) 0%,
      transparent 55%),
    radial-gradient(ellipse 55% 45% at 92% 18%,
      rgba(var(--accent-rgb), 0.045) 0%,
      transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 95%,
      rgba(var(--accent-rgb), 0.04) 0%,
      transparent 60%);
}

/* Hero halo — volumetric orb behind company name */
body.luxe .pro-hero {
  position: relative;
}
body.luxe .pro-hero::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 0;
  width: 600px;
  height: 600px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 30% 40%,
    rgba(var(--accent-rgb), 0.18) 0%,
    rgba(var(--accent-rgb), 0.06) 30%,
    transparent 65%);
  filter: blur(50px) saturate(140%);
  opacity: .9;
  transform: translate3d(var(--orb-x, 0), var(--orb-y, 0), 0);
  transition: transform 1.2s var(--ease-out);
}
body.luxe.light .pro-hero::before {
  background: radial-gradient(circle at 30% 40%,
    rgba(var(--accent-rgb), 0.10) 0%,
    rgba(var(--accent-rgb), 0.03) 30%,
    transparent 65%);
}
body.luxe .pro-hero > * { position: relative; z-index: 1; }

/* Subtle aurora streak between scorecard and radar */
body.luxe .pro-snapshot {
  position: relative;
}
body.luxe .pro-snapshot::after {
  content: "";
  position: absolute;
  inset: 20% 30% 30% 30%;
  background: radial-gradient(ellipse 80% 30% at 50% 50%,
    rgba(var(--accent-rgb), 0.06) 0%,
    transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
body.luxe .pro-snapshot > * { position: relative; z-index: 1; }

/* ───────────────────────────────────────────────────────────
   3.0 Glass surface — refined glassmorphism on cards
─────────────────────────────────────────────────────────── */
body.luxe .pro-card,
body.luxe .glass-card,
body.luxe .pro-reports,
body.luxe .pro-val-inputs,
body.luxe .pro-annual-highlights,
body.luxe .compare-grid-card,
body.luxe #pro-compare-overlay,
body.luxe .pro-notes {
  background: var(--luxe-glass-bg) !important;
  backdrop-filter: blur(var(--luxe-glass-blur)) saturate(var(--luxe-glass-saturate));
  -webkit-backdrop-filter: blur(var(--luxe-glass-blur)) saturate(var(--luxe-glass-saturate));
  border: 1px solid var(--luxe-glass-border) !important;
  box-shadow: var(--luxe-shadow);
  transition:
    box-shadow .35s var(--ease-out),
    border-color .35s var(--ease-out),
    transform .25s var(--ease-spring);
  position: relative;
}
body.luxe .pro-card::before,
body.luxe .pro-reports::before,
body.luxe #pro-compare-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--luxe-glass-edge) 0%,
    transparent 30%);
  opacity: .5;
  mix-blend-mode: overlay;
}

/* Hover — lift + accent glow */
body.luxe .pro-card:hover,
body.luxe #pro-compare-overlay:hover,
body.luxe .pro-annual-highlights:hover {
  border-color: rgba(var(--accent-rgb), .22) !important;
  box-shadow: var(--luxe-shadow-hover);
  transform: translateY(-1px);
}

/* KPI strip — keep dense but apply subtle inner glass */
body.luxe .pro-kpi-strip {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--luxe-glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--luxe-shadow-flat);
}
body.luxe.light .pro-kpi-strip {
  background: rgba(255,255,255,.55);
}
body.luxe .pro-kpi {
  background: transparent;
  border-right: 1px solid var(--luxe-glass-border);
}
body.luxe .pro-kpi:last-child { border-right: 0; }
body.luxe .pro-kpi:hover { background: rgba(var(--accent-rgb), .04); }

/* Score row — softer surface */
body.luxe .pro-score-row {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.04) !important;
  transition: all .3s var(--ease-out);
}
body.luxe.light .pro-score-row {
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.04) !important;
}
body.luxe .pro-score-row:hover {
  background: rgba(var(--accent-rgb), .06);
  border-color: rgba(var(--accent-rgb), .16) !important;
  transform: translateX(2px);
}

/* Mini tile in 10Y highlights */
body.luxe .pro-mini-tile {
  background: rgba(255,255,255,.025);
}
body.luxe.light .pro-mini-tile {
  background: rgba(255,255,255,.7);
}

/* ───────────────────────────────────────────────────────────
   4.0 Typography — serif display, sans body, mono data
─────────────────────────────────────────────────────────── */
body.luxe {
  --font-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* Hero company name — editorial serif */
body.luxe .pro-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 38px;
  letter-spacing: -0.015em;
  line-height: 1.04;
  font-feature-settings: "liga", "dlig";
}
body.luxe .pro-ticker {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* KPI value — serif numeric (Quiet Luxury hero numbers) */
body.luxe .pro-kpi-value {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum", "ss01";
}
body.luxe .pro-kpi-value.neg { color: var(--loss); }

/* KPI delta — stays mono, with subtle gradient on positive */
body.luxe .pro-kpi-meta {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}
body.luxe .pro-kpi-delta-up {
  background: linear-gradient(180deg, #6ee7a3, var(--gain));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

/* Big valuation numbers — serif */
body.luxe .pro-val-bigvalue {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.luxe .pro-val-bigvalue small {
  font-family: 'Inter', sans-serif;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--text-muted);
}

/* Mini tile big value — serif */
body.luxe .pro-mini-value {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
}

/* Section titles — small caps with character */
body.luxe .pro-card-title h3,
body.luxe .pro-composite-label,
body.luxe .pro-card-aside,
body.luxe .pro-reports-title {
  font-feature-settings: "ss01", "cv11";
  letter-spacing: 0.10em;
}

/* Page title — luxury serif */
body.luxe .page-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Stat values on dashboard — serif */
body.luxe .stat-value {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.015em;
  line-height: 1;
}

/* ───────────────────────────────────────────────────────────
   5.0 Floating sticky chrome — pills + glass
─────────────────────────────────────────────────────────── */

/* Titlebar — promote glass + softer hairline */
body.luxe .titlebar {
  background: rgba(7,9,15,.55) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 1px 16px rgba(0,0,0,.30);
}
body.luxe.light .titlebar {
  background: rgba(255,255,255,.65) !important;
  border-bottom-color: rgba(15,23,42,.06) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 1px 12px rgba(15,23,42,.06);
}

/* Sticky tabs — detached glass pill */
body.luxe .pro-tabs-wrap {
  position: sticky;
  top: calc(var(--titlebar-h, 48px) + 12px);
  margin-top: 28px;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  background: transparent;
  border-bottom: 0;
}
body.luxe .pro-tabs {
  background: var(--luxe-glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--luxe-glass-border);
  border-radius: 14px;
  padding: 4px 6px;
  box-shadow: var(--luxe-shadow);
  position: relative;
  overflow: visible;
  gap: 2px;
}
body.luxe .pro-tab {
  border-bottom: 0 !important;
  border-radius: 10px;
  padding: 9px 14px;
  margin-bottom: 0;
  z-index: 1;
  transition: color .3s var(--ease-spring);
}
body.luxe .pro-tab:hover { background: rgba(255,255,255,.04); }
body.luxe .pro-tab.active {
  color: var(--text-primary);
  background: rgba(var(--accent-rgb), .18);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .25),
              inset 0 1px 0 rgba(255,255,255,.06);
}
body.luxe.light .pro-tab.active {
  background: rgba(var(--accent-rgb), .14);
  color: var(--accent-dark);
}

/* Mobile bottom nav — floating pill */
@media (max-width: 760px) {
  body.luxe .mobile-bottom-nav {
    background: transparent !important;
    border-top: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 12px calc(env(safe-area-inset-bottom, 0) + 12px);
    pointer-events: none;
  }
  body.luxe .mobile-bottom-nav-inner {
    background: rgba(7,9,15,.72) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--luxe-glass-border);
    border-radius: 18px;
    box-shadow: var(--luxe-shadow);
    pointer-events: auto;
    height: 60px !important;
  }
  body.luxe.light .mobile-bottom-nav-inner {
    background: rgba(255,255,255,.78) !important;
  }
  body.luxe .mob-nav-item.active {
    color: var(--accent);
    text-shadow: 0 0 18px rgba(var(--accent-rgb), .5);
  }
}

/* ───────────────────────────────────────────────────────────
   6.0 Glow CTAs + spring micro-interactions
─────────────────────────────────────────────────────────── */

/* Buttons — subtle scale active */
body.luxe button,
body.luxe .btn,
body.luxe .pro-icon-btn {
  transition:
    background .25s var(--ease-spring),
    border-color .25s var(--ease-spring),
    color .2s var(--ease-out),
    transform .15s var(--ease-spring),
    box-shadow .3s var(--ease-out);
}
body.luxe button:active,
body.luxe .btn:active,
body.luxe .pro-icon-btn:active {
  transform: scale(.97);
}

/* Primary button — glow CTA */
body.luxe .btn-primary,
body.luxe .btn-accent {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark)) !important;
  border-color: transparent !important;
  color: #07090F !important;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 0 0 1px rgba(var(--accent-rgb), .35),
    0 4px 14px rgba(var(--accent-rgb), .25),
    0 0 0 0 rgba(var(--accent-rgb), 0);
  text-shadow: 0 1px 0 rgba(255,255,255,.18);
}
body.luxe .btn-primary:hover,
body.luxe .btn-accent:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 0 0 1px rgba(var(--accent-rgb), .40),
    0 6px 20px rgba(var(--accent-rgb), .35),
    0 0 32px 0 rgba(var(--accent-rgb), .35);
  transform: translateY(-1px);
}

/* Pro CTA modifier (apply on hero buttons) */
body.luxe .pro-cta {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: #07090F;
  border: 0;
  font-weight: 600;
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 4px 14px rgba(var(--accent-rgb), .30);
  transition: all .3s var(--ease-spring);
}
body.luxe .pro-cta:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 8px 24px rgba(var(--accent-rgb), .45),
    0 0 40px 0 rgba(var(--accent-rgb), .25);
  transform: translateY(-1px) scale(1.01);
}

/* Tab indicator slider (managed by JS) */
body.luxe .pro-tab-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  height: auto;
  background: rgba(var(--accent-rgb), .18);
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), .25);
  z-index: 0;
  transition:
    transform .42s var(--ease-spring),
    width .42s var(--ease-spring),
    opacity .25s var(--ease-out);
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
body.luxe .pro-tabs .pro-tab.active {
  background: transparent;
  box-shadow: none;
}

/* Score row — spring lift on hover (already declared above; tighten) */
body.luxe .pro-score-row {
  transition: all .3s var(--ease-spring);
}

/* Drawer — promote to spring */
body.luxe .sidebar {
  transition: transform .42s var(--ease-spring) !important;
}

/* Grade chips — micro glow per class */
body.luxe .pro-grade-aplus { box-shadow: 0 0 0 1px rgba(52,209,124,.30), 0 0 18px rgba(52,209,124,.35); }
body.luxe .pro-grade-a     { box-shadow: 0 0 0 1px rgba(77,211,229,.30), 0 0 18px rgba(77,211,229,.32); }
body.luxe .pro-grade-b     { box-shadow: 0 0 0 1px rgba(91,134,245,.30), 0 0 18px rgba(91,134,245,.30); }
body.luxe .pro-grade-c     { box-shadow: 0 0 0 1px rgba(245,181,73,.30), 0 0 18px rgba(245,181,73,.30); }
body.luxe .pro-grade-d     { box-shadow: 0 0 0 1px rgba(242,92,92,.30),  0 0 18px rgba(242,92,92,.32); }

/* Composite grade pulses very subtly */
body.luxe .pro-composite-grade .pro-grade-badge {
  animation: luxe-pulse 4s var(--ease-out) infinite;
}
@keyframes luxe-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.12); }
}

/* ───────────────────────────────────────────────────────────
   7.0 Asymmetric Bento (Dashboard refinement)
─────────────────────────────────────────────────────────── */
@media (min-width: 1101px) {
  body.luxe .bento-grid {
    grid-auto-rows: minmax(120px, auto);
    gap: 14px;
  }
  /* Row 1: 4 / 4 / 4 stat tiles, but make first one feature-sized */
  body.luxe .bento-sm:nth-child(1) {
    grid-column: span 4;
    grid-row: span 1;
    padding: 24px 28px !important;
  }
  body.luxe .bento-sm:nth-child(1) .stat-icon {
    width: 36px; height: 36px;
  }
  body.luxe .bento-sm:nth-child(1) .stat-icon svg {
    width: 18px; height: 18px;
  }
  body.luxe .bento-sm:nth-child(1) .stat-value {
    font-size: 44px;
  }
  body.luxe .bento-sm:nth-child(1) .stat-label {
    font-size: 11px;
    margin-bottom: 4px;
  }
  body.luxe .bento-sm:nth-child(2),
  body.luxe .bento-sm:nth-child(3) {
    grid-column: span 4;
  }
  body.luxe .bento-sm:nth-child(4),
  body.luxe .bento-sm:nth-child(5),
  body.luxe .bento-sm:nth-child(6) {
    grid-column: span 4;
  }

  /* Row 2: 7 / 5 split for company list + market */
  body.luxe .bento-lg { grid-column: span 7; }
  body.luxe .bento-md { grid-column: span 5; }

  /* Row 3: 6 / 6 quick actions */
  body.luxe .bento-act { grid-column: span 6; padding: 20px 24px !important; }
}

/* Featured stat hero — luxe glow */
body.luxe .bento-sm:nth-child(1)::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), .18),
    transparent 40%);
  pointer-events: none;
  opacity: .8;
  z-index: 0;
}
body.luxe .bento-sm:nth-child(1) > * { position: relative; z-index: 1; }

/* Quick action cards — subtle glass with accent tint on hover */
body.luxe .bento-act:hover {
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), .08),
    rgba(255,255,255,.025) 60%) !important;
  border-color: rgba(var(--accent-rgb), .3) !important;
}
body.luxe .quick-action svg {
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), .35));
}

/* ───────────────────────────────────────────────────────────
   8.0 Compare overlay — luxe treatment
─────────────────────────────────────────────────────────── */
body.luxe #pro-compare-overlay {
  padding: 22px 26px;
}
body.luxe .pro-cmp-table {
  font-feature-settings: "tnum";
}
body.luxe .pro-cmp-color-dot {
  box-shadow: 0 0 10px currentColor;
}

/* ───────────────────────────────────────────────────────────
   9.0 Tables — keep dense, soften surface
─────────────────────────────────────────────────────────── */
body.luxe .stmt-table thead th,
body.luxe .data-table thead th,
body.luxe .pro-cmp-table thead th {
  background: rgba(255,255,255,.025);
  letter-spacing: 0.10em;
}
body.luxe.light .stmt-table thead th,
body.luxe.light .data-table thead th,
body.luxe.light .pro-cmp-table thead th {
  background: rgba(15,23,42,.04);
}
body.luxe .stmt-table tbody tr.section-hdr td {
  background: rgba(var(--accent-rgb), .04);
  letter-spacing: 0.10em;
}

/* ───────────────────────────────────────────────────────────
  10.0 Segmented control — pill with glass
─────────────────────────────────────────────────────────── */
body.luxe .pro-seg {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--luxe-glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.luxe.light .pro-seg {
  background: rgba(255,255,255,.65);
}
body.luxe .pro-seg button {
  transition: all .25s var(--ease-spring);
}
body.luxe .pro-seg button.active {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: #07090F;
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 2px 8px rgba(var(--accent-rgb), .30);
}

/* ───────────────────────────────────────────────────────────
  11.0 Inputs — subtle glass + focus glow
─────────────────────────────────────────────────────────── */
body.luxe input[type="text"],
body.luxe input[type="number"],
body.luxe input[type="search"],
body.luxe textarea,
body.luxe select,
body.luxe .pro-search,
body.luxe .companies-header .company-search-input,
body.luxe .pro-val-input-grid .val-input-group input,
body.luxe .val-input-group input {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid var(--luxe-glass-border) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
body.luxe.light input[type="text"],
body.luxe.light input[type="number"],
body.luxe.light input[type="search"],
body.luxe.light textarea,
body.luxe.light select {
  background: rgba(255,255,255,.85) !important;
}
body.luxe input:focus,
body.luxe textarea:focus,
body.luxe select:focus,
body.luxe .pro-search:focus-within {
  border-color: rgba(var(--accent-rgb), .5) !important;
  box-shadow:
    0 0 0 4px rgba(var(--accent-rgb), .12),
    0 0 24px rgba(var(--accent-rgb), .15) !important;
}

/* ───────────────────────────────────────────────────────────
  12.0 Health gauge / hero badge — luxe ring glow
─────────────────────────────────────────────────────────── */
body.luxe .pro-grade-badge {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* ───────────────────────────────────────────────────────────
  13.0 Insights — luxe cards with side glow
─────────────────────────────────────────────────────────── */
body.luxe .pro-insight {
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
}
body.luxe.light .pro-insight {
  background: rgba(255,255,255,.7);
}
body.luxe .pro-insight-pos {
  box-shadow:
    inset 3px 0 0 var(--gain),
    -8px 0 32px -16px var(--gain);
}
body.luxe .pro-insight-neg {
  box-shadow:
    inset 3px 0 0 var(--loss),
    -8px 0 32px -16px var(--loss);
}
body.luxe .pro-insight-warn {
  box-shadow:
    inset 3px 0 0 var(--neutral),
    -8px 0 32px -16px var(--neutral);
}

/* ───────────────────────────────────────────────────────────
  14.0 Notes — luxe paper feel
─────────────────────────────────────────────────────────── */
body.luxe .pro-notes {
  border-left: 3px solid var(--neutral) !important;
}
body.luxe .pro-notes textarea {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
}

/* ───────────────────────────────────────────────────────────
  15.0 Mobile — glass pills + compact orbs
─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.luxe .pro-name { font-size: 26px; }
  body.luxe .pro-kpi-value { font-size: 19px; }
  body.luxe .pro-val-bigvalue { font-size: 26px; }
  body.luxe .pro-mini-value { font-size: 16px; }
  body.luxe .stat-value { font-size: 22px; }
  body.luxe .page-title { font-size: 22px; }
  body.luxe .pro-hero::before {
    width: 400px;
    height: 400px;
    top: -80px;
  }
  body.luxe .pro-tabs-wrap {
    top: calc(52px + 8px);
    margin-top: 18px;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    background: transparent !important;
    background-image: none !important;
  }
  body.luxe .pro-tabs {
    border-radius: 12px;
    padding: 3px 4px;
  }
  body.luxe .pro-tab {
    padding: 8px 12px;
    border-radius: 9px;
  }
  /* Slightly less aggressive blur for perf */
  body.luxe .pro-card,
  body.luxe .glass-card,
  body.luxe #pro-compare-overlay {
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
}

/* ───────────────────────────────────────────────────────────
  16.0 prefers-reduced-motion
─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.luxe *,
  body.luxe *::before,
  body.luxe *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
    scroll-behavior: auto !important;
  }
  body.luxe .pro-hero::before { transition: none; }
}

/* ───────────────────────────────────────────────────────────
  17.0 Performance/perf opt: contain glass blur to GPU layers
─────────────────────────────────────────────────────────── */
body.luxe .pro-card,
body.luxe .pro-tabs,
body.luxe .titlebar,
body.luxe .mobile-bottom-nav-inner {
  will-change: backdrop-filter;
  transform: translateZ(0);
}