/* ============================================================
   modern.css — 2025 ultra-modern design layer (navy + green brand)
   Bento · glassmorphism · big type · gradient mesh · micro-motion.
   Linked LAST. Additive — introduces new .mh-* / .mx-* classes.
   ============================================================ */
:root {
  --mx-navy: #0B1834;
  --mx-navy2: #0A5640;
  --mx-blue: #1C8A5E;
  --mx-green: #0A5640;
  --mx-green2: #1C8A5E;
  --mx-ink: #0C1322;
  --mx-mute: #5C6B82;
  --mx-line: #E7ECF4;
  /* radii + elevation */
  --mx-r: 22px;
  --mx-r-sm: 14px;
  --mx-r-lg: 30px;
  --mx-shadow: 0 24px 60px rgba(11, 24, 52, .14);
  --mx-shadow-lg: 0 40px 90px rgba(11, 24, 52, .22);
  --mx-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ───────── Modern hero ───────── */
.mh {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 12% 8%, rgba(28,138,94, .42), transparent 60%),
    radial-gradient(55% 65% at 92% 18%, rgba(10,86,64, .34), transparent 60%),
    radial-gradient(70% 80% at 70% 110%, rgba(28,138,94, .30), transparent 60%),
    linear-gradient(165deg, #0B1834 0%, #0E1E40 55%, #0B1834 100%);
  color: #fff;
  padding: clamp(96px, 12vw, 150px) 0 clamp(64px, 8vw, 104px);
}
.mh::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 0%, transparent 78%);
          mask-image: radial-gradient(70% 60% at 50% 35%, #000 0%, transparent 78%);
  pointer-events: none;
}
.mh__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.mh__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #CFE0FF;
}
.mh__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mx-green2); box-shadow: 0 0 0 4px rgba(67, 169, 92, .25); }
.mh__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 22px 0 18px;
}
.mh__title .grad {
  background: linear-gradient(100deg, #1C8A5E, #35A972 60%, #1C8A5E);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.mh__lead {
  color: rgba(255, 255, 255, .76);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 0 30px;
}
.mh__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mh__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-radius: 14px; font-weight: 700; font-size: .96rem;
  transition: transform .25s var(--mx-ease), box-shadow .3s, filter .25s; cursor: pointer;
}
.mh__btn--primary { background: linear-gradient(120deg, #0A5640, #1C8A5E); color: #fff; box-shadow: 0 16px 36px rgba(10,86,64, .42); }
.mh__btn--primary:hover { transform: translateY(-3px); filter: brightness(1.06); box-shadow: 0 24px 50px rgba(10,86,64, .55); color: #fff; }
.mh__btn--glass { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mh__btn--glass:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .14); color: #fff; }
.mh__btn i { transition: transform .25s; }
.mh__btn:hover i { transform: translateX(4px); }
.mh__creds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.mh__cred { font-size: .76rem; font-weight: 600; color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); padding: 6px 13px; border-radius: 999px; }
.mh__cred i { color: var(--mx-green2); margin-right: 6px; }

/* bento glass cluster (right) */
.mh__bento { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 16px; }
.mh-tile {
  position: relative; border-radius: var(--mx-r); padding: 22px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
  transition: transform .3s var(--mx-ease), background .3s;
}
.mh-tile:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .11); }
.mh-tile__num { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: 2.3rem; line-height: 1; background: linear-gradient(120deg, #fff, #9FB8E8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mh-tile__num i { font-style: normal; font-size: 1rem; color: var(--mx-green2); margin-left: 2px; }
.mh-tile__label { display: block; margin-top: 8px; font-size: .8rem; color: rgba(255, 255, 255, .68); font-weight: 600; line-height: 1.35; }
.mh-tile--wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.mh-tile--accent { background: linear-gradient(150deg, rgba(10,86,64, .9), rgba(0,26,73, .82)); border-color: rgba(67, 169, 92, .5); }
.mh-tile__ic { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem; color: #fff; background: rgba(255, 255, 255, .16); }
.mh-tile--wide b { font-family: 'Playfair Display', Georgia, serif; font-size: 1.2rem; display: block; }
.mh-tile--wide span { font-size: .8rem; color: rgba(255, 255, 255, .85); }

/* entrance motion */
.mh__reveal { animation: mhRise .7s var(--mx-ease) both; }
.mh__bento .mh-tile { animation: mhRise .7s var(--mx-ease) both; }
.mh__bento .mh-tile:nth-child(2) { animation-delay: .07s; }
.mh__bento .mh-tile:nth-child(3) { animation-delay: .14s; }
.mh__bento .mh-tile:nth-child(4) { animation-delay: .21s; }
@keyframes mhRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (max-width: 920px) {
  .mh__inner { grid-template-columns: 1fr; }
  .mh__bento { max-width: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  .mh__reveal, .mh__bento .mh-tile { animation: none; }
  .mh__btn:hover, .mh-tile:hover { transform: none; }
}

/* ============================================================
   MODERN SKIN — elevates existing homepage sections cohesively
   (loaded last; scoped to generic section/card classes)
   ============================================================ */
/* section headers: pill eyebrow + bigger, tighter headline */
.section-header .eyebrow:not(.eyebrow--white){
  display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;
  background:linear-gradient(120deg,rgba(28,138,94,.10),rgba(10,86,64,.10));
  border:1px solid rgba(28,138,94,.16);color:var(--mx-blue);font-weight:700;letter-spacing:.04em}
.section-header h2{letter-spacing:-.02em;line-height:1.1}
.section-header h2 .em,.section-header h2 em{background:linear-gradient(100deg,var(--mx-green),var(--mx-blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-style:normal}

/* unified modern card surface for the generic homepage cards */
.feature-card,.resource-card,.industry-card,.lvl-card{
  border-radius:20px!important;border:1px solid var(--mx-line);
  box-shadow:0 18px 44px rgba(11,24,52,.07);
  transition:transform .3s var(--mx-ease),box-shadow .3s,border-color .3s!important}
.feature-card:hover,.resource-card:hover,.industry-card:hover,.lvl-card:hover{
  transform:translateY(-7px);box-shadow:0 32px 64px rgba(11,24,52,.15);border-color:transparent}
/* gradient icon tiles */
.feature-card__icon,.resource-card__icon{
  border-radius:16px!important;color:#fff!important;
  background:linear-gradient(145deg,var(--mx-navy2),var(--mx-blue))!important;
  box-shadow:0 12px 24px rgba(28,138,94,.30)}
.industry-card__icon{border-radius:14px!important;background:linear-gradient(145deg,var(--mx-green),var(--mx-green2))!important;color:#fff!important}
.industry-card:hover .industry-card__icon,.feature-card:hover .feature-card__icon{transform:scale(1.06) rotate(-4deg)}
.feature-card__icon,.industry-card__icon{transition:transform .3s var(--mx-ease)}

/* stats strip → glass-on-navy modern band */
.stats-strip{background:linear-gradient(150deg,#0B1834,#0A5640)!important;border-radius:var(--mx-r-lg);margin:0 auto;max-width:1180px}
.stats-strip .stat-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:24px 18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.stats-strip .stat-number{color:#fff}
.stats-strip .stat-label{color:rgba(255,255,255,.7)}
.stats-strip .stat-item__icon{background:linear-gradient(145deg,var(--mx-green),var(--mx-green2));color:#fff}

/* final CTA banner → richer gradient-mesh */
.cta-banner{background:
  radial-gradient(50% 80% at 15% 10%,rgba(28,138,94,.5),transparent 60%),
  radial-gradient(50% 80% at 88% 90%,rgba(10,86,64,.42),transparent 60%),
  linear-gradient(150deg,#0B1834,#0A5640)!important}

@media(prefers-reduced-motion:reduce){
  .feature-card,.resource-card,.industry-card,.lvl-card{transition:none!important}
  .feature-card:hover,.resource-card:hover,.industry-card:hover,.lvl-card:hover{transform:none}
}

/* ============================================================
   INNER-PAGE HEROES → modern gradient-mesh (match ModernHero)
   ============================================================ */
.page-hero{
  background:
    radial-gradient(55% 70% at 10% 6%, rgba(28,138,94,.40), transparent 60%),
    radial-gradient(50% 65% at 92% 16%, rgba(10,86,64,.30), transparent 60%),
    radial-gradient(62% 82% at 76% 116%, rgba(28,138,94,.26), transparent 60%),
    linear-gradient(165deg,#0B1834 0%,#0E1E40 55%,#0B1834 100%) !important;
}
/* faint tech-grid overlay via the pattern element */
.page-banner .page-hero__pattern{
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) !important;
  background-size:54px 54px !important;
  -webkit-mask-image:radial-gradient(72% 70% at 50% 28%, #000 0%, transparent 76%);
          mask-image:radial-gradient(72% 70% at 50% 28%, #000 0%, transparent 76%);
  opacity:1 !important;
}
/* breadcrumb + stats glass refinement on the mesh */
.page-banner .page-hero-stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.page-hero__icon-bg{opacity:.06}

/* ============================================================
   MODERN GLASS HEADER
   ============================================================ */
.header.scrolled{
  background:rgba(255,255,255,.72)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
          backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 8px 30px rgba(11,24,52,.10)!important;
  border-bottom:1px solid rgba(11,24,52,.06);
}
.nav-link{font-weight:600}
.nav-link.active,.nav-link[aria-current="page"]{color:var(--mx-blue)}
/* primary header CTA → green gradient pill (matches modern hero) */
.nav-actions .btn-gold,.top-bar__cta{
  background:linear-gradient(120deg,var(--mx-green),var(--mx-green2))!important;
  border:none!important;box-shadow:0 10px 24px rgba(10,86,64,.34)!important}

/* ============================================================
   MODERN FOOTER
   ============================================================ */
.footer__main{
  position:relative;
  background:
    radial-gradient(45% 70% at 12% 0%, rgba(28,138,94,.30), transparent 60%),
    radial-gradient(40% 65% at 90% 20%, rgba(10,86,64,.22), transparent 60%),
    linear-gradient(180deg,#0B1834,#0E1E40)!important;
}
.footer__main::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--mx-blue),var(--mx-green2),var(--mx-blue))}
.footer__cred-pill{
  background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px!important}
.footer__social a{
  border-radius:12px!important;background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.14)!important;
  transition:transform .25s var(--mx-ease),background .25s!important}
.footer__social a:hover{transform:translateY(-3px);background:linear-gradient(135deg,var(--mx-green),var(--mx-green2))!important;border-color:transparent!important}
.footer__newsletter input{border-radius:12px!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.16)!important;color:#fff}
.footer__newsletter button{border-radius:12px!important;background:linear-gradient(120deg,var(--mx-green),var(--mx-green2))!important;border:none!important}
.footer__col a{transition:color .2s,padding-left .2s}
.footer__col a:hover{color:var(--mx-green2);padding-left:4px}