/* Zekker Gaming — holding page. Tokens from the Zekker Gaming identity kit v0.1 */
@font-face{font-family:Nunito;src:url(/assets/fonts/Nunito-Variable.woff2) format("woff2"),url(/assets/fonts/Nunito-Variable.ttf) format("truetype");font-weight:200 1000;font-style:normal;font-display:swap}
:root{
  --zek-purple:#6C5CE7;--zek-deep-purple:#4B3FA0;--zek-green:#3DBA9C;--zek-cream:#F2E6D6;
  --zek-lavender:#E7E0F7;--zek-ink:#211A41;--zek-paper:#FCFAF7;--zek-white:#FFFFFF;
  --font:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
  --bg:var(--zek-paper);--text:var(--zek-ink);--muted:#4F4669;--heading:var(--zek-ink);
  --accent:var(--zek-deep-purple);--line:#E2DCEF;--glow:rgba(108,92,231,.35);--focus:var(--zek-deep-purple);
  --track:#E7E0F7;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--bg:var(--zek-ink);--text:#EEE9FA;--muted:#C9C1E4;--heading:#fff;--accent:var(--zek-lavender);
    --line:#3B3170;--glow:rgba(108,92,231,.6);--focus:var(--zek-lavender);--track:#2F2660}
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:450 17px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh;min-height:100svh;position:relative;isolation:isolate}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:8px}
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(75,63,160,.15) 1.2px,transparent 1.3px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(60% 70% at 70% 45%,#000,transparent 75%);mask-image:radial-gradient(60% 70% at 70% 45%,#000,transparent 75%)}
.bg i{position:absolute;border-radius:50%;filter:blur(70px)}
.bg i:nth-child(1){width:560px;height:560px;right:-140px;top:-180px;background:radial-gradient(circle,rgba(108,92,231,.5),transparent 70%)}
.bg i:nth-child(2){width:460px;height:460px;left:-160px;bottom:-200px;background:radial-gradient(circle,rgba(61,186,156,.32),transparent 70%)}
@media (prefers-color-scheme:dark){.bg::before{background-image:radial-gradient(rgba(231,224,247,.13) 1.2px,transparent 1.3px)}.bg i{opacity:.85}}

main{flex:1;display:grid;place-items:center;padding:clamp(28px,5vh,64px) 0}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
.grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
.copy{display:grid;gap:22px;justify-items:start}
.pill{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 70%,#fff);padding:7px 14px 7px 10px;border-radius:999px}
@media (prefers-color-scheme:dark){.pill{background:#2A2152}}
.dot{width:10px;height:10px;border-radius:50%;background:var(--zek-green);box-shadow:0 0 0 4px rgba(61,186,156,.22);animation:pulse 2.4s ease-in-out infinite}
h1{margin:0;font-weight:900;color:var(--heading);font-size:clamp(38px,4.7vw,70px);line-height:1.04;letter-spacing:-.045em}
h1 span{display:block}
h1 span+span{color:var(--zek-deep-purple)}
@media (min-width:420px){h1 span{white-space:nowrap}}
@media (prefers-color-scheme:dark){h1 span+span{color:var(--zek-lavender)}}
.lead{margin:0;font-size:clamp(18px,1.5vw,20px);color:var(--muted);max-width:44ch}
.lead strong{color:var(--heading);font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:2px 0 0;padding:0}
.chips li{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:999px;background:var(--zek-green);color:var(--zek-ink);font-weight:900;font-size:15px;
  box-shadow:0 8px 20px -10px rgba(61,186,156,.9);transition:transform .16s ease}
.chips li:hover{transform:translateY(-2px) rotate(-1deg)}
.chips svg{width:20px;height:20px;flex:none}
.loading{display:grid;gap:8px;width:min(420px,100%);margin-top:6px}
.loading p{margin:0;display:flex;justify-content:space-between;font-weight:800;font-size:15px;color:var(--heading)}
.loading p span{color:var(--muted);font-weight:700}
.bar{height:14px;border-radius:999px;background:var(--track);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(75,63,160,.12)}
.bar i{display:block;height:100%;width:38%;border-radius:inherit;background:linear-gradient(90deg,var(--zek-deep-purple),var(--zek-purple),var(--zek-green));
  box-shadow:0 0 18px var(--glow);animation:scan 2.4s cubic-bezier(.45,0,.55,1) infinite alternate}

/* brand mark: mascot logo always on a light lavender stage (light-background asset) */
.stage{position:relative;border-radius:32px;padding:clamp(20px,3vw,40px);
  background:radial-gradient(120% 90% at 50% 40%,#F4F0FD 0%,var(--zek-lavender) 62%,#DCD2F4 100%);
  box-shadow:0 0 0 1px rgba(75,63,160,.10),0 30px 80px -30px rgba(75,63,160,.55),0 0 90px -20px var(--glow);animation:float 6s ease-in-out infinite}
.stage img{width:100%;min-width:300px}
.spark{position:absolute;width:var(--s);height:var(--s);color:var(--c);animation:twinkle var(--d) ease-in-out var(--dl) infinite}
.spark svg{width:100%;height:100%}

footer{padding:18px 0 26px;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;border-top:1px solid var(--line);padding-top:18px}

/* 404 */
.lost{text-align:center;display:grid;justify-items:center;gap:18px}
.lost .stage{width:min(440px,100%);animation:none}
.lost .code{font-size:14px;font-weight:900;letter-spacing:.3em;color:var(--accent);margin:8px 0 0}
.lost h1{font-size:clamp(38px,5vw,64px)}
.lost .lead{margin-inline:auto}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:12px;background:var(--zek-deep-purple);color:#fff;font-weight:800;text-decoration:none;
  box-shadow:0 10px 26px -8px var(--glow);transition:transform .16s ease,box-shadow .24s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -8px var(--glow),0 0 0 4px rgba(108,92,231,.18)}
.btn svg{width:18px;height:18px}
@media (prefers-color-scheme:dark){.btn{box-shadow:0 0 0 1px #7C6EEA,0 10px 26px -8px var(--glow)}}

@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(61,186,156,.08)}}
@keyframes scan{from{transform:translateX(-10%)}to{transform:translateX(173%)}}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1) rotate(20deg)}}

@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .stage{order:-1;max-width:560px;width:100%;justify-self:center}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{width:min(1180px,100% - 32px)}
  main{padding:0 0 32px;place-items:start center}
  .lost{padding-top:24px}
  .grid .stage{margin-inline:-16px;width:auto;max-width:none;justify-self:stretch;border-radius:0 0 28px 28px;padding:12px;animation:none}
  .copy{gap:18px}
  h1{font-size:clamp(34px,10.4vw,44px)}
  h1 span{white-space:nowrap}
  .chips li{font-size:14px}
  footer .wrap{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .bar i{width:100%;transform:none}
}