/**
 * IMT Homepage Premium Visual Refinement
 * Loaded LAST on homepage only. Scoped to body.is-home-page / .home-page.
 * Goal: institutional calm — not AI/vibe-code noise.
 */

/* ── Tokens ── */
body.is-home-page {
  --imt-brand: #5786c7;
  --imt-brand-deep: #466aa8;
  --imt-navy: #0b2d6b;
  --imt-ink: #0f2044;
  --imt-muted: #64748b;
  --imt-border: rgba(87, 134, 199, 0.12);
  /* Spacing scale (homepage only) */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  /* Section rhythm: desktop 56–72px */
  --imt-section-y: clamp(56px, 5vw, 72px);
  --imt-section-gap: clamp(24px, 2.5vw, 32px);
  --imt-title-sub-gap: 12px;
  --imt-sub-content-gap: clamp(24px, 2.2vw, 32px);
  --imt-card-grid-gap: clamp(20px, 2vw, 28px);
  --imt-cta-gap: 14px;
  --imt-card-radius: 16px;
  --imt-btn-radius: 16px;
  --imt-shadow: 0 8px 24px rgba(15, 32, 68, 0.06);
  --imt-shadow-hover: 0 14px 32px rgba(15, 32, 68, 0.09);
  --imt-btn-shadow: 0 8px 18px rgba(87, 134, 199, 0.22);
  --imt-motion: 200ms;
  --imt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --imt-touch-min: 48px;
}

/* ── Unified white canvas (kill cream flash) ── */
html:has(body.is-home-page),
body.is-home-page:not(.dark),
body.is-home-page:not(.dark) #app,
body.is-home-page:not(.dark) .main-content,
body.is-home-page:not(.dark) main {
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--imt-ink);
}

/* Homepage surface: soft white → cool mist (static base for drift layer) */
body.is-home-page:not(.dark) .home-page {
  background-color: #ffffff !important;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(87, 134, 199, 0.07), transparent 32%),
    radial-gradient(circle at 88% 8%, rgba(220, 233, 250, 0.55), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fafd 52%, #ffffff 100%) !important;
  color: var(--imt-ink);
  overflow-x: clip;
}

/* Keep legacy pupil layers dead */
body.is-home-page:not(.dark) .premium-pupil-bg,
body.is-home-page:not(.dark) .premium-home-bg-accent,
body.is-home-page:not(.dark) .premium-home-bg-accent__layer {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * Soft drifting light — homepage only.
 * Low-opacity brand blue on white; transform + background-position only.
 */
.home-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 22%, rgba(87, 134, 199, 0.09), transparent 26%),
    radial-gradient(circle at 86% 18%, rgba(220, 233, 250, 0.5), transparent 30%),
    radial-gradient(circle at 48% 78%, rgba(238, 244, 252, 0.75), transparent 36%);
  background-repeat: no-repeat;
  background-size: 160% 140%, 150% 130%, 140% 120%;
  background-position: 0% 10%, 100% 0%, 50% 100%;
  opacity: 0.85;
  will-change: transform, background-position, opacity;
  animation: imtGradientDrift 28s ease-in-out infinite alternate;
}

@keyframes imtGradientDrift {
  0% {
    background-position: 0% 8%, 100% 0%, 48% 100%;
    transform: translate3d(0, 0, 0);
    opacity: 0.78;
  }
  50% {
    background-position: 28% 18%, 72% 28%, 42% 70%;
    transform: translate3d(0, -6px, 0);
    opacity: 0.9;
  }
  100% {
    background-position: 62% 32%, 38% 55%, 58% 28%;
    transform: translate3d(0, 6px, 0);
    opacity: 0.82;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page::before {
    animation: none !important;
    transform: none !important;
    will-change: auto;
    opacity: 0.7;
    background-position: 20% 15%, 80% 20%, 50% 80%;
  }
}

@media (max-width: 767.98px) {
  .home-page::before {
    opacity: 0.42;
    background-size: 200% 180%, 190% 170%, 170% 150%;
    animation-duration: 34s;
  }
}

/* ── Subtle floating bubbles (signature atmosphere) ── */
.imt-home-bubbles {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.imt-home-bubbles__orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    rgba(87, 134, 199, 0.07) 0%,
    rgba(87, 134, 199, 0.028) 42%,
    rgba(87, 134, 199, 0) 72%
  );
  filter: blur(2px);
  will-change: transform, opacity;
  animation: imtBubbleDrift var(--imt-bubble-dur, 55s) ease-in-out infinite alternate;
  opacity: var(--imt-bubble-op, 0.42);
}

