.stats {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}

.stat {
    padding: 44px 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stat:last-child { border-right: none; }

.stat-num {
    font-size: 52px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-lbl {
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    font-weight: 500;
}

.wrap { font-family:'Jost',sans-serif; background:#edeae5; overflow:hidden; }

.stats-row {
  display:flex;
  align-items:flex-start;
  padding:52px 72px 48px;
  gap:0;
}
.stat-block { flex:1; }
.stat-pre { font-size:15px; font-weight:300; color:#555; line-height:1; margin-bottom:2px; }
.stat-num { font-size:clamp(44px,6vw,72px); font-weight:500; color:#1a1a1a; line-height:1; }
.stat-lbl { font-size:13px; font-weight:300; color:#777; margin-top:4px; }

.reviews-area {
  padding:0 72px 56px;
  display:flex;
  gap:20px;
  align-items:flex-start;
}

.intro-card {
  background:#fff;
  border-radius:12px;
  padding:28px 24px 24px ;
  width:200px;
  min-width:200px;
  display:flex;
  flex-direction:column;
  align-self:stretch;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  height:220px;
}
.intro-title {
  font-size:clamp(15px,1.6vw,18px);
  font-weight: 500;
  color:#1a1a1a;
  line-height:1.4;
  margin:20px 0 24px;
}
.intro-controls {
  display:flex;
  align-items:center;
  gap:0;
  border-top:1px solid #bbb;
  padding-top:14px;
}
.intro-arrow {
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  color:#1a1a1a;
  font-size:16px;
  line-height:1;
  flex-shrink:0;
}
.intro-line {
  flex:1;
  height:1px;
  background:#999;
  margin:0 10px;
}

.tracks-col {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.track-outer {
  overflow:hidden;
  mask-image:linear-gradient(to right,transparent 0%,black 3%,black 97%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 3%,black 97%,transparent 100%);
}
.track { display:flex; gap:12px; width:max-content; }
.track.go-left  { animation:goL 44s linear infinite; }
.track.go-right { animation:goR 50s linear infinite; }
@keyframes goL { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes goR { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
.track-outer:hover .track { animation-play-state:paused; }

.bubble {
  background:#fff;
  border-radius:10px;
  padding:18px 20px 14px;
  width:clamp(190px,22vw,270px);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  position:relative;
  margin-bottom:12px;
}
.bubble::after {
  content:'';
  position:absolute;
  bottom:-10px;
  left:20px;
  width:0;
  height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-top:10px solid #fff;
}
.bubble-text {
  font-size:12px;
  font-weight:300;
  color:#444;
  line-height:1.7;
  margin-bottom:14px;
  flex:1;
}
.bubble-foot {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
}
.bubble-name { font-size:12px; font-weight:500; color:#1a1a1a; margin-bottom:1px; }
.bubble-loc  { font-size:11px; font-weight:300; color:#999; }
.bubble-stars { color:#1a6eb5; font-size:12px; letter-spacing:1px; flex-shrink:0; }

@media(max-width:1024px){
  .stats-row { padding:44px 48px 40px; }
  .reviews-area { padding:0 48px 48px; gap:16px; }
  .intro-card { width:180px; min-width:180px; }
}
@media(max-width:768px){
  .stats-row { flex-direction:column; padding:36px 24px 32px; gap:24px; }
  .reviews-area { flex-direction:column; padding:0 24px 44px; gap:16px; }
  .intro-card { width:100%; min-height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:20px; gap:12px; }
  .intro-quote-icon { order:0; }
  .intro-title { margin:0; order:1; flex:1; font-size:16px; }
  .intro-controls { order:2; width:100%; padding-top:12px; border-top:1px solid #bbb; }
  .tracks-col { width:100%; }
  .bubble { width:clamp(180px,68vw,260px); }
}
@media(max-width:430px){
  .stats-row { padding:28px 20px 24px; gap:20px; }
  .stat-num  { font-size:40px; }
  .reviews-area { padding:0 0 36px; }
  .intro-card { border-radius:0; padding:20px; }
  .bubble { width:clamp(170px,76vw,240px); }
  .bubble-text { font-size:11px; }
}


/* ════════════════════════════════
   TABLET — 1024px
   ════════════════════════════════ */

@media (max-width: 1024px) {

    .stats {
        height: auto;
        min-height: 28vh;
    }

    .stat { padding: 40px 20px; }

    .stat-num { font-size: 46px; }
}


/* ════════════════════════════════
   LARGE PHONES — 768px
   ════════════════════════════════ */

@media (max-width: 768px) {

    .stats {
        height: auto;
        grid-template-columns: 1fr;
    }

    .stat {
        padding: 32px 20px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .stat:last-child { border-bottom: none; }

    .stat-num { font-size: 40px; }
}


/* ════════════════════════════════
   IPHONES — 430px
   ════════════════════════════════ */

@media (max-width: 430px) {

    .stat { padding: 26px 16px; }

    .stat-num { font-size: 36px; }

    .stat-lbl { font-size: 9px; }
}