/* „Strony WWW”: animacja budowy strony (kod → struktura → design → efekty) w miejscu filmu. Wszystko skaluje się od szerokości karty (cqw). */
.ba-videowrap-build{background:#140F0B;isolation:isolate}
.wb{position:absolute;inset:0;container-type:inline-size;overflow:hidden;font-family:'Work Sans',system-ui,sans-serif;color:#F6EBD3;user-select:none;pointer-events:none}
.wb *{box-sizing:border-box}
.wb-grid{position:absolute;inset:-10%;background-image:radial-gradient(rgba(217,190,134,.16) 1px,transparent 1.2px);background-size:3.2cqw 3.2cqw;opacity:.7}
.wb-glow{position:absolute;width:70cqw;height:70cqw;left:15cqw;top:-10cqw;border-radius:50%;background:radial-gradient(circle,rgba(217,190,134,.22),transparent 65%);will-change:transform}

/* okno przeglądarki */
.wb-win{position:absolute;left:5.5%;right:5.5%;top:8%;bottom:8%;border-radius:2.4cqw;background:#1B1510;border:1px solid rgba(217,190,134,.22);box-shadow:0 3cqw 6cqw -2cqw rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;will-change:transform}
.wb-bar{position:relative;height:9%;display:flex;align-items:center;gap:1cqw;padding:0 2.2cqw;background:#231B15;border-bottom:1px solid rgba(217,190,134,.14)}
.wb-dot{width:1.3cqw;height:1.3cqw;border-radius:50%;background:#4A3A2C;flex:none}
.wb-dot:nth-child(1){background:#C9735A}.wb-dot:nth-child(2){background:#D9BE86}.wb-dot:nth-child(3){background:#7E9A6E}
.wb-url{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;height:56%;border-radius:9cqw;background:rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;gap:.8cqw;font-size:1.75cqw;color:rgba(246,235,211,.75);letter-spacing:.02em;white-space:nowrap}
.wb-url svg{width:1.5cqw;height:1.5cqw;flex:none;color:#7E9A6E}
.wb-url-t:after{content:'';display:inline-block;width:1px;height:1.1em;margin-left:1px;vertical-align:-.2em;background:currentColor;animation:wbBlink 1s steps(1) infinite}
.wb-stage{position:absolute;right:2.2cqw;top:50%;transform:translateY(-50%);height:1.8cqw;overflow:hidden;font:600 1.45cqw/1.8cqw 'Space Grotesk',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#D9BE86;text-align:right}
.wb-stage-in{display:block;will-change:transform}
.wb-stage-in span{display:block;height:1.8cqw}
.wb-prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#A68150,#F4D79B);box-shadow:0 0 1.2cqw rgba(244,215,155,.7)}

.wb-view{position:absolute;left:0;right:0;top:9%;bottom:0;overflow:hidden}

/* 01 · kod */
.wb-code{position:absolute;inset:0;z-index:3;display:flex;padding:3.2cqw 0 0;background:#15100C;font:400 2.15cqw/1.62 ui-monospace,'SF Mono',Menlo,Consolas,monospace;white-space:pre}
.wb-gut{width:6.5cqw;flex:none;text-align:right;padding-right:2cqw;color:rgba(246,235,211,.22)}
.wb-lines{flex:1;color:#E9DFC9}
.wb-ln{display:block;height:1.62em}
.wb-ln.is-on:after{content:'';display:inline-block;width:.55em;height:1.15em;vertical-align:-.2em;background:#F4D79B;animation:wbBlink 1s steps(1) infinite}
.t-tag{color:#E59A7A}.t-at{color:#D9BE86}.t-str{color:#A9C49A}.t-tx{color:#F6EBD3}.t-pu{color:rgba(246,235,211,.45)}.t-pr{color:#9DB8D4}
@keyframes wbBlink{50%{opacity:0}}

/* układ wspólny: szkielet i gotowa strona mają te same pozycje (w % widoku) */
.wb-wire,.wb-site{position:absolute;inset:0}
.wb-b{position:absolute}
.L-logo{left:5%;top:5.5%;width:15%;height:7%}
.L-l1{left:47%;top:7.5%;width:8%;height:3%}.L-l2{left:57.5%;top:7.5%;width:10%;height:3%}.L-l3{left:70%;top:7.5%;width:8%;height:3%}
.L-nbtn{left:81%;top:5%;width:14%;height:8%}
.L-h1{left:5%;top:21%;width:46%;height:24%}
.L-sub{left:5%;top:49%;width:40%;height:8%}
.L-cta{left:5%;top:61%;width:22%;height:9.5%}
.L-img{left:55%;top:20%;width:40%;height:50%}
.L-c1{left:5%;top:77%;width:28%;height:17%}.L-c2{left:36%;top:77%;width:28%;height:17%}.L-c3{left:67%;top:77%;width:28%;height:17%}

/* 02 · struktura */
.wb-wire{background:#17120E;background-image:linear-gradient(rgba(217,190,134,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(217,190,134,.06) 1px,transparent 1px);background-size:5% 8%}
.wb-wire .wb-b{border:1px dashed rgba(217,190,134,.55);border-radius:.8cqw;background:rgba(217,190,134,.05);transform-origin:left center}
.wb-wire .L-h1{background:repeating-linear-gradient(180deg,rgba(217,190,134,.18) 0 38%,transparent 38% 54%)}
.wb-wire .L-img svg{position:absolute;inset:0;width:100%;height:100%;color:rgba(217,190,134,.35)}
.wb-wire .wb-b i{position:absolute;left:4%;top:-2.2cqw;font:500 1.3cqw/1 ui-monospace,Menlo,monospace;font-style:normal;color:rgba(217,190,134,.75)}

/* 03 · gotowa strona */
.wb-site{background:#F6EBD3;color:#2A211B;clip-path:inset(0 0 100% 0)}
.wb-site .L-logo{display:flex;align-items:center;gap:.8cqw;font:italic 400 2.6cqw/1 'Instrument Serif','Cormorant Garamond',Georgia,serif}
.wb-site .L-logo b{width:1.8cqw;height:1.8cqw;border-radius:50% 50% 50% 0;background:#A68150;flex:none}
.wb-site .L-l1,.wb-site .L-l2,.wb-site .L-l3{font-size:1.35cqw;line-height:1;color:#6E5B47;white-space:nowrap}
.wb-site .L-nbtn{display:flex;align-items:center;justify-content:center;border-radius:9cqw;border:1px solid #2A211B;font-size:1.3cqw;font-weight:500}
.wb-site .L-h1{margin:0;font:400 4.6cqw/.98 'Instrument Serif','Cormorant Garamond',Georgia,serif;letter-spacing:-.01em}
.wb-site .L-h1 em{color:#A68150}
.wb-site .L-h1 .wb-hw{display:inline-block;will-change:transform}
.wb-site .L-sub{font-size:1.5cqw;line-height:1.45;color:#6E5B47}
.wb-site .L-cta{display:flex;align-items:center;justify-content:center;gap:.7cqw;border-radius:9cqw;background:#2A211B;color:#F6EBD3;font-size:1.4cqw;font-weight:500;overflow:hidden;will-change:transform}
.wb-site .L-cta svg{width:2cqw;height:1cqw}
.wb-ripple{position:absolute;left:50%;top:50%;width:4cqw;height:4cqw;margin:-2cqw 0 0 -2cqw;border-radius:50%;background:rgba(244,215,155,.55);transform:scale(0);opacity:0}
.wb-site .L-img{border-radius:1.4cqw;overflow:hidden}
.wb-pic{position:absolute;inset:0;background:linear-gradient(180deg,#E9B97A 0%,#E39A6C 38%,#C97A5C 52%,#2E3A3A 52.5%,#1F2A2C 100%);will-change:transform}
.wb-sun{position:absolute;left:58%;top:24%;width:24%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#FFF1CF 0 45%,rgba(255,236,196,.0) 72%)}
.wb-sea{position:absolute;left:0;right:0;top:52.5%;bottom:0;background:repeating-linear-gradient(180deg,rgba(255,214,160,.28) 0 2%,transparent 2% 9%);-webkit-mask:linear-gradient(90deg,transparent 40%,#000 62%,#000 78%,transparent);mask:linear-gradient(90deg,transparent 40%,#000 62%,#000 78%,transparent)}
.wb-hill{position:absolute;left:-5%;width:60%;top:40%;height:14%;background:#3A3330;border-radius:50% 60% 0 0}
.wb-pic-tag{position:absolute;left:5%;bottom:6%;padding:.6cqw 1.2cqw;border-radius:9cqw;background:rgba(246,235,211,.9);font-size:1.15cqw;color:#2A211B}
.wb-site .wb-card{border-radius:1.2cqw;background:#EADBBE;padding:1.6cqw 1.8cqw;display:flex;flex-direction:column;justify-content:space-between}
.wb-card b{font:400 3cqw/1 'Instrument Serif',Georgia,serif;color:#2A211B}
.wb-card span{font-size:1.2cqw;color:#6E5B47}
.wb-scan{position:absolute;z-index:4;left:0;right:0;top:0;height:2px;background:#F4D79B;box-shadow:0 0 1.5cqw 0.4cqw rgba(244,215,155,.75),0 0 6cqw 1.5cqw rgba(244,215,155,.25);opacity:0}

/* kursor */
.wb-cursor{position:absolute;left:0;top:0;width:3.4cqw;height:3.4cqw;z-index:5;opacity:0;will-change:transform;filter:drop-shadow(0 .5cqw .8cqw rgba(0,0,0,.45))}

/* 04 · efekty */
.wb-dim{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(20,15,11,.55),rgba(20,15,11,.82));opacity:0;z-index:2}
.wb-glass{position:absolute;z-index:3;border-radius:1.8cqw;background:rgba(32,25,19,.78);border:1px solid rgba(217,190,134,.28);box-shadow:0 2.5cqw 5cqw -1.5cqw rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.07);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;will-change:transform,opacity}
.wb-k{font:600 1.25cqw/1 'Space Grotesk',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,235,211,.6)}
.wb-score{right:6%;top:15%;width:52%;padding:2.2cqw 2.4cqw 2cqw}
.wb-rings{display:flex;justify-content:space-between;margin-top:1.8cqw}
.wb-ring{position:relative;width:30%;text-align:center}
.wb-ring svg{display:block;width:100%;height:auto;transform:rotate(-90deg)}
.wb-ring .bgc{stroke:rgba(12,206,107,.15)}
.wb-ring .fgc{stroke:#0CCE6B;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round;filter:drop-shadow(0 0 .6cqw rgba(12,206,107,.55))}
.wb-ring b{position:absolute;left:0;right:0;top:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font:600 3.4cqw/1 'Space Grotesk',system-ui,sans-serif;color:#7DF0B0}
.wb-ring span{display:block;margin-top:.9cqw;font-size:1.2cqw;color:rgba(246,235,211,.75)}
.wb-chart{left:6%;bottom:9%;width:44%;padding:2cqw 2.2cqw 0;overflow:hidden}
.wb-chart-v{display:flex;align-items:baseline;gap:1cqw;margin-top:1cqw;font:600 4.6cqw/1 'Space Grotesk',system-ui,sans-serif;color:#F4D79B}
.wb-chart-v small{font-size:1.3cqw;font-weight:500;color:#7DF0B0}
.wb-chart svg{display:block;width:calc(100% + 4.4cqw);margin:1cqw -2.2cqw 0;height:auto}
.wb-chart .ln{fill:none;stroke:#F4D79B;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.wb-chart .ar{opacity:0}
.wb-chip{display:flex;align-items:center;gap:1.1cqw;padding:1.3cqw 2cqw 1.3cqw 1.4cqw;border-radius:9cqw}
.wb-chip-ico{width:3.6cqw;height:3.6cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.wb-chip-ico svg{width:55%;height:55%}
.wb-chip-t{display:flex;flex-direction:column;gap:.5cqw}
.wb-chip-t b{font:600 2.5cqw/1 'Space Grotesk',system-ui,sans-serif;color:#F6EBD3;white-space:nowrap}
.wb-chip-t span{font-size:1.15cqw;line-height:1;color:rgba(246,235,211,.6);white-space:nowrap}
.wb-speed{left:7%;top:17%}
.wb-speed .wb-chip-ico{background:rgba(244,215,155,.16);color:#F4D79B}
.wb-rank{right:7%;bottom:12%}
.wb-rank .wb-chip-ico{background:rgba(12,206,107,.16);color:#7DF0B0}
.wb-rank-up{display:inline-block;color:#7DF0B0;font-size:.7em;margin-left:.4em}

@media (prefers-reduced-motion:reduce){.wb-url-t:after,.wb-ln.is-on:after{animation:none}}
.wb-chip-t b .wb-rk{font:inherit;color:#7DF0B0}
.wb-chip-t b .wb-rank-up{font-size:.7em;line-height:1;color:#7DF0B0}