/* ============================================================
   ProductTrio - Homepage testimonials, v2
   Self-contained: defines its own tokens (mirroring blog.css)
   so it doesn't depend on blog.css being loaded on index.html.
   ============================================================ */

.tm2 {
  --tm2-canvas: #fdfaf0;
  --tm2-surface: #ffffff;
  --tm2-ink: #1d1d1d;
  --tm2-ink-muted: #3b4c5b;
  --tm2-ink-soft: #546681;
  --tm2-primary: #4d53c4;
  --tm2-tint: rgba(77, 83, 196, 0.07);
  --tm2-violet: #a599d9;
  --tm2-gold: #dcb958;
  --tm2-success: #2dca73;
  --tm2-border: rgba(0, 0, 0, 0.08);
  --tm2-shadow: 1px 1px 9px rgba(44, 62, 80, 0.10);
  --tm2-shadow-lg: 0 30px 70px -30px rgba(29, 29, 29, 0.28);
  --tm2-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --tm2-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  position: relative;
  padding: 9vh 5vw 10vh;
  overflow: hidden;
}

.tm2-noise {
  position: absolute; top: 6%; right: 4%; width: 220px; height: 220px; z-index: 0;
  background-image: radial-gradient(var(--tm2-primary) 1.4px, transparent 1.4px);
  background-size: 16px 16px; opacity: .10; pointer-events: none;
}

.tm2-wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; }

.tm2-head { text-align: center; margin-bottom: 44px; }
.tm2-eyebrow {
  display: inline-block; margin: 0 0 16px; padding: 7px 16px;
  background: var(--tm2-tint); color: var(--tm2-primary);
  border-radius: 50px; font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
}
.tm2-heading {
  font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; line-height: 1.18;
  letter-spacing: -0.4px; margin: 0 auto; max-width: 640px; color: var(--tm2-ink);
}

/* ---------- Stage card ---------- */
.tm2-stage {
  position: relative; max-width: 800px; margin: 0 auto; background: var(--tm2-surface); border-radius: 28px;
  box-shadow: var(--tm2-shadow-lg); padding: clamp(32px, 5vw, 64px) clamp(24px, 6vw, 72px) 40px;
  overflow: hidden;
}
.tm2-mark {
  position: absolute; top: 30px; left: 28px; width: 92px; height: 70px;
  color: var(--tm2-tint); z-index: 0;
}
.tm2-count {
  position: absolute; top: 34px; right: clamp(24px, 6vw, 64px); z-index: 2;
  font-family: var(--tm2-mono); font-size: 13px; letter-spacing: 1px; color: var(--tm2-ink-soft);
}
.tm2-count-cur { color: var(--tm2-primary); font-weight: 700; }

.tm2-panels { position: relative; z-index: 1; transition: height .45s var(--tm2-ease); }
.tm2-panel {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity .3s var(--tm2-ease);
  margin: 0; padding: 0; border: 0; max-width: 700px;
}
.tm2-panel.is-active { position: relative; opacity: 1; pointer-events: auto; }

.tm2-pull {
  font-size: clamp(20px, 2.4vw, 27px); font-weight: 700; line-height: 1.32;
  letter-spacing: -0.3px; color: var(--tm2-ink); margin: 8px 0 16px;
}
.tm2-body {
  font-size: 16px; line-height: 1.7; color: var(--tm2-ink-muted); margin: 0 0 30px;
}
.tm2-person-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tm2-avatar {
  width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2.5px solid var(--tm2-accent, var(--tm2-primary));
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.tm2-person { display: flex; flex-direction: column; gap: 2px; }
.tm2-name { font-size: 15.5px; font-weight: 700; color: var(--tm2-ink); }
.tm2-role { font-size: 13.5px; color: var(--tm2-ink-soft); }
.tm2-logo { height: 26px; width: auto; max-width: 140px; object-fit: contain; margin-left: auto; opacity: .92; }

/* progress rail */
.tm2-rail { position: relative; z-index: 1; height: 2px; background: var(--tm2-border); border-radius: 2px; margin-top: 34px; overflow: hidden; }
.tm2-rail-fill { height: 100%; width: 0%; background: var(--tm2-primary); border-radius: 2px; }
.tm2-rail-fill.run { animation: tm2fill 6.4s linear forwards; }
@keyframes tm2fill { from { width: 0%; } to { width: 100%; } }

/* ---------- Switcher tabs ---------- */
.tm2-switcher {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 28px;
}
.tm2-tab {
  display: flex; align-items: center; gap: 9px; padding: 8px 16px 8px 8px;
  background: transparent; border: 1px solid var(--tm2-border); border-radius: 50px;
  cursor: pointer; transition: border-color .25s var(--tm2-ease), background-color .25s var(--tm2-ease), transform .25s var(--tm2-ease);
  font-family: inherit;
}
.tm2-tab:hover { transform: translateY(-2px); border-color: var(--tm2-accent, var(--tm2-primary)); }
.tm2-tab .t-avatar {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  filter: grayscale(1); opacity: .55; border: 1.5px solid transparent;
  transition: opacity .25s var(--tm2-ease), filter .25s var(--tm2-ease), border-color .25s var(--tm2-ease);
}
.tm2-tab .t-label { font-size: 13.5px; font-weight: 600; color: var(--tm2-ink-soft); transition: color .25s var(--tm2-ease); white-space: nowrap; }
.tm2-tab.is-active { background: var(--tm2-tint); border-color: var(--tm2-accent, var(--tm2-primary)); }
.tm2-tab.is-active .t-avatar { opacity: 1; filter: grayscale(0); border-color: var(--tm2-accent, var(--tm2-primary)); }
.tm2-tab.is-active .t-label { color: var(--tm2-ink); }

/* reveal on scroll */
.tm2.reveal-init { opacity: 0; transform: translateY(24px); }
.tm2.revealed { opacity: 1; transform: none; transition: opacity .7s var(--tm2-ease), transform .7s var(--tm2-ease); }

@media (max-width: 700px) {
  .tm2-stage { padding-top: 68px; }
  .tm2-mark { width: 64px; height: 48px; top: 22px; left: 20px; }
  .tm2-count { top: 26px; }
  .tm2-logo { margin-left: 0; }
  .tm2-person-row { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tm2-rail-fill.run { animation: none; width: 100%; }
  .tm2-panel, .tm2-panels, .tm2.reveal-init, .tm2.revealed { transition: none; }
}