:root {
  --ink: #0d183b;
  --red: #d71920;
  --red-dark: #a90e15;
  --muted: #6c7591;
  --paper: #f7f8fc;
  --line: #e4e7ef;
  --navy: #101b3c;
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
body {
  margin: 0;
  color: var(--ink);
  font-family: "DM Sans", Manrope, Arial, sans-serif;
  background: #fff;
  overflow-x: hidden;
}
body.intro-locked {
  height: 100vh;
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  background: #a9d8ff;
  transition:
    transform 1.1s var(--ease),
    opacity 0.85s ease,
    filter 0.85s ease;
  transform-origin: 50% 50%;
}
.intro-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 47%;
  display: block;
  transition:
    transform 1.3s var(--ease),
    filter 1.3s ease;
}
.intro-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(9, 17, 41, 0.78),
    rgba(9, 17, 41, 0.03) 49%,
    rgba(9, 17, 41, 0.02)
  );
  pointer-events: none;
}
.intro-ui {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0 20px clamp(28px, 6vh, 68px);
  color: white;
}
.intro-kicker {
  font-size: 0.77rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4545;
  box-shadow: 0 0 0 5px #ff45453d;
}
.enter-button {
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.93);
  color: var(--red);
  padding: 10px 12px 10px 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 15px 50px #101b3c38;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.enter-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px #101b3c55;
}
.enter-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  font-size: 1.35rem;
}
.scroll-cue {
  margin-top: 19px;
  font-size: 0.8rem;
  color: #ffffffcc;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 9px;
}
.mouse-icon {
  width: 15px;
  height: 22px;
  border: 1.5px solid #ffffffaa;
  border-radius: 9px;
  display: inline-block;
  position: relative;
}
.mouse-icon:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 5px;
  border-radius: 2px;
  background: #fff;
  left: 5px;
  top: 4px;
  animation: wheel 1.3s infinite;
}
.intro-caption {
  position: absolute;
  top: 27px;
  left: 34px;
  color: #fff;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-shadow: 0 1px 6px #0005;
}
.intro-caption span {
  color: #ff4a4a;
  margin: 0 6px;
}
.intro-screen.is-exiting {
  transform: scale(1.12);
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
}
.intro-screen.is-exiting .intro-art {
  transform: scale(1.05);
}
.site-shell {
  opacity: 0;
  transform: scale(0.94) translateY(22px);
  transform-origin: 50% 50%;
  transition:
    opacity 1s ease,
    transform 1.1s var(--ease);
  pointer-events: none;
}
.site-shell.is-entered {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
body:not(.intro-locked) {
  height: auto;
  overflow-x: hidden;
}
.navbar-wrap {
  height: 82px;
  display: flex;
  align-items: center;
  background: #fffffff2;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(16px);
  box-shadow: 0 3px 18px #18294d0d;
}
.navbar {
  min-height: 82px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 230px;
}

.navbar-nav .nav-link {
  font-weight: 700;
  color: #192343;
  font-size: 0.89rem;
  padding: 0.55rem 0.8rem !important;
  position: relative;
}
.navbar-nav .nav-link:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.8rem;
  right: 0.8rem;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transition: transform 0.25s;
}
.navbar-nav .nav-link:hover:after,
.navbar-nav .nav-link.active:after {
  transform: scaleX(1);
}
.navbar-nav .nav-link.active {
  color: var(--red);
}
.nav-actions {
  display: flex;
  gap: 10px;
}
.nav-actions .btn {
  font-size: 0.84rem;
  font-weight: 700;
  border-width: 1.5px;
}
.home-hero {
  position: relative;
  overflow: hidden;
  background: #dcebff;
}
.home-hero > img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 420px;
  object-fit: cover;
  object-position: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--red);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.eyebrow-line {
  width: 25px;
  height: 2px;
  background: var(--red);
}
.path-copy h1,
.closing-card h2 {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 5.1vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.075em;
  margin: 24px 0 22px;
  color: #111b3a;
}
.path-copy h1 em,
.closing-card h2 em {
  font-style: normal;
  color: var(--red);
}

