:root{
  --nc-blue:#2947ff;
  --nc-blue2:#5268ff;
  --nc-navy:#080b14;
  --nc-black:#05070b;
  --nc-panel:#111722;
  --nc-panel2:#171f2c;
  --nc-silver:#d4d8df;
  --nc-silver2:#8f99a8;
  --nc-white:#ffffff;
  --nc-good:#39d98a;
  --nc-bad:#ff5f68;
  --nc-border:#2c3544;
  --shadow:0 22px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--nc-white);
  background:
    radial-gradient(circle at 85% 10%, rgba(41,71,255,.18), transparent 34%),
    radial-gradient(circle at 10% 90%, rgba(82,104,255,.10), transparent 34%),
    linear-gradient(180deg,#0b0f16 0%,#070a10 55%,#05070b 100%);
}
button,input{font:inherit}
button{transition:.2s ease}
button:hover{transform:translateY(-1px)}
.shell{max-width:1240px;margin:0 auto;padding:26px}
.site-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;margin-bottom:22px;
  background:rgba(10,14,21,.88);border:1px solid rgba(255,255,255,.08);
  border-radius:18px;box-shadow:0 12px 35px rgba(0,0,0,.2);
  backdrop-filter:blur(12px)
}
.brand{display:flex;gap:16px;align-items:center}
.brand img{width:170px;max-height:72px;object-fit:contain;background:white;border-radius:8px;padding:4px}
.brand-copy strong{display:block;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.brand-copy small{color:#aab5c3}
.topnav{display:flex;gap:8px;flex-wrap:wrap}
.btn{
  border:none;border-radius:10px;padding:11px 16px;cursor:pointer;
  font-weight:800;letter-spacing:.01em
}
.btn-primary{
  color:white;background:linear-gradient(135deg,var(--nc-blue),var(--nc-blue2));
  box-shadow:0 10px 24px rgba(41,71,255,.22)
}
.btn-secondary{background:#202938;color:white;border:1px solid #303c4d}
.btn-ghost{background:transparent;border:1px solid var(--nc-border);color:#e9edf4}
.btn-danger{background:var(--nc-bad);color:white}

.btn-race{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;color:#fff;
  background:linear-gradient(135deg,#ff7a00,#ff2d55 55%,#2947ff);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 26px rgba(255,72,64,.20);
  white-space:nowrap;
}
.btn-race:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 14px 30px rgba(41,71,255,.24);
}

.card{
  background:linear-gradient(180deg,rgba(18,24,34,.98),rgba(12,17,25,.98));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:24px;box-shadow:var(--shadow)
}
.hero{
  position:relative;overflow:hidden;padding:34px;
  background:
    linear-gradient(135deg,rgba(41,71,255,.14),transparent 44%),
    linear-gradient(180deg,#121924,#0c1119)
}
.hero:after{
  content:"";position:absolute;right:-80px;bottom:-110px;width:310px;height:310px;
  border:2px solid rgba(82,104,255,.18);border-radius:50%
}
.hero-logo{
  width:min(520px,90%);display:block;margin:6px auto 22px;background:white;border-radius:18px;padding:14px;
  box-shadow:0 18px 45px rgba(0,0,0,.28)
}
.hero h2{font-size:38px;margin:6px 0 10px;letter-spacing:-.02em}
.hero p{color:#b8c2cf;max-width:820px;font-size:16px;line-height:1.65}
.kicker{
  font-size:12px;text-transform:uppercase;letter-spacing:.15em;
  color:#7f93ff;font-weight:900
}
.company-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 0
}
.company-pill{
  background:#0b111a;border:1px solid #243043;border-radius:13px;padding:14px
}
.company-pill b{display:block;font-size:13px}
.company-pill span{display:block;color:#98a5b5;font-size:12px;margin-top:3px}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:880px){
  .grid-3,.grid-2,.company-strip{grid-template-columns:1fr}
  .site-header{align-items:flex-start;gap:14px;flex-direction:column}
  .brand img{width:145px}
}
.input{
  width:100%;padding:13px 14px;border-radius:11px;border:1px solid var(--nc-border);
  background:#080d14;color:white;margin:8px 0 14px;outline:none
}
.input:focus{border-color:var(--nc-blue2);box-shadow:0 0 0 3px rgba(82,104,255,.12)}
.label{font-size:12px;color:#9facba;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.login-panel{background:#0a1018;border:1px solid #253044;border-radius:15px;padding:20px}
.login-panel h3{margin-top:0}
.stat{font-size:34px;font-weight:900;letter-spacing:-.03em}
.muted{color:#9eabb9}
.module{
  position:relative;overflow:hidden;min-height:260px;
  display:flex;flex-direction:column
}
.module:before{
  content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--nc-blue),#7b8cff)
}
.module h3{margin:14px 0 8px;font-size:21px}
.module p{line-height:1.55}
.module .btn{margin-top:auto;align-self:flex-start}
.badge{
  display:inline-block;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:900;
  background:#222b38;color:#d9e0e7;text-transform:uppercase;letter-spacing:.06em
}
.badge.good{background:rgba(57,217,138,.13);color:#80f2b4}
.badge.warn{background:rgba(82,104,255,.14);color:#93a2ff}
.progress{height:10px;background:#080d13;border-radius:999px;overflow:hidden;margin-top:10px}
.progress>div{height:100%;background:linear-gradient(90deg,var(--nc-blue),#8090ff)}
.lesson h2,.card h2{margin-top:8px}
.lesson ul{color:#d5dce5;line-height:1.7;padding-left:20px}
.lesson li{margin-bottom:10px}
.question{font-size:22px;font-weight:900;margin-bottom:16px;line-height:1.35}
.option{
  display:block;border:1px solid var(--nc-border);border-radius:13px;padding:14px 15px;margin:10px 0;
  background:#0a1018;cursor:pointer;color:#e8edf4
}
.option:hover{border-color:#5268ff;background:#101827}
.option.selected{
  border-color:var(--nc-blue2);background:linear-gradient(135deg,rgba(41,71,255,.18),rgba(82,104,255,.08));
  box-shadow:inset 0 0 0 1px rgba(82,104,255,.12)
}
.result-good{border-left:4px solid var(--nc-good)}
.result-bad{border-left:4px solid var(--nc-bad)}
table{width:100%;border-collapse:collapse}
th,td{padding:12px;border-bottom:1px solid var(--nc-border);text-align:left}
th{color:#b9c3cf;font-size:12px;text-transform:uppercase;letter-spacing:.07em}
.footer-note{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:24px;padding:18px 2px;color:#758292;font-size:12px
}
.admin-banner{
  padding:15px 18px;border-radius:14px;
  background:linear-gradient(90deg,rgba(41,71,255,.16),rgba(41,71,255,.04));
  border:1px solid rgba(82,104,255,.22);margin-bottom:18px
}

.lesson-intro{font-size:17px;line-height:1.6;max-width:900px}
.reading-banner{
  margin:22px 0;padding:16px 18px;border-radius:12px;
  background:linear-gradient(90deg,rgba(41,71,255,.18),rgba(41,71,255,.05));
  border:1px solid rgba(82,104,255,.28);color:#dfe5ff
}
.lesson-content{display:grid;gap:16px;margin-top:18px}
.lesson-section{
  padding:22px;border-radius:14px;background:#0a1018;border:1px solid #253044;
  line-height:1.68;color:#d7dee8
}
.lesson-section h3{margin:0 0 10px;color:#fff;font-size:20px}
.lesson-section p{margin:0}
.sales-callout{
  padding:18px;border-left:4px solid #5268ff;border-radius:8px;
  background:rgba(41,71,255,.10);color:#eef1ff
}
.lesson-complete{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-top:24px;padding:20px;border-radius:14px;background:#101827;border:1px solid #303d51
}
@media(max-width:700px){.lesson-complete{align-items:flex-start;flex-direction:column}}