/* ═══════════════════════════════════════════════════
   AlphaPath — main.css  v3.0
   Fonts: Oswald (display) · Unbounded (labels) · Plus Jakarta Sans (body)
   ═══════════════════════════════════════════════════ */
 
/* ── WordPress Admin Bar offset ──────────────────────────────
   When logged in the admin bar adds 32px (desktop) or 46px
   (mobile) to the body. Nudge the fixed nav down to match
   so it doesn't overlap or hide behind the bar.
─────────────────────────────────────────────────────────── */
.admin-bar .nav {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .nav {
    top: 46px;
  }
}

/* ── Tokens ── */
:root {
  --ink:         #060C18;
  --navy:        #0D1E3C;
  --blue:        #003C87;
  --blue-mid:    #004B96;
  --sky:         #0078B4;
  --green-deep:  #00692D;
  --green:       #1E782D;
  --green-lite:  #3C962D;
  --off-white:   #F2F6F1;
  --white:       #FFFFFF;
  --text:        #111420;
  --muted:       #4A5568;

  --ff-disp:  'Oswald', sans-serif;
  --ff-lbl:   'Unbounded', sans-serif;
  --ff-body:  'Plus Jakarta Sans', sans-serif;

  --nav-h: 76px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html   { scroll-behavior: smooth; }
body   { font-family: var(--ff-body); color: var(--text); background: var(--white); overflow-x: hidden; line-height: 1.7; }
img    { max-width: 100%; display: block; }
a      { text-decoration: none; }
ul     { list-style: none; }
strong { font-weight: 600; }

/* ── Container ── */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 56px;
}


/* ════════════════════════════════════════
   BUTTONS
════════════════════════════════════════ */
.btn {
  display: inline-block;
  font-family: var(--ff-lbl);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 3px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.btn--lg { padding: 18px 44px; font-size: 18px; }

.btn--green {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.btn--green:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
  transform: translateY(-2px);
}

.btn--white {
  background: var(--white);
  color: var(--green-deep);
  font-weight: 700;
}
.btn--white:hover { transform: translateY(-2px); opacity: .92; }

.btn--white-out {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.45);
}
.btn--white-out:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--white);
}

.btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.72);
  border-color: transparent;
}
.btn--ghost:hover { color: var(--white); }


/* ── Section numbers (faded large labels) ── */
.s-num {
  font-family: var(--ff-disp);
  font-size: 80px;
  line-height: 1;
  color: rgba(0,105,45,0.12);
  display: block;
  margin-bottom: -20px;
}
.s-num--muted { color: rgba(0,0,0,0.07); }
.s-num--wht   { color: rgba(255,255,255,0.12); }


/* ════════════════════════════════════════
   NAVIGATION — Floating pill
════════════════════════════════════════ */

/* Outer wrapper: full-width fixed band that holds the pill */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  /* transparent band — the pill provides the bg */
  display: flex;
  align-items: center;
  padding-inline: 32px;
  padding-top: 14px;
  pointer-events: none; /* let clicks pass through the gap around the pill */
}

/* The pill itself */
.nav__inner {
  pointer-events: all;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 0;

  /* Pill shape */
  background: rgba(6, 12, 24, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding-inline: 10px 10px;

  transition: background .32s, border-color .32s, box-shadow .32s;
}

/* On scroll: pill becomes fully opaque and gets a subtle glow */
.nav.scrolled .nav__inner {
  background: rgba(6, 12, 24, 0.96);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
}

/* Logo — left-padded inside pill */
.nav__brand {
  padding-left: 16px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav__brand img { height: 36px; width: auto; }

/* Links — centered in the pill */
.nav__links {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: auto;
}
.nav__links a {
  font-family: var(--ff-lbl);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  padding: 7px 14px;
  border-radius: 999px;
  transition: color .18s, background .18s;
}
.nav__links a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.08);
}
/* Remove the underline effect — pill hover is cleaner */
.nav__links a::after { display: none; }

