:root{
  --bg:#DCD9F0; --bg2:#C6C1E6; --card:#F3F1FF; --ink:#120B2E; --muted:#3F3866;
  --blue:#2F3FE0; --violet:#7A22D6; --pink:#C4177D; --cyan:#0A7F96;
  --g1:#120B2E; --g2:#2F3FE0; --g3:#7A22D6; --on:#FFFFFF;
  --tag:'Permanent Marker','Marker Felt',cursive; --wet:'Rubik Wet Paint','Permanent Marker',cursive;
  --body:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#07061A; --bg2:#0E0B2B; --card:#120F33; --ink:#ECE9FF; --muted:#A9A3D6;
    --blue:#3D5BFF; --violet:#A233FF; --pink:#FF3DBE; --cyan:#2DE7F5;
    --g1:#E4E9FA; --g2:#3D5BFF; --g3:#A233FF; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#07061A; --bg2:#0E0B2B; --card:#120F33; --ink:#ECE9FF; --muted:#A9A3D6;
  --blue:#3D5BFF; --violet:#A233FF; --pink:#FF3DBE; --cyan:#2DE7F5;
  --g1:#E4E9FA; --g2:#3D5BFF; --g3:#A233FF; color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;color:var(--ink);font:500 1.25rem/1.4 var(--body);overflow-x:hidden;background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 60% 45% at 8% 6%,color-mix(in srgb,var(--violet) 40%,transparent),transparent 70%),
    radial-gradient(ellipse 55% 40% at 96% 38%,color-mix(in srgb,var(--blue) 38%,transparent),transparent 70%),
    radial-gradient(ellipse 60% 35% at 40% 104%,color-mix(in srgb,var(--cyan) 26%,transparent),transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.28'/></svg>"),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(2rem,6vw,4.5rem) 0 clamp(2rem,5vw,3.5rem)}
.emblem{display:block;width:min(100%,500px);height:auto;margin:0 0 .4rem -.6rem;
  filter:drop-shadow(0 0 22px color-mix(in srgb,var(--violet) 55%,transparent)) drop-shadow(0 0 56px color-mix(in srgb,var(--blue) 45%,transparent));
  animation:flare 1.6s ease-out both}
@keyframes flare{from{opacity:0;transform:scale(.93);filter:brightness(2.4) saturate(1.6)}to{opacity:1}}
h1{display:inline-block;margin:0 0 1rem;font:400 clamp(2.4rem,6.5vw,3.9rem)/1 var(--tag);transform:rotate(-3deg);
  background:linear-gradient(180deg,var(--g1) 15%,var(--g2) 70%,var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--blue) 60%,transparent))}
.lead{font:700 clamp(1.5rem,3.2vw,2rem)/1.15 var(--body);text-transform:uppercase;max-width:22ch;margin:0 0 2rem}
.btn{display:inline-block;color:var(--on);font:400 1.7rem var(--tag);padding:.8rem 1.9rem;text-decoration:none;border-radius:6px;transform:rotate(-2deg);
  border:3px solid transparent;
  background:linear-gradient(135deg,var(--blue),var(--violet) 60%,var(--pink)) padding-box,linear-gradient(135deg,var(--cyan),var(--g1)) border-box;
  box-shadow:0 0 22px color-mix(in srgb,var(--violet) 60%,transparent),0 6px 0 color-mix(in srgb,var(--ink) 55%,transparent);
  transition:transform .12s,box-shadow .12s}
.btn:hover{transform:rotate(-2deg) translateY(2px);box-shadow:0 0 34px color-mix(in srgb,var(--pink) 65%,transparent),0 4px 0 color-mix(in srgb,var(--ink) 55%,transparent)}
.btn:active{transform:rotate(-2deg) translateY(6px);box-shadow:0 0 18px color-mix(in srgb,var(--violet) 60%,transparent),0 0 0}
.note{display:block;margin-top:1.2rem;font:500 1.1rem var(--body);color:var(--muted)}

/* neon panel base */
.neon,.card,.win{
  border:2px solid transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--cyan),var(--blue) 45%,var(--violet) 75%,var(--pink)) border-box;
  box-shadow:0 0 26px color-mix(in srgb,var(--violet) 32%,transparent)}

