:root{
  --bg: #0f0f13;
  --card: #14141b;
  --card-2: #181820;
  --text: #f6f7fb;
  --muted: #bfc3d9;
  --accent: #ff4d7e;
  --accent-2: #ff96b0;
  --ring: rgba(255, 77, 126, 0.45);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --container: 1120px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--text); background:
    radial-gradient(1200px 700px at 70% -10%, rgba(255,77,126,.12), transparent 55%),
    radial-gradient(800px 500px at 10% 20%, rgba(255,150,176,.08), transparent 60%),
    var(--bg);
  font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.container{ width:min(100% - 2rem, var(--container)); margin-inline:auto; }
a{ color:inherit; text-decoration:none; }

.site-header, main, .site-footer, .bg-glow {
  position: relative;
  z-index: 1;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; font-weight:800; }
.brand-text{ font-size:1.05rem; }
.heart-logo{
  width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 6px 18px var(--ring);
}
.nav{ display:flex; gap:.25rem; }
.nav a{
  padding:.55rem .9rem; border-radius:999px; font-weight:700; color:var(--muted);
  transition:transform .2s ease, color .2s ease, background .2s ease;
}
.nav a:hover, .nav a.active{ color:var(--text); background:rgba(255,255,255,.06); transform:translateY(-1px); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; }
.nav-toggle{ display:none; background:transparent; border:0; padding:.4rem; border-radius:10px; }
.nav-toggle:hover{ background:rgba(255,255,255,.06); }
.nav-toggle-bar{ display:block; width:24px; height:2px; background:var(--text); border-radius:2px; margin:5px 0; }

@media (max-width: 820px){
  .nav-toggle{ display:inline-block; }
  .nav{
    position: fixed; top: 56px; right: 12px; left: 12px;
    display: grid; gap: .35rem; padding:.6rem;
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; box-shadow: var(--shadow);
    transform-origin: top center; transform: scaleY(.9); opacity:0; pointer-events:none;
    transition: opacity .16s ease, transform .16s ease; z-index:50;
  }
  .site-header.nav-open .nav{ opacity:1; transform:scaleY(1); pointer-events:auto; }
}

.hero{ position:relative; padding:6.5rem 0 3.5rem; text-align:center; }
.hero-inner{ max-width:860px; margin:0 auto; }
.hero-title{
  font-family:"Playfair Display", Georgia, serif;
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height:1.05; margin:0 0 .5rem;
  text-shadow:0 10px 30px rgba(0,0,0,.45);
}
.accent{ color:var(--accent); }
.hero-subtitle{ color:var(--muted); font-size: clamp(1rem, 2.2vw, 1.2rem); margin:0 auto 1.2rem; }
.hero-cta{ margin-top: .6rem; }
.btn{
  display:inline-flex; gap:.5rem; align-items:center; padding:.85rem 1.15rem; font-weight:800; border-radius:12px; border:0;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; box-shadow:0 10px 24px var(--ring);
}
.btn-heart{ display:grid; place-items:center; width:1.1em; height:1.1em; border-radius:6px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-weight:900; box-shadow:0 2px 8px var(--ring); }

.heart-field{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .95;
}

.section{ padding:3.25rem 0; }
.section.alt{ background: linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,0)); }
.section-title{ font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin:0 0 1.1rem; font-weight:800; }

.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.timeline::before{
  content:""; position:absolute; left:calc(50% - 1px); top:0; bottom:0; width:2px; background:rgba(255,255,255,.08);
}
.tl-item{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.1rem 0; align-items:start; }
.tl-item:nth-child(odd) .tl-card{ grid-column: 1 / 2; }
.tl-item:nth-child(odd) .tl-dot{ grid-column: 2 / 3; justify-self:start; }
.tl-item:nth-child(even) .tl-card{ grid-column: 2 / 3; }
.tl-item:nth-child(even) .tl-dot{ grid-column: 1 / 2; justify-self:end; }
.tl-dot{
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 8px 18px var(--ring);
}
.tl-card{
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid rgba(255,255,255,.08); border-radius: 14px; padding: .9rem 1rem; box-shadow: var(--shadow);
  opacity:0; transform: translateY(10px) scale(.98); transition: opacity .25s ease, transform .25s ease;
}
.tl-card.show{ opacity:1; transform: translateY(0) scale(1); }
.tl-card h3{ margin:.1rem 0 .25rem; font-weight:800; }
.tl-card p{ margin:.1rem 0 .3rem; color:var(--muted); }
.tl-date{ font-size:.85rem; color:var(--muted); }

.cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .9rem; }
.card{
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding: .9rem 1rem; box-shadow: var(--shadow);
}
.card h3{ margin:.2rem 0 .2rem; font-weight:800; }
.card p{ margin:0; color:var(--muted); }
.card-img{
  height:160px; border-radius:12px; margin-bottom:.6rem;
  background:
    radial-gradient(260px 160px at 70% -10%, rgba(255,77,126,.22), transparent 60%),
    url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat;
  filter:saturate(1.05) contrast(1.05);
}
.card-img.img-2{
  background:
    radial-gradient(260px 160px at 70% -10%, rgba(255,77,126,.22), transparent 60%),
    url('https://images.unsplash.com/photo-1541849546-216549ae2161?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat;
}
.card-img.img-3{
  background:
    radial-gradient(260px 160px at 70% -10%, rgba(255,77,126,.22), transparent 60%),
    url('https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat;
}

.tilt{ transition: transform .18s ease, box-shadow .18s ease; will-change: transform; }
.tilt:hover{ transform: translateY(-4px) rotate(.4deg); box-shadow: 0 16px 36px rgba(0,0,0,.35); }

.stats{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:.9rem; text-align:center;
}
.stat{
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding: 1rem 1rem 1.1rem;
  box-shadow: var(--shadow);
}
.stat-num{
  display:block; font-family:"Playfair Display", Georgia, serif;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight:800;
}
.stat-label{ color:var(--muted); font-size:.95rem; }

.section.note blockquote{
  margin:0; padding:1.1rem 1.2rem; text-align:center;
  font-family:"Playfair Display", Georgia, serif; font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; box-shadow: var(--shadow);
}

.site-footer{ border-top: 1px solid rgba(255,255,255,.06); padding:1.5rem 0 3rem; color:var(--muted); text-align:center; }

.bg-glow{
  position:fixed; inset:-20% -20% auto -20%; height:60vh; pointer-events:none; z-index:-1;
  background:
    radial-gradient(800px 400px at 80% -10%, rgba(255,77,126,.08), transparent 60%),
    radial-gradient(600px 300px at 0% 110%, rgba(255,150,176,.08), transparent 60%);
}

@media (max-width: 960px){
  .cards{ grid-template-columns: 1fr 1fr; }
  .timeline::before{ left: 10px; }
  .tl-item{ grid-template-columns: 1fr; }
  .tl-dot{ order: -1; justify-self: start !important; margin-left: 0.55rem; }
}
@media (max-width: 640px){
  .cards{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: 1fr; }
  .heart-field{ height: 220px; }
}