:root {
  --ink: #18211f;
  --muted: #64706c;
  --paper: #f7f4ec;
  --surface: #fffdf8;
  --line: rgba(24, 33, 31, 0.14);
  --teal: #25acd7;
  --teal-dark: #166f8d;
  --saffron: #f4a240;
  --purple: #7650aa;
  --black: #020202;
  --shadow: 0 22px 60px rgba(24, 33, 31, 0.13);
  --radius: 8px;
  --header-height: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
svg { width: 18px; height: 18px; stroke-width: 1.9; }
h1, h2, h3, p { overflow-wrap: anywhere; }

.scroll-meter {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--saffron), var(--teal), var(--purple));
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  height: var(--header-height);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 0 clamp(18px, 5vw, 72px);
  color: white;
  transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}
.site-header.scrolled {
  color: var(--ink);
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 1px 0 var(--line);
  backdrop-filter: blur(18px);
}
.brand-mark { font-weight: 700; white-space: nowrap; }
.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  font-weight: 700;
  font-size: 0.92rem;
}
.site-nav a { opacity: 0.9; transition: opacity 180ms ease, transform 180ms ease; white-space: nowrap; }
.site-nav a:hover { opacity: 1; transform: translateY(-1px); }
.icon-button {
  display: none;
  place-items: center;
  width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 50%;
  color: currentColor;
  background: rgba(255, 255, 255, 0.16);
}

.hero {
  position: relative;
  min-height: 96svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  padding: calc(var(--header-height) + 48px) clamp(18px, 6vw, 86px) clamp(34px, 7vw, 84px);
  color: white;
  background: linear-gradient(90deg, rgba(2, 2, 2, 0.78), rgba(2, 2, 2, 0.9) 48%, rgba(2, 2, 2, 0.98)), #020202;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(0deg, rgba(118, 80, 170, 0.25), transparent);
}
.hero-mark {
  position: absolute;
  left: clamp(-150px, -6vw, -54px);
  top: 14%;
  z-index: 0;
  width: min(54vw, 760px);
  max-width: none;
  opacity: 0.68;
}
.hero-copy {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  margin-left: auto;
}
.eyebrow, .section-heading span, .section-kicker, .portal-card small, .resource-grid span, .service-grid span {
  margin: 0;
  color: var(--saffron);
  font-weight: 700;
  font-size: 0.84rem;
}
.hero h1, .page-hero h1, .course-hero h1 {
  margin: 10px 0 14px;
  font-size: clamp(3rem, 7vw, 6.35rem);
  line-height: 1.05;
  letter-spacing: 0;
}
.hero p:not(.eyebrow), .page-hero p:not(.eyebrow), .course-hero p:not(.eyebrow) {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  line-height: 1.9;
}
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  min-height: 44px;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.button:hover { transform: translateY(-2px); }
.button.primary { color: #211603; background: var(--saffron); box-shadow: 0 18px 34px rgba(244, 162, 64, 0.24); }
.button.primary.dark { color: white; background: var(--ink); box-shadow: none; }
.button.secondary { color: white; border: 1px solid rgba(255,255,255,.34); background: rgba(255,255,255,.11); }
.button.ghost { color: var(--ink); border: 1px solid var(--line); background: var(--surface); }
.button.disabled, .button:disabled { opacity: .55; cursor: not-allowed; }

.section, .band {
  padding: clamp(64px, 9vw, 116px) clamp(18px, 5vw, 72px);
  scroll-margin-top: calc(var(--header-height) + 18px);
}
.section { max-width: 1180px; margin-inline: auto; }
.band { background: linear-gradient(180deg, rgba(232, 240, 236, 0.78), rgba(247, 244, 236, 1)); }
.band > * { max-width: 1180px; margin-inline: auto; }
.section-heading {
  display: grid;
  grid-template-columns: 210px minmax(280px, 1fr);
  gap: clamp(24px, 6vw, 74px);
  margin-bottom: 34px;
}
.section-heading h2, .join h2 {
  margin: 6px 0 0;
  font-size: clamp(2rem, 5vw, 4.3rem);
  line-height: 1.18;
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.portal-card, .partner-row article, .service-grid article {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 260px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, 0.92);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.portal-card:hover, .partner-row article:hover, .service-grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 46px rgba(24, 33, 31, 0.1);
}
.portal-card svg, .service-grid svg { width: 34px; height: 34px; color: var(--purple); }
.portal-card h3, .partner-row h3, .service-grid h2, .resource-grid h3, .course-list h2 {
  margin: 0;
  font-size: clamp(1.22rem, 2vw, 1.7rem);
  line-height: 1.45;
}
.portal-card p, .partner-row p, .service-grid p, .resource-grid p, .course-list p, .wide-copy, .join p {
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
}
.accent-card { color: white; background: linear-gradient(135deg, rgba(118, 80, 170, 0.92), rgba(22, 111, 141, 0.92)), var(--ink); }
.accent-card p, .accent-card small, .accent-card svg { color: rgba(255,255,255,.82); }

.partner-row, .resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.partner-row img { width: 100%; height: 120px; object-fit: contain; padding: 10px; background: white; }
.partner-row .placeholder { border-style: dashed; }
.partner-row .placeholder svg { width: 48px; height: 48px; color: var(--teal-dark); }

.join { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr); gap: clamp(28px, 6vw, 78px); align-items: center; }
.join-actions { display: grid; border-top: 1px solid var(--line); }
.join-actions a, .join-actions button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 78px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: start;
  font-weight: 700;
}
.join-actions svg { color: var(--purple); }

.inner-page { background: linear-gradient(180deg, #08060b 0, #08060b 430px, var(--paper) 430px), var(--paper); }
.page-hero, .course-hero {
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(260px, .74fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
  padding: calc(var(--header-height) + 44px) clamp(18px, 6vw, 86px) clamp(54px, 8vw, 92px);
  color: white;
  background: radial-gradient(circle at 12% 38%, rgba(118,80,170,.32), transparent 34%), linear-gradient(135deg, #050506, #0e0a13 70%);
}
.page-hero img, .course-hero img { width: min(460px, 100%); justify-self: center; opacity: .86; }
.principle-grid, .stats, .service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.principle-grid article, .stats article { display: grid; gap: 16px; padding: 28px; background: var(--surface); }
.principle-grid svg { width: 34px; height: 34px; color: var(--purple); }
.stats strong { font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: 1; }
.service-grid { border: 0; background: transparent; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.resource-grid article { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.resource-grid article > div:last-child { display: grid; gap: 12px; padding: 20px; }
.resource-media { height: 210px; display: grid; place-items: center; overflow: hidden; }
.resource-media img { width: 92%; height: 78%; object-fit: contain; }
.resource-media svg { width: 74px; height: 74px; }
.resource-media.dark { background: var(--black); }
.resource-media.blue { color: white; background: linear-gradient(135deg, var(--teal-dark), var(--teal)); }
.resource-media.orange { color: #2a1b04; background: linear-gradient(135deg, #ffcc7a, var(--saffron)); }
.resource-media.green { color: white; background: linear-gradient(135deg, #166f8d, #397f5b); }

.course-list { display: grid; gap: 14px; }
.course-list article { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(280px, 1fr); gap: 24px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.youtube-panel { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 10px; color: white; background: linear-gradient(135deg, rgba(2,2,2,.86), rgba(118,80,170,.72)), #050505; }
.youtube-panel svg { width: 72px; height: 72px; color: var(--saffron); }

.course-page { background: linear-gradient(180deg, #08060b 0, #08060b 560px, var(--paper) 560px), var(--paper); }
.course-main { padding-bottom: 80px; }
.watch-grid { max-width: 1180px; margin: -72px auto 0; padding: 0 clamp(18px, 5vw, 72px); display: grid; grid-template-columns: minmax(320px, 1fr) 340px; gap: 18px; align-items: start; }
.video-shell, .lesson-panel, .certificate-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 18px 44px rgba(24,33,31,.08); }
.mock-video { min-height: clamp(300px, 42vw, 520px); display: grid; place-items: center; align-content: center; gap: 14px; padding: 26px; color: white; background: linear-gradient(135deg, rgba(2,2,2,.84), rgba(118,80,170,.78)), #080808; text-align: center; }
.mock-video button { width: 82px; aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--ink); background: var(--saffron); }
.mock-video svg { width: 34px; height: 34px; }
.video-controls { display: grid; grid-template-columns: auto minmax(160px,1fr) auto; gap: 14px; align-items: center; padding: 16px; border-top: 1px solid var(--line); }
.video-progress { height: 10px; overflow: hidden; border-radius: 999px; background: #e4ddd0; }
.video-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--saffron), var(--teal)); transition: width 240ms ease; }
.lesson-panel, .certificate-panel { padding: 20px; display: grid; gap: 14px; }
.lesson-panel ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lesson-panel li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-weight: 700; }
.certificate-preview { min-height: 210px; display: grid; align-content: center; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, rgba(244,162,64,.16), transparent 42%), linear-gradient(315deg, rgba(37,172,215,.14), transparent 46%), var(--surface); }
.certificate-ready { color: var(--teal-dark) !important; font-weight: 700; }

.site-footer { max-width: 1180px; margin-inline: auto; display: grid; gap: 14px; padding: 32px clamp(18px, 5vw, 72px) 46px; border-top: 1px solid var(--line); color: var(--muted); }
.site-footer strong { color: var(--ink); }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 700; }
.site-footer p { margin: 0; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: auto 1fr; }
  .nav-toggle { display: grid; justify-self: end; }
  .site-nav {
    position: fixed;
    top: calc(var(--header-height) + 8px);
    right: 14px;
    width: min(280px, calc(100vw - 28px));
    max-height: calc(100svh - var(--header-height) - 22px);
    overflow: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 10px;
    color: white;
    background: rgba(10,8,14,.92);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius);
    box-shadow: 0 24px 70px rgba(0,0,0,.36);
    backdrop-filter: blur(18px);
  }
  .site-nav.open { display: flex; }
  .site-nav a { min-height: 44px; display: flex; align-items: center; justify-content: flex-end; padding: 0 12px; border-radius: 6px; color: rgba(255,255,255,.86); }
  .section-heading, .join, .page-hero, .course-hero, .watch-grid, .course-list article { grid-template-columns: 1fr; }
  .portal-grid, .partner-row, .resource-grid, .principle-grid, .stats, .service-grid { grid-template-columns: 1fr; }
  .page-hero, .course-hero { min-height: auto; }
  .watch-grid { margin-top: -34px; }
}

@media (max-width: 680px) {
  :root { --header-height: 66px; }
  .site-header { padding-inline: 14px; }
  .brand-mark { display: none; }
  .hero { min-height: 92svh; padding-inline: 18px; }
  .hero h1 { font-size: clamp(2.7rem, 14vw, 4.2rem); }
  .hero-mark { left: -72vw; top: 36%; width: 132vw; opacity: .22; }
  .button, .actions .button, .certificate-panel .button { width: 100%; }
  .page-hero img, .course-hero img { width: min(320px, 84vw); }
  .portal-card, .partner-row article, .service-grid article { min-height: auto; }
  .video-controls { grid-template-columns: 1fr; }
}

/* Polished visual pass */
:root {
  --ink: #111b18;
  --muted: #697672;
  --paper: #eef5f1;
  --surface: #fffdf8;
  --line: rgba(17, 27, 24, 0.12);
  --teal: #22acd5;
  --teal-dark: #11677e;
  --saffron: #f5a23a;
  --purple: #7a52af;
  --violet-deep: #140d1f;
  --shadow: 0 24px 70px rgba(17, 27, 24, 0.14);
}

body {
  background:
    linear-gradient(180deg, rgba(34, 172, 213, 0.07), transparent 360px),
    var(--paper);
}

.site-header {
  grid-template-columns: auto 1fr;
}

.site-header:not(.scrolled) {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.58), transparent);
}

.site-header.scrolled .icon-button {
  background: rgba(17, 27, 24, 0.07);
}

.brand-mark {
  font-size: 0.98rem;
  letter-spacing: 0;
}

.hero {
  min-height: 84svh;
  align-items: center;
  padding-top: calc(var(--header-height) + 42px);
  background:
    linear-gradient(110deg, rgba(20, 13, 31, 0.74), rgba(2, 2, 2, 0.92) 48%, #020202 82%),
    #020202;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 46%, rgba(245, 162, 58, 0.08) 46% 46.18%, transparent 46.18%),
    linear-gradient(0deg, transparent 0 54%, rgba(34, 172, 213, 0.07) 54% 54.18%, transparent 54.18%);
  opacity: 0.7;
}

.hero::after {
  height: 46%;
  background: linear-gradient(0deg, rgba(122, 82, 175, 0.28), transparent);
}

.hero-mark {
  left: clamp(-130px, -4vw, -42px);
  top: 15%;
  width: min(48vw, 680px);
  opacity: 0.58;
  filter: saturate(1.08);
}

.hero-copy {
  width: min(760px, 100%);
}

.hero-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  margin-bottom: 20px;
  padding: 8px 14px 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
}

.hero-lockup img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
  background: #020202;
}

.hero-lockup span {
  direction: ltr;
  font-weight: 700;
  white-space: nowrap;
}

.hero h1 {
  max-width: 850px;
  margin-top: 8px;
  font-size: clamp(3.4rem, 7.6vw, 7.1rem);
  line-height: 0.98;
}

.hero p:not(.eyebrow) {
  max-width: 560px;
  font-size: clamp(1.02rem, 1.6vw, 1.24rem);
}

.actions {
  gap: 10px;
}

.button {
  min-height: 48px;
  padding: 13px 22px;
}

.button.primary {
  box-shadow: 0 20px 42px rgba(245, 162, 58, 0.25);
}

.button.secondary {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.band {
  padding-top: clamp(44px, 6vw, 76px);
  background:
    linear-gradient(180deg, rgba(34, 172, 213, 0.08), rgba(238, 245, 241, 0.72) 42%, rgba(238, 245, 241, 1));
}

.section-heading {
  margin-bottom: clamp(24px, 4vw, 42px);
}

.section-heading h2 {
  max-width: 820px;
}

.section-heading h2,
.join h2 {
  font-size: clamp(1.9rem, 4.3vw, 3.65rem);
}

.portal-grid {
  gap: 16px;
}

.portal-card,
.partner-row article,
.service-grid article,
.resource-grid article,
.course-list article,
.principle-grid article,
.stats article {
  position: relative;
  overflow: hidden;
  border-color: rgba(17, 27, 24, 0.1);
  box-shadow: 0 14px 44px rgba(17, 27, 24, 0.06);
}

.portal-card {
  min-height: 230px;
  padding: 24px 24px 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 253, 248, 0.86)),
    var(--surface);
}

.portal-card::before,
.partner-row article::before,
.service-grid article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--saffron), var(--teal), var(--purple));
  opacity: 0.9;
}

