/* ---------- Base ---------- */
:root{
  --bg: #0b1020;
  --panel: rgba(255,255,255,.08);
  --panel2: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --line: rgba(255,255,255,.14);

  --accent: #8b5cf6;    /* violet */
  --accent2:#22d3ee;    /* cyan */
  --shadow: 0 30px 80px rgba(0,0,0,.35);

  --radius: 24px;
  --max: 980px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

:root[data-theme="light"]{
  --bg: #f6f7fb;
  --panel: rgba(10,16,32,.05);
  --panel2: rgba(10,16,32,.08);
  --text: rgba(10,16,32,.92);
  --muted: rgba(10,16,32,.70);
  --line: rgba(10,16,32,.12);
  --shadow: 0 30px 80px rgba(10,16,32,.12);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

/* ---------- Background ---------- */
.bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events:none;
}

.orb{
  position:absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(30px);
  opacity: .75;
  transform: translate3d(0,0,0);
  animation: float 10s ease-in-out infinite;
}

.orb--a{
  left: -180px; top: -160px;
  background: radial-gradient(circle at 30% 30%, var(--accent2), transparent 55%),
              radial-gradient(circle at 70% 70%, var(--accent), transparent 55%);
}
.orb--b{
  right: -220px; top: 10vh;
  width: 620px; height: 620px;
  background: radial-gradient(circle at 30% 30%, var(--accent), transparent 55%),
              radial-gradient(circle at 70% 70%, var(--accent2), transparent 55%);
  animation-delay: -2.5s;
}
.orb--c{
  left: 15vw; bottom: -260px;
  width: 720px; height: 720px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 55%),
              radial-gradient(circle at 70% 70%, var(--accent), transparent 55%);
  animation-delay: -5s;
  opacity: .55;
}

.grid{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, transparent 0, transparent calc(50% - 1px), rgba(255,255,255,.05) 50%, transparent calc(50% + 1px), transparent 100%),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 100% 100%, 100% 42px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.8), rgba(0,0,0,0) 70%);
  opacity: .8;
}

/* ---------- Layout ---------- */
.topbar{
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 18px auto 0;
  padding: 0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: var(--text);
  font-weight: 650;
  letter-spacing: .2px;
}
.brand__mark{
  width: 14px; height: 14px; border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.brand__text{
  opacity: .95;
  font-size: clamp(14px, 1.2vw, 42px);
}


.toggle{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
}
.toggle:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }
.toggle:active{ transform: translateY(0px); }
.toggle__icon{
  width: 18px; height: 18px; border-radius: 50%;
  background: conic-gradient(from 180deg, var(--accent), var(--accent2), var(--accent));
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.toggle__text{ font-size: 14px; opacity:.85; }

.wrap{
  position: relative;
  z-index: 1;
  min-height: calc(100dvh - 80px);
  display:grid;
  place-items:center;
  padding: 26px 18px 44px;
}

.card{
  width: min(740px, 100%);
  border-radius: var(--radius);
  padding: 28px 26px 22px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  font-size: 13px;
  color: var(--muted);
}
.badge__dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 4px rgba(139,92,246,.15);
}

h1{
  margin: 14px 0 10px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.6px;
}
.lead{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
}

.progress{
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  overflow:hidden;
}
.progress__bar{
  height:100%;
  width: var(--progress);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  position: relative;
}
.progress__bar::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-60%);
  animation: sheen 2.4s ease-in-out infinite;
  opacity:.75;
}

.meta{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  margin: 16px 0 6px;
}
.meta__item{
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.meta__label{
  font-size: 12px;
  color: var(--muted);
}
.meta__value{
  margin-top: 6px;
  font-weight: 650;
  letter-spacing: .2px;
}

.notify{
  margin-top: 16px;
}
.notify__row{
  display:flex;
  gap: 10px;
  align-items: stretch;
}
input[type="email"]{
  flex:1;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
input[type="email"]::placeholder{ color: rgba(255,255,255,.45); }
:root[data-theme="light"] input[type="email"]::placeholder{ color: rgba(10,16,32,.40); }

input[type="email"]:focus{
  border-color: rgba(34,211,238,.55);
  box-shadow: 0 0 0 4px rgba(34,211,238,.18);
}

button[type="submit"]{
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
  font-weight: 650;
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
}
button[type="submit"]:hover{ transform: translateY(-1px); filter: brightness(1.04); }
button[type="submit"]:active{ transform: translateY(0px); }

.help{
  margin: 10px 2px 0;
  font-size: 13px;
  color: var(--muted);
}

.toast{
  margin: 10px 2px 0;
  font-size: 14px;
  color: var(--text);
  min-height: 20px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{
  opacity: 1;
  transform: translateY(0);
}

.divider{
  height: 1px;
  background: var(--line);
  margin: 18px 0;
}

.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.links{
  display:flex;
  gap: 10px;
}
.links a{
  width: 40px; height: 40px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  text-decoration:none;
  transition: transform .15s ease, background .15s ease;
}
.links a:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }
.links svg{ width: 18px; height: 18px; fill: currentColor; opacity:.9; }

.copyright{
  margin:0;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Utilities ---------- */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ---------- Animations ---------- */
@keyframes float{
  0%,100%{ transform: translateY(0) translateX(0) scale(1); }
  50%{ transform: translateY(-18px) translateX(10px) scale(1.02); }
}
@keyframes sheen{
  0%{ transform: translateX(-60%); }
  60%{ transform: translateX(140%); }
  100%{ transform: translateX(140%); }
}

/* ---------- Responsive ---------- */
@media (max-width: 560px){
  .card{ padding: 22px 18px 18px; }
  .meta{ grid-template-columns: 1fr; }
  .notify__row{ flex-direction: column; }
  button[type="submit"]{ width: 100%; }
}