.imt-home-bubbles__orb--1 {
  width: min(52vw, 520px);
  height: min(52vw, 520px);
  top: -8%;
  inset-inline-start: -6%;
  --imt-bubble-dur: 62s;
  --imt-bubble-op: 0.38;
}

.imt-home-bubbles__orb--2 {
  width: min(40vw, 420px);
  height: min(40vw, 420px);
  top: 28%;
  inset-inline-end: -8%;
  --imt-bubble-dur: 74s;
  --imt-bubble-op: 0.34;
  animation-delay: -12s;
}

.imt-home-bubbles__orb--3 {
  width: min(36vw, 380px);
  height: min(36vw, 380px);
  top: 58%;
  inset-inline-start: 8%;
  --imt-bubble-dur: 68s;
  --imt-bubble-op: 0.3;
  animation-delay: -22s;
}

.imt-home-bubbles__orb--4 {
  width: min(28vw, 300px);
  height: min(28vw, 300px);
  bottom: 6%;
  inset-inline-end: 12%;
  --imt-bubble-dur: 80s;
  --imt-bubble-op: 0.28;
  animation-delay: -8s;
}

.imt-home-bubbles__orb--5 {
  width: min(22vw, 240px);
  height: min(22vw, 240px);
  top: 12%;
  inset-inline-start: 42%;
  --imt-bubble-dur: 58s;
  --imt-bubble-op: 0.24;
  animation-delay: -30s;
}

.imt-home-bubbles__orb--6 {
  width: min(18vw, 200px);
  height: min(18vw, 200px);
  top: 72%;
  inset-inline-end: 38%;
  --imt-bubble-dur: 70s;
  --imt-bubble-op: 0.22;
  animation-delay: -18s;
}