.portal-card svg,
.service-grid svg {
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: 8px;
  color: var(--purple);
  background: rgba(122, 82, 175, 0.1);
}

.portal-card small {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--teal-dark);
  background: rgba(34, 172, 213, 0.12);
}

.portal-card h3 {
  font-size: clamp(1.34rem, 2.1vw, 1.86rem);
}

.portal-card p {
  max-width: 330px;
  font-size: 0.98rem;
  line-height: 1.8;
}

.accent-card {
  background:
    linear-gradient(135deg, rgba(17, 27, 24, 0.16), transparent 42%),
    linear-gradient(135deg, #7a52af, #11677e);
  box-shadow: 0 22px 60px rgba(122, 82, 175, 0.22);
}

.accent-card::before {
  background: var(--saffron);
}

.accent-card small {
  color: #271801;
  background: rgba(245, 162, 58, 0.88);
}

.accent-card svg {
  color: white;
  background: rgba(255, 255, 255, 0.15);
}

.partner-row article {
  min-height: 238px;
  background: rgba(255, 253, 248, 0.92);
}

.partner-row img {
  border-radius: 8px;
}

.join {
  max-width: 1180px;
  margin-bottom: 28px;
  padding: clamp(34px, 5vw, 58px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: white;
  background:
    linear-gradient(135deg, rgba(245, 162, 58, 0.14), transparent 38%),
    linear-gradient(315deg, rgba(34, 172, 213, 0.17), transparent 42%),
    #101714;
  box-shadow: var(--shadow);
}

.join h2,
.join p,
.join .section-kicker {
  color: white;
}

.join .section-kicker {
  color: var(--saffron);
}

.join-actions {
  border-color: rgba(255, 255, 255, 0.14);
}

.join-actions a,
.join-actions button {
  min-height: 72px;
  color: white;
  border-color: rgba(255, 255, 255, 0.14);
}

.join-actions svg {
  color: var(--saffron);
}

.join-actions a:hover,
.join-actions button:hover {
  color: var(--saffron);
}

.site-footer {
  margin-top: 10px;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-lockup,
  .hero .eyebrow,
  .hero h1,
  .hero p:not(.eyebrow),
  .hero .actions {
    opacity: 0;
    translate: 0 18px;
    animation: heroRise 780ms cubic-bezier(.22, 1, .36, 1) forwards;
  }

  .hero-lockup { animation-delay: 80ms; }
  .hero .eyebrow { animation-delay: 180ms; }
  .hero h1 { animation-delay: 280ms; }
  .hero p:not(.eyebrow) { animation-delay: 390ms; }
  .hero .actions { animation-delay: 500ms; }

  .hero-mark {
    animation: markDrift 9s ease-in-out infinite alternate;
  }

  .motion-ready .reveal-card {
    opacity: 0;
    translate: 0 24px;
    scale: 0.985;
    filter: blur(7px);
  }

  .motion-ready .reveal-card.is-visible {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0);
    transition:
      opacity 720ms cubic-bezier(.22, 1, .36, 1),
      translate 720ms cubic-bezier(.22, 1, .36, 1),
      scale 720ms cubic-bezier(.22, 1, .36, 1),
      filter 720ms cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--delay, 0ms);
  }

  @keyframes heroRise {
    to { opacity: 1; translate: 0 0; }
  }

  @keyframes markDrift {
    from { translate: 0 0; }
    to { translate: -16px 18px; }
  }
}

@media (max-width: 980px) {
  .site-nav {
    inset-inline: 14px;
    width: auto;
    padding: 12px;
  }

  .portal-card p {
    max-width: none;
  }

  .join {
    margin-inline: 18px;
  }
}

@media (max-width: 680px) {
  .hero {
    align-items: end;
    min-height: 82svh;
    padding-bottom: 42px;
  }

  .hero-lockup {
    min-height: 52px;
    margin-bottom: 16px;
    padding: 7px 10px 7px 14px;
  }

  .hero-lockup img {
    width: 36px;
    height: 36px;
  }

  .hero h1 {
    font-size: clamp(2.85rem, 13.5vw, 4.45rem);
    line-height: 1.02;
  }

  .hero p:not(.eyebrow) {
    font-size: 1rem;
    line-height: 1.75;
  }

  .hero-mark {
    left: -66vw;
    top: 32%;
    width: 126vw;
    opacity: 0.22;
  }

  .actions {
    width: 100%;
  }

  .portal-card {
    min-height: 194px;
  }

  .join {
    margin-inline: 18px;
    padding: 28px 20px;
  }
}

/* Admin workspace */
.admin-page {
  background:
    linear-gradient(180deg, #08070c 0, #08070c 560px, #eef5f1 560px),
    #eef5f1;
}

.admin-shell {
  padding: calc(var(--header-height) + 34px) clamp(16px, 4vw, 58px) 64px;
}

.admin-hero {
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(180px, 340px);
  gap: clamp(20px, 5vw, 64px);
  align-items: center;
  color: white;
}

.admin-hero h1 {
  margin: 8px 0 12px;
  font-size: clamp(2.4rem, 5.4vw, 5rem);
  line-height: 1.08;
}

.admin-hero p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  line-height: 1.9;
}

.admin-hero img {
  width: min(320px, 60vw);
  justify-self: center;
  opacity: 0.64;
}

.admin-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  max-width: 1180px;
  margin: 0 auto 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
  box-shadow: 0 24px 70px rgba(17, 27, 24, 0.12);
}

.admin-status article {
  display: grid;
  gap: 6px;
  padding: 18px 22px;
  color: var(--ink);
  background: rgba(255, 253, 248, 0.94);
}

.admin-status span {
  color: var(--muted);
  font-weight: 700;
}

.admin-status strong {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1;
}

.admin-workspace {
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-rail {
  position: sticky;
  top: calc(var(--header-height) + 14px);
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.86);
  box-shadow: 0 18px 50px rgba(17, 27, 24, 0.08);
}

.admin-rail a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 700;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.admin-rail a:hover {
  color: var(--ink);
  background: rgba(34, 172, 213, 0.1);
  transform: translateX(-2px);
}

.admin-rail svg {
  color: var(--purple);
}

.admin-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-panel {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 18px 54px rgba(17, 27, 24, 0.08);
}

.admin-panel:nth-child(2),
.admin-panel:nth-child(3) {
  grid-column: span 2;
}

.panel-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.panel-head > svg {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  padding: 9px;
  border-radius: 8px;
  color: var(--purple);
  background: rgba(122, 82, 175, 0.1);
}

.panel-head h2 {
  margin: 0;
  font-size: clamp(1.22rem, 2vw, 1.65rem);
}

.panel-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 700;
}

.form-grid .wide {
  grid-column: span 2;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  color: var(--ink);
  background: white;
  font: inherit;
}

.form-grid textarea {
  resize: vertical;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: rgba(34, 172, 213, 0.7);
  box-shadow: 0 0 0 3px rgba(34, 172, 213, 0.14);
}

.panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.panel-actions button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: white;
  font-weight: 700;
}

.panel-actions .publish {
  border-color: transparent;
  color: #211603;
  background: var(--saffron);
}

@media (prefers-reduced-motion: no-preference) {
  .admin-hero > *,
  .admin-status,
  .admin-rail,
  .admin-panel {
    opacity: 0;
    translate: 0 18px;
    animation: heroRise 720ms cubic-bezier(.22, 1, .36, 1) forwards;
  }

  .admin-hero > :first-child { animation-delay: 80ms; }
  .admin-hero img { animation-delay: 180ms; }
  .admin-status { animation-delay: 260ms; }
  .admin-rail { animation-delay: 340ms; }
  .admin-panel { animation-delay: calc(420ms + var(--delay, 0ms)); }
}

