.korel-fleet { position:relative; color:#ecf0ed; background:#172932; --fleet-progress:0; }
.korel-fleet__stage { position:relative; isolation:isolate; padding:100px 7vw 35px; overflow:clip; background:radial-gradient(ellipse at 50% 48%,#627b8060,transparent 57%),radial-gradient(ellipse at 95% 5%,#c699742b,transparent 55%),linear-gradient(#18232c,#17313b 65%,#152831); }
.korel-fleet__top { display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid #d3e3e326; padding-bottom:18px; font-size:12px; letter-spacing:.12em; color:#b7c8ce; }
.korel-fleet__top span:first-child { color:#e5b88e; }
.korel-fleet__heading { position:relative; z-index:5; pointer-events:none; margin-top:28px; }
.korel-fleet__heading p { margin:0 0 12px; color:#d6b396; font-size:11px; letter-spacing:.13em!important; }
.korel-fleet__heading h3 { font-family:inherit; font-weight:400; font-size:clamp(30px,3.4vw,60px); line-height:1.15; letter-spacing:-.025em; margin:0; }
.korel-fleet__heading h3 span { color:#b5cbd0; }
.korel-fleet__viewport { position:relative; padding-top:340px; }
.korel-fleet__canvas { position:absolute; z-index:2; inset:0; height:340px; pointer-events:none; opacity:0; transition:opacity 1.2s ease; }
.korel-fleet__canvas canvas { display:block; width:100%; height:100%; }
.korel-fleet.is-webgl-ready .korel-fleet__canvas { opacity:1; }
.korel-fleet__fallback { position:absolute; top:20px; left:15%; display:block; width:70%; height:290px; object-fit:cover; border-radius:6px; opacity:.55; transition:opacity .8s; }
.korel-fleet.is-webgl-ready .korel-fleet__fallback { opacity:0; pointer-events:none; }
.korel-fleet__rings { position:absolute; inset:19% 15%; border:1px solid #bad7df20; border-radius:50%; transform:rotate(-12deg) scaleY(.6); pointer-events:none; }
.korel-fleet__rings::before { content:""; position:absolute; inset:12%; border:1px dashed #bad7df20; border-radius:50%; }
.korel-fleet__bearing { position:absolute; z-index:5; right:0; top:22px; display:flex; flex-direction:column; gap:6px; color:#b0c6d0; font-size:8px; letter-spacing:.14em; pointer-events:none; }
.korel-fleet__bearing>span:first-child { font-size:22px; color:#e5b88e; font-variant-numeric:tabular-nums; letter-spacing:0; }
.korel-fleet__products { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:24px; }
.korel-fleet__product { position:relative; display:block; min-width:0; text-decoration:none; border:1px solid #b7d2d54d; border-radius:7px; background:#dae2df; color:#172b34; overflow:hidden; box-shadow:0 15px 35px #05151d26; transition:box-shadow .5s,border-color .5s; }
.korel-fleet__photo { height:150px; padding:17px; background:linear-gradient(140deg,#edf1ec,#c4d3d4); overflow:hidden; }
.korel-fleet__photo img { display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .7s cubic-bezier(.22,1,.36,1); }
.korel-fleet__caption { position:relative; padding:15px 38px 17px 16px; }
.korel-fleet__caption>span { display:none; }
.korel-fleet__caption strong { display:block; color:#172b34; font-size:14px; font-weight:500; line-height:1.5; }
.korel-fleet__caption i { position:absolute; right:15px; top:23px; font-style:normal; color:#946344; transition:transform .4s; }
.korel-fleet__product:hover,.korel-fleet__product:focus-visible { border-color:#e5b88e; box-shadow:0 22px 60px #000e2260; }
.korel-fleet__product:hover img,.korel-fleet__product:focus-visible img { transform:scale(1.075); }
.korel-fleet__product:hover i { transform:translate(3px,-3px); }
.korel-fleet a:focus-visible,.korel-fleet button:focus-visible { outline:2px solid #e5b88e; outline-offset:5px; }
.korel-fleet__footer { position:relative; z-index:6; margin-top:25px; }
.korel-fleet__description { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; border-top:1px solid #d3e3e326; padding-top:22px; }
.korel-fleet__description p { max-width:530px; margin:0; font-size:13px; line-height:1.75; color:#c4d3d5; }
.korel-fleet__description a { font-size:14px; padding-block:8px; border-bottom:1px solid #e5b88e55; }
.korel-fleet__description a span { color:#e5b88e; margin-left:15px; }
.korel-fleet__controls { display:flex; justify-content:center; gap:4px; width:max-content; max-width:100%; margin:24px auto 0; padding:5px; border:1px solid #adc7cb38; border-radius:7px; background:#0f2630e8; }
.korel-fleet__controls[hidden],.korel-fleet__meta button[hidden] { display:none; }
.korel-fleet__controls button { display:flex; gap:10px; border:0; border-radius:3px; padding:13px 17px; color:#92aeb7; background:transparent; font:inherit; font-size:9px; cursor:pointer; transition:background .45s,color .45s; }
.korel-fleet__controls button span { color:#dce7e7; font-size:11px; }
.korel-fleet__controls button[aria-pressed="true"] { color:#f1d8c2; background:#865b40; }
.korel-fleet__controls button:hover { background:#b689642b; }
.korel-fleet__meta { display:flex; justify-content:center; align-items:center; min-height:38px; margin-top:10px; color:#b5c5c9; }
.korel-fleet__meta button { border:0; padding:10px 16px; background:none; color:inherit; font:inherit; font-size:11px; cursor:pointer; }
.korel-fleet__nojs { font-size:13px; }
@media (min-width:900px) and (min-height:650px) {
  .korel-fleet.is-fleet-motion { min-height:300svh; }
  .is-fleet-motion .korel-fleet__stage { position:sticky; top:0; height:100svh; min-height:650px; padding:95px 7vw 22px; display:flex; flex-direction:column; }
  .is-fleet-motion .korel-fleet__heading { margin-top:20px; display:flex; align-items:baseline; justify-content:space-between; gap:24px; }
  .is-fleet-motion .korel-fleet__heading p { margin:0; flex-shrink:0; }
  .is-fleet-motion .korel-fleet__heading h3 { font-size:clamp(26px,2.5vw,44px); }
  .is-fleet-motion .korel-fleet__heading h3 br { display:none; }
  .is-fleet-motion .korel-fleet__heading h3 span::before { content:" "; }
  .is-fleet-motion .korel-fleet__viewport { flex:1; min-height:0; padding-top:0; margin-top:15px; }
  .is-fleet-motion .korel-fleet__canvas { height:100%; }
  .is-fleet-motion .korel-fleet__fallback { position:absolute; inset:17% 20%; width:60%; height:66%; }
  .is-fleet-motion .korel-fleet__products { position:absolute; inset:0; margin:0; display:block; pointer-events:none; }
  .is-fleet-motion .korel-fleet__product { position:absolute; left:50%; top:50%; width:clamp(145px,15vw,240px); pointer-events:auto; transform:translate(-50%,-50%) translate(var(--product-x,0px),var(--product-y,0px)) scale(var(--product-scale,1)); opacity:var(--product-opacity,1); z-index:var(--product-layer,3); }
  .is-fleet-motion .korel-fleet__products { display:contents; }
  .is-fleet-motion .korel-fleet__product:hover,.is-fleet-motion .korel-fleet__product:focus-within { z-index:8!important; opacity:1!important; }
  .is-fleet-motion .korel-fleet__photo { height:clamp(90px,12svh,170px); padding:12px; }
  .is-fleet-motion .korel-fleet__caption { padding:12px 30px 13px 13px; }
  .is-fleet-motion .korel-fleet__caption strong { font-size:clamp(10px,.9vw,14px); }
  .is-fleet-motion .korel-fleet__footer { margin-top:0; }
  .is-fleet-motion .korel-fleet__description { padding-top:14px; }
  .is-fleet-motion .korel-fleet__controls { margin-top:14px; }
  .is-fleet-motion .korel-fleet__meta { margin-top:4px; }
}
@media (max-width:899px), (max-height:649px) {
  .korel-fleet__stage { padding:85px 24px 80px; }
  .korel-fleet__heading h3 { font-size:clamp(30px,6vw,48px); }
  .korel-fleet__viewport { min-height:0; padding-top:340px; }
  .korel-fleet__canvas { height:340px; }
  .korel-fleet__fallback { position:absolute; top:20px; left:10%; width:80%; height:290px; }
  .korel-fleet__rings { top:80px; bottom:auto; height:200px; }
  .korel-fleet__bearing { top:22px; }
  .korel-fleet__products { gap:12px; }
  .korel-fleet__photo { height:130px; padding:12px; }
  .korel-fleet__description { grid-template-columns:45px 1fr; gap:15px; }
  .korel-fleet__description a { grid-column:2; justify-self:start; }
  .korel-fleet__controls { flex-wrap:wrap; width:100%; }
  .korel-fleet__controls button { flex:1; justify-content:center; padding:12px 8px; }
  .korel-fleet__meta { flex-wrap:wrap; line-height:1.6; }
}
@media (max-width:560px) {
  .korel-fleet__products { grid-template-columns:1fr; }
  .korel-fleet__product { display:grid; grid-template-columns:110px 1fr; align-items:center; }
  .korel-fleet__photo { height:120px; }
  .korel-fleet__caption { padding:15px 28px 15px 13px; }
  .korel-fleet__caption i { right:10px; }
  .korel-fleet__controls { display:grid; grid-template-columns:1fr 1fr; }
  .korel-fleet__top { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { .korel-fleet * { transition:none!important; animation:none!important; } }