@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,600&family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  --gold:#e8b25c;
  --gold-light:#f6d78e;
  --pink:#ff8fab;
  --rose:#e64980;
  --bg:#120a12;
  --bg2:#1c0f1e;
  --card:#211327;
  --text:#f5e9ef;
  --muted:#c9a9bd;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:'Poppins',sans-serif;
  background:radial-gradient(ellipse at top, #2a1330 0%, var(--bg) 55%, #0a0509 100%);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

#hearts-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

.page{
  position:relative;
  z-index:1;
  max-width:1100px;
  margin:0 auto;
  padding:0 32px 80px;
}

nav{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 40px;
  background:rgba(18,10,18,0.65);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(232,178,92,0.15);
}

.brand{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:1.3rem;
  color:var(--gold-light);
  letter-spacing:0.5px;
  text-decoration:none;
}
.brand span{color:var(--pink);}

.navlinks{display:flex;gap:8px;flex-wrap:wrap;}
.navlinks a{
  color:var(--muted);
  text-decoration:none;
  font-size:0.85rem;
  font-weight:500;
  padding:8px 16px;
  border-radius:999px;
  transition:all .25s ease;
  white-space:nowrap;
}
.navlinks a:hover, .navlinks a.active{
  color:#120a12;
  background:linear-gradient(135deg,var(--gold-light),var(--pink));
}

.hero{
  text-align:center;
  padding:100px 20px 40px;
}

.eyebrow{
  display:inline-block;
  font-size:0.8rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold-light);
  border:1px solid rgba(232,178,92,0.4);
  padding:6px 18px;
  border-radius:999px;
  margin-bottom:28px;
  animation:fadeDown 1s ease;
}

h1.hero-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.6rem, 6vw, 5.2rem);
  font-weight:900;
  line-height:1.05;
  background:linear-gradient(120deg,var(--gold-light) 10%, var(--pink) 50%, var(--gold-light) 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:fadeUp 1s ease;
}

.hero-sub{
  margin-top:22px;
  font-size:clamp(1rem,1.6vw,1.3rem);
  color:var(--muted);
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
  animation:fadeUp 1.3s ease;
}

.counter-wrap{
  margin:60px auto 20px;
  animation:fadeUp 1.6s ease;
}
.counter-label{
  font-size:0.85rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--pink);
  margin-bottom:18px;
}
.counter{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
}
.counter .box{
  background:linear-gradient(160deg, var(--card), #1a0e1e);
  border:1px solid rgba(232,178,92,0.25);
  border-radius:20px;
  padding:22px 26px;
  min-width:110px;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}
.counter .num{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:700;
  color:var(--gold-light);
  font-variant-numeric:tabular-nums;
}
.counter .lbl{
  font-size:0.75rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-top:6px;
}

.cta-row{
  margin-top:56px;
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
  animation:fadeUp 1.9s ease;
}
.btn{
  display:inline-block;
  text-decoration:none;
  padding:15px 32px;
  border-radius:999px;
  font-weight:600;
  font-size:0.95rem;
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-primary{
  background:linear-gradient(135deg,var(--gold-light),var(--pink));
  color:#1a0e1e;
  box-shadow:0 10px 26px rgba(255,143,171,0.25);
}
.btn-outline{
  border:1px solid rgba(232,178,92,0.4);
  color:var(--gold-light);
}
.btn:hover{transform:translateY(-3px);}

section{
  margin-top:90px;
}
.section-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,3.5vw,2.6rem);
  text-align:center;
  color:var(--gold-light);
  margin-bottom:12px;
}
.section-sub{
  text-align:center;
  color:var(--muted);
  max-width:560px;
  margin:0 auto 50px;
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
@media(max-width:900px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.card-grid{grid-template-columns:1fr;}}

.card{
  background:linear-gradient(160deg, var(--card), #180c1c);
  border:1px solid rgba(232,178,92,0.15);
  border-radius:18px;
  padding:30px 24px;
  transition:transform .3s ease, border-color .3s ease;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,143,171,0.5);
}
.card .icon{font-size:1.8rem;margin-bottom:14px;display:block;}
.card h3{font-family:'Playfair Display',serif;font-size:1.15rem;color:var(--gold-light);margin-bottom:8px;}
.card p{color:var(--muted);font-size:0.9rem;line-height:1.6;}

.timeline{
  max-width:720px;
  margin:0 auto;
  position:relative;
  padding-left:32px;
  border-left:2px solid rgba(232,178,92,0.25);
}
.tl-item{
  position:relative;
  margin-bottom:44px;
}
.tl-item::before{
  content:'';
  position:absolute;
  left:-40px;
  top:4px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold-light),var(--pink));
  box-shadow:0 0 0 4px rgba(232,178,92,0.15);
}
.tl-date{
  font-size:0.78rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--pink);
  margin-bottom:6px;
}
.tl-item h3{font-family:'Playfair Display',serif;color:var(--gold-light);margin-bottom:6px;font-size:1.2rem;}
.tl-item p{color:var(--muted);font-size:0.92rem;line-height:1.6;}