@media (max-width: 980px) {
  .admin-hero,
  .admin-workspace,
  .admin-panels {
    grid-template-columns: 1fr;
  }

  .admin-panel:nth-child(2),
  .admin-panel:nth-child(3) {
    grid-column: auto;
  }

  .admin-rail {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-status {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .admin-shell {
    padding-inline: 14px;
  }

  .admin-hero {
    min-height: 360px;
    align-content: center;
  }

  .admin-hero img {
    display: none;
  }

  .admin-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid,
  .form-grid .wide {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .panel-actions {
    display: grid;
  }
}

/* Mueen-inspired direction: formal navy, clean spacing, blue actions */
:root {
  --ink: #13202c;
  --muted: #6d7884;
  --paper: #f4f7f8;
  --surface: #ffffff;
  --line: rgba(19, 32, 44, 0.12);
  --teal: #2f7bff;
  --teal-dark: #12345a;
  --saffron: #3f7cff;
  --purple: #456da8;
  --violet-deep: #0f2942;
  --black: #071526;
  --shadow: 0 28px 82px rgba(15, 41, 66, 0.14);
}

body {
  background:
    linear-gradient(180deg, rgba(47, 123, 255, 0.06), transparent 420px),
    var(--paper);
}

.scroll-meter {
  background: linear-gradient(90deg, #2f7bff, #75b5ff, #1b3f74);
}

.site-header {
  color: white;
}

.site-header:not(.scrolled) {
  background: linear-gradient(180deg, rgba(7, 21, 38, 0.82), rgba(7, 21, 38, 0));
}

.site-header.scrolled {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
}

.icon-button {
  color: white;
  background: #3f7cff;
}

.site-header.scrolled .icon-button {
  color: white;
  background: #2f7bff;
}

.hero {
  min-height: 88svh;
  background:
    radial-gradient(1200px 820px at 4% 52%, rgba(87, 116, 148, 0.52), transparent 58%),
    linear-gradient(115deg, rgba(7, 21, 38, 0.86), rgba(15, 41, 66, 0.96) 48%, #0f2942),
    #0f2942;
}

.hero::before {
  inset: 0;
  background:
    radial-gradient(circle at 9% 51%, transparent 0 27%, rgba(255, 255, 255, 0.08) 27.2% 42%, transparent 42.2%),
    radial-gradient(circle at 18% 49%, transparent 0 38%, rgba(47, 123, 255, 0.14) 38.2% 55%, transparent 55.2%);
  opacity: 1;
}

.hero::after {
  inset: 0;
  height: auto;
  background:
    linear-gradient(90deg, rgba(47, 123, 255, 0.12), transparent 34%),
    linear-gradient(180deg, transparent 76%, rgba(0, 0, 0, 0.2));
}

.hero-mark {
  left: clamp(-88px, -3vw, -30px);
  top: 20%;
  width: min(42vw, 620px);
  opacity: 0.24;
  filter: grayscale(1) brightness(2.1) saturate(0.6);
}

.hero-lockup {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

.hero-lockup img {
  filter: saturate(0.75) brightness(1.1);
}

.eyebrow,
.section-heading span,
.section-kicker,
.portal-card small,
.resource-grid span,
.service-grid span {
  color: #3f7cff;
}

.hero .eyebrow {
  color: #6ea2ff;
}

.hero h1 span {
  display: block;
  color: #3f7cff;
}

.hero p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.82);
}

.button.primary {
  color: white;
  background: transparent;
  border: 2px solid #3f7cff;
  box-shadow: none;
}

.button.primary:hover {
  background: #3f7cff;
  box-shadow: 0 18px 44px rgba(63, 124, 255, 0.28);
}

.button.secondary {
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.54);
  background: rgba(255, 255, 255, 0.04);
}

.button.ghost {
  color: var(--ink);
  background: white;
}

.band {
  background: linear-gradient(180deg, #ffffff 0, #f4f7f8 100%);
}

.section {
  background: transparent;
}

.portal-card,
.partner-row article,
.service-grid article,
.resource-grid article,
.course-list article,
.principle-grid article,
.stats article,
.admin-panel,
.admin-status article,
.admin-rail {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 64px rgba(15, 41, 66, 0.08);
}

.portal-card::before,
.partner-row article::before,
.service-grid article::before {
  background: linear-gradient(90deg, #3f7cff, #7bb7ff);
}

.portal-card small {
  color: #12345a;
  background: rgba(63, 124, 255, 0.1);
}

.portal-card svg,
.service-grid svg,
.panel-head > svg {
  color: #3f7cff;
  background: rgba(63, 124, 255, 0.1);
}

.portal-card:hover,
.partner-row article:hover,
.service-grid article:hover {
  box-shadow: 0 26px 78px rgba(15, 41, 66, 0.15);
}

.accent-card {
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.14), transparent 34%),
    linear-gradient(135deg, #153d6d, #2f7bff);
  box-shadow: 0 26px 80px rgba(47, 123, 255, 0.24);
}

.accent-card small {
  color: white;
  background: rgba(255, 255, 255, 0.16);
}

.join {
  background:
    radial-gradient(circle at 14% 50%, rgba(255, 255, 255, 0.1), transparent 38%),
    linear-gradient(135deg, #0f2942, #173b66 70%, #2f7bff);
}

.join .section-kicker,
.join-actions svg {
  color: #8ebaff;
}

.join-actions a:hover,
.join-actions button:hover {
  color: #8ebaff;
}

.inner-page,
.course-page {
  background: linear-gradient(180deg, #0f2942 0, #0f2942 430px, var(--paper) 430px), var(--paper);
}

.page-hero,
.course-hero {
  background:
    radial-gradient(circle at 20% 45%, rgba(63, 124, 255, 0.22), transparent 38%),
    linear-gradient(135deg, #071526, #0f2942 72%);
}

.youtube-panel,
.mock-video {
  background: linear-gradient(135deg, rgba(7, 21, 38, 0.92), rgba(47, 123, 255, 0.56)), #071526;
}

.youtube-panel svg,
.mock-video button {
  color: white;
  background: #3f7cff;
}

.video-progress span {
  background: linear-gradient(90deg, #3f7cff, #75b5ff);
}

.admin-page {
  background:
    linear-gradient(180deg, #071526 0, #071526 560px, #f4f7f8 560px),
    #f4f7f8;
}

.admin-hero {
  color: white;
  position: relative;
  overflow: hidden;
}

.admin-hero::before {
  content: "H2O   CO2   NaCl   C6H6";
  position: absolute;
  inset: 18% auto auto 8%;
  direction: ltr;
  max-width: 460px;
  color: rgba(34, 199, 201, 0.14);
  font-size: clamp(2rem, 5vw, 5.8rem);
  font-weight: 700;
  line-height: 1.3;
  transform: rotate(-8deg);
  pointer-events: none;
}

.admin-hero > * {
  position: relative;
  z-index: 1;
}

.panel-actions .publish {
  color: white;
  background: #3f7cff;
}

@media (max-width: 680px) {
  .hero {
    min-height: 84svh;
  }

  .hero-mark {
    left: -58vw;
    top: 36%;
    width: 118vw;
    opacity: 0.16;
  }

  .hero h1 span {
    display: inline;
  }
}

/* Chemistry identity direction */
:root {
  --ink: #111a1f;
  --muted: #65736f;
  --paper: #eef7f4;
  --surface: #fffdf8;
  --line: rgba(17, 26, 31, 0.12);
  --teal: #22c7c9;
  --teal-dark: #0d7077;
  --saffron: #f29b37;
  --purple: #7b50aa;
  --violet-deep: #160d22;
  --black: #050307;
  --shadow: 0 26px 78px rgba(10, 32, 35, 0.16);
}

body {
  background:
    linear-gradient(180deg, rgba(34, 199, 201, 0.1), transparent 520px),
    linear-gradient(90deg, rgba(123, 80, 170, 0.04), transparent 42%),
    var(--paper);
}

.scroll-meter {
  background: linear-gradient(90deg, var(--teal), var(--saffron), var(--purple));
}

.site-header:not(.scrolled) {
  background: linear-gradient(180deg, rgba(5, 3, 7, 0.72), rgba(5, 3, 7, 0));
}

.site-header.scrolled {
  color: var(--ink);
  background: rgba(255, 253, 248, 0.94);
}

.icon-button,
.site-header.scrolled .icon-button {
  color: white;
  background: linear-gradient(135deg, var(--teal-dark), var(--purple));
}

.hero {
  min-height: 88svh;
  background:
    linear-gradient(112deg, rgba(5, 3, 7, 0.76), rgba(12, 8, 18, 0.92) 48%, #130b1d 84%),
    #050307;
}

.hero::before {
  background:
    linear-gradient(30deg, transparent 48%, rgba(34, 199, 201, 0.1) 49%, rgba(34, 199, 201, 0.1) 50%, transparent 51%),
    linear-gradient(150deg, transparent 48%, rgba(123, 80, 170, 0.14) 49%, rgba(123, 80, 170, 0.14) 50%, transparent 51%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 118px 68px, 118px 68px, 86px 86px;
  opacity: 0.72;
}

.hero::after {
  background:
    linear-gradient(90deg, rgba(34, 199, 201, 0.15), transparent 36%),
    linear-gradient(0deg, rgba(123, 80, 170, 0.22), transparent 44%);
}

.hero-mark {
  left: clamp(-112px, -5vw, -46px);
  top: 18%;
  width: min(46vw, 690px);
  opacity: 0.4;
  filter: saturate(0.92) brightness(0.92);
}

.chem-visual {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(52vw, 760px);
  z-index: 1;
  pointer-events: none;
  opacity: 0.92;
}

.chem-visual .atom,
.chem-visual .bond,
.chem-visual .formula {
  position: absolute;
  display: block;
}

.chem-visual .atom {
  width: 22px;
  aspect-ratio: 1;
  border: 2px solid rgba(34, 199, 201, 0.92);
  border-radius: 50%;
  background: rgba(34, 199, 201, 0.16);
  box-shadow: 0 0 28px rgba(34, 199, 201, 0.32);
}

.chem-visual .a1 { left: 16%; top: 34%; }
.chem-visual .a2 { left: 38%; top: 25%; border-color: rgba(242, 155, 55, 0.92); background: rgba(242, 155, 55, 0.18); box-shadow: 0 0 28px rgba(242, 155, 55, 0.28); }
.chem-visual .a3 { left: 56%; top: 42%; }
.chem-visual .a4 { left: 30%; top: 58%; border-color: rgba(123, 80, 170, 0.95); background: rgba(123, 80, 170, 0.2); box-shadow: 0 0 28px rgba(123, 80, 170, 0.3); }

.chem-visual .bond {
  height: 2px;
  transform-origin: right center;
  background: linear-gradient(90deg, rgba(34, 199, 201, 0), rgba(34, 199, 201, 0.65), rgba(242, 155, 55, 0.6));
}

.chem-visual .b1 { left: 18%; top: 35.4%; width: 178px; rotate: -20deg; }
.chem-visual .b2 { left: 39%; top: 28%; width: 160px; rotate: 36deg; }
.chem-visual .b3 { left: 31%; top: 57%; width: 198px; rotate: -34deg; }

.chem-visual .formula {
  direction: ltr;
  color: rgba(255, 255, 255, 0.34);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.65rem);
}

.chem-visual .f1 { left: 12%; top: 24%; }
.chem-visual .f2 { left: 60%; top: 29%; color: rgba(242, 155, 55, 0.42); }
.chem-visual .f3 { left: 42%; top: 66%; color: rgba(34, 199, 201, 0.38); }

.hero-lockup {
  border-color: rgba(34, 199, 201, 0.24);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 46px rgba(34, 199, 201, 0.1);
}

.hero-lockup img {
  filter: saturate(1.05);
}

.eyebrow,
.section-heading span,
.section-kicker,
.portal-card small,
.resource-grid span,
.service-grid span {
  color: var(--saffron);
}

.hero .eyebrow,
.hero h1 span {
  color: var(--teal);
}

.button.primary {
  color: #061315;
  border: 0;
  background: linear-gradient(135deg, var(--teal), #b7f4e8);
  box-shadow: 0 18px 46px rgba(34, 199, 201, 0.24);
}

.button.primary:hover {
  background: linear-gradient(135deg, #b7f4e8, var(--teal));
  box-shadow: 0 24px 54px rgba(34, 199, 201, 0.3);
}

.button.secondary {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.07);
}

.band {
  background:
    linear-gradient(180deg, rgba(238, 247, 244, 0.96), #f9fbf8 88%),
    var(--paper);
}

.section-heading h2 {
  color: var(--ink);
}

.portal-card,
.partner-row article,
.service-grid article,
.resource-grid article,
.course-list article,
.principle-grid article,
.stats article,
.admin-panel,
.admin-status article,
.admin-rail {
  border-color: rgba(17, 26, 31, 0.1);
  background:
    linear-gradient(135deg, rgba(34, 199, 201, 0.045), transparent 36%),
    rgba(255, 253, 248, 0.96);
  box-shadow: 0 22px 64px rgba(10, 32, 35, 0.09);
}

.portal-card::before,
.partner-row article::before,
.service-grid article::before {
  background: linear-gradient(90deg, var(--teal), var(--saffron), var(--purple));
}

.portal-card small {
  color: var(--teal-dark);
  background: rgba(34, 199, 201, 0.12);
}

.portal-card svg,
.service-grid svg,
.panel-head > svg,
.admin-rail svg {
  color: var(--purple);
  background: rgba(123, 80, 170, 0.1);
}

.portal-card h3,
.partner-row h3,
.service-grid h2,
.resource-grid h3,
.course-list h2,
.panel-head h2 {
  color: var(--ink);
}

.portal-card:hover,
.partner-row article:hover,
.service-grid article:hover {
  box-shadow: 0 28px 78px rgba(10, 32, 35, 0.16);
}

.accent-card {
  background:
    linear-gradient(135deg, rgba(242, 155, 55, 0.18), transparent 42%),
    linear-gradient(135deg, #231333, #0d7077);
  box-shadow: 0 26px 80px rgba(13, 112, 119, 0.22);
}

.accent-card::before {
  background: var(--saffron);
}

.accent-card h3,
.accent-card p,
.accent-card small,
.accent-card svg {
  color: white;
}

.accent-card small,
.accent-card svg {
  background: rgba(255, 255, 255, 0.14);
}

.join {
  background:
    linear-gradient(135deg, rgba(34, 199, 201, 0.14), transparent 42%),
    linear-gradient(315deg, rgba(242, 155, 55, 0.12), transparent 38%),
    #100919;
}

.join .section-kicker,
.join-actions svg,
.join-actions a:hover,
.join-actions button:hover {
  color: var(--teal);
}

.inner-page,
.course-page {
  background: linear-gradient(180deg, #100919 0, #100919 430px, var(--paper) 430px), var(--paper);
}

.page-hero,
.course-hero {
  background:
    linear-gradient(30deg, transparent 48%, rgba(34, 199, 201, 0.07) 49%, rgba(34, 199, 201, 0.07) 50%, transparent 51%),
    linear-gradient(135deg, #050307, #160d22 70%);
  background-size: 120px 70px, auto;
}

.youtube-panel,
.mock-video {
  background:
    linear-gradient(135deg, rgba(5, 3, 7, 0.9), rgba(13, 112, 119, 0.72)),
    #050307;
}

.youtube-panel svg,
.mock-video button,
.panel-actions .publish {
  color: #061315;
  background: var(--teal);
}

.video-progress span {
  background: linear-gradient(90deg, var(--teal), var(--saffron));
}

.admin-page {
  background:
    linear-gradient(180deg, #100919 0, #100919 560px, #eef7f4 560px),
    #eef7f4;
}

.admin-hero {
  color: white;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: rgba(34, 199, 201, 0.72);
  box-shadow: 0 0 0 3px rgba(34, 199, 201, 0.16);
}

@media (prefers-reduced-motion: no-preference) {
  .chem-visual .atom {
    animation: moleculePulse 3.6s ease-in-out infinite;
  }

  .chem-visual .a2 { animation-delay: 420ms; }
  .chem-visual .a3 { animation-delay: 780ms; }
  .chem-visual .a4 { animation-delay: 1120ms; }

  .chem-visual .formula {
    animation: formulaFloat 5.2s ease-in-out infinite alternate;
  }

  @keyframes moleculePulse {
    50% { scale: 1.22; box-shadow: 0 0 38px rgba(34, 199, 201, 0.42); }
  }

  @keyframes formulaFloat {
    to { translate: 0 -10px; opacity: 0.72; }
  }
}

@media (max-width: 680px) {
  .hero {
    min-height: 86svh;
  }

  .hero-mark {
    left: -62vw;
    top: 37%;
    width: 122vw;
    opacity: 0.2;
    filter: saturate(0.9);
  }

  .chem-visual {
    width: 100vw;
    opacity: 0.55;
  }

  .chem-visual .a1 { left: 9%; top: 28%; }
  .chem-visual .a2 { left: 74%; top: 24%; }
  .chem-visual .a3 { left: 82%; top: 57%; }
  .chem-visual .a4 { left: 18%; top: 66%; }
  .chem-visual .b1 { left: 11%; top: 30%; width: 240px; rotate: -8deg; }
  .chem-visual .b2 { left: 24%; top: 65%; width: 210px; rotate: -22deg; }
  .chem-visual .b3 { display: none; }
  .chem-visual .formula { font-size: 0.9rem; }
  .chem-visual .f1 { left: 8%; top: 20%; }
  .chem-visual .f2 { left: 69%; top: 17%; }
  .chem-visual .f3 { left: 54%; top: 70%; }
}

/* Extra chemistry energy */
.molecule-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.72;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-copy {
  z-index: 4;
}

.chem-visual {
  z-index: 2;
}

.chem-ribbon {
  position: absolute;
  inset: auto 0 28px;
  z-index: 3;
  overflow: hidden;
  padding-block: 10px;
  color: rgba(255, 255, 255, 0.28);
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.chem-ribbon-track {
  display: flex;
  width: max-content;
  gap: clamp(28px, 5vw, 72px);
  direction: ltr;
  font-weight: 700;
  letter-spacing: 0;
  animation: formulaTicker 24s linear infinite;
}

.chem-ribbon span:nth-child(3n + 1) { color: rgba(34, 199, 201, 0.46); }
.chem-ribbon span:nth-child(3n + 2) { color: rgba(242, 155, 55, 0.42); }
.chem-ribbon span:nth-child(3n + 3) { color: rgba(180, 135, 225, 0.42); }

.hero-lockup {
  position: relative;
  overflow: hidden;
}

.hero-lockup::after {
  content: "";
  position: absolute;
  inset: -38px auto auto -28px;
  width: 78px;
  aspect-ratio: 1;
  border: 1px solid rgba(34, 199, 201, 0.42);
  border-right-color: transparent;
  border-radius: 50%;
  animation: orbitSpin 7s linear infinite;
}

.hero h1 {
  text-shadow: 0 0 34px rgba(34, 199, 201, 0.12);
}

.button.primary {
  position: relative;
  overflow: hidden;
}

.button.primary::after {
  content: "";
  position: absolute;
  inset: -80% auto -80% -34%;
  width: 32%;
  rotate: 16deg;
  background: rgba(255, 255, 255, 0.46);
  transform: translateX(-220%);
}

.button.primary:hover::after {
  animation: reagentSweep 760ms ease;
}

.portal-card::after,
.partner-row article::after,
.service-grid article::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(30deg, transparent 48%, rgba(34, 199, 201, 0.11) 49%, rgba(34, 199, 201, 0.11) 50%, transparent 51%),
    linear-gradient(150deg, transparent 48%, rgba(123, 80, 170, 0.09) 49%, rgba(123, 80, 170, 0.09) 50%, transparent 51%);
  background-size: 62px 36px;
  transition: opacity 220ms ease, transform 220ms ease;
  transform: translateY(8px);
  pointer-events: none;
}

.portal-card > *,
.partner-row article > *,
.service-grid article > * {
  position: relative;
  z-index: 1;
}

.portal-card:hover::after,
.partner-row article:hover::after,
.service-grid article:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.portal-card:hover svg,
.service-grid article:hover svg {
  animation: iconReact 820ms cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .chem-visual .bond {
    background-size: 220% 100%;
    animation: bondFlow 2.8s linear infinite;
  }

  .hero:hover .chem-visual .atom {
    animation-duration: 1.8s;
  }

  @keyframes formulaTicker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  @keyframes orbitSpin {
    to { rotate: 360deg; }
  }

  @keyframes reagentSweep {
    to { transform: translateX(620%); }
  }

  @keyframes bondFlow {
    to { background-position: 220% 0; }
  }

  @keyframes iconReact {
    35% { scale: 1.16; rotate: -6deg; }
    70% { scale: 0.96; rotate: 3deg; }
  }
}

@media (max-width: 680px) {
  .molecule-canvas {
    opacity: 0.52;
  }

  .chem-ribbon {
    bottom: 10px;
    font-size: 0.84rem;
  }
}

/* Final premium chemistry pass */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 800;
}

.brand-mark img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(34, 199, 201, 0.36);
  background: #050307;
  box-shadow: 0 0 26px rgba(34, 199, 201, 0.18);
}

.brand-mark span {
  direction: ltr;
  white-space: nowrap;
}

#partners {
  position: relative;
  max-width: none;
  overflow: hidden;
  margin-inline: 0;
  color: white;
  background:
    radial-gradient(720px 420px at 82% 15%, rgba(34, 199, 201, 0.2), transparent 58%),
    radial-gradient(620px 480px at 12% 70%, rgba(123, 80, 170, 0.28), transparent 62%),
    linear-gradient(135deg, #060407, #11091b 54%, #062c30);
}

#partners::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(30deg, transparent 48%, rgba(34, 199, 201, 0.08) 49%, rgba(34, 199, 201, 0.08) 50%, transparent 51%),
    linear-gradient(150deg, transparent 48%, rgba(242, 155, 55, 0.06) 49%, rgba(242, 155, 55, 0.06) 50%, transparent 51%);
  background-size: 92px 54px;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}

#partners::after {
  content: "H2O  CO2  NaCl  C6H6";
  position: absolute;
  left: 6%;
  bottom: 8%;
  direction: ltr;
  color: rgba(255, 255, 255, 0.06);
  font-size: clamp(2.4rem, 6vw, 6.8rem);
  font-weight: 800;
  transform: rotate(-7deg);
}

#partners > * {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin-inline: auto;
}

#partners .section-heading h2,
#partners .partner-row h3 {
  color: white;
}

#partners .section-heading span {
  color: var(--saffron);
}

#partners .partner-row article {
  min-height: 280px;
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.04);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

#partners .partner-row p {
  color: rgba(255, 255, 255, 0.68);
}

#partners .partner-row img {
  height: 142px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.9);
}

#partners .placeholder svg {
  color: var(--teal);
}

.join.section {
  position: relative;
  max-width: none;
  min-height: 460px;
  margin: 0 clamp(18px, 5vw, 72px) clamp(54px, 7vw, 90px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(520px 320px at 16% 40%, rgba(34, 199, 201, 0.24), transparent 64%),
    radial-gradient(620px 360px at 84% 72%, rgba(242, 155, 55, 0.16), transparent 62%),
    linear-gradient(135deg, #050307, #120a1b 44%, #082f33);
  box-shadow: 0 34px 110px rgba(10, 32, 35, 0.24);
}

.join.section::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 18% 50%, transparent 0 9%, rgba(34, 199, 201, 0.16) 9.2% 9.8%, transparent 10%),
    radial-gradient(circle at 32% 32%, transparent 0 7%, rgba(242, 155, 55, 0.15) 7.2% 7.8%, transparent 8%),
    linear-gradient(30deg, transparent 48%, rgba(255,255,255,.06) 49%, rgba(255,255,255,.06) 50%, transparent 51%);
  background-size: auto, auto, 120px 70px;
  opacity: 0.75;
  animation: joinChemDrift 18s linear infinite;
}

.join.section::after {
  content: "Join the reaction";
  position: absolute;
  left: 6%;
  bottom: 10%;
  direction: ltr;
  color: rgba(255, 255, 255, 0.07);
  font-size: clamp(2rem, 7vw, 7.4rem);
  font-weight: 800;
  line-height: 1;
}

.join.section > * {
  position: relative;
  z-index: 1;
}

.join h2 {
  max-width: 860px;
  font-size: clamp(2.3rem, 5.6vw, 5.6rem);
}

.join p {
  max-width: 680px;
  font-size: clamp(1.04rem, 1.7vw, 1.3rem);
}

.join-actions {
  align-self: stretch;
  display: grid;
  align-content: center;
  border: 0;
}

.join-actions a {
  min-height: 86px;
  padding: 0 26px;
  border: 1px solid rgba(34, 199, 201, 0.38);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(34, 199, 201, 0.16), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 70px rgba(34,199,201,.12);
}

.join-actions a:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 28px 90px rgba(34,199,201,.22);
}

.site-footer.advanced-footer {
  position: relative;
  max-width: none;
  margin: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 26px;
  align-items: end;
  padding: clamp(42px, 6vw, 78px) clamp(18px, 6vw, 86px);
  color: white;
  border-top: 0;
  background:
    radial-gradient(620px 320px at 88% 16%, rgba(34, 199, 201, 0.18), transparent 62%),
    linear-gradient(135deg, #050307, #100919 72%);
}

.site-footer.advanced-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(30deg, transparent 48%, rgba(34, 199, 201, 0.065) 49%, rgba(34, 199, 201, 0.065) 50%, transparent 51%),
    linear-gradient(150deg, transparent 48%, rgba(123, 80, 170, 0.08) 49%, rgba(123, 80, 170, 0.08) 50%, transparent 51%);
  background-size: 84px 48px;
  opacity: 0.78;
}

.advanced-footer > * {
  position: relative;
  z-index: 1;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-brand img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(34, 199, 201, 0.35);
  box-shadow: 0 0 42px rgba(34, 199, 201, 0.16);
}

.advanced-footer strong {
  color: white;
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.advanced-footer p {
  color: rgba(255, 255, 255, 0.66);
}

.footer-links {
  justify-content: flex-end;
  gap: 10px;
}

.footer-links a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.footer-formulas {
  grid-column: 1 / -1;
  display: flex;
  gap: clamp(16px, 4vw, 54px);
  direction: ltr;
  color: rgba(34, 199, 201, 0.34);
  font-weight: 800;
  font-size: clamp(1rem, 2vw, 1.8rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
}

.footer-copy {
  grid-column: 1 / -1;
  margin: 0;
}

.page-hero,
.course-hero {
  position: relative;
  overflow: hidden;
}

.page-hero::before,
.course-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 240px at 82% 28%, rgba(34, 199, 201, 0.16), transparent 62%),
    radial-gradient(520px 280px at 18% 70%, rgba(123, 80, 170, 0.2), transparent 60%);
}

.page-hero::after,
.course-hero::after {
  content: "H2O  NaCl  C6H6";
  position: absolute;
  left: 8%;
  bottom: 12%;
  direction: ltr;
  color: rgba(255, 255, 255, 0.07);
  font-size: clamp(2.4rem, 6vw, 7rem);
  font-weight: 800;
}

.about-page .page-hero {
  background:
    radial-gradient(520px 320px at 78% 24%, rgba(34, 199, 201, 0.2), transparent 62%),
    radial-gradient(620px 420px at 16% 70%, rgba(123, 80, 170, 0.28), transparent 64%),
    linear-gradient(30deg, transparent 48%, rgba(34, 199, 201, 0.07) 49%, rgba(34, 199, 201, 0.07) 50%, transparent 51%),
    linear-gradient(135deg, #050307, #160d22 74%);
  background-size: auto, auto, 120px 70px, auto;
}

.about-page .page-hero::after {
  content: "VISION  IMPACT  COMMUNITY";
}

.services-page .page-hero {
  background:
    radial-gradient(520px 320px at 78% 24%, rgba(242, 155, 55, 0.18), transparent 62%),
    radial-gradient(620px 420px at 16% 70%, rgba(34, 199, 201, 0.22), transparent 64%),
    linear-gradient(30deg, transparent 48%, rgba(242, 155, 55, 0.07) 49%, rgba(242, 155, 55, 0.07) 50%, transparent 51%),
    linear-gradient(135deg, #060407, #122a2d 74%);
  background-size: auto, auto, 120px 70px, auto;
}

.services-page .page-hero::after {
  content: "CONSULT  FORMS  ADS";
  color: rgba(242, 155, 55, 0.1);
}

.courses-page .page-hero,
.watch-page .course-hero {
  background:
    radial-gradient(520px 320px at 78% 24%, rgba(123, 80, 170, 0.28), transparent 62%),
    radial-gradient(620px 420px at 16% 70%, rgba(34, 199, 201, 0.18), transparent 64%),
    linear-gradient(30deg, transparent 48%, rgba(123, 80, 170, 0.09) 49%, rgba(123, 80, 170, 0.09) 50%, transparent 51%),
    linear-gradient(135deg, #050307, #180e25 74%);
  background-size: auto, auto, 120px 70px, auto;
}

.courses-page .page-hero::after {
  content: "VIDEO  WATCH  CERTIFICATE";
  color: rgba(180, 135, 225, 0.1);
}

.library-page .page-hero {
  background:
    radial-gradient(520px 320px at 78% 24%, rgba(34, 199, 201, 0.18), transparent 62%),
    radial-gradient(620px 420px at 16% 70%, rgba(242, 155, 55, 0.2), transparent 64%),
    linear-gradient(30deg, transparent 48%, rgba(34, 199, 201, 0.07) 49%, rgba(34, 199, 201, 0.07) 50%, transparent 51%),
    linear-gradient(135deg, #050307, #13231f 74%);
  background-size: auto, auto, 120px 70px, auto;
}

.library-page .page-hero::after {
  content: "PDF  NOTES  GUIDE";
  color: rgba(34, 199, 201, 0.1);
}

.watch-page .course-hero::after {
  content: "WATCH  COMPLETE  CERTIFICATE";
  color: rgba(34, 199, 201, 0.09);
}

.page-hero > *,
.course-hero > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes joinChemDrift {
    to { transform: translate3d(48px, -24px, 0); }
  }
}

@media (max-width: 980px) {
  .brand-mark {
    display: inline-flex;
    justify-self: start;
  }

  .brand-mark span {
    font-size: 0.9rem;
  }

  .brand-mark img {
    width: 32px;
    height: 32px;
  }

  .site-nav {
    top: calc(var(--header-height) + 10px);
    inset-inline: 14px;
    width: auto;
    padding: 16px;
    gap: 10px;
    border-radius: 8px;
    border: 1px solid rgba(34, 199, 201, 0.28);
    background:
      radial-gradient(520px 240px at 82% 10%, rgba(34, 199, 201, 0.16), transparent 62%),
      linear-gradient(135deg, rgba(7, 12, 18, 0.96), rgba(16, 9, 25, 0.96));
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.38);
  }

  .site-nav.open {
    display: grid;
  }

  .site-nav a {
    min-height: 58px;
    justify-content: flex-start;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.045);
    font-size: 1.02rem;
  }

  .site-nav a::before {
    content: "";
    width: 10px;
    aspect-ratio: 1;
    margin-inline-end: 10px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 20px rgba(34, 199, 201, 0.46);
  }

  .site-nav a:nth-child(2n)::before {
    background: var(--saffron);
    box-shadow: 0 0 20px rgba(242, 155, 55, 0.42);
  }

  .site-nav a:hover {
    transform: translateX(-4px);
    border-color: rgba(34, 199, 201, 0.32);
    background: rgba(34, 199, 201, 0.1);
  }

  #partners .partner-row {
    grid-template-columns: 1fr;
  }

  .join.section {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .site-footer.advanced-footer {
    grid-template-columns: 1fr;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .brand-mark {
    display: inline-flex;
  }

  .brand-mark span {
    max-width: 136px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #partners {
    padding-inline: 18px;
  }

  #partners .partner-row article {
    min-height: 240px;
  }

  .join.section {
    margin-inline: 18px;
    padding: 34px 22px;
  }

  .join h2 {
    font-size: clamp(2rem, 10vw, 3.2rem);
  }

  .footer-brand {
    align-items: flex-start;
  }

  .footer-links,
  .footer-formulas {
    gap: 10px;
  }
}

/* Cleanup after visual review: elegant chemistry, no noisy lights or formula text */
.molecule-canvas,
.chem-visual,
.chem-ribbon,
.hero .hero-mark,
.footer-formulas,
#partners::after,
.join.section::after,
.page-hero::after,
.course-hero::after,
.admin-hero::before {
  display: none !important;
}

.hero {
  min-height: 86svh;
  background:
    radial-gradient(840px 520px at 14% 52%, rgba(34, 199, 201, 0.14), transparent 62%),
    radial-gradient(760px 480px at 78% 62%, rgba(123, 80, 170, 0.16), transparent 64%),
    linear-gradient(120deg, #050307 0%, #120a1a 54%, #082e31 100%);
}

.hero::before {
  background:
    radial-gradient(circle at 18% 52%, transparent 0 18%, rgba(34, 199, 201, 0.1) 18.2% 18.8%, transparent 19%),
    radial-gradient(circle at 26% 42%, transparent 0 12%, rgba(242, 155, 55, 0.08) 12.2% 12.8%, transparent 13%),
    radial-gradient(circle at 9% 64%, transparent 0 10%, rgba(123, 80, 170, 0.1) 10.2% 10.8%, transparent 11%);
  opacity: 0.86;
}

.hero::after {
  background:
    linear-gradient(90deg, rgba(4, 26, 29, 0.54), transparent 38%),
    linear-gradient(0deg, rgba(5, 3, 7, 0.22), transparent 42%);
}

.hero-copy {
  width: min(690px, 100%);
}

.hero h1 {
  max-width: 760px;
  font-size: clamp(2.65rem, 4.8vw, 4.95rem);
  line-height: 1.08;
  text-shadow: none;
}

.hero p:not(.eyebrow) {
  max-width: 620px;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}

.hero-structure {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: min(48vw, 720px);
  pointer-events: none;
  opacity: 0.88;
}

.hero-structure .hex {
  position: absolute;
  width: clamp(120px, 16vw, 250px);
  aspect-ratio: 1;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  border: 1px solid rgba(34, 199, 201, 0.34);
  background:
    linear-gradient(135deg, rgba(34, 199, 201, 0.08), rgba(123, 80, 170, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.hero-structure .h1 { left: 9%; top: 25%; }
.hero-structure .h2 { left: 29%; top: 42%; width: clamp(94px, 13vw, 190px); opacity: 0.72; }
.hero-structure .h3 { left: 6%; top: 57%; width: clamp(80px, 10vw, 150px); opacity: 0.56; }

.hero-structure .node {
  position: absolute;
  width: 11px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.72;
}

.hero-structure .n1 { left: 24%; top: 38%; }
.hero-structure .n2 { left: 48%; top: 52%; background: var(--saffron); }
.hero-structure .n3 { left: 18%; top: 70%; background: var(--purple); }

.button.primary {
  box-shadow: 0 16px 36px rgba(34, 199, 201, 0.16);
}

.button.primary::after {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-structure .hex {
    animation: cleanChemFloat 9s ease-in-out infinite alternate;
  }

  .hero-structure .h2 {
    animation-delay: 1.2s;
  }

  .hero-structure .h3 {
    animation-delay: 2.1s;
  }

  @keyframes cleanChemFloat {
    to { transform: translate3d(0, -14px, 0) rotate(4deg); }
  }
}

@media (max-width: 980px) {
  .hero h1 {
    font-size: clamp(2.45rem, 8.4vw, 4rem);
  }

  .hero-structure {
    width: 100vw;
    opacity: 0.45;
  }
}

@media (max-width: 680px) {
  .hero {
    min-height: 84svh;
  }

  .hero h1 {
    font-size: clamp(2.35rem, 10.6vw, 3.55rem);
  }

  .hero-structure .h1 { left: -12%; top: 28%; }
  .hero-structure .h2 { left: 55%; top: 27%; }
  .hero-structure .h3 { left: 10%; top: 66%; }
}

/* Complete pages polish: clean chemistry identity across every screen */
:root {
  --ink: #10201f;
  --muted: #637573;
  --paper: #eef8f5;
  --surface: #fffdf8;
  --line: rgba(16, 32, 31, 0.12);
  --teal: #25c7c9;
  --teal-dark: #0b7478;
  --saffron: #f3a33c;
  --purple: #7753aa;
  --violet-deep: #130a1d;
  --black: #040307;
  --shadow: 0 24px 72px rgba(9, 33, 34, 0.12);
  --header-height: 74px;
}

body {
  background:
    linear-gradient(180deg, rgba(37, 199, 201, 0.08), transparent 420px),
    linear-gradient(90deg, rgba(119, 83, 170, 0.045), transparent 56%),
    var(--paper);
}

.scroll-meter {
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--saffron), var(--purple));
}

.site-header {
  color: white;
  grid-template-columns: auto 1fr;
  padding-inline: clamp(18px, 5vw, 72px);
}

.site-header:not(.scrolled) {
  background: linear-gradient(180deg, rgba(4, 3, 7, 0.72), rgba(4, 3, 7, 0));
}

.site-header.scrolled {
  color: var(--ink);
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 1px 0 rgba(16, 32, 31, 0.08), 0 18px 50px rgba(9, 33, 34, 0.06);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 800;
}

.brand-mark img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(37, 199, 201, 0.4);
  background: var(--black);
  box-shadow: none;
}

.brand-mark span {
  direction: ltr;
  white-space: nowrap;
}

.site-nav {
  justify-content: center;
  gap: clamp(12px, 2.1vw, 30px);
}

.site-nav a {
  opacity: 0.92;
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.site-nav a:hover {
  color: var(--teal);
  opacity: 1;
}

.icon-button {
  color: white;
  background: linear-gradient(135deg, rgba(37, 199, 201, 0.92), rgba(119, 83, 170, 0.92));
  box-shadow: 0 18px 40px rgba(9, 33, 34, 0.18);
}

.hero {
  min-height: 84svh;
  align-items: center;
  padding-top: calc(var(--header-height) + 34px);
  background:
    linear-gradient(120deg, rgba(4, 3, 7, 0.42), rgba(4, 3, 7, 0.88) 42%, rgba(11, 116, 120, 0.46)),
    linear-gradient(135deg, #040307, #130a1d 58%, #082c2f);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(30deg, transparent 49%, rgba(37, 199, 201, 0.07) 49.5%, rgba(37, 199, 201, 0.07) 50.5%, transparent 51%),
    linear-gradient(150deg, transparent 49%, rgba(119, 83, 170, 0.07) 49.5%, rgba(119, 83, 170, 0.07) 50.5%, transparent 51%);
  background-size: 150px 86px;
  opacity: 0.46;
}

.hero::after {
  height: 28%;
  background: linear-gradient(0deg, rgba(37, 199, 201, 0.14), transparent);
}

.hero-copy {
  width: min(660px, 100%);
  margin-left: auto;
}

.hero h1 {
  max-width: 680px;
  margin-top: 8px;
  font-size: clamp(2.55rem, 4.4vw, 4.45rem);
  line-height: 1.12;
}

.hero h1 span {
  color: var(--teal);
}

.hero p:not(.eyebrow) {
  max-width: 590px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.9;
}

.hero-structure {
  width: min(42vw, 620px);
  opacity: 0.5;
}

.hero-structure .hex {
  border: 0;
  background:
    linear-gradient(135deg, rgba(37, 199, 201, 0.08), rgba(119, 83, 170, 0.08));
  outline: 1px solid rgba(37, 199, 201, 0.26);
  outline-offset: -1px;
  box-shadow: none;
}

.hero-structure .node {
  width: 9px;
  box-shadow: 0 0 0 6px rgba(37, 199, 201, 0.08);
}

.button {
  min-height: 48px;
  border-radius: 999px;
}

.button.primary {
  color: #031214;
  background: linear-gradient(135deg, var(--teal), #a6f2e9);
  box-shadow: 0 18px 42px rgba(37, 199, 201, 0.2);
}

.button.primary.dark,
.panel-actions .publish {
  color: #031214;
  background: linear-gradient(135deg, var(--teal), #9eece5);
}

.button.secondary {
  background: rgba(255, 255, 255, 0.08);
}

.button.ghost {
  color: var(--ink);
  border-color: rgba(16, 32, 31, 0.14);
  background: rgba(255, 253, 248, 0.9);
}

.section,
.band {
  padding-block: clamp(62px, 8vw, 104px);
}

.section-heading {
  grid-template-columns: 180px minmax(280px, 1fr);
  gap: clamp(22px, 5vw, 64px);
}

.section-heading span,
.section-kicker,
.portal-card small,
.resource-grid span,
.service-grid span,
.hero .eyebrow {
  color: var(--saffron);
}

.section-heading h2,
.join h2 {
  max-width: 840px;
  font-size: clamp(1.85rem, 3.5vw, 3.25rem);
  line-height: 1.22;
}

.wide-copy,
.portal-card p,
.partner-row p,
.service-grid p,
.resource-grid p,
.course-list p,
.join p,
.page-hero p:not(.eyebrow),
.course-hero p:not(.eyebrow),
.admin-hero p {
  line-height: 1.9;
}

.portal-card,
.partner-row article,
.service-grid article,
.resource-grid article,
.course-list article,
.principle-grid article,
.stats article,
.admin-panel,
.admin-status article,
.admin-rail,
.video-shell,
.lesson-panel,
.certificate-panel {
  border: 1px solid rgba(16, 32, 31, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37, 199, 201, 0.045), transparent 38%),
    rgba(255, 253, 248, 0.94);
  box-shadow: 0 18px 52px rgba(9, 33, 34, 0.08);
}

.portal-card::after,
.partner-row article::after,
.service-grid article::after {
  display: none;
}

.portal-card::before,
.partner-row article::before,
.service-grid article::before {
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--saffron), var(--purple));
}

.portal-card svg,
.service-grid svg,
.panel-head > svg,
.admin-rail svg,
.principle-grid svg {
  color: var(--teal-dark);
  background: rgba(37, 199, 201, 0.1);
}

.portal-card:hover,
.partner-row article:hover,
.service-grid article:hover,
.resource-grid article:hover,
.course-list article:hover,
.admin-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 74px rgba(9, 33, 34, 0.13);
}

.portal-card h3,
.partner-row h3,
.service-grid h2,
.resource-grid h3,
.course-list h2,
.panel-head h2,
.lesson-panel h2,
.certificate-panel h2 {
  color: var(--ink);
  font-size: clamp(1.18rem, 1.55vw, 1.6rem);
  line-height: 1.45;
}

.partner-row,
.resource-grid {
  gap: 16px;
}

#partners {
  color: white;
  background:
    linear-gradient(135deg, rgba(4, 3, 7, 0.94), rgba(19, 10, 29, 0.92) 54%, rgba(8, 44, 47, 0.92)),
    #040307;
}

#partners::before {
  background:
    linear-gradient(30deg, transparent 49%, rgba(37, 199, 201, 0.06) 49.5%, rgba(37, 199, 201, 0.06) 50.5%, transparent 51%),
    linear-gradient(150deg, transparent 49%, rgba(119, 83, 170, 0.06) 49.5%, rgba(119, 83, 170, 0.06) 50.5%, transparent 51%);
  background-size: 132px 76px;
  opacity: 0.7;
}

#partners .partner-row article {
  min-height: 250px;
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

#partners .section-heading h2,
#partners .partner-row h3 {
  color: white;
}

#partners .partner-row p {
  color: rgba(255, 255, 255, 0.68);
}

#partners .partner-row img {
  height: 126px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.92);
}

