@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root {
  --purple: #7b2cbf;
  --deep: #240046;
  --pink: #ff70a6;
  --cream: #fff9fd;
  --text: #2b193d;
  --muted: #806b8d;
  --card: rgba(255,255,255,.78);
}
* { box-sizing: border-box; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--text); font-family: "DM Sans", sans-serif;
  background: linear-gradient(135deg, #fff8fd, #f5edff);
  overflow-x: hidden;
}
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 7%; backdrop-filter: blur(16px);
  background: rgba(255,255,255,.62); border-bottom: 1px solid rgba(123,44,191,.08);
}
.logo { font-weight: 800; font-size: 1.25rem; letter-spacing: .08em; }
.logo span { color: var(--pink); }
.nav-links { display:flex; gap:28px; }
.nav-links a { color: var(--text); text-decoration:none; font-size:.92rem; }
.nav-links a:hover { color:var(--purple); }
.hero {
  min-height: 100vh; padding: 150px 8% 80px; display:grid;
  grid-template-columns: 1.5fr .7fr; align-items:center; gap:60px;
  background: radial-gradient(circle at 80% 20%, #ead7ff 0 12%, transparent 32%),
              radial-gradient(circle at 10% 90%, #ffdced 0 10%, transparent 30%);
}
.eyebrow,.section-label { text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; font-weight:700; color:var(--purple); }
h1,h2,h3 { font-family:"Playfair Display",serif; }
h1 { font-size:clamp(4rem,10vw,8rem); line-height:.9; margin:18px 0; color:var(--deep); }
h1 span { color:var(--pink); font-style:italic; }
.subtitle { font-size:1.2rem; color:var(--muted); max-width:540px; }
.hero-buttons { display:flex; gap:14px; margin-top:32px; }
.btn { padding:14px 24px; border-radius:999px; text-decoration:none; font-weight:700; }
.primary { background:var(--purple); color:#fff; box-shadow:0 12px 28px rgba(123,44,191,.25); }
.ghost { border:1px solid #d9c3e9; color:var(--deep); background:#fff7; }
.hero-card {
  background:var(--card); border:1px solid rgba(255,255,255,.9); border-radius:32px;
  padding:48px 28px; text-align:center; box-shadow:0 25px 70px rgba(54,16,75,.12);
}
.big-heart { font-size:6rem; color:var(--pink); animation:pulse 1.7s infinite; }
.hero-card p { color:var(--muted); margin:0 0 7px; }
.hero-card strong { display:block; font-size:1.35rem; }
.hero-card small { color:var(--purple); display:block; margin-top:8px; }
@keyframes pulse { 50% { transform:scale(1.1); } }
.counter-section { padding:100px 8%; text-align:center; background:#fff; }
h2 { font-size:clamp(2.2rem,5vw,4rem); margin:10px 0 45px; color:var(--deep); }
.counter-grid { max-width:850px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.counter { padding:28px 10px; background:var(--cream); border-radius:22px; }
.counter strong { display:block; font-size:2.3rem; color:var(--purple); }
.counter span { color:var(--muted); font-size:.85rem; }
.section { padding:110px 10%; }
.story { background:linear-gradient(180deg,#fff,#fbf5ff); }
.timeline { max-width:800px; margin:auto; border-left:2px solid #d9bced; padding-left:35px; }
.timeline article { position:relative; display:grid; grid-template-columns:1fr; margin-bottom:55px; }
.dot { position:absolute; width:14px; height:14px; border-radius:50%; background:var(--purple); left:-43px; top:7px; box-shadow:0 0 0 7px #f0dcff; }
.timeline span { color:var(--purple); font-size:.8rem; font-weight:700; }
.timeline h3 { font-size:1.8rem; margin:8px 0; }
.timeline p { color:var(--muted); line-height:1.8; }
.memories { text-align:center; }
.muted { color:var(--muted); margin-top:-25px; margin-bottom:40px; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1050px; margin:auto; }
.photo-card {
  min-height:230px; border-radius:26px; display:flex; flex-direction:column;
  justify-content:center; align-items:center; gap:12px; color:var(--deep);
  background:linear-gradient(145deg,#f3e6ff,#ffe5f0); transition:.3s;
}
.photo-card:hover { transform:translateY(-6px) rotate(-1deg); }
.photo-card div { font-size:4rem; }
.photo-card span { font-weight:700; }
.note-section { padding:100px 7%; display:flex; justify-content:center; }
.note {
  max-width:780px; padding:60px; border-radius:35px; background:#fff;
  box-shadow:0 25px 80px rgba(54,16,75,.13); position:relative;
}
.note:before { content:"“"; position:absolute; font-family:serif; font-size:9rem; color:#f0ddff; top:15px; left:30px; }
.note h2 { margin-bottom:25px; }
.note p:not(.section-label) { font-family:"Playfair Display",serif; font-size:1.15rem; line-height:1.9; color:#584563; }
.signature { margin-top:35px; }
footer { padding:35px 7%; text-align:center; background:var(--deep); color:#fff; }
footer p { opacity:.8; }
footer button {
  border:0; background:var(--pink); color:#fff; border-radius:999px;
  padding:12px 20px; cursor:pointer; font-weight:700;
}
.floating-heart { position:fixed; pointer-events:none; z-index:99; animation:floatUp 2.2s ease-out forwards; font-size:22px; }
@keyframes floatUp { to { transform:translateY(-220px) scale(1.6); opacity:0; } }

@media (max-width: 800px) {
  nav { padding:16px 5%; }
  .nav-links { display:none; }
  .hero { grid-template-columns:1fr; padding:125px 7% 60px; text-align:center; }
  .subtitle { margin:auto; }
  .hero-buttons { justify-content:center; }
  .counter-grid { grid-template-columns:repeat(2,1fr); }
  .gallery { grid-template-columns:1fr 1fr; }
  .section { padding:80px 7%; }
  .note { padding:38px 25px; }
}
@media (max-width: 500px) {
  .gallery { grid-template-columns:1fr; }
  h1 { font-size:4.2rem; }
}