.biostep-3d{--ice:#eaf7ff;--ink:#1c648c;--body:#66879a;--accent:#f6ae00;position:relative;overflow:hidden;padding:clamp(64px,8vw,120px) 24px;background:radial-gradient(circle at 50% 50%,#fff 0,var(--ice) 67%,#d8f0ff 100%);isolation:isolate}
.biostep-3d *{box-sizing:border-box}.biostep-3d__inner{max-width:1440px;margin:auto}.biostep-3d__header{text-align:center;margin-bottom:28px}.biostep-3d__eyebrow{color:var(--accent);font-size:12px;letter-spacing:.18em;text-transform:uppercase}.biostep-3d h2{margin:8px 0;color:var(--ink);font-size:clamp(30px,4vw,56px)}
.biostep-3d__stage{display:grid;grid-template-columns:minmax(220px,1fr) minmax(420px,2.3fr) minmax(220px,1fr);align-items:center;gap:20px;min-height:620px}.biostep-3d__visual{position:relative}.biostep-3d__product{position:relative;opacity:0;transform:translateY(24px);transition:.6s ease;cursor:grab;touch-action:pan-y;user-select:none;outline:none}.biostep-3d.is-visible .biostep-3d__product{opacity:1;transform:none}.biostep-3d__product.is-dragging{cursor:grabbing}.biostep-3d__product:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:18px}.biostep-3d__product img{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 22px rgba(29,89,127,.18));pointer-events:none}.biostep-3d__progress{position:absolute;left:18%;right:18%;bottom:8%;height:3px;background:rgba(28,100,140,.12);border-radius:9px;overflow:hidden}.biostep-3d__progress span{display:block;width:0;height:100%;background:var(--accent);transition:width .15s}.biostep-3d__product.is-loaded .biostep-3d__progress{opacity:0}.biostep-3d__hint{text-align:center;color:var(--body);font-size:12px;letter-spacing:.04em;margin-top:-5%}
.biostep-3d__features{display:flex;flex-direction:column;gap:72px;z-index:2}.biostep-3d__feature{display:flex;gap:12px;align-items:flex-start;opacity:.35;transform:translateY(12px);transition:.45s ease}.biostep-3d__feature.is-active,.biostep-3d.is-visible .biostep-3d__feature{opacity:1;transform:none}.biostep-3d__feature h3{margin:0 0 8px;color:var(--ink);font-size:17px;font-weight:500}.biostep-3d__feature p{margin:0;color:var(--body);font-size:14px;line-height:1.75}.biostep-3d__dot,.biostep-3d__anchor{display:block;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(246,174,0,.12);flex:0 0 auto;margin-top:6px}.biostep-3d__features--left{text-align:right}.biostep-3d__features--left .biostep-3d__feature{flex-direction:row-reverse}.biostep-3d__anchor{position:absolute;transform:translate(-50%,-50%);z-index:3}.biostep-3d__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.biostep-3d__lines line{stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke}
@media(max-width:1024px){.biostep-3d__stage{grid-template-columns:1fr minmax(360px,1.8fr) 1fr;min-height:520px}.biostep-3d__features{gap:42px}.biostep-3d__feature p{font-size:12px}}
@media(max-width:767px){.biostep-3d{padding:56px 20px}.biostep-3d__stage{display:flex;flex-direction:column;min-height:0}.biostep-3d__visual{order:1;width:min(100%,560px)}.biostep-3d__features{order:2;width:100%;gap:16px}.biostep-3d__features--left,.biostep-3d__features--right{text-align:left}.biostep-3d__features--left .biostep-3d__feature{flex-direction:row}.biostep-3d__feature{padding:16px;border:1px solid rgba(28,100,140,.12);border-radius:14px;background:rgba(255,255,255,.6)}.biostep-3d__lines,.biostep-3d__anchor{display:none}}
@media(prefers-reduced-motion:reduce){.biostep-3d__product,.biostep-3d__feature{transition:none!important;transform:none!important;opacity:1!important}}