:root{
  --bg:#ffffff;
  --accent1:#1f8ef1;
  --accent2:#6ad7a8;
  --muted:#6b6b7a;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:"Poppins",system-ui,Segoe UI,Arial;background:var(--bg);color:#191227}
.page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:14px}

/* card/stage */
.card{width:100%;max-width:760px;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;align-items:center}
.stage{width:100%;background:#ffffff;border-radius:14px;padding:18px;box-shadow:0 12px 40px rgba(17,12,34,0.06);display:flex;flex-direction:column;align-items:center;gap:12px;position:relative}

/* texts */
.title{font-weight:800;font-size:20px;color:#18122b;margin:0;text-align:center}
.subtitle{font-size:14px;color:var(--muted);margin:0;text-align:center}

/* images */
.media{display:flex;align-items:center;justify-content:center;width:100%}
.cap-img{width:min(86vw,420px);height:auto;object-fit:contain;border-radius:12px;pointer-events:none;transition:transform .6s ease,opacity .4s}
.grad-photo{width:min(86vw,420px);height:auto;border-radius:12px;object-fit:cover;box-shadow:0 22px 60px rgba(10,10,20,0.12);opacity:0;transform:translateY(8px) scale(.98);transition:transform .45s ease,opacity .45s ease}
.card.visible .grad-photo{opacity:1;transform:translateY(0) scale(1)}

/* CTA buttons */
.ctas{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}
.btn{padding:12px 18px;border-radius:12px;border:0;cursor:pointer;font-weight:700;font-size:16px}
.btn.primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white;box-shadow:0 12px 30px rgba(31,142,241,0.12)}
.btn.small{background:transparent;border:2px solid rgba(0,0,0,0.06);padding:8px 12px;border-radius:10px;font-size:14px}
.btn.tiny{padding:8px 10px;font-size:13px;border-radius:10px}

/* message area */
.message{width:92%;max-width:640px;text-align:center;font-family:monospace,"Courier New",Courier;font-size:16px;color:#1b1330;min-height:86px;line-height:1.6}

/* download spacing */
.download-wrap{margin-top:10px;display:flex;justify-content:center}

/* countdown overlay (full-screen) */
.count-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:999990;pointer-events:none;opacity:0;transition:opacity .28s ease,backdrop-filter .28s ease;background:transparent}
.count-overlay.active{opacity:1;pointer-events:auto;backdrop-filter:blur(4px)}
.count-overlay .count-number{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:220px;height:220px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:120px;color:#fff;background:rgba(0,0,0,.75);box-shadow:0 30px 80px rgba(0,0,0,.45);z-index:2147483646}
@media(max-width:420px){ .count-overlay .count-number{width:150px;height:150px;font-size:82px} }

/* color classes (if you want overlay color) */
.count-overlay.count-bg-3{background:#FF6B6B}
.count-overlay.count-bg-2{background:#FFD166}
.count-overlay.count-bg-1{background:#9AE6B4}

/* small animation helper */
.count-overlay .count-number.pop{transform:translate(-50%,-50%) scale(1.08);transition:transform 180ms ease}

/* responsive */
@media(max-width:420px){
  .title{font-size:18px}
  .cap-img, .grad-photo{width:92vw}
  .ctas{gap:8px}
}

/* reduce vertical gap between title and photo */
.stage { padding-top: 4px !important; }
.photo-area { margin-top: 2px !important; }
.grad-photo { margin-top: 0 !important; }