@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

.ktt-section{
  --ktt-cyan:#1FB5E8;
  --ktt-cyan-600:#0E9ACB;
  --ktt-ink:#0F1419;
  --ktt-ink-500:#2A2E37;
  --ktt-ink-300:#4B5159;
  --ktt-line:#E4E7EB;
  --ktt-line-soft:#EDF0F3;
  --ktt-paper:#FAFBFC;
  --ktt-muted:#6B7280;
  --ktt-amber:#F59E0B;
  --ktt-card-bg:#ffffff;
  --ktt-card-radius:22px;
  --ktt-card-padding:32px;
  --ktt-gap:20px;
  --ktt-track-size:360px;
  --ktt-card-h:auto;
  --ktt-mask:14%;
  --ktt-ff-display:"Raleway",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --ktt-ff-body:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;

  background:var(--ktt-paper);
  border-top:1px solid var(--ktt-line);
  border-bottom:1px solid var(--ktt-line);
  padding:96px 0;
  font-family:var(--ktt-ff-body);
  color:var(--ktt-ink);
}
.ktt-section *,
.ktt-section *::before,
.ktt-section *::after{box-sizing:border-box;}

.ktt-wrap{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}

/* ── VERTICAL (columns) ─────────────────────── */
.ktt-tracks--vertical{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:var(--ktt-gap);
  max-height:740px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--ktt-mask),#000 calc(100% - var(--ktt-mask)),transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 var(--ktt-mask),#000 calc(100% - var(--ktt-mask)),transparent);
}
.ktt-tracks--vertical .ktt-track{
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  width:var(--ktt-track-size);
  overflow:hidden;
}
.ktt-tracks--vertical .ktt-track-inner{
  display:flex;
  flex-direction:column;
  gap:var(--ktt-gap);
  animation-name:ktt-scroll-y;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform;
}

/* ── HORIZONTAL (rows) ──────────────────────── */
.ktt-tracks--horizontal{
  display:flex;
  flex-direction:column;
  gap:var(--ktt-gap);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--ktt-mask),#000 calc(100% - var(--ktt-mask)),transparent);
          mask-image:linear-gradient(to right,transparent,#000 var(--ktt-mask),#000 calc(100% - var(--ktt-mask)),transparent);
}
.ktt-tracks--horizontal .ktt-track{
  display:flex;
  overflow:hidden;
  height:var(--ktt-track-size);
}
.ktt-tracks--horizontal .ktt-track-inner{
  display:flex;
  flex-direction:row;
  gap:var(--ktt-gap);
  animation-name:ktt-scroll-x;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform;
}
.ktt-tracks--horizontal .ktt-card{
  flex-shrink:0;
  width:var(--ktt-track-size);
  height:var(--ktt-card-h);
}

/* pause on hover (whole section) */
.ktt-section:hover .ktt-track-inner{animation-play-state:paused;}

/* reverse direction modifier */
.ktt-track-inner.ktt-rev{animation-direction:reverse;}

@keyframes ktt-scroll-y{
  from{transform:translateY(0);}
  to  {transform:translateY(-50%);}
}
@keyframes ktt-scroll-x{
  from{transform:translateX(0);}
  to  {transform:translateX(-50%);}
}

/* ── CARD ───────────────────────────────────── */
.ktt-card{
  padding:var(--ktt-card-padding);
  border:1px solid var(--ktt-line);
  border-radius:var(--ktt-card-radius);
  background:var(--ktt-card-bg);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
}
.ktt-card:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 12px rgba(15,20,25,.06),0 10px 30px rgba(15,20,25,.08);
  border-color:rgba(31,181,232,.25);
}
.ktt-stars{display:inline-flex;gap:2px;margin-bottom:18px;}
.ktt-stars svg{width:18px;height:18px;color:var(--ktt-amber);}
.ktt-card p{
  color:var(--ktt-ink-500);
  font-size:15px;
  line-height:1.65;
  margin:0 0 24px;
  flex:1;
}
.ktt-author{
  display:flex;align-items:center;gap:12px;
  padding-top:20px;
  border-top:1px solid var(--ktt-line-soft);
}
.ktt-avatar{
  width:40px;height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--ktt-cyan) 0%,var(--ktt-cyan-600) 100%);
  color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
  font-family:var(--ktt-ff-display);
  flex-shrink:0;
}
.ktt-info{line-height:1.2;}
.ktt-n{font-weight:700;font-size:14.5px;}
.ktt-m{font-size:12.5px;color:var(--ktt-muted);margin-top:2px;}

@media (max-width:960px){
  .ktt-tracks--vertical{gap:14px;}
  .ktt-tracks--vertical .ktt-track:nth-child(n+3){display:none;}
  .ktt-tracks--vertical .ktt-track{width:calc(50% - 7px);max-width:380px;}
}
@media (max-width:620px){
  .ktt-tracks--vertical .ktt-track:nth-child(n+2){display:none;}
  .ktt-tracks--vertical .ktt-track{width:100%;max-width:none;}
}

@media (prefers-reduced-motion:reduce){
  .ktt-track-inner{animation:none!important;}
}