/* Hero sections */

.hero {
  padding-block: 0;
  background:
    var(--gradient-hero),
    var(--color-bg);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  align-items: center;
  gap: clamp(32px, 6vw, 72px);
}

.hero-content p {
  max-width: 660px;
  margin-bottom: 28px;
  font-size: var(--font-size-lg);
}

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 0;
  background: var(--gradient-hero);
  isolation: isolate;
}

.hero::before {
  position: absolute;
  inset: 10% auto auto -120px;
  z-index: -1;
  width: min(42vw, 520px);
  aspect-ratio: 1;
  content: "";
  opacity: 0.42;
  background-image: radial-gradient(rgba(var(--rgb-primary), 0.26) 1.4px, transparent 1.6px);
  background-size: 15px 15px;
  border-radius: var(--radius-circle);
  transform: rotate(-10deg);
}

.hero::after {
  position: absolute;
  inset: auto 9vw 32px auto;
  z-index: -1;
  width: 180px;
  height: 180px;
  content: "";
  opacity: 0.28;
  background-image: radial-gradient(rgba(var(--rgb-accent), 0.42) 1.5px, transparent 1.7px);
  background-size: 14px 14px;
  border-radius: var(--radius-circle);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(24px, 4.6vw, 76px);
  direction: ltr;
}

.hero-grid > * {
  min-width: 0;
  direction: rtl;
}

.hero-content {
  width: min(100%, 610px);
  max-width: 610px;
  justify-self: start;
}

.hero-content p {
  max-width: 560px;
  margin-bottom: 22px;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 1.9;
}

.hero h1 {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--color-primary);
  font-size: clamp(2.05rem, 4vw, 3.55rem);
  font-weight: 600;
  line-height: 1.16;
}

.hero h1 strong {
  color: var(--color-accent);
  font-style: normal;
}

.hero-panel {
  padding: clamp(22px, 4vw, 34px);
  background: rgba(var(--rgb-white), 0.86);
  border: 1px solid rgba(var(--rgb-primary), 0.12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.hero-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(var(--rgb-text), 0.07);
}

.hero-panel-header span {
  color: var(--color-muted);
  font-weight: 600;
}

.hero-panel-header strong {
  color: var(--color-primary);
  font-size: var(--font-size-xl);
}

#hero-title-desktop {
  direction: rtl;
}

#hero-title-desktop > span {
  display: inline-block;
  justify-self: start;
  width: max-content;
  max-width: 0;
  overflow: hidden;
  padding-inline-end: 0.04em;
  white-space: nowrap;
  border-inline-end: 0.08em solid currentColor;
  opacity: 0;
  animation: heroTitleTypewriter var(--hero-title-type-duration, 1.1s) steps(var(--hero-title-type-steps, 12), end) var(--hero-title-type-delay, 0s) forwards;
}

#hero-title-desktop > span:first-child {
  --hero-title-type-width: 8.5em;
  --hero-title-type-steps: 12;
  --hero-title-type-duration: 1.05s;
}

#hero-title-desktop > span:nth-child(2) {
  --hero-title-type-width: 13.5em;
  --hero-title-type-steps: 22;
  --hero-title-type-delay: 1.1s;
  --hero-title-type-duration: 1.55s;
}

@keyframes heroTitleTypewriter {
  0% {
    max-width: 0;
    opacity: 1;
    border-inline-end-color: currentColor;
  }

  92% {
    border-inline-end-color: currentColor;
  }

  100% {
    max-width: var(--hero-title-type-width);
    opacity: 1;
    border-inline-end-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero-title-desktop > span {
      max-width: none;
      border-inline-end-color: transparent;
      opacity: 1;
      animation: none;
    }
}

.hero-features {
  display: grid;
  max-width: 710px;
  margin: 0 0 22px;
  gap: clamp(12px, 1.5vw, 16px);
}

.hero-feature-cards,
.hero-feature-stats {
  display: grid;
}

.hero-feature-cards {
  grid-template-columns: repeat(3, max-content);
  align-items: center;
  justify-content: start;
  gap: clamp(12px, 1.4vw, 18px);
}

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

.hero-feature {
  position: relative;
  display: grid;
  grid-template-columns: 54px max-content;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 76px;
  padding: 15px clamp(14px, 1.5vw, 18px);
  gap: 9px;
  color: var(--color-primary);
  background: rgba(var(--rgb-white), 0.86);
  border: 1px solid rgba(var(--rgb-primary), 0.08);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(var(--rgb-white), 0.95),
    0 14px 28px rgba(var(--rgb-primary), 0.08);
  backdrop-filter: blur(10px) saturate(128%);
  -webkit-backdrop-filter: blur(10px) saturate(128%);
}

.hero-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.hero-feature-icon {
  position: relative;
  width: 54px;
  height: 54px;
  overflow: visible;
  border-radius: var(--radius-circle);
  isolation: isolate;
}

.hero-feature-cards .hero-feature-icon::before {
  position: absolute;
  inset: -7px;
  z-index: 0;
  content: "";
  background: url("../../images/ui/hero-feature-orbit-frame.svg") center / contain no-repeat;
  pointer-events: none;
}

.hero-feature:nth-child(2) .hero-feature-icon {
  color: var(--color-accent);
}

.hero-feature-body,
.hero-feature-stat-body {
  display: grid;
  min-width: 0;
}

.hero-feature-body {
  gap: 4px;
}

.hero-feature-title {
  color: var(--color-primary);
  white-space: nowrap;
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.25;
}

.hero-feature-desc {
  color: var(--color-text);
  white-space: nowrap;
  font-size: var(--font-size-2xs);
  font-weight: 600;
  line-height: 1.45;
}

.hero-feature-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-feature-icon svg {
  position: relative;
  z-index: 1;
  width: 33px;
  height: 33px;
  stroke-width: 1.65;
}

.hero-feature-icon .hero-book-icon,
.hero-feature-icon .hero-certificate-icon {
  fill: currentColor;
  stroke: none;
}

.hero-feature-stats {
  position: relative;
  align-items: center;
  width: min(100%, 650px);
  max-width: 650px;
  margin-inline: auto;
  padding: 6px clamp(10px, 1.4vw, 16px);
}

.hero-feature-stat {
  position: relative;
  display: inline-grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  min-height: 32px;
  padding-inline: clamp(8px, 1vw, 14px);
  color: var(--color-primary);
  text-align: center;
}

.hero-feature-stat + .hero-feature-stat {
  border-inline-start: 1px solid rgba(var(--rgb-primary), 0.1);
}


.hero-feature-stat-value {
  color: var(--color-primary);
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.hero-feature-stat-label {
  color: var(--color-muted);
  font-size: clamp(0.7rem, 0.82vw, 0.78rem);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

@media (min-width: 641px) {
  .hero-actions {
      width: min(100%, 710px);
      margin-top: clamp(4px, 0.9vw, 12px);
      justify-content: center;
      align-items: center;
      gap: clamp(10px, 1.1vw, 14px);
    }

  .hero-actions .btn {
      position: relative;
      min-height: var(--cta-height);
      padding: var(--cta-padding-y) var(--cta-padding-x);
      gap: var(--cta-gap);
      overflow: hidden;
      font-size: var(--font-size-sm);
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      border-radius: var(--btn-radius);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    }

  .hero-actions .btn:active {
      transform: translateY(1px) scale(0.99);
    }

  .hero-actions .btn-primary {
      padding-inline: clamp(16px, 1.55vw, 22px) clamp(24px, 2.3vw, 34px);
      color: var(--color-white);
      background:
        linear-gradient(160deg, rgba(var(--rgb-white), 0.2), transparent 34%),
        linear-gradient(135deg, #f12d3f 0%, var(--color-accent) 54%, #d3192c 100%);
      border: 1px solid rgba(var(--rgb-white), 0.22);
      box-shadow:
        inset 0 1px 0 rgba(var(--rgb-white), 0.3),
        0 16px 30px rgba(var(--rgb-accent), 0.25);
    }

  .hero-actions .btn-primary > span,
    .hero-actions .btn-primary .mei-hero-demo-btn-icon {
      position: relative;
      z-index: 1;
    }

  .hero-actions .mei-hero-demo-btn-icon {
      flex: 0 0 auto;
      order: -1;
      width: clamp(22px, 1.65vw, 24px);
      height: clamp(22px, 1.65vw, 24px);
      padding: 4px;
      color: var(--color-accent);
      background: var(--color-white);
      border-radius: calc(var(--btn-radius) - 2px);
      box-shadow: inset 0 0 0 1px rgba(var(--rgb-accent), 0.08);
      fill: none;
      transition: transform 0.2s ease;
    }

  .hero-actions .mei-hero-demo-btn-icon path,
    .hero-actions .hero-outline-arrow path {
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2.4;
    }

  .hero-actions .btn-primary:hover .mei-hero-demo-btn-icon,
    .hero-actions .btn-primary:focus-visible .mei-hero-demo-btn-icon {
      transform: translateX(-2px);
    }

  .hero-actions .btn-outline {
      color: var(--color-primary);
      background: rgba(var(--rgb-white), 0.86);
      border: 1.5px solid rgba(var(--rgb-primary), 0.72);
      box-shadow: 0 12px 24px rgba(var(--rgb-primary), 0.08), inset 0 1px 0 rgba(var(--rgb-white), 0.92);
    }

  .hero-actions .hero-outline-arrow {
      flex: 0 0 auto;
      width: clamp(16px, 1.2vw, 20px);
      height: clamp(16px, 1.2vw, 20px);
      color: currentColor;
      transition: transform 0.2s ease;
    }

  .hero-actions .btn-outline:hover,
    .hero-actions .btn-outline:focus-visible {
      color: var(--color-primary-dark);
      background: rgba(var(--rgb-white), 0.96);
      border-color: var(--color-primary-dark);
      box-shadow: 0 14px 28px rgba(var(--rgb-primary), 0.12), inset 0 1px 0 rgba(var(--rgb-white), 0.94);
    }

  .hero-actions .btn-outline:hover .hero-outline-arrow,
    .hero-actions .btn-outline:focus-visible .hero-outline-arrow {
      transform: translateX(-2px);
    }
}

.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1.04;
  justify-self: stretch;
  isolation: isolate;
}

.hero-visual-shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.hero-visual-shape-primary {
  inset: 12% 12% 10% 16%;
  background: var(--hero-blob-gradient);
  border-radius: 62% 38% 58% 42% / 46% 54% 46% 54%;
  box-shadow: var(--hero-visual-shadow);
  transform: rotate(-7deg) scaleX(0.9);
}

.hero-badge-connector {
  position: absolute;
  z-index: -1;
  height: auto;
  pointer-events: none;
  --hero-connector-stroke: url(#heroConnectorGradient);
}

.hero-badge-connector-top {
  inset: 6% 12% auto auto;
  width: min(20vw, 210px);
  transform: rotate(-2deg);
}

.hero-badge-connector-bottom {
  inset: auto auto 3% 0;
  width: min(30vw, 315px);
  transform: rotate(-8deg);
  --hero-connector-stroke: url(#heroConnectorBottomGradient);
}

.hero-badge-connector path {
  fill: none;
  stroke: var(--hero-connector-stroke);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  opacity: 0.82;
}

.hero-visual-shape-accent {
  inset: auto 4% 11% auto;
  width: 160px;
  aspect-ratio: 1;
  background: var(--hero-accent-gradient);
  border-radius: 38% 62% 56% 44% / 45% 42% 58% 55%;
  opacity: 0.15;
  transform: rotate(18deg);
}

.hero-visual-globe {
  position: absolute;
  inset: 5% -12% auto auto;
  z-index: -2;
  display: block;
  width: min(43vw, 390px);
  height: auto;
  opacity: 0.56;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.hero-landmark {
  position: absolute;
  z-index: 0;
  display: block;
  width: min(20vw, 156px);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: var(--hero-landmark-opacity);
  filter: grayscale(1) sepia(0.12) hue-rotate(172deg) saturate(1.25) opacity(0.92);
}

.hero-landmark-big-ben {
  inset: -3% auto auto -30%;
  width: min(23vw, 645px);
  opacity: 0.24;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.35) 26%, #000 76%);
  mask-image: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.35) 26%, #000 76%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.hero-landmark-eiffel {
  inset: auto -15% -3% auto;
  width: min(25vw, 250px);
  opacity: 0.32;
}

.hero-student {
  position: absolute;
  inset: auto 13% 0 auto;
  z-index: 1;
  width: min(48vw, 430px);
  max-height: min(640px, 78vh);
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 22px 28px rgba(var(--rgb-text), 0.16));
}

.hero-badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  max-width: 142px;
  min-height: 40px;
  padding: 8px 12px;
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  background: var(--gradient-header-cta);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-header-cta);
}

.hero-badge-top {
  inset: 10% 4% auto auto;
}

.hero-badge-bottom {
  inset: auto auto 10% 1%;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-md);
}

@media (min-width: 641px) {
  .hero-desktop .hero-content > p,
    .hero-desktop .hero-features,
    .hero-desktop .hero-actions {
      opacity: 0;
      transform: translateY(14px);
      will-change: opacity, transform;
    }

  .hero-desktop.is-ready .hero-content > p,
    .hero-desktop.is-ready .hero-features,
    .hero-desktop.is-ready .hero-actions {
      animation: heroDesktopRise 0.62s cubic-bezier(0.2, 0.72, 0.22, 1) forwards;
    }

  .hero-desktop.is-ready .hero-content > p {
      animation-delay: 1.25s;
    }

  .hero-desktop.is-ready .hero-features {
      animation-delay: 1.45s;
    }

  .hero-desktop.is-ready .hero-actions {
      animation-delay: 1.62s;
    }

  .hero-desktop .hero-visual-shape-primary,
    .hero-desktop .hero-visual-shape-accent,
    .hero-desktop .hero-visual-globe,
    .hero-desktop .hero-landmark,
    .hero-desktop .hero-student,
    .hero-desktop .hero-badge {
      opacity: 0;
      will-change: opacity;
    }

  .hero-desktop .hero-visual-shape-primary,
    .hero-desktop .hero-student,
    .hero-desktop .hero-badge {
      --hero-desktop-reveal-opacity: 1;
    }

  .hero-desktop .hero-visual-shape-accent {
      --hero-desktop-reveal-opacity: 0.15;
    }

  .hero-desktop .hero-visual-globe {
      --hero-desktop-reveal-opacity: 0.56;
    }

  .hero-desktop .hero-landmark-big-ben {
      --hero-desktop-reveal-opacity: 0.24;
    }

  .hero-desktop .hero-landmark-eiffel {
      --hero-desktop-reveal-opacity: 0.32;
    }

  .hero-desktop.is-ready .hero-visual-shape-primary,
    .hero-desktop.is-ready .hero-visual-shape-accent,
    .hero-desktop.is-ready .hero-visual-globe,
    .hero-desktop.is-ready .hero-landmark,
    .hero-desktop.is-ready .hero-student,
    .hero-desktop.is-ready .hero-badge {
      animation: heroDesktopFade 0.74s ease forwards;
    }

  .hero-desktop.is-ready .hero-visual-shape-primary {
      animation-delay: 0.08s;
    }

  .hero-desktop.is-ready .hero-visual-shape-accent,
    .hero-desktop.is-ready .hero-visual-globe {
      animation-delay: 0.18s;
    }

  .hero-desktop.is-ready .hero-landmark-big-ben {
      animation-delay: 0.24s;
    }

  .hero-desktop.is-ready .hero-landmark-eiffel {
      animation-delay: 0.32s;
    }

  .hero-desktop.is-ready .hero-student {
      animation-delay: 0.42s;
    }

  .hero-desktop.is-ready .hero-badge-top {
      animation-delay: 0.92s;
    }

  .hero-desktop.is-ready .hero-badge-bottom {
      animation-delay: 1.06s;
    }
}

@keyframes heroDesktopRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

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

@keyframes heroDesktopFade {
  from {
    opacity: 0;
  }

  to {
    opacity: var(--hero-desktop-reveal-opacity, 1);
  }
}

@media (min-width: 641px) and (prefers-reduced-motion: reduce) {
  .hero-desktop .hero-content > p,
    .hero-desktop .hero-features,
    .hero-desktop .hero-actions {
      opacity: 1;
      transform: none;
      animation: none;
    }

  .hero-desktop .hero-visual-shape-primary,
    .hero-desktop .hero-visual-shape-accent,
    .hero-desktop .hero-visual-globe,
    .hero-desktop .hero-landmark,
    .hero-desktop .hero-student,
    .hero-desktop .hero-badge {
      opacity: var(--hero-desktop-reveal-opacity, 1);
      animation: none;
    }
}

@media (min-width: 641px) {
  .hero-desktop .hero-visual-globe {
      --hero-globe-final-opacity: 0.56;
      will-change: opacity, filter;
    }

  .hero-desktop.is-ready .hero-visual-globe {
      animation: heroGlobeSoftReveal 0.86s ease 0.18s forwards;
    }
}

@keyframes heroGlobeSoftReveal {
  0% {
    opacity: 0;
    filter: blur(8px) brightness(1.06) saturate(0.92);
  }

  60% {
    opacity: var(--hero-globe-final-opacity);
    filter: blur(1.5px) brightness(1.03) saturate(1.04);
  }

  100% {
    opacity: var(--hero-globe-final-opacity);
    filter: none;
  }
}

@media (min-width: 641px) and (prefers-reduced-motion: reduce) {
  .hero-desktop .hero-visual-globe,
    .hero-desktop.is-ready .hero-visual-globe {
      opacity: var(--hero-globe-final-opacity, 0.56);
      filter: none;
      animation: none;
    }
}

.hero-badge-connector-top {
  opacity: 0;
  will-change: opacity, transform;
  transform: rotate(-2deg) translateY(14px) scale(0.96);
  transition: opacity 0.58s ease 0.08s, transform 0.58s ease 0.08s;
}

.hero-badge-connector-top path {
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.85s ease 0.14s;
}

.hero-badge-connector-top.is-in-view {
  opacity: 1;
  transform: rotate(-2deg) translateY(0) scale(1);
}

.hero-badge-connector-top.is-in-view path {
  stroke-dashoffset: 0;
}

.hero-badge-connector-bottom {
  opacity: 0;
  will-change: opacity, transform;
  transform: rotate(-8deg) translateY(14px) scale(0.96);
  transition: opacity 0.58s ease 0.08s, transform 0.58s ease 0.08s;
}

.hero-badge-connector-bottom path {
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.85s ease 0.14s;
}

.hero-badge-connector-bottom.is-in-view {
  opacity: 1;
  transform: rotate(-8deg) translateY(0) scale(1);
}

.hero-badge-connector-bottom.is-in-view path {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-badge-connector-top,
    .hero-badge-connector-top.is-in-view,
    .hero-badge-connector-bottom,
    .hero-badge-connector-bottom.is-in-view {
      opacity: 1;
      transition: none;
    }

  .hero-badge-connector-top,
    .hero-badge-connector-top.is-in-view {
      transform: rotate(-2deg);
    }

  .hero-badge-connector-bottom,
    .hero-badge-connector-bottom.is-in-view {
      transform: rotate(-8deg);
    }

  .hero-badge-connector-top path,
    .hero-badge-connector-bottom path {
      stroke-dashoffset: 0;
      transition: none;
    }
}

.hero-landmark-great-wall {
  inset: auto 50% 65% auto;
  z-index: 0;
  width: min(24vw, 230px);
  opacity: 0.22;
  filter: saturate(0.96) opacity(0.9);
  transform: rotate(-5deg);
}

@media (min-width: 641px) {
  .hero-desktop .hero-landmark-great-wall {
      --hero-desktop-reveal-opacity: 0.22;
      --hero-great-wall-final-opacity: 0.22;
      opacity: 0;
      filter: blur(6px) saturate(0.96) opacity(0.72);
      transform: rotate(-5deg) translateY(12px) scale(0.96);
      transform-origin: 50% 86%;
      will-change: opacity, filter, transform;
    }

  .hero-desktop.is-ready .hero-landmark-great-wall {
      animation: heroGreatWallDesktopReveal 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.36s forwards;
    }

  @keyframes heroGreatWallDesktopReveal {
      0% {
        opacity: 0;
        filter: blur(6px) saturate(0.96) opacity(0.72);
        transform: rotate(-5deg) translateY(12px) scale(0.96);
      }

      62% {
        opacity: var(--hero-great-wall-final-opacity);
        filter: blur(1.5px) saturate(1.02) opacity(0.88);
        transform: rotate(-5deg) translateY(-2px) scale(1.01);
      }

      100% {
        opacity: var(--hero-great-wall-final-opacity);
        filter: saturate(0.96) opacity(0.9);
        transform: rotate(-5deg) translateY(0) scale(1);
      }
    }
}

@media (min-width: 641px) and (prefers-reduced-motion: reduce) {
  .hero-desktop .hero-landmark-great-wall,
    .hero-desktop.is-ready .hero-landmark-great-wall {
      opacity: var(--hero-great-wall-final-opacity, 0.22);
      filter: saturate(0.96) opacity(0.9);
      transform: rotate(-5deg);
      animation: none;
    }
}

@media (min-width: 641px) {
  .hero-desktop .hero-landmark-big-ben,
    .hero-desktop .hero-landmark-eiffel,
    .hero-desktop .hero-landmark-great-wall {
      opacity: 0;
      filter: blur(6px) saturate(0.96) opacity(0.72);
      transform: var(--hero-landmark-start-transform, translateY(12px) scale(0.96));
      transform-origin: 50% 86%;
      will-change: opacity, filter, transform;
    }

  .hero-desktop .hero-landmark-big-ben {
      --hero-landmark-final-opacity: 0.24;
      --hero-landmark-final-filter: grayscale(1) sepia(0.12) hue-rotate(172deg) saturate(1.25) opacity(0.92);
      --hero-landmark-start-transform: translateY(12px) scale(0.96);
      --hero-landmark-peak-transform: translateY(-2px) scale(1.01);
      --hero-landmark-final-transform: translateY(0) scale(1);
    }

  .hero-desktop .hero-landmark-eiffel {
      --hero-landmark-final-opacity: 0.32;
      --hero-landmark-final-filter: grayscale(1) sepia(0.12) hue-rotate(172deg) saturate(1.25) opacity(0.92);
      --hero-landmark-start-transform: translateY(12px) scale(0.96);
      --hero-landmark-peak-transform: translateY(-2px) scale(1.01);
      --hero-landmark-final-transform: translateY(0) scale(1);
    }

  .hero-desktop .hero-landmark-great-wall {
      --hero-landmark-final-opacity: 0.22;
      --hero-landmark-final-filter: saturate(0.96) opacity(0.9);
      --hero-landmark-start-transform: rotate(-5deg) translateY(12px) scale(0.96);
      --hero-landmark-peak-transform: rotate(-5deg) translateY(-2px) scale(1.01);
      --hero-landmark-final-transform: rotate(-5deg) translateY(0) scale(1);
    }

  .hero-desktop.is-ready .hero-landmark-big-ben {
      animation: heroLandmarkSoftReveal 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.24s forwards;
    }

  .hero-desktop.is-ready .hero-landmark-eiffel {
      animation: heroLandmarkSoftReveal 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.32s forwards;
    }

  .hero-desktop.is-ready .hero-landmark-great-wall {
      animation: heroLandmarkSoftReveal 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.36s forwards;
    }

  @keyframes heroLandmarkSoftReveal {
      0% {
        opacity: 0;
        filter: blur(6px) saturate(0.96) opacity(0.72);
        transform: var(--hero-landmark-start-transform, translateY(12px) scale(0.96));
      }

      62% {
        opacity: var(--hero-landmark-final-opacity);
        filter: blur(1.5px) saturate(1.02) opacity(0.88);
        transform: var(--hero-landmark-peak-transform, translateY(-2px) scale(1.01));
      }

      100% {
        opacity: var(--hero-landmark-final-opacity);
        filter: var(--hero-landmark-final-filter, none);
        transform: var(--hero-landmark-final-transform, translateY(0) scale(1));
      }
    }
}

@media (min-width: 641px) and (prefers-reduced-motion: reduce) {
  .hero-desktop .hero-landmark-big-ben,
    .hero-desktop.is-ready .hero-landmark-big-ben,
    .hero-desktop .hero-landmark-eiffel,
    .hero-desktop.is-ready .hero-landmark-eiffel,
    .hero-desktop .hero-landmark-great-wall,
    .hero-desktop.is-ready .hero-landmark-great-wall {
      opacity: var(--hero-landmark-final-opacity);
      filter: var(--hero-landmark-final-filter, none);
      transform: var(--hero-landmark-final-transform, translateY(0) scale(1));
      animation: none;
    }
}

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 0;
  background: var(--gradient-hero);
  isolation: isolate;
}

.hero-journey-indicator,
.mei-hero-journey-indicator {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(76px, 7vw, 104px);
  aspect-ratio: 160 / 220;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.9);
  transform-origin: center top;
  transition:
    opacity 0.62s ease,
    transform 0.68s cubic-bezier(0.2, 0.82, 0.2, 1.12),
    filter 0.62s ease;
  filter: drop-shadow(0 14px 22px rgba(var(--rgb-primary), 0.16));
}

.hero-journey-indicator {
  inset: auto auto -5% -5%;
}

.mei-hero-journey-indicator {
  display: none;
}

.hero-journey-indicator img,
.mei-hero-journey-indicator img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-journey-indicator.is-in-view,
.mei-hero-journey-indicator.is-in-view {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.hero-journey-indicator:hover,
.hero-journey-indicator:focus-visible,
.mei-hero-journey-indicator:hover,
.mei-hero-journey-indicator:focus-visible {
  filter: drop-shadow(0 18px 28px rgba(var(--rgb-primary), 0.22));
  transform: translateY(-2px) scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .hero-journey-indicator,
    .hero-journey-indicator.is-in-view,
    .mei-hero-journey-indicator,
    .mei-hero-journey-indicator.is-in-view {
      opacity: 1;
      transform: none;
      transition: none;
    }
}

@media (max-width: 980px) {
  .hero-panel {
      max-width: 620px;
    }
}

@media (max-width: 560px) {
  .hero-content p,
    .section-heading p {
      font-size: var(--font-size-body);
    }

  .hero-panel-header {
      align-items: flex-start;
      flex-direction: column;
    }
}

@media (max-width: 380px) {
  .feature-list div,
    .hero-panel {
      padding: 18px;
    }
}

@media (max-width: 1280px) and (min-width: 1101px) {
  .hero-grid {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: clamp(22px, 3.8vw, 58px);
    }

  .hero-content {
      width: min(100%, 580px);
      max-width: 580px;
    }
}

@media (max-width: 1100px) {
  .hero-grid {
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      gap: clamp(18px, 3.4vw, 38px);
    }

  .hero-content {
      width: min(100%, 540px);
      max-width: 540px;
    }

  .hero-student {
      width: min(43vw, 382px);
    }

  .hero-landmark-big-ben {
      width: min(17vw, 132px);
    }

  .hero-landmark-eiffel {
      width: min(23vw, 190px);
    }
}

@media (max-width: 980px) {
  .hero {
      padding-block: clamp(18px, 4vw, 34px) 12px;
    }

  .hero::before {
      inset: 8% auto auto -170px;
      width: min(78vw, 460px);
      opacity: 0.26;
    }

  .hero::after {
      inset: auto -56px 11% auto;
      width: 138px;
      height: 138px;
      opacity: 0.2;
    }

  .hero-grid {
      grid-template-columns: minmax(0, 1fr);
      width: min(100%, 760px);
      margin-inline: auto;
      gap: clamp(14px, 3.5vw, 24px);
      direction: rtl;
      text-align: center;
    }

  .hero-content {
      justify-self: center;
      width: min(100%, 700px);
      max-width: 700px;
    }

  .hero h1 {
      gap: 5px;
      margin-bottom: 10px;
      font-size: clamp(1.9rem, 6vw, 3rem);
      line-height: 1.18;
    }

  .hero-content p {
      max-width: 620px;
      margin: 0 auto 18px;
      font-size: var(--font-size-body);
      line-height: 1.85;
    }

  .hero-features {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      max-width: 620px;
      margin: 0 auto 18px;
      gap: 0;
    }

  .hero-feature {
      grid-template-columns: 42px minmax(0, 1fr);
      min-height: 54px;
      gap: 8px;
      text-align: start;
    }

  .hero-feature::after {
      display: none;
    }

  .hero-feature-icon {
      width: 42px;
      height: 42px;
    }

  .hero-feature-icon svg {
      width: 21px;
      height: 21px;
    }

  .hero-feature-title {
      font-size: var(--font-size-xs);
    }

  .hero-feature-desc {
      font-size: var(--font-size-xs);
      line-height: 1.35;
    }

  .hero-actions {
      justify-content: center;
      gap: 10px;
    }

  .hero-actions .btn {
      min-height: var(--cta-height);
      padding-inline: 18px;
    }

  .hero-visual {
      width: min(100%, 560px);
      max-width: min(92vw, 560px);
      aspect-ratio: 1 / 0.9;
      margin-inline: auto;
    }

  .hero-visual-shape-primary {
      inset: 9% 17% 8% 18%;
      transform: rotate(-7deg) scaleX(0.92);
    }

  .hero-visual-shape-accent {
      inset: auto 10% 12% auto;
      width: 126px;
    }

  .hero-student {
      inset: auto 50% 0 auto;
      width: min(54vw, 340px);
      max-height: 430px;
      transform: translateX(50%);
    }

  .hero-visual-globe {
      inset: 4% -16% auto auto;
      width: min(62vw, 330px);
      opacity: 0.44;
    }

  .hero-landmark-big-ben {
      inset: 0 auto auto -5%;
      width: min(18vw, 118px);
      opacity: 0.2;
    }

  .hero-landmark-eiffel {
      inset: auto -7% -2% auto;
      width: min(24vw, 160px);
      opacity: 0.26;
    }

  .hero-badge {
      max-width: 126px;
      min-height: 44px;
      padding: 7px 10px;
      font-size: var(--font-size-2xs);
      line-height: 1.45;
    }

  .hero-badge-top {
      inset: 9% 6% auto auto;
    }

  .hero-badge-bottom {
      inset: auto auto 15% 6%;
    }

  .hero-badge-connector {
      display: block;
    }

  .hero-badge-connector-top {
      inset: 8% 16% auto auto;
      width: min(28vw, 170px);
      transform: rotate(-3deg);
    }

  .hero-badge-connector-bottom {
      inset: auto auto 2% 2%;
      width: min(40vw, 235px);
      transform: rotate(-9deg);
    }
}

@media (max-width: 640px) {
  .hero {
      padding-block: 0 10px;
    }

  .hero-grid {
      gap: 0;
      align-items: center;
    }

  .hero-visual {
      order: 1;
      width: 100%;
      max-width: 430px;
      height: clamp(292px, 74vw, 360px);
      margin: -6px auto -28px;
      overflow: visible;
    }

  .hero-visual::after {
      position: absolute;
      inset: auto -5% -38px;
      z-index: 3;
      height: 46%;
      content: "";
      pointer-events: none;
      background:
        radial-gradient(34% 40% at 13% 60%, rgba(var(--rgb-white), 0.54), transparent 78%),
        radial-gradient(62% 58% at 78% 56%, rgba(var(--rgb-white), 0.62), transparent 76%),
        radial-gradient(94% 56% at 50% 74%, rgba(var(--rgb-white), 0.48), transparent 82%),
        linear-gradient(to bottom, rgba(var(--rgb-white), 0) 0%, rgba(var(--rgb-white), 0.24) 28%, rgba(var(--rgb-white), 0.6) 58%, rgba(var(--rgb-white), 0.28) 82%, rgba(var(--rgb-white), 0) 100%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 72%, transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 72%, transparent 100%);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
    }

  .hero-content {
      position: relative;
      z-index: 4;
      order: 2;
      width: 100%;
      margin-top: 0;
    }

  .hero h1 {
      margin-bottom: 9px;
      font-size: clamp(1.72rem, 8.4vw, 2.35rem);
    }

  .hero-content p {
      max-width: 35rem;
      margin-bottom: 12px;
      font-size: var(--font-size-sm);
      line-height: 1.8;
    }

  .hero-features {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      max-width: 100%;
      margin-bottom: 16px;
      gap: 0;
    }

  .hero-feature {
      grid-template-columns: 1fr;
      align-content: start;
      justify-items: center;
      min-height: 92px;
      gap: 6px;
      text-align: center;
    }

  .hero-feature-icon {
      width: 34px;
      height: 34px;
    }

  .hero-feature-title {
      font-size: 0.74rem;
      line-height: 1.25;
    }

  .hero-feature-desc {
      font-size: 0.64rem;
      line-height: 1.35;
    }

  .hero-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: 100%;
      max-width: 390px;
      margin-inline: auto;
    }

  .hero-actions .btn {
      width: 100%;
      min-height: 43px;
      padding: 10px 12px;
      font-size: var(--font-size-xs);
    }

  .hero-visual-shape-primary {
      inset: 18% 25% 3% 22%;
      border-radius: 5px;
      transform: rotate(-7deg) scaleX(0.82);
    }

  .hero-visual-shape-accent {
      width: 118px;
      opacity: 0.15;
    }

  .hero-student {
      inset: auto 50% -34% auto;
      width: min(106vw, 420px);
      max-height: none;
      -webkit-clip-path: inset(0 0 28% 0);
      clip-path: inset(0 0 28% 0);
      transform: translateX(50%);
    }

  .hero-visual-globe {
      inset: 3% -18% auto auto;
      width: min(78vw, 300px);
      opacity: 0.34;
      transform: rotate(-10deg);
      transform-origin: 72% 48%;
    }

  .hero-landmark-big-ben {
      inset: 5% auto auto 2%;
      width: 118px;
      opacity: 0.4;
    }

  .hero-landmark-eiffel {
      inset: auto -2% 1% auto;
      width: 142px;
      opacity: 0.50;
    }

  .hero-badge {
      max-width: 108px;
      min-height: 40px;
      padding: 7px 10px;
      font-size: 0.62rem;
    }

  .hero-badge-top {
      inset: 9% 3% auto auto;
    }

  .hero-badge-bottom {
      inset: auto auto 20% 2%;
    }

  .hero-badge-connector-top {
      inset: 11% 14% auto auto;
      width: 132px;
    }

  .hero-badge-connector-bottom {
      inset: auto auto 9% 1%;
      width: 168px;
    }

  .hero-badge-connector path {
      stroke-width: 1.7;
      stroke-dasharray: 4 7;
      opacity: 0.66;
    }
}

@media (max-width: 420px) {
  .hero {
      padding-block: 0 8px;
    }

  .hero-visual {
      width: 100%;
      max-width: 390px;
      height: clamp(278px, 82vw, 326px);
      margin-top: -8px;
      margin-bottom: -15px;
    }

  .hero-visual::after {
      bottom: -50px;
      height: 48%;
    }

  .hero h1 {
      font-size: clamp(1.56rem, 8vw, 2.02rem);
    }

  .hero-content p {
      font-size: var(--font-size-xs);
      line-height: 1.75;
    }

  .hero-feature {
      min-height: 88px;
    }

  .hero-feature-icon {
      width: 32px;
      height: 32px;
    }

  .hero-feature-icon svg {
      width: 18px;
      height: 18px;
    }

  .hero-feature-title {
      font-size: 0.72rem;
    }

  .hero-feature-desc {
      font-size: 0.62rem;
    }

  .hero-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-width: 350px;
      gap: 8px;
    }

  .hero-actions .btn {
      min-height: 41px;
      padding: 9px 8px;
      font-size: 0.72rem;
    }

  .hero-student {
      inset: auto 50% -90% auto;
      width: min(116vw, 335px);
      max-height: none;
      -webkit-clip-path: inset(0 0 44% 0);
      clip-path: inset(0 0 44% 0);
      transform: translateX(50%);
    }

  .hero-visual-globe {
      inset: 4% -24% auto auto;
      width: 280px;
      transform: rotate(-12deg);
    }

  .hero-landmark-big-ben {
      inset: 5% auto auto -5%;
      width: 160px;
    }

  .hero-landmark-eiffel {
      inset: auto -1% 1% auto;
      width: 135px;
    }

  .hero-badge-top {
      inset: 8% 2% auto auto;
    }

  .hero-badge-bottom {
      inset: auto auto 19% 1%;
    }

  .hero-badge-connector-top {
      inset: 11% 13% auto auto;
      width: 112px;
    }

  .hero-badge-connector-bottom {
      inset: auto auto 9% 0;
      width: 148px;
    }
}

@media (max-width: 640px) {
  .hero-desktop {
      display: none;
    }

  .mei-hero-phone {
      position: relative;
      width: min(100%, 430px);
      min-height: calc(var(--mei-vh, 1vh) * 100 - var(--header-height, 0px));
      margin-inline: auto;
      padding: clamp(16px, 4.7vw, 20px) clamp(14px, 4.2vw, 18px) clamp(18px, 5vw, 22px);
      overflow: visible;
    }

  .mei-hero-scene {
      position: relative;
      min-height: clamp(540px, 132vw, 590px);
      overflow: visible;
      isolation: isolate;
    }

  .mei-hero-copy {
      position: relative;
      z-index: 8;
      width: min(60%, 218px);
      margin-right: auto;
      padding-top: clamp(6px, 1.8vw, 8px);
      text-align: right;
    }

  .mei-hero-chip {
      display: inline-flex;
      align-items: center;
      gap: clamp(6px, 1.8vw, 7px);
      min-height: clamp(31px, 8.4vw, 34px);
      margin-bottom: clamp(13px, 4vw, 18px);
      padding: clamp(6px, 1.8vw, 7px) clamp(10px, 3vw, 12px);
      color: var(--color-white);
      font-size: clamp(0.7rem, 2.05vw, 0.75rem);
      font-weight: 600;
      background: linear-gradient(135deg, var(--color-accent), #e93545);
      border-radius: 5px;
      box-shadow: 0 14px 26px rgba(var(--rgb-accent), 0.22);
    }

  .mei-hero-chip svg {
      width: clamp(15px, 4.4vw, 17px);
      height: clamp(15px, 4.4vw, 17px);
      stroke: currentColor;
      stroke-width: 1.8;
      fill: none;
    }

  .mei-hero-title {
      display: grid;
      gap: clamp(2px, 0.7vw, 4px);
      margin: 0 0 clamp(12px, 3.8vw, 16px);
      color: var(--color-primary);
      font-size: clamp(1.62rem, 7.05vw, 1.86rem);
      font-weight: 600;
      line-height: 1.12;
      letter-spacing: 0;
    }

  .mei-hero-title span,
    .mei-hero-title strong {
      display: block;
      position: relative;
      right: clamp(-22px, -4.7vw, -14px);
    }

  .mei-hero-title .mei-hero-title-shift {
      right: clamp(8px, 3.6vw, 18px);
    }

  .mei-hero-title strong {
      color: var(--color-accent);
      font: inherit;
      margin: 0 clamp(8px, 2.8vw, 12px) 0 0;
      right: clamp(34px, 12vw, 54px);
    }

  .mei-hero-text {
      max-width: clamp(12rem, 56vw, 14.8rem);
      margin: 0 clamp(56px, 16.5vw, 70px) clamp(15px, 4vw, 19px) 0;
      color: var(--color-text);
      font-size: clamp(0.88rem, 2.55vw, 1rem);
      font-weight: 600;
      line-height: 1.86;
    }

  .mei-hero-actions {
      position: absolute;
      left: clamp(8px, 2.8vw, 12px);
      display: grid;
      gap: clamp(7px, 2.1vw, 9px);
      width: clamp(150px, 44vw, 172px);
      z-index: 9;
    }

  .mei-hero-demo-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: clamp(38px, 10vw, 42px);
      padding: clamp(8px, 2.5vw, 10px) clamp(12px, 3.7vw, 15px);
      gap: clamp(7px, 2.2vw, 9px);
      overflow: hidden;
      color: inherit;
      font-size: clamp(0.82rem, 2.5vw, 0.9rem);
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      text-decoration: none;
      border-radius: var(--btn-radius);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

  .mei-hero-demo-btn:active {
      transform: translateY(1px) scale(0.99);
    }

  .mei-hero-demo-btn-primary {
      color: var(--color-white);
      background:
        linear-gradient(160deg, rgba(var(--rgb-white), 0.18), transparent 34%),
        linear-gradient(135deg, var(--color-accent), #e53040 62%, #c91c2c 100%);
      border: 1px solid rgba(var(--rgb-white), 0.2);
      box-shadow:
        inset 0 1px 0 rgba(var(--rgb-white), 0.28),
        0 16px 30px rgba(var(--rgb-accent), 0.27);
    }

  .mei-hero-demo-btn-primary::after {
      display: none;
    }

  .mei-hero-demo-btn-primary > span,
    .mei-hero-demo-btn-primary .mei-hero-demo-btn-icon {
      position: relative;
      z-index: 1;
    }

  .mei-hero-demo-btn-icon {
      flex: 0 0 auto;
      width: clamp(19px, 5.4vw, 22px);
      height: clamp(19px, 5.4vw, 22px);
      padding: 0;
      color: currentColor;
      background: transparent;
      border-radius: 0;
      box-shadow: none;
      fill: none;
      opacity: 0.96;
      transition: transform 0.2s ease;
    }

  .mei-hero-demo-btn-icon path {
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.8;
    }

  .mei-hero-demo-btn-primary:hover .mei-hero-demo-btn-icon,
    .mei-hero-demo-btn-primary:focus-visible .mei-hero-demo-btn-icon {
      transform: translateY(1px);
    }

  .mei-hero-demo-btn-outline {
      color: var(--color-primary);
      background: rgba(var(--rgb-white), 0.86);
      border: 1.5px solid rgba(var(--rgb-primary), 0.72);
      box-shadow: 0 12px 24px rgba(var(--rgb-primary), 0.08);
    }

  .mei-hero-demo-btn-outline::before {
      font-size: clamp(1.05rem, 3.1vw, 1.2rem);
      content: "‹";
    }

  .mei-hero-art {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

  .mei-hero-blue-shape {
      position: absolute;
      top: clamp(70px, 17vw, 76px);
      right: clamp(-136px, -30vw, -122px);
      z-index: 1;
      width: clamp(340px, 86vw, 380px);
      height: clamp(450px, 111vw, 500px);
      background: linear-gradient(145deg, #0068c9 0%, var(--color-primary) 72%);
      border-radius: 56% 44% 49% 51% / 42% 58% 42% 58%;
      transform: rotate(-8deg) scaleX(0.82);
      box-shadow: 0 30px 55px rgba(var(--rgb-primary), 0.24);
    }

  .mei-hero-globe {
      position: absolute;
      top: -5%;
      right: clamp(-56px, -12vw, -48px);
      z-index: 0;
      width: clamp(168px, 42vw, 190px);
      opacity: 0.58;
      transform: rotate(-11deg);
    }

  .mei-hero-big-ben {
      position: absolute;
      top: clamp(-16px, -3vw, -10px);
      left: clamp(-24px, -5vw, -14px);
      z-index: 0;
      width: clamp(120px, 31vw, 138px);
      opacity: 0.22;
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.78) 52%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.78) 52%, transparent 100%);
    }

  .mei-hero-eiffel {
      position: absolute;
      bottom: clamp(34px, 9vw, 42px);
      left: clamp(-60px, -13vw, -48px);
      z-index: 0;
      width: clamp(146px, 37vw, 160px);
      opacity: 0.2;
      transform: rotate(1deg);
    }

  .mei-hero-soft-dot {
      position: absolute;
      left: clamp(-22px, -5vw, -14px);
      bottom: clamp(66px, 17vw, 76px);
      z-index: 0;
      width: clamp(148px, 40vw, 174px);
      height: clamp(148px, 40vw, 174px);
      background: radial-gradient(circle, rgba(var(--rgb-accent), 0.15), transparent 70%);
      border-radius: 50%;
    }

  .mei-hero-accent-shape {
      position: absolute;
      left: clamp(-32px, -7vw, -22px);
      bottom: clamp(104px, 28vw, 122px);
      z-index: 0;
      width: clamp(128px, 35vw, 152px);
      height: clamp(102px, 28vw, 122px);
      background: radial-gradient(circle at 60% 50%, rgba(var(--rgb-accent), 0.16), transparent 68%);
      border-radius: 62% 38% 54% 46% / 48% 54% 46% 52%;
      transform: rotate(-12deg);
    }

  .mei-hero-connector {
      position: absolute;
      z-index: 2;
      overflow: visible;
      pointer-events: none;
    }

  .mei-hero-connector path {
      fill: none;
      stroke: url(#meiHeroConnectorGradient);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-dasharray: 5 7;
      opacity: 0.62;
    }

  .mei-hero-connector-top {
      top: clamp(34px, 9vw, 42px);
      right: clamp(82px, 24vw, 104px);
      width: clamp(154px, 42vw, 180px);
      transform: rotate(-145deg);
      z-index: 1;
    }

  .mei-hero-connector-bottom {
      right: clamp(168px, 44vw, 198px);
      bottom: clamp(-224px, -28vh, -164px);
      width: clamp(112px, 30vw, 132px);
      transform: rotate(28deg);
      z-index: 12;
    }

  .mei-hero-floating-badge {
      position: absolute;
      z-index: 12;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: clamp(36px, 9.6vw, 40px);
      padding: clamp(8px, 2.3vw, 9px) clamp(11px, 3.2vw, 13px);
      color: var(--color-white);
      font-size: clamp(0.68rem, 2vw, 0.72rem);
      font-weight: 600;
      line-height: 1.35;
      text-align: center;
      background: linear-gradient(135deg, var(--color-primary), #076fcf);
      border-radius: var(--radius-pill);
      box-shadow: 0 16px 30px rgba(var(--rgb-primary), 0.2);
    }

  .mei-hero-floating-badge-bottom {
      right: clamp(218px, 60vw, 260px);
      bottom: clamp(-205px, -26vh, -148px);
      max-width: clamp(118px, 31vw, 130px);
    }

  .mei-hero-student {
      position: absolute;
      top: clamp(-78px, -17vw, -62px);
      right: clamp(-140px, -31vw, -122px);
      z-index: 4;
      width: min(107vw, clamp(470px, 122vw, 527px));
      max-width: none;
      filter: drop-shadow(0 26px 34px rgba(var(--rgb-primary), 0.2));
    }

  .mei-hero-feature-panel {
      position: relative;
      z-index: 10;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      margin-top: clamp(-68px, -14.5vw, -56px);
      padding: clamp(14px, 4.2vw, 18px) clamp(8px, 2.4vw, 10px) clamp(13px, 3.8vw, 16px);
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(var(--rgb-white), 0.96) 0%, rgba(var(--rgb-white), 0.74) 48%, rgba(232, 243, 255, 0.72) 100%),
        radial-gradient(90% 72% at 18% 0%, rgba(var(--rgb-white), 0.72), transparent 62%),
        radial-gradient(80% 80% at 94% 100%, rgba(var(--rgb-primary), 0.1), transparent 66%);
      border: 1px solid rgba(var(--rgb-white), 0.72);
      border-radius: clamp(18px, 5vw, 22px);
      box-shadow:
        inset 0 1px 0 rgba(var(--rgb-white), 0.96),
        inset 0 -1px 0 rgba(var(--rgb-primary), 0.05),
        0 20px 46px rgba(var(--rgb-primary), 0.13),
        0 8px 18px rgba(var(--rgb-white), 0.42);
      backdrop-filter: blur(22px) saturate(160%);
      -webkit-backdrop-filter: blur(22px) saturate(160%);
    }

  .mei-hero-feature-panel::before,
    .mei-hero-feature-panel::after {
      position: absolute;
      inset: 0;
      z-index: 0;
      content: "";
      pointer-events: none;
    }

  .mei-hero-feature-panel::before {
      background:
        linear-gradient(112deg, rgba(var(--rgb-white), 0.64) 0%, rgba(var(--rgb-white), 0.2) 34%, transparent 35% 62%, rgba(var(--rgb-white), 0.3) 100%);
      opacity: 0.68;
    }

  .mei-hero-feature-panel::after {
      inset: 1px;
      border: 1px solid rgba(var(--rgb-primary), 0.05);
      border-radius: inherit;
      box-shadow: inset 0 0 28px rgba(var(--rgb-white), 0.44);
    }

  .mei-hero-feature {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      min-width: 0;
      padding-inline: clamp(6px, 2vw, 8px);
      text-align: center;
    }

  .mei-hero-feature + .mei-hero-feature {
      border-inline-start: 1px solid rgba(var(--rgb-primary), 0.11);
    }

  .mei-hero-feature-icon {
      display: grid;
      width: clamp(38px, 10vw, 42px);
      height: clamp(38px, 10vw, 42px);
      margin-bottom: clamp(7px, 2.2vw, 9px);
      place-items: center;
      color: var(--color-primary);
      background: rgba(var(--rgb-primary), 0.08);
      border-radius: 50%;
    }

  .mei-hero-feature:nth-child(2) .mei-hero-feature-icon {
      color: var(--color-accent);
      background: rgba(var(--rgb-accent), 0.1);
    }

  .mei-hero-feature-icon svg {
      width: clamp(20px, 5.2vw, 22px);
      height: clamp(20px, 5.2vw, 22px);
      stroke: currentColor;
      stroke-width: 1.7;
      fill: none;
    }

  .mei-hero-feature-icon .hero-book-icon,
    .mei-hero-feature-icon .hero-certificate-icon {
      fill: currentColor;
      stroke: none;
    }

  .mei-hero-feature-title {
      display: block;
      margin-bottom: 5px;
      color: var(--color-primary);
      font-size: clamp(0.7rem, 2vw, 0.78rem);
      font-weight: 600;
      line-height: 1.25;
    }

  .mei-hero-feature-desc {
      display: block;
      color: var(--color-neutral);
      font-size: clamp(0.58rem, 1.75vw, 0.64rem);
      font-weight: 600;
      line-height: 1.55;
    }

  .mei-hero-trust {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: clamp(30px, 8vw, 33px);
      margin: clamp(10px, 3.4vw, 14px) auto 0;
      padding: clamp(6px, 1.8vw, 7px) clamp(11px, 3.4vw, 14px);
      gap: clamp(6px, 1.8vw, 7px);
      color: var(--color-primary);
      font-size: clamp(0.68rem, 2vw, 0.75rem);
      font-weight: 600;
      background: rgba(var(--rgb-primary), 0.06);
      border-radius: var(--radius-pill);
    }

  .mei-hero-trust svg {
      width: clamp(15px, 4.4vw, 17px);
      height: clamp(15px, 4.4vw, 17px);
      stroke: currentColor;
      stroke-width: 1.8;
      fill: none;
    }

  .mei-mobile-hero.is-ready .mei-hero-copy,
    .mei-mobile-hero.is-ready .mei-hero-student,
    .mei-mobile-hero.is-ready .mei-hero-feature-panel,
    .mei-mobile-hero.is-ready .mei-hero-trust {
      animation: meiHeroRise 0.58s ease both;
    }

  .mei-mobile-hero.is-ready .mei-hero-student { animation-delay: 0.06s; }

  .mei-mobile-hero.is-ready .mei-hero-feature-panel { animation-delay: 0.12s; }

  .mei-mobile-hero.is-ready .mei-hero-trust { animation-delay: 0.18s; }

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

@media (max-width: 400px) {
  .mei-hero-phone {
      padding-inline: clamp(12px, 3.7vw, 16px);
    }

  .mei-hero-scene {
      min-height: clamp(510px, 140vw, 548px);
    }

  .mei-hero-copy {
      width: min(62%, 212px);
    }

  .mei-hero-chip {
      min-height: clamp(30px, 8.4vw, 32px);
      margin-bottom: clamp(11px, 3.6vw, 14px);
      padding: clamp(6px, 1.8vw, 7px) clamp(10px, 3vw, 11px);
      font-size: clamp(0.66rem, 2vw, 0.7rem);
    }

  .mei-hero-title {
      font-size: clamp(1.58rem, 7vw, 1.82rem);
      margin-bottom: clamp(10px, 3.6vw, 15px);
      line-height: 1.14;
    }

  .mei-hero-title span,
    .mei-hero-title strong {
      right: clamp(-18px, -4vw, -10px);
    }

  .mei-hero-title .mei-hero-title-shift {
      right: clamp(6px, 3.5vw, 15px);
    }

  .mei-hero-title strong {
      right: clamp(30px, 11vw, 50px);
    }

  .mei-hero-text {
      max-width: clamp(11.2rem, 61vw, 14.4rem);
      margin: 0 clamp(48px, 17vw, 68px) clamp(14px, 3.6vw, 17px) 0;
      font-size: clamp(0.84rem, 2.45vw, 0.98rem);
      line-height: 1.8;
    }

  .mei-hero-actions {
      left: clamp(6px, 2.4vw, 10px);
      width: clamp(142px, 46vw, 170px);
      gap: clamp(6px, 1.9vw, 8px);
    }

  .mei-hero-demo-btn {
      min-height: clamp(36px, 9.8vw, 40px);
      padding: clamp(8px, 2.4vw, 9px) clamp(10px, 3.2vw, 12px);
      font-size: clamp(0.77rem, 2.42vw, 0.84rem);
    }

  .mei-hero-student {
      top: clamp(-73px, -17vw, -58px);
      right: clamp(-132px, -31vw, -112px);
      width: min(109vw, 500px);
    }

  .mei-hero-blue-shape {
      top: clamp(72px, 21vw, 84px);
      right: clamp(-132px, -33vw, -112px);
      width: clamp(310px, 88vw, 360px);
      height: clamp(422px, 118vw, 478px);
    }

  .mei-hero-globe {
      right: clamp(-55px, -13vw, -42px);
      width: clamp(148px, 43vw, 180px);
    }

  .mei-hero-big-ben {
      width: clamp(104px, 31vw, 132px);
    }

  .mei-hero-eiffel {
      left: clamp(-58px, -14vw, -42px);
      width: clamp(128px, 37vw, 154px);
    }

  .mei-hero-connector-top {
      right: clamp(74px, 25vw, 100px);
      width: clamp(146px, 43vw, 176px);
    }

  .mei-hero-connector-bottom {
      right: clamp(150px, 43vw, 188px);
      bottom: clamp(-214px, -27vh, -154px);
      width: clamp(108px, 30vw, 128px);
    }

  .mei-hero-floating-badge-bottom {
      right: clamp(178px, 57vw, 260px);
      bottom: clamp(-192px, -25vh, -136px);
      max-width: clamp(112px, 31vw, 130px);
    }

  .mei-hero-feature-panel {
      margin-top: clamp(-62px, -15vw, -48px);
      padding: clamp(13px, 4vw, 16px) 6px clamp(12px, 3.5vw, 14px);
      border-radius: clamp(17px, 5vw, 20px);
    }

  .mei-hero-feature {
      padding-inline: clamp(5px, 1.8vw, 6px);
    }

  .mei-hero-feature-icon {
      width: clamp(35px, 9.8vw, 38px);
      height: clamp(35px, 9.8vw, 38px);
    }

  .mei-hero-feature-title {
      font-size: clamp(0.66rem, 2vw, 0.78rem);
    }

  .mei-hero-feature-desc {
      font-size: clamp(0.56rem, 1.75vw, 0.64rem);
    }
}

@media (max-width: 380px) {
  .mei-hero-phone {
      padding-inline: clamp(12px, 3.8vw, 14px);
    }

  .mei-hero-scene {
      min-height: clamp(520px, 142vw, 552px);
    }

  .mei-hero-title {
      font-size: clamp(1.56rem, 7.3vw, 1.78rem);
      margin-bottom: clamp(10px, 3.4vw, 14px);
    }

  .mei-hero-copy {
      width: min(60%, 218px);
    }

  .mei-hero-text {
      max-width: clamp(11.8rem, 58vw, 14.2rem);
      margin: 0 clamp(50px, 18vw, 70px) clamp(14px, 3.8vw, 18px) 0;
      font-size: clamp(0.86rem, 2.65vw, 0.98rem);
      font-weight: 600;
      line-height: 1.82;
    }

  .mei-hero-student {
      top: clamp(-72px, -17vw, -58px);
      right: clamp(-132px, -31vw, -112px);
      width: min(107vw, clamp(430px, 122vw, 500px));
    }

  .mei-hero-blue-shape {
      top: clamp(76px, 21vw, 84px);
      right: clamp(-132px, -33vw, -112px);
      width: clamp(310px, 88vw, 348px);
      height: clamp(422px, 118vw, 464px);
    }

  .mei-hero-globe {
      top: -5%;
      right: clamp(-55px, -13vw, -42px);
      width: clamp(148px, 43vw, 180px);
      opacity: 0.58;
    }

  .mei-hero-big-ben {
      left: clamp(-24px, -6vw, -16px);
      width: clamp(108px, 32vw, 126px);
    }

  .mei-hero-eiffel {
      bottom: clamp(38px, 11vw, 46px);
      left: clamp(-58px, -15vw, -44px);
      width: clamp(132px, 38vw, 150px);
    }

  .mei-hero-connector-top {
      top: clamp(34px, 10vw, 40px);
      right: clamp(74px, 25vw, 100px);
      width: clamp(146px, 43vw, 176px);
      transform: rotate(-145deg);
      z-index: 1;
    }

  .mei-hero-connector-bottom {
      right: clamp(142px, 41vw, 166px);
      bottom: clamp(-206px, -27vh, -146px);
      width: clamp(102px, 30vw, 122px);
      transform: rotate(28deg);
      z-index: 12;
    }

  .mei-hero-floating-badge-bottom {
      right: clamp(188px, 58vw, 220px);
      bottom: clamp(-190px, -25vh, -136px);
      max-width: clamp(110px, 31vw, 120px);
    }

  .mei-hero-feature-panel {
      padding-inline: 6px;
    }

  .mei-hero-feature-title {
      font-size: clamp(0.66rem, 2vw, 0.72rem);
    }

  .mei-hero-feature-desc {
      font-size: clamp(0.54rem, 1.75vw, 0.6rem);
    }
}

@media (max-width: 360px) {
  .mei-hero-phone {
      padding-inline: 10px;
    }

  .mei-hero-scene {
      min-height: clamp(486px, 140vw, 510px);
    }

  .mei-hero-copy {
      width: min(64%, 202px);
    }

  .mei-hero-title {
      font-size: clamp(1.44rem, 7.2vw, 1.58rem);
      line-height: 1.15;
    }

  .mei-hero-title span,
    .mei-hero-title strong {
      right: clamp(-15px, -3.8vw, -9px);
    }

  .mei-hero-title .mei-hero-title-shift {
      right: clamp(4px, 2.8vw, 10px);
    }

  .mei-hero-title strong {
      right: clamp(24px, 9vw, 36px);
    }

  .mei-hero-text {
      max-width: clamp(10.4rem, 59vw, 12.4rem);
      margin-right: clamp(40px, 13vw, 48px);
      font-size: clamp(0.78rem, 2.65vw, 0.84rem);
      line-height: 1.76;
    }

  .mei-hero-actions {
      left: clamp(5px, 2vw, 8px);
      width: clamp(136px, 45vw, 154px);
      gap: clamp(5px, 1.8vw, 6px);
    }

  .mei-hero-demo-btn {
      min-height: clamp(34px, 9.6vw, 38px);
      padding-inline: clamp(9px, 3vw, 11px);
      font-size: clamp(0.75rem, 2.48vw, 0.8rem);
    }

  .mei-hero-demo-btn-icon {
      width: clamp(18px, 5.4vw, 21px);
      height: clamp(18px, 5.4vw, 21px);
      padding: 0;
    }

  .mei-hero-student {
      top: clamp(-60px, -16vw, -50px);
      right: clamp(-112px, -31vw, -98px);
      width: min(108vw, clamp(380px, 116vw, 420px));
    }

  .mei-hero-blue-shape {
      right: clamp(-112px, -32vw, -98px);
      width: clamp(292px, 88vw, 310px);
      height: clamp(390px, 116vw, 416px);
    }

  .mei-hero-connector-bottom {
      right: clamp(122px, 38vw, 146px);
      bottom: clamp(-186px, -25vh, -130px);
      width: clamp(94px, 29vw, 112px);
    }

  .mei-hero-floating-badge-bottom {
      right: clamp(154px, 48vw, 170px);
      bottom: clamp(-178px, -23vh, -126px);
      max-width: clamp(100px, 31vw, 108px);
    }
}

@media (max-height: 760px) and (max-width: 430px) {
  .mei-hero-phone {
      padding-block: clamp(10px, 1.85vh, 14px) clamp(14px, 2.4vh, 18px);
    }

  .mei-hero-scene {
      min-height: clamp(456px, 68vh, 512px);
    }

  .mei-hero-chip {
      margin-bottom: clamp(8px, 1.4vh, 10px);
    }

  .mei-hero-title {
      margin-bottom: clamp(8px, 1.3vh, 10px);
      font-size: clamp(1.48rem, 6.4vw, 1.72rem);
    }

  .mei-hero-title span,
    .mei-hero-title strong {
      right: clamp(-18px, -3.7vw, -10px);
    }

  .mei-hero-title .mei-hero-title-shift {
      right: clamp(5px, 2.8vw, 13px);
    }

  .mei-hero-title strong {
      right: clamp(26px, 9vw, 44px);
    }

  .mei-hero-text {
      max-width: clamp(10.8rem, 56vw, 13.2rem);
      margin-right: clamp(44px, 15vw, 62px);
      margin-bottom: clamp(9px, 1.7vh, 13px);
      font-size: clamp(0.78rem, 2.2vw, 0.9rem);
      line-height: 1.68;
    }

  .mei-hero-actions {
      width: clamp(136px, 42vw, 160px);
      gap: clamp(5px, 1.1vh, 7px);
    }

  .mei-hero-demo-btn {
      min-height: clamp(34px, 5vh, 37px);
      padding-block: clamp(7px, 1.1vh, 8px);
      font-size: clamp(0.75rem, 2.2vw, 0.81rem);
    }

  .mei-hero-student {
      top: clamp(-62px, -8vh, -48px);
      width: min(104vw, clamp(410px, 59vh, 450px));
    }

  .mei-hero-feature-panel {
      margin-top: clamp(-130px, -17vh, -86px);
      padding-block: clamp(11px, 1.8vh, 14px) clamp(10px, 1.6vh, 12px);
    }

  .mei-hero-connector-bottom {
      right: clamp(118px, 37vw, 140px);
      bottom: clamp(-170px, -22vh, -120px);
      width: clamp(90px, 28vw, 108px);
    }

  .mei-hero-floating-badge-bottom {
      bottom: clamp(-154px, -21vh, -112px);
    }

  .mei-hero-trust {
      margin-top: clamp(7px, 1.3vh, 10px);
    }
}

@media (max-width: 640px) {
  .mei-hero-title {
      direction: rtl;
    }

  .mei-hero-title span,
    .mei-hero-title strong {
      display: inline-block;
      justify-self: start;
      width: max-content;
      max-width: 0;
      overflow: hidden;
      padding-inline-end: 0.04em;
      white-space: nowrap;
      border-inline-end: 0.08em solid currentColor;
      opacity: 0;
    }

  .mei-mobile-hero.is-ready .mei-hero-title span,
    .mei-mobile-hero.is-ready .mei-hero-title strong {
      animation: meiHeroTitleTypewriter var(--mei-title-type-duration, 0.8s) steps(var(--mei-title-type-steps, 10), end) var(--mei-title-type-delay, 0s) forwards;
    }

  .mei-hero-title span:first-child {
      --mei-title-type-width: 8.5em;
      --mei-title-type-steps: 12;
      --mei-title-type-duration: 0.9s;
    }

  .mei-hero-title .mei-hero-title-shift {
      --mei-title-type-width: 9.5em;
      --mei-title-type-steps: 14;
      --mei-title-type-delay: 0.92s;
      --mei-title-type-duration: 1.05s;
    }

  .mei-hero-title strong {
      --mei-title-type-width: 3.2em;
      --mei-title-type-steps: 5;
      --mei-title-type-delay: 1.98s;
      --mei-title-type-duration: 0.58s;
    }

  @keyframes meiHeroTitleTypewriter {
      0% {
        max-width: 0;
        opacity: 1;
        border-inline-end-color: currentColor;
      }

      92% {
        border-inline-end-color: currentColor;
      }

      100% {
        max-width: var(--mei-title-type-width);
        opacity: 1;
        border-inline-end-color: transparent;
      }
    }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .mei-hero-title span,
    .mei-hero-title strong {
      max-width: none;
      border-inline-end-color: transparent;
      opacity: 1;
      animation: none;
    }
}

@media (max-width: 640px) {
  .mei-hero-floating-badge-bottom,
    .mei-hero-connector-top,
    .mei-hero-connector-bottom {
      opacity: 0;
      will-change: opacity, transform;
    }

  .mei-hero-floating-badge-bottom {
      transform: translateY(14px) scale(0.92);
      transition: opacity 0.52s ease, transform 0.52s cubic-bezier(0.2, 0.9, 0.2, 1.15);
    }

  .mei-mobile-hero.is-ready .mei-hero-floating-badge-bottom,
    .mei-hero-floating-badge-bottom.is-in-view {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

  .mei-hero-connector-top {
      transform: rotate(-145deg) translateY(14px) scale(0.96);
      transition: opacity 0.58s ease 0.08s, transform 0.58s ease 0.08s;
    }

  .mei-hero-connector-bottom {
      transform: rotate(28deg) translateY(14px) scale(0.96);
      transition: opacity 0.58s ease 0.08s, transform 0.58s ease 0.08s;
    }

  .mei-hero-connector-top path,
    .mei-hero-connector-bottom path {
      stroke-dashoffset: 24;
      transition: stroke-dashoffset 0.85s ease 0.14s;
    }

  .mei-hero-connector-top.is-in-view {
      opacity: 1;
      transform: rotate(-145deg) translateY(0) scale(1);
    }

  .mei-hero-connector-bottom.is-in-view {
      opacity: 1;
      transform: rotate(28deg) translateY(0) scale(1);
    }

  .mei-hero-connector-top.is-in-view path,
    .mei-hero-connector-bottom.is-in-view path {
      stroke-dashoffset: 0;
    }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .mei-hero-floating-badge-bottom,
    .mei-hero-connector-top,
    .mei-hero-connector-bottom {
      opacity: 1;
      transform: none;
      transition: none;
    }

  .mei-hero-connector-top,
    .mei-hero-connector-top.is-in-view {
      transform: rotate(-145deg);
    }

  .mei-hero-connector-bottom,
    .mei-hero-connector-bottom.is-in-view {
      transform: rotate(28deg);
    }

  .mei-hero-connector-top path,
    .mei-hero-connector-bottom path {
      stroke-dashoffset: 0;
      transition: none;
    }
}

@media (max-width: 640px) {
  .mei-hero-globe {
      --hero-globe-final-opacity: 0.58;
      opacity: 0;
      filter: blur(8px) brightness(1.06) saturate(0.92);
      will-change: opacity, filter;
    }

  .mei-mobile-hero.is-ready .mei-hero-globe {
      animation: heroGlobeSoftReveal 0.82s ease 0.22s forwards;
    }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .mei-hero-globe,
    .mei-mobile-hero.is-ready .mei-hero-globe {
      opacity: var(--hero-globe-final-opacity, 0.58);
      filter: none;
      animation: none;
    }
}

@media (min-width: 641px) and (max-width: 1100px) {
  .hero-features {
      grid-template-columns: 1fr;
      max-width: min(108%, 820px);
      gap: 14px;
    }

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

  .hero-feature-cards {
      grid-template-columns: repeat(2, max-content);
      justify-content: center;
      align-items: stretch;
      width: auto;
      max-width: 100%;
      margin-inline: auto;
      gap: clamp(10px, 1.7vw, 14px);
    }

  .hero-feature-cards .hero-feature:nth-child(3) {
      grid-column: 1 / -1;
      justify-self: center;
    }

  .hero-feature {
      grid-template-columns: 40px max-content;
      justify-items: initial;
      width: max-content;
      max-width: 100%;
      min-height: 68px;
      padding: 12px clamp(10px, 1.4vw, 14px);
      gap: 10px;
      text-align: start;
    }

  .hero-feature-icon {
      width: 40px;
      height: 40px;
    }

  .hero-feature-icon svg {
      width: 34px;
      height: 34px;
    }

  .hero-feature-stats {
      max-width: min(100%, 500px);
      padding: 4px clamp(8px, 1.8vw, 14px);
    }

  .hero-feature-stat {
      gap: 3px;
      min-height: 30px;
      padding-inline: 8px;
    }

  .hero-feature-stat + .hero-feature-stat {
      border-inline-start: 0;
    }

  .hero-feature-stat:nth-child(even) {
      border-inline-start: 1px solid rgba(var(--rgb-primary), 0.14);
    }

  .hero-feature-stat:nth-child(-n + 2) {
      padding-bottom: 9px;
      border-bottom: 1px solid rgba(var(--rgb-primary), 0.1);
    }

  .hero-feature-stat:nth-child(n + 3) {
      padding-top: 9px;
    }

}

@media (min-width: 981px) and (max-width: 1100px) {
  .hero-landmark-great-wall {
      width: min(21vw, 168px);
    }
}

@media (min-width: 641px) and (max-width: 980px) {
  .hero-landmark-great-wall {
      inset: auto 20% -3% auto;
      width: min(22vw, 145px);
      opacity: 0.18;
    }
}

@media (max-width: 640px) {
  .mei-hero-great-wall {
      position: absolute;
      right: clamp(118px, 34.7vw, 149px);
      bottom: clamp(10px, 3.4vw, 14px);
      z-index: 0;
      width: clamp(118px, 32vw, 146px);
      height: auto;
      opacity: 0.32;
      filter: saturate(0.96) opacity(0.88);
      transform: rotate(-6deg);
      pointer-events: none;
      user-select: none;
    }
}

@media (max-width: 400px) {
  .mei-hero-great-wall {
      right: clamp(112px, 34.7vw, 137px);
      bottom: clamp(8px, 3.2vw, 13px);
      width: clamp(110px, 32vw, 136px);
    }
}

@media (max-width: 380px) {
  .mei-hero-great-wall {
      right: clamp(106px, 34.7vw, 132px);
      bottom: clamp(7px, 3vw, 12px);
      width: clamp(104px, 32vw, 126px);
      opacity: 0.28;
    }
}

@media (max-width: 640px) {
  .mei-hero-great-wall {
      --mei-great-wall-final-opacity: 0.32;
      opacity: 0;
      filter: blur(6px) saturate(0.96) opacity(0.72);
      transform: rotate(-6deg) translateY(12px) scale(0.96);
      transform-origin: 50% 86%;
      will-change: opacity, filter, transform;
    }

  .mei-mobile-hero.is-ready .mei-hero-great-wall {
      animation: meiGreatWallReveal 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.32s forwards;
    }
}

@media (max-width: 380px) {
  .mei-hero-great-wall {
      --mei-great-wall-final-opacity: 0.28;
    }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .mei-hero-great-wall,
    .mei-mobile-hero.is-ready .mei-hero-great-wall {
      opacity: var(--mei-great-wall-final-opacity, 0.32);
      filter: saturate(0.96) opacity(0.88);
      transform: rotate(-6deg);
      animation: none;
    }
}

@media (max-width: 640px) {
  .mei-hero-big-ben,
    .mei-hero-eiffel,
    .mei-hero-great-wall {
      opacity: 0;
      filter: blur(6px) saturate(0.96) opacity(0.72);
      transform: var(--mei-landmark-start-transform, translateY(12px) scale(0.96));
      transform-origin: 50% 86%;
      will-change: opacity, filter, transform;
    }

  .mei-hero-big-ben {
      --mei-landmark-final-opacity: 0.22;
      --mei-landmark-final-filter: none;
      --mei-landmark-start-transform: translateY(12px) scale(0.96);
      --mei-landmark-peak-transform: translateY(-2px) scale(1.01);
      --mei-landmark-final-transform: translateY(0) scale(1);
    }

  .mei-hero-eiffel {
      --mei-landmark-final-opacity: 0.2;
      --mei-landmark-final-filter: none;
      --mei-landmark-start-transform: rotate(1deg) translateY(12px) scale(0.96);
      --mei-landmark-peak-transform: rotate(1deg) translateY(-2px) scale(1.01);
      --mei-landmark-final-transform: rotate(1deg) translateY(0) scale(1);
    }

  .mei-hero-great-wall {
      --mei-landmark-final-opacity: 0.32;
      --mei-landmark-final-filter: saturate(0.96) opacity(0.88);
      --mei-landmark-start-transform: rotate(-6deg) translateY(12px) scale(0.96);
      --mei-landmark-peak-transform: rotate(-6deg) translateY(-2px) scale(1.01);
      --mei-landmark-final-transform: rotate(-6deg) translateY(0) scale(1);
    }

  .mei-mobile-hero.is-ready .mei-hero-big-ben {
      animation: meiLandmarkSoftReveal 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.22s forwards;
    }

  .mei-mobile-hero.is-ready .mei-hero-eiffel {
      animation: meiLandmarkSoftReveal 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards;
    }

  .mei-mobile-hero.is-ready .mei-hero-great-wall {
      animation: meiLandmarkSoftReveal 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.32s forwards;
    }

  @keyframes meiLandmarkSoftReveal {
      0% {
        opacity: 0;
        filter: blur(6px) saturate(0.96) opacity(0.72);
        transform: var(--mei-landmark-start-transform, translateY(12px) scale(0.96));
      }

      62% {
        opacity: var(--mei-landmark-final-opacity);
        filter: blur(1.5px) saturate(1.02) opacity(0.86);
        transform: var(--mei-landmark-peak-transform, translateY(-2px) scale(1.01));
      }

      100% {
        opacity: var(--mei-landmark-final-opacity);
        filter: var(--mei-landmark-final-filter, none);
        transform: var(--mei-landmark-final-transform, translateY(0) scale(1));
      }
    }
}

@media (max-width: 380px) {
  .mei-hero-great-wall {
      --mei-landmark-final-opacity: 0.28;
    }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .mei-hero-big-ben,
    .mei-mobile-hero.is-ready .mei-hero-big-ben,
    .mei-hero-eiffel,
    .mei-mobile-hero.is-ready .mei-hero-eiffel,
    .mei-hero-great-wall,
    .mei-mobile-hero.is-ready .mei-hero-great-wall {
      opacity: var(--mei-landmark-final-opacity);
      filter: var(--mei-landmark-final-filter, none);
      transform: var(--mei-landmark-final-transform, translateY(0) scale(1));
      animation: none;
    }
}

@media (min-width: 981px) and (max-width: 1280px) {
  .hero-feature-cards {
      grid-template-columns: repeat(2, max-content);
      justify-content: center;
      max-width: 100%;
      gap: clamp(10px, 1.4vw, 16px);
    }

  .hero-feature-cards .hero-feature:nth-child(3) {
      grid-column: 1 / -1;
      justify-self: center;
    }

  .hero-feature {
      grid-template-columns: clamp(38px, 3.2vw, 42px) max-content;
      width: max-content;
      min-height: 64px;
      padding: 12px clamp(12px, 1.25vw, 15px);
    }

  .hero-feature-icon {
      width: clamp(38px, 3.2vw, 42px);
      height: clamp(38px, 3.2vw, 42px);
    }

  .hero-feature-icon svg {
      width: clamp(27px, 2.35vw, 30px);
      height: clamp(27px, 2.35vw, 30px);
    }
}

@media (min-width: 641px) {
  .hero-switcher,
    .hero-desktop,
    .hero-desktop .container,
    .hero-desktop .hero-grid,
    .hero-desktop .hero-visual {
      overflow: visible;
    }

  .hero-desktop .hero-badge-connector-bottom {
      inset: auto auto 15% 4%;
      z-index: -1;
      width: clamp(210px, 22vw, 260px);
      opacity: 0;
      transform: rotate(-12deg) translateY(14px) scale(0.96);
      transform-origin: 76% 28%;
    }

  .hero-desktop .hero-badge-connector-bottom.is-in-view {
      opacity: 0.88;
      transform: rotate(-12deg) translateY(0) scale(1);
    }

  .hero-desktop .hero-badge-connector-bottom path {
      stroke-width: 1.9;
      stroke-dasharray: 5 8;
      opacity: 0.72;
    }
}

@media (max-width: 1180px) and (min-width: 641px) {
  .hero-journey-indicator {
      inset: auto auto -9% -6%;
      width: clamp(70px, 7.2vw, 92px);
    }
}

@media (max-width: 980px) and (min-width: 641px) {
  .hero-journey-indicator {
      inset: auto auto -7% -4%;
      width: clamp(64px, 8vw, 82px);
    }
}

@media (max-width: 760px) and (min-width: 641px) {
  .hero-journey-indicator {
      inset: auto auto -4% -2%;
      width: clamp(58px, 8.8vw, 72px);
    }
}

@media (max-width: 640px) {
  .hero-journey-indicator {
      display: none;
    }

  .mei-hero-journey-indicator {
      display: grid;
      left: clamp(41px, 8.2vw, 59px);
      bottom: clamp(-260px, -62vw, -185px);
      width: clamp(54px, 15.8vw, 66px);
      transform: rotate(-20deg) translateY(16px) scale(0.9);
      transform-origin: center 18%;
    }

  .mei-hero-journey-indicator.is-in-view {
      opacity: 1;
      pointer-events: auto;
      transform: rotate(-20deg) translateY(0) scale(1);
    }

  .mei-hero-journey-indicator:hover,
    .mei-hero-journey-indicator:focus-visible {
      transform: rotate(-20deg) translateY(-2px) scale(1.03);
    }
}

@media (max-width: 430px) {
  .mei-hero-journey-indicator {
      left: clamp(41px, 8.2vw, 59px);
      bottom: clamp(-260px, -62vw, -185px);
      width: clamp(54px, 15.8vw, 66px);
    }
}

@media (max-width: 400px) {
  .mei-hero-journey-indicator {
      left: clamp(38px, 8vw, 54px);
      bottom: clamp(-250px, -61vw, -178px);
      width: clamp(52px, 15.5vw, 62px);
    }
}

@media (max-width: 380px) {
  .mei-hero-journey-indicator {
      left: clamp(35px, 7.8vw, 50px);
      bottom: clamp(-238px, -60vw, -170px);
      width: clamp(50px, 15.2vw, 60px);
    }
}

@media (max-width: 360px) {
  .mei-hero-journey-indicator {
      left: clamp(32px, 7.5vw, 46px);
      bottom: clamp(-226px, -59vw, -164px);
      width: clamp(48px, 15vw, 56px);
    }
}

@media (max-height: 760px) and (max-width: 430px) {
  .mei-hero-journey-indicator {
      width: clamp(50px, 8.6vh, 62px);
    }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .mei-hero-journey-indicator,
    .mei-hero-journey-indicator.is-in-view {
      transform: rotate(-20deg);
    }
}

.hero-desktop .hero-journey-indicator.is-in-view,
.mei-mobile-hero .mei-hero-journey-indicator.is-in-view {
  --journey-indicator-rotate: 0deg;
  --journey-indicator-hidden-y: 26px;
  --journey-indicator-delay: 2.36s;
  opacity: 0;
  pointer-events: none;
  filter: blur(8px) drop-shadow(0 16px 24px rgba(var(--rgb-primary), 0.08));
  transform: rotate(var(--journey-indicator-rotate)) translateY(var(--journey-indicator-hidden-y)) scale(0.84);
  transition:
    opacity 0.72s ease var(--journey-indicator-delay),
    transform 0.86s cubic-bezier(0.18, 0.9, 0.2, 1.12) var(--journey-indicator-delay),
    filter 0.72s ease var(--journey-indicator-delay);
}

.hero-desktop.is-ready .hero-journey-indicator.is-in-view,
.mei-mobile-hero.is-ready .mei-hero-journey-indicator.is-in-view {
  opacity: 1;
  pointer-events: auto;
  filter: drop-shadow(0 16px 26px rgba(var(--rgb-primary), 0.18));
  transform: rotate(var(--journey-indicator-rotate)) translateY(0) scale(1);
}

.hero-desktop.is-ready .hero-journey-indicator.is-in-view img,
.mei-mobile-hero.is-ready .mei-hero-journey-indicator.is-in-view img {
  animation: journeyIndicatorFloat 2.85s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

@media (max-width: 640px) {
  .mei-mobile-hero .mei-hero-journey-indicator.is-in-view {
      --journey-indicator-rotate: -20deg;
      --journey-indicator-hidden-y: 18px;
      --journey-indicator-delay: 1.22s;
    }

  .mei-mobile-hero.is-ready .mei-hero-journey-indicator.is-in-view img {
      animation-duration: 3.15s;
    }
}

@media (prefers-reduced-motion: reduce) {
  .hero-desktop .hero-journey-indicator.is-in-view,
    .hero-desktop.is-ready .hero-journey-indicator.is-in-view,
    .mei-mobile-hero .mei-hero-journey-indicator.is-in-view,
    .mei-mobile-hero.is-ready .mei-hero-journey-indicator.is-in-view {
      opacity: 1;
      pointer-events: auto;
      filter: none;
      transform: rotate(var(--journey-indicator-rotate)) translateY(0) scale(1);
      transition: none;
    }

  .hero-desktop.is-ready .hero-journey-indicator.is-in-view img,
    .mei-mobile-hero.is-ready .mei-hero-journey-indicator.is-in-view img {
      animation: none;
      transform: none;
    }
}

.hero-desktop.is-ready .hero-badge-connector-bottom,
.hero-desktop.is-ready .hero-badge-connector-bottom.is-in-view {
  --connector-bottom-rotate: -12deg;
  --connector-bottom-opacity: 0.88;
  opacity: 0;
  animation: heroConnectorBottomNaturalIn 0.72s cubic-bezier(0.18, 0.82, 0.22, 1) 0.46s forwards;
}

.hero-desktop.is-ready .hero-badge-connector-bottom path {
  stroke-dashoffset: -42;
  animation: heroConnectorBottomPathDown 1.05s ease-out 0.5s forwards;
}

@media (max-width: 640px) {
  .mei-mobile-hero.is-ready .mei-hero-connector-bottom,
    .mei-mobile-hero.is-ready .mei-hero-connector-bottom.is-in-view {
      --connector-bottom-rotate: 28deg;
      --connector-bottom-opacity: 1;
      opacity: 0;
      animation: heroConnectorBottomNaturalIn 0.7s cubic-bezier(0.18, 0.82, 0.22, 1) 0.36s forwards;
    }

  .mei-mobile-hero.is-ready .mei-hero-connector-bottom path {
      stroke-dashoffset: -42;
      animation: heroConnectorBottomPathDown 0.95s ease-out 0.42s forwards;
    }
}

@media (prefers-reduced-motion: reduce) {
  .hero-desktop.is-ready .hero-badge-connector-bottom,
    .hero-desktop.is-ready .hero-badge-connector-bottom.is-in-view,
    .mei-mobile-hero.is-ready .mei-hero-connector-bottom,
    .mei-mobile-hero.is-ready .mei-hero-connector-bottom.is-in-view {
      opacity: var(--connector-bottom-opacity, 1);
      animation: none;
    }

  .hero-desktop.is-ready .hero-badge-connector-bottom path,
    .mei-mobile-hero.is-ready .mei-hero-connector-bottom path {
      stroke-dashoffset: 0;
      animation: none;
    }
}

@keyframes heroConnectorBottomNaturalIn {
  from {
    opacity: 0;
    transform: rotate(var(--connector-bottom-rotate, -8deg)) translateY(-16px) scale(0.94);
  }

  to {
    opacity: var(--connector-bottom-opacity, 1);
    transform: rotate(var(--connector-bottom-rotate, -8deg)) translateY(0) scale(1);
  }
}

@keyframes heroConnectorBottomPathDown {
  from {
    stroke-dashoffset: -42;
  }

  to {
    stroke-dashoffset: 0;
  }
}


/* desktop demo button icon parity */

@media (min-width: 641px) {
  .mei-hero-demo-btn-primary .mei-hero-demo-btn-icon {
    flex: 0 0 auto;
    order: -1;
    width: clamp(22px, 1.65vw, 24px);
    height: clamp(22px, 1.65vw, 24px);
    padding: 4px;
    color: var(--color-accent);
    background: var(--color-white);
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgba(var(--rgb-accent), 0.08);
    fill: none;
    opacity: 1;
    transition: transform 0.2s ease;
  }

  .mei-hero-demo-btn-primary .mei-hero-demo-btn-icon path {
    stroke-width: 2.4;
  }
}


/* mei hero outline button parity */
.mei-hero-demo-btn-outline {
  color: var(--color-primary);
  background: rgba(var(--rgb-white), 0.86);
  border: 1.5px solid rgba(var(--rgb-primary), 0.72);
  box-shadow: 0 12px 24px rgba(var(--rgb-primary), 0.08), inset 0 1px 0 rgba(var(--rgb-white), 0.92);
}

.mei-hero-demo-btn-outline::before {
  display: none;
  content: "";
}

.mei-hero-demo-btn-outline .hero-outline-arrow {
  flex: 0 0 auto;
  width: clamp(16px, 4.6vw, 20px);
  height: clamp(16px, 4.6vw, 20px);
  color: currentColor;
  transition: transform 0.2s ease;
}

.mei-hero-demo-btn-outline .hero-outline-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.mei-hero-demo-btn-outline:hover,
.mei-hero-demo-btn-outline:focus-visible {
  color: var(--color-primary-dark);
  background: rgba(var(--rgb-white), 0.96);
  border-color: var(--color-primary-dark);
  box-shadow: 0 14px 28px rgba(var(--rgb-primary), 0.12), inset 0 1px 0 rgba(var(--rgb-white), 0.94);
}

.mei-hero-demo-btn-outline:hover .hero-outline-arrow,
.mei-hero-demo-btn-outline:focus-visible .hero-outline-arrow {
  transform: translateX(-2px);
}