:root {
  --bg: #070710;
  --card: rgba(255,255,255,.09);
  --card-strong: rgba(255,255,255,.14);
  --text: #ffffff;
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.16);
  --purple: #8b5cf6;
  --blue: #38bdf8;
  --gold: #facc15;
  --danger: #fb7185;
  --success: #34d399;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Poppins', system-ui, sans-serif; color: var(--text); background: var(--bg); }
.public-body { min-height: 100vh; overflow-x: hidden; position: relative; }
.center-only { display: grid; place-items: center; padding: 22px; }
.animated-bg { position: fixed; inset: 0; overflow: hidden; z-index: -2; background: radial-gradient(circle at 20% 15%, rgba(139,92,246,.45), transparent 32%), radial-gradient(circle at 85% 5%, rgba(56,189,248,.28), transparent 34%), radial-gradient(circle at 50% 100%, rgba(250,204,21,.2), transparent 28%), #070710; }
.animated-bg::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle, #000, transparent 75%); }
.animated-bg span { position: absolute; width: 13rem; height: 13rem; border-radius: 999px; background: linear-gradient(135deg, rgba(139,92,246,.4), rgba(56,189,248,.22)); filter: blur(8px); animation: float 14s ease-in-out infinite; }
.animated-bg span:nth-child(1){ left: 7%; top: 14%; animation-duration: 12s; }
.animated-bg span:nth-child(2){ right: 8%; top: 20%; animation-duration: 16s; }
.animated-bg span:nth-child(3){ left: 18%; bottom: 8%; animation-duration: 18s; }
.animated-bg span:nth-child(4){ right: 20%; bottom: 12%; animation-duration: 13s; }
.animated-bg span:nth-child(5){ left: 45%; top: 45%; animation-duration: 20s; opacity: .4; }
@keyframes float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-34px) scale(1.08); } }
.hero-wrap { width: min(1160px, calc(100% - 28px)); margin: 0 auto; padding: 50px 0 80px; display: grid; gap: 28px; }
.hero-card, .form-card { position: relative; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.055)); box-shadow: 0 24px 80px rgba(0,0,0,.38); backdrop-filter: blur(18px); border-radius: 34px; padding: clamp(26px, 4vw, 54px); overflow: hidden; }
.hero-card::before, .form-card::before { content: ''; position: absolute; inset: -1px; background: linear-gradient(135deg, rgba(250,204,21,.3), transparent 22%, rgba(139,92,246,.25), transparent 72%, rgba(56,189,248,.22)); opacity: .7; pointer-events: none; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); padding: 1px; border-radius: inherit; -webkit-mask-composite: xor; mask-composite: exclude; }
.thanks-card { width: min(760px, 100%); }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid rgba(250,204,21,.35); border-radius: 999px; background: rgba(250,204,21,.1); color: #fde68a; font-weight: 600; margin-bottom: 18px; }
h1 { margin: 0; font-size: clamp(2.2rem, 7vw, 5.4rem); line-height: .94; letter-spacing: -0.06em; }
.hero-copy { color: var(--muted); font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.75; max-width: 850px; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 28px 0 8px; }
.countdown div { padding: 18px 14px; border-radius: 24px; border: 1px solid var(--line); background: rgba(0,0,0,.24); text-align: center; }
.countdown strong { display: block; font-size: clamp(1.8rem, 5vw, 3.5rem); line-height: 1; }
.countdown span { color: var(--muted); font-size: .9rem; }
.countdown-note { color: rgba(255,255,255,.62); margin: 0 0 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 999px; padding: 0 22px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #09090f; background: linear-gradient(135deg, var(--gold), #fff1a8); box-shadow: 0 16px 34px rgba(250,204,21,.2); }
.btn-outline { color: #fff; border: 1px solid var(--line); background: rgba(255,255,255,.07); }
.btn.locked { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn.full { width: 100%; }
.section-title span { color: #fde68a; font-weight: 700; }
.section-title h2 { margin: 6px 0 8px; font-size: clamp(1.9rem, 4vw, 3rem); }
.section-title p { color: var(--muted); margin: 0 0 24px; }
.birthday-form { display: grid; gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
label { display: grid; gap: 8px; font-weight: 600; }
label small { color: var(--muted); font-weight: 500; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 18px; background: rgba(0,0,0,.25); color: #fff; padding: 15px 16px; outline: none; font: inherit; transition: border .2s ease, box-shadow .2s ease; }
input:focus, textarea:focus { border-color: rgba(56,189,248,.8); box-shadow: 0 0 0 4px rgba(56,189,248,.13); }
textarea { resize: vertical; min-height: 150px; }
.check-line { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.check-line input { width: 18px; height: 18px; }
.file-box { border: 1px dashed rgba(255,255,255,.3); border-radius: 24px; padding: 22px; text-align: center; background: rgba(255,255,255,.05); cursor: pointer; }
.file-box input { display: none; }
.file-box span { color: var(--muted); font-weight: 500; }
.flash { padding: 14px 16px; border-radius: 18px; margin-bottom: 18px; font-weight: 600; }
.flash-success { background: rgba(52,211,153,.13); color: #a7f3d0; border: 1px solid rgba(52,211,153,.28); }
.flash-error { background: rgba(251,113,133,.13); color: #fecdd3; border: 1px solid rgba(251,113,133,.28); }
.reveal { animation: revealUp .85s cubic-bezier(.2,.8,.2,1) both; }
.form-card { animation-delay: .14s; }
@keyframes revealUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 740px) {
  .hero-wrap { padding-top: 22px; }
  .grid-2, .countdown { grid-template-columns: 1fr 1fr; }
  .hero-actions .btn { width: 100%; }
  h1 { font-size: 2.7rem; }
}