.letter{
  max-width:680px;
  margin:0 auto;
  background:linear-gradient(160deg, var(--card), #170b1a);
  border:1px solid rgba(232,178,92,0.2);
  border-radius:24px;
  padding:56px 48px;
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
}
.letter p{
  font-size:1.05rem;
  line-height:2;
  color:var(--text);
  margin-bottom:22px;
}
.letter .sign{
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-size:1.4rem;
  color:var(--gold-light);
  text-align:right;
  margin-top:10px;
}

.quiz-box{
  max-width:560px;
  margin:0 auto;
  background:linear-gradient(160deg, var(--card), #170b1a);
  border:1px solid rgba(232,178,92,0.2);
  border-radius:24px;
  padding:44px;
  text-align:center;
}
.quiz-box h3{font-family:'Playfair Display',serif;color:var(--gold-light);font-size:1.5rem;margin-bottom:26px;}
.opt-btn{
  display:block;
  width:100%;
  padding:16px;
  margin-bottom:14px;
  background:rgba(232,178,92,0.08);
  border:1px solid rgba(232,178,92,0.25);
  border-radius:14px;
  color:var(--text);
  font-size:1rem;
  cursor:pointer;
  transition:all .2s ease;
  font-family:'Poppins',sans-serif;
}
.opt-btn:hover{background:rgba(255,143,171,0.15);border-color:var(--pink);}
.result{
  display:none;
  margin-top:20px;
  font-size:1.1rem;
  color:var(--pink);
  font-weight:600;
}

.coupon-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
@media(max-width:700px){.coupon-grid{grid-template-columns:1fr;}}
.coupon{
  position:relative;
  background:repeating-linear-gradient(160deg, var(--card), #180c1c);
  border:2px dashed rgba(232,178,92,0.4);
  border-radius:16px;
  padding:26px;
  cursor:pointer;
  transition:transform .25s ease;
}
.coupon:hover{transform:scale(1.02);}
.coupon .tag{
  font-size:0.7rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--pink);
  margin-bottom:10px;
}
.coupon h4{font-family:'Playfair Display',serif;color:var(--gold-light);font-size:1.15rem;}
.coupon p{color:var(--muted);font-size:0.85rem;margin-top:8px;}
.coupon .stamp{
  position:absolute;
  top:18px;
  right:18px;
  font-size:1.6rem;
}

footer{
  text-align:center;
  padding:50px 20px 30px;
  color:var(--muted);
  font-size:0.85rem;
}
footer .heart{color:var(--pink);}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-16px);}to{opacity:1;transform:translateY(0);}}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

.page-hero{
  text-align:center;
  padding:70px 20px 20px;
}
.page-hero h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,4.5vw,3.4rem);
  color:var(--gold-light);
}
.page-hero p{color:var(--muted);margin-top:14px;max-width:560px;margin-left:auto;margin-right:auto;}

