/* ==========================================================================
   HOMEPAGE
   Page-specific layout only. Colors, type, spacing, and components all come
   from the shared design system — nothing brand-related is defined here.
   ========================================================================== */

/* ---- Hero ---- */
.hero {
  padding-block: var(--space-9) var(--space-8);
  overflow: hidden;
  position: relative;
  background-image: var(--gradient-hero-wash);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero__visual { order: -1; max-width: 360px; margin-inline: auto; }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent-orange);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
}
.hero__eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background-color: var(--color-accent-orange);
  box-shadow: 0 0 0 4px var(--color-accent-orange-tint);
}

.hero h1 { margin-bottom: var(--space-5); }
.hero__accent {
  background-image: var(--gradient-accent-text);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-accent-orange-hover); /* fallback if background-clip:text is unsupported */
}
.hero__lead {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  max-width: 46ch;
  margin-bottom: var(--space-7);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero__visual {
  position: relative;
  background-color: var(--color-blue-pale);
  border-radius: var(--radius-lg);
  aspect-ratio: 1 / 0.92;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xl);
  isolation: isolate;
}
.hero__visual svg { width: 88%; height: 88%; position: relative; z-index: 1; }

/* Soft ambient blobs behind the visual panel — decorative depth, not content */
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(38px);
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}
.hero__blob--orange {
  width: 220px; height: 220px;
  background: var(--color-accent-orange);
  top: -60px; right: -50px;
  opacity: 0.28;
}
.hero__blob--blue {
  width: 260px; height: 260px;
  background: var(--color-blue-mid);
  bottom: -70px; left: -60px;
  opacity: 0.25;
}

/* Slow ambient rotation on the orbit rings only — the nodes/labels stay
   still and legible. One orchestrated motion moment, not scattered motion. */
.hero__visual .orbit-ring {
  transform-origin: 220px 230px;
  animation: orbit-spin var(--duration-ambient) linear infinite;
}
.hero__visual .orbit-ring--reverse {
  animation-direction: reverse;
  animation-duration: calc(var(--duration-ambient) * 1.4);
}
@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__visual .orbit-ring { animation: none; }
}

/* ---- Trust strip ---- */
.trust-strip {
  background-color: var(--color-primary-dark-tint);
  padding-block: var(--space-5);
  position: relative;
}
.trust-strip__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}
@media (max-width: 640px) {
  .trust-strip__row { justify-content: flex-start; }
}

/* ---- Generic section heading (reused across preview sections) ---- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
.section-head .section-heading { margin-bottom: 0; }
.section-head__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--color-primary-dark);
  white-space: nowrap;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--color-accent-orange);
}
.section-head__link span { transition: transform var(--duration-base) var(--ease-standard); display: inline-block; }
.section-head__link:hover { color: var(--color-accent-orange-hover); }
.section-head__link:hover span { transform: translateX(4px); }
@media (max-width: 560px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* ---- Staggered reveal for grid children — turns a flat fade into a
   deliberate cascade. Applied by position, no extra markup needed. ---- */
.principles-grid > .reveal:nth-child(1), .programmes-grid > .reveal:nth-child(1),
.subjects-grid > .reveal:nth-child(1), .steps-row > .reveal:nth-child(1) { animation-delay: 0ms; }
.principles-grid > .reveal:nth-child(2), .programmes-grid > .reveal:nth-child(2),
.subjects-grid > .reveal:nth-child(2), .steps-row > .reveal:nth-child(2) { animation-delay: 80ms; }
.principles-grid > .reveal:nth-child(3), .programmes-grid > .reveal:nth-child(3),
.subjects-grid > .reveal:nth-child(3), .steps-row > .reveal:nth-child(3) { animation-delay: 160ms; }
.principles-grid > .reveal:nth-child(4),
.programmes-grid > .reveal:nth-child(4),
.subjects-grid > .reveal:nth-child(4), .steps-row > .reveal:nth-child(4) { animation-delay: 240ms; }
.subjects-grid > .reveal:nth-child(5) { animation-delay: 320ms; }
.subjects-grid > .reveal:nth-child(6) { animation-delay: 400ms; }
.subjects-grid > .reveal:nth-child(7) { animation-delay: 480ms; }
.subjects-grid > .reveal:nth-child(8) { animation-delay: 560ms; }