@keyframes imtBubbleDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: var(--imt-bubble-op, 0.5);
  }
  50% {
    transform: translate3d(1.5%, -2.2%, 0) scale(1.04);
    opacity: calc(var(--imt-bubble-op, 0.5) * 0.85);
  }
  100% {
    transform: translate3d(-1.2%, 1.8%, 0) scale(0.97);
    opacity: var(--imt-bubble-op, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .imt-home-bubbles__orb {
    animation: none !important;
    will-change: auto;
  }
}

@media (max-width: 767.98px) {
  .imt-home-bubbles__orb--5,
  .imt-home-bubbles__orb--6 {
    display: none;
  }

  .imt-home-bubbles__orb {
    opacity: 0.35;
    filter: blur(3px);
  }
}

/* Content above bubbles — do not raise .home-page itself (traps fixed layer) */
body.is-home-page .home-page > *:not(.imt-home-bubbles),
body.is-home-page #app > header,
body.is-home-page header,
body.is-home-page footer,
body.is-home-page .imt-navbar,
body.is-home-page nav {
  position: relative;
  z-index: 1;
}

body.is-home-page .home-page {
  position: relative;
  isolation: isolate;
}

/* ── Section rhythm (beats polish vs ui-v2 conflict) ── */
body.is-home-page .home-page .home-sections,
body.is-home-page .home-page .home-sections.section-premium,
body.is-home-page .home-page .section-premium,
body.is-home-page .home-page .imt-section,
body.is-home-page .home-page .premium-diploma-paths,
body.is-home-page .home-page .premium-certificates-teaser,
body.is-home-page .home-page .premium-features-section,
body.is-home-page .home-page .premium-blog-section,
body.is-home-page .home-page .premium-testimonials-section,
body.is-home-page .home-page .premium-mock-testimonials-section,
body.is-home-page .home-page .premium-trust-strip,
body.is-home-page .home-page .premium-graduate-videos,
body.is-home-page .home-page .premium-graduate-videos-section,
body.is-home-page .home-page .premium-flagship-diploma,
body.is-home-page .home-page .premium-instructors-section,
body.is-home-page .home-page .premium-latest-section,
body.is-home-page .home-page .premium-bento-section,
body.is-home-page .home-page .premium-products-home-section,
body.is-home-page .home-page .mmw-xp.home-sections,
body.is-home-page .home-page #montessori-book-world,
body.is-home-page .home-page section[class*="premium-"]:not(.premium-home-conversion-banner),
body.is-home-page .home-page .ads-system.home-sections {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: var(--imt-section-y) !important;
  padding-bottom: var(--imt-section-y) !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.is-home-page .home-page .premium-trust-strip,
body.is-home-page .home-page .ads-system.home-sections {
  padding-top: clamp(0.75rem, 1.5vw, 1.1rem) !important;
  padding-bottom: clamp(0.75rem, 1.5vw, 1.1rem) !important;
}

body.is-home-page .home-page .premium-home-hero-wrap,
body.is-home-page .home-page .premium-hero-banner-mock--ref-layout {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Neutralize stacking utility paddings inside sections */
body.is-home-page .home-page .home-sections .py-20,
body.is-home-page .home-page .home-sections .py-25,
body.is-home-page .home-page .home-sections .py-30,
body.is-home-page .home-page .home-sections .py-35,
body.is-home-page .home-page .home-sections .py-40,
body.is-home-page .home-page .home-sections .py-lg-20,
body.is-home-page .home-page .home-sections .py-lg-25,
body.is-home-page .home-page .home-sections .py-lg-30,
body.is-home-page .home-page .home-sections .py-lg-35,
body.is-home-page .home-page .home-sections .py-lg-40 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.is-home-page .home-page .home-diplomas-section__header,
body.is-home-page .home-page .premium-diploma-paths__header,
body.is-home-page .home-page .premium-latest-header,
body.is-home-page .home-page .premium-features-section__intro,
body.is-home-page .home-page .home-certificates-section__header,
body.is-home-page .home-page .premium-blog-section .section-title,
body.is-home-page .home-page .premium-testimonials-section .section-title,
body.is-home-page .home-page .premium-instructors-section .section-title {
  margin-bottom: var(--imt-sub-content-gap) !important;
}

/* Title → subtitle tighter coupling */
.home-page .section-title + p,
.home-page .premium-latest-title + .premium-latest-sub,
.home-page .premium-features-section__title + p,
.home-page .premium-diploma-paths__title + .premium-diploma-paths__sub,
.home-page .home-certificates-section__title + .home-certificates-section__sub,
.home-page .premium-blog-title + p,
.home-page .premium-latest-eyebrow + .premium-latest-title,
.home-page .premium-features-section__eyebrow + .premium-features-section__title,
.home-page .premium-diploma-paths__eyebrow + .premium-diploma-paths__title {
  margin-top: var(--imt-title-sub-gap) !important;
}

.home-page .premium-latest-sub,
.home-page .premium-diploma-paths__sub,
.home-page .home-certificates-section__sub,
.home-page .premium-features-section__lead {
  margin-bottom: 0 !important;
}

/* Card grids */
.home-page .home-diplomas-section__grid,
.home-page .premium-diploma-paths__grid,
.home-page .premium-features-section__grid,
.home-page .premium-features-grid,
.home-page .row.g-4,
.home-page .home-diplomas-section__more-grid {
  gap: var(--imt-card-grid-gap) !important;
}

.home-page .premium-latest-classes-swiper .swiper-slide,
.home-page .premium-graduate-videos-swiper .swiper-slide,
.home-page .premium-products-swiper .swiper-slide {
  height: auto;
}

@media (max-width: 767.98px) {
  body.is-home-page {
    /* Mobile section padding 36–48px */
    --imt-section-y: clamp(36px, 8vw, 48px);
    --imt-section-gap: 20px;
    --imt-sub-content-gap: 20px;
    --imt-card-grid-gap: 16px;
    --imt-cta-gap: 12px;
    --imt-touch-min: 44px;
  }
}

/* ── Typography hierarchy (Cairo, restrained) ── */
body.is-home-page .home-page .section-title:not(.premium-flagship-diploma__title),
body.is-home-page .home-page .premium-latest-title,
body.is-home-page .home-page .premium-features-section__title,
body.is-home-page .home-page .premium-diploma-paths__title,
body.is-home-page .home-page .home-certificates-section__title,
body.is-home-page .home-page .premium-blog-title {
  font-family: "Cairo", sans-serif;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--imt-navy) !important;
}

body.is-home-page .home-page .premium-latest-eyebrow,
body.is-home-page .home-page .premium-features-section__eyebrow,
body.is-home-page .home-page .premium-diploma-paths__eyebrow {
  font-size: 0.8rem;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: rgba(87, 134, 199, 0.9) !important;
}

body.is-home-page .home-page .premium-latest-sub,
body.is-home-page .home-page .premium-diploma-paths__sub,
body.is-home-page .home-page .home-certificates-section__sub,
body.is-home-page .home-page .premium-features-section__lead {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--imt-muted) !important;
  max-width: 40rem;
}

/* Quiet title underlines — less “template gradient bar” */
body.is-home-page .home-page .section-title::after,
body.is-home-page .home-page .premium-latest-title::after,
body.is-home-page .home-page .premium-features-section__title::after {
  width: 2.5rem !important;
  height: 2px !important;
  border-radius: 1px;
  background: rgba(87, 134, 199, 0.45) !important;
  opacity: 0.9;
}

/* ── De-noise AI decorations (keep flagship glow as designed) ── */
body.is-home-page .premium-home-conversion-banner__particles,
body.is-home-page .premium-home-conversion-banner__rays,
body.is-home-page .premium-home-conversion-banner__glow,
body.is-home-page .home-certificates-showcase__glow,
body.is-home-page .premium-section-curve {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.is-home-page .home-page .home-certificates-section {
  background: transparent !important;
  background-image: none !important;
}

/* ── Cards: quiet, purpose-driven ── */
body.is-home-page .home-page .home-diploma-card,
body.is-home-page .home-page .premium-mock-course-card,
body.is-home-page .home-page .premium-feature-glass,
body.is-home-page .home-page .home-cert-card,
body.is-home-page .home-page .premium-blog-card,
body.is-home-page .home-page .premium-blog-post-card,
body.is-home-page .home-page .premium-testimonial-card,
body.is-home-page .home-page .testimonials-card,
body.is-home-page .home-page .premium-instructor-card {
  border-radius: var(--imt-card-radius) !important;
  border: 1px solid var(--imt-border) !important;
  background: #ffffff !important;
  box-shadow: var(--imt-shadow) !important;
  transition:
    border-color var(--imt-motion) var(--imt-ease),
    box-shadow var(--imt-motion) var(--imt-ease) !important;
  transform: none !important;
}

body.is-home-page .home-page .home-diploma-card:hover,
body.is-home-page .home-page .premium-course-card-shell:hover .premium-mock-course-card,
body.is-home-page .home-page .premium-feature-glass:hover,
body.is-home-page .home-page .home-cert-card:hover {
  border-color: rgba(87, 134, 199, 0.22) !important;
  box-shadow: var(--imt-shadow-hover) !important;
  transform: none !important;
}

body.is-home-page .home-page .home-diploma-card__body,
body.is-home-page .home-page .premium-mock-course-card__body {
  padding: 1.05rem 1.1rem 1.15rem !important;
}

body.is-home-page .home-page .premium-feature-glass {
  padding: 1.2rem 1.15rem !important;
}

body.is-home-page .home-page .home-diploma-card__title,
body.is-home-page .home-page .premium-mock-course-card__title {
  font-weight: 700 !important;
  color: var(--imt-navy) !important;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.45;
}

body.is-home-page .home-page .home-diploma-card__hint {
  color: var(--imt-muted);
  font-size: 0.88rem;
  line-height: 1.65;
}

/* Soften pill chrome */
body.is-home-page .home-page .premium-mock-course-card__level-badge,
body.is-home-page .home-page .home-diploma-card__badge,
body.is-home-page .home-page .premium-diploma-path-card__label {
  border-radius: 8px !important;
  font-weight: 600 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

body.is-home-page .home-page .home-cert-mockup {
  border-radius: var(--imt-card-radius) !important;
  box-shadow: var(--imt-shadow) !important;
  border: 1px solid var(--imt-border) !important;
  background: #ffffff !important;
}

body.is-home-page .home-page .home-cert-mockup__seal-ring {
  box-shadow: 0 4px 12px rgba(61, 106, 171, 0.22) !important;
}

/* Flagship section: leave original premium-redesign card chrome intact */

/* ── Card interiors (flex + consistent CTA footers) ── */
.home-page .home-diploma-card,
.home-page .premium-mock-course-card,
.home-page .premium-feature-glass,
.home-page .premium-blog-card,
.home-page .premium-blog-post-card,
.home-page .premium-instructor-card,
.home-page .premium-testimonial-card,
.home-page .testimonials-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100%;
}

.home-page .home-diploma-card__body,
.home-page .premium-mock-course-card__body,
.home-page .premium-blog-card__body,
.home-page .premium-blog-post-card__body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  padding: var(--space-md) var(--space-md) var(--space-lg) !important;
  gap: 0;
}

.home-page .home-diploma-card__title,
.home-page .premium-mock-course-card__title {
  margin-bottom: var(--space-xs) !important;
}

.home-page .home-diploma-card__hint,
.home-page .premium-mock-course-card__desc,
.home-page .premium-blog-card__excerpt {
  margin-bottom: var(--space-md) !important;
  flex-grow: 1;
}

.home-page .home-diploma-card__cta,
.home-page .premium-mock-course-card__footer,
.home-page .premium-mock-course-card .btn,
.home-page .home-diploma-card .btn {
  margin-top: auto !important;
}

.home-page .premium-feature-glass {
  padding: var(--space-lg) var(--space-md) !important;
  gap: var(--space-sm);
}

.home-page .home-cert-card {
  padding: var(--space-md) !important;
  gap: var(--space-sm) !important;
}

.home-page .premium-trust-strip .row,
.home-page .premium-trust-strip__grid {
  gap: var(--space-md) !important;
}

/* ── Buttons / CTAs ── */
.home-page .premium-flagship-diploma__actions,
.home-page .home-certificates-section__actions,
.home-page .premium-home-conversion-banner__actions,
.home-page .premium-hero-ref__actions,
.home-page .premium-hero-ref__cta-row,
.home-page .premium-hero-ref__buttons,
.home-page .premium-hero-banner-mock .d-flex.flex-wrap,
.home-page .premium-hero-ref__cta-group,
.home-page .d-flex.flex-wrap.align-items-center.mt-18 {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--imt-cta-gap) !important;
  row-gap: var(--imt-cta-gap) !important;
  column-gap: var(--imt-cta-gap) !important;
}

