#customer-stories {
  --customer-stories-gap: clamp(16px, 1.65vw, 24px);
  --customer-stories-card-width: clamp(330px, 27vw, 398px);
  --customer-stories-radius: var(--radius-lg);
  --customer-stories-surface: rgba(255, 255, 255, 0.78);
  --customer-stories-ribbon: rgba(244, 242, 252, 0.86);
  --customer-stories-border: rgba(124, 58, 237, 0.17);
  --customer-stories-muted: #6f6a82;
  position: relative;
  overflow: hidden;
  padding-block: clamp(68px, 7vw, 108px);
  background: var(--color-bg-primary);
  isolation: isolate;
}

#customer-stories::before {
  content: '';
  position: absolute;
  inset: 12% 20% auto;
  height: 28%;
  background: radial-gradient(ellipse, rgba(124, 58, 237, 0.09), transparent 68%);
  pointer-events: none;
  z-index: -1;
}

#customer-stories .container { position: relative; z-index: 1; }
#customer-stories .customer-stories__intro { max-width: 700px; margin: 0 auto clamp(26px, 3.6vw, 42px); text-align: center; }
#customer-stories .customer-stories__intro .section-badge { margin-bottom: 14px; }
#customer-stories .customer-stories__intro h2 { max-width: 660px; margin: 0 auto; color: var(--color-text-primary); font-size: clamp(1.82rem, 3.1vw, 2.72rem); line-height: 1.28; letter-spacing: -0.04em; }
#customer-stories .customer-stories__intro h2 span { display: block; }
#customer-stories .customer-stories__intro p { max-width: 550px; margin: 12px auto 0; color: var(--color-text-secondary); font-size: clamp(.94rem, 1.25vw, 1.04rem); line-height: 1.82; }

#customer-stories .customer-stories__metrics { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; margin: 0 auto clamp(36px, 4.4vw, 58px); max-width: 1120px; border: 1px solid var(--customer-stories-border); border-radius: var(--radius-xl); background: var(--customer-stories-ribbon); box-shadow: 0 16px 40px rgba(52, 34, 105, 0.075), inset 0 1px 0 rgba(255,255,255,.82); }
#customer-stories .customer-stories__metric { position: relative; display: grid; gap: 9px; min-height: 116px; place-content: center; padding: 22px 18px; text-align: center; }
#customer-stories .customer-stories__metric + .customer-stories__metric::before { content: ''; position: absolute; inset-block: 24%; inset-inline-start: 0; width: 1px; background: linear-gradient(transparent, color-mix(in srgb, var(--customer-stories-border) 82%, transparent), transparent); }
#customer-stories .customer-stories__metric-value { direction: ltr; unicode-bidi: isolate; color: var(--color-brand-600, #6d28d9); font-size: clamp(1.78rem, 3vw, 2.45rem); font-weight: 700; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
#customer-stories .customer-stories__metric span { color: var(--customer-stories-muted); font-size: .78rem; font-weight: 500; line-height: 1.5; }

#customer-stories .customer-stories__tracks { display: grid; gap: var(--customer-stories-gap); width: 100%; }
#customer-stories .customer-stories__row { position: relative; width: 100%; overflow: hidden; direction: ltr; padding-block: 2px; mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); }
#customer-stories .customer-stories__track { display: flex; width: max-content; will-change: transform; }
#customer-stories .customer-stories__track-sequence { display: flex; flex: 0 0 auto; gap: var(--customer-stories-gap); padding-inline-end: var(--customer-stories-gap); }
#customer-stories .customer-stories__row--forward .customer-stories__track { animation: customer-stories-forward 38s linear infinite; transform: translate3d(-50%, 0, 0); }
#customer-stories .customer-stories__row--reverse .customer-stories__track { animation: customer-stories-reverse 42s linear infinite; }
#customer-stories .customer-stories__row:is(:hover, :focus-within) .customer-stories__track { animation-play-state: paused; }