/* CTA — pill button on the right */
.nav__cta {
  font-family: var(--ff-lbl);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--green);
  padding: 9px 20px;
  border-radius: 999px;
  transition: background .18s, transform .18s;
  flex-shrink: 0;
  margin-right: 4px;
}
.nav__cta:hover {
  background: var(--green-deep);
  transform: scale(1.03);
}

/* Mobile toggle — inside the pill */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 16px 8px 8px;
  margin-left: auto;
}
.nav__toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--white);
  transition: .28s;
}
.nav__toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Full-screen backdrop — appears behind dropdown, blurs page ── */
.nav__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  /* z-index: 198; just below the dropdown (199) and pill (200) */
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: all;
  opacity: 0;
  transition: opacity .28s ease;
}
.nav__backdrop.open {
  display: block;
  opacity: 1;
}

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

/* Mobile dropdown — slides below the pill */
@media (max-width: 900px) {
  .nav__links.open {
    pointer-events: all;
    position: fixed;
    top: calc(var(--nav-h) + 4px);
    left: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(6, 12, 24, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 16px 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    z-index: 199;
  }
  .nav__links.open a {
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 999px;
    color: rgba(255,255,255,0.75);
    display: block;
  }
  .nav__links.open a:hover {
    color: var(--white);
    background: rgba(255,255,255,0.08);
  }
}


/* ════════════════════════════════════════
   HERO — Typography IS the design
════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-h);
}

/* Background photo — sits at the very bottom of the stack */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0.35; /* dim the photo — headline must stay dominant */
  filter: saturate(0.6);
}

/* Dark gradient overlay — fades photo toward solid ink at bottom */
.hero__overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(6,12,24,0.55) 0%,
    rgba(6,12,24,0.35) 40%,
    rgba(6,12,24,0.88) 100%
  );
  pointer-events: none;
}

/* Noise texture overlay */
.hero__noise {
  position: absolute; inset: 0;
  z-index: 2;
  opacity: .3;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  background-size: 300px;
}

/* Bold green diagonal bar */
.hero__stripe {
  position: absolute;
  z-index: 3;
  left: -5%;
  bottom: 72px;
  width: 55%;
  height: 6px;
  background: var(--green);
  transform: rotate(-2.5deg);
  transform-origin: left center;
}

.hero__content {
  position: relative;
  z-index: 4;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 56px;
  padding-top: 80px;
  padding-bottom: 40px;
}

.hero__eyebrow {
  font-family: var(--ff-lbl);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-lite);
  margin-bottom: 20px;
  animation: fadeUp .65s ease both;
}

/* Big type — the headline IS the design */
.hero__heading {
  display: flex;
  flex-direction: column;
  animation: fadeUp .65s .08s ease both;
}
.hero__word {
  font-family: var(--ff-disp);
  font-size: clamp(72px, 11vw, 155px);
  line-height: .92;
  color: var(--white);
  letter-spacing: -.01em;
  display: block;
}
/* Second word: outlined/stroke style — distinctive, not AI */
.hero__word--stroke {
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,0.88);
}

.hero__sub-heading {
  font-family: var(--ff-lbl);
  font-size: clamp(14px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 12px;
  animation: fadeUp .65s .15s ease both;
}
.hero__sub-heading em {
  font-style: normal;
  color: var(--green-lite);
}

.hero__body {
  max-width: 540px;
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(255,255,255,0.58);
  margin-top: 32px;
  line-height: 1.8;
  animation: fadeUp .65s .22s ease both;
}
.hero__body strong { color: rgba(255,255,255,0.85); }

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
  animation: fadeUp .65s .28s ease both;
}

/* Stats strip */
.hero__stats {
  position: relative;
  z-index: 4;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 56px;
  padding-bottom: 72px;
  padding-top: 52px;
  display: flex;
  align-items: center;
  animation: fadeUp .65s .38s ease both;
}
.hero__stat {
  flex: 1;
}
.hero__stat-val {
  font-family: var(--ff-disp);
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: 1;
  color: var(--white);
}
.hero__stat-val .count { /* the number itself */ }
/* the + / sign after the number */
.hero__stat-val > *:last-child:not(.count) {
  font-family: var(--ff-disp);
  font-size: 0.65em;
  color: var(--green-lite);
}
.hero__stat-label {
  font-family: var(--ff-lbl);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin-top: 4px;
}
.hero__stat-sep {
  width: 1px;
  height: 56px;
  background: rgba(255,255,255,0.12);
  margin-inline: 40px;
  flex-shrink: 0;
}

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


