:root{
  --primary:#2563eb;
  --primary-dark:#1e40af;
  --dark:#020617;
  --light:#f8fafc;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif}
body{background:var(--light);color:#0f172a;line-height:1.6}

.container{width:90%;max-width:1200px;margin:auto}
.section{padding:90px 0}
.section.alt{background:#eef2ff}
.section-title{text-align:center;font-size:2.4rem;font-weight:800;margin-bottom:50px}

/* NAV */
.navbar{background:#020617;position:sticky;top:0;z-index:10}
.nav-flex{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.brand{color:#fff;font-weight:800}
.brand span{font-size:.85rem;color:#c7d2fe}
nav{display:flex;gap:18px}
nav a{color:#e5e7eb;text-decoration:none}
.nav-btn{background:linear-gradient(135deg,var(--primary),var(--primary-dark));padding:8px 20px;border-radius:999px;color:#fff}

/* HERO */
.hero{background:radial-gradient(circle at top,#1e3a8a,#020617);color:#fff;padding:120px 0 80px}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:flex-start}
.hero h1{font-size:3rem;font-weight:800}
.hero h1 span{color:#60a5fa}
.badge{background:rgba(255,255,255,.15);padding:6px 16px;border-radius:999px;font-size:.7rem;display:inline-block;margin-bottom:18px}
.hero-actions{display:flex;gap:14px;margin-top:18px}
.hero-card{background:rgba(255,255,255,.08);padding:24px;border-radius:16px;max-width:420px}

/* BUTTONS */
.btn-primary{background:var(--primary);color:#fff;padding:14px 26px;border-radius:12px;text-decoration:none;font-weight:600}
.btn-outline{border:2px solid #93c5fd;color:#fff;padding:14px 26px;border-radius:12px;text-decoration:none}
.btn-outline-dark{border:2px solid var(--primary);color:var(--primary);padding:14px 26px;border-radius:12px;text-decoration:none;font-weight:600}

/* ABOUT */
.feature-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.feature-card{background:#fff;padding:32px;border-radius:18px;box-shadow:0 20px 40px rgba(0,0,0,.08)}

/* SKILLS */
.skills-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:1100px;margin:auto}
.skill{background:#fff;padding:28px;border-radius:18px;text-align:center;font-weight:600;box-shadow:0 18px 40px rgba(0,0,0,.08)}

/* CAREERS */
.career-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:1100px;margin:auto}
.career-card{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;padding:26px;border-radius:18px;text-align:center;font-weight:600;box-shadow:0 20px 45px rgba(37,99,235,.45)}

/* REGISTER */
.enroll{background:linear-gradient(135deg,#020617,#1e293b);color:#fff}
.enroll-box{text-align:center;max-width:1000px}
.enroll-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;margin-top:40px}
.enroll-card{background:#fff;color:#020617;padding:46px 38px;border-radius:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 60px rgba(0,0,0,.2)}
.enroll-icon{font-size:3.2rem}
.login-note{margin-top:28px}
.login-note a{color:#93c5fd}

/* FOOTER */
.footer{background:#020617;color:#94a3b8;text-align:center;padding:28px}

/* ANIMATIONS */
.fade-up{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.fade-up.show{opacity:1;transform:translateY(0)}
.career-card,.skill,.enroll-card,.feature-card{transition:transform .25s ease,box-shadow .25s ease}
.career-card:hover,.skill:hover,.enroll-card:hover{transform:translateY(-8px)}

/* RESPONSIVE */
@media(max-width:900px){
.hero-grid,.enroll-grid{grid-template-columns:1fr}
.hero h1{font-size:2.3rem}
}
/* ============================
   TRAINER REGISTRATION FORM
============================ */

.form-container {
  max-width: 900px;
  margin: auto;
}

.form-card {
  background: white;
  padding: 50px 45px;
  border-radius: 26px;
  box-shadow: 0 40px 80px rgba(0,0,0,.15);
}

.form-card h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.form-sub {
  text-align: center;
  color: #475569;
  margin-bottom: 40px;
}

.form-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 40px 0 20px;
  color: #0f172a;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #334155;
}

.form-group input {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #cbd5f5;
  font-size: .95rem;
}

.form-group input:focus {
  outline: none;
  border-color: #2563eb;
}

.full-width {
  width: 100%;
  margin-top: 40px;
}

.form-note {
  text-align: center;
  margin-top: 25px;
  font-size: .9rem;
}

.form-note a {
  color: #2563eb;
  font-weight: 600;
}

/* RESPONSIVE */
@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-card {
    padding: 40px 25px;
  }
}
/* SUPPORT CLASS */
.full-span {
  grid-column: span 2;
}

@media (max-width: 700px) {
  .full-span {
    grid-column: span 1;
  }
}
.trainer-code-box {
  margin-top: 30px;
  text-align: center;
}

.code-display {
  font-size: 1.6rem;
  font-weight: 800;
  background: #0f172a;
  color: #fff;
  padding: 14px 24px;
  border-radius: 12px;
  margin-top: 10px;
  letter-spacing: 2px;
}
/* =========================
   AUTH / LOGIN UI
========================= */

.auth-body {
  font-family: 'Inter', sans-serif;
  background: #020617;
  min-height: 100vh;
  overflow: hidden;
}

.auth-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, #2563eb33, transparent 40%),
    radial-gradient(circle at 80% 80%, #38bdf833, transparent 40%);
  animation: bgFloat 12s ease-in-out infinite alternate;
}

@keyframes bgFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-30px); }
}

.auth-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.auth-card {
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 18px;
  width: 100%;
  max-width: 420px;
  padding: 40px 36px;
  box-shadow:
    0 20px 50px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.03);
}

.fade-in {
  animation: fadeUp .6s ease forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-header {
  text-align: center;
  margin-bottom: 30px;
}

.auth-header h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #f8fafc;
}

.auth-header p {
  font-size: .95rem;
  color: #94a3b8;
  margin-top: 6px;
}

.auth-form .input-group {
  margin-bottom: 18px;
}

.auth-form label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: #cbd5f5;
  margin-bottom: 6px;
}

.auth-form input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #1e293b;
  background: #020617;
  color: #f8fafc;
  font-size: .95rem;
  transition: border .2s, box-shadow .2s;
}

.auth-form input:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px #38bdf833;
}

.auth-links {
  text-align: center;
  font-size: .85rem;
  color: #94a3b8;
  margin-top: 22px;
}

.auth-links a {
  color: #38bdf8;
  font-weight: 600;
  text-decoration: none;
  margin: 0 6px;
}

.auth-links a:hover {
  text-decoration: underline;
}
/* =========================
   AUTH / LOGIN UI
========================= */

.auth-body {
  background: #020617;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
}

.auth-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, #2563eb33, transparent 40%),
    radial-gradient(circle at 80% 80%, #38bdf833, transparent 40%);
  animation: bgFloat 12s ease-in-out infinite alternate;
}

@keyframes bgFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-30px); }
}

.auth-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.auth-card {
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 18px;
  max-width: 420px;
  width: 100%;
  padding: 40px 36px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

.fade-in {
  animation: fadeUp .6s ease forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.auth-header {
  text-align: center;
  margin-bottom: 24px;
}

.auth-header h2 {
  color: #f8fafc;
  font-weight: 800;
}

.auth-header p {
  color: #94a3b8;
  font-size: .9rem;
}

.auth-error {
  background: #7f1d1d;
  color: #fecaca;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .85rem;
  margin-bottom: 14px;
}

.input-group {
  margin-bottom: 18px;
}

.input-group label {
  font-size: .85rem;
  font-weight: 600;
  color: #cbd5f5;
  margin-bottom: 6px;
  display: block;
}

.input-group input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #1e293b;
  background: #020617;
  color: #f8fafc;
}

.input-group input:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px #38bdf833;
}

.password-wrap {
  position: relative;
}

.password-wrap button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 3px solid #ffffff33;
  border-top: 3px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.auth-links {
  margin-top: 20px;
  text-align: center;
  font-size: .85rem;
  color: #94a3b8;
}

.auth-links a {
  color: #38bdf8;
  font-weight: 600;
  text-decoration: none;
}