.join.section,
.join.band {
  position: relative;
  max-width: none;
  min-height: 390px;
  margin-inline: clamp(18px, 5vw, 72px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: white;
  background:
    linear-gradient(135deg, rgba(37, 199, 201, 0.15), transparent 42%),
    linear-gradient(315deg, rgba(243, 163, 60, 0.12), transparent 38%),
    linear-gradient(135deg, #040307, #130a1d 58%, #082c2f);
  box-shadow: 0 30px 90px rgba(9, 33, 34, 0.2);
}

.join.section::before,
.join.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 45%, transparent 0 11%, rgba(37, 199, 201, 0.13) 11.2% 11.8%, transparent 12%),
    radial-gradient(circle at 33% 62%, transparent 0 7%, rgba(243, 163, 60, 0.12) 7.2% 7.8%, transparent 8%),
    linear-gradient(30deg, transparent 49%, rgba(255, 255, 255, 0.045) 49.5%, rgba(255, 255, 255, 0.045) 50.5%, transparent 51%);
  background-size: auto, auto, 148px 86px;
  opacity: 0.68;
}

.join.section::after,
.join.band::after,
.page-hero::after,
.course-hero::after,
.admin-hero::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  pointer-events: none;
}

.join.section::after,
.join.band::after {
  left: clamp(22px, 7vw, 120px);
  bottom: clamp(20px, 6vw, 86px);
  width: clamp(120px, 18vw, 260px);
  aspect-ratio: 1;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  border: 1px solid rgba(37, 199, 201, 0.18);
  background: rgba(37, 199, 201, 0.035);
}

