/* =============================================================
   feat-proof-block.css — Bluworks v2
   Customer quote section.

   Design: white section background, quote inside a
   var(--blu-primary) blue card — unified with the
   "With bluworks" panel from connected-wins-block.
   ============================================================= */

.feat-proof-section {
  padding: clamp(64px, 8vw, 96px) 0;
  background: var(--surface, #FFFFFF);
  border-top: 1px solid var(--line, #E4E8F3);
}

.feat-proof-section .container {
  width: 100%;
  max-width: var(--maxw, 1240px);
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
  box-sizing: border-box;
}

/* ── Blue quote card — matches connected-panel-new ── */
.feat-proof-card {
  background: var(--blu-primary, #1E50E5);
  border-radius: var(--r-4, 16px);
  padding: clamp(40px, 6vw, 64px) clamp(36px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: var(--s-7, 40px);
  position: relative;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
}

/* Subtle decorative radial glow — keeps it "bluworks" not generic */
.feat-proof-card::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Opening quote mark ── */
.feat-proof-mark {
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  font-size: 80px;
  font-weight: 600;
  line-height: .7;
  color: rgba(255, 255, 255, .18);
  display: block;
  margin-bottom: -8px;
  user-select: none;
}

html[dir="rtl"] .feat-proof-mark { transform: scaleX(-1); }

/* ── Quote text ── */
.feat-proof-quote {
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin: 0;
  border: none;
  padding: 0;
}

html[dir="rtl"] .feat-proof-quote {
  font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
  letter-spacing: 0;
  line-height: 1.65;
}

/* ── Author row ── */
.feat-proof-author {
  display: flex;
  align-items: center;
  gap: var(--s-4, 16px);
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: var(--s-6, 28px);
}

html[dir="rtl"] .feat-proof-author { flex-direction: row-reverse; }

/* Avatar */
.feat-proof-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, .15);
  border: 2px solid rgba(255, 255, 255, .25);
}

.feat-proof-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Author info */
.feat-proof-author-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.feat-proof-name {
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  display: block;
}

html[dir="rtl"] .feat-proof-name {
  font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
}

.feat-proof-role {
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, .60);
  display: block;
}

html[dir="rtl"] .feat-proof-role {
  font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
}

/* ── Reveal ── */
.feat-proof-section .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.feat-proof-section .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .feat-proof-section .reveal,
  .feat-proof-section .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .feat-proof-card { padding: var(--s-6, 28px); gap: var(--s-6, 28px); }
  .feat-proof-mark { font-size: 60px; }
}