/* Megafix Trust & Clients — frontend styles */
.cert-section, .clients-section{
  --ink:#0B1710;
  --primary:#236333;
  --primary-light:#3A8B50;
  --cement:#F3EFE6;
  --steel:#93A79A;
  --charge:#C6FF6B;
  font-family:'Inter', sans-serif;
}

/* =========================================
   CERTIFICATIONS SECTION
   ========================================= */
.cert-section{
  background:#FFFFFF;
  padding:64px 20px;
}

.cert-container{
  max-width:1180px;
  margin:0 auto;
}

.cert-eyebrow{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:16px;
}
.cert-eyebrow::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background:var(--primary-light);
}

.cert-heading{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(22px,3.2vw,34px);
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--ink);
  text-align:center;
  margin-bottom:44px;
}
.cert-heading span{ color:var(--primary); }

.cert-groups-row{
  display:flex;
  flex-direction:column;
  gap:38px;
}

.cert-group{
  margin-bottom:0;
}

.cert-group-label{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  margin-bottom:18px;
}

.cert-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.cert-badge{
  width:110px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  text-align:center;
  font-family:'Inter', sans-serif;
}

.cert-badge-box{
  width:110px;
  height:110px;
  border:1.5px solid #D9D4C6;
  border-radius:16px 16px 16px 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cert-badge-box img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.cert-badge:hover .cert-badge-box{
  border-color:var(--primary);
  box-shadow:0 14px 26px -16px rgba(11,23,16,0.35);
  transform:translateY(-4px);
}

/* =========================================
   MODAL / POPUP
   ========================================= */
.cert-modal{
  position:fixed;
  inset:0;
  background:rgba(11,23,16,0.82);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:9999;
}
.cert-modal.open{ display:flex; }

.cert-modal-box{
  position:relative;
  max-width:520px;
  width:100%;
  background:#fff;
  border-radius:14px;
  padding:20px;
  text-align:center;
  margin-top:25px;
}
.cert-modal-box img{
  width:100%;
  max-height:70vh;
  object-fit:contain;
  border-radius:8px;
}
.cert-modal-title{
  margin-top:14px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--ink);
}

.cert-modal-close{
  position:absolute;
  top:-14px; right:-14px;
  width:36px; height:36px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  border:2px solid #fff;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease;
}
.cert-modal-close:hover{ background:var(--primary-light); }

@media (min-width:900px){
  .cert-section{ padding:100px 24px; }
  .cert-heading{ margin-bottom:56px; font-size:36px; }
  .cert-groups-row{
    flex-direction:row;
    align-items:flex-start;
    gap:56px;
  }
  .cert-group{ min-width:0; flex:1 1 0; }
  .cert-row{ flex-wrap:nowrap; gap:16px; }
  .cert-badge, .cert-badge-box{
    width:auto;
    height:auto;
    aspect-ratio:1/1;
    flex:1 1 0;
    max-width:110px;
    min-width:0;
  }
}

/* =========================================
   OUR CLIENTS SECTION
   ========================================= */
.clients-section{
  background:#FFFFFF;
  padding:48px 0 64px;
}

.clients-container{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
}

.clients-eyebrow{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:16px;
}
.clients-eyebrow::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background:var(--primary-light);
}

.clients-heading{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(22px,3.2vw,34px);
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--ink);
  text-align:center;
  margin-bottom:12px;
}
.clients-heading span{ color:var(--primary); }

.clients-subtext{
  text-align:center;
  color:var(--steel);
  font-size:14px;
  max-width:520px;
  margin:0 auto 36px;
  line-height:1.6;
}

/* Mobile: swipeable horizontal carousel, next card peeks in */
.clients-track{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:4px 20px 18px;
  margin:0 -20px;
  scrollbar-width:none;
}
.clients-track::-webkit-scrollbar{ display:none; }

.client-card{
  flex:0 0 auto;
  width:calc((100% - 28px) / 2.4);
  scroll-snap-align:start;
  aspect-ratio:1/1;
  border:1.5px solid #D9D4C6;
  border-radius:16px 16px 16px 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:#fff;
}
.client-card img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.clients-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:4px;
}
.clients-dots span{
  width:6px; height:6px; border-radius:50%;
  background:#D9D4C6;
}
.clients-dots span:first-child{ background:var(--primary); width:16px; border-radius:4px; }

@media (min-width:900px){
  .clients-section{ padding:80px 0 100px; }
  .clients-heading{ font-size:36px; margin-bottom:16px; }
  .clients-subtext{ margin-bottom:48px; }

  .clients-dots{ display:none; }

  .clients-track{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
    gap:16px;
    overflow:visible;
    padding:0;
    margin:0;
  }
  .client-card{
    width:auto;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .client-card:hover{
    border-color:var(--primary);
    box-shadow:0 14px 26px -16px rgba(11,23,16,0.35);
    transform:translateY(-4px);
  }
}