/* ════════════════════════════════════════
   WHY AI — Editorial split, sticky left
════════════════════════════════════════ */
.why-ai {
  padding-block: 128px;
  background: var(--white);
}
.why-ai__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 96px;
  align-items: start;
}

.why-ai__left {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
}
.why-ai__h2 {
  font-family: var(--ff-disp);
  font-size: clamp(44px, 5.5vw, 72px);
  line-height: 1.0;
  color: var(--text);
  margin-bottom: 24px;
}
.why-ai__intro {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.85;
}
.why-ai__intro strong { color: var(--text); }

/* Benefit rows — NOT cards */
.why-ai__list {
  display: flex;
  flex-direction: column;
}
.benefit {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 28px;
  padding-block: 36px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  transition: padding-inline .18s;
}
.benefit:first-child { border-top: 1px solid rgba(0,0,0,0.07); }
.benefit:hover {
  padding-inline: 20px;
  background: var(--off-white);
  margin-inline: -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.benefit__n {
  font-family: var(--ff-disp);
  font-size: 28px;
  color: rgba(0,105,45,0.22);
  line-height: 1.3;
  padding-top: 2px;
}
.benefit__body h3 {
  font-family: var(--ff-lbl);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
  margin-bottom: 8px;
}
.benefit__body p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
}


/* ════════════════════════════════════════
   AUDIENCE — Three solid full-height panels
   No cards. The panels ARE the section.
════════════════════════════════════════ */
.audience { overflow: hidden; }

.audience__panels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.a-panel {
  padding: 88px 52px 80px;
  display: flex;
  flex-direction: column;
  min-height: 70vh;
  position: relative;   /* needed for absolute image */
  overflow: hidden;
}
.a-panel--navy  { background: var(--blue); }
.a-panel--green { background: var(--green-deep); }
.a-panel--dark  { background: var(--navy); }

/* Photo — fills the panel behind all content */
.a-panel__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  opacity: 0.58;
  filter: saturate(0.4) contrast(1.1);
  transition: opacity .4s ease, transform .6s ease;
}
.a-panel:hover .a-panel__img {
  opacity: 0.25;
  transform: scale(1.03);
}

/* Color overlay sits above the photo, below content */
.a-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.a-panel--navy::after  { background: linear-gradient(160deg, rgba(0,60,135,0.7) 0%, rgba(0,60,135,0.92) 100%); }
.a-panel--green::after { background: linear-gradient(160deg, rgba(0,105,45,0.65) 0%, rgba(0,105,45,0.92) 100%); }
.a-panel--dark::after  { background: linear-gradient(160deg, rgba(13,30,60,0.70) 0%, rgba(13,30,60,0.94) 100%); }

/* Inner content sits above both photo and overlay */
.a-panel__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.a-panel__tag {
  display: inline-block;
  font-family: var(--ff-lbl);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 4px 14px;
  border-radius: 2px;
  width: fit-content;
  margin-bottom: 36px;
}
.a-panel__tag--lit {
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.1);
}

.a-panel h2 {
  font-family: var(--ff-disp);
  font-size: clamp(36px, 3.5vw, 52px);
  line-height: 1.0;
  color: var(--white);
  margin-bottom: 20px;
}
.a-panel__inner > p {
  font-size: 15px;
  color: rgba(255,255,255,0.68);
  line-height: 1.85;
  margin-bottom: 28px;
}
.a-panel ul {
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1;
  margin-bottom: 44px;
}
.a-panel li {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  padding-left: 18px;
  position: relative;
}
.a-panel li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-lite);
}
.a-panel--green li::before { background: rgba(255,255,255,0.4); }


/* ════════════════════════════════════════
   PROGRAMS — Rows with image thumbnails
════════════════════════════════════════ */
.programs {
  padding-block: 128px;
  background: var(--off-white);
}

