/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
--orange:      #F97316;
--orange-deep: #ea6a0a;
--orange-glow: rgba(249,115,22,.22);
--black:       #0D0D0D;
--black-soft:  #161616;
--black-card:  #1a1a1a;
--white:       #FFFFFF;
--gray-50:     #f9fafb;
--gray-100:    #f3f4f6;
--gray-200:    #e5e7eb;
--gray-300:    #d1d5db;
--gray-400:    #9ca3af;
--gray-500:    #6b7280;
--gray-700:    #374151;
--gray-900:    #111827;
--font:        'Inter', system-ui, -apple-system, sans-serif;
--ease:        cubic-bezier(.4,0,.2,1);
--r-sm:        8px;
--r-md:        12px;
--r-lg:        18px;
--r-xl:        24px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
height: 100%;
font-family: var(--font);
background: var(--white);
color: var(--black);
overflow: hidden;
}

/* ============================================================
   SPLIT LAYOUT
   ============================================================ */
.reg-shell {
display: grid;
grid-template-columns: 1fr 1fr;
height: 100vh;
overflow: hidden;
}

/* ============================================================
   LEFT PANEL — dark cinematic
   ============================================================ */
.reg-left {
position: relative;
background: var(--black);
overflow: hidden;
display: flex;
flex-direction: column;
padding: 44px 52px;
animation: slideInLeft .7s var(--ease) both;
}

@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-40px); }
to   { opacity: 1; transform: translateX(0); }
}

/* Grid dot pattern */
.reg-left::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(249,115,22,.09) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
}

/* Glow orbs */
.left-orb-1 {
position: absolute;
width: 420px;
height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(249,115,22,.14) 0%, transparent 70%);
top: -120px;
right: -100px;
pointer-events: none;
}
.left-orb-2 {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(249,115,22,.10) 0%, transparent 70%);
bottom: 60px;
left: -80px;
pointer-events: none;
}

/* Vertical accent line */
.left-accent-line {
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: linear-gradient(to bottom, transparent, rgba(249,115,22,.3) 30%, rgba(249,115,22,.15) 70%, transparent);
pointer-events: none;
}

/* ---- Logo ---- */
.left-logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
position: relative;
z-index: 1;
}
.left-logo-icon {
width: 44px;
height: 44px;
object-fit: contain;
filter: drop-shadow(0 0 8px rgba(249,115,22,.6));
}
.left-logo-text {
font-size: 1.05rem;
font-weight: 700;
color: var(--white);
letter-spacing: -.3px;
}
.left-logo-text span { color: var(--orange); }

/* ---- Body ---- */
.left-body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 1;
padding: 48px 0 24px;
}

/* Journey badge */
.journey-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(249,115,22,.12);
border: 1px solid rgba(249,115,22,.25);
border-radius: 100px;
padding: 5px 14px;
font-size: .72rem;
font-weight: 600;
color: var(--orange);
letter-spacing: .06em;
text-transform: uppercase;
width: fit-content;
margin-bottom: 28px;
}
.journey-badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--orange);
animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
0%, 100% { opacity: 1; transform: scale(1); }
50%       { opacity: .5; transform: scale(.7); }
}

/* Main headline */
.left-headline {
font-size: clamp(1.8rem, 2.8vw, 2.4rem);
font-weight: 800;
line-height: 1.18;
letter-spacing: -.04em;
color: var(--white);
margin-bottom: 18px;
}
.left-headline .hl-accent { color: var(--orange); }

.left-sub {
font-size: .93rem;
color: rgba(255,255,255,.52);
line-height: 1.7;
max-width: 360px;
margin-bottom: 40px;
}

/* Stats row */
.left-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 36px;
}
.left-stat {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--r-md);
padding: 14px 12px;
text-align: center;
}
.left-stat-num {
font-size: 1.3rem;
font-weight: 800;
color: var(--white);
letter-spacing: -.03em;
line-height: 1;
margin-bottom: 4px;
}
.left-stat-num span { color: var(--orange); }
.left-stat-label {
font-size: .68rem;
color: rgba(255,255,255,.4);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .05em;
}

/* Journey steps */
.journey-steps {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 36px;
}
.journey-step {
display: flex;
align-items: flex-start;
gap: 14px;
}
.step-icon-wrap {
width: 34px;
height: 34px;
border-radius: 9px;
background: rgba(249,115,22,.12);
border: 1px solid rgba(249,115,22,.2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--orange);
font-size: .85rem;
}
.journey-step-text { padding-top: 2px; }
.journey-step-title {
font-size: .83rem;
font-weight: 600;
color: rgba(255,255,255,.85);
line-height: 1.3;
}
.journey-step-desc {
font-size: .74rem;
color: rgba(255,255,255,.38);
margin-top: 2px;
}

