/* ═══════════════════════════════════════════════════════════
   Zilliant — shared styles for program track, level & quiz pages.
   Base tokens / nav / buttons / FAQ / CTA / footer are lifted from
   ai-engineer.html; the apply modal from index.html, so these pages
   match the existing site exactly. Page components follow below.
═══════════════════════════════════════════════════════════ */
/* ── RESET & TOKENS ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:          #040412;
  --surface:      rgba(255,255,255,0.035);
  --surface-hov:  rgba(255,255,255,0.06);
  --border:       rgba(255,255,255,0.08);
  --border-hov:   rgba(255,255,255,0.18);
  --text:         #ffffff;
  --text-2:       rgba(255,255,255,0.65);
  --text-3:       rgba(255,255,255,0.62);
  --violet:       #7c3aed;
  --violet-deep:  #591ECB;
  --violet-mid:   #8b5cf6;
  --violet-light: #a78bfa;
  --violet-pale:  #c4b5fd;
  --cyan:         #22d3ee;
  --r-card:       20px;
  --r-btn:        14px;
  --r-pill:       999px;
  --max-w:        1120px;
  --section-v:    7rem;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--ink);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── KEYFRAMES ── */
@keyframes orbBreath {
  from { transform: scale(1) translate(0,0); }
  to   { transform: scale(1.12) translate(15px,-20px); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.5); }
  50%      { box-shadow: 0 0 0 12px rgba(139,92,246,0); }
}
@keyframes floatA {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}
@keyframes floatB {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-5px); }
}
@keyframes floatC {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-11px); }
}
@keyframes dashMove {
  to { stroke-dashoffset: -40; }
}
@keyframes glowPulse {
  0%,100% { opacity:0.6; filter:blur(30px); }
  50%      { opacity:1;   filter:blur(20px); }
}
@keyframes spin {
  to { transform:rotate(360deg); }
}
@keyframes slideDown {
  from { opacity:0; transform:translateY(-8px); max-height:0; }
  to   { opacity:1; transform:translateY(0);   max-height:600px; }
}

/* ── FADE-UP REVEAL ── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.is-visible { opacity:1; transform:translateY(0); }
.stagger-1 { transition-delay:0.1s; }
.stagger-2 { transition-delay:0.2s; }
.stagger-3 { transition-delay:0.3s; }
.stagger-4 { transition-delay:0.4s; }
.stagger-5 { transition-delay:0.5s; }

/* ── LAYOUT UTILS ── */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 3rem;
}
.section-pad { padding: var(--section-v) 0; }

/* ─────────────────────────────────────────────────────────
   NAV
───────────────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem;
  background: rgba(4,4,18,0.45);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.055);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo img {
  width: 30px; height: 30px;
  border-radius: 7px;
}

.nav-logo-text {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fff;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
}

.nav-links a {
  color: rgba(255,255,255,0.58);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  letter-spacing: -0.005em;
}

.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.065); }

.has-chevron::after {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.45;
  transition: transform 0.2s ease;
}

/* ── Programs dropdown ── */
.nav-item-programs { position: relative; }

.nav-item-programs::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -24px;
  right: -24px;
  height: 20px;
}

.nav-item-programs:hover .has-chevron::after,
.nav-item-programs:focus-within .has-chevron::after {
  transform: rotate(-135deg) translateY(-2px);
  opacity: 0.7;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 660px;
  background: rgba(8,4,22,0.96);
  border: 1px solid rgba(137,80,255,0.18);
  border-radius: 22px;
  padding: 0;
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset, 0 1px 0 rgba(255,255,255,0.07) inset;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease 0.08s, transform 0.26s cubic-bezier(0.22,1,0.36,1) 0.08s;
  z-index: 200;
  overflow: hidden;
}

.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 11px; height: 11px;
  background: rgba(8,4,22,0.96);
  border-left: 1px solid rgba(137,80,255,0.18);
  border-top: 1px solid rgba(137,80,255,0.18);
}

.nav-item-programs:hover .nav-dropdown,
.nav-item-programs:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.22,1,0.36,1);
}

.nav-dd-header {
  padding: 1rem 1.25rem 0.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-dd-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.22);
  text-transform: uppercase;
}

.nav-dd-count {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(137,80,255,0.7);
  background: rgba(137,80,255,0.1);
  border: 1px solid rgba(137,80,255,0.2);
  border-radius: 20px;
  padding: 1px 8px;
  letter-spacing: 0.03em;
}

.nav-dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 0 0.6rem 0.6rem;
}

.nav-dd-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.75rem;
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.16s;
  position: relative;
  cursor: pointer;
}

.nav-dd-item:hover { background: rgba(255,255,255,0.038); }

.nav-dd-icon {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: rgba(89,30,203,0.15);
  border: 1px solid rgba(137,80,255,0.22);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s, box-shadow 0.18s;
}

.nav-dd-icon svg { width: 18px; height: 18px; color: #a78bfa; }

.nav-dd-item:hover .nav-dd-icon {
  background: rgba(89,30,203,0.28);
  box-shadow: 0 0 14px rgba(89,30,203,0.3);
}

.nav-dd-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.nav-dd-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-dd-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.87);
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.nav-dd-badge {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a78bfa;
  background: rgba(137,80,255,0.14);
  border: 1px solid rgba(137,80,255,0.28);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
}
.nav-dd-upcoming { font-size:0.62rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:#f59e0b; background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.3); border-radius:4px; padding:1px 5px; line-height:1.4; }
.footer-upcoming-tag { font-size:0.58rem; font-weight:800; color:#f59e0b; background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.28); border-radius:3px; padding:1px 4px; vertical-align:middle; margin-left:4px; }

.nav-dd-desc {
  font-size: 0.64rem;
  color: rgba(255,255,255,0.3);
  font-weight: 400;
  white-space: nowrap;
}

.nav-dropdown-footer {
  margin: 0 0.6rem 0.6rem;
  padding: 0.75rem 0.85rem;
  background: rgba(137,80,255,0.06);
  border: 1px solid rgba(137,80,255,0.14);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-dd-footer-left { display: flex; flex-direction: column; gap: 1px; }

.nav-dd-footer-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
}

.nav-dd-footer-sub {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.28);
}

.nav-dd-all {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #591ECB 0%, #8950ff 100%);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.42rem 0.9rem;
  border-radius: 8px;
  transition: opacity 0.15s, transform 0.15s;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.1);
}

.nav-dd-all:hover { opacity: 0.88; transform: translateY(-1px); }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.44rem 1.1rem;
  background: linear-gradient(135deg, #591ECB 0%, #8950ff 100%);
  color: #fff;
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: 0.8rem;
  text-decoration: none;
  letter-spacing: -0.01em;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 16px rgba(89,30,203,0.4);
  transition: box-shadow 0.25s, transform 0.18s;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(89,30,203,0.6), 0 6px 18px rgba(89,30,203,0.35); }

/* ─────────────────────────────────────────────────────────
   HAMBURGER & MOBILE MENU
───────────────────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-hamburger span {
  display: block;
  width: 18px; height: 1.5px;
  background: rgba(255,255,255,0.82);
  border-radius: 999px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  top: 62px; left: 0; right: 0; bottom: 0;
  z-index: 190;
  background: rgba(4,4,18,0.97);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
  flex-direction: column;
  padding: 1.5rem 1.5rem 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  overflow-y: auto;
}

.mobile-menu.open { display: flex; }

.mobile-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mobile-links a {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  letter-spacing: -0.01em;
  transition: color 0.15s;
  min-height: 52px;
}

.mobile-links a:hover { color: #fff; }
.mobile-programs-item { border-bottom: 1px solid rgba(255,255,255,0.06); }
.mobile-programs-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; color: rgba(255,255,255,0.78); font-size: 1.05rem; font-weight: 600; padding: 1rem 0; cursor: pointer; font-family: inherit; min-height: 52px; letter-spacing: -0.01em; }
.mobile-programs-toggle:hover, .mobile-programs-toggle[aria-expanded="true"] { color: #fff; }
.mobile-programs-chevron { transition: transform 0.25s ease; flex-shrink: 0; color: rgba(255,255,255,0.4); }
.mobile-programs-toggle[aria-expanded="true"] .mobile-programs-chevron { transform: rotate(180deg); color: #a78bfa; }
.mobile-programs-list { list-style: none; display: none; padding: 0.25rem 0 0.5rem; }
.mobile-programs-list.open { display: block; }
.mobile-programs-list li a { font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,0.55); padding: 0.6rem 0.85rem; border-bottom: none; border-radius: 10px; min-height: 44px; transition: background 0.15s, color 0.15s; }
.mobile-programs-list li a:hover { background: rgba(255,255,255,0.06); color: #fff; }

.mobile-menu .mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 1.75rem;
  padding: 0.9rem 1.5rem;
  background: linear-gradient(135deg, #591ECB 0%, #8950ff 100%);
  color: #fff;
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  letter-spacing: -0.01em;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 20px rgba(89,30,203,0.45);
  transition: box-shadow 0.25s, transform 0.18s;
  min-height: 52px;
  position: relative;
  overflow: hidden;
}

.mobile-menu .mobile-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.mobile-menu .mobile-cta:hover {
  box-shadow: 0 0 28px rgba(89,30,203,0.65), 0 8px 24px rgba(89,30,203,0.35);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  nav { padding: 0 1.25rem; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}

/* ── BADGE PILL ── */
.badge-pill {
  display: inline-flex; align-items:center; gap:6px;
  background: rgba(124,58,237,0.15);
  border: 1px solid rgba(124,58,237,0.35);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.9rem;
  font-size:0.72rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  color: var(--violet-light);
}
.badge-pill::before {
  content:''; display:block;
  width:6px; height:6px; border-radius:50%;
  background:var(--violet-light);
  animation: pulse 2s infinite;
}