/* ---- Why Choose Us ---- */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 980px) { .principles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .principles-grid { grid-template-columns: 1fr; } }

/* ---- Programmes preview ---- */
.programmes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 1080px) { .programmes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .programmes-grid { grid-template-columns: 1fr; } }

.programme-card__badge {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent-orange);
  background-color: var(--color-accent-orange-tint);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}
.programme-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--color-primary-dark);
}
.programme-card__link:hover { color: var(--color-accent-orange); }

/* The Saturday programme is compulsory — real information, not a styling
   whim — so it's the one visually emphasised card, the way a "core"
   requirement should stand out among optional-reading siblings. */
.programme-card--featured {
  background-image: var(--gradient-navy);
  border-color: transparent;
  box-shadow: var(--shadow-xl);
}
.programme-card--featured::before { background-image: linear-gradient(90deg, var(--color-blue-mid), var(--color-accent-orange)); }
.programme-card--featured h3,
.programme-card--featured .programme-card__link { color: var(--color-white); }
.programme-card--featured p { color: rgba(244, 247, 251, 0.82); }
.programme-card--featured .programme-card__badge {
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--color-white);
}
.programme-card--featured .programme-card__link:hover { color: var(--color-accent-orange); }
@media (min-width: 1081px) {
  .programme-card--featured { transform: translateY(-10px); }
  .programme-card--featured:hover { transform: translateY(-14px); }
}

.pricing-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.pricing-note__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-orange);
  flex-shrink: 0;
}
.pricing-note__item {
  font-size: var(--fs-small);
  color: var(--color-text-body);
}
.pricing-note__item strong { color: var(--color-text-dark); }

/* ---- Subjects preview ---- */
.subjects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 860px) { .subjects-grid { grid-template-columns: repeat(2, 1fr); } }

.subject-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}
.subject-card__icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background-image: var(--gradient-icon);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-image var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.subject-card:hover .subject-card__icon {
  background-image: var(--gradient-orange);
  color: var(--color-white);
}
.subject-card__name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 0.92rem;
  color: var(--color-text-dark);
}

/* ---- How It Works preview ---- */
.steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  position: relative;
}
@media (max-width: 860px) { .steps-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps-row { grid-template-columns: 1fr; } }

/* Connecting line through the sequence — legitimate here because the
   content genuinely is an ordered process, not decoration for its own sake. */
@media (min-width: 861px) {
  .steps-row::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background-image: repeating-linear-gradient(90deg, var(--color-blue-mid) 0 8px, transparent 8px 16px);
    opacity: 0.6;
    z-index: 0;
  }
}

.step {
  text-align: left;
  position: relative;
  z-index: 1;
}
.step__num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background-image: var(--gradient-navy);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  box-shadow: 0 6px 16px -4px rgba(19, 69, 133, 0.4);
}
.step__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-text-dark);
  margin-bottom: var(--space-2);
}
.step__desc { font-size: var(--fs-small); color: var(--color-text-muted); }

/* ---- Empty states (Results, Gallery previews) ---- */
.empty-preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-image: var(--gradient-icon);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.empty-preview__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  box-shadow: var(--shadow-md);
  animation: pulse-soft 3s var(--ease-standard) infinite;
}
@keyframes pulse-soft {
  0%, 100% { box-shadow: var(--shadow-md); }
  50% { box-shadow: 0 4px 20px -2px rgba(19, 69, 133, 0.28); }
}
@media (prefers-reduced-motion: reduce) {
  .empty-preview__icon { animation: none; }
}
.empty-preview h3 { margin-bottom: var(--space-2); }
.empty-preview p {
  color: var(--color-text-muted);
  max-width: 42ch;
  margin-inline: auto;
}