.closing-section {
  min-height: 90vh;
  background: #101a39;
  padding: 12vh 8vw 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.closing-section:before {
  content: "";
  position: absolute;
  width: 70vw;
  height: 70vw;
  right: -26vw;
  top: -37vw;
  border-radius: 50%;
  border: 1px solid #ffffff12;
  box-shadow:
    0 0 0 65px #ffffff05,
    0 0 0 130px #ffffff03;
}
.closing-card {
  position: relative;
  max-width: 1000px;
  margin: auto;
  width: 100%;
  padding: 7vh 8vw;
  border: 1px solid #ffffff20;
  border-radius: 28px;
  background: linear-gradient(120deg, #18254a, #121e41);
  overflow: hidden;
  box-shadow: 0 35px 90px #060c1e70;
}
.closing-card .eyebrow {
  color: #ff555a;
}
.closing-card .eyebrow-line {
  background: #ff555a;
}
.closing-card h2 {
  font-size: clamp(3.1rem, 7vw, 6.8rem);
  color: #fff;
  margin-top: 27px;
}
.closing-card p {
  color: #b2bdd5;
  max-width: 460px;
  line-height: 1.7;
  margin-bottom: 28px;
}
.closing-link {
  position: relative;
  z-index: 2;
  color: #fff;
  background: var(--red);
  border-radius: 999px;
  padding: 14px 21px;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  font-size: 0.83rem;
  font-weight: 800;
  box-shadow: 0 10px 30px #d7192040;
}
.closing-link span {
  font-size: 1.1rem;
}
.closing-watermark {
  position: absolute;
  right: 9%;
  bottom: -24%;
  font-size: 25rem;
  line-height: 1;
  font-weight: 800;
  color: #ffffff08;
  font-family: Georgia, serif;
}
footer {
  max-width: 1200px;
  width: 100%;
  margin: 10vh auto 0;
  padding: 24px 0;
  color: #838eaa;
  border-top: 1px solid #ffffff1a;
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
}
footer span:first-child {
  font-weight: 800;
  color: #d8dfef;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-11px);
  }
}
@keyframes wheel {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  75%,
  100% {
    transform: translateY(6px);
    opacity: 0;
  }
}
@media (min-width: 1500px) {
  .home-hero > img {
    max-height: calc(100vh - 82px);
    object-fit: cover;
  }
}
@media (max-width: 991.98px) {
  .navbar-wrap,
  .navbar {
    height: 72px;
    min-height: 72px;
  }
  .brand {
    min-width: 0;
  }

  .navbar-collapse {
    position: absolute;
    left: 0;
    right: 0;
    top: 72px;
    background: #fffffff8;
    padding: 12px 24px 22px;
    box-shadow: 0 15px 20px #13224812;
  }
  .navbar-nav .nav-link {
    padding: 0.55rem 0 !important;
  }
  .navbar-nav .nav-link:after {
    left: 0;
    right: auto;
    width: 38px;
  }
  .nav-actions {
    padding-top: 10px;
  }
  .home-hero > img {
    min-height: 450px;
    object-position: 58% center;
  }

  .path-copy h1 {
    font-size: clamp(3rem, 8vw, 5rem);
    margin: 14px 0;
  }

  .closing-section {
    min-height: 75vh;
    padding-top: 8vh;
  }
  .closing-card {
    padding: 6vh 7vw;
  }
  footer {
    margin-top: 8vh;
  }
}
@media (max-width: 575.98px) {
  .intro-art {
    object-position: 58% center;
  }
  .intro-caption {
    left: 18px;
    top: 19px;
    font-size: 0.58rem;
  }
  .intro-ui {
    padding-bottom: 34px;
  }
  .enter-button {
    font-size: 0.9rem;
  }

  .home-hero > img {
    min-height: 470px;
    object-position: 55% center;
  }

  .eyebrow {
    font-size: 0.61rem;
  }
  .path-copy h1 {
    font-size: clamp(2.7rem, 13vw, 4rem);
    margin: 14px 0;
  }

  .closing-section {
    padding: 8vh 6vw 22px;
  }
  .closing-card {
    padding: 6vh 7vw;
    border-radius: 20px;
  }
  .closing-card h2 {
    font-size: clamp(3rem, 14vw, 5rem);
  }
  .closing-card p {
    font-size: 0.88rem;
  }
  .closing-watermark {
    font-size: 18rem;
    right: 3%;
  }
  footer {
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.56rem;
  }
  footer span:nth-child(2) {
    order: 3;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Homepage content rebuilt as live HTML over a clean illustration. */
.home-hero {
  position: relative;
  overflow: hidden;
  background: #ddecff;
  isolation: isolate;
}
.hero-art {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: -1;
}
.hero-copy {
  position: absolute;
  z-index: 1;
  left: 3.8%;
  top: 10.5%;
  width: 43%;
  max-width: 680px;
  color: #0d1630;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border: 1px solid #ffb8bc;
  border-radius: 99px;
  background: #fff9;
  font-size: clamp(0.7rem, 0.95vw, 0.92rem);
  font-weight: 800;
  color: var(--red);
}
.hero-badge > span {
  font-size: 1.35em;
}
.hero-copy h1 {
  margin: 34px 0 20px;
  font-family: Manrope, sans-serif;
  font-size: clamp(2.8rem, 5.05vw, 5.25rem);
  line-height: 1.04;
  letter-spacing: -0.065em;
  font-weight: 800;
  color: #0a0b10;
}
.hero-copy h1 em {
  font-style: normal;
  color: var(--red);
}
.hero-copy p {
  max-width: 560px;
  margin: 0;
  color: #172343;
  font-size: clamp(0.95rem, 1.48vw, 1.35rem);
  line-height: 1.62;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.hero-button {
  min-height: 56px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  border-radius: 99px;
  font-size: clamp(0.8rem, 1.1vw, 1rem);
  font-weight: 800;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.hero-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px #d7192035;
}
.hero-button.primary {
  background: var(--red);
  border: 1px solid #fff;
  color: #fff;
  box-shadow: 0 8px 18px #d7192026;
}
.hero-button.primary span {
  font-size: 1.4em;
}
.hero-button.secondary {
  background: #fffffff0;
  border: 1px solid #ffb9bd;
  color: var(--red);
}
.play-icon {
  width: 34px;
  height: 34px;
  border: 1px solid #ffa5aa;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding-left: 2px;
  font-size: 0.72rem;
}
.hero-slogan {
  position: absolute;
  left: 63.6%;
  top: 13%;
  z-index: 1;
  transform: rotate(-8deg);
  font-family: cursive;
  font-size: clamp(1rem, 1.8vw, 1.9rem);
  line-height: 1.35;
  color: #241810;
  text-align: center;
}

.hero-boy-arrow {
  animation: arrow-nudge 1.2s ease-in-out infinite alternate;
}

@keyframes arrow-nudge {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-0.35in, 0.35in);
  }
}

.hero-metrics {
  position: absolute;
  z-index: 2;
  left: 2%;
  right: 2%;
  bottom: 2%;
  min-height: 12.7%;
  padding: 14px 4%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 16px;
  border: 1px solid #ffffffd9;
  border-radius: 24px;
  background: #ffffffdf;
  backdrop-filter: blur(15px);
  box-shadow: 0 15px 40px #182b501a;
}
.metric {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
}
.metric-icon {
  width: 54px;
  height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffeaeb;
  color: var(--red);
  font-size: 1.6rem;
  font-weight: 800;
}
.metric > div {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.metric strong {
  font-family: Manrope, sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  color: #101a3d;
  font-weight: 800;
}
.metric small {
  font-size: clamp(0.68rem, 1.12vw, 1rem);
  color: #596583;
  margin-top: 3px;
  white-space: nowrap;
}
@media (max-width: 991.98px) and (min-width: 576px) {
  .hero-copy {
    top: 9%;
    width: 49%;
  }
  .hero-copy h1 {
    font-size: 5.4vw;
    margin: 19px 0 14px;
  }
  .hero-copy p {
    font-size: 1.6vw;
    max-width: 390px;
  }
  .hero-actions {
    gap: 9px;
    margin-top: 20px;
  }
  .hero-button {
    min-height: 44px;
    padding: 0 15px;
    gap: 12px;
  }

  .hero-metrics {
    min-height: 13.5%;
    padding: 8px 2%;
    gap: 6px;
    border-radius: 17px;
  }
  .metric {
    gap: 8px;
  }
  .metric-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}
@media (max-width: 575.98px) {
  .home-hero {
    padding-bottom: 0;
  }
  .hero-art {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 67vw;
    min-height: 245px;
    object-fit: cover;
    object-position: 58% 38%;
  }
  .hero-copy {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: none;
    margin: -22px 14px 0;
    padding: 23px 20px 21px;
    background: #fffffffa;
    border: 1px solid #edf0f7;
    border-radius: 18px;
    box-shadow: 0 14px 35px #12264b18;
  }
  .hero-badge {
    padding: 7px 12px;
    font-size: 0.68rem;
  }
  .hero-copy h1 {
    font-size: clamp(2.25rem, 10.2vw, 3.15rem);
    margin: 16px 0 11px;
  }
  .hero-copy p {
    font-size: 0.88rem;
    line-height: 1.55;
  }
  .hero-actions {
    margin-top: 17px;
    gap: 9px;
  }
  .hero-button {
    min-height: 43px;
    padding: 0 13px;
    gap: 9px;
    font-size: 0.73rem;
  }
  .play-icon {
    width: 27px;
    height: 27px;
  }
  .hero-slogan {
    display: none;
  }
  .hero-metrics {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 13px 14px 18px;
    min-height: 0;
    padding: 14px 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 6px;
    border-radius: 16px;
  }
  .metric {
    justify-content: flex-start;
    gap: 8px;
  }
  .metric-icon {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }
  .metric strong {
    font-size: 1.1rem;
  }
  .metric small {
    font-size: 0.62rem;
    white-space: normal;
  }
}

/* Keep the HTML staircase behind the extracted student and put the brand on the laptop. */
.home-hero {
  isolation: isolate;
}
.hero-art {
  position: relative;
  z-index: 0;
}
.hero-staircase {
  z-index: 1;
}
.hero-student {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  pointer-events: none;
}
.hero-copy,
.hero-slogan {
  z-index: 3;
}
.hero-metrics {
  z-index: 5;
}
.laptop-logo {
  position: absolute;
  z-index: 4;
  left: 48.5%;
  top: 63.5%;
  width: 13.5%;
  height: 6%;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #13182a;
  transform: rotate(13deg) skewX(-7deg);
  transform-origin: center;
  pointer-events: none;
}

.metric.is-counting {
  animation: metric-highlight 1.6s ease both;
}
.metric.is-counting .metric-icon {
  animation: metric-pop 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.metric.is-counting strong {
  color: var(--red);
  text-shadow: 0 4px 15px #d7192030;
}
@keyframes metric-highlight {
  0% {
    transform: translateY(0);
    filter: drop-shadow(0 0 0 #d7192000);
  }
  25% {
    transform: translateY(-5px);
    filter: drop-shadow(0 10px 12px #d7192026);
  }
  100% {
    transform: translateY(0);
    filter: drop-shadow(0 0 0 #d7192000);
  }
}
@keyframes metric-pop {
  0% {
    transform: scale(0.8);
  }
  55% {
    transform: scale(1.17) rotate(-5deg);
  }
  100% {
    transform: scale(1);
  }
}
@media (max-width: 575.98px) {
  .hero-art {
    z-index: 0;
  }
  .hero-student {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 67vw;
    min-height: 245px;
    object-fit: cover;
    object-position: 58% 38%;
  }
  .laptop-logo {
    left: 47%;
    top: 41vw;
    width: 22%;
    height: 7%;
    gap: 2px;
    transform: rotate(13deg) skewX(-7deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .metric.is-counting,
  .metric.is-counting .metric-icon {
    animation: none;
  }
}

.hero-metrics {
  isolation: isolate;
}
.metric {
  position: relative;
  isolation: isolate;
  padding: 6px 8px;
  border-radius: 16px;
  z-index: 0;
}
.metric > * {
  position: relative;
  z-index: 1;
}
.metric:before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -7px;
  border-radius: 20px;
  background: radial-gradient(
    ellipse at center,
    #ffd2d5b8 0,
    rgba(255, 224, 226, 0.68) 42%,
    rgba(255, 255, 255, 0) 78%
  );
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}
.hero-metrics.is-glowing .metric:before {
  animation: metric-sequence-glow 4.4s ease-in-out infinite;
  animation-delay: var(--metric-delay, 0s);
}
.metric:nth-child(1) {
  --metric-delay: 0s;
}
.metric:nth-child(2) {
  --metric-delay: 1.1s;
}
.metric:nth-child(3) {
  --metric-delay: 2.2s;
}
.metric:nth-child(4) {
  --metric-delay: 3.3s;
}
@keyframes metric-sequence-glow {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.95);
    filter: drop-shadow(0 0 0 #d7192000);
  }
  4% {
    opacity: 0.95;
    transform: scale(1.035);
    filter: drop-shadow(0 0 14px #d7192052);
  }
  13% {
    opacity: 0.25;
    transform: scale(1);
  }
  22% {
    opacity: 0;
    transform: scale(0.97);
    filter: drop-shadow(0 0 0 #d7192000);
  }
}
@media (max-width: 575.98px) {
  .metric {
    padding: 4px 5px;
  }
  .metric:before {
    inset: -5px;
  }
  .hero-staircase {
    right: auto;
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-metrics.is-glowing .metric:before {
    animation: none;
    opacity: 0.25;
  }
}

/* Clear laptop brand sticker and two-line final stair label. */
.laptop-logo {
  top: 58.5%;
  left: 49%;
  width: auto;
  height: auto;
  min-height: 42px;
  padding: 5px 10px;
  gap: 7px;
  border: 1px solid #ffffff;
  background: #ffffffdf;
  border-radius: 8px;
  box-shadow: 0 4px 12px #0d183b30;
  backdrop-filter: blur(3px);
}

.hero-staircase {
  right: 1%;
  width: 25.5%;
}

@media (max-width: 991.98px) and (min-width: 576px) {
  .laptop-logo {
    top: 58%;
    left: 49%;
    min-height: 34px;
    padding: 4px 7px;
    gap: 5px;
  }

  .hero-staircase {
    right: 0.5%;
    width: 25%;
  }
}
@media (max-width: 575.98px) {
  .laptop-logo {
    left: 47%;
    top: 38vw;
    min-height: 29px;
    padding: 3px 5px;
    gap: 3px;
    border-radius: 5px;
  }
}

/* Match the reference illustration's rising, offset cuboid staircase. */

.laptop-logo {
  top: 64%;
  left: 48%;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  gap: 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

@media (max-width: 991.98px) and (min-width: 576px) {
  .laptop-logo {
    top: 63%;
    left: 48%;
    min-height: 0;
    padding: 0;
    gap: 3px;
  }
}
@media (max-width: 575.98px) {
  .laptop-logo {
    top: 43vw;
    left: 47%;
    gap: 2px;
  }
}

@media (max-width: 991.98px) and (min-width: 576px) {
  .hero-copy {
    left: 3.8%;
    top: 9%;
    width: 46%;
    max-width: 500px;
  }
  .hero-copy h1 {
    font-size: clamp(1.15rem, 3.25vw, 2.8rem);
    line-height: 1.04;
    margin: 17px 0 13px;
  }
  .hero-copy p {
    width: 100%;
    max-width: 100%;
    font-size: clamp(0.78rem, 1.25vw, 1rem);
    line-height: 1.55;
  }
  .hero-actions {
    width: max-content;
    max-width: calc(100vw - 48px);
    gap: 9px;
    margin-top: 19px;
  }
  .hero-button {
    min-height: 43px;
    padding: 0 14px;
    gap: 11px;
    font-size: clamp(0.68rem, 0.85vw, 0.88rem);
  }
}

/* Move the handwritten message above the staircase and animate one red step at a time. */
.hero-slogan {
  left: 56%;
  right: 31%;
  top: 8%;
  width: 24%;
  max-width: 340px;
  font-size: clamp(0.8rem, 1.65vw, 1.3rem);
  line-height: 1.22;
}

/* Center the Forge Alumnus mark on the laptop screen as a readable, softly lit sticker. */
.laptop-logo {
  left: 50.5%;
  top: 61%;
  width: clamp(150px, 14vw, 218px);
  min-height: 52px;
  padding: 7px 12px;
  gap: 9px;
  justify-content: center;
  transform: translate(-50%, -50%) rotate(13deg) skewX(-7deg);
  border: 1px solid #ffffff;
  background: linear-gradient(135deg, #fffffffa, #ffff);
  border-radius: 12px;
  box-shadow:
    0 0 0 3px #d7192021,
    0 7px 20px #09162e55,
    0 0 25px #d7192036;
  backdrop-filter: blur(4px);
}

@media (max-width: 991.98px) and (min-width: 576px) {
  .laptop-logo {
    left: 50.5%;
    top: 60%;
    width: clamp(120px, 16vw, 165px);
    min-height: 42px;
    padding: 6px 8px;
    gap: 6px;
    border-radius: 9px;
  }
}
@media (max-width: 575.98px) {
  .laptop-logo {
    left: 50.5%;
    top: 42vw;
    width: clamp(112px, 30vw, 142px);
    min-height: 36px;
    padding: 5px 7px;
    gap: 5px;
    border-radius: 8px;
  }
}
/* Motion background sits behind the student, headline, stairs and controls. */
.hero-art {
  z-index: -1;
}
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  filter: saturate(1.04) contrast(1.02);
}
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}

/* Match the printed laptop wordmark in the reference instead of a floating badge. */
.laptop-logo {
  left: 50.5%;
  top: 64%;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  gap: 5px;
  justify-content: flex-start;
  transform: translate(-50%, -50%) rotate(13deg) skewX(-7deg);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  filter: drop-shadow(0 1px 2px #ffffffb8);
}

@media (max-width: 991.98px) and (min-width: 576px) {
  .laptop-logo {
    left: 50.5%;
    top: 63%;
    gap: 4px;
  }
}
@media (max-width: 575.98px) {
  .laptop-logo {
    left: 50.5%;
    top: 43vw;
    gap: 3px;
  }
}

/* Slightly reduce the foreground student while keeping him grounded in the scene. */
.hero-student {
  transform: scale(0.96);
  transform-origin: center bottom;
}
@media (max-width: 575.98px) {
  .hero-student {
    transform: scale(0.98);
    transform-origin: center bottom;
  }
}

/* Crisp supplied brand marks, sized to the navbar and the laptop perspective. */

.laptop-logo {
  position: absolute;
  z-index: 4;
  left: 50.5%;
  top: 64%;
  display: block;
  width: clamp(17px, 2.1vw, 30px);
  height: clamp(32px, 4.2vw, 48px);
  overflow: visible;
  transform: translate(-50%, -50%) rotate(13deg) skewX(-7deg);
  transform-origin: center;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px #0d183b50);
}
@media (max-width: 991.98px) and (min-width: 576px) {
  .laptop-logo {
    top: 63%;
    width: clamp(17px, 2.3vw, 24px);
    height: clamp(32px, 4.2vw, 42px);
  }
}
@media (max-width: 575.98px) {
  .laptop-logo {
    left: 50.5%;
    top: 43vw;
    width: 18px;
    height: 34px;
  }
}

/* Show the supplied horizontal navbar logo once, without duplicate HTML text. */
.brand {
  min-width: 0;
  width: 180px;
  flex: none;
}

.brand-full-logo {
  display: block;
  width: 160px;
  height: 65px;
  flex: none;
  overflow: visible;
  padding: 7px;
}

@media (max-width: 991.98px) {
  .brand {
    width: 162px;
  }
  .brand-full-logo {
    width: 146px;
    height: 59px;
  }
}

@media (max-width: 575.98px) {
  .brand {
    width: 142px;
  }
  .brand-full-logo {
    width: 126px;
    height: 51px;
  }
}

/* Print the supplied monogram at the center of the laptop lid. */
.laptop-logo {
  left: 50%;
  top: 62%;
  width: clamp(15px, 1.8vw, 13px);
  height: clamp(28px, 3.6vw, 45px);
  filter: drop-shadow(0 0.6px 0.8px #13204438);
  mix-blend-mode: multiply;
  opacity: 0.94;
  transform: translate(-50%, -50%) rotate(13deg) skewX(-7deg) scaleX(0.9);
  transform-origin: center;
}
@media (max-width: 991.98px) and (min-width: 576px) {
  .laptop-logo {
    left: 50%;
    top: 61.7%;
    width: clamp(15px, 1.9vw, 21px);
    height: clamp(28px, 3.6vw, 36px);
  }
}
@media (max-width: 575.98px) {
  .laptop-logo {
    left: 50%;
    top: 41vw;
    width: 15px;
    height: 28px;
  }
}

/* Synchronized boy cutout lets the HTML career stairs sit behind his motion. */

.home-hero.is-motion-playing .hero-student {
  display: none;
}

.home-hero.is-motion-playing .laptop-logo {
  animation: laptop-logo-follow 8s linear infinite;
}
@keyframes laptop-logo-follow {
  0% {
    left: 56%;
    top: 77%;
  }
  25% {
    left: 56%;
    top: 79%;
  }
  50% {
    left: 53%;
    top: 83%;
  }
  75% {
    left: 54.5%;
    top: 85%;
  }
  100% {
    left: 55%;
    top: 84%;
  }
}
@media (max-width: 575.98px) {
  .home-hero > .hero-video {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: max(67vw, 245px);
    min-height: 245px;
  }
  .home-hero > .hero-video {
    object-position: center 38%;
  }
  .home-hero.is-motion-playing .laptop-logo {
    animation-name: laptop-logo-follow-mobile;
  }
}
@keyframes laptop-logo-follow-mobile {
  0% {
    left: 56%;
    top: clamp(189px, 51.6vw, 500px);
  }
  25% {
    left: 56%;
    top: clamp(194px, 52.9vw, 500px);
  }
  50% {
    left: 53%;
    top: clamp(204px, 55.6vw, 500px);
  }
  75% {
    left: 54.5%;
    top: clamp(209px, 57vw, 500px);
  }
  100% {
    left: 55%;
    top: clamp(206px, 56.3vw, 500px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero.is-motion-playing .hero-student {
    display: block;
  }
  .home-hero.is-motion-playing .laptop-logo {
    animation: none !important;
  }
}

/* Keep a single boy layer: the transparent motion cutout sits above the HTML stairs. */

.home-hero.is-motion-loading .hero-student {
  display: none;
}
.home-hero.is-motion-playing .hero-student {
  display: none;
}

.home-hero.is-motion-playing .hero-copy {
  animation: hero-copy-enter 0.7s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
.home-hero.is-motion-playing .hero-staircase {
  animation: staircase-enter 0.65s cubic-bezier(0.2, 0.75, 0.2, 1) 0.08s both;
}
@keyframes hero-copy-enter {
  from {
    opacity: 0.55;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes staircase-enter {
  from {
    opacity: 0.45;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 991.98px) and (min-width: 576px) {
  .hero-copy {
    left: clamp(24px, 4vw, 42px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero.is-motion-playing .hero-copy,
  .home-hero.is-motion-playing .hero-staircase {
    animation: none !important;
    opacity: 1;
  }
}

/* One locked 16:9 scene keeps the student and campus animation in sync. */
.home-hero {
  width: 100%;
  max-width: 1600px;
  height: auto;
  min-height: 390px;
  aspect-ratio: 16/9;
  margin-inline: auto;
  isolation: isolate;
  background: #dcebff;
}
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #dcebff;
}
.hero-scene > .hero-art,
.hero-scene > .hero-student,
.hero-scene > .hero-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}
.hero-scene > .hero-art {
  z-index: 0;
}
.hero-scene > .hero-student {
  z-index: 2;
  transform: none;
  pointer-events: none;
}
.hero-scene > .hero-video {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  filter: contrast(1.06) saturate(1.04);
  backface-visibility: hidden;
}
.home-hero.is-motion-loading .hero-scene > .hero-video {
  display: block;
  opacity: 0;
}
.home-hero.is-motion-playing .hero-scene > .hero-art,
.home-hero.is-motion-playing .hero-scene > .hero-student {
  visibility: hidden;
}
.home-hero.is-motion-playing .hero-scene > .hero-video {
  opacity: 1;
}
.hero-scene > .laptop-logo {
  left: 53.5%;
  top: 76%;
  z-index: 3;
}
.hero-staircase {
  right: 1%;
  width: 25%;
  z-index: 1;
}
.home-hero.is-motion-playing .laptop-logo {
  animation: none !important;
  transition:
    left 0.09s linear,
    top 0.09s linear;
}
.home-hero.is-motion-loading .hero-scene > .hero-student {
  display: block;
  visibility: visible;
}
@media (max-width: 991.98px) and (min-width: 576px) {
  .home-hero {
    min-height: 390px;
  }
  .hero-staircase {
    right: 1%;
    width: 25%;
  }
}
@media (max-width: 575.98px) {
  .home-hero {
    max-width: none;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
  }
  .hero-scene {
    position: relative;
    inset: auto;
    width: 100%;
    height: max(67vw, 245px);
  }
  .hero-scene > .hero-art,
  .hero-scene > .hero-student,
  .hero-scene > .hero-video {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-position: center;
  }
  .hero-scene > .hero-art {
    position: absolute;
  }
  .hero-scene > .hero-student {
    position: absolute;
    transform: none;
  }
  .hero-scene > .hero-video {
    position: absolute;
    object-fit: cover;
  }
  .hero-scene > .laptop-logo {
    left: 53.5%;
    top: 76%;
  }
  .home-hero.is-motion-playing .hero-copy {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene > .hero-video {
    display: none !important;
  }
  .home-hero.is-motion-playing .hero-scene > .hero-art,
  .home-hero.is-motion-playing .hero-scene > .hero-student {
    visibility: visible;
  }
  .home-hero.is-motion-playing .hero-scene > .hero-video {
    display: none !important;
  }
  .home-hero.is-motion-playing .laptop-logo {
    transition: none !important;
  }
}

/* Fit the live headline into the shorter scene and keep the stair labels clear. */
.hero-copy {
  top: 8%;
  width: 43%;
}
.hero-copy h1 {
  font-size: clamp(2rem, 3.9vw, 4.4rem);
  line-height: 1.02;
  margin: clamp(14px, 2vw, 28px) 0 clamp(12px, 1.5vw, 20px);
}
@media (max-width: 991.98px) and (min-width: 576px) {
  .hero-copy {
    top: 7%;
    width: 45%;
  }
  .hero-copy h1 {
    font-size: clamp(1.65rem, 4vw, 2.55rem);
    line-height: 1.03;
    margin: 16px 0 12px;
  }
  .hero-copy p {
    font-size: clamp(0.78rem, 1.2vw, 0.95rem);
  }
}
@media (max-width: 575.98px) {
  .hero-copy {
    top: auto;
    width: auto;
  }
  .hero-copy h1 {
    font-size: clamp(2.25rem, 10.2vw, 3.15rem);
    line-height: 1.04;
    margin: 16px 0 11px;
  }
}

/* Keep the hero student perfectly still and scale him down slightly. */
.home-hero {
  width: 100%;
  max-width: 1496px;
  height: auto;
  min-height: 0;
  aspect-ratio: 1496/1051;
  margin-inline: auto;
  isolation: isolate;
  background: #dcebff;
}
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #dcebff;
}
.hero-scene > .hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}
.hero-scene > .hero-student {
  position: absolute;
  left: 18%;
  top: 28%;
  right: auto;
  bottom: 0;
  z-index: 2;
  display: block;
  width: 72%;
  height: 72%;
  min-height: 0;
  object-fit: contain;
  object-position: center bottom;
  transform: none;
  animation: none !important;
  pointer-events: none;
}
.hero-scene > .laptop-logo {
  left: 52%;
  top: 61%;
  z-index: 3;
  animation: none !important;
  transition: none !important;
}
.hero-staircase {
  right: 1%;
  width: 25%;
  z-index: 1;
}
.home-hero.is-motion-playing .hero-scene > .hero-art,
.home-hero.is-motion-playing .hero-scene > .hero-student {
  visibility: visible;
}
@media (max-width: 991.98px) and (min-width: 576px) {
  .home-hero {
    min-height: 0;
  }
  .hero-staircase {
    right: 1%;
    width: 25%;
  }
}
@media (max-width: 575.98px) {
  .home-hero {
    max-width: none;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
  }
  .hero-scene {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1496/1051;
  }
  .hero-scene > .hero-art {
    position: absolute;
  }
  .hero-scene > .hero-student {
    position: absolute;
    left: 18%;
    top: 28%;
    right: auto;
    bottom: 0;
    width: 72%;
    height: 72%;
    transform: none;
  }
  .hero-scene > .laptop-logo {
    left: 52%;
    top: 61%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene > .hero-student,
  .hero-scene > .hero-art,
  .hero-scene > .laptop-logo {
    animation: none !important;
    transition: none !important;
  }
}

/* Play the supplied fixed-camera student animation at its native 16:9 composition. */
.home-hero {
  width: 100%;
  max-width: 1496px;
  height: auto;
  min-height: 0;
  aspect-ratio: 16/9;
  margin-inline: auto;
  isolation: isolate;
  background: #dcebff;
}
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #dcebff;
}
.hero-scene > .hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}
.hero-scene > .hero-student {
  position: absolute;
  left: 18%;
  top: 20%;
  right: auto;
  bottom: 0;
  z-index: 2;
  display: block;
  width: 72%;
  height: 80%;
  min-height: 0;
  object-fit: contain;
  object-position: center bottom;
  transform: none;
  animation: none !important;
  pointer-events: none;
}
.hero-scene > .hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  filter: contrast(1.06) saturate(1.035) brightness(1.01);
}
.home-hero.is-motion-playing .hero-scene > .hero-art,
.home-hero.is-motion-playing .hero-scene > .hero-student {
  visibility: hidden;
}
.home-hero.is-motion-playing .hero-scene > .hero-video {
  opacity: 1;
}
.hero-scene > .laptop-logo {
  left: 52%;
  top: 61%;
  z-index: 3;
  animation: none !important;
  transition: none !important;
}
.hero-copy {
  z-index: 4;
}
.hero-staircase {
  right: 1%;
  width: 25%;
  z-index: 2;
}
@media (max-width: 991.98px) and (min-width: 576px) {
  .home-hero {
    min-height: 0;
  }
  .hero-staircase {
    right: 1%;
    width: 25%;
  }
}
@media (max-width: 575.98px) {
  .home-hero {
    max-width: none;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
  }
  .hero-scene {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
  .hero-scene > .hero-art,
  .hero-scene > .hero-student,
  .hero-scene > .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-position: center;
  }
  .hero-scene > .hero-student {
    left: 18%;
    top: 20%;
    right: auto;
    bottom: 0;
    width: 72%;
    height: 80%;
    object-fit: contain;
  }
  .hero-scene > .laptop-logo {
    left: 52%;
    top: 61%;
  }
  .home-hero.is-motion-playing .hero-copy {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene > .hero-video {
    display: none !important;
  }
  .home-hero.is-motion-playing .hero-scene > .hero-art,
  .home-hero.is-motion-playing .hero-scene > .hero-student {
    visibility: visible;
  }
  .hero-scene > .hero-student,
  .hero-scene > .hero-art,
  .hero-scene > .laptop-logo {
    animation: none !important;
    transition: none !important;
  }
}

/* Rebuild the approved hero staircase as editable, accessible CSS stone slabs. */
.home-hero {
  margin-bottom: 0;
}
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #dcebff;
}
.hero-scene > .hero-art {
  z-index: 0;
}
.hero-scene > .hero-video {
  z-index: 1;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  display: block;
}
.home-hero.is-motion-playing .hero-scene > .hero-art {
  visibility: hidden;
}
.home-hero.is-motion-playing .hero-scene > .hero-video {
  opacity: 1;
}
.home-hero.is-motion-playing .hero-scene > .hero-student {
  visibility: visible !important;
  display: block !important;
}
.hero-scene > .hero-student {
  position: absolute;
  left: 18%;
  top: 20%;
  right: auto;
  bottom: 0;
  z-index: 3;
  display: block;
  width: 72%;
  height: 72%;
  min-height: 0;
  object-fit: contain;
  object-position: center bottom;
  transform: scale(0.92) !important;
  transform-origin: 54% 76%;
  animation: none !important;
  transition: none !important;
  pointer-events: none;
  visibility: visible;
}
.hero-metrics {
  bottom: 0;
}
@media (max-width: 575.98px) {
  .hero-scene {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
  .hero-scene > .hero-student {
    left: 18%;
    top: 20%;
    right: auto;
    bottom: 0;
    width: 72%;
    height: 80%;
    transform: scale(0.92) !important;
  }

  .hero-metrics {
    margin-bottom: 0;
  }
}

/* Realistic staircase overlay: exact approved stone artwork, with live full-stone glow hit areas. */
.hero-staircase {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  perspective: none !important;
  transform: none !important;
  filter: drop-shadow(0 10px 14px #07162b44) !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.hero-staircase-art {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
  pointer-events: none !important;
  left: 45% !important;
  top: 10% !important;
}

/* Center the existing Forge Alumnus monogram on the laptop lid. */
.hero-scene > .laptop-logo {
  left: 53.9% !important;
  top: 64% !important;
}
/* Keep the complete homepage hero visible below the navigation in desktop Chrome. */
@media (min-width: 768px) and (orientation: landscape) {
  .navbar-wrap,
  .navbar {
    height: 72px;
    min-height: 72px;
  }
  .home-hero {
    height: calc(100vh - 72px);
    height: calc(100svh - 72px);
    max-width: none;
    min-height: 0;
    aspect-ratio: auto;
  }
  .hero-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
  .hero-metrics {
    bottom: 1.2%;
    min-height: 12%;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}
.hero-staircase .hero-staircase-art {
  z-index: 2 !important;
}

/* PATHWAY */
.pathway-section {
  min-height: 190vh;
}
.pathway-inner {
  position: sticky;
  top: 72px;
  min-height: calc(100vh - 72px);
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(420px, 1.15fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding: 6vh clamp(24px, 6vw, 88px);
  z-index: 1;
}
.path-copy {
  position: relative;
  z-index: 2;
}
.path-copy h2 {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 4.4vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -0.05em;
  color: #111b3a;
  margin: 22px 0 20px;
}
.path-copy h2 em {
  font-style: normal;
  color: var(--red);
}
.path-intro {
  max-width: 480px;
  color: #64708c;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.75;
  margin: 0 0 8px;
}
.path-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}
.path-visual-glow {
  position: absolute;
  inset: -12% -8%;
  background: radial-gradient(
    ellipse at 60% 40%,
    #ffffff 0,
    rgba(216, 225, 255, 0.6) 35%,
    transparent 72%
  );
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}
.path-roadmap {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.path-milestone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 6px 18px #12264b0a;
  transition:
    transform 0.55s var(--ease),
    box-shadow 0.35s,
    border-color 0.35s,
    background 0.35s,
    opacity 0.55s;
  opacity: 0.55;
  transform: translateX(20px);
}
.path-milestone.is-revealed {
  opacity: 1;
  transform: translateX(0);
}
.path-milestone.is-active {
  border-color: var(--red);
  background: linear-gradient(110deg, #fff, #fff7f7);
  box-shadow: 0 14px 32px #d7192022;
  transform: translateX(0) scale(1.015);
}
.path-milestone-icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff1f2;
  color: var(--red);
  font-size: 1.35rem;
  font-weight: 800;
  transition:
    background 0.35s,
    color 0.35s;
}
.path-milestone.is-active .path-milestone-icon {
  background: var(--red);
  color: #fff;
}
.path-milestone-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.path-milestone-tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.path-milestone-body strong {
  font-family: Manrope, sans-serif;
  font-size: clamp(0.88rem, 1.1vw, 1rem);
  font-weight: 800;
  color: #101a3d;
  line-height: 1.2;
}
.path-milestone-body p {
  margin: 2px 0 0;
  font-size: clamp(0.72rem, 0.95vw, 0.82rem);
  color: #6c7591;
  line-height: 1.45;
}
.path-milestone-check {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef1f8;
  color: #b8bed0;
  font-size: 0.85rem;
  font-weight: 800;
  transition:
    background 0.35s,
    color 0.35s;
}
.path-milestone.is-revealed .path-milestone-check {
  background: #fff1f2;
  color: var(--red);
}
.path-milestone.is-active .path-milestone-check {
  background: var(--red);
  color: #fff;
}
.path-visual-legend {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding-left: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #929ab0;
}
.path-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px #d7192022;
  animation: path-pulse 1.8s ease-in-out infinite;
}
@keyframes path-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px #d7192022;
  }
  50% {
    box-shadow: 0 0 0 6px #d7192015;
  }
}
@media (max-width: 991.98px) {
  .pathway-section {
    min-height: auto;
  }
  .pathway-inner {
    position: relative;
    top: 0;
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 40px;
    padding: 8vh 6vw;
  }
  .path-copy h2 {
    font-size: clamp(2.2rem, 7vw, 3.4rem);
  }
  .path-milestone {
    opacity: 1;
    transform: none;
  }
  .path-milestone.is-active {
    transform: scale(1.005);
  }
}
@media (max-width: 575.98px) {
  .pathway-inner {
    padding: 6vh 6vw;
  }
}

/* ============================================================
   MEMBERSHIP (EXACT ORIGINAL COLORS & SCROLL EFFECT)
   ============================================================ */
.membership-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
}

/* Scroll Reveal Animation */
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.8vw, 34px);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.plan-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
}

/* Your Original Colors */
.plan-card.basic {
  background: radial-gradient(
    circle at top left,
    rgb(176, 64, 18),
    rgb(46, 13, 4)
  );
  color: #fff;
}
.plan-card.standard {
  background: linear-gradient(to bottom, rgb(200, 50, 30), rgb(100, 15, 5));
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.1);
}
.plan-card.professional {
  background: radial-gradient(
    circle at bottom right,
    rgb(132, 52, 22),
    rgb(24, 9, 5)
  );
  color: #fff;
}

.plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.plan-name {
  font-family: Manrope, sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
}
.plan-sub {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
}
.plan-icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.plan-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 24px;
  font-family: Manrope, sans-serif;
  font-size: clamp(2.2rem, 3.2vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
}
.plan-price small {
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0;
}
.plan-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin-bottom: 24px;
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  color: #fff;
  line-height: 1.4;
  font-weight: 400;
}
.plan-features li::before {
  content: "•";
  flex: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  line-height: 1;
}
.plan-visual {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.plan-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.plan-card:hover .plan-visual img {
  transform: scale(1.05);
}
.plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 999px;
  border: none;
  background: #fff;
  color: #000;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.22s;
}
.plan-cta:hover {
  background: #f0f0f0;
}

@media (max-width: 991.98px) {
  .membership-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }
}

.section-title {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 4.4vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -0.05em;
  color: #111b3a;
  margin: 22px 0 20px;
}
.section-title em {
  font-style: normal;
  color: var(--red);
}

/* Alumni spotlight component styles */
/* --- BASE SECTION SETUP --- */
#alumniSpotlight.alumni-section-wrapper {
  padding: 40px;
  background-color: #ffffff;
  overflow-x: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: "Geist", sans-serif;
}

/* --- MAIN CARD --- */
.alumni-card {
  position: relative;
  width: 100%;
  max-width: 1152px; /* max-w-6xl */
  height: 600px;
  overflow: hidden;
  background-color: #f8f9fa;
  border-radius: 1.5rem; /* rounded-3xl */
  box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  transition: box-shadow 0.1s ease-out;
}

/* --- PROGRESS BAR --- */
.progress-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #e5e7eb;
  z-index: 50;
}
.progress-bar-fill {
  height: 100%;
  background-color: #d32f2f;
  transition: width 0.1s linear;
  width: 0%;
}

/* --- MOUSE GLOW --- */
.mouse-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(
    circle at center,
    rgba(211, 47, 47, 0.15) 0%,
    transparent 50%
  );
}

/* --- PROFILE SECTIONS --- */
.alumni-content-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 20;
}
.profile-section {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: row;
  width: 100%;
  height: 100%;
}
.profile-section.active {
  display: flex;
}

/* --- LEFT SIDE (TEXT) --- */
.profile-text-side {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  padding: 40px 64px 128px 64px;
}
.logo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border-radius: 9999px;
  border: 1px solid rgba(211, 47, 47, 0.2);
  background-color: white;
  padding: 10px 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px -3px rgba(211, 47, 47, 0.15);
}
.logo-pill img {
  height: 24px;
  width: auto;
  object-fit: contain;
}

.person-name {
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  color: #111827;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}

.id-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  padding: 6px 16px;
  font-size: 0.875rem;
  color: #374151;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  font-weight: 500;
}
.id-badge span {
  font-weight: 700;
  color: #111827;
  margin-left: 6px;
}

.person-details {
  margin-bottom: 24px;
  font-size: 1.125rem;
}
.person-details p {
  color: #111827;
  font-weight: 500;
  margin-bottom: 8px;
}
.person-details span {
  color: #d32f2f;
}

.person-bio {
  max-width: 28rem;
  font-size: 1rem;
  line-height: 1.625;
  color: #4b5563;
}

/* --- RIGHT SIDE (IMAGE) --- */
.profile-image-side {
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(
    to top right,
    rgba(211, 47, 47, 0.05),
    transparent
  );
}
.image-blend-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 128px;
  background: linear-gradient(
    to right,
    #f8f9fa,
    rgba(248, 249, 250, 0.8),
    transparent
  );
  z-index: 10;
}
.profile-bg-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}
.image-red-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(211, 47, 47, 0.1), transparent);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* --- BOTTOM AVATARS --- */
.avatar-picker-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  padding: 0 24px 24px 24px;
}
.avatar-picker-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  overflow-x: auto;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.alumni-count {
  padding-left: 16px;
  padding-right: 16px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #9ca3af;
  border-right: 1px solid #e5e7eb;
  white-space: nowrap;
  display: block;
}
.alumni-count span {
  font-size: 0.75rem;
  font-weight: 500;
}
.avatar-list {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  flex: 1;
  padding: 20px 28px;
  scroll-padding-inline: 28px;
}
.avatar-list::-webkit-scrollbar {
  display: none;
}