/* ── SECTION LABELS ── */
.section-eyebrow {
  font-size:0.68rem; font-weight:800;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--violet-light);
  margin-bottom:0.75rem;
}
.section-title {
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.04em;
  color:#fff;
}
.grad-text {
  background:linear-gradient(135deg, var(--violet) 0%, var(--violet-light) 50%, #c084fc 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.highlight { color:#a78bfa; font-weight:600; }
.section-title.xl { font-size:clamp(2.2rem,4.5vw,3.2rem); }
.section-title.lg { font-size:clamp(1.6rem,3vw,2.4rem); }
.section-sub {
  color:var(--text-2);
  line-height:1.7;
  font-size:0.92rem;
  max-width:600px;
  margin:0 auto;
  text-align:center;
}

/* ── BUTTONS ── */
.btn-fill {
  display:inline-flex; align-items:center; gap:10px;
  padding:0.8rem 1.6rem;
  background:linear-gradient(135deg,#591ECB 0%,#8950ff 100%);
  color:#fff; border-radius:var(--r-btn);
  font-weight:700; font-size:0.875rem;
  text-decoration:none; letter-spacing:-0.01em;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 4px 20px rgba(89,30,203,0.45);
  transition:box-shadow 0.25s, transform 0.18s;
  position:relative; overflow:hidden; cursor:pointer;
}
.btn-fill::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.08) 0%,transparent 60%);
  pointer-events:none;
}
.btn-fill:hover { transform:translateY(-2px); box-shadow:0 0 28px rgba(89,30,203,0.65),0 8px 32px rgba(89,30,203,0.35); }
.btn-fill .arrow-icon-wrap {
  width:24px; height:24px;
  background:rgba(255,255,255,0.15); border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; border:1px solid rgba(255,255,255,0.18);
}

.btn-glass {
  display:inline-flex; align-items:center; gap:9px;
  padding:0.8rem 1.5rem;
  border:1px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.88); border-radius:var(--r-btn);
  font-weight:600; font-size:0.875rem;
  text-decoration:none;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(12px);
  letter-spacing:-0.01em;
  transition:background 0.2s,border-color 0.2s,color 0.2s,transform 0.18s;
  cursor:pointer;
}
.btn-glass:hover { background:rgba(255,255,255,0.11); border-color:rgba(255,255,255,0.32); color:#fff; transform:translateY(-2px); }

/* keep old names as aliases for other sections */
.btn-primary { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#591ECB 0%,#8b5cf6 100%); color:#fff; text-decoration:none; padding:0.8rem 1.8rem; border-radius:var(--r-btn); font-weight:700; font-size:0.95rem; border:none; cursor:pointer; box-shadow:0 6px 24px rgba(89,30,203,0.45); transition:transform 0.2s,box-shadow 0.2s; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(89,30,203,0.55); }
.btn-ghost { display:inline-flex; align-items:center; gap:8px; background:transparent; color:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,0.2); padding:0.8rem 1.8rem; border-radius:var(--r-btn); font-weight:600; font-size:0.95rem; text-decoration:none; cursor:pointer; transition:border-color 0.2s,color 0.2s,background 0.2s; }
.btn-ghost:hover { border-color:rgba(255,255,255,0.45); color:#fff; background:rgba(255,255,255,0.05); }

/* ── ORB BACKGROUND UTILITY ── */
.orb {
  position:absolute; border-radius:50%;
  filter:blur(80px); pointer-events:none;
}
/* ═══════════════════════════════════════════════════════════
   SECTION 11 — FAQ
═══════════════════════════════════════════════════════════ */
#faq {
  position:relative; padding:var(--section-v) 0;
  background:#0D0620; overflow:hidden;
}
#faq::before {
  content:''; position:absolute;
  width:700px; height:700px;
  top:50%; left:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(124,58,237,0.08) 0%, transparent 65%);
  pointer-events:none;
}
.faq-header { text-align:center; margin-bottom:3.5rem; }
.faq-list {
  max-width:780px; margin:0 auto;
  display:flex; flex-direction:column; gap:0.75rem;
}
.faq-item {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  transition:border-color 0.2s;
}
.faq-item.open { border-color:rgba(124,58,237,0.35); }
.faq-q {
  width:100%; background:none; border:none;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.25rem 1.5rem;
  cursor:pointer; text-align:left;
  gap:1rem;
  transition:background 0.2s;
}
.faq-q:hover { background:rgba(255,255,255,0.025); }
.faq-q-text {
  font-size:0.92rem; font-weight:600;
  color:rgba(255,255,255,0.88);
  line-height:1.45;
}
.faq-chevron {
  width:20px; height:20px; flex-shrink:0;
  border-right:2px solid rgba(255,255,255,0.35);
  border-bottom:2px solid rgba(255,255,255,0.35);
  transform:rotate(45deg);
  transition:transform 0.3s ease, border-color 0.2s;
  margin-top:-4px;
}
.faq-item.open .faq-chevron {
  transform:rotate(-135deg);
  border-color:var(--violet-light);
  margin-top:4px;
}
.faq-a {
  max-height:0; overflow:hidden;
  transition:max-height 0.4s ease, padding 0.3s ease;
  padding:0 1.5rem;
}
.faq-item.open .faq-a {
  max-height:300px;
  padding:0 1.5rem 1.25rem;
}
.faq-a p {
  font-size:0.88rem; line-height:1.75;
  color:var(--text-2);
  padding-top:0.25rem;
  border-top:1px solid rgba(255,255,255,0.06);
}

