:root{--navy:#0a1119;--navy-light:#111a25;--white:#fff;--text:#0b1219;--text-light:#66717f;--muted:#a7b0bd;--line:#e7e8e6;--accent:#1f4fd8;--radius:44px;--side-padding:clamp(20px,5.5vw,92px);--ease:cubic-bezier(0.22,0.61,0.36,1);--duration:760ms}
#cmp-feature-showcase img{display:block;max-width:100%}
.cmp-feature-showcase{position:relative;display:grid;grid-template-columns:56fr 44fr;min-height:100vh;padding:clamp(48px,9vh,104px) 0;overflow:clip}
.cmp-feature-showcase__bg{position:absolute;top:0;right:0;bottom:0;width:45%;background:#eff1f2;clip-path:polygon(26% 0,100% 0,100% 100%,0 100%)}
.cmp-feature-showcase__bg-texture{position:absolute;right:-12%;bottom:-6%;left:6%;height:62%;opacity:.07;filter:grayscale(1)}
.cmp-feature-showcase__content{position:relative;z-index:2;display:grid;grid-template-columns:34px 1fr;gap:clamp(20px,3vw,46px);padding-left:var(--side-padding);padding-right:clamp(16px,3vw,56px)}
.cmp-feature-showcase__timeline{position:relative;padding:12vh 0}
.cmp-feature-showcase__timeline-line{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line);transform:translateX(-50%)}
.cmp-feature-showcase__timeline-list{position:sticky;top:0;display:flex;flex-direction:column;justify-content:space-between;gap:34vh;margin:0;padding:0;list-style:none}
.cmp-feature-showcase__timeline-item{display:flex;flex-direction:column;align-items:center;gap:10px}
.cmp-feature-showcase__timeline-dot{width:11px;height:11px;border-radius:50%;background:#dfe2e0;transition:.3s ease}
.cmp-feature-showcase__timeline-num{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--muted)}
.cmp-feature-showcase__timeline-item.is-active .cmp-feature-showcase__timeline-dot{background:var(--text);box-shadow:0 0 0 6px rgba(11,18,25,0.1)}
.cmp-feature-showcase__timeline-item.is-active .cmp-feature-showcase__timeline-num{color:var(--text)}
.cmp-feature-showcase__row{min-height:86vh;padding:clamp(48px,10vh,96px) 0;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--line);width:65%}
.cmp-feature-showcase__row:last-child{border-bottom:0}
.cmp-feature-showcase__row-label{margin:0 0 20px;font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#000}
.cmp-feature-showcase__row-title{max-width:20ch;margin:0;font-size:clamp(2rem,2.9vw,2.75rem);line-height:1.1;letter-spacing:-0.032em;font-weight:700;color:var(--muted);transform:translateY(5px);transition:color var(--duration) var(--ease),transform var(--duration) var(--ease)}
.cmp-feature-showcase__row.is-active .cmp-feature-showcase__row-title{color:var(--text);transform:translateY(0)}
.cmp-feature-showcase__row-dash{display:block;width:42px;height:2px;margin:25px 0;background:var(--muted);transform:scaleX(0.55);transform-origin:left;transition:.7s ease}
.cmp-feature-showcase__row.is-active .cmp-feature-showcase__row-dash{background:var(--text);transform:scaleX(1)}
.cmp-feature-showcase__row-text{max-width:42ch;margin:0;font-size:1rem;line-height:1.7;color:var(--text-light);opacity:.5;transition:opacity var(--duration) var(--ease)}
.cmp-feature-showcase__row.is-active .cmp-feature-showcase__row-text{opacity:1}
.cmp-feature-showcase__stage{position:sticky;top:0;z-index:3;height:100vh}
.cmp-feature-showcase__stage-inner{position:relative;height:100%;display:flex;align-items:center}
.cmp-feature-showcase__card{position:relative;width:clamp(320px,44vw,760px);height:clamp(420px,75vh,860px);margin-left:clamp(-240px,-14vw,-22px);border-radius:var(--radius);overflow:hidden;background:var(--navy);box-shadow:0 60px 120px -60px rgba(10,17,25,0.65);top:3%}
.cmp-feature-showcase__card-stack{position:absolute;inset:0}
.cmp-feature-showcase__card-media{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity var(--duration) var(--ease),transform 1100ms var(--ease)}
.cmp-feature-showcase__card-media.is-active{opacity:1;transform:scale(1)}
.cmp-feature-showcase__card-media img{width:100%;height:100%;object-fit:cover}
.cmp-feature-showcase__hud{position:absolute;top:12vh;right:var(--side-padding);display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.cmp-feature-showcase__hud-count{margin:0;color:#000;font-size:12px;font-weight:700;letter-spacing:.2em}
.cmp-feature-showcase__hud-sep{margin:0 6px;opacity:.4}
#cmp-feature-showcase__hud-total{opacity:.45}
.cmp-feature-showcase__hud-bars{display:flex;gap:7px}
.cmp-feature-showcase__hud-bar{width:26px;height:2px;background:#fff;transition:.3s ease}
.cmp-feature-showcase__hud-bar.is-active{background:#000}
.cmp-feature-showcase__nav{position:absolute;right:5%;top:50%;transform:translateY(-50%)}
.cmp-feature-showcase__nav ul{display:flex;flex-direction:column;align-items:flex-end;gap:20px;margin:0;padding:0;list-style:none}
.cmp-feature-showcase__nav a{max-width:15ch;text-align:right;font-size:11px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:#a5a5a5;transition:.3s ease}
.cmp-feature-showcase__nav a:hover,.cmp-feature-showcase__nav a[aria-current="true"]{color:#000}
.cmp-feature-showcase__dots{position:absolute;bottom:7vh;left:58%;display:flex;gap:9px}
.cmp-feature-showcase__dot{width:7px;height:7px;border-radius:50%;background:#fff;transition:.3s ease}
.cmp-feature-showcase__dot.is-active{background:#000;transform:scale(1.25)}
@media(max-width:1024px){.cmp-feature-showcase{grid-template-columns:1fr}
.cmp-feature-showcase__bg{width:100%;clip-path:polygon(0 8%,100% 0,100% 100%,0 100%)}
.cmp-feature-showcase__stage{order:-1;height:72vh}
.cmp-feature-showcase__card{margin:0 auto;width:min(84vw,620px);height:52vh;border-radius:36px}
.cmp-feature-showcase__row{min-height:auto;padding:72px 0}
}
@media(max-width:640px){.cmp-feature-showcase{grid-template-columns:1fr;padding:0 1rem}
.cmp-feature-showcase__bg{display:none}
.cmp-feature-showcase__stage{display:none}
.cmp-feature-showcase__content{grid-template-columns:1fr;gap:0;padding-left:0;padding-right:0}
.cmp-feature-showcase__timeline{display:none}
.cmp-feature-showcase__rows{display:flex;flex-direction:column}
.cmp-feature-showcase__row{min-height:auto;padding:0;border-bottom:0;display:flex;flex-direction:column;justify-content:flex-start;margin-bottom:60px;width:100%}
.cmp-feature-showcase__row-image{width:100%;height:auto;border-radius:28px;overflow:hidden;order:2;margin-top:0}
.cmp-feature-showcase__row-image img{width:100%;height:auto;display:block}
.cmp-feature-showcase__row-content{background:white;order:3;display:flex;flex-direction:column}
.cmp-feature-showcase__row:last-child .cmp-feature-showcase__row-content{padding-bottom:clamp(32px,8vw,48px)}
.cmp-feature-showcase__row-label{margin:0 0 16px;font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#000;order:1}
.cmp-feature-showcase__row-title{max-width:100%;margin:20px 0 0 0;font-size:1.75rem;line-height:1.2;letter-spacing:-0.032em;font-weight:700;color:var(--text);transform:none;transition:none}
.cmp-feature-showcase__row.is-active .cmp-feature-showcase__row-title{color:var(--text);transform:none}
.cmp-feature-showcase__row.is-active .cmp-feature-showcase__row-dash{background:var(--text);transform:scaleX(1)}
.cmp-feature-showcase__row-text{max-width:100%;margin:20px 0 0 0;font-size:.95rem;line-height:1.6;color:var(--text-light);opacity:1;transition:none;margin:0}
.cmp-feature-showcase__row.is-active .cmp-feature-showcase__row-text{opacity:1}
.cmp-feature-showcase__hud,.cmp-feature-showcase__nav,.cmp-feature-showcase__dots{display:none}
}
@media(min-width:768px){div#cmp-feature-showcase__rows img{display:none}
}