/* Avatar Buttons */
.avatar-btn {
  outline: none;
}
.avatar-ring {
  display: block;
  height: 56px;
  width: 56px;
  overflow: hidden;
  border-radius: 9999px;
  transition: all 0.3s;
}
.avatar-ring.active {
  box-shadow:
    0 0 0 4px #f8f9fa,
    0 0 0 8px #d32f2f,
    0 0 15px rgba(211, 47, 47, 0.4);
  transform: scale(1.1);
}
.avatar-ring.inactive {
  opacity: 0.6;
  filter: grayscale(100%);
}
.avatar-ring.inactive:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.05);
}
.avatar-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- ANIMATIONS --- */
@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slowZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}
@keyframes floatLogo {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.profile-section.active .animate-content {
  animation: slideUpFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.profile-section.active .animate-image {
  animation:
    slideUpFade 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    slowZoom 6s ease-out forwards;
}
.floating-logo {
  animation: floatLogo 4s ease-in-out infinite;
}
.shimmer-badge {
  background: linear-gradient(90deg, #ffffff 25%, #f3f4f6 50%, #ffffff 75%);
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
  .profile-section {
    flex-direction: column;
  }
  .profile-text-side {
    width: 100%;
    padding: 30px 24px 120px 24px;
  }
  .profile-image-side {
    width: 100%;
    height: 250px;
  }
  .person-name {
    font-size: 2.5rem;
  }
  .image-blend-overlay {
    display: none;
  }
  .alumni-count {
    display: none;
  }
}
/* Keep the spotlight's supplied Tailwind-based layout independent from browser defaults. */
#alumniSpotlight,
#alumniSpotlight * {
  box-sizing: border-box;
}
#alumniSpotlight h1,
#alumniSpotlight p {
  margin-top: 0;
}
#alumniSpotlight h1 {
  font-size: inherit;
  font-weight: inherit;
}
#alumniSpotlight button {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  cursor: pointer;
}
#alumniSpotlight img {
  display: block;
  vertical-align: middle;
}
.person-name {
  margin-top: 0;
  font-weight: 400;
}
.person-details p {
  margin-top: 0;
}
.person-bio {
  margin-bottom: 0;
}
.avatar-btn {
  display: block;
  flex: none;
}
/* Keep profile text clear of the avatar tray on narrow screens. */
#alumniSpotlight .person-name {
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1.1;
  font-weight: 400;
}

