/* SIGNUP PAGE v2 */
.signup-main { min-height: calc(100dvh - 64px); display: flex; align-items: stretch; }
.signup-layout { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }

/* LEFT */
.signup-left {
  background: linear-gradient(160deg, #0f0b24 0%, #0b0916 60%, #0a1520 100%);
  padding: clamp(var(--space-8), 5vw, var(--space-16));
  display: flex; align-items: flex-start; padding-top: var(--space-12);
}
.signup-left-inner { max-width: 480px; width: 100%; }
.signup-heading { font-family: var(--font-display); font-size: var(--text-2xl); color: #fff; margin-bottom: var(--space-3); }
.signup-sub { font-size: var(--text-sm); color: rgba(255,255,255,0.5); margin-bottom: var(--space-8); line-height: 1.7; }

.plan-cards { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); }
.plan-option {
  display: block; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl); padding: var(--space-5);
  transition: all var(--transition); position: relative;
}
.plan-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.plan-option:hover { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.07); }
.plan-option.selected { border-color: var(--color-primary); background: rgba(91,63,196,0.15); box-shadow: 0 0 0 1px var(--color-primary); }
.plan-option-badge {
  position: absolute; top: -11px; right: var(--space-5);
  background: linear-gradient(135deg, #0fa8b2, #0c8a93);
  color: #fff; border-radius: var(--radius-full);
  padding: 2px 10px; font-size: 10px; font-weight: 700;
}
.plan-option-inner { display: flex; flex-direction: column; gap: var(--space-3); }
.plan-option-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.plan-option-name { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); margin-bottom: var(--space-1); }
.plan-option-price { font-family: var(--font-display); font-size: var(--text-lg); color: #fff; }
.plan-option-price span { font-family: var(--font-body); font-size: var(--text-xs); color: rgba(255,255,255,0.4); font-weight: 400; }
.plan-option-features { display: flex; flex-direction: column; gap: 4px; }
.plan-option-features li { font-size: var(--text-xs); color: rgba(255,255,255,0.55); }
.plan-check {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: transparent; transition: all var(--transition);
}
.plan-option.selected .plan-check { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.trust-strip { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.trust-item { font-size: var(--text-xs); color: rgba(255,255,255,0.4); }

/* RIGHT */
.signup-right {
  padding: clamp(var(--space-8), 5vw, var(--space-12));
  display: flex; flex-direction: column; justify-content: center;
  background: var(--color-bg);
}
.signup-form-wrap { max-width: 440px; width: 100%; }
.form-title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text); margin-bottom: var(--space-1); }
.form-subtitle { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-8); }
.form-fields { display: flex; flex-direction: column; gap: var(--space-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.password-wrap { position: relative; }
.password-wrap .form-input { padding-right: var(--space-12); }
.password-toggle { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-text-faint); line-height: 0; transition: color var(--transition); }
.password-toggle:hover { color: var(--color-text-muted); }
.password-strength { height: 3px; border-radius: 2px; margin-top: var(--space-2); background: var(--color-border); overflow: hidden; }
.password-strength-bar { height: 100%; border-radius: 2px; width: 0; transition: width 0.3s, background 0.3s; }
.form-check { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm); color: var(--color-text-muted); }
.form-check input { margin-top: 3px; accent-color: var(--color-primary); flex-shrink: 0; }
.form-check a { color: var(--color-primary); text-decoration: underline; }
.signin-link { text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); }
.signin-link a { color: var(--color-primary); font-weight: 500; }

@media (max-width: 800px) {
  .signup-layout { grid-template-columns: 1fr; }
  .signup-left { padding: var(--space-8) var(--space-5); padding-top: var(--space-8); }
  .form-row { grid-template-columns: 1fr; }
  .signup-right { padding: var(--space-6) var(--space-5); }
}