.join.section > *,
.join.band > * {
  position: relative;
  z-index: 1;
}

.join h2 {
  font-size: clamp(2rem, 4.1vw, 4rem);
}

.join p {
  max-width: 650px;
  color: rgba(255, 255, 255, 0.76);
}

.join-actions {
  border: 0;
}

.join-actions a,
.join-actions button {
  min-height: 72px;
  padding-inline: 22px;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.join-actions svg {
  color: var(--teal);
}

.inner-page,
.course-page {
  background:
    linear-gradient(180deg, #040307 0, #040307 430px, var(--paper) 430px),
    var(--paper);
}

.page-hero,
.course-hero {
  position: relative;
  min-height: min(540px, 72svh);
  grid-template-columns: minmax(300px, 0.82fr) minmax(220px, 0.5fr);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(4, 3, 7, 0.94), rgba(19, 10, 29, 0.9) 62%, rgba(8, 44, 47, 0.88)),
    #040307;
}

.page-hero img,
.course-hero img,
.admin-hero img {
  display: none !important;
}

.page-hero::before,
.course-hero::before {
  background:
    linear-gradient(30deg, transparent 49%, rgba(37, 199, 201, 0.06) 49.5%, rgba(37, 199, 201, 0.06) 50.5%, transparent 51%),
    linear-gradient(150deg, transparent 49%, rgba(119, 83, 170, 0.055) 49.5%, rgba(119, 83, 170, 0.055) 50.5%, transparent 51%);
  background-size: 138px 80px;
  opacity: 0.55;
}

.page-hero::after,
.course-hero::after {
  left: clamp(22px, 7vw, 110px);
  bottom: clamp(24px, 7vw, 100px);
  width: clamp(130px, 20vw, 280px);
  aspect-ratio: 1;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  border: 1px solid rgba(37, 199, 201, 0.22);
  background:
    linear-gradient(135deg, rgba(37, 199, 201, 0.07), rgba(119, 83, 170, 0.06));
}

.about-page .page-hero {
  background:
    linear-gradient(135deg, rgba(4, 3, 7, 0.95), rgba(28, 14, 39, 0.9) 62%, rgba(11, 116, 120, 0.78)),
    #040307;
}

.services-page .page-hero {
  background:
    linear-gradient(135deg, rgba(4, 3, 7, 0.94), rgba(12, 62, 66, 0.88) 62%, rgba(64, 35, 86, 0.72)),
    #040307;
}

.courses-page .page-hero,
.watch-page .course-hero {
  background:
    linear-gradient(135deg, rgba(4, 3, 7, 0.96), rgba(33, 18, 51, 0.9) 62%, rgba(11, 116, 120, 0.68)),
    #040307;
}

.library-page .page-hero {
  background:
    linear-gradient(135deg, rgba(4, 3, 7, 0.94), rgba(10, 56, 58, 0.88) 58%, rgba(72, 47, 98, 0.78)),
    #040307;
}

.page-hero h1,
.course-hero h1,
.admin-hero h1 {
  max-width: 760px;
  font-size: clamp(2.3rem, 4.6vw, 4.65rem);
  line-height: 1.12;
}

.page-hero p:not(.eyebrow),
.course-hero p:not(.eyebrow) {
  max-width: 680px;
  font-size: clamp(1rem, 1.34vw, 1.16rem);
}

.principle-grid,
.stats,
.service-grid {
  gap: 14px;
  border: 0;
  background: transparent;
}

.principle-grid article,
.stats article {
  position: relative;
  overflow: hidden;
}

.stats article::after {
  content: "";
  display: block;
  width: min(100%, 180px);
  height: 8px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--saffron));
  opacity: 0.9;
}

