:root {
  --bg: #14062e;
  --ink: #fff6ff;
  --muted: #d9c8f5;
  --pink: #ff3da5;
  --gold: #ffd66b;
  --aqua: #39d6ff;
  --violet: #8a2bff;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background: var(--bg);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Rounded", system-ui, sans-serif;
  overflow-x: hidden;
}
a { color: var(--gold); }
#glitter { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

/* Animated aurora blobs behind everything. */
.aurora { position: fixed; inset: -20%; z-index: 0; filter: blur(70px); opacity: .85; }
.aurora span { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; animation: drift 18s ease-in-out infinite alternate; }
.aurora span:nth-child(1) { background: radial-gradient(circle, #ff2e8a, transparent 65%); left: -10%; top: -5%; }
.aurora span:nth-child(2) { background: radial-gradient(circle, #6a1bff, transparent 65%); right: -15%; top: 20%; animation-duration: 22s; }
.aurora span:nth-child(3) { background: radial-gradient(circle, #0aa5d8, transparent 65%); left: 10%; bottom: -25%; animation-duration: 26s; }
@keyframes drift { to { transform: translate(8vmax, -6vmax) scale(1.15); } }

.wrap { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; padding: 48px 16px 32px; }
.hero { text-align: center; padding-top: 12px; }
.icon-wrap { display: inline-block; animation: float 4s ease-in-out infinite; }
.icon { width: 168px; height: 168px; border-radius: 38px; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 20px 70px rgba(255,61,165,.55), 0 0 120px rgba(57,214,255,.35); }
@keyframes float { 50% { transform: translateY(-12px) rotate(-2deg) scale(1.03); } }

.title {
  margin: 18px 0 6px; font-size: clamp(64px, 14vw, 120px); line-height: 1; font-weight: 900; letter-spacing: -2px;
  background: linear-gradient(100deg, #fff 0%, var(--gold) 25%, var(--pink) 50%, var(--aqua) 75%, #fff 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 6s linear infinite; filter: drop-shadow(0 6px 30px rgba(255,61,165,.45));
}
@keyframes sheen { to { background-position: -250% 0; } }
.tag { font-size: clamp(18px, 3.6vw, 22px); color: var(--muted); margin: 8px auto 26px; max-width: 560px; }
.tag em { color: var(--ink); font-style: normal; font-weight: 800; }

.ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 18px; font-weight: 800; line-height: 1; text-decoration: none; color: #fff;
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn:active { transform: scale(.96); }
.btn-main { background: linear-gradient(135deg, #ff3da5, #8a2bff 60%, #39d6ff); box-shadow: 0 10px 40px rgba(255,61,165,.5); }
.btn-main:hover { box-shadow: 0 14px 54px rgba(255,61,165,.75); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); backdrop-filter: blur(8px); }
.shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-100%); animation: shine 2.8s ease-in-out infinite; }
@keyframes shine { 60%, 100% { transform: translateX(100%); } }
.hint { min-height: 1.5em; color: var(--muted); font-size: 15px; margin-top: 14px; }

.showcase { margin: 40px auto 8px; max-width: 560px; }
.showcase img { width: 100%; border-radius: 32px; box-shadow: 0 30px 90px rgba(0,0,0,.45), 0 0 80px rgba(138,43,255,.35); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 36px 0; }
.card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 20px; backdrop-filter: blur(10px); color: var(--muted); }
.card b { display: block; color: var(--ink); font-size: 19px; margin-bottom: 6px; }

.how { background: rgba(255,255,255,.06); border-radius: 24px; padding: 22px 24px; border: 1px solid rgba(255,255,255,.12); }
.how h2 { margin: 0 0 8px; }
.how ol { margin: 0; padding-left: 22px; color: var(--muted); }
.how b { color: var(--ink); }

footer { text-align: center; color: var(--muted); font-size: 14px; margin-top: 40px; }
footer a { color: var(--muted); }

/* Privacy page */
.doc { max-width: 760px; }
.doc h1 { font-size: 34px; }
.doc p, .doc li { color: var(--muted); }

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

.lang {
  position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 5;
  padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 800; color: #fff;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); backdrop-filter: blur(8px);
}

.tester { margin: 0 0 18px; padding: 22px 24px; border-radius: 24px; text-align: center;
  background: linear-gradient(135deg, rgba(255,61,165,.18), rgba(57,214,255,.14)); border: 1px solid rgba(255,255,255,.18); }
.tester h2 { margin: 0 0 6px; }
.tester p { color: var(--muted); margin: 0 auto 14px; max-width: 560px; }
.tester ol { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn-sm { padding: 13px 20px; font-size: 16px; }
.small { font-size: 14px; }