.hero-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.hero-buttons {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: var(--space-20);
}

.hero-image {
  height: 100%;
  aspect-ratio: 1/1;
}

.integration-column {
  gap: var(--space-48);
}

.integration-icon i::before {
  width: 100%;
  aspect-ratio: 1/1;
  font-size: 100px;
}

.integration-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-12);
}

.integration-item {
  min-width: 0;
  min-height: 0;

  width: 100%;
  height: 100%;
}

/* ---------- HOMEPAGE: mobile overrides ---------- */

@media (max-width: 768px) {

  /* generic section adjustments */
  .section {
    height: auto;
    padding: var(--section-padding-vertical) var(--section-padding-horizontal);
  }

  .section-container {
    align-items: flex-start;
    padding: calc(var(--space-8) + env(safe-area-inset-top)) var(--section-padding-horizontal);
  }

  .section-content {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-24);
    align-items: stretch;
  }

  .section .column {
    width: 100%;
    min-height: 0; /* avoid desktop min-height bleed */
  }

  /* ---------- HERO SECTION ---------- */
  .hero-section .hero-text {
    gap: var(--space-8);
  }

  .hero-section h1 {
    font-size: var(--text-32);
    line-height: 1.15;
    margin-bottom: var(--space-12);
  }

  .hero-section .subheading {
    font-size: var(--text-16);
    line-height: 1.5;
  }

  .hero-section .hero-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
    margin-top: var(--space-12);
  }

  .hero-section .hero-buttons .btn,
  .hero-section .hero-buttons .btn-primary {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0 var(--space-16);
  }

  .hero-section .hero-image {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    height: auto;
    aspect-ratio: 1 / 1;
    display: block;
  }


  /* ---------- PROBLEM SECTION ---------- */
  /* Swap order so text is shown before the image on small screens */
  .problem-section .section-content {
    flex-direction: column-reverse;
    gap: var(--space-20);
  }

  .problem-section h2 {
    font-size: var(--text-32);
    line-height: 1.2;
    margin-bottom: var(--space-8);
  }

  .problem-section p,
  .problem-section ul li {
    font-size: var(--text-16);
    line-height: 1.5;
  }

  .problem-section .hero-image {
    width: 100%;
    max-width: 520px;
    margin: 0 auto var(--space-12);
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }

  .problem-section ul {
    padding-left: 1rem;
    margin-top: var(--space-8);
  }


  /* ---------- SOLUTION SECTION ---------- */
  .solution-section .section-content {
    flex-direction: column;
    gap: var(--space-20);
  }

  .solution-section h2 {
    font-size: var(--text-32);
    line-height: 1.2;
    margin-bottom: var(--space-8);
  }

  .solution-section p {
    font-size: var(--text-16);
    line-height: 1.5;
  }

  .solution-section .hero-image {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }

  /* reduce extra vertical gaps for multi-paragraph description */
  .solution-section > .section-container > .section-content > .column > div p {
    margin-bottom: var(--space-8);
  }


  /* ---------- FOCUS SECTION ---------- */
  .focus-section .section-content {
    flex-direction: column;
    gap: var(--space-12);
  }

  .focus-section h2 {
    font-size: var(--text-32);
    line-height: 1.2;
    margin-bottom: var(--space-8);
  }

  .focus-section ul {
    padding-left: 1rem;
    margin-top: var(--space-8);
  }

  .focus-section ul li {
    font-size: var(--text-16);
    line-height: 1.5;
    margin-bottom: var(--space-8);
  }


  /* ---------- INTEGRATION SECTION ---------- */
  .integration-section .section-content {
    flex-direction: column;
    gap: var(--space-24);
  }

  .integration-column {
    gap: var(--space-24); /* reduce large desktop gap */
  }

  .integration-section h2 {
    font-size: var(--text-32);
    line-height: 1.2;
  }

  /* grid: 4 → 2 → 1 behavior */
  .integration-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
  }

  /* cards: remove tall desktop feel */
  .integration-item {
    padding: var(--space-16);
    min-height: 0;
    height: auto;
    gap: var(--space-8);
  }

  /* icon sizing */
  .integration-icon i::before {
    font-size: 56px;
  }

  /* text alignment + readability */
  .integration-item span {
    font-size: var(--text-16);
    font-weight: 500;
  }

  .integration-item p {
    font-size: var(--text-14);
    line-height: 1.5;
    text-align: left;
  }
}