/* ---- Logo marquee (university / partner logos) ----
   Full-bleed on purpose — sits outside .container so the fade-out mask
   reaches the true edge of the viewport, Netlify-style. Pure CSS
   infinite scroll: the track is the logo set duplicated exactly once,
   animated to translateX(-50%), which loops seamlessly forever. No JS
   at all, so — same principle as the gallery slideshow — there is
   nothing here that can fail to load and take the logos down with it.

   Deliberately no pause-on-hover: with a full-bleed horizontal strip,
   a stationary cursor left anywhere over it gets hovered on and off
   repeatedly as the strip scrolls past during normal page scrolling —
   that reads as stutter, not a pause. The animation just always runs;
   prefers-reduced-motion below is the only thing that stops it. */
.logo-marquee {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-7);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.logo-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--space-8);
  padding-inline: var(--space-8);
  animation: logo-marquee-scroll 32s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes logo-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track {
    animation: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
}

.logo-marquee__item {
  flex: 0 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
}
.logo-marquee__item img {
  height: 100%;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  opacity: 1;
  transition: filter var(--duration-base) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}
.logo-marquee__item img:hover {
  opacity: 1;
}
@media (max-width: 640px) {
  .logo-marquee__item { height: 44px; }
  .logo-marquee__item img { max-width: 120px; }
}

/* ---- Gallery slideshow ----
   Base track uses native CSS scroll-snap (see gallery-slideshow.js header
   comment) so all photos are swipe/scroll-reachable with zero JS. */
.slideshow {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.slideshow:focus-visible {
  outline: 3px solid var(--color-accent-orange);
  outline-offset: 3px;
}

.slideshow__frame {
  position: relative;
  width: 100%;
  /* Deliberately compact — this is a homepage teaser, not the full
     Gallery page, so it shouldn't dominate the viewport. Ratio + a hard
     max-height cap together keep it a similar visual weight to the
     other preview sections on wide desktop screens, while still using
     the universally-supported padding-percentage technique (see note
     above .slideshow__track) rather than aspect-ratio. */
  padding-top: 42%;
  max-height: 420px;
}
@media (max-width: 640px) {
  .slideshow__frame {
    padding-top: 62%;
    max-height: 260px;
  }
}
.slideshow__track {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.slideshow__track::-webkit-scrollbar { display: none; }

.slideshow__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 100%;
  margin: 0;
}
.slideshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slideshow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: background-color var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.slideshow__arrow:hover {
  background-color: var(--color-white);
  transform: translateY(-50%) scale(1.06);
}
.slideshow__arrow--prev { left: var(--space-4); }
.slideshow__arrow--next { right: var(--space-4); }
@media (max-width: 560px) {
  .slideshow__arrow { width: 36px; height: 36px; }
}

.slideshow__counter {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background-color: rgba(19, 69, 133, 0.75);
  backdrop-filter: blur(4px);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
}

.slideshow__dots {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
  background-color: rgba(19, 69, 133, 0.55);
  padding: 7px 9px;
  border-radius: var(--radius-pill);
}
.slideshow__dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  border: none;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 0;
  cursor: pointer;
  transition: width var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard);
}
.slideshow__dot:hover { background-color: rgba(255, 255, 255, 0.85); }
.slideshow__dot.is-active {
  width: 22px;
  background-color: var(--color-accent-orange);
}

/* ---- Merchandise ---- */
.merch-grid {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 14px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.merch-grid:focus-visible { outline: 3px solid rgba(242,132,24,.35); outline-offset: 4px; }

.merch-card {
  padding: 0;
  overflow: hidden;
  flex: 0 0 clamp(250px, 28vw, 310px);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  scroll-snap-align: start;
}
.merch-card__photo-wrap {
  position: relative;
  width: 100%;
  height: 270px;
  overflow: hidden;
  background-color: var(--color-blue-pale);
  display: grid;
  place-items: center;
}
.merch-card__photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform var(--duration-slow) var(--ease-standard);
}
.merch-card__photo--tshirt { object-fit: contain; padding: 10px; }
.merch-card:hover .merch-card__photo { transform: scale(1.04); }

