:root {
  --bg-a: #143476;
  --bg-b: #071230;
  --card: rgba(10, 22, 52, .78);
  --card-border: rgba(120, 160, 255, .18);
  --ink: #f4f7ff;
  --muted: #9aa8c7;
  --line: rgba(140, 170, 230, .22);
  --cyan: #35d6ff;
  --violet: #8a5cff;
  --blue: #3b82f6;
  --green: #2ecf8f;
  --orange: #f0a04b;
  --danger: #ff7b8a;
  --danger-bg: rgba(255, 90, 110, .12);
  --radius: 22px;
  --shadow: 0 28px 70px rgba(2, 8, 28, .55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  color: var(--ink);
  font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(ellipse at 35% 20%, rgba(53, 214, 255, .12), transparent 42%),
    radial-gradient(ellipse at 80% 70%, rgba(138, 92, 255, .14), transparent 40%),
    linear-gradient(145deg, var(--bg-a) 0%, #0c1d45 42%, var(--bg-b) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

button, input { font: inherit; }

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .95fr);
  position: relative;
  overflow: hidden;
}

.login-shell:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(140, 180, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 180, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 75%);
  pointer-events: none;
}

.brand-panel,
.form-panel {
  position: relative;
  z-index: 1;
}

.brand-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 4vw, 48px) clamp(28px, 5vw, 64px) clamp(28px, 4vw, 48px);
  min-height: 100vh;
}

.brand-top {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brandmark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #35d6ff, #5b7bff 45%, #8a5cff);
  box-shadow: 0 10px 28px rgba(53, 214, 255, .28);
  flex: none;
}

.brandmark svg { width: 22px; height: 22px; }

.product-name {
  margin: 0;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -.3px;
  color: #fff;
}

.product-line {
  margin: 2px 0 0;
  color: #9eb0cc;
  font-size: 12px;
}

.hero-stage {
  position: relative;
  width: min(420px, 70vw);
  aspect-ratio: 1;
  margin: 24px auto;
}

.orbit {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1.5px dashed rgba(150, 190, 255, .28);
}

.orbit-inner {
  inset: 20%;
  border-style: solid;
  border-color: rgba(150, 190, 255, .16);
}

.orbit-outer {
  animation: orbitSpin 28s linear infinite;
}

.signal-arm {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  animation: orbitSpin 8s linear infinite;
}

.signal-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #fff, #35d6ff 55%, #1d8dff);
  box-shadow: 0 0 0 4px rgba(53, 214, 255, .18), 0 0 22px rgba(53, 214, 255, .85);
}

.core {
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #35d6ff 0%, #4f7dff 48%, #8a5cff 100%);
  box-shadow:
    0 0 0 10px rgba(80, 130, 255, .12),
    0 18px 50px rgba(53, 120, 255, .35);
  overflow: hidden;
}

.core-pulse {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  border: 2px solid rgba(160, 210, 255, .35);
  animation: corePulse 2.8s ease-out infinite;
}

.wave {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 42px;
}

.wave i {
  display: block;
  width: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  height: 14px;
  animation: waveSpeak 1.05s ease-in-out infinite;
}

.wave i:nth-child(1) { animation-delay: 0s; height: 12px; }
.wave i:nth-child(2) { animation-delay: .12s; height: 24px; }
.wave i:nth-child(3) { animation-delay: .24s; height: 36px; }
.wave i:nth-child(4) { animation-delay: .18s; height: 22px; }
.wave i:nth-child(5) { animation-delay: .06s; height: 14px; }

.float-icon {
  /* Distance from center to outer dashed ring (≈ 42% × cos/sin 45°) */
  --ring-offset: 29.7%;
  position: absolute;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
  z-index: 2;
  animation: floatY 4.4s ease-in-out infinite;
}

.float-icon svg { width: 22px; height: 22px; }

