@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@400;500;600&display=swap');

:root{
  --pink:#ff4f81;
  --rose:#c92859;
  --cream:#fff7f8;
  --dark:#35131f;
  --glass:rgba(255,255,255,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  color:var(--cream);
  background:
    radial-gradient(circle at 20% 10%, rgba(255,125,163,.35), transparent 28%),
    radial-gradient(circle at 80% 30%, rgba(255,205,220,.18), transparent 30%),
    linear-gradient(135deg,#250914,#66132f 48%,#240711);
  font-family:Montserrat,sans-serif;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.16;
  background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:34px 34px;
}
.hero{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:30px;position:relative;overflow:hidden;
}
.hero-glow{
  position:absolute;width:520px;height:520px;border-radius:50%;
  background:rgba(255,72,125,.25);filter:blur(80px);animation:pulse 4s infinite alternate;
}
.eyebrow{text-transform:uppercase;letter-spacing:4px;font-size:11px;color:#ffc4d3;margin-bottom:18px}
.hero h1,.section-heading h2,.intro h2,.letter h2,.promises h2,.final h2{
  font-family:"Cormorant Garamond",serif;
}
.hero h1{font-size:clamp(64px,12vw,150px);line-height:.8;position:relative;text-shadow:0 12px 50px rgba(0,0,0,.3)}
.hero h1 span{font-size:.42em;vertical-align:middle;animation:beat 1.4s infinite}
.subtitle{font-family:"Cormorant Garamond",serif;font-size:clamp(22px,3vw,34px);margin:35px 0}
.button{
  display:inline-block;padding:15px 28px;border:1px solid rgba(255,255,255,.4);
  border-radius:999px;color:#fff;text-decoration:none;background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);transition:.3s
}
.button:hover{transform:translateY(-4px);background:rgba(255,255,255,.2)}
section{max-width:1150px;margin:auto;padding:100px 25px}
.intro{text-align:center;max-width:850px}
.intro h2,.section-heading h2,.promises h2{font-size:clamp(42px,6vw,76px);line-height:.95;margin-bottom:25px}
.intro>p:last-child{font-family:"Cormorant Garamond",serif;font-size:25px;line-height:1.7;color:#ffe8ed}
.qualities{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  padding:38px 28px;border:1px solid rgba(255,255,255,.13);border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  backdrop-filter:blur(15px);text-align:center;transition:.4s
}
.card:hover{transform:translateY(-10px) rotate(-1deg);border-color:rgba(255,160,185,.5)}
.icon{font-size:45px;margin-bottom:15px}
.card h3{font-family:"Cormorant Garamond",serif;font-size:34px;margin-bottom:12px}
.card p{line-height:1.7;color:#ffe5eb}
.section-heading{text-align:center;margin-bottom:45px}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.photo-grid figure{margin:0;overflow:hidden;border-radius:25px;background:#17050b;border:1px solid rgba(255,255,255,.14);position:relative}
.photo-grid .wide{grid-column:span 1}
.photo-grid img{width:100%;height:420px;object-fit:cover;display:block;transition:.6s}
.photo-grid figure:hover img{transform:scale(1.06)}
.photo-grid figcaption{position:absolute;left:15px;right:15px;bottom:15px;padding:12px 16px;border-radius:14px;background:rgba(30,5,15,.6);backdrop-filter:blur(8px);font-size:13px}
.letter{max-width:900px}
.letter-paper{
  color:var(--dark);padding:clamp(35px,7vw,80px);border-radius:5px;
  background:linear-gradient(135deg,#fffafb,#ffe9ef);
  box-shadow:0 30px 100px rgba(0,0,0,.35);position:relative
}
.letter-paper:before{content:"";position:absolute;inset:14px;border:1px solid #e8a1b4;pointer-events:none}
.letter-paper h2{font-size:58px;margin-bottom:25px}
.letter-paper p:not(.eyebrow){font-family:"Cormorant Garamond",serif;font-size:23px;line-height:1.65;margin:17px 0}
.letter-paper .eyebrow{color:#bd3b63}
.signature{text-align:right;margin-top:40px!important}
.promises{text-align:center}
.promise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:40px}
.promise-grid div{padding:22px;border-radius:16px;background:var(--glass);border:1px solid rgba(255,255,255,.12)}
.final{text-align:center;padding-bottom:130px}
.big-heart{font-size:100px;line-height:1;animation:beat 1.4s infinite;text-shadow:0 0 50px rgba(255,70,120,.7)}
.final h2{font-size:clamp(48px,7vw,90px);line-height:.9;margin:20px 0}
.final>p:last-child{font-family:"Cormorant Garamond",serif;font-size:24px;color:#ffdbe5}
footer{text-align:center;padding:35px;color:#ffc6d5;font-size:12px;letter-spacing:1px}
.hearts{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.hearts span{position:absolute;bottom:-40px;color:#ff9ab5;animation:float linear infinite;opacity:.45}
@keyframes float{to{transform:translateY(-110vh) rotate(360deg);opacity:0}}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes pulse{to{transform:scale(1.2);opacity:.5}}
@media(max-width:800px){
  .qualities,.photo-grid{grid-template-columns:1fr}
  .promise-grid{grid-template-columns:1fr}
  .photo-grid img{height:500px}
  section{padding:70px 18px}
}