/* ---- CONFIG → CSS custom properties (mirror the JS CONFIG below) ---- */
  #spectra {
    --bg:       #05070c;   /* stage background (near-black) */
    --bg2:      #0a1020;   /* subtle upper wash */
    --text:     #f4f6fb;   /* headline / button ink */
    --muted:    rgba(244,246,251,.42);
    --halo:     #ff2e74;   /* live glow colour — JS keeps it in sync with the centre card */
    --card-w:   260px;     /* card size — JS scales these with the viewport */
    --card-h:   330px;
    --ease:     cubic-bezier(.22,.61,.36,1);
  }

  /* ---- the section fills the viewport (one "screen section") ---- */
  #spectra {
    position: relative; overflow: hidden;
    min-height: 100svh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(18px, 3.5vh, 46px);
    padding: clamp(28px, 6vh, 72px) 16px;
    background:
      radial-gradient(140% 100% at 50% -8%, var(--bg2) 0%, transparent 55%),
      radial-gradient(120% 90% at 50% 120%, #000 10%, transparent 60%),
      var(--bg);
    color: var(--text);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* coloured halo that bleeds from behind the centre card (hue tracks the active card) */
  #spectra .halo {
    position: absolute; top: 46%; left: 50%; z-index: 0;
    width: min(70vw, 640px); aspect-ratio: 1; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, var(--halo), transparent 72%);
    opacity: .32; filter: blur(30px); pointer-events: none;
    transition: background .5s var(--ease);
  }

  /* small glasses mark above the fan */
  #spectra .mark { position: relative; z-index: 2; color: var(--text); display: grid; place-items: center; }
  #spectra .mark svg { width: 46px; height: auto; display: block; }

  /* ---- the coverflow stage ---- */
  #spectra .stage {
    position: relative; z-index: 1;
    width: 100%; height: calc(var(--card-h) + 90px);
    display: grid; place-items: center;
    perspective: var(--persp, 1600px); perspective-origin: 50% 44%;
    cursor: grab; touch-action: pan-y; user-select: none;
  }
  #spectra .stage.-drag { cursor: grabbing; }

  #spectra .deck { position: relative; width: 0; height: 0; transform-style: preserve-3d; }

  #spectra .card {
    position: absolute; width: var(--card-w); height: var(--card-h);
    left: calc(var(--card-w) / -2); top: calc(var(--card-h) / -2);
    margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
    transform-style: preserve-3d; will-change: transform, opacity;
    -webkit-tap-highlight-color: transparent;
  }
  #spectra .card__inner {
    position: absolute; inset: 0; border-radius: 22px; overflow: hidden;
    background: #0a0e18;
    box-shadow: 0 30px 60px -22px rgba(0,0,0,.85), 0 6px 20px -10px rgba(0,0,0,.7);
  }
  /* neon-gradient portrait placeholder (an <img>, if given, sits on top) */
  #spectra .card__media {
    position: absolute; inset: 0;
    background:
      radial-gradient(115% 78% at 50% 122%, rgba(0,0,0,.82), transparent 52%),
      radial-gradient(58% 66% at 61% 54%, rgba(0,0,0,.55), transparent 60%),
      radial-gradient(92% 62% at 46% 6%,  color-mix(in srgb, var(--c1) 78%, #fff 22%), transparent 66%),
      linear-gradient(158deg, var(--c1), var(--c2));
  }
  #spectra .card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  /* glossy edge + inner ring */
  #spectra .card__inner::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.06);
  }
  #spectra .card:focus-visible { outline: none; }
  #spectra .card:focus-visible #spectra .card__inner { box-shadow: 0 30px 60px -22px rgba(0,0,0,.85), 0 0 0 3px var(--halo); }

  /* ---- headline + call to action ---- */
  #spectra .caption {
    position: relative; z-index: 2; margin: 0; text-align: center;
    font-weight: 300; letter-spacing: -.005em; line-height: 1.05;
    font-size: clamp(28px, 5.4vw, 54px);
  }
  #spectra .cta {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; gap: 14px;
    padding: 9px 9px 9px 26px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--text); color: #08090d; text-decoration: none;
    font-size: 15px; font-weight: 600; letter-spacing: .01em;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
    box-shadow: 0 12px 30px -12px rgba(0,0,0,.7);
  }
  #spectra .cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(0,0,0,.8); }
  #spectra .cta:active { transform: translateY(0); }
  #spectra .cta:focus-visible { outline: 2px solid var(--halo); outline-offset: 4px; }
  #spectra .cta__dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
    background: #08090d; color: #fff; }
  #spectra .cta__dot svg { width: 15px; height: 15px; }

  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  @media (prefers-reduced-motion: reduce) {
    #spectra .halo { transition: none; }
  }

  
#spectra{--bg:#fff5dc;--bg2:#f7e9a4;--text:#073c5a;background:linear-gradient(180deg,#fff5dc,#fff9ed);min-height:900px;padding:95px 0 75px;gap:20px;font-family:Inter,sans-serif;color:#073c5a}#spectra .gallery-heading{position:relative;z-index:2;text-align:center;font-size:clamp(56px,7vw,100px);margin:0 20px 25px}#spectra .gallery-heading em{color:#0876a6}#spectra .halo{opacity:.14;width:min(90vw,850px)}#spectra .card__inner{border-radius:8px;background:#d4edf0;box-shadow:0 25px 40px -23px #073c5a65,0 5px 15px -10px #073c5a66}#spectra .card__media{background:#d4edf0}#spectra .card:focus-visible .card__inner{box-shadow:0 25px 40px -23px #073c5a65,0 0 0 4px #126ba2}#spectra .gallery-caption{position:relative;z-index:2;text-align:center;padding:0 24px;min-height:90px;max-width:680px}#spectra .gallery-caption h3{font-size:36px;margin-bottom:12px}#spectra .gallery-caption p{font-size:14px;line-height:1.6;color:#4c6774}#spectra .gallery-controls{display:flex;gap:12px;position:relative;z-index:2;flex-wrap:wrap;justify-content:center;padding:0 18px}#spectra .gallery-controls button{background:transparent;border:1px solid #073c5a66;color:#073c5a;min-height:46px;padding:12px 22px;border-radius:3px;font-size:13px}#spectra .gallery-controls button:hover{background:#f7ed83}#spectra .stage{height:calc(var(--card-h) + 80px)}@media(max-width:700px){#spectra{min-height:680px;padding:65px 0 55px;gap:20px}#spectra .gallery-heading{font-size:clamp(44px,11vw,68px);margin-bottom:15px}#spectra .stage{height:calc(var(--card-h) + 55px)}#spectra .gallery-caption h3{font-size:31px}#spectra .gallery-caption{min-height:110px}#spectra .gallery-controls{gap:8px}#spectra .gallery-controls button{padding:12px 15px;font-size:12px}}