/* SmartButton page: card illustrations and battery visual. */
.pc-ill{position:relative;height:150px;margin:-4px 0 26px;display:grid;place-items:center;border:1px solid rgba(185,161,106,.18);background:radial-gradient(90% 120% at 50% 0%,#1a2321 0%,#131819 70%)}
.pc-btn{position:relative;width:92px;height:92px}
.pc-btn img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.pc-ring{position:absolute;left:50%;top:50%;width:52%;height:52%;transform:translate(-50%,-50%);border-radius:50%}
/* 01: press + voice */
.pc-ill-1 .pc-btn{animation:pcPress 4s ease-in-out infinite}
@keyframes pcPress{0%,8%,62%,100%{transform:scale(1)}12%,58%{transform:scale(.95)}}
.pc-ill-1 .pc-ring{animation:pcListen 4s ease-in-out infinite}
@keyframes pcListen{0%,10%,64%,100%{box-shadow:0 0 0 0 rgba(248,240,222,0)}16%,56%{box-shadow:0 0 0 2px rgba(248,240,222,.85),0 0 16px 4px rgba(248,240,222,.35)}}
.pc-waves{position:absolute;left:calc(50% + 54px);top:50%;transform:translateY(-50%);display:flex;gap:6px}
.pc-waves i{display:block;width:10px;height:22px;border:2.5px solid #e2c68a;border-left:0;border-top-color:transparent;border-bottom-color:transparent;border-radius:0 50% 50% 0;opacity:0;animation:pcWave 4s ease-out infinite}
.pc-waves i:nth-child(2){width:14px;height:34px;animation-delay:.2s}.pc-waves i:nth-child(3){width:18px;height:46px;animation-delay:.4s}
@keyframes pcWave{0%,14%{opacity:0}22%,50%{opacity:1}60%,100%{opacity:0}}
/* 02: microphone powered only while pressed */
.pc-mic{display:flex;align-items:center;gap:14px}
.pc-mic svg{width:200px;height:94px;overflow:visible}
.pc-mic .wire{fill:none;stroke:#5c6567;stroke-width:2}
.pc-mic .wire.live{stroke:#e8cb8c;stroke-dasharray:100;stroke-dashoffset:100;animation:pcLive 4s ease-in-out infinite}
@keyframes pcLive{0%,14%{stroke-dashoffset:100;opacity:0}22%,56%{stroke-dashoffset:0;opacity:1}64%,100%{stroke-dashoffset:0;opacity:0}}
.pc-mic .switch{stroke:#cbbd9b;stroke-width:2.4;stroke-linecap:round;transform-origin:50px 35px;animation:pcSwitch 4s ease-in-out infinite}
@keyframes pcSwitch{0%,12%,60%,100%{transform:rotate(-28deg)}18%,54%{transform:rotate(0)}}
.pc-mic .mic{fill:none;stroke:#7d8789;stroke-width:2;animation:pcMic 4s ease-in-out infinite}
@keyframes pcMic{0%,16%,60%,100%{stroke:#7d8789}22%,54%{stroke:#f0d9a2}}
.pc-mic .dot{fill:#cbbd9b}
/* 03: acceptance light */
.pc-ill-3 .pc-ring{animation:pcAccept 3.2s ease-in-out infinite}
@keyframes pcAccept{0%,20%{box-shadow:0 0 0 0 rgba(232,203,140,0)}35%,75%{box-shadow:0 0 0 2px rgba(232,203,140,.95),0 0 22px 7px rgba(232,203,140,.45)}100%{box-shadow:0 0 0 0 rgba(232,203,140,0)}}
.pc-check{position:absolute;right:-6px;top:-6px;width:26px;height:26px;border-radius:50%;background:#76c4a0;color:#0f1a16;display:grid;place-items:center;font:700 13px/1 'Hanken Grotesk',sans-serif;opacity:0;animation:pcCheck 3.2s ease-in-out infinite}
@keyframes pcCheck{0%,30%{opacity:0;transform:scale(.6)}40%,75%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(.8)}}
.pc-note{position:absolute;left:calc(50% + 58px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px}
.pc-note i{display:block;width:4px;height:4px;border-radius:50%;background:#e8cb8c;opacity:0;animation:pcNote 3.2s ease-out infinite}
.pc-note i:nth-child(2){animation-delay:.12s;margin-left:6px}.pc-note i:nth-child(3){animation-delay:.24s;margin-left:12px}
@keyframes pcNote{0%,34%{opacity:0;transform:translateX(0)}44%{opacity:1}70%,100%{opacity:0;transform:translateX(16px)}}
/* Battery visual */
.product-runtime.with-visual{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(220px,280px);gap:25px 5vw;align-items:start}.product-runtime.with-visual>div:first-child{display:contents}.product-runtime.with-visual h2{grid-column:1;grid-row:1/4}.product-runtime.with-visual>div>p,.product-runtime.with-visual>div>.refresh-link{grid-column:2}.product-runtime.with-visual>.bat-visual{display:block;grid-column:3;grid-row:1/4;align-self:center}
.bat-visual{position:relative;justify-self:center;width:100%;max-width:280px;aspect-ratio:1}
.bat-visual svg{width:100%;height:100%;display:block}
.bat-seg{fill:none;stroke:#2f3a3c;stroke-width:16}
.bat-seg.on{stroke:#c6aa70;opacity:0;animation:batOn .6s ease forwards}
@keyframes batOn{to{opacity:1}}
.bat-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.bat-center b{font:400 clamp(48px,4.6vw,68px)/1 'Cormorant Garamond',serif;color:#f3eee3;letter-spacing:-.03em}
.bat-center span{font:500 12px/1.4 'Hanken Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#c6aa70;margin-top:8px;max-width:16ch}
@media(max-width:1000px){.product-runtime.with-visual{grid-template-columns:1fr;gap:24px}.product-runtime.with-visual h2,.product-runtime.with-visual>div>p,.product-runtime.with-visual>div>.refresh-link,.product-runtime.with-visual>.bat-visual{grid-column:1;grid-row:auto}.product-runtime.with-visual h2{order:0}.product-runtime.with-visual>.bat-visual{order:1;width:min(240px,64vw);justify-self:start;margin:6px 0 8px}.product-runtime.with-visual>div>p,.product-runtime.with-visual>div>.refresh-link{order:2}}
@media(prefers-reduced-motion:reduce){.pc-ill *,.bat-visual *{animation:none!important}.bat-seg.on{opacity:1}}
@media(max-width:760px){.benefit-cards .pc-ill{grid-column:1/-1;grid-row:1;margin:0 0 18px}.benefit-cards .benefit-number{grid-row:2/4}.benefit-cards article h2{grid-row:2}.benefit-cards article p{grid-row:3}}

/* SmartButton hero (Branko 18.10): the whole detail photo, uncropped, at the right edge; only the left edge fades into the page. */
@media (min-width:801px){
.product-detail main .object-hero{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-right:0}
.product-detail main .object-hero .object-photo{align-self:center;justify-self:end;min-height:0;height:min(calc(100svh - 120px),860px);width:auto;aspect-ratio:4/5;max-height:none;margin:0;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.product-detail main .object-hero .object-photo img{object-fit:contain;object-position:50% 50%}
.product-detail main .object-hero .object-photo:after{display:none}
}
.product-detail main .object-hero .object-photo{animation:objHeroIn 2s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes objHeroIn{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){.product-detail main .object-hero .object-photo{animation:none}}