.merch-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.merch-card__body h3 { margin-bottom: var(--space-2); }
.merch-card__body p { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.merch-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: auto;
}
.merch-card__price {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 1.3rem;
  color: var(--color-primary-dark);
}
@media (max-width: 640px) {
  .merch-card { flex-basis: 255px; }
  .merch-card__photo-wrap { height: 245px; }
}


/* =========================================================
   HERO CAROUSEL
   ========================================================= */

.hero-carousel {
  position: relative;
  width: 100%;
  height: min(780px, calc(100vh - 78px));
  min-height: 620px;
  overflow: hidden;
  background: var(--color-navy, #134585);
  isolation: isolate;
}

.hero-carousel__slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.hero-slide.is-active {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}

.hero-slide__background {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-slide__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: transform 7s ease;
}

.hero-slide.is-active .hero-slide__background img {
  transform: scale(1);
}

.hero-slide__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(8, 30, 62, 0.94) 0%,
      rgba(8, 30, 62, 0.82) 34%,
      rgba(8, 30, 62, 0.50) 65%,
      rgba(8, 30, 62, 0.28) 100%
    );
}

.hero-slide__container {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}

.hero-slide__content {
  width: min(680px, 100%);
  padding-bottom: 35px;
  transform: translateY(34px);
}

.hero-slide__eyebrow {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(22px);
}