@media (max-width: 768px) {
  #alumniSpotlight.alumni-section-wrapper {
    align-items: flex-start;
  }
  #alumniSpotlight .alumni-card {
    width: 100%;
    max-width: 500px;
    height: 900px;
  }
  #alumniSpotlight .profile-section.active {
    flex-direction: column;
  }
  #alumniSpotlight .profile-text-side {
    flex: none;
    width: 100%;
    min-height: 560px;
    padding: 32px 24px 30px;
    justify-content: flex-start;
  }
  #alumniSpotlight .profile-image-side {
    flex: none;
    width: 100%;
    height: 340px;
  }
  #alumniSpotlight .person-name {
    font-size: 2.5rem;
  }
  #alumniSpotlight .image-blend-overlay,
  #alumniSpotlight .alumni-count {
    display: none;
  }
  #alumniSpotlight .avatar-picker-container {
    padding: 0 12px 14px;
  }
  #alumniSpotlight .avatar-picker-inner {
    gap: 10px;
    padding: 12px;
  }
}
/* Advisors heading follows the same layout as the Events heading. */
#alumniSpotlight.alumni-section-wrapper {
  flex-direction: column;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px);
}
#alumniSpotlight .advisors-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 1152px);
  margin: 0 auto clamp(36px, 6vh, 64px);
  text-align: center;
}
#alumniSpotlight .advisors-title {
  align-self: center;
  margin: 22px 0 0;
  text-align: center;
}
@media (max-width: 768px) {
  #alumniSpotlight.alumni-section-wrapper {
    padding: 20px 10px;
  }
}
/* Loads AFTER styles.css. All classes are prefixed n- so they never clash with old rules. */
.n-sec { position: relative; padding: clamp(72px, 11vh, 128px) clamp(20px, 5vw, 72px); }
.n-head { max-width: 1280px; margin: 0 auto clamp(32px, 5vh, 56px); }
.n-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.n-title { font-family: Manrope, sans-serif; font-weight: 800; font-size: clamp(2.3rem, 4.4vw, 4.2rem); line-height: 1.04; letter-spacing: -0.05em; color: #111b3a; margin: 22px 0 18px; max-width: 17ch; }
.n-center .n-title { max-width: 20ch; }
.n-title em { font-style: normal; color: var(--red); }
.n-lead { max-width: 540px; margin: 0; color: #5b6786; font-size: clamp(0.95rem, 1.2vw, 1.08rem); line-height: 1.75; }
.n-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.n-reveal.in { opacity: 1; transform: none; }

/* ---------- PATHWAY: staircase that echoes the hero ---------- */
.n-path { height: 240vh; background: linear-gradient(180deg, #dcebff 0%, #eef5ff 50%, #fff 100%); }
.n-path-stick { position: sticky; top: 72px; min-height: calc(100vh - 72px); max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 0.95fr 1.25fr; align-items: center; gap: clamp(24px, 4vw, 64px); padding: 3vh clamp(20px, 5vw, 72px); }
.n-now { display: flex; align-items: center; gap: 16px; max-width: 460px; margin: 28px 0; padding: 16px 20px; background: #fff; border: 1px solid #ffc9cc; border-radius: 20px; box-shadow: 0 14px 34px #d7192018; }
.n-now b { font: 800 2.2rem Manrope, sans-serif; letter-spacing: -0.04em; color: var(--red); }
.n-now strong { display: block; font: 800 1rem Manrope, sans-serif; color: #101a3d; }
.n-now small { display: block; margin-top: 2px; color: #6c7591; line-height: 1.45; }
.n-stairs svg { width: 100%; height: auto; overflow: visible; display: block; }
.n-blk rect { fill: #cddffa; transition: fill 0.4s; }
.n-blk .n-bn { font: 800 30px Manrope, sans-serif; fill: #8ea6d0; transition: fill 0.4s; }
.n-blk .n-bt { font: 700 15px "DM Sans", sans-serif; fill: #3d4c75; transition: fill 0.4s; }
.n-blk.on rect { fill: #f0777b; }
.n-blk.now rect { fill: var(--red); filter: drop-shadow(0 14px 18px #d7192055); }
.n-blk.on .n-bn, .n-blk.on .n-bt { fill: #fff; }
.n-ground { stroke: #b6c8e6; stroke-width: 3; stroke-linecap: round; }
#nPin circle:first-child { fill: #fff; stroke: var(--red); stroke-width: 5; filter: drop-shadow(0 6px 8px #0d183b40); }
#nPin .in { fill: var(--red); }

/* ---------- EVENTS ---------- */
.n-events { background: #fff; }
.n-ev-wrap { max-width: 1280px; margin: 0 auto; display: grid; gap: 28px; }
.n-feat { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(20px, 4vw, 56px); padding: clamp(18px, 2.4vw, 30px); border-radius: 36px; color: #fff; background: radial-gradient(circle at 85% 0%, #2a3a7a, #101b3c 62%); box-shadow: 0 40px 80px -30px #101b3c99; overflow: hidden; }
.n-feat-img { border-radius: 26px; overflow: hidden; background: #1b2a5a; min-height: 320px; }
.n-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.n-feat-body { display: flex; flex-direction: column; justify-content: center; padding: 8px 6px; }
.n-chip { display: inline-block; align-self: flex-start; padding: 7px 14px; border-radius: 99px; background: var(--red); font: 800 0.78rem "DM Sans", sans-serif; }
.n-feat h3 { margin: 18px 0 12px; font: 800 clamp(1.8rem, 3.2vw, 3rem)/1.05 Manrope, sans-serif; letter-spacing: -0.045em; }
.n-feat p { margin: 0 0 20px; max-width: 480px; color: #b2bdd5; line-height: 1.7; }
.n-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.n-facts span { padding: 8px 14px; border: 1px solid #ffffff2e; border-radius: 99px; font-size: 0.85rem; color: #e4e9f5; }
.n-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.n-btn { padding: 14px 26px; border-radius: 99px; border: 1px solid var(--red); background: var(--red); color: #fff; font: 800 0.88rem "DM Sans", sans-serif; transition: 0.2s; }
.n-btn.ghost { background: transparent; border-color: #ffffff55; }
.n-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 26px #d7192050; }
.n-ev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.n-ev { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 26px; overflow: hidden; background: #dcebff; box-shadow: 0 14px 36px #18294d1a; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.n-ev:hover { transform: translateY(-6px); box-shadow: 0 26px 50px #18294d30; }
.n-ev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.n-ev.done img { filter: grayscale(0.7); }
.n-ev::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(0deg, #0d183bf2, transparent); }
.n-ev-info { position: absolute; z-index: 1; inset: auto 16px 16px; color: #fff; }
.n-ev-info small { display: block; font-size: 0.78rem; font-weight: 700; color: #ffb4b7; }
.n-ev-info strong { display: block; margin-top: 4px; font: 800 1.05rem/1.2 Manrope, sans-serif; }
.n-ev-tag { position: absolute; z-index: 1; top: 14px; left: 14px; padding: 6px 12px; border-radius: 99px; background: #fffffff0; color: var(--red); font: 800 0.7rem "DM Sans", sans-serif; }
.n-ev.done .n-ev-tag { color: #5b6786; }

/* ---------- MEMBERSHIP ---------- */
.n-plans-sec { background: radial-gradient(ellipse at 50% 0, #dcebff, #f4f8ff 55%, #fff); }
.n-plans { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: center; }
.n-plan { position: relative; display: flex; flex-direction: column; padding: 30px; border-radius: 28px; color: #fff; box-shadow: 0 24px 50px -16px #3a0d0680; }
.n-plan.basic { background: radial-gradient(circle at top left, rgb(176, 64, 18), rgb(46, 13, 4)); }
.n-plan.standard { padding-block: 42px; background: linear-gradient(to bottom, rgb(200, 50, 30), rgb(100, 15, 5)); border: 2px solid #ffffff22; }
.n-plan.professional { background: radial-gradient(circle at bottom right, rgb(132, 52, 22), rgb(24, 9, 5)); }
.n-plan h3 { margin: 0; font: 800 1.45rem Manrope, sans-serif; }
.n-plan-sub { display: block; margin-top: 4px; font-size: 0.78rem; color: #ffffffb3; }
.n-plan-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 6px 16px; border-radius: 99px; background: #fff; color: var(--red); font: 800 0.72rem "DM Sans", sans-serif; box-shadow: 0 8px 20px #0003; }
.n-plan-price { margin: 18px 0 20px; padding-bottom: 20px; border-bottom: 1px solid #ffffff2e; font: 800 clamp(2.1rem, 3vw, 2.7rem) Manrope, sans-serif; letter-spacing: -0.04em; }
.n-plan-price small { font-size: 0.85rem; font-weight: 400; color: #ffffffb3; letter-spacing: 0; }
.n-plan ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; flex: 1; }
.n-plan li { display: flex; gap: 10px; font-size: 0.92rem; line-height: 1.4; }
.n-plan li::before { content: "✓"; flex: none; color: #ffb4a8; font-weight: 800; }
.n-plan img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 16px; margin-bottom: 22px; border: 1px solid #ffffff22; }
.n-plan-cta { padding: 15px; border: 0; border-radius: 99px; background: #fff; color: #111; font: 800 0.9rem "DM Sans", sans-serif; cursor: pointer; transition: 0.2s; }
.n-plan-cta:hover { background: #ffe9e6; transform: translateY(-2px); }

/* ---------- ADVISORS ---------- */
.n-adv { background: #fff; }
.n-adv-card { position: relative; max-width: 1152px; height: 580px; margin: 0 auto; overflow: hidden; border-radius: 32px; background: linear-gradient(120deg, #f4f8ff, #fff); border: 1px solid var(--line); box-shadow: 0 30px 70px -20px #18294d2e; }
.n-adv-prog { position: absolute; inset: 0 0 auto; height: 4px; background: #e4e9f5; z-index: 5; }
.n-adv-prog i { display: block; width: 0; height: 100%; background: var(--red); }
.n-adv-body { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.n-adv-text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 40px 56px 130px; animation: nIn 0.7s var(--ease) both; }
.n-adv-logo { display: flex; align-items: center; height: 46px; padding: 0 22px; margin-bottom: 22px; background: #fff; border: 1px solid #ffc9cc; border-radius: 99px; box-shadow: 0 6px 20px #d7192020; }
.n-adv-logo img { height: 24px; width: auto; object-fit: contain; }
.n-adv-text h3 { margin: 0 0 14px; font: 800 clamp(2.1rem, 3.6vw, 3.1rem)/1.05 Manrope, sans-serif; letter-spacing: -0.045em; color: #101a3d; }
.n-adv-id { padding: 6px 15px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: #596583; font-size: 0.82rem; font-weight: 600; }
.n-adv-id b { color: #101a3d; margin-left: 6px; }
.n-adv-role { margin: 0 0 14px; font-size: 1.08rem; font-weight: 600; color: #101a3d; line-height: 1.5; }
.n-adv-role span { color: var(--red); }
.n-adv-bio { max-width: 28rem; margin: 0; color: #5b6786; line-height: 1.65; }
.n-adv-photo { position: relative; background: #dcebff center top / cover no-repeat; animation: nIn 0.9s var(--ease) both; }
.n-adv-photo::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 120px; background: linear-gradient(to right, #f8fbff, transparent); }
.n-adv-tray { position: absolute; inset: auto 20px 20px; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #ffffffd9; backdrop-filter: blur(20px); border: 1px solid #fff; border-radius: 20px; box-shadow: 0 8px 30px #0d183b14; }
.n-adv-count { flex: none; padding: 0 16px 0 6px; border-right: 1px solid var(--line); font-weight: 800; font-size: 0.9rem; color: #8a93ab; line-height: 1.2; }
.n-adv-count small { display: block; font-weight: 500; font-size: 0.72rem; }
.n-adv-avatars { display: flex; align-items: center; gap: 12px; flex: 1; padding: 14px 12px; overflow-x: auto; scrollbar-width: none; }
.n-adv-avatars::-webkit-scrollbar { display: none; }
.n-adv-avatars button { flex: none; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: #dcebff; cursor: pointer; opacity: 0.6; filter: grayscale(1); transition: 0.3s; }
.n-adv-avatars button:hover { opacity: 1; filter: none; }
.n-adv-avatars button.on { opacity: 1; filter: none; transform: scale(1.1); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--red); }
.n-adv-avatars img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes nIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.n-logos { max-width: 1152px; margin: 56px auto 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.n-logos-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: nMarquee 30s linear infinite; }
.n-logos-track img { height: 28px; width: auto; opacity: 0.55; filter: grayscale(1); }
@keyframes nMarquee { to { transform: translateX(-50%); } }

/* ---------- FAQ ---------- */
.n-faq { background: #f4f8ff; }
.n-faq-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 6vw, 90px); align-items: start; }
.n-faq details { background: #fff; border: 1px solid var(--line); border-radius: 18px; margin-bottom: 12px; padding: 4px 22px; transition: box-shadow 0.3s; }
.n-faq details[open] { box-shadow: 0 14px 34px #18294d14; border-color: #ffc9cc; }
.n-faq summary { cursor: pointer; padding: 16px 0; font: 800 1rem Manrope, sans-serif; color: #101a3d; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.n-faq summary::-webkit-details-marker { display: none; }
.n-faq summary::after { content: "+"; color: var(--red); font-size: 1.4rem; line-height: 1; }
.n-faq details[open] summary::after { content: "–"; }
.n-faq details p { margin: 0 0 16px; color: #5b6786; line-height: 1.65; }

/* ---------- FOOTER ---------- */
.n-foot { max-width: 1200px; width: 100%; margin: 10vh auto 0; padding: 32px 0 8px; border-top: 1px solid #ffffff1a; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 24px; color: #838eaa; font-size: 0.85rem; }
.n-foot strong { color: #d8dfef; letter-spacing: 0.08em; }
.n-foot p { margin: 8px 0 0; }
.n-foot b { display: block; margin-bottom: 10px; color: #d8dfef; }
.n-foot a { display: block; margin-bottom: 8px; transition: color 0.2s; }
.n-foot a:hover { color: #fff; }
.n-foot-legal { text-align: right; font-size: 0.72rem; letter-spacing: 0.08em; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991.98px) {
  .n-path { height: auto; }
  .n-path-stick { position: relative; top: 0; grid-template-columns: 1fr; min-height: 0; padding: 8vh 6vw; }
  .n-feat { grid-template-columns: 1fr; }
  .n-feat-img { min-height: 260px; }
  .n-ev-grid { grid-template-columns: repeat(2, 1fr); }
  .n-plans { grid-template-columns: 1fr; max-width: 460px; }
  .n-plan.standard { padding-block: 30px; }
  .n-faq-grid { grid-template-columns: 1fr; }
  .n-foot { grid-template-columns: 1fr 1fr; }
  .n-foot-legal { text-align: left; }
}
@media (max-width: 768px) {
  .n-adv-card { height: auto; }
  .n-adv-body { position: relative; grid-template-columns: 1fr; }
  .n-adv-text { padding: 32px 24px 24px; }
  .n-adv-photo { height: 320px; order: -1; }
  .n-adv-photo::before, .n-adv-count { display: none; }
  .n-adv-tray { position: relative; inset: auto; margin: 0 12px 14px; }
}
@media (max-width: 520px) { .n-ev-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .n-reveal { opacity: 1; transform: none; transition: none; }
  .n-logos-track, .n-adv-text, .n-adv-photo { animation: none; }
}

/* ======================= v3 additions ======================= */
/* ---------- shared form fields ---------- */
.n-f { margin-bottom: 14px; text-align: left; }
.n-f label { display: block; margin-bottom: 6px; font: 700 0.82rem "DM Sans", sans-serif; color: #26325a; }
.n-f input:not([type="checkbox"]), .n-f select, .n-f textarea { width: 100%; padding: 13px 16px; border: 1.5px solid #dfe5f2; border-radius: 14px; background: #fff; color: var(--ink); font: 500 0.95rem "DM Sans", sans-serif; transition: border-color 0.2s, box-shadow 0.2s; }
.n-f textarea { resize: vertical; min-height: 110px; }
.n-f input:focus, .n-f select:focus, .n-f textarea:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 4px #d7192018; }
.n-f.bad input:not([type="checkbox"]), .n-f.bad select, .n-f.bad textarea { border-color: var(--red); }
.n-err { display: block; margin-top: 4px; color: var(--red); font-size: 0.76rem; font-style: normal; font-weight: 600; }
.n-err:empty { display: none; }
.n-chk label { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: #5b6786; }
.n-chk input { margin-top: 3px; accent-color: var(--red); }
.n-submit { width: 100%; padding: 15px; border: 0; border-radius: 99px; background: var(--red); color: #fff; font: 800 0.92rem "DM Sans", sans-serif; cursor: pointer; box-shadow: 0 10px 24px #d7192035; transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s; }
.n-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px #d7192050; }
.n-submit:disabled { opacity: 0.7; cursor: wait; transform: none; }
.n-sent { margin: 12px 0 0; padding: 12px 16px; border-radius: 14px; background: #e9f8ef; color: #18663a; font-size: 0.88rem; font-weight: 600; }
.n-link { padding: 0; border: 0; background: none; color: var(--red); font: 700 0.85rem "DM Sans", sans-serif; cursor: pointer; }
.n-link:hover { text-decoration: underline; }

/* ---------- login / sign up dialog ---------- */
.n-auth { width: min(900px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 28px; overflow: hidden; color: var(--ink); background: #fff; box-shadow: 0 50px 120px #060c1e80; }
.n-auth[open] { display: grid; grid-template-columns: 0.85fr 1.15fr; animation: nPop 0.35s var(--ease); }
.n-auth::backdrop { background: #0d183bb3; backdrop-filter: blur(6px); }
@keyframes nPop { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: none; } }
.n-x { position: absolute; top: 14px; right: 14px; z-index: 3; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #eef2fa; color: #26325a; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: 0.2s; }
.n-x:hover { background: var(--red); color: #fff; }
.n-auth-side { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 44px 36px; color: #fff; background: radial-gradient(circle at 15% 0, #d71920 0, transparent 55%), linear-gradient(160deg, #1b2a5a, #101b3c); }
.n-auth-side strong { font-size: 0.72rem; letter-spacing: 0.18em; color: #ffb4b7; }
.n-auth-side h3 { margin: 0; font: 800 2rem/1.1 Manrope, sans-serif; letter-spacing: -0.04em; }
.n-auth-side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; color: #d3dcf0; font-size: 0.92rem; }
.n-auth-side li::before { content: "✓"; margin-right: 10px; color: #ff7a7f; font-weight: 800; }
.n-auth-main { padding: 36px 36px 30px; overflow-y: auto; max-height: 92vh; }
.n-tabs { display: flex; gap: 6px; width: fit-content; margin-bottom: 20px; padding: 5px; border-radius: 99px; background: #eef2fa; }
.n-tabs button { padding: 9px 22px; border: 0; border-radius: 99px; background: none; color: #5b6786; font: 800 0.85rem "DM Sans", sans-serif; cursor: pointer; transition: 0.2s; }
.n-tabs button.on { background: #fff; color: var(--red); box-shadow: 0 4px 12px #18294d1a; }
.n-plan-pick { margin: 0 0 16px; padding: 8px 14px; width: fit-content; border-radius: 99px; background: #ffeaeb; color: var(--red); font-size: 0.8rem; font-weight: 800; }
.n-pw { position: relative; }
.n-pw input { padding-right: 70px !important; }
.n-pw button { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); border: 0; background: none; color: var(--red); font: 800 0.78rem "DM Sans", sans-serif; cursor: pointer; }
.n-swap { margin: 16px 0 0; text-align: center; color: #5b6786; font-size: 0.88rem; }
.n-auth form .n-link#forgot { display: block; margin: -4px 0 16px auto; }
.n-ok { text-align: center; padding: 30px 10px; }
.n-ok-i { width: 68px; height: 68px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font-size: 2rem; box-shadow: 0 0 0 10px #d7192018; }
.n-ok h3 { margin: 0 0 8px; font: 800 1.6rem Manrope, sans-serif; letter-spacing: -0.03em; }
.n-ok p { margin: 0 0 22px; color: #5b6786; line-height: 1.6; }

/* ---------- student climbing the stairs ---------- */
#nStud { filter: drop-shadow(0 8px 8px #0d183b30); }

/* ---------- testimonials ---------- */
.n-stories { background: #fff; }
.n-t-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.n-t { display: flex; flex-direction: column; margin: 0; padding: 26px; border-radius: 26px; background: #f4f8ff; border: 1px solid #e3ebfa; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.n-t:hover { transform: translateY(-5px); box-shadow: 0 22px 44px #18294d1c; }
.n-t.big { grid-row: span 2; justify-content: space-between; padding: 36px; color: #fff; border: 0; background: radial-gradient(circle at top left, #e23a3f, #8e0e14 80%); box-shadow: 0 30px 60px -20px #8e0e1480; }
.n-stars { color: var(--red); letter-spacing: 3px; font-size: 1rem; }
.n-t.big .n-stars { color: #ffd1d3; }
.n-t blockquote { margin: 14px 0 22px; font-size: 0.98rem; line-height: 1.65; color: #26325a; }
.n-t.big blockquote { font: 700 clamp(1.3rem, 2.1vw, 1.8rem)/1.35 Manrope, sans-serif; letter-spacing: -0.02em; color: #fff; }
.n-t figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.n-t figcaption strong { display: block; font: 800 0.95rem Manrope, sans-serif; }
.n-t figcaption small { display: block; opacity: 0.7; font-size: 0.78rem; }
.n-av { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--red); font: 800 0.85rem Manrope, sans-serif; box-shadow: 0 4px 12px #18294d1f; }

/* ---------- contact ---------- */
.n-contact { background: linear-gradient(180deg, #fff, #eef5ff); }
.n-contact-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 6vw, 90px); align-items: center; }
.n-cinfo { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; }
.n-cinfo li { display: flex; align-items: center; gap: 16px; }
.n-cinfo li > span { flex: none; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; background: #ffeaeb; color: var(--red); font-size: 1.3rem; }
.n-cinfo small { display: block; color: #8a93ab; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.n-cinfo a, .n-cinfo b { font: 700 1rem "DM Sans", sans-serif; color: #101a3d; }
.n-cinfo a:hover { color: var(--red); }
.n-cform { padding: clamp(24px, 3vw, 38px); border-radius: 28px; background: #fff; border: 1px solid #e3ebfa; box-shadow: 0 30px 70px -24px #18294d33; }

/* ---------- footer ---------- */
.closing-section { min-height: 0; }
footer.n-footer { display: block; max-width: 1200px; margin: 9vh auto 0; padding: 40px 0 0; border-top: 1px solid #ffffff1a; color: #98a3be; font-size: 0.9rem; letter-spacing: 0; }
.n-fgrid { display: grid; grid-template-columns: 1.5fr 0.8fr 0.8fr 1.3fr; gap: clamp(24px, 4vw, 56px); }
.n-fbrand strong { color: #fff; letter-spacing: 0.1em; font-size: 1rem; }
.n-fbrand p { max-width: 340px; margin: 12px 0 18px; line-height: 1.7; }
.n-social { display: flex; gap: 10px; }
.n-social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #ffffff22; border-radius: 50%; color: #d8dfef; transition: 0.2s; }
.n-social a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-3px); }
.n-social svg { width: 18px; height: 18px; }
.n-footer h4 { margin: 0 0 14px; color: #fff; font: 800 0.9rem Manrope, sans-serif; letter-spacing: 0.02em; }
.n-footer nav a { display: block; margin-bottom: 10px; transition: color 0.2s; }
.n-footer nav a:hover, .n-fbar a:hover { color: #fff; }
.n-fnews p { margin: 0 0 14px; }
.n-fnews .n-f { margin-bottom: 10px; }
.n-fnews input { background: #ffffff0f !important; border-color: #ffffff26 !important; color: #fff !important; }
.n-fnews .n-sent { background: #14391f; color: #8de3ab; }
.n-fbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; padding: 22px 0 6px; border-top: 1px solid #ffffff1a; font-size: 0.8rem; }

@media (max-width: 991.98px) {
  .n-t-grid { grid-template-columns: 1fr 1fr; }
  .n-t.big { grid-column: span 2; grid-row: auto; }
  .n-contact-grid { grid-template-columns: 1fr; }
  .n-fgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .n-auth[open] { grid-template-columns: 1fr; }
  .n-auth-side { display: none; }
  .n-auth-main { padding: 28px 22px; }
}
@media (max-width: 560px) {
  .n-t-grid { grid-template-columns: 1fr; }
  .n-t.big { grid-column: auto; }
  .n-fgrid { grid-template-columns: 1fr; }
}

/* ======================= v4: 3D + motion layer ======================= */
.n-progress { position: fixed; top: 0; left: 0; width: 100%; height: 4px; z-index: 60; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #ff7a7f, var(--red)); box-shadow: 0 0 14px #d7192090; pointer-events: none; }
.n-cursor { position: fixed; left: 0; top: 0; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; pointer-events: none; z-index: 5; opacity: 0; transition: opacity 0.4s; background: radial-gradient(circle, #d7192022, transparent 65%); }
.n-sec { isolation: isolate; overflow-x: clip; }
.n-orb { position: absolute; z-index: -1; width: 420px; height: 420px; border-radius: 50%; background: #ff8a8f; filter: blur(70px); opacity: 0.28; pointer-events: none; will-change: transform; }
.n-orb.blue { background: #7fb0ff; opacity: 0.32; }

/* 3D reveal + tilt */
.n-reveal { opacity: 0; transform: perspective(1000px) translateY(46px) rotateX(14deg); transform-origin: 50% 100%; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.n-reveal.in { opacity: 1; transform: none; }
.n-ev, .n-plan, .n-t, .n-feat, .n-now, .n-vcard { transform-style: preserve-3d; will-change: transform; }
.tilting { transition: transform 0.12s linear !important; }
.n-feat, .n-ev { cursor: pointer; }

/* split titles */
.n-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; perspective: 700px; }
.n-split .n-w > span { display: inline-block; transform: translateY(115%) rotateX(-85deg); transform-origin: 50% 100%; transition: transform 1s var(--ease); }
.n-split.in .n-w > span { transform: none; }

/* ---------- 3D staircase scene ---------- */
.n-stairs { perspective: 1400px; perspective-origin: 50% 35%; }
.n-scene { position: relative; transform-style: preserve-3d; will-change: transform; transform: rotateX(12deg) rotateY(-28deg); }
.n-scene svg { position: relative; overflow: visible; transform: translateZ(0); }
.n-blk { opacity: 0; transform: translateY(100px); transition: opacity 0.7s var(--ease), transform 1s var(--ease); }
.n-stairs.in .n-blk { opacity: 1; transform: none; }
.n-blk .f { fill: #cddffa; transition: fill 0.4s; }
.n-blk .t { fill: #eaf2ff; transition: fill 0.4s; }
.n-blk .s { fill: #9db9e6; transition: fill 0.4s; }
.n-blk.on .f { fill: #f0777b; } .n-blk.on .t { fill: #ff9a9e; } .n-blk.on .s { fill: #c4343a; }
.n-blk.now .f { fill: var(--red); } .n-blk.now .t { fill: #ff6a70; } .n-blk.now .s { fill: #a90e15; }
.n-blk.now { filter: drop-shadow(0 18px 20px #d7192066); }
.n-fl-layer { position: absolute; inset: -6%; transform-style: preserve-3d; pointer-events: none; }
.n-fl-layer i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 24%; background: linear-gradient(135deg, #fff, #ffd2d4); border: 1px solid #ffffffcc; box-shadow: 0 22px 40px #d7192033; transform: translateZ(var(--z)) rotate3d(1, 1, 0, 40deg); animation: nFloat var(--d) ease-in-out infinite alternate; }
.n-fl-layer i:nth-child(even) { background: linear-gradient(135deg, #fff, #bfd6ff); box-shadow: 0 22px 40px #3a6fd833; }
@keyframes nFloat { to { transform: translateZ(var(--z)) translateY(-30px) rotate3d(1, 1, 0, 170deg); } }
.n-confetti { position: absolute; right: 6%; top: 4%; width: 0; height: 0; pointer-events: none; transform: translateZ(150px); }
.n-confetti i { position: absolute; width: 9px; height: 14px; border-radius: 2px; background: var(--c); animation: nConf 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; }
@keyframes nConf { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
#nFlag { opacity: 0; transition: opacity 0.5s; }
#nFlag.on { opacity: 1; }
#nFlag .cloth { transform-box: fill-box; transform-origin: left center; animation: nWave 0.55s ease-in-out infinite alternate; }
@keyframes nWave { from { transform: skewY(-6deg) scaleX(1); } to { transform: skewY(7deg) scaleX(0.9); } }
#nPing { transform-box: fill-box; transform-origin: center; }
#nPing.go { animation: nPing 0.9s ease-out; }
@keyframes nPing { from { transform: scale(0.3); opacity: 0.95; } to { transform: scale(2.4); opacity: 0; } }

/* ---------- ribbon ---------- */
.n-ribbon { position: relative; z-index: 4; margin: -10px 0; padding: 18px 0; overflow: hidden; background: var(--red); color: #fff; transform: rotate(-2deg) scale(1.04); box-shadow: 0 16px 40px #d7192055; }
.n-ribbon-track { display: flex; width: max-content; animation: nMarquee 26s linear infinite; font: 800 1.05rem Manrope, sans-serif; letter-spacing: 0.22em; white-space: nowrap; }

/* ---------- about us ---------- */
.n-about { background: linear-gradient(180deg, #fff, #f4f8ff); padding-top: clamp(90px, 14vh, 160px); }
.n-about-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.n-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.n-vcard { padding: 22px; border-radius: 22px; background: #fff; border: 1px solid #e3ebfa; box-shadow: 0 14px 34px #18294d12; }
.n-vcard span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 13px; background: #ffeaeb; color: var(--red); font-size: 1.15rem; }
.n-vcard h3 { margin: 0 0 6px; font: 800 1rem Manrope, sans-serif; color: #101a3d; }
.n-vcard p { margin: 0; color: #5b6786; font-size: 0.86rem; line-height: 1.55; }
.n-cube-stage { position: relative; display: grid; place-items: center; min-height: 480px; perspective: 1100px; cursor: grab; touch-action: pan-y; user-select: none; }
.n-cube-stage.grab { cursor: grabbing; }
.n-cube-stage small { position: absolute; bottom: 8px; color: #8a93ab; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.7rem; }
.n-cube-stage::after { content: ""; position: absolute; bottom: 70px; width: 220px; height: 34px; border-radius: 50%; background: #0d183b; opacity: 0.16; filter: blur(14px); }
.n-cube { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; z-index: 1; }
.n-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 22px; border: 1px solid #ffffff55; color: #fff; font: 800 1.35rem Manrope, sans-serif; backface-visibility: hidden; background: linear-gradient(135deg, #e0343a, #8e0e14); box-shadow: inset 0 0 40px #ffffff22; }
.n-face.alt { background: linear-gradient(135deg, #2a3a7a, #101b3c); }
.n-face b { font-size: 2.6rem; line-height: 1; }
.n-face.f1 { transform: translateZ(100px); } .n-face.f2 { transform: rotateY(90deg) translateZ(100px); }
.n-face.f3 { transform: rotateY(180deg) translateZ(100px); } .n-face.f4 { transform: rotateY(-90deg) translateZ(100px); }
.n-face.f5 { transform: rotateX(90deg) translateZ(100px); } .n-face.f6 { transform: rotateX(-90deg) translateZ(100px); }
.n-ring { position: absolute; width: 340px; height: 340px; border-radius: 50%; border: 2px dashed #d7192060; animation: nRing 16s linear infinite; }
.n-ring.r2 { width: 440px; height: 440px; border-color: #3a6fd855; animation-duration: 24s; animation-direction: reverse; }
@keyframes nRing { from { transform: rotateX(72deg) rotateZ(0); } to { transform: rotateX(72deg) rotateZ(360deg); } }

/* ---------- event detail panel ---------- */
.n-evd { width: 100vw; height: 100vh; max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: hidden; }
.n-evd[open] { display: grid; place-items: center; }
.n-evd::backdrop { background: #0a1230d0; backdrop-filter: blur(12px); }
.n-evd-panel { position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr; width: min(1100px, 94vw); max-height: 90vh; overflow: auto; border-radius: 32px; background: #fff; box-shadow: 0 60px 140px #000a; }
.n-evd-img { position: relative; min-height: 420px; background: linear-gradient(135deg, #dcebff, #fff1f2); }
.n-evd-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.n-evd-body { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 44px); }
.n-evd-body > * { animation: nIn 0.7s var(--ease) both; }
.n-evd-body > *:nth-child(2) { animation-delay: 0.08s; } .n-evd-body > *:nth-child(3) { animation-delay: 0.14s; }
.n-evd-body > *:nth-child(4) { animation-delay: 0.2s; } .n-evd-body > *:nth-child(5) { animation-delay: 0.26s; }
.n-evd-body > *:nth-child(6) { animation-delay: 0.32s; } .n-evd-body > *:nth-child(7) { animation-delay: 0.38s; }
.n-evd-tags { display: flex; gap: 8px; }
.n-chip.dark { background: #101b3c; }
.n-chip{color:#fff}
.n-chip.dark{color:#fff}
.n-evd h2 { margin: 0; font: 800 clamp(1.7rem, 3vw, 2.6rem)/1.05 Manrope, sans-serif; letter-spacing: -0.045em; color: #101a3d; }
.n-evd-desc { margin: 0; color: #5b6786; line-height: 1.7; }
.n-evd-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.n-evd-facts div { padding: 12px 14px; border-radius: 16px; background: #f4f8ff; border: 1px solid #e3ebfa; }
.n-evd-facts small { display: block; color: #8a93ab; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.n-evd-facts b { display: block; margin-top: 4px; font: 700 0.88rem/1.35 "DM Sans", sans-serif; color: #101a3d; }
.n-cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.n-cd div { padding: 12px 6px; text-align: center; border-radius: 16px; color: #fff; background: linear-gradient(160deg, #1b2a5a, #101b3c); }
.n-cd b { display: block; font: 800 1.6rem Manrope, sans-serif; }
.n-cd small { font-size: 0.64rem; opacity: 0.7; letter-spacing: 0.12em; text-transform: uppercase; }
.n-hl { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; color: #26325a; font-size: 0.92rem; }
.n-hl li::before { content: "✓"; margin-right: 10px; color: var(--red); font-weight: 800; }
.n-btn.ghost.dark { color: var(--red); border-color: #ffb9bd; }
.n-btn.ghost.dark:hover { background: var(--red); color: #fff; }

@media (max-width: 991.98px) {
  .n-about-grid { grid-template-columns: 1fr; }
  .n-cube-stage { min-height: 400px; }
  .n-scene { transform: rotateX(8deg) rotateY(-14deg); }
}
@media (max-width: 720px) {
  .n-vals { grid-template-columns: 1fr; }
  .n-evd-panel { grid-template-columns: 1fr; }
  .n-evd-img { min-height: 240px; }
  .n-evd-facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .n-blk { opacity: 1; transform: none; transition: none; }
  .n-fl-layer i, .n-ring, .n-ribbon-track, #nFlag .cloth { animation: none; }
  .n-cursor { display: none; }
}

/* ======================= v5: flat stairs back, graduation cap, four-year roadmap ======================= */
.n-stairs { perspective: none; }
.n-scene { transform: none !important; }
#nStud { filter: drop-shadow(0 8px 8px #0d183b30); }
#nCap { opacity: 0; transform: translateY(-70px) rotate(-28deg); transform-box: fill-box; transform-origin: center; transition: transform 0.8s cubic-bezier(0.3, 1.7, 0.5, 1), opacity 0.3s; }
#nCap.on { opacity: 1; transform: none; }

.n-about .n-head { margin-bottom: 28px; }
.n-about .n-lead { max-width: 680px; margin-inline: auto; }
.n-vals-wide { max-width: 1000px; margin: 0 auto clamp(56px, 9vh, 96px); }
.n-years { max-width: 1180px; margin: 0 auto; text-align: center; }
.n-years-title { margin: 0 0 22px; font: 800 clamp(1.8rem, 3vw, 2.8rem) Manrope, sans-serif; letter-spacing: -0.045em; color: #101a3d; }
.n-years-title em { font-style: normal; color: var(--red); }
.n-yr-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.n-yr-tabs button { padding: 10px 22px; border: 1px solid #ffb9bd; border-radius: 99px; background: #fff; color: var(--red); font: 800 0.85rem "DM Sans", sans-serif; cursor: pointer; transition: 0.25s; }
.n-yr-tabs button:hover, .n-yr-tabs button.on { background: var(--red); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px #d7192038; }
.n-yr-line { height: 5px; max-width: 420px; margin: 16px auto 0; border-radius: 9px; background: #d6e2f7; overflow: hidden; }
.n-yr-line i { display: block; width: 25%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff7a7f, var(--red)); transition: width 0.7s var(--ease); }
.n-yr-stage { position: relative; height: 490px; margin-top: 8px; perspective: 1500px; touch-action: pan-y; user-select: none; }
.n-yr { position: absolute; left: 50%; top: 24px; width: min(330px, 76vw); height: 440px; margin-left: calc(min(330px, 76vw) / -2); padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; text-align: left; overflow: hidden; border-radius: 28px; background: #fff; border: 1px solid #e3ebfa; box-shadow: 0 30px 60px -22px #18294d3a; backface-visibility: hidden; cursor: pointer; transition: transform 0.9s var(--ease), opacity 0.6s, box-shadow 0.4s, border-color 0.4s; }
.n-yr.on { cursor: default; border-color: #ffc9cc; box-shadow: 0 44px 80px -26px #d7192060; }
.n-yr::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, #ff7a7f, var(--red)); }
.n-yr-ghost { position: absolute; right: 16px; top: -10px; font: 800 9rem/1 Manrope, sans-serif; color: #f1f5fd; pointer-events: none; }
.n-yr > *:not(.n-yr-ghost) { position: relative; z-index: 1; }
.n-yr .n-chip { align-self: flex-start; }
.n-yr h3 { margin: 4px 0 0; font: 800 2rem Manrope, sans-serif; letter-spacing: -0.045em; color: #101a3d; }
.n-yr p { margin: 0; color: #5b6786; font-size: 0.92rem; }
.n-yr ul { flex: 1; margin: 6px 0 0; padding: 0; list-style: none; display: grid; align-content: start; gap: 9px; color: #26325a; font-size: 0.88rem; line-height: 1.4; }
.n-yr li::before { content: "✓"; margin-right: 9px; color: var(--red); font-weight: 800; }
.n-yr-foot { padding: 12px 14px; border-radius: 16px; background: #fff1f2; }
.n-yr-foot small { display: block; color: var(--red); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.n-yr-foot b { display: block; margin-top: 3px; font-size: 0.84rem; color: #101a3d; }
.n-yr-nav { display: flex; justify-content: center; gap: 12px; margin-top: 4px; }
.n-yr-nav button { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: 1.15rem; cursor: pointer; transition: 0.2s; }
.n-yr-nav button:hover { background: var(--red); border-color: var(--red); color: #fff; }
@media (prefers-reduced-motion: reduce) { .n-yr { transition: none; } #nCap { transition: none; } }

/* ======================= v6: mentors, associates, courses, nav, student ======================= */
@media (min-width: 992px) and (max-width: 1250px) {
  .navbar-nav .nav-link { padding: 0.5rem 0.45rem !important; font-size: 0.8rem; }
  .navbar-nav .nav-link:after { left: 0.45rem; right: 0.45rem; }
}
#nEye { transform-box: fill-box; transform-origin: center; animation: nBlink 4.6s infinite; }
@keyframes nBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }

/* segmented toggle */
.n-seg { display: inline-flex; gap: 6px; margin-top: 26px; padding: 5px; border-radius: 99px; background: #eef2fa; }
.n-seg button { padding: 11px 28px; border: 0; border-radius: 99px; background: none; color: #5b6786; font: 800 0.88rem "DM Sans", sans-serif; cursor: pointer; transition: 0.25s; }
.n-seg button.on { background: #fff; color: var(--red); box-shadow: 0 6px 16px #18294d1f; }
.n-pane { display: none; max-width: 1240px; margin: 0 auto; }
.n-pane.on { display: block; animation: nIn 0.6s var(--ease) both; }
.n-hint { margin: 22px 0 0; text-align: center; color: #8a93ab; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.n-mentors { background: linear-gradient(180deg, #f4f8ff, #fff); }

/* mentor flip cards */
.n-mgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.n-m { aspect-ratio: 3 / 4; perspective: 1100px; outline: 0; }
.n-m-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.85s var(--ease); }
.n-m.flip .n-m-in, .n-m:focus-visible .n-m-in { transform: rotateY(180deg); }
@media (hover: hover) { .n-m:hover .n-m-in { transform: rotateY(180deg); } }
.n-m-front, .n-m-back { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; backface-visibility: hidden; box-shadow: 0 18px 40px -14px #18294d44; }
.n-m-front { background: #dcebff; }
.n-m-photo { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.n-m-front::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(0deg, #0d183bf0, transparent); }
.n-m-logo { position: absolute; z-index: 2; top: 12px; left: 12px; display: flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 99px; background: #fff; box-shadow: 0 4px 12px #0d183b2e; }
.n-m-logo img { height: 16px; width: auto; max-width: 70px; object-fit: contain; }
.n-m-info { position: absolute; z-index: 2; inset: auto 14px 14px; color: #fff; }
.n-m-info strong { display: block; font: 800 1.05rem/1.15 Manrope, sans-serif; }
.n-m-info small { display: block; margin-top: 3px; color: #ffd0d2; font-size: 0.76rem; line-height: 1.3; }
.n-m-back { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 14px; text-align: center; color: #fff; background: radial-gradient(circle at 20% 0, #e23a3f, #8e0e14 80%); }
.n-m-blogo { display: flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 99px; background: #fff; }
.n-m-blogo img { height: 18px; width: auto; max-width: 90px; object-fit: contain; }
.n-m-back h4 { margin: 4px 0 0; font: 800 1.1rem Manrope, sans-serif; }
.n-m-back p { margin: 0; font-size: 0.8rem; line-height: 1.4; color: #ffe1e2; }
.n-m-back p b { color: #fff; }
.n-tagrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.n-tagrow span { padding: 4px 10px; border-radius: 99px; background: #ffffff26; font-size: 0.68rem; font-weight: 700; }
.n-tagrow.dark span { background: #eef2fa; color: #3d4c75; }
.n-m-back .n-btn { margin-top: 6px; padding: 10px 18px; background: #fff; border-color: #fff; color: var(--red); font-size: 0.78rem; }

/* associates */
.n-agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.n-a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 20px 24px; text-align: center; border-radius: 26px; background: #fff; border: 1px solid #e3ebfa; box-shadow: 0 16px 40px #18294d14; }
.n-a-logo { display: grid; place-items: center; width: 100%; height: 76px; margin-bottom: 8px; border-radius: 18px; background: #f4f8ff; }
.n-a-logo img { max-height: 36px; max-width: 70%; width: auto; object-fit: contain; }
.n-a h4 { margin: 0; font: 800 1.02rem Manrope, sans-serif; color: #101a3d; }
.n-a small { color: var(--red); font-weight: 800; font-size: 0.78rem; }
.n-a-faces { display: flex; justify-content: center; margin-top: 10px; }
.n-a-faces img { width: 38px; height: 38px; margin-left: -10px; border-radius: 50%; border: 3px solid #fff; object-fit: cover; box-shadow: 0 4px 10px #18294d2a; }
.n-a-faces img:first-child { margin-left: 0; }
.n-mstats { max-width: 760px; margin: 48px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.n-mstats div { padding: 18px 12px; text-align: center; border-radius: 20px; background: #101b3c; color: #fff; }
.n-mstats b { display: block; font: 800 1.9rem Manrope, sans-serif; letter-spacing: -0.04em; }
.n-mstats small { color: #aebbd9; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* courses */
.n-courses { background: #fff; }
.n-cbar { max-width: 1280px; margin: 0 auto 28px; }
.n-cgrid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; align-items: start; }
.n-c { display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: #fff; border: 1px solid #e3ebfa; box-shadow: 0 16px 40px #18294d14; }
.n-c.is-hidden { display: none; }
.n-c.pop { animation: nIn 0.6s var(--ease) both; }
.n-c-top { position: relative; height: 130px; padding: 16px; display: flex; justify-content: flex-end; align-items: flex-start; overflow: hidden; }
.n-c-top.p0 { background: linear-gradient(135deg, #e0343a, #8e0e14); } .n-c-top.p1 { background: linear-gradient(135deg, #2a3a7a, #101b3c); }
.n-c-top.p2 { background: linear-gradient(135deg, #3a6fd8, #1b3d8f); } .n-c-top.p3 { background: linear-gradient(135deg, #f08a2c, #c24a10); }
.n-c-top::before { content: ""; position: absolute; right: -40px; bottom: -60px; width: 190px; height: 190px; border-radius: 50%; background: #ffffff1c; }
.n-c-top::after { content: ""; position: absolute; left: -30px; top: -50px; width: 120px; height: 120px; border-radius: 50%; border: 18px solid #ffffff14; }
.n-c-glyph { position: absolute; left: 20px; bottom: 12px; color: #fff; font: 800 3.6rem/1 Manrope, sans-serif; text-shadow: 0 8px 20px #0003; }
.n-c-top .n-chip { position: relative; z-index: 1; background: #ffffffee; color: #101a3d; }
.n-c-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.n-c-cat { color: var(--red); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.68rem; }
.n-c h3 { margin: 0; font: 800 1.15rem/1.2 Manrope, sans-serif; letter-spacing: -0.02em; color: #101a3d; }
.n-c-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: #6c7591; font-size: 0.8rem; font-weight: 600; }
.n-c p { margin: 0; color: #5b6786; font-size: 0.88rem; line-height: 1.55; }
.n-c .n-tagrow { justify-content: flex-start; }
.n-syl { display: flex; justify-content: space-between; padding: 11px 14px; border: 1px dashed #ffb9bd; border-radius: 14px; background: #fff7f7; color: var(--red); font: 800 0.82rem "DM Sans", sans-serif; cursor: pointer; transition: 0.2s; }
.n-syl:hover { background: #ffeaeb; }
.n-syl-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.n-syl-body > div { min-height: 0; overflow: hidden; }
.n-c.open .n-syl-body { grid-template-rows: 1fr; }
.n-syl-body ol { margin: 0; padding: 4px 0 0 20px; display: grid; gap: 7px; color: #26325a; font-size: 0.86rem; }
.n-syl-body li::marker { color: var(--red); font-weight: 800; }
.n-c-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid #edf1f9; }
.n-c-foot b { font-size: 0.8rem; color: #101a3d; }
.n-c-foot .n-btn { padding: 10px 20px; font-size: 0.8rem; }

@media (max-width: 1100px) { .n-mgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px) { .n-mgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .n-mgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .n-mstats { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { #nEye { animation: none; } .n-m-in { transition: none; } }

/* ======================= v7: confused-student story, guide, career quiz ======================= */
/* worries */
.n-confused { background: linear-gradient(180deg, #eef5ff, #fff); }
.n-worries { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.n-wc { aspect-ratio: 5 / 4; perspective: 1100px; outline: 0; cursor: pointer; }
.n-wc-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.85s var(--ease); }
.n-wc.flip .n-wc-in, .n-wc:focus-visible .n-wc-in { transform: rotateY(180deg); }
@media (hover: hover) { .n-wc:hover .n-wc-in { transform: rotateY(180deg); } }
.n-wc-front, .n-wc-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; border-radius: 26px; backface-visibility: hidden; box-shadow: 0 18px 44px -14px #18294d3a; }
.n-wc-front { background: #fff; border: 1px solid #e3ebfa; }
.n-wc-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: #ffeaeb; color: var(--red); font: 800 1.6rem Manrope, sans-serif; }
.n-wc-front p { margin: 0; font: 800 1.2rem/1.25 Manrope, sans-serif; letter-spacing: -0.02em; color: #101a3d; }
.n-wc-front small { color: #8a93ab; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.n-wc-back { transform: rotateY(180deg); color: #fff; background: radial-gradient(circle at 20% 0, #e23a3f, #8e0e14 80%); }
.n-wc-back p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: #ffe9ea; }
.n-wc-back .n-btn { padding: 11px 22px; background: #fff; border-color: #fff; color: var(--red); font-size: 0.82rem; }

/* guide */
.n-guide { position: fixed; left: 16px; bottom: 12px; z-index: 40; width: 112px; transition: transform 1s var(--ease); pointer-events: none; }
.n-guide > * { pointer-events: auto; }
.n-guide.r { transform: translateX(calc(100vw - 100% - 32px)); }
.n-g-av { position: relative; display: block; width: 112px; height: 168px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 12px 14px #0d183b30); transition: transform 0.5s var(--ease); transform-origin: bottom left; }
.n-guide:not([hidden]) .n-g-av { animation: nGIn 0.9s cubic-bezier(0.3, 1.5, 0.5, 1); }
.n-guide.r .n-g-av { transform-origin: bottom right; }
.n-guide.min .n-g-av { transform: scale(0.62); }
.n-guide.hop .n-g-av { animation: nGHop 0.7s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes nGIn { from { opacity: 0; transform: translateY(80px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes nGHop { 0% { transform: none; } 35% { transform: translateY(-24px) rotate(-3deg); } 100% { transform: none; } }
.n-g-svg { width: 100%; height: 100%; display: block; transition: transform 0.6s var(--ease); }
.n-guide.r .n-g-svg { transform: scaleX(-1); }
.n-g-body { animation: nGBob 3.2s ease-in-out infinite; }
@keyframes nGBob { 50% { transform: translateY(-3px); } }
.n-g-pony { transform-box: fill-box; transform-origin: 0 0; animation: nPony 2.4s ease-in-out infinite alternate; }
@keyframes nPony { from { transform: rotate(-5deg); } to { transform: rotate(7deg); } }
.n-g-eyes { transform-box: fill-box; transform-origin: center; animation: nBlink 4.2s infinite; }
.n-g-arm { transform-box: fill-box; transform-origin: 50% 8%; }
.n-guide[data-pose="wave"] .n-g-arm { animation: nGWave 0.6s ease-in-out infinite alternate; }
.n-guide[data-pose="point"] .n-g-arm { transform: rotate(-98deg); transition: transform 0.6s var(--ease); }
@keyframes nGWave { from { transform: rotate(-155deg); } to { transform: rotate(-122deg); } }
.n-g-bubble { position: absolute; left: 84px; bottom: 128px; width: min(290px, 72vw); padding: 16px 18px 14px; border-radius: 20px 20px 20px 6px; background: #fff; border: 1px solid #ffd0d3; box-shadow: 0 22px 50px #101b3c33; transform-origin: 0 100%; transition: opacity 0.35s, transform 0.45s var(--ease); }
.n-guide.r .n-g-bubble { left: auto; right: 84px; border-radius: 20px 20px 6px 20px; transform-origin: 100% 100%; }
.n-guide.min .n-g-bubble { opacity: 0; transform: scale(0.6); pointer-events: none; }
.n-g-bubble small { display: block; margin-bottom: 6px; color: var(--red); font-weight: 800; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; }
.n-g-bubble p { min-height: 4.2em; margin: 0 0 12px; color: #26325a; font-size: 0.92rem; line-height: 1.5; }
.n-g-x { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: #eef2fa; color: #5b6786; font-size: 1rem; line-height: 1; cursor: pointer; }
.n-g-x:hover { background: var(--red); color: #fff; }
.n-g-btns { display: flex; gap: 8px; }
.n-g-btn { padding: 9px 16px; border: 1px solid #ffb9bd; border-radius: 99px; background: #fff; color: var(--red); font: 800 0.78rem "DM Sans", sans-serif; cursor: pointer; transition: 0.2s; }
.n-g-btn.solid, .n-g-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.n-g-badge { display: none; position: absolute; top: 4px; right: 0; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font: 800 0.9rem Manrope, sans-serif; box-shadow: 0 6px 14px #d7192060; }
.n-guide.min .n-g-badge { display: grid; }
.n-guide.ping .n-g-badge { animation: nPulse 0.9s ease-in-out infinite; }
@keyframes nPulse { 50% { transform: scale(1.3); } }

/* career quiz */
.n-quiz { width: min(660px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 28px; overflow: auto; color: var(--ink); background: #fff; box-shadow: 0 50px 120px #060c1e80; }
.n-quiz[open] { animation: nPop 0.35s var(--ease); }
.n-quiz::backdrop { background: #0d183bb3; backdrop-filter: blur(6px); }
.n-q-head { padding: 30px 34px 0; }
.n-q-head h3 { margin: 12px 0 14px; font: 800 1.7rem Manrope, sans-serif; letter-spacing: -0.04em; color: #101a3d; }
.n-q-dots i { display: inline-block; width: 36px; height: 5px; margin-right: 6px; border-radius: 5px; background: #dfe5f2; transition: background 0.3s; }
.n-q-dots i.on { background: var(--red); }
.n-q-body { padding: 22px 34px 32px; }
.n-q-body h4 { margin: 0 0 16px; font: 800 1.2rem Manrope, sans-serif; color: #101a3d; animation: nIn 0.5s var(--ease) both; }
.n-q-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.n-q-opts button { display: flex; align-items: center; gap: 12px; padding: 16px; text-align: left; border: 1.5px solid #dfe5f2; border-radius: 18px; background: #fff; color: #26325a; font: 700 0.9rem/1.3 "DM Sans", sans-serif; cursor: pointer; transition: 0.25s; animation: nIn 0.5s var(--ease) both; }
.n-q-opts button:nth-child(2) { animation-delay: 0.06s; } .n-q-opts button:nth-child(3) { animation-delay: 0.12s; } .n-q-opts button:nth-child(4) { animation-delay: 0.18s; } .n-q-opts button:nth-child(5) { animation-delay: 0.24s; }
.n-q-opts button span { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #ffeaeb; font-size: 1.3rem; }
.n-q-opts button:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 12px 26px #d7192026; }
.n-q-res { display: grid; gap: 14px; animation: nIn 0.6s var(--ease) both; }
.n-q-res h4 { margin: 0; font: 800 clamp(1.7rem, 4vw, 2.3rem) Manrope, sans-serif; letter-spacing: -0.045em; color: var(--red); }
.n-q-res p { margin: 0; color: #5b6786; line-height: 1.65; }
.n-q-res .n-chip { align-self: flex-start; justify-self: start; }
.n-q-box { padding: 14px 16px; border-radius: 16px; background: #f4f8ff; border: 1px solid #e3ebfa; }
.n-q-box small { display: block; color: #8a93ab; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.n-q-box b { display: block; margin-top: 4px; font-size: 0.92rem; line-height: 1.45; color: #101a3d; }
.n-q-res .n-btns { gap: 10px; }
.n-q-res .n-btn { padding: 12px 20px; font-size: 0.82rem; }
.n-q-res .n-link { justify-self: start; }

@media (max-width: 991.98px) { .n-worries { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .n-worries { grid-template-columns: 1fr; } .n-wc { aspect-ratio: 16 / 10; }
  .n-q-opts { grid-template-columns: 1fr; } .n-q-head, .n-q-body { padding-inline: 22px; }
  .n-guide { width: 80px; left: 8px; bottom: 6px; } .n-guide.r { transform: translateX(calc(100vw - 100% - 16px)); }
  .n-g-av { width: 80px; height: 120px; }
  .n-g-bubble { left: 6px; bottom: 126px; width: min(280px, calc(100vw - 24px)); } .n-guide.r .n-g-bubble { left: auto; right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .n-g-body, .n-g-pony, .n-g-eyes, .n-guide[data-pose="wave"] .n-g-arm { animation: none; } .n-guide { transition: none; } }

/* ======================= Career Development Center: advisors + ambassadors tabs ======================= */
.n-seg { flex-wrap: wrap; justify-content: center; }
.n-seg button { padding: 11px 24px; }
.n-m-initials { display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, #4f7bd9, #14224b 85%); color: #fff; font: 800 3.2rem Manrope, sans-serif; letter-spacing: -0.04em; }
.n-m-logo.txt { max-width: calc(100% - 24px); font: 800 0.7rem "DM Sans", sans-serif; color: #101a3d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-m-blogo.txt { font: 800 0.78rem "DM Sans", sans-serif; color: #101a3d; }
@media (max-width: 620px) { .n-seg button { padding: 10px 16px; font-size: 0.82rem; } }

/* Loads AFTER styles.css. Two self-contained pieces:
   dz-*  the "Sound familiar?" section
   fg-*  the Asha guide (docked, speaks, and points at real elements) */

/* =====================================================================
   SOUND FAMILIAR?  (dz-*)
   ===================================================================== */
.dz {
  background:
    radial-gradient(900px 480px at 6% 0%, #ffe6e8 0%, transparent 60%),
    radial-gradient(900px 520px at 100% 100%, #d9e8ff 0%, transparent 60%),
    #f6f8fe;
}
.dz::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(#101b3c16 1px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.dz .n-head { margin-bottom: clamp(36px, 6vh, 64px); }

.dz-board {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(22px, 3.4vw, 48px);
  align-items: start;
}
.dz-side { display: flex; flex-direction: column; }

/* reveal (own observer, animation based so hover transforms keep working) */
.dz-rise { opacity: 0; }
.dz-rise.is-in { opacity: 1; animation: dzRise 0.85s var(--ease) backwards; animation-delay: var(--d, 0s); }
@keyframes dzRise { from { opacity: 0; transform: translateY(26px); } }

/* hand-written hint */
.dz-hint {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin: 0 0 6px 10px;
  color: var(--red);
  font: 700 1.5rem/1 Caveat, "Segoe Print", cursive;
  transform: rotate(-2deg);
}
.dz-hint svg { flex: none; margin-bottom: -14px; }

/* the six worries */
.dz-list { display: grid; gap: 10px; }
.dz-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 17px 18px 17px 20px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 20px;
  background: #ffffff8c;
  color: #26325a;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.3s, border-color 0.3s, box-shadow 0.35s;
}
.dz-row:hover { background: #fff; border-color: #e3ebfa; transform: translateX(4px); }
.dz-row:focus-visible { outline: 3px solid #d7192055; outline-offset: 2px; }
.dz-n { min-width: 28px; font: 800 0.8rem Manrope, sans-serif; letter-spacing: 0.12em; color: #9aa5c0; transition: color 0.3s; }
.dz-q { flex: 1; font: 800 1.06rem/1.3 Manrope, sans-serif; letter-spacing: -0.02em; color: #1b2750; }
.dz-ch {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef2fa;
  color: #5b6786;
  font-size: 0.95rem;
  transition: background 0.3s, color 0.3s, transform 0.35s var(--ease);
}
.dz-row[aria-selected="true"] {
  background: #fff;
  border-color: #ffc9cc;
  box-shadow: 0 20px 44px -20px #d7192066;
  transform: translateX(8px);
}
.dz-row[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 16px;
  bottom: 16px;
  width: 4px;
  border-radius: 4px;
  background: var(--red);
}
.dz-row[aria-selected="true"] .dz-n { color: var(--red); }
.dz-row[aria-selected="true"] .dz-ch { background: var(--red); color: #fff; transform: translateX(2px); }

/* handwritten note */
.dz-note {
  position: relative;
  margin: 26px 8px 0;
  padding: 28px 26px 20px;
  border-radius: 6px 6px 16px 6px;
  background: linear-gradient(180deg, #fff9dc, #fff1b8);
  box-shadow: 0 24px 38px -20px #6b520077, inset 0 2px 0 #fff;
  transform: rotate(-1.4deg);
  transition: transform 0.45s var(--ease);
}
.dz-note:hover { transform: rotate(0deg) translateY(-3px); }
.dz-tape {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 98px;
  height: 26px;
  margin-left: -49px;
  background: #ffffffad;
  border: 1px solid #eadfb0;
  box-shadow: 0 2px 6px #0000001a;
  transform: rotate(3deg);
}
.dz-note blockquote { margin: 0 0 14px; color: #3b2f12; font: 700 1.55rem/1.22 Caveat, "Segoe Print", cursive; }
.dz-note figcaption { display: flex; align-items: center; gap: 10px; color: #7a6420; font: 700 0.82rem "DM Sans", sans-serif; letter-spacing: 0.02em; }
.dz-note figcaption svg { color: var(--red); flex: none; }

/* answer panel */
.dz-panel {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  min-height: 470px;
  padding: clamp(26px, 3vw, 42px);
  border-radius: 34px;
  color: #fff;
  background: radial-gradient(120% 90% at 100% 0, #2f4396 0, #101b3c 58%);
  box-shadow: 0 54px 90px -36px #101b3ccc, inset 0 1px 0 #ffffff1f;
  overflow: hidden;
}
.dz-panel::before,
.dz-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.dz-panel::before { right: -90px; bottom: -110px; width: 320px; height: 320px; border: 1px solid #ffffff14; box-shadow: 0 0 0 44px #ffffff05, 0 0 0 88px #ffffff03; }
.dz-panel::after { left: -70px; top: -90px; width: 220px; height: 220px; background: radial-gradient(circle, #d7192055, transparent 70%); }
.dz-panel > * { position: relative; z-index: 1; }
.dz-ghost { position: absolute !important; right: 22px; top: -16px; z-index: 0 !important; font: 800 11rem/1 Manrope, sans-serif; letter-spacing: -0.06em; color: #ffffff0e; pointer-events: none; }
.dz-tag {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 99px;
  background: #ffffff1c;
  color: #dbe4fa;
  font: 800 0.66rem "DM Sans", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dz-tag.red { background: #d7192040; color: #ffb4b7; }
.dz-quote { margin: 12px 0 24px; font: 800 clamp(1.5rem, 2.4vw, 2.1rem)/1.18 Manrope, sans-serif; letter-spacing: -0.035em; max-width: 18ch; }
.dz-help { margin: 12px 0 20px; color: #c9d4ee; font-size: 1.02rem; line-height: 1.7; max-width: 46ch; }
.dz-steps { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.dz-steps li { display: flex; align-items: center; gap: 12px; color: #e4e9f5; font-size: 0.94rem; line-height: 1.4; }
.dz-steps b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ffffff1f; color: #fff; font: 800 0.74rem Manrope, sans-serif; }
.dz-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 20px; border-top: 1px solid #ffffff1f; }
.dz-who { display: flex; align-items: center; gap: 12px; }
.dz-faces { display: flex; }
.dz-faces img { width: 38px; height: 38px; margin-left: -10px; border-radius: 50%; border: 3px solid #16235a; object-fit: cover; object-position: top; background: #26356f; }
.dz-faces img:first-child { margin-left: 0; }
.dz-who small { max-width: 150px; color: #aebbd9; font-size: 0.76rem; line-height: 1.35; }
.dz-panel.swap > * { animation: dzUp 0.6s var(--ease) both; }
.dz-panel.swap > :nth-child(3) { animation-delay: 0.05s; }
.dz-panel.swap > :nth-child(4) { animation-delay: 0.1s; }
.dz-panel.swap > :nth-child(5) { animation-delay: 0.15s; }
.dz-panel.swap > :nth-child(6) { animation-delay: 0.2s; }
.dz-panel.swap > :nth-child(7) { animation-delay: 0.26s; }
@keyframes dzUp { from { opacity: 0; transform: translateY(16px); } }

.dz-bottom { margin-top: clamp(36px, 6vh, 56px); }
.dz-bottom small { display: block; margin-top: 12px; color: #8a93ab; font-size: 0.84rem; }

@media (max-width: 991.98px) {
  .dz-board { grid-template-columns: 1fr; max-width: 640px; }
  .dz-panel { position: relative; top: auto; min-height: 0; margin: 4px 0 8px; border-radius: 28px; }
  .dz-row[aria-selected="true"], .dz-row:hover { transform: none; }
  .dz-ghost { font-size: 8rem; }
}
@media (max-width: 520px) {
  .dz-q { font-size: 0.98rem; }
  .dz-note blockquote { font-size: 1.4rem; }
  .dz-foot { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   ASHA, THE GUIDE  (fg-*)
   Docked bottom right. She never jumps around. She speaks, nudges once
   when the chapter changes, and rings the exact element to try next.
   ===================================================================== */
.fg[hidden] { display: none; }
.fg {
  position: fixed;
  right: clamp(10px, 1.8vw, 26px);
  bottom: clamp(8px, 1.6vw, 20px);
  z-index: 40;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
}
.fg > * { pointer-events: auto; }
.fg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fg-card {
  position: relative;
  width: min(360px, calc(100vw - 180px));
  margin-bottom: 78px;
  padding: 18px 18px 14px;
  border-radius: 22px 22px 6px 22px;
  background: #fffffff2;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid #ffd3d6;
  box-shadow: 0 30px 64px -14px #101b3c4d, 0 0 0 5px #ffffff59;
  transform-origin: 100% 100%;
  transition: opacity 0.35s, transform 0.5s var(--ease), visibility 0.35s;
}
.fg-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;   /* Adds the margin you requested */
  right: 14px;  /* Keeps it symmetrical */
  height: 4px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: linear-gradient(90deg, #ff7a7f, var(--red));
}
.fg-card::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 46px;
  width: 15px;
  height: 15px;
  background: #fff;
  border-right: 1px solid #ffd3d6;
  border-bottom: 1px solid #ffd3d6;
  transform: rotate(-45deg);
  border-bottom-right-radius: 3px;
}
.fg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fg-name { display: inline-flex; align-items: center; gap: 8px; font: 800 0.9rem Manrope, sans-serif; color: #101a3d; letter-spacing: -0.01em; }
.fg-name small { color: #8a93ab; font: 600 0.74rem "DM Sans", sans-serif; letter-spacing: 0; }
.fg-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 #22c55e80; animation: fgOnline 2.4s ease-out infinite; }
.fg-step { margin-left: auto; color: #8a93ab; font: 800 0.68rem "DM Sans", sans-serif; letter-spacing: 0.1em; }
.fg-min { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #eef2fa; color: #5b6786; font-size: 1rem; line-height: 1; cursor: pointer; transition: 0.2s; }
.fg-min:hover { background: var(--red); color: #fff; }
.fg-text { position: relative; margin: 0 0 12px; font: 500 1rem/1.6 "DM Sans", sans-serif; color: #26325a; }
.fg-ghost { display: block; visibility: hidden; }
.fg-typed { position: absolute; inset: 0; }
.fg.is-typing .fg-typed::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--red); animation: fgCaret 0.8s steps(2) infinite; }
.fg-prog { height: 3px; margin-bottom: 12px; border-radius: 3px; background: #eaeff9; overflow: hidden; }
.fg-prog i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff7a7f, var(--red)); transition: width 0.8s var(--ease); }
.fg-actions { display: flex; align-items: center; gap: 8px; }
.fg-btn { height: 36px; padding: 0 15px; border: 1px solid #ffb9bd; border-radius: 99px; background: #fff; color: var(--red); font: 800 0.78rem "DM Sans", sans-serif; cursor: pointer; transition: 0.2s; }
.fg-btn:hover, .fg-btn.solid { background: var(--red); border-color: var(--red); color: #fff; }
.fg-btn.solid { flex: 1; box-shadow: 0 8px 18px #d719202e; }
.fg-btn.solid:hover { transform: translateY(-2px); }
.fg-btn.round { width: 36px; padding: 0; }
.fg-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

.fg-avatar {
  position: relative;
  isolation: isolate;
  flex: none;
  width: 134px;
  height: 201px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.fg-avatar .n-g-svg { transform: scaleX(-1); filter: drop-shadow(0 14px 14px #0d183b3d); }
.fg-avatar:focus-visible { outline: 3px solid #d7192066; outline-offset: 4px; border-radius: 24px; }
.fg-halo { position: absolute; z-index: -1; left: 50%; bottom: 4px; width: 240px; height: 240px; margin-left: -120px; border-radius: 50%; background: radial-gradient(circle, #d7192042 0, #d7192014 46%, transparent 70%); animation: fgBreath 3.8s ease-in-out infinite; pointer-events: none; }
.fg-ring { position: absolute; z-index: -1; left: 50%; top: 52%; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; border: 2px solid var(--red); opacity: 0; pointer-events: none; }
.fg-ring.go { animation: fgPing 1.1s ease-out; }
.fg-avatar.nudge { animation: fgNudge 0.7s var(--ease); }
.fg-badge { display: none; position: absolute; top: 8px; left: 4px; z-index: 2; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font: 800 0.78rem Manrope, sans-serif; box-shadow: 0 6px 14px #d7192066, 0 0 0 3px #fff; }
.fg.min .fg-badge { display: grid; }
.fg-badge.ping { animation: fgBadge 0.9s ease-in-out 2; }

.fg[data-pose="point"] .n-g-arm { transform: rotate(-98deg); transition: transform 0.7s var(--ease); }
.fg[data-pose="wave"] .n-g-arm { animation: nGWave 0.6s ease-in-out infinite alternate; }

.fg:not([hidden]) .fg-avatar { animation: fgRise 1s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.fg:not([hidden]) .fg-avatar.nudge { animation: fgNudge 0.7s var(--ease); }
.fg:not([hidden]) .fg-card { animation: fgPop 0.6s var(--ease) 0.5s backwards; }

.fg.rest .fg-card, .fg.min .fg-card { opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.92); pointer-events: none; }
.fg.min .fg-avatar { transform: scale(0.8); }

/* the ring that points at the thing to try */
.fg-spot {
  position: fixed;
  z-index: 39;
  left: 0;
  top: 0;
  border: 2px solid var(--red);
  box-shadow: 0 0 0 6px #d7192018, 0 0 40px #d7192040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
  will-change: transform, width, height;
}
.fg-spot.on { opacity: 1; animation: fgSpot 2.2s ease-in-out infinite; }
.fg-spot::after {
  content: attr(data-label);
  position: absolute;
  top: -15px;
  right: 18px;
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--red);
  color: #fff;
  font: 800 0.7rem "DM Sans", sans-serif;
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: 0 8px 18px #d719204d;
}

@keyframes fgRise { from { opacity: 0; transform: translateY(90px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes fgPop { from { opacity: 0; transform: translateY(16px) scale(0.85); } }
@keyframes fgNudge { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.07); } }
@keyframes fgBreath { 50% { transform: scale(1.1); opacity: 0.75; } }
@keyframes fgPing { from { opacity: 0.8; transform: scale(0.5); } to { opacity: 0; transform: scale(1.9); } }
@keyframes fgSpot { 50% { box-shadow: 0 0 0 12px #d7192010, 0 0 56px #d7192059; } }
@keyframes fgOnline { 70% { box-shadow: 0 0 0 7px #22c55e00; } 100% { box-shadow: 0 0 0 0 #22c55e00; } }
@keyframes fgCaret { 50% { opacity: 0; } }
@keyframes fgBadge { 50% { transform: scale(1.35); } }

@media (max-width: 640px) {
  .fg { right: 8px; bottom: 6px; }
  .fg-avatar { width: 78px; height: 117px; }
  .fg-card { width: min(300px, calc(100vw - 100px)); margin-bottom: 40px; padding: 16px 15px 12px; }
  .fg-halo { width: 130px; height: 130px; margin-left: -65px; }
}
@media (prefers-reduced-motion: reduce) {
  .fg-halo, .fg-dot, .fg-spot.on, .fg[data-pose="wave"] .n-g-arm { animation: none; }
  .fg:not([hidden]) .fg-avatar, .fg:not([hidden]) .fg-card, .fg-avatar.nudge, .fg-ring.go { animation: none; }
  .dz-rise.is-in, .dz-panel.swap > * { animation: none; }
  .dz-rise { opacity: 1; }
  .dz-note { transform: none; }
}

/* ---- speaking: dots, lip-sync, and the dimmed screen ---- */
.fg-dots { position: absolute; left: 0; top: 7px; display: none; gap: 5px; }
.fg.is-thinking .fg-dots { display: inline-flex; }
.fg-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c4cce0; animation: fgDot 1s ease-in-out infinite; }
.fg-dots i:nth-child(2) { animation-delay: 0.15s; }
.fg-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes fgDot { 0%, 60%, 100% { transform: translateY(0); background: #c4cce0; } 30% { transform: translateY(-6px); background: var(--red); } }
.fg-mouth { transform-box: fill-box; transform-origin: 50% 0; }
.fg.is-typing .fg-mouth { animation: fgTalk 0.2s ease-in-out infinite alternate; }
@keyframes fgTalk { from { transform: scaleY(1); } to { transform: scaleY(0.3); } }

.fg-dim {
  position: fixed;
  inset: 0;
  z-index: 38;
  background: radial-gradient(ellipse 60% 55% at 85% 88%, #d7192030, transparent 70%), #080e28b8;
  -webkit-backdrop-filter: blur(2.5px);
  backdrop-filter: blur(2.5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.fg-dim.on { opacity: 1; pointer-events: auto; cursor: pointer; }
.fg.focus .fg-card { transform: scale(1.04); box-shadow: 0 0 0 6px #ffffff59, 0 34px 90px -10px #000000a6, 0 0 60px #d7192055; }
.fg.focus .fg-halo { opacity: 1; filter: brightness(1.3); }

/* ---- course filter chips (All, Tech, Career, Business) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 11px 24px;
  border: 1.5px solid #dfe5f2;
  border-radius: 99px;
  background: #fff;
  color: #3d4c75;
  font: 800 0.88rem "DM Sans", sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 12px #18294d0f;
  transition: transform 0.25s var(--ease), background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.chip:hover { border-color: #ffb9bd; color: var(--red); transform: translateY(-2px); box-shadow: 0 10px 22px #d7192024; }
.chip:focus-visible { outline: 3px solid #d7192055; outline-offset: 2px; }
.chip.on { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 12px 24px #d7192040; }
.chip.on:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .fg-dots i, .fg.is-typing .fg-mouth { animation: none; } .fg-dim { transition: none; } }
/* Executive panel: static slides behave like direct grid children */
.n-adv-slide { display: contents; }
.n-adv-slide[hidden] { display: none; }
.n-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.n-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #0b1330;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.n-app-btn:hover,
.n-app-btn:focus-visible {
  background: #16204a;
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
  outline: none;
}

.n-app-btn svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.n-app-btn span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.n-app-btn small {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.n-app-btn b {
  font-size: 14px;
  font-weight: 700;
}

/* stack on small screens so both badges fit cleanly */
@media (max-width: 480px) {
  .n-apps { width: 100%; }
  .n-app-btn { flex: 1 1 auto; justify-content: center; }
}
.closing-watermark {
  position: absolute;
  right: -2%;
  bottom: -30%;
  width: clamp(220px, 34vw, 350px);
  height: auto;
  max-width: 46%;
  object-fit: contain;
  opacity: 0.2;
  pointer-events: none;
  user-select: none;
  filter: grayscale(0.8);
  z-index: 0;
}

/* keep the card content above the watermark */
.closing-card > *:not(.closing-watermark) {
  position: relative;
  z-index: 1;
}

/* Custom Modal Styles */
.custom-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(13, 24, 59, 0.7); /* Dark semi-transparent background */
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}

/* When the class 'show' is added via JS, it displays as flex */
.custom-modal.show {
  display: flex; 
}

.custom-modal-content {
  background-color: #fff;
  width: 90%;
  max-width: 650px;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  animation: modalPop 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.custom-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.custom-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #101a3d;
  font-weight: 600;
}

.custom-modal-close {
  background: none;
  border: none;
  font-size: 1.8rem;
  color: #8a93ab;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.custom-modal-close:hover {
  color: var(--red);
}

.custom-modal-body {
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
}

.custom-modal-body h2 {
  margin: 0 0 16px 0;
  font-size: 1.6rem;
  color: #101a3d;
  font-weight: 400; /* Matches screenshot */
}

.custom-modal-body p {
  color: #5b6786;
  line-height: 1.7;
  font-size: 1rem;
  margin: 0;
}

.custom-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
}

.custom-modal-btn-close {
  background: #fff;
  border: 2px solid #1a3b8e; /* Matches the blue border in screenshot */
  color: #1a3b8e;
  padding: 8px 24px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.custom-modal-btn-close:hover {
  background: #f0f4ff;
}

/* Website Link Text Limit */
.n-website-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; 
}

/* Ensures real photos fit the existing .n-m-photo circle */
.n-m-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Disable hover motion on the contact form */
.n-cform,
.n-cform:hover,
.n-cform .n-f,
.n-cform .n-f:hover {
  transform: none !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Course Card Images */
.n-c-img {
  width: 100%;
  height: 160px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #eef2fa; /* fallback bg */
  display: flex;
  align-items: center;
  justify-content: center;
}
.n-c-img img {
  width: 100%;
  height: 100%;
}

/* Course Provider / Associate branding */
.n-c-provider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 12px;
  padding-top: 12px;
  border-top: 1px dashed #dfe5f2;
}
.n-c-provider img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.n-c-provider span {
  font-size: 0.78rem;
  font-weight: 600;
  color: #5b6786;
}

/* Update avatar styles for real images */
.n-t .n-av {
  overflow: hidden;
  padding: 0;
}
.n-t .n-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 1. Make the card fill the full height of the grid row */
.n-c {
  display: flex;
  flex-direction: column;
  height: 100%; 
}

/* 2. Make the inner body stretch to fill the card */
.n-c-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* 3. Push the footer (price and button) to the bottom */
.n-c-foot {
  margin-top: auto; 
}

/* 4. Optional: This pushes the syllabus and tags to the bottom 
   if you want the empty space to be in the middle of the card */
.n-syl {
  margin-top: auto;
}