/* ═══════════════════════════════════════════════════════════
   SECTION 12 — FINAL CTA
═══════════════════════════════════════════════════════════ */
#final-cta {
  position:relative; padding:7rem 0;
  background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(89,30,203,0.35) 0%, var(--ink) 70%);
  text-align:center; overflow:hidden;
}
.cta-orb-1 {
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(89,30,203,0.4) 0%, transparent 70%);
  top:-100px; left:50%; transform:translateX(-50%);
  animation:orbBreath 10s ease-in-out infinite alternate;
}
.cta-orb-2 {
  width:300px; height:300px;
  background:radial-gradient(circle, rgba(34,211,238,0.1) 0%, transparent 70%);
  bottom:0; right:10%;
  animation:orbBreath 8s ease-in-out infinite alternate;
  animation-delay:-4s;
}
.cta-inner { position:relative; z-index:2; }
.cta-h2 {
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:900; color:#fff;
  margin-bottom:1.5rem;
}
.cta-tagline {
  font-size:1.2rem; line-height:2;
  color:var(--text-2); margin-bottom:2.5rem;
}
.cta-tagline span {
  display:block;
  background:linear-gradient(90deg,var(--violet-light),#fff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.cta-btns { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.btn-primary.lg { padding:1rem 2.5rem; font-size:1.05rem; border-radius:16px; }
.btn-ghost.lg   { padding:1rem 2.5rem; font-size:1.05rem; border-radius:16px; }
.cta-batch {
  margin-top:2rem;
  font-size:0.82rem; font-weight:600;
  color:var(--text-3); letter-spacing:0.05em;
}
.cta-batch strong { color:var(--violet-light); }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.site-footer {
  background: #02010b;
  padding: 4rem 3rem 2rem;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,0.5), transparent);
}
.footer-inner { max-width: var(--max-w); margin: 0 auto; }
.footer-top {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 4rem;
  margin-bottom: 3rem;
}
.footer-logo-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  margin-bottom: 1rem;
}
.footer-logo-img { width: 28px; height: 28px; }
.footer-logo-text {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
}
.footer-tagline {
  font-size: 0.8rem;
  color: #ffffff;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}
.footer-socials { display: flex; gap: 0.75rem; }
.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #ffffff;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.footer-social:hover { background: rgba(255,255,255,0.1); color: #fff; }
.footer-links-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.footer-col-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 1rem;
}
.footer-col-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer-col-links a {
  font-size: 0.82rem;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col-links a:hover { color: #fff; }
.footer-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1.25rem;
  padding: 0.6rem 1.25rem;
  background: linear-gradient(135deg, #591ECB 0%, #8950ff 100%);
  color: #fff;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 16px rgba(89,30,203,0.4);
  transition: box-shadow 0.25s, transform 0.18s;
  position: relative;
  overflow: hidden;
}
.footer-apply-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.footer-apply-btn:hover {
  box-shadow: 0 0 22px rgba(89,30,203,0.6), 0 6px 20px rgba(89,30,203,0.3);
  transform: translateY(-1px);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.footer-copy { font-size: 0.75rem; color: #ffffff; }
.footer-legal { display: flex; gap: 1.25rem; justify-content: center; }
.footer-legal a {
  font-size: 0.75rem;
  color: #ffffff;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
}
.footer-legal a:hover { color: rgba(255,255,255,0.7); }
@media (max-width: 768px) {
  .site-footer { padding: 3rem 1.5rem 2rem; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-links-group { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
}
@media (max-width: 480px) {
  .footer-links-group { grid-template-columns: 1fr; }
}
/* legacy footer-links — keep for safety */
.footer-links {
  display:flex; align-items:center; gap:1.5rem;
}
.footer-links a {
  font-size:0.78rem; color:rgba(255,255,255,0.4);
  text-decoration:none;
  transition:color 0.15s;
}
.footer-links a:hover { color:rgba(255,255,255,0.8); }
/* ─────────────────────────────────────────────────────────
   MODALS
───────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(4,4,18,0.88);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal-box {
  position: relative;
  background: #0d0a1a;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 2.5rem;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  animation: modalIn 0.3s cubic-bezier(0.22,1,0.36,1);
}
.modal-box-wide { max-width: 720px; }
@keyframes modalIn {
  from { transform: translateY(24px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.modal-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.modal-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.4rem;
}
.modal-subtitle {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.72);
  margin-bottom: 1.75rem;
}
.mf-group { margin-bottom: 1.1rem; }
.mf-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 0.45rem;
}
.mf-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.mf-input:focus {
  border-color: rgba(139,92,246,0.55);
  background: rgba(255,255,255,0.07);
}
.mf-input::placeholder { color: rgba(255,255,255,0.25); }
.mf-select { cursor: pointer; }
.mf-select option { background: #0d0a1a; color: #fff; }
.mf-role-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.mf-role-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 0.75rem; background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.1); border-radius: 12px; color: rgba(255,255,255,0.6); font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.mf-role-btn:hover { border-color: rgba(139,92,246,0.4); color: #fff; background: rgba(139,92,246,0.08); }
.mf-role-btn.selected { border-color: #7c3aed; background: rgba(124,58,237,0.18); color: #fff; }
.mf-submit {
  width: 100%;
  padding: 0.9rem;
  background: linear-gradient(135deg, #591ECB 0%, #8950ff 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-top: 0.5rem;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 20px rgba(89,30,203,0.45);
  transition: box-shadow 0.25s, transform 0.18s;
  position: relative;
  overflow: hidden;
}
.mf-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.mf-submit:hover {
  box-shadow: 0 0 28px rgba(89,30,203,0.65), 0 8px 24px rgba(89,30,203,0.35);
  transform: translateY(-1px);
}
.mf-note {
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.62);
  margin-top: 0.75rem;
}
.modal-success { text-align: center; padding: 1rem 0; }
.success-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #22d3ee);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin: 0 auto 1.25rem;
}
.modal-success h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.5rem; }
.modal-success p { color: rgba(255,255,255,0.55); font-size: 0.85rem; margin-bottom: 1.5rem; }

/* ═══════════════════════════════════════════════════════════
   PROGRAM PAGES — components
═══════════════════════════════════════════════════════════ */
body.track-ai-engineering { --accent:#a78bfa; --accent-rgb:167,139,250; }
body.track-ai-web-studio  { --accent:#60a5fa; --accent-rgb:96,165,250; }
body { --accent:#a78bfa; --accent-rgb:167,139,250; }
main { position:relative; z-index:1; }
section[id] { scroll-margin-top:120px; }
.sec { padding:4.5rem 0; position:relative; }
.sec + .sec { padding-top:1.5rem; }
.sec-head { text-align:center; margin-bottom:3rem; }
.sec-head .section-title { margin-bottom:0.9rem; }
.muted { color:var(--text-2); }

/* ── Hero (track + level) ── */
.p-hero {
  position:relative; overflow:hidden;
  padding:9.5rem 0 5rem;
  background-color:var(--ink);
}
.p-hero-bg {
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; opacity:0.9;
}
.p-hero-bg::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(4,4,18,0.94) 0%, rgba(4,4,18,0.78) 42%, rgba(4,4,18,0.25) 75%, rgba(4,4,18,0.1) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 30%);
}
.p-hero-bg.ai-engineering { background-image:image-set(url('../images/backgrounds/aiengineertheme.webp') type('image/webp'), url('../images/backgrounds/aiengineertheme.png') type('image/png')); }
.p-hero-bg.ai-web-studio  { background-image:image-set(url('../images/backgrounds/fullstacktheme.webp') type('image/webp'), url('../images/backgrounds/fullstacktheme.png') type('image/png')); }
.p-hero-bg.soft { opacity:0.45; }
.p-hero .wrap { position:relative; z-index:1; }
.p-hero-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,0.85fr); gap:3rem; align-items:end; }
.p-hero-grid.single { grid-template-columns:minmax(0,1fr); max-width:720px; }
.crumbs { display:flex; flex-wrap:wrap; gap:0.45rem; align-items:center; font-size:0.78rem; color:var(--text-3); margin-bottom:1.4rem; }
.crumbs a { color:var(--text-2); text-decoration:none; }
.crumbs a:hover { color:#fff; }
.crumbs span[aria-hidden] { opacity:0.5; }
.p-eyebrow { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.72rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin:1.1rem 0 0.9rem; }
.p-h1 { font-size:clamp(2.3rem,5vw,3.8rem); font-weight:800; line-height:1.08; letter-spacing:-0.045em; margin-bottom:1.2rem; }
.p-lead { font-size:1.05rem; line-height:1.7; color:rgba(255,255,255,0.78); max-width:600px; margin-bottom:1.8rem; }
.p-quote { border-left:3px solid var(--accent); padding:0.2rem 0 0.2rem 1rem; font-style:italic; }
.p-actions { display:flex; flex-wrap:wrap; gap:0.8rem; }
.p-stats { display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:2rem; }
.p-stat { background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:var(--r-pill); padding:0.45rem 0.95rem; font-size:0.8rem; font-weight:600; color:rgba(255,255,255,0.82); backdrop-filter:blur(10px); }
.p-stat strong { color:#fff; font-weight:800; }

/* Fee card in hero */
.fee-card {
  background:linear-gradient(160deg, rgba(20,12,48,0.88), rgba(8,6,24,0.92));
  border:1px solid rgba(137,80,255,0.25); border-radius:22px; padding:1.6rem;
  box-shadow:0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter:blur(20px);
}
.fee-card h3 { font-size:0.72rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:1rem; }
.fee-rows { display:grid; gap:0.6rem; margin-bottom:1.2rem; }
.fee-row { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:0.85rem 1rem; border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid var(--border); }
.fee-row.student { background:rgba(var(--accent-rgb),0.1); border-color:rgba(var(--accent-rgb),0.35); }
.fee-row span { font-size:0.82rem; color:var(--text-2); font-weight:600; }
.fee-row strong { font-size:1.35rem; font-weight:800; letter-spacing:-0.02em; }
.fee-meta { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-bottom:1.2rem; }
.fee-meta div { text-align:center; padding:0.65rem 0.4rem; border-radius:12px; background:rgba(255,255,255,0.03); border:1px solid var(--border); }
.fee-meta b { display:block; font-size:1.05rem; font-weight:800; }
.fee-meta small { font-size:0.7rem; color:var(--text-3); }
.fee-card .btn-fill { width:100%; justify-content:center; }
.fee-card .link-check { display:block; text-align:center; margin-top:0.85rem; font-size:0.8rem; color:var(--text-2); text-decoration:none; }
.fee-card .link-check:hover { color:#fff; }

/* ── Sticky level sub-nav ── */
.subnav { position:sticky; top:62px; z-index:150; background:rgba(4,4,18,0.88); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid var(--border); }
.subnav .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:56px; }
.level-switch { display:flex; gap:0.35rem; padding:0.25rem; border:1px solid var(--border); border-radius:var(--r-pill); background:rgba(255,255,255,0.03); }
.level-switch a { font-size:0.78rem; font-weight:700; color:var(--text-2); text-decoration:none; padding:0.4rem 0.85rem; border-radius:var(--r-pill); white-space:nowrap; transition:background .15s,color .15s; }
.level-switch a:hover { color:#fff; }
.level-switch a[aria-current="page"] { background:linear-gradient(135deg,#591ECB,#8950ff); color:#fff; }
.subnav-links { display:flex; gap:1.3rem; }
.subnav-links a { font-size:0.8rem; font-weight:600; color:var(--text-2); text-decoration:none; }
.subnav-links a:hover { color:#fff; }

/* ── Generic glass card ── */
.g-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:1.6rem; transition:border-color .2s, background .2s, transform .2s; }
.g-card:hover { border-color:var(--border-hov); }

/* ── Level ladder (track page) ── */
.ladder { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; position:relative; }
.ladder::before { content:''; position:absolute; top:44px; left:12%; right:12%; height:2px; background:linear-gradient(90deg, rgba(var(--accent-rgb),0.1), rgba(var(--accent-rgb),0.7), rgba(var(--accent-rgb),0.1)); z-index:0; }
.lv-card { position:relative; z-index:1; display:flex; flex-direction:column; gap:1rem; background:linear-gradient(170deg, rgba(20,12,48,0.7), rgba(6,5,20,0.9)); border:1px solid rgba(255,255,255,0.09); border-radius:22px; padding:1.6rem; transition:transform .25s, border-color .25s, box-shadow .25s; }
.lv-card:hover { transform:translateY(-4px); border-color:rgba(var(--accent-rgb),0.45); box-shadow:0 20px 60px rgba(89,30,203,0.25); }
.lv-num { width:56px; height:56px; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(135deg,#591ECB,#8950ff); box-shadow:0 0 0 6px rgba(4,4,18,1), 0 8px 24px rgba(89,30,203,0.5); font-weight:800; line-height:1; }
.lv-num small { font-size:0.55rem; letter-spacing:0.1em; opacity:0.8; }
.lv-num b { font-size:1.3rem; }
.lv-stage { font-size:0.7rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); }
.lv-card h3 { font-size:1.2rem; font-weight:800; letter-spacing:-0.02em; line-height:1.3; }
.lv-card p { font-size:0.88rem; line-height:1.65; color:var(--text-2); }
.lv-facts { display:flex; flex-wrap:wrap; gap:0.4rem; }
.lv-facts span { font-size:0.72rem; font-weight:700; padding:0.3rem 0.65rem; border-radius:var(--r-pill); background:rgba(255,255,255,0.05); border:1px solid var(--border); color:rgba(255,255,255,0.8); }
.lv-fee { display:flex; justify-content:space-between; align-items:baseline; padding-top:1rem; border-top:1px solid var(--border); margin-top:auto; }
.lv-fee div { display:flex; flex-direction:column; }
.lv-fee small { font-size:0.68rem; color:var(--text-3); text-transform:uppercase; letter-spacing:0.08em; font-weight:700; }
.lv-fee b { font-size:1.05rem; font-weight:800; }
.lv-fee .stu b { color:var(--accent); }
.lv-actions { display:flex; gap:0.5rem; }
.lv-actions a { flex:1; justify-content:center; font-size:0.8rem; padding:0.7rem 0.8rem; }

/* ── Compare table ── */
.compare { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; background:var(--surface); }
.compare th, .compare td { padding:1rem 1.1rem; text-align:left; vertical-align:top; font-size:0.86rem; line-height:1.55; border-bottom:1px solid var(--border); }
.compare thead th { font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); background:rgba(255,255,255,0.03); }
.compare tbody th { color:var(--text-3); font-weight:700; font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom:none; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── Method (teaching model) ── */
.method { display:flex; flex-wrap:wrap; justify-content:center; gap:0.55rem; counter-reset:step; }
.method li { list-style:none; counter-increment:step; display:flex; align-items:center; gap:0.55rem; padding:0.6rem 1rem 0.6rem 0.6rem; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border); font-size:0.85rem; font-weight:600; text-transform:capitalize; }
.method li::before { content:counter(step); width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:800; background:rgba(var(--accent-rgb),0.16); color:var(--accent); border:1px solid rgba(var(--accent-rgb),0.35); }
.philosophy { max-width:780px; margin:2.5rem auto 0; display:flex; gap:1rem; align-items:flex-start; padding:1.4rem 1.6rem; border-radius:var(--r-card); background:linear-gradient(135deg, rgba(89,30,203,0.18), rgba(34,211,238,0.05)); border:1px solid rgba(137,80,255,0.25); }
.philosophy .ico { flex-shrink:0; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(137,80,255,0.2); color:var(--violet-pale); }
.philosophy h4 { font-size:0.95rem; font-weight:800; margin-bottom:0.3rem; }
.philosophy p { font-size:0.88rem; line-height:1.65; color:var(--text-2); }

/* ── Maturity (AI Web Studio) ── */
.maturity { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.maturity .g-card h4 { font-size:0.7rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:0.4rem; }
.maturity .g-card h5 { font-size:1.05rem; font-weight:800; margin-bottom:0.7rem; }
.maturity .g-card p { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.78rem; line-height:1.6; color:rgba(255,255,255,0.72); background:rgba(0,0,0,0.3); border:1px solid var(--border); border-radius:12px; padding:0.8rem; }

/* ── At a glance + stack ── */
.glance { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:3rem; }
.glance div { text-align:center; padding:1.3rem 0.8rem; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--border); }
.glance b { display:block; font-size:1.9rem; font-weight:800; letter-spacing:-0.03em; background:linear-gradient(135deg,#fff,var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.glance small { font-size:0.78rem; color:var(--text-2); font-weight:600; }
.stack-title { text-align:center; font-size:0.72rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:1rem; }
.stack { display:flex; flex-wrap:wrap; justify-content:center; gap:0.6rem; }
.stack-chip { display:inline-flex; align-items:center; gap:0.55rem; padding:0.5rem 0.95rem 0.5rem 0.5rem; border-radius:14px; background:rgba(10,6,32,0.85); border:1px solid rgba(255,255,255,0.1); font-size:0.82rem; font-weight:700; }
.stack-chip svg { width:26px; height:26px; flex-shrink:0; }
.stack-chip.concept { background:transparent; border-style:dashed; color:rgba(255,255,255,0.75); }
.stack-chip.concept svg { color:var(--accent); }
.stack-note { text-align:center; font-size:0.74rem; color:var(--text-3); margin-top:0.9rem; }

/* ── Curriculum accordion ── */
.curr-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:2rem; align-items:start; }
.week-index { position:sticky; top:140px; display:flex; flex-direction:column; gap:0.3rem; }
.week-index a { display:flex; gap:0.6rem; align-items:center; padding:0.55rem 0.75rem; border-radius:12px; color:var(--text-2); text-decoration:none; font-size:0.8rem; font-weight:600; border:1px solid transparent; }
.week-index a b { font-size:0.68rem; color:var(--accent); min-width:44px; letter-spacing:0.04em; }
.week-index a:hover, .week-index a.active { background:var(--surface); border-color:var(--border); color:#fff; }
.curr-tools { display:flex; justify-content:flex-end; gap:0.5rem; margin-bottom:0.8rem; }
.curr-tools button { background:none; border:1px solid var(--border); color:var(--text-2); font:inherit; font-size:0.76rem; font-weight:600; padding:0.4rem 0.8rem; border-radius:var(--r-pill); cursor:pointer; }
.curr-tools button:hover { color:#fff; border-color:var(--border-hov); }
.week { border:1px solid var(--border); border-radius:18px; background:var(--surface); margin-bottom:0.75rem; overflow:hidden; transition:border-color .2s; scroll-margin-top:130px; }
.week[open] { border-color:rgba(var(--accent-rgb),0.35); background:rgba(255,255,255,0.045); }
.week summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1rem; align-items:center; padding:1.1rem 1.25rem; }
.week summary::-webkit-details-marker { display:none; }
.wk-num { font-size:0.68rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); background:rgba(var(--accent-rgb),0.12); border:1px solid rgba(var(--accent-rgb),0.3); border-radius:10px; padding:0.45rem 0.6rem; text-align:center; line-height:1.2; }
.wk-num span { display:block; font-size:1.05rem; color:#fff; }
.wk-title { font-size:1rem; font-weight:800; letter-spacing:-0.015em; }
.wk-days { font-size:0.75rem; color:var(--text-3); margin-top:0.2rem; display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; }
.wk-tag { font-size:0.62rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; padding:0.15rem 0.5rem; border-radius:6px; }
.wk-tag.mini { color:#fbbf24; background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.3); }
.wk-tag.cap  { color:#34d399; background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.3); }
.wk-chev { width:30px; height:30px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-2); transition:transform .25s; }
.week[open] .wk-chev { transform:rotate(180deg); color:var(--accent); }
.wk-body { padding:0 1.25rem 1.25rem; }
.wk-goal { font-size:0.88rem; color:var(--text-2); line-height:1.65; padding:0.9rem 1rem; border-radius:12px; background:rgba(0,0,0,0.22); margin-bottom:1rem; }
.wk-goal b { color:#fff; }
.day-list { list-style:none; display:grid; gap:0.45rem; }
.day { display:grid; grid-template-columns:62px minmax(0,1fr); gap:0.9rem; align-items:start; padding:0.7rem 0.8rem; border-radius:12px; border:1px solid transparent; }
.day:hover { background:rgba(255,255,255,0.03); border-color:var(--border); }
.day-n { font-size:0.68rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); padding-top:0.15rem; }
.day-n b { display:block; font-size:1.05rem; color:#fff; letter-spacing:-0.02em; }
.day p { font-size:0.9rem; line-height:1.6; color:rgba(255,255,255,0.84); }
.day.proj p { color:#fde68a; }
.checkpoint { display:flex; gap:0.7rem; margin-top:1rem; padding:0.9rem 1rem; border-radius:12px; border:1px dashed rgba(var(--accent-rgb),0.4); background:rgba(var(--accent-rgb),0.06); font-size:0.85rem; line-height:1.6; color:rgba(255,255,255,0.85); }
.checkpoint svg { flex-shrink:0; color:var(--accent); margin-top:2px; }
.milestone { display:flex; gap:0.8rem; align-items:center; margin-top:0.8rem; padding:0.85rem 1rem; border-radius:12px; font-size:0.84rem; line-height:1.55; }
.milestone.mini { background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.28); color:#fde68a; }
.milestone.cap { background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.28); color:#a7f3d0; }
.milestone a { color:inherit; font-weight:700; }

/* ── Projects tabs ── */
.tabs { display:flex; justify-content:center; gap:0.4rem; margin-bottom:1.8rem; flex-wrap:wrap; }
.tab { font:inherit; font-size:0.85rem; font-weight:700; color:var(--text-2); background:var(--surface); border:1px solid var(--border); padding:0.65rem 1.2rem; border-radius:var(--r-pill); cursor:pointer; transition:all .18s; }
.tab:hover { color:#fff; border-color:var(--border-hov); }
.tab[aria-selected="true"] { color:#fff; background:linear-gradient(135deg,#591ECB,#8950ff); border-color:transparent; box-shadow:0 6px 20px rgba(89,30,203,0.4); }
.tab-panel[hidden] { display:none; }
.proj-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.25rem; }
.proj-grid .g-card h4 { font-size:0.72rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:0.8rem; }
.proj-how { grid-column:1 / -1; display:flex; gap:1rem; align-items:flex-start; }
.proj-how p { font-size:0.92rem; line-height:1.7; color:rgba(255,255,255,0.82); }
.ticks { list-style:none; display:grid; gap:0.55rem; }
.ticks li { display:flex; gap:0.6rem; font-size:0.87rem; line-height:1.55; color:rgba(255,255,255,0.82); }
.ticks li::before { content:'✓'; flex-shrink:0; width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:800; color:var(--accent); background:rgba(var(--accent-rgb),0.14); margin-top:1px; }
.ideas { grid-column:1 / -1; }
.idea-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.6rem; list-style:none; counter-reset:idea; }
.idea-grid li { counter-increment:idea; padding:0.8rem 0.9rem; border-radius:12px; background:rgba(255,255,255,0.03); border:1px solid var(--border); font-size:0.85rem; font-weight:600; line-height:1.45; }
.idea-grid li::before { content:counter(idea, decimal-leading-zero); display:block; font-size:0.65rem; font-weight:800; color:var(--accent); letter-spacing:0.06em; margin-bottom:0.25rem; }
.idea-grid li small { display:block; font-weight:400; color:var(--text-3); font-size:0.76rem; margin-top:0.3rem; line-height:1.5; }
.idea-grid li.extra { display:none; }
.ideas.show-all .idea-grid li.extra { display:block; }
.ideas-more { display:block; margin:1rem auto 0; font:inherit; font-size:0.8rem; font-weight:700; color:var(--accent); background:none; border:1px solid rgba(var(--accent-rgb),0.35); padding:0.55rem 1.1rem; border-radius:var(--r-pill); cursor:pointer; }
.ideas-more:hover { background:rgba(var(--accent-rgb),0.08); }

/* ── Fees section ── */
.fees { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; max-width:760px; margin:0 auto; }
.fee-tile { text-align:center; padding:2rem 1.5rem; border-radius:22px; background:var(--surface); border:1px solid var(--border); }
.fee-tile.student { background:linear-gradient(160deg, rgba(89,30,203,0.22), rgba(8,6,24,0.8)); border-color:rgba(137,80,255,0.4); }
.fee-tile small { font-size:0.72rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-3); }
.fee-tile b { display:block; font-size:2.4rem; font-weight:800; letter-spacing:-0.04em; margin:0.5rem 0 0.2rem; }
.fee-tile span { font-size:0.82rem; color:var(--text-2); }
.fee-cta { text-align:center; margin-top:2rem; display:flex; justify-content:center; gap:0.8rem; flex-wrap:wrap; }

/* ── Level path (prev / next) ── */
.path { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.path a, .path div.here { display:block; padding:1.2rem 1.3rem; border-radius:18px; text-decoration:none; color:#fff; background:var(--surface); border:1px solid var(--border); transition:border-color .2s, transform .2s; }
.path a:hover { border-color:rgba(var(--accent-rgb),0.45); transform:translateY(-3px); }
.path .here { border-color:rgba(var(--accent-rgb),0.6) !important; background:rgba(var(--accent-rgb),0.08) !important; }
.path small { display:block; font-size:0.68rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:0.35rem; }
.path strong { font-size:0.95rem; font-weight:800; line-height:1.35; }

/* ── Level-check promo band ── */
.check-band { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem; align-items:center; padding:2.2rem 2.4rem; border-radius:24px; background:radial-gradient(ellipse at 0% 0%, rgba(89,30,203,0.45), transparent 60%), rgba(255,255,255,0.03); border:1px solid rgba(137,80,255,0.3); }
.check-band h3 { font-size:1.5rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:0.5rem; }
.check-band p { color:var(--text-2); font-size:0.92rem; line-height:1.6; }
.check-band .btns { display:flex; gap:0.6rem; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════════
   LEVEL CHECK (quiz)
═══════════════════════════════════════════════════════════ */
.lc-shell { max-width:760px; margin:0 auto; }
.lc-card { background:linear-gradient(170deg, rgba(20,12,48,0.82), rgba(6,5,20,0.94)); border:1px solid rgba(137,80,255,0.22); border-radius:26px; padding:2.2rem; box-shadow:0 40px 100px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06); backdrop-filter:blur(20px); }
.lc-step-label { font-size:0.72rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-3); margin:0 0 0.8rem; }
.lc-tracks { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; margin-bottom:1.6rem; }
.lc-opt { position:relative; display:flex; gap:0.9rem; align-items:center; text-align:left; width:100%; font:inherit; color:#fff; background:rgba(255,255,255,0.04); border:1.5px solid rgba(255,255,255,0.1); border-radius:16px; padding:1rem; cursor:pointer; transition:border-color .18s, background .18s; }
.lc-opt:hover { border-color:rgba(139,92,246,0.45); background:rgba(139,92,246,0.07); }
.lc-opt[aria-checked="true"] { border-color:#8b5cf6; background:rgba(124,58,237,0.16); box-shadow:0 0 0 3px rgba(139,92,246,0.18); }
.lc-opt .ico { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(89,30,203,0.25); border:1px solid rgba(137,80,255,0.3); flex-shrink:0; color:#c4b5fd; }
.lc-opt b { display:block; font-size:0.95rem; font-weight:800; }
.lc-opt small { font-size:0.76rem; color:var(--text-2); }
.lc-levels { display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem; margin-bottom:1.8rem; }
.lc-levels .lc-opt { flex-direction:column; align-items:flex-start; gap:0.25rem; }
.lc-levels .lc-opt b { font-size:0.9rem; }
.lc-meta { display:flex; flex-wrap:wrap; gap:1.2rem; margin-bottom:1.6rem; font-size:0.82rem; color:var(--text-2); }
.lc-meta span { display:inline-flex; gap:0.4rem; align-items:center; }
.lc-meta svg { color:var(--accent); }
.lc-start { width:100%; justify-content:center; font-size:0.95rem; padding:0.95rem; }
.lc-start[disabled] { opacity:0.45; pointer-events:none; }

.lc-top { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:0.9rem; font-size:0.8rem; color:var(--text-2); font-weight:600; }
.lc-top .ctx { color:var(--accent); font-weight:800; letter-spacing:0.04em; }
.lc-bar { height:6px; border-radius:99px; background:rgba(255,255,255,0.08); overflow:hidden; margin-bottom:0.6rem; }
.lc-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#591ECB,#a78bfa,#22d3ee); border-radius:inherit; transition:width .35s cubic-bezier(.22,1,.36,1); }
.lc-dots { display:flex; gap:5px; margin-bottom:1.8rem; }
.lc-dots button { flex:1; height:4px; border:0; padding:0; border-radius:4px; background:rgba(255,255,255,0.1); cursor:pointer; }
.lc-dots button.done { background:rgba(167,139,250,0.55); }
.lc-dots button.cur { background:#fff; }
.lc-topic { display:inline-block; font-size:0.68rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); background:rgba(var(--accent-rgb),0.12); border:1px solid rgba(var(--accent-rgb),0.3); border-radius:8px; padding:0.25rem 0.6rem; margin-bottom:0.9rem; }
.lc-q { font-size:clamp(1.15rem,2.6vw,1.45rem); font-weight:800; line-height:1.4; letter-spacing:-0.02em; margin-bottom:1.5rem; }
.lc-options { display:grid; gap:0.6rem; margin-bottom:1.8rem; }
.lc-answer { display:flex; gap:0.9rem; align-items:center; width:100%; text-align:left; font:inherit; font-size:0.93rem; line-height:1.5; color:rgba(255,255,255,0.88); background:rgba(255,255,255,0.035); border:1.5px solid rgba(255,255,255,0.09); border-radius:14px; padding:0.9rem 1rem; cursor:pointer; transition:border-color .15s, background .15s, transform .15s; }
.lc-answer:hover { border-color:rgba(139,92,246,0.45); background:rgba(139,92,246,0.06); }
.lc-answer:focus-visible, .lc-opt:focus-visible, .tab:focus-visible { outline:2px solid #a78bfa; outline-offset:2px; }
.lc-answer .key { flex-shrink:0; width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:800; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:var(--text-2); }
.lc-answer[aria-checked="true"] { border-color:#8b5cf6; background:rgba(124,58,237,0.18); color:#fff; }
.lc-answer[aria-checked="true"] .key { background:linear-gradient(135deg,#591ECB,#8950ff); border-color:transparent; color:#fff; }
.lc-nav { display:flex; justify-content:space-between; gap:0.8rem; }
.lc-nav .btn-fill[disabled] { opacity:0.45; pointer-events:none; }
.lc-hint { text-align:center; font-size:0.72rem; color:var(--text-3); margin-top:1rem; }
.lc-hint kbd { font-family:inherit; font-size:0.68rem; padding:0.1rem 0.35rem; border-radius:5px; border:1px solid var(--border); background:rgba(255,255,255,0.05); }

.lc-result-head { display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.8rem; align-items:center; margin-bottom:1.8rem; }
.lc-ring { position:relative; width:150px; height:150px; }
.lc-ring svg { transform:rotate(-90deg); }
.lc-ring .val { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.lc-ring .val b { font-size:2.2rem; font-weight:800; letter-spacing:-0.04em; }
.lc-ring .val small { font-size:0.75rem; color:var(--text-2); }
.lc-band { display:inline-block; font-size:0.7rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; padding:0.3rem 0.7rem; border-radius:8px; margin-bottom:0.7rem; }
.lc-band.strong { color:#34d399; background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.35); }
.lc-band.ready { color:#a78bfa; background:rgba(139,92,246,0.14); border:1px solid rgba(139,92,246,0.35); }
.lc-band.developing { color:#fbbf24; background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.35); }
.lc-band.gap { color:#fb7185; background:rgba(244,63,94,0.12); border:1px solid rgba(244,63,94,0.35); }
.lc-result-head h2 { font-size:1.5rem; font-weight:800; letter-spacing:-0.03em; line-height:1.25; margin-bottom:0.5rem; }
.lc-result-head p { color:var(--text-2); font-size:0.9rem; line-height:1.6; }
.lc-reco { display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:1.2rem 1.3rem; border-radius:16px; background:linear-gradient(135deg, rgba(89,30,203,0.25), rgba(34,211,238,0.06)); border:1px solid rgba(137,80,255,0.35); margin-bottom:1.8rem; }
.lc-reco small { display:block; font-size:0.68rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--violet-pale); margin-bottom:0.25rem; }
.lc-reco strong { font-size:1.05rem; font-weight:800; }
.lc-reco .btns { display:flex; gap:0.5rem; flex-wrap:wrap; }
.lc-topics { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-bottom:1.6rem; }
.lc-topics div { display:flex; justify-content:space-between; align-items:center; gap:0.6rem; padding:0.6rem 0.8rem; border-radius:10px; background:rgba(255,255,255,0.03); border:1px solid var(--border); font-size:0.82rem; }
.lc-topics .ok { color:#34d399; font-weight:800; }
.lc-topics .no { color:#fb7185; font-weight:800; }
.lc-review { border-top:1px solid var(--border); padding-top:1.2rem; }
.lc-review summary { cursor:pointer; font-weight:700; font-size:0.88rem; color:var(--text-2); }
.lc-review summary:hover { color:#fff; }
.lc-review ol { margin:1rem 0 0 1.1rem; display:grid; gap:0.9rem; }
.lc-review li { font-size:0.86rem; line-height:1.55; }
.lc-review li p { color:var(--text-2); margin-top:0.25rem; }
.lc-review .yours.no { color:#fb7185; }
.lc-review .right { color:#34d399; }
.lc-again { display:flex; justify-content:center; gap:0.6rem; flex-wrap:wrap; margin-top:1.6rem; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  nav { padding:0 2rem; }
  .nav-dropdown { width:min(660px, calc(100vw - 4rem)); }
}
@media (max-width: 900px) {
  .wrap { padding:0 1.5rem; }
  .p-hero { padding:7.5rem 0 3.5rem; }
  .p-hero-grid { grid-template-columns:1fr; gap:2rem; }
  .ladder, .maturity, .path { grid-template-columns:1fr; }
  .ladder::before { display:none; }
  .curr-layout { grid-template-columns:1fr; }
  .week-index { display:none; }
  .glance { grid-template-columns:repeat(2,1fr); }
  .proj-grid { grid-template-columns:1fr; }
  .idea-grid { grid-template-columns:1fr 1fr; }
  .subnav-links { display:none; }
  .check-band { grid-template-columns:1fr; padding:1.8rem; }
}
@media (max-width: 768px) {
  nav { padding:0 1.25rem; }
  .nav-links, .nav-cta { display:none; }
  .nav-hamburger { display:flex; }
  .sec { padding:4rem 0; }
  .modal-box { margin:0 1rem; }
  .mf-input { font-size:1rem; }
  .lc-card { padding:1.5rem 1.2rem; border-radius:20px; }
  .lc-result-head { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .lc-topics { grid-template-columns:1fr; }
  .cta-btns { flex-direction:column; align-items:center; }
}
@media (max-width: 560px) {
  .wrap { padding:0 1rem; }
  .p-h1 { font-size:2.1rem; }
  .fees, .lc-tracks { grid-template-columns:1fr; }
  .idea-grid { grid-template-columns:1fr; }
  .lc-levels { grid-template-columns:1fr; }
  .level-switch a { padding:0.4rem 0.6rem; font-size:0.72rem; }
  .week summary { grid-template-columns:auto minmax(0,1fr); }
  .wk-chev { display:none; }
  .day { grid-template-columns:48px minmax(0,1fr); gap:0.6rem; }
  .compare th, .compare td { padding:0.8rem; font-size:0.8rem; }
  .p-actions a { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  html { scroll-behavior:auto; }
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* overflow-x:hidden on html/body turns body into a scroll container and breaks position:sticky; clip keeps the horizontal guard without that side-effect. */
html, body { overflow-x:clip; }
button, input, select, textarea { font-family:inherit; }

/* ═══════════════════════════════════════════════════════════
   LEGAL PAGES
═══════════════════════════════════════════════════════════ */
.legal-hero { padding:8.5rem 0 2.5rem; background:radial-gradient(ellipse 70% 80% at 80% 0%, rgba(89,30,203,0.28), transparent 60%), var(--ink); border-bottom:1px solid var(--border); }
.legal-hero .p-lead { max-width:760px; font-size:0.98rem; margin-bottom:0; }
.legal-hero .p-lead a, .legal-body a { color:var(--violet-light); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(167,139,250,0.4); }
.legal-hero .p-lead a:hover, .legal-body a:hover { color:#fff; }
.legal-dates { font-size:0.82rem; color:var(--text-2); margin:-0.4rem 0 1.2rem; }
.legal-dates strong { color:#fff; font-weight:700; }
.legal-sec { padding-top:3rem; }
.legal-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:3.5rem; align-items:start; }
.legal-toc { position:sticky; top:90px; }
.legal-toc > p { font-size:0.68rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:0.8rem; }
.legal-toc ol { list-style:none; display:flex; flex-direction:column; gap:0.15rem; border-left:1px solid var(--border); }
.legal-toc ol a { display:block; padding:0.35rem 0 0.35rem 0.9rem; margin-left:-1px; border-left:2px solid transparent; font-size:0.8rem; color:var(--text-2); text-decoration:none; line-height:1.4; }
.legal-toc ol a:hover, .legal-toc ol a.active { color:#fff; border-left-color:var(--violet-light); }
.legal-other { display:flex; flex-direction:column; gap:0.5rem; margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--border); }
.legal-other a { font-size:0.8rem; font-weight:700; color:var(--violet-light); text-decoration:none; }
.legal-other a:hover { color:#fff; }
.legal-body { max-width:780px; }
.legal-body section { padding:0 0 2.2rem; margin-bottom:2.2rem; border-bottom:1px solid var(--border); scroll-margin-top:90px; }
.legal-body section:last-child { border-bottom:none; }
.legal-body h2 { display:flex; align-items:baseline; gap:0.8rem; font-size:1.3rem; font-weight:800; letter-spacing:-0.02em; margin-bottom:1rem; }
.legal-body h2 span { font-size:0.72rem; font-weight:800; color:var(--violet-light); letter-spacing:0.08em; }
.legal-body h3 { font-size:0.95rem; font-weight:800; margin:1.4rem 0 0.6rem; }
.legal-body p, .legal-body li { font-size:0.93rem; line-height:1.75; color:rgba(255,255,255,0.8); }
.legal-body p + p { margin-top:0.8rem; }
.legal-body ul { margin:0.6rem 0 0.4rem; padding-left:1.2rem; display:grid; gap:0.45rem; }
.legal-body li::marker { color:var(--violet-light); }
.legal-body strong { color:#fff; font-weight:700; }
.legal-table { overflow-x:auto; margin:0.8rem 0; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.legal-table table { width:100%; border-collapse:collapse; }
.legal-table th, .legal-table td { text-align:left; vertical-align:top; padding:0.8rem 1rem; font-size:0.86rem; line-height:1.55; border-bottom:1px solid var(--border); }
.legal-table th { font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--violet-light); background:rgba(255,255,255,0.03); }
.legal-table tr:last-child td { border-bottom:none; }
.legal-contact { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.8rem; margin-top:1.2rem; }
.legal-contact div { display:flex; flex-direction:column; gap:0.25rem; padding:1rem 1.1rem; border-radius:14px; background:var(--surface); border:1px solid var(--border); font-size:0.85rem; line-height:1.5; color:var(--text-2); }
.legal-contact small { font-size:0.66rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--violet-light); }
.legal-contact strong { font-size:0.95rem; }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns:1fr; gap:1.5rem; }
  .legal-toc { position:static; padding:1.1rem 1.2rem; border-radius:16px; background:var(--surface); border:1px solid var(--border); }
  .legal-contact { grid-template-columns:1fr; }
  .legal-hero { padding-top:7rem; }
}

/* Compare levels — fee lines + mobile card layout (table is replaced by one card per level) */
.compare .fee-line, .compare-card .fee-line { display:block; white-space:nowrap; }
.compare .fee-line b, .compare-card .fee-line b { color:#fff; font-weight:800; }
.compare .fee-line + .fee-line { margin-top:0.25rem; }
.compare-cards { display:none; }
@media (max-width: 760px) {
  .table-scroll { display:none; }
  .compare-cards { display:grid; gap:0.9rem; }
  .compare-card { border:1px solid var(--border); border-radius:18px; background:var(--surface); overflow:hidden; }
  .compare-card header { display:flex; align-items:center; gap:0.6rem; padding:0.9rem 1.1rem; background:rgba(var(--accent-rgb),0.08); border-bottom:1px solid var(--border); }
  .compare-card header strong { font-size:1rem; font-weight:800; }
  .compare-card .lv-chip { font-size:0.66rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); background:rgba(var(--accent-rgb),0.14); border:1px solid rgba(var(--accent-rgb),0.35); border-radius:7px; padding:0.2rem 0.5rem; }
  .compare-card dl { display:grid; }
  .compare-card dl > div { padding:0.8rem 1.1rem; border-bottom:1px solid var(--border); }
  .compare-card dl > div:last-child { border-bottom:none; }
  .compare-card dt { font-size:0.66rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:0.3rem; }
  .compare-card dd { font-size:0.88rem; line-height:1.55; color:rgba(255,255,255,0.86); }
  .compare-card .fee-line { white-space:normal; }
  .compare-card .fee-line + .fee-line { margin-top:0.2rem; }
}

/* ═══════════════════════════════════════════════════════════
   MENTOR SPOTLIGHT (track page) — adapted from the original ai-engineer.html mentor card
═══════════════════════════════════════════════════════════ */
#mentor { background:radial-gradient(ellipse 60% 70% at 85% 80%, rgba(124,58,237,0.1), transparent 65%); }
.mentor-card { position:relative; overflow:hidden; display:grid; grid-template-columns:260px minmax(0,1fr); gap:3rem; align-items:center; padding:3rem; border-radius:24px; background:var(--surface); border:1px solid rgba(124,58,237,0.25); box-shadow:0 0 60px rgba(89,30,203,0.12); }
.mentor-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 15% 40%, rgba(89,30,203,0.14), transparent 60%); pointer-events:none; }
.mentor-left { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.mentor-portrait { width:240px; height:240px; border-radius:50%; overflow:hidden; background:#f4f2fb; border:3px solid rgba(124,58,237,0.45); box-shadow:0 0 40px rgba(124,58,237,0.3); }
.mentor-portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block; }
.mentor-info { position:relative; z-index:1; }
.mentor-name { font-family:'Poppins',sans-serif; font-size:2rem; font-weight:800; letter-spacing:-0.01em; margin-bottom:0.8rem; }
.mentor-roles { list-style:none; display:flex; flex-wrap:wrap; gap:0.45rem; margin-bottom:1.2rem; }
.mentor-roles li { font-size:0.78rem; font-weight:700; color:rgba(255,255,255,0.86); padding:0.35rem 0.75rem; border-radius:var(--r-pill); background:rgba(137,80,255,0.12); border:1px solid rgba(137,80,255,0.3); }
.mentor-roles li:first-child { background:linear-gradient(135deg,#591ECB,#8950ff); border-color:transparent; color:#fff; }
.mentor-bio { font-size:0.98rem; line-height:1.75; color:var(--text-2); border-left:3px solid rgba(124,58,237,0.5); padding-left:1.1rem; margin-bottom:1.6rem; }
.mentor-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0.6rem; margin-bottom:1.4rem; }
.mentor-stats div { text-align:center; padding:0.9rem 0.5rem; border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid var(--border); }
.mentor-stats b { display:block; font-size:1.45rem; font-weight:800; letter-spacing:-0.03em; background:linear-gradient(135deg,#fff,#a78bfa); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mentor-stats small { font-size:0.72rem; color:var(--text-2); line-height:1.35; display:block; margin-top:0.2rem; }
.mentor-expertise > small { display:block; font-size:0.68rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--violet-light); margin-bottom:0.6rem; }
.mentor-expertise > div { display:flex; flex-wrap:wrap; gap:0.45rem; }
.mentor-expertise span { font-size:0.8rem; font-weight:600; padding:0.4rem 0.8rem; border-radius:10px; background:rgba(10,6,32,0.85); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.85); }
.mentor-linkedin { display:inline-flex; align-items:center; gap:8px; background:rgba(10,102,194,0.2); border:1px solid rgba(10,102,194,0.4); border-radius:10px; padding:0.6rem 1.2rem; font-size:0.82rem; font-weight:700; color:#93c5fd; text-decoration:none; transition:background .2s, border-color .2s; }
.mentor-linkedin:hover { background:rgba(10,102,194,0.35); border-color:rgba(10,102,194,0.6); }
@media (max-width: 900px) {
  .mentor-card { grid-template-columns:1fr; gap:1.8rem; padding:2rem 1.5rem; text-align:center; }
  .mentor-roles, .mentor-expertise > div { justify-content:center; }
  .mentor-bio { text-align:left; }
  .mentor-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mentor-portrait { width:180px; height:180px; }
}
@media (max-width: 480px) {
  .mentor-card { padding:1.6rem 1rem; }
  .mentor-name { font-size:1.6rem; }
  .mentor-portrait { width:150px; height:150px; }
}

/* ═══════════════════════════════════════════════════════════
   ASSESSMENT PAGES (per program) + chooser
═══════════════════════════════════════════════════════════ */
.lc-hero { padding:6.5rem 0 5rem; min-height:100vh; }
.lc-steps { list-style:none; display:flex; gap:0.4rem; margin:0 0 1.8rem; flex-wrap:wrap; }
.lc-steps li { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.76rem; font-weight:700; color:var(--text-3); padding:0.35rem 0.85rem 0.35rem 0.35rem; border-radius:var(--r-pill); background:rgba(255,255,255,0.03); border:1px solid var(--border); }
.lc-steps li span { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:800; background:rgba(255,255,255,0.06); color:var(--text-2); }
.lc-steps li.cur { color:#fff; border-color:rgba(var(--accent-rgb),0.5); background:rgba(var(--accent-rgb),0.1); }
.lc-steps li.cur span { background:linear-gradient(135deg,#591ECB,#8950ff); color:#fff; }
.lc-steps li.done { color:var(--text-2); }
.lc-steps li.done span { background:rgba(16,185,129,0.2); color:#34d399; font-size:0; }
.lc-steps li.done span::before { content:'✓'; font-size:0.72rem; }
.lc-layout { display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:3rem; align-items:start; }
.lc-aside { position:sticky; top:100px; padding-top:0.5rem; }
.lc-title { font-size:clamp(2rem,4vw,2.9rem); margin:1.1rem 0 1rem; }
.lc-aside .p-lead { font-size:0.98rem; margin-bottom:1.5rem; }
.lc-benefits { list-style:none; display:grid; gap:0.7rem; margin-bottom:1.6rem; }
.lc-benefits li { display:flex; gap:0.75rem; align-items:flex-start; font-size:0.88rem; line-height:1.5; color:var(--text-2); }
.lc-benefits li svg { flex-shrink:0; margin-top:2px; color:var(--accent); }
.lc-benefits b { color:#fff; font-weight:700; }
.lc-switch { font-size:0.84rem; color:var(--text-3); padding-top:1.2rem; border-top:1px solid var(--border); }
.lc-switch a { color:var(--accent); font-weight:700; text-decoration:none; }
.lc-switch a:hover { color:#fff; }
body.lc-running .lc-layout { grid-template-columns:minmax(0,1fr); max-width:760px; margin:0 auto; }
body.lc-running .lc-aside { display:none; }
.lc-steps { max-width:none; }
body.lc-running .lc-steps { justify-content:center; }

.lc-levels .lc-opt { flex-direction:row; align-items:center; gap:0.75rem; }
.lc-lvnum { flex-shrink:0; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:0.82rem; font-weight:800; color:var(--accent); background:rgba(var(--accent-rgb),0.12); border:1px solid rgba(var(--accent-rgb),0.3); }
.lc-opt[aria-checked="true"] .lc-lvnum { background:linear-gradient(135deg,#591ECB,#8950ff); color:#fff; border-color:transparent; }
.lc-levels { margin-bottom:0.4rem; }
.lc-topics-preview { display:flex; flex-wrap:wrap; gap:0.35rem; padding:0.85rem; border-radius:14px; background:rgba(0,0,0,0.22); border:1px dashed rgba(var(--accent-rgb),0.3); }
.lc-topics-preview span { font-size:0.72rem; font-weight:600; padding:0.25rem 0.55rem; border-radius:7px; background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.8); }
.lc-topics-preview .lc-topics-label { background:none; padding-left:0; font-size:0.66rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); width:100%; }
.lc-fields { display:grid; grid-template-columns:1fr 1fr; gap:0.2rem 0.9rem; }
.lc-field-full { grid-column:1 / -1; }
.lc-field label { display:block; font-size:0.78rem; font-weight:700; color:rgba(255,255,255,0.75); margin-bottom:0.4rem; }
.lc-field .mf-input { width:100%; }
.lc-field .mf-input[aria-invalid="true"] { border-color:rgba(244,63,94,0.7); box-shadow:0 0 0 3px rgba(244,63,94,0.15); }
.lc-phone { display:flex; align-items:stretch; }
.lc-phone span { display:flex; align-items:center; padding:0 0.8rem; font-size:0.88rem; font-weight:700; color:var(--text-2); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-right:none; border-radius:12px 0 0 12px; }
.lc-phone .mf-input { border-top-left-radius:0; border-bottom-left-radius:0; }
.lc-err { min-height:1.15rem; font-size:0.74rem; font-weight:600; color:#fb7185; margin:0.3rem 0 0.4rem; }
.lc-err:empty { margin:0.15rem 0; }
.lc-consent { font-size:0.76rem; line-height:1.55; color:var(--text-3); margin:0.4rem 0 1.2rem; }
.lc-consent a { color:var(--accent); }
.lc-saved { font-size:0.8rem; color:var(--text-3); text-align:center; margin-top:1.4rem; }
.lc-saved strong { color:rgba(255,255,255,0.8); font-weight:600; }

.lc-hub { display:grid; gap:0.8rem; }
.lc-hub-card { text-decoration:none; padding:1.2rem; }
.lc-hub-card .ico { width:46px; height:46px; }
.lc-hub-card b { font-size:1.02rem; }
.lc-hub-card .lc-hub-go { margin-left:auto; font-size:1.2rem; color:var(--violet-light); transition:transform .2s; }
.lc-hub-card:hover .lc-hub-go { transform:translateX(4px); }

@media (max-width: 900px) {
  .lc-layout { grid-template-columns:1fr; gap:1.6rem; }
  .lc-aside { position:static; }
  .lc-benefits { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .lc-hero { padding-top:5.5rem; }
  .lc-fields { grid-template-columns:1fr; }
  .lc-steps li { font-size:0.7rem; padding-right:0.6rem; }
  .lc-aside .p-lead { font-size:0.92rem; }
  .lc-switch { display:none; }
}
.lc-topics-preview[hidden] { display:none; }
/* Assessment level picker: full-width rows read better than 3 squeezed columns (long AI Web Studio names) */
.lc-page .lc-levels { grid-template-columns:1fr; gap:0.5rem; }
.lc-page .lc-levels .lc-opt { padding:0.75rem 0.9rem; }
.lc-page .lc-levels .lc-opt b { display:inline; font-size:0.92rem; }
.lc-page .lc-levels .lc-opt small { display:inline; font-size:0.82rem; }
.lc-page .lc-levels .lc-opt small::before { content:'·'; margin:0 0.45rem; color:var(--text-3); }
.lc-benefits em { font-style:normal; }
@media (max-width: 560px) {
  /* keep the form close to the top on phones */
  .lc-benefits { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:0.4rem; }
  .lc-benefits li { align-items:center; gap:0.4rem; font-size:0.74rem; padding:0.35rem 0.6rem; border-radius:var(--r-pill); background:rgba(255,255,255,0.04); border:1px solid var(--border); }
  .lc-benefits li svg { width:13px; height:13px; margin:0; }
  .lc-benefits em { display:none; }
  .lc-title { margin:0.8rem 0 0.7rem; }
  .lc-steps { flex-wrap:nowrap; }
  .lc-steps li:not(.cur) { font-size:0; gap:0; padding-right:0.35rem; }
}

/* ═══════════════════════════════════════════════════════════
   STUDENT-FIRST PRICING
═══════════════════════════════════════════════════════════ */
.price { width:100%; }
.price-top { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; margin-bottom:0.2rem; }
.price-top small { font-size:0.7rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.price-save { display:inline-flex; align-items:center; font-size:0.68rem; font-weight:800; letter-spacing:0.02em; color:#34d399; background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.35); border-radius:var(--r-pill); padding:0.18rem 0.6rem; white-space:nowrap; }
.price-main { display:flex; align-items:baseline; gap:0.45rem; }
.price-main b { font-size:1.75rem; font-weight:800; letter-spacing:-0.03em; color:#fff; line-height:1.15; }
.price-main span { font-size:0.78rem; font-weight:700; color:var(--text-2); }
.price-sub { font-size:0.76rem; line-height:1.5; color:var(--text-2); margin-top:0.35rem; }
.price-sub strong { color:rgba(255,255,255,0.88); font-weight:700; }
/* ladder card */
.lv-fee { display:block; }
/* level hero fee card */
.price-lg { padding:1rem 1.1rem; border-radius:16px; background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.3); margin-bottom:1.1rem; }
.price-lg .price-main b { font-size:2.3rem; }
/* fees section */
.fee-tile { position:relative; }
.fee-tile b em { font-style:normal; font-size:0.9rem; font-weight:700; color:var(--text-2); letter-spacing:0; }
.fee-tile.student { order:-1; }
.fee-tile:not(.student) b { font-size:1.9rem; color:rgba(255,255,255,0.88); }
.fee-tile .price-save { position:absolute; top:1rem; right:1rem; }
.fee-note { text-align:center; font-size:0.78rem; color:var(--text-3); margin-top:1rem; }
/* compare table */
.compare .fee-stu b, .compare-card .fee-stu b { color:var(--accent); }
.compare .fee-line, .compare-card .fee-line { color:var(--text-2); }
/* reset the old two-column .lv-fee rules for the new price block */
.lv-fee .price-top, .lv-fee .price-main { flex-direction:row; }
.lv-fee .price-top { justify-content:space-between; align-items:center; }
.lv-fee .price-main { align-items:baseline; }
.lv-fee .price-main b { font-size:1.75rem; }
.fee-tile .price-save { color:#34d399; font-size:0.68rem; background:rgba(16,185,129,0.12); border-color:rgba(16,185,129,0.35); }
/* AI Web Studio: level name as heading, original "From … to …" phrase as subtitle */
.lv-card .lv-tagline { font-size:0.8rem; font-weight:700; color:var(--accent); margin-top:0.3rem; line-height:1.4; }
.p-tagline { font-size:1.05rem; font-weight:700; color:var(--accent); margin:-0.5rem 0 1rem; letter-spacing:-0.01em; }
/* Fee-card Apply button: long level names ("Apply for Level 2 - AI Full-Stack Developer") stay on one line on desktop */
.fee-card .btn-fill { font-size:0.82rem; padding:0.8rem 1rem; gap:8px; text-align:center; }
@media (min-width: 561px) { .fee-card .btn-fill { white-space:nowrap; } }