/* ============================================================   CommerceAI Career Lab — course homepage   Modern dark theme built on the Career Lab poster palette:   deep navy, electric blue and gold.   Loaded after styles.css and scoped with body.chome, so the   lesson pages keep their own look.   ============================================================ */.chome {  --c-bg: #050B18;  --c-bg-soft: #071329;  --c-bg-color: rgba(18, 22, 31, 0.55);  --c-bg-color-2: rgba(18, 22, 31, 0.68);  --c-panel: rgba(255, 255, 255, 0.035);  --c-panel-strong: rgba(255, 255, 255, 0.06);  --c-line: rgba(120, 170, 255, 0.16);  --c-line-strong: rgba(120, 170, 255, 0.3);  --c-gold: #FFC42E;  --c-gold-soft: rgba(255, 196, 46, 0.12);  --c-blue: #3B8CFF;  --c-cyan: #56D9FF;  --c-text: #EAF1FF;  --c-muted: #93A4C4;  --c-radius: 18px;  background: var(--c-bg);  color: var(--c-text);  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;  overflow-x: hidden;}.chome::before {  content: "";  position: fixed;  inset: 0;  z-index: 0;  pointer-events: none;  background:    radial-gradient(820px 520px at 12% -10%, rgba(59, 140, 255, 0.20), transparent 62%),    radial-gradient(680px 460px at 92% 2%, rgba(86, 217, 255, 0.12), transparent 60%),    radial-gradient(900px 620px at 50% 108%, rgba(255, 196, 46, 0.07), transparent 68%);}.chome ::selection { background: rgba(255, 196, 46, 0.35); color: #fff; }.chome .w { position: relative; z-index: 1; }/* ---------- announcement strip ---------- */.c-strip {  position: relative;  z-index: 30;  background: linear-gradient(90deg, rgba(59, 140, 255, 0.16), rgba(255, 196, 46, 0.16));  border-bottom: 1px solid var(--c-line);  font-size: 0.8rem;  color: #D7E4FF;}.c-strip .w {  display: flex;  align-items: center;  justify-content: space-between;  gap: 14px;  height: 40px;}.c-strip strong { color: var(--c-gold); font-weight: 700; }.c-strip a { color: #CFE0FF; border-bottom: 1px solid rgba(207, 224, 255, 0.35); }.c-strip a:hover { color: var(--c-gold); border-color: var(--c-gold); }/* ---------- nav ---------- */.chome .nav {  position: sticky;  top: 0;  z-index: 40;  background: rgba(5, 11, 24, 0.82);  backdrop-filter: blur(16px);  border-bottom: 1px solid var(--c-line);  box-shadow: none;}.chome .nav-inner { height: 74px; gap: 20px; }.chome .logo {  display: inline-flex;  align-items: center;  gap: 11px;  font-size: 1.06rem;  font-weight: 800;  letter-spacing: 0.02em;  color: #fff;  text-transform: uppercase;}.c-logo-mark {  width: 36px;  height: 36px;  border-radius: 11px;  display: grid;  place-items: center;  font-size: 1rem;  color: #23180A;  background: linear-gradient(150deg, #FFD98A, var(--c-gold));  box-shadow: 0 0 0 1px rgba(255, 196, 46, 0.35), 0 10px 24px rgba(255, 196, 46, 0.22);}.c-logo-text { display: flex; flex-direction: column; line-height: 1.05; }.c-logo-text b { font-weight: 800; }.c-logo-text b em { font-style: normal; color: var(--c-gold); }.c-logo-text span {  font-size: 0.58rem;  letter-spacing: 0.34em;  color: var(--c-muted);  font-weight: 600;  margin-top: 3px;}.chome .nav-links { gap: 30px; }.chome .nav-links a {  color: #B9C8E4;  font-size: 0.9rem;  font-weight: 500;  position: relative;  padding: 4px 0;}.chome .nav-links a::after {  content: "";  position: absolute;  left: 0;  right: 100%;  bottom: -2px;  height: 2px;  border-radius: 2px;  background: var(--c-gold);  transition: right 0.22s ease;}.chome .nav-links a:hover { color: #fff; }.chome .nav-links a:hover::after { right: 0; }.c-nav-actions { display: flex; align-items: center; gap: 12px; }.c-nav-ghost {  font-size: 0.86rem;  color: #B9C8E4;  padding: 8px 14px;  border-radius: 10px;  border: 1px solid var(--c-line);  transition: border-color 0.18s, color 0.18s;}.c-nav-ghost:hover { border-color: var(--c-line-strong); color: #fff; }.c-nav-cta {  font-size: 0.86rem;  font-weight: 700;  color: #0A1424;  padding: 9px 18px;  border-radius: 10px;  background: linear-gradient(140deg, #FFD98A, var(--c-gold));  box-shadow: 0 8px 22px rgba(255, 196, 46, 0.22);  transition: transform 0.18s, box-shadow 0.18s;}.c-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(255, 196, 46, 0.3); }/* ---------- hero ---------- */.c-hero {  position: relative;  z-index: 1;  padding: 68px 0 48px;}.c-hero-grid {  display: grid;  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);  gap: 56px;  align-items: center;}.c-badge {  display: inline-flex;  align-items: center;  gap: 9px;  padding: 7px 14px;  border-radius: 999px;  border: 1px solid var(--c-line-strong);  background: rgba(59, 140, 255, 0.1);  font-size: 0.74rem;  letter-spacing: 0.13em;  text-transform: uppercase;  font-weight: 700;  color: #CFE0FF;}.c-badge i {  width: 6px;  height: 6px;  border-radius: 50%;  background: var(--c-cyan);  box-shadow: 0 0 0 4px rgba(86, 217, 255, 0.18);}.c-hero h1 {  font-size: clamp(2.5rem, 5.4vw, 4rem);  line-height: 1.02;  letter-spacing: -0.045em;  font-weight: 850;  margin: 20px 0 18px;  color: #fff;}.c-hero h1 span {  display: block;  background: linear-gradient(96deg, #FFE7A6 0%, var(--c-gold) 45%, #FFB01F 100%);  -webkit-background-clip: text;  background-clip: text;  color: transparent;}.c-hero-lede {  font-size: 1.06rem;  color: #B7C6E2;  max-width: 540px;}.c-hero-lede strong { color: #fff; font-weight: 650; }.c-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }.chome .btn-primary,.chome .btn-secondary {  border-radius: 11px;  font-weight: 700;  font-size: 0.94rem;  padding: 13px 22px;  transition: transform 0.18s, background 0.18s, box-shadow 0.18s, border-color 0.18s;}.chome .btn-primary {  background: linear-gradient(140deg, #FFD98A, var(--c-gold));  color: #0A1424;  box-shadow: 0 10px 26px rgba(255, 196, 46, 0.22);}.chome .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(255, 196, 46, 0.3); }.chome .btn-secondary {  background: rgba(255, 255, 255, 0.04);  border: 1px solid var(--c-line-strong);  color: #EAF1FF;}.chome .btn-secondary:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }.c-hero-meta {  display: flex;  flex-wrap: wrap;  gap: 18px;  margin-top: 30px;  padding-top: 22px;  border-top: 1px solid var(--c-line);  font-size: 0.82rem;  color: var(--c-muted);}.c-hero-meta span { display: inline-flex; align-items: center; gap: 7px; }.c-hero-meta b { color: var(--c-gold); font-weight: 700; }/* poster */.c-poster {  position: relative;  border-radius: 22px;  padding: 12px;  background: linear-gradient(160deg, rgba(86, 217, 255, 0.22), rgba(59, 140, 255, 0.06) 45%, rgba(255, 196, 46, 0.16));  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);}.c-poster::before {  content: "";  position: absolute;  inset: -22px;  border-radius: 32px;  background: radial-gradient(closest-side, rgba(59, 140, 255, 0.3), transparent 72%);  filter: blur(18px);  z-index: -1;}.c-poster img {  width: 100%;  height: auto;  border-radius: 14px;  display: block;}.c-poster-tag {  position: absolute;  left: 22px;  bottom: 22px;  padding: 7px 13px;  border-radius: 999px;  background: rgba(5, 11, 24, 0.82);  border: 1px solid rgba(255, 196, 46, 0.4);  font-size: 0.7rem;  letter-spacing: 0.1em;  text-transform: uppercase;  color: var(--c-gold);  backdrop-filter: blur(6px);}/* ---------- stats ---------- */.c-stats {  position: relative;  z-index: 1;  padding: 6px 0 18px;}.c-stats-grid {  display: grid;  grid-template-columns: repeat(4, minmax(0, 1fr));  border: 1px solid var(--c-line);  border-radius: var(--c-radius);  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));  overflow: hidden;}.c-stat {  padding: 22px 24px;  border-right: 1px solid var(--c-line);}.c-stat:last-child { border-right: 0; }.c-stat b {  display: block;  font-size: 1.85rem;  line-height: 1.1;  letter-spacing: -0.03em;  color: #fff;}.c-stat b em { font-style: normal; color: var(--c-gold); }.c-stat span { font-size: 0.78rem; color: var(--c-muted); }/* ---------- skills ---------- */.c-skills {  position: relative;  z-index: 1;  padding: 54px 0 20px;}.c-section-head { max-width: 700px; margin-bottom: 26px; }.c-eyebrow {  font-size: 0.72rem;  letter-spacing: 0.2em;  text-transform: uppercase;  font-weight: 700;  color: var(--c-gold);}.c-section-head h2 {  font-size: clamp(1.5rem, 3vw, 2.05rem);  letter-spacing: -0.03em;  line-height: 1.15;  margin: 10px 0 8px;  color: #fff;}.c-section-head p { color: var(--c-muted); font-size: 0.98rem; }.c-skill-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));  gap: 12px;}.c-skill {  display: flex;  align-items: center;  gap: 12px;  padding: 15px 16px;  border-radius: 14px;  border: 1px solid var(--c-line);  background: var(--c-panel);  font-size: 0.88rem;  font-weight: 600;  color: #DCE7FA;  transition: border-color 0.18s, background 0.18s, transform 0.18s;}.c-skill:hover {  border-color: rgba(255, 196, 46, 0.45);  background: rgba(255, 196, 46, 0.06);  transform: translateY(-2px);}.c-skill i {  width: 30px;  height: 30px;  flex: 0 0 30px;  border-radius: 9px;  display: grid;  place-items: center;  font-style: normal;  font-size: 0.7rem;  font-weight: 800;  letter-spacing: 0.02em;  background: rgba(59, 140, 255, 0.16);  border: 1px solid var(--c-line);}/* ---------- module sections (rendered from content/) ---------- */.chome .section {  position: relative;  z-index: 1;  padding: 46px 0;  border-top: 1px solid var(--c-line);}.chome .section.alt { background: transparent; }.chome .module-header {  max-width: 760px;  margin-bottom: 26px;}.chome .tag {  display: inline-flex;  align-items: center;  gap: 8px;  background: rgba(59, 140, 255, 0.12);  border: 1px solid var(--c-line-strong);  color: #CFE0FF;  font-size: 0.7rem;  font-weight: 700;  letter-spacing: 0.14em;  text-transform: uppercase;  padding: 6px 13px;  border-radius: 999px;  margin-bottom: 14px;}.chome .module-header h1,.chome .module-header h2 {  font-size: clamp(1.55rem, 3.2vw, 2.15rem);  letter-spacing: -0.035em;  line-height: 1.12;  color: #fff;  margin-bottom: 10px;}.chome .module-header p {  color: var(--c-muted);  font-size: 0.98rem;  max-width: 68ch;}.chome .lessons-grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));  gap: 14px;}.chome .lesson-card {  position: relative;  display: flex;  flex-direction: column;  gap: 8px;  padding: 22px 20px 18px;  border-radius: 16px;  border: 1px solid var(--c-line);  background: linear-gradient(165deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));  color: var(--c-text);  box-shadow: none;  overflow: hidden;  transition: border-color 0.2s, transform 0.2s, background 0.2s;}.chome .lesson-card::before {  content: "";  position: absolute;  top: 0;  left: 0;  width: 3px;  height: 100%;  background: linear-gradient(var(--c-gold), rgba(255, 196, 46, 0));  opacity: 0;  transition: opacity 0.2s;}.chome .lesson-card:hover {  border-color: rgba(255, 196, 46, 0.45);  background: linear-gradient(165deg, rgba(255, 196, 46, 0.08), rgba(255, 255, 255, 0.02));  transform: translateY(-3px);  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);}.chome .lesson-card:hover::before { opacity: 1; }.chome .lesson-number {  display: inline-grid;  place-items: center;  min-width: 30px;  height: 24px;  padding: 0 8px;  border-radius: 7px;  background: rgba(255, 196, 46, 0.14);  border: 1px solid rgba(255, 196, 46, 0.32);  color: var(--c-gold);  font-size: 0.7rem;  font-weight: 800;  letter-spacing: 0.06em;  margin: 0;}.chome .lesson-card h3 {  font-size: 1rem;  font-weight: 700;  letter-spacing: -0.01em;  color: #fff;  margin: 0;  display: flex;  justify-content: space-between;  gap: 10px;}.chome .lesson-card p {  font-size: 0.855rem;  color: var(--c-muted);  line-height: 1.55;  margin: 0;}.chome .card-go {  color: var(--c-gold);  opacity: 0;  transform: translateX(-4px);  transition: opacity 0.2s, transform 0.2s;}.chome .lesson-card:hover .card-go { opacity: 1; transform: translateX(0); }.chome .lesson-details {  display: flex;  align-items: center;  justify-content: space-between;  gap: 10px;  margin-top: auto;  padding-top: 12px;  border-top: 1px dashed var(--c-line);  font-size: 0.75rem;  color: #7F92B4;}.chome .read-more { color: var(--c-gold); font-weight: 700; }/* ---------- toolkit panels (quiz / tutor / simulator) ---------- */.c-tools {  position: relative;  z-index: 1;  padding: 54px 0;  border-top: 1px solid var(--c-line);}.c-tools-grid { display: grid; gap: 18px; }.chome .quiz-card,.chome .chat-box,.chome .simulator {  border-radius: var(--c-radius);  border: 1px solid var(--c-line);  background: linear-gradient(170deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);  padding: 26px;  color: var(--c-text);}.chome .quiz-question { color: #fff; font-size: 1.05rem; min-height: 44px; }.chome .quiz-options { gap: 10px; }.chome .quiz-option {  border: 1px solid var(--c-line);  border-radius: 12px;  background: rgba(255, 255, 255, 0.025);  color: #DCE7FA;  padding: 13px 16px;  font-size: 0.92rem;}.chome .quiz-option:hover {  border-color: rgba(255, 196, 46, 0.5);  background: rgba(255, 196, 46, 0.07);}.chome .quiz-option input { accent-color: var(--c-gold); }.chome .quiz-option.selected,.chome .quiz-option.checked { border-color: rgba(255, 196, 46, 0.6); }.chome .quiz-feedback {  border-radius: 12px;  font-size: 0.9rem;  padding: 14px 16px;  background: rgba(255, 255, 255, 0.05);  border: 1px solid var(--c-line);  color: #DCE7FA;}.chome .quiz-feedback.correct {  background: rgba(69, 214, 168, 0.1);  border-color: rgba(69, 214, 168, 0.4);  color: #A9EFD6;}.chome .quiz-feedback.wrong {  background: rgba(255, 107, 107, 0.1);  border-color: rgba(255, 107, 107, 0.4);  color: #FFBDBD;}.chome .quiz-nav { color: var(--c-muted); font-size: 0.85rem; }.chome .chat-messages {  background: rgba(3, 8, 20, 0.62);  border: 1px solid var(--c-line);  border-radius: 12px;  padding: 16px;}.chome .chat-bubble {  border-radius: 14px;  font-size: 0.9rem;  padding: 11px 14px;  color: #DCE7FA;}.chome .chat-bubble.assistant {  background: rgba(59, 140, 255, 0.12);  border: 1px solid var(--c-line);  border-top-left-radius: 4px;}.chome .chat-bubble.user {  background: rgba(255, 196, 46, 0.14);  border: 1px solid rgba(255, 196, 46, 0.28);  color: #FFE9B8;  border-top-right-radius: 4px;  margin-left: auto;}.chome .chat-input-area { display: flex; gap: 10px; margin-top: 12px; }.chome .chat-input {  flex: 1;  background: var(--c-bg-color-2);
  border: 1px solid var(--c-line);
  border-radius: 11px;
  padding: 12px 16px;
  color: #fff;
  font-family: inherit;
  font-size: 0.92rem;
}
.chome .chat-input::placeholder {
  color: #6D7F9F;
}
.chome .chat-input:focus {
  outline: 2px solid rgba(255, 196, 46, 0.55);
  border-color: transparent;
}}.chome .chat-input::placeholder { color: #6D7F9F; }.chome .chat-input:focus { outline: 2px solid rgba(255, 196, 46, 0.55); border-color: transparent; }.chome .btn-icon {  border-radius: 11px;  border: 1px solid var(--c-line-strong);  background: rgba(255, 255, 255, 0.05);  color: #EAF1FF;  cursor: pointer;  padding: 0 14px;}.chome .simulator {  display: grid;  grid-template-columns: 260px minmax(0, 1fr);  gap: 20px;}.chome .sim-controls { gap: 14px; color: #DCE7FA; }.chome .sim-group label { color: #9FB2D2; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }.chome .sim-group select,.chome .sim-group input[type="text"],.chome .sim-group input[type="password"] {  background: var(--c-bg-soft);  border: 1px solid var(--c-line);  border-radius: 10px;  color: #EAF1FF;  padding: 9px 12px;  font-family: inherit;  font-size: 0.9rem;}.chome .sim-group input[type="range"] { accent-color: var(--c-gold); }.chome .sim-group .btn-primary,.chome .sim-group .btn-secondary { padding: 9px 14px; font-size: 0.8rem; }.chome #canvas-marker {  position: absolute;  right: 12px;  bottom: 12px;  z-index: 2;  color: var(--c-gold);  font-size: 0.8rem;}.chome .sim-canvas {  border: 1px dashed var(--c-line-strong);  border-radius: 14px;  background-color: rgba(3, 8, 20, 0.62);  background-image:    linear-gradient(rgba(120, 170, 255, 0.07) 1px, transparent 1px),    linear-gradient(90deg, rgba(120, 170, 255, 0.07) 1px, transparent 1px);  background-size: 28px 28px;  min-height: 380px;}.chome #canvas {  display: flex;  flex-wrap: wrap;  align-content: flex-start;  gap: 10px;  padding: 20px;  min-height: 340px;}.chome .sim-status {  background: rgba(5, 11, 24, 0.9);  border: 1px solid var(--c-line);  color: #9FB2D2;  border-radius: 8px;  font-size: 0.72rem;}.chome .sim-metrics {  position: absolute;  top: 14px;  right: 14px;  display: grid;  gap: 3px;  padding: 12px 14px;  border-radius: 12px;  background: rgba(5, 11, 24, 0.88);  border: 1px solid var(--c-line);  font-size: 0.74rem;  color: #9FB2D2;  z-index: 3;}.chome .sim-metrics strong { color: var(--c-gold); }/* ---------- CTA band ---------- */.c-cta {  position: relative;  z-index: 1;  padding: 64px 0 72px;  border-top: 1px solid var(--c-line);}.c-cta-inner {  display: flex;  flex-wrap: wrap;  align-items: center;  justify-content: space-between;  gap: 24px;  padding: 34px 36px;  border-radius: 22px;  border: 1px solid rgba(255, 196, 46, 0.3);  background:    radial-gradient(600px 220px at 8% 0%, rgba(255, 196, 46, 0.16), transparent 70%),    linear-gradient(120deg, rgba(59, 140, 255, 0.1), rgba(255, 255, 255, 0.02));}.c-cta .contact {  display: flex;  flex-wrap: wrap;  gap: 14px;  align-items: center;  justify-content: center;  text-align: center;  color: #D7E4FF;  font-size: 0.9rem;  max-width: 560px;}.c-cta .contact .cta-form {  display: flex;  gap: 8px;  flex-wrap: wrap;}.c-cta .contact .cta-form input,.c-cta .contact .cta-form textarea,.c-cta .contact .cta-form button {  border-radius: 10px;  font-size: 0.9rem;  font-family: inherit;  padding: 10px 12px;}.c-cta .contact .cta-form input,.c-cta .contact .cta-form textarea {  flex: 1 1 100%;  background: rgba(255, 255, 255, 0.06);  border: 1px solid rgba(255, 196, 46, 0.35);  color: #EAF1FF;  outline: none;}.c-cta .contact .cta-form textarea {  min-height: 64px;  resize: vertical;}.c-cta .contact .cta-form button {  background: linear-gradient(140deg, #FFD98A, var(--c-gold));  color: #0A1424;  border: 1px solid transparent;  font-weight: 700;  cursor: pointer;  white-space: nowrap;}.c-cta .contact .cta-form button:hover { background: #FFB53D; }.c-cta .contact .contact-success {  display: none;  flex-direction: column;  align-items: center;  gap: 8px;  padding: 14px 16px;  border-radius: 12px;  background: rgba(69, 214, 168, 0.12);  border: 1px solid rgba(69, 214, 168, 0.4);  color: #A9EFD6;  text-align: center;  width: 100%;}.c-cta .contact .contact-success[hidden] { display: none; }.c-cta .contact .contact-success-icon { font-size: 1.3rem; line-height: 1; }.c-cta .contact .contact-success-text { font-size: 0.85rem; color: #A9EFD6; }.c-cta .contact .contact-success-close {  margin-left: auto;  cursor: pointer;  color: #D7E4FF;  font-size: 1.1rem;  line-height: 1;  transition: color 0.16s;}.c-cta .contact .contact-success-close:hover { color: #fff; }.c-cta h2 {  font-size: clamp(1.4rem, 2.6vw, 1.9rem);  letter-spacing: -0.03em;  margin-bottom: 6px;  color: #fff;}.c-cta p { color: var(--c-muted); font-size: 0.94rem; max-width: 52ch; }

/* ---------- footer ---------- */.chome footer {  position: relative;  z-index: 1;  background: rgba(3, 8, 18, 0.85);  border-top: 1px solid var(--c-line);  color: var(--c-muted);  padding: 46px 0 0;}.chome .footer-top {  display: grid;  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr);  gap: 36px;  padding-bottom: 34px;}.chome .footer-top .logo { color: #fff; margin-bottom: 10px; }.chome .footer-top p { font-size: 0.88rem; max-width: 40ch; color: var(--c-muted); }.chome .footer-links {  display: grid;  grid-template-columns: repeat(3, minmax(0, 1fr));  gap: 24px;}.chome .footer-links h4 {  font-size: 0.72rem;  letter-spacing: 0.16em;  text-transform: uppercase;  color: var(--c-gold);  margin-bottom: 12px;  font-weight: 700;}.chome .footer-links a {  display: block;  color: #B9C8E4;  font-size: 0.87rem;  padding: 4px 0;}.chome .footer-links a:hover { color: #fff; }.chome .footer-bottom {  border-top: 1px solid var(--c-line);  padding: 18px 0;  font-size: 0.78rem;  color: #6D7F9F;}.chome .footer-bottom .w { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }/* ---------- responsive ---------- */@media (max-width: 1000px) {  .c-hero-grid { grid-template-columns: 1fr; gap: 38px; }  .c-poster { max-width: 460px; }  .chome .footer-top { grid-template-columns: 1fr; }  .chome .simulator { grid-template-columns: 1fr; }}@media (max-width: 860px) {  .chome .nav-links { display: none; }  .c-strip .w { justify-content: center; }  .c-strip .c-strip-right { display: none; }  .c-stats-grid { grid-template-columns: 1fr 1fr; }  .c-stat:nth-child(2) { border-right: 0; }  .c-stat:nth-child(1),  .c-stat:nth-child(2) { border-bottom: 1px solid var(--c-line); }}@media (max-width: 560px) {  .c-hero { padding: 44px 0 32px; }  .c-nav-ghost { display: none; }  .c-cta-inner { padding: 26px 22px; }  .chome .lesson-card { padding: 20px 18px; }  .chome .quiz-card,  .chome .chat-box,  .chome .simulator { padding: 20px; }}@media (prefers-reduced-motion: reduce) {  .chome * { transition: none !important; }}/* ---------- track node (System Design, and future tracks) ---------- */.chome .c-track {  position: relative;  z-index: 1;  border-top: 1px solid var(--c-line);}.chome .c-track-head {  max-width: 820px;  padding: 58px 0 12px;}.c-track-title {  position: relative;  display: inline-block;  font-size: clamp(1.9rem, 4.2vw, 2.75rem);  font-weight: 850;  letter-spacing: -0.04em;  line-height: 1.08;  color: #fff;  margin: 10px 0 14px;  padding-bottom: 14px;}.c-track-title::after {  content: "";  position: absolute;  left: 0;  bottom: 0;  width: 64px;  height: 3px;  border-radius: 3px;  background: linear-gradient(90deg, var(--c-gold), rgba(255, 196, 46, 0));}.c-track-desc {  color: #B7C6E2;  font-size: 1rem;  max-width: 70ch;}.c-track-meta {  display: flex;  flex-wrap: wrap;  gap: 9px;  margin-top: 20px;  list-style: none;}.c-track-meta li {  font-size: 0.72rem;  letter-spacing: 0.1em;  text-transform: uppercase;  font-weight: 600;  color: #A8B9D6;  padding: 6px 13px;  border-radius: 999px;  border: 1px solid var(--c-line);  background: rgba(255, 255, 255, 0.03);}.c-track-empty {  display: grid;  gap: 4px;  margin: 10px 0 46px;  padding: 26px;  border: 1px dashed var(--c-line-strong);  border-radius: 16px;  background: rgba(255, 255, 255, 0.02);}.c-track-empty strong { color: #fff; font-size: 0.98rem; }.c-track-empty span { color: var(--c-muted); font-size: 0.88rem; }/* anchors clear the sticky nav */.chome .c-track,.chome .section,.chome .c-tools,.chome .c-skills { scroll-margin-top: 92px; }