/* =====================================================
   APEX IP — sections/founders.css
   Section 7 — The operators behind Apex
   Left-aligned header + 2-column founder cards + centered CTA
   ===================================================== */

/* ---------- Section shell ---------- */
.apx-founders {
  width: 100%;
  max-width: var(--apx-canvas);
  margin: 0 auto;
  padding: 160px var(--apx-pad-x);
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

/* ---------- Header ---------- */
.apx-founders-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
}

.apx-founders-hcopy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.apx-founders-title {
  color: #F2F2F2;
  font-size: 56px;
  font-weight: 500;
  line-height: 67.20px;
}

.apx-founders-body {
  max-width: 628px;
  color: #F2F2F2;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px;
}

/* ---------- Grid: two founder cards ---------- */
.apx-founders-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.apx-founder-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.apx-founder-photo {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

.apx-founder-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.apx-founder-name {
  color: #F2F2F2;
  font-size: 28px;
  font-weight: 500;
}

.apx-founder-role {
  color: #F2F2F2;
  font-size: 18px;
  font-weight: 300;
}

/* =====================================================
   SCROLL ANIMATION
   ===================================================== */
.apx-founders .apx-badge,
.apx-founders-title,
.apx-founders-body,
.apx-founders-grid .apx-founder-card,
.apx-founders .apx-btn-primary {
  opacity: 0;
  transform: translateY(24px);
}

.apx-founders.is-visible .apx-badge,
.apx-founders.is-visible .apx-founders-title,
.apx-founders.is-visible .apx-founders-body,
.apx-founders.is-visible .apx-founders-grid .apx-founder-card,
.apx-founders.is-visible .apx-btn-primary {
  animation: apx-fade-up 0.60s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.apx-founders.is-visible .apx-badge                                       { animation-delay: 0.00s; }
.apx-founders.is-visible .apx-founders-title                              { animation-delay: 0.15s; }
.apx-founders.is-visible .apx-founders-body                               { animation-delay: 0.30s; }
.apx-founders.is-visible .apx-founders-grid .apx-founder-card:nth-child(1) { animation-delay: 0.50s; }
.apx-founders.is-visible .apx-founders-grid .apx-founder-card:nth-child(2) { animation-delay: 0.65s; }
.apx-founders.is-visible .apx-btn-primary                                 { animation-delay: 0.85s; }

/* =====================================================
   RESPONSIVE
   ===================================================== */

/* Laptop (≤ 1440px) */
@media (max-width: 1440px) {
  .apx-founders {
    padding-top: 120px;
    padding-bottom: 120px;
    gap: 64px;
  }

  .apx-founders-header {
    gap: 56px;
  }

  .apx-founders-title {
    font-size: 48px;
    line-height: 1.2;
  }

  .apx-founder-photo {
    height: 440px;
  }
}

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .apx-founders {
    padding-top: 80px;
    padding-bottom: 80px;
    gap: 56px;
  }

  .apx-founders-header {
    gap: 40px;
  }

  .apx-founders-title {
    font-size: 40px;
    line-height: 1.2;
  }

  .apx-founders-body {
    max-width: 100%;
    font-size: 17px;
  }

  .apx-founders-grid {
    gap: 20px;
  }

  .apx-founder-photo {
    height: 380px;
  }

  .apx-founder-name {
    font-size: 24px;
  }
}

/* Mobile (≤ 640px) */
@media (max-width: 640px) {
  .apx-founders {
    padding-top: 64px;
    padding-bottom: 64px;
    gap: 40px;
  }

  .apx-founders-header {
    gap: 28px;
  }

  .apx-founders-title {
    font-size: 30px;
    line-height: 1.18;
  }

  .apx-founders-body {
    font-size: 15px;
  }

  .apx-founders-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .apx-founder-photo {
    height: 420px;
  }

  .apx-founder-name {
    font-size: 22px;
  }

  .apx-founder-role {
    font-size: 15px;
  }
}