:root{
  --bg:#0a1410;
  --bg2:#1e2f26;
  --paper:#fdfaf6;
  --ink:#111e19;
  --muted:#5a6f68;
  --muted2:#8a9a93;
  --gold:#c5a46a;
  --gold-light:#ffeab0;
  --line:#ebe3d1;
}
*{box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
html,body{margin:0; padding:0}
body{
  min-height:100vh;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding:56px 18px;
  font-family:'Inter', system-ui, sans-serif;
  overflow-x:hidden;
}
.bg{position:fixed; inset:0; z-index:0; background:radial-gradient(120% 120% at 50% 0%, var(--bg2) 0%, var(--bg) 60%)}
.blob{position:absolute; border-radius:50%; filter:blur(80px); opacity:0.22; pointer-events:none}
.b1{width:420px; height:420px; background:radial-gradient(circle, rgba(197,164,106,0.22) 0%, transparent 70%); left:-8%; top:8%}
.b2{width:360px; height:360px; background:radial-gradient(circle, rgba(197,164,106,0.18) 0%, transparent 70%); right:-6%; top:18%}
.b3{width:520px; height:520px; background:radial-gradient(circle, rgba(197,164,106,0.12) 0%, transparent 75%); left:22%; bottom:-18%}

.wrapper{position:relative; z-index:1; width:100%; max-width:560px; display:flex; flex-direction:column; align-items:center; gap:18px}
.card{
  width:100%;
  background:var(--paper);
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.6) inset;
  border:1px solid rgba(197,164,106,0.18);
  animation:rise 1.1s cubic-bezier(0.16,1,0.3,1);
}
@keyframes rise{from{opacity:0; transform:translateY(28px) scale(0.985)} to{opacity:1; transform:translateY(0) scale(1)}}
@keyframes fall{to{transform:translateY(110vh) translateX(var(--tx,0px)) rotate(360deg); opacity:0}}

.card-top-line{height:4px; background:linear-gradient(90deg, var(--gold), #e8dcc3, var(--gold))}
.watercolor-header{
  height:180px;
  background-size:cover;
  background-position:center;
  position:relative;
}
.watercolor-header::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(253,250,246,0) 10%, var(--paper) 92%);
}
.watercolor-header.small{height:110px}

.card-body{padding:28px 36px 32px; text-align:center}
.gift-icon{font-size:42px; margin:8px 0 14px; filter:drop-shadow(0 4px 12px rgba(197,164,106,0.35))}
.card-body h1{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:600; font-size:52px; line-height:0.92; letter-spacing:-0.03em; color:var(--ink); margin:0
}
.card-body h2{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:600; font-size:42px; line-height:0.95; color:var(--ink); margin:10px 0 0
}
.hint{margin-top:16px; font-weight:300; font-size:15px; line-height:1.6; color:var(--muted)}
.cta{
  margin-top:24px; background:var(--ink); color:var(--paper); border:none;
  padding:14px 28px; border-radius:999px; font-family:'Inter',sans-serif; font-weight:500;
  font-size:13px; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px; transition:transform 0.2s, background 0.2s
}
.cta:hover{transform:translateY(-1px); background:#1e2f26}
.cta span{color:var(--gold)}
.institution{margin-top:22px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); opacity:0.7}

.eyebrow{font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); font-weight:500; margin:0}
.subtitle{font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-size:18px; color:var(--muted); margin-top:8px}

.values{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; text-align:left; max-width:360px; margin-left:auto; margin-right:auto}
.values div{background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 16px}
.values strong{display:block; font-family:'Cormorant Garamond',serif; font-size:16px; color:var(--ink)}
.values span{font-size:12px; color:var(--muted); line-height:1.4; margin-top:2px; display:block}

.message{margin-top:26px; font-weight:300; font-size:15px; line-height:1.85; color:#2a3a33; max-width:380px; margin-left:auto; margin-right:auto}

.divider{display:flex; align-items:center; gap:12px; max-width:260px; margin:28px auto 0}
.divider span{flex:1; height:1px; background:var(--line)}
.divider i{font-style:normal; color:var(--gold); font-size:11px}

.footer{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:24px; text-align:left}
.logo-box{width:64px; height:64px; border-radius:14px; border:1.2px dashed rgba(197,164,106,0.45); display:grid; place-items:center; font-size:10px; letter-spacing:0.12em; color:#b9a07a; background:rgba(253,250,246,0.9)}
.comp{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:18px; color:var(--ink); margin:0}
.sub{font-size:11px; color:var(--muted); margin:2px 0 0}

.link{background:none; border:none; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); cursor:pointer; margin-top:22px; text-decoration:underline; text-underline-offset:4px}
.monogram{width:40px; height:40px; margin:0 auto 10px; border-radius:50%; border:1px solid var(--gold); display:grid; place-items:center; color:var(--gold)}

.outside{font-size:10px; letter-spacing:0.08em; color:rgba(255,255,255,0.4); margin-top:4px}

@media(max-width:560px){
  .card-body h1{font-size:42px}
  .card-body h2{font-size:34px}
  .card-body{padding:22px 22px 26px}
  .values{grid-template-columns:1fr}
}