/* Glassmorphism cert card */
.cert-card {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--r-lg);
padding: 16px 20px;
display: flex;
align-items: center;
gap: 14px;
animation: cardFloat 4s ease-in-out infinite;
}
@keyframes cardFloat {
0%, 100% { transform: translateY(0); }
50%       { transform: translateY(-6px); }
}
.cert-icon {
width: 42px;
height: 42px;
border-radius: 11px;
background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.1rem;
flex-shrink: 0;
}
.cert-info-label {
font-size: .65rem;
color: rgba(255,255,255,.38);
text-transform: uppercase;
letter-spacing: .07em;
font-weight: 600;
}
.cert-info-name {
font-size: .88rem;
font-weight: 700;
color: var(--white);
margin: 2px 0;
}
.cert-info-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(249,115,22,.15);
border-radius: 100px;
padding: 2px 9px;
font-size: .63rem;
color: var(--orange);
font-weight: 600;
}

/* Bottom testimonial */
.left-quote {
position: relative;
z-index: 1;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,.08);
}
.left-quote-text {
font-size: .8rem;
color: rgba(255,255,255,.45);
font-style: italic;
line-height: 1.65;
margin-bottom: 10px;
}
.left-quote-author {
display: flex;
align-items: center;
gap: 10px;
}
.quote-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, var(--orange) 0%, #f59e0b 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: .7rem;
font-weight: 700;
color: var(--white);
}
.quote-name {
font-size: .75rem;
font-weight: 600;
color: rgba(255,255,255,.6);
}
.quote-role {
font-size: .68rem;
color: rgba(255,255,255,.3);
}

/* ============================================================
   RIGHT PANEL — white form
   ============================================================ */
.reg-right {
background: var(--white);
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 48px 52px;
position: relative;
animation: slideInRight .7s var(--ease) both;
}

@keyframes slideInRight {
from { opacity: 0; transform: translateX(40px); }
to   { opacity: 1; transform: translateX(0); }
}

/* Top orange accent line */
.reg-right::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--orange) 40%, var(--orange-deep) 60%, transparent);
}

.form-wrap {
width: 100%;
max-width: 400px;
}

/* Back link */
.back-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .8rem;
font-weight: 500;
color: var(--gray-500);
text-decoration: none;
margin-bottom: 36px;
transition: color .2s var(--ease), gap .2s var(--ease);
}
.back-link:hover { color: var(--black); gap: 10px; }
.back-link i { font-size: .75rem; }

/* Form heading */
.form-title {
font-size: 1.65rem;
font-weight: 800;
letter-spacing: -.04em;
color: var(--gray-900);
line-height: 1.2;
margin-bottom: 6px;
}
.form-title .accent { color: var(--orange); }
.form-subtitle {
font-size: .83rem;
color: var(--gray-500);
line-height: 1.5;
margin-bottom: 24px;
}

/* Progress indicator */
.reg-progress {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 28px;
}
.reg-step {
height: 3px;
border-radius: 2px;
background: var(--gray-200);
flex: 1;
transition: background .4s var(--ease);
}
.reg-step.active { background: var(--orange); }
.reg-step-label {
font-size: .7rem;
color: var(--gray-400);
font-weight: 500;
white-space: nowrap;
}

/* Alerts */
.auth-alert {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
border-radius: var(--r-md);
font-size: .82rem;
font-weight: 500;
margin-bottom: 20px;
line-height: 1.5;
}
.auth-alert i { font-size: .95rem; flex-shrink: 0; margin-top: 1px; }
.auth-alert-error {
background: #fef2f2;
border: 1px solid #fecaca;
color: #b91c1c;
}
.auth-alert-error i { color: #ef4444; }
.auth-alert-success {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #15803d;
}
.auth-alert-success i { color: #22c55e; }

/* Name row */
.name-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}

/* Field */
.field-group {
margin-bottom: 16px;
position: relative;
}
.field-label {
display: block;
font-size: .75rem;
font-weight: 600;
color: var(--gray-700);
margin-bottom: 6px;
letter-spacing: .01em;
}
.field-wrap { position: relative; }
.field-icon {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--gray-400);
font-size: .85rem;
pointer-events: none;
transition: color .2s var(--ease);
}
.field-input {
width: 100%;
height: 44px;
padding: 0 14px 0 38px;
border: 1.5px solid var(--gray-200);
border-radius: var(--r-md);
font-family: var(--font);
font-size: .875rem;
color: var(--gray-900);
background: var(--white);
outline: none;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
-webkit-appearance: none;
}
.field-input::placeholder { color: var(--gray-400); font-size: .82rem; }
.field-input:focus {
border-color: var(--orange);
box-shadow: 0 0 0 4px rgba(249,115,22,.12);
}
.field-wrap:focus-within .field-icon { color: var(--orange); }
.field-input.is-error {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}
.field-input.is-valid {
border-color: #22c55e;
box-shadow: 0 0 0 3px rgba(34,197,94,.08);
}
.field-error-msg {
font-size: .72rem;
color: #ef4444;
font-weight: 500;
margin-top: 5px;
display: none;
}
.field-error-msg.visible { display: block; }

/* Password toggle */
.pwd-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--gray-400);
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: .9rem;
transition: color .2s var(--ease);
border-radius: 4px;
}
.pwd-toggle:hover { color: var(--gray-700); }
.field-input.has-toggle { padding-right: 42px; }