.home-page .btn-premium-hero-primary,
.home-page .btn-premium-spotlight,
.home-page .btn-premium,
.home-page .home-diploma-card__cta,
.home-page .home-certificates-section__cta,
.home-page .premium-home-conversion-banner__btn,
.home-page .premium-flagship-diploma__btn-primary {
  min-height: var(--imt-touch-min);
  padding: 12px 24px !important;
  border-radius: var(--imt-btn-radius) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    background-color var(--imt-motion) var(--imt-ease),
    border-color var(--imt-motion) var(--imt-ease),
    box-shadow var(--imt-motion) var(--imt-ease),
    transform var(--imt-motion) var(--imt-ease),
    color var(--imt-motion) var(--imt-ease) !important;
}

.home-page .btn-premium-hero-primary,
.home-page .btn-premium-spotlight,
.home-page .premium-home-conversion-banner__btn,
.home-page .premium-flagship-diploma__btn-primary {
  background: var(--imt-brand) !important;
  background-image: none !important;
  border: 1px solid var(--imt-brand) !important;
  color: #ffffff !important;
  box-shadow: var(--imt-btn-shadow) !important;
}

.home-page .btn-premium-hero-primary:hover,
.home-page .btn-premium-spotlight:hover,
.home-page .premium-home-conversion-banner__btn:hover,
.home-page .premium-flagship-diploma__btn-primary:hover {
  background: var(--imt-brand-deep) !important;
  border-color: var(--imt-brand-deep) !important;
  box-shadow: 0 12px 24px rgba(87, 134, 199, 0.3) !important;
  transform: translateY(-1px);
}

