/* ---------- Base / Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
:root { color-scheme: light dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Fredoka", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Palette tuned to the reference logo */
:root{
  --electric-blue: 214 86% 61%; /* primary */
  --violet:        250 60% 41%;
  --magenta:       289 86% 58%;
  --ice:           222 58% 87%;

  /* Dynamic surfaces */
  --bg: hsl(0 0% 100%);
  --ink: 230 6% 8%;
  --card-bg: hsl(0 0% 100% / .7);
  --text: hsl(232 20% 12%);
  --muted: hsl(232 20% 40%);
  --border: 220 15% 88%;
}
@media (prefers-color-scheme: dark) {
  :root{
    --bg: hsl(230 50% 6%);
    --card-bg: hsl(230 40% 10% / .7);
    --text: hsl(223 28% 88%);
    --muted: hsl(223 20% 75% / .8);
    --border: 220 60% 96% / .12;
  }
}

/* ---------- Layout ---------- */
.wrap { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 8vmin clamp(16px, 3vmin, 48px); overflow: hidden; }
.hero { position: relative; z-index: 1; max-width: 980px; width: min(92vw, 980px); text-align: center; }

/* ---------- Background Blooms ---------- */
.blooms { position: absolute; inset: -10%; pointer-events: none; z-index: 0; filter: blur(clamp(24px, 6vmax, 96px)) saturate(145%) brightness(1.06); opacity: .9; }
.blob { position: absolute; width: clamp(40vmin, 70vmax, 120vmin); height: clamp(40vmin, 70vmax, 120vmin); border-radius:50%; will-change: transform, filter, opacity; transform: translate3d(0,0,0); background:
  radial-gradient(60% 60% at 50% 50%, hsl(var(--hue) / .95) 0%, hsl(var(--hue) / .75) 32%, hsl(var(--hue) / .35) 55%, transparent 70%),
  radial-gradient(90% 90% at 55% 45%, hsl(var(--ice) / .25), transparent 60%);
  animation: floaty var(--dur, 12s) ease-in-out infinite; }
.blob--blue   { --hue: var(--electric-blue); top: -28%; left: -12%; --dur: 11s; }
.blob--violet { --hue: var(--violet);        top: -38%; right: -10%; --dur: 13s; }
.blob--pink   { --hue: var(--magenta);       bottom: -30%; left: 34%; --dur: 15s; }
@keyframes floaty { 0% { transform: translateY(0) rotate(0deg) scale(1); } 50% { transform: translateY(-12px) rotate(.4deg) scale(1.02); } 100% { transform: translateY(0) rotate(0deg) scale(1); } }

/* ---------- Title & Spark FX ---------- */
.kicker { display: block; font-size: clamp(.9rem, 1.2vw + .4rem, 1.2rem); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--ice)); opacity: .9; margin-bottom: .25rem; }
.brand { display: inline-block; margin: 0 0 .75rem 0; font-weight: 800; font-size: clamp(2.6rem, 6.4vw + .5rem, 7.2rem); line-height: 1.03; letter-spacing: -0.01em; background: linear-gradient(180deg, hsl(var(--electric-blue)) 10%, hsl(var(--electric-blue) / .95) 38%, hsl(var(--violet)) 60%, hsl(var(--magenta)) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 24px hsl(var(--electric-blue) / .35), 0 0 48px hsl(var(--magenta) / .35); }
.lead { margin: 0 auto 1.1rem; max-width: 60ch; color: var(--muted); font-size: clamp(1.05rem, 1.4vw + .6rem, 1.35rem); }

.status { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:999px; font-weight:800;background: hsl(var(--electric-blue) / .12); color: hsl(var(--electric-blue)); border: 1px solid hsl(var(--electric-blue) / .35); }
.status i { width:.65rem; height:.65rem; border-radius:999px; background: hsl(var(--magenta)); box-shadow: 0 0 0 .2rem hsl(var(--magenta) / .25); }

.sparks { position: absolute; inset: 0 auto auto 50%; width: min(86vw, 900px); height: auto; transform: translateX(-50%);filter: drop-shadow(0 0 12px hsl(var(--electric-blue) / .45)) drop-shadow(0 0 24px hsl(var(--magenta) / .25)); opacity: .85; pointer-events: none; }
.sparks path { fill: none; stroke: url(#sparkGrad); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120 260; animation: dash 6s linear infinite; }
.sparks path:nth-child(2) { animation-duration: 7.5s; stroke-width: 2; opacity:.9; }
.sparks path:nth-child(3) { animation-duration: 9s;   stroke-width: 1.6; opacity:.75; }
@keyframes dash { to { stroke-dashoffset: -380; } }

/* ---------- CTA Card ---------- */
.card { margin: 1.25rem auto 0; backdrop-filter: blur(8px) saturate(140%); background: var(--card-bg); border-radius: 22px; border: 1px solid hsl(var(--border)); box-shadow: 0 10px 30px -10px hsl(var(--electric-blue) / .25), 0 20px 60px -20px hsl(var(--magenta) / .20); padding: clamp(16px, 2.8vmin, 24px); max-width: 720px; }

.actions { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.btn { --grad: linear-gradient(90deg, hsl(var(--electric-blue)), hsl(var(--magenta)) 85%); appearance: none; border: none; cursor: pointer; font: inherit; font-weight: 800; color: #0b1020; padding: 14px 18px; border-radius: 14px; background: var(--grad) padding-box, #fff border-box; box-shadow: 0 6px 18px -6px hsl(var(--magenta) / .45), 0 2px 6px hsl(var(--electric-blue) / .35); transition: transform .12s ease, box-shadow .2s ease, filter .2s ease; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn:active { transform: translateY(0); filter: brightness(.98); }

.discord { background: #5865F2; color: white; box-shadow: 0 10px 20px -10px #5865F2; }
.discord:hover { filter: brightness(1.05); }
.discord svg { width: 20px; height: 20px; fill: currentColor; display:block; }

.preview { background: transparent; color: hsl(var(--electric-blue)); border: 1px solid hsl(var(--electric-blue) / .45); box-shadow: 0 6px 18px -12px hsl(var(--electric-blue) / .45), 0 2px 6px hsl(var(--electric-blue) / .25); }
.preview:hover { filter: none; background: hsl(var(--electric-blue) / .12); }
.preview:active { background: hsl(var(--electric-blue) / .18); }

.legal { margin-top: 12px; font-size: .9rem; color: var(--muted); }