/* Tokens, reset, base, components, animations (public + pay pages). Only transform/opacity animate. */
:root {
  --bg: #0a0a14; --bg-2: #12121f; --text: #f3f2ff; --muted: #a9a8c4;
  --glass: rgba(255,255,255,.06); --glass-border: rgba(255,255,255,.14);
  --violet: #8b5cf6; --cyan: #22d3ee; --pink: #f472b6;
  --grad: linear-gradient(110deg, var(--violet), var(--cyan) 55%, var(--pink));
  --ok: #34d399; --err: #fb7185;
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px;
  --shadow: 0 10px 40px rgba(0,0,0,.45);
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem;
  --fs-sm: .875rem; --fs-md: 1rem; --fs-xl: clamp(1.25rem, 2.5vw, 1.6rem);
  --fs-hero: clamp(2.6rem, 8vw, 5.5rem);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f7f6ff; --bg-2: #ffffff; --text: #17142b; --muted: #55537a;
  --glass: rgba(255,255,255,.7); --glass-border: rgba(23,20,43,.12);
  --violet: #6d3df0; --cyan: #0891b2; --pink: #db2777;
  --shadow: 0 10px 40px rgba(60,40,140,.15);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; background: var(--bg); color: var(--text); font: 400 var(--fs-md)/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hero with animated gradient glow (transform + opacity only) */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: var(--s4) var(--s3); text-align: center; isolation: isolate; overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .45; will-change: transform; }
.hero::before { background: var(--violet); top: -25vmax; left: -15vmax; animation: drift 18s ease-in-out infinite alternate; }
.hero::after { background: var(--cyan); bottom: -30vmax; right: -20vmax; opacity: .3; animation: drift 22s ease-in-out infinite alternate-reverse; }
.hero__inner { max-width: 46rem; display: grid; gap: var(--s3); justify-items: center; }
.hero h1 { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -.03em; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: var(--fs-xl); color: var(--muted); max-width: 36rem; }

/* Components */
.glass { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-lg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow); }
.status { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .5rem 1.1rem; border-radius: 999px; font-size: var(--fs-sm); color: var(--muted); }
.status .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--muted); }
.status[data-state="loading"] .dot { animation: pulse 1.2s ease-in-out infinite; }
.status[data-state="ok"] { color: var(--ok); } .status[data-state="ok"] .dot { background: var(--ok); }
.status[data-state="error"] { color: var(--err); } .status[data-state="error"] .dot { background: var(--err); }
.toasts { position: fixed; z-index: 50; left: 50%; bottom: var(--s3); transform: translateX(-50%); display: grid; gap: var(--s1); width: min(92vw, 26rem); }
.toast { padding: .8rem 1rem; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--glass-border); box-shadow: var(--shadow); animation: rise .3s ease both; }
.toast[data-type="error"] { border-color: var(--err); } .toast[data-type="ok"] { border-color: var(--ok); }

/* Animations */
@keyframes drift { to { transform: translate3d(10vmax, 8vmax, 0) scale(1.15); } }
@keyframes pulse { 50% { opacity: .25; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}