/* V13 / HOMEPAGE HERO — focused repair, no changes to product cards or other sections. */
.site--platonik .hero { isolation:isolate; overflow:hidden; }
.site--platonik .hero-copy {z-index:5;top:50%;transform:translateY(-41%);width:min(46vw,720px);gap:clamp(12px,1.5vw,20px);text-align:left;}
.site--platonik .hero-eyebrow {font-family:Arial,Helvetica,sans-serif;font-weight:750;font-size:clamp(12px,.98vw,15px);letter-spacing:.19em;}
.site--platonik .hero h1 {font-family:Arial,Helvetica,sans-serif;font-size:clamp(62px,6.4vw,112px);line-height:.99;letter-spacing:-.05em;font-weight:800;text-transform:uppercase;filter:none;word-break:normal;max-width:100%;margin:0;padding:0;background:transparent;gap:8px;}
.site--platonik .hero h1 em {font-family:Arial,Helvetica,sans-serif;font-size:.58em;font-weight:800;letter-spacing:.005em;line-height:1.06;background:rgba(255,255,255,.97);color:#0b3586;box-shadow:0 8px 25px rgba(5,18,75,.13);border-radius:3px;padding:.11em .2em .14em;white-space:nowrap;}
.site--platonik .hero-subtitle {font-family:Arial,Helvetica,sans-serif;font-weight:500;letter-spacing:.005em;font-size:clamp(16px,1.3vw,21px);line-height:1.5;max-width:535px;}
.site--platonik .hero-actions .hero-text-link {font-family:Arial,Helvetica,sans-serif;}
.site--platonik .hero-product-scene {position:absolute;z-index:3;left:auto;right:clamp(26px,4.2vw,84px);top:clamp(105px,14.8%,160px);bottom:auto;width:min(50vw,780px);height:clamp(430px,68%,620px);overflow:hidden!important;isolation:isolate;}
.site--platonik .hero-product-scene::before {inset:18% 0 6%;filter:blur(20px);background:radial-gradient(ellipse at 56% 60%,rgba(102,230,255,.26),transparent 70%);}
.site--platonik .hero-product-scene::after {display:none;}
.site--platonik .hero-orbit {pointer-events:none;top:8%;left:14%;width:73%;opacity:.55;border-color:rgba(255,255,255,.33);}
.site--platonik .hero-orbit--two {left:27%;top:18%;width:50%;border-color:rgba(255,255,255,.23);}
.site--platonik .hero-display-podium {position:absolute;left:10%;bottom:4%;width:82%;height:12%;z-index:0;border-radius:50%;background:linear-gradient(180deg,rgba(128,232,255,.28),rgba(8,32,160,.05));box-shadow:0 18px 35px rgba(0,16,116,.18);border:1px solid rgba(206,248,255,.24);pointer-events:none;}
/* Each image is a genuine, single transparent PNG. Fixed positions align the bases; no collage of variants. */
.site--platonik .hero .hero-pack,
.site--platonik .hero[data-slide] .hero-pack {position:absolute!important;display:block!important;object-fit:contain!important;object-position:center bottom!important;background:none!important;border:0!important;padding:0!important;box-shadow:none!important;border-radius:0!important;mix-blend-mode:normal!important;filter:drop-shadow(0 18px 20px rgba(0,19,88,.27))!important;animation:none!important;transform:none!important;max-width:none!important;max-height:90%!important;transition:opacity .22s ease!important;}
.site--platonik .hero .hero-pack--back,
.site--platonik .hero[data-slide] .hero-pack--back {left:3%!important;right:auto!important;bottom:11%!important;top:auto!important;width:29%!important;height:58%!important;z-index:2!important;}
.site--platonik .hero .hero-pack--main,
.site--platonik .hero[data-slide] .hero-pack--main {left:31%!important;right:auto!important;bottom:9%!important;top:auto!important;width:42%!important;height:76%!important;z-index:4!important;}
.site--platonik .hero .hero-pack--side,
.site--platonik .hero[data-slide] .hero-pack--side {left:auto!important;right:2%!important;bottom:11%!important;top:auto!important;width:29%!important;height:46%!important;z-index:3!important;}
.site--platonik .hero-scene-caption {right:4%;top:2%;font-size:clamp(10px,.86vw,13px);line-height:1.65;opacity:.83;}
/* Bottom-left controls: previous + numbered steps + next, all keyboard focusable. */
.site--platonik .hero-bottom {left:var(--gutter);right:var(--gutter);bottom:clamp(24px,4.3vh,42px);display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);z-index:7;}
.site--platonik .hero-bottom::before {display:none;}
.site--platonik .hero-step {display:inline-grid;flex:0 0 auto;place-items:center;width:clamp(38px,3.1vw,48px);height:clamp(38px,3.1vw,48px);padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.09);color:#fff;backdrop-filter:blur(10px);transition:background .2s,transform .2s,border .2s;}
.site--platonik .hero-step:hover,.site--platonik .hero-step:focus-visible {background:rgba(255,255,255,.26);transform:translateY(-2px);border-color:#fff;}
.site--platonik .hero-step svg {width:20px;height:20px;display:block;}
.site--platonik .hero-index {font-family:Arial,Helvetica,sans-serif;font-size:13px;letter-spacing:.04em;font-variant-numeric:tabular-nums;font-weight:750;}
.site--platonik .hero-dots {gap:7px;}
.site--platonik .hero-dots button {height:3px;width:30px;border-radius:100px;}
.site--platonik .hero-dots button.active {width:50px;}
.site--platonik .hero-pause {width:34px;height:34px;min-width:34px;min-height:34px;font-size:12px;}
@media(max-width:1160px) and (min-width:651px) {
 .site--platonik .hero-copy {width:50vw;}
 .site--platonik .hero h1 {font-size:clamp(48px,6.5vw,77px);}
 .site--platonik .hero-product-scene {right:0;width:51vw;height:61%;top:22%;}
}
@media(max-width:650px) {
 .site--platonik .hero {min-height:660px;height:100svh;max-height:none;}
 .site--platonik .hero-copy {left:20px;right:20px;top:clamp(111px,16%,160px);transform:none;width:calc(100% - 40px);gap:11px;}
 .site--platonik .hero h1 {font-size:clamp(42px,11.5vw,62px);letter-spacing:-.055em;gap:5px;}
 .site--platonik .hero h1 em {font-size:.55em;}
 .site--platonik .hero-subtitle {font-size:14px;line-height:1.4;}
 .site--platonik .hero-product-scene {left:0!important;right:0!important;top:auto!important;bottom:10%!important;width:100%!important;height:clamp(240px,38%,370px)!important;overflow:hidden!important;}
 .site--platonik .hero .hero-pack--back,.site--platonik .hero[data-slide] .hero-pack--back {left:4%!important;bottom:13%!important;width:29%!important;height:65%!important;}
 .site--platonik .hero .hero-pack--main,.site--platonik .hero[data-slide] .hero-pack--main {left:28%!important;bottom:12%!important;width:46%!important;height:77%!important;}
 .site--platonik .hero .hero-pack--side,.site--platonik .hero[data-slide] .hero-pack--side {right:3%!important;bottom:13%!important;width:29%!important;height:55%!important;}
 .site--platonik .hero-display-podium {bottom:4%;}
 .site--platonik .hero-bottom {bottom:14px;left:20px;right:20px;gap:9px;}
 .site--platonik .hero-step {width:38px;height:38px;}
 .site--platonik .hero-dots button {width:17px;}
 .site--platonik .hero-dots button.active {width:25px;}
 .site--platonik .hero-index {font-size:11px;}
 .site--platonik .hero-pause {width:29px;height:29px;min-width:29px;min-height:29px;}
 .site--platonik .hero-scroll {display:none!important;}
}
@media(max-width:370px) {
 .site--platonik .hero-copy {top:112px;}
 .site--platonik .hero h1 {font-size:41px;}
 .site--platonik .hero-actions {gap:7px 9px;}
 .site--platonik .hero-text-link {font-size:10px;}
 .site--platonik .hero-cta {font-size:11px;padding:11px 12px;}
 .site--platonik .hero-product-scene {height:34%!important;}
 .site--platonik .hero-bottom {gap:7px;}
}
@media(prefers-reduced-motion:reduce) {.site--platonik .hero-step {transition:none!important;}}
/* Keep every individual pack completely visible on small phones. */
@media(max-width:650px){
 .site--platonik .hero .hero-pack--back,.site--platonik .hero[data-slide] .hero-pack--back {left:3%!important;width:27%!important;}
 .site--platonik .hero .hero-pack--main,.site--platonik .hero[data-slide] .hero-pack--main {left:30%!important;width:41%!important;}
 .site--platonik .hero .hero-pack--side,.site--platonik .hero[data-slide] .hero-pack--side {right:1%!important;width:28%!important;}
}