.programs__hd {
  margin-bottom: 8px;
}
.programs__hd h2 {
  font-family: var(--ff-disp);
  font-size: clamp(44px, 5.5vw, 72px);
  line-height: 1.0;
  color: var(--text);
  margin-bottom: 52px;
}

.prog-list { display: flex; flex-direction: column; }

.prog-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 44px;
  align-items: center;
  padding-block: 44px;
  border-bottom: 1px solid rgba(0,0,0,0.09);
  position: relative;
  transition: background .18s;
}
.prog-row:first-child { border-top: 1px solid rgba(0,0,0,0.09); }
.prog-row:hover {
  background: var(--white);
  padding-inline: 28px;
  margin-inline: -28px;
}

/* Featured row — green left accent */
.prog-row--feat {
  border-left: 4px solid var(--green);
  padding-left: 20px;
}
.prog-row--feat:hover { padding-left: 48px; }
.prog-row--feat .prog-row__n { color: rgba(0,105,45,0.35); }
.prog-row--feat .prog-row__main h3 { color: var(--green-deep); }

.prog-row__n {
  font-family: var(--ff-disp);
  font-size: 52px;
  line-height: 1;
  color: rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.prog-row__main h3 {
  font-family: var(--ff-lbl);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
  margin-bottom: 8px;
}
.prog-row__main p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 520px;
}

.prog-row__link {
  font-family: var(--ff-lbl);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--green-deep);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.prog-row__link span { transition: transform .18s; }
.prog-row__link:hover { color: var(--green); }
.prog-row__link:hover span { transform: translateX(5px); }


/* ════════════════════════════════════════
   BROKER — Full-width deep green section
════════════════════════════════════════ */
.broker {
  background: var(--green-deep);
  padding-block: 108px;
  position: relative;
  overflow: hidden;
}

/* Ghosted large word as background decoration */
.broker::after {
  content: 'BROKER';
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ff-disp);
  font-size: 300px;
  line-height: 1;
  color: rgba(255,255,255,0.04);
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}

.broker__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
}

.broker__lft h2 {
  font-family: var(--ff-disp);
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 20px;
}
.broker__lft p {
  font-size: 16px;
  color: rgba(255,255,255,0.68);
  line-height: 1.85;
  margin-bottom: 40px;
}

.broker__rgt {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Photo in broker right column */
.broker__img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
  filter: saturate(0.7) brightness(0.85);
  border: 1px solid rgba(255,255,255,0.1);
}

.broker__badge {
  border-left: 5px solid rgba(255,255,255,0.25);
  padding-left: 32px;
}
.broker__yrs {
  font-family: var(--ff-disp);
  font-size: clamp(72px, 10vw, 128px);
  line-height: .88;
  color: var(--white);
}
.broker__plus {
  font-size: .58em;
  color: rgba(255,255,255,0.45);
}
.broker__yrs-lbl {
  font-family: var(--ff-lbl);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 8px;
  line-height: 1.5;
}

.broker__feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.broker__feat {
  font-size: 15px;
  color: rgba(255,255,255,0.78);
  display: flex;
  align-items: center;
  gap: 10px;
}
.broker__feat span {
  color: rgba(255,255,255,0.4);
  font-size: 15px;
}


/* ════════════════════════════════════════
   PILLARS — Three adjacent blocks with images
════════════════════════════════════════ */
.pillars { overflow: hidden; }

