:root {
  --bg: #170634;
  --ink: #fff6ff;
  --muted: #dacbf5;
  --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; }

.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, #c21bd6, transparent 65%); left: -10%; top: -5%; }
.aurora span:nth-child(2) { background: radial-gradient(circle, #5a1bff, transparent 65%); right: -15%; top: 20%; animation-duration: 22s; }
.aurora span:nth-child(3) { background: radial-gradient(circle, #0a8ad8, transparent 65%); left: 10%; bottom: -25%; animation-duration: 26s; }
@keyframes drift { to { transform: translate(8vmax, -6vmax) scale(1.15); } }

.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);
}

.wrap { position: relative; z-index: 2; max-width: 1040px; margin: 0 auto; padding: 48px 16px 32px; }
.hero { text-align: center; }
.logo-wrap { display: inline-block; animation: float 4.5s ease-in-out infinite; }
.logo { width: 200px; height: 200px; border-radius: 46px; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 24px 80px rgba(194,27,214,.55), 0 0 140px rgba(57,214,255,.3); }
@keyframes float { 50% { transform: translateY(-12px) rotate(2deg) scale(1.03); } }

.title {
  margin: 18px 0 6px; font-size: clamp(56px, 13vw, 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(194,27,214,.5));
}
@keyframes sheen { to { background-position: -250% 0; } }
.tag { font-size: clamp(18px, 3.6vw, 22px); color: var(--muted); margin: 8px auto 0; max-width: 600px; }
.tag em { color: var(--ink); font-style: normal; font-weight: 800; }

.section-title { text-align: center; font-size: clamp(26px, 5vw, 34px); margin: 56px 0 18px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.card {
  position: relative; display: flex; flex-direction: column;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 26px; padding: 18px;
  backdrop-filter: blur(10px); transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(194,27,214,.35); }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.card h3 { margin: 14px 0 4px; font-size: 22px; }
.card p { margin: 0 0 14px; color: var(--muted); flex: 1; }
.badge { position: absolute; top: 28px; left: 28px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: linear-gradient(135deg, var(--pink), var(--violet)); box-shadow: 0 4px 16px rgba(255,61,165,.5); }
.badge.app { background: linear-gradient(135deg, #2f80ff, #22c4ea); box-shadow: 0 4px 16px rgba(34,196,234,.5); }
.badge.roblox { background: linear-gradient(135deg, #ff8a1f, #ffc94d); color: #2a1400; box-shadow: 0 4px 16px rgba(255,170,40,.5); }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.btn {
  display: inline-flex; align-items: center; padding: 11px 16px; border-radius: 999px; text-decoration: none;
  font-weight: 800; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, #ff3da5, #8a2bff 60%, #39d6ff); box-shadow: 0 8px 26px rgba(255,61,165,.4);
  transition: transform .15s ease;
}
.btn:active { transform: scale(.96); }
.btn.ghost { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }

.about { margin: 48px auto 0; max-width: 720px; text-align: center; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); border-radius: 26px; padding: 22px 24px; }
.about h2 { margin: 0 0 8px; }
.about p { color: var(--muted); margin: 0; }

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

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