.home-page .premium-latest-cta,
.home-page .premium-flagship-diploma__btn-secondary,
.home-page .premium-home-conversion-banner__link-muted,
.home-page .home-diploma-card__cta.btn-outline,
.home-page a.premium-latest-cta {
  min-height: var(--imt-touch-min);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px !important;
  border-radius: var(--imt-btn-radius) !important;
  border: 1.5px solid var(--imt-brand) !important;
  background: #ffffff !important;
  color: var(--imt-brand) !important;
  font-weight: 700 !important;
  text-decoration: none;
  box-shadow: none !important;
  transition:
    background-color var(--imt-motion) var(--imt-ease),
    border-color var(--imt-motion) var(--imt-ease),
    box-shadow var(--imt-motion) var(--imt-ease),
    transform var(--imt-motion) var(--imt-ease);
}

.home-page .premium-latest-cta:hover,
.home-page .premium-flagship-diploma__btn-secondary:hover,
.home-page .premium-home-conversion-banner__link-muted:hover {
  border-color: var(--imt-brand-deep) !important;
  background: rgba(87, 134, 199, 0.08) !important;
  color: var(--imt-brand-deep) !important;
  transform: translateY(-1px);
}

.home-page .btn-premium-hero-primary:focus-visible,
.home-page .btn-premium-spotlight:focus-visible,
.home-page .premium-home-conversion-banner__btn:focus-visible,
.home-page .premium-latest-cta:focus-visible,
.home-page .premium-flagship-diploma__btn-primary:focus-visible,
.home-page .premium-flagship-diploma__btn-secondary:focus-visible,
.home-page a:focus-visible,
.home-page button:focus-visible {
  outline: 2px solid var(--imt-brand);
  outline-offset: 2px;
}

