@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap');
:root{--cyan:#23f3ff;--pink:#ff75c8;--white:#f5f7ff;--muted:#b6c1d9;--bg:#050712}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--white);font-family:'Be Vietnam Pro',sans-serif;overflow:hidden}
body{min-height:100svh;position:relative;background:radial-gradient(ellipse at 50% 115%,#17234b 0,transparent 52%),#050712;transition:background 1s ease}
.stars{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(1px 1px at 12% 22%,#fff 50%,transparent 60%),radial-gradient(2px 2px at 71% 16%,#8efaff 50%,transparent 60%),radial-gradient(1px 1px at 83% 67%,#ff9bda 50%,transparent 60%),radial-gradient(1px 1px at 32% 82%,#fff 50%,transparent 60%),radial-gradient(2px 2px at 58% 47%,#fff 50%,transparent 60%);background-size:320px 270px;opacity:.5;animation:twinkle 5s ease-in-out infinite alternate}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.stage{min-height:100svh;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5vh 8vw 7vh;text-align:center;isolation:isolate}
.eyebrow{position:absolute;top:7%;left:50%;transform:translateX(-50%);font-size:clamp(10px,1vw,13px);letter-spacing:.22em;color:#b8c8e5;opacity:.8;white-space:nowrap}
.content{position:relative;z-index:2;max-width:760px;animation:appear .75s ease both}
.kicker{font-size:clamp(10px,1.4vw,13px);font-weight:700;letter-spacing:.35em;color:var(--pink);margin:0 0 18px}
h1{font-size:clamp(28px,5.1vw,58px);line-height:1.24;letter-spacing:-.04em;margin:0 auto 18px;text-shadow:0 0 28px #4af6ff22;max-width:850px}
.subtext{font-size:clamp(13px,1.8vw,17px);line-height:1.9;color:var(--muted);max-width:590px;margin:0 auto}
.actions{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px}
.neon-btn{font:700 14px 'Be Vietnam Pro',sans-serif;color:#061018;background:var(--cyan);border:1px solid #8bfcff;border-radius:13px;padding:14px 24px;min-width:142px;cursor:pointer;box-shadow:0 0 12px #22f4ff99,0 0 34px #22f4ff40;transition:transform .2s,box-shadow .2s,background .2s;animation:pulse 2.2s infinite}
.neon-btn:hover{transform:translateY(-3px) scale(1.025);box-shadow:0 0 18px #22f4ffcc,0 0 45px #22f4ff70}
.neon-btn:active{transform:scale(.97)}
.neon-btn.ghost{color:#c8faff;background:#081426bb;border-color:#2eeeff88;box-shadow:0 0 20px #22f4ff18;animation-delay:.4s}
.scene-art{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.glow-orb{position:absolute;width:clamp(100px,20vw,230px);aspect-ratio:1;border-radius:50%;filter:blur(1px);opacity:.22;animation:float 7s ease-in-out infinite}
.orb-a{background:radial-gradient(circle,#ff6dc8 0,#b82d88 24%,transparent 70%);left:10%;top:18%}
.orb-b{background:radial-gradient(circle,#23f3ff 0,#1257b8 25%,transparent 70%);right:8%;bottom:12%;animation-delay:-3s}
.heart{position:absolute;left:50%;top:18%;font-size:clamp(100px,22vw,250px);line-height:1;color:#ff6db9;opacity:.08;transform:translateX(-50%);text-shadow:0 0 50px #ff54b5}
.bottom-note{position:absolute;bottom:3.2%;font-size:10px;letter-spacing:.15em;color:#8190b2;opacity:.75}
.side-rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);height:180px;width:18px;z-index:5;display:flex;justify-content:center}
.rail-line{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(transparent,#5e8fa5,#5e8fa5,transparent);opacity:.7}
.rail-dots{display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:4px 0}
.rail-dot{width:5px;height:5px;border-radius:50%;background:#637287;border:1px solid #9baec4;transition:all .35s}
.rail-dot.active{background:var(--cyan);border-color:#caffff;box-shadow:0 0 8px var(--cyan);transform:scale(1.5)}
.progress{position:fixed;left:0;right:0;bottom:0;height:2px;background:#ffffff0d;z-index:6}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--cyan));box-shadow:0 0 12px var(--cyan);transition:width .6s}
.petal{position:fixed;top:-20px;z-index:1;pointer-events:none;animation:fall linear forwards;font-size:18px;opacity:.8}
@keyframes appear{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pulse{0%,100%{box-shadow:0 0 12px #22f4ff99,0 0 34px #22f4ff40}50%{box-shadow:0 0 20px #22f4ffcc,0 0 50px #22f4ff60}}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,-20px)}}
@keyframes twinkle{from{opacity:.28}to{opacity:.65}}
@keyframes fall{to{transform:translate(var(--drift),110vh) rotate(600deg);opacity:0}}
@media(max-width:600px){.stage{padding:7vh 8vw 9vh}.eyebrow{top:5%}.side-rail{right:9px;height:130px}.actions{gap:10px;margin-top:25px}.neon-btn{padding:12px 17px;min-width:125px;font-size:12px}.bottom-note{font-size:8px;letter-spacing:.08em}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}