/* ── Education Page Styles ── */

/* ── Base Reset & Body ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.68;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

a { color: inherit; }

/* Override soft text to be brighter on pure dark bg for readability */
:root {
  --edu-text-soft: #b0b0b0;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

/* ── Ambient Background ── */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  opacity: 0.56;
}

.ambient::before {
  content: "";
  position: absolute;
  inset: -18% -6%;
  background:
    radial-gradient(circle at 13% 21%, oklch(28% 0.08 270 / 0.7), transparent 48%),
    radial-gradient(circle at 87% 17%, oklch(25% 0.06 250 / 0.6), transparent 42%),
    radial-gradient(circle at 73% 72%, oklch(22% 0.07 280 / 0.4), transparent 46%);
}

.ambient img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.08;
  transform: scale(1.08);
}

/* ── Panel Reveal Animation ── */
.panel-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 560ms ease, transform 560ms ease;
}

.panel-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sticky Nav */
.edu-nav {
  width: var(--container);
  margin: 1.05rem auto 0;
  padding: 0.72rem 1rem;
  border: var(--line);
  border-radius: 1rem;
  background: rgba(15, 15, 20, 0.85);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  position: sticky;
  top: 0.8rem;
  z-index: 30;
  box-shadow: var(--shadow-card);
}

.edu-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  text-decoration: none;
  font: 700 var(--text-sm) / 1.2 var(--font-display);
  letter-spacing: 0.04em;
  color: var(--color-text);
  white-space: nowrap;
}

.edu-brand-icon {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #fff;
  font-weight: 800;
}

.edu-topnav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.edu-topnav a {
  text-decoration: none;
  color: var(--edu-text-soft);
  font-size: var(--text-sm);
  transition: color 200ms;
}

.edu-topnav a:hover,
.edu-topnav a:focus-visible,
.edu-topnav a.is-active {
  color: var(--color-primary);
}

.back-link {
  text-decoration: none;
  color: var(--edu-text-soft);
  font-size: var(--text-xs);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  transition: color 200ms;
}

.back-link:hover { color: var(--color-primary); }

/* ── Hero ── */
.edu-hero {
  padding: var(--space-7) 0 var(--space-6);
  text-align: center;
  position: relative;
}

.edu-hero::after {
  content: "";
  position: absolute;
  inset: 20% -10% -20%;
  background: radial-gradient(ellipse at 50% 60%, oklch(60% 0.15 270 / 0.18), transparent 70%);
  pointer-events: none;
}

.edu-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.08);
  color: #a78bfa;
  font: 700 var(--text-xs) / 1.2 var(--font-display);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