/* Conversion CTA banner spacing only (keep brand blue) */
body.is-home-page:not(.dark) section.home-sections.premium-home-conversion-banner,
body.is-home-page:not(.dark) .home-page .premium-home-conversion-banner {
  margin-inline: clamp(12px, 2vw, 20px) !important;
  margin-top: var(--space-lg) !important;
  margin-bottom: var(--space-lg) !important;
  padding-block: clamp(28px, 3.5vw, 40px) !important;
  border-radius: 18px !important;
  background-color: var(--imt-brand) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 16px 40px rgba(20, 45, 95, 0.18) !important;
}

.home-page .premium-home-conversion-banner__actions {
  gap: var(--imt-cta-gap) !important;
  margin-top: var(--space-md) !important;
}

.home-page .premium-home-conversion-banner__fields-row {
  gap: var(--imt-cta-gap) !important;
}

.home-page .premium-home-conversion-banner__wa-btn {
  min-height: var(--imt-touch-min);
  border-radius: var(--imt-btn-radius) !important;
  padding: 12px 20px !important;
}

.home-page .premium-home-conversion-banner__title {
  margin-bottom: var(--imt-title-sub-gap) !important;
}

.home-page .premium-home-conversion-banner__hint {
  margin-bottom: var(--space-lg) !important;
}

/* ── Homepage hero: keep visual + copy side-by-side on desktop ──
 * Bootstrap gutter `gap` + col flex:0 0 50% was wrapping columns
 * into a ~1400px-tall stacked hero. Share remaining width instead.
 */