.hero-slide__content h1,
.hero-slide__content h2 {
  margin: 0;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(3rem, 5.2vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  opacity: 0;
  transform: translateY(28px);
}

.hero-slide__content h1 span,
.hero-slide__content h2 span {
  color: #ed7113;
}

.hero-slide__description {
  max-width: 610px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.08rem;
  line-height: 1.75;
  opacity: 0;
  transform: translateY(22px);
}

.hero-slide__actions {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 32px;
  opacity: 0;
  transform: translateY(20px);
}

.hero-slide__btn-secondary {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.hero-slide__btn-secondary:hover {
  color: #ffffff;
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
}


/* Text entrance animation */

.hero-slide.is-active .hero-slide__eyebrow {
  animation: heroTextIn 0.7s 0.15s ease forwards;
}

.hero-slide.is-active .hero-slide__content h1,
.hero-slide.is-active .hero-slide__content h2 {
  animation: heroTextIn 0.75s 0.25s ease forwards;
}

.hero-slide.is-active .hero-slide__description {
  animation: heroTextIn 0.7s 0.4s ease forwards;
}

.hero-slide.is-active .hero-slide__actions {
  animation: heroTextIn 0.7s 0.52s ease forwards;
}

@keyframes heroTextIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Navigation arrows */

.hero-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;

  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;

  color: #ffffff;
  background: rgba(10, 32, 64, 0.35);

  backdrop-filter: blur(8px);

  cursor: pointer;

  transform: translateY(-50%);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.hero-carousel__arrow:hover {
  background: #ed7113;
  border-color: #ed7113;
}

.hero-carousel__arrow--prev {
  left: 28px;
}

.hero-carousel__arrow--next {
  right: 28px;
}


/* Dots */

.hero-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 5;

  display: flex;
  align-items: center;
  gap: 9px;

  transform: translateX(-50%);
}

.hero-carousel__dot {
  width: 30px;
  height: 4px;
  padding: 0;

  border: 0;
  border-radius: 99px;

  background: rgba(255, 255, 255, 0.4);

  cursor: pointer;

  transition:
    width 0.3s ease,
    background 0.3s ease;
}

.hero-carousel__dot.is-active {
  width: 52px;
  background: #ed7113;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .hero-carousel {
    height: 720px;
    min-height: 620px;
  }

  .hero-slide__overlay {
    background:
      linear-gradient(
        90deg,
        rgba(8, 30, 62, 0.92) 0%,
        rgba(8, 30, 62, 0.70) 60%,
        rgba(8, 30, 62, 0.45) 100%
      );
  }

  .hero-slide__content {
    width: min(620px, calc(100% - 80px));
  }

  .hero-carousel__arrow {
    width: 44px;
    height: 44px;
  }

  .hero-carousel__arrow--prev {
    left: 18px;
  }

  .hero-carousel__arrow--next {
    right: 18px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .hero-carousel {
    height: 690px;
    min-height: 600px;
  }

  .hero-slide__background img {
    object-position: 62% center;
  }

  .hero-slide__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(8, 30, 62, 0.52) 0%,
        rgba(8, 30, 62, 0.72) 45%,
        rgba(8, 30, 62, 0.94) 100%
      );
  }

  .hero-slide__container {
    align-items: flex-end;
    padding-bottom: 92px;
  }

  .hero-slide__content {
    width: 100%;
    padding: 0 22px;
    transform: none;
  }

  .hero-slide__eyebrow {
    margin-bottom: 14px;
    font-size: 0.72rem;
  }

  .hero-slide__content h1,
  .hero-slide__content h2 {
    font-size: clamp(2.45rem, 11vw, 3.4rem);
    line-height: 1.05;
  }

  .hero-slide__description {
    margin-top: 20px;
    font-size: 0.94rem;
    line-height: 1.65;
  }

  .hero-slide__actions {
    align-items: stretch;
    flex-direction: column;
    margin-top: 25px;
  }

  .hero-slide__actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .hero-carousel__arrow {
    top: 42%;
    width: 40px;
    height: 40px;
  }

  .hero-carousel__arrow--prev {
    left: 12px;
  }

  .hero-carousel__arrow--next {
    right: 12px;
  }

  .hero-carousel__dots {
    bottom: 24px;
  }

  .hero-carousel__dot {
    width: 22px;
  }

  .hero-carousel__dot.is-active {
    width: 38px;
  }
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

  .hero-slide,
  .hero-slide__background img,
  .hero-carousel__dot {
    transition: none;
  }

  .hero-slide.is-active .hero-slide__eyebrow,
  .hero-slide.is-active .hero-slide__content h1,
  .hero-slide.is-active .hero-slide__content h2,
  .hero-slide.is-active .hero-slide__description,
  .hero-slide.is-active .hero-slide__actions {
    animation: none;
    opacity: 1;
    transform: none;
  }
}



/* =========================================================
   SUBJECTS PHONE EXPERIENCE
   ========================================================= */

.subjects-phone-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0 120px;
  background:
    radial-gradient(circle at 75% 45%, rgba(12, 48, 94, 0.10), transparent 34%),
    #ffffff;
}

.subjects-phone-section .container {
  position: relative;
  z-index: 2;
}

.subjects-phone-section__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.45;
}

.subjects-phone-section__glow--one {
  width: 300px;
  height: 300px;
  background: rgba(13, 56, 108, 0.08);
  top: 10%;
  right: 5%;
}

.subjects-phone-section__glow--two {
  width: 220px;
  height: 220px;
  background: rgba(239, 126, 34, 0.07);
  bottom: 5%;
  left: 5%;
}


/* ---------------------------------------------------------
   MAIN LAYOUT
   --------------------------------------------------------- */

.subjects-phone-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: center;
  gap: 80px;
  min-height: 680px;
}


/* ---------------------------------------------------------
   LEFT CONTENT
   --------------------------------------------------------- */

.subjects-phone-intro {
  max-width: 570px;
}

