*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI",system-ui,sans-serif;background:#08040a;color:#fff;overflow-x:hidden}
.hero,.section{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:70px 20px}
.hero{background:radial-gradient(circle at 50% 25%,#64175a 0,#2a0c29 28%,transparent 58%),linear-gradient(145deg,#0a050c,#170816 55%,#050307);position:relative}
.hero:before{content:"";position:absolute;inset:15px;border:1px solid rgba(255,190,235,.13);border-radius:28px;pointer-events:none}
.hero-content,.content,.letter-card{max-width:900px;width:100%;position:relative;z-index:2}
.sparkle{font-size:42px;color:#ffd3ef;text-shadow:0 0 25px #ffb9e5;animation:pulse 2s infinite}
.eyebrow{letter-spacing:3px;text-transform:uppercase;font-size:12px;color:#e9afd7;margin:18px 0}
.hero h1{font-size:clamp(50px,13vw,100px);line-height:1.05;margin:12px 0}
.hero h1 span,.big-name,.final-message h1{color:#ffacd9;text-shadow:0 0 28px rgba(255,120,205,.25)}
#typing{min-height:30px;color:#efd0e4;font-size:19px;margin:25px auto 35px}
.main-btn,.next-btn{border:0;border-radius:999px;padding:15px 27px;font-size:15px;cursor:pointer;transition:.3s}
.main-btn{background:#fff;color:#641956;font-weight:700;box-shadow:0 8px 35px rgba(255,255,255,.16)}
.next-btn{background:#d54b9b;color:#fff;box-shadow:0 8px 30px rgba(213,75,155,.18)}
.main-btn:hover,.next-btn:hover{transform:translateY(-3px) scale(1.04)}
.scroll-note{margin-top:70px;font-size:12px;color:#a990a4}
.section{background:radial-gradient(circle at 50% 35%,#3d1238 0,transparent 52%),#0b060d}
.section h2{font-size:clamp(34px,7vw,58px)}
.big-name{font-size:clamp(52px,11vw,82px);margin:8px 0}
.section p{font-size:17px;line-height:1.8;color:#e6c9df}
.cake{font-size:76px;animation:bounce 1.7s infinite}
.muted{color:#a994a8!important;font-size:14px!important}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:38px 0}
.card{padding:28px 20px;border-radius:22px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(12px);transition:.35s}
.card:hover{transform:translateY(-8px);background:rgba(255,255,255,.1)}
.card span{font-size:38px}.card h3{color:#ffb0db;margin:12px 0}.card p{font-size:14px!important}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:35px 0}
.photo{padding:9px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.gallery .photo img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:14px}
.photo p{font-size:13px!important;margin:10px 3px}
.lock-wrap{height:100px;display:flex;justify-content:center;align-items:center}
.lock{font-size:72px;filter:drop-shadow(0 0 18px rgba(255,160,220,.4));transition:.7s}
.lock.open{transform:rotate(-12deg) scale(1.15);filter:drop-shadow(0 0 30px rgba(255,190,230,.75))}
.hint{display:none;max-width:600px;margin:35px auto 0;padding:24px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);animation:fade .8s}
.hint p{font-size:15px;margin:8px}.small-note{color:#bda7b9!important;font-style:italic;margin-top:18px!important}
.letter-card{max-width:720px;padding:50px 30px;border-radius:28px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px)}
.envelope{font-size:65px}.signature{font-family:cursive!important;color:#ffabd9!important;font-size:25px!important}
.final{background:radial-gradient(circle at 50% 35%,#6b1856 0,#21091e 48%,#050306 78%)}
.gift{font-size:110px;cursor:pointer;animation:bounce 1.6s infinite;filter:drop-shadow(0 0 22px rgba(255,170,220,.3))}
.final-message{display:none;margin:38px auto 0;max-width:700px;padding:34px 25px;border-radius:28px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.15);animation:fade 1.2s}
.final-message h1{font-size:clamp(46px,10vw,75px)}
.final-message h2{font-size:clamp(26px,6vw,42px);margin-top:25px;color:#ffb2dc}
.closing{margin-top:30px;padding-top:25px;border-top:1px solid rgba(255,255,255,.12);color:#d8b8d0;line-height:1.7}
.made-with-love{display:none;margin:75px auto 5px;padding:55px 20px 25px;text-align:center;animation:fade 1.8s ease;position:relative}
.made-with-love:before{content:"";display:block;width:110px;height:1px;margin:0 auto 28px;background:rgba(255,180,225,.45)}
.love-line{font-size:34px;color:#ffacd9;margin-bottom:12px;animation:pulse 2s infinite}
.made-with-love p{font-size:13px!important;letter-spacing:4px;text-transform:uppercase;color:#e9afd7!important;margin:0 0 8px!important}
.made-with-love h2{font-size:clamp(40px,10vw,65px)!important;color:#ffacd9;font-family:cursive;text-shadow:0 0 25px rgba(255,130,205,.3)}
.made-by{margin:12px 0 18px;color:#f1d2e6;font-family:cursive;font-size:23px}
.made-with-love span{display:block;font-size:13px;color:#a995a8;font-style:italic}
.music-btn{position:fixed;right:18px;top:18px;z-index:20;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;backdrop-filter:blur(10px)}
#hearts{position:fixed;inset:0;pointer-events:none;z-index:30}
.heart{position:absolute;bottom:-30px;animation:float 6s linear forwards}
.password-lock{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:22px;text-align:center;background:radial-gradient(circle at 50% 20%,#6b1b5d 0,transparent 42%),linear-gradient(145deg,#080409,#190817 55%,#050306)}
.password-lock:before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,190,235,.13);border-radius:28px;pointer-events:none}
.lock-card{width:min(520px,100%);padding:38px 24px;position:relative;border-radius:28px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(16px);box-shadow:0 25px 80px rgba(0,0,0,.35);animation:fade .9s ease}
.lock-icon{font-size:70px;margin-bottom:8px;filter:drop-shadow(0 0 20px rgba(255,170,220,.35))}
.lock-card h1{font-size:clamp(30px,8vw,48px);line-height:1.15;color:#fff}
.lock-subtitle{color:#e5c8df!important;font-size:16px!important;line-height:1.7!important;margin:18px auto!important}
#passwordInput{display:block;width:100%;height:56px;border-radius:16px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.2);color:#fff;text-align:center;font-size:22px;letter-spacing:7px;outline:none;margin:20px 0 12px}
#passwordInput::placeholder{letter-spacing:1px;color:#9e879b;font-size:15px}
#passwordInput:focus{border-color:#f0a5d4;box-shadow:0 0 0 3px rgba(240,165,212,.12)}
.unlock-btn{width:100%;margin-top:8px}.wrong-password{min-height:25px;color:#ff9fcf!important;font-size:14px!important;margin:14px auto 0!important}
.tiny-hint{font-size:12px!important;color:#a891a4!important;margin-top:20px!important}
.hidden-after-lock{display:none!important}
.password-lock.unlocking{animation:lockFade .9s ease forwards}
@keyframes lockFade{to{opacity:0;transform:scale(1.03)}}
@keyframes float{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-110vh) rotate(360deg);opacity:0}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse{50%{transform:scale(1.15);opacity:.7}}
@keyframes fade{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.hidden{display:none!important}
@media(max-width:650px){
  .cards{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr;gap:12px}
  .gallery .photo:last-child{grid-column:1 / -1;width:70%;margin:auto}
  .hero:before{inset:10px}.section{padding:60px 16px}.letter-card{padding:38px 20px}.gift{font-size:90px}
}

.music-btn{font-size:21px;display:flex;align-items:center;justify-content:center}
.music-btn:active{transform:scale(.94)}

/* Interactive Your Little Moments */
.memory-card{position:relative;cursor:pointer;overflow:hidden}
.memory-card img{transition:transform .55s ease,filter .55s ease}
.memory-card:hover img,.memory-card:active img{transform:scale(1.04);filter:brightness(.72)}
.tap-label{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  padding:8px 13px;border-radius:999px;background:rgba(20,5,18,.72);
  border:1px solid rgba(255,210,240,.3);font-size:12px;color:#fff;
  opacity:0;transition:.35s;pointer-events:none;backdrop-filter:blur(8px);
}
.memory-card:hover .tap-label{opacity:1}
.video-preview{position:relative;overflow:hidden;border-radius:14px}
.video-preview video{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;filter:brightness(.72)}
.play-button{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);color:#9b286e;font-size:25px;padding-left:4px;
  box-shadow:0 0 35px rgba(255,170,225,.45);transition:.3s;
}
.video-card:hover .play-button{transform:translate(-50%,-50%) scale(1.1)}
.lightbox{
  position:fixed;inset:0;z-index:10000;background:rgba(4,1,6,.92);
  display:flex;align-items:center;justify-content:center;padding:22px;
  backdrop-filter:blur(12px);animation:fade .35s ease;
}
.lightbox-inner,.video-modal{
  width:min(720px,100%);text-align:center;position:relative;
  animation:memoryPop .45s ease;
}
.lightbox-inner img{
  max-width:100%;max-height:72vh;object-fit:contain;border-radius:20px;
  box-shadow:0 20px 70px rgba(0,0,0,.6);border:1px solid rgba(255,200,235,.2);
}
.lightbox-inner p{margin:18px 0 8px!important;color:#ffb0db!important;font-size:22px!important}
.lightbox-hearts{font-size:20px;letter-spacing:8px;animation:pulse 1.8s infinite}
.lightbox-close{
  position:fixed;right:18px;top:18px;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);
  color:white;font-size:30px;line-height:1;z-index:10001;cursor:pointer;
}
.video-modal video{
  width:100%;max-height:72vh;border-radius:20px;background:#000;
  box-shadow:0 20px 70px rgba(0,0,0,.6);
}
.video-modal>p:last-child{margin-top:18px!important}
@keyframes memoryPop{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:650px){
  .gallery{grid-template-columns:1fr 1fr;gap:12px}
  .memory-card .tap-label{opacity:1;font-size:10px;padding:6px 9px;top:auto;bottom:45px}
  .lightbox{padding:15px}
  .lightbox-inner img{max-height:68vh}
}


/* ===== Cross-device responsive layout ===== */
html, body { width:100%; min-width:0; }
body { min-height:100dvh; }
img, video, button, input { max-width:100%; }
button { font-family:inherit; }
.hero, .section { width:100%; min-height:100dvh; }
.hero-content, .content, .letter-card { margin-inline:auto; }
.content { width:min(1120px,100%); }

/* Large desktop / laptop */
@media (min-width: 1100px) {
  .hero, .section { padding:72px 6vw; }
  .hero-content { max-width:1000px; }
  .content { max-width:1120px; }
  .cards { grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
  .gallery { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
  .gallery .photo:last-child { grid-column:auto; width:auto; margin:0; }
  .card { min-height:220px; display:flex; flex-direction:column; justify-content:center; }
}

/* Tablet */
@media (min-width: 651px) and (max-width: 1099px) {
  .hero, .section { padding:64px 32px; }
  .content { max-width:900px; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .gallery .photo:last-child { grid-column:1 / -1; width:min(46%,360px); margin-inline:auto; }
  .section h2 { font-size:clamp(36px,5vw,52px); }
  .hero h1 { font-size:clamp(58px,9vw,88px); }
}

/* Phones */
@media (max-width: 650px) {
  .hero, .section { padding:58px 16px 42px; }
  .hero:before, .password-lock:before { inset:8px; border-radius:22px; }
  .hero-content, .content { width:100%; }
  .eyebrow { font-size:11px; letter-spacing:2px; }
  .hero h1 { font-size:clamp(44px,15vw,68px); }
  #typing { font-size:16px; line-height:1.6; margin:20px auto 28px; }
  .main-btn, .next-btn { min-height:50px; padding:13px 20px; font-size:14px; }
  .scroll-note { margin-top:48px; }
  .cards { grid-template-columns:1fr; gap:14px; margin:28px 0; }
  .card { padding:22px 18px; }
  .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:28px 0; }
  .gallery .photo:last-child { grid-column:auto; width:auto; margin:0; }
  .photo { padding:7px; border-radius:16px; }
  .gallery .photo img { aspect-ratio:4/5; border-radius:11px; }
  .photo p { font-size:11px !important; line-height:1.35 !important; margin:8px 2px 4px; }
  .memory-card .tap-label { opacity:1; left:50%; top:auto; bottom:39px; font-size:9px; padding:5px 8px; white-space:nowrap; }
  .music-btn { right:12px; top:12px; width:44px; height:44px; }
  .lock-card { padding:30px 18px; }
  .lock-icon { font-size:60px; }
  .lock-card h1 { font-size:clamp(28px,8vw,38px); }
  .lock-subtitle { font-size:14px !important; }
  #passwordInput { height:52px; font-size:20px; }
  .letter-card { padding:34px 18px; border-radius:22px; }
  .letter-card p { font-size:15px; line-height:1.75; }
  .gift { font-size:84px; }
  .final-message { padding:28px 18px; }
  .final-message h1 { font-size:clamp(40px,12vw,58px); }
  .final-message h2 { font-size:clamp(24px,7vw,34px); }
  .made-with-love { margin-top:52px; padding-top:40px; }
  .made-with-love h2 { font-size:clamp(38px,12vw,54px)!important; }
}

/* Very small phones */
@media (max-width: 380px) {
  .hero, .section { padding-left:12px; padding-right:12px; }
  .gallery { gap:9px; }
  .photo { padding:5px; }
  .gallery .photo img { border-radius:9px; }
  .photo p { font-size:10px !important; }
  .main-btn, .next-btn { width:100%; }
}

/* Landscape phones / short screens */
@media (max-height: 620px) and (orientation:landscape) {
  .hero, .section { min-height:100dvh; padding-top:32px; padding-bottom:32px; }
  .scroll-note { margin-top:24px; }
  .cake { font-size:54px; }
  .gift { font-size:70px; }
}

/* Safe-area support for modern phones */
@supports (padding:max(0px)) {
  .music-btn { top:max(12px, env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right)); }
  .hero, .section { padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
  .password-lock { padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
}

/* Prevent hover-only effects from feeling broken on touch screens */
@media (hover:none) {
  .card:hover, .main-btn:hover, .next-btn:hover { transform:none; }
  .memory-card:hover img { transform:none; filter:none; }
  .memory-card:active img { transform:scale(1.025); filter:brightness(.78); }
}