:root{
  --text:#eef5f2;
  --muted: rgba(238,245,242,.78);
  --accent:#f0b10a;
  --border: rgba(255,255,255,.14);
  --shadow: 0 22px 70px rgba(0,0,0,.55);
  --radius: 18px;
  --max: 1120px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#06100d;
  overflow-x:hidden;
}
.bg{
  position:fixed;
  inset:0;
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(1.10) contrast(1.05);
  z-index:-3;
}
.bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 540px at 50% 10%, rgba(240,177,10,.18), transparent 62%),
    radial-gradient(820px 500px at 85% 30%, rgba(220,220,220,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.78) 68%, rgba(0,0,0,.92));
}
.bg::after{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(closest-side at 20% 80%, rgba(240,177,10,.08), transparent 60%),
    radial-gradient(closest-side at 80% 85%, rgba(255,255,255,.06), transparent 62%);
  filter: blur(14px);
  pointer-events:none;
  opacity:.9;
}
.vignette{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.62) 100%);
  opacity:.65;
}
.wrap{
  width:min(var(--max), 100%);
  margin:0 auto;
  padding: clamp(26px, 5vw, 56px) 18px 46px;
}
.top{ display:flex; justify-content:center; align-items:center; text-align:center; margin-top:6px; }
.logo{
  width:min(560px, 92%);
  height:auto;
  display:block;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.55));
}
.title{
  text-align:center;
  margin: 18px auto 10px;
  letter-spacing:.3px;
  line-height:1.1;
  font-weight: 900;
  font-size: clamp(34px, 4.2vw, 56px);
  text-shadow: 0 14px 40px rgba(0,0,0,.65);
}
.subtitle{
  text-align:center;
  max-width: 760px;
  margin: 0 auto 16px;
  color: var(--muted);
  line-height:1.6;
  font-size: 16px;
  text-shadow: 0 10px 26px rgba(0,0,0,.55);
}
.card{
  margin: 24px auto 0;
  max-width: 920px;
  border-radius: var(--radius);
  background: rgba(8,18,15,.62);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(240,177,10,.16), transparent 45%),
    linear-gradient(315deg, rgba(255,255,255,.08), transparent 50%);
  opacity:.85;
  pointer-events:none;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  padding:1px;
  background: linear-gradient(180deg, rgba(240,177,10,.55), rgba(255,255,255,.18), rgba(0,0,0,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.55;
}
.card-inner{ position:relative; padding: 22px; }
.badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:10px;
}
.badge{
  padding:9px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background: rgba(0,0,0,.20);
  font-size: 13px;
  letter-spacing:.2px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
hr{ border:none; border-top: 1px solid rgba(255,255,255,.14); margin: 18px 0; }
.form-title{ text-align:center; font-weight: 800; font-size: 18px; margin: 0 0 6px; }
.form-sub{ text-align:center; margin: 0 auto 14px; color: var(--muted); max-width: 760px; line-height:1.5; }
.toast{
  margin: 10px auto 0;
  max-width: 720px;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(240,177,10,.38);
  background: rgba(240,177,10,.12);
}
.toast.err{ border: 1px solid rgba(255,80,80,.38); background: rgba(255,80,80,.10); }
form{ max-width: 720px; margin: 0 auto; }
.label{ display:block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.row{ display:grid; grid-template-columns: 1fr auto; gap: 10px; }
@media (max-width: 720px){ .row{ grid-template-columns: 1fr; } }
input[type="email"]{
  width:100%;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  color: var(--text);
  outline:none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
input[type="email"]::placeholder{ color: rgba(238,245,242,.52); }
button{
  padding: 14px 16px;
  border-radius: 14px;
  border:none;
  cursor:pointer;
  font-weight: 900;
  letter-spacing:.3px;
  color:#1b1402;
  background: linear-gradient(180deg, rgba(255,202,65,1), rgba(196,138,0,1));
  box-shadow: 0 18px 42px rgba(0,0,0,.45);
}
.small{ font-size: 12px; color: var(--muted); margin-top: 10px; line-height:1.45; }
.small a{ color: rgba(255,255,255,.92); }
.consent{ display:flex; gap:10px; align-items:flex-start; margin-top: 12px; }
.consent input{ margin-top: 3px; }
.footer{
  text-align:center;
  margin-top: 18px;
  font-size: 12px;
  color: rgba(238,245,242,.72);
  text-shadow: 0 10px 22px rgba(0,0,0,.55);
}
.footer a{ color: rgba(255,255,255,.90); }