.subjects-phone-intro h2 {
  max-width: 540px;
  margin: 10px 0 24px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(2.4rem, 4vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.subjects-phone-intro h2 span {
  display: block;
  color: var(--color-primary, #123b68);
}

.subjects-phone-intro__description {
  max-width: 500px;
  margin: 0;
  color: #64748b;
  font-size: 1.05rem;
  line-height: 1.8;
}

.subjects-phone-intro__stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 38px 0;
}

.subjects-phone-stat {
  min-width: 105px;
  padding-right: 28px;
  margin-right: 28px;
  border-right: 1px solid #e2e8f0;
}

.subjects-phone-stat:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}

.subjects-phone-stat strong {
  display: block;
  color: #102f50;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.6rem;
  line-height: 1.1;
}

.subjects-phone-stat span {
  display: block;
  margin-top: 5px;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.subjects-phone-intro__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.subjects-phone-intro__cta span {
  font-size: 1.2rem;
  transition: transform 0.25s ease;
}

.subjects-phone-intro__cta:hover span {
  transform: translateX(4px);
}


/* ---------------------------------------------------------
   PHONE SHOWCASE
   --------------------------------------------------------- */

.subjects-phone-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 700px;
  perspective: 1200px;
}


/* ---------------------------------------------------------
   PHONE FRAME
   --------------------------------------------------------- */

.subjects-phone {
  position: relative;
  width: 310px;
  height: 635px;
  padding: 9px;
  border-radius: 48px;
  background:
    linear-gradient(
      145deg,
      #293747 0%,
      #0b1119 38%,
      #182431 100%
    );
  box-shadow:
    0 55px 90px rgba(15, 23, 42, 0.28),
    0 20px 35px rgba(15, 23, 42, 0.16),
    inset 0 0 0 1px rgba(255,255,255,0.13);
  transform: rotateY(-8deg) rotateX(2deg);
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  z-index: 3;
}

.subjects-phone:hover {
  transform: rotateY(0deg) rotateX(0deg) translateY(-8px);
  box-shadow:
    0 65px 110px rgba(15, 23, 42, 0.30),
    0 25px 45px rgba(15, 23, 42, 0.18),
    inset 0 0 0 1px rgba(255,255,255,0.16);
}


/* ---------------------------------------------------------
   PHONE SCREEN
   --------------------------------------------------------- */

.subjects-phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 40px;
  background:
    linear-gradient(
      180deg,
      #f8fafc 0%,
      #ffffff 45%,
      #f8fafc 100%
    );
}

.subjects-phone__speaker {
  position: absolute;
  top: 19px;
  left: 50%;
  width: 82px;
  height: 23px;
  border-radius: 30px;
  background: #05080c;
  transform: translateX(-50%);
  z-index: 10;
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.08);
}

.subjects-phone__camera {
  position: absolute;
  top: 27px;
  left: calc(50% + 25px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #172a3b;
  border: 1px solid rgba(255,255,255,0.2);
  z-index: 11;
}

.subjects-phone__statusbar {
  display: flex;
  justify-content: space-between;
  padding: 23px 23px 0;
  color: #64748b;
  font-size: 0.58rem;
  font-weight: 700;
}

.subjects-phone__screen-heading {
  padding: 35px 22px 18px;
}

.subjects-phone__screen-heading > span {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 20px;
  background: rgba(239, 126, 34, 0.10);
  color: #d56d18;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.subjects-phone__screen-heading h3 {
  margin: 9px 0 3px;
  color: #102f50;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.45rem;
  letter-spacing: -0.04em;
}

.subjects-phone__screen-heading p {
  margin: 0;
  color: #94a3b8;
  font-size: 0.62rem;
}


/* ---------------------------------------------------------
   SCROLLING SUBJECTS
   --------------------------------------------------------- */

.subjects-phone__viewport {
  position: relative;
  height: 430px;
  overflow: hidden;
  padding: 0 15px;
}

.subjects-phone__viewport::before,
.subjects-phone__viewport::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 65px;
  z-index: 4;
  pointer-events: none;
}

.subjects-phone__viewport::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    rgba(255,255,255,0) 100%
  );
}

.subjects-phone__viewport::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    #f8fafc 0%,
    rgba(248,250,252,0) 100%
  );
}

.subjects-phone__track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: mastermindSubjectScroll 22s linear infinite;
  will-change: transform;
}

