:root {
  --bg: #050508;
  --text: #ffffff;
  --muted: rgba(255,255,255,.62);
  --card: rgba(255,255,255,.055);
  --line: rgba(255,255,255,.1);
  --pink: #ff3dab; --orange: #ff9e33; --mint: #3dffcc; --blue: #4d7aff; --violet: #b34dff;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: Nunito, ui-rounded, system-ui, sans-serif; font-weight: 700; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; }

/* Aurora background */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.aurora span:nth-child(1) { width: 60vw; height: 60vw; left: 10vw; top: -35vw; background: var(--violet); }
.aurora span:nth-child(2) { width: 45vw; height: 45vw; right: -10vw; top: 30vh; background: var(--pink); opacity: .3; animation-duration: 22s; }
.aurora span:nth-child(3) { width: 40vw; height: 40vw; left: -12vw; top: 80vh; background: var(--blue); opacity: .3; animation-duration: 26s; }
@keyframes drift { to { transform: translate(6vw, 4vh) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .aurora span { animation: none; } html { scroll-behavior: auto; } }

.grad { background: linear-gradient(90deg, var(--pink), var(--orange) 35%, var(--mint) 70%, var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Nav */
.nav { position: sticky; top: 12px; z-index: 10; margin: 12px auto 0; width: min(1100px, calc(100% - 32px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px 10px 18px; border-radius: 22px; background: rgba(12,12,18,.6); backdrop-filter: blur(18px); border: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 20px; }
.brand img { border-radius: 9px; }
.nav nav { display: flex; gap: 26px; color: var(--muted); font-size: 15px; }
.nav nav a:hover { color: var(--text); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 900; font-size: 17px; color: #fff; background: linear-gradient(135deg, var(--pink), var(--violet) 55%, var(--blue)); box-shadow: 0 10px 40px rgba(255,61,171,.35); transition: transform .35s var(--spring), box-shadow .3s; }
.btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 50px rgba(255,61,171,.5); }
.btn:active { transform: scale(.94); transition-duration: .1s; }
.btn-ghost { background: rgba(255,255,255,.08); box-shadow: none; border: 1px solid var(--line); }
.btn-ghost:hover { background: rgba(255,255,255,.14); box-shadow: none; }
.btn-small { padding: 10px 18px; font-size: 14px; }

section { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 110px 0 0; scroll-margin-top: -10px; }
h1 { font-size: clamp(44px, 7.5vw, 92px); font-weight: 900; line-height: 1.02; letter-spacing: -.035em; }
h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; text-align: center; }
h3 { font-size: 20px; font-weight: 900; }
.eyebrow { color: var(--mint); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }
.lead, .section-lead { color: var(--muted); font-size: clamp(17px, 2vw, 21px); max-width: 680px; margin: 22px auto 0; }
.section-lead { text-align: center; margin-bottom: 46px; }
.left { text-align: left; margin-left: 0; }
.fine { color: rgba(255,255,255,.45); font-size: 14px; margin-top: 14px; }

/* Hero */
.hero { text-align: center; padding-top: 90px; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* Demo screen + notch */
.screen { position: relative; margin: 60px auto 0; max-width: 900px; height: 360px; border-radius: 26px; border: 10px solid #18181d; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.6);
  background: radial-gradient(120% 90% at 20% 115%, #ff7a59 0%, transparent 45%), radial-gradient(90% 80% at 85% 100%, #7b5cff 0%, transparent 50%), radial-gradient(80% 70% at 50% 30%, #1d3b8f 0%, transparent 70%), linear-gradient(180deg, #0d1736, #251248); }
.menubar { display: flex; justify-content: space-between; padding: 0 18px; height: 34px; align-items: center; font-size: 13px; color: rgba(255,255,255,.9); background: rgba(10,10,20,.35); backdrop-filter: blur(10px); }
.hint { position: absolute; bottom: 18px; left: 0; right: 0; color: rgba(255,255,255,.75); font-size: 15px; }
.notch { position: absolute; top: 0; left: 50%; translate: -50% 0; width: 190px; height: 34px; background: #000; border-radius: 0 0 14px 14px; cursor: pointer; outline: none;
  transition: width .55s var(--spring), height .55s var(--spring), border-radius .5s var(--ease), box-shadow .4s; }
.notch.playing { width: 290px; }
.notch.open { width: min(560px, 92%); height: 196px; border-radius: 0 0 34px 34px; box-shadow: 0 0 0 1.5px rgba(255,61,171,.7), 0 20px 60px rgba(255,61,171,.35), 0 0 80px rgba(77,122,255,.25); }
.ears { position: absolute; inset: 0 0 auto 0; height: 34px; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; transition: opacity .2s; }
.notch.open .ears { opacity: 0; }
.mini-cover { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, var(--pink), var(--violet)); }
.eq { display: inline-flex; gap: 3px; align-items: center; height: 16px; }
.eq i { width: 3px; height: 100%; border-radius: 3px; background: linear-gradient(white, var(--pink)); animation: eq .5s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-duration: .38s; } .eq i:nth-child(3) { animation-duration: .6s; } .eq i:nth-child(4) { animation-duration: .45s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.panel { position: absolute; inset: 0; padding: 48px 26px 22px; display: flex; gap: 20px; align-items: center; opacity: 0; filter: blur(10px); transform: scale(.88); transform-origin: top; transition: opacity .25s, filter .35s, transform .5s var(--spring); }
.notch.open .panel { opacity: 1; filter: blur(0); transform: none; transition-delay: .08s; }
.cover { width: 112px; height: 112px; flex: none; border-radius: 18px; background: radial-gradient(circle at 70% 75%, rgba(255,255,255,.25) 0 32%, transparent 33%), radial-gradient(circle at 30% 28%, rgba(0,0,0,.25) 0 20%, transparent 21%), linear-gradient(135deg, var(--pink), var(--violet)); box-shadow: 0 0 40px rgba(255,61,171,.5); }
.track { flex: 1; text-align: left; }
.track .row { display: flex; justify-content: space-between; align-items: center; font-size: 20px; }
.track small { color: var(--muted); font-size: 14px; }
.bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.15); margin: 14px 0 12px; overflow: hidden; }
.fill { width: 42%; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--pink), #fff); animation: progress 30s linear infinite; }
@keyframes progress { from { width: 30%; } to { width: 100%; } }
.controls { display: flex; justify-content: center; gap: 24px; align-items: center; font-size: 17px; }
.controls .play { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(#fff, var(--pink)); color: #000; display: grid; place-items: center; font-size: 14px; box-shadow: 0 0 20px rgba(255,61,171,.6); }

/* Video */
.video-wrap { padding-top: 90px; }
.video-wrap video { width: 100%; border-radius: 24px; border: 1px solid var(--line); box-shadow: 0 40px 120px rgba(0,0,0,.6); background: #000; }

/* Feature grid */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 24px; transition: transform .45s var(--spring), background .3s, border-color .3s; }
.card:hover { transform: translateY(-6px) rotate(-.4deg); background: rgba(255,255,255,.09); border-color: rgba(255,61,171,.45); }
.card.big { grid-column: span 2; }
.card p { color: var(--muted); font-size: 15px; margin-top: 6px; }
.badge { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; margin-bottom: 16px; }
.b-pink { background: linear-gradient(135deg, var(--pink), var(--orange)); box-shadow: 0 0 30px rgba(255,61,171,.35); }
.b-blue { background: linear-gradient(135deg, var(--blue), var(--violet)); box-shadow: 0 0 30px rgba(77,122,255,.35); }
.b-violet { background: linear-gradient(135deg, var(--violet), var(--pink)); box-shadow: 0 0 30px rgba(179,77,255,.35); }
.b-orange { background: linear-gradient(135deg, var(--orange), var(--pink)); box-shadow: 0 0 30px rgba(255,158,51,.35); }
.b-mint { background: linear-gradient(135deg, var(--mint), var(--blue)); box-shadow: 0 0 30px rgba(61,255,204,.3); }

/* Feel / bubble wrap */
.feel { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.feel h2 { text-align: left; }
.packs { display: flex; gap: 10px; flex-wrap: wrap; }
.pack { font: inherit; font-weight: 900; color: #fff; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.07); cursor: pointer; transition: transform .35s var(--spring), background .2s; }
.pack:hover { transform: scale(1.05); }
.pack.active { background: linear-gradient(135deg, var(--pink), var(--violet)); border-color: transparent; box-shadow: 0 0 30px rgba(255,61,171,.45); }
.wrap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; padding: 22px; border-radius: 28px; background: var(--card); border: 1px solid var(--line); touch-action: none; user-select: none; }
.bubble { aspect-ratio: 1; border-radius: 50%; position: relative; cursor: pointer; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(255,255,255,.08) 70%); border: 1.5px solid rgba(255,255,255,.3); transition: transform .3s var(--spring), background .2s; }
.bubble::after { content: ""; position: absolute; width: 26%; height: 15%; left: 22%; top: 18%; border-radius: 50%; background: rgba(255,255,255,.85); transform: rotate(-30deg); }
.bubble:hover { transform: scale(1.06); }
.bubble.popped { transform: scale(.88, .6); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.1), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.1); transition-duration: .18s; }
.bubble.popped::after { display: none; }
.spark { position: fixed; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; z-index: 50; animation: spark .6s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 30px; border-radius: 28px; background: var(--card); border: 1px solid var(--line); transition: transform .45s var(--spring); }
.plan:hover { transform: translateY(-6px); }
.plan.featured { background: linear-gradient(160deg, rgba(255,61,171,.18), rgba(77,122,255,.12)); border-color: rgba(255,61,171,.6); box-shadow: 0 30px 80px rgba(255,61,171,.2); transform: scale(1.03); }
.plan.featured:hover { transform: scale(1.03) translateY(-6px); }
.tag { position: absolute; top: -13px; left: 50%; translate: -50% 0; white-space: nowrap; font-size: 12px; font-weight: 900; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--pink), var(--orange)); }
.price { display: flex; align-items: baseline; gap: 8px; }
.price b { font-size: 48px; font-weight: 900; letter-spacing: -.03em; }
.price s { color: rgba(255,255,255,.4); font-size: 20px; }
.price span { color: var(--muted); }
.plan ul { list-style: none; padding: 0; display: grid; gap: 8px; color: var(--muted); flex: 1; }
.plan li::before { content: "✓  "; color: var(--mint); font-weight: 900; }

/* Waitlist */
.waitlist { text-align: center; }
.waitlist img { margin: 0 auto 20px; filter: drop-shadow(0 20px 50px rgba(255,61,171,.45)); }
#waitForm { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: -10px; }
#waitForm input { width: min(360px, 100%); padding: 14px 20px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.07); color: #fff; font: inherit; font-size: 17px; outline: none; transition: border-color .2s, box-shadow .2s; }
#waitForm input:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255,61,171,.2); }
.form-msg { margin-top: 14px; min-height: 24px; color: var(--mint); }
.form-msg.err { color: #ff8a8a; }

/* FAQ */
.faq { max-width: 760px; margin: 40px auto 0; display: grid; gap: 12px; }
details { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; }
summary { cursor: pointer; font-weight: 900; font-size: 18px; list-style: none; display: flex; justify-content: space-between; }
summary::after { content: "+"; color: var(--pink); transition: transform .3s var(--spring); }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--muted); margin-top: 10px; }

footer { width: min(1100px, calc(100% - 32px)); margin: 120px auto 40px; padding-top: 30px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; color: rgba(255,255,255,.5); font-size: 14px; }
footer a:hover { color: #fff; }

/* Legal pages */
.legal { max-width: 760px; padding-top: 60px; }
.legal h1 { font-size: 48px; margin-bottom: 10px; }
.legal h2 { text-align: left; font-size: 24px; margin: 30px 0 8px; }
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 20px; }

/* Responsive */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .plans, .feel { grid-template-columns: 1fr; }
  .plan.featured { transform: none; }
  .feel h2 { text-align: center; }
  .feel .left { text-align: center; margin: 22px auto 0; }
  .packs { justify-content: center; }
  .feel .fine { text-align: center; }
}
@media (max-width: 640px) {
  .nav nav { display: none; }
  section { padding-top: 80px; }
  .grid { grid-template-columns: 1fr; }
  .card.big { grid-column: auto; }
  .screen { height: 300px; }
  .notch.open { height: 210px; }
  .panel { flex-direction: column; padding: 40px 16px 14px; gap: 8px; }
  .cover { width: 60px; height: 60px; }
  .wrap { grid-template-columns: repeat(5, 1fr); }
}