:root{
  --bg1:#fff9e9;
  --bg2:#fff3cc;
  --gold:#f2c94c;
  --sun:#f6d469;
  --brown:#6e5131;
  --ink:#5a4350;
  --white:#fffdf8;
  --shadow:0 18px 45px rgba(102,73,30,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"DM Sans",system-ui,sans-serif;
  color:var(--ink);
  background:radial-gradient(circle at top,#fffef6 0%,var(--bg1) 35%,var(--bg2) 100%);
  min-height:100vh;
  overflow-x:hidden;
}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:9px 9px}
.petals{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.petals::before,.petals::after{content:"🌻 🌼 ✨ 🌻 ✨";position:absolute;font-size:20px;opacity:.18;animation:floaty 18s linear infinite;white-space:nowrap}
.petals::before{top:-30px;left:-10%;width:120%}
.petals::after{bottom:-30px;right:-10%;width:120%;animation-duration:22s;animation-direction:reverse}

.intro-screen{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,248,225,.92),rgba(248,223,111,.86));backdrop-filter:blur(4px);z-index:5;transition:opacity .8s ease,visibility .8s ease}
.intro-screen.hidden{opacity:0;visibility:hidden}
.intro-card{max-width:520px;width:min(92vw,520px);background:rgba(255,253,245,.95);border:1px solid rgba(201,163,66,.25);border-radius:24px;padding:34px 26px;text-align:center;box-shadow:var(--shadow);animation:cardIn .9s ease both}
.sunflower.big{font-size:52px;margin-bottom:8px;animation:pulse 2.4s infinite}
.eyebrow,.section-label{letter-spacing:.22em;text-transform:uppercase;color:#9a7b36;font-size:12px;font-weight:700}
.intro-card h1,.hero h1,.message-card h2,.verse-card h3,.final-note h3{font-family:"Cormorant Garamond",serif;color:#6f4f2a;margin:.2em 0}
.intro-card h1{font-size:54px;line-height:1.02}
.intro-copy{font-size:16px;line-height:1.8;color:#715f4e;max-width:380px;margin:12px auto 0}
.open-btn{margin-top:22px;background:linear-gradient(135deg,#f4c542,#edb700);color:#5c4300;border:0;padding:16px 26px;border-radius:999px;font-weight:700;font-size:16px;box-shadow:0 10px 25px rgba(227,174,0,.25);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.open-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(227,174,0,.35)}
.tap-note{margin-top:12px;color:#8f7c68;font-size:13px}

.page{position:relative;max-width:1180px;margin:0 auto;padding:42px 18px 60px;animation:fadeIn .9s ease}
.hidden{display:none}
.corner{position:fixed;font-size:26px;opacity:.9;z-index:1}
.tl{top:14px;left:14px}.tr{top:14px;right:14px}.bl{bottom:14px;left:14px}.br{bottom:14px;right:14px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;min-height:100vh;padding:20px 0}
.hero-text,.photo-card,.message-card,.verse-card,.final-note{background:rgba(255,253,247,.86);backdrop-filter:blur(6px);border:1px solid rgba(202,179,112,.26);border-radius:28px;box-shadow:var(--shadow)}
.hero-text{padding:34px}
.hero h1{font-size:clamp(42px,7vw,84px);line-height:.95;margin:10px 0 18px}
.hero h1 span{display:block;color:#d89f00}
.lead{font-size:18px;line-height:1.8;color:#6c5b48;max-width:630px}
.countdown-wrap{margin-top:26px;padding:22px;border-radius:22px;background:linear-gradient(180deg,rgba(255,245,201,.7),rgba(255,252,237,.9));border:1px solid rgba(210,171,75,.25)}
.countdown-title{margin:0 0 16px;color:#806030;font-weight:700}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.time-box{padding:18px 12px;border-radius:20px;background:#fffdf8;text-align:center;box-shadow:0 8px 18px rgba(175,146,75,.12)}
.time-box strong{display:block;font-size:clamp(24px,4vw,42px);color:#7b5808;font-family:"Cormorant Garamond",serif;line-height:1}
.time-box span{display:block;margin-top:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9b8453}
.countdown-message{margin:16px 4px 0;color:#7a6856;font-size:14px}
.photo-card{padding:22px;text-align:center}
.photo-frame{border-radius:24px;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.13);border:6px solid rgba(255,248,221,.95)}
.photo-frame img{display:block;width:100%;height:auto}
.photo-note{margin:14px 8px 2px;color:#8a7357;font-size:14px}
.message-card{padding:30px;margin-top:6px}
.message-card h2{font-size:52px}
.message-card p{font-size:17px;line-height:1.95;color:#634f54}
.message-main{font-weight:700;color:#6a5127!important}
.verse-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}
.verse-card{padding:28px}
.verse-card h3{font-size:40px}
.verse-card p,.verse-card blockquote{font-size:16px;line-height:1.9;color:#644f4f}
.verse-card blockquote{margin:10px 0;padding:0 0 0 16px;border-left:4px solid #ecc85a;font-style:italic;color:#745935}
.verse-note{color:#8c7144!important;font-weight:700}
.final-note{padding:30px;margin-top:24px;text-align:center}
.final-note h3{font-size:48px}
.final-note p{font-size:17px;line-height:1.9;color:#614e49;max-width:740px;margin:10px auto}
.signature{font-weight:700;color:#9a761a}
.reveal-card{opacity:0;transform:translateY(30px);transition:opacity .9s ease, transform .9s ease}
.reveal-card.visible{opacity:1;transform:translateY(0)}

@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{50%{transform:scale(1.08)}}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(22px)}100%{transform:translateY(0)}}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:110px}
  .verse-grid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(40px,14vw,72px)}
}
@media (max-width: 620px){
  .page{padding:24px 14px 40px}
  .intro-card{padding:28px 18px}
  .intro-card h1{font-size:44px}
  .hero-text,.message-card,.verse-card,.final-note,.photo-card{border-radius:22px;padding:22px}
  .countdown{grid-template-columns:repeat(2,1fr)}
  .time-box strong{font-size:32px}
  .message-card h2,.final-note h3{font-size:42px}
  .verse-card h3{font-size:34px}
  .message-card p,.verse-card p,.verse-card blockquote,.final-note p{font-size:15px}
}