:root{--bg:#0b0a1a;--ink:#f4f1ff;--mute:#a7a3c7;--peach:#ffc9a8;--pink:#ff9ec7;--lilac:#b9a6ff;--mint:#9ff3d6}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);font:400 17px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{overflow-x:hidden;background:radial-gradient(120% 80% at 50% 0%,#1d1640 0%,var(--bg) 60%)}
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,var(--peach) 45%,var(--pink));margin-right:.45em;box-shadow:0 0 12px var(--pink)}
.nav{position:fixed;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:calc(14px + env(safe-area-inset-top)) 22px 14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:linear-gradient(#0b0a1acc,#0b0a1a00)}
.logo{font-weight:700;letter-spacing:-.02em;font-size:20px}
.navlink{font-size:14px;color:var(--mute);border:1px solid #ffffff22;padding:7px 14px;border-radius:99px;transition:.3s}
.navlink:hover{color:var(--ink);border-color:var(--peach)}
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 24px 70px;overflow:hidden;text-align:center}
#field{position:absolute;inset:0;width:100%;height:100%}
.bholi{position:relative;width:min(46vw,220px);aspect-ratio:1;margin-bottom:34px;animation:float 6s ease-in-out infinite}
.halo{position:absolute;inset:-45%;border-radius:50%;background:radial-gradient(circle,#ff9ec755 0%,#b9a6ff22 35%,transparent 65%);animation:breathe 4s ease-in-out infinite}
.orb{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0%,#ffe6d6 18%,var(--peach) 42%,var(--pink) 72%,#c77dff 100%);box-shadow:0 0 60px #ff9ec788,0 0 140px #b9a6ff55,inset -14px -20px 40px #c77dff88,inset 10px 12px 30px #ffffffaa;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.eye{position:absolute;top:38%;width:19%;height:24%;background:#1b1433;border-radius:50%;transform-origin:50% 50%;transition:transform .09s}
.eye.l{left:26%}.eye.r{right:26%}
.eye.blink{transform:scaleY(.08)}
.pupil{position:absolute;inset:0;transition:transform .12s ease-out}
.pupil i{position:absolute;left:22%;top:16%;width:38%;height:34%;border-radius:50%;background:#fff;box-shadow:12px 14px 0 -6px #ffffffaa}
.cheek{position:absolute;top:60%;width:15%;height:8%;border-radius:50%;background:#ff6fa866;filter:blur(3px)}
.cheek.l{left:15%}.cheek.r{right:15%}
.mouth{position:absolute;left:50%;top:64%;width:12%;height:6%;margin-left:-6%;border:3px solid #1b1433;border-top:0;border-radius:0 0 40px 40px;transition:.3s}
.bholi.happy .mouth{height:9%;width:16%;margin-left:-8%}
.hero-copy{position:relative;max-width:620px}
.kicker{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--peach);margin-bottom:14px}
h1{font-size:clamp(40px,11vw,80px);line-height:1.04;padding-bottom:.08em;letter-spacing:-.04em;font-weight:650;background:linear-gradient(180deg,#fff 30%,#d9cfff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:18px auto 0;max-width:30ch;color:var(--mute);font-size:18px}
.scrollhint{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));width:22px;height:36px;border:1.5px solid #ffffff44;border-radius:12px}
.scrollhint span{position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--peach);animation:hint 1.8s infinite}
.block{max-width:880px;margin:0 auto;padding:110px 24px}
.num{font:600 13px ui-monospace,monospace;color:var(--lilac);margin-bottom:14px}
h2{font-size:clamp(32px,8vw,60px);line-height:1.05;letter-spacing:-.035em;font-weight:650;margin-bottom:20px}
h2 em{font-style:normal;color:var(--peach)}
.block>p:not(.num){color:var(--mute);font-size:19px;max-width:36ch}
.cards{list-style:none;display:grid;gap:14px;margin-top:30px}
.card{padding:26px;border-radius:22px;background:linear-gradient(160deg,#ffffff10,#ffffff04);border:1px solid #ffffff14}
.card h3{font-size:22px;margin:12px 0 6px}.card p{color:var(--mute)}
.ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--peach) 50%,var(--pink));color:#1b1433;font-weight:800}
.notify{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.notify input{flex:1 1 220px;padding:15px 18px;border-radius:99px;border:1px solid #ffffff22;background:#ffffff0a;color:var(--ink);font:inherit}
.notify button{padding:15px 22px;border-radius:99px;border:0;font:600 16px/1 inherit;background:linear-gradient(90deg,var(--peach),var(--pink));color:#1b1433;opacity:.75;cursor:not-allowed}
.foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding:30px 24px calc(30px + env(safe-area-inset-bottom));border-top:1px solid #ffffff12;color:var(--mute);font-size:14px;max-width:1100px;margin:0 auto}
.reveal{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .9s}
.reveal.in{opacity:1;transform:none;filter:none}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}.block{padding:150px 40px}.nav{padding-left:40px;padding-right:40px}}
@keyframes float{50%{transform:translateY(-12px)}}
@keyframes breathe{50%{transform:scale(1.12);opacity:.75}}
@keyframes hint{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none;filter:none}html{scroll-behavior:auto}}
/* v2: aurora, canvas face, word reveal, tilt */
.aurora{position:absolute;inset:-20%;pointer-events:none;filter:blur(70px);opacity:.55}
.aurora i{position:absolute;width:48vmax;height:48vmax;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.aurora i:nth-child(1){left:10%;top:5%;background:radial-gradient(#b9a6ff66,transparent 65%);animation:drift1 22s ease-in-out infinite alternate}
.aurora i:nth-child(2){right:5%;top:20%;background:radial-gradient(#ffc9a855,transparent 65%);animation:drift2 26s ease-in-out infinite alternate}
.aurora i:nth-child(3){left:30%;bottom:0;background:radial-gradient(#9ff3d644,transparent 65%);animation:drift3 30s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18vmax,10vmax) scale(1.2)}}
@keyframes drift2{to{transform:translate(-16vmax,12vmax) scale(.85)}}
@keyframes drift3{to{transform:translate(8vmax,-14vmax) scale(1.15)}}
.face-on .bholi{animation:none}.face-on .bholi>*{opacity:0}
#field{touch-action:pan-y}
.hero-copy,#field{will-change:transform,opacity}
h1 .w{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(10px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1),filter 1s}
h1.in .w{opacity:1;transform:none;filter:none}
h1.reveal{opacity:1;transform:none;filter:none}
@media(pointer:fine){.card{transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s;transform-style:preserve-3d}.card:hover{border-color:#ffffff30}}
@media(prefers-reduced-motion:reduce){h1 .w{opacity:1;transform:none;filter:none}.aurora i{animation:none}}