/* ═══════════════════════════════════════════════════════════════════
   DIRECTION C — "STAGE"  ·  the default
   ───────────────────────────────────────────────────────────────────
   Taken directly from the Event OS displays themselves: the deep
   indigo→violet hall, gold on the horizon, art-deco brackets, and the
   champagne gold that already carries the Ellertek brand.

   The site now looks like the product. A casino manager who has seen
   the screens recognises the website, and someone who sees the website
   first knows exactly what the screens will look like.

   ON NEON, RESPONSIBLY
   Neon here means depth and glow, not strobe. Every rule below obeys:
     · no animation changes luminance faster than once per second
       (WCAG 2.3.1 asks for under three flashes per second)
     · no saturated red flashes anywhere
     · glows are soft-edged shadows, never hard alternating fills
     · large background areas stay still; only small elements move
     · body text is off-white on deep indigo, comfortably past AA
     · Calm mode (below) removes motion AND light for anyone who wants
       the page to simply sit still
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.9,.28,1);

  --bg:#0a0630;
  --panel:rgba(255,255,255,.045);
  --panel-2:rgba(28,14,86,.9);
  --glass:rgba(255,255,255,.05);
  --line:rgba(190,170,255,.13);
  --line-2:rgba(200,180,255,.24);
  --ink:#f4f1ff;
  --muted:#a99fd6;

  --brand:#f5c542;
  --brand2:#ffe08a;
  --brand3:#a78bfa;
  --brand-grad:linear-gradient(118deg,#e0aa2c,#ffe08a 48%,#e8b843);
  --brand-soft:rgba(245,197,66,.10);
  --brand-line:rgba(245,197,66,.30);
  --brand-glow:rgba(245,197,66,.5);
  --on-brand:#241704;

  --head-bg:rgba(10,6,48,.78);
  --frame:linear-gradient(160deg,#241463,#100839);
  --shadow:rgba(20,4,60,.85);
  --cta-bg:
    radial-gradient(80% 130% at 50% 130%, rgba(255,206,120,.22), transparent 62%),
    radial-gradient(110% 120% at 50% 0%, rgba(139,92,246,.20), transparent 60%),
    #0d0740;
}

/* ── the hall, behind everything ──────────────────────────────────
   Two still gradients and one very slow drift. Nothing pulses. */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 42% at 50% -6%,  rgba(139,92,246,.32), transparent 66%),
    radial-gradient(46% 34% at 12% 24%,  rgba(99,102,241,.20), transparent 68%),
    radial-gradient(50% 36% at 88% 34%,  rgba(217,70,239,.14), transparent 68%);
  filter:blur(38px);
  animation:hall 40s ease-in-out infinite alternate;   /* 0.025 Hz */
}
@keyframes hall{
  from { transform:translate3d(0,0,0) scale(1); }
  to   { transform:translate3d(0,1.4%,0) scale(1.05); }
}

/* the star field, static — the texture that reads as "venue at night" */
body::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1px 1px at 22% 28%,   rgba(255,255,255,.75), transparent 100%),
    radial-gradient(1px 1px at 72% 64%,   rgba(255,255,255,.45), transparent 100%),
    radial-gradient(1.4px 1.4px at 46% 12%, rgba(255,232,186,.6), transparent 100%);
  background-size:143px 118px, 197px 152px, 268px 196px;
  -webkit-mask:radial-gradient(120% 80% at 50% 0%, #000, transparent 78%);
  mask:radial-gradient(120% 80% at 50% 0%, #000, transparent 78%);
}
header.site,main,footer.site,.drawer{ position:relative; z-index:2; }

/* gold horizon hairline under the header — the venue screens' signature */
header.site{
  box-shadow:0 1px 0 rgba(245,197,66,.16), 0 10px 40px -30px rgba(245,197,66,.5);
}

/* glass panels over the hall */
.stat,.cell,.sol,.mod,.step,.qa,.free-card,.promise>div,.frame,.total-bar{
  backdrop-filter:blur(12px) saturate(1.25);
  -webkit-backdrop-filter:blur(12px) saturate(1.25);
}
.drawer{ background:linear-gradient(165deg,#150b48,#0a0630); }

/* the screen frame reads as a real bezel with a warm rim */
.frame{
  background:linear-gradient(160deg,#2a1870,#0f0838);
  box-shadow:0 34px 80px -34px var(--shadow),
             0 0 0 1px rgba(255,255,255,.06),
             0 0 44px -22px var(--t1, rgba(245,197,66,.6));
}
.frame::after{ opacity:.45; }

/* headline gradient: champagne into violet, the two brand colours */
.grad{
  background:linear-gradient(100deg,#ffe08a,#f5c542 38%,#c4a5ff 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* section rhythm: a faint gold rule where the page changes subject */
section + section > .wrap::before{
  content:''; position:absolute; top:-1px; left:24px; right:24px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(245,197,66,.14) 30%,
    rgba(245,197,66,.14) 70%, transparent);
}
section > .wrap{ position:relative; }

/* stat numbers in champagne, solutions keep their module colour */
.stat .n{ color:var(--brand2); text-shadow:0 0 26px rgba(245,197,66,.28); }
.stat{ background:linear-gradient(162deg, rgba(139,92,246,.10), transparent 62%), var(--panel); }

.sol{ --s1:#c084fc; --s2:#38bdf8; }
.sol:nth-child(2){ --s1:#ffd76b; --s2:#ff9d3c; }
.sol:nth-child(3){ --s1:#34d399; --s2:#059669; }
.sol:nth-child(4){ --s1:#38bdf8; --s2:#2563eb; }
.sol:nth-child(5){ --s1:#a3e635; --s2:#16a34a; }
.sol:nth-child(6){ --s1:#fb923c; --s2:#ea580c; }

/* the bottom bar echoes the stage floor */
.mobbar{
  border-top:1px solid rgba(245,197,66,.22);
  background:linear-gradient(0deg, rgba(20,10,64,.96), rgba(10,6,48,.82));
}
.mobbar a.hot{ color:var(--brand2); }