/*
 * M Tek — Homepage Final Visual Fix
 * Scope: public homepage only.
 * Fixes the large blank area below the footer, oversized card spacing,
 * homepage side gutters and the visible yellow browser scrollbar.
 */

html.homepage {
  scrollbar-width: none;
}

html.homepage::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body.homepage {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/* Keep the footer at the true bottom when the page is shorter than the viewport.
   When content is longer, it naturally follows the content with no empty band. */
body.homepage .site-footer {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  flex: 0 0 auto;
}

/* Remove the decorative section rules that were visually competing with the
   actual content near the page edges. */
body.homepage section::after,
body.homepage section::before,
body.homepage .hero::after,
body.homepage .hero::before {
  display: none !important;
}

/* Use the available desktop width without creating oversized side gutters. */
body.homepage .container {
  width: min(96%, 1680px) !important;
  max-width: 1680px !important;
}

/* Compact the card rhythm: less empty space, stronger visual hierarchy. */
body.homepage .feature-grid,
body.homepage .service-grid,
body.homepage .steps-grid,
body.homepage .why-grid,
body.homepage .contact-grid,
body.homepage .mission-grid,
body.homepage .ecosystem-grid {
  gap: 14px !important;
  margin-top: 26px !important;
}

body.homepage .feature-card,
body.homepage .service-card,
body.homepage .step-card,
body.homepage .why-card,
body.homepage .contact-card,
body.homepage .mission-card,
body.homepage .ecosystem-card {
  min-height: 0 !important;
  padding: 22px 20px !important;
}

body.homepage .feature-card i,
body.homepage .service-card i,
body.homepage .step-card i,
body.homepage .why-card i,
body.homepage .contact-card i,
body.homepage .mission-card i,
body.homepage .ecosystem-card i {
  margin-bottom: 11px !important;
}

body.homepage .feature-card h3,
body.homepage .service-card h3,
body.homepage .step-card h3,
body.homepage .why-card h3,
body.homepage .contact-card h3,
body.homepage .mission-card h2,
body.homepage .ecosystem-card h3 {
  margin-bottom: 7px !important;
}

body.homepage .feature-card p,
body.homepage .service-card p,
body.homepage .step-card p,
body.homepage .why-card p,
body.homepage .contact-card p,
body.homepage .contact-card a,
body.homepage .mission-card p,
body.homepage .ecosystem-card p {
  margin-top: 0 !important;
  line-height: 1.55 !important;
}

/* Support icon colors. */
body.homepage .contact-card:nth-child(2) i {
  color: #229ED9 !important;
}

body.homepage .contact-card:nth-child(3) i {
  color: #27d7a0 !important;
  filter: drop-shadow(0 7px 16px rgba(39, 215, 160, .20));
}

body.homepage .contact-card:nth-child(4) i,
body.homepage .contact-card:nth-child(1) i {
  color: #FFD700 !important;
}

/* App buttons: consistent icon size and vertical alignment. */
body.homepage .mtek-app-store-link {
  min-height: 64px;
}

body.homepage .mtek-app-store-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
}

body.homepage .mtek-app-store-icon.google {
  color: #3DDC84 !important;
}

body.homepage .mtek-app-store-icon.apk {
  color: #66DE8E !important;
}

body.homepage .mtek-app-store-copy {
  min-width: 0;
}

@media (max-width: 1100px) {
  body.homepage .container {
    width: min(94%, 1320px) !important;
    max-width: 1320px !important;
  }
}

@media (max-width: 680px) {
  body.homepage .container {
    width: calc(100% - 28px) !important;
    max-width: none !important;
  }

  body.homepage .feature-grid,
  body.homepage .service-grid,
  body.homepage .steps-grid,
  body.homepage .why-grid,
  body.homepage .contact-grid,
  body.homepage .mission-grid,
  body.homepage .ecosystem-grid {
    gap: 9px !important;
    margin-top: 20px !important;
  }

  body.homepage .feature-card,
  body.homepage .service-card,
  body.homepage .step-card,
  body.homepage .why-card,
  body.homepage .contact-card,
  body.homepage .mission-card,
  body.homepage .ecosystem-card {
    min-height: 0 !important;
    padding: 16px 10px !important;
  }

  body.homepage .feature-card i,
  body.homepage .step-card i,
  body.homepage .service-card i,
  body.homepage .why-card i,
  body.homepage .contact-card i,
  body.homepage .mission-card i,
  body.homepage .ecosystem-card i {
    margin-bottom: 9px !important;
  }

  body.homepage .feature-card p,
  body.homepage .service-card p,
  body.homepage .step-card p,
  body.homepage .why-card p,
  body.homepage .contact-card p,
  body.homepage .contact-card a,
  body.homepage .mission-card p,
  body.homepage .ecosystem-card p {
    line-height: 1.5 !important;
  }

  body.homepage .contact-card:nth-child(3) i {
    filter: drop-shadow(0 6px 14px rgba(39, 215, 160, .18));
  }

  body.homepage .mtek-app-store-link {
    min-height: 74px;
  }

  body.homepage .site-footer {
    padding: 11px 9px !important;
    line-height: 1.5 !important;
  }
}