:root {
  /* Typography - Hero */
  --zwc-fs-hero-title: clamp(30px, 5.94vw, 74px);
  --zwc-ls-hero-title: clamp(-2.4px, -0.17vw, -0.84px);
  --zwc-fs-hero-desc: clamp(16px, 1.67vw, 24px);

  /* Typography - Section Heading */
  --zwc-fs-section-heading: clamp(28px, 4.49vw, 56px);
  --zwc-ls-section-heading: clamp(-1.68px, -0.12vw, -0.72px);

  /* Typography - Feature */
  --zwc-fs-feature-title: clamp(26px, 2.78vw, 40px);
  --zwc-fs-feature-desc: clamp(14px, 1.39vw, 20px);

  /* Spacing */
  --zwc-gap-hero: clamp(30px, 3.17vw, 60px);
  --zwc-gap-feature: clamp(20px, 3.56vw, 80px);
  --zwc-pad-hero-bottom: clamp(40px, 5.56vw, 80px);
  --zwc-pad-section-top: clamp(60px, 6.94vw, 100px);
  --zwc-pad-section-bottom: clamp(30px, 4.17vw, 60px);
  --zwc-pad-cta-bottom: clamp(40px, 4.17vw, 60px);
  --zwc-mb-hero-desc: clamp(30px, 2.78vw, 40px);
}

/* ========================================
   Hero Section
   ======================================== */
.zwc-hero {
  background: linear-gradient(114deg, #132486 18.26%, #0d1859 93.03%);
  padding: 120px 0 var(--zwc-pad-hero-bottom);
  margin-top: -68px;
}

.zwc-hero-grid {
  display: flex;
  align-items: center;
  gap: var(--zwc-gap-hero);
}

.zwc-hero-content {
  flex: 1;
  max-width: 560px;
}

.zwc-hero-heading {
  font-family: var(--primaryfont-semibold);
  font-size: var(--zwc-fs-hero-title);
  line-height: 1.1;
  letter-spacing: var(--zwc-ls-hero-title);
  color: #fff;
  margin: 0 0 24px;
}

.zwc-hero-heading .zwc-highlight {
  color: #f6b80d;
  display: block;
}

.zwc-hero-desc {
  font-size: var(--zwc-fs-hero-desc);
  line-height: 1.5;
  letter-spacing: -0.24px;
  color: #fff;
  margin: 0 0 var(--zwc-mb-hero-desc);
}

.zwc-hero-media {
  flex: 1;
  max-width: 596px;
}

.zwc-hero-media img,
.zwc-feature-media img {
  display: block;
}
.zwc-feature-media .zwc-auto {
  margin: 0 auto;
}

/* ========================================
   Section Heading
   ======================================== */
.zwc-section-heading {
  font-family: var(--primaryfont-bold);
  font-size: var(--zwc-fs-section-heading);
  line-height: 1.2;
  letter-spacing: var(--zwc-ls-section-heading);
  color: #000;
  text-align: center;
  max-width: 833px;
  margin: 0 auto;
}

/* ========================================
   Feature Sections
   ======================================== */
.zwc-feature {
  padding: var(--zwc-pad-section-top) 0;
}

.zwc-feature-grid {
  display: flex;
  align-items: center;
  gap: var(--zwc-gap-feature);
}

.zwc-feature-content {
  flex: 1;
  max-width: 500px;
}

.zwc-feature-content h3 {
  font-family: var(--primaryfont-semibold);
  font-size: var(--zwc-fs-feature-title);
  line-height: 1.2;
  letter-spacing: -1.2px;
  color: #000;
  margin: 0 0 16px;
}

.zwc-feature-content p {
  font-family: var(--zf-primary-medium);
  font-size: var(--zwc-fs-feature-desc);
  line-height: 1.6;
  letter-spacing: -0.2px;
  color: #383838;
  margin: 0;
}

.zwc-feature-media {
  flex: 1;
}

/* Spacing between stacked feature grids */
.zwc-feature-grid + .zwc-feature-grid {
  margin-top: var(--zwc-pad-section-bottom);
}

/* Section heading inside feature section */
.zwc-feature .zwc-section-heading {
  margin-bottom: var(--zwc-pad-section-bottom);
}

/* Reversed layout (image left, text right) */
.zwc-feature-reverse .zwc-feature-grid,
.zwc-feature-grid.zwc-feature-reverse {
  flex-direction: row-reverse;
}

/* Centered layout (branding section) */
.zwc-feature-centered {
  text-align: center;
  padding: 0;
}

.zwc-feature-centered .zwc-feature-content {
  max-width: 650px;
  margin: 0 auto 40px;
}

.zwc-feature-centered .zwc-feature-media {
  max-width: 1170px;
  margin: 0 auto;
}

/* ========================================
   Dark Section
   ======================================== */
.zwc-dark-section {
  background: linear-gradient(114deg, #132486 18.26%, #0d1859 93.03%);
}

.zwc-dark-section .zwc-section-heading,
.zwc-dark-section .zwc-feature-content p {
  color: #fff;
}

.zwc-dark-section .zwc-feature-content h3 {
  color: #f6b80d;
}

/* ========================================
   CTA Section
   ======================================== */
.zwc-cta-section {
  padding: var(--zwc-pad-section-top) 0 var(--zwc-pad-cta-bottom);
  text-align: center;
}

.zwc-cta-section .zwc-section-heading {
  max-width: 931px;
  margin: 0 auto 40px;
}

/* ========================================
   Responsive: 1024px (layout adjustments)
   ======================================== */
@media only screen and (max-width: 1024px) {
  .zwc-hero-media {
    max-width: 420px;
  }

  .zwc-feature-content {
    max-width: 400px;
  }
}

/* ========================================
   Responsive: 991px (stacked layout)
   ======================================== */
@media only screen and (max-width: 991px) {
  .zwc-hero-grid {
    flex-direction: column;
    text-align: center;
  }

  .zwc-hero-content {
    max-width: 600px;
  }

  .zwc-hero-media {
    max-width: 500px;
  }

  .zwc-hero-heading .zwc-highlight {
    display: inline;
  }

  .zwc-feature-grid,
  .zwc-feature-grid.zwc-feature-reverse {
    flex-direction: column;
    text-align: center;
  }

  .zwc-feature-content {
    max-width: 600px;
    margin: 0 auto;
  }

  .zwc-feature-media {
    max-width: 600px;
    margin: 0 auto;
  }

  .zwc-section-heading {
    max-width: 600px;
  }
}

/* ========================================
   Responsive: 767px (mobile adjustments)
   ======================================== */
@media only screen and (max-width: 767px) {
  .zwc-feature-centered .zwc-feature-content {
    max-width: 100%;
  }
}