@media (min-width: 992px) {
  body.is-home-page .home-page .premium-hero-ref__split {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
    column-gap: clamp(16px, 2vw, 28px) !important;
    row-gap: 0 !important;
  }

  body.is-home-page .home-page .premium-hero-ref__split > .premium-hero-ref__visual,
  body.is-home-page .home-page .premium-hero-ref__split > .premium-hero-ref__content {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.is-home-page .home-page .premium-hero-ref__circle-wrap,
  body.is-home-page .home-page .premium-hero-ref__visual-composition {
    max-width: min(520px, 100%) !important;
  }

  body.is-home-page .home-page .premium-hero-banner-mock--ref-layout,
  body.is-home-page .home-page .premium-hero-ref__card,
  body.is-home-page .home-page .premium-hero-ref__body {
    min-height: 0 !important;
  }
}

/* ── Homepage diploma thumbs: fill card frame (distinct per diploma) ── */
.home-page .premium-mock-course-card__image-wrap,
.home-page .home-diploma-card__media {
  aspect-ratio: 16 / 9 !important;
  background: #eef4fc !important;
}

.home-page .premium-mock-course-card__img,
.home-page .home-diploma-card__img,
.home-page .home-diploma-card__media img,
.home-page .home-diploma-card__media picture img {
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  background: #eef4fc;
}

/* Soften bottom fade that cuts into the photo */
.home-page .premium-mock-course-card__image-wrap::after {
  opacity: 0.18 !important;
  height: 22% !important;
}

.home-page .premium-flagship-diploma__img,
.home-page .premium-flagship-diploma__media img,
.home-page .premium-flagship-diploma__visual img {
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  background: #eef4fc;
}

.home-page .premium-flagship-diploma__media-frame {
  aspect-ratio: 16 / 9 !important;
  background: #eef4fc;
}

.home-page .premium-flagship-diploma__media-shade {
  opacity: 0.25 !important;
}

@media (max-width: 991px) {
  .home-page .premium-flagship-diploma__media-frame {
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Swiper controls */
.home-page .swiper-button-prev,
.home-page .swiper-button-next,
.home-page .hero-nav-prev,
.home-page .hero-nav-next {
  border-radius: 12px !important;
  border: 1px solid var(--imt-border) !important;
  background: #ffffff !important;
  color: var(--imt-brand) !important;
  box-shadow: var(--imt-shadow) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  z-index: 12;
  pointer-events: auto;
}

/* Hide Swiper's default "prev"/"next" glyph — we use Font Awesome chevrons */
.home-page .swiper-button-prev::after,
.home-page .swiper-button-next::after,
.home-page .hero-nav-prev::after,
.home-page .hero-nav-next::after {
  content: "" !important;
  display: none !important;
  font-size: 0 !important;
}

.home-page .swiper-button-prev i,
.home-page .swiper-button-next i,
.home-page .hero-nav-prev i,
.home-page .hero-nav-next i {
  display: block !important;
  font-size: 1.15rem;
  line-height: 1;
  color: inherit;
  opacity: 1 !important;
}

/*
 * RTL: Swiper places prev on the right / next on the left.
 * FA markup is LTR-oriented (prev=left, next=right) — flip glyphs so
 * arrows point in the travel direction.
 */
body.is-home-page.rtl .home-page .swiper-button-prev i.fa-angle-left::before,
body.is-home-page.rtl .home-page .hero-nav-prev i.fa-angle-left::before {
  content: "\f105"; /* angle-right */
}

body.is-home-page.rtl .home-page .swiper-button-next i.fa-angle-right::before,
body.is-home-page.rtl .home-page .hero-nav-next i.fa-angle-right::before {
  content: "\f104"; /* angle-left */
}

body.is-home-page.rtl .home-page .swiper-btn.swiper-button-prev {
  left: auto !important;
  right: 8px !important;
}

body.is-home-page.rtl .home-page .swiper-btn.swiper-button-next {
  right: auto !important;
  left: 8px !important;
}

/* Keep nav usable on tablet/mobile (was display:none in older CSS) */
@media (max-width: 767.98px) {
  body.is-home-page .home-page .premium-latest-classes-swiper .swiper-button-prev,
  body.is-home-page .home-page .premium-latest-classes-swiper .swiper-button-next,
  body.is-home-page .home-page .premium-blog-swiper .swiper-button-prev,
  body.is-home-page .home-page .premium-blog-swiper .swiper-button-next,
  body.is-home-page .home-page .premium-instructors-swiper .swiper-button-prev,
  body.is-home-page .home-page .premium-instructors-swiper .swiper-button-next,
  body.is-home-page .home-page .premium-graduate-videos-swiper .swiper-button-prev,
  body.is-home-page .home-page .premium-graduate-videos-swiper .swiper-button-next,
  body.is-home-page .home-page .premium-products-swiper .swiper-button-prev,
  body.is-home-page .home-page .premium-products-swiper .swiper-button-next {
    display: inline-flex !important;
    width: 40px;
    height: 40px;
  }
}

.home-page .premium-mock-course-card__stars .fa-star {
  color: var(--imt-brand) !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-diploma-card,
  .home-page .premium-mock-course-card,
  .home-page .premium-feature-glass,
  .home-page .btn-premium-hero-primary,
  .home-page .btn-premium-spotlight,
  .home-page .premium-flagship-diploma__btn-primary,
  .home-page .premium-latest-cta,
  .home-page .premium-flagship-diploma__btn-secondary {
    transition: none !important;
    transform: none !important;
  }
}

@media (max-width: 767.98px) {
  .home-page .home-certificates-section__actions,
  .home-page .premium-flagship-diploma__actions,
  .home-page .premium-hero-ref__actions,
  .home-page .premium-hero-ref__cta-row,
  .home-page .premium-hero-ref__buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }

  .home-page .home-certificates-section__cta,
  .home-page .premium-flagship-diploma__btn-primary,
  .home-page .premium-flagship-diploma__btn-secondary,
  .home-page .btn-premium-hero-primary,
  .home-page .premium-latest-cta,
  .home-page .premium-hero-ref__actions > a,
  .home-page .premium-hero-ref__actions > .btn,
  .home-page .premium-hero-ref__cta-row > a,
  .home-page .premium-hero-ref__cta-row > .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .home-page .home-diploma-card__body,
  .home-page .premium-mock-course-card__body {
    padding: var(--space-md) !important;
  }
}