.gel-iso-certificates {
  --gel-iso-ink: var(--gel-text-on-dark, #ffffff);
  --gel-iso-muted: color-mix(in srgb, var(--gel-text-on-dark, #ffffff) 72%, transparent);
  --gel-iso-line: var(--gel-line, #e5e7eb);
  --gel-iso-blue: var(--gel-blue-600, #2563eb);
  --gel-iso-blue-dark: var(--gel-blue-900, #1d4ed8);
  --gel-iso-cyan: var(--gel-cyan-500, #38c7f3);
  --gel-iso-white: var(--gel-white, #ffffff);
  background:
    radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--gel-iso-cyan) 16%, transparent), transparent 30%),
    radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--gel-iso-blue) 30%, transparent), transparent 36%),
    radial-gradient(circle at 78% 92%, color-mix(in srgb, var(--gel-iso-cyan) 16%, transparent), transparent 34%),
    linear-gradient(118deg, var(--gel-blue-950, #0f172a), color-mix(in srgb, var(--gel-blue-900, #1e3a8a) 82%, var(--gel-blue-700, #1d4ed8)) 52%, var(--gel-blue-600, #2563eb));
  color: var(--gel-iso-ink);
  display: block;
  margin: 0 calc(-1 * var(--gel-iso-bleed-right, 0px)) 0 calc(-1 * var(--gel-iso-bleed-left, 0px));
  overflow: hidden;
  padding: clamp(44px, 5vw, 72px) 0 clamp(58px, 6vw, 84px);
  position: relative;
}

.gel-iso-certificates::before,
.gel-iso-certificates::after {
  border: 1px solid color-mix(in srgb, var(--gel-iso-ink) 18%, transparent);
  border-radius: 48% 52% 54% 46% / 52% 44% 56% 48%;
  content: "";
  height: 310px;
  opacity: 0.42;
  position: absolute;
  right: -94px;
  top: -126px;
  transform: rotate(22deg);
  width: 310px;
}

.gel-iso-certificates::after {
  bottom: -142px;
  height: 360px;
  left: -104px;
  right: auto;
  top: auto;
  transform: rotate(-34deg);
  width: 360px;
}

p:has(> .gel-iso-certificates),
p:has(+ .gel-iso-certificates) {
  margin: 0 !important;
  padding: 0 !important;
}

.gel-iso-header {
  margin: 0 auto clamp(32px, 4vw, 52px);
  max-width: min(720px, calc(100% - 40px));
  position: relative;
  text-align: center;
  z-index: 1;
}

.gel-iso-header h2 {
  color: var(--gel-iso-ink);
  font-size: clamp(2.15rem, 3.4vw, 3.45rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.06;
  margin: 0;
}

.gel-iso-header p {
  color: var(--gel-iso-muted);
  margin: 12px 0 0;
}

.gel-iso-grid {
  align-items: center;
  display: grid;
  gap: clamp(22px, 3vw, 42px);
  grid-template-columns: repeat(auto-fit, minmax(150px, 180px));
  justify-content: center;
  margin: 0 auto;
  max-width: min(820px, calc(100% - 40px));
  position: relative;
  z-index: 1;
}

.gel-iso-card {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: center;
}

.gel-iso-logo {
  align-items: center;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  min-height: 98px;
  text-decoration: none;
  transition: opacity 180ms ease, transform 220ms ease;
  width: auto;
}

.gel-iso-logo--static {
  cursor: default;
}

.gel-iso-logo__image {
  align-items: center;
  display: flex;
  justify-content: center;
  max-width: 170px;
}

.gel-iso-logo img {
  display: block;
  filter: brightness(0) invert(1);
  height: auto;
  max-height: 86px;
  max-width: 150px;
  object-fit: contain;
  opacity: 0.78;
  transition: filter 200ms ease, opacity 200ms ease, transform 220ms ease;
  width: auto;
}

.gel-iso-card:hover .gel-iso-logo,
.gel-iso-card:focus-within .gel-iso-logo {
  transform: translateY(-3px);
}

.gel-iso-card:hover .gel-iso-logo img,
.gel-iso-card:focus-within .gel-iso-logo img {
  filter: none;
  opacity: 1;
  transform: scale(1.03);
}

.gel-iso-card h3 {
  color: var(--gel-iso-ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 14px auto 0;
  max-width: 210px;
}

.gel-iso-empty {
  background: color-mix(in srgb, var(--gel-cyan-500, #38c7f3) 12%, var(--gel-iso-white));
  border: 1px solid color-mix(in srgb, var(--gel-blue-600, #2563eb) 24%, var(--gel-iso-white));
  border-radius: 8px;
  color: var(--gel-blue-900, #1d4ed8);
  margin: 24px 0;
  padding: 14px 16px;
}

@media (max-width: 900px) {
  .gel-iso-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 170px));
  }
}

@media (max-width: 560px) {
  .gel-iso-certificates {
    padding: 48px 0 52px;
  }

  .gel-iso-header h2 {
    font-size: clamp(1.9rem, 9vw, 2.45rem);
  }

  .gel-iso-grid {
    gap: 22px;
    grid-template-columns: repeat(2, minmax(120px, 150px));
  }

  .gel-iso-logo__image {
    max-width: 140px;
  }

  .gel-iso-logo {
    min-height: 86px;
  }

  .gel-iso-logo img {
    max-height: 72px;
    max-width: 124px;
  }

  .gel-iso-card h3 {
    font-size: 0.9rem;
  }
}

@media (max-width: 360px) {
  .gel-iso-grid {
    grid-template-columns: 1fr;
  }
}
