:root {
  --teal: #0F766E;
  --teal-bright: #14B8A6;
  --teal-light: #5eead4;
  --teal-frost: #F0FDFA;
  --teal-mist: #CCFBF1;
  --teal-pale: #CCFBF1;
  --teal-deep: #115E59;
  --midnight: #1A1A1A;
  --charcoal: #2D2D2D;
  --stone: #6B7280;
  --warm-white: #FAFFFE;
  --coral: #F97066;
  --green: #22C55E;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow-soft: 0 1px 3px rgba(15,118,110,.04), 0 8px 24px rgba(15,118,110,.03);
  --shadow-medium: 0 4px 12px rgba(15,118,110,.05), 0 16px 40px rgba(15,118,110,.04);
  --shadow-glow: 0 0 0 1px rgba(15,118,110,.12), 0 8px 30px rgba(15,118,110,.08);
  --ease-smooth: cubic-bezier(.22,1,.36,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; overflow-x:clip; }
body { font-family:var(--font-body); color:var(--midnight); background:#111114; line-height:1.6; overflow-x:clip; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ===== ANIMATIONS ===== */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{transform:scale(.9);opacity:.6} 50%{transform:scale(1);opacity:1} }
@keyframes orb-float { 0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(30px,-20px) scale(1.05)} 50%{transform:translate(-20px,30px) scale(.95)} 75%{transform:translate(15px,15px) scale(1.02)} }
@keyframes gradient-flow { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes footerGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes ctaFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes ctaGlow { 0%,100%{opacity:.4;transform:scale(1) translate(0,0)} 25%{opacity:.7;transform:scale(1.05) translate(2%,-3%)} 50%{opacity:.5;transform:scale(1.08) translate(-1%,2%)} 75%{opacity:.65;transform:scale(1.02) translate(3%,1%)} }
@keyframes ctaShimmer { 0%{left:-60%;opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{left:120%;opacity:0} }
@keyframes shimmerCard { 0%{left:-80%} 100%{left:120%} }

.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.rd1{transition-delay:.1s} .rd2{transition-delay:.2s} .rd3{transition-delay:.3s} .rd4{transition-delay:.4s}
.reveal-delay-1{transition-delay:.1s} .reveal-delay-2{transition-delay:.2s} .reveal-delay-3{transition-delay:.3s} .reveal-delay-4{transition-delay:.4s}

/* ========================= HEADER STYLES ========================= */
/* ========================= PAGE STYLES =========================== */

/* ===== AUTH SECTION ===== */
.auth-section { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:30px 24px 60px; background:#111114; position:relative; }
.auth-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; max-width:1200px; width:100%; position:relative; z-index:2; }
.auth-form-col { max-width:420px; }
.auth-form-col h1 { font-family:var(--font-display); font-size:40px; font-weight:700; color:#fff; line-height:1.15; margin-bottom:16px; }
.auth-sub { font-size:15px; color:rgba(255,255,255,.4); line-height:1.6; margin-bottom:32px; }
.form-group { margin-bottom:24px; }
.form-group input { width:100%; padding:16px 18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:12px; color:#fff; font-size:15px; font-family:var(--font-body); transition:border-color .3s, box-shadow .3s; outline:none; }
.form-group input::placeholder { color:rgba(255,255,255,.25); }
.form-group input:focus { border-color:var(--teal-bright); box-shadow:0 0 0 3px rgba(20,184,166,.15); }
.auth-submit { width:100%; padding:16px; font-size:16px; font-weight:700; font-family:var(--font-body); cursor:pointer; justify-content:center; }
.auth-footer { margin-top:24px; font-size:14px; color:rgba(255,255,255,.4); }
.auth-footer a { color:var(--teal-bright); text-decoration:none; font-weight:600; }
.auth-footer a:hover { text-decoration:underline; }
.auth-footer-help { margin-top:12px; }
/* Auth image */
.auth-image-col { position:relative; border-radius:24px; overflow:hidden; height:min(580px, calc(100vh - 180px)); }
.auth-image-col img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.auth-image-overlay { position:absolute; bottom:0; left:0; right:0; padding:32px; background:linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 100%); }
.auth-image-overlay p { font-family:var(--font-display); font-size:24px; font-weight:700; color:#fff; line-height:1.3; }

/* ========================= /PAGE STYLES ========================== */

/* ===== RESPONSIVE ===== */
@media(max-width:640px) {
  .auth-grid { grid-template-columns:1fr; gap:40px; }
  .auth-image-col { max-height:360px; }
  .auth-form-col h1 { font-size:32px; }
}
/* ========================= /FOOTER STYLES ======================== */

/* ===== SECTION HELPERS ===== */
.section-label { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--teal); margin-bottom:16px; }
.section-label::before { content:''; width:24px; height:2px; background:var(--teal-bright); border-radius:2px; }
.section-title { font-family:var(--font-display); font-size:clamp(30px,4vw,44px); font-weight:700; line-height:1.15; letter-spacing:-.02em; margin-bottom:16px; }
.section-sub { font-size:17px; color:var(--stone); max-width:560px; line-height:1.7; }