:root{
  --bg0:#070b18;
  --acc:#2dd4bf; --acc2:#60a5fa;
  --text:#e6eef8; --muted:#a7b2c7;
  --panel:rgba(10,16,36,.6);
  --panelBorder:rgba(255,255,255,.08);
  --input:#141a2c; --inputFocus:#1d2438;
}

/* Reset & Layout */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(60% 60% at 80% 12%, rgba(45,212,191,.1), transparent 60%),
    radial-gradient(50% 50% at 12% 78%, rgba(96,165,250,.1), transparent 60%),
    linear-gradient(180deg, #030614, #0b1024 45%, #0c1430 100%);
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  -webkit-font-smoothing:antialiased;
}

/* Card */
.container{
  background:var(--panel);
  border:1px solid var(--panelBorder);
  border-radius:28px;
  box-shadow:
    0 0 0 1px rgba(96,165,250,.12),
    0 20px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  padding:56px 40px 44px;
  max-width:460px;width:90%;
  text-align:center;
}

/* Logo */
.logo{
  width:88px;height:88px;border-radius:20px;
  object-fit:cover;margin-bottom:24px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 26px rgba(45,212,191,.18);
  background:radial-gradient(88px 44px at 50% 50%,rgba(96,165,250,.2),transparent 70%);
}

/* Headings */
h1{
  font-size:clamp(32px,7vw,46px);
  font-weight:900;letter-spacing:-.02em;line-height:1.05;margin-bottom:8px;
}
h1 .fi{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;color:transparent;}
h1 .beta{font-size:.9em;color:var(--acc2);}
.subtitle{color:var(--muted);font-size:15px;max-width:420px;margin:0 auto 22px;}

/* Socials */
.socials{display:flex;justify-content:center;gap:14px;margin-bottom:26px;}
.socials a{
  display:inline-flex;width:34px;height:34px;border-radius:12px;
  align-items:center;justify-content:center;text-decoration:none;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .18s ease, background .18s ease;
}
.socials a:hover{transform:translateY(-2px);background:rgba(255,255,255,.12);}
.socials svg{width:17px;height:17px;fill:#d0d5e1;}

/* Form */
form{text-align:left;margin-top:4px;}
label{display:block;font-size:13px;color:#c1c6d6;margin-bottom:6px;}
input[type="email"]{
  width:100%;padding:15px 16px;border-radius:12px;
  background:var(--input);border:1px solid transparent;color:#e6eef8;
  font-size:16px;transition:all .18s ease;
}
input::placeholder{color:#717b9a;font-style:italic;}
input:focus{
  background:var(--inputFocus);outline:none;border-color:var(--acc2);
  box-shadow:0 0 0 3px rgba(96,165,250,.25);
}

.consent{
  display:flex;gap:10px;align-items:flex-start;
  font-size:12px;color:#aeb4c2;line-height:1.45;margin-top:10px;
}
.consent input{margin-top:3px;}
.consent a{color:var(--acc);text-decoration:none;}
.consent a:hover{text-decoration:underline;}

/* Button */
button{
  width:100%;margin-top:18px;padding:15px;border-radius:12px;
  border:none;cursor:pointer;
  font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  font-size:13px;color:#0b1220;
  background:linear-gradient(90deg,var(--acc),var(--acc2));
  box-shadow:0 0 0 1px rgba(96,165,250,.2),0 8px 26px rgba(45,212,191,.25);
  transition:transform .18s ease,opacity .18s ease;
}
button:hover{transform:translateY(-1px);}
button:disabled{opacity:.6;cursor:not-allowed;}

/* Status */
.status{min-height:20px;margin-top:10px;font-size:13px;}
.status.error{color:#ff6b6b;}
.status.success{color:#34d399;}

/* Footer */
.footer{margin-top:30px;color:#8a90a3;font-size:11px;}
.footer a{color:var(--acc2);text-decoration:none;}
.footer a:hover{text-decoration:underline;}

@media(max-width:500px){
  .container{padding:48px 28px 36px;}
  h1{font-size:34px;}
}