.stats article:nth-child(2)::after { width: 64%; background: linear-gradient(90deg, var(--purple), var(--teal)); }
.stats article:nth-child(3)::after { width: 78%; background: linear-gradient(90deg, var(--saffron), var(--purple)); }

.resource-media {
  height: 220px;
  background:
    linear-gradient(135deg, rgba(37, 199, 201, 0.14), rgba(119, 83, 170, 0.12)),
    #061416;
}

.resource-media.dark img {
  max-width: 70%;
  opacity: 0.9;
}

.resource-media.blue,
.resource-media.orange,
.resource-media.green {
  color: white;
  background:
    linear-gradient(135deg, rgba(37, 199, 201, 0.24), rgba(119, 83, 170, 0.22)),
    #061416;
}

.course-list article {
  grid-template-columns: minmax(220px, 0.48fr) minmax(280px, 1fr);
  gap: clamp(18px, 4vw, 42px);
  padding: clamp(18px, 3vw, 30px);
}

.youtube-panel,
.mock-video {
  background:
    linear-gradient(135deg, rgba(4, 3, 7, 0.84), rgba(11, 116, 120, 0.68)),
    #061416;
}

.youtube-panel svg,
.mock-video button {
  color: #031214;
  background: var(--teal);
}

.watch-grid {
  gap: 20px;
}