/* Password strength */
.pwd-strength {
display: flex;
align-items: center;
gap: 8px;
margin-top: 7px;
}
.pwd-strength-bars {
display: flex;
gap: 3px;
flex: 1;
}
.pwd-bar {
height: 3px;
flex: 1;
border-radius: 2px;
background: var(--gray-200);
transition: background .3s var(--ease);
}
.pwd-bar.weak   { background: #ef4444; }
.pwd-bar.medium { background: #f59e0b; }
.pwd-bar.strong { background: #22c55e; }
.pwd-strength-label {
font-size: .67rem;
font-weight: 600;
color: var(--gray-400);
white-space: nowrap;
}

/* Terms */
.terms-wrap {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 22px;
}
.terms-checkbox {
width: 17px;
height: 17px;
border: 1.5px solid var(--gray-300);
border-radius: 5px;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
flex-shrink: 0;
margin-top: 1px;
background: var(--white);
transition: all .2s var(--ease);
position: relative;
}
.terms-checkbox:checked {
background: var(--orange);
border-color: var(--orange);
}
.terms-checkbox:checked::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5L3.5 6.5L9 1' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.terms-text {
font-size: .77rem;
color: var(--gray-500);
line-height: 1.6;
}
.terms-text a {
color: var(--orange);
text-decoration: none;
font-weight: 600;
}
.terms-text a:hover { text-decoration: underline; }

/* Submit button */
.btn-register {
width: 100%;
height: 48px;
background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
color: var(--white);
border: none;
border-radius: var(--r-md);
font-family: var(--font);
font-size: .9rem;
font-weight: 700;
letter-spacing: -.01em;
cursor: pointer;
position: relative;
overflow: hidden;
transition: opacity .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-register::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
transform: translateX(-100%);
transition: transform .55s var(--ease);
}
.btn-register:hover:not(:disabled)::before { transform: translateX(100%); }
.btn-register:hover:not(:disabled) {
box-shadow: 0 8px 28px rgba(249,115,22,.38);
transform: translateY(-1px);
}
.btn-register:active:not(:disabled) { transform: translateY(0); }
.btn-register:disabled { opacity: .65; cursor: not-allowed; }
.btn-spinner { display: none; }
.btn-register.loading .btn-spinner { display: inline-block; }

/* Divider */
.or-divider {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.or-line { flex: 1; height: 1px; background: var(--gray-200); }
.or-text { font-size: .72rem; color: var(--gray-400); font-weight: 500; white-space: nowrap; }

/* Google button */
.btn-google {
width: 100%;
height: 44px;
background: var(--white);
border: 1.5px solid var(--gray-200);
border-radius: var(--r-md);
font-family: var(--font);
font-size: .85rem;
font-weight: 600;
color: var(--gray-700);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
margin-bottom: 24px;
text-decoration: none;
}
.btn-google:hover {
background: var(--gray-50);
border-color: var(--gray-300);
box-shadow: 0 2px 10px rgba(0,0,0,.07);
color: var(--gray-700);
}

/* Login redirect */
.login-redirect {
text-align: center;
font-size: .8rem;
color: var(--gray-500);
margin-bottom: 12px;
}
.login-redirect a {
color: var(--orange);
font-weight: 700;
text-decoration: none;
}
.login-redirect a:hover { text-decoration: underline; }

/* Legal */
.reg-legal {
text-align: center;
font-size: .68rem;
color: var(--gray-400);
line-height: 1.6;
}

/* ============================================================
   FADE-UP STAGGER ANIMATIONS
   ============================================================ */
.fade-up {
opacity: 0;
transform: translateY(16px);
animation: fadeUp .5s var(--ease) both;
}
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}
.fade-up:nth-child(1)  { animation-delay: .08s; }
.fade-up:nth-child(2)  { animation-delay: .14s; }
.fade-up:nth-child(3)  { animation-delay: .20s; }
.fade-up:nth-child(4)  { animation-delay: .26s; }
.fade-up:nth-child(5)  { animation-delay: .32s; }
.fade-up:nth-child(6)  { animation-delay: .38s; }
.fade-up:nth-child(7)  { animation-delay: .44s; }
.fade-up:nth-child(8)  { animation-delay: .50s; }
.fade-up:nth-child(9)  { animation-delay: .56s; }
.fade-up:nth-child(10) { animation-delay: .62s; }
.fade-up:nth-child(11) { animation-delay: .68s; }
.fade-up:nth-child(12) { animation-delay: .74s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
html, body { overflow: auto; }
.reg-shell {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
}
.reg-left {
    padding: 24px 24px 20px;
    animation: none;
}
.left-body { padding: 24px 0 16px; }
.left-headline { font-size: 1.55rem; }
.journey-steps, .cert-card, .left-quote { display: none; }
.left-stats { gap: 8px; }
.reg-right {
    padding: 36px 24px 48px;
    animation: none;
    justify-content: flex-start;
}
.form-wrap { max-width: 100%; }
}

@media (max-width: 480px) {
.name-row { grid-template-columns: 1fr; gap: 0; }
}