:root{
  --bg:#120f13;
  --card:#1d171f;
  --text:#fff7ef;
  --muted:#cdbdc4;
  --accent:#f0a6b8;
  --accent2:#f7d7a8;
  --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top,#2a1724 0%,var(--bg) 45%,#080708 100%);color:var(--text);overflow-x:hidden}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".75" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity=".5"/%3E%3C/svg%3E')}
.cursor-glow{position:fixed;width:260px;height:260px;background:radial-gradient(circle,rgba(240,166,184,.18),transparent 65%);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);z-index:1}
section{position:relative;z-index:2;padding:90px 7vw}.hero{min-height:100vh;display:grid;place-items:center;text-align:center;overflow:hidden}.hero-content{max-width:820px}.eyebrow,.section-label{letter-spacing:.18em;text-transform:uppercase;color:var(--accent2);font-size:.78rem}.hero h1{font-size:clamp(4rem,13vw,11rem);line-height:.85;margin:20px 0;background:linear-gradient(135deg,#fff,var(--accent),var(--accent2));-webkit-background-clip:text;color:transparent}.subtitle{font-size:clamp(1rem,2.4vw,1.35rem);color:var(--muted);line-height:1.75}.btn{border:1px solid var(--line);border-radius:999px;padding:14px 24px;font-weight:700;color:var(--text);background:transparent;text-decoration:none;cursor:pointer;transition:.25s;display:inline-flex;align-items:center;justify-content:center}.btn:hover{transform:translateY(-3px);border-color:var(--accent)}.primary{background:linear-gradient(135deg,var(--accent),#d76788);color:#230915;border:0}.ghost{backdrop-filter:blur(10px)}.hero-actions,.reason-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}.floating-card{position:absolute;border:1px solid var(--line);background:rgba(255,255,255,.06);padding:18px 22px;border-radius:22px;color:var(--muted);backdrop-filter:blur(12px);animation:float 5s ease-in-out infinite}.card-one{top:18%;left:8%;transform:rotate(-8deg)}.card-two{right:8%;bottom:22%;transform:rotate(7deg);animation-delay:1s}.scroll-hint{position:absolute;bottom:28px;color:var(--muted)}.music-btn{position:fixed;right:22px;top:22px;z-index:10;width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;font-size:20px;backdrop-filter:blur(10px);cursor:pointer}.music-btn.playing{background:var(--accent);color:#220812}.countdown-section{text-align:center}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:760px;margin:34px auto 0}.countdown div{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:24px;padding:28px 12px}.countdown span{font-size:clamp(2rem,6vw,4rem);font-weight:800;display:block}.countdown small{color:var(--muted)}.section-heading{text-align:center;max-width:760px;margin:auto auto 60px}.section-heading h2,.countdown-section h2,.reasons h2,.open-when h2,.final-section h2{font-size:clamp(2.2rem,6vw,5rem);line-height:1;margin:14px 0}.timeline{display:grid;gap:70px;max-width:1100px;margin:auto}.memory-card{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}.memory-card.reverse .photo{order:2}.polaroid{background:#fff;padding:16px 16px 54px;border-radius:8px;box-shadow:0 25px 70px rgba(0,0,0,.35);transform:rotate(-3deg);transition:.25s}.reverse .polaroid{transform:rotate(3deg)}.polaroid:hover{transform:rotate(0) scale(1.03)}.photo img{width:100%;height:420px;object-fit:cover;border-radius:4px;background:#322934}.memory-text span{color:var(--accent2)}.memory-text h3{font-size:clamp(1.7rem,4vw,3rem);margin:10px 0}.memory-text p,.final-section p{color:var(--muted);line-height:1.8;font-size:1.05rem}.reasons{text-align:center}.reason-card{max-width:760px;min-height:260px;margin:32px auto;padding:38px;border:1px solid var(--line);border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035));box-shadow:0 30px 80px rgba(0,0,0,.22)}.reason-card span{color:var(--accent2);font-weight:800}.reason-card p{font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.45}.saved-note{color:var(--accent2);min-height:24px}.open-when{text-align:center}.open-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1000px;margin:34px auto 0}.open-grid button{min-height:130px;border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.06);color:#fff;font-weight:800;cursor:pointer;transition:.25s}.open-grid button:hover{background:rgba(240,166,184,.16);transform:translateY(-4px)}.final-section{text-align:center;max-width:840px;margin:auto}.modal{position:fixed;inset:0;background:rgba(0,0,0,.68);display:none;align-items:center;justify-content:center;z-index:20;padding:20px}.modal.show{display:flex}.modal-box{max-width:680px;width:100%;background:#1b151d;border:1px solid var(--line);border-radius:30px;padding:38px;position:relative;box-shadow:0 30px 90px rgba(0,0,0,.45)}.modal-box p{line-height:1.8;color:var(--muted);font-size:1.08rem}.letter h2{font-size:2.2rem}.letter h3{color:var(--accent);font-size:1.7rem}.close{position:absolute;right:18px;top:14px;border:0;background:transparent;color:#fff;font-size:32px;cursor:pointer}.reveal{opacity:0;transform:translateY(28px);transition:1s ease}.reveal.visible{opacity:1;transform:translateY(0)}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -16px}}@media(max-width:800px){section{padding:74px 22px}.memory-card,.memory-card.reverse{grid-template-columns:1fr}.memory-card.reverse .photo{order:0}.countdown{grid-template-columns:repeat(2,1fr)}.open-grid{grid-template-columns:1fr 1fr}.floating-card{display:none}.photo img{height:330px}}@media(max-width:460px){.open-grid{grid-template-columns:1fr}.hero-actions,.reason-actions{flex-direction:column}.btn{width:100%}}

.birthday-lock{text-align:center;max-width:880px;margin:auto}.lock-card{max-width:520px;margin:28px auto;padding:30px;border:1px solid var(--line);border-radius:30px;background:rgba(255,255,255,.065);display:grid;gap:8px;place-items:center}.lock-icon{font-size:3rem}.lock-card strong{font-size:1.15rem}.lock-card small{color:var(--muted)}.birthday-lock.unlocked .lock-card{background:linear-gradient(145deg,rgba(240,166,184,.18),rgba(247,215,168,.10));border-color:rgba(240,166,184,.45)}
.locked-modal .modal-box{text-align:center}.locked-modal .lock-icon{display:block;margin-bottom:12px}


/* Birthday letter premium - no lock */
.birthday-letter-section{
  text-align:center;
  max-width:920px;
  margin:auto;
}
.birthday-letter-section h2{
  font-size:clamp(2.4rem,6vw,5rem);
  line-height:1;
  margin:14px 0;
}
.birthday-intro{
  max-width:640px;
  margin:0 auto 34px;
  color:var(--muted);
  line-height:1.8;
  font-size:1.08rem;
}
.envelope-btn{
  border:1px solid rgba(240,166,184,.35);
  background:linear-gradient(145deg,rgba(240,166,184,.18),rgba(247,215,168,.10));
  color:var(--text);
  border-radius:34px;
  padding:22px 30px;
  min-width:min(420px,100%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  cursor:pointer;
  font-weight:800;
  font-size:1rem;
  box-shadow:0 25px 70px rgba(0,0,0,.28);
  transition:.3s ease;
}
.envelope-btn:hover{
  transform:translateY(-5px) scale(1.015);
  border-color:rgba(240,166,184,.75);
}
.envelope-icon{
  width:74px;
  height:52px;
  border-radius:8px;
  position:relative;
  background:linear-gradient(135deg,#fff7ef,#f0a6b8);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  overflow:hidden;
  flex:0 0 auto;
}
.envelope-icon:before,
.envelope-icon:after{
  content:"";
  position:absolute;
  bottom:0;
  border-style:solid;
}
.envelope-icon:before{
  left:0;
  border-width:26px 37px 0 0;
  border-color:rgba(215,103,136,.45) transparent transparent transparent;
}
.envelope-icon:after{
  right:0;
  border-width:26px 0 0 37px;
  border-color:rgba(247,215,168,.65) transparent transparent transparent;
}
.envelope-icon .flap{
  position:absolute;
  inset:0;
  transform-origin:top;
  background:linear-gradient(135deg,#f7d7a8,#f0a6b8);
  clip-path:polygon(0 0,100% 0,50% 58%);
  transition:.35s ease;
  z-index:2;
}
.envelope-icon .paper{
  position:absolute;
  left:14px;
  right:14px;
  top:14px;
  height:32px;
  border-radius:5px 5px 0 0;
  background:#fff7ef;
  transform:translateY(18px);
  transition:.35s ease;
  z-index:1;
}
.envelope-btn:hover .flap{transform:rotateX(180deg)}
.envelope-btn:hover .paper{transform:translateY(-8px)}
#letterModal .letter{
  max-width:760px;
  max-height:86vh;
  overflow:auto;
  background:linear-gradient(145deg,#fff7ef,#f5dfd7);
  color:#2b141d;
  border:0;
  border-radius:28px;
  padding:0;
}
#letterModal .letter .close{
  color:#2b141d;
  z-index:2;
}
.letter-paper{
  padding:44px;
  position:relative;
}
.letter-paper:before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(43,20,29,.12);
  border-radius:22px;
  pointer-events:none;
}
.letter-paper .section-label{color:#a45b6f}
.letter-paper h2{
  color:#2b141d;
  font-size:clamp(2rem,5vw,3.4rem);
  line-height:1;
  margin:12px 0 24px;
}
.letter-paper p{
  color:#4f303b;
  line-height:1.9;
  font-size:1.05rem;
}
.letter-paper h3{
  color:#d76788;
  margin-top:26px;
}
.letter-opened:after{
  content:"❤";
  position:fixed;
  inset:auto 0 12vh 0;
  text-align:center;
  font-size:4rem;
  z-index:50;
  pointer-events:none;
  animation:heartPop 1.1s ease forwards;
}
@keyframes heartPop{
  0%{opacity:0;transform:translateY(30px) scale(.4)}
  35%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-90px) scale(1.3)}
}
@media(max-width:560px){
  .envelope-btn{flex-direction:column;padding:24px 20px}
  .letter-paper{padding:34px 24px}
}