.subjects-phone:hover .subjects-phone__track {
  animation-play-state: paused;
}

@keyframes mastermindSubjectScroll {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}


/* ---------------------------------------------------------
   SUBJECT CARDS INSIDE PHONE
   --------------------------------------------------------- */

.phone-subject {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 67px;
  padding: 10px 11px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 17px;
  background: rgba(255,255,255,0.94);
  box-shadow:
    0 5px 15px rgba(15, 23, 42, 0.045),
    0 1px 2px rgba(15, 23, 42, 0.04);
}

.phone-subject__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 800;
}

.phone-subject__icon--math {
  background: #183f68;
}

.phone-subject__icon--mathlit {
  background: #d97724;
}

.phone-subject__icon--physics {
  background: #344b63;
}

.phone-subject__icon--life {
  background: #3f6f5b;
}

.phone-subject__icon--economics {
  background: #8a6239;
}

.phone-subject__icon--accounting {
  background: #4f6174;
}

.phone-subject__icon--geography {
  background: #52745c;
}

.phone-subject__icon--ems {
  background: #8b5f4a;
}

.phone-subject__content {
  min-width: 0;
  margin-left: 11px;
}

.phone-subject__content strong {
  display: block;
  overflow: hidden;
  color: #1e293b;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-subject__content span {
  display: block;
  margin-top: 3px;
  color: #94a3b8;
  font-size: 0.57rem;
  font-weight: 600;
}

.phone-subject__arrow {
  margin-left: auto;
  padding-left: 7px;
  color: #cbd5e1;
  font-size: 1.2rem;
}


/* ---------------------------------------------------------
   PHONE BOTTOM
   --------------------------------------------------------- */

.subjects-phone__bottom {
  position: absolute;
  right: 18px;
  bottom: 14px;
  left: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #94a3b8;
  font-size: 0.49rem;
  font-weight: 700;
}

.subjects-phone__bottom span:last-child {
  color: #4f8b68;
}


/* ---------------------------------------------------------
   PHONE SIDE BUTTONS
   --------------------------------------------------------- */

.subjects-phone__button {
  position: absolute;
  right: -4px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #202e3c;
}

.subjects-phone__button--volume {
  top: 125px;
  height: 75px;
}

.subjects-phone__button--power {
  top: 220px;
  height: 45px;
}


/* ---------------------------------------------------------
   FLOATING INFORMATION CARDS
   --------------------------------------------------------- */

.subjects-phone__floating {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px 12px 12px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 16px;
  background: rgba(255,255,255,0.91);
  box-shadow: 0 20px 40px rgba(15,23,42,0.12);
  backdrop-filter: blur(14px);
  z-index: 5;
}

.subjects-phone__floating > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  border-radius: 11px;
  background: #eef5fb;
  color: #183f68;
  font-size: 0.8rem;
  font-weight: 800;
}

.subjects-phone__floating strong {
  display: block;
  color: #1e293b;
  font-size: 0.67rem;
}

.subjects-phone__floating small {
  display: block;
  margin-top: 3px;
  color: #94a3b8;
  font-size: 0.55rem;
}

.subjects-phone__floating--top {
  top: 125px;
  left: 0;
  animation: floatingTop 4s ease-in-out infinite;
}

.subjects-phone__floating--bottom {
  right: 0;
  bottom: 125px;
  animation: floatingBottom 4.5s ease-in-out infinite;
}

.subjects-phone__floating--bottom > span {
  background: #fff3e8;
  color: #d56d18;
}

@keyframes floatingTop {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

@keyframes floatingBottom {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }
}


/* ---------------------------------------------------------
   RESPONSIVE — TABLET
   --------------------------------------------------------- */