.lesson-panel,
.certificate-panel {
  padding: 22px;
}

.lesson-panel li {
  color: var(--muted);
}

.certificate-preview {
  background:
    linear-gradient(135deg, rgba(37, 199, 201, 0.12), transparent 44%),
    linear-gradient(315deg, rgba(243, 163, 60, 0.12), transparent 44%),
    rgba(255, 253, 248, 0.96);
}

.video-progress {
  background: rgba(16, 32, 31, 0.1);
}

.video-progress span {
  background: linear-gradient(90deg, var(--teal), var(--saffron));
}

.admin-page {
  background:
    linear-gradient(180deg, #040307 0, #040307 540px, var(--paper) 540px),
    var(--paper);
}

.admin-shell {
  padding: 0 0 72px;
}

.admin-hero {
  position: relative;
  overflow: hidden;
  min-height: 410px;
  display: grid;
  align-items: center;
  padding: calc(var(--header-height) + 44px) clamp(18px, 6vw, 86px) clamp(62px, 8vw, 104px);
  color: white;
  background:
    linear-gradient(135deg, rgba(4, 3, 7, 0.95), rgba(19, 10, 29, 0.9) 58%, rgba(8, 44, 47, 0.82)),
    #040307;
}

.admin-hero::before {
  inset: auto clamp(24px, 7vw, 120px) clamp(28px, 6vw, 80px) auto !important;
  width: clamp(120px, 18vw, 250px);
  aspect-ratio: 1;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  border: 1px solid rgba(37, 199, 201, 0.2);
  background: rgba(37, 199, 201, 0.04);
}

.admin-status {
  gap: 14px;
  overflow: visible;
  margin-top: -36px;
  padding-inline: clamp(18px, 5vw, 72px);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.admin-status article {
  min-height: 106px;
  position: relative;
  z-index: 2;
}

.admin-workspace {
  gap: 20px;
  padding-inline: clamp(18px, 5vw, 72px);
}

.admin-rail {
  padding: 12px;
}

.admin-rail a {
  border-radius: 8px;
}

.admin-rail a:hover {
  color: var(--ink);
  background: rgba(37, 199, 201, 0.1);
}

.admin-panel {
  padding: clamp(18px, 2.4vw, 28px);
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  border-color: rgba(16, 32, 31, 0.12);
  background: rgba(255, 255, 255, 0.88);
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: rgba(37, 199, 201, 0.7);
  box-shadow: 0 0 0 3px rgba(37, 199, 201, 0.14);
}

.panel-actions button {
  border-color: rgba(16, 32, 31, 0.12);
  background: white;
}

.site-footer.advanced-footer {
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 24px;
  color: white;
  background:
    linear-gradient(135deg, rgba(4, 3, 7, 0.98), rgba(19, 10, 29, 0.94) 58%, rgba(8, 44, 47, 0.92)),
    #040307;
}

.site-footer.advanced-footer::before {
  background:
    linear-gradient(30deg, transparent 49%, rgba(37, 199, 201, 0.045) 49.5%, rgba(37, 199, 201, 0.045) 50.5%, transparent 51%),
    linear-gradient(150deg, transparent 49%, rgba(119, 83, 170, 0.05) 49.5%, rgba(119, 83, 170, 0.05) 50.5%, transparent 51%);
  background-size: 132px 76px;
  opacity: 0.62;
}

.footer-brand img {
  box-shadow: none;
}

.advanced-footer strong {
  color: white;
}

.advanced-footer p,
.footer-copy {
  color: rgba(255, 255, 255, 0.64);
}

.footer-links a {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
}

.footer-links a:hover {
  color: var(--teal);
  border-color: rgba(37, 199, 201, 0.28);
}

@media (prefers-reduced-motion: no-preference) {
  .page-hero::after,
  .course-hero::after,
  .join.section::after,
  .join.band::after,
  .admin-hero::before {
    animation: cleanChemFloat 9s ease-in-out infinite alternate;
  }

  .motion-ready .reveal-card {
    opacity: 0;
    translate: 0 20px;
    transition:
      opacity 620ms cubic-bezier(.22, 1, .36, 1),
      translate 620ms cubic-bezier(.22, 1, .36, 1),
      transform 200ms ease,
      box-shadow 200ms ease;
    transition-delay: var(--delay, 0ms);
  }

  .motion-ready .reveal-card.is-visible {
    opacity: 1;
    translate: 0 0;
  }
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .nav-toggle {
    display: grid;
    justify-self: end;
  }

  .site-nav {
    position: fixed;
    top: calc(var(--header-height) + 10px);
    inset-inline: 18px;
    width: auto;
    max-height: calc(100svh - var(--header-height) - 24px);
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(37, 199, 201, 0.22);
    border-radius: 8px;
    color: white;
    background:
      linear-gradient(135deg, rgba(4, 3, 7, 0.96), rgba(19, 10, 29, 0.94) 58%, rgba(8, 44, 47, 0.94));
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
  }

  .site-nav.open {
    display: grid;
  }

  .site-nav a {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.045);
  }

  .site-nav a::before {
    content: "";
    width: 8px;
    aspect-ratio: 1;
    margin-inline-end: 10px;
    border-radius: 50%;
    background: var(--teal);
  }

  .page-hero,
  .course-hero,
  .admin-hero,
  .admin-workspace,
  .admin-panels,
  .watch-grid,
  .course-list article {
    grid-template-columns: 1fr;
  }

  .section-heading {
    grid-template-columns: 1fr;
  }

  .page-hero,
  .course-hero {
    min-height: 460px;
  }

  .watch-grid {
    margin-top: -36px;
  }

  .admin-rail {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer.advanced-footer {
    grid-template-columns: 1fr;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  :root {
    --header-height: 66px;
  }

  .site-header {
    padding-inline: 14px;
  }

  .brand-mark {
    display: inline-flex;
  }

  .brand-mark span {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .icon-button {
    width: 48px;
    min-height: 48px;
  }

  .site-nav {
    grid-template-columns: 1fr;
    inset-inline: 14px;
  }

  .site-nav a {
    min-height: 54px;
  }

  .hero {
    min-height: 82svh;
    padding-inline: 18px;
  }

  .hero-copy {
    width: 100%;
  }

  .hero h1 {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
  }

  .hero-structure {
    width: 100vw;
    opacity: 0.26;
  }

  .page-hero,
  .course-hero,
  .admin-hero {
    min-height: 430px;
    padding-inline: 18px;
  }

  .page-hero h1,
  .course-hero h1,
  .admin-hero h1 {
    font-size: clamp(2rem, 9.4vw, 3.2rem);
  }

  .page-hero::after,
  .course-hero::after,
  .join.section::after,
  .join.band::after,
  .admin-hero::before {
    width: 118px;
    opacity: 0.55;
  }

  .section,
  .band {
    padding-inline: 18px;
  }

  .join.section,
  .join.band {
    min-height: auto;
    margin-inline: 18px;
    padding: 34px 22px;
  }

  .join h2 {
    font-size: clamp(1.9rem, 8.4vw, 2.8rem);
  }

  .portal-card,
  .partner-row article,
  .service-grid article,
  .resource-grid article,
  .course-list article,
  .principle-grid article,
  .stats article,
  .admin-panel {
    min-height: auto;
    padding: 20px;
  }

  .resource-grid,
  .portal-grid,
  .partner-row,
  .service-grid,
  .principle-grid,
  .stats,
  .admin-status {
    grid-template-columns: 1fr;
  }

  .admin-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid,
  .form-grid .wide {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .panel-actions,
  .video-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .button,
  .actions .button,
  .certificate-panel .button {
    width: 100%;
  }
}

/* Hard final correction: keep every section visible and give all footers identity */
footer.site-footer,
footer.site-footer.advanced-footer {
  position: relative !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) auto !important;
  align-items: end !important;
  gap: 28px !important;
  padding: clamp(46px, 7vw, 86px) clamp(18px, 6vw, 92px) !important;
  border-top: 0 !important;
  color: white !important;
  background:
    radial-gradient(520px 280px at 82% 18%, rgba(37, 199, 201, 0.18), transparent 62%),
    radial-gradient(520px 280px at 18% 72%, rgba(119, 83, 170, 0.18), transparent 64%),
    linear-gradient(135deg, #040307, #12091c 58%, #082c2f) !important;
}

footer.site-footer::before,
footer.site-footer.advanced-footer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background:
    linear-gradient(30deg, transparent 49%, rgba(37, 199, 201, 0.055) 49.5%, rgba(37, 199, 201, 0.055) 50.5%, transparent 51%),
    linear-gradient(150deg, transparent 49%, rgba(119, 83, 170, 0.055) 49.5%, rgba(119, 83, 170, 0.055) 50.5%, transparent 51%) !important;
  background-size: 132px 76px !important;
  opacity: 0.68 !important;
  pointer-events: none !important;
}

footer.site-footer > * {
  position: relative !important;
  z-index: 1 !important;
}

footer.site-footer strong,
footer.site-footer.advanced-footer strong {
  color: white !important;
}

footer.site-footer p,
footer.site-footer.advanced-footer p,
footer.site-footer .footer-copy {
  color: rgba(255, 255, 255, 0.68) !important;
}

footer.site-footer nav,
footer.site-footer .footer-links {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

footer.site-footer nav a,
footer.site-footer .footer-links a {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 999px !important;
  color: white !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

footer.site-footer nav a:hover,
footer.site-footer .footer-links a:hover {
  color: var(--teal) !important;
  border-color: rgba(37, 199, 201, 0.32) !important;
}

.motion-ready .reveal-card,
.motion-ready .reveal-card.is-visible {
  opacity: 1 !important;
  translate: 0 0 !important;
  scale: 1 !important;
  filter: none !important;
}

.section {
  position: relative;
}

.about-page .section:nth-of-type(2),
.services-page .band,
.courses-page .join.band,
.library-page .section:nth-of-type(2) {
  background:
    radial-gradient(520px 260px at 82% 10%, rgba(37, 199, 201, 0.08), transparent 62%),
    radial-gradient(520px 280px at 18% 82%, rgba(119, 83, 170, 0.06), transparent 64%);
}

.about-page .band,
.services-page .band {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(37, 199, 201, 0.1), transparent 40%),
    linear-gradient(315deg, rgba(243, 163, 60, 0.08), transparent 42%),
    #f7fffb;
}

.about-page .band::before,
.services-page .band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(30deg, transparent 49%, rgba(37, 199, 201, 0.05) 49.5%, rgba(37, 199, 201, 0.05) 50.5%, transparent 51%),
    linear-gradient(150deg, transparent 49%, rgba(119, 83, 170, 0.04) 49.5%, rgba(119, 83, 170, 0.04) 50.5%, transparent 51%);
  background-size: 112px 64px;
  pointer-events: none;
}

.about-page .band > *,
.services-page .band > * {
  position: relative;
  z-index: 1;
}

.principle-grid article,
.stats article,
.service-grid article,
.portal-card,
.resource-grid article,
.course-list article,
.admin-panel,
.video-shell,
.lesson-panel,
.certificate-panel {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 253, 248, 0.9)),
    var(--surface);
}

.principle-grid article:first-child,
.service-grid article:first-child,
.course-list article:first-child,
.resource-grid article:first-child {
  background:
    linear-gradient(145deg, rgba(37, 199, 201, 0.08), rgba(255, 253, 248, 0.92)),
    var(--surface);
}

.stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats article {
  min-height: 190px;
  align-content: center;
}

.stats strong {
  color: var(--teal-dark);
}

.courses-page .join.band {
  color: white;
  background:
    linear-gradient(135deg, rgba(37, 199, 201, 0.16), transparent 42%),
    linear-gradient(315deg, rgba(243, 163, 60, 0.12), transparent 38%),
    linear-gradient(135deg, #040307, #130a1d 58%, #082c2f) !important;
}

.courses-page .join.band h2,
.courses-page .join.band p,
.courses-page .join.band .section-kicker {
  color: white;
}

.courses-page .join.band .section-kicker {
  color: var(--teal);
}

.courses-page .course-list,
.library-page .resource-grid,
.services-page .service-grid {
  margin-top: -34px;
}

.course-list article,
.resource-grid article,
.service-grid article {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--teal), var(--saffron), var(--purple)) 1;
}

.youtube-panel,
.resource-media {
  border-radius: 8px;
}

.admin-panels {
  align-items: start;
}

.admin-panel:nth-child(2),
.admin-panel:nth-child(3) {
  grid-column: span 2;
}

@media (prefers-reduced-motion: no-preference) {
  .portal-card,
  .principle-grid article,
  .stats article,
  .service-grid article,
  .resource-grid article,
  .course-list article,
  .admin-panel,
  .video-shell,
  .lesson-panel,
  .certificate-panel,
  .join {
    animation: sectionRise 760ms cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: var(--delay, 0ms);
  }

  @keyframes sectionRise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 980px) {
  footer.site-footer,
  footer.site-footer.advanced-footer {
    grid-template-columns: 1fr !important;
  }

  footer.site-footer nav,
  footer.site-footer .footer-links {
    justify-content: flex-start !important;
  }

  .admin-panel:nth-child(2),
  .admin-panel:nth-child(3) {
    grid-column: auto;
  }
}

/* Impossible-mode visual layer: books, screens, service consoles */
.experience-lab {
  position: relative;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(360px, 1fr);
  gap: clamp(28px, 6vw, 82px);
  align-items: center;
  overflow: hidden;
  padding-inline: clamp(18px, 6vw, 92px);
  color: white;
  background:
    linear-gradient(135deg, rgba(37, 199, 201, 0.12), transparent 40%),
    linear-gradient(315deg, rgba(243, 163, 60, 0.1), transparent 40%),
    linear-gradient(135deg, #040307, #130a1d 58%, #082c2f);
}

.experience-lab::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(30deg, transparent 49%, rgba(37, 199, 201, 0.055) 49.5%, rgba(37, 199, 201, 0.055) 50.5%, transparent 51%),
    linear-gradient(150deg, transparent 49%, rgba(119, 83, 170, 0.052) 49.5%, rgba(119, 83, 170, 0.052) 50.5%, transparent 51%);
  background-size: 142px 82px;
  pointer-events: none;
}

.experience-lab > * {
  position: relative;
  z-index: 1;
}

.lab-copy {
  max-width: 620px;
}

.lab-copy h2 {
  margin: 8px 0 16px;
  font-size: clamp(2.1rem, 4.8vw, 5rem);
  line-height: 1.1;
}

.lab-copy p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.9;
}

