*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',sans-serif;
  color:#0f172a;
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shake{
  10%,90%{transform:translateX(-1px)}
  20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-3px)}
  40%,60%{transform:translateX(3px)}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.shell{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  min-height:100vh;
}

/* ─── HERO (left) — dark SaaS marketing pane ──────────────── */
.hero{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:64px 64px;
  color:#f8fafc;
  background:
    radial-gradient(1100px 700px at 100% 0%, rgba(220,38,38,.28), transparent 55%),
    radial-gradient(900px 600px at 0% 100%, rgba(59,130,246,.18), transparent 60%),
    linear-gradient(180deg,#0b1120 0%, #0f172a 100%);
  overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 75% 60% at 50% 50%,#000 30%,transparent 85%);
  pointer-events:none;
}
.hero::after{
  content:'';position:absolute;
  width:520px;height:520px;border-radius:50%;
  right:-160px;top:-160px;
  background:radial-gradient(circle,rgba(220,38,38,.35),transparent 70%);
  filter:blur(20px);
  pointer-events:none;
}

.hero-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;
  max-width:520px;
  animation:fadeUp .5s ease both;
}
.hero-eyebrow{
  display:inline-block;
  font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  color:#fca5a5;
  padding:6px 12px;
  border:1px solid rgba(252,165,165,.3);
  border-radius:999px;
  background:rgba(220,38,38,.08);
  margin-bottom:36px;
}
.hero-title{
  font-size:46px;font-weight:700;letter-spacing:-1.2px;line-height:1.08;
  color:#ffffff;margin-bottom:22px;
}
.hero-sub{
  color:#cbd5e1;font-size:16px;line-height:1.65;max-width:480px;
  margin-bottom:40px;
}

.hero-features{
  list-style:none;display:flex;flex-direction:column;gap:18px;
  width:100%;max-width:480px;
}
.hero-features li{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  backdrop-filter:blur(6px);
}
.ft-dot{
  flex:none;width:10px;height:10px;border-radius:50%;
  margin-top:7px;
  box-shadow:0 0 0 4px rgba(255,255,255,.06);
}
.hero-features strong{
  display:block;font-size:14px;font-weight:600;color:#f1f5f9;margin-bottom:2px;
}
.hero-features span{
  font-size:13px;color:#94a3b8;line-height:1.5;
}

.hero-foot{
  position:relative;z-index:1;color:#64748b;font-size:12px;letter-spacing:.2px;
}

/* ─── PANEL (right) ───────────────────────────────────────── */
.panel{
  display:flex;align-items:center;justify-content:center;
  padding:48px 32px;background:#ffffff;
}
.card{
  width:100%;max-width:400px;
  display:flex;flex-direction:column;align-items:stretch;
  animation:fadeUp .45s ease both;
}
.card-logo{
  height:120px;width:auto;
  align-self:center;
  margin:0 auto 24px;
  display:block;
  image-rendering:-webkit-optimize-contrast;
}
.card-title{
  font-size:26px;font-weight:700;letter-spacing:-.5px;
  margin-bottom:8px;
  text-align:center;
}
.card-sub{
  color:#64748b;font-size:14px;line-height:1.5;
  margin-bottom:32px;
  text-align:center;
}

.field{display:block;margin-bottom:16px}
.lbl{
  display:block;font-size:12px;font-weight:600;color:#334155;
  margin-bottom:7px;
}
.field input{
  width:100%;font-family:'Inter',sans-serif;font-size:14px;color:#0f172a;
  background:#ffffff;border:1px solid #e2e8f0;border-radius:10px;
  padding:12px 14px;
  transition:border-color .15s,box-shadow .15s;outline:none;
}
.field input::placeholder{color:#94a3b8}
.field input:hover{border-color:#cbd5e1}
.field input:focus{
  border-color:#0f172a;
  box-shadow:0 0 0 4px rgba(15,23,42,.07);
}

.err{
  display:none;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;
  font-size:13px;font-weight:500;padding:10px 13px;border-radius:9px;margin-bottom:14px;
}
.err.show{display:block;animation:shake .35s ease}

.submit{
  width:100%;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#ffffff;
  background:#0f172a;border:1px solid #0f172a;border-radius:10px;padding:12px 16px;
  cursor:pointer;transition:all .15s;margin-top:6px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 1px 2px rgba(15,23,42,.1);
}
.submit:hover:not(:disabled){background:#1e293b;border-color:#1e293b;box-shadow:0 4px 12px rgba(15,23,42,.2)}
.submit:disabled{opacity:.7;cursor:not-allowed}
.btn-spinner{
  display:none;width:14px;height:14px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;
}
.submit.loading .btn-spinner{display:inline-block}
.submit.loading .btn-label{opacity:.8}

.card-foot{
  margin-top:28px;padding-top:20px;border-top:1px solid #f1f5f9;
  color:#94a3b8;font-size:12.5px;text-align:center;
}

/* ─── Mobile ──────────────────────────────────────────────── */
@media (max-width: 880px){
  .shell{grid-template-columns:1fr}
  .hero{display:none}
  .panel{padding:32px 22px}
}