:root{
  --st-bg:#e9ecec; --st-card:#fff; --st-title:#214131; --st-text:#445459;
  --st-cta:#1fa7a4; --st-cta-ink:#fff; --st-shadow:0 14px 30px rgba(17,36,48,.08);
}
.stc-wrapper{ position:relative; background:var(--st-bg); padding:32px 0 48px; }
.stc-wrapper .stc-head{ width:min(1200px,92vw); margin:0 auto 10px; }
.stc-wrapper .stc-head h2{ margin:0 0 8px; color:var(--st-title); font-size:clamp(24px,3.2vw,34px); }
.stc-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:0;
  background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.12);
  color:var(--st-title); font-size:26px; cursor:pointer; z-index:3;
  display:grid; place-items:center;
}
.stc-wrapper.no-arrows .stc-nav{ display:none; }
.stc-prev{ left:12px; } .stc-next{ right:12px; }
.stc-nav:hover{ background:#f7f7f7; }
.stc-track{
  width:min(1200px,92vw); margin:0 auto; display:grid; grid-auto-flow:column;
  gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:22px 8px 6px; cursor:grab; user-select:none;
}
.stc-track:active{ cursor:grabbing; }
.stc-track::-webkit-scrollbar{ display:none; }
.stc-wrapper{ --per-desktop:3; --per-tablet:2; --per-mobile:1; }
.stc-track{ grid-auto-columns: calc((100% - 2rem) / var(--per-desktop)); }
@media (max-width:1024px){ .stc-track{ grid-auto-columns: calc((100% - 1rem) / var(--per-tablet)); } }
@media (max-width:640px){ .stc-track{ grid-auto-columns: 100%; } }
.stc-card{
  scroll-snap-align:center; background:var(--st-card);
  border-radius:16px; box-shadow:var(--st-shadow); padding:24px 22px 22px; display:grid;
}
.stc-card .card-media{
  width:calc(100% - 32px); height:165px; margin:-46px auto 14px; border-radius:12px;
  overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.12); background:#ddd;
}
.stc-card .card-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.01); transition:transform .35s ease; }
.stc-card:hover .card-media img{ transform:scale(1.05); }
.stc-card .card-body{ display:grid; gap:16px; text-align:left; }
.stc-card h3{ margin:0; font-size:22px; color:var(--st-title); font-weight:800; }
.stc-card p{ margin:0; font-size:16px; color:var(--st-text); line-height:1.7; }
.stc-card .card-cta{
  justify-self:start; display:inline-block; padding:12px 18px; border-radius:10px; background:var(--st-cta);
  color:var(--st-cta-ink); text-decoration:none; font-weight:800; box-shadow:0 8px 18px rgba(31,167,164,.25);
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.stc-card .card-cta:hover{ transform:translateY(-1px); background:#178380; box-shadow:0 12px 26px rgba(31,167,164,.3); }
.stc-wrapper.no-dots .stc-dots{ display:none; }
.stc-dots{ display:flex; gap:10px; justify-content:center; margin-top:18px; }
.stc-dots .stc-dot{
  appearance:none; border:0; width:10px; height:10px; border-radius:50%;
  background:#fff; opacity:.55; box-shadow:0 1px 3px rgba(0,0,0,.25); cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}
.stc-dots .stc-dot:hover{ opacity:.85; transform:scale(1.1); }
.stc-dots .stc-dot.is-active{ opacity:1; transform:scale(1.2); }