/* =====================================================
   APEX IP — sections/trusted.css
   Section 6 — Trusted Infrastructure
   Left-aligned header (628px copy) + 2×2 card grid + centered CTA
   ===================================================== */

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

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

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

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

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

/* ---------- Cards block (grid + CTA) ---------- */
.apx-trusted-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

/* 2×2 grid */
.apx-trusted-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Individual card */
.apx-trusted-card {
  position: relative;
  height: 312px;
  padding: 40px;
  background-color: #0A0A0A;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  border-radius: 24px;
  border: 1px solid rgba(51, 51, 51, 0.40);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

/* Red radial glow per corner (varies by card position) */
.apx-trusted-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 67.89% 207.71% at 100% 100%,
    rgba(229, 48, 11, 0.05) 0%,
    rgba(229, 48, 11, 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.apx-trusted-card:nth-child(2)::before {
  background: radial-gradient(
    ellipse 67.89% 207.71% at 0% 100%,
    rgba(229, 48, 11, 0.05) 0%,
    rgba(229, 48, 11, 0) 100%
  );
}
.apx-trusted-card:nth-child(3)::before {
  background: radial-gradient(
    ellipse 73.64% 209.66% at 100% 0%,
    rgba(229, 48, 11, 0.05) 0%,
    rgba(229, 48, 11, 0) 100%
  );
}
.apx-trusted-card:nth-child(4)::before {
  background: radial-gradient(
    ellipse 73.64% 209.66% at 0% 0%,
    rgba(229, 48, 11, 0.05) 0%,
    rgba(229, 48, 11, 0) 100%
  );
}

/* Card copy column — fixed 180px, anchored bottom-left */
.apx-trusted-card-copy {
  position: relative;
  z-index: 1;
  width: 180px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.apx-trusted-card-num {
  color: #E5300B;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}

.apx-trusted-card-title {
  color: #F2F2F2;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
}

.apx-trusted-card-text {
  color: #F2F2F2;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px;
}

/* =====================================================
   SCROLL ANIMATION
   JS adds .is-visible to .apx-trusted
   ===================================================== */

.apx-trusted .apx-badge,
.apx-trusted-title,
.apx-trusted-body,
.apx-trusted-grid .apx-trusted-card,
.apx-trusted .apx-btn-primary {
  opacity: 0;
  transform: translateY(24px);
}

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

.apx-trusted.is-visible .apx-badge                              { animation-delay: 0.00s; }
.apx-trusted.is-visible .apx-trusted-title                      { animation-delay: 0.15s; }
.apx-trusted.is-visible .apx-trusted-body                       { animation-delay: 0.30s; }
.apx-trusted.is-visible .apx-trusted-grid .apx-trusted-card:nth-child(1) { animation-delay: 0.50s; }
.apx-trusted.is-visible .apx-trusted-grid .apx-trusted-card:nth-child(2) { animation-delay: 0.65s; }
.apx-trusted.is-visible .apx-trusted-grid .apx-trusted-card:nth-child(3) { animation-delay: 0.80s; }
.apx-trusted.is-visible .apx-trusted-grid .apx-trusted-card:nth-child(4) { animation-delay: 0.95s; }
.apx-trusted.is-visible .apx-btn-primary                        { animation-delay: 1.15s; }

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

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

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

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

  .apx-trusted-block {
    gap: 64px;
  }
}

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

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

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

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

  .apx-trusted-grid {
    grid-template-columns: 1fr;
  }

  .apx-trusted-card {
    height: auto;
    min-height: 260px;
    padding: 32px;
  }

  .apx-trusted-card-copy {
    width: 100%;
    max-width: 320px;
  }

  .apx-trusted-block {
    gap: 56px;
  }
}

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

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

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

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

  .apx-trusted-card {
    min-height: 220px;
    padding: 24px;
  }

  .apx-trusted-card-num,
  .apx-trusted-card-title {
    font-size: 22px;
  }

  .apx-trusted-card-text {
    font-size: 15px;
  }

  .apx-trusted-block {
    gap: 40px;
  }
}