/* TAPFLASH CUSTOMER STORIES */
body { overflow-x: hidden; }.stories-hero { position: relative; overflow: hidden; padding: 105px 0 96px; background: #f8fafc; }.stories-grid-pattern { position: absolute; inset: 0; opacity: .4; background-image: radial-gradient(rgba(37,99,235,.18) .65px,transparent .65px); background-size: 18px 18px; mask-image: linear-gradient(90deg,black,transparent 50%); }.stories-orb { position: absolute; border-radius: 50%; filter: blur(75px); }.stories-orb--blue { width: 420px; height: 420px; top: -250px; right: 13%; background: rgba(37,99,235,.13); }.stories-orb--green { width: 310px; height: 310px; right: -80px; bottom: -170px; background: rgba(34,197,94,.13); }.stories-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }.stories-copy h1 { color: var(--navy); font-size: clamp(45px,5.4vw,70px); line-height: 1.02; }.stories-copy h1 span { position: relative; color: var(--blue); }.stories-copy h1 span::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 4px; border-radius: 5px; background: var(--green); transform: scaleX(0); transform-origin: left; animation: underlineIn .8s .7s forwards; }.stories-copy > p { max-width: 620px; margin: 24px 0 32px; color: var(--text); font-size: 17px; line-height: 1.75; }.stories-actions { display: flex; flex-wrap: wrap; gap: 12px; }.stories-actions svg,.outcome-copy > a svg,.stories-cta-actions svg { width: 16px; }.overall-rating { display: flex; align-items: center; gap: 14px; margin-top: 39px; }.rating-score { font: 800 35px 'Manrope'; }.rating-stars { display: flex; gap: 2px; color: #f59e0b; }.rating-stars svg { width: 15px; fill: currentColor; }.overall-rating span { display: block; margin-top: 3px; color: var(--text); font-size: 12px; }
.story-collage { position: relative; min-height: 560px; animation: collageIn .85s .2s both cubic-bezier(.2,.8,.2,1); }.collage-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(37,99,235,.14); border-radius: 50%; transform: translate(-50%,-50%); }.collage-ring--one { width: 430px; height: 430px; }.collage-ring--two { width: 270px; height: 270px; border-style: dashed; animation: slowSpin 30s linear infinite; }.collage-center { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; height: 150px; border: 1px solid var(--border); border-radius: 50%; background: white; box-shadow: 0 22px 50px rgba(15,23,42,.13); transform: translate(-50%,-50%); }.collage-center > span { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 12px; color: white; background: var(--blue); font: 800 16px 'Manrope'; }.collage-center strong { font-size: 12px; }.collage-center small { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--text); font-size: 11px; }.collage-center small i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }.floating-story { position: absolute; z-index: 3; padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 20px 50px rgba(15,23,42,.12); }.story-one { top: 18px; left: 0; width: 285px; animation: floatOne 7s ease-in-out infinite; }.story-two { top: 90px; right: -20px; width: 225px; color: white; border-color: rgba(255,255,255,.1); background: var(--navy); animation: floatTwo 8s ease-in-out infinite; }.story-three { right: 15px; bottom: 15px; width: 260px; animation: floatOne 7.5s -2s ease-in-out infinite; }.story-card-head { display: flex; align-items: center; gap: 9px; }.story-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--blue); background: rgba(37,99,235,.09); }.story-avatar--green { color: var(--green); background: rgba(34,197,94,.1); }.story-avatar svg { width: 16px; }.story-card-head > div { flex: 1; }.story-card-head strong,.story-card-head small { display: block; }.story-card-head strong { font-size: 13px; }.story-card-head small { margin-top: 2px; color: var(--text); font-size: 11px; }.verified-person { display: flex; align-items: center; gap: 3px; color: #16a34a; font-size: 11px; }.verified-person svg { width: 11px; }.floating-story blockquote { margin-top: 16px; color: var(--navy); font: 600 14px/1.65 'Manrope'; }.mini-stars { margin-top: 12px; color: #f59e0b; font-size: 11px; letter-spacing: 2px; }.quote-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--green); background: rgba(34,197,94,.1); }.quote-mark svg { width: 15px; }.story-two blockquote { color: white; font-size: 17px; }.story-two > div { margin-top: 17px; }.story-two strong,.story-two small { display: block; }.story-two strong { font-size: 12px; }.story-two small { margin-top: 2px; color: #94a3b8; font-size: 11px; }.story-three .story-metric { display: flex; justify-content: space-between; align-items: center; margin: 15px 0 10px; padding: 10px; border-radius: 10px; background: #f8fafc; }.story-metric span { color: var(--text); font-size: 11px; }.story-metric strong { color: #16a34a; font-size: 12px; }.story-three > p { color: var(--text); font-size: 12px; line-height: 1.6; }
.impact-bar { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: white; }.impact-bar-grid { display: grid; grid-template-columns: repeat(4,1fr); }.impact-bar-grid > div { position: relative; padding: 30px 25px; }.impact-bar-grid > div + div { border-left: 1px solid var(--border); }.impact-icon { position: absolute; top: 29px; right: 24px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--blue); background: rgba(37,99,235,.08); }.impact-icon svg { width: 15px; }.impact-bar-grid strong { display: block; font: 800 28px 'Manrope'; }.impact-bar-grid p { margin-top: 4px; color: var(--text); font-size: 12px; }
.stories-section { padding: 116px 0; }.section-kicker { display: inline-block; margin-bottom: 13px; color: var(--blue); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }.stories-heading { display: grid; grid-template-columns: 1fr .85fr; gap: 80px; align-items: end; }.stories-heading h2,.outcome-copy h2,.journey-heading h2 { color: var(--navy); font-size: clamp(32px,4vw,48px); line-height: 1.1; }.stories-heading > p { color: var(--text); font-size: 16px; line-height: 1.75; }.story-controls { display: flex; justify-content: space-between; align-items: center; margin: 43px 0 25px; padding-bottom: 15px; border-bottom: 1px solid var(--border); }.story-filters { display: flex; flex-wrap: wrap; gap: 7px; }.story-filters button { padding: 8px 13px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: white; font: 600 12px 'Inter'; cursor: pointer; }.story-filters button.active { color: white; border-color: var(--navy); background: var(--navy); }.story-controls > span { color: var(--text); font-size: 12px; }.testimonial-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }.testimonial-card { padding: 27px; border: 1px solid var(--border); border-radius: 21px; background: #f8fafc; transition: transform .25s ease,box-shadow .25s ease; }.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 22px 45px rgba(15,23,42,.08); }.testimonial-card[hidden] { display: none; }.testimonial-card--featured { background: white; }.testimonial-top { display: flex; justify-content: space-between; align-items: center; }.audience-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 99px; color: var(--blue); background: rgba(37,99,235,.08); font-size: 10px; font-weight: 700; }.audience-badge--green { color: #15803d; background: rgba(34,197,94,.1); }.audience-badge--navy { color: var(--navy); background: rgba(15,23,42,.07); }.audience-badge svg { width: 11px; }.card-stars { color: #f59e0b; font-size: 10px; letter-spacing: 1px; }.testimonial-card blockquote { min-height: 120px; margin-top: 28px; color: var(--navy); font: 600 18px/1.55 'Manrope'; }.testimonial-card > p { min-height: 69px; margin-top: 14px; color: var(--text); font-size: 13px; line-height: 1.7; }.testimonial-person { display: flex; align-items: center; gap: 10px; margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--border); }.testimonial-person > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--blue); background: rgba(37,99,235,.08); }.testimonial-person > span svg { width: 15px; }.testimonial-person > div { flex: 1; }.testimonial-person strong,.testimonial-person small { display: block; }.testimonial-person strong { font-size: 12px; }.testimonial-person small { margin-top: 2px; color: var(--text); font-size: 10px; }.testimonial-person > svg { width: 14px; color: var(--green); }
.outcome-section { padding: 112px 0; color: white; background: #0b1324; }.outcome-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }.outcome-visual { position: relative; min-height: 480px; }.outcome-dashboard { position: absolute; top: 20px; left: 0; right: 45px; padding: 22px; border: 1px solid rgba(255,255,255,.09); border-radius: 23px; background: #111e32; box-shadow: 0 30px 65px rgba(0,0,0,.28); }.dashboard-top,.dashboard-top > div { display: flex; align-items: center; }.dashboard-top { justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid rgba(255,255,255,.08); }.dashboard-top > div { gap: 8px; }.dashboard-top > div span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: var(--blue); font: 800 11px 'Manrope'; }.dashboard-top strong { font-size: 12px; }.dashboard-top > span { display: flex; align-items: center; gap: 5px; color: #86efac; font-size: 10px; }.dashboard-top > span i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }.dashboard-highlight { padding: 22px 0 12px; }.dashboard-highlight small,.dashboard-highlight strong,.dashboard-highlight span { display: block; }.dashboard-highlight small { color: #94a3b8; font-size: 11px; }.dashboard-highlight strong { margin: 5px 0; font: 800 34px 'Manrope'; }.dashboard-highlight span { display: flex; align-items: center; gap: 5px; color: #86efac; font-size: 10px; }.dashboard-highlight svg { width: 12px; }.dashboard-chart { display: flex; align-items: end; gap: 8px; height: 130px; padding-top: 20px; border-bottom: 1px solid rgba(255,255,255,.08); }.dashboard-chart i { flex: 1; border-radius: 4px 4px 0 0; background: rgba(37,99,235,.55); }.dashboard-chart i:nth-child(3n) { background: var(--green); }.dashboard-bottom { display: grid; grid-template-columns: 1fr 1fr; padding-top: 17px; }.dashboard-bottom > div + div { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.08); }.dashboard-bottom small,.dashboard-bottom strong { display: block; }.dashboard-bottom small { color: #94a3b8; font-size: 10px; }.dashboard-bottom strong { margin-top: 4px; font-size: 16px; }.outcome-note { position: absolute; z-index: 2; right: 0; bottom: 23px; display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(16,29,49,.97); box-shadow: 0 18px 45px rgba(0,0,0,.25); animation: floatOne 6s ease-in-out infinite; }.outcome-note > svg { width: 17px; color: var(--green); }.outcome-note strong,.outcome-note small { display: block; }.outcome-note strong { font-size: 12px; }.outcome-note small { margin-top: 2px; color: #94a3b8; font-size: 10px; }.section-kicker--green { color: var(--green); }.outcome-copy h2 { color: white; }.outcome-copy > p { margin: 20px 0 28px; color: #94a3b8; font-size: 15px; line-height: 1.75; }.outcome-points { display: grid; gap: 14px; }.outcome-points > div { display: flex; gap: 12px; padding: 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.03); }.outcome-points > div > span { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; color: #60a5fa; background: rgba(37,99,235,.12); }.outcome-points svg { width: 16px; }.outcome-points strong { font-size: 13px; }.outcome-points p { margin-top: 4px; color: #94a3b8; font-size: 12px; }.outcome-copy > a { display: inline-flex; align-items: center; gap: 6px; margin-top: 26px; color: white; font-size: 13px; font-weight: 700; }.outcome-copy > a svg { color: var(--green); }
.story-journey-section { padding: 112px 0; background: #f8fafc; }.journey-heading { max-width: 720px; margin-bottom: 48px; }.journey-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }.journey-grid article { position: relative; min-height: 245px; padding: 24px; border: 1px solid var(--border); border-radius: 19px; background: white; }.journey-grid article > span { position: absolute; top: 22px; right: 23px; color: #dbe3ec; font: 800 23px 'Manrope'; }.journey-grid article > svg { width: 22px; margin: 8px 0 43px; color: var(--blue); }.journey-grid h3 { font-size: 16px; }.journey-grid p { margin-top: 9px; color: var(--text); font-size: 13px; line-height: 1.7; }
.stories-cta-section { padding: 0 0 110px; background: #f8fafc; }.stories-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 55px; align-items: end; padding: 58px; border-radius: 30px; color: white; background: var(--blue); }.cta-pattern { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.45) 1px,transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg,transparent,black); }.stories-cta > div:not(.cta-pattern) { position: relative; z-index: 1; }.stories-cta > div > span { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; color: #dcfce7; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }.stories-cta > div > span svg { width: 13px; }.stories-cta h2 { max-width: 760px; color: white; font-size: clamp(30px,4vw,44px); }.stories-cta p { max-width: 680px; margin-top: 14px; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.7; }.stories-cta-actions { display: flex; flex-direction: column; gap: 9px; }.stories-cta-actions .btn { justify-content: center; }.stories-cta-actions .btn:first-child { color: var(--navy); background: white; }.stories-cta-actions .btn:last-child { color: white; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.2,.8,.2,1),transform .65s cubic-bezier(.2,.8,.2,1); }[data-reveal].revealed { opacity: 1; transform: none; }[data-reveal-group] > * { opacity: 0; transform: translateY(18px); transition: opacity .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1); }[data-reveal-group].revealed > * { opacity: 1; transform: none; }[data-reveal-group].revealed > *:nth-child(2) { transition-delay: .07s; }[data-reveal-group].revealed > *:nth-child(3) { transition-delay: .14s; }[data-reveal-group].revealed > *:nth-child(4) { transition-delay: .21s; }[data-reveal-group].revealed > *:nth-child(5) { transition-delay: .28s; }[data-reveal-group].revealed > *:nth-child(6) { transition-delay: .35s; }
@keyframes underlineIn { to { transform: scaleX(1); } }@keyframes collageIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }@keyframes slowSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }@keyframes floatOne { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(.4deg); } }@keyframes floatTwo { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@media (max-width: 1020px) { .stories-hero-grid { grid-template-columns: 1fr; gap: 55px; }.stories-copy { max-width: 760px; }.story-collage { max-width: 650px; }.testimonial-grid { grid-template-columns: 1fr 1fr; }.outcome-layout { gap: 45px; }.journey-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 790px) { .stories-hero { padding: 82px 0 75px; }.impact-bar-grid { grid-template-columns: 1fr 1fr; }.impact-bar-grid > div:nth-child(3) { border-left: 0; }.impact-bar-grid > div:nth-child(n+3) { border-top: 1px solid var(--border); }.stories-section,.outcome-section,.story-journey-section { padding: 86px 0; }.stories-heading,.outcome-layout { grid-template-columns: 1fr; gap: 30px; }.story-controls { align-items: flex-start; flex-direction: column; gap: 13px; }.stories-cta { grid-template-columns: 1fr; }.stories-cta-actions { flex-direction: row; justify-content: flex-start; } }
@media (max-width: 560px) { .stories-copy h1 { font-size: 41px; }.stories-copy > p { font-size: 15px; }.stories-actions { flex-direction: column; }.stories-actions .btn { justify-content: center; }.story-collage { min-height: 630px; transform: scale(.92); margin: -25px 0; }.collage-ring--one { width: 370px; height: 370px; }.story-one { width: 260px; }.story-two { top: 225px; right: 0; }.story-three { left: 10px; right: auto; width: 255px; }.testimonial-grid,.journey-grid { grid-template-columns: 1fr; }.testimonial-card blockquote,.testimonial-card > p { min-height: 0; }.outcome-dashboard { right: 10px; }.stories-cta { padding: 38px 25px; }.stories-cta-actions { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important;animation-iteration-count: 1 !important;transition-duration: .01ms !important; }[data-reveal],[data-reveal-group] > * { opacity: 1 !important;transform: none !important; } }