:root{
  --bg:#0d0318;
  --bg-2:#1a062b;
  --surface:rgba(255,255,255,0.04);
  --surface-hover:rgba(255,255,255,0.08);
  --border:rgba(255,210,251,0.14);
  --border-hover:rgba(255,43,218,0.55);
  --text:#fff1ff;
  --text-muted:#c9a8e0;
  --neon-pink:#ff2bda;
  --neon-purple:#a93cff;
  --cheese:#ffcb17;
  --cheese-deep:#f5a623;
  --font-display:'Cabinet Grotesk','Arial Black',sans-serif;
  --font-body:'Satoshi',Arial,sans-serif;
  --radius:18px;
  --radius-pill:9999px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:none;text-size-adjust:none}
body{
  min-height:100dvh;
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(60% 50% at 20% 10%, rgba(255,43,218,0.22), transparent 60%),
    radial-gradient(50% 45% at 80% 0%, rgba(169,60,255,0.22), transparent 60%),
    radial-gradient(70% 55% at 50% 110%, rgba(255,203,23,0.10), transparent 70%),
    linear-gradient(180deg, #140320 0%, var(--bg) 35%, #07010f 100%);
  background-attachment:fixed;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1.5rem,5vw,3rem) 1rem;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.stage{
  width:100%;
  max-width:480px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.25rem;
}

.mascot{
  width:clamp(180px,42vw,240px);
  aspect-ratio:1/1;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  filter:drop-shadow(0 0 30px rgba(255,43,218,0.35)) drop-shadow(0 0 60px rgba(169,60,255,0.25));
  transition:transform 400ms cubic-bezier(.2,.8,.2,1);
}
.mascot:hover{transform:scale(1.04) rotate(-2deg)}
.mascot img{width:100%;height:100%;border-radius:50%;object-fit:cover}

.wordmark{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.4rem,9vw,3.6rem);
  letter-spacing:-0.03em;
  line-height:0.95;
  display:flex;
  flex-direction:column;
  gap:0.1em;
  text-transform:uppercase;
  background:linear-gradient(180deg,var(--cheese) 40%,var(--cheese-deep));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 24px rgba(255,203,23,0.25);
  margin-top:0.25rem;
}
.wordmark span{display:block}

.tagline{
  font-size:clamp(0.95rem,2.4vw,1.05rem);
  font-weight:500;
  color:var(--text-muted);
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin-top:-0.25rem;
}

.links{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  margin-top:0.5rem;
}

.link{
  position:relative;
  display:grid;
  grid-template-columns:1.4rem 1fr 1.4rem;
  align-items:center;
  gap:0.85rem;
  padding:1rem 1.25rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  letter-spacing:0.01em;
  color:var(--text);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.link span{text-align:left}
.link svg{width:1.4rem;height:1.4rem}
.link:hover,.link:focus-visible{
  transform:translateY(-2px);
  background:var(--surface-hover);
  border-color:var(--border-hover);
  box-shadow:0 8px 28px rgba(255,43,218,0.18), 0 0 0 1px rgba(255,43,218,0.25);
  outline:none;
}
.link::after{
  content:"";
  width:0.4rem;
  height:0.4rem;
  border-top:2px solid var(--text-muted);
  border-right:2px solid var(--text-muted);
  transform:rotate(45deg);
  justify-self:end;
  margin-right:0.2rem;
  opacity:0.7;
  transition:opacity 200ms ease, transform 200ms ease;
}
.link:hover::after{opacity:1;transform:rotate(45deg) translate(2px,-2px)}

.link-accent{
  background:linear-gradient(135deg, rgba(255,43,218,0.18), rgba(255,203,23,0.18));
  border-color:rgba(255,203,23,0.35);
  color:var(--cheese);
}
.link-accent:hover,.link-accent:focus-visible{
  background:linear-gradient(135deg, rgba(255,43,218,0.28), rgba(255,203,23,0.28));
  border-color:rgba(255,203,23,0.7);
  box-shadow:0 8px 28px rgba(255,203,23,0.25), 0 0 0 1px rgba(255,203,23,0.35);
}

.footer{
  margin-top:1.5rem;
  font-size:0.8rem;
  color:var(--text-muted);
  opacity:0.7;
  letter-spacing:0.05em;
}

@media (max-width: 420px){
  .link{padding:0.9rem 1rem;font-size:0.95rem}
  .stage{gap:1rem}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}