.eco-scw{position:relative; width:100%; --eco-gap:26px;}
.eco-scw *{box-sizing:border-box;}

.eco-scw__carousel{position:relative;}

.eco-scw__viewport{overflow:hidden; width:100%;}
.eco-scw__track{display:flex; gap:var(--eco-gap); will-change:transform; transition:transform 420ms ease; padding: 10px 6px;}

.eco-scw__card{position:relative; flex:0 0 auto; border-radius:28px; padding:34px 30px 28px; border:1px solid var(--eco-card-border); background:var(--eco-card-bg);
  color:var(--eco-text);
  min-height: 260px;
  overflow:hidden;
  transform:translateY(0);
  transition: transform 260ms ease, border-color 260ms ease, background-color 260ms ease;
}

/* Optional hover image */
.eco-scw__card::before{content:""; position:absolute; inset:0; background-image:var(--eco-card-image); background-size:cover; background-position:center; opacity:0; transform:scale(1); transition: opacity 320ms ease, transform 360ms ease; z-index:0;}
/* Overlay (opacity controlled via --eco-hover-overlay) */
.eco-scw__card::after{content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.70)); opacity:0; transition:opacity 260ms ease; z-index:1;}

.eco-scw__card > *{position:relative; z-index:2;}

.eco-scw__icon{width:64px; height:64px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:rgba(255,255,255,.95);}
.eco-scw__icon svg{width:64px; height:64px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.95;}

.eco-scw__num{font-size:14px; letter-spacing:.06em; color:rgba(255,255,255,.80); margin-top:4px; margin-bottom:12px;}
.eco-scw__card-title{font-size:26px; line-height:1.15; margin:0 0 10px; font-weight:700;}
.eco-scw__card-text{font-size:15px; line-height:1.55; color:var(--eco-muted);}

.eco-scw__card:hover{transform:translateY(-6px); border-color:rgba(255,255,255,.16); background:rgba(255,255,255,0.06);} 
.eco-scw__card:hover::before,
.eco-scw__card:focus-within::before,
.eco-scw__card:active::before,
.eco-scw__card--active::before{opacity:1; transform:scale(1.05);} 

.eco-scw__card:hover::after,
.eco-scw__card:focus-within::after,
.eco-scw__card:active::after,
.eco-scw__card--active::after{opacity:var(--eco-hover-overlay, 0.75);} 

/* If no image set, still apply accent hover like the reference */
.eco-scw__card:hover{--eco-fallback-accent:1;}
.eco-scw__card:hover:not([style*="--eco-card-image"]){background:var(--eco-accent); border-color:rgba(255,255,255,.18);} 
.eco-scw__card:hover:not([style*="--eco-card-image"]) .eco-scw__card-text{color:rgba(255,255,255,.90);} 

/* With image, apply accent tint on hover */
.eco-scw__card:hover[style*="--eco-card-image"]::after,
.eco-scw__card--active[style*="--eco-card-image"]::after{background: linear-gradient(180deg, color-mix(in srgb, var(--eco-accent) 55%, transparent), rgba(0,0,0,.75));}

.eco-scw__nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.25); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.eco-scw__nav span{font-size:24px; line-height:1;}
.eco-scw__nav:hover{background:rgba(0,0,0,.45); border-color:rgba(255,255,255,.28); transform:translateY(-50%) scale(1.03);} 
.eco-scw__nav--prev{left:-10px;}
.eco-scw__nav--next{right:-10px;}

/* Responsive sizing handled via JS inline calc; provide sane fallback widths */
.eco-scw__card{width:320px;}

@media (max-width:1024px){
  .eco-scw__nav--prev{left:-6px;}
  .eco-scw__nav--next{right:-6px;}
}
@media (max-width:767px){
  .eco-scw__track{padding: 8px 2px;}
  .eco-scw__card{border-radius:24px; padding:28px 24px 24px; min-height: 240px;}
}