#customer-stories .customer-stories__card { display: flex; flex: 0 0 var(--customer-stories-card-width); flex-direction: column; min-height: 210px; padding: 20px 24px 18px; border: 1px solid var(--customer-stories-border); border-radius: var(--customer-stories-radius); background: var(--customer-stories-surface); box-shadow: 0 10px 25px rgba(57, 39, 111, .065), inset 0 1px 0 rgba(255,255,255,.82); text-align: right; direction: rtl; outline: none; transition: transform 240ms cubic-bezier(.22, 1, .36, 1), border-color 240ms ease, box-shadow 240ms ease, background 240ms ease; }
#customer-stories .customer-stories__card:is(:hover, :focus-visible) { transform: translateY(-2px); border-color: rgba(124, 58, 237, .38); background: var(--color-bg-elevated); box-shadow: 0 15px 30px rgba(57, 39, 111, .115), inset 0 1px 0 rgba(255,255,255,.9); }
#customer-stories .customer-stories__rating { margin-inline: 1px; color: #d39a2d; font-size: 1.08rem; line-height: 1; letter-spacing: .1em; text-align: center; }
#customer-stories .customer-stories__rating i { display: inline-block; font-style: normal; }
#customer-stories.is-active .customer-stories__rating i { animation: customer-stories-star-settle 560ms cubic-bezier(.22, 1, .36, 1) both; }
#customer-stories.is-active .customer-stories__rating i:nth-child(2) { animation-delay: 45ms; }
#customer-stories.is-active .customer-stories__rating i:nth-child(3) { animation-delay: 90ms; }
#customer-stories.is-active .customer-stories__rating i:nth-child(4) { animation-delay: 135ms; }
#customer-stories.is-active .customer-stories__rating i:nth-child(5) { animation-delay: 180ms; }
#customer-stories .customer-stories__card:is(:hover, :focus-visible) .customer-stories__rating i { animation: customer-stories-star-replay 420ms cubic-bezier(.22, 1, .36, 1) both; }
#customer-stories .customer-stories__card:is(:hover, :focus-visible) .customer-stories__rating i:nth-child(2) { animation-delay: 55ms; }
#customer-stories .customer-stories__card:is(:hover, :focus-visible) .customer-stories__rating i:nth-child(3) { animation-delay: 110ms; }
#customer-stories .customer-stories__card:is(:hover, :focus-visible) .customer-stories__rating i:nth-child(4) { animation-delay: 165ms; }
#customer-stories .customer-stories__card:is(:hover, :focus-visible) .customer-stories__rating i:nth-child(5) { animation-delay: 220ms; }
#customer-stories .customer-stories__quote { flex: 1; margin: 15px 0 17px; color: var(--color-text-primary); font-size: clamp(.9rem, 1.15vw, .98rem); line-height: 1.82; }
#customer-stories .customer-stories__identity { display: flex; align-items: center; gap: 10px; margin-inline: 4px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--customer-stories-border) 78%, transparent); }
#customer-stories .customer-stories__avatar { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border: 1px solid transparent; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #8b6cf7, #5b21b6); font-size: .9rem; font-weight: 700; box-shadow: 0 5px 13px rgba(124,58,237,.22); transition: transform 240ms cubic-bezier(.22, 1, .36, 1), border-color 240ms ease, box-shadow 240ms ease; }
#customer-stories .customer-stories__card:is(:hover, :focus-visible) .customer-stories__avatar { transform: scale(1.04); border-color: rgba(196, 168, 255, .72); box-shadow: 0 0 0 3px rgba(124, 58, 237, .1), 0 6px 15px rgba(124,58,237,.25); }
#customer-stories .customer-stories__identity-copy { display: grid; gap: 3px; min-width: 0; }
#customer-stories .customer-stories__identity-copy strong { color: var(--color-text-primary); font-size: .86rem; }
#customer-stories .customer-stories__identity-copy span { color: var(--customer-stories-muted); font-size: .72rem; }

#customer-stories.is-active [data-customer-stories-reveal] { animation: customer-stories-reveal 720ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--customer-stories-reveal-delay, 0ms); }
#customer-stories.is-active .customer-stories__metrics { animation-delay: 220ms; }
#customer-stories.is-active .customer-stories__tracks { animation-delay: 420ms; }