/* ---- Proposal page ---- */
.propose-stage{
  position:relative;
  min-height:calc(100vh - 90px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:60px 20px;
  overflow:hidden;
}
.propose-ring{
  font-size:3rem;
  margin-bottom:24px;
  animation:ringFloat 3s ease-in-out infinite;
}
@keyframes ringFloat{
  0%,100%{transform:translateY(0) rotate(-4deg);}
  50%{transform:translateY(-14px) rotate(4deg);}
}
.propose-title{
  font-family:'Playfair Display',serif;
  font-weight:900;
  font-size:clamp(2.2rem,6vw,4.6rem);
  line-height:1.15;
  background:linear-gradient(120deg,var(--gold-light) 10%, var(--pink) 50%, var(--gold-light) 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  max-width:900px;
}
.propose-sub{
  margin-top:20px;
  color:var(--muted);
  font-size:clamp(0.95rem,1.4vw,1.15rem);
  max-width:520px;
}
.propose-btns{
  position:relative;
  margin-top:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  width:100%;
  max-width:700px;
  min-height:180px;
}
.btn-yes{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:clamp(1.1rem,2vw,1.5rem);
  padding:24px 56px;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold-light),var(--pink));
  color:#1a0e1e;
  cursor:pointer;
  box-shadow:0 16px 40px rgba(255,143,171,0.35);
  transition:transform .2s ease, box-shadow .2s ease;
  animation:yesPulse 2.4s ease-in-out infinite;
  z-index:2;
}
.btn-yes:hover{transform:scale(1.08);box-shadow:0 20px 50px rgba(255,143,171,0.5);}
@keyframes yesPulse{
  0%,100%{box-shadow:0 16px 40px rgba(255,143,171,0.35);}
  50%{box-shadow:0 16px 55px rgba(255,143,171,0.6);}
}
.btn-no{
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:clamp(0.95rem,1.6vw,1.15rem);
  padding:18px 40px;
  border:1px solid rgba(232,178,92,0.4);
  border-radius:999px;
  background:rgba(30,15,32,0.6);
  color:var(--gold-light);
  cursor:pointer;
  position:absolute;
  transition:top .18s ease, left .18s ease, transform .12s ease;
  z-index:1;
}
.no-caption{
  margin-top:22px;
  min-height:24px;
  color:var(--pink);
  font-size:0.95rem;
  font-weight:600;
  opacity:0;
  transition:opacity .3s ease;
}
.no-caption.show{opacity:1;}

.propose-count{
  margin-top:10px;
  font-size:0.8rem;
  color:var(--muted);
  letter-spacing:0.5px;
}

.yes-screen{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  background:radial-gradient(ellipse at center, #2a1330 0%, var(--bg) 60%, #0a0509 100%);
  padding:20px;
}
.yes-screen.show{display:flex;}
.yes-screen .big-heart{
  font-size:clamp(4rem,10vw,7rem);
  animation:heartBeat 1.1s ease-in-out infinite;
}
@keyframes heartBeat{
  0%,100%{transform:scale(1);}
  25%{transform:scale(1.15);}
  40%{transform:scale(0.98);}
  60%{transform:scale(1.1);}
}
.yes-screen h1{
  font-family:'Playfair Display',serif;
  font-weight:900;
  font-size:clamp(2.4rem,7vw,5rem);
  margin-top:20px;
  background:linear-gradient(120deg,var(--gold-light) 10%, var(--pink) 50%, var(--gold-light) 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.yes-screen p{
  margin-top:16px;
  color:var(--muted);
  font-size:clamp(1rem,1.8vw,1.3rem);
  max-width:560px;
}

.confetti-piece{
  position:fixed;
  top:-40px;
  z-index:49;
  pointer-events:none;
  will-change:transform;
}

#fireworks-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
.yes-screen .big-heart,
.yes-screen h1,
.yes-screen p,
.yes-screen .yes-home-btn{
  position:relative;
  z-index:1;
}
.yes-home-btn{
  margin-top:36px;
}