/* ============================================================================
   sections/trust.css — The numbers, as an editorial band
   ----------------------------------------------------------------------------
   Four boxed tiles in a row is the default every template ships. This is the
   alternative: one hairline-ruled band, oversized THIN numerals in the wordmark
   face, separated by vertical gold hairlines, with the certifications set as
   fine lettering to the right instead of yet another chip row.
   ========================================================================== */

.trust {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(5,8,28,.55), rgba(10,19,56,.25));
  padding-block: clamp(1.4rem, 3.5vw, 2.4rem);
}

.trust-band {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 3.5vw, 2.2rem);
}

/* ---- The figures ----------------------------------------------------- */
.trust .stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.5rem, 2vw, 1.5rem);
}
/* Vertical gold hairlines BETWEEN the figures — the band reads as one ruled
   object rather than four detached tiles. */
.stat { position: relative; padding-inline: clamp(.4rem, 1.5vw, 1.25rem); }
.stat + .stat::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 2.6em;
  background: linear-gradient(180deg, transparent, var(--line), transparent);
}
.stat .num {
  font-family: var(--font-wordmark);
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 400;
  color: var(--gold-300);
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.stat .num .suffix { color: var(--gold-500); }
.stat .label {
  margin-top: .5rem;
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-muted-on-dark);
}

/* ---- Certifications — a strip of gold-outline export badges ----------
   Eight trust marks, each a thin-gold roundel-style badge with a tiny line-art
   glyph. Centred beneath the figures on a hairline, they read as the seals on
   an export document — the "premium export" signal the brief asks for. */
.certs-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding-top: clamp(1.2rem, 3vw, 1.8rem);
  border-top: 1.35px solid var(--line);
}
.certs-label {
  font-size: .64rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold-500); opacity: .85;
}
.certs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .6rem clamp(.5rem, 1.4vw, 1rem);
}
.cert-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem; border-radius: var(--radius-pill);
  border: 1.35px solid rgba(200,162,74,.34);
  background: radial-gradient(120% 120% at 50% 20%, rgba(200,162,74,.07), transparent 72%);
  font-size: .74rem; letter-spacing: .06em; font-weight: 600;
  color: var(--frost-100);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cert-ico { width: 16px; height: 16px; color: var(--gold-300); flex: none; }
.cert-badge:hover { border-color: var(--gold-500); color: var(--gold-100); background: rgba(200,162,74,.1); }

@media (max-width: 560px) {
  .trust .stats { grid-template-columns: repeat(2, 1fr); gap: 1.4rem .5rem; }
  .stat:nth-child(3)::before { display: none; }   /* no rule at a row start */
  .stat .num { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .stat .label { font-size: .62rem; }
  .cert-badge { font-size: .66rem; padding: .42rem .7rem; }
}


/* the invitation under the badges: documents exist and can be asked for */
.certs-note { margin-top: .8rem; font-size: .8rem; color: var(--text-muted-on-dark); }
.certs-note a { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.certs-note a:hover { color: var(--gold-100); }

/* ===== Certification plates (ART-VISION #24) ===========================
   Framed documents, not chips: hairline gold frame with the product cards'
   scooped ticket corners, icon above the name, the certificate number in
   micro-caps beneath once it exists. */
.cert-plate {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .7rem .95rem .6rem;
  border: 1px solid rgba(200,162,74,.4);
  border-radius: 8px;
  background: linear-gradient(170deg, rgba(20,49,113,.25), transparent 70%);
  color: var(--gold-100);
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  -webkit-mask:
    radial-gradient(circle 3.6px at 14px 0,               transparent 3.2px, #000 3.6px),
    radial-gradient(circle 3.6px at calc(100% - 14px) 0,   transparent 3.2px, #000 3.6px),
    radial-gradient(circle 3.6px at 14px 100%,             transparent 3.2px, #000 3.6px),
    radial-gradient(circle 3.6px at calc(100% - 14px) 100%,transparent 3.2px, #000 3.6px),
    linear-gradient(#000, #000);
  -webkit-mask-composite: source-in;
          mask:
    radial-gradient(circle 3.6px at 14px 0,               transparent 3.2px, #000 3.6px),
    radial-gradient(circle 3.6px at calc(100% - 14px) 0,   transparent 3.2px, #000 3.6px),
    radial-gradient(circle 3.6px at 14px 100%,             transparent 3.2px, #000 3.6px),
    radial-gradient(circle 3.6px at calc(100% - 14px) 100%,transparent 3.2px, #000 3.6px),
    linear-gradient(#000, #000);
          mask-composite: intersect;
  transition: border-color var(--dur) var(--ease);
}
.cert-plate:hover { border-color: var(--gold-300); }
.cert-plate .cert-ico { width: 19px; height: 19px; color: var(--gold-500); }
.cert-plate .cert-no {
  font-size: .6rem; font-weight: 600; letter-spacing: .14em;
  color: var(--gold-300); opacity: .85;
}