*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:#29242a;background:#faf8f5;font-family:Inter,sans-serif}
h1,h2,h3{font-family:"Cormorant Garamond",serif}
button,.btn{font:inherit;cursor:pointer}
.hero{min-height:100vh;display:grid;place-items:center;text-align:center;position:relative;background:linear-gradient(135deg,#5b496b,#315c4b);color:white;overflow:hidden}
.hero:before,.hero:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.25);border-radius:50%;width:420px;height:420px}
.hero:before{left:-160px;top:-120px}.hero:after{right:-170px;bottom:-150px}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at center,transparent,rgba(0,0,0,.32))}
.hero-content{position:relative;z-index:2;padding:30px}
.hero h1{font-size:clamp(4rem,12vw,8rem);line-height:.85;margin:15px 0}
.hero h1 span{font-size:.55em}
.tagline{font-family:"Cormorant Garamond",serif;font-size:2rem;margin:15px}
.subtagline{letter-spacing:3px;text-transform:uppercase;font-size:.75rem}
.eyebrow{letter-spacing:4px;font-size:.7rem;font-weight:600;opacity:.65}
.btn,button{border:1px solid #6b5878;background:transparent;color:inherit;padding:12px 18px;border-radius:30px;margin:6px}
.btn{display:inline-block;text-decoration:none;color:white;border-color:rgba(255,255,255,.6);margin-top:25px}
.section{padding:100px 7%;max-width:1200px;margin:auto;text-align:center}
.section h2{font-size:clamp(2.7rem,6vw,5rem);margin:10px 0 25px}
.intro{max-width:850px}
.intro p:not(.eyebrow),.memories p{max-width:650px;margin:20px auto;line-height:1.8}
.journey{max-width:1100px}
.journey-line{display:flex;align-items:center;justify-content:center;gap:25px}
.city-card{background:white;border:1px solid #e7e0d8;border-radius:22px;padding:35px;flex:1;box-shadow:0 15px 40px rgba(45,35,50,.06)}
.city-card .number{font-size:.7rem;letter-spacing:3px;opacity:.5}
.city-card h3{font-size:2.5rem;margin:12px}
.city-card p{font-family:"Cormorant Garamond";font-size:1.4rem}
.city-card button,.feature-grid button{border-color:#8c7898}
.connector{font-size:2rem;color:#75607f}
.details{margin-top:25px;padding:20px;border-radius:16px;background:#eee9ef}
.countdown{background:#e9eee8;max-width:none}
.timer{font-family:"Cormorant Garamond";font-size:clamp(2rem,6vw,4.5rem);font-weight:600;letter-spacing:2px}
.chapters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chapters button{min-width:180px;background:white;border-color:#ded5e1}
.chapters small{opacity:.6}
.story-box{margin:30px auto 0;max-width:750px;min-height:90px;padding:30px;background:white;border-radius:20px;border:1px solid #e7e0d8;line-height:1.7}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-grid article{background:white;border:1px solid #e7e0d8;border-radius:20px;padding:30px}
.feature-grid span{font-size:2rem}
.feature-grid h3{font-size:1.8rem;margin:12px}
.feature-grid p{font-size:.9rem;line-height:1.6;min-height:45px}
.map-box{display:flex;align-items:center;gap:15px;background:#eee9ef;border-radius:25px;padding:30px}
.map-city{flex:1;background:white;padding:30px;border-radius:18px}
.map-city span{font-size:2rem}.route{font-size:1.3rem;color:#6b5878}.note{opacity:.6}
.guestbook{background:#315c4b;color:white;max-width:none}
.memories{max-width:1100px}
.memory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.memory-grid div{padding:50px 20px;border-radius:20px;background:#eee9ef;font-size:2rem}
.memory-grid span{font:500 1rem Inter}
footer{text-align:center;background:#29242a;color:white;padding:60px 20px}
footer h2{font-size:2.5rem}
footer p{opacity:.65}
.modal{display:none;position:fixed;inset:0;background:rgba(20,15,20,.65);z-index:10;place-items:center;padding:20px}
.modal.show{display:grid}
.modal-card{background:#faf8f5;padding:35px;border-radius:25px;max-width:500px;width:100%;position:relative;text-align:center}
.close{position:absolute;right:15px;top:10px;border:0;font-size:1.8rem}
input,textarea{width:100%;padding:14px;border:1px solid #ddd;border-radius:12px;margin:12px 0;font:inherit}
textarea{min-height:150px;resize:vertical}
.pass{margin-top:20px;padding:20px;border:2px dashed #6b5878;border-radius:15px}
@media(max-width:800px){.journey-line,.map-box{flex-direction:column}.connector{transform:rotate(90deg)}.feature-grid,.memory-grid{grid-template-columns:1fr}.section{padding:70px 5%}.hero h1{font-size:4.2rem}}

/* Devi's birthday secret surprise */
.birthday-secret {
  text-align: center;
  padding: 70px 20px;
  margin: 30px auto;
  max-width: 850px;
  background: #eee9ef;
  border-radius: 24px;
}
.birthday-secret h2 { color: #5b496b; }
.birthday-secret button {
  background: #5b496b;
  color: white;
  border: none;
  padding: 15px 25px;
  border-radius: 30px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.birthday-secret button:hover { transform: scale(1.05); }
.birthday-secret button:disabled { opacity: .8; cursor: default; }
.birthday-surprise {
  margin: 25px auto 0;
  padding: 25px;
  max-width: 600px;
  background: #fffdf8;
  border: 1px solid #c8b6d4;
  border-radius: 18px;
  animation: revealSurprise 0.7s ease;
}
@keyframes revealSurprise {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}