:root{
  --brand:#2563eb; --brand-600:#1d4ed8; --brand-700:#1e40af; --brand-900:#1e3a8a; --brand-50:#eff6ff;
  --win:#10b981; --bg:#f8fafc; --ink:#0f172a; --muted:#64748b; --card:#ffffff; --line:#e2e8f0;
  --shadow:0 18px 50px rgba(30,58,138,.12); --shadow-sm:0 6px 20px rgba(30,58,138,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
.muted{color:var(--muted)}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:16px 24px;background:rgba(248,250,252,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;color:var(--ink)}
.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--brand),var(--brand-700));color:#fff;font-weight:800;font-size:17px}
.nav-links{display:flex;gap:24px;font-weight:600;font-size:15px}
.nav-links a{color:var(--muted);transition:.15s}
.nav-links a:hover{color:var(--brand)}
@media(max-width:560px){.nav-links{gap:16px;font-size:14px}}

/* hero */
.hero{position:relative;overflow:hidden;text-align:center;padding:90px 24px 100px;
  background:linear-gradient(160deg,#0b1f5c 0%,#1e3a8a 45%,#2563eb 100%);color:#fff}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;animation:float 16s ease-in-out infinite}
.hero-bg .o1{width:340px;height:340px;background:#3b82f6;top:-80px;left:-60px}
.hero-bg .o2{width:300px;height:300px;background:#22d3ee;bottom:-90px;right:-50px;animation-duration:22s;animation-delay:-6s}
.hero-bg .o3{width:260px;height:260px;background:#818cf8;top:30%;right:20%;animation-duration:26s;animation-delay:-12s;opacity:.35}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-30px) scale(1.12)}}
.hero-inner{position:relative;max-width:760px;margin:0 auto}
.pill{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  border-radius:30px;padding:7px 16px;font-size:13.5px;font-weight:600;margin-bottom:22px}
.hero h1{font-size:clamp(38px,8vw,66px);font-weight:800;line-height:1.05;letter-spacing:-1.5px}
.grad{background:linear-gradient(90deg,#7dd3fc,#a5f3d0);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(16px,2.4vw,20px);color:#c7d2fe;margin:22px auto 0;max-width:560px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* buttons */
.btn{font-family:inherit;font-weight:700;border:none;cursor:pointer;border-radius:14px;padding:14px 24px;font-size:15.5px;transition:.16s;display:inline-block}
.btn.primary{background:#fff;color:var(--brand-700);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn.ghost:hover{background:rgba(255,255,255,.2)}
.btn.small{padding:10px 18px;font-size:14px;background:var(--brand);color:#fff;box-shadow:var(--shadow-sm);align-self:center}
.btn.small:hover{background:var(--brand-600)}
.btn.small.disabled{background:#e2e8f0;color:#94a3b8;cursor:default}

/* sections */
.section{max-width:1040px;margin:0 auto;padding:84px 24px}
.section h2{font-size:clamp(28px,5vw,40px);font-weight:800;text-align:center;letter-spacing:-.8px}
.section-sub{text-align:center;color:var(--muted);margin-top:8px;font-size:17px}

/* games grid */
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:42px}
.game-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-sm);transition:.2s}
.game-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.game-card.soon{opacity:.78}
.game-icon{width:64px;height:64px;border-radius:17px;display:flex;align-items:center;justify-content:center;font-size:36px;box-shadow:var(--shadow-sm)}
.game-body h3{font-size:21px;font-weight:800}
.game-tag{color:var(--muted);font-size:14.5px;margin-top:4px}
.game-meta{display:flex;gap:8px;align-items:center;margin-top:10px}
.badge{font-size:12px;font-weight:700;padding:3px 10px;border-radius:30px}
.badge.live{background:#d1fae5;color:#047857}
.badge.soon-b{background:#e0e7ff;color:#4338ca}

/* studio values */
.studio{background:linear-gradient(180deg,#fff,#f1f5f9)}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:42px}
.value{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;text-align:center;box-shadow:var(--shadow-sm)}
.v-ico{font-size:34px}
.value h4{font-size:17px;font-weight:800;margin:10px 0 4px}
.value p{color:var(--muted);font-size:14px}

/* cta band */
.cta-band{text-align:center;padding:80px 24px;background:linear-gradient(135deg,var(--brand-700),var(--brand));color:#fff;margin:0 24px;border-radius:28px;max-width:1040px;margin:40px auto}
.cta-band h2{font-size:clamp(26px,5vw,38px);font-weight:800;margin-bottom:24px}

/* footer */
.foot{border-top:1px solid var(--line);padding:40px 24px;margin-top:40px}
.foot-inner{max-width:1040px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.foot-links{display:flex;gap:20px;font-weight:600}
.foot-links a{color:var(--muted)}.foot-links a:hover{color:var(--brand)}
.foot .muted{font-size:13.5px}

/* reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.orb{animation:none}}

/* ===== Dark hero + BidRox neon logo ===== */
.nav{background:rgba(10,10,31,.82);border-bottom:1px solid #1e293b}
.brand{color:#fff}
.nav-links a{color:#cbd5e1}
.nav-links a:hover{color:#38bdf8}
.hero{background:radial-gradient(120% 90% at 50% -10%, #15173a 0%, #0a0a1f 62%)}
.hero h1{color:#fff}
.hero .lede{color:#94a3b8}
.hero .pill{display:none}
.hero-logo{width:min(460px,86%);height:auto;display:block;margin:0 auto 14px}
.hero-bg .orb{opacity:.55}
.hero .btn.ghost{border-color:#334155;color:#cbd5e1}
.hero .btn.ghost:hover{border-color:#38bdf8;color:#fff}
.brand-logo{height:30px;width:auto;display:block}
@media(max-width:560px){.brand-logo{height:26px}}

/* ===== Real BidRox raster logo (Canva) ===== */
.hero{background:#00001d}
.hero-bg{display:none}
.hero-logo{width:min(580px,94%);height:auto;display:block;margin:0 auto 18px}
.brand-logo{height:30px;width:auto;display:block}
@media(max-width:560px){.brand-logo{height:26px}}
.nav{background:#00001d;backdrop-filter:none;border-bottom:1px solid #14142e}

/* ===== Hero redesign: neon background + Tomorrow font ===== */
.hero{
  background:
    radial-gradient(46% 42% at 50% 33%, #00001d 38%, rgba(0,0,29,0) 78%),
    radial-gradient(62% 54% at 50% 2%, rgba(124,58,237,.34), rgba(0,0,29,0) 70%),
    radial-gradient(52% 46% at 86% 90%, rgba(5,229,237,.16), rgba(0,0,29,0) 70%),
    radial-gradient(50% 46% at 12% 92%, rgba(212,20,227,.16), rgba(0,0,29,0) 70%),
    #00001d;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(94,235,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,235,255,.055) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(72% 72% at 50% 42%, #000 28%, transparent 78%);
  mask-image:radial-gradient(72% 72% at 50% 42%, #000 28%, transparent 78%);
}
.hero-inner{position:relative;z-index:1}
.hero-logo{width:min(560px,90%);filter:drop-shadow(0 0 40px rgba(124,58,237,.40))}

/* Tomorrow font for headings (matches the logo wordmark) */
.hero h1,.section h2,.cta-band h2{font-family:'Tomorrow',system-ui,sans-serif;letter-spacing:-1px}
.hero h1{font-weight:800}

/* neon gradient for "Big aha moments." */
.hero .grad{background:linear-gradient(90deg,#05e5ed,#7c3aed 55%,#d414e3);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* neon buttons */
.hero .btn.primary{background:linear-gradient(90deg,#05e5ed,#7c3aed);color:#00001d;box-shadow:0 8px 30px rgba(124,58,237,.45)}
.hero .btn.primary:hover{filter:brightness(1.08)}
.hero .btn.ghost{border-color:rgba(94,235,255,.5);color:#cbd5e1}
.hero .btn.ghost:hover{border-color:#05e5ed;color:#fff;box-shadow:0 0 22px rgba(5,229,237,.25)}

/* fix: keep grid + glow OUT of the logo zone so the image blends (no rectangle) */
.hero{
  background:
    radial-gradient(52% 50% at 50% 30%, #00001d 56%, rgba(0,0,29,0) 84%),
    radial-gradient(66% 58% at 50% -2%, rgba(124,58,237,.36), rgba(0,0,29,0) 72%),
    radial-gradient(54% 50% at 90% 94%, rgba(5,229,237,.16), rgba(0,0,29,0) 70%),
    radial-gradient(52% 50% at 8% 96%, rgba(212,20,227,.16), rgba(0,0,29,0) 70%),
    #00001d;
}
.hero::before{
  -webkit-mask-image:radial-gradient(60% 58% at 50% 35%, transparent 36%, #000 84%);
  mask-image:radial-gradient(60% 58% at 50% 35%, transparent 36%, #000 84%);
}

/* transparent hero logo floats on the glow — no dark-center needed */
.hero{
  background:
    radial-gradient(58% 56% at 50% 27%, rgba(124,58,237,.42), rgba(0,0,29,0) 72%),
    radial-gradient(56% 52% at 90% 96%, rgba(5,229,237,.16), rgba(0,0,29,0) 72%),
    radial-gradient(54% 52% at 6% 98%, rgba(212,20,227,.16), rgba(0,0,29,0) 72%),
    #00001d;
}
.hero-logo{filter:drop-shadow(0 0 32px rgba(124,58,237,.35))}

/* ===== Simplify hero: clean dark, no grid/box, just the logo ===== */
.hero{background:radial-gradient(48% 44% at 50% 30%, rgba(124,58,237,.22), rgba(0,0,29,0) 72%), #00001d}
.hero::before{display:none}
.hero-logo{filter:none}