/* 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:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

.cert-badge{
  width:100%;
  background:none;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  padding:0;
  cursor:pointer;
  text-align:center;
  font-family:'Inter', sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.cert-badge:focus,
.cert-badge:focus-visible,
.cert-badge:active,
.cert-badge:hover{
  outline:none !important;
  border:none !important;
  box-shadow:none !important;
}

.cert-badge-box{
  width:100%;
  aspect-ratio:1/1;
  border:1.5px solid #E31E54 !important;
  border-radius:16px 16px 16px 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  background:#fff;
  outline:none !important;
  box-shadow:0 4px 14px -6px rgba(11,23,16,0.18) !important;
  transition: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{
  box-shadow:0 14px 26px -16px rgba(11,23,16,0.35) !important;
  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;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  -webkit-touch-callout:none; /* disable iOS "save image" long-press menu */
}
.cert-modal-img-wrap{
  position:relative;
  width:100%;
  max-height:70vh;
  border-radius:8px;
  overflow:hidden;
}
.cert-modal-img{
  width:100%;
  height:70vh;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  border-radius:8px;
  pointer-events:none; /* right-click / drag can't target the image itself */
}
/* Tiled diagonal watermark sitting on top of the certificate image */
.cert-modal-watermark{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Ctext x='0' y='60' font-family='sans-serif' font-size='16' fill='%23000000' transform='rotate(-28 110 60)'%3EMEGAFIX%3C/text%3E%3C/svg%3E");
  background-repeat:repeat;
}
.cert-modal-note{
  margin-top:8px;
  font-size:12px;
  color:#8a8a8a;
  font-style:italic;
}
.cert-modal-title{
  margin-top:14px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--ink);
}
/* Screenshot-attempt deterrent: hide the certificate briefly and show a warning */
.cert-modal.screenshot-guard .cert-modal-img,
.cert-modal.screenshot-guard .cert-modal-watermark{
  filter:blur(18px);
}
.cert-modal-warning{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:13px;
  color:#fff;
  background:rgba(11,23,16,0.72);
  border-radius:8px;
  z-index:2;
}
.cert-modal.screenshot-guard .cert-modal-warning{ display:flex; }

.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-modal{ align-items:flex-start; }
  .cert-modal-box{ margin-top:calc(25px + 70px); } /* extra 70px so it clears the site header on desktop */

  .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{ display:flex; 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);
  }
}