/* shared glass tokens */
:root{
  --glass:rgba(252,251,248,.32); --glass-strong:rgba(250,249,245,.5);
  --glass-line:rgba(20,19,16,.08); --spec2:rgba(255,255,255,.7);
  --panel-glass:rgba(255,255,255,.55); --panel-glass-h:rgba(255,255,255,.68);
  --btn-glass:rgba(23,67,242,.1); --btn-glass-h:rgba(23,67,242,.18);
  --btn-ink:#0F32D6; --btn-rim:rgba(255,255,255,.9); --btn-inrim:rgba(23,67,242,.16);
  --cta-glow:rgba(23,67,242,.14);
  --card-sh:0 12px 36px rgba(20,19,16,.06); --nav-sh:0 8px 28px rgba(20,19,16,.05);
}
html:not([data-theme="light"]){
  --glass:rgba(24,22,18,.46); --glass-strong:rgba(22,20,16,.62);
  --glass-line:rgba(255,255,255,.09); --spec2:rgba(255,255,255,.11);
  --panel-glass:rgba(27,25,21,.46); --panel-glass-h:rgba(33,30,25,.56);
  --btn-glass:rgba(23,67,242,.21); --btn-glass-h:rgba(23,67,242,.35);
  --btn-ink:#fff; --btn-rim:rgba(255,255,255,.34); --btn-inrim:rgba(255,255,255,.1);
  --cta-glow:rgba(23,67,242,.32);
  --card-sh:0 18px 50px rgba(0,0,0,.3); --nav-sh:0 12px 38px rgba(0,0,0,.28);
}
/* buttons: liquid glass + slow wide feathered sweep */
.btn{border-radius:14px}
.btn-solid{position:relative;overflow:hidden;isolation:isolate;color:var(--btn-ink);background-color:var(--btn-glass);
  background-image:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.08) 46%,rgba(255,255,255,0) 64%);
  border:1px solid var(--btn-rim);
  -webkit-backdrop-filter:blur(23px) saturate(1.7);backdrop-filter:blur(23px) saturate(1.7);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 0 0 1px var(--btn-inrim),0 10px 30px var(--cta-glow)}
.btn-solid:hover{background-color:var(--btn-glass-h);box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 0 0 1px var(--btn-inrim),0 14px 38px var(--cta-glow)}
.btn-solid::before{content:"";position:absolute;inset:-40%;pointer-events:none;
  background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.06) 34%,rgba(255,255,255,.26) 50%,rgba(255,255,255,.06) 66%,transparent 82%);
  transform:translateX(-135%);transition:transform 1.5s cubic-bezier(.3,.55,.25,1);filter:blur(9px)}
.btn-solid:hover::before{transform:translateX(135%)}
.btn-ghost{background-color:var(--glass);border-color:var(--glass-line);color:var(--ink);
  -webkit-backdrop-filter:blur(15px) saturate(1.5);backdrop-filter:blur(15px) saturate(1.5);
  box-shadow:inset 0 1px 1px var(--spec2)}
.btn-ghost:hover{border-color:var(--blue)}
/* cards and overlays */
.tier,.retainer,.door,.svc,.role-card,.perk,.call-card{background-color:var(--panel-glass);
  background-image:linear-gradient(180deg,var(--spec2),rgba(255,255,255,0) 34%);
  -webkit-backdrop-filter:blur(19px) saturate(1.4);backdrop-filter:blur(19px) saturate(1.4);
  border-color:var(--glass-line);box-shadow:inset 0 1px 1px var(--spec2),var(--card-sh);border-radius:22px}
.tier:hover,.door:hover,.svc:hover,.role-card:hover{background-color:var(--panel-glass-h)}
.dd-menu{background-color:var(--glass-strong);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border-color:var(--glass-line);border-radius:16px;box-shadow:inset 0 1px 1px var(--spec2),0 24px 60px rgba(0,0,0,.22)}
.frame,.case-frame{border-radius:18px}
.fq input,.fq select,.fq textarea,.dd-btn{border-radius:12px;background-color:var(--panel-glass)}
.check .box{border-radius:7px}
.to-top{background-color:var(--glass);color:var(--ink);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 1px 1px var(--spec2),var(--nav-sh)}
.to-top:hover{border-color:var(--blue)}
/* nav: bubbles instead of underlines + sliding pill */
.nav-links a.link{background-image:none!important;padding:.52rem .92rem;border-radius:999px;position:relative;z-index:1;transition:color .3s ease}
.nav-links{position:relative;gap:.4rem}
.nav-links a.link.here{color:var(--ink)}
.nav-pill{position:absolute;top:50%;left:0;height:34px;transform:translateY(-50%);border-radius:999px;display:none;
  background:var(--glass);border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 1px var(--spec2),0 6px 18px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(15px) saturate(1.5);backdrop-filter:blur(15px) saturate(1.5);
  opacity:0;pointer-events:none;z-index:0;
  transition:left .45s cubic-bezier(.22,.9,.26,1),width .45s cubic-bezier(.22,.9,.26,1),opacity .28s ease}
