/* REKZ shared design system. Black glass, one electric blue, ice white.
   Used by index, rewards, shop, admin. Token names are kept stable for the pages. */
:root{
  --ink:#04060c; --ink-2:#080c16; --ink-3:#0e1526; --line:rgba(118,164,255,.17); --line-hi:rgba(118,164,255,.42);
  --text:#eef4ff; --muted:#93a3c2; --volt:#2a73ff; --volt-hi:#79adff; --volt-ink:#ffffff; --hot:#bcd8ff; --ice:#dfeaff;
  --display:'Kanit',system-ui,sans-serif; --body:'Hanken Grotesk',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --cut:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);
}
*{box-sizing:border-box;margin:0}
html{overflow-x:clip;scroll-behavior:smooth;scrollbar-width:none;background:var(--ink)}
body{background:transparent;color:var(--text);font:400 1rem/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;caret-color:var(--volt-hi)}
::selection{background:var(--volt);color:var(--volt-ink)}
::-webkit-scrollbar{display:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--volt-hi);outline-offset:3px}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.num{font-variant-numeric:tabular-nums}
.display,h1,h2,h3{font-family:var(--display);font-style:italic}

/* nav */
nav{position:sticky;top:0;z-index:30;background:rgba(4,6,12,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:background .4s,border-color .4s}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.logo{display:flex;align-items:center;gap:11px;font:800 1.55rem/1 var(--display);font-style:italic;letter-spacing:.01em;text-decoration:none}
.logo img{border-radius:50%;display:block;box-shadow:0 0 0 1.5px var(--volt),0 0 22px -4px var(--volt)}
nav ul{display:flex;gap:30px;list-style:none;padding:0}
nav ul a{position:relative;text-decoration:none;color:var(--muted);font-weight:500;font-size:.95rem;padding:6px 0;transition:color .2s}
nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--volt);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
nav ul a:hover,nav ul a[aria-current]{color:var(--text)}
nav ul a:hover::after,nav ul a[aria-current]::after{transform:scaleX(1)}

/* buttons: slanted like the wordmark */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;border:0;cursor:pointer;text-decoration:none;
  font:700 .92rem/1 var(--display);font-style:italic;letter-spacing:.07em;text-transform:uppercase;color:var(--volt-ink);
  background:linear-gradient(180deg,#2260ee,#1a4ed6);clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);transition:filter .25s,transform .35s var(--ease),color .2s,background .2s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);background-size:260% 100%;background-position:130% 0;transition:background-position .7s var(--ease)}
.btn:hover::after{background-position:-30% 0}
.btn:hover{filter:brightness(1.12);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:0;background:#fff;color:var(--ink)}
.btn.ghost{background:var(--line-hi);color:var(--text)}
.btn.ghost::before{content:"";position:absolute;inset:1px;z-index:-1;background:var(--ink);clip-path:polygon(13px 0,100% 0,calc(100% - 13px) 100%,0 100%);transition:background .25s}
.btn.ghost:hover::before{background:#0b1730}
.btn.ghost::after{display:none}
.btn.sm{padding:11px 22px;font-size:.8rem}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;filter:none}

/* type */
h1{font:800 clamp(2.8rem,7.2vw,5.8rem)/.94 var(--display);font-style:italic;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
h1 em{font-style:italic;color:var(--volt-hi)}
h2{font:800 clamp(2.2rem,4.6vw,3.6rem)/.98 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
h3{font:700 1.2rem/1.2 var(--display);font-style:italic;letter-spacing:.01em}

/* shared page backdrop for inner pages: the same shattered wall, fading out */
body{position:relative}
.pg-bg{position:absolute;left:0;right:0;top:0;height:680px;z-index:-1;pointer-events:none;background:url(assets/bg.webp) 80% 40%/cover;opacity:.75;-webkit-mask-image:radial-gradient(ellipse 70% 90% at 82% 25%,#000 0,transparent 75%);mask-image:radial-gradient(ellipse 70% 90% at 82% 25%,#000 0,transparent 75%)}
.pg-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,var(--ink))}
@media (max-width:860px){.pg-bg{height:460px;opacity:.38}}

/* footer */
footer{position:relative;padding:56px 0 72px;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);background:var(--ink)}
footer .wrap{display:grid;gap:16px}
footer strong{color:var(--text)}
footer .logo{font-size:1.4rem;color:var(--text)}
footer p{max-width:78ch}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-bottom:24px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 26px;list-style:none;padding:0}
.foot-links a{text-decoration:none;color:var(--text);font-weight:500}
.foot-links a:hover{color:var(--volt-hi)}

/* motion */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.btn,.btn::after{transition:none}}

@media (max-width:860px){
  nav ul{display:none}
  nav .wrap{height:60px}
  .wrap{width:min(1180px,100% - 32px)}
  .logo{font-size:1.4rem}
}