/* HieuIT Coaching visual system: clear, instructor-led, and easy to scan. */
:root {
  color-scheme: light;
  --page: #f3f6f8;
  --surface: #ffffff;
  --surface-soft: #e3eaed;
  --ink: #17191b;
  --muted: #536575;
  --line: #d5dcdf;
  --blue: #087fd1;
  --blue-deep: #075fa6;
  --sky: #78b9f7;
  --violet: #6b59e7;
  --lavender: #a59af4;
  --lemon: #ffeba8;
  --marigold: #ffcb70;
  --coral: #ff777b;
  --chili: #d92d32;
  --rose: #f0799f;
  --charcoal: #2b3031;
  --radius: 16px;
  --shadow: 0 18px 42px rgb(22 43 61 / 8%);
}

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--page) !important;
  color: var(--ink) !important;
  font-family: "Segoe UI", Aptos, Arial, sans-serif !important;
  line-height: 1.65;
}
body > .fixed.inset-0 { display: none; }
::selection { background: #c9def1; color: var(--ink); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--page); }
::-webkit-scrollbar-thumb { background: #b5c2cb; border: 2px solid var(--page); border-radius: 8px; }

a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--lavender) !important;
  outline-offset: 3px;
}

header {
  position: sticky;
  top: 0;
  background: rgb(243 246 248 / 96%) !important;
  border-color: var(--line) !important;
  box-shadow: 0 1px 0 rgb(22 43 61 / 3%) !important;
  backdrop-filter: blur(12px) !important;
}
header > div:first-child { height: 76px !important; }
header .group > div:first-child {
  background: var(--blue) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
header .group > div:nth-child(2) > span:first-child {
  background: none !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}
header .group > div:nth-child(2) > span:first-child span {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
}
header .group > div:nth-child(2) > span:last-child {
  color: var(--muted) !important;
  font-family: inherit !important;
  letter-spacing: .1em;
}
header nav { color: var(--ink) !important; gap: 1.65rem !important; }
header nav a, #mobileMenu a { color: var(--ink) !important; transition: color .18s ease; }
header nav a:hover, #mobileMenu a:hover { color: var(--blue) !important; }
#mobileMenu { background: var(--surface) !important; border-color: var(--line) !important; }
#mobileMenuBtn { color: var(--ink) !important; }
header .hidden.sm\:flex a, #mobileMenu > a:last-child {
  background: var(--blue) !important;
  border: 1px solid var(--blue) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Existing utility markup is retained; semantic overrides keep one coherent palette. */
[class*="text-brand-"], [class*="text-cyan-"], [class*="text-emerald-"],
[class*="text-indigo-"], [class*="text-purple-"], [class*="text-teal-"] {
  color: var(--blue) !important;
}
[class*="bg-brand-"], [class*="bg-cyan-"], [class*="bg-emerald-"],
[class*="bg-indigo-"], [class*="bg-purple-"], [class*="bg-teal-"] {
  background-color: #e8f2fa !important;
}
[class*="border-brand-"], [class*="border-cyan-"], [class*="border-emerald-"],
[class*="border-indigo-"], [class*="border-purple-"], [class*="border-teal-"] {
  border-color: #c6dced !important;
}
[class*="shadow-glow"], [class*="shadow-cyan"] { box-shadow: none !important; }
[class*="animate-ping"], [class*="animate-pulse"] { animation: none !important; }

section { scroll-margin-top: 5.5rem; }
section > div.max-w-7xl { max-width: 1200px !important; }
section h1, section h2, section h3 { color: var(--ink) !important; letter-spacing: -.025em; }
section p, section li { color: var(--muted); }
section strong { color: var(--ink); }
section .bg-slate-950, section [class*="bg-slate-950/"], section .bg-slate-900,
section [class*="bg-slate-900/"], section .bg-slate-800, section [class*="bg-slate-800/"],
section .bg-black, section [class*="bg-black/"] { background-color: var(--surface) !important; }
section [class*="text-white"], section [class*="text-slate-100"], section [class*="text-slate-200"],
section [class*="text-slate-300"] { color: var(--ink) !important; }
section [class*="text-slate-400"], section [class*="text-slate-500"] { color: var(--muted) !important; }
section [class*="border-slate-"] { border-color: var(--line) !important; }
section a[class*="bg-gradient"], section button[class*="bg-gradient"],
section a[class*="bg-gradient"] *, section button[class*="bg-gradient"] * {
  color: #fff !important;
}
section [class*="rounded-2xl"], section [class*="rounded-3xl"], section [class*="rounded-xl"] {
  border-radius: var(--radius) !important;
}
section [class*="shadow-"] { box-shadow: none !important; }

/* Hero: one clear promise and a compact view of the learning path. */
body > section:first-of-type {
  padding-top: 4.25rem !important;
  padding-bottom: 5rem !important;
  background: linear-gradient(112deg, #edf5fb 0%, #f3f6f8 58%, #f0effd 100%);
  border-bottom: 1px solid var(--line);
}
body > section:first-of-type h1 {
  max-width: 740px;
  font-size: clamp(2.65rem, 5vw, 4.35rem) !important;
  line-height: 1.08 !important;
}
body > section:first-of-type h1 span {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
  background: none !important;
}
body > section:first-of-type p { max-width: 650px; font-size: 1.08rem !important; line-height: 1.75 !important; }
body > section:first-of-type .grid.grid-cols-1.lg\:grid-cols-12 { gap: 3.5rem !important; }
body > section:first-of-type .lg\:col-span-7 { text-align: left !important; }
body > section:first-of-type .lg\:col-span-7 .inline-flex {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: var(--blue-deep) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  font-size: .76rem !important;
}
body > section:first-of-type .lg\:col-span-7 .inline-flex span:first-child { display: none; }
body > section:first-of-type .hero-primary-action,
header .hidden.sm\:flex a, #mobileMenu > a:last-child {
  background: var(--blue) !important;
  color: #fff !important;
  border: 1px solid var(--blue) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 18px rgb(8 127 209 / 17%) !important;
}
body > section:first-of-type .hero-secondary-action {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
}
body > section:first-of-type .hero-primary-action,
body > section:first-of-type .hero-primary-action * { color: #fff !important; }
.hero-path-label { margin: 0 0 .85rem !important; color: var(--muted) !important; font-size: .76rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hero-path ol {
  list-style: none;
  margin: 0;
  padding: .65rem 1.5rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--violet);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.hero-path li { display: flex; align-items: center; gap: 1rem; padding: 1.05rem 0; }
.hero-path li + li { border-top: 1px solid var(--line); }
.hero-path li > span { color: var(--violet); font-size: .82rem; font-variant-numeric: tabular-nums; }
.hero-path li strong, .hero-path li small { display: block; }
.hero-path li strong { font-size: .98rem; font-weight: 650; }
.hero-path li small { margin-top: .12rem; color: var(--muted); font-size: .83rem; }

/* HieuIT monogram and the supplied warm accent palette. */
.brand-mark-image { display:block;width:2.75rem;height:2.75rem;flex:0 0 auto;filter:drop-shadow(3px 3px 0 var(--coral)); }
.brand-mark-image.brand-mark-small { width:2rem;height:2rem;filter:drop-shadow(2px 2px 0 var(--coral)); }
.brand-mark-small .brand-mark-check { right: .18rem; top: .12rem; font-size: .4rem; }
header { border-bottom: 3px solid transparent !important; border-image: linear-gradient(90deg, var(--lemon), var(--marigold), var(--coral), var(--rose), var(--violet)) 1 !important; }
body > section:first-of-type { background: linear-gradient(118deg, #fff9e5 0%, #f3f6f8 52%, #f9edf1 100%) !important; }
body > section:first-of-type h1 span { color: var(--chili) !important; -webkit-text-fill-color: var(--chili) !important; }
#courses { background: linear-gradient(180deg, #fff9e8, #f3f6f8 38%) !important; }
#lessons { background: linear-gradient(135deg, #fff1cf, #fff5e5 52%, #fbe9ed) !important; }
#lessons .lesson-number { color: var(--chili); }
#lessons .lesson-card:nth-child(2) { border-top: 4px solid var(--coral); }
#lessons .lesson-card:nth-child(3) { border-top: 4px solid var(--marigold); }
#lessons .lesson-card:nth-child(4) { border-top: 4px solid var(--rose); }
#lessons .lesson-card .exercise { border-left-color: var(--coral); background: #fff4e5; }
#courseList > .course-card:nth-child(1) { border-top-color: var(--marigold) !important; }
#courseList > .course-card:nth-child(2) { border-top-color: var(--coral) !important; }
#courseList > .course-card:nth-child(3) { border-top-color: var(--rose) !important; }
header .hidden.sm\:flex a, #mobileMenu > a:last-child,
body > section:first-of-type .lg\:col-span-7 > div:nth-of-type(3) a:first-child {
  background: var(--chili) !important;
  border-color: var(--chili) !important;
}

#about, #pillars, #courses, #lessons, #roadmap, #faq, #contact {
  background: transparent !important;
  border-color: var(--line) !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
#about .absolute.-inset-1 { display: none; }
#about .relative.w-64, #about .relative.w-64 > div:first-child {
  border: 0 !important;
  box-shadow: none !important;
  background: var(--surface-soft) !important;
}
#about .relative.w-64 { border-radius: 50% !important; width: 15rem !important; height: 15rem !important; }
#about .relative.w-64 > div:first-child { background: var(--blue) !important; border-radius: 50% !important; }

#pillars .grid.md\:grid-cols-3 { grid-template-columns: 1fr !important; gap: 0 !important; }
#pillars .grid.md\:grid-cols-3 > .group {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  grid-template-areas: "icon label" "icon title" "icon copy" "icon details";
  column-gap: 1.25rem;
  padding: 1.8rem 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#pillars .grid.md\:grid-cols-3 > .group > div:not(.absolute) {
  grid-area: icon; width: 2.75rem !important; height: 2.75rem !important; margin: 0 !important;
  border: 0 !important; border-radius: 10px !important; background: #e8f2fa !important;
}
#pillars .grid.md\:grid-cols-3 > .group > .absolute { display: none; }
#pillars .grid.md\:grid-cols-3 > .group > span { grid-area: label; margin: 0 0 .25rem; font-family: inherit !important; letter-spacing: .08em !important; }
#pillars .grid.md\:grid-cols-3 > .group > h3 { grid-area: title; margin: 0 0 .5rem !important; }
#pillars .grid.md\:grid-cols-3 > .group > p { grid-area: copy; margin: 0 0 .9rem !important; }
#pillars .grid.md\:grid-cols-3 > .group > ul { grid-area: details; border-color: var(--line) !important; }

#courseList { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1.35rem !important; }
#courseList > .course-card {
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  border-top: 3px solid var(--blue) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
#courseList > .course-card:nth-child(2) { border-top-color: var(--violet) !important; }
#courseList > .course-card:nth-child(3) { border-top-color: var(--sky) !important; }
#courseList > .course-card:hover { transform: translateY(-3px) !important; box-shadow: 0 22px 44px rgb(22 43 61 / 12%); }
#courseList > .course-card > .absolute { display: none; }
#courseList > .course-card > div:first-child { background: #f5f8fa !important; }
#courseList > .course-card > div { padding-left: 1.45rem !important; padding-right: 1.45rem !important; }
#courseList > .course-card > div:last-child { padding-top: 1.25rem !important; }
.filter-btn { border-radius: 9px !important; }
.filter-btn.active { background: var(--blue) !important; color: #fff !important; box-shadow: none !important; }
.goal-chip.active { border-color: var(--violet) !important; background: #f0effd !important; box-shadow: none !important; }
.goal-chip, .faq-question, .course-card { transition: border-color .18s ease, background-color .18s ease, color .18s ease !important; }
.glass-panel { background: var(--surface) !important; border: 1px solid var(--line) !important; backdrop-filter: none !important; }

/* Three short lessons give visitors a useful sample before they enquire. */
#lessons { background: #eaf1f5 !important; }
.lesson-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 30px rgb(22 43 61 / 5%);
  overflow: hidden;
}
.lesson-card > div:first-child { padding: 1.6rem 1.6rem .8rem; }
.lesson-number { color: var(--violet); font-size: .78rem; font-weight: 700; letter-spacing: .08em; }
.lesson-card h3 { margin-top: .65rem; font-size: 1.2rem; line-height: 1.35; }
.lesson-card p { margin-top: .65rem; }
.lesson-card details { margin: auto 1.6rem 1.4rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.lesson-card summary { color: var(--blue-deep); cursor: pointer; font-weight: 650; }
.lesson-card details p { margin-top: .7rem; }
.lesson-card .exercise { margin-top: .8rem; padding: .85rem 1rem; border-left: 3px solid var(--violet); border-radius: 0 9px 9px 0; background: #f2f1fd; }

input, select, textarea {
  color: var(--ink) !important;
  background: var(--surface) !important;
  border-color: #bdc8d3 !important;
  border-radius: 9px !important;
}
input::placeholder, textarea::placeholder { color: #778391 !important; }
button[class*="bg-gradient"], a[class*="bg-gradient"], section button[class*="bg-brand-6"], section a[class*="bg-brand-6"] {
  background: var(--blue) !important;
  color: #fff !important;
}
section button[class*="bg-brand-6"] *, section a[class*="bg-brand-6"] * { color: #fff !important; }
#contact .lg\:col-span-7 > div { box-shadow: var(--shadow); }
#contact form > p { font-family: inherit !important; }
footer { background: var(--surface-soft) !important; border-color: var(--line) !important; }
footer [class*="text-white"], footer [class*="text-slate-"] { color: var(--ink) !important; }
#toastNotification { background: var(--surface) !important; border-color: var(--blue) !important; box-shadow: var(--shadow) !important; }

@media (max-width: 1023px) {
  #courseList { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
  header > div:first-child { height: 68px !important; }
  body > section:first-of-type { padding-top: 3.25rem !important; padding-bottom: 3.8rem !important; }
  body > section:first-of-type .lg\:col-span-7 { text-align: left !important; }
  body > section:first-of-type .lg\:col-span-7 > div:nth-of-type(3) { align-items: stretch !important; }
  .hero-path ol { padding: .45rem 1rem; }
  #courseList { grid-template-columns: 1fr !important; }
  #pillars .grid.md\:grid-cols-3 > .group { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: .9rem; }
  #about, #pillars, #courses, #lessons, #roadmap, #faq, #contact { padding-top: 3.8rem !important; padding-bottom: 3.8rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Palette pass: prevent the legacy dark-theme body utility from tinting every page blue. */
:root {
  --page: #f5f5f1;
  --surface: #ffffff;
  --surface-soft: #ecefed;
  --ink: #17191b;
  --muted: #59656a;
  --line: #d9dedd;
  --blue: #1686dc;
  --blue-deep: #086db8;
  --sky: #79b8f5;
  --violet: #6957df;
  --lavender: #a6a0f5;
  --lemon: #ffeba8;
  --marigold: #ffcb70;
  --coral: #ff777b;
  --chili: #df3438;
  --rose: #f079a3;
  --charcoal: #2d3436;
}
body.bg-brand-darker { background: var(--page) !important; }
[class*="text-brand-"], [class*="text-cyan-"], [class*="text-emerald-"], [class*="text-teal-"] {
  color: var(--blue) !important;
}
[class*="text-indigo-"], [class*="text-purple-"] { color: var(--violet) !important; }
[class*="bg-brand-"], [class*="bg-cyan-"], [class*="bg-emerald-"], [class*="bg-teal-"] {
  background-color: #eaf4fc !important;
}
[class*="bg-indigo-"], [class*="bg-purple-"] { background-color: #f0edff !important; }
[class*="border-brand-"], [class*="border-cyan-"], [class*="border-emerald-"], [class*="border-teal-"] {
  border-color: #c4def2 !important;
}
[class*="border-indigo-"], [class*="border-purple-"] { border-color: #d9d2ff !important; }
::selection { background: var(--lavender); color: var(--ink); }
::-webkit-scrollbar-track { background: var(--page); }
::-webkit-scrollbar-thumb { background: #b8c2c3; border-color: var(--page); }
#about { background: linear-gradient(115deg, #fff5cf 0%, #fffaf0 54%, #fbe9ef 100%) !important; }
#pillars { background: #f5f5f1 !important; }
#courses { background: linear-gradient(180deg, #eef4f7 0%, #f5f5f1 56%) !important; }
#lessons { background: linear-gradient(120deg, #fff1c7 0%, #fff8e8 54%, #fce9ee 100%) !important; }
#roadmap { background: #eff2ef !important; }
#faq { background: #f2f0fc !important; }
#contact { background: linear-gradient(120deg, #fff2d1 0%, #fffaf2 48%, #fde9eb 100%) !important; }
#pillars .grid.md\:grid-cols-3 > .group > div:not(.absolute) { background: #f0edff !important; }
#courseList > .course-card:nth-child(2) { border-top-color: var(--violet) !important; }
#courseList > .course-card:nth-child(3) { border-top-color: var(--coral) !important; }

/* HieuIT Academy: phòng thực hành 3D là điểm nhấn duy nhất của hero. */
:root { --blue: #1686dc; --blue-deep: #086db8; --marigold: #ffcb70; --charcoal: #2d3436; }
body > section:first-of-type {
  padding-top: clamp(3.5rem, 7vw, 6.5rem) !important;
  padding-bottom: clamp(4rem, 7vw, 6rem) !important;
  background: linear-gradient(115deg, #fff8df 0%, #f7f7f2 49%, #eef5fb 100%) !important;
}
body > section:first-of-type .grid.grid-cols-1.lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem) !important; }
body > section:first-of-type .lg\:col-span-7 { grid-column: span 6 / span 6; }
body > section:first-of-type .lg\:col-span-5 { grid-column: span 6 / span 6; }
body > section:first-of-type h1 {
  max-width: 690px;
  font-size: clamp(2.9rem, 3.55vw, 3.8rem) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
  letter-spacing: -.045em !important;
  line-height: 1.1 !important;
}
body > section:first-of-type h1 span {
  color: var(--blue-deep) !important;
  -webkit-text-fill-color: var(--blue-deep) !important;
  text-decoration: underline;
  text-decoration-color: var(--marigold);
  text-decoration-thickness: 4px;
  text-underline-offset: 8px;
}
body > section:first-of-type h1 .hero-title-first {
  display: block;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  text-decoration: none;
}
body > section:first-of-type h1 .hero-title-accent { display: block; }
body > section:first-of-type .hero-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap;
  gap: .8rem !important;
  padding-top: 1.1rem !important;
}
body > section:first-of-type .hero-actions a {
  min-height: 50px;
  width: auto !important;
  padding: .8rem 1.2rem !important;
  border-radius: 10px !important;
  font-size: .9rem !important;
  white-space: nowrap;
}
header .hidden.sm\:flex a, #mobileMenu > a:last-child {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}
body > section:first-of-type .hero-primary-action { box-shadow: 3px 3px 0 var(--violet) !important; }
.hero-classroom-wrap { min-width: 0; position: relative; }
.hero-classroom {
  position: relative;
  height: clamp(340px, 36vw, 470px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #dedfd9;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff6d9 0%, #f2f0ff 55%, #e8f4fa 100%);
  box-shadow: 0 22px 55px rgb(39 53 60 / 12%);
}
.hero-classroom::before {
  content: "";
  position: absolute;
  inset: 13px;
  z-index: 1;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 15px;
  pointer-events: none;
}
.hero-classroom canvas { display: block; width: 100%; height: 100%; }
.classroom-frame { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(255 255 255 / 18%), transparent 34%, transparent 76%, rgb(255 250 233 / 40%)); }
.classroom-caption, .classroom-badge { position: absolute; z-index: 2; display: flex; align-items: center; }
.classroom-caption { left: 28px; bottom: 24px; gap: 11px; color: var(--ink); }
.classroom-caption strong, .classroom-caption small { display: block; }
.classroom-caption strong { font-size: .85rem; font-weight: 750; }
.classroom-caption small { margin-top: 2px; color: var(--muted); font-size: .7rem; }
.classroom-seal { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #dfbb70; border-radius: 12px; background: var(--lemon); box-shadow: 3px 3px 0 var(--coral); font-family: Georgia, serif; font-size: 1.2rem; font-weight: 800; }
.classroom-badge { top: 27px; right: 27px; gap: 8px; padding: 8px 11px; border: 1px solid #e0e0db; border-radius: 9px; background: rgb(255 255 255 / 92%); color: #34434b; font-size: .68rem; font-weight: 700; }
.classroom-badge i { color: var(--blue); }
.classroom-note { display: flex; align-items: center; gap: 9px; margin: 14px 0 0 !important; color: var(--muted); font-size: .78rem !important; }
.classroom-note span { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #40ad88; box-shadow: 0 0 0 4px rgb(64 173 136 / 13%); }
.classroom-fallback { position: absolute; inset: 40% 12% auto; z-index: 2; margin: 0; color: #39464b; font-size: .88rem; font-weight: 650; text-align: center; }
#about { background: linear-gradient(110deg, #fff5cf 0%, #fffaf0 55%, #f9edf1 100%) !important; }
#pillars .grid.md\:grid-cols-3 > .group { border-top-color: #d6dddf !important; }
#lessons { background: linear-gradient(120deg, #fff5d8 0%, #fffaf1 60%, #f8edf1 100%) !important; }
#roadmap { background: #eff2ef !important; }
#faq { background: #f0effb !important; }
#contact { background: linear-gradient(120deg, #fff4d4 0%, #fffaf2 54%, #f9eaee 100%) !important; }

@media (max-width: 1023px) {
  body > section:first-of-type .lg\:col-span-7,
  body > section:first-of-type .lg\:col-span-5 { grid-column: span 12 / span 12; }
  body > section:first-of-type .lg\:col-span-5 { max-width: 760px; width: 100%; margin-inline: auto; }
  .hero-classroom { height: clamp(340px, 54vw, 450px); }
}
@media (max-width: 767px) {
  body > section:first-of-type { padding-top: 3.25rem !important; padding-bottom: 3.5rem !important; }
  body > section:first-of-type .grid.grid-cols-1.lg\:grid-cols-12 { gap: 2rem !important; }
  body > section:first-of-type h1 { font-size: clamp(2.55rem, 10vw, 3.35rem) !important; }
  body > section:first-of-type .hero-actions { flex-direction: column !important; align-items: stretch !important; }
  body > section:first-of-type .hero-actions a { width: 100% !important; }
  .hero-classroom { height: 330px; border-radius: 17px; }
  .classroom-caption { left: 23px; bottom: 20px; }
  .classroom-badge { top: 24px; right: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-classroom canvas { transition: none; }
}