.edu-hero h1 {
  font-size: clamp(2.2rem, 1.4rem + 2.8vw, 4rem);
  line-height: 1.1;
  max-width: 18ch;
  margin: 0 auto;
  background: linear-gradient(135deg, #fff 20%, #a78bfa 50%, #6366f1 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.edu-hero-sub {
  margin: var(--space-3) auto 0;
  max-width: 56ch;
  color: var(--edu-text-soft);
  font-size: var(--text-lg);
  line-height: 1.6;
}

.edu-hero-metrics {
  margin: var(--space-5) auto 0;
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.edu-metric {
  text-align: center;
}

.edu-metric-value {
  margin: 0;
  font: 800 clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem) / 1 var(--font-display);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.edu-metric-label {
  margin: 0.3rem 0 0;
  color: var(--edu-text-soft);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

/* ── Section shared ── */
.edu-section {
  padding: var(--space-7) 0;
}

.edu-section-head {
  margin-bottom: var(--space-5);
}

.edu-section-index {
  margin: 0 0 0.35rem;
  font: 700 var(--text-xs) / 1 var(--font-display);
  color: #a78bfa;
  letter-spacing: 0.12em;
}

.edu-section-head h2 {
  font-size: var(--text-xl);
  margin: 0;
}

.edu-section-head .edu-desc,
.edu-desc {
  margin: 0.75rem 0 0;
  color: #c0c0c0;
  max-width: 64ch;
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* ── Target Audience ── */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.audience-card {
  padding: var(--space-3);
  border: var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  transition: border-color 300ms;
}

.audience-card:hover {
  border-color: rgba(139, 92, 246, 0.3);
}

.audience-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: var(--space-2);
}

.audience-icon.ceo { background: rgba(99, 102, 241, 0.12); }
.audience-icon.pm { background: rgba(62, 207, 142, 0.12); }
.audience-icon.tech { background: rgba(245, 166, 35, 0.12); }
.audience-icon.exec { background: rgba(236, 72, 153, 0.12); }
.audience-icon.staff { background: rgba(56, 189, 248, 0.12); }

.audience-card h3 {
  font-size: var(--text-base);
  margin: 0;
}

.audience-card .audience-pain {
  margin: 0.4rem 0 0;
  color: #b0b0b0;
  font-size: var(--text-sm);
}

.audience-recommend {
  margin: var(--space-2) 0 0;
  display: inline-flex;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.audience-recommend.starter { background: rgba(62, 207, 142, 0.12); color: #3ecf8e; }
.audience-recommend.elite { background: rgba(99, 102, 241, 0.12); color: #818cf8; }
.audience-recommend.leader { background: rgba(236, 72, 153, 0.12); color: #f472b6; }

/* ── Advantages ── */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  counter-reset: adv;
}

.adv-card {
  padding: var(--space-3);
  border: var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  counter-increment: adv;
}

.adv-card::before {
  content: "0" counter(adv);
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font: 800 1.6rem / 1 var(--font-display);
  color: rgba(139, 92, 246, 0.15);
}

.adv-card h3 {
  font-size: var(--text-base);
  margin: 0 0 0.4rem;
}

.adv-card p {
  margin: 0;
  color: var(--edu-text-soft);
  font-size: var(--text-sm);
}

/* ── Course Cards ── */
.course-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.course-card {
  padding: var(--space-4);
  border: var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  transition: border-color 300ms, transform 300ms;
}

.course-card:hover {
  border-color: rgba(139, 92, 246, 0.35);
  transform: translateY(-2px);
}

.course-card.featured {
  border-color: rgba(139, 92, 246, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.course-card.featured::before {
  content: "HOT";
  position: absolute;
  top: -0.6rem;
  right: var(--space-3);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font: 700 var(--text-xs) / 1.2 var(--font-display);
  letter-spacing: 0.06em;
}

.course-tier {
  display: inline-flex;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font: 700 var(--text-xs) / 1.2 var(--font-display);
  letter-spacing: 0.06em;
  width: fit-content;
  margin-bottom: var(--space-2);
}

.course-tier.starter { background: rgba(62, 207, 142, 0.12); color: #3ecf8e; }
.course-tier.elite { background: rgba(99, 102, 241, 0.12); color: #818cf8; }
.course-tier.leader { background: rgba(236, 72, 153, 0.12); color: #f472b6; }

.course-card h3 {
  font-size: var(--text-lg);
  margin: 0 0 0.5rem;
}

.course-meta {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
  color: var(--edu-text-soft);
  font-size: var(--text-sm);
}

.course-meta li::before {
  content: "  ";
  margin-right: 0.3rem;
}

.course-card .btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

/* ── Course Detail Sections ── */
.course-detail {
  padding: var(--space-6) 0;
  border-top: var(--line);
}

.course-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.course-detail-header h2 {
  font-size: var(--text-xl);
  margin: 0;
}

.course-detail-header .course-tier {
  margin-bottom: 0;
}

/* Timeline / Learning Path */
.learning-path {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-5);
  position: relative;
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.path-step {
  flex: 1;
  min-width: 140px;
  padding: var(--space-2) var(--space-3);
  border: var(--line);
  background: rgba(255, 255, 255, 0.05);
  position: relative;
  text-align: center;
}

.path-step:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.path-step:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.path-step-num {
  margin: 0;
  font: 800 var(--text-xs) / 1 var(--font-display);
  color: #a78bfa;
  letter-spacing: 0.08em;
}

.path-step-title {
  margin: 0.3rem 0 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.path-step-duration {
  margin: 0.2rem 0 0;
  font-size: var(--text-xs);
  color: var(--edu-text-soft);
}

/* Accordion */
.accordion {
  display: grid;
  gap: var(--space-1);
}

.accordion-item {
  border: var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.accordion-trigger {
  width: 100%;
  border: 0;
  background: none;
  color: var(--color-text);
  font: 600 var(--text-base) / 1.4 var(--font-display);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.accordion-trigger:hover {
  background: rgba(255, 255, 255, 0.03);
}

.accordion-chevron {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--edu-text-soft);
  transition: transform 300ms;
  flex-shrink: 0;
}

.accordion-item.is-open .accordion-chevron {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;
}

.accordion-item.is-open .accordion-content {
  max-height: 2000px;
}

.accordion-inner {
  padding: 0 var(--space-3) var(--space-3);
  color: #c0c0c0;
  font-size: var(--text-sm);
  line-height: 1.7;
}

.accordion-inner ul {
  margin: 0.5rem 0;
  padding-left: 1.2rem;
}

.accordion-inner li {
  margin-bottom: 0.35rem;
}

.accordion-inner strong {
  color: var(--color-text);
}

/* ── Chapter Block (光环 style) ── */
.chapter-block {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: var(--space-2);
  overflow: hidden;
}

.chapter-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(99, 102, 241, 0.15);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  background: rgba(99, 102, 241, 0.05);
}

.chapter-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.25);
  color: #c4b5fd;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.chapter-header h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.chapter-header .chapter-subtitle {
  font-size: 0.72rem;
  color: #888;
  margin-left: auto;
}

/* Learning Objectives */
.chapter-objectives {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.015);
}

.chapter-objectives-title {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #a78bfa;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chapter-objectives ul {
  margin: 0;
  padding: 0 0 0 1rem;
  display: grid;
  gap: 0.25rem;
}

.chapter-objectives li {
  color: #b8b8b8;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Course Module Table */
.module-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
  line-height: 1.55;
}

.module-table th {
  padding: 0.6rem 1rem;
  background: rgba(99, 102, 241, 0.1);
  font-weight: 600;
  color: #c4b5fd;
  text-align: left;
  border-bottom: 1px solid rgba(99, 102, 241, 0.2);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.module-table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #c8c8c8;
  vertical-align: top;
}

.module-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

.module-table tbody tr:last-child td {
  border-bottom: none;
}

/* First col: module name — bold, fixed width, accent left border */
.module-table td:first-child {
  font-weight: 600;
  color: #e8e8e8;
  white-space: nowrap;
  min-width: 100px;
  max-width: 160px;
  border-left: 2px solid rgba(99, 102, 241, 0.3);
  padding-left: 0.8rem;
}

/* Content col: clean list */
.module-table td ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.module-table td li {
  margin-bottom: 0.2rem;
  padding-left: 0.8rem;
  position: relative;
}

.module-table td li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: rgba(167, 139, 250, 0.5);
  font-weight: 800;
}

.module-table td strong {
  color: #fff;
  font-weight: 600;
}

/* Category & stars columns — centered, narrow */
.module-table td:nth-last-child(1),
.module-table td:nth-last-child(2),
.module-table th:nth-last-child(1),
.module-table th:nth-last-child(2) {
  text-align: center;
  white-space: nowrap;
  width: 60px;
}

/* Category/Type Tags */
.cat-tag {
  display: inline-flex;
  padding: 0.12rem 0.45rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.cat-tag.basics {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}

.cat-tag.practice {
  background: rgba(245, 166, 35, 0.12);
  color: #f5a623;
}

.cat-tag.advanced {
  background: rgba(236, 72, 153, 0.12);
  color: #f472b6;
}

.cat-tag.project {
  background: rgba(62, 207, 142, 0.12);
  color: #3ecf8e;
}

/* Importance Stars */
.stars {
  color: #f5a623;
  font-size: 0.7rem;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

/* Chapter Practice/Project Section */
.chapter-practice {
  padding: 0.6rem 1rem;
  background: rgba(62, 207, 142, 0.03);
  border-top: 1px solid rgba(62, 207, 142, 0.1);
}

.chapter-practice-title {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #3ecf8e;
}

.chapter-practice p {
  margin: 0;
  color: #b0b0b0;
  font-size: 0.8rem;
  line-height: 1.55;
}

/* Chapter Defense/Assessment */
.chapter-defense {
  padding: 0.45rem 1rem;
  background: rgba(99, 102, 241, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.72rem;
  color: #888;
}

/* Advantage callout */
.chapter-advantage {
  padding: var(--space-3) var(--space-4);
  border-top: var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.chapter-advantage summary {
  font: 600 var(--text-sm) / 1.4 var(--font-display);
  color: var(--edu-text-soft);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.chapter-advantage summary::before {
  content: "▸";
  transition: transform 200ms;
}

.chapter-advantage[open] summary::before {
  transform: rotate(90deg);
}

.chapter-advantage p {
  margin: var(--space-2) 0 0;
  color: #b0b0b0;
  font-size: var(--text-xs);
  line-height: 1.65;
}

/* Responsive for chapter blocks */
@media (max-width: 768px) {
  .chapter-header,
  .chapter-objectives,
  .chapter-practice,
  .chapter-defense,
  .chapter-advantage {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .module-table {
    display: block;
    overflow-x: auto;
  }

  .module-table th,
  .module-table td {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }

  .module-table td:first-child {
    min-width: 80px;
  }

  .chapter-num {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.65rem;
  }

  .chapter-header h3 {
    font-size: var(--text-base);
  }
}

/* Star Projects */
.star-projects {
  margin-top: var(--space-4);
}

.star-projects h3 {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-2);
}

.project-card {
  padding: var(--space-3);
  border: var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
  border-left: 3px solid #6366f1;
}

.project-card h4 {
  margin: 0 0 0.4rem;
  font-size: var(--text-sm);
  font-weight: 700;
}

.project-tag {
  display: inline-flex;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(245, 166, 35, 0.12);
  color: #f5a623;
  margin-bottom: 0.5rem;
}

.project-card p {
  margin: 0;
  color: var(--edu-text-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* ── Instructors V2 ── */
.instructor-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.ins-card {
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 300ms;
}

.ins-card:hover {
  border-color: rgba(139, 92, 246, 0.25);
}

.ins-name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.ins-avatar-img {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.ins-name-row h3 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
}

.ins-role {
  margin: 0;
  font-size: 0.7rem;
  color: #a78bfa;
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.ins-tags {
  display: flex;
  gap: 0.35rem;
  margin: 0.45rem 0;
  flex-wrap: wrap;
}

.ins-tag {
  display: inline-flex;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: #999;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ins-bio {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #b0b0b0;
}

.ins-highlights {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.55rem;
  flex-wrap: wrap;
}

.ins-highlights span {
  display: inline-flex;
  padding: 0.12rem 0.4rem;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.08);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.15);
}

@media (max-width: 1024px) {
  .instructor-grid-v2 { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .ins-card {
    padding: 0.82rem 0.8rem;
    border-radius: 5px;
  }

  .ins-name-row {
    gap: 0.45rem;
    margin-bottom: 0.32rem;
  }

  .ins-avatar-img {
    width: 1.78rem;
    height: 1.78rem;
  }

  .ins-name-row h3 {
    font-size: 0.88rem;
    line-height: 1.15;
  }

  .ins-role {
    font-size: 0.68rem;
    line-height: 1.35;
    margin-bottom: 0.4rem;
  }

  .ins-tags {
    gap: 0.3rem;
    margin: 0.4rem 0 0.45rem;
  }

  .ins-tag {
    padding: 0.08rem 0.34rem;
    font-size: 0.6rem;
  }

  .ins-bio {
    font-size: 0.72rem;
    line-height: 1.58;
  }

  .ins-highlights {
    gap: 0.28rem;
    margin-top: 0.48rem;
  }

  .ins-highlights span {
    padding: 0.1rem 0.34rem;
    font-size: 0.58rem;
  }
}

@media (max-width: 480px) {
  .ins-card {
    padding: 0.72rem;
  }

  .ins-name-row {
    gap: 0.4rem;
    margin-bottom: 0.28rem;
  }

  .ins-avatar-img {
    width: 1.62rem;
    height: 1.62rem;
  }

  .ins-name-row h3 {
    font-size: 0.84rem;
  }

  .ins-role {
    font-size: 0.64rem;
    margin-bottom: 0.36rem;
  }

  .ins-tags {
    gap: 0.24rem;
    margin: 0.34rem 0 0.42rem;
  }

  .ins-tag {
    padding: 0.08rem 0.3rem;
    font-size: 0.57rem;
  }

  .ins-bio {
    font-size: 0.69rem;
    line-height: 1.56;
  }

  .ins-highlights {
    gap: 0.24rem;
    margin-top: 0.42rem;
  }

  .ins-highlights span {
    padding: 0.08rem 0.3rem;
    font-size: 0.55rem;
  }
}

/* ── FAQ ── */
.faq-list {
  max-width: 760px;
}

.faq-item {
  border-bottom: var(--line);
}

.faq-trigger {
  width: 100%;
  border: 0;
  background: none;
  color: var(--color-text);
  font: 600 var(--text-base) / 1.5 var(--font-display);
  padding: var(--space-3) 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.faq-trigger:hover { color: #a78bfa; }

.faq-chevron {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--edu-text-soft);
  transition: transform 300ms;
  flex-shrink: 0;
}

.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;
}

.faq-item.is-open .faq-answer {
  max-height: 600px;
}

.faq-answer-inner {
  padding: 0 0 var(--space-3);
  color: var(--edu-text-soft);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* ── CTA Footer ── */
.edu-cta {
  padding: var(--space-7) 0;
  text-align: center;
}

.edu-cta-panel {
  border: var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  padding: var(--space-6) var(--space-5);
  position: relative;
  overflow: hidden;
}

.edu-cta-panel::after {
  content: "";
  position: absolute;
  inset: 30% -10% -40%;
  background: radial-gradient(ellipse at 50% 80%, oklch(55% 0.18 270 / 0.12), transparent 70%);
  pointer-events: none;
}

.edu-cta-panel h2 {
  font-size: var(--text-xl);
  margin: 0 0 var(--space-2);
}

.edu-cta-panel p {
  margin: 0 auto var(--space-4);
  color: var(--edu-text-soft);
  max-width: 48ch;
}

.btn-edu {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.75rem 1.6rem;
  text-decoration: none;
  border: 0;
  font-weight: 700;
  font-size: var(--text-base);
  cursor: pointer;
  transition: transform 200ms;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}

.btn-edu:hover { transform: translateY(-2px); }

.btn-edu-outline {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.75rem 1.6rem;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-base);
  cursor: pointer;
  transition: transform 200ms;
  background: transparent;
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.btn-edu-outline:hover { transform: translateY(-2px); border-color: rgba(139, 92, 246, 0.6); }

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* ── Comparison Table ── */
.comparison-wrapper {
  overflow-x: auto;
  margin-top: var(--space-4);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-2) var(--space-3);
  border: var(--line);
  text-align: left;
}

.comparison-table th {
  background: rgba(255, 255, 255, 0.08);
  font-weight: 700;
  white-space: nowrap;
}

.comparison-table td {
  background: rgba(255, 255, 255, 0.05);
  color: var(--edu-text-soft);
}

.comparison-table td:first-child {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

/* ── Footer ── */
.edu-footer {
  width: var(--container);
  margin: 0 auto;
  padding: 0 0 var(--space-5);
}

.edu-footer p {
  margin: 0;
  color: var(--edu-text-soft);
  font-size: var(--text-sm);
  border-top: var(--line);
  padding-top: var(--space-2);
}

/* ── Responsive ── */

/* Tablet */
@media (max-width: 1024px) {
  .edu-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }
  .back-link { order: -1; width: 100%; text-align: center; }
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .course-cards { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .instructor-grid { grid-template-columns: repeat(2, 1fr); }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .comparison-table { font-size: var(--text-xs); }
  .comparison-table th,
  .comparison-table td { padding: var(--space-1) var(--space-2); }
}

/* Mobile */
@media (max-width: 768px) {
  /* Nav: collapse to scrollable horizontal strip */
  .edu-nav {
    width: calc(100% - 1rem);
    margin: 0.5rem auto 0;
    padding: 0.5rem 0.6rem;
    border-radius: 0.7rem;
    top: 0.4rem;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .edu-brand {
    font-size: var(--text-xs);
    gap: 0.4rem;
  }

  .edu-brand-icon {
    width: 1.4rem;
    height: 1.4rem;
    font-size: 0.72rem;
  }

  .edu-topnav {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.1rem;
    padding-bottom: 0.2rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .edu-topnav::-webkit-scrollbar { display: none; }

  .edu-topnav a {
    font-size: 0.72rem;
    white-space: nowrap;
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
  }

  .back-link {
    order: 0;
    font-size: 0.7rem;
  }

  /* Hero */
  .edu-hero {
    padding: var(--space-5) 0 var(--space-4);
  }

  .edu-hero h1 {
    font-size: clamp(1.6rem, 1rem + 3vw, 2.4rem);
    max-width: 14ch;
  }

  .edu-hero-sub {
    font-size: var(--text-sm);
    max-width: 100%;
  }

  .edu-hero-metrics {
    gap: var(--space-3);
  }

  .edu-metric-value {
    font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  }

  /* Sections */
  .edu-section {
    padding: var(--space-5) 0;
  }

  .edu-section-head h2 {
    font-size: var(--text-lg);
  }

  .edu-desc {
    font-size: var(--text-sm);
  }

  /* Grids → single column */
  .audience-grid,
  .adv-grid,
  .instructor-grid {
    grid-template-columns: 1fr;
  }

  .audience-card,
  .adv-card,
  .instructor-card {
    padding: var(--space-2);
  }

  /* Course cards */
  .course-cards {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    max-width: 100%;
  }

  .course-card {
    padding: var(--space-3);
  }

  /* Course Detail */
  .course-detail {
    padding: var(--space-4) 0;
  }

  .course-detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .course-detail-header h2 {
    font-size: var(--text-lg);
  }

  /* Learning Path → vertical stack */
  .learning-path {
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
  }

  .path-step {
    border-radius: var(--radius-sm) !important;
    min-width: unset;
    padding: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-align: left;
  }

  .path-step-num { margin: 0; min-width: 3.5rem; }
  .path-step-title { margin: 0; }
  .path-step-duration { margin: 0; }

  /* Accordion */
  .accordion-trigger {
    padding: var(--space-2);
    font-size: var(--text-sm);
  }

  .accordion-inner {
    padding: 0 var(--space-2) var(--space-2);
    font-size: var(--text-xs);
  }

  .accordion-inner ul {
    padding-left: 1rem;
  }

  /* Projects */
  .project-grid {
    grid-template-columns: 1fr;
  }

  .project-card {
    padding: var(--space-2);
  }

  /* Comparison table: horizontal scroll with hint */
  .comparison-wrapper {
    position: relative;
    margin-top: var(--space-3);
  }

  .comparison-wrapper::after {
    content: "← 左右滑动 →";
    display: block;
    text-align: center;
    color: var(--edu-text-soft);
    font-size: 0.68rem;
    padding-top: 0.4rem;
  }

  .comparison-table {
    font-size: 0.72rem;
    min-width: 560px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 0.4rem 0.5rem;
  }

  /* FAQ */
  .faq-trigger {
    font-size: var(--text-sm);
    padding: var(--space-2) 0;
  }

  .faq-answer-inner {
    font-size: var(--text-xs);
  }

  /* CTA */
  .edu-cta-panel {
    padding: var(--space-4) var(--space-3);
  }

  .edu-cta-panel h2 {
    font-size: var(--text-lg);
  }

  .btn-edu,
  .btn-edu-outline {
    padding: 0.65rem 1.2rem;
    font-size: var(--text-sm);
    width: 100%;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Small phones */
@media (max-width: 380px) {
  .edu-hero h1 {
    font-size: 1.5rem;
  }

  .edu-hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .edu-metric {
    padding: var(--space-1);
    border: var(--line);
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .accordion-content,
  .faq-answer { transition: none; }
}

/* ── Earlybird Modal ── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  z-index: 1000;
  place-items: center;
}
.modal-overlay.is-open {
  display: grid;
}
.modal-card {
  background: var(--color-surface, #111);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
  max-width: 22rem;
  width: calc(100% - 2rem);
  text-align: center;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--color-text-soft, #888);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}
.modal-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.modal-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.modal-card p {
  color: var(--color-text-soft, #999);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}
.modal-phone {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
  margin-bottom: 0.75rem;
}
.modal-phone:hover {
  color: var(--color-accent, #7c6aff);
}
.modal-hint {
  font-size: 0.8rem;
  color: var(--color-text-soft, #666);
  margin: 0;
}