:root{
  --ink:#1f1f29;
  --muted:#6b6b7a;
  --bg1:#fff1f7;
  --bg2:#eef2ff;
  --accent:#ff6fa7;
  --accent-2:#8aa8ff;
  --glass:#ffffff22;
  --border:#ffffff55;
  --card:#fff;
  --shadow:0 22px 60px #2a17480f;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  min-height:100vh;
  overflow-x:hidden;
}

/* Background accents */
.bg.hero-gradient{
  position:fixed; inset:-20vmax;
  background:
    radial-gradient(36vmax 36vmax at 15% 15%, #ffd6e9 0, transparent 60%),
    radial-gradient(42vmax 42vmax at 85% 10%, #dfe6ff 0, transparent 60%),
    radial-gradient(30vmax 30vmax at 70% 85%, #ffe9f5 0, transparent 60%),
    radial-gradient(28vmax 28vmax at 10% 80%, #eaf0ff 0, transparent 60%);
  filter:blur(50px);
  z-index:-2;
}
.bg.shapes::before,
.bg.shapes::after{
  content:""; position:fixed; inset:auto; z-index:-1;
  width:56vmax; height:56vmax; border-radius:50%;
  background:conic-gradient(from 180deg at 50% 50%, #ffd3e6, #e7eeff, #ffd3e6);
  filter:blur(80px) saturate(120%);
  opacity:.22; bottom:-18vmax; right:-14vmax;
}
.bg.shapes::after{
  width:36vmax; height:36vmax; bottom:auto; top:-12vmax; left:-10vmax; opacity:.18;
}

/* Nav */
.nav{
  position:sticky; top:0; z-index:10;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav.glass{
  background:linear-gradient(180deg,#ffffffc7,#ffffff9e);
}
.nav .brand{
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; text-decoration:none; color:var(--ink); font-weight:800;
}
.nav .brand .logo{
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),#ffa8c7); color:white;
  box-shadow:0 10px 24px #ff7ab644;
}
.nav .nav-links{
  margin-left:auto; padding:0 18px; display:flex; gap:18px;
}
.nav .nav-links a{
  color:#3a3a49; text-decoration:none; padding:12px 2px; font-weight:600;
}
@media (max-width:760px){
  .nav .nav-links{ display:none }
}

/* Containers */
.container{ max-width:1100px; margin:0 auto; padding:0 20px }

/* Hero */
.hero{
  padding:84px 0 40px;
  display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center;
}
@media (max-width:960px){
  .hero{ grid-template-columns:1fr; padding-top:70px }
}
.hero h1{
  font-family:Playfair Display, serif;
  font-size: clamp(36px, 5vw, 64px);
  line-height:1.05; margin:0 0 14px;
}
.script{ font-family:Comfortaa, cursive; font-weight:700 }
.lead{ color:#3a3a49; font-size:clamp(16px, 2.2vw, 20px); line-height:1.7; margin:0 0 18px }
.accent{ color:var(--accent); text-shadow:0 8px 30px #ff7ab633 }

.stats{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.stat{
  display:grid; place-items:center;
  padding:14px 18px; border-radius:14px; border:1px solid var(--border);
  background:linear-gradient(180deg,#ffffff88,#ffffff4a);
  box-shadow: var(--shadow);
}
.stat-num{ font-size:26px; font-weight:800; color:#2a2a36 }
.stat-label{ font-size:12px; color:#6b6b7b; margin-top:2px }
.btn{
  background:linear-gradient(135deg,var(--accent),#ffa3cd);
  color:#fff; border:0; border-radius:999px;
  padding:12px 18px; font-weight:800; cursor:pointer;
  box-shadow:0 12px 28px #ff7ab64a; transition:transform .12s ease, filter .2s ease;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.05) }
.btn.subtle{
  background:#fff; color:#333; border:1px solid #eee; box-shadow:var(--shadow)
}

/* Hero photo */
.hero-photo .frame{
  border-radius:22px; overflow:hidden; border:1px solid #ffe1f1;
  box-shadow:0 30px 80px #00000018, 0 6px 18px #00000008;
  transform:rotate(-2deg);
}
.hero-photo img{ width:100%; display:block; object-fit:cover; height:100% }

/* Sections */
.section{ padding:48px 0 }
.title{
  font-family:Playfair Display, serif; font-size:clamp(28px, 3.5vw, 40px); margin:0 0 14px
}
.center{ text-align:center }
.muted{ color:var(--muted) }

/* Cards, glass, grids */
.card{
  background:linear-gradient(180deg,#ffffffcc,#ffffffa5);
  border:1px solid var(--border); border-radius:18px; padding:22px;
  box-shadow: var(--shadow);
}
.glass{ backdrop-filter:blur(10px) }
.grid-2{ display:grid; grid-template-columns:1.2fr .8fr; gap:18px }
@media (max-width:960px){ .grid-2{ grid-template-columns:1fr } }

/* Chips */
.chips{
  list-style:none; padding:0; margin:0;
  display:grid; gap:10px; grid-template-columns:1fr 1fr;
}
.chips li{
  background:#fff; border:1px dashed #ffd4e8; padding:10px 12px; border-radius:12px;
  box-shadow:0 10px 24px #00000008;
}
@media (max-width:600px){ .chips{ grid-template-columns:1fr } }

/* Gallery masonry */
.masonry{
  columns: 1;
  column-gap: 12px;
}
@media (min-width:640px){ .masonry{ columns: 2 } }
@media (min-width:980px){ .masonry{ columns: 3 } }
.tile{
  display:block; break-inside:avoid; margin:0 0 12px; border-radius:16px; overflow:hidden;
  border:1px solid #f6c9df; box-shadow:0 16px 40px #00000010;
  transform:translateZ(0);
}
.tile.wide img{ aspect-ratio: 16/9; object-fit:cover }
.tile.tall img{ aspect-ratio: 3/4; object-fit:cover }
.tile img{
  width:100%; display:block; transition:transform .25s ease, filter .25s ease;
}
.tile:hover img{ transform:scale(1.03); filter:brightness(1.05) }

/* Timeline */
.timeline{
  list-style:none; padding:0; margin:8px 0 0; display:grid; gap:12px;
}
.timeline li{
  display:flex; gap:10px; align-items:center; background:#fff; border:1px solid #f5d9ea;
  border-radius:14px; padding:12px 14px; box-shadow:0 10px 26px #0000000a;
}
.dot{
  width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(135deg,#ffd8ea,#e3eaff); font-size:14px
}

/* Letter */
.letter blockquote{
  font-family:Playfair Display, serif; font-size:clamp(20px, 2.6vw, 28px); line-height:1.4;
  background:linear-gradient(180deg,#fff9fc,#f7faff);
  border:1px solid #ffe3f0; border-radius:18px; padding:18px;
}

/* Footer */
.footer{
  text-align:center; padding:36px 12px; color:#6f6f6f; font-size:14px;
}

/* Reveal animations */
.reveal{ opacity:0; transform: translateY(14px); transition: all .6s cubic-bezier(.2,.7,.2,1) }
.reveal.in{ opacity:1; transform:none }
.delay-1{ transition-delay:.08s } .delay-2{ transition-delay:.16s } .delay-3{ transition-delay:.24s }

/* Floaty confetti/hearts */
.floaty{
  position:fixed; 
  animation: floatUp linear forwards; pointer-events:none; color:#ff5fae99;
  text-shadow:0 6px 18px #ff99cd66; 
  z-index:9;
  top: auto;
  bottom: -10px;
  animation-name: floatUp;
  animation-timing-function: linear;
}
@keyframes floatUp{
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: .9; }
  60% { opacity: .95; }
  100% { transform: translateY(-62vh); opacity: 0; }
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:#000000a8;
  display:grid; place-items:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:20;
}
.lightbox[aria-hidden="false"]{ opacity:1; pointer-events:auto }
.lightbox img{
  max-width:min(1000px,90vw); max-height:82vh; border-radius:12px;
  box-shadow:0 28px 80px #00000066;
}
.lightbox .close{
  position:absolute; top:14px; right:16px;
  width:40px; height:40px; border-radius:999px; border:0;
  font-size:22px; line-height:40px; cursor:pointer;
  background:#ffffffdd; box-shadow:0 8px 20px #00000033;
}
/* Soft, dreamy Sprinkle Love variant */
.soft-sprinkle {
position: fixed;
bottom: -10px;
left: 0;
pointer-events: none;
opacity: .95;
animation-fill-mode: both;
animation-name: floatUpSoft, swaySoft;
animation-timing-function: ease-out, ease-in-out;
animation-iteration-count: 1, infinite;
animation-direction: normal, alternate;
animation-duration: var(--dur, 3s), 1.8s; /* float set inline; sway loops */
animation-composition: add, add;

--sway: 10px;

filter: drop-shadow(0 8px 20px #ffb3d64a) saturate(110%);
text-shadow: 0 8px 18px #ffbad84d;
will-change: transform, opacity;
}

@keyframes floatUpSoft {
0% { transform: translateY(0); opacity: 0; }
10% { opacity: .9; }
60% { opacity: .95; }
100% { transform: translateY(-62vh); opacity: 0; }
}

@keyframes swaySoft {
0% { transform: translateX(calc(var(--sway) * -1)); }
100% { transform: translateX(var(--sway)); }
}
.emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }