:root{
  --bg: #0B0B10;
  --bg2:#0E0E16;
  --paper:#F5F2EA;
  --paper2:#EFEADF;

  --text:#0D0D12;
  --muted:#5A5A66;

  --white:#ffffff;
  --soft:#151521;

  --accent:#FFCE2E;
  --accent2:#FF6B6B;

  --border: rgba(255,255,255,0.12);
  --shadow: 0 18px 50px rgba(0,0,0,0.35);
  --radius: 22px;
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; overflow-x: hidden; }
body{
  font-family: Inter, "Noto Sans Sinhala", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--paper);
  line-height: 1.5;
}

a{ color: inherit; text-decoration:none; }
img{ max-width:100%; height:auto; }

.container{
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
}

.container-mhWork {
  margin: 0 auto;
}

@media (min-width: 980px) {
  .container-mhWork {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
  }
}

/* NAV */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245,242,234,0.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.brand__dot{
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(255,206,46,0.16);
}
.brand__text{ font-size: 18px; }
.brand__sub{
  font-size: 12px;
  font-weight: 800;
  opacity: 0.65;
}

.nav__links{
  display:flex;
  gap: 18px;
  font-weight: 600;
  opacity: 0.85;
}
.nav__links a{
  padding: 8px 10px;
  border-radius: 12px;
}
.nav__links a:hover{
  background: rgba(0,0,0,0.05);
}

.nav__actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, opacity .12s ease;
  white-space: nowrap;
}
.btn:active{ transform: scale(0.98); }
.btn--primary{
  background: var(--bg);
  color: var(--white);
  border-color: rgba(255,255,255,0.14);
}
.btn--primary:hover{ opacity: 0.92; }
.btn--ghost{
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.08);
}
.btn--ghost:hover{ background: rgba(0,0,0,0.08); }
.btn--lg{ padding: 12px 18px; font-size: 14px; }
.btn--xl{ padding: 14px 22px; font-size: 15px; }

/* Burger */
.nav__burger{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  padding: 10px;
  cursor: pointer;
}
.nav__burger span{
  display:block;
  height:2px;
  background: rgba(0,0,0,0.75);
  margin: 5px 0;
  border-radius: 2px;
}

/* Mobile menu */
.mobile{
  display:none;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: rgba(245,242,234,0.96);
}
.mobile__inner{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 14px 0 18px;
}
.mobile__inner a{
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 700;
  background: rgba(0,0,0,0.04);
}
.mobile__cta{ margin-top: 4px; }

/* ===== SPLIT HERO (HERO-1) ===== */
.mhSplitHero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  background: #0B0B10;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  /* Mobile positioning controls - adjust these values to move content up/down */
  --mobile-creative-offset: 60px;
  --mobile-digital-offset: -80px;
}

.mhSplitHero__header {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
  width: 100%;
  max-width: 800px;
  padding: 0 20px;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Hide header when any side is expanded */
.mhSplitHero:has(.mhSplitHero__side.expanded) .mhSplitHero__header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mhSplitHero__mainTitle {
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -1.5px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  opacity: 0;
}

@media (min-width: 1200px) {
  .mhSplitHero__mainTitle {
    font-size: clamp(32px, 4vw, 50px);
  }
}

.mhSplitHero__subTitle {
  font-family: 'Inter', sans-serif;
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin: 8px 0 0;
  letter-spacing: -0.3px;
  opacity: 0;
}

@media (min-width: 1200px) {
  .mhSplitHero__subTitle {
    font-size: clamp(16px, 2vw, 24px);
  }
}

.mhSplitHero__container {
  display: flex;
  flex: 1;
  position: relative;
  margin-top: auto;
}

.mhSplitHero__side {
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  opacity: 0;
}

/* Dynamic Divider System with Side-Specific Color Spreads */
.mhSplitHero__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.15);
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 120px,
    rgba(0, 0, 0, 0.6) 220px,
    rgba(0, 0, 0, 1) 320px,
    rgba(0, 0, 0, 1) calc(100% - 320px),
    rgba(0, 0, 0, 0.6) calc(100% - 220px),
    rgba(0, 0, 0, 0.2) calc(100% - 120px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 120px,
    rgba(0, 0, 0, 0.6) 220px,
    rgba(0, 0, 0, 1) 320px,
    rgba(0, 0, 0, 1) calc(100% - 320px),
    rgba(0, 0, 0, 0.6) calc(100% - 220px),
    rgba(0, 0, 0, 0.2) calc(100% - 120px),
    transparent 100%
  );
}

/* Left color spread (Creative - blue/purple) spreads to the LEFT from divider */
.mhSplitHero__divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100px;
  background: linear-gradient(
    to left,
    rgba(20, 214, 198, 0.50) 0%,
    rgba(20, 214, 198, 0.35) 30%,
    rgba(74, 143, 216, 0.25) 55%,
    rgba(123, 47, 230, 0.15) 75%,
    rgba(123, 47, 230, 0.02) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 100px,
    rgba(0, 0, 0, 0.5) 200px,
    rgba(0, 0, 0, 0.8) 300px,
    rgba(0, 0, 0, 0.8) calc(100% - 300px),
    rgba(0, 0, 0, 0.5) calc(100% - 200px),
    rgba(0, 0, 0, 0.15) calc(100% - 100px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 100px,
    rgba(0, 0, 0, 0.5) 200px,
    rgba(0, 0, 0, 0.8) 300px,
    rgba(0, 0, 0, 0.8) calc(100% - 300px),
    rgba(0, 0, 0, 0.5) calc(100% - 150px),
    rgba(0, 0, 0, 0.15) calc(100% - 50px),
    transparent 100%
  );
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Right color spread (Digital - red/yellow) spreads to the RIGHT from divider */
.mhSplitHero__divider::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  background: linear-gradient(
    to right,
    rgba(255, 107, 107, 0.50) 0%,
    rgba(255, 107, 107, 0.35) 25%,
    rgba(255, 140, 86, 0.25) 50%,
    rgba(255, 206, 46, 0.15) 75%,
    rgba(255, 206, 46, 0.01) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 100px,
    rgba(0, 0, 0, 0.5) 200px,
    rgba(0, 0, 0, 0.8) 300px,
    rgba(0, 0, 0, 0.8) calc(100% - 300px),
    rgba(0, 0, 0, 0.5) calc(100% - 200px),
    rgba(0, 0, 0, 0.15) calc(100% - 100px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 100px,
    rgba(0, 0, 0, 0.5) 200px,
    rgba(0, 0, 0, 0.8) 300px,
    rgba(0, 0, 0, 0.8) calc(100% - 300px),
    rgba(0, 0, 0, 0.5) calc(100% - 150px),
    rgba(0, 0, 0, 0.15) calc(100% - 50px),
    transparent 100%
  );
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* When Creative (left) is hovered - divider moves to 70% */
.mhSplitHero__container:has(.mhSplitHero__side--creative.expanded) .mhSplitHero__divider {
  left: 75%;
}

/* When Digital (right) is hovered - divider moves to 30% */
.mhSplitHero__container:has(.mhSplitHero__side--digital.expanded) .mhSplitHero__divider {
  left: 25%;
}

.mhSplitHero__divider-glow {
  display: none;
}

/* Hover States - Fixed to work for both sides with 70/30 split */
.mhSplitHero__side.expanded {
  width: 75%;
}

/* When Creative (left) side is expanded, Digital (right) shrinks */
.mhSplitHero__side--creative.expanded + .mhSplitHero__side--digital {
  width: 25%;
}

/* When Digital (right) side is expanded, Creative (left) shrinks */
.mhSplitHero__container:has(.mhSplitHero__side--digital.expanded) .mhSplitHero__side--creative {
  width: 25%;
}

.mhSplitHero__container:has(.mhSplitHero__side--digital.expanded) .mhSplitHero__side--digital {
  width: 75%;
}

/* Background & Glows */
.mhSplitHero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.mhSplitHero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
  animation: breathe 8s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { 
    opacity: 0.5;
    transform: scale(1);
  }
  50% { 
    opacity: 0.7;
    transform: scale(1.1);
  }
}

.mhSplitHero__glow--creative {
  width: 600px;
  height: 600px;
  top: 20%;
  left: 10%;
  background: radial-gradient(circle, rgba(20, 214, 198, 0.4) 0%, rgba(123, 47, 230, 0.3) 50%, transparent 70%);
}

.mhSplitHero__glow--digital {
  width: 600px;
  height: 600px;
  top: 20%;
  right: 10%;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.4) 0%, rgba(255, 206, 46, 0.3) 50%, transparent 70%);
}

.mhSplitHero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.4;
}

/* Content */
.mhSplitHero__content {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 40px;
  max-width: 600px;
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

/* Trigger Zone - Only active in 50/50 state */
.mhSplitHero__triggerZone {
  position: relative;
  z-index: 6;
}

.mhSplitHero__side.expanded .mhSplitHero__triggerZone {
  pointer-events: none;
}

/* Keep entire expanded side hoverable */
.mhSplitHero__side.expanded {
  cursor: pointer;
}

/* Hide the original content when side is expanded (to show perks instead) */
.mhSplitHero__side.expanded .mhSplitHero__content {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.95);
  transition: all 0.3s ease;
}

/* When Creative is expanded (Digital collapses) - hide digital content */
.mhSplitHero__side--creative.expanded + .mhSplitHero__side--digital .mhSplitHero__content {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* When Digital is expanded (Creative collapses) - hide creative content */
.mhSplitHero__container:has(.mhSplitHero__side--digital.expanded) .mhSplitHero__side--creative .mhSplitHero__content {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Icons */
.mhSplitHero__icons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 40px;
}

.mhSplitHero__icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: transform 0.3s ease, background 0.3s ease;
}

.mhSplitHero__side--creative .mhSplitHero__icon {
  box-shadow: 0 8px 32px rgba(20, 214, 198, 0.2);
}

.mhSplitHero__side--digital .mhSplitHero__icon {
  box-shadow: 0 8px 32px rgba(255, 107, 107, 0.2);
}

.mhSplitHero__icon:hover {
  transform: translateY(-5px) scale(1.1);
  background: rgba(255, 255, 255, 0.1);
}

/* Typography */
.mhSplitHero__title {
  font-family: 'Inter', 'Noto Sans Sinhala', sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 20px;
  line-height: 1.2;
  letter-spacing: -1px;
}

.mhSplitHero__highlight {
  display: block;
  margin-top: 8px;
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 900;
  background: linear-gradient(135deg, #14d6c6, #7b2fe6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -1.5px;
}

.mhSplitHero__side--digital .mhSplitHero__highlight {
  background: linear-gradient(135deg, #FF6B6B, #FFCE2E);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mhSplitHero__description {
  font-size: clamp(15px, 1.2vw, 18px);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA Button */
.mhSplitHero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  border: 2px solid;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  color: #ffffff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.mhSplitHero__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(20, 214, 198, 0.2), rgba(123, 47, 230, 0.2));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.mhSplitHero__cta--creative {
  border-color: #14d6c6;
  box-shadow: 0 8px 24px rgba(20, 214, 198, 0.3);
}

.mhSplitHero__cta--digital {
  border-color: #FF6B6B;
  box-shadow: 0 8px 24px rgba(255, 107, 107, 0.3);
}

.mhSplitHero__cta--digital::before {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(255, 206, 46, 0.2));
}

.mhSplitHero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(20, 214, 198, 0.5);
}

.mhSplitHero__cta--digital:hover {
  box-shadow: 0 12px 32px rgba(255, 107, 107, 0.5);
}

.mhSplitHero__cta:hover::before {
  opacity: 1;
}

.mhSplitHero__cta svg {
  transition: transform 0.3s ease;
}

.mhSplitHero__cta:hover svg {
  transform: translateX(4px);
}

/* Horizontal Text (shown when OTHER side is expanded - when this side is shrunk to 30%) */
.mhSplitHero__verticalText {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  font-family: 'Inter', 'Noto Sans Sinhala', sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 15;
  text-align: center;
  padding: 0 10px;
}

.mhSplitHero__verticalText-become {
  font-size: clamp(12px, 1.2vw, 16px);
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.mhSplitHero__verticalText-word {
  font-size: clamp(20px, 2.5vw, 32px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.mhSplitHero__verticalText-sinhala {
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 900;
  letter-spacing: 0;
}

@media (min-width: 1200px) {
  .mhSplitHero__verticalText-become {
    font-size: clamp(14px, 1.5vw, 48px);
  }
  .mhSplitHero__verticalText-word {
    font-size: clamp(28px, 3vw, 46px);
  }
  .mhSplitHero__verticalText-sinhala {
    font-size: clamp(28px, 3vw, 46px);
  }
}

.mhSplitHero__verticalText-animal {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin-top: 20px;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.mhSplitHero__verticalText-animalImg {
  width: 100%;
  height: 100%;
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  transform: rotate(-90deg);
  display: block;
}

/* Animate animal icon on show */
.mhSplitHero__side--creative:hover + .mhSplitHero__side--digital .mhSplitHero__verticalText-animal,
.mhSplitHero__container:has(.mhSplitHero__side--digital:hover) .mhSplitHero__side--creative .mhSplitHero__verticalText-animal {
  animation: animalBounce 2s ease-in-out infinite;
}

@keyframes animalBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.05);
  }
}

/* Creative vertical text gradient */
.mhSplitHero__verticalText--creative .mhSplitHero__verticalText-sinhala {
  background: linear-gradient(135deg, #14d6c6, #7b2fe6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Digital vertical text gradient */
.mhSplitHero__verticalText--digital .mhSplitHero__verticalText-sinhala {
  background: linear-gradient(135deg, #FF6B6B, #FFCE2E);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Show horizontal text when OTHER side is expanded (when this side is shrunk) */
/* Default: both texts hidden */
.mhSplitHero__side--creative .mhSplitHero__verticalText,
.mhSplitHero__side--digital .mhSplitHero__verticalText {
  opacity: 0;
  visibility: hidden;
}

/* When creative side is expanded, show digital horizontal text */
.mhSplitHero__side--creative.expanded + .mhSplitHero__side--digital .mhSplitHero__verticalText {
  opacity: 1;
  visibility: visible;
}

/* When digital side is expanded, show creative horizontal text */
.mhSplitHero__container:has(.mhSplitHero__side--digital.expanded) .mhSplitHero__side--creative .mhSplitHero__verticalText {
  opacity: 1;
  visibility: visible;
}

/* Scroll Down Indicator */
.mhSplitHero__scrollDown {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0;
  cursor: pointer;
  transition: color 0.3s ease, z-index 0s;
}

.mhSplitHero__scrollDown:hover {
  color: rgba(255, 255, 255, 0.65);
}

.mhSplitHero__scrollArrow {
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

/* Perks Section - Shows when side is expanded */
.mhSplitHero__perks {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  max-width: 520px;
  width: 90%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show perks when side is expanded */
.mhSplitHero__side--creative.expanded .mhSplitHero__perks--creative,
.mhSplitHero__side--digital.expanded .mhSplitHero__perks--digital {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.mhSplitHero__perks-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 24px;
  text-align: center;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 16px;
}

.mhSplitHero__perks-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  border-radius: 2px;
}

.mhSplitHero__perks--creative .mhSplitHero__perks-title::after {
  background: linear-gradient(90deg, #14d6c6, #7b2fe6);
}

.mhSplitHero__perks--digital .mhSplitHero__perks-title::after {
  background: linear-gradient(90deg, #FF6B6B, #FFCE2E);
}

.mhSplitHero__perks-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mhSplitHero__perks-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  font-size: clamp(14px, 1.2vw, 16px);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  font-weight: 500;
}

.mhSplitHero__perks-check {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.8;
}

.mhSplitHero__perks--creative .mhSplitHero__perks-check {
  color: #14d6c6;
}

.mhSplitHero__perks--digital .mhSplitHero__perks-check {
  color: #FF6B6B;
}

.mhSplitHero__perks-outcome {
  margin-bottom: 32px;
  text-align: center;
}

.mhSplitHero__perks-outcome-line1 {
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 1.4;
}

.mhSplitHero__perks-outcome-line2 {
  font-family: 'Inter', 'Noto Sans Sinhala', sans-serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.mhSplitHero__perks-outcome-sinhala {
  font-family: 'Noto Sans Sinhala', sans-serif;
  font-weight: 900;
  letter-spacing: 0;
}

.mhSplitHero__perks-outcome-sinhala--creative {
  background: linear-gradient(135deg, #14d6c6, #7b2fe6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mhSplitHero__perks-outcome-sinhala--digital {
  background: linear-gradient(135deg, #FF6B6B, #FFCE2E);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mhSplitHero__perks-outcome strong {
  color: #ffffff;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
  font-size: clamp(14px, 1.2vw, 16px);
}

.mhSplitHero__perks-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 18px 36px;
  border-radius: 50px;
  font-weight: 700;
  font-size: clamp(15px, 1.2vw, 17px);
  font-family: inherit;
  border: 2px solid;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}

.mhSplitHero__perks-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.mhSplitHero__perks-cta--creative {
  border-color: #14d6c6;
  box-shadow: 0 8px 32px rgba(20, 214, 198, 0.25);
}

.mhSplitHero__perks-cta--creative::before {
  background: linear-gradient(135deg, rgba(20, 214, 198, 0.25), rgba(123, 47, 230, 0.25));
}

.mhSplitHero__perks-cta--digital {
  border-color: #FF6B6B;
  box-shadow: 0 8px 32px rgba(255, 107, 107, 0.25);
}

.mhSplitHero__perks-cta--digital::before {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.25), rgba(255, 206, 46, 0.25));
}

.mhSplitHero__perks-cta:hover {
  transform: translateY(-3px);
}

.mhSplitHero__perks-cta--creative:hover {
  box-shadow: 0 12px 40px rgba(20, 214, 198, 0.4);
  background: rgba(20, 214, 198, 0.15);
}

.mhSplitHero__perks-cta--digital:hover {
  box-shadow: 0 12px 40px rgba(255, 107, 107, 0.4);
  background: rgba(255, 107, 107, 0.15);
}

.mhSplitHero__perks-cta:hover::before {
  opacity: 1;
}

.mhSplitHero__perks-cta svg {
  transition: transform 0.3s ease;
}

.mhSplitHero__perks-cta:hover svg {
  transform: translateX(4px) translateY(-4px);
}

/* Responsive Design */
@media (max-width: 968px) {
  .mhSplitHero {
    height: auto;
    min-height: 100vh;
  }

  .mhSplitHero__header {
    top: 80px;
  }

  .mhSplitHero__mainTitle {
    font-size: clamp(32px, 8vw, 48px);
  }

  .mhSplitHero__subTitle {
    font-size: clamp(16px, 4vw, 24px);
  }

  .mhSplitHero__container {
    flex-direction: column;
  }

  .mhSplitHero__side {
    width: 100% !important;
    min-height: 50vh;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Creative side takes 60% of mobile viewport */
  .mhSplitHero__side--creative {
    min-height: 60vh;
  }

  /* Digital side takes 40% of mobile viewport */
  .mhSplitHero__side--digital {
    min-height: 40vh;
  }

  .mhSplitHero__side.expanded {
    width: 100% !important;
  }

  .mhSplitHero__side.expanded + .mhSplitHero__side {
    width: 100% !important;
  }

  /* Disable all hover/click interactions on mobile */
  .mhSplitHero__side {
    pointer-events: none !important;
  }

  /* Re-enable pointer events for CTA buttons only */
  .mhSplitHero__cta {
    pointer-events: auto !important;
  }

  .mhSplitHero__verticalText {
    display: none;
  }

  /* Apply mobile positioning offsets */
  .mhSplitHero__side--creative .mhSplitHero__content {
    padding: 60px 20px 40px;
    transform: translateY(var(--mobile-creative-offset));
  }

  .mhSplitHero__side--digital .mhSplitHero__content {
    padding: 100px 20px 40px;
    transform: translateY(var(--mobile-digital-offset));
  }

  .mhSplitHero__side:not(:hover) .mhSplitHero__content {
    opacity: 1;
  }

  /* Hide icons on mobile */
  .mhSplitHero__icons {
    display: none;
  }

  .mhSplitHero__icon {
    display: none;
  }

  /* Adjust scroll indicator position to avoid overlap */
  .mhSplitHero__scrollDown {
    position: fixed;
    bottom: 30px;
    z-index: 100;
  }

  .mhSplitHero__divider {
    display: none;
  }

  /* Mobile: Hide perks completely and keep original content visible */
  .mhSplitHero__perks {
    display: none !important;
  }

  /* Mobile: Keep original content always visible (override expanded states) */
  .mhSplitHero__side.expanded .mhSplitHero__content,
  .mhSplitHero__side--creative.expanded + .mhSplitHero__side--digital .mhSplitHero__content,
  .mhSplitHero__container:has(.mhSplitHero__side--digital.expanded) .mhSplitHero__side--creative .mhSplitHero__content {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: scale(1) !important;
  }
}

@media (max-width: 640px) {
  .mhSplitHero__header {
    top: 80px;
  }

  .mhSplitHero__title {
    font-size: clamp(24px, 6vw, 32px);
  }

  .mhSplitHero__description {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .mhSplitHero__cta {
    padding: 14px 24px;
    font-size: 15px;
  }

  /* Hide scroll indicator on mobile */
  .mhSplitHero__scrollDown {
    display: none;
  }
}

/* HERO */
.hero{
  position: relative;
  overflow: hidden;
  padding: 56px 0 34px;
  background: var(--bg);
  color: var(--white);
}
.hero__bg{
  position:absolute; inset:-40px;
  background:
    radial-gradient(900px 480px at 18% 28%, rgba(255, 206, 46, 0.26), transparent 60%),
    radial-gradient(800px 520px at 72% 22%, rgba(255, 107, 107, 0.22), transparent 60%),
    radial-gradient(700px 480px at 70% 78%, rgba(124, 209, 184, 0.18), transparent 60%);
  filter: blur(6px);
  pointer-events:none;
}
.hero__inner{
  position: relative;
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items:center;
}
.pill{
  display:inline-flex;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  font-weight: 700;
  font-size: 12px;
  opacity: 0.92;
  margin: 0 0 14px;
}
.hero__title{
  margin: 0 0 12px;
  font-size: clamp(34px, 4.1vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.8px;
  font-weight: 900;
}
.accent{
  color: var(--accent);
  text-shadow: 0 0 0 rgba(0,0,0,0);
}
.hero__sub{
  margin: 0 0 18px;
  font-size: 15px;
  opacity: 0.86;
  max-width: 54ch;
}
.hero__cta{
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
}
.hero__note{
  margin-top: 16px;
  opacity: 0.72;
  max-width: 62ch;
  font-weight: 700;
}

/* Hero mock right */
.phoneStack{ position:relative; }
.phoneCard{
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.phoneCard__top{
  display:flex; gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.dot{ width: 10px; height: 10px; border-radius:999px; opacity:0.95; }
.dot--r{ background: #FF6B6B; }
.dot--y{ background: #FFCE2E; }
.dot--g{ background: #7CD1B8; }

.phoneCard__content{ padding: 18px 16px 22px; }
.mockLine{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  margin-bottom: 10px;
}
.w-80{ width: 80%; }
.w-55{ width: 55%; }
.mockGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.mockTile{
  height: 84px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.10);
}

.floatingBadge{
  position:absolute;
  right: 14px;
  bottom: 14px;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(0,0,0,0.58);
  border: 1px solid rgba(255,255,255,0.14);
}

.orbit{ position:absolute; inset:-10px; pointer-events:none; }
.orb{
  position:absolute;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.22);
  filter: blur(0.1px);
  animation: float 7s ease-in-out infinite;
}
.orb--1{ top: 10%; right: 8%; animation-delay: 0s; }
.orb--2{ top: 54%; right: -2%; animation-delay: 1s; width: 26px; height: 26px; }
.orb--3{ bottom: 12%; left: 8%; animation-delay: 2s; }
.orb--4{ top: 18%; left: -2%; animation-delay: 3s; width: 22px; height: 22px; }

@keyframes float{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
}

/* STATS */
.stats{
  background: #0F0F16;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.stats__inner{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 18px 0;
}

/* SECTIONS */
/* Scrolling gradient text for Who We Are */
.mhGradScroll{
  background: linear-gradient(135deg, #14d6c6, #7b2fe6, #ff6b6b, #ffce2e);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientScroll 8s ease infinite;
}

@keyframes gradientScroll {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.section{
  padding: 62px 0;
  background: var(--paper);
}
.section--alt{ background: var(--paper2); }
.section__head{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 22px;
}
.section__head h2{
  margin:0;
  font-size: clamp(26px, 2.8vw, 38px);
  letter-spacing: -0.6px;
  font-weight: 900;
}
.section__head p{
  margin:0;
  color: var(--muted);
  max-width: 70ch;
  font-weight: 600;
}

/* ===== WHO WE ARE SECTION ===== */
.mhWho {
  background: #F5F2EA;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.mhWho::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 206, 46, 0.12) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}

.mhWho__head {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
}

.mhWho__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.1;
  color: #0D0D12;
  margin: 0 0 20px;
  letter-spacing: -1.5px;
}

.mhWho__title-gradient {
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 50%, #4A8FD8 100%);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mhWho__subtitle {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
  color: rgba(13, 13, 18, 0.65);
  margin: 0 0 16px;
}

.mhWho__subtitle strong {
  font-weight: 700;
  color: rgba(13, 13, 18, 0.9);
}

.mhWho__subtitle--emphasis {
  font-weight: 600;
  color: rgba(13, 13, 18, 0.8);
  margin-top: 0px;
  font-size: 19px;
}

.mhWho__description {
  max-width: 800px;
  margin: 0 auto;
}

.mhWho__grid {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 0;
  max-width: 1400px;
  margin: 60px auto 0;
  height: 500px;
  border-radius: 24px;
  overflow: hidden;
}

/* Image in initial state (top half of card) */
.mhWho__card-image {
  width: 100%;
  height: 260px;
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mhWho__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Subtitle preview in initial state */
.mhWho__card-subtitle-preview {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 12px;
  padding: 0 20px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

/* Enhanced glassmorphism for all cards */
.mhWho__card {
  position: relative;
  flex: 1;
  background: #FFFFFF;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
  border-right: 1.5px solid rgba(255, 255, 255, 0.3);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Remove gradient hint overlay */
.mhWho__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.mhWho__card:last-child {
  border-right: 1.5px solid rgba(255, 255, 255, 0.35);
}

.mhWho__card.expanded {
  flex: 3;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.65));
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.mhWho__card.expanded::after {
  opacity: 0.6;
}

.mhWho__card.collapsed {
  flex: 0.5;
  opacity: 0.6;
}

/* Fade out image/title/subtitle-preview on hover (but NOT icon) */
.mhWho__card:not(.expanded):hover .mhWho__card-image,
.mhWho__card:not(.expanded):hover .mhWho__card-title,
.mhWho__card:not(.expanded):hover .mhWho__card-subtitle-preview {
  opacity: 0;
  transform: translateY(-10px);
}

/* Card collapsed view (default state) */
.mhWho__card-collapsed {
  position: relative;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 24px 20px 30px 20px;
  text-align: center;
}

.mhWho__card.expanded .mhWho__card-collapsed {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.mhWho__card.collapsed .mhWho__card-collapsed {
  opacity: 1;
  padding: 10px;
}

/* Hide everything except icon in collapsed state */
.mhWho__card.collapsed .mhWho__card-collapsed > *:not(.mhWho__card-icon) {
  display: none;
}

/* Card title styling for better vertical spacing */
.mhWho__card-title {
  margin: 0 0 8px 0;
  line-height: 1.3;
  padding: 0 16px;
}

.mhWho__card-expanded {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
  position: absolute;
  inset: 0;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  overflow-y: auto;
  pointer-events: none;
}

/* Default state - show collapsed view */
.mhWho__card:not(.expanded):not(.collapsed) .mhWho__card-collapsed {
  display: flex;
  opacity: 1;
}

.mhWho__card:not(.expanded):not(.collapsed) .mhWho__card-expanded {
  opacity: 0;
  pointer-events: none;
  display: none;
}

/* Collapsed state - ONLY show icon, hide everything else */
.mhWho__card.collapsed .mhWho__card-expanded {
  display: none;
}

/* Expanded state - show all content with delayed fade */
.mhWho__card.expanded .mhWho__card-expanded {
  opacity: 1;
  pointer-events: all;
  display: flex;
}

.mhWho__card.expanded .mhWho__card-expanded .mhWho__card-icon {
  margin: 0 0 16px 0;
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInUp 0.4s ease 0.5s forwards;
}

.mhWho__card.expanded .mhWho__card-expanded .mhWho__card-title {
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInUp 0.4s ease 0.6s forwards;
  text-align: left;
  width: 100%;
  padding: 0;
  margin: 0 0 12px 0;
}

.mhWho__card.expanded .mhWho__card-expanded .mhWho__card-content {
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInUp 0.5s ease 0.7s forwards;
}

.mhWho__card.expanded .mhWho__card-expanded .mhWho__card-subtitle {
  opacity: 0;
  transform: translateY(-10px);
  margin-top: 16px;
  animation: fadeInUp 0.5s ease 0.85s forwards;
}

/* Keyframe for content appearing */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mhWho__card-content {
  width: 100%;
  margin-top: 20px;
}

.mhWho__card-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}

.mhWho__card-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(13, 13, 18, 0.7);
}

.mhWho__card-list li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: #4A8FD8;
  font-weight: 700;
  font-size: 18px;
}

.mhWho__card-subtitle {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: rgba(13, 13, 18, 0.7);
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-style: italic;
}

/* Static card (Academic credibility) - 40% left image, 60% right content */
.mhWho__static-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 500px;
  background: #FFFFFF;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
  margin-top: 40px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

/* Remove gradient hint for static card */
.mhWho__static-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.mhWho__static-card-image {
  position: relative;
  z-index: 2;
  flex: 0 0 40%;
  overflow: hidden;
}

.mhWho__static-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mhWho__static-card-content {
  position: relative;
  z-index: 2;
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.mhWho__static-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.mhWho__static-card .mhWho__card-icon {
  margin: 0 0 16px 0;
}

.mhWho__static-card .mhWho__card-title {
  margin: 0 0 12px;
  text-align: left;
  width: 100%;
  padding: 0;
}

.mhWho__static-card .mhWho__card-content {
  width: 100%;
  margin-top: 12px;
}

.mhWho__card-text--emphasis {
  font-weight: 600;
  color: rgba(13, 13, 18, 0.8);
  margin-top: 12px;
  font-style: italic;
}

.mhWho__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(20, 214, 198, 0.08) 0%, rgba(123, 47, 230, 0.08) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.mhWho__card-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  color: #4A8FD8;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  margin-top: -20px;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.mhWho__card-collapsed .mhWho__card-icon {
  width: 64px;
  height: 64px;
}

.mhWho__card.expanded .mhWho__card-icon {
  background: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.mhWho__card-icon svg {
  width: 32px;
  height: 32px;
  stroke: #4A8FD8;
  transition: all 0.4s ease;
}

.mhWho__card.expanded .mhWho__card-icon svg {
  transform: scale(1.1);
}

.mhWho__card-title {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  color: #0D0D12;
  margin: 16px 0 0;
  letter-spacing: -0.3px;
}

.mhWho__card-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(13, 13, 18, 0.6);
  margin: 0;
}

/* Responsive */
@media (max-width: 980px) {
  .mhWho__grid {
    flex-direction: column;
    height: auto;
    gap: 0;
  }

  .mhWho__card {
    border-right: none;
    border-bottom: none;
    min-height: auto;
    flex: none !important;
  }

  .mhWho__card:last-child {
    border-bottom: none;
  }

  /* Mobile: No collapse behavior, other cards stay same */
  .mhWho__card.collapsed {
    flex: none !important;
    opacity: 1;
  }

  /* Mobile: Expanded card shows content, hides image */
  .mhWho__card.expanded {
    min-height: auto;
    height: auto;
  }

  .mhWho__card.expanded .mhWho__card-image {
    display: none;
  }

  .mhWho__card-expanded {
    padding: 30px 24px;
    position: relative;
    height: auto;
  }

  /* Center-align expanded content on mobile (but not bullet lists) */
  .mhWho__card.expanded .mhWho__card-expanded {
    align-items: center;
  }

  .mhWho__card.expanded .mhWho__card-expanded .mhWho__card-icon {
    margin: 0 auto 16px;
  }

  .mhWho__card.expanded .mhWho__card-expanded .mhWho__card-title {
    text-align: center;
    margin: 0 auto 12px;
  }

  .mhWho__card.expanded .mhWho__card-expanded .mhWho__card-subtitle {
    text-align: center;
  }
  
  /* Keep bullet points left-aligned */
  .mhWho__card.expanded .mhWho__card-expanded .mhWho__card-content {
    text-align: left;
  }
  
  .mhWho__card.expanded .mhWho__card-expanded .mhWho__card-list {
    text-align: left;
  }

  .mhWho__static-card {
    flex-direction: column;
    height: auto;
  }
  
  /* Center align icon, title, and intro text */
  .mhWho__static-card .mhWho__card-icon {
    margin: 0 auto 16px;
  }
  
  .mhWho__static-card .mhWho__card-title {
    text-align: center;
  }
  
  .mhWho__static-card .mhWho__card-text {
    text-align: left;
  }

  .mhWho__static-card .mhWho__card-subtitle {
    text-align: center;
  }
  
  /* Keep bullet points left-aligned */
  .mhWho__static-card .mhWho__card-list {
    text-align: left;
  }
  
  .mhWho__static-card-image {
    flex: 0 0 300px;
  }
  
  .mhWho__static-card-content {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: left;
  }
  
  .mhTeam__grid {
    flex-direction: column;
    height: 100px;
  }
  
  .mhTeam__card {
    flex: 1 !important;
  }
  
  .mhTeam__card-name-initial {
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }
  
  .mhTeam__card-image {
    height: 280px;
  }
}

@media (max-width: 560px) {
  .mhWho {
    padding: 60px 0;
  }

  .mhWho__title {
    font-size: 36px;
  }

  .mhWho__card-expanded {
    padding: 24px 20px;
  }

  .mhWho__card-collapsed .mhWho__card-icon {
    width: 48px;
    height: 48px;
  }

  .mhWho__static-card {
    padding: 24px 20px;
  }
}

/* ===== MEET THE TEAM SECTION ===== */
.mhTeam {
  margin-top: 80px;
  position: relative;
  z-index: 2;
}

.mhTeam__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 900;
  line-height: 1.1;
  color: #0D0D12;
  margin: 0 0 50px;
  letter-spacing: -1.5px;
  text-align: center;
}

.mhTeam__title-gradient {
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 50%, #4A8FD8 100%);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mhTeam__grid {
  display: flex;
  flex-direction: row;
  gap: 16px;
  height: 380px;
  margin-top: 40px;
  margin-bottom: 80px;
  padding: 0 60px;
}

.mhTeam__card {
  flex: 1;
  background: transparent;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: none;
  box-shadow: none;
}

/* Background and styling only on hover or expanded */
.mhTeam__card:hover,
.mhTeam__card.expanded {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.65));
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Blue-purple gradient hint only on hover/expanded */
.mhTeam__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(20, 214, 198, 0.06) 0%,
    rgba(123, 47, 230, 0.06) 100%
  );
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.mhTeam__card:hover::after,
.mhTeam__card.expanded::after {
  opacity: 1;
}

/* Default state: photo + name below, no background */
.mhTeam__card-collapsed {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 16px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.mhTeam__card-image {
  width: 100%;
  height: 260px;
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.mhTeam__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.mhTeam__card:hover .mhTeam__card-image img {
  transform: scale(1.05);
}

.mhTeam__card-name-initial {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--color-text-primary);
  text-align: center;
  text-transform: uppercase;
}

/* Expanded content - horizontal layout with image on left */
.mhTeam__card-expanded {
  position: relative;
  z-index: 2;
  display: none;
  height: 100%;
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.4s ease 0.5s;
}

.mhTeam__card-image-expanded {
  flex: 0 0 30%;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.mhTeam__card-image-expanded img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mhTeam__card-info {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 8px 0;
}

.mhTeam__card-info-text {
  flex: 0 0 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding-right: 20px;
}

.mhTeam__card-name {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin: 0 0 6px 0;
  letter-spacing: -0.5px;
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInUp 0.4s ease 0.6s forwards;
}

.mhTeam__card-role {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-accent-yellow);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 8px 0;
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInUp 0.4s ease 0.7s forwards;
}

.mhTeam__card-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-top: auto;
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInUp 0.5s ease 0.8s forwards;
}

/* Social media icons - vertical with divider on left */
.mhTeam__card-social {
  position: relative;
  flex: 0 0 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-left: 20px;
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInUp 0.5s ease 0.9s forwards;
}

/* Divider line on the left edge of social icons */
.mhTeam__card-social::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(20, 214, 198, 0.4) 20%,
    rgba(123, 47, 230, 0.4) 80%,
    transparent
  );
}

.mhTeam__card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(20, 214, 198, 0.15), rgba(123, 47, 230, 0.15));
  border: 1.5px solid rgba(20, 214, 198, 0.3);
  border-radius: 50%;
  color: var(--color-text-primary);
  transition: all 0.3s ease;
}

.mhTeam__card-link:hover {
  background: linear-gradient(135deg, #14d6c6, #7b2fe6);
  border-color: transparent;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(20, 214, 198, 0.4);
}

/* Keyframe for content fade in */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Expanded state - card grows horizontally */
.mhTeam__card.expanded {
  flex: 3;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.mhTeam__card.expanded::after {
  opacity: 0.3;
}

.mhTeam__card.expanded .mhTeam__card-collapsed {
  display: none;
}

.mhTeam__card.expanded .mhTeam__card-expanded {
  display: flex;
  opacity: 1;
}

/* Collapsed state - shows only vertical name, no image */
.mhTeam__card.collapsed {
  flex: 0.4;
  min-width: 60px;
}

.mhTeam__card.collapsed::after {
  opacity: 0.8;
}

.mhTeam__card.collapsed .mhTeam__card-collapsed {
  opacity: 1;
  padding: 16px 8px;
  justify-content: center;
}

.mhTeam__card.collapsed .mhTeam__card-image {
  display: none;
}

.mhTeam__card.collapsed .mhTeam__card-name-initial {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 1.1rem;
  letter-spacing: 2.5px;
  font-weight: 900;
}

/* ===== MOBILE CAROUSEL VIEW ===== */
@media (max-width: 980px) {
  .mhTeam {
    margin-top: 60px;
  }

  .mhTeam__grid {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: 600px;
    padding: 20px;
    gap: 20px;
  }

  .mhTeam__grid::-webkit-scrollbar {
    display: none;
  }

  /* Each card takes full width in carousel */
  .mhTeam__card {
    flex: 0 0 calc(100% - 40px);
    min-width: calc(100% - 40px);
    scroll-snap-align: center;
    height: auto;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.65)) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    padding: 0;
  }

  .mhTeam__card::after {
    opacity: 0.15 !important;
  }

  /* Hide collapsed state on mobile */
  .mhTeam__card-collapsed {
    display: none !important;
  }

  /* Always show expanded content - vertical layout */
  .mhTeam__card-expanded {
    display: flex !important;
    opacity: 1 !important;
    padding: 0;
    flex-direction: column;
    background: transparent;
    border: none;
  }

  /* Photo at top - larger and full width */
  .mhTeam__card-image-expanded {
    height: 320px;
    width: 100%;
    margin-bottom: 0;
    border-radius: 24px 24px 0 0;
  }

  .mhTeam__card-image-expanded img {
    object-fit: cover;
  }

  /* Content area with padding */
  .mhTeam__card-info {
    flex-direction: column;
    gap: 0;
    padding: 24px 24px 24px 24px;
    flex: none;
  }

  .mhTeam__card-info-text {
    flex: none;
    text-align: center;
    padding-right: 0px;
  }

  /* Name styling */
  .mhTeam__card-name {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--color-text-primary);
  }

  /* Role/title */
  .mhTeam__card-role {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: var(--color-text-primary);
  }

  /* Description/intro */
  .mhTeam__card-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 10px 0 20px 0;
  }

  /* Divider before social icons */
  .mhTeam__card-social {
    flex-direction: row;
    padding: 16px 0 0 0;
    justify-content: center;
    gap: 16px;
    position: relative;
    margin: 0;
    flex: none;
  }

  /* Horizontal divider above social icons */
  .mhTeam__card-social::before {
    content: '';
    position: absolute;
    left: 20%;
    right: 20%;
    top: 0;
    bottom: auto;
    width: 60%;
    height: 2px;
    background: linear-gradient(
      to right,
      transparent,
      rgba(20, 214, 198, 0.4) 20%,
      rgba(123, 47, 230, 0.4) 80%,
      transparent
    );
  }

  /* Disable hover/collapse states on mobile */
  .mhTeam__card.collapsed,
  .mhTeam__card.expanded {
    flex: 0 0 calc(100% - 40px) !important;
    min-width: calc(100% - 40px) !important;
  }
}

/* GRID */
.grid{ display:grid; gap: 14px; }
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--4{ grid-template-columns: repeat(4, 1fr); }

/* Cards - Modern glassmorphism style */
.card{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  border-color: rgba(0,0,0,0.08);
}
.card__icon{
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__icon svg{
  width: 40px;
  height: 40px;
  stroke: rgba(16,16,20,0.70);
}
.card__icon svg *[id^="grad"]{
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* Gradient on hover - smooth opacity transition */
.card:hover .card__icon svg{
  stroke: url(#grad1);
}
.card:hover .card__icon svg #grad1{
  opacity: 1;
}
.card:nth-child(2):hover .card__icon svg{
  stroke: url(#grad2);
}
.card:nth-child(2):hover .card__icon svg #grad2{
  opacity: 1;
}
.card:nth-child(3):hover .card__icon svg{
  stroke: url(#grad3);
}
.card:nth-child(3):hover .card__icon svg #grad3{
  opacity: 1;
}
.card:nth-child(4):hover .card__icon svg{
  stroke: url(#grad4);
}
.card:nth-child(4):hover .card__icon svg #grad4{
  opacity: 1;
}
.card h3{
  margin: 12px 0 10px;
  font-weight: 900;
  letter-spacing: -0.5px;
  font-size: 18px;
  line-height: 1.3;
  color: #101014;
}
.card p{
  margin: 0;
  color: rgba(16,16,20,0.65);
  font-weight: 600;
  line-height: 1.6;
  font-size: 14px;
}

.card--soft{
  background: rgba(255,255,255,0.55);
}

/* ====== MONEY SECTION - Redesigned ====== */
/* ========================================
   MONEY SECTION (LIGHT GLASSMORPHISM)
======================================== */
.mhMoney {
  min-height: 100vh;
  padding: 120px 0;
  background: #F5F2EA;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.mhMoney::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(255, 206, 46, 0.12) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0.6;
}

.mhMoney__head {
  max-width: 900px;
  margin: 0 auto 80px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.mhMoney__title {
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
}

.mhMoney__title-line1 {
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 72px);
  letter-spacing: -2px;
  line-height: 1.1;
  color: #0D0D12;
  display: block;
}

.mhMoney__title-line2 {
  font-weight: 700;
  font-size: clamp(20px, 3vw, 36px);
  letter-spacing: -1px;
  line-height: 1.3;
  color: rgba(13, 13, 18, 0.65);
  display: block;
}

.mhMoney__title-valuable {
  color: #7b2fe6;
  font-weight: 800;
}

/* Gradient text animations */
.mhMoney__grad {
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 50%, #4A8FD8 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
  animation: gradientFlow 6s ease infinite;
}

.mhMoney__grad--free,
.mhMoney__grad--valuable,
.mhMoney__grad--trick,
.mhMoney__grad--earn {
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 50%, #4A8FD8 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 6s ease infinite;
}

@keyframes gradientFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.mhMoney__subtitle {
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(13, 13, 18, 0.6);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
  opacity: 0;
}

.mhMoney__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-bottom: 80px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}

/* + Divider Lines */
.mhMoney__grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(13, 13, 18, 0.1) 10%, rgba(13, 13, 18, 0.1) 90%, transparent 100%);
  z-index: 1;
}

.mhMoney__grid::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(13, 13, 18, 0.1) 10%, rgba(13, 13, 18, 0.1) 90%, transparent 100%);
  z-index: 1;
}

.mhMoney__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 48px 32px;
  background: transparent;
  border: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(40px);
  overflow: visible;
}

/* Right align left column items */
.mhMoney__card:nth-child(1),
.mhMoney__card:nth-child(3) {
  text-align: right;
  align-items: flex-end;
}

.mhMoney__card::before {
  display: none;
}

.mhMoney__card:hover {
  transform: translateY(-4px);
}

.mhMoney__card:hover::before {
  display: none;
}

.mhMoney__card-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(13, 13, 18, 0.06);
  border: 1px solid rgba(13, 13, 18, 0.1);
  color: rgba(13, 13, 18, 0.7);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.mhMoney__card-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mhMoney__card-icon svg {
  position: relative;
  z-index: 2;
  transition: all 0.4s ease;
}

.mhMoney__card:hover .mhMoney__card-icon {
  transform: scale(1.1);
  border-color: transparent;
}

.mhMoney__card:hover .mhMoney__card-icon::before {
  opacity: 1;
}

.mhMoney__card:hover .mhMoney__card-icon svg {
  stroke: #FFFFFF;
  transform: scale(1.1);
}

.mhMoney__card-content {
  flex: 1;
  position: relative;
  z-index: 2;
}

.mhMoney__card-title {
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 22px;
  color: #0D0D12;
  letter-spacing: -0.5px;
  transition: color 0.3s ease;
}

.mhMoney__card:hover .mhMoney__card-title {
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mhMoney__card-desc {
  margin: 0;
  font-weight: 600;
  font-size: 15px;
  color: rgba(13, 13, 18, 0.5);
  line-height: 1.6;
}

.mhMoney__card-glow {
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 206, 46, 0.15) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  display: none;
}

.mhMoney__card:hover .mhMoney__card-glow {
  opacity: 0;
  display: none;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .mhMoney__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  
  /* Keep dividers on mobile (same as desktop) */
  .mhMoney__grid::before,
  .mhMoney__grid::after {
    display: block;
  }
  
  /* Right align left column items (aligned to vertical divider) */
  .mhMoney__card:nth-child(1),
  .mhMoney__card:nth-child(3) {
    text-align: right;
    align-items: flex-end;
  }
  
  /* Left align right column items (aligned to vertical divider) */
  .mhMoney__card:nth-child(2),
  .mhMoney__card:nth-child(4) {
    text-align: left;
    align-items: flex-start;
  }
}

.mhMoney__quote {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 48px 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  opacity: 0;
  transform: translateY(40px);
  position: relative;
  z-index: 2;
}

.mhMoney__quote-highlight {
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -1px;
  margin-bottom: 12px;
  color: #0D0D12;
}

.mhMoney__quote-sub {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.3px;
  color: rgba(13, 13, 18, 0.6);
}

@media (max-width: 768px) {
  .mhMoney {
    min-height: auto;
    padding: 80px 0;
  }

  .mhMoney__head {
    margin-bottom: 56px;
  }

  .mhMoney__title {
    gap: 8px;
    margin-bottom: 24px;
  }

  .mhMoney__title-line1 {
    font-size: clamp(36px, 9vw, 56px);
    letter-spacing: -1.5px;
  }

  .mhMoney__title-line2 {
    font-size: clamp(18px, 5vw, 28px);
    letter-spacing: -0.7px;
  }

  .mhMoney__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin-bottom: 56px;
  }
  
  /* Keep vertical divider on mobile, keep horizontal divider */
  .mhMoney__grid::before,
  .mhMoney__grid::after {
    display: block;
  }

  .mhMoney__card {
    padding: 24px 16px;
  }
  
  /* Right align left column items (Personal brand, Strategy) */
  .mhMoney__card:nth-child(1),
  .mhMoney__card:nth-child(3) {
    text-align: right;
    align-items: flex-end;
  }
  
  /* Left align right column items (Skills, Network) */
  .mhMoney__card:nth-child(2),
  .mhMoney__card:nth-child(4) {
    text-align: left;
    align-items: flex-start;
  }

  .mhMoney__card-icon {
    width: 48px;
    height: 48px;
  }
  
  .mhMoney__card-icon svg {
    width: 20px;
    height: 20px;
  }

  .mhMoney__card-title {
    font-size: 17px;
  }

  .mhMoney__card-desc {
    font-size: 13px;
  }

  .mhMoney__quote {
    padding: 36px 24px;
  }

  .mhMoney__quote-highlight {
    font-size: clamp(22px, 6vw, 32px);
    margin-bottom: 8px;
  }

  .mhMoney__quote-sub {
    font-size: clamp(16px, 4.5vw, 20px);
  }
}

/* ========================================
   EARNING SYSTEM (LEARN. BUILD. EARN.)
======================================== */
.mhEarn {
  position: relative;
  padding: 120px 0;
  background: linear-gradient(135deg, #0B0B10 0%, #0E0E16 100%);
  overflow: hidden;
}

.mhEarn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(123, 47, 230, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.mhEarn__head {
  text-align: center;
  margin-bottom: 60px;
  opacity: 0;
  position: relative;
  z-index: 2;
}

.mhEarn__title {
  font-size: clamp(42px, 5.5vw, 72px);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 24px;
  color: #FFFFFF;
  letter-spacing: -2px;
}

.mhMoney__grad--earn {
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 50%, #4A8FD8 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 6s ease infinite;
  display: inline-block;
}

.mhEarn__subtitle {
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(255, 255, 255, 0.6);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
  opacity: 0;
}

.mhEarn__content {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 48px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  opacity: 0;
  position: relative;
  z-index: 2;
}

.mhEarn__section {
  margin-bottom: 40px;
}

.mhEarn__section-title {
  font-size: 24px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 30px;
  opacity: 0;
}

.mhEarn__items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.mhEarn__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  transition: all 0.3s ease;
  opacity: 0;
}

.mhEarn__item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(20, 214, 198, 0.3);
  transform: translateX(8px);
}

.mhEarn__item-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 214, 198, 0.1);
  border-radius: 8px;
  color: #14d6c6;
  transition: all 0.3s ease;
}

.mhEarn__item:hover .mhEarn__item-icon {
  background: rgba(20, 214, 198, 0.2);
  transform: scale(1.1);
}

.mhEarn__item-text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  flex: 1;
}

.mhEarn__item-text strong {
  color: #FFFFFF;
  font-weight: 700;
}

.mhEarn__divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1) 50%,
    transparent
  );
  margin: 40px 0;
  opacity: 0;
}

.mhEarn__credibility {
  text-align: center;
  opacity: 0;
}

.mhEarn__credibility-text {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.5;
  margin-bottom: 40px;
  letter-spacing: -0.5px;
}

.mhEarn__whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.mhEarn__whatsapp-icon {
  color: #25D366;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.mhEarn__whatsapp-btn span {
  position: relative;
  z-index: 1;
}

.mhEarn__whatsapp-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

.mhEarn__whatsapp-btn:hover::before {
  width: 300px;
  height: 300px;
}

.mhEarn__whatsapp-btn:hover .mhEarn__whatsapp-icon {
  transform: scale(1.2) rotate(15deg);
  filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.5));
}

@media (max-width: 768px) {
  .mhEarn {
    padding: 80px 0;
  }

  .mhEarn__head {
    margin-bottom: 48px;
  }

  .mhEarn__title {
    font-size: clamp(36px, 8vw, 56px);
    letter-spacing: -1.5px;
    margin-bottom: 20px;
  }

  .mhEarn__subtitle {
    font-size: clamp(15px, 4vw, 18px);
  }

  .mhEarn__content {
    padding: 36px 24px;
  }

  .mhEarn__section {
    margin-bottom: 36px;
  }

  .mhEarn__items {
    max-width: 100%;
    gap: 16px;
  }

  .mhEarn__item {
    padding: 16px;
  }

  .mhEarn__item-text {
    font-size: 15px;
  }

  .mhEarn__credibility-text {
    font-size: clamp(20px, 5.5vw, 28px);
    margin-bottom: 32px;
  }

  .mhEarn__whatsapp-btn {
    padding: 14px 32px;
    font-size: 15px;
  }

  .mhEarn__item {
    padding: 16px;
    gap: 12px;
  }

  .mhEarn__item-icon {
    width: 36px;
    height: 36px;
  }

  .mhEarn__item-text {
    font-size: 15px;
  }

  .mhEarn__divider {
    margin: 40px 0;
  }

  .mhEarn__credibility-text {
    font-size: 22px;
    margin-bottom: 30px;
  }
}

/* Callout - keep for other sections if needed */
.callout{
  margin-top: 18px;
  padding: 18px;
  border-radius: var(--radius);
  background: #0B0B10;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
}
.callout strong{ color: var(--accent); }

/* Paths */
.path{
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}
.path__badge{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
}
.path h3{
  margin: 10px 0 8px;
  font-weight: 900;
  letter-spacing: -0.6px;
  font-size: 26px;
}
.path__desc{
  margin:0 0 14px;
  color: var(--muted);
  font-weight: 650;
}
.path h4{
  margin: 14px 0 8px;
  font-weight: 900;
}
.list{
  margin:0;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 650;
}
.list li{ margin: 8px 0; }
.outcome{
  margin: 16px 0;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,206,46,0.14);
  border: 1px solid rgba(255,206,46,0.22);
  font-weight: 800;
}

/* Logos */
.logoRow{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 18px;
}
.logo{
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.08);
  font-weight: 900;
  color: rgba(0,0,0,0.62);
  min-width: 120px;
  text-align:center;
}
.logoRow--tight .logo{
  min-width: 110px;
}
.logo--small{
  padding: 10px 12px;
  font-size: 13px;
}

/* ========================================
   OUR WORKS SECTION
======================================== */
.mhWork {
  position: relative;
  padding: 100px 0;
  background: #F5F2EA;
  overflow: hidden;
}

.mhWork__head {
  text-align: center;
  margin-bottom: 60px;
  opacity: 0;
}

.mhWork__title {
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  color: #0D0D12;
}

.mhMoney__grad--works {
  background: linear-gradient(135deg, #14d6c6, #7b2fe6, #ff6b6b, #ffce2e);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientScroll 8s ease infinite;
  display: inline-block;
}

.mhWork__subtitle {
  font-size: clamp(16px, 2vw, 20px);
  color: #5A5A66;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
  opacity: 0;
}

/* Brand Logo Carousel */
.mhWork__brands-section {
  margin: 60px 0;
  opacity: 0;
}

.mhWork__brands-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #8A8A96;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.mhWork__brands {
  overflow: hidden;
  position: relative;
}

.mhWork__brands::before,
.mhWork__brands::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.mhWork__brands::before {
  left: 0;
  background: linear-gradient(90deg, #F5F2EA 0%, transparent 100%);
}

.mhWork__brands::after {
  right: 0;
  background: linear-gradient(-90deg, #F5F2EA 0%, transparent 100%);
}

.mhWork__brands-track {
  display: flex;
  gap: 40px;
  animation: brandScroll 20s linear infinite;
  transition: animation-play-state 0.3s ease;
}

.mhWork__brands-track:hover {
  animation-play-state: paused;
}

@keyframes brandScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.mhWork__brand-item {
  flex-shrink: 0;
  width: 140px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: transparent;
  border: none;
  transition: all 0.3s ease;
}

.mhWork__brand-item:hover {
  transform: scale(1.1);
}

.mhWork__brand-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.4);
  transition: filter 0.5s ease;
}

.mhWork__brand-item:hover img {
  filter: grayscale(0%) opacity(1);
}

/* Tile Gallery */
.mhWork__gallery-wrapper {
  position: relative;
  max-width: 1400px;
  margin: 80px auto 0;
}

.mhWork__nav-btn {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: #0D0D12;
}

.mhWork__nav-btn:hover {
  background: #FFFFFF;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.mhWork__nav-btn--left {
  left: -60px;
}

.mhWork__nav-btn--right {
  right: -60px;
}

.mhWork__gallery {
  overflow: hidden;
  padding: 0;
}

.mhWork__gallery-track {
  display: flex;
  gap: 10px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mhWork__tile {
  position: relative;
  cursor: pointer;
  opacity: 0;
  flex: 0 0 calc(25% - 15px);
  min-width: 280px;
  max-width: 350px;
}

.mhWork__tile-media {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
}

.mhWork__tile-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.mhWork__tile-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.95) 100%);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.mhWork__tile-media:hover .mhWork__tile-overlay {
  opacity: 1;
}

.mhWork__tile-title {
  font-size: 22px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.3;
  margin: 0 0 16px 0;
}

.mhWork__tile-caption {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.mhWork__play-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(218, 165, 32, 0.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2;
  color: #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mhWork__play-btn:hover {
  background: rgba(218, 165, 32, 1);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.mhWork__play-btn svg {
  margin-left: 2px;
}

.mhWork__tile-info {
  margin-top: 16px;
  padding: 0;
  text-align: center;
}

.mhWork__tile-title-static {
  font-size: 17px;
  font-weight: 700;
  color: #0D0D12;
  line-height: 1.4;
  margin: 0;
}

.mhWork__highlight {
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 50%, #ff6b6b 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.mhWork__tile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(245, 242, 234, 0.5);
  border-radius: 8px;
  padding: 12px;
  gap: 12px;
  margin: 12px auto 0;
  max-width: 100%;
}

/* Add dividers between tile info sections */
.mhWork__tile:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -7px;
  bottom: -16px;
  width: 1px;
  height: calc(100% - 100%);
  min-height: 120px;
  background: rgba(0, 0, 0, 0.1);
}

.mhWork__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mhWork__stat-label {
  font-size: 10px;
  font-weight: 600;
  color: #8A8A96;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.mhWork__stat-value {
  font-size: 14px;
  font-weight: 800;
  color: #0D0D12;
}

@media (max-width: 960px) {
  .mhWork__brands-section {
    margin: 40px 0;
  }

  .mhWork__brands-label {
    margin-bottom: 20px;
  }

  .mhWork__gallery-wrapper {
    margin-top: 60px;
  }

  .mhWork__nav-btn {
    width: 40px;
    height: 40px;
  }

  .mhWork__nav-btn--left {
    left: -50px;
  }

  .mhWork__nav-btn--right {
    right: -50px;
  }

  .mhWork__tile {
    flex: 0 0 calc(33.333% - 14px);
  }
}

@media (max-width: 640px) {
  .mhWork {
    padding: 60px 0;
  }

  .mhWork__head {
    margin-bottom: 40px;
  }

  .mhWork__brands-section {
    margin: 40px 0;
  }

  .mhWork__brands-label {
    margin-bottom: 20px;
  }

  .mhWork__brand-item {
    width: 120px;
    height: 70px;
  }

  .mhWork__gallery-wrapper {
    margin-top: 40px;
    padding: 0;
  }

  /* Hide navigation arrows on mobile */
  .mhWork__nav-btn {
    display: none;
  }

  /* Enable touch scrolling */
  .mhWork__gallery {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .mhWork__gallery::-webkit-scrollbar {
    display: none;
  }

  .mhWork__gallery-track {
    gap: 20px;
    padding: 0 20px;
  }

  /* One card per view on mobile */
  .mhWork__tile {
    flex: 0 0 calc(100% - 40px);
    min-width: calc(100% - 40px);
    max-width: 400px;
    scroll-snap-align: center;
  }

  .mhWork__gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 40px;
  }

  .mhWork__tile-overlay {
    padding: 24px 20px;
  }

  .mhWork__tile-title {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .mhWork__tile-caption {
    font-size: 13px;
  }

  .mhWork__tile-info {
    padding: 0;
  }

  .mhWork__tile-title-static {
    font-size: 14px;
  }

  .mhWork__tile-stats {
    padding: 10px;
    gap: 8px;
    margin: 10px auto 0;
  }

  .mhWork__stat-label {
    font-size: 9px;
  }

  .mhWork__stat-value {
    font-size: 12px;
  }

  .mhWork__play-btn {
    width: 48px;
    height: 48px;
    bottom: 12px;
    right: 12px;
  }

  .mhWork__play-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* Work cards (keep for backward compatibility) */
.workCard{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}
.workCard__img{
  height: 190px;
  background-size: cover;
  background-position: center;
}
.workCard__body{
  padding: 16px;
}
.workCard__body h3{
  margin:0 0 6px;
  font-weight: 900;
}
.workCard__body p{
  margin:0;
  color: var(--muted);
  font-weight: 650;
}

/* ====== RECOGNITION SECTION ====== */
.mhRecognition {
  padding: 100px 0;
  background: #F5F2EA;
  position: relative;
  overflow: hidden;
}

.mhRecognition__head {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
  opacity: 0;
}

.mhRecognition__title {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: -1.5px;
  color: #0D0D12;
  margin: 0 0 16px 0;
  line-height: 1.1;
}

.mhRecognition__subtitle {
  font-size: clamp(16px, 2vw, 19px);
  color: #5A5A66;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  font-weight: 500;
  opacity: 0;
}

/* Brand Logo Carousel (Same as Works Section) */
.mhRecognition__brands-section {
  margin: 80px 0 0;
  opacity: 0;
}

.mhRecognition__brands-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #8A8A96;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.mhRecognition__brands {
  overflow: hidden;
  position: relative;
}

/* Hide second row on desktop */
.mhRecognition__brands--mobile-row2 {
  display: none;
}

.mhRecognition__brands::before,
.mhRecognition__brands::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.mhRecognition__brands::before {
  left: 0;
  background: linear-gradient(90deg, #F5F2EA 0%, transparent 100%);
}

.mhRecognition__brands::after {
  right: 0;
  background: linear-gradient(-90deg, #F5F2EA 0%, transparent 100%);
}

.mhRecognition__brands-track {
  display: flex;
  gap: 60px;
  animation: recognitionBrandScroll 10s linear infinite;
  transition: animation-play-state 0.3s ease;
}

.mhRecognition__brands-track:hover {
  animation-play-state: paused;
}

@keyframes recognitionBrandScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes recognitionBrandScrollReverse {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.mhRecognition__brand-item {
  flex-shrink: 0;
  width: 200px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: transparent;
  border: none;
  transition: all 0.3s ease;
}

.mhRecognition__brand-item:hover {
  transform: scale(1.1);
}

.mhRecognition__brand-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.4);
  transition: filter 0.5s ease;
}

.mhRecognition__brand-item:hover img {
  filter: grayscale(0%) opacity(1);
}

/* Recognition Pills */
.mhRecognition__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.mhRecognition__pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: default;
  opacity: 0;
  transform: translateY(20px);
}

.mhRecognition__pill:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  border-color: rgba(20, 214, 198, 0.3);
  background: rgba(255, 255, 255, 1);
}

.mhRecognition__pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(20, 214, 198, 0.12) 0%, rgba(123, 47, 230, 0.12) 100%);
  color: #14d6c6;
  transition: all 0.4s ease;
}

.mhRecognition__pill:hover .mhRecognition__pill-icon {
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 100%);
  color: #FFFFFF;
  transform: rotate(360deg);
  box-shadow: 0 4px 12px rgba(20, 214, 198, 0.4);
}

.mhRecognition__pill-icon svg {
  width: 20px;
  height: 20px;
}

.mhRecognition__pill span {
  font-size: 15px;
  font-weight: 700;
  color: #0D0D12;
  letter-spacing: 0.3px;
}

/* Responsive Design for Recognition */
@media (max-width: 768px) {
  .mhRecognition {
    padding: 60px 0;
  }

  .mhRecognition__head {
    margin-bottom: 40px;
  }

  .mhRecognition__brands-section {
    margin: 50px 0 40px;
  }

  .mhRecognition__brands-label {
    font-size: 11px;
    margin-bottom: 20px;
  }
  
  /* Show second row on mobile */
  .mhRecognition__brands--mobile-row2 {
    display: block;
    margin-top: 20px;
  }
  
  /* Left to right scroll (first row) */
  .mhRecognition__brands-track[data-direction="left"] {
    animation: recognitionBrandScroll 12s linear infinite;
  }
  
  /* Right to left scroll (second row) */
  .mhRecognition__brands-track[data-direction="right"] {
    animation: recognitionBrandScrollReverse 12s linear infinite;
  }

  

  .mhRecognition__brands-track {
    gap: 0px;
  }

  .mhRecognition__brand-item {
    width: 160px;
    height: 90px;
  }

  .mhRecognition__pills {
    gap: 12px;
  }

  .mhRecognition__pill {
    padding: 14px 24px;
    gap: 10px;
  }

  .mhRecognition__pill-icon {
    width: 32px;
    height: 32px;
  }

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

  .mhRecognition__pill span {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .mhRecognition__pill {
    padding: 12px 20px;
    gap: 8px;
  }

  .mhRecognition__pill-icon {
    width: 28px;
    height: 28px;
  }

  .mhRecognition__pill-icon svg {
    width: 16px;
    height: 16px;
  }

  .mhRecognition__pill span {
    font-size: 13px;
  }
}

/* ====== REVIEWS SECTION (What People Say) ====== */
.mhReviews {
  padding: 100px 0;
  background: #0E0E16;
  position: relative;
  overflow: hidden;
}

.mhReviews__head {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 80px;
  opacity: 0;
}

.mhReviews__title {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: -1.5px;
  color: #F5F2EA;
  margin: 0 0 16px 0;
  line-height: 1.1;
}

.mhReviews__title-gradient {
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 25%, #ff6b6b 50%, #ffce2e 75%, #14d6c6 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShiftReviews 6s ease infinite;
}

@keyframes gradientShiftReviews {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.mhReviews__subtitle {
  font-size: clamp(16px, 2vw, 19px);
  color: #8A8A96;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
  font-weight: 500;
  opacity: 0;
}

/* Floating Container */
.mhReviews__floating-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 60px;
  position: relative;
}

/* Rows that scroll */
.mhReviews__row {
  display: flex;
  gap: 20px;
  position: relative;
}

.mhReviews__row--left {
  animation: scrollLeftDesktop 24s linear infinite;
}

.mhReviews__row--right {
  animation: scrollRightDesktop 30s linear infinite;
}

.mhReviews__row:hover {
  animation-play-state: paused;
}

@keyframes scrollLeftDesktop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-150%);
  }
}

@keyframes scrollRightDesktop {
  0% {
    transform: translateX(-150%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Floating Cards */
.mhReviews__card {
  flex-shrink: 0;
  min-width: 320px;
  max-width: 380px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 28px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  opacity: 0;
  cursor: default;
}

.mhReviews__card-meta{
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.mhReviews__card-by{
  font-weight: 600;
}

.mhReviews__card-post{
  color: #FFFFFF;
  font-size: 0.85rem;
  opacity: 0.55;
  margin-top: 2px;
}


/* .mhReviews__card-by {
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  opacity: 0.8;
} */


.mhReviews__card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  border-color: rgba(20, 143, 214, 0.4);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
}

/* Floating animation for individual cards */
/* Floating animations removed - cards now only scroll horizontally */

.mhReviews__card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.mhReviews__card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mhReviews__card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mhReviews__card-text {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: #F5F2EA;
  letter-spacing: -0.2px;
}

.mhReviews__card-by {
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  opacity: 0.8;
}

/* Responsive Design for Reviews */
@media (max-width: 768px) {
  .mhReviews {
    padding: 60px 0;
  }

  .mhReviews__head {
    margin-bottom: 50px;
  }

  .mhReviews__floating-container {
    gap: 16px;
    margin-top: 40px;
  }

  .mhReviews__row--left {
    animation: scrollLeftMobile 10s linear infinite;
  }

  .mhReviews__row--right {
    animation: scrollRightMobile 12s linear infinite;
  }

  .mhReviews__card {
    min-width: 280px;
    max-width: 320px;
    padding: 24px;
  }

  .mhReviews__card-header {
    gap: 10px;
    margin-bottom: 14px;
  }

  .mhReviews__card-avatar {
    width: 44px;
    height: 44px;
  }

  .mhReviews__card-by {
    font-size: 13px;
  }

  .mhReviews__card-text {
    font-size: 16px;
  }

  @keyframes scrollLeftMobile {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-240%);
    }
  }

  @keyframes scrollRightMobile {
    0% {
      transform: translateX(-240%);
    }
    100% {
      transform: translateX(0);
    }
  }
}

@media (max-width: 480px) {
  .mhReviews__card {
    min-width: 240px;
    max-width: 280px;
    padding: 20px;
  }

  .mhReviews__card-header {
    gap: 8px;
    margin-bottom: 12px;
  }

  .mhReviews__card-avatar {
    width: 40px;
    height: 40px;
  }

  .mhReviews__card-by {
    font-size: 12px;
  }

  .mhReviews__card-text {
    font-size: 15px;
    margin-bottom: 12px;
  }

  .mhReviews__card-by {
    font-size: 13px;
  }
}

/* CTA Hero Section */
.mhCta {
  background: #F5F2EA;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.mhCta::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(123, 47, 230, 0.08) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}

.mhCta__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.mhCta__content {
  z-index: 2;
}

.mhCta__title {
  font-family: 'Inter', 'Noto Sans Sinhala', sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  line-height: 1.15;
  color: #0D0D12;
  margin: 0 0 24px;
  letter-spacing: -1px;
}

.mhCta__grad {
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 50%, #4A8FD8 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 6s ease infinite;
}

.mhCta__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(13, 13, 18, 0.7);
  margin: 0 0 32px;
  max-width: 480px;
}

.mhCta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 40px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

.mhCta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.4);
  background: linear-gradient(135deg, #128C7E 0%, #25D366 100%);
}

.mhCta__btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mhCta__note {
  margin: 16px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(13, 13, 18, 0.5);
}

.mhCta__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mhCta__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}

.mhCta__stat-card {
  position: relative;
  padding: 32px 28px;
  border-radius: 20px;
  backdrop-filter: blur(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.mhCta__stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(20, 214, 198, 0.1) 0%, rgba(123, 47, 230, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mhCta__stat-card:hover::before {
  opacity: 1;
}

.mhCta__stat-card:hover {
  transform: translateY(-4px);
}

.mhCta__stat-card--primary {
  background: linear-gradient(135deg, rgba(20, 214, 198, 0.15) 0%, rgba(123, 47, 230, 0.15) 100%);
  border: 1px solid rgba(20, 214, 198, 0.3);
  box-shadow: 0 8px 24px rgba(20, 214, 198, 0.2);
  backdrop-filter: blur(20px);
}

.mhCta__stat-card--secondary {
  background: linear-gradient(135deg, rgba(20, 214, 198, 0.9) 0%, rgba(123, 47, 230, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(123, 47, 230, 0.4);
  color: #ffffff;
}

.mhCta__stat-card--accent {
  background: linear-gradient(135deg, #7b2fe6 0%, #14d6c6 100%);
  border: 1px solid rgba(123, 47, 230, 0.4);
  box-shadow: 0 8px 24px rgba(123, 47, 230, 0.35);
  color: #ffffff;
}

.mhCta__stat-card--highlight {
  background: linear-gradient(135deg, rgba(123, 47, 230, 0.2) 0%, rgba(20, 214, 198, 0.2) 100%);
  border: 1px solid rgba(20, 214, 198, 0.4);
  box-shadow: 0 8px 24px rgba(20, 214, 198, 0.25);
  backdrop-filter: blur(20px);
}

.mhCta__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
}

.mhCta__stat-icon svg {
  width: 36px;
  height: 36px;
  stroke: currentColor;
}

.mhCta__stat-content {
  position: relative;
  z-index: 2;
}

.mhCta__stat-value {
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -1px;
}

.mhCta__stat-card--secondary .mhCta__stat-value {
  color: #ffffff;
}

.mhCta__stat-label {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.7;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Footer */
.mhFooter {
  background: #0a0a0a;
  color: rgba(255, 255, 255, 0.8);
  padding: 80px 0 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.mhFooter__main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mhFooter__brand {
  max-width: 420px;
}

.mhFooter__brand-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.mhFooter__brand-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.mhFooter__logo {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 900;
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 25%, #ff6b6b 50%, #ffce2e 75%, #14d6c6 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 6s ease infinite;
  margin: 0;
  letter-spacing: -0.5px;
}

.mhFooter__logo-dot {
  background: #FFCE2E;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mhFooter__tagline {
  font-family: 'Inter', 'Noto Sans Sinhala', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.mhFooter__nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mhFooter__link {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mhFooter__link:hover {
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 25%, #ff6b6b 50%, #ffce2e 75%, #14d6c6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mhFooter__social {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.mhFooter__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.mhFooter__social-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

.mhFooter__social-link svg path {
  fill: currentColor;
}

.mhFooter__social-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* YouTube - Red */
.mhFooter__social-link[aria-label="YouTube"]:hover {
  background: #FF0000;
  color: #ffffff;
}

/* Facebook - Blue */
.mhFooter__social-link[aria-label="Facebook"]:hover {
  background: #1877F2;
  color: #ffffff;
}

/* Instagram - Gradient */
.mhFooter__social-link[aria-label="Instagram"]:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  color: #ffffff;
}

/* TikTok - Black/Cyan */
.mhFooter__social-link[aria-label="TikTok"]:hover {
  background: #000000;
  color: #00f2ea;
}

.mhFooter__bottom {
  text-align: center;
}

.mhFooter__copyright {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 8px;
}

.mhFooter__credit {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
}

.mhFooter__credit-link {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all 0.3s ease;
}

.mhFooter__credit-link:hover {
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Responsive */
@media (max-width: 980px) {
  .mhCta__card {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mhCta__content {
    text-align: center;
  }

  .mhCta__text {
    margin-left: auto;
    margin-right: auto;
  }

  .mhCta__btn {
    margin-left: auto;
    margin-right: auto;
  }

  .mhCta__stats-grid {
    grid-template-columns: 1fr;
  }

  .mhFooter__main {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mhFooter__brand {
    text-align: center;
    max-width: 100%;
  }

  .mhFooter__brand-wrapper {
    justify-content: center;
  }

  .mhFooter__tagline {
    text-align: center;
  }

  .mhFooter__nav {
    align-items: center;
    text-align: center;
  }

  .mhFooter__social {
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .mhCta {
    padding: 60px 0;
  }

  .mhCta__stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mhCta__stat-card {
    padding: 24px 20px;
    text-align: center;
  }

  .mhCta__stat-icon {
    margin-left: auto;
    margin-right: auto;
  }

  .mhCta__stat-value {
    font-size: 28px;
  }

  .mhCta__stat-label {
    font-size: 11px;
  }

  .mhFooter {
    padding: 50px 0 30px;
  }
}

/* Responsive */
@media (max-width: 980px){
  .nav__links{ display:none; }
  .nav__burger{ display:inline-block; }
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__right{ display:none; }
  .stats__inner{ grid-template-columns: repeat(2, 1fr); }
  .grid--4{ grid-template-columns: repeat(2, 1fr); }
  .grid--3{ grid-template-columns: 1fr; }
  .grid--2{ grid-template-columns: 1fr; }
  .final__inner{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .container{ width: calc(100% - 40px); } /* Match navbar: 20px padding each side */
  .stats__inner{ grid-template-columns: 1fr; }
}


/* ===== HERO (Screenshot style, no black background) ===== */
.heroShot{
  background: transparent;     /* ✅ no black background */
  padding: 28px;               /* page spacing */
}

.heroShot__card{
  max-width: 1320px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 22px;
  padding: 54px 56px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 18px 55px rgba(0,0,0,0.10);
}

/* Left content */
.heroShot__kicker{
  font-family: Inter, "Noto Sans Sinhala", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 22px;
  color: #2b2b2b;
}
.heroShot__kickerBold{ font-weight: 900; margin-right: 6px; }
.heroShot__kickerLight{ font-weight: 500; opacity: 0.75; }

.heroShot__title{
  margin: 0 0 18px;
  font-family: Inter, "Noto Sans Sinhala", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.03;
  font-size: clamp(44px, 4.3vw, 72px);
  color: #101014;
}

.heroShot__lead{
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: #6a6a73;
  max-width: 62ch;
}

.heroShot__body{
  margin: 0 0 30px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  color: #7a7a84;
  max-width: 70ch;
}

/* Button (pill) */
.heroShot__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: #14141a;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.heroShot__btn:hover{ opacity: 0.92; }
.heroShot__btn:active{ transform: scale(0.98); }
.heroShot__arrow{ font-size: 18px; line-height: 1; }

/* Right image area */
.heroShot__right{
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.heroShot__image{
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  object-position: bottom right;
  transform: translateY(16px);
}
/* 

/* Bottom white fade on image */
.heroShot__fade{
  position: absolute;
  left: -40px;
  right: -40px;
  bottom: -10px;
  height: 140px;
  background: linear-gradient(to top, #ffffff 10%, rgba(255,255,255,0) 90%);
  pointer-events: none;
}

/* Responsive */
@media (max-width: 980px){
  .heroShot__card{
    grid-template-columns: 1fr;
    padding: 34px 22px;
    gap: 18px;
  }
  .heroShot__right{
    justify-content: center;
  } */
  .heroShot__image{
    max-height: 380px;
    transform: translateY(10px);
  }
}













.heroShot__title--gradient{
  /* Gradient like your image (teal → blue → purple) */
  background: linear-gradient(
    90deg,
    #14d6c6 0%,
    #16b8e6 22%,
    #1f7fe8 48%,
    #3f5be2 70%,
    #7b2fe6 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  /* optional: makes it pop a bit on white */
  filter: saturate(1.15) contrast(1.05);
}

/* [11:08 PM, 1/27/2026] Kasun(Kassa(e)): #0586E1
[11:08 PM, 1/27/2026] Kasun(Kassa(e)): #01B7CD
[11:09 PM, 1/27/2026] Kasun(Kassa(e)): #6A47E1
[11:09 PM, 1/27/2026] Kasun(Kassa(e)): #307ADA */

















/* ===== PATHS SECTION (Who You Can Become) ===== */
.mhPaths {
  position: relative;
  padding: 120px 0;
  background: #0E0E16;
  overflow: hidden;
}

.mhPaths__head {
  text-align: center;
  margin-bottom: 80px;
}

.mhPaths__title {
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #F5F2EA;
  margin: 0 0 16px;
  line-height: 1.1;
}

.mhPaths__title-gradient {
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: gradientFlow 6s ease infinite;
}

.mhPaths__subtitle {
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(245, 242, 234, 0.6);
  font-weight: 600;
  margin: 0;
}

.mhPaths__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  position: relative;
  z-index: 2;
}

.mhPaths__card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 40px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  opacity: 1;
}

.mhPaths__card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

.mhPaths__card:hover .mhPaths__card-glow {
  opacity: 0.4;
}

.mhPaths__card:hover .mhPaths__icon {
  transform: scale(1.05);
}

.mhPaths__card:hover .mhPaths__btn {
  background: linear-gradient(135deg, #4A8FD8 0%, #7b2fe6 100%);
  color: #ffffff;
  transform: translateX(4px);
}

.mhPaths__card[data-path="2"]:hover .mhPaths__btn {
  background: linear-gradient(135deg, #FF6B6B 0%, #FFCE2E 100%);
  color: #0E0E16;
}

.mhPaths__card-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.2;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.mhPaths__card-glow--creative {
  background: linear-gradient(135deg, #4A8FD8 0%, #7b2fe6 100%);
  top: -100px;
  left: -100px;
}

.mhPaths__card-glow--digital {
  background: linear-gradient(135deg, #FF6B6B 0%, #FFCE2E 100%);
  bottom: -100px;
  right: -100px;
}

.mhPaths__card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.mhPaths__badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(74, 143, 216, 0.1);
  border: 1px solid rgba(74, 143, 216, 0.2);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4A8FD8;
}

.mhPaths__card[data-path="2"] .mhPaths__badge {
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.2);
  color: #FF6B6B;
}

.mhPaths__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mhPaths__icon svg {
  color: #4A8FD8;
  width: 32px;
  height: 32px;
}

.mhPaths__card[data-path="2"] .mhPaths__icon svg {
  color: #FF6B6B;
}

.mhPaths__card-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #F5F2EA;
  margin: 0 0 20px;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.mhPaths__gradient-text {
  background: linear-gradient(135deg, #4A8FD8 0%, #7b2fe6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.mhPaths__gradient-text--digital {
  background: linear-gradient(135deg, #FF6B6B 0%, #FFCE2E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.mhPaths__card-desc {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(245, 242, 234, 0.7);
  margin: 0 0 32px;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.mhPaths__section {
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.mhPaths__section-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(245, 242, 234, 0.8);
  margin: 0 0 16px;
}

.mhPaths__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mhPaths__list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(245, 242, 234, 0.65);
  font-weight: 500;
}

.mhPaths__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, #4A8FD8 0%, #7b2fe6 100%);
  border-radius: 50%;
}

.mhPaths__card[data-path="2"] .mhPaths__list li::before {
  background: linear-gradient(135deg, #FF6B6B 0%, #FFCE2E 100%);
}

.mhPaths__outcome {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 20px;
  background: rgba(74, 143, 216, 0.05);
  border: 1px solid rgba(74, 143, 216, 0.15);
  border-radius: 16px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.mhPaths__card[data-path="2"] .mhPaths__outcome {
  background: rgba(255, 107, 107, 0.05);
  border: 1px solid rgba(255, 107, 107, 0.15);
}

.mhPaths__outcome-icon {
  flex-shrink: 0;
  color: #4A8FD8;
  margin-top: 2px;
}

.mhPaths__card[data-path="2"] .mhPaths__outcome-icon {
  color: #FF6B6B;
}

.mhPaths__outcome div {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 242, 234, 0.8);
  font-weight: 500;
}

.mhPaths__outcome strong {
  color: #4A8FD8;
  font-weight: 700;
}

.mhPaths__card[data-path="2"] .mhPaths__outcome strong {
  color: #FF6B6B;
}

.mhPaths__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  color: #F5F2EA;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

.mhPaths__btn svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mhPaths__btn:hover svg {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 980px) {
  .mhPaths {
    padding: 80px 0;
  }

  .mhPaths__head {
    margin-bottom: 60px;
  }

  .mhPaths__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .mhPaths__card {
    padding: 32px 24px;
  }
}

@media (max-width: 560px) {
  .mhPaths {
    padding: 60px 0;
  }

  .mhPaths__head {
    margin-bottom: 40px;
  }

  .mhPaths__card {
    padding: 28px 20px;
  }

  .mhPaths__card-header {
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
  }

  .mhPaths__icon {
    display: none;
  }

  .mhPaths__card-title {
    text-align: center;
  }

  .mhPaths__card-desc {
    text-align: center;
  }

  .mhPaths__section-title {
    text-align: center;
  }

  .mhPaths__btn {
    margin: 0 auto;
    display: flex;
  }
}

/* ===== PATH MODALS ===== */
.mhModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mhModal.active {
  display: flex;
  opacity: 1;
}

.mhModal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mhModal__container {
  position: relative;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: rgba(14, 14, 22, 0.95);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 24px;
  padding: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.mhModal.active .mhModal__container {
  transform: scale(1);
}

.mhModal__container--creative {
  border: 2px solid rgba(74, 143, 216, 0.3);
  box-shadow: 0 20px 60px rgba(74, 143, 216, 0.2),
              0 0 100px rgba(123, 47, 230, 0.1);
}

.mhModal__container--digital {
  border: 2px solid rgba(255, 107, 107, 0.3);
  box-shadow: 0 20px 60px rgba(255, 107, 107, 0.2),
              0 0 100px rgba(255, 206, 46, 0.1);
}

.mhModal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #F5F2EA;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.mhModal__close:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

/* Sticky Header */
.mhModal__header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(14, 14, 22, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 32px 48px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mhModal__title {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #F5F2EA;
  margin: 0;
  line-height: 1.3;
  text-align: center;
}

.mhModal__title-gradient--creative {
  background: linear-gradient(135deg, #4A8FD8 0%, #7b2fe6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mhModal__title-gradient--digital {
  background: linear-gradient(135deg, #FF6B6B 0%, #FFCE2E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Scrollable Content */
.mhModal__content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 48px 48px;
  
  /* Hide scrollbar overflow from rounded corners */
  -ms-overflow-style: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.mhModal__content::-webkit-scrollbar {
  width: 8px;
}

.mhModal__content::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

.mhModal__content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  border: 2px solid rgba(14, 14, 22, 0.95);
}

.mhModal__content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.mhModal__section {
  margin-bottom: 32px;
}

.mhModal__subtitle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #F5F2EA;
  margin: 0 0 16px;
}

.mhModal__icon {
  flex-shrink: 0;
}

.mhModal__icon--creative {
  stroke: url(#iconGradientCreative);
}

.mhModal__icon--digital {
  stroke: url(#iconGradientDigital);
}

.mhModal__section p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(245, 242, 234, 0.8);
  margin: 0 0 16px;
}

.mhModal__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mhModal__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(245, 242, 234, 0.75);
}

.mhModal__container--creative .mhModal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, #4A8FD8 0%, #7b2fe6 100%);
  border-radius: 50%;
}

.mhModal__container--digital .mhModal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, #FF6B6B 0%, #FFCE2E 100%);
  border-radius: 50%;
}

.mhModal__info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.mhModal__info-item {
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mhModal__info-item strong {
  font-size: 14px;
  color: #F5F2EA;
  font-weight: 700;
}

.mhModal__info-item span {
  font-size: 14px;
  color: rgba(245, 242, 234, 0.7);
  line-height: 1.5;
}

.mhModal__tldr {
  display: flex;
  gap: 12px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  margin-bottom: 32px;
}

.mhModal__tldr strong {
  font-size: 16px;
  color: #F5F2EA;
  display: block;
  margin-bottom: 12px;
}

.mhModal__tldr p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(245, 242, 234, 0.8);
}

/* Center-aligned CTA Wrapper */
.mhModal__cta-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.mhModal__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mhModal__cta--creative {
  background: linear-gradient(135deg, #4A8FD8 0%, #7b2fe6 100%);
  color: #ffffff;
}

.mhModal__cta--creative:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(74, 143, 216, 0.4);
}

.mhModal__cta--digital {
  background: linear-gradient(135deg, #FF6B6B 0%, #FFCE2E 100%);
  color: #0E0E16;
}

.mhModal__cta--digital:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255, 107, 107, 0.4);
}

.mhModal__cta svg {
  transition: transform 0.3s ease;
}

.mhModal__cta:hover svg {
  transform: translateX(4px);
}

/* SVG Gradients for Icons */
svg defs {
  position: absolute;
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* Hide mobile-break on desktop */
.mobile-break {
  display: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
  /* Show mobile-break on mobile */
  .mobile-break {
    display: inline;
  }

  .mhModal__container {
    max-height: 95vh;
  }

  .mhModal__header {
    padding: 24px 24px 20px;
  }

  .mhModal__content {
    padding: 24px 24px 32px;
  }

  .mhModal__close {
    top: 16px;
    right: 16px;
  }

  .mhModal__title {
    font-size: 24px;
    padding-right: 30px;
  }

  .mhModal__info-grid {
    grid-template-columns: 1fr;
  }

  .mhModal__tldr {
    text-align: center;
  }

  .mhModal__tldr p {
    text-align: center;
  }
}


/* ====== NAV ====== */
/* ===== NAVBAR (DARK GLASSMORPHISM) ===== */
.mhNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(14, 14, 22, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrolled state - only pills visible, navbar vanishes */
.mhNav--scrolled {
  background: rgba(14, 14, 22, 0);
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

.mhNav--scrolled .mhBrand,
.mhNav--scrolled .mhNav__cta {
  opacity: 0;
  pointer-events: none;
}

.mhNav--scrolled .mhNav__pills {
  background: rgba(14, 14, 22, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.mhNav--scrolled .mhNav__burger {
  background: rgba(14, 14, 22, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.mhNav__inner {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  transition: justify-content 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Brand Logo */
.mhBrand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #FFFFFF;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.mhBrand__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.mhBrand:hover {
  transform: translateY(-2px);
}

.mhBrand:hover .mhBrand__icon {
  transform: rotate(180deg);
  color: #7b2fe6;
}

.mhBrand__icon {
  width: 26px;
  height: 26px;
  color: #14d6c6;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mhBrand__text {
  font-size: 16px;
  font-weight: 900;
  background: linear-gradient(135deg, #FFFFFF 0%, rgba(255, 255, 255, 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Navigation Pills */
.mhNav__pills {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mhPill {
  position: relative;
  padding: 11px 18px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.mhPill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mhPill:hover {
  color: rgba(255, 255, 255, 0.9);
}

.mhPill:hover::before {
  opacity: 1;
}

.mhPill--active {
  color: #ffffff;
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 100%);
  box-shadow: 0 4px 12px rgba(20, 214, 198, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-weight: 800;
}

.mhPill--active::before {
  display: none;
}

/* CTA Button */
.mhNav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 100px;
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(20, 214, 198, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  z-index: 2;
  position: relative;
  overflow: hidden;
}

.mhNav__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #7b2fe6 0%, #14d6c6 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mhNav__cta span,
.mhNav__cta svg {
  position: relative;
  z-index: 1;
}

.mhNav__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 214, 198, 0.1);
}

.mhNav__cta:hover::before {
  opacity: 1;
}

.mhNav__cta:active {
  transform: translateY(0);
}

.mhNav__ctaArrow {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mhNav__cta:hover .mhNav__ctaArrow {
  transform: translate(2px, -2px);
}

/* Hamburger Menu Button */
.mhNav__burger {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mhNav__burger span {
  display: block;
  width: 20px;
  height: 2.5px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mhNav__burger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
}

.mhNav__burger:hover span {
  background: #FFCE2E;
}

/* Mobile Menu Overlay */
.mhMobileMenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(11, 11, 16, 0.98);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Lower scroll indicator when mobile menu is open */
body:has(.mhMobileMenu.is-open) .mhSplitHero__scrollDown {
  z-index: 1;
}

.mhMobileMenu::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 206, 46, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.mhMobileMenu.is-open {
  opacity: 1;
  visibility: visible;
}

.mhMobileMenu__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 101;
  padding: 0;
}

.mhMobileMenu__close svg {
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.mhMobileMenu__close:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.12);
  transform: rotate(90deg);
}

.mhMobileMenu__close:hover svg {
  color: #FF6B6B;
}

.mhMobileMenu__inner {
  text-align: center;
  width: 100%;
  max-width: 600px;
  padding: 60px 24px;
  position: relative;
  z-index: 2;
}

.mhMobileMenu__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
}

.mhMobileMenu__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.mhMobileMenu__brand svg {
  color: #FFCE2E;
  filter: drop-shadow(0 4px 12px rgba(255, 206, 46, 0.3));
}

.mhMobileMenu__brandText {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 1.2px;
  background: linear-gradient(135deg, #FFFFFF 0%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mhMobileMenu__nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
}

.mhMobileMenu__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  font-size: 24px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: -0.5px;
  overflow: hidden;
}

.mhMobileMenu__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #FFCE2E 0%, #7b2fe6 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mhMobileMenu__linkNumber {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.mhMobileMenu__linkText {
  flex: 1;
  text-align: center;
}

.mhMobileMenu__link:hover,
.mhMobileMenu__link.is-active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.mhMobileMenu__link:hover::before,
.mhMobileMenu__link.is-active::before {
  opacity: 1;
}

.mhMobileMenu__link:hover .mhMobileMenu__linkNumber,
.mhMobileMenu__link.is-active .mhMobileMenu__linkNumber {
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mhMobileMenu__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 48px;
  border-radius: 100px;
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(20, 214, 198, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.mhMobileMenu__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #7b2fe6 0%, #14d6c6 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mhMobileMenu__cta span,
.mhMobileMenu__cta svg {
  position: relative;
  z-index: 1;
}

.mhMobileMenu__cta svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mhMobileMenu__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(20, 214, 198, 0.1);
}

.mhMobileMenu__cta:hover::before {
  opacity: 1;
}

.mhMobileMenu__cta:hover svg {
  transform: translate(2px, -2px);
}

/* ===== HERO SECTION ===== */
.mhHero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 0 80px;
  background: #0E0E16;
  overflow: hidden;
}

.mhHero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.mhHero__grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

.mhHero__glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
}

.mhHero__glow--yellow {
  background: radial-gradient(circle, #FF6B6B 0%, #FFCE2E 50%, transparent 70%);
  top: 50%;
  right: -400px;
  transform: translateY(-50%);
}

.mhHero__glow--purple {
  background: radial-gradient(circle, #14d6c6 0%, #7b2fe6 50%, transparent 70%);
  top: 50%;
  left: -400px;
  transform: translateY(-50%);
}

.mhHero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}

.mhHero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 206, 46, 0.1);
  border: 1px solid rgba(255, 206, 46, 0.2);
  border-radius: 100px;
  margin-bottom: 32px;
  font-size: 13px;
  font-weight: 700;
  color: #FFCE2E;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mhHero__badge-icon {
  color: #FFCE2E;
}

.mhHero__title {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: #F5F2EA;
  margin: 0 0 28px;
  opacity: 1;
}

.mhHero__title-intro {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700;
  display: inline-block;
  opacity: 0.9;
  letter-spacing: 0.01rem;
  position: relative;
  top: -8px;
}

.mhHero__title-amp {
  font-weight: 900;
}

.mhHero__title-outro {
  font-size: clamp(24px, 3.5vw, 42px);
  font-weight: 700;
  display: inline-block;
  opacity: 0.9;
  letter-spacing: 0.01rem;
  position: relative;
  top: -100px; /* make -12px when other path added */
}

@media (max-width: 980px) {
  .mhHero__title-outro {
  font-size: clamp(24px, 3.5vw, 42px);
  font-weight: 700;
  display: inline-block;
  opacity: 0.9;
  letter-spacing: 0.01rem;
  position: relative;
  top: -60px; /* make -12px when other path added */
  }
}

.mhHero__gradient {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 900;
  display: inline;
}

.mhHero__gradient--creative {
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.01rem;
  line-height: 1.5;
}

.mhHero__gradient--digital {
  background: linear-gradient(135deg, #FF6B6B 0%, #FFCE2E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.01rem;
  line-height: 1.5;
}

.mhHero__subtitle {
  font-size: clamp(16px, 2.5vw, 20px);
  line-height: 1.6;
  color: rgba(245, 242, 234, 0.7);
  max-width: 700px;
  margin: 0 auto 40px;
  font-weight: 500;
  opacity: 1;
  position: relative;    /* remove this when other path added */
  top: -100px;           /* remove this when other path added */
}

@media (max-width: 980px) {
  .mhHero__subtitle {
  font-size: clamp(16px, 2.5vw, 20px);
  line-height: 1.6;
  color: rgba(245, 242, 234, 0.7);
  max-width: 700px;
  margin: 0 auto 40px;
  font-weight: 500;
  opacity: 1;
  position: relative;    /* remove this when other path added */
  top: -70px;           /* remove this when other path added */
}
}

.mhHero__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 20;
  top: -80px;         /* remove this when other path added */
}

@media (max-width: 980px) {
  .mhHero__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 20;
  top: -60px;         /* remove this when other path added */
}
}

.mhHero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  opacity: 1 !important;
  visibility: visible !important;
}

.mhHero__btn--primary {
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 50%, #FF6B6B 100%);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
  color: #FFFFFF;
  border: none;
}

.mhHero__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 206, 46, 0.3);
}

.mhHero__btn--primary svg {
  transition: transform 0.3s ease;
}

.mhHero__btn--primary:hover svg {
  transform: translateX(4px);
}

.mhHero__btn--secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #F5F2EA;
}

.mhHero__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

.mhHero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  position: relative;
  top: -40px;       /* remove this when other path added */
}

.mhHero__stat {
  text-align: center;
  opacity: 1;
}

.mhHero__stat-value {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 50%, #FFCE2E 100%);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mhHero__stat-label {
  font-size: 13px;
  color: rgba(245, 242, 234, 0.6);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Floating decorative elements */
.mhHero__float {
  position: absolute;
  z-index: 1;
  opacity: 0.25;
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
}

.mhHero__float svg {
  color: #FFCE2E;
  filter: drop-shadow(0 0 10px rgba(255, 206, 46, 0.5));
}

.mhHero__float--social {
  opacity: 0.25;
}

.mhHero__float--social svg {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.mhHero__float--1 {
  top: 15%;
  left: 10%;
  animation-delay: 0s;
}

.mhHero__float--2 {
  top: 25%;
  right: 15%;
  animation-delay: 1s;
}

.mhHero__float--3 {
  bottom: 20%;
  left: 15%;
  animation-delay: 2s;
}

.mhHero__float--4 {
  bottom: 85%;
  right: 9%;
  animation-delay: 3s;
}

.mhHero__float--5 {
  top: 35%;
  left: 5%;
  animation-delay: 1.5s;
}

.mhHero__float--6 {
  top: 50%;
  right: 8%;
  animation-delay: 2.5s;
}

.mhHero__float--7 {
  bottom: 35%;
  left: 17%;
  animation-delay: 3.5s;
}

.mhHero__float--8 {
  top: 50%;
  right: 20%;
  animation-delay: 0.5s;
}

/* Social media icons */
.mhHero__float--9 {
  top: 20%;
  left: 18%;
  animation-delay: 4s;
}

.mhHero__float--10 {
  top: 45%;
  right: 12%;
  animation-delay: 4.5s;
}

.mhHero__float--11 {
  bottom: 53%;
  right: 28%;
  animation-delay: 5s;
}

.mhHero__float--12 {
  bottom: 36%;
  left: 28%;
  animation-delay: 5.5s;
}

.mhHero__float--13 {
  top: 30%;
  right: 25%;
  animation-delay: 6s;
}

.mhHero__float--14 {
  bottom: 15%;
  left: 20%;
  animation-delay: 6.5s;
}

.mhHero__float--15 {
  top: 40%;
  left: 25%;
  animation-delay: 1s;
}

.mhHero__float--16 {
  bottom: 70%;
  right: 5%;
  animation-delay: 2s;
}

.mhHero__float--17 {
  top: 55%;
  left: 8%;
  animation-delay: 3s;
}

.mhHero__float--18 {
  top: 70%;
  right: 15%;
  animation-delay: 4s;
}

.mhHero__float--19 {
  bottom: 60%;
  left: 15%;
  animation-delay: 2.5s;
}

.mhHero__float--20 {
  top: 65%;
  right: 22%;
  animation-delay: 3.5s;
}

/* Emoji styling */
.mhHero__emoji {
  font-size: 32px;
  filter: drop-shadow(0 0 8px rgba(255, 206, 46, 0.4));
  opacity: 0.15;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(10deg);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Responsive */
@media (max-width: 980px) {
  .mhHero {
    padding: 100px 0 60px;
    min-height: auto;
  }

  .mhHero__stats {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 24px;
  }

  .mhHero__buttons {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .mhHero__btn {
    width: 100%;
    justify-content: center;
  }

  .mhHero__float {
    opacity: 0.2;
  }
  
  .mhHero__float--social {
    opacity: 0.25;
  }
  
  /* Tablet-specific repositioning */
  .mhHero__float--1 { top: 12%; left: 8%; }
  .mhHero__float--2 { top: 22%; right: 10%; }
  .mhHero__float--3 { bottom: 38%; left: 15%; }
  .mhHero__float--4 { bottom: 28%; right: 5%; }
  .mhHero__float--5 { top: 32%; left: 4%; }
  .mhHero__float--6 { top: 48%; right: 6%; }
  .mhHero__float--7 { bottom: 32%; left: 6%; }
  .mhHero__float--8 { top: 58%; right: 18%; }
  .mhHero__float--9 { top: 28%; left: 80%; }
  .mhHero__float--10 { top: 14%; right: 82%; }
  .mhHero__float--11 { bottom: 70%; right: 85%; }
  .mhHero__float--12 { bottom: 50%; left: 25%; }
  .mhHero__float--13 { top: 5%; right: 75%; }
  .mhHero__float--14 { bottom: 36%; left: 38%; }
  .mhHero__float--15 { top: 35%; left: 22%; }
  .mhHero__float--16 { bottom: 48%; right: 25%; }
  .mhHero__float--17 { top: 52%; left: 6%; }
  .mhHero__float--18 { top: 10%; right: 20%; }
  .mhHero__float--19 { bottom: 58%; left: 12%; }
  .mhHero__float--20 { top: 32%; right: 10%; }
  
  .mhHero__emoji {
    font-size: 28px;
  }
}

@media (max-width: 560px) {
  .mhHero {
    padding: 80px 0 40px;
  }

  .mhHero__badge {
    font-size: 11px;
    padding: 8px 16px;
  }

  .mhHero__stats {
    padding: 24px 20px;
  }

  .mhHero__stat-value {
    margin-bottom: 4px;
  }

  .mhHero__stat-label {
    font-size: 11px;
  }
  
  /* Mobile-specific repositioning - spread elements more evenly */
  .mhHero__float--1 { top: 5%; left: 5%; }
  .mhHero__float--2 { top: 7%; right: 18%; }
  .mhHero__float--3 { bottom: 78%; left: 68%; }
  .mhHero__float--4 { bottom: 30%; right: 5%; }
  .mhHero__float--5 { top: 25%; left: 3%; }
  .mhHero__float--6 { top: 40%; right: 4%; }
  .mhHero__float--7 { bottom: 35%; left: 4%; }
  .mhHero__float--8 { top: 35%; right: 39%; }
  .mhHero__float--9 { top: 20%; left: 32%; }
  .mhHero__float--10 { top: 23%; right: 8%; }
  .mhHero__float--11 { bottom: 90%; right: 42%; }
  .mhHero__float--12 { bottom: 32%; left: 33%; }
  .mhHero__float--13 { top: 30%; right: 15%; }
  .mhHero__float--14 { bottom: 62%; left: 18%; }
  .mhHero__float--15 { top: 32%; left: 15%; }
  .mhHero__float--16 { bottom: 45%; right: 3%; }
  .mhHero__float--17 { top: 55%; left: 5%; }
  .mhHero__float--18 { top: 45%; right: 49%; }
  .mhHero__float--19 { bottom: 50%; left: 10%; }
  .mhHero__float--20 { top: 65%; right: 25%; }
  
  .mhHero__emoji {
    font-size: 24px;
  }
}

/* press strip */
.mhPress--full{
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(0,0,0,0.06);
  color: rgba(16,16,20,0.40);
  font-weight: 800;
  font-size: 12px;
  text-align: center;
}

/* Infinite scrolling carousel */
.mhPress__carousel{
  margin-top: 14px;
  overflow: hidden;
  position: relative;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.mhPress__track{
  display: flex;
  gap: 32px;
  animation: scrollLogos 40s linear infinite;
  width: fit-content;
}

.mhPress__track:hover{
  animation-play-state: paused;
}

@keyframes scrollLogos{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

.mhPress__logo{
  flex-shrink: 0;
  min-width: 120px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 8px;
  background: rgba(0,0,0,0.06);
  opacity: .5;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* ===== NAVBAR RESPONSIVE ===== */
@media (max-width: 968px) {
  .mhNav__pills {
    display: none;
  }

  .mhNav__burger {
    display: flex;
  }

  /* Keep hamburger on the right when scrolled, don't center */
  .mhNav--scrolled .mhNav__inner {
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  .mhNav__inner {
    width: calc(100% - 32px);
    padding: 14px 0;
  }

  .mhBrand__text {
    font-size: 14px;
  }

  .mhBrand__icon {
    width: 22px;
    height: 22px;
  }

  .mhNav__cta {
    padding: 10px 16px;
    font-size: 13px;
    gap: 6px;
  }

  .mhNav__ctaArrow {
    width: 14px;
    height: 14px;
  }

  .mhNav__burger {
    width: 44px;
    height: 44px;
  }

  .mhMobileMenu__inner {
    padding: 40px 20px;
  }

  .mhMobileMenu__brand svg {
    width: 32px;
    height: 32px;
  }

  .mhMobileMenu__brandText {
    font-size: 22px;
  }

  .mhMobileMenu__link {
    padding: 20px 20px;
    font-size: 20px;
  }

  .mhMobileMenu__linkNumber {
    font-size: 12px;
  }

  .mhMobileMenu__cta {
    padding: 16px 36px;
    font-size: 16px;
  }
}

.mhPress__logo {
  color: rgba(16,16,20,0.6);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}

.mhPress__logo:hover{
  opacity: .75;
  transform: scale(1.05);
}

/* floating social icons & emojis */
.mhFloatingIcons{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  max-height: calc(100% - 160px); /* Don't go beyond buttons section */
}
.mhIcon{
  position: absolute;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  animation: iconFadeIn 0.8s ease forwards;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.08));
}
.mhIcon:hover{
  transform: translateY(-5px) scale(1.1) !important;
}
/* Subtle movement variations */
.mhIcon--move1{
  animation: iconFadeIn 0.8s ease forwards, iconFloatSubtle1 6s ease-in-out infinite;
}
.mhIcon--move2{
  animation: iconFadeIn 0.8s ease forwards, iconFloatSubtle2 7s ease-in-out infinite;
}
.mhIcon--move3{
  animation: iconFadeIn 0.8s ease forwards, iconFloatSubtle3 8s ease-in-out infinite;
}
.mhIcon--move4{
  animation: iconFadeIn 0.8s ease forwards, iconFloatSubtle4 6.5s ease-in-out infinite;
}
.mhIcon--move5{
  animation: iconFadeIn 0.8s ease forwards, iconFloatSubtle5 7.5s ease-in-out infinite;
}
.mhIcon--move6{
  animation: iconFadeIn 0.8s ease forwards, iconFloatSubtle6 8.5s ease-in-out infinite;
}
/* Stagger fade-in */
.mhIcon:nth-child(1){ animation-delay: 0.1s; }
.mhIcon:nth-child(2){ animation-delay: 0.2s; }
.mhIcon:nth-child(3){ animation-delay: 0.3s; }
.mhIcon:nth-child(4){ animation-delay: 0.4s; }
.mhIcon:nth-child(5){ animation-delay: 0.5s; }
.mhIcon:nth-child(6){ animation-delay: 0.6s; }
.mhIcon:nth-child(7){ animation-delay: 0.15s; }
.mhIcon:nth-child(8){ animation-delay: 0.25s; }
.mhIcon:nth-child(9){ animation-delay: 0.35s; }
.mhIcon:nth-child(10){ animation-delay: 0.45s; }
.mhIcon:nth-child(11){ animation-delay: 0.55s; }
.mhIcon:nth-child(12){ animation-delay: 0.65s; }
.mhIcon:nth-child(13){ animation-delay: 0.75s; }
.mhIcon:nth-child(14){ animation-delay: 0.85s; }
.mhIcon:nth-child(15){ animation-delay: 0.95s; }
.mhIcon:nth-child(16){ animation-delay: 1.05s; }
.mhIcon:nth-child(17){ animation-delay: 1.15s; }
.mhIcon:nth-child(18){ animation-delay: 1.25s; }
.mhIcon--emoji{
  font-size: 28px;
}
/* Very subtle floating animations */
@keyframes iconFloatSubtle1{
  0%, 100%{ transform: translateY(0px); }
  50%{ transform: translateY(-8px); }
}
@keyframes iconFloatSubtle2{
  0%, 100%{ transform: translateY(0px) translateX(0px); }
  50%{ transform: translateY(-6px) translateX(-3px); }
}
@keyframes iconFloatSubtle3{
  0%, 100%{ transform: translateY(0px) translateX(0px); }
  50%{ transform: translateY(-7px) translateX(3px); }
}
@keyframes iconFloatSubtle4{
  0%, 100%{ transform: translateY(0px) rotate(0deg); }
  50%{ transform: translateY(-9px) rotate(2deg); }
}
@keyframes iconFloatSubtle5{
  0%, 100%{ transform: translateY(0px) rotate(0deg); }
  50%{ transform: translateY(-5px) rotate(-2deg); }
}
@keyframes iconFloatSubtle6{
  0%, 100%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
}
@keyframes iconFadeIn{
  to{ opacity: 0.65; transform: translateY(0) scale(1); }
}

/* ========================================
   DESKTOP/WIDESCREEN POSITIONS (default)
   Customize these positions for large screens
   ======================================== */
.mhIcon-1 { left: 8%; top: 18%; }   /* Instagram left-top */
.mhIcon-2 { left: 12%; top: 38%; }  /* Emoji 🎨 left */
.mhIcon-3 { left: 5%; top: 52%; }   /* Emoji 🚀 left-mid */
.mhIcon-4 { left: 14%; top: 68%; }  /* YouTube left-bottom */
.mhIcon-5 { left: 8%; top: 82%; }   /* Emoji 🔥 left-bottom */
.mhIcon-6 { left: 18%; top: 0%; }   /* Emoji 💡 left-top */
.mhIcon-7 { right: 2%; top: 28%; } /* TikTok right-top */
.mhIcon-8 { right: 15%; top: 2%; } /* Emoji 💪 right */
.mhIcon-9 { right: 8%; top: 48%; }  /* Emoji ✨ right-mid */
.mhIcon-10 { right: 12%; top: 64%; } /* Facebook right-bottom */
.mhIcon-11 { right: 18%; top: 88%; } /* Emoji 📱 right-bottom */
.mhIcon-12 { right: 6%; top: 85%; }  /* Emoji 🎯 right-bottom */
.mhIcon-13 { left: 22%; top: 40%; }  /* Emoji 🎯 left */
.mhIcon-14 { right: 22%; top: -10%; } /* Emoji 💡 right */
.mhIcon-15 { left: 6%; top: 35%; }   /* Emoji ✨ left */
.mhIcon-16 { right: 20%; top: 42%; } /* Emoji 🔥 right */
.mhIcon-17 { left: 20%; top: 95%; }  /* Emoji 💪 left */
.mhIcon-18 { right: 5%; top: 8%; }   /* Instagram right-top */

/* responsive */
@media (max-width: 980px){
  .mhNav__pills{ display:none; }
  .mhNav__burger{ display:flex; } /* Changed from inline-block to flex */
  .mhNav__cta{ display:none; } /* Hide CTA on tablet */
}

/* Fix mobile navbar alignment */
@media (max-width: 760px){
  .mhNav__inner{
    width: calc(100% - 40px); /* Match other containers: 20px padding each side */
    padding: 12px 0;
  }
  .mhNav__cta{ display:none; }
}

/* ========================================
   TABLET POSITIONS (768px - 980px)
   Customize these positions for tablets
   ======================================== */
@media (max-width: 980px) and (min-width: 761px){
  /* Adjust spacing for tablet screens */
  .mhIcon-1 { left: 6%; top: 18%; }
  .mhIcon-2 { left: 10%; top: 38%; }
  .mhIcon-3 { left: 4%; top: 52%; }
  .mhIcon-4 { left: 12%; top: 68%; }
  .mhIcon-5 { left: 6%; top: 82%; }
  .mhIcon-6 { left: 16%; top: 8%; }
  .mhIcon-7 { right: 8%; top: 15%; }
  .mhIcon-8 { right: 12%; top: 32%; }
  .mhIcon-9 { right: 6%; top: 48%; }
  .mhIcon-10 { right: 10%; top: 64%; }
  .mhIcon-11 { right: 14%; top: 78%; }
  .mhIcon-12 { right: 5%; top: 85%; }
  .mhIcon-13 { left: 18%; top: 25%; }
  .mhIcon-14 { right: 18%; top: 22%; }
  .mhIcon-15 { left: 5%; top: 35%; }
  .mhIcon-16 { right: 16%; top: 42%; }
  .mhIcon-17 { left: 16%; top: 75%; }
  .mhIcon-18 { right: 4%; top: 8%; }
}

/* ========================================
   MOBILE POSITIONS (up to 760px)
   Customize these positions for mobile
   ======================================== */
@media (max-width: 760px){
  .mhHeroFull{ padding: 46px 0 56px; overflow: hidden; }
  .mhHeroFull__container{ width: calc(100% - 40px); }
  .mhHeroFull__title{ font-size: 34px; line-height: 1.15; }
  .mhHeroFull__buttons{ flex-wrap: wrap; }
  
  /* Mobile: show reduced icons around text */
  .mhFloatingIcons{ max-height: calc(100% - 120px); overflow: hidden; }
  .mhIcon--emoji{ font-size: 24px; }
  .mhIcon svg{ width: 22px; height: 22px; }
  
  /* Hide extra icons on mobile */
  .mhIcon-13,
  .mhIcon-14,
  .mhIcon-15,
  .mhIcon-16,
  .mhIcon-17,
  .mhIcon-18 { 
    display: none; 
  }
  
  /* Mobile-specific positions - keep icons well within viewport */
  .mhIcon-1 { left: 2% !important; top: 8% !important; }   /* Instagram left-top */
  .mhIcon-2 { left: 4% !important; top: 28% !important; }  /* Emoji left */
  .mhIcon-3 { left: 2% !important; top: 48% !important; }  /* Emoji left-mid */
  .mhIcon-4 { left: 6% !important; top: 65% !important; } /* YouTube left-bottom */
  .mhIcon-5 { left: 3% !important; top: 82% !important; }  /* Emoji left-bottom */
  .mhIcon-6 { left: 8% !important; top: 12% !important; } /* Emoji left-top */
  
  .mhIcon-7 { right: 2% !important; top: 10% !important; }  /* TikTok right-top */
  .mhIcon-8 { right: 4% !important; top: 30% !important; }  /* Emoji right */
  .mhIcon-9 { right: 2% !important; top: 50% !important; }  /* Emoji right-mid */
  .mhIcon-10 { right: 6% !important; top: 68% !important; } /* Facebook right-bottom */
  .mhIcon-11 { right: 3% !important; top: 84% !important; }  /* Emoji right-bottom */
  .mhIcon-12 { right: 8% !important; top: 18% !important; } /* Emoji right-top */
}


.mhHeroFull{ min-height: calc(100vh - 72px); display:flex; align-items:center; }


/* ============================================
   COMING SOON / LOCKED OVERLAY STYLES
   ============================================ */

/* General locked overlay - hide Digital pathway temporarily */
.digital-hidden {
  display: none !important;
}

/* Hero-1 Split Hero Locked Overlay */
.mhSplitHero__locked {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 11, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mhSplitHero__locked-content {
  text-align: center;
  padding: 40px;
  max-width: 400px;
}

.mhSplitHero__locked-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  stroke: #FF6B6B;
  opacity: 0.9;
}

.mhSplitHero__locked-title {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, #FF6B6B 0%, #FFCE2E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}

.mhSplitHero__locked-text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.6;
}

.mhSplitHero__side--digital.expanded .mhSplitHero__locked {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Paths Section Locked Overlay */
.mhPaths__locked {
  position: absolute;
  top: 280px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 11, 16, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  border-radius: 0 0 var(--radius) var(--radius);
}

.mhPaths__locked-content {
  text-align: center;
  padding: 32px;
}

.mhPaths__locked-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  stroke: #FF6B6B;
  opacity: 0.95;
  filter: drop-shadow(0 4px 12px rgba(20, 214, 198, 0.3));
}

.mhPaths__locked-title {
  font-size: 32px;
  font-weight: 900;
  background: linear-gradient(135deg, #FF6B6B 0%, #FFCE2E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 8px 0;
  letter-spacing: -0.03em;
}

.mhPaths__locked-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .mhSplitHero__locked-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
  }

  .mhSplitHero__locked-title {
    font-size: 24px;
  }

  .mhSplitHero__locked-text {
    font-size: 14px;
  }

  .mhPaths__locked-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
  }

  .mhPaths__locked-title {
    font-size: 28px;
  }

  .mhPaths__locked-text {
    font-size: 14px;
  }

  .mhPaths__locked {
    top: 200px;
    background: linear-gradient(
      180deg,
      rgba(11, 11, 16, 0) 0%,
      rgba(11, 11, 16, 0.6) 14%,
      rgba(11, 11, 16, 0.92) 32%
    );
  }
}

@media (max-width: 480px) {
  .mhSplitHero__locked-content {
    padding: 24px;
  }

  .mhSplitHero__locked-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
  }

  .mhSplitHero__locked-title {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .mhSplitHero__locked-text {
    font-size: 13px;
  }

  .mhPaths__locked-content {
    padding: 24px;
  }

  .mhPaths__locked-icon {
    width: 48px;
    height: 48px;
  }

  .mhPaths__locked-title {
    font-size: 24px;
  }

  .mhPaths__locked-text {
    font-size: 13px;
  }

  .mhPaths__locked {
    top: 170px;
  }
}

/* Modal Locked Overlay */
.mhModal__locked {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 11, 16, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: var(--radius);
}

.mhModal__locked-content {
  text-align: center;
  padding: 48px 32px;
  max-width: 420px;
}

.mhModal__locked-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 28px;
  stroke: #14d6c6;
  opacity: 0.95;
  filter: drop-shadow(0 6px 16px rgba(20, 214, 198, 0.35));
}

.mhModal__locked-title {
  font-size: 36px;
  font-weight: 900;
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 12px 0;
  letter-spacing: -0.03em;
}

.mhModal__locked-text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  line-height: 1.6;
  font-weight: 500;
}

@media (max-width: 768px) {
  .mhModal__locked-content {
    padding: 40px 24px;
  }

  .mhModal__locked-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
  }

  .mhModal__locked-title {
    font-size: 32px;
  }

  .mhModal__locked-text {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .mhModal__locked-content {
    padding: 32px 20px;
  }

  .mhModal__locked-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
  }

  .mhModal__locked-title {
    font-size: 28px;
  }

  .mhModal__locked-text {
    font-size: 14px;
  }
}

/* Locked button state for Coming Soon */
.mhSplitHero__cta--locked {
  opacity: 0.6;
  cursor: not-allowed !important;
  pointer-events: none;
  position: relative;
}

.mhSplitHero__cta--locked svg {
  margin-right: 8px;
}

.mhSplitHero__cta--locked:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Team Card Bullet List Styling */
.mhTeam__card-list {
  list-style: none;
  padding: 0;
  padding-bottom: 20px;
  margin: 16px 0 0 0;
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInUp 0.5s ease 0.8s forwards;
}

.mhTeam__card-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  line-height: 1.6;
  color: var(--color-text-muted);
  font-size: 14px;
}

.mhTeam__card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, #14d6c6 0%, #7b2fe6 100%);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(20, 214, 198, 0.3);
}

.mhTeam__card-list li:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .mhTeam__card-list li {
    font-size: 13px;
    padding-left: 20px;
    text-align: left;
  }
  
  .mhTeam__card-list li::before {
    width: 5px;
    height: 5px;
    top: 7px;
    text-align: left;
  }
}



/* Apply direction from data-direction on ALL screen sizes
  These add to correc tthe corrosel
*/
.mhRecognition__brands-track {
  --dir: 1; /* default = left */
}

/* right direction */
.mhRecognition__brands-track[data-direction="right"] {
  --dir: -1;
}

/* If your animation uses translateX, multiply by --dir */
@keyframes mhBrandScroll {
  from { transform: translateX(calc(0% * var(--dir))); }
  to   { transform: translateX(calc(-50% * var(--dir))); }
}

/* make sure every track uses the same animation */
.mhRecognition__brands-track {
  animation: mhBrandScroll 18s linear infinite;
}



.mhTeam__card-image,
.mhTeam__card-image-expanded{
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 22px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mhTeam__card-image img,
.mhTeam__card-image-expanded img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}


/* romove below parts to get ht eprevious style for the second row */

.mhRecognition__brands {
  overflow: hidden;
}

.mhRecognition__brands-track{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: mhBrandScrollLeft 30s linear infinite;
}

/* RIGHT direction row */
.mhRecognition__brands-track[data-direction="right"]{
  animation-name: mhBrandScrollRight;
}

/* Left loop */
@keyframes mhBrandScrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Right loop */
@keyframes mhBrandScrollRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}