.pillars__band {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.pillar {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.pillar--edu  { background: var(--navy); }
.pillar--tech { background: var(--green-deep); }
.pillar--opp  { background: var(--blue); }

/* Background photo */
.pillar__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0.2;
  filter: saturate(0.4);
  transition: opacity .45s, transform .6s;
}
.pillar:hover .pillar__img {
  opacity: 0.32;
  transform: scale(1.04);
}

/* Color gradient — darkest at bottom where text sits */
.pillar::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.pillar--edu::after  { background: linear-gradient(to bottom, rgba(13,30,60,0.3) 0%, rgba(13,30,60,0.92) 100%); }
.pillar--tech::after { background: linear-gradient(to bottom, rgba(0,80,30,0.3)  0%, rgba(0,60,20,0.94) 100%); }
.pillar--opp::after  { background: linear-gradient(to bottom, rgba(0,50,120,0.3) 0%, rgba(0,40,100,0.94) 100%); }

/* Content wrapper sits above photo + gradient */
.pillar__inner {
  position: relative;
  z-index: 2;
  padding: 88px 56px;
}

.pillar__ico {
  font-size: 36px;
  margin-bottom: 24px;
  display: block;
}
.pillar h3 {
  font-family: var(--ff-disp);
  font-size: 44px;
  line-height: 1.0;
  color: var(--white);
  letter-spacing: .02em;
  margin-bottom: 18px;
}
.pillar p {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
}


/* ════════════════════════════════════════
   PARTNERSHIP — Diagonal split layout
════════════════════════════════════════ */
.partnership { overflow: hidden; }

.partnership__split {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 600px;
}

/* Left panel: white, clipped diagonally on the right edge */
.partnership__lft {
  background: var(--white);
  padding: 108px 96px 108px 56px;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}
.partnership__lft h2 {
  font-family: var(--ff-disp);
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.0;
  color: var(--text);
  margin-bottom: 20px;
}
.partnership__lft > p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.85;
  margin-bottom: 36px;
}
.p-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.p-list li {
  font-size: 15px;
  color: var(--text);
  padding-left: 24px;
  position: relative;
}
.p-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--green);
  font-size: 14px;
}

/* Right panel: deep green + photo background */
.partnership__rgt {
  position: relative;
  overflow: hidden;
  background: var(--green-deep);
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Full-bleed background photo */
.partnership__bg-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  opacity: 0.3;
  filter: saturate(0.5);
  transition: opacity .5s, transform .7s;
}
.partnership__rgt:hover .partnership__bg-img {
  opacity: 0.4;
  transform: scale(1.03);
}

/* Dark gradient — darkest at bottom where text lives */
.partnership__rgt::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,80,30,0.4)  0%,
    rgba(0,60,20,0.75) 50%,
    rgba(0,40,15,0.96) 100%
  );
  pointer-events: none;
}

/* Inner content — sits above photo + gradient */
.partnership__rgt-inner {
  position: relative;
  z-index: 2;
  padding: 108px 56px 80px 80px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.partnership__kicker {
  font-family: var(--ff-lbl);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.partnership__rgt-inner h3 {
  font-family: var(--ff-disp);
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.0;
  color: var(--white);
}
.partnership__rgt-inner > p {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  line-height: 1.8;
}


/* ════════════════════════════════════════
   FINAL CTA
════════════════════════════════════════ */
.final-cta {
  background: var(--ink);
  padding-block: 128px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Thin gradient bar at top */
.final-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green-deep) 0%, var(--sky) 50%, var(--green-lite) 100%);
}

.final-cta__body {
  position: relative;
  z-index: 1;
}
.final-cta__h2 {
  font-family: var(--ff-disp);
  font-size: clamp(56px, 8vw, 108px);
  line-height: .96;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  margin-bottom: 24px;
}
.final-cta__h2 span:first-child { color: var(--white); }
.final-cta__stroke {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.45);
}
.final-cta p {
  font-size: 17px;
  color: rgba(255,255,255,0.55);
  max-width: 520px;
  margin-inline: auto;
  line-height: 1.85;
  margin-bottom: 52px;
}
.final-cta__acts {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.footer {
  background: #030810;
  padding-top: 52px;
}
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer__brand p {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  margin-top: 10px;
}
.footer__nav {
  display: flex;
  gap: 36px;
}
.footer__nav a {
  font-family: var(--ff-lbl);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  transition: color .18s;
}
.footer__nav a:hover { color: var(--white); }

.footer__disc {
  padding-block: 20px;
}
.footer__disc p {
  font-size: 11px;
  color: rgba(255,255,255,0.18);
  line-height: 1.7;
}


/* ════════════════════════════════════════
   WHATSAPP FLOATING BUTTON
════════════════════════════════════════ */
.wa-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 300;

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

  background: #25D366;
  color: #fff;
  border-radius: 999px;
  padding: 14px 22px 14px 18px;
  box-shadow: 0 4px 24px rgba(37,211,102,0.45);

  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 600;

  transition: transform .22s ease, box-shadow .22s ease, padding .22s ease;
  text-decoration: none;
}
.wa-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 36px rgba(37,211,102,0.55);
}

