/* ── Base ────────────────────────────────────────────────── */
body {
  font-family: 'Geist', sans-serif;
  overflow-x: hidden;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Orb container ───────────────────────────────────────── */
#orb-container {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* ── Orb drift keyframes ─────────────────────────────────── */
@keyframes orb-drift-1 {
  0%   { transform: translate(0px, 0px); }
  33%  { transform: translate(40px, -30px); }
  66%  { transform: translate(-20px, 50px); }
  100% { transform: translate(0px, 0px); }
}
@keyframes orb-drift-2 {
  0%   { transform: translate(0px, 0px); }
  40%  { transform: translate(-50px, 35px); }
  70%  { transform: translate(30px, -20px); }
  100% { transform: translate(0px, 0px); }
}
@keyframes orb-drift-3 {
  0%   { transform: translate(0px, 0px); }
  25%  { transform: translate(25px, 45px); }
  60%  { transform: translate(-35px, -25px); }
  100% { transform: translate(0px, 0px); }
}
@keyframes orb-drift-4 {
  0%   { transform: translate(0px, 0px); }
  50%  { transform: translate(-40px, -40px); }
  100% { transform: translate(0px, 0px); }
}
@keyframes orb-drift-5 {
  0%   { transform: translate(0px, 0px); }
  30%  { transform: translate(60px, 20px); }
  70%  { transform: translate(-15px, -50px); }
  100% { transform: translate(0px, 0px); }
}

.orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(120px);
  pointer-events: none;
}
.orb-1 { opacity: 0.14; animation: orb-drift-1 22s ease-in-out infinite alternate; }
.orb-2 { opacity: 0.17; animation: orb-drift-2 28s ease-in-out infinite alternate; }
.orb-3 { opacity: 0.16; animation: orb-drift-3 20s ease-in-out infinite alternate; }
.orb-4 { opacity: 0.13; animation: orb-drift-4 32s ease-in-out infinite alternate; }
.orb-5 { opacity: 0.15; animation: orb-drift-5 25s ease-in-out infinite alternate; }

/* ── Card ────────────────────────────────────────────────── */
.light-card {
  background: #ffffff;
  border: 1px solid rgba(137, 114, 102, 0.15);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
}

/* ── Hero typography ─────────────────────────────────────── */
.wordmark {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #9b4500;
}

.hero-heading {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: #121c28;
}

@media (max-width: 480px) {
  .hero-heading { font-size: 44px; }
}

/* ── Email input ─────────────────────────────────────────── */
.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: rgba(86, 67, 56, 0.5);
  pointer-events: none;
}

.input-field {
  width: 100%;
  padding: 0 16px 0 40px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(221, 193, 179, 0.4);
  background: #ffffff;
  color: #121c28;
  font-size: 16px;
  font-family: 'Geist', sans-serif;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  outline: none;
}
.input-field::placeholder { color: rgba(86, 67, 56, 0.4); }
.input-field:focus {
  border-color: rgba(155, 69, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(155, 69, 0, 0.12);
}

/* ── Role cards ──────────────────────────────────────────── */
.role-card {
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.role-card:hover { border-color: rgba(155, 69, 0, 0.3) !important; }
.role-card.selected {
  border-color: #ff8c42 !important;
  border-width: 2px;
  background: rgba(255, 140, 66, 0.06);
}

.role-card:focus-within {
  outline: 2px solid rgba(155, 69, 0, 0.4);
  outline-offset: 2px;
}

.checkmark {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #ff8c42;
  align-items: center;
  justify-content: center;
}
.role-card.selected .checkmark { display: flex; }

/* ── Field errors ────────────────────────────────────────── */
.field-error {
  color: #ba1a1a;
  font-size: 12px;
  margin-top: 4px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 200ms ease, opacity 200ms ease;
}
.field-error.visible {
  max-height: 40px;
  opacity: 1;
}

/* ── Form card states ────────────────────────────────────── */
.form-state {
  transition: opacity 200ms ease, transform 200ms ease;
}
.form-state.hidden-state {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
  position: absolute;
  top: 0; left: 0; right: 0;
}

/* ── Submit button ───────────────────────────────────────── */
.submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ff8c42;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Geist', sans-serif;
  height: 52px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: filter 150ms ease, transform 150ms ease;
}
.submit-btn:hover:not(:disabled) { filter: brightness(0.95); }
.submit-btn:active:not(:disabled) { transform: scale(0.98); }
.submit-btn:disabled { cursor: not-allowed; opacity: 0.8; }
.submit-btn:focus-visible {
  outline: 2px solid rgba(155, 69, 0, 0.5);
  outline-offset: 2px;
}

/* ── Loading spinner (3-dot pulse) ───────────────────────── */
@keyframes dot-pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%            { transform: scale(1);   opacity: 1; }
}
.dot-pulse {
  display: flex;
  gap: 4px;
  align-items: center;
}
.dot-pulse span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #fff;
  animation: dot-pulse 1.2s infinite ease-in-out;
}
.dot-pulse span:nth-child(2) { animation-delay: 0.2s; }
.dot-pulse span:nth-child(3) { animation-delay: 0.4s; }

/* ── Success state ───────────────────────────────────────── */
.success-card {
  padding: 2rem;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.success-check {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: #ff8c42;
  display: flex;
  align-items: center;
  justify-content: center;
}
.success-heading {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #121c28;
}

/* ── Avatar circles (social proof) ──────────────────────── */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 2px solid #ffffff;
}
.avatar-a { background: linear-gradient(135deg, #ff8c42, #ff605f); }
.avatar-b { background: linear-gradient(135deg, #fff0e0, #ffb68d); }
.avatar-c { background: linear-gradient(135deg, #ffdbc9, #ff8c42); }

/* ── Feature cards ───────────────────────────────────────── */
.feature-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(155, 69, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

/* ── Stats section ───────────────────────────────────────── */
.stats-section {
  background: #fdf6f0;
  border-top: 1px solid rgba(221, 193, 179, 0.35);
  border-bottom: 1px solid rgba(221, 193, 179, 0.35);
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.stat-number {
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: #121c28;
}
.stat-label {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(86, 67, 56, 0.6);
  margin-top: 4px;
}
.stat-divider {
  display: none;
  width: 1px;
  align-self: stretch;
  background: rgba(221, 193, 179, 0.3);
}
@media (min-width: 640px) {
  .stat-divider { display: block; }
}

/* ── Confetti particles ──────────────────────────────────── */
.confetti-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border-radius: 2px;
}

/* ── Mobile: reduce hero padding ────────────────────────── */
@media (max-width: 640px) {
  #form-state { padding: 1.25rem !important; }
  .success-card { padding: 1.25rem !important; }
}