:root{
  --bg:#0A0F2C;
  --bg-2:#0D1336;
  --glass:rgba(255,255,255,.03);
  --glass-2:rgba(255,255,255,.055);
  --hair:rgba(255,255,255,.09);
  --hair-gold:rgba(233,216,166,.24);
  --gold:#D4AF37;
  --champagne:#E9D8A6;
  --gold-grad:linear-gradient(180deg,#F3DD95 0%,#D4AF37 55%,#B98F22 100%);
  --gold-text:linear-gradient(120deg,#F6E7B5 0%,#D4AF37 50%,#C29A2C 100%);
  --text:#F5F2EA;
  --dim:#C9CCDD;
  --muted:#8E94B5;
  --ink:#0A0F2C;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(ellipse 780px 500px at 18% -8%, rgba(212,175,55,.18), transparent 60%),
    radial-gradient(ellipse 950px 600px at 100% 6%, rgba(80,100,220,.2), transparent 55%),
    radial-gradient(ellipse 700px 500px at 50% 110%, rgba(212,175,55,.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
h1,h2,h3 {
  font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  font-weight: 400; letter-spacing: -0.015em; margin: 0;
}
em.gold {
  font-style: italic;
  background: var(--gold-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.page { max-width: 560px; margin: 0 auto; padding: 48px 16px 40px; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--champagne);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5b5b; color: #ff5b5b; position: relative; }
.eyebrow .dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid currentColor; animation: ping 1.8s ease-out infinite;
}
@keyframes ping { 0%{ transform: scale(0.6); opacity: 0.9; } 100%{ transform: scale(1.9); opacity: 0; } }

.page h1 { font-size: clamp(2rem, 7vw, 3rem); line-height: 1.16; margin: 18px 0 0; }
.underline {
  display: block; width: 110px; height: 6px; margin: 14px auto 0;
  background: var(--gold-text); border-radius: 999px; opacity: 0.85;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.welcome { margin: 18px auto 0; color: var(--dim); font-size: 1rem; line-height: 1.7; max-width: 46ch; }
.target { margin: 10px 0 0; font-size: 0.85rem; color: var(--champagne); font-weight: 600; }

.card {
  margin: 30px auto 0; text-align: left;
  background: var(--glass); border: 1px solid var(--hair-gold); border-radius: 24px;
  padding: 30px 24px 26px; backdrop-filter: blur(6px);
  box-shadow: 0 30px 70px -30px rgba(212,175,55,.25);
}
.card h2 { font-size: 1.5rem; text-align: center; margin: 0 0 20px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--champagne); margin-bottom: 7px; }
.field .req { color: var(--gold); }
.field input {
  width: 100%; font-family: inherit; font-size: 1rem;
  padding: 13px 15px; border-radius: 12px; border: 1px solid var(--hair);
  background: rgba(255,255,255,0.04); color: var(--text);
}
.field input::placeholder { color: var(--muted); }
.field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212,175,55,.14); }
.field.err input { border-color: #e05b5b; }
.field .err-msg { display: none; font-size: 0.78rem; color: #ff8a8a; margin-top: 5px; }
.field.err .err-msg { display: block; }

.btn {
  position: relative; overflow: hidden; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 700; font-size: 1rem;
  border-radius: 999px; padding: 16px 28px; margin-top: 8px;
  text-decoration: none; cursor: pointer; border: none;
  color: var(--ink); background: var(--gold-grad);
  box-shadow: 0 14px 34px -10px rgba(212,175,55,.55);
  transition: transform 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.7; cursor: wait; transform: none; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine { 0%{ left: -60%; } 55%{ left: 130%; } 100%{ left: 130%; } }

.form-msg { margin-top: 14px; font-size: 0.87rem; padding: 12px 14px; border-radius: 10px; display: none; }
.form-msg.show { display: block; }
.form-msg.error { background: rgba(224,91,91,.12); color: #ff9d9d; border: 1px solid rgba(224,91,91,.35); }
.form-msg.loading { background: var(--glass-2); color: var(--dim); border: 1px solid var(--hair); }
.trust-line { margin-top: 16px; font-size: 0.8rem; color: var(--muted); text-align: center; }

.success { display: none; text-align: center; }
.success.show { display: block; }
.success .icon {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--gold-grad); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700;
}
.success p { color: var(--dim); font-size: 0.96rem; line-height: 1.65; margin: 0 0 8px; }
.success .time { font-size: 0.82rem; color: var(--muted); margin-top: 12px; }

.points { list-style: none; margin: 26px auto 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.points li {
  background: var(--glass-2); border: 1px solid var(--hair); border-radius: 999px;
  padding: 7px 14px; font-size: 0.8rem; color: var(--dim);
}

footer { text-align: center; padding: 10px 16px 30px; font-size: 0.8rem; color: var(--muted); }