/* Clock positions on the outer dashed ring: 10:30, 1:30, 7:30, 4:30 */
.float-phone {
  left: calc(50% - var(--ring-offset));
  top: calc(50% - var(--ring-offset));
  background: linear-gradient(145deg, #4da3ff, #2563eb);
  box-shadow: 0 10px 30px rgba(37, 99, 235, .4);
  animation-delay: 0s;
}

.float-search {
  left: calc(50% + var(--ring-offset));
  top: calc(50% - var(--ring-offset));
  background: linear-gradient(145deg, #a07bff, #7c3aed);
  box-shadow: 0 10px 30px rgba(124, 58, 237, .4);
  animation-delay: .5s;
}

.float-calendar {
  left: calc(50% - var(--ring-offset));
  top: calc(50% + var(--ring-offset));
  background: linear-gradient(145deg, #4be0a8, #16a34a);
  box-shadow: 0 10px 30px rgba(22, 163, 74, .35);
  animation-delay: 1s;
}

.float-people {
  left: calc(50% + var(--ring-offset));
  top: calc(50% + var(--ring-offset));
  background: linear-gradient(145deg, #ffc06a, #ea8a1f);
  box-shadow: 0 10px 30px rgba(234, 138, 31, .35);
  animation-delay: 1.5s;
}

.brand-copy { max-width: 520px; }

.brand-copy h1 {
  margin: 0 0 10px;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.8px;
  color: #fff;
  font-weight: 760;
}

.lead {
  margin: 0 0 22px;
  color: #b7c6dc;
  font-size: 16px;
}

.nova-gradient {
  background: linear-gradient(90deg, #35d6ff, #8a5cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 750;
}

.accent-word {
  color: #7ec8ff;
  font-weight: 760;
}

.feature-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px 12px;
}

.feature-pills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(8, 18, 42, .45);
  border: 1px solid rgba(140, 170, 230, .18);
  color: #d5deec;
  font-size: 12px;
  font-weight: 600;
}

.feature-pills .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.dot.phone { background: #4da3ff; box-shadow: 0 0 10px rgba(77, 163, 255, .7); }
.dot.search { background: #a07bff; box-shadow: 0 0 10px rgba(160, 123, 255, .7); }
.dot.calendar { background: #4be0a8; box-shadow: 0 0 10px rgba(75, 224, 168, .7); }
.dot.people { background: #ffc06a; box-shadow: 0 0 10px rgba(255, 192, 106, .7); }

.form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px);
}

.form-card {
  width: min(420px, 100%);
  background: linear-gradient(180deg, rgba(16, 32, 70, .9), rgba(8, 18, 42, .88));
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
  padding: 34px 30px 26px;
  position: relative;
  backdrop-filter: blur(16px);
}

.form-card:before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #35d6ff, #5b7bff, #8a5cff);
}

.mobile-brand {
  display: none;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.mobile-brand .brandmark { width: 40px; height: 40px; }
.mobile-brand strong { display: block; font-size: 17px; letter-spacing: -.3px; }
.mobile-brand small { color: var(--muted); font-size: 12px; }

.eyebrow {
  margin: 0 0 8px;
  color: #8ea0c2;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.form-card h2 {
  margin: 0 0 6px;
  font-size: 30px;
  letter-spacing: -.6px;
  color: #fff;
}

.form-copy {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 14px;
}

.alert {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(255, 123, 138, .28);
  border-radius: 10px;
  padding: 11px 13px;
  margin-bottom: 16px;
  font-size: 13px;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 650;
  color: #d7e0f4;
  margin: 0 0 7px;
}

.field-wrap {
  position: relative;
  margin-bottom: 16px;
}

.field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #8ea0c2;
  pointer-events: none;
}

.field-icon svg { width: 18px; height: 18px; display: block; }

input[type="text"],
input[type="password"] {
  width: 100%;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 14px 0 42px;
  background: rgba(5, 12, 30, .55);
  color: #fff;
  outline: none;
  transition: border-color .16s, box-shadow .16s, background .16s;
}

input::placeholder { color: #7383a6; }

input[type="text"]:focus,
input[type="password"]:focus {
  border-color: rgba(53, 214, 255, .55);
  background: rgba(8, 18, 42, .85);
  box-shadow: 0 0 0 4px rgba(53, 214, 255, .12);
}

.password-wrap input { padding-right: 72px; }

.toggle-password {
  position: absolute;
  right: 8px;
  top: 8px;
  height: 32px;
  border: 0;
  background: rgba(140, 170, 230, .12);
  color: #c5d1ea;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.toggle-password:hover { background: rgba(140, 170, 230, .2); }

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 20px;
}

.remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 550;
  color: #b7c4de;
  cursor: pointer;
}

.remember input {
  width: 16px;
  height: 16px;
  accent-color: #5b7bff;
}

.submit {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #2f79ff 0%, #5b55f0 52%, #8a5cff 100%);
  color: #fff;
  font-weight: 720;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 14px 30px rgba(70, 90, 255, .35);
  transition: transform .16s, box-shadow .16s, filter .16s;
}

.submit svg { width: 18px; height: 18px; }

.submit:hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow: 0 18px 34px rgba(70, 90, 255, .42);
}

.submit:disabled {
  opacity: .72;
  cursor: wait;
  transform: none;
}

.fine-print {
  margin: 18px 0 0;
  color: #8a97ab;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.fine-print svg {
  width: 14px;
  height: 14px;
  color: #7fd0ff;
  flex: none;
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(88, 170, 255, .35);
  outline-offset: 2px;
}

@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}

@keyframes corePulse {
  0% { transform: scale(.92); opacity: .7; }
  70% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

@keyframes waveSpeak {
  0%, 100% { transform: scaleY(.55); }
  50% { transform: scaleY(1); }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (max-width: 1100px) {
  .login-shell { grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); }
  .hero-stage { width: min(360px, 68vw); }
  .brand-copy h1 { font-size: clamp(30px, 4vw, 42px); }
}

@media (max-width: 980px) {
  .login-shell { grid-template-columns: 1fr; }
  .brand-panel {
    min-height: auto;
    padding: 28px 22px 10px;
  }
  .hero-stage {
    width: min(280px, 72vw);
    margin: 18px auto 10px;
  }
  .brand-copy {
    text-align: center;
    margin: 0 auto 8px;
  }
  .feature-pills { margin-left: auto; margin-right: auto; justify-items: start; }
  .form-panel { padding: 12px 18px 36px; align-items: start; }
  .mobile-brand { display: flex; }
}

@media (max-width: 640px) {
  .brand-panel { display: none; }
  .form-panel {
    min-height: 100vh;
    align-items: center;
    padding: 24px 16px;
  }
  .form-card { padding: 28px 18px 22px; border-radius: 18px; }
  .form-card h2 { font-size: 26px; }
  input[type="text"],
  input[type="password"],
  .submit { height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-outer,
  .signal-arm,
  .core-pulse,
  .wave i,
  .float-icon,
  .submit,
  input {
    animation: none !important;
    transition: none !important;
  }
  .submit:hover { transform: none; }
}