/* ============ HERO ============ */
.hero{
  position:relative;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(201,150,44,0.18), transparent 60%),
    linear-gradient(180deg, var(--ink-950) 0%, var(--ridge-900) 62%, var(--ridge-800) 100%);
  color:#fff;
  overflow:hidden;
  padding-block: var(--sp-7) var(--sp-6);
}
.hero .ridge-divider{ position:absolute; left:0; right:0; bottom:-1px; opacity:.5; }
.hero-inner{
  display:grid; gap: var(--sp-6);
  position:relative; z-index:2;
}
@media (min-width: 980px){
  .hero-inner{ grid-template-columns: 1.05fr 0.95fr; align-items:start; }
}
.hero-badge-row{ display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.pill{
  display:inline-flex; align-items:center; gap:0.5em;
  font-family: var(--font-mono); font-size: var(--step--1);
  padding: 0.4em 0.9em; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.2); color: var(--dusk-100);
}
.pill.pill-gold{ border-color: rgba(201,150,44,0.5); color: var(--merit-gold-500); }
.pill.pill-pine{ border-color: rgba(47,107,79,0.5); color: #7CC49B; }

.hero h1{
  font-size: var(--step-5); line-height: 1.02; color:#fff; font-weight:800;
  letter-spacing: -0.02em;
}
.hero h1 em{ font-style:normal; color: var(--merit-gold-500); }
.hero .lede{
  margin-top: var(--sp-4); font-size: var(--step-1); color: var(--dusk-100); max-width: 46ch;
}
.hero-exam-row{
  margin-top: var(--sp-5); display:flex; flex-wrap:wrap; gap: var(--sp-3);
}
.exam-chip{
  font-family: var(--font-display); font-weight:700; font-size: var(--step-1);
  padding: 0.5em 1em; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
}
.hero-cta-row{ margin-top: var(--sp-5); display:flex; flex-wrap:wrap; gap: var(--sp-3); align-items:center; }
.hero-note{ margin-top: var(--sp-3); font-size: var(--step--1); color: var(--slate-400); }

.hero-stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3);
  margin-top: var(--sp-6); max-width: 480px;
}
.hero-stats .stat b{ display:block; font-family: var(--font-mono); font-size: var(--step-2); color: var(--merit-gold-500); }
.hero-stats .stat span{ font-size: var(--step--1); color: var(--dusk-100); opacity:.8; }

/* ---------- REGISTER CARD (the hero's job) ---------- */
.register-card{
  background: var(--paper-50);
  color: var(--ink-950);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-5);
  position:relative;
  border: 1px solid rgba(255,255,255,0.6);
}
.register-card::before{
  content:"REGISTER";
  position:absolute; top: -14px; left: var(--sp-4);
  background: var(--ember-500); color:#fff;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  padding: 0.35em 0.9em; border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px -4px rgba(192,67,46,0.6);
}
.register-card h3{ font-size: var(--step-2); margin-top: var(--sp-2); }
.register-card .sub{ color: var(--slate-600); font-size: var(--step--1); margin-top: 0.4rem; }

.form-step{ margin-top: var(--sp-4); }
.form-step[hidden]{ display:none; }
.field-grid{ display:grid; grid-template-columns: 1fr; gap: 0 var(--sp-3); }
@media (min-width: 480px){ .field-grid{ grid-template-columns: 1fr 1fr; } }
.field{ margin-bottom: var(--sp-3); }
textarea.input{ resize: vertical; min-height: 4.2em; font-family: inherit; }
.field label{ display:block; font-size: var(--step--1); font-weight:600; margin-bottom: 0.4rem; color: var(--ridge-900); }
.field-hint{ font-size: 0.75rem; color: var(--slate-400); margin-top: 0.35rem; }
.input-row{ display:flex; gap:0.6rem; }
.input, select.input{
  width:100%; padding: 0.85em 1em; border-radius: var(--radius-sm);
  border: 1.5px solid var(--slate-200); background: var(--paper-0); color: var(--ink-950);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.input:focus, select.input:focus{ border-color: var(--ridge-700); box-shadow: 0 0 0 4px rgba(39,73,121,0.12); outline:none; }
.input.otp-input{ letter-spacing: 0.6em; text-align:center; font-family: var(--font-mono); font-size: var(--step-1); font-weight:700; }
.phone-prefix{
  display:flex; align-items:center; padding: 0 0.9em; border-radius: var(--radius-sm);
  border: 1.5px solid var(--slate-200); background: var(--slate-100); font-family: var(--font-mono); font-weight:700; color: var(--slate-600);
}

.otp-meta{ display:flex; align-items:center; justify-content:space-between; margin-top: var(--sp-2); font-size: var(--step--1); }
.otp-timer{ font-family: var(--font-mono); color: var(--slate-600); }
.link-btn{ background:none; border:none; color: var(--ember-500); font-weight:700; padding:0; }
.link-btn[disabled]{ color: var(--slate-400); cursor:not-allowed; }

.form-msg{
  margin-top: var(--sp-3); padding: 0.75em 1em; border-radius: var(--radius-sm);
  font-size: var(--step--1); display:none; gap:0.6em; align-items:flex-start;
}
.form-msg.show{ display:flex; }
.form-msg.error{ background: var(--ember-100); color: var(--ember-600); }
.form-msg.success{ background: var(--pine-100); color: var(--pine-600); }

.register-success{ text-align:center; padding: var(--sp-4) 0; }
.register-success .check{
  width:64px; height:64px; border-radius:50%; background: var(--pine-100); color: var(--pine-600);
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-3);
}
.register-success h4{ font-size: var(--step-2); }
.register-success p{ color: var(--slate-600); margin-top: var(--sp-2); }

.consent-line{ font-size: 0.75rem; color: var(--slate-400); margin-top: var(--sp-3); line-height:1.5; }