.ecosystem { overflow: hidden; }
.ecosystem-carousel { --card-width: min(820px, 68vw); --card-step: min(735px, 65vw); }
.ecosystem-stage { display: grid; gap: 24px; width: var(--card-width); margin: auto; }
.ecosystem-card { --case-accent: #b2e5cf; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 510px; padding: 34px 36px; border: 1px solid #ffffff28; border-radius: 22px; background: #100d18; color: #fff; box-shadow: 0 22px 50px #06110d1a; }
.case-background { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ecosystem-card::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#0c0c16ef 0%,#0c0c16d9 35%,#0c0c1640 70%,#0c0c1610),linear-gradient(0deg,#0c0c16e8,transparent 30%); pointer-events: none; }
.ecosystem-card--lider { --case-accent: #abf1ca; background: #031c15; }
.ecosystem-card--lider::after { background: linear-gradient(90deg,#031510ed,#031510c9 37%,#03151020 73%),linear-gradient(0deg,#031510df,transparent 30%); }
.ecosystem-card--miles { --case-accent: #ffdb9e; background: #071727; }
.ecosystem-card--miles::after { background: linear-gradient(90deg,#071321ef,#071321d9 35%,#07132120 75%),linear-gradient(0deg,#071321e8,transparent 30%); }
.case-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 54px; }
.case-ayzen-logo { width: 144px; height: 54px; object-fit: contain; }
.case-wordmark { font-size: 1.9rem; font-weight: 700; letter-spacing: -.055em; color: #fff; }
.case-wordmark span { color: var(--case-accent); }
.case-badge { border: 1px solid #ffffff38; background: #0c151b55; border-radius: 30px; padding: 6px 10px; font-size: .62rem; letter-spacing: .08em; color: #efeff4; backdrop-filter: blur(8px); white-space: nowrap; }
.case-copy { padding: 28px 0; }
.case-copy>.eyebrow { display: block; max-width: 70%; margin-bottom: 15px; color: var(--case-accent); font-size: .67rem; letter-spacing: .09em; line-height: 1.6; }
:root[data-theme] .ecosystem-card h3 { max-width: 58%; margin-bottom: 16px; font-size: clamp(1.7rem,2.4vw,2.15rem); line-height: 1.18; letter-spacing: -.04em; text-wrap: balance; color: var(--case-accent); }
.case-copy p { max-width: 54%; color: #e3e6e8; font-size: .92rem; line-height: 1.7; margin-bottom: 23px; }
:root[data-theme] .case-copy .button { color: #fff; background: #7250bc; border: 1px solid #c6a9ff35; font-size: .78rem; padding: 12px 17px; }
:root[data-theme] .ecosystem-card--lider .button { background: #197959; border-color: #b7f4ce38; }
:root[data-theme] .ecosystem-card--miles .button { background: #c79550; color: #101b27; border-color: #ffdfaa38; }
.case-copy .button:hover { filter: brightness(1.15); }
.case-features { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: auto; border-top: 1px solid #ffffff30; padding-top: 20px; color: #d7dce3; font-size: .72rem; }
.case-features i { font-style: normal; color: var(--case-accent); opacity: .75; }
.ecosystem-carousel.is-ready .ecosystem-stage { position: relative; display: block; width: 100%; height: 550px; touch-action: pan-y; }
.ecosystem-carousel.is-ready .ecosystem-card { position: absolute; top: 15px; left: 50%; width: var(--card-width); min-height: 0; height: 510px; transform: translateX(calc(-50% + var(--slot) * var(--card-step))) scale(.84); filter: blur(3px); opacity: .5; z-index: 1; transition: transform 650ms cubic-bezier(.22,1,.36,1), filter 650ms ease, opacity 650ms ease, box-shadow 650ms ease; will-change: transform; }
.ecosystem-carousel.is-ready .ecosystem-card.is-active { transform: translateX(-50%) scale(1); filter: none; opacity: 1; z-index: 3; box-shadow: 0 22px 48px #06110d24; }
.ecosystem-controls { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 16px; }
.ecosystem-controls[hidden] { display: none; }
.case-arrow { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; padding: 0; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 50%; transition: color .2s, border-color .2s, transform .2s; }
.case-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.case-arrow:hover { color: var(--mint); border-color: var(--mint); transform: scale(1.06); }
.case-pagination { display: flex; align-items: center; gap: 8px; }
.case-dot { width: 28px; height: 40px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.case-dot::after { content: ''; width: 6px; height: 6px; border-radius: 5px; background: var(--muted); opacity: .35; transition: width .25s, opacity .25s; }
.case-dot[aria-current="true"]::after { width: 26px; background: var(--mint); opacity: 1; }
.case-arrow:focus-visible,.case-dot:focus-visible { outline: 2px solid var(--mint); outline-offset: 5px; }
@media(max-width:1000px) {
  .ecosystem-carousel { --card-width: 76vw; --card-step: 71vw; }
  .ecosystem-card { padding: 28px; }
  .case-top { gap: 12px; }
  .case-badge { font-size: .58rem; }
  :root[data-theme] .ecosystem-card h3 { max-width: 65%; }
  .case-copy p { max-width: 62%; }
}
@media(max-width:680px) {
  .ecosystem-carousel { --card-width: 84vw; --card-step: 81vw; }
  .ecosystem-carousel.is-ready .ecosystem-stage { height: 620px; }
  .ecosystem-carousel.is-ready .ecosystem-card,.ecosystem-card { height: 585px; padding: 25px 22px; border-radius: 18px; }
  .ecosystem-carousel.is-ready .ecosystem-card { filter: blur(2px); opacity: .4; transform: translateX(calc(-50% + var(--slot) * var(--card-step))) scale(.88); }
  .ecosystem-carousel.is-ready .ecosystem-card.is-active { filter: none; opacity: 1; transform: translateX(-50%) scale(1); }
  .case-top { flex-wrap: wrap; gap: 12px; }
  .case-ayzen-logo { width: 126px; height: 47px; }
  .case-wordmark { font-size: 1.8rem; }
  .case-badge { font-size: .56rem; }
  .case-copy { padding: 24px 0; }
  .case-copy>.eyebrow { max-width: 100%; font-size: .63rem; }
  :root[data-theme] .ecosystem-card h3 { max-width: 100%; font-size: 1.85rem; }
  .case-copy p { max-width: 100%; font-size: .88rem; }
  .case-background { object-position: 65% center; opacity: .7; }
  .ecosystem-card::after,.ecosystem-card--lider::after,.ecosystem-card--miles::after { background: linear-gradient(90deg,#071016e8,#071016a6),linear-gradient(0deg,#071016e8,transparent 60%); }
  .case-features { gap: 7px 10px; font-size: .65rem; padding-top: 16px; }
  .ecosystem-controls { margin-top: 5px; }
}
@media(prefers-reduced-motion:reduce) {
  .ecosystem-carousel.is-ready .ecosystem-card,.case-arrow,.case-dot::after { transition: none; }
}