*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#080711;color:#faf5ff;font-family:Arial,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:-30%;z-index:-3;background:radial-gradient(circle at 30% 20%,#d946ef25,transparent 24%),radial-gradient(circle at 75% 65%,#8b5cf633,transparent 28%);animation:bg 14s ease-in-out infinite alternate}
body:after{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
header{position:fixed;z-index:10;top:0;left:0;right:0;padding:22px 6%;display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;background:linear-gradient(#080711dd,transparent);text-transform:lowercase}
section{min-height:100vh;position:relative;padding:11vw 9%;display:flex;align-items:center}
.hero{display:block;padding-top:22vh;background:radial-gradient(circle at 70% 35%,#f472b622,transparent 28%)}
.eyebrow{color:#c084fc;letter-spacing:4px;font-size:11px;font-weight:bold}
.pink{color:#f472b6}
h1,h2,p{position:relative;z-index:1}
.hero h1{font-size:clamp(55px,9vw,125px);line-height:.83;margin:30px 0;font-weight:700}
.hero h1 i,.together h2 i,.dream h2 i{font-family:Georgia,serif;color:#f3a6e9;font-weight:400}
.hero>p{color:#aaa;max-width:430px;line-height:1.8}
.question{font-family:Georgia,serif;font-style:italic;font-size:clamp(28px,4vw,55px);margin-top:65px;color:#f5b5ea;animation:float 3s ease-in-out infinite}
.question span{font-family:Arial}
.person{gap:9vw;overflow:hidden}
.boy{background:linear-gradient(120deg,#0b0a14,#1c0d1e)}
.girl{background:linear-gradient(240deg,#0b0a14,#1c0d1e)}
.copy{flex:1;opacity:0;transform:translateY(55px);transition:1s cubic-bezier(.2,.8,.2,1)}
.copy h2{font-size:clamp(48px,6vw,78px);margin:15px 0}
.copy p{color:#bbb;line-height:1.9;max-width:470px;font-family:Georgia,serif;font-size:20px}
.photo{flex:1;max-width:500px;background:#fff;padding:12px;box-shadow:0 25px 80px #000c;opacity:0;transform:translateX(110px) rotate(7deg) scale(.9);transition:1.1s cubic-bezier(.2,.8,.2,1)}
.girl .photo{transform:translateX(-110px) rotate(-7deg) scale(.9)}
.photo img{display:block;width:100%;height:520px;object-fit:cover}
.photo span{display:block;color:#17121b;font-family:Georgia,serif;font-style:italic;padding:12px 5px 2px}
.person.show .copy{opacity:1;transform:none}
.person.show .photo{opacity:1;transform:rotate(3deg) scale(1)}
.girl.show .photo{transform:rotate(-3deg) scale(1)}
.together{display:block;text-align:center;padding-top:13vh;background:radial-gradient(circle,#46184d,#080711 65%);overflow:hidden}
.together h2{font-size:clamp(48px,7vw,90px);line-height:.9;margin:25px 0 55px}
.duo{display:flex;justify-content:center;align-items:center;max-width:850px;margin:auto;position:relative}
.duo img{width:43%;height:430px;object-fit:cover;border:9px solid white;box-shadow:0 20px 60px #000;opacity:0;transition:1s cubic-bezier(.2,.8,.2,1)}
.duo img:first-child{transform:translateX(-180px) rotate(-12deg)}
.duo img:last-child{transform:translateX(180px) rotate(12deg)}
.together.show .duo img{opacity:1}
.together.show .duo img:first-child{transform:translateX(0) rotate(-5deg)}
.together.show .duo img:last-child{transform:translateX(0) rotate(5deg);transition-delay:.25s}
.glow-heart{position:absolute;z-index:2;font-size:80px;color:#ff75da;text-shadow:0 0 35px #ff4dcc;opacity:0;transform:scale(.1);transition:.8s .8s}
.together.show .glow-heart{opacity:1;transform:scale(1);animation:pulse 1.4s infinite}
.floating-caption{margin-top:40px;font-family:Georgia,serif;font-style:italic;color:#aaa}
.dream{justify-content:center;text-align:center;background:#0b0a13}
.dream-card{max-width:800px}
.dream h2{font-size:clamp(45px,7vw,85px);line-height:.9}
.mini{display:inline-block;margin:10px;padding:16px 22px;border:1px solid #4a2a50;border-radius:999px;color:#d8c8db;background:#130e18;transform:rotate(var(--r,0deg))}
.final{display:block;text-align:center;padding-top:24vh;background:radial-gradient(circle,#571b57,#080711 62%);overflow:hidden}
.giant{font-size:clamp(65px,12vw,155px);line-height:.78;font-weight:800;margin:40px 0;background:linear-gradient(90deg,#fff,#f19de8,#c084fc);-webkit-background-clip:text;color:transparent}
.giant span{font-family:Georgia,serif;font-style:italic;font-weight:400}
button{border:1px solid #ef9be8;background:#1d1020;color:#fff;padding:15px 25px;border-radius:999px;cursor:pointer}
#answer{min-height:35px;margin-top:25px;font-size:23px}
.orbit{position:absolute;color:#e99bdc;opacity:.6;font-family:Georgia,serif;animation:float 4s ease-in-out infinite}
.one{left:15%;top:30%;font-size:50px}.two{right:14%;top:42%}.three{left:20%;bottom:20%}
.floating-words span{position:fixed;z-index:1;left:var(--x);bottom:-50px;color:#f09fe0aa;font-family:Georgia,serif;font-style:italic;font-size:18px;pointer-events:none;animation:rise 10s linear var(--d) infinite}
footer{text-align:center;color:#777;padding:35px}
@keyframes rise{0%{transform:translateY(0) rotate(-8deg);opacity:0}15%{opacity:.8}100%{transform:translateY(-115vh) rotate(10deg);opacity:0}}
@keyframes float{50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes pulse{50%{transform:scale(1.13)}}
@keyframes bg{to{transform:translate(4%,-3%) scale(1.05)}}
@media(max-width:700px){section{padding:105px 7%}.person{flex-direction:column}.girl{flex-direction:column-reverse}.photo{width:100%}.photo img{height:430px}.duo img{height:330px}.orbit{display:none}}