:root {
    /* Brand colors sampled from the FreshWave logo */
    --cyan: 181 96% 44%;          /* #04cbcf teal */
    --magenta: 318 94% 53%;       /* sun / WAVE pink-magenta */
    --sunset: 18 95% 56%;         /* #fa6126 sunset orange */
    --vapor-purple: 281 91% 62%;  /* #c93af8 DIGITAL STUDIO purple */
    --deep-ink: 250 24% 3%;

    --background: 250 24% 3%;      /* near-black, matches logo canvas */
    --foreground: 252 100% 97%;
    --border: 255 22% 13%;
    --input: 255 26% 8%;
    --ring: 181 96% 44%;
    --primary: 181 96% 44%;
    --primary-foreground: 250 24% 3%;
    --secondary: 318 94% 53%;
    --secondary-foreground: 252 100% 97%;
    --muted: 255 22% 13%;
    --muted-foreground: 245 12% 72%;
    --accent: 281 91% 62%;
    --accent-foreground: 252 100% 97%;
    --card: 255 28% 6%;
    --card-foreground: 252 100% 97%;
    --radius: 0.5rem;
  }

  * { box-sizing: border-box; border-color: hsl(var(--border)); }
  html {
    scroll-behavior: smooth;
    background-color: hsl(var(--background));
  }
  body {
    font-family: "Space Grotesk", sans-serif;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    overflow-x: clip;
    margin: 0;
  }
  #root {
    min-height: 100vh;
    overflow-x: clip;
  }
  body.admin-bar header.sticky { top: 32px; }
  @media (max-width: 782px) {
    body.admin-bar header.sticky { top: 46px; }
  }
  h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

  .font-display { font-family: "Monoton", cursive; }
  .font-heading { font-family: "Audiowide", sans-serif; }
  .font-data { font-family: "Rajdhani", sans-serif; }
  .font-mono { font-family: "JetBrains Mono", monospace; }

  /* Scanline overlay */
  .scanlines::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px);
    pointer-events: none;
    z-index: 9999;
    opacity: 0.3;
  }

  /* Perspective grid floor */
  .grid-floor {
    background-image:
      radial-gradient(circle at 50% 42%, hsl(var(--magenta) / 0.08), transparent 35%),
      linear-gradient(to right, hsl(var(--cyan) / 0.12) 1px, transparent 1px),
      linear-gradient(to bottom, hsl(var(--cyan) / 0.12) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    filter: drop-shadow(0 0 calc(10px * var(--glow,1)) hsl(var(--cyan) / 0.18));
  }

  .glow-cyan { box-shadow: 0 0 calc(20px * var(--glow,1)) hsl(var(--cyan) / 0.48), 0 0 calc(72px * var(--glow,1)) hsl(var(--cyan) / 0.22); }
  .glow-magenta { box-shadow: 0 0 calc(20px * var(--glow,1)) hsl(var(--magenta) / 0.48), 0 0 calc(72px * var(--glow,1)) hsl(var(--magenta) / 0.22); }
  .text-glow-cyan { text-shadow: 0 0 calc(10px * var(--glow,1)) hsl(var(--cyan) / 0.78), 0 0 calc(28px * var(--glow,1)) hsl(var(--cyan) / 0.4); }
  .text-glow-magenta { text-shadow: 0 0 calc(10px * var(--glow,1)) hsl(var(--magenta) / 0.78), 0 0 calc(28px * var(--glow,1)) hsl(var(--magenta) / 0.4); }

  /* Neon glow that takes on the element's own color (scaled by --glow tweak) */
  .neon-text { text-shadow: 0 0 calc(8px * var(--glow,1)) currentColor, 0 0 calc(22px * var(--glow,1)) currentColor, 0 0 calc(40px * var(--glow,1)) currentColor; }
  .neon-text-soft { text-shadow: 0 0 calc(7px * var(--glow,1)) currentColor, 0 0 calc(18px * var(--glow,1)) currentColor; }
  .neon-border { box-shadow: 0 0 calc(12px * var(--glow,1)) currentColor, inset 0 0 calc(10px * var(--glow,1)) currentColor; }
  .neon-glow { box-shadow: 0 0 calc(18px * var(--glow,1)) currentColor, 0 0 calc(48px * var(--glow,1)) currentColor, 0 0 calc(82px * var(--glow,1)) currentColor; }

  /* Soft CRT bloom for headings - subtle, applied evenly across every section */
  .crt-head { text-shadow: 0 0 calc(14px * var(--glow,1)) hsl(var(--foreground) / 0.34), 0 0 calc(34px * var(--glow,1)) hsl(var(--cyan) / 0.12); }
  body.lights-off .crt-head {
    text-shadow: 0 0 calc(12px * var(--glow,1)) hsl(var(--cyan) / 0.45),
                 0 0 calc(34px * var(--glow,1)) hsl(var(--cyan) / 0.22);
  }
  /* Resting glow for solid buttons (scales with --glow, blooms on hover) */
  .glow-rest-cyan { box-shadow: 0 0 calc(16px * var(--glow,1)) hsl(var(--cyan) / 0.48), 0 0 calc(40px * var(--glow,1)) hsl(var(--cyan) / 0.14); }
  .glow-rest-magenta { box-shadow: 0 0 calc(16px * var(--glow,1)) hsl(var(--magenta) / 0.48), 0 0 calc(40px * var(--glow,1)) hsl(var(--magenta) / 0.14); }
  body.lights-off .glow-rest-cyan { box-shadow: 0 0 calc(20px * var(--glow,1)) hsl(var(--cyan) / 0.6), 0 0 calc(44px * var(--glow,1)) hsl(var(--cyan) / 0.3); }
  body.lights-off .glow-rest-magenta { box-shadow: 0 0 calc(20px * var(--glow,1)) hsl(var(--magenta) / 0.6), 0 0 calc(44px * var(--glow,1)) hsl(var(--magenta) / 0.3); }

  /* Accent glow on card hover - uses each card's own accent via --card-accent */
  .card-accent { --card-accent: hsl(var(--cyan)); box-shadow: 0 0 0 1px hsl(var(--border)); transition: box-shadow 0.3s ease, transform 0.3s ease; }
  .card-accent:hover { border-color: var(--card-accent) !important; box-shadow: 0 0 calc(28px * var(--glow,1)) -6px var(--card-accent) !important; }
  body.lights-off .card-accent:hover { border-color: var(--card-accent) !important; box-shadow: 0 0 calc(46px * var(--glow,1)) -3px var(--card-accent) !important; }
  /* All selectable studio cards already expose --panel-accent through charged-panel. */
  body.lights-off button.charged-panel:hover,
  body.lights-off button.charged-panel:focus-visible {
    border-color: var(--panel-accent) !important;
    box-shadow: 0 0 calc(46px * var(--glow,1)) -3px var(--panel-accent) !important;
  }

  .charged-panel {
    position: relative;
    overflow: hidden;
    --panel-accent: hsl(var(--cyan));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--panel-accent) 34%, hsl(var(--border))),
                0 0 calc(42px * var(--glow,1)) color-mix(in srgb, var(--panel-accent) 16%, transparent),
                inset 0 0 calc(42px * var(--glow,1)) color-mix(in srgb, var(--panel-accent) 6%, transparent);
  }
  .charged-panel::before {
    content: '';
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
      radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--panel-accent) 26%, transparent), transparent 34%),
      radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--panel-accent) 20%, transparent), transparent 30%),
      linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel-accent) 18%, transparent), transparent);
    opacity: 0.55;
    mix-blend-mode: screen;
  }
  .charged-panel::after {
    content: '';
    position: absolute;
    left: -45%;
    top: 0;
    width: 42%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--panel-accent) 26%, transparent), transparent);
    opacity: 0.28;
    transform: skewX(-14deg);
    animation: charge-sweep 7s ease-in-out infinite;
  }
  .charged-panel > * { position: relative; z-index: 1; }
  body:not(.lights-off) .crt-head {
    text-shadow:
      0 0 calc(16px * var(--glow,1)) hsl(var(--foreground) / 0.58),
      0 0 calc(42px * var(--glow,1)) hsl(var(--cyan) / 0.28),
      0 0 calc(72px * var(--glow,1)) hsl(var(--magenta) / 0.18);
  }
  body:not(.lights-off) .neon-text {
    text-shadow:
      0 0 calc(10px * var(--glow,1)) currentColor,
      0 0 calc(28px * var(--glow,1)) currentColor,
      0 0 calc(58px * var(--glow,1)) currentColor;
  }
  body:not(.lights-off) .neon-text-soft {
    text-shadow:
      0 0 calc(9px * var(--glow,1)) currentColor,
      0 0 calc(24px * var(--glow,1)) currentColor,
      0 0 calc(46px * var(--glow,1)) color-mix(in srgb, currentColor 74%, transparent);
  }
  body:not(.lights-off) .neon-glow {
    box-shadow:
      0 0 calc(18px * var(--glow,1)) currentColor,
      0 0 calc(46px * var(--glow,1)) currentColor,
      0 0 calc(86px * var(--glow,1)) currentColor;
  }
  body:not(.lights-off) .glow-rest-cyan {
    box-shadow:
      0 0 calc(18px * var(--glow,1)) hsl(var(--cyan) / 0.64),
      0 0 calc(56px * var(--glow,1)) hsl(var(--cyan) / 0.28),
      0 0 calc(90px * var(--glow,1)) hsl(var(--magenta) / 0.14);
  }
  body:not(.lights-off) .glow-rest-magenta {
    box-shadow:
      0 0 calc(18px * var(--glow,1)) hsl(var(--magenta) / 0.64),
      0 0 calc(56px * var(--glow,1)) hsl(var(--magenta) / 0.28),
      0 0 calc(90px * var(--glow,1)) hsl(var(--cyan) / 0.14);
  }
  body:not(.lights-off) .card-accent:hover {
    box-shadow:
      0 0 calc(38px * var(--glow,1)) -4px var(--card-accent),
      0 0 calc(78px * var(--glow,1)) -14px color-mix(in srgb, var(--card-accent) 72%, hsl(var(--magenta))) !important;
  }
  body:not(.lights-off) .charged-panel {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--panel-accent) 52%, hsl(var(--border))),
      0 0 calc(52px * var(--glow,1)) color-mix(in srgb, var(--panel-accent) 24%, transparent),
      0 0 calc(92px * var(--glow,1)) color-mix(in srgb, var(--panel-accent) 10%, transparent),
      inset 0 0 calc(50px * var(--glow,1)) color-mix(in srgb, var(--panel-accent) 8%, transparent);
  }
  body:not(.lights-off) .charged-panel::before {
    background:
      radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--panel-accent) 34%, transparent), transparent 36%),
      radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--panel-accent) 24%, transparent), transparent 32%),
      repeating-conic-gradient(from 18deg at 50% 50%, transparent 0deg 14deg, color-mix(in srgb, var(--panel-accent) 12%, transparent) 15deg 17deg, transparent 18deg 30deg),
      repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in srgb, var(--panel-accent) 8%, transparent) 19px 21px, transparent 22px 42px),
      linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel-accent) 22%, transparent), transparent);
    opacity: 0.72;
    animation: vegas-pattern-drift 18s linear infinite;
  }
  body:not(.lights-off) .charged-panel::after {
    background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--panel-accent) 42%, transparent), hsl(var(--foreground) / 0.18), transparent);
    opacity: 0.42;
    animation-duration: 4.8s;
  }
  .lit-logo {
    filter: drop-shadow(0 0 calc(10px * var(--glow,1)) hsl(var(--cyan) / 0.46))
            drop-shadow(0 0 calc(18px * var(--glow,1)) hsl(var(--magenta) / 0.24));
  }
  .lit-price {
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums lining-nums;
    text-shadow: 0 0 calc(8px * var(--glow,1)) currentColor,
                 0 0 calc(22px * var(--glow,1)) currentColor,
                 0 0 calc(48px * var(--glow,1)) currentColor;
  }

  .quote-data {
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    letter-spacing: 0.035em;
    font-variant-numeric: tabular-nums lining-nums;
  }

  .spark-button {
    position: relative;
    isolation: isolate;
  }

  .fw-spark-burst {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 10002;
  }

  .fw-spark-burst i {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--spark-width, 10px);
    height: 2px;
    border-radius: 999px;
    color: var(--spark-color, hsl(var(--cyan)));
    background: currentColor;
    box-shadow: 0 0 8px currentColor, 0 0 18px currentColor;
    opacity: 0;
    transform: rotate(var(--spark-angle, 0deg)) translateX(0) scaleX(0.2);
    animation: fw-spark var(--spark-speed, 620ms) cubic-bezier(0.16, 0.86, 0.22, 1) forwards;
    animation-delay: var(--spark-delay, 0ms);
  }

  @keyframes fw-spark {
    0% {
      opacity: 0;
      transform: rotate(var(--spark-angle, 0deg)) translateX(0) translateY(0) scaleX(0.2);
    }
    12% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: rotate(var(--spark-angle, 0deg)) translateX(var(--spark-distance, 48px)) translateY(var(--spark-drop, 0px)) scaleX(0.9);
    }
  }

  /* Neon flicker - subtle, for the hero accent word */
  @keyframes neon-flicker {
    0%, 100%   { opacity: 1; text-shadow: 0 0 8px currentColor, 0 0 22px currentColor, 0 0 40px currentColor; }
    42%        { opacity: 1; text-shadow: 0 0 8px currentColor, 0 0 22px currentColor, 0 0 40px currentColor; }
    44%        { opacity: 0.78; text-shadow: 0 0 4px currentColor; }
    46%        { opacity: 1; text-shadow: 0 0 8px currentColor, 0 0 22px currentColor, 0 0 40px currentColor; }
    88%        { opacity: 1; }
    90%        { opacity: 0.85; text-shadow: 0 0 4px currentColor; }
    92%        { opacity: 1; text-shadow: 0 0 8px currentColor, 0 0 22px currentColor, 0 0 40px currentColor; }
  }
  .neon-flicker { animation: neon-flicker 6s linear infinite; }

  /* ============ OMBRE TEXT (logo-tied gradient + glow) ============ */
  .ombre {
    background-image: linear-gradient(95deg,
      hsl(var(--cyan)) 0%,
      #6ea6e8 30%,
      hsl(var(--vapor-purple)) 62%,
      hsl(var(--magenta)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 calc(11px * var(--glow,1)) hsl(var(--vapor-purple) / 0.55));
    padding-bottom: 0.06em; /* keep descenders from clipping */
  }
  /* rounded display variant to match the reference lettering */
  .ombre-round { font-family: "Fredoka", sans-serif; font-weight: 600; letter-spacing: 0; text-transform: none; }
  body.lights-off .ombre {
    filter: drop-shadow(0 0 calc(16px * var(--glow,1)) hsl(var(--vapor-purple) / 0.85))
            drop-shadow(0 0 calc(34px * var(--glow,1)) hsl(var(--magenta) / 0.45));
  }

  /* ============ LIGHTS-OFF ROOM MODE ============ */
  body.lights-off {
    --background: 0 0% 0%;
    --card: 250 24% 3%;
    --foreground: 252 100% 86%;
    --muted-foreground: 246 18% 68%;
    --border: 255 22% 14%;
    --input: 250 28% 5%;
  }
  /* room vignette */
  body.lights-off::after {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: 9998;
    background: radial-gradient(ellipse at 60% 42%, transparent 28%, rgba(0,0,0,0.45) 78%, rgba(0,0,0,0.7) 100%);
    transition: opacity 0.6s ease;
  }
  body.lights-off .scanlines::before { opacity: 0.5; }
  /* dim ordinary imagery */
  body.lights-off .dimmable { filter: brightness(0.42) saturate(0.85); transition: filter 0.6s ease; }
  .dimmable { transition: filter 0.6s ease; }
  /* keep practical UI readable while the room is dark */
  body.lights-off .text-muted-foreground {
    color: hsl(var(--muted-foreground)) !important;
  }
  body.lights-off .charged-panel {
    background-color: hsl(var(--card) / 0.94);
  }
  body.lights-off .charged-panel p,
  body.lights-off .charged-panel label {
    color: hsl(var(--muted-foreground)) !important;
  }
  body.lights-off .fw-input {
    background-color: hsl(var(--input) / 0.94);
    color: hsl(252 100% 90%);
    border-color: hsl(var(--cyan) / 0.28);
    box-shadow: inset 0 0 calc(16px * var(--glow,1)) hsl(var(--cyan) / 0.08),
                0 0 calc(18px * var(--glow,1)) hsl(var(--cyan) / 0.1);
  }
  body.lights-off .fw-input::placeholder {
    color: hsl(246 18% 58%);
  }
  body.lights-off .lit-price {
    color: hsl(var(--cyan)) !important;
    text-shadow: 0 0 calc(10px * var(--glow,1)) currentColor,
                 0 0 calc(28px * var(--glow,1)) currentColor,
                 0 0 calc(56px * var(--glow,1)) currentColor;
  }
  /* neon blooms harder */
  body.lights-off .neon-text { text-shadow: 0 0 calc(10px * var(--glow,1)) currentColor, 0 0 calc(26px * var(--glow,1)) currentColor, 0 0 calc(52px * var(--glow,1)) currentColor; }
  body.lights-off .neon-text-soft { text-shadow: 0 0 calc(9px * var(--glow,1)) currentColor, 0 0 calc(24px * var(--glow,1)) currentColor; }
  body.lights-off .text-glow-cyan { text-shadow: 0 0 16px hsl(var(--cyan)), 0 0 40px hsl(var(--cyan)); }
  body.lights-off .text-glow-magenta { text-shadow: 0 0 16px hsl(var(--magenta)), 0 0 40px hsl(var(--magenta)); }
  /* glow PIECES (placeholders) light up using their own accent */
  body.lights-off .ph-stripes {
    box-shadow: 0 0 calc(52px * var(--glow,1)) -2px var(--ph-accent, hsl(var(--cyan))), inset 0 0 calc(92px * var(--glow,1)) -8px var(--ph-accent, hsl(var(--cyan))) !important;
  }
  body.lights-off .ph-label { color: var(--ph-accent, hsl(var(--cyan))) !important; text-shadow: 0 0 14px var(--ph-accent, hsl(var(--cyan))), 0 0 34px var(--ph-accent, hsl(var(--cyan))); opacity: 1 !important; }
  /* hero logo badge blooms */
  body.lights-off .hero-logo-badge {
    box-shadow: 0 0 0 1px hsl(var(--cyan) / 0.62), 0 0 110px hsl(var(--magenta) / 0.52), 0 0 170px hsl(var(--cyan) / 0.36) !important;
  }

  /* The public site stays in gallery mode; detail overlays get their own readable light. */
  .detail-backdrop {
    background: hsl(250 24% 2% / 0.96);
    backdrop-filter: blur(18px) saturate(1.15);
  }
  .detail-surface {
    margin: auto 0;
    background-color: hsl(250 24% 7%) !important;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--panel-accent, hsl(var(--cyan))) 42%, hsl(var(--border))),
      0 24px 80px rgba(0, 0, 0, 0.58),
      inset 0 0 56px color-mix(in srgb, var(--panel-accent, hsl(var(--cyan))) 7%, transparent) !important;
  }
  .detail-surface .text-muted-foreground {
    color: hsl(252 38% 84%) !important;
  }
  .detail-surface [class~="bg-background/45"],
  .detail-surface [class~="bg-background/50"] {
    background-color: hsl(250 24% 4% / 0.86) !important;
  }
  .reading-surface {
    background-color: hsl(250 24% 7%) !important;
    border-color: hsl(var(--cyan) / 0.32) !important;
    box-shadow:
      0 0 0 1px hsl(var(--cyan) / 0.08),
      inset 0 0 48px hsl(var(--cyan) / 0.035),
      0 18px 56px rgba(0, 0, 0, 0.32);
  }
  .reading-surface .text-muted-foreground,
  .reading-surface p.text-muted-foreground,
  .reading-surface label.text-muted-foreground {
    color: hsl(252 34% 82%) !important;
  }

  /* ============ MARQUEE TICKER ============ */
  .marquee {
    overflow: hidden;
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--card) / 0.6);
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .marquee-track {
    display: inline-flex; align-items: center;
    will-change: transform;
    animation: marquee-scroll var(--marquee-dur, 26s) linear infinite;
  }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .marquee-item {
    display: inline-flex; align-items: center; gap: 0.9rem;
    padding: 0.5rem 1.1rem;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
    color: hsl(var(--foreground) / 0.85);
  }
  .marquee-dot { width: 5px; height: 5px; rotate: 45deg; }
  @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* ============ INTRO OVERLAY ============ */
  .intro-overlay {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: #000;
    transition: opacity 0.7s ease, visibility 0.7s ease;
  }
  .intro-overlay.intro-done { opacity: 0; visibility: hidden; }
  .intro-overlay img {
    width: min(58vw, 420px);
    animation: intro-flicker 1.6s linear forwards;
  }
  .intro-skip {
    position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
    font-family: "JetBrains Mono", monospace; font-size: 10px;
    letter-spacing: 0.3em; text-transform: uppercase;
    color: hsl(var(--muted-foreground)); background: none; border: none; cursor: pointer;
  }
  .intro-skip:hover { color: hsl(var(--cyan)); }
  @keyframes intro-flicker {
    0%   { opacity: 0; filter: brightness(0.2); }
    8%   { opacity: 0.7; filter: brightness(1.4); }
    10%  { opacity: 0.1; }
    14%  { opacity: 0.9; filter: brightness(1.2); }
    16%  { opacity: 0.15; }
    22%  { opacity: 1; filter: brightness(1); }
    26%  { opacity: 0.4; }
    30%  { opacity: 1; filter: brightness(1.15); }
    100% { opacity: 1; filter: brightness(1); }
  }

  /* Striped image placeholder */
  .ph-stripes {
    position: relative;
    background-color: hsl(var(--input));
    background-image: repeating-linear-gradient(
      45deg,
      hsl(var(--muted-foreground) / 0.08),
      hsl(var(--muted-foreground) / 0.08) 10px,
      transparent 10px,
      transparent 20px
    );
    box-shadow: inset 0 0 calc(42px * var(--glow,1)) color-mix(in srgb, var(--ph-accent, hsl(var(--cyan))) 10%, transparent);
  }
  .ph-stripes::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ph-accent, hsl(var(--cyan))) 24%, transparent), transparent 42%),
      linear-gradient(180deg, color-mix(in srgb, var(--ph-accent, hsl(var(--cyan))) 12%, transparent), transparent 38%, color-mix(in srgb, var(--ph-accent, hsl(var(--cyan))) 10%, transparent));
    opacity: 0.55;
    mix-blend-mode: screen;
    animation: resin-breathe 4.8s ease-in-out infinite;
  }
  .ph-stripes::after {
    content: '';
    position: absolute;
    left: -55%;
    top: -10%;
    width: 48%;
    height: 120%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--ph-accent, hsl(var(--cyan))) 36%, transparent), transparent);
    opacity: 0.2;
    transform: skewX(-16deg);
    animation: charge-sweep 6.8s ease-in-out infinite;
  }
  .ph-label { text-shadow: 0 0 calc(8px * var(--glow,1)) var(--ph-accent, hsl(var(--cyan))), 0 0 calc(24px * var(--glow,1)) var(--ph-accent, hsl(var(--cyan))); }

  /* Layer-build slow rotation for hero pedestal ring */
  @keyframes spin-slow { to { transform: rotate(360deg); } }
  .spin-slow { animation: spin-slow 26s linear infinite; }

  @keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  .float-y { animation: float-y 6s ease-in-out infinite; }

  @keyframes pulse-glow {
    0%,100% { opacity: 0.22; filter: saturate(1); }
    50% { opacity: 0.42; filter: saturate(1.35); }
  }
  .pulse-glow { animation: pulse-glow 5s ease-in-out infinite; }

  @keyframes resin-breathe {
    0%,100% { opacity: 0.38; }
    50% { opacity: 0.68; }
  }
  @keyframes vegas-pattern-drift {
    0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 0 0, 0 0, 160px 120px, 92px 92px, 180px 0; }
  }
  @keyframes charge-sweep {
    0%, 22% { transform: translateX(0) skewX(-16deg); opacity: 0; }
    38% { opacity: 0.26; }
    58% { transform: translateX(360%) skewX(-16deg); opacity: 0; }
    100% { transform: translateX(360%) skewX(-16deg); opacity: 0; }
  }

  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: hsl(var(--background)); }
  ::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 6px; }
  ::-webkit-scrollbar-thumb:hover { background: hsl(var(--cyan) / 0.5); }

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

  /* Form inputs */
  .fw-input {
    width: 100%;
    background-color: hsl(var(--input));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-family: "Rajdhani", sans-serif;
    font-size: 1.03rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    font-variant-numeric: tabular-nums lining-nums;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .fw-input::placeholder { color: hsl(var(--muted-foreground)); }
  .fw-input:focus {
    outline: none;
    border-color: hsl(var(--cyan));
    box-shadow: 0 0 0 3px hsl(var(--cyan) / 0.18),
                0 0 calc(24px * var(--glow,1)) hsl(var(--cyan) / 0.22),
                inset 0 0 calc(18px * var(--glow,1)) hsl(var(--cyan) / 0.08);
  }