html[data-theme="light"] .nav-pill{background:rgba(255,255,255,.68);border-color:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 1px #fff,inset 0 0 0 1px rgba(23,67,242,.07),0 8px 20px rgba(36,45,82,.1)}
@media(min-width:821px){.nav-pill{display:block}}
.nav-links.pill-on .nav-pill{opacity:1}
.legal a{background-image:none!important;border-radius:999px;padding:.4rem .7rem;transition:color .3s ease,background-color .3s ease}
.legal a:hover{color:var(--ink);background-color:var(--glass)}
/* theme toggle pill */
.theme-tg{width:64px;height:30px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  position:relative;display:inline-flex;cursor:pointer;color:var(--mute);flex:none;
  box-shadow:inset 0 1px 1px var(--spec2);transition:border-color .3s;margin-left:.55rem;padding:0}
.theme-tg:hover{border-color:var(--blue)}
.theme-tg svg{width:13px;height:13px;position:absolute;top:50%;transform:translateY(-50%);z-index:1;transition:color .35s,opacity .35s}
.theme-tg .i-moon{left:7.5px;color:var(--ink)}
.theme-tg .i-sun{right:7.5px;opacity:.45}
html[data-theme="light"] .theme-tg .i-sun{opacity:1;color:var(--ink)}
html[data-theme="light"] .theme-tg .i-moon{opacity:.45}
.theme-tg .kn{position:absolute;top:1px;left:1px;width:26px;height:26px;border-radius:999px;background:var(--panel-glass);
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 1px var(--spec2),0 2px 8px rgba(0,0,0,.28);
  transition:transform .5s cubic-bezier(.22,.9,.26,1)}
html[data-theme="light"] .theme-tg .kn{transform:translateX(36px)}
/* logos on dark: invert text-marks, brighten box-marks */
html:not([data-theme="light"]) .marq-track img{filter:grayscale(1) invert(1) brightness(1.15);opacity:.72}
html:not([data-theme="light"]) .marq-track img[alt="GetJacked"],
html:not([data-theme="light"]) .marq-track img[alt="Gamer Supps"],
html:not([data-theme="light"]) .marq-track img[alt="Sanctum"]{filter:grayscale(1) brightness(1.65) contrast(1.05);opacity:.85}
html:not([data-theme="light"]) .marq-track img:hover{opacity:1}
html:not([data-theme="light"]) .lg2 .blu{opacity:0!important}
html:not([data-theme="light"]) .f-logos img{filter:grayscale(1) invert(1) brightness(1.2);opacity:.7}
/* hero mark pointer light - oversized so the glow never clips */
.hero-mark{position:relative}
.hero-mark::after{content:"";position:absolute;inset:-120px;pointer-events:none;z-index:2;
  background:radial-gradient(430px 380px at calc(120px + (100% - 240px) * var(--mxr,.5)) calc(120px + (100% - 240px) * var(--myr,.5)),var(--spot,rgba(23,67,242,.09)),transparent 70%);
  opacity:0;transition:opacity .5s ease}
.hero-mark:hover::after{opacity:1}
html:not([data-theme="light"]) .hero-mark::after{--spot:rgba(107,132,255,.15)}
/* trail: identical shape, white on dark */
html:not([data-theme="light"]) .cursor-trail{background:radial-gradient(circle, rgba(255,255,255,.62), rgba(255,255,255,.24) 55%, transparent 78%)}
/* cursor: inverts what is under it, in black and white */
#cursor{filter:none!important;background:#fff;mix-blend-mode:difference;
  -webkit-backdrop-filter:grayscale(1);backdrop-filter:grayscale(1);
  -webkit-mask:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 132%22%3E%3Cpath d=%22M50 16 L82 74 L18 74 Z%22 stroke=%22%23000%22 stroke-width=%2214%22 stroke-linejoin=%22round%22 fill=%22%23000%22/%3E%3Ccircle cx=%2250%22 cy=%22107%22 r=%2213%22 fill=%22%23000%22/%3E%3C/svg%3E') center/contain no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 132%22%3E%3Cpath d=%22M50 16 L82 74 L18 74 Z%22 stroke=%22%23000%22 stroke-width=%2214%22 stroke-linejoin=%22round%22 fill=%22%23000%22/%3E%3Ccircle cx=%2250%22 cy=%22107%22 r=%2213%22 fill=%22%23000%22/%3E%3C/svg%3E') center/contain no-repeat}
#cursor svg{opacity:0}