/* Collapse to icon-only on small screens */
@media (max-width: 600px) {
  .wa-btn {
    padding: 15px;
    bottom: 24px;
    right: 20px;
  }
  .wa-btn__label { display: none; }
}

.wa-btn__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Pulse ring animation — draws the eye without being obnoxious */
.wa-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid #25D366;
  opacity: 0;
  animation: waPulse 2.8s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}


/* ════════════════════════════════════════
   SCROLL PROGRESS BAR
════════════════════════════════════════ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--green-deep), var(--green-lite));
  z-index: 9998; /* below loader (9999), above everything else */
  transition: width .1s linear;
  pointer-events: none;
}


/* ════════════════════════════════════════
   BACK TO TOP BUTTON
════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  bottom: 104px; /* sits above the WhatsApp button */
  right: 32px;
  z-index: 300;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(6,12,24,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease, background .18s, color .18s;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.back-to-top:hover {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.back-to-top svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 600px) {
  .back-to-top {
    bottom: 88px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
}


/* ════════════════════════════════════════
   ACTIVE NAV LINK
════════════════════════════════════════ */
.nav__links a.nav-active {
  color: var(--white) !important;
  background: rgba(255,255,255,0.1);
}


/* ════════════════════════════════════════
   IMAGE SKELETON SHIMMER
════════════════════════════════════════ */
.img-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Fade in once loaded */
.img-loaded {
  animation: imgFadeIn .45s ease both;
}
@keyframes imgFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ════════════════════════════════════════
   HERO PARALLAX
   overflow:hidden on hero is already set —
   this just ensures the image can move
   without clipping issues
════════════════════════════════════════ */
.hero__img {
  will-change: transform; /* hint to browser to GPU-composite this layer */
}


/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 1024px) {
  .container { padding-inline: 32px; }
  .nav { padding-inline: 20px; }
  .hero__content { padding-inline: 32px; }
  .hero__stats { padding-inline: 32px; }
}

@media (max-width: 900px) {
  .container { padding-inline: 24px; }
  .nav { padding-inline: 16px; }
  .hero__content { padding-inline: 24px; }
  .hero__stats { padding-inline: 15px; flex-wrap: wrap; gap: 32px 0; text-align: center; }
  .hero__stat { width: 50%; }
  .hero__stat-sep { display: none; }
  .hero__stats::before, .hero__stats::after { display: none; }

  /* Nav mobile — collapse links, show hamburger inside pill */
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .nav__cta    { display: none; }

  /* Why AI */
  .why-ai__grid { grid-template-columns: 1fr; gap: 48px; }
  .why-ai__left { position: static; }

  /* Audience */
  .audience__panels { grid-template-columns: 1fr; }
  .a-panel { min-height: unset; }

  /* Programs */
  .prog-row {
    grid-template-columns: 48px 1fr;
    gap: 20px;
  }
  .prog-row__link { display: none; }
  .prog-row--feat { padding-left: 16px; }
  .prog-row--feat:hover { padding-left: 16px; }

  /* Broker */
  .broker__inner { grid-template-columns: 1fr; gap: 48px; }
  .broker::after { display: none; }
  .broker__img   { display: none; }

  /* Pillars */
  .pillars__band { grid-template-columns: 1fr; }
  .pillar__inner { padding: 64px 28px; }

  /* Partnership */
  .partnership__split { grid-template-columns: 1fr; }
  .partnership__lft {
    clip-path: none;
    padding: 72px 24px;
  }
  .partnership__rgt { min-height: 420px; }
  .partnership__rgt-inner { padding: 52px 24px; }

  /* Final CTA */
  .final-cta__acts { flex-direction: column; align-items: center; }
}

@media (max-width: 520px) {
  .hero__word { font-size: clamp(72px, 18vw, 120px); }
  .a-panel { padding: 64px 28px; }
}