@media (max-width: 1050px) {
  .subjects-phone-layout {
    grid-template-columns: 1fr 0.9fr;
    gap: 35px;
  }

  .subjects-phone-intro h2 {
    font-size: clamp(2.3rem, 4.5vw, 3.5rem);
  }

  .subjects-phone {
    width: 285px;
    height: 590px;
  }

  .subjects-phone-showcase {
    min-height: 650px;
  }

  .subjects-phone__floating--top {
    left: -15px;
  }

  .subjects-phone__floating--bottom {
    right: -15px;
  }
}


/* ---------------------------------------------------------
   RESPONSIVE — MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {
  .subjects-phone-section {
    padding: 80px 0 90px;
  }

  .subjects-phone-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: auto;
  }

  .subjects-phone-intro {
    max-width: 100%;
    text-align: center;
  }

  .subjects-phone-intro h2 {
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(2.1rem, 9vw, 3rem);
  }

  .subjects-phone-intro__description {
    margin-right: auto;
    margin-left: auto;
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .subjects-phone-intro__stats {
    justify-content: center;
    margin: 28px 0;
  }

  .subjects-phone-stat {
    min-width: 82px;
    padding-right: 17px;
    margin-right: 17px;
  }

  .subjects-phone-stat strong {
    font-size: 1.35rem;
  }

  .subjects-phone-intro__cta {
    margin-bottom: 10px;
  }

  .subjects-phone-showcase {
    width: 100%;
    min-height: 630px;
  }

  .subjects-phone {
    width: 275px;
    height: 565px;
    border-radius: 43px;
    transform: none;
  }

  .subjects-phone:hover {
    transform: translateY(-5px);
  }

  .subjects-phone__screen {
    border-radius: 36px;
  }

  .subjects-phone__viewport {
    height: 370px;
  }

  .subjects-phone__floating {
    transform: scale(0.84);
  }

  .subjects-phone__floating--top {
    top: 115px;
    left: -8px;
  }

  .subjects-phone__floating--bottom {
    right: -8px;
    bottom: 90px;
  }

  .subjects-phone__floating--top,
  .subjects-phone__floating--bottom {
    animation: none;
  }
}


/* ---------------------------------------------------------
   SMALL PHONES
   --------------------------------------------------------- */

@media (max-width: 430px) {
  .subjects-phone-section {
    padding-top: 65px;
  }

  .subjects-phone-showcase {
    min-height: 600px;
  }

  .subjects-phone {
    width: 255px;
    height: 525px;
    border-radius: 39px;
  }

  .subjects-phone__screen {
    border-radius: 33px;
  }

  .subjects-phone__viewport {
    height: 345px;
  }

  .subjects-phone__screen-heading {
    padding-top: 30px;
  }

  .subjects-phone__screen-heading h3 {
    font-size: 1.3rem;
  }

  .phone-subject {
    min-height: 61px;
  }

  .phone-subject__icon {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }

  .phone-subject__content strong {
    font-size: 0.66rem;
  }

  .subjects-phone__floating {
    display: none;
  }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .subjects-phone__track,
  .subjects-phone__floating--top,
  .subjects-phone__floating--bottom {
    animation: none;
  }

  .subjects-phone {
    transform: none;
    transition: none;
  }
}

.feed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feed-card{background:#fff;border:1px solid var(--color-border);border-radius:16px;padding:22px;box-shadow:0 8px 24px rgba(19,69,133,.06)}.feed-card__eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--color-accent-orange)}.feed-card h3{margin:8px 0}.feed-card p{color:#536274;line-height:1.65}.feed-card small{display:block;color:#8390a0;margin-top:10px}.feed-stars{color:#ed7113;letter-spacing:2px;margin-bottom:8px}.feed-empty{color:#8190a0}.section-heading{margin-bottom:20px}@media(max-width:800px){.feed-grid{grid-template-columns:1fr}}
.subject-modern-card__image{width:100%;height:180px;object-fit:cover;border-radius:18px;margin:0 0 1rem;display:block}.announcement-carousel{margin-top:2rem}.announcement-slide__date{font-weight:700;margin-top:1rem;opacity:.9}.announcement-carousel .hero-slide__content{max-width:760px}