*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#292332;--muted:#766f80;--pink:#f7c9df;--lav:#d9cdfc;
  --white:rgba(255,255,255,.64);--border:rgba(255,255,255,.58);
  --shadow:0 24px 70px rgba(76,48,87,.12);
}
html{scroll-behavior:smooth}
body{
  min-height:100vh;color:var(--ink);font-family:"DM Sans",sans-serif;
  overflow-x:hidden;background:linear-gradient(135deg,#fff8fc 0%,#f3eafb 45%,#eef0ff 100%);
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.8),transparent 30%),radial-gradient(circle at 80% 70%,rgba(219,205,252,.38),transparent 30%);z-index:-2}
.ambient{position:fixed;width:42vw;height:42vw;border-radius:50%;background:rgba(246,183,216,.25);filter:blur(80px);left:-15vw;top:15vh;animation:drift 14s ease-in-out infinite alternate;z-index:-1}
@keyframes drift{to{transform:translate(35vw,18vh) scale(1.2)}}
#particles{position:fixed;inset:0;pointer-events:none;z-index:1}
.particle{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(255,255,255,.85);animation:float linear infinite;opacity:.55}
@keyframes float{from{transform:translateY(105vh) scale(.6)}to{transform:translateY(-10vh) scale(1.2)}}
main{position:relative;z-index:2}
.screen,.section{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:90px 22px}
.hero-content,.section-inner{width:min(980px,100%);text-align:center}
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;color:#8e778f;font-weight:600}
h1,h2,h3{font-family:"Playfair Display",serif;font-weight:500}
h1{font-size:clamp(2.6rem,8vw,5.8rem);line-height:1.02;margin:18px auto}
h2{font-size:clamp(2.2rem,6vw,4.5rem);line-height:1.05;margin:16px auto}
.hero-content>p,.subtitle{font-size:clamp(1rem,2.2vw,1.15rem);line-height:1.75;color:var(--muted)}
.primary-btn,.secondary-btn{border:0;font:600 1rem "DM Sans";cursor:pointer;transition:.35s ease}
.primary-btn{margin-top:32px;padding:16px 24px;border-radius:999px;color:#392e3b;background:linear-gradient(135deg,#ffd8e9,#dcd0ff);box-shadow:0 12px 35px rgba(141,99,153,.18)}
.primary-btn:hover,.secondary-btn:hover{transform:translateY(-3px);box-shadow:0 16px 35px rgba(120,82,139,.2)}
.primary-btn span{margin-left:8px}
.secondary-btn{margin-top:28px;padding:13px 19px;border-radius:999px;background:rgba(255,255,255,.6);color:#514555;border:1px solid rgba(255,255,255,.7)}
.section{padding-top:120px;padding-bottom:120px}
.darker{color:#f8f4fb;background:radial-gradient(circle at 50% 0%,#463a55 0%,#211e2a 52%,#16141d 100%)}
.darker .eyebrow{color:#c8bbd1}.darker .subtitle{color:#bdb5c5}
.glass{background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.message-card{width:min(680px,100%);margin:42px auto 0;padding:46px 30px;border-radius:30px;position:relative;min-height:190px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.message-card:after{content:"";position:absolute;top:0;left:-30%;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:shine 5s infinite}
@keyframes shine{0%,65%{left:-40%}100%{left:120%}}
.message-card p{font-family:"Playfair Display";font-size:clamp(1.3rem,3vw,2rem);line-height:1.5;max-width:570px}
.spark{position:absolute;top:16px;right:20px;color:#a88ab3}
.things-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:42px;text-align:left}
.thing{min-height:230px;padding:25px;border:1px solid rgba(255,255,255,.12);border-radius:25px;background:rgba(255,255,255,.055);transition:.4s ease;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.thing:hover,.thing.open{transform:translateY(-8px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
.thing-num{font-size:.72rem;letter-spacing:.16em;color:#a99eb2}.thing-title{font-family:"Playfair Display";font-size:1.35rem;margin-top:18px}.thing-text{color:#bdb5c5;line-height:1.6;transform:translateY(30px);opacity:.25;transition:.4s}.thing:hover .thing-text,.thing.open .thing-text{transform:none;opacity:1}
.unlock-wrap{margin:45px auto 0;display:flex;justify-content:center}
.unlock-card{width:min(460px,100%);min-height:220px;border:0;border-radius:30px;padding:35px;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.45s}
.unlock-card:hover{transform:translateY(-5px) rotate(.4deg)}
.lock{font-size:2.4rem;margin-bottom:14px;transition:.5s}.unlock-card strong{font-size:1.1rem}.unlock-card small{margin-top:8px;color:var(--muted)}
.hidden-reveal{max-height:0;overflow:hidden;opacity:0;transition:1s ease;margin:auto}.hidden-reveal.show{max-height:300px;opacity:1;margin-top:40px}.hidden-reveal h3{font-size:clamp(1.6rem,4vw,2.5rem)}.hidden-reveal p{margin-top:12px;color:var(--muted)}
.star-arena{width:min(760px,100%);height:340px;margin:35px auto 18px;border-radius:28px;position:relative;overflow:hidden;background:rgba(255,255,255,.055)}
.game-hint{position:absolute;inset:0;display:grid;place-items:center;color:#aaa1b2;font-size:.9rem;pointer-events:none;transition:.3s}.game-hint.hide{opacity:0}
.star{position:absolute;border:0;background:none;color:#fff;font-size:26px;cursor:pointer;padding:12px;filter:drop-shadow(0 0 9px #fff);animation:starIn .4s ease,starPulse 1.5s ease-in-out infinite}.star:active{transform:scale(.7)}@keyframes starIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes starPulse{50%{filter:drop-shadow(0 0 16px #e4cfff)}}
.game-progress{font-weight:600;letter-spacing:.08em}.game-success{display:none;margin-top:25px}.game-success.show{display:block;animation:rise .7s ease}.game-success h3{font-size:2rem}.game-success p{margin:8px 0;color:#c6bfca}.game-success .secondary-btn{color:#3d3544}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.final-screen{position:relative;overflow:hidden;background:linear-gradient(135deg,#f8edf6,#ebe4fb,#eef0ff)}
.final-screen:before,.final-screen:after{content:"";position:absolute;border-radius:50%;filter:blur(35px);opacity:.45;animation:orb 9s ease-in-out infinite alternate}.final-screen:before{width:40vw;height:40vw;background:#f6c9df;left:-15vw}.final-screen:after{width:35vw;height:35vw;background:#cbc4fa;right:-10vw;bottom:-10vw;animation-delay:-3s}@keyframes orb{to{transform:translate(8vw,-5vh) scale(1.15)}}
.final-content{position:relative;z-index:1}.final-copy{margin:30px auto;max-width:620px;color:#777080;font-size:1.08rem;line-height:2}.final-copy .last-line{margin-top:12px;font-family:"Playfair Display";font-size:1.35rem;color:#514657}
.icon-btn{position:fixed;right:18px;top:18px;z-index:10;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.5);backdrop-filter:blur(10px);color:#54475b;cursor:pointer;font-size:1.1rem}
footer{position:relative;z-index:3;text-align:center;padding:22px;color:#817889;font-size:.76rem;letter-spacing:.04em}
.reveal{animation:fadeUp 1s ease}.fade-out{animation:fadeOut .6s ease forwards}.section-enter{animation:fadeUp 1s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes fadeOut{to{opacity:0;transform:scale(.98)}}
@media(max-width:800px){.things-grid{grid-template-columns:repeat(2,1fr)}.thing{min-height:205px}.star-arena{height:300px}}
@media(max-width:520px){.screen,.section{padding:80px 16px}.things-grid{grid-template-columns:1fr}.thing{min-height:175px}.message-card{padding:38px 22px;min-height:210px}.unlock-card{min-height:200px}.star-arena{height:280px}.primary-btn{width:100%;max-width:290px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}