.lab-stage {
  min-height: clamp(420px, 48vw, 620px);
  position: relative;
  perspective: 1200px;
}

.lab-object {
  position: absolute;
  border-radius: 8px;
  transform-style: preserve-3d;
}

.book-object {
  right: 8%;
  top: 10%;
  width: clamp(170px, 22vw, 330px);
  height: clamp(220px, 29vw, 420px);
  transform: rotateY(-22deg) rotateX(5deg) rotateZ(-4deg);
}

.book-cover {
  position: absolute;
  inset: 0;
  border-radius: 8px 14px 14px 8px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 18%),
    linear-gradient(135deg, #14101f, #0b7478 72%);
  box-shadow: 0 38px 90px rgba(0, 0, 0, 0.34);
}

.book-cover::before {
  content: "";
  position: absolute;
  inset: 34px 34px auto auto;
  width: 86px;
  aspect-ratio: 1;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}

.book-cover::after {
  content: "";
  position: absolute;
  right: 34px;
  bottom: 46px;
  width: 52%;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--saffron));
  box-shadow: 0 -26px 0 rgba(255,255,255,.14), 0 -52px 0 rgba(255,255,255,.1);
}

.book-pages {
  position: absolute;
  inset: 8px -18px 8px auto;
  width: 28px;
  border-radius: 0 10px 10px 0;
  background:
    repeating-linear-gradient(180deg, #fff 0 4px, #dbe8e5 5px 7px);
  transform: translateZ(-18px);
}

.book-mark {
  position: absolute;
  top: 0;
  left: 16%;
  width: 20px;
  height: 42%;
  background: var(--saffron);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}

.screen-object {
  left: 5%;
  top: 22%;
  width: clamp(250px, 34vw, 520px);
  height: clamp(170px, 22vw, 330px);
  padding: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    #071719;
  box-shadow: 0 32px 90px rgba(37, 199, 201, 0.16);
  transform: rotateY(14deg) rotateX(4deg);
}

.screen-object::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(37, 199, 201, .3), transparent 55%),
    linear-gradient(315deg, rgba(119, 83, 170, .24), transparent 50%),
    #052b2d;
}

.screen-play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 72px;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 14px rgba(37, 199, 201, 0.1);
}

.screen-play::after {
  content: "";
  position: absolute;
  inset: 24px 27px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: #031214;
}

.screen-bar {
  position: absolute;
  right: 34px;
  left: 34px;
  bottom: 34px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal) 0 62%, rgba(255,255,255,.18) 62%);
}

.console-object {
  left: 18%;
  bottom: 8%;
  width: clamp(220px, 30vw, 430px);
  min-height: 160px;
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transform: rotateY(10deg) rotateX(2deg);
}

.console-object span {
  height: 34px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(37,199,201,.34), transparent 62%),
    rgba(255,255,255,.08);
}

.console-object span:nth-child(2) { width: 78%; }
.console-object span:nth-child(3) { width: 56%; }

.portal-card {
  min-height: 270px;
  padding-bottom: 96px;
}

.portal-card::after {
  content: "";
  display: block !important;
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 104px;
  height: 72px;
  opacity: 1;
  transform: none;
  pointer-events: none;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37,199,201,.22), rgba(119,83,170,.18)),
    #071719;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.portal-card:nth-child(1)::after {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  background:
    linear-gradient(135deg, rgba(37,199,201,.18), rgba(119,83,170,.22)),
    #071719;
}

.portal-card:nth-child(2)::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0 14px, transparent 14px),
    repeating-linear-gradient(180deg, rgba(37,199,201,.32) 0 8px, transparent 8px 18px),
    #071719;
}

.portal-card:nth-child(3)::after {
  background:
    radial-gradient(circle at 50% 44%, var(--teal) 0 17px, transparent 18px),
    linear-gradient(135deg, rgba(37,199,201,.18), rgba(119,83,170,.2)),
    #071719;
}

.portal-card:nth-child(4)::after {
  border-radius: 4px 12px 12px 4px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 22%),
    linear-gradient(135deg, #130a1d, #0b7478);
  box-shadow: 14px 0 0 #eff8f4, 16px 0 0 rgba(16,32,31,.16);
}

.portal-card:nth-child(5)::after {
  background:
    linear-gradient(180deg, #071719 0 70%, rgba(255,255,255,.14) 70%),
    linear-gradient(135deg, rgba(37,199,201,.22), rgba(119,83,170,.18));
}

.portal-card:nth-child(6)::after {
  background:
    linear-gradient(135deg, transparent 0 44%, rgba(243,163,60,.7) 44% 56%, transparent 56%),
    #071719;
}

.service-grid article {
  min-height: 360px;
  grid-template-columns: minmax(260px, 1fr) minmax(200px, 270px);
  align-items: center;
  column-gap: clamp(20px, 4vw, 54px);
  padding: clamp(26px, 4vw, 46px);
}

.service-grid article > i,
.service-grid article > span,
.service-grid article > h2,
.service-grid article > p,
.service-grid article > a {
  grid-column: 1;
}

.service-grid article::after {
  content: "";
  display: block !important;
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 5;
  width: min(100%, 236px);
  min-height: 216px;
  justify-self: center;
  border-radius: 8px;
  opacity: 1;
  transform: none;
  background:
    linear-gradient(135deg, rgba(37,199,201,.18), rgba(119,83,170,.14)),
    #071719;
  box-shadow: 0 24px 68px rgba(9, 33, 34, 0.14);
}

.service-grid article:first-child::after {
  background:
    radial-gradient(circle at 24% 24%, var(--teal) 0 8px, transparent 9px),
    linear-gradient(180deg, rgba(255,255,255,.16) 0 38px, transparent 38px),
    repeating-linear-gradient(180deg, transparent 0 58px, rgba(255,255,255,.12) 58px 86px, transparent 86px 108px),
    #071719;
}

.service-grid article:nth-child(2)::after {
  background:
    linear-gradient(135deg, rgba(243,163,60,.3), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.16) 0 28%, transparent 28%),
    repeating-linear-gradient(180deg, transparent 0 72px, rgba(37,199,201,.22) 72px 82px, transparent 82px 108px),
    #071719;
}

.resource-grid {
  align-items: start;
}

.resource-grid article {
  overflow: visible;
}

.resource-media {
  position: relative;
  min-height: 260px;
  overflow: visible;
  perspective: 900px;
  background:
    linear-gradient(135deg, rgba(37,199,201,.1), rgba(119,83,170,.08)),
    #061416;
}

.resource-media::before {
  content: "";
  position: absolute;
  inset: 38px 30% 34px 22%;
  border-radius: 7px 16px 16px 7px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.32), transparent 18%),
    linear-gradient(135deg, #130a1d, #0b7478);
  transform: rotateY(-20deg) rotateZ(-3deg);
  box-shadow: 20px 8px 0 #eef8f5, 22px 8px 0 rgba(16,32,31,.12), 0 28px 70px rgba(0,0,0,.32);
}

.resource-media::after {
  content: "";
  position: absolute;
  right: 36%;
  bottom: 62px;
  width: 70px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--saffron));
  transform: rotateZ(-3deg);
}

.resource-media img,
.resource-media svg {
  position: relative;
  z-index: 2;
  width: 76px;
  height: 76px;
  color: white;
  opacity: 0.95;
}

.resource-media.dark img {
  width: 118px;
  height: auto;
  padding: 14px;
  border-radius: 8px;
  background: rgba(0,0,0,.28);
}

.resource-grid article:nth-child(2) .resource-media::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 18%),
    linear-gradient(135deg, #06383b, #25c7c9);
}

.resource-grid article:nth-child(3) .resource-media::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 18%),
    linear-gradient(135deg, #2b1b07, #f3a33c);
}

.resource-grid article:nth-child(4) .resource-media::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 18%),
    linear-gradient(135deg, #0b2530, #7753aa);
}

.youtube-panel {
  position: relative;
  min-height: 260px;
  overflow: visible;
  border-radius: 8px;
}

.youtube-panel::before {
  content: "";
  position: absolute;
  inset: 26px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37,199,201,.24), rgba(119,83,170,.16)),
    #061416;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 26px 58px rgba(9,33,34,.16);
}

.youtube-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 42%;
  height: 12px;
  translate: -50% 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--saffron));
}

.youtube-panel svg,
.youtube-panel span {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .book-object,
  .screen-object,
  .console-object {
    animation: labFloat 9s ease-in-out infinite alternate;
  }

  .screen-object { animation-delay: 1.2s; }
  .console-object { animation-delay: 2s; }

  .portal-card::after,
  .resource-media::before,
  .youtube-panel::before {
    transition: transform 260ms ease, box-shadow 260ms ease;
  }

  .portal-card:hover::after {
    transform: translateY(-5px);
  }

  .resource-grid article:hover .resource-media::before,
  .course-list article:hover .youtube-panel::before {
    transform: rotateY(-16deg) rotateZ(-2deg) translateY(-6px);
  }

  @keyframes labFloat {
    to { translate: 0 -14px; }
  }
}

@media (max-width: 980px) {
  .experience-lab {
    grid-template-columns: 1fr;
  }

  .lab-stage {
    min-height: 500px;
  }

  .service-grid article {
    grid-template-columns: 1fr;
  }

  .service-grid article::after {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 680px) {
  .experience-lab {
    padding-inline: 18px;
  }

  .lab-copy h2 {
    font-size: clamp(2rem, 10vw, 3.3rem);
  }

  .lab-stage {
    min-height: 440px;
  }

  .book-object {
    right: 6%;
    width: 190px;
    height: 250px;
  }

  .screen-object {
    left: 4%;
    top: 34%;
    width: 250px;
    height: 176px;
  }

  .console-object {
    left: 8%;
    bottom: 0;
    width: 245px;
  }

  .portal-card {
    padding-bottom: 92px;
  }

  .service-grid article::after,
  .resource-media,
  .youtube-panel {
    min-height: 210px;
  }
}