/* mock discord */
.poster{transform:rotate(2deg)}
.win{display:grid;grid-template-columns:8.5rem 1fr;min-height:22rem;border-radius:10px;overflow:hidden}
.chan{background:color-mix(in srgb,var(--bg) 70%,#000);padding:.9rem .7rem;font-size:1.05rem;color:#C7C3EE}
.chan b{display:block;font:400 1.1rem var(--tag);color:var(--cyan);margin-bottom:.8rem;text-shadow:0 0 10px color-mix(in srgb,var(--cyan) 60%,transparent)}
.chan p{margin:.1rem 0;padding:.2rem .45rem;opacity:.7;border-radius:4px}
.chan p.on{opacity:1;background:linear-gradient(90deg,var(--blue),var(--violet));color:#fff;font-weight:700}
.chat{padding:.9rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.8rem;font-size:1.05rem}
.msg{display:flex;gap:.6rem;align-items:flex-start;opacity:0;transform:translateY(6px);animation:pop .35s forwards}
.msg:nth-child(1){animation-delay:1.2s}.msg:nth-child(2){animation-delay:2s}.msg:nth-child(3){animation-delay:2.8s}.msg:nth-child(4){animation-delay:3.6s}
@keyframes pop{to{opacity:1;transform:none}}
.av{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font:400 .85rem var(--tag);color:#07061A;box-shadow:0 0 12px currentColor}
.msg strong{display:block;font:700 1rem var(--body);text-transform:uppercase;color:var(--cyan)}
.msg span{display:block;line-height:1.2}

/* chain divider */
.chain{height:28px;opacity:.75;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='28'><g fill='none' stroke-width='3'><rect x='3' y='4' width='30' height='20' rx='10' stroke='%239AA8E8'/><rect x='21' y='4' width='30' height='20' rx='10' stroke='%236C7BD6'/></g></svg>") repeat-x center}

/* sections */
section{padding:clamp(2rem,5vw,3.5rem) 0}
h2{margin:0 0 2.2rem;font:400 clamp(2rem,5.5vw,3.4rem)/1.05 var(--wet);color:var(--cyan);text-shadow:0 0 20px color-mix(in srgb,var(--cyan) 50%,transparent);padding-bottom:.9rem}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.4rem}
.card{grid-column:span 2;border-radius:10px;padding:1.3rem 1.3rem 1.5rem}
.card.big{grid-column:span 3}
.card h3{margin:0 0 .4rem;font:400 1.7rem/1.05 var(--tag);color:var(--pink);text-shadow:0 0 14px color-mix(in srgb,var(--pink) 45%,transparent)}
.card:nth-child(3n+2) h3{color:var(--cyan);text-shadow:0 0 14px color-mix(in srgb,var(--cyan) 45%,transparent)}
.card:nth-child(3n) h3{color:var(--violet);text-shadow:0 0 14px color-mix(in srgb,var(--violet) 55%,transparent)}
.card p{margin:0;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:.9rem}
.tags span{background:var(--card);border:2px solid var(--blue);border-radius:6px;padding:.3rem 1rem;font:700 1.3rem var(--body);text-transform:uppercase;box-shadow:0 0 14px color-mix(in srgb,var(--blue) 45%,transparent)}
.tags span:nth-child(3n){border-color:var(--pink);box-shadow:0 0 14px color-mix(in srgb,var(--pink) 45%,transparent)}
.tags span:nth-child(3n+1){border-color:var(--cyan);box-shadow:0 0 14px color-mix(in srgb,var(--cyan) 40%,transparent)}

/* cta */
.cta{text-align:center;margin:1.5rem 0 3rem;padding:clamp(2rem,6vw,4rem);border-radius:14px}
.cta h2{margin:0 auto 1rem;max-width:14ch;padding:0}
.cta p{margin:0 auto 2rem;max-width:36ch;font-size:1.4rem;color:var(--muted)}
footer{padding:0 0 2.5rem;font-size:1.05rem;color:var(--muted)}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .card,.card.big{grid-column:span 6}
  .emblem{width:min(100%,400px)}
}
@media (max-width:480px){.win{grid-template-columns:1fr}.chan{display:none}}
@media (prefers-reduced-motion:reduce){
  .msg{animation:none;opacity:1;transform:none}
  .emblem{animation:none}
  .btn{transition:none}
}