:root{--blue:#1268ff;--navy:#06183d;--sky:#eaf4ff;--white:#fff;--ink:#0b1e42}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7fbff;color:var(--ink);font-family:Manrope,sans-serif;overflow-x:hidden}.panel{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;padding:8vw;overflow:hidden}.hero{align-items:center;text-align:center;color:white;background:radial-gradient(circle at 50% 25%,#217aff 0,#0a3c9e 33%,#06183d 78%)}.eyebrow{font-size:.75rem;font-weight:800;letter-spacing:.35em;text-transform:uppercase}.hero h1{font:800 clamp(7rem,27vw,24rem)/.75 Manrope;margin:.15em 0;background:linear-gradient(140deg,#fff 30%,#8fd4ff);-webkit-background-clip:text;color:transparent;letter-spacing:-.09em}.lead{font-size:clamp(1rem,2vw,1.5rem);opacity:.8}.scroll{position:absolute;bottom:6vh;color:white;text-decoration:none;font-weight:700;font-size:.85rem;letter-spacing:.08em}.scroll span{display:block;font-size:2rem;animation:bounce 1.4s infinite}.orb{position:absolute;border-radius:50%;filter:blur(4px);opacity:.23;background:#64c9ff}.orb-one{width:32vw;height:32vw;left:-12vw;top:-10vw}.orb-two{width:25vw;height:25vw;right:-8vw;bottom:-7vw}.birthday{align-items:center;text-align:center;background:white}.birthday h2,.growth h2{font:700 clamp(3.2rem,8vw,8rem)/.95 "Playfair Display",serif;margin:.15em 0}.birthday h2 em,.growth h2 em{color:var(--blue);font-style:normal}.subtitle{max-width:700px;font-size:clamp(1.05rem,2vw,1.5rem);color:#61708d}.photo-story{padding:10vw 7vw;background:var(--sky)}.moment{max-width:1250px;margin:0 auto 15vw;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:8vw}.moment.reverse img{order:2}.moment img{width:100%;height:min(70vh,700px);object-fit:cover;border-radius:32px;box-shadow:0 30px 80px #0b3b7725}.moment span{font-size:.8rem;color:var(--blue);font-weight:800;letter-spacing:.2em}.moment h3{font:700 clamp(2.5rem,5vw,5.5rem)/1 "Playfair Display",serif;margin:.25em 0}.moment p{font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.8;color:#60708e}.growth{min-height:90svh;background:linear-gradient(145deg,#06183d,#0b45ae);color:#fff;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7vw}.growth h2{font-size:clamp(3rem,6vw,6rem)}.growth-copy>p:last-child{line-height:1.8;color:#c7d7f4;max-width:600px}.chart{position:relative;height:420px;border:1px solid #ffffff20;border-radius:28px;background:#ffffff0c;padding:30px;box-shadow:inset 0 1px #ffffff30}.chart svg{width:100%;height:100%;overflow:visible}.chart .line{fill:none;stroke:url(#line);stroke-width:8;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900}.chart .area{fill:#2f8cff25}.chart circle{fill:#fff;filter:drop-shadow(0 0 10px #fff)}.chart strong{position:absolute;right:8%;top:9%;color:#fff;font-size:1.4rem}.growth.visible .line{animation:draw 2.4s .3s forwards}.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:25vw;gap:12px;padding:12px;background:white}.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:12px}.mosaic img:nth-child(2),.mosaic img:nth-child(7){grid-column:span 2}.wish{align-items:center;text-align:center;color:white;background:radial-gradient(circle at top,#176fff,#06183d 72%)}blockquote{font:700 clamp(2.6rem,6vw,6.5rem)/1.1 "Playfair Display",serif;max-width:1200px;margin:.45em auto}button{border:0;border-radius:999px;padding:18px 30px;background:#fff;color:#0b45ae;font:800 1rem Manrope;cursor:pointer;box-shadow:0 10px 35px #0004;transition:.25s}button:hover{transform:translateY(-4px) scale(1.03)}.signature{margin-top:3rem;line-height:1.7;color:#c9dcff}.signature strong{font-size:1.2rem;color:white}.reveal{opacity:0;transform:translateY(55px);transition:1s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}#money{position:fixed;inset:0;pointer-events:none;z-index:20}@keyframes bounce{50%{transform:translateY(8px)}}@keyframes draw{to{stroke-dashoffset:0}}@media(max-width:760px){.panel{padding:18vw 7vw}.moment,.growth{grid-template-columns:1fr}.moment{gap:1.5rem;margin-bottom:30vw}.moment.reverse img{order:0}.moment img{height:58vh;border-radius:22px}.growth{padding-top:24vw;padding-bottom:24vw}.chart{height:280px}.mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:55vw}.mosaic img:nth-child(2),.mosaic img:nth-child(7){grid-column:auto}.hero h1{font-size:42vw}.birthday h2{font-size:17vw}blockquote{font-size:11vw}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* Personal scroll story */
.reveal.from-left{transform:translateX(-80px)}
.reveal.from-right{transform:translateX(80px)}
.reveal.visible{opacity:1;transform:none}
.parallax-photo{transition:transform .18s linear}
.photo-stack{position:relative;height:min(72vh,680px);min-height:520px}
.photo-stack img{position:absolute;width:72%;height:67%;object-fit:cover;border:7px solid white;box-shadow:0 22px 60px #0b3b7730}
.photo-stack img:nth-child(1){left:0;top:0;transform:rotate(-6deg)}
.photo-stack img:nth-child(2){right:0;top:14%;transform:rotate(5deg)}
.photo-stack img:nth-child(3){left:12%;bottom:0;transform:rotate(-2deg)}
.visible .photo-stack img:nth-child(1){animation:stackOne 1s .1s both}
.visible .photo-stack img:nth-child(2){animation:stackTwo 1s .3s both}
.visible .photo-stack img:nth-child(3){animation:stackThree 1s .5s both}
.mosaic.visible img{animation:tileIn .8s both}
.mosaic.visible img:nth-child(2){animation-delay:.1s}.mosaic.visible img:nth-child(3){animation-delay:.2s}.mosaic.visible img:nth-child(4){animation-delay:.3s}.mosaic.visible img:nth-child(5){animation-delay:.4s}.mosaic.visible img:nth-child(6){animation-delay:.5s}
@keyframes tileIn{from{opacity:0;transform:translateY(45px) scale(.92)}to{opacity:1;transform:none}}
@keyframes stackOne{from{opacity:0;transform:translate(-50px,40px) rotate(-14deg)}to{opacity:1;transform:rotate(-6deg)}}
@keyframes stackTwo{from{opacity:0;transform:translate(50px,30px) rotate(13deg)}to{opacity:1;transform:rotate(5deg)}}
@keyframes stackThree{from{opacity:0;transform:translateY(60px) rotate(-8deg)}to{opacity:1;transform:rotate(-2deg)}}
@media(max-width:760px){.moment.reverse>.photo-stack{order:0}.photo-stack{height:72vw;min-height:330px}.photo-stack img{height:62%;border-width:4px}.reveal.from-left,.reveal.from-right{transform:translateY(55px)}.reveal.visible{transform:none}}