@keyframes customer-stories-forward { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes customer-stories-reverse { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes customer-stories-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes customer-stories-star-settle { from { opacity: 0; transform: translateY(4px) scale(.82); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes customer-stories-star-replay { 0% { transform: translateY(0) scale(1); } 38% { transform: translateY(-2px) scale(1.12); } 100% { transform: translateY(0) scale(1); } }

[data-theme="dark"] #customer-stories { --customer-stories-surface: rgba(26, 26, 48, .92); --customer-stories-ribbon: rgba(22, 22, 44, .9); --customer-stories-border: rgba(167, 139, 250, .22); --customer-stories-muted: #aaa2bd; }
[data-theme="dark"] #customer-stories .customer-stories__card { box-shadow: 0 15px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04); }
[data-theme="dark"] #customer-stories .customer-stories__card:is(:hover, :focus-visible) { background: #211e39; box-shadow: 0 19px 38px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06); }

@media (max-width: 760px) {
  #customer-stories { padding-block: 58px 70px; }
  #customer-stories .customer-stories__intro { margin-bottom: 30px; padding-inline: 8px; }
  #customer-stories .customer-stories__intro h2 { font-size: clamp(1.66rem, 6.6vw, 2.12rem); line-height: 1.32; }
  #customer-stories .customer-stories__intro h2 span { display: inline; }
  #customer-stories .customer-stories__intro p { font-size: .9rem; line-height: 1.85; }
  #customer-stories .customer-stories__metrics { grid-template-columns: repeat(2, 1fr); margin-bottom: 34px; border-radius: var(--radius-lg); }
  #customer-stories .customer-stories__metric { min-height: 98px; padding: 17px 12px; }
  #customer-stories .customer-stories__metric:nth-child(odd)::before { content: ''; position: absolute; inset-inline-start: 0; inset-block: 22%; width: 1px; background: linear-gradient(transparent, var(--customer-stories-border), transparent); }
  #customer-stories .customer-stories__metric:nth-child(3)::after { content: ''; position: absolute; inset-inline: 18%; inset-block-start: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--customer-stories-border), transparent); }
  #customer-stories .customer-stories__metric + .customer-stories__metric::before { display: none; }
  #customer-stories .customer-stories__metric-value { font-size: 1.64rem; }
  #customer-stories .customer-stories__metric span { font-size: .7rem; }
  #customer-stories .customer-stories__card { flex-basis: clamp(280px, 78vw, 315px); min-height: 204px; padding: 19px 21px 17px; }
  #customer-stories .customer-stories__rating { font-size: 1.04rem; }
  #customer-stories .customer-stories__quote { font-size: .87rem; }
  #customer-stories .customer-stories__row { mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); }
}

@media (min-width: 761px) and (max-width: 820px) {
  #customer-stories { padding-block: 64px 78px; }
  #customer-stories .customer-stories__intro h2 { max-width: 600px; font-size: 2.35rem; }
  #customer-stories .customer-stories__metrics { grid-template-columns: repeat(2, 1fr); margin-bottom: 42px; }
  #customer-stories .customer-stories__metric { min-height: 104px; }
  #customer-stories .customer-stories__metric:nth-child(odd)::before { content: ''; position: absolute; inset-inline-start: 0; inset-block: 22%; width: 1px; background: linear-gradient(transparent, var(--customer-stories-border), transparent); }
  #customer-stories .customer-stories__metric:nth-child(3)::after { content: ''; position: absolute; inset-inline: 18%; inset-block-start: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--customer-stories-border), transparent); }
  #customer-stories .customer-stories__metric + .customer-stories__metric::before { display: none; }
  #customer-stories .customer-stories__card { flex-basis: 304px; }
}

@media (prefers-reduced-motion: reduce) {
  #customer-stories *, #customer-stories *::before, #customer-stories *::after { animation: none !important; transition: none !important; }
  #customer-stories .customer-stories__track { transform: none !important; }
  #customer-stories .customer-stories__card { transform: none !important; }
}