/* DC — Testimonials (hub + clustered review cards + side badges) */
.dc-test {
  position: relative;
  background: var(--sf-paper);
  color: var(--sf-ink);
  padding-block: clamp(60px, 6.5vw, 100px);
  overflow: hidden;
  isolation: isolate;
}
/* dotted constellation texture */
.dc-test::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(31,36,38,0.08) 1.4px, transparent 1.6px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse at center, #000 22%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 22%, transparent 78%);
}

/* ---- Header ---- */
.dc-test__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 640px;
  margin: 0 auto clamp(34px, 4vw, 58px);
}
.dc-test__title {
  margin: 0;
  font-family: var(--dc-font-display);
  font-size: clamp(28px, 3.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--sf-ink);
}
.dc-test__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--sf-green);
  padding-bottom: 0.16em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'><path d='M4 9 Q54 1 104 6 T196 5' fill='none' stroke='%230d4a3d' stroke-width='4' stroke-linecap='round'/></svg>") bottom center / 100% 0.34em no-repeat;
}
.dc-test__lead {
  margin: 0;
  color: var(--sf-ink-mute);
  font-size: 15px;
  line-height: 1.6;
}

/* ---- Cluster ---- */
.dc-test__cluster {
  display: grid;
  grid-template-columns: minmax(140px, 178px) 1fr 1fr minmax(140px, 178px);
  grid-template-rows: auto auto auto;
  gap: 18px clamp(18px, 2.6vw, 44px);
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
}
.dc-test__badge:first-of-type { grid-column: 1; grid-row: 1 / -1; }
.dc-test__badge:last-of-type  { grid-column: 4; grid-row: 1 / -1; }
.dc-test__hub { grid-column: 2 / 4; grid-row: 2; }
.dc-test__card:nth-of-type(1) { grid-column: 2; grid-row: 1; }
.dc-test__card:nth-of-type(2) { grid-column: 3; grid-row: 1; }
.dc-test__card:nth-of-type(3) { grid-column: 2; grid-row: 3; }
.dc-test__card:nth-of-type(4) { grid-column: 3; grid-row: 3; }

/* ---- Review card ---- */
.dc-test__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  box-shadow: var(--dc-shadow-soft);
  transition: transform var(--dc-dur) var(--dc-ease), border-color var(--dc-dur) var(--dc-ease);
}
.dc-test__card:hover { transform: translateY(-4px); border-color: var(--sf-green); }
.dc-test__rating { display: inline-flex; gap: 2px; color: var(--sf-mustard); }
.dc-test__hub-stars { display: inline-flex; gap: 2px; color: var(--sf-yellow); }
.dc-test__star svg { width: 14px; height: 14px; fill: currentColor; }
.dc-test__quote {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sf-ink);
}
.dc-test__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.dc-test__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dc-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--sf-light);
  flex-shrink: 0;
}
.dc-test__avatar--green   { background: var(--sf-green); }
.dc-test__avatar--red     { background: var(--sf-red); }
.dc-test__avatar--blue    { background: var(--sf-blue); }
.dc-test__avatar--mustard { background: var(--sf-mustard); }
.dc-test__meta strong { display: block; font-size: 13px; font-weight: 700; color: var(--sf-ink); }
.dc-test__meta small  { display: block; font-size: 11px; color: var(--sf-ink-mute); margin-top: 1px; }

/* ---- Central hub ---- */
.dc-test__hub {
  justify-self: center;
  width: clamp(150px, 16vw, 196px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: radial-gradient(ellipse at 50% 28%, var(--sf-green-soft) 0%, var(--sf-green) 45%, var(--sf-green-deep) 100%);
  color: var(--sf-light);
  box-shadow: 0 30px 54px -22px rgba(13, 74, 61, 0.55);
  position: relative;
  z-index: 2;
}
/* dotted ring — constellation accent */
.dc-test__hub::before {
  content: "";
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  border: 2px dotted var(--sf-line-2);
  animation: dc-test-ring 26s linear infinite;
}
@keyframes dc-test-ring { to { transform: rotate(360deg); } }
.dc-test__hub-score {
  font-family: var(--dc-font-display);
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.dc-test__hub-cap {
  font-family: var(--dc-font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(252, 250, 243, 0.72);
  font-weight: 700;
}

/* ---- Side badges ---- */
.dc-test__badge {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dc-test__badge-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  box-shadow: var(--dc-shadow-soft);
  color: var(--sf-green);
}
.dc-test__badge-ico svg { width: 24px; height: 24px; }
.dc-test__badge-text { display: flex; flex-direction: column; }
.dc-test__badge-text span {
  font-family: var(--dc-font-display);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--sf-ink);
}

/* ---- CTA ---- */
.dc-test__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(30px, 4vw, 52px);
}

@media (max-width: 1000px) {
  .dc-test__cluster { grid-template-columns: 1fr 1fr; }
  .dc-test__badge,
  .dc-test__hub { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .dc-test__card { grid-column: auto !important; grid-row: auto !important; }
  .dc-test__badge {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
}
@media (max-width: 560px) {
  .dc-test__cluster { grid-template-columns: 1fr; }
}