/* AVP Group — landing. Tokens first; every colour and type decision comes from here. */
:root{
  --fog:#d8d8d8;        /* page = studio background of the scenes */
  --fog-2:#e5e5e5;
  --paper:#f3f3f3;
  --graphite:#141414;
  --graphite-2:#222222;
  --moss:#4F6B2C;
  --lichen:#B5D08A;
  --bark:#5B4433;
  --ink-soft:rgba(20,20,20,.62);
  --line:rgba(20,20,20,.14);

  --f-display:"Geologica",system-ui,sans-serif;
  --f-body:"Instrument Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  --r-s:12px; --r-m:20px; --r-l:32px; --r-pill:999px;
  --gut:clamp(16px,3.2vw,48px);
  --max:1360px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --header-h:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--fog);color:var(--graphite);font-family:var(--f-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ---------- type ---------- */
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.h-xl{font-family:var(--f-display);font-weight:500;font-size:clamp(40px,6.4vw,96px);line-height:.96;letter-spacing:-.045em;margin:0}
.h-l{font-family:var(--f-display);font-weight:500;font-size:clamp(34px,4.6vw,68px);line-height:1;letter-spacing:-.04em;margin:0}
.h-m{font-family:var(--f-display);font-weight:500;font-size:clamp(26px,2.6vw,38px);line-height:1.08;letter-spacing:-.03em;margin:0}
.h-s{font-family:var(--f-display);font-weight:500;font-size:22px;line-height:1.15;letter-spacing:-.02em;margin:0}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--ink-soft);max-width:46ch}
.mono{font-family:var(--f-mono)}

/* ---------- buttons ---------- */
.btn{--bg:var(--graphite);--fg:var(--paper);display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 10px 0 24px;border-radius:var(--r-pill);background:var(--bg);color:var(--fg);text-decoration:none;font-weight:600;font-size:15px;border:0;cursor:pointer;transition:transform .4s var(--ease),background .3s}
.btn .ic{width:34px;height:34px;border-radius:50%;background:var(--lichen);color:var(--graphite);display:grid;place-items:center;transition:transform .4s var(--ease)}
.btn:hover .ic{transform:rotate(-45deg)}
.btn:active{transform:scale(.97)}
.btn--ghost{--bg:transparent;--fg:var(--graphite);box-shadow:inset 0 0 0 1.5px var(--graphite);padding:0 24px}
.btn--light{--bg:var(--paper);--fg:var(--graphite)}
.btn--wa{--bg:var(--lichen);--fg:var(--graphite);padding:0 24px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;text-decoration:none}
.link-arrow svg{transition:transform .35s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- glass ---------- */
.glass{background:rgba(243,243,243,.52);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border:1px solid rgba(255,255,255,.7);box-shadow:0 20px 60px -20px rgba(20,20,20,.28),inset 0 1px 0 rgba(255,255,255,.8)}
.glass--dark{background:rgba(20,20,20,.42);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);color:var(--paper)}

/* ---------- header ---------- */
.header{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);display:flex;align-items:center;transition:transform .5s var(--ease)}
.header__bar{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:28px}
.header.is-scrolled .header__bar{margin-top:10px;max-width:calc(var(--max) - 40px);height:62px;border-radius:var(--r-pill);padding:0 10px 0 22px;background:rgba(243,243,243,.55);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);border:1px solid rgba(255,255,255,.6);box-shadow:0 12px 40px -18px rgba(20,20,20,.3)}
.header.is-hidden{transform:translateY(-110%)}
.logo{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;font-family:var(--f-display);font-size:24px;letter-spacing:-.05em;line-height:1}
.logo b{font-weight:700}
.logo span{font-weight:300}
.logo i{width:7px;height:7px;background:var(--moss);border-radius:2px;display:inline-block;transform:translateY(-1px)}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.header__phone{font-weight:600;text-decoration:none;white-space:nowrap;font-size:15px}
.header .btn{height:44px;font-size:14px;padding-left:20px}
.header .btn .ic{width:28px;height:28px}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--graphite);color:var(--paper);cursor:pointer;place-items:center}
.mnav{position:fixed;inset:0;z-index:49;background:rgba(216,216,216,.82);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);display:flex;flex-direction:column;justify-content:center;padding:var(--gut);gap:6px;opacity:0;pointer-events:none;transition:opacity .35s}
.mnav.is-open{opacity:1;pointer-events:auto}
.mnav a{font-family:var(--f-display);font-size:38px;letter-spacing:-.04em;text-decoration:none;line-height:1.2}
.mnav .mnav__contact{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:1080px){.nav,.header__phone{display:none}.burger{display:grid;margin-left:auto}.header .btn{display:none}}

/* ============ STORY (pinned scroll scene) ============ */
.story{position:relative;background:var(--fog)}
.story__pin{position:relative;height:100vh;height:100svh;overflow:hidden}
.watermark{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);font-family:var(--f-display);font-weight:600;font-size:clamp(90px,19.5vw,620px);letter-spacing:-.06em;line-height:.8;color:#fff;opacity:.85;white-space:nowrap;pointer-events:none;user-select:none;z-index:0}
.stage{position:absolute;inset:0;z-index:1;pointer-events:none}
.world{position:absolute;left:50%;top:50%;width:min(108vw,165vh,2100px);aspect-ratio:2528/1696;transform:translate(-50%,-50%);will-change:transform}
.world__float{position:absolute;inset:0;animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-1.1%)}}
.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.scene[data-scene="ready"]{opacity:1}
.overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fov{opacity:0}
.fov path{fill:url(#fovGrad)}
.pulse{opacity:0}
.pulse circle{fill:none;stroke:var(--lichen);stroke-width:3}

/* annotation pins */
.pin{position:absolute;width:0;height:0;opacity:0}
.pin__dot{position:absolute;width:14px;height:14px;left:-7px;top:-7px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.55),0 2px 8px rgba(0,0,0,.25)}
.pin__dot::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid var(--lichen);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}
.pin__line{position:absolute;left:0;bottom:0;width:1.5px;height:var(--len,64px);background:var(--graphite);transform-origin:bottom}
.pin__label{position:absolute;bottom:var(--len,64px);left:0;translate:-6px -8px;white-space:nowrap;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;background:var(--graphite);color:var(--paper);padding:6px 10px 6px 9px;border-radius:6px}
.pin__label em{font-style:normal;color:var(--lichen);margin-right:6px}
.pin--down .pin__line{bottom:auto;top:0;transform-origin:top}
.pin--down .pin__label{bottom:auto;top:var(--len,64px);translate:-6px 8px}

/* copy layers */
.hero-copy{position:absolute;z-index:3;left:0;right:0;bottom:clamp(28px,6vh,64px)}
.hero-copy .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:end}
.hero-copy .eyebrow{margin-bottom:22px;color:var(--moss)}
.hero-copy h1{max-width:12ch}
.hero-copy__side{display:flex;flex-direction:column;gap:22px;align-items:flex-start;justify-self:end;max-width:400px}
.hero-copy__side p{margin:0;color:var(--ink-soft)}
.hero-copy__ctas{display:flex;gap:10px;flex-wrap:wrap}
.scroll-hint{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.scroll-hint i{width:1.5px;height:28px;background:var(--line);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--graphite);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{to{top:100%}}

.chapter{position:absolute;z-index:3;left:var(--gut);top:calc(var(--header-h) + 6vh);max-width:min(520px,44vw);opacity:0;visibility:hidden}
.chapter .eyebrow{color:var(--moss);margin-bottom:18px}
.chapter h2{margin-bottom:16px}
.chapter p{margin:0;color:var(--ink-soft);max-width:38ch;font-size:18px}
.chapter--final{left:50%;top:auto;bottom:clamp(28px,7vh,72px);translate:-50% 0;text-align:center;max-width:760px;width:calc(100% - 2*var(--gut))}
.chapter--final p{margin:14px auto 24px}
.chapter--final .hero-copy__ctas{justify-content:center}

.scard{text-decoration:none;color:inherit;position:absolute;z-index:4;right:var(--gut);bottom:clamp(84px,12vh,130px);width:min(380px,32vw);border-radius:var(--r-l);padding:10px;opacity:0;visibility:hidden;pointer-events:auto}
.scard__img{position:relative;border-radius:calc(var(--r-l) - 10px);overflow:hidden;aspect-ratio:4/3;background:var(--fog-2)}
.scard__img img{width:100%;height:100%;object-fit:cover}
.ring{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid var(--lichen);box-shadow:0 0 0 6px rgba(var(--acc-rgb),.25)}
.ring::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--lichen);animation:ping 2.2s var(--ease) infinite}
.scard__body{padding:18px 14px 10px}
.scard__tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}
.scard h3{margin:8px 0 8px}
.scard p{margin:0 0 16px;color:var(--ink-soft);font-size:15px;line-height:1.45}

/* measuring-tape progress */
.tape{position:absolute;z-index:5;left:var(--gut);right:var(--gut);bottom:22px;height:38px;opacity:0}
.tape__track{position:absolute;left:0;right:0;top:0;height:10px;background:repeating-linear-gradient(90deg,var(--graphite) 0 1px,transparent 1px 10px);opacity:.35;-webkit-mask:linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0)}
.tape__fill{position:absolute;left:0;top:0;height:10px;width:100%;background:repeating-linear-gradient(90deg,var(--moss) 0 2px,transparent 2px 10px);transform-origin:left;transform:scaleX(0)}
.tape__marks{position:absolute;left:0;right:0;top:16px;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0}
.tape__marks li{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);transition:color .3s}
.tape__marks li.is-active{color:var(--graphite);font-weight:600}

@media (max-width:820px){
  .world{width:162vw;top:36%}
  .watermark{top:24%;font-size:20vw}
  .hero-copy .wrap{grid-template-columns:1fr;gap:18px}
  .hero-copy__side{justify-self:start;max-width:none}
  .hero-copy h1{font-size:clamp(38px,11vw,56px)}
  .chapter{top:calc(var(--header-h) + 8px);max-width:none;right:var(--gut)}
  .chapter h2{font-size:clamp(30px,8.6vw,40px);margin-bottom:8px}
  .chapter p{font-size:15.5px}
  .scard{left:var(--gut);right:var(--gut);width:auto;bottom:62px;display:grid;grid-template-columns:110px 1fr;gap:4px;align-items:center;border-radius:var(--r-m)}
  .scard__img{border-radius:12px;aspect-ratio:1}
  .scard__body{padding:4px 8px 4px 12px}
  .scard p{display:none}
  .scard h3{font-size:18px;margin:4px 0 8px}
  .tape__marks li{display:none}
  .tape__marks li.is-active{display:block}
  .tape__marks{justify-content:flex-start}
  .chapter--final{bottom:70px}
}

/* ============ SECTIONS ============ */
.section{padding:clamp(80px,12vw,160px) 0;position:relative}
.section__head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.section__head .eyebrow{margin-bottom:18px}
.section__head .lead{justify-self:end;margin:0}
@media (max-width:820px){.section__head{grid-template-columns:1fr;gap:16px}.section__head .lead{justify-self:start}}

/* solutions grid on dark moss-glow */
.solutions{background:var(--graphite);color:var(--paper);overflow:hidden;border-radius:var(--r-l) var(--r-l) 0 0}
.solutions .eyebrow{color:var(--lichen)}
.solutions .lead{color:rgba(243,243,243,.66)}
.solutions__glow{position:absolute;inset:-10%;background:url(../img/scene-ready-900.webp) center 40%/90% auto no-repeat;filter:blur(70px) saturate(1.4);opacity:.55;pointer-events:none}
.solutions__glow::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 30%,var(--graphite) 75%)}
.sgrid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.sol{color:inherit;grid-column:span 4;border-radius:var(--r-l);padding:10px;text-decoration:none;display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .3s}
.sol:nth-child(1),.sol:nth-child(2){grid-column:span 6}
.sol:hover{transform:translateY(-6px);border-color:rgba(var(--acc-rgb),.45)}
.sol__img{position:relative;aspect-ratio:16/10;border-radius:calc(var(--r-l) - 10px);overflow:hidden}
.sol__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.sol:hover .sol__img img{transform:scale(1.06)}
.sol__body{padding:20px 14px 12px;display:flex;flex-direction:column;gap:10px;flex:1}
.sol__body p{margin:0;color:rgba(243,243,243,.7);font-size:15.5px;flex:1}
.sol__tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--lichen)}
.sol .link-arrow{color:var(--paper);margin-top:6px}
.sol--bud .sol__tag{color:#e0b58c}
@media (max-width:980px){.sol,.sol:nth-child(1),.sol:nth-child(2){grid-column:span 6}}
@media (max-width:640px){.sol,.sol:nth-child(1),.sol:nth-child(2){grid-column:span 12}}

/* statement with inline image pills (from the brief's reference) */
.statement{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,4.3vw,64px);line-height:1.12;letter-spacing:-.035em;margin:0;max-width:22ch}
.statement .dim{color:rgba(20,20,20,.38)}
.pill-img{display:inline-block;vertical-align:middle;width:1.9em;height:.9em;border-radius:var(--r-pill);overflow:hidden;margin:0 .12em;translate:0 -.06em}
.pill-img img{width:100%;height:100%;object-fit:cover}
.why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(48px,7vw,96px)}
.why__item{border-top:1.5px solid var(--graphite);padding-top:20px}
.why__item h3{margin:0 0 10px}
.why__item p{margin:0;color:var(--ink-soft);font-size:15.5px}
@media (max-width:980px){.why__grid{grid-template-columns:1fr 1fr;gap:32px 16px}}
@media (max-width:560px){.why__grid{grid-template-columns:1fr}}

/* process */
.process{background:var(--paper);border-radius:var(--r-l)}
.steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;list-style:none;margin:0;padding:0}
.steps__line{position:absolute;left:0;right:0;top:27px;height:2px;background:var(--line)}
.steps__line i{position:absolute;inset:0;background:var(--moss);transform-origin:left;transform:scaleX(0)}
.step{position:relative;padding-top:0}
.step__n{width:56px;height:56px;border-radius:50%;background:var(--paper);border:1.5px solid var(--graphite);display:grid;place-items:center;font-family:var(--f-mono);font-weight:500;font-size:15px;position:relative;z-index:1;transition:background .4s,color .4s}
.step.is-on .step__n{background:var(--graphite);color:var(--lichen)}
.step h3{margin:22px 0 8px}
.step p{margin:0;color:var(--ink-soft);font-size:15.5px}
@media (max-width:900px){.steps{grid-template-columns:1fr;gap:28px}.steps__line{left:27px;right:auto;top:0;bottom:0;width:2px;height:auto}.steps__line i{transform-origin:top;transform:scaleY(0)}.step{display:grid;grid-template-columns:56px 1fr;gap:0 18px}.step h3{margin:12px 0 6px}.step p{grid-column:2}}

/* projects */
.projects{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.proj{grid-column:span 4;display:flex;flex-direction:column;gap:14px}
.proj:nth-child(1){grid-column:span 8;grid-row:span 2}
.proj__img{position:relative;flex:1;min-height:260px;border-radius:var(--r-l);overflow:hidden;background:var(--graphite-2)}
.proj__img img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform 1.2s var(--ease)}
.proj:hover .proj__img img{transform:scale(1.05)}
.proj__ph{position:absolute;left:16px;top:16px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:6px;background:rgba(20,20,20,.6);color:var(--paper);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.proj__meta{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.proj__meta h3{margin:0}
.proj__meta span{font-family:var(--f-mono);font-size:12px;color:var(--ink-soft);text-align:right}
.proj__chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--line)}
@media (max-width:900px){.proj,.proj:nth-child(1){grid-column:span 12;grid-row:auto}.proj__img{min-height:240px;aspect-ratio:16/10}}

/* brands marquee */
.brands{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.brands__row{display:flex;gap:16px;width:max-content;animation:marq 38s linear infinite}
.brands:hover .brands__row{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.brand{height:96px;min-width:220px;padding:0 34px;border-radius:var(--r-m);display:grid;place-items:center;background:var(--fog-2);font-family:var(--f-display);font-weight:600;font-size:28px;letter-spacing:-.03em;color:rgba(20,20,20,.72)}
.brand--ph{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;border:1.5px dashed var(--line);background:transparent}

/* AVPBUD band */
.bud{background:var(--graphite);color:var(--paper);overflow:hidden;border-radius:var(--r-l)}
.bud__pattern{position:absolute;inset:0;opacity:.07;pointer-events:none;background:
  repeating-linear-gradient(45deg,transparent 0 22px,#fff 22px 24px),
  repeating-linear-gradient(-45deg,transparent 0 46px,#fff 46px 48px)}
.bud .eyebrow{color:#e0b58c}
.bud .lead{color:rgba(243,243,243,.68)}
.bud__logo{font-family:var(--f-display);font-weight:700;letter-spacing:-.05em;font-size:22px}
.bud__logo span{color:#e0b58c}
.bud__grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:start}
.bud__img{border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3;position:sticky;top:110px}
.bud__img img{width:100%;height:100%;object-fit:cover}
.bud__list{list-style:none;margin:28px 0 36px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bud__list li{padding:14px 16px;border-radius:var(--r-s);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);font-size:15px}
.bud__sub{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,243,243,.55);margin:44px 0 14px}
.bud__refs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.bud__refs div{aspect-ratio:3/2;border-radius:var(--r-s);border:1.5px dashed rgba(255,255,255,.18);display:grid;place-items:center;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,243,243,.45);text-align:center;padding:6px}
.bud__projects{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.bud__projects figure{margin:0}
.bud__projects .ph{aspect-ratio:1;border-radius:var(--r-s);background:rgba(255,255,255,.06);display:grid;place-items:center;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,243,243,.4)}
.bud__projects figcaption{font-size:13px;color:rgba(243,243,243,.6);margin-top:8px}
.bud .faq__item{border-color:rgba(255,255,255,.14)}
.bud .faq__a{color:rgba(243,243,243,.7)}
@media (max-width:900px){.bud__grid{grid-template-columns:1fr}.bud__img{position:relative;top:0}.bud__refs{grid-template-columns:1fr 1fr}.bud__list{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:900px}
.faq__item{border-top:1.5px solid var(--line)}
.faq__item:last-child{border-bottom:1.5px solid var(--line)}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;background:none;border:0;text-align:left;cursor:pointer;font-family:var(--f-display);font-size:clamp(19px,1.8vw,24px);letter-spacing:-.02em}
.faq__q i{flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid currentColor;position:relative;transition:transform .4s var(--ease),background .3s}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;translate:-50% -50%}
.faq__q i::after{transform:rotate(90deg);transition:transform .4s var(--ease)}
.faq__q[aria-expanded="true"] i::after{transform:rotate(0)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease);color:var(--ink-soft)}
.faq__a>div{overflow:hidden}
.faq__a p{margin:0 0 24px;max-width:64ch}
.faq__q[aria-expanded="true"]+.faq__a{grid-template-rows:1fr}
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px}
@media (max-width:900px){.faq-wrap{grid-template-columns:1fr}}

/* contact */
.contact{background:var(--graphite);color:var(--paper);border-radius:var(--r-l) var(--r-l) 0 0;overflow:hidden}
.contact__glow{position:absolute;right:-20%;top:-30%;width:80%;aspect-ratio:1;background:none;filter:blur(30px);pointer-events:none}
.contact__grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,80px)}
.contact .eyebrow{color:var(--lichen)}
.contact__phone{display:block;font-family:var(--f-display);font-size:clamp(34px,4.4vw,60px);letter-spacing:-.04em;text-decoration:none;margin:28px 0 8px;line-height:1}
.contact__mail{color:rgba(243,243,243,.7);text-decoration:none;font-family:var(--f-mono);font-size:14px}
.contact__ctas{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 0}
.form{border-radius:var(--r-l);padding:clamp(20px,3vw,36px);display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label,.field legend{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,243,243,.6)}
.field input,.field textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-s);padding:14px 16px;color:var(--paper);font:inherit;font-size:16px;transition:border-color .2s,background .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--lichen);background:rgba(255,255,255,.09)}
.field textarea{min-height:110px;resize:vertical}
fieldset.field{border:0;padding:0;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:9px 14px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.2);font-size:14px;transition:background .2s,color .2s,border-color .2s;text-transform:none;letter-spacing:0;font-family:var(--f-body);color:var(--paper)}
.chips input:checked+span{background:var(--lichen);color:var(--graphite);border-color:var(--lichen)}
.chips input:focus-visible+span{outline:2px solid var(--lichen);outline-offset:2px}
.consent{grid-column:1/-1;display:flex;gap:10px;font-size:13px;color:rgba(243,243,243,.6);align-items:flex-start}
.consent input{margin-top:3px;accent-color:var(--lichen)}
.hp{position:absolute;left:-9999px}
.form__foot{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form__status{font-size:14px;margin:0}
.form__status.is-ok{color:var(--lichen)}
.form__status.is-err{color:#f0a58a}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr}.form{grid-template-columns:1fr}}

/* footer */
.footer{background:var(--graphite);color:rgba(243,243,243,.7);padding:56px 0 32px;border-top:1px solid rgba(255,255,255,.08)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer .logo{color:var(--paper)}
.footer h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,243,243,.45);margin:0 0 14px;font-weight:500}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.footer a{text-decoration:none}
.footer a:hover{color:var(--paper)}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:13px}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}

/* reveal helpers */
.rv{opacity:0;transform:translateY(28px)}
.no-js .rv,.reduced .rv{opacity:1;transform:none}

/* ============ SOLUTION PAGES ============ */
.page-hero{padding:calc(var(--header-h) + clamp(32px,6vw,80px)) 0 clamp(48px,7vw,96px)}
.crumbs{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:28px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--graphite)}
.page-hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.page-hero h1{margin:18px 0 22px}
.page-hero .eyebrow{color:var(--moss)}
.page-hero__img{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3;box-shadow:0 40px 80px -40px rgba(20,20,20,.45)}
.page-hero__img img{width:100%;height:100%;object-fit:cover}
.page-hero__img .ring{width:64px;height:64px;margin:-32px 0 0 -32px}
.page-hero__ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
@media (max-width:900px){.page-hero__grid{grid-template-columns:1fr}}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.box{border-radius:var(--r-l);padding:clamp(24px,3vw,40px);background:var(--paper)}
.box h2{margin-bottom:22px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.ticks li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23B5D08A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;margin-top:2px}
@media (max-width:900px){.cols{grid-template-columns:1fr}}
.next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.next{border-radius:var(--r-l);padding:28px;text-decoration:none;display:flex;flex-direction:column;gap:14px;min-height:220px;transition:transform .45s var(--ease)}
.next:hover{transform:translateY(-5px)}
.next--dark{background:var(--graphite);color:var(--paper)}
.next--moss{background:var(--moss);color:var(--paper)}
.next--light{background:var(--paper)}
.next p{margin:0;opacity:.72;font-size:15.5px;flex:1}
.next .todo{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:rgba(240,165,138,.18);color:#c4583a;align-self:flex-start}
.next--dark .todo,.next--moss .todo{color:#f0a58a}
@media (max-width:900px){.next-grid{grid-template-columns:1fr}}
.brandline{display:flex;flex-wrap:wrap;gap:10px}
.brandline span{padding:12px 20px;border-radius:var(--r-pill);background:var(--fog-2);font-family:var(--f-display);font-weight:600;letter-spacing:-.02em}
.other{display:flex;flex-wrap:wrap;gap:10px}
.other a{padding:12px 18px;border-radius:var(--r-pill);border:1.5px solid var(--graphite);text-decoration:none;font-weight:600;font-size:15px;transition:background .25s,color .25s}
.other a:hover{background:var(--graphite);color:var(--paper)}
.cta-band{border-radius:var(--r-l);background:var(--graphite);color:var(--paper);padding:clamp(32px,5vw,64px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-10%;top:-60%;width:50%;aspect-ratio:1;background:none;pointer-events:none}
.cta-band>*{position:relative}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* scene overlay pulses */
.pulse circle{transform-box:fill-box;transform-origin:center}
.pulse__wave{animation:wave 1.8s var(--ease) infinite}
@keyframes wave{0%{transform:scale(1);opacity:1}100%{transform:scale(3.2);opacity:0}}
@media (max-width:820px){.pin--opt{display:none}}

/* soft fog under chapter copy while the camera is zoomed in */
.veil{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:
  linear-gradient(90deg,rgba(216,216,216,.96) 0%,rgba(216,216,216,.78) 26%,rgba(216,216,216,0) 52%),
  linear-gradient(0deg,rgba(216,216,216,.9) 0%,rgba(216,216,216,0) 18%)}
@media (max-width:820px){.veil{background:linear-gradient(180deg,rgba(216,216,216,.97) 0%,rgba(216,216,216,.85) 24%,rgba(216,216,216,0) 42%),linear-gradient(0deg,rgba(216,216,216,.95) 0%,rgba(216,216,216,0) 30%)}}

/* ---------- liquid glass (overrides the base .glass tokens) ---------- */
.glass{isolation:isolate;
  background:rgba(255,255,255,0.207);
  -webkit-backdrop-filter:blur(26px) saturate(1.9) brightness(1.06);backdrop-filter:blur(26px) saturate(1.9) brightness(1.06);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 30px 70px -28px rgba(20,20,20,.45),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.25),inset 1px 0 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(255,255,255,.18)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:none}
.scard__body{border-radius:calc(var(--r-l) - 10px);margin-top:8px;background:rgba(243,243,243,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.scard__img{box-shadow:0 10px 30px -14px rgba(20,20,20,.5)}

.glass--dark{isolation:isolate;
  background:rgba(255,255,255,0.07);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.22),inset 1px 0 0 rgba(255,255,255,.08)}
.glass--dark::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:none}
.solutions__glow{opacity:.85;filter:blur(60px) saturate(1.6);background-size:110% auto;background-position:center 30%}
.sol:hover{border-color:rgba(var(--acc-rgb),.5);box-shadow:0 40px 90px -40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(var(--acc-rgb),.25)}
.sol,.form{position:relative}

/* ---------- glass header + nav blob ---------- */
.header__bar{transition:margin .5s var(--ease),max-width .5s var(--ease),height .5s var(--ease),background .4s,box-shadow .4s}
.header .header__bar{margin-top:12px;max-width:calc(var(--max) - 24px);height:64px;border-radius:var(--r-pill);padding:0 10px 0 24px;
  background:rgba(255,255,255,0.24);
  -webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
  border:1px solid rgba(255,255,255,.6);box-shadow:0 18px 50px -24px rgba(20,20,20,.35),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.2)}
.header.is-scrolled .header__bar{margin-top:8px;height:58px}
.nav{position:relative;gap:4px;padding:4px;border-radius:var(--r-pill)}
.nav a{padding:10px 14px;border-radius:var(--r-pill);z-index:1;transition:color .3s}
.nav a::after{display:none}
.nav__blob{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:var(--r-pill);opacity:0;pointer-events:none;
  background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 #fff,0 6px 18px -8px rgba(20,20,20,.35);
  transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s}
@media (max-width:1080px){.header .header__bar{padding-left:20px}}

/* burger → X */
.burger svg{display:none}
.burger{position:relative}
.burger i{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:currentColor;transition:transform .45s var(--ease),top .45s var(--ease)}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:25px}
.burger[aria-expanded="true"] i:nth-child(1){top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){top:21px;transform:rotate(-45deg)}

/* glass mobile menu */
.mnav{background:rgba(216,216,216,.55);
  -webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6)}
.mnav a:not(.btn){opacity:0;transform:translateY(30px);transition:opacity .5s,transform .7s var(--ease);transition-delay:calc(var(--i,0)*55ms)}
.mnav.is-open a:not(.btn){opacity:1;transform:none}
.mnav .mnav__contact{opacity:0;transition:opacity .5s .35s}
.mnav.is-open .mnav__contact{opacity:1}

/* ---------- creative buttons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;will-change:transform}
.btn::before{content:"";position:absolute;right:27px;top:50%;width:20px;height:20px;margin:-10px -10px 0 0;border-radius:50%;background:var(--lichen);transform:scale(0);z-index:-1;transition:transform .7s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:scale(16)}
.btn:hover,.btn:focus-visible{color:var(--graphite)}
.btn .ic{transition:transform .5s var(--ease),background .4s,color .4s}
.btn:hover .ic,.btn:focus-visible .ic{background:var(--graphite);color:var(--lichen);transform:rotate(45deg) scale(1.06)}
.btn--ghost::before,.btn--wa::before{right:50%;margin-right:-10px}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--lichen)}
.btn--light::before{background:var(--graphite)}
.btn--light:hover,.btn--light:focus-visible{color:var(--paper)}
.btn--light:hover .ic{background:var(--lichen);color:var(--graphite)}
.btn--wa::before{background:#25D366}
.btn--wa:hover{color:#0b2615}
/* rolling letters */
.btn__label{display:inline-flex;overflow:hidden;line-height:1.25;height:1.25em}
.btn__label span{display:inline-block;white-space:pre;text-shadow:0 1.25em 0 currentColor;transition:transform .55s var(--ease);transition-delay:calc(var(--i)*14ms)}
.btn:hover .btn__label span,.btn:focus-visible .btn__label span{transform:translateY(-1.25em)}
@media (prefers-reduced-motion:reduce){.btn__label span{text-shadow:none}.btn:hover .btn__label span{transform:none}}
@media (max-width:820px){.pin--down{--len:30px!important}.pin__label{font-size:10px;padding:5px 8px}}


/* brand logo — plain <img> (dark file in the header, light file in the footer) */
.logo{display:inline-flex;align-items:center;line-height:0;flex:none}
.logo__img{display:block;height:38px;width:auto;transition:transform .5s var(--ease),height .5s var(--ease)}
.logo:hover .logo__img{transform:scale(1.04)}
.header.is-scrolled .logo__img{height:34px}
.logo--footer .logo__img{height:64px}
@media (max-width:820px){.logo__img{height:34px}}

/* ---------- cloud transition (hero → empty plot), inspired by white-desert.com ---------- */
.clouds{visibility:hidden;position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden;perspective:900px;perspective-origin:50% 100%}
.clouds__layer{position:absolute;left:50%;bottom:0;width:max(112vw,140vh);height:auto;max-width:none;will-change:transform}
.clouds__layer--back{opacity:.96}
.clouds__fog{position:absolute;left:-15%;right:-15%;bottom:-10%;height:140%;opacity:0;transform-origin:50% 100%;will-change:transform,opacity;
  background:linear-gradient(to top,#fff 0%,#fbfbfb 45%,rgba(250,250,250,.85) 70%,rgba(243,243,243,0) 100%)}
.reduced .clouds{display:none}

/* ================= hero video: the object assembles itself, then lives in a loop ================= */
.hv{--hv-bg:#d8d8d8;position:relative;height:100vh;height:100svh;min-height:560px;background:var(--hv-bg);overflow:hidden;isolation:isolate}
.hv__stage{position:absolute;inset:0;overflow:hidden}   /* full height, so the spotlight dims the strip under the menu too */
/* 16:9 box that covers the stage; zones are placed in % of it */
.hv__media{--px:0px;--py:0px;position:absolute;left:50%;top:calc(50% + (var(--header-h) - 14px) / 2);aspect-ratio:16/9;width:min(100%,calc((100svh - var(--header-h) + 14px) * 16 / 9 * 1.05));translate:calc(-50% + var(--px)) calc(-50% + var(--py))}
.hv__cam{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.hv__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--hv-bg)}
.hv__video--loop{opacity:0}
.hv.is-live .hv__video--loop{opacity:1}
.hv.is-live .hv__video--build{opacity:0}
/* the shadow under the island is cut by the frame edge, so the edges melt into the page */
.hv__fade{position:absolute;inset:-1px;pointer-events:none;background:
  linear-gradient(to top,var(--hv-bg) 0,var(--hv-bg) 3%,rgba(216,216,216,.8) 9%,rgba(216,216,216,0) 24%),
  linear-gradient(to right,var(--hv-bg),rgba(216,216,216,0) 7%,rgba(216,216,216,0) 93%,var(--hv-bg)),
  linear-gradient(to bottom,var(--hv-bg),rgba(216,216,216,0) 6%)}
/* spotlight: dims everything except the hovered zone */
.hv__spot{--x:50%;--y:50%;position:absolute;inset:-100%;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(circle at var(--x) var(--y),rgba(20,20,20,0) 0,rgba(20,20,20,0) 70px,rgba(20,20,20,.3) 240px,rgba(20,20,20,.4) 700px)}
.hv.is-spot .hv__spot,.hv.is-open .hv__spot{opacity:1}

/* zones */
.hz{position:absolute;width:0;height:0;padding:0;border:0;background:none;cursor:pointer;z-index:2;opacity:0;pointer-events:none;
  transform:scale(.4);transition:opacity .5s var(--ease) calc(var(--i) * 90ms),transform .7s cubic-bezier(.3,1.6,.4,1) calc(var(--i) * 90ms)}
.hv.is-live .hz{opacity:1;transform:none;pointer-events:auto}
.hv.is-open .hz{opacity:0;pointer-events:none;transition-delay:0s}
.hz::before{content:"";position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%} /* hit area */
.hz__dot{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--lichen);box-shadow:0 0 0 4px rgba(243,243,243,.85),0 6px 18px rgba(20,20,20,.35);transition:transform .45s var(--ease),background .3s}
.hz__dot::before,.hz__dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(243,243,243,.9);animation:hzPing 2.6s var(--ease) infinite;animation-delay:calc(var(--i) * .37s)}
.hz__dot::after{animation-delay:calc(var(--i) * .37s + 1.3s)}
@keyframes hzPing{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.hz__label{position:absolute;left:18px;top:-17px;height:34px;display:flex;align-items:center;padding:0 14px;border-radius:var(--r-pill);white-space:nowrap;
  font:600 13px/1 var(--f-body);color:var(--graphite);background:rgba(243,243,243,.72);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.75);box-shadow:0 10px 30px -10px rgba(20,20,20,.35);
  opacity:0;transform:translateX(-8px) scale(.92);transform-origin:left center;transition:opacity .35s var(--ease),transform .45s var(--ease);pointer-events:none}
.hz:hover .hz__dot,.hz:focus-visible .hz__dot{transform:scale(1.35);background:#fff}
.hz:hover .hz__label,.hz:focus-visible .hz__label,.hv.is-tour .hz.is-tour .hz__label{opacity:1;transform:none}
.hv.is-tour .hz.is-tour .hz__dot{transform:scale(1.25);background:#fff}
.hz:focus-visible{outline:none}
.hz:focus-visible .hz__dot{box-shadow:0 0 0 4px var(--graphite),0 6px 18px rgba(20,20,20,.35)}
.hz--flip .hz__label{left:auto;right:18px;transform-origin:right center}

/* copy */
.hv__copy{position:absolute;z-index:3;left:var(--gut);bottom:clamp(20px,4.5vh,48px);width:min(480px,calc(100% - 2 * var(--gut)));transition:opacity .5s var(--ease),transform .6s var(--ease)}
.hv__panel{border-radius:var(--r-l);padding:clamp(20px,2.2vw,30px)}
.hv__panel .eyebrow{color:var(--moss);margin-bottom:14px}
.hv__title{font-family:var(--f-display);font-weight:500;font-size:clamp(28px,2.7vw,44px);line-height:1.02;letter-spacing:-.035em;margin:0 0 14px;text-wrap:balance}
.hv__panel p{margin:0 0 20px;color:var(--ink-soft);font-size:15px;line-height:1.5}
.hv__tip{display:block;margin-top:6px;color:var(--graphite);font-weight:500}
.hv__panel .hero-copy__ctas{display:flex;flex-wrap:wrap;gap:10px}
.hv.is-open .hv__copy{opacity:0;transform:translateY(20px);pointer-events:none}

/* controls */
.hv__controls{position:absolute;z-index:3;right:var(--gut);bottom:clamp(20px,4.5vh,48px);transition:opacity .4s}
.hv__ctl{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 6px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.7);
  background:rgba(243,243,243,.6);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--graphite);font:600 13px/1 var(--f-body);cursor:pointer;transition:background .3s,transform .3s var(--ease)}
.hv__ctl[hidden]{display:none}
.hv__ctl:hover{background:rgba(243,243,243,.92)}
.hv__ctl:active{transform:scale(.96)}
.hv__ctl svg{width:32px;height:32px;flex:none}
.hv__replay{padding-left:14px}
.hv__replay svg{width:18px;height:18px}
.hv__ring-bg,.hv__ring{fill:none;stroke-width:2.5}
.hv__ring-bg{stroke:rgba(20,20,20,.12)}
.hv__ring{stroke:var(--moss);stroke-linecap:round;stroke-dasharray:100.53;stroke-dashoffset:100.53;transform:rotate(-90deg);transform-origin:center}
.hv.is-open .hv__controls{opacity:0;pointer-events:none}

/* zone card */
.hv__card{position:absolute;z-index:4;right:var(--gut);top:50%;width:min(420px,calc(100% - 2 * var(--gut)));border-radius:var(--r-l);padding:10px;translate:0 -46%}
.hv__card[hidden]{display:none}
.hv__card-img{position:relative;border-radius:calc(var(--r-l) - 10px);overflow:hidden;aspect-ratio:4/3;background:var(--fog)}
.hv__card-img img{width:100%;height:100%;object-fit:cover;display:block}
.hv__card-body{padding:18px 14px 8px}
.hv__card-body .h-s{margin:8px 0 10px;font-size:24px}
.hv__card-body p{margin:0 0 18px;color:var(--ink-soft);font-size:15px;line-height:1.5}
.hv__card-actions{display:flex;flex-wrap:wrap;gap:8px}
.hv__card-actions .btn{height:46px;font-size:14px}
.hv__card-actions .btn .ic{width:30px;height:30px}
.hv__nav{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.hv__nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.5);font-size:18px;cursor:pointer;color:var(--graphite);transition:background .3s,transform .3s var(--ease)}
.hv__nav button:hover{background:var(--lichen);transform:scale(1.06)}
.hv__count{font-size:12px;letter-spacing:.14em;color:var(--ink-soft)}
.hv__close{position:absolute;z-index:2;right:20px;top:20px;width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:rgba(243,243,243,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--graphite);transition:transform .4s var(--ease),background .3s}
.hv__close:hover{transform:rotate(90deg);background:#fff}
.hv__close svg{width:18px;height:18px}

/* desktop: fit the height, nudge the island right of the text panel */
@media (min-width:821px){ .hv__media{width:min(92vw,calc((100svh - var(--header-h) + 14px) * 16 / 9 * 1.05));left:58%} }
@media (max-width:820px){
  .hv{min-height:600px}
  .hv__stage{inset:0}
  .hv__media{width:135vw;top:calc(33% + (var(--header-h) - 10px) * .67)}
  .hv__replay{padding:0;width:38px;justify-content:center}
  .hv__replay span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hz__label{height:30px;font-size:12px;padding:0 11px;top:-15px}
  .hv__copy{bottom:14px}
  .hv__panel{padding:18px;border-radius:24px}
  .hv__title{font-size:clamp(27px,7.6vw,36px)}
  .hv__panel p{font-size:14px;margin-bottom:14px}
  .hv__tip{display:none}
  .hv__controls{top:calc(var(--header-h) + 4px);bottom:auto}
  .hv__ctl{height:38px;font-size:12px}
  .hv__ctl svg{width:28px;height:28px}
  /* bottom sheet */
  .hv__card{top:auto;bottom:10px;left:10px;right:10px;width:auto;translate:none;display:grid;grid-template-columns:110px 1fr;gap:0 4px;padding:8px;border-radius:24px}
  .hv__card[hidden]{display:none}
  .hv__card-img{aspect-ratio:auto;height:100%;min-height:120px;border-radius:18px}
  .hv__card-img .ring{display:none}
  .hv__card-body{padding:6px 8px 4px 10px}
  .hv__card-body .h-s{font-size:18px;margin:4px 0 6px;padding-right:34px}
  .hv__card-body p{font-size:13px;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hv__card-actions .btn{height:40px;font-size:13px;padding-left:16px}
  .hv__card-actions .btn--ghost{display:none}
  .hv__nav{grid-column:1/-1;margin-top:8px;padding-top:8px}
  .hv__nav button{width:36px;height:36px}
  .hv__close{right:14px;top:14px;width:34px;height:34px}
}
@media (max-width:820px) and (max-height:700px){ .hv__panel p{display:none} }
.reduced .hz__dot::before,.reduced .hz__dot::after{animation:none}

/* ================= awwwards.com look: Inter Tight, 8px buttons, 12–14px cards, light top bar + dark bottom dock ================= */
:root{
  --f-display:"Inter Tight",system-ui,sans-serif;
  --f-body:"Inter Tight",system-ui,sans-serif;
  --r-s:8px;--r-m:12px;--r-l:14px;--r-pill:8px;
}
body{font-size:16px;font-weight:400}
.h-xl,.h-l,.h-m,.hv__title{font-weight:600;letter-spacing:-.035em}
.h-s{font-weight:600;letter-spacing:-.02em}
.statement{font-weight:500;letter-spacing:-.03em}
:focus-visible{border-radius:8px}

/* buttons: 8px rectangles, the arrow sits in a 6px tile */
.btn{border-radius:8px;font-weight:500}
.btn .ic,.btn:hover .ic{border-radius:6px}
.btn::before{border-radius:8px}
.burger,.step__n,.faq__q i,.hv__nav button,.hv__close,.hv__ctl{border-radius:8px}
.chip,.chips span,.brandline span,.other a,.proj__ph,.next .todo,.pin__label,.hz__label{border-radius:8px}
.pill-img{border-radius:6px}

/* cards, images, panels */
.scard__img,.scard__body,.sol__img,.proj__img,.bud__img,.page-hero__img,.hv__card-img{border-radius:10px}
.hv__panel,.hv__card{border-radius:14px}
@media (max-width:820px){ .hv__panel,.hv__card{border-radius:14px} .hv__card-img,.scard__img{border-radius:10px} }

/* ---------- top bar: one light bar with 8px corners ---------- */
.header .header__bar,.header.is-scrolled .header__bar{
  margin-top:10px;height:56px;max-width:calc(var(--max) - 24px);padding:0 7px 0 16px;gap:6px;border-radius:12px;
  background:rgba(235,235,235,.78);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.55);box-shadow:0 10px 30px -20px rgba(20,20,20,.35)}
.header .logo{margin-right:auto}
.header .logo__img{height:34px}
.nav{gap:2px;padding:0;margin-left:0}
.nav__blob{display:none}
.nav a{height:42px;display:inline-flex;align-items:center;padding:0 14px;border-radius:8px;
  font-family:var(--f-body);font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--graphite);transition:background .25s}
.nav a:hover,.nav a.is-active{background:rgba(20,20,20,.07)}
.header__phone{height:42px;display:inline-flex;align-items:center;padding:0 14px;border-radius:8px;font-size:14px;font-weight:500;margin-left:6px;transition:background .25s}
.header__phone:hover{background:rgba(20,20,20,.07)}
.header .btn{height:42px;padding:0 6px 0 18px;font-size:14px}
.header .btn .ic{width:30px;height:30px}
.burger{width:42px;height:42px}
.burger i{left:12px;right:12px}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:24px}
.burger[aria-expanded="true"] i:nth-child(1),.burger[aria-expanded="true"] i:nth-child(2){top:20px}
@media (max-width:1080px){ .nav,.header__phone{display:none} }
@media (max-width:820px){ .header .header__bar,.header.is-scrolled .header__bar{margin:8px 10px 0;height:54px;padding-left:12px} .header .logo__img{height:30px} }
.mnav a:not(.btn){font-weight:600;letter-spacing:-.035em}

/* ---------- bottom dock (awwwards "menu-float"): quick jump to every solution ---------- */
.dock{position:fixed;z-index:48;left:50%;bottom:16px;display:flex;align-items:stretch;gap:6px;padding:6px;border-radius:12px;
  background:rgba(34,34,34,.82);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08);translate:-50% 0;transform:translateY(calc(100% + 30px));transition:transform .7s var(--ease)}
.dock.is-on{transform:none}
.dock__logo{width:60px;height:60px;border-radius:8px;background:#141414;display:grid;place-items:center;flex:none}
.dock__logo img{width:40px;height:auto}
.dock__group{display:flex;gap:6px;padding:6px;border-radius:8px;background:#3a3a3a}
.dock__item{height:48px;display:inline-flex;align-items:center;padding:0 13px;border-radius:8px;border:1px solid #535353;color:#ebebeb;
  font:400 13px/1 var(--f-body);text-decoration:none;white-space:nowrap;transition:background .25s,border-color .25s,color .25s}
.dock__item:hover{background:#ebebeb;border-color:#ebebeb;color:var(--graphite)}
.dock__item.is-active{border-color:var(--lichen);color:var(--lichen)}
.dock__item.is-active:hover{color:var(--graphite);background:var(--lichen)}
.dock__cta{height:60px;display:inline-flex;align-items:center;gap:10px;padding:0 8px 0 18px;border-radius:8px;background:#e8e8e8;color:var(--graphite);
  font:600 13px/1 var(--f-body);text-decoration:none;white-space:nowrap;transition:background .25s}
.dock__cta .ic{width:30px;height:30px;border-radius:6px;background:var(--lichen);display:grid;place-items:center;transition:transform .4s var(--ease)}
.dock__cta:hover{background:var(--lichen)}
.dock__cta:hover .ic{background:var(--graphite);color:var(--lichen);transform:rotate(45deg)}
@media (max-width:1060px){ .dock__item--x{display:none} }
@media (max-width:820px){ .dock{display:none} }
.reduced .dock{transition:none}
.mnav .btn{font-family:var(--f-body);font-size:16px;font-weight:500;letter-spacing:0;line-height:1;height:52px}

/* ---------- solid white instead of glass: menu bar, hero text panel, zone card, hero buttons ---------- */
.header .header__bar,.header.is-scrolled .header__bar{background:#fff;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav a:hover,.nav a.is-active,.header__phone:hover{background:#f0f0f0}
.hv__panel.glass,.hv__card.glass{background:#fff;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hv__panel.glass::before,.hv__card.glass::before,.hv__panel.glass::after,.hv__card.glass::after{display:none}
.hv__ctl,.hv__close{background:#fff;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hv__ctl:hover,.hv__close:hover{background:#f0f0f0}
.hv__nav button{background:#f3f3f3;border:0}
.hz__label{background:#fff;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- all cards solid white, no glass, no shadows ---------- */
.glass,.glass--dark{background:#fff;color:var(--graphite);border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.glass::before,.glass::after,.glass--dark::before,.glass--dark::after{display:none}
.scard__body{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.scard__img,.page-hero__img{box-shadow:none}
/* solution cards on the dark section */
.sol:hover{box-shadow:none;border-color:transparent}
.sol__body p{color:var(--ink-soft)}
.sol__tag{color:var(--moss)}
.sol--bud .sol__tag{color:var(--bark)}
.sol .link-arrow{color:var(--graphite)}
/* contact form */
.form .field label,.form .field legend{color:var(--ink-soft)}
.form .field input,.form .field textarea{background:#f3f3f3;border:1px solid transparent;color:var(--graphite)}
.form .field input:focus,.form .field textarea:focus{background:#fff;border-color:var(--moss)}
.form .field input::placeholder,.form .field textarea::placeholder{color:rgba(20,20,20,.4)}
.form .chips span{border-color:var(--line)}
.form .chips input:focus-visible+span{outline-color:var(--moss)}
.form .consent{color:var(--ink-soft)}
.form .consent a{color:var(--graphite)}
.form .form__status.is-ok{color:var(--moss)}
.form .form__status.is-err{color:#b4472b}
.form .btn--light{--bg:var(--graphite);--fg:var(--paper)}
.form .btn--light::before{background:var(--lichen)}
.form .btn--light:hover,.form .btn--light:focus-visible{color:var(--graphite)}
.form .btn--light:hover .ic{background:var(--graphite);color:var(--lichen)}
.form .chips span{color:var(--graphite);background:#f3f3f3;border-color:transparent}
.form .chips label:hover span{border-color:var(--moss)}
.form .chips input:checked+span{background:var(--lichen);border-color:var(--lichen)}

/* selected zone stays visible and pulses while its card is open */
.hv.is-open .hz.is-current{opacity:1;transform:scale(calc(1 / var(--cam-s, 1)));transition-delay:0s}
.hz.is-current .hz__dot{background:var(--lichen);box-shadow:0 0 0 4px #fff,0 0 0 9px rgba(var(--acc-rgb),.55),0 8px 22px rgba(20,20,20,.4)}
.hz.is-current .hz__dot::before,.hz.is-current .hz__dot::after{border-color:var(--lichen);animation-duration:1.6s}
.hz.is-current .hz__dot::after{animation-delay:.8s}

/* ================= preloader: the object is drawn as a blueprint while the video loads ================= */
.pl{position:fixed;inset:0;z-index:200;background:#d8d8d8;color:var(--graphite);display:grid;grid-template-rows:auto 1fr auto;padding:clamp(18px,3vw,40px);pointer-events:auto}
.no-js .pl{display:none}
html.is-loading,html.is-loading body{overflow:hidden}
.pl__top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.pl__logo{height:36px;width:auto;display:block}
.pl__tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--moss)}
.pl__draw{align-self:center;justify-self:center;width:min(860px,78vw,95vh);height:auto;overflow:visible}
.pl__ln{stroke:var(--graphite);stroke-width:1.1}
.pl__ln--soft{stroke:rgba(20,20,20,.45);stroke-width:.9}
.pl__ln--cable{stroke:var(--moss);stroke-width:1.3;filter:drop-shadow(0 0 3px rgba(var(--acc-rgb),.9))}
.pl__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.pl__num{font:600 clamp(72px,12vw,180px)/.82 var(--f-display);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.pl__num::after{content:"%";font-size:.32em;letter-spacing:0;margin-left:.08em;vertical-align:top;color:var(--moss)}
.pl__step{font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:.6em;display:flex;align-items:center;gap:10px}
.pl__step::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lichen);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.3);animation:hzPing 1.4s var(--ease) infinite}
.pl__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(20,20,20,.08)}
.pl__bar i{position:absolute;inset:0;background:var(--graphite);transform-origin:left;transform:scaleX(0)}
@media (max-width:820px){ .pl__tag{display:none} .pl__draw{width:92vw} .pl__step{font-size:10px} }

/* zone card always fits under the menu, also on short laptop screens (MacBook 13") */
@media (min-width:821px){
  .hv__card{top:calc(50% + (var(--header-h) - 14px) / 2);translate:0 -50%;max-height:calc(100svh - var(--header-h) - 28px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
  .hv__card::-webkit-scrollbar{display:none}
}
@media (min-width:821px) and (max-height:860px){
  .hv__card{width:min(380px,calc(100% - 2 * var(--gut)))}
  .hv__card-img{aspect-ratio:16/9}
  .hv__card-body{padding:12px 12px 6px}
  .hv__card-body .h-s{font-size:21px;margin:6px 0 8px}
  .hv__card-body p{font-size:14px;margin-bottom:14px}
  .hv__card-actions .btn{height:42px}
  .hv__nav{margin-top:12px;padding-top:10px}
  .hv__nav button{width:36px;height:36px}
}

/* zone card: centred without CSS translate (GSAP animates its transform and would drop the translate) */
@media (min-width:821px){
  .hv__card{top:calc(var(--header-h) - 4px);bottom:14px;height:fit-content;margin:auto 0;translate:none}
}
@media (max-width:820px){ .hv__card{translate:none;margin:0} }

/* ================= labels without the "AI eyebrow" look: no dot, no caps, no tracking ================= */
.eyebrow{font-family:var(--f-body);font-size:15px;font-weight:500;letter-spacing:-.005em;text-transform:none;gap:0}
.eyebrow::before{display:none}
.scard__tag,.sol__tag{font-family:var(--f-body);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}
.field label,.field legend{font-family:var(--f-body);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}
.pl__step{font-family:var(--f-body);font-size:15px;letter-spacing:0;text-transform:none}
.pl__step::before{display:none}
.pl__top{justify-content:flex-start}

/* ---------- buttons: fill covers the whole button, no dark rim, crisp text ---------- */
.btn{--hv:var(--lichen);--hvfg:var(--graphite);will-change:auto;transition:transform .4s var(--ease),color .3s,background-color 0s}
.btn:hover,.btn:focus-visible{background-color:var(--hv);color:var(--hvfg);transition:transform .4s var(--ease),color .3s,background-color 0s .55s}
.btn::before{inset:0;right:0;top:0;width:auto;height:auto;margin:0;border-radius:inherit;background:var(--hv);transform:none;
  clip-path:circle(0 at calc(100% - 27px) 50%);transition:clip-path .6s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:none;clip-path:circle(150% at calc(100% - 27px) 50%)}
.btn--ghost::before,.btn--wa::before{clip-path:circle(0 at 50% 50%)}
.btn--ghost:hover::before,.btn--wa:hover::before{clip-path:circle(150% at 50% 50%)}
.btn--light{--hv:var(--graphite);--hvfg:var(--paper)}
.btn--wa{--hv:#25D366;--hvfg:#0b2615}
.form .btn--light{--hv:var(--lichen);--hvfg:var(--graphite)}
.form .btn--light::before{background:var(--hv)}
/* the arrow turns, its square stays put (a rotated square renders soft) */
.btn:hover .ic,.btn:focus-visible .ic,.dock__cta:hover .ic{transform:none}
.btn .ic svg,.dock__cta .ic svg{transition:transform .5s var(--ease)}
.btn:hover .ic svg,.btn:focus-visible .ic svg,.dock__cta:hover .ic svg{transform:rotate(45deg)}
/* rolling label moves by whole pixels */
.btn__label{line-height:20px;height:20px}
.btn__label span{text-shadow:0 20px 0 currentColor}
.btn:hover .btn__label span,.btn:focus-visible .btn__label span{transform:translateY(-20px)}
/* dock centred without a half-pixel translate */
.dock{left:0;right:0;margin-inline:auto;width:max-content;translate:none}

/* ---------- AVPBUD: a plaza that paves itself (canvas) + cross-section ---------- */
.bud2{position:relative;margin-top:0;background:#0d0d0d;color:var(--graphite)}
.bud2__pin{position:relative;height:100vh;height:100svh;overflow:hidden;perspective:1400px;background:#0d0d0d}
.bud2__ground{position:absolute;inset:0;transform-origin:50% 62%}
.bud2__cv{display:block;width:100%;height:100%}
.bud2__card{position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:2;width:min(460px,calc(100% - 32px));
  padding:clamp(22px,2.2vw,32px);border-radius:14px;background:#fff}
.bud2__brand{margin:0 0 18px;font-size:15px;color:rgba(20,20,20,.6)}
.bud2__brand b{font-weight:700;letter-spacing:-.04em;color:var(--graphite);margin-right:6px}
.bud2__brand b span{color:var(--bark)}
.bud2__card .h-l{font-size:clamp(30px,3.1vw,46px);margin:0 0 14px}
.bud2__lead{margin:0 0 24px;font-size:16px;line-height:1.5;color:rgba(20,20,20,.68)}
.bud2__ctas{display:flex;flex-wrap:wrap;gap:10px}
.bud2__ctas .btn{height:48px;font-size:15px}
.bud2__count{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:2;margin:0;display:flex;align-items:baseline;gap:10px;
  padding:14px 18px;border-radius:12px;background:rgba(20,20,20,.78);color:var(--paper);font-size:14px}
.bud2__count b{font:500 28px/1 var(--f-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-width:4ch;text-align:right;color:var(--lichen)}
.bud2__pipe{position:absolute;z-index:2;left:0;top:0;margin:0;padding:8px 12px;border-radius:8px;background:var(--lichen);translate:0 -50%;
  font-size:14px;font-weight:500;color:var(--graphite);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .35s}
.bud2__pipe[data-s="a"],.bud2__pipe[data-s="b"]{opacity:1}
.bud2__pipe span{display:none}
.bud2__pipe[data-s="a"] .bud2__pipe-a,.bud2__pipe[data-s="b"] .bud2__pipe-b{display:inline}
@media (max-width:820px){
  .bud2__card{bottom:16px}
  .bud2__card .h-l{font-size:28px}
  .bud2__brand{margin-bottom:12px}
  .bud2__lead,.bud2__ctas .btn--ghost{display:none}
  .bud2__ctas .btn{height:44px;font-size:14px}
  .bud2__count{top:calc(var(--header-h) + 8px);bottom:auto;right:16px;padding:10px 14px}
  .bud2__count b{font-size:22px}
}

.bud3{padding-top:clamp(72px,9vw,140px)}
.xsec{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,34%);gap:0;margin-top:clamp(28px,4vw,56px);
  --hk:13%;--hp:8%;--hb:46%;--hg:33%}
.xsec__fig{height:clamp(340px,36vw,520px);display:flex;flex-direction:column;border-radius:14px 0 0 14px;overflow:hidden;background:#292929}
.xsec__l{position:relative;flex:none}
.xsec__l--kostka{height:var(--hk);display:flex;gap:3px;padding:0 3px;background:#292929;overflow:hidden}
.xsec__l--kostka i{flex:1 0 34px;background:#bbb8b0;border-radius:2px 2px 0 0}
.xsec__l--podsypka{height:var(--hp);background:
  radial-gradient(circle at 30% 40%,rgba(120,96,60,.35) 0 1.2px,transparent 1.8px) 0 0/9px 8px,
  radial-gradient(circle at 70% 70%,rgba(255,255,255,.35) 0 1px,transparent 1.6px) 0 0/7px 9px,#d6c4a0}
.xsec__l--podbudowa{height:var(--hb);background:
  radial-gradient(ellipse at 30% 40%,#686868 0 4px,transparent 5px) 0 0/26px 21px,
  radial-gradient(ellipse at 70% 75%,#a7a49d 0 3.5px,transparent 4.5px) 0 0/19px 25px,
  radial-gradient(circle at 50% 20%,#585858 0 2.5px,transparent 3.5px) 0 0/15px 17px,#8b8882}
.xsec__l--grunt{height:var(--hg);background:
  radial-gradient(circle at 40% 40%,rgba(0,0,0,.18) 0 2px,transparent 3px) 0 0/18px 16px,
  radial-gradient(circle at 80% 70%,rgba(255,255,255,.07) 0 1.5px,transparent 2.5px) 0 0/13px 19px,var(--bark)}
.xsec__pipe{--ps:clamp(44px,4.6vw,68px);position:absolute;left:24%;top:42%;width:var(--ps);height:var(--ps);margin:calc(var(--ps) / -2) 0 0 calc(var(--ps) / -2);border-radius:50%;
  background:radial-gradient(circle,#292929 0 42%,var(--lichen) 44% 100%);box-shadow:0 0 0 6px rgba(var(--acc-rgb),.25)}
.xsec__pipe-tag{position:absolute;left:calc(24% + clamp(40px,4vw,56px));top:42%;margin-top:-17px;line-height:18px;padding:8px 12px;border-radius:8px;background:#fff;font-size:14px;font-weight:500;white-space:nowrap}
.xsec__legend{list-style:none;margin:0;padding:0;height:clamp(340px,36vw,520px);display:flex;flex-direction:column;
  background:#fff;border-radius:0 14px 14px 0}
.xsec__legend li{flex:none;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 clamp(16px,2vw,28px);border-top:1px solid var(--line);min-height:0}
.xsec__legend li:first-child{border-top:0}
.xsec__legend b{font-weight:600;font-size:clamp(15px,1.2vw,18px);letter-spacing:-.01em;line-height:1.2}
.xsec__legend span{font:500 13px/1 var(--f-mono);color:rgba(20,20,20,.55)}
.xsec__k--kostka{height:var(--hk)}.xsec__k--podsypka{height:var(--hp)}.xsec__k--podbudowa{height:var(--hb)}.xsec__k--grunt{height:var(--hg)}
.xsec__k--kostka,.xsec__k--podsypka{flex-direction:row!important;align-items:center;justify-content:space-between!important}
.bud3__list{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(16px,2vw,28px)}
.bud3__list li{padding:22px 0;border-top:1px solid rgba(20,20,20,.16);font-size:clamp(18px,1.6vw,24px);font-weight:500;letter-spacing:-.02em}
@media (max-width:820px){
  .xsec{grid-template-columns:1fr;--hk:12%;--hp:8%;--hb:48%;--hg:32%}
  .xsec__fig{border-radius:14px 14px 0 0;height:320px}
  .xsec__legend{height:auto;border-radius:0 0 14px 14px}
  .xsec__legend li{height:auto!important;flex-direction:row!important;justify-content:space-between!important;align-items:center;padding:14px 18px}
  .xsec__l--kostka i{flex-basis:22px}
  .xsec__pipe-tag{font-size:12px;padding:5px 10px;margin-top:-14px}
  .bud3__list{grid-template-columns:1fr}
  .bud3__list li{padding:16px 0}
}

/* dark blocks open from a card to full width and close back */
[data-fill]{will-change:clip-path}


/* ---------- "Od telefonu do działającego systemu": dark grid of live UI panels (code only) ---------- */
.flow{--fl-bg:#080808;--fl-line:rgba(255,255,255,.11);--fl-tx:#efefef;--fl-dim:rgba(239,239,239,.56);--fl-faint:rgba(239,239,239,.3);--amber:#E2B65C;
  --fl-pt:clamp(88px,11vw,150px);--fl-pb:clamp(72px,9vw,128px);
  position:relative;background:var(--fl-bg);color:var(--fl-tx);padding:var(--fl-pt) 0 var(--fl-pb);overflow:hidden;isolation:isolate}
.flow::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:none}
.flow__wrap{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
/* guide lines continue the sides of the grid through the whole section */
.flow__wrap::before,.flow__wrap::after{content:"";position:absolute;top:calc(-1 * var(--fl-pt));bottom:calc(-1 * var(--fl-pb));width:1px;pointer-events:none;
  background:linear-gradient(transparent,var(--fl-line) 10%,var(--fl-line) 90%,transparent)}
.flow__wrap::before{left:var(--gut)}
.flow__wrap::after{right:var(--gut)}

.flow__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap;padding:0 clamp(16px,2.8vw,44px) clamp(36px,4.5vw,60px)}
.flow__h{margin:0;font-size:clamp(38px,4.9vw,78px);line-height:1;letter-spacing:-.045em;font-weight:600;color:var(--fl-tx)}
.flow__h span{color:rgba(239,239,239,.4)}
.flow__lead{margin:0;max-width:32ch;font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:var(--fl-dim)}

.flow__grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;border:1px solid var(--fl-line);border-radius:12px;
  background:#0a0a0a}
.flow__cell{position:relative;display:flex;flex-direction:column;min-height:clamp(560px,46vw,660px);padding:clamp(20px,3vw,44px);border-bottom:1px solid var(--fl-line)}
.flow__cell:nth-of-type(odd){border-right:1px solid var(--fl-line)}
.flow__cell:nth-of-type(n+5){border-bottom:0}
.flow__plus{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);width:13px;height:13px;margin:-6px 0 0 -6px;pointer-events:none;z-index:2}
.flow__plus::before,.flow__plus::after{content:"";position:absolute;background:rgba(239,239,239,.42)}
.flow__plus::before{left:6px;top:0;width:1px;height:13px}
.flow__plus::after{top:6px;left:0;height:1px;width:13px}

/* the signal runs down the middle line as you scroll */
.flow__beam{position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;z-index:1;pointer-events:none;--b:0}
.flow__beam i{position:absolute;left:0;top:0;width:1px;height:calc(var(--b) * 100%);background:linear-gradient(transparent,rgba(var(--acc-rgb),.25) 30%,var(--lichen));box-shadow:none}
.flow__beam i::after{content:"";position:absolute;left:-3px;bottom:-3px;width:7px;height:7px;border-radius:50%;background:#EAF5D6;box-shadow:0 0 0 3px rgba(var(--acc-rgb),.18)}

.flow__panel{flex:1;display:flex;align-items:center;justify-content:center;padding:6px 0 26px}
.fp-frame{width:min(100%,580px);min-width:0;padding:5px;border:1px solid rgba(255,255,255,.09);border-radius:14px;
  -webkit-mask-image:linear-gradient(#000 0 74%,transparent 100%);mask-image:linear-gradient(#000 0 74%,transparent 100%);
  opacity:0;transform:translateY(14px);transition:opacity .6s ease-out,transform .6s ease-out}
.flow__cell.is-on .fp-frame{opacity:1;transform:none}
.flow__cell:nth-of-type(even) .fp-frame{transition-delay:.12s}
.flow__text{max-width:460px;opacity:.35;transition:opacity .8s var(--ease)}
.flow__cell.is-on .flow__text{opacity:1}
.flow__t{display:flex;align-items:baseline;gap:14px;margin:0 0 12px;font-size:clamp(25px,2.2vw,34px);font-weight:500;letter-spacing:-.03em;line-height:1.1;color:var(--fl-tx)}
.flow__n{font-family:var(--f-mono);font-size:13px;font-weight:500;letter-spacing:0;color:var(--lichen)}
.flow__p{margin:0;font-size:16.5px;line-height:1.6;color:var(--fl-dim);max-width:44ch}

/* ----- panel chrome ----- */
.fp{overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:rgba(15,15,15,0.98);
  font-size:13px;line-height:1.35;color:var(--fl-tx);text-align:left;user-select:none}
.fp__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 18px;border-bottom:1px solid rgba(255,255,255,.06);min-height:44px}
.fp__st{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fl-faint)}
.fp__st .fp__mono{margin-left:4px}
.fp__dot{width:6px;height:6px;border-radius:50%;background:var(--lichen);box-shadow:none;animation:fpPulse 2s ease-in-out infinite}
@keyframes fpPulse{50%{opacity:.2}}
.fp__mono{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;color:rgba(239,239,239,.32)}
.fp__ttl{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--fl-tx)}
.fp__body{padding:16px 18px 18px}
.fchip{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;border:1px solid rgba(var(--acc-rgb),.35);background:rgba(var(--acc-rgb),.08);
  font-family:var(--f-mono);font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--lichen);white-space:nowrap}
.fstats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.fstats div{min-width:0}
.fstats dt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(239,239,239,.3);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fstats dd{margin:0;font-family:var(--f-mono);font-size:15px;color:var(--fl-tx);white-space:nowrap}

/* 1. call */
.fcall__top{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:14px 12px;align-items:center;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.06)}
.fcall__av{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--acc-rgb),.12);color:var(--lichen)}
.fcall__av::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--lichen);animation:fpRing 2s ease-out infinite}
@keyframes fpRing{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
.fcall__av svg,.finbox__ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fcall__who{display:flex;flex-direction:column;gap:3px;min-width:0}
.fcall__who b{font-weight:600;font-size:14px}
.fcall__wave{grid-column:1/-1;display:flex;align-items:center;gap:3px;height:34px}
.fcall__wave i{flex:1;height:100%;border-radius:2px;background:var(--lichen);transform:scaleY(calc(var(--h) * .5));
  animation:fpWave 1.1s ease-in-out var(--d) infinite alternate}
@keyframes fpWave{to{transform:scaleY(var(--h))}}
.fnotes{list-style:none;margin:0;padding:12px 0 0}
.fnotes li{display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.07);
  opacity:0;transform:translateX(-8px);transition:opacity .5s,transform .6s var(--ease);transition-delay:calc(.5s + var(--i) * .45s)}
.fnotes li:last-child{border-bottom:0}
.flow__cell.is-on .fnotes li{opacity:1;transform:none}
.fnotes span{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(239,239,239,.32)}
.fnotes b{font-weight:500;color:rgba(239,239,239,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 2. survey plan */
.fplan{display:block;width:100%;height:auto;overflow:visible;font-family:var(--f-mono)}
.fplan__grid{fill:none;stroke:rgba(255,255,255,.035);stroke-width:1}
.fplan__plot{fill:none;stroke:rgba(239,239,239,.3);stroke-width:1.2;stroke-dasharray:5 5}
.fplan__bld{fill:rgba(255,255,255,.035);stroke:rgba(239,239,239,.55);stroke-width:1.2}
.fplan__wall{fill:none;stroke:rgba(239,239,239,.28);stroke-width:1}
.fplan__lb{font-size:10px;letter-spacing:.08em;fill:rgba(239,239,239,.36);text-transform:uppercase}
.fplan__lb--rg{fill:var(--lichen);font-size:9px}
.fplan__rg{fill:#0b0b0b;stroke:var(--lichen);stroke-width:1}
.fplan__dim path{fill:none;stroke:rgba(239,239,239,.4);stroke-width:1}
.fplan__dim rect{fill:#111111;stroke:rgba(239,239,239,.18)}
.fplan__dim text{font-size:10.5px;fill:var(--fl-tx)}
.fplan__sweep{transform-box:view-box;transform-origin:380px 150px;animation:fpSweep 4.2s linear infinite}
@keyframes fpSweep{to{transform:rotate(-360deg)}}
.fplan__scan circle:first-child{fill:rgba(var(--acc-rgb),.14);stroke:var(--lichen);stroke-width:1}
.fplan__scan circle:last-child{fill:var(--lichen)}
.fplan__route{fill:none;stroke:var(--lichen);stroke-width:1.8;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease) .5s;filter:drop-shadow(0 0 4px rgba(var(--acc-rgb),.6))}
.flow__cell.is-on .fplan__route{stroke-dashoffset:0}
.fplan__pt circle{fill:#0b0b0b;stroke:var(--lichen);stroke-width:1.4}
.fplan__pt text{font-size:9.5px;fill:rgba(239,239,239,.6)}
.fplan__pt{opacity:0;transition:opacity .4s;transition-delay:calc(.9s + var(--i) * .25s)}
.flow__cell.is-on .fplan__pt{opacity:1}
.fplan .fplan__ring{fill:none;transform-box:fill-box;transform-origin:center;animation:fpRing 2.6s ease-out infinite;animation-delay:calc(var(--i) * .43s)}

/* 3. project tabs */
.ftabs{display:inline-flex;padding:3px;gap:2px;border-radius:7px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.ftabs b{position:relative;padding:4px 10px;border-radius:5px;font-weight:500;font-size:11.5px;color:rgba(239,239,239,.45);transition:color .3s,background .3s}
.ftabs b.is-active{color:var(--fl-tx);background:rgba(255,255,255,.09)}
.fviews{display:grid;min-height:268px}
.fview{grid-area:1/1;align-self:center;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .6s var(--ease);pointer-events:none}
.fview.is-active{opacity:1;transform:none}
.fplan--cams{max-width:420px;margin:0 auto}
.fcone path{fill:rgba(var(--acc-rgb),.14);stroke:rgba(var(--acc-rgb),.5);stroke-width:1}
.fcone circle{fill:var(--lichen)}
.fcone{transform-box:view-box;animation:fpCone 3.6s ease-in-out infinite alternate}
.fcone:nth-of-type(2n){animation-delay:-1.4s}
.fcone:nth-of-type(3n){animation-delay:-2.4s;animation-duration:4.4s}
@keyframes fpCone{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.fkit{list-style:none;margin:0;padding:0}
.fkit li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.fkit li span{color:rgba(239,239,239,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fkit li b{font-family:var(--f-mono);font-weight:400;font-size:12px;color:rgba(239,239,239,.5);white-space:nowrap}
.fkit__sum{display:flex;justify-content:space-between;align-items:center;padding-top:12px;font-weight:600}
.fgantt{position:relative;--lab:118px}
.fgantt__head{display:grid;grid-template-columns:repeat(5,1fr);margin-left:var(--lab);padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06)}
.fgantt__head span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(239,239,239,.3);padding-left:6px;border-left:1px solid rgba(255,255,255,.06)}
.fgantt__row{position:relative;display:flex;align-items:center;height:48px;border-bottom:1px solid rgba(255,255,255,.04)}
.fgantt__row span{width:var(--lab);flex:none;font-weight:500;font-size:12.5px;color:rgba(239,239,239,.85)}
.fgantt__row i{position:absolute;left:calc(var(--lab) + (100% - var(--lab)) * var(--s));width:calc((100% - var(--lab)) * (var(--e) - var(--s)));height:7px;border-radius:4px;
  background:var(--lichen);box-shadow:none;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease);transition-delay:calc(.15s + var(--i) * .15s)}
.fgantt__row:nth-child(3) i{background:var(--lichen)}
.fgantt__row:nth-child(4) i{background:var(--lichen)}
.fgantt__row:nth-child(5) i{background:rgba(247,247,247,0.675)}
.fview.is-active .fgantt__row i{transform:none}
.fgantt__now{position:absolute;top:22px;bottom:0;left:calc(var(--lab) + (100% - var(--lab)) * var(--x));width:1px;background:repeating-linear-gradient(rgba(226,182,92,.8) 0 3px,transparent 3px 6px)}
.fgantt__now::before{content:"dziś";position:absolute;top:-2px;left:5px;font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}

/* 4. one crew pipeline */
.fpipe{display:block;width:100%;height:auto;overflow:visible}
.fpipe__ln{fill:none;stroke:rgba(239,239,239,.18);stroke-width:1.2;stroke-dasharray:2 4;transition:stroke .4s}
.fpipe__ln.is-act{stroke:var(--lichen);stroke-dasharray:none;filter:drop-shadow(0 0 3px rgba(var(--acc-rgb),.7))}
.fpipe__dot{fill:rgba(239,239,239,.7)}
.fpipe__dot--j{opacity:.25;transition:opacity .4s}
.fpipe__dot--j.is-act{opacity:1;fill:#EAF5D6}
.fpipe__node rect{fill:rgba(255,255,255,.035);stroke:rgba(239,239,239,.14);stroke-width:1}
.fpipe__node--hub rect{fill:#0d0d0d;stroke:rgba(239,239,239,.9);stroke-width:1.6;filter:drop-shadow(0 0 14px rgba(var(--acc-rgb),.18))}
.fpipe__k{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.1em;fill:rgba(239,239,239,.38)}
.fpipe__k--acc{fill:var(--lichen)}
.fpipe__v{font-family:var(--f-body);font-size:12.5px;font-weight:500;fill:rgba(239,239,239,.86)}
.fpipe__v--big{font-size:14px;font-weight:600;fill:#fff}
.fpipe__b{fill:rgba(239,239,239,.5);animation:fpPulse 1.2s ease-in-out infinite}
.fpipe__b:nth-of-type(2){animation-delay:.2s}
.fpipe__b:nth-of-type(3){animation-delay:.4s}
.fpipe__job rect{fill:rgba(255,255,255,.03);stroke:rgba(239,239,239,.1);transition:stroke .4s,fill .4s}
.fpipe__st{fill:rgba(239,239,239,.22);transition:fill .3s}
.fpipe__job.is-done .fpipe__st{fill:var(--lichen)}
.fpipe__job.is-act rect{stroke:rgba(226,182,92,.55);fill:rgba(226,182,92,.06)}
.fpipe__job.is-act .fpipe__st{fill:var(--amber);animation:fpPulse 1s ease-in-out infinite}

/* 5. handover inbox */
.finbox{list-style:none;margin:-4px -8px;padding:0}
.finbox li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px;border-radius:8px;
  opacity:0;transform:translateY(10px);transition:opacity .5s,transform .7s var(--ease),background .4s;transition-delay:calc(.3s + var(--i) * .3s)}
.flow__cell.is-on .finbox li{opacity:1;transform:none}
.finbox li:first-child{background:rgba(255,255,255,.045)}
.finbox__ic{position:relative;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--fl-tx);background:rgba(255,255,255,0.065);border:1px solid rgba(255,255,255,.08)}
.finbox__b{position:absolute;right:-5px;bottom:-5px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;border:2px solid #0d0d0d}
.finbox__b svg{width:11px;height:11px;stroke-width:2.6}
.finbox__b--ok{background:var(--lichen);color:#141414}
.finbox__b--wait{background:var(--amber);color:#141414}
.finbox__tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.finbox__tx b{font-weight:600;font-size:13.5px}
.finbox__tx span{color:rgba(239,239,239,.45);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 6. call to action */
.flow__cell--cta{justify-content:flex-end}
.flow__cta{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:auto}
.flow__cta-h{margin:0;font-size:clamp(34px,3.6vw,58px);line-height:1;letter-spacing:-.045em;font-weight:600;color:var(--fl-tx)}
.flow__phone{position:relative;display:inline-flex;align-items:center;gap:16px;font-family:var(--f-mono);font-size:clamp(20px,1.8vw,28px);color:var(--lichen);text-decoration:none;letter-spacing:-.01em}
.flow__ring{position:relative;width:12px;height:12px;border-radius:50%;background:var(--lichen);box-shadow:none}
.flow__ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--lichen);animation:fpRing 1.8s ease-out infinite}
.flow__cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:8px}
.flow__cta-row .btn{--bg:var(--lichen);--fg:var(--graphite)}
.flow__cta-row .btn .ic{background:var(--graphite);color:var(--lichen)}
.flow__link{display:inline-flex;align-items:center;gap:8px;color:var(--fl-tx);text-decoration:none;font-weight:500;font-size:15px}
.flow__link svg{transition:transform .35s var(--ease)}
.flow__link:hover svg{transform:translateX(4px)}

/* ambient loops rest while the cell is off screen */
.flow__cell:not(.is-vis) *,.flow__cell:not(.is-vis) *::after{animation-play-state:paused!important}

@media (max-width:860px){
  .flow__grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .flow__cell{min-height:0;border-right:0!important;border-bottom:1px solid var(--fl-line)!important;padding:20px 16px 32px}
  .flow__cell:last-of-type{border-bottom:0!important}
  .flow__cell:nth-of-type(even) .fp-frame{transition-delay:0s}
  .flow__panel{padding:4px 0 22px}
  .flow__beam{left:0}
  .flow__plus{display:none}
  .fp{font-size:12px}
  .fp__body{padding:14px}
  .fp__bar{padding:10px 14px}
  .fnotes li{grid-template-columns:66px minmax(0,1fr) auto}
  .fpipe__start{display:none}
  .fgantt{--lab:96px}
  .fgantt__row span{font-size:11.5px}
  .ftabs b{padding:4px 7px;font-size:10.5px}
  .fviews{min-height:230px}
  .fstats dd{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .fp-frame,.flow__text,.fnotes li,.fplan__pt,.finbox li,.fgantt__row i,.fplan__route{transition:none!important}
  .flow .fp *,.flow .fp *::after,.flow__ring::after{animation:none!important}
}

/* CTA cell: the call signal spreading from the phone */
.flow__sig{position:relative;flex:1;min-height:200px;display:grid;place-items:center}
.flow__sig i{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:1px solid rgba(var(--acc-rgb),.5);opacity:0;animation:flowSig 4s cubic-bezier(.2,.6,.3,1) infinite}
.flow__sig i:nth-child(2){animation-delay:1s}
.flow__sig i:nth-child(3){animation-delay:2s}
.flow__sig i:nth-child(4){animation-delay:3s}
@keyframes flowSig{0%{transform:scale(.6);opacity:0}15%{opacity:.9}100%{transform:scale(3.6);opacity:0}}
.flow__sig-core{position:relative;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:var(--graphite);background:var(--lichen);box-shadow:0 0 0 10px rgba(var(--acc-rgb),.1)}
.flow__sig-core svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){.flow__sig{min-height:220px}}
@media (prefers-reduced-motion:reduce){.flow__sig i{animation:none;opacity:.25}.flow__sig i:nth-child(2){transform:scale(1.8)}.flow__sig i:nth-child(3){transform:scale(2.6)}}

/* ---------- "Dlaczego AVP Group": same dark grid as .flow — scheme + four reason panels (code only) ---------- */
.why3{--fl-pb:clamp(36px,4vw,64px)}
.why3 + .flow{--fl-pt:clamp(36px,4vw,64px)}
.why3 + .flow::before{background:none}
.why3__head{padding:0 clamp(16px,2.8vw,44px) clamp(40px,5vw,72px)}
.why3__label{margin:0 0 26px;font-size:15px;font-weight:500;letter-spacing:0;color:var(--lichen)}
.why3__statement{margin:0;max-width:19ch;font-size:clamp(34px,4.9vw,80px);line-height:1.04;letter-spacing:-.045em;font-weight:600;color:var(--fl-tx)}
.pill-ic{display:inline-grid;place-items:center;vertical-align:middle;width:1.6em;height:.86em;margin:0 .1em;border-radius:.43em;translate:0 -.06em;
  color:var(--lichen);background:rgba(var(--acc-rgb),.1);border:1px solid rgba(var(--acc-rgb),.38);box-shadow:none}
.pill-ic__svg{width:.5em;height:.5em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* grid: the scheme takes the whole first row, the reasons sit 2×2 below */
.why3__grid .flow__cell--wide{grid-column:1/-1;flex-direction:row-reverse;align-items:center;gap:clamp(24px,4vw,64px)}
.why3__grid .flow__cell--wide .flow__panel{padding:0;min-width:0}
.why3__grid .flow__cell--wide .flow__text{flex:0 0 min(360px,30%);align-self:flex-end}
.why3__grid .flow__cell:nth-of-type(odd){border-right:0}
.why3__grid .flow__cell:nth-of-type(even){border-right:1px solid var(--fl-line)}
.why3__grid .flow__cell:nth-of-type(n+4){border-bottom:0}
.fp-frame--wide{width:min(100%,980px)}

/* scheme: five contractors (red, tangled) → one crew (lichen, flowing) */
.fscheme--v{display:none}
.fs .ftabs b{cursor:pointer}
.fs .ftabs b:focus-visible{outline:2px solid var(--lichen);outline-offset:2px}
.fs .fpipe__ln{stroke:rgba(var(--acc-rgb),.3);stroke-width:1.5;stroke-dasharray:3 5}
.fs-dot{fill:#EAF2DC;filter:drop-shadow(0 0 3px rgba(var(--acc-rgb),.9))}
.fs-hd{fill:rgba(239,239,239,.85);animation:fsHd 1.2s ease-in-out infinite}
.fs-hd:nth-of-type(2){animation-delay:.4s}
.fs-hd:nth-of-type(3){animation-delay:.8s}
@keyframes fsHd{0%,100%{opacity:.15}50%{opacity:1}}
.fs-st{fill:var(--lichen);animation:fsSt 1.9s ease-in-out infinite}
@keyframes fsSt{0%,100%{opacity:.3}50%{opacity:1}}
.fs-one{opacity:0;transition:opacity .6s var(--ease) .3s}
.fs.is-one .fs-one{opacity:1}
.fs-sys{transform-box:fill-box;opacity:0;transform:translateX(-10px);transition:opacity .5s,transform .7s var(--ease);transition-delay:calc(.55s + var(--i) * .08s)}
.fs.is-one .fs-sys{opacity:1;transform:none}
.fs-sys rect{stroke:rgba(var(--acc-rgb),.22)}
.fs-many{transition:opacity .5s}
.fs.is-one .fs-many{opacity:0;pointer-events:none}
.fs-chaos{fill:none;stroke:rgba(214,96,74,.6);stroke-width:1.4;stroke-dasharray:4 6;animation:fsDash 1.4s linear infinite}
.fs-blame{fill:none;stroke:rgba(214,96,74,.32);stroke-width:1.2;stroke-dasharray:2 5;animation:fsDash 2s linear infinite reverse}
@keyframes fsDash{to{stroke-dashoffset:-20}}
.fs-con{transform-box:view-box;transition:transform .8s var(--ease),opacity .45s;transition-delay:calc(var(--i) * .05s)}
.fs.is-one .fs-con{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}
.fs-con rect{fill:#151515;stroke:rgba(214,96,74,.5)}
.fs-con text{font-family:var(--f-body);font-size:12px;font-weight:500;fill:rgba(239,239,239,.86)}
.fs-q rect{fill:rgba(214,96,74,.12);stroke:rgba(214,96,74,.5)}
.fs-q text{font-family:var(--f-mono);font-size:11px;fill:#E8927D}
.fs-q{animation:fsSt 2.2s ease-in-out infinite}
.flog{display:flex;align-items:center;gap:10px;height:38px;margin-top:12px;padding:0 2px;border-top:1px solid rgba(255,255,255,.06);font-family:var(--f-mono);font-size:11.5px;color:rgba(239,239,239,.72)}
.flog__p{color:var(--lichen)}
.fs:not(.is-one) .flog__p{color:#E8927D}
.flog__t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s ease-out}
.flog__t.is-out{opacity:0}
.flog::after{content:"";flex:none;width:6px;height:12px;margin-left:-6px;background:var(--lichen);animation:fpPulse 1s steps(2,jump-none) infinite}

/* 1. project owner */
.fown{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.06)}
.fown__av{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#1f231a;border:1px solid rgba(var(--acc-rgb),.35);font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--lichen)}
.fown__who{display:flex;flex-direction:column;gap:3px;min-width:0}
.fown__who b{font-size:14px;font-weight:600}
.fown__who span{font-size:12.5px;color:rgba(239,239,239,.45)}
.fown__call{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--lichen);color:#141414}
.fown__call::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--lichen);animation:fpRing 2s ease-out infinite}
.fown__call svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fown__k{margin:16px 0 10px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(239,239,239,.3)}
.ftags{display:flex;flex-wrap:wrap;gap:8px}
.ftags span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 8px;border-radius:7px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);
  font-weight:500;font-size:12.5px;color:rgba(239,239,239,.45);transition:color .4s,border-color .4s,background .4s;transition-delay:calc(.6s + var(--i) * .22s)}
.ftags svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.3;transition:opacity .4s,stroke .4s;transition-delay:inherit}
.flow__cell.is-on .ftags span{color:var(--fl-tx);border-color:rgba(var(--acc-rgb),.32);background:rgba(var(--acc-rgb),.07)}
.flow__cell.is-on .ftags svg{opacity:1;stroke:var(--lichen)}

/* 2. settings fitted to the object, one dropdown open */
.ffit{position:relative}
.ffit__row{display:grid;grid-template-columns:minmax(0,1fr) 152px;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);
  opacity:0;transform:translateY(6px);transition:opacity .5s,transform .6s var(--ease);transition-delay:calc(.2s + var(--i) * .1s)}
.ffit__row:last-of-type{border-bottom:0}
.flow__cell.is-on .ffit__row{opacity:1;transform:none}
.ffit__tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ffit__tx b{font-size:13px;font-weight:600}
.ffit__tx span{font-size:12px;color:rgba(239,239,239,.42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ffit__sel{display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 10px 0 12px;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.025);font-size:12px;color:rgba(239,239,239,.72);white-space:nowrap;overflow:hidden}
.ffit__sel i{flex:none;width:6px;height:6px;margin:-3px 0 0 8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.5}
.ffit__sel.is-open{border-color:rgba(var(--acc-rgb),.5);color:var(--fl-tx)}
.ffit__pop{position:absolute;right:18px;top:64px;z-index:2;width:196px;padding:6px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:#151515;
  box-shadow:0 22px 40px -12px rgba(0,0,0,.85);opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top right;transition:opacity .35s var(--ease) .9s,transform .5s var(--ease) .9s}
.flow__cell.is-on .ffit__pop{opacity:1;transform:none}
.ffit__pop span{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;border-radius:5px;font-size:11.5px;color:rgba(239,239,239,.55)}
.ffit__pop .is-pick{transition:background .3s 1.7s,color .3s 1.7s}
.flow__cell.is-on .ffit__pop .is-pick{background:rgba(var(--acc-rgb),.12);color:var(--fl-tx)}
.ffit__pop svg{width:13px;height:13px;fill:none;stroke:var(--lichen);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s 1.9s}
.flow__cell.is-on .ffit__pop svg{opacity:1}

/* 3. parts on the shelf */
.fstock{list-style:none;margin:0;padding:0}
.fstock li{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.fstock li:last-child{border-bottom:0}
.fstock__b{height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;color:rgba(239,239,239,.78)}
.fstock__n{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fstock__n i{position:relative;display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.fstock__n i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--f) * 100%);border-radius:2px;background:var(--lichen);
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease);transition-delay:calc(.3s + var(--i) * .15s)}
.flow__cell.is-on .fstock__n i::after{transform:none}

/* 4. service ticket */
.fticket{position:relative;list-style:none;margin:0;padding:0}
.fticket::before{content:"";position:absolute;left:71px;top:22px;bottom:22px;width:1px;background:rgba(255,255,255,.09)}
.fticket li{position:relative;display:grid;grid-template-columns:44px 30px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;opacity:.16;transform:translateY(4px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.fticket li.is-in{opacity:1;transform:none}
.fticket__ic{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);background:#111111;color:var(--fl-tx)}
.fticket__ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fticket__ic--warn{color:var(--amber);border-color:rgba(226,182,92,.45)}
.fticket__ic--ok{color:#141414;background:var(--lichen);border-color:var(--lichen)}
.fticket__tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.fticket__tx b{font-size:13px;font-weight:600}
.fticket__tx span{font-size:12px;color:rgba(239,239,239,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fchip--wait{border-color:rgba(226,182,92,.45);background:rgba(226,182,92,.08);color:var(--amber)}

@media (max-width:860px){
  .why3__grid .flow__cell--wide{flex-direction:column;align-items:stretch;gap:0}
  .why3__grid .flow__cell--wide .flow__text{flex:none;align-self:auto}
  .why3__grid .flow__cell:nth-of-type(n){border-right:0}
  .fscheme--h{display:none}
  .fscheme--v{display:block}
  .ffit__row{grid-template-columns:minmax(0,1fr) 128px;gap:10px}
  .ffit__pop{width:170px;right:14px;top:60px}
  .fstock li{grid-template-columns:76px minmax(0,1fr) auto;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .fs-one,.fs-many,.fs-sys,.fs-con,.ftags span,.ffit__row,.ffit__pop,.fstock__n i::after,.fticket li{transition:none!important}
  .flow .fp *::after,.flog::after{animation:none!important}
}

/* ---------- dark panel blocks: full width + scroll-linked reveal (why.js adds .flow--scrub) ---------- */
.flow__wrap{max-width:none;padding:0}
.flow__wrap::before,.flow__wrap::after{display:none}
.flow__head,.why3__head{padding-left:clamp(20px,3vw,44px);padding-right:clamp(20px,3vw,44px)}
.flow__grid{border-radius:0;border-left:0;border-right:0}
.flow__plus[style*="--x:0;"],.flow__plus[style*="--x:1;"]{display:none}
.fp-frame{width:min(100%,640px)}
.fp-frame--wide{width:min(100%,1040px)}

/* scrubbed: GSAP drives the panel and the text; grid lines draw with --rv (0…1) */
.flow--scrub .fp-frame,.flow--scrub .flow__text{transition:none!important;opacity:1;transform:none}
.flow--scrub .flow__cell{border-color:transparent!important}
.flow--scrub .flow__cell::before,.flow--scrub .flow__cell::after{content:"";position:absolute;background:var(--fl-line);pointer-events:none}
.flow--scrub .flow__cell::before{left:0;right:0;bottom:-1px;height:1px;transform:scaleX(var(--rv,1));transform-origin:left}
.flow--scrub .flow__cell::after{top:0;bottom:0;right:-1px;width:1px;transform:scaleY(var(--rv,1));transform-origin:top}
/* where the static layout has no line, draw none */
.flow--scrub .flow__cell:nth-of-type(even)::after,.flow--scrub .flow__cell:nth-of-type(n+5)::before{display:none}
.why3.flow--scrub .flow__cell:nth-of-type(even)::after{display:block}
.why3.flow--scrub .flow__cell:nth-of-type(odd)::after,.why3.flow--scrub .flow__cell:nth-of-type(n+4)::before{display:none}
.flow--scrub .flow__grid{border-top-color:transparent}
.flow--scrub .flow__grid::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--fl-line);transform:scaleX(var(--gl,1));transform-origin:center}
@media (max-width:860px){
  .flow__head,.why3__head{padding-left:16px;padding-right:16px}
  .flow--scrub .flow__cell::after{display:none!important}
  .flow--scrub .flow__cell::before{display:block!important}
  .flow--scrub .flow__cell:last-of-type::before{display:none!important}
}

/* ---------- home rhythm: light → dark → light → dark (hero, Rozwiązania, Dlaczego, Jak pracujemy, AVPBUD, FAQ, Kontakt, footer) ---------- */

/* Dlaczego: light page, the panels stay dark like screenshots of an app */
.why3{--fl-bg:var(--fog);--fl-line:rgba(20,20,20,.13);--fl-tx:var(--graphite);--fl-dim:rgba(20,20,20,.64);--fl-faint:rgba(20,20,20,.42);
  --fl-pb:clamp(88px,11vw,150px);background:var(--fog)}
.why3::before{background:none}
.why3 .flow__grid{background:rgba(255,255,255,0.14)}
.why3 .flow__plus::before,.why3 .flow__plus::after{background:rgba(20,20,20,.38)}
.why3__label{color:var(--moss)}
.why3 .pill-ic{color:var(--moss);background:rgba(var(--moss-rgb),.1);border-color:rgba(var(--moss-rgb),.32);box-shadow:none}
.why3 .fp-frame{--fl-tx:#efefef;--fl-dim:rgba(239,239,239,.56);--fl-faint:rgba(239,239,239,.3);
  border-color:rgba(20,20,20,.14);background:rgba(20,20,20,.05);-webkit-mask-image:none;mask-image:none;box-shadow:0 40px 70px -42px rgba(20,20,20,.55)}
/* the flow block no longer continues the Dlaczego one */
.why3 + .flow{--fl-pt:clamp(88px,11vw,150px)}
.why3 + .flow::before{background:none}

/* FAQ on dark */
.section--dark{background:var(--graphite);color:var(--paper)}
.section--dark .lead{color:rgba(243,243,243,.62)}
.section--dark .faq__item{border-color:rgba(255,255,255,.14)}
.section--dark .faq__a{color:rgba(243,243,243,.7)}
.section--dark .faq__q{color:var(--paper)}

/* Kontakt on light (home) */
.contact--light{background:var(--fog);color:var(--graphite);border-radius:0}
.contact--light .contact__glow{background:none;opacity:.7}
.contact--light .contact__phone{color:var(--graphite)}
.contact--light .contact__mail{color:var(--ink-soft)}
.contact--light .form{box-shadow:0 30px 70px -40px rgba(20,20,20,.35)}

/* ---------- Dlaczego: light panels for the light section (moss accents, graphite text) ---------- */
.why3 .fp-frame{--fl-tx:var(--graphite);--fl-dim:rgba(20,20,20,.6);--fl-faint:rgba(20,20,20,.42);
  border-color:rgba(20,20,20,.1);background:rgba(255,255,255,.4);box-shadow:0 34px 60px -42px rgba(20,20,20,.4)}
.why3 .fp{background:#f4f4f4;border-color:rgba(20,20,20,.1);color:var(--graphite)}
.why3 .fp__bar,.why3 .fstats,.why3 .flog,.why3 .fcall__top,.why3 .fown{border-color:rgba(20,20,20,.08)}
.why3 .fp__st,.why3 .fp__mono,.why3 .fstats dt,.why3 .fown__k{color:rgba(20,20,20,.45)}
.why3 .fstats dd{color:var(--graphite)}
.why3 .fp__dot{background:var(--moss);box-shadow:0 0 0 3px rgba(var(--moss-rgb),.14)}
.why3 .fchip{border-color:rgba(var(--moss-rgb),.35);background:rgba(var(--moss-rgb),.08);color:var(--moss)}
.why3 .fchip--wait{border-color:rgba(168,116,26,.4);background:rgba(226,182,92,.14);color:#8a5d10}
.why3 .ftabs{background:rgba(20,20,20,.04);border-color:rgba(20,20,20,.08)}
.why3 .ftabs b{color:rgba(20,20,20,.5)}
.why3 .ftabs b.is-active{color:var(--graphite);background:#fff;box-shadow:0 1px 2px rgba(20,20,20,.12)}
.why3 .fs .ftabs b:focus-visible{outline-color:var(--moss)}

/* scheme */
.why3 .fs .fpipe__ln{stroke:rgba(var(--moss-rgb),.4)}
.why3 .fs-dot{fill:var(--moss);filter:none}
.why3 .fpipe__node rect{fill:rgba(20,20,20,.03);stroke:rgba(20,20,20,.14)}
.why3 .fpipe__node--hub rect{fill:#fff;stroke:var(--graphite);filter:drop-shadow(0 10px 18px rgba(20,20,20,.14))}
.why3 .fpipe__k{fill:rgba(20,20,20,.45)}
.why3 .fpipe__k--acc{fill:var(--moss)}
.why3 .fpipe__v,.why3 .fpipe__v--big{fill:var(--graphite)}
.why3 .fs-hd{fill:var(--graphite)}
.why3 .fpipe__job rect{fill:#fff;stroke:rgba(20,20,20,.1)}
.why3 .fs-sys rect{stroke:rgba(var(--moss-rgb),.28)}
.why3 .fs-st{fill:var(--moss)}
.why3 .fs-chaos{stroke:rgba(180,71,43,.6)}
.why3 .fs-blame{stroke:rgba(180,71,43,.3)}
.why3 .fs-con rect{fill:#fff;stroke:rgba(180,71,43,.5)}
.why3 .fs-con text{fill:var(--graphite)}
.why3 .fs-q rect{fill:rgba(180,71,43,.08);stroke:rgba(180,71,43,.45)}
.why3 .fs-q text{fill:#a33d22}
.why3 .flog{color:rgba(20,20,20,.72)}
.why3 .flog__p{color:var(--moss)}
.why3 .fs:not(.is-one) .flog__p{color:#a33d22}
.why3 .flog::after{background:var(--moss)}

/* owner */
.why3 .fown__av{background:#e5edd8;border-color:rgba(var(--moss-rgb),.3);color:var(--moss)}
.why3 .fown__who span{color:rgba(20,20,20,.5)}
.why3 .fown__call::after{border-color:var(--moss)}
.why3 .ftags span{border-color:rgba(20,20,20,.1);background:rgba(20,20,20,.03);color:rgba(20,20,20,.4)}
.why3 .flow__cell.is-on .ftags span{color:var(--graphite);border-color:rgba(var(--moss-rgb),.32);background:rgba(var(--moss-rgb),.07)}
.why3 .flow__cell.is-on .ftags svg{stroke:var(--moss)}

/* fitted settings */
.why3 .ffit__row{border-color:rgba(20,20,20,.07)}
.why3 .ffit__tx span{color:rgba(20,20,20,.48)}
.why3 .ffit__sel{border-color:rgba(20,20,20,.12);background:#fff;color:rgba(20,20,20,.75)}
.why3 .ffit__sel.is-open{border-color:var(--moss);color:var(--graphite);box-shadow:0 0 0 3px rgba(var(--moss-rgb),.12)}
.why3 .ffit__pop{background:#fff;border-color:rgba(20,20,20,.1);box-shadow:0 22px 40px -16px rgba(20,20,20,.35)}
.why3 .ffit__pop span{color:rgba(20,20,20,.6)}
.why3 .flow__cell.is-on .ffit__pop .is-pick{background:rgba(var(--moss-rgb),.1);color:var(--graphite)}
.why3 .ffit__pop svg{stroke:var(--moss)}

/* parts stock */
.why3 .fstock li{border-color:rgba(20,20,20,.07)}
.why3 .fstock__b{border-color:rgba(20,20,20,.12);background:#fff;color:rgba(20,20,20,.75)}
.why3 .fstock__n{color:var(--graphite)}
.why3 .fstock__n i{background:rgba(20,20,20,.07)}

/* ticket */
.why3 .fticket::before{background:rgba(20,20,20,.12)}
.why3 .fticket li{opacity:.25}
.why3 .fticket li.is-in{opacity:1}
.why3 .fticket__ic{background:#fff;border-color:rgba(20,20,20,.14);color:var(--graphite)}
.why3 .fticket__ic--warn{color:#8a5d10;border-color:rgba(168,116,26,.45)}
.why3 .fticket__ic--ok{background:var(--moss);border-color:var(--moss);color:var(--graphite)}
.why3 .fticket__tx span{color:rgba(20,20,20,.5)}

/* ---------- "Rozwiązania": slider over a detection field (sol.js) ---------- */
.sol2{background:#0b0b0b;padding-bottom:clamp(64px,8vw,112px);overflow:hidden}
.sol2__field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sol2::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(140% 90% at 50% 20%,transparent 55%,rgba(11,11,11,.7) 100%)}
.sol2__head,.sol2__track,.sol2 .wrap{position:relative;z-index:1}
.sol2__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 64px;flex-wrap:wrap;margin-bottom:clamp(36px,4vw,56px)}
.sol2__head .h-l{margin:0;color:var(--paper)}
.sol2__side{display:flex;flex-direction:column;gap:26px;max-width:440px}
.sol2__side .lead{margin:0;color:rgba(243,243,243,.6)}
.sol2__nav{display:flex;align-items:center;gap:14px}
.sol2__btn{width:50px;height:50px;padding:0;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03);color:var(--paper);cursor:pointer;
  transition:background .3s,border-color .3s,color .3s,opacity .3s}
.sol2__btn svg{width:18px;height:18px}
.sol2__btn:hover:not(:disabled),.sol2__btn:focus-visible{background:var(--lichen);border-color:var(--lichen);color:var(--graphite)}
.sol2__btn:disabled{opacity:.28;cursor:default}
.sol2__count{min-width:76px;text-align:center;font-family:var(--f-mono);font-size:14px;color:rgba(243,243,243,.42)}
.sol2__count b{font-weight:500;color:var(--paper)}

.sol2__track{--pad:max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)));list-style:none;margin:0;padding:6px var(--pad) 12px;display:flex;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;outline:none}
.sol2__track::-webkit-scrollbar{display:none}
.sol2__track:focus-visible{outline:2px solid var(--lichen);outline-offset:4px}
.sol2__track.is-drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.sol2__track>li{flex:0 0 clamp(300px,31vw,470px);scroll-snap-align:start}
.sol2__card{display:flex;flex-direction:column;height:100%;padding:8px;border-radius:14px;color:var(--paper);text-decoration:none;
  background:rgba(20,20,20,.78);border:1px solid rgba(255,255,255,.09);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .4s,background .4s}
.sol2__card:hover{border-color:rgba(var(--acc-rgb),.45);background:rgba(26,26,26,.9)}
.sol2__img{position:relative;aspect-ratio:4/3;border-radius:9px;overflow:hidden;background:#1b1b1b}
.sol2__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);-webkit-user-drag:none;user-select:none}
.sol2__card:hover .sol2__img img{transform:scale(1.05)}
.sol2__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:20px 14px 14px}
.sol2__meta{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sol2__card .sol__tag{color:var(--lichen)}
.sol2__card--bud .sol__tag{color:#e0b58c}
.sol2__n{font-family:var(--f-mono);font-size:12px;color:rgba(243,243,243,.36)}
.sol2__card h3{margin:0;font-size:clamp(23px,1.9vw,29px);font-weight:600;letter-spacing:-.03em;line-height:1.08}
.sol2__card p{margin:0;flex:1;font-size:15px;line-height:1.55;color:rgba(243,243,243,.6)}
.sol2__card .link-arrow{margin-top:8px;color:var(--paper)}
.sol2__bar{position:relative;height:2px;margin-top:30px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.sol2__bar i{position:absolute;inset:0;background:var(--lichen);transform-origin:left;transform:scaleX(.143);transition:transform .2s linear}
@media (max-width:820px){
  .sol2__head{align-items:flex-start}
  .sol2__track>li{flex-basis:84vw}
  .sol2__btn{width:44px;height:44px}
}

/* ---------- Rozwiązania: background = live camera feed of our object (replaces the dot field) ---------- */
.sol2::after{display:none}
.sol2__field{display:none}
.sol2__cam{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#0b0b0b}
.sol2__feed{position:absolute;left:0;top:0;width:100%;height:100%;will-change:transform}
.sol2__vid{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.3) brightness(.5)}
.sol2__feed::after{content:"";position:absolute;inset:0;background:#000;opacity:.12}
/* scanlines, vignette and the darkening that keeps the text readable */
.sol2__fx{position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px),
    radial-gradient(110% 85% at 62% 30%,transparent 25%,rgba(8,8,8,.85) 80%),
    linear-gradient(90deg,rgba(8,8,8,.72),rgba(8,8,8,.15) 45%,rgba(8,8,8,.35)),
    linear-gradient(rgba(8,8,8,.35),transparent 25%,rgba(8,8,8,.3) 70%,rgba(11,11,11,.8) 100%)}
.sol2__fx::after{content:"";position:absolute;inset:-50%;opacity:.14;mix-blend-mode:overlay;animation:camNoise .5s steps(4) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes camNoise{25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-2%,-3%)}}
/* switching cameras: a short interference */
.sol2__glitch{position:absolute;inset:0;opacity:0;mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 2px,transparent 2px 11px),linear-gradient(90deg,rgba(255,255,255,.08),transparent 40%,rgba(255,255,255,.06))}
.sol2__cam.is-switch .sol2__glitch{animation:camGlitch .5s steps(5) both}
.sol2__cam.is-switch .sol2__vid{animation:camFlash .5s steps(3) both}
@keyframes camGlitch{0%{opacity:1;transform:translateX(-16px)}20%{opacity:.6;transform:translateX(12px) scaleY(1.05)}40%{opacity:.9;transform:translateX(-6px)}60%{opacity:.35;transform:none}100%{opacity:0}}
@keyframes camFlash{0%{filter:grayscale(1) contrast(1.7) brightness(1.15)}45%{filter:grayscale(1) contrast(1.3) brightness(.25)}100%{filter:grayscale(1) contrast(1.25) brightness(.62)}}
/* camera interface */
.sol2__hud{position:absolute;inset:clamp(18px,2.4vw,34px) var(--gut);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(234,242,220,.72);
  --c:rgba(234,242,220,.45);
  background:
    linear-gradient(var(--c),var(--c)) 0 0/18px 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1px 18px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/18px 1px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/1px 18px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/18px 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/1px 18px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/18px 1px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/1px 18px no-repeat}
.sol2__hud>span{position:absolute;white-space:nowrap}
.sol2__rec{left:14px;top:12px;display:flex;align-items:center;gap:8px;color:#FF7A66}
.sol2__rec i{width:8px;height:8px;border-radius:50%;background:#FF4B36;box-shadow:none;animation:camRec 1.4s steps(2,jump-none) infinite}
@keyframes camRec{50%{opacity:.2}}
.sol2__camid{left:86px;top:12px}
.sol2__camid b{font-weight:500;color:#EEF5E2}
.sol2__time{right:14px;top:12px;font-variant-numeric:tabular-nums}
.sol2__meta{right:14px;bottom:12px;color:rgba(234,242,220,.45)}
@media (max-width:820px){
  .sol2__hud{font-size:9.5px;letter-spacing:.06em}
  .sol2__camid{left:70px}
  .sol2__time,.sol2__meta{display:none}
}
@media (prefers-reduced-motion:reduce){.sol2__fx::after,.sol2__rec i{animation:none}}

/* ---------- section stacking (layers.js): the next block slides over the previous one ---------- */
.layer{position:relative}
.layer--over{border-radius:28px 28px 0 0;overflow:hidden;box-shadow:0 -24px 60px -28px rgba(0,0,0,.45)}
.layer__shade{position:absolute;inset:0;z-index:60;background:#050505;opacity:0;pointer-events:none}
@media (max-width:820px){.layer--over{border-radius:20px 20px 0 0}}

/* ---------- "Pięć firm albo jedna": glass nodes over the lines (HTML on top of the SVG) ---------- */
.fs-stage{position:relative;container-type:size;margin:4px -6px 0;isolation:isolate}
.fs-stage--h{aspect-ratio:900/300}
.fs-stage--v{aspect-ratio:340/540;display:none}
@media (max-width:860px){.fs-stage--h{display:none}.fs-stage--v{display:block}}
.fs-stage>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fs-stage .fpipe__ln{vector-effect:non-scaling-stroke}

/* soft light that drifts under the glass; it turns warm while five firms argue */
.fs-aura{position:absolute;inset:-6%;z-index:-1;pointer-events:none;filter:blur(38px)}
.fs-aura i{position:absolute;border-radius:50%;transition:background 1.2s}
.fs-aura i:nth-child(1){left:22%;top:14%;width:34%;height:76%;background:rgba(var(--acc-rgb),.6);animation:fsAura1 16s ease-in-out infinite alternate}
.fs-aura i:nth-child(2){left:58%;top:0;width:36%;height:96%;background:rgba(var(--moss-rgb),.28);animation:fsAura2 21s ease-in-out infinite alternate}
.fs-aura i:nth-child(3){left:2%;top:30%;width:22%;height:52%;background:rgba(226,206,150,.4);animation:fsAura1 19s ease-in-out infinite alternate-reverse}
.fs:not(.is-one) .fs-aura i:nth-child(1){background:rgba(226,128,104,.38)}
.fs:not(.is-one) .fs-aura i:nth-child(2){background:rgba(180,71,43,.18)}
@keyframes fsAura1{to{transform:translate(18%,-10%) scale(1.15)}}
@keyframes fsAura2{to{transform:translate(-16%,8%) scale(.9)}}

.fsn{position:absolute;display:flex;align-items:center;gap:10px;padding:0 12px 0 7px;border-radius:12px;white-space:nowrap;
  font-size:13px;font-weight:500;letter-spacing:-.005em;color:var(--graphite);
  background:rgba(255,255,255,0.61);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(20,20,20,.04),0 12px 26px -14px rgba(20,20,20,.38),0 0 0 .5px rgba(20,20,20,.1);
  transition:opacity .5s,transform .8s var(--ease)}
.fsn__ic{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--graphite);
  background:var(--moss);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.fsn__ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fsn__ic--plain{color:var(--graphite);background:#f3f3f3;box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(20,20,20,.14)}
.fsn__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fsn__st{flex:none;width:7px;height:7px;border-radius:50%;background:var(--moss);box-shadow:0 0 0 3px rgba(var(--moss-rgb),.16);animation:fsSt 1.9s ease-in-out infinite}

/* the crew: dark glass with the logo and a green glow */
.fsn--hub{flex-direction:column;justify-content:center;gap:7px;padding:0;border-radius:18px;color:#efefef;
  background:rgba(27,29,24,0.95);border-color:rgba(var(--acc-rgb),.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 26px 50px -22px rgba(20,20,20,.7),0 0 0 6px rgba(var(--acc-rgb),.12)}
.fsn--hub img{width:auto;height:30%;max-width:none}
.fsn--hub span{font-size:12.5px;font-weight:500;color:rgba(239,239,239,.72)}
.fsn--hub::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--lichen);animation:fsHub 2.6s ease-out infinite}
@keyframes fsHub{from{transform:scale(1);opacity:.8}to{transform:scale(1.22,1.4);opacity:0}}
.fsn__hd{display:flex;gap:6px}
.fsn__hd i{width:4px;height:4px;border-radius:50%;background:#EAF2DC;animation:fsHd 1.2s ease-in-out infinite}
.fsn__hd i:nth-child(2){animation-delay:.4s}
.fsn__hd i:nth-child(3){animation-delay:.8s}

/* the five firms: warm glass */
.fsn--con{background:rgba(255,240,235,0.65);border-color:rgba(255,255,255,.9)}
.fsn--con .fsn__ic{background:#b55037;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.fsn--q{justify-content:center;padding:0 14px;border-radius:999px;font-family:var(--f-mono);font-size:11px;letter-spacing:.02em;color:#9b3a20;
  background:rgba(255,231,223,0.69);border-color:rgba(214,96,74,.35);animation:fsSt 2.2s ease-in-out infinite}

/* modes: five firms ↔ one crew */
.fsn--hub,.fsn--sys{opacity:0}
.fsn--sys{transform:translateX(-12px);transition-delay:calc(.5s + var(--i) * .08s)}
.fs.is-one .fsn--hub{opacity:1;transition-delay:.25s}
.fs.is-one .fsn--sys{opacity:1;transform:none}
.fsn--con{transition-delay:calc(var(--i) * .05s)}
.fs.is-one .fsn--con{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}
.fs.is-one .fsn--q{opacity:0;pointer-events:none;animation:none}

/* lines on the light glass */
.why3 .fs .fpipe__ln{stroke:rgba(var(--moss-rgb),.45);stroke-width:1.4}
.why3 .fs-dot{fill:var(--moss)}
.fs-stage--v .fsn{font-size:12px}
@media (prefers-reduced-motion:reduce){.fs-aura i,.fsn--hub::after,.fsn__hd i,.fsn__st,.fsn--q{animation:none}}

/* ---------- glass everywhere: signal rings under the schemes, glass rows in every panel ---------- */
.fs-aura{display:none}
.fs-rings{position:absolute;inset:0;z-index:-1;pointer-events:none;--rc:79,107,44;--ra:.14;
  background:repeating-radial-gradient(circle at var(--hx) var(--hy),transparent 0 44px,rgba(var(--rc),var(--ra)) 44px 45px);
  -webkit-mask-image:radial-gradient(circle at var(--hx) var(--hy),#000 0,#000 22%,transparent 62%);
  mask-image:radial-gradient(circle at var(--hx) var(--hy),#000 0,#000 22%,transparent 62%)}
.fs-rings i{position:absolute;left:var(--hx);top:var(--hy);width:80px;height:80px;border-radius:50%;translate:-50% -50%;
  border:1px solid rgba(var(--rc),.55);animation:fsRipple 3.4s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes fsRipple{from{width:80px;height:80px;opacity:.9}to{width:620px;height:620px;opacity:0}}
.fs:not(.is-one) .fs-rings{--rc:180,71,43;--ra:.1}
.fs:not(.is-one) .fs-rings i{animation:none;opacity:0}
#jak-pracujemy .fs-rings{--rc:181,208,138;--ra:.08}

/* faint rings behind every panel body, coming from the top-right corner */
.flow .fp__body{position:relative;background:repeating-radial-gradient(circle at 100% 0%,transparent 0 38px,rgba(var(--moss-rgb),.055) 38px 39px)}
#jak-pracujemy .fp__body{background:repeating-radial-gradient(circle at 100% 0%,transparent 0 38px,rgba(var(--acc-rgb),.04) 38px 39px)}
.flow .fs .fp__body,.flow [data-jobs] .fp__body{background:none}

/* only the scheme hides its crew until "1 firma" */
.fsn--hub,.fsn--sys{opacity:1}
.fs .fsn--hub,.fs .fsn--sys{opacity:0}
.fs.is-one .fsn--hub,.fs.is-one .fsn--sys{opacity:1}

/* ----- light glass rows (Dlaczego) ----- */
.why3 .fown,.why3 .ffit__row,.why3 .fstock li,.why3 .fticket li{
  border:1px solid rgba(255,255,255,.9);border-radius:12px;
  background:rgba(255,255,255,0.65);
  -webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5);
  box-shadow:inset 0 1px 0 #fff,0 10px 22px -14px rgba(20,20,20,.32),0 0 0 .5px rgba(20,20,20,.09)}
.why3 .fown{padding:12px;margin-bottom:4px}
.why3 .fown__av{border-radius:10px;background:var(--moss);border:0;color:var(--graphite);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.why3 .ftags span{border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,0.6);box-shadow:inset 0 1px 0 #fff,0 6px 14px -10px rgba(20,20,20,.3),0 0 0 .5px rgba(20,20,20,.08)}
.why3 .flow__cell.is-on .ftags span{border-color:rgba(255,255,255,.9);background:rgba(229,238,216,0.75);box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(var(--moss-rgb),.25)}
.why3 .ffit{display:flex;flex-direction:column;gap:8px}
.why3 .ffit__row{padding:10px 10px 10px 14px}
.why3 .ffit__row:last-of-type{border-bottom:1px solid rgba(255,255,255,.9)}
.why3 .ffit__sel{border-radius:8px}
.why3 .ffit__pop{right:28px;top:70px;border-radius:12px;background:rgba(255,255,255,0.85);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.95)}
.why3 .fstock{display:flex;flex-direction:column;gap:8px}
.why3 .fstock li{padding:10px 14px 10px 10px}
.why3 .fstock li:last-child{border-bottom:1px solid rgba(255,255,255,.9)}
.why3 .fstock__b{border-radius:8px;border:0;color:var(--graphite);background:var(--moss);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.why3 .fticket{display:flex;flex-direction:column;gap:8px}
.why3 .fticket::before{left:89px;top:26px;bottom:26px;z-index:2}
.why3 .fticket li{padding:10px 14px}
.why3 .fticket__ic{border-radius:9px;border:0;color:#fff;background:#3e4037;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.why3 .fticket__ic--warn{color:#fff;background:#c5953a}
.why3 .fticket__ic--ok{color:var(--graphite);background:var(--moss)}

/* ----- dark glass (Jak pracujemy) ----- */
#jak-pracujemy .fsn,#jak-pracujemy .fnotes li,#jak-pracujemy .fkit li,#jak-pracujemy .finbox li,#jak-pracujemy .fcall__top{
  color:#efefef;border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,0.057);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 30px -18px rgba(0,0,0,.9)}
#jak-pracujemy .fsn__ic{background:var(--lichen);color:#141414;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
#jak-pracujemy .fsn__ic--plain{background:rgba(255,255,255,0.14);color:#efefef;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
#jak-pracujemy .fsn--hub{flex-direction:column;gap:6px;border-color:rgba(var(--acc-rgb),.5);
  background:rgba(var(--acc-rgb),0.145);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 6px rgba(var(--acc-rgb),.07)}
#jak-pracujemy .fsn--hub span{font-size:14px;font-weight:600;color:#fff}
.fsn__k{font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.12em;color:var(--lichen)}
#jak-pracujemy .fpipe__job .fsn__st{background:rgba(239,239,239,.25);box-shadow:none;animation:none}
#jak-pracujemy .fpipe__job.is-done .fsn__st{background:var(--lichen);box-shadow:none}
#jak-pracujemy .fpipe__job.is-act{border-color:rgba(226,182,92,.55);background:rgba(226,182,92,0.11)}
#jak-pracujemy .fpipe__job.is-act .fsn__st{background:var(--amber);animation:fpPulse 1s ease-in-out infinite}
#jak-pracujemy .fcall__top{padding:12px;border-radius:12px;margin-bottom:6px}
#jak-pracujemy .fnotes{display:flex;flex-direction:column;gap:6px;padding-top:8px}
#jak-pracujemy .fnotes li{padding:8px 10px;border-radius:10px}
#jak-pracujemy .fnotes li:last-child{border-bottom:1px solid rgba(255,255,255,.11)}
#jak-pracujemy .fkit{display:flex;flex-direction:column;gap:6px}
#jak-pracujemy .fkit li{padding:9px 12px;border-radius:10px}
#jak-pracujemy .finbox{display:flex;flex-direction:column;gap:6px;margin:0}
#jak-pracujemy .finbox li{border-radius:12px}
#jak-pracujemy .finbox li:first-child{border-color:rgba(var(--acc-rgb),.35);background:rgba(var(--acc-rgb),0.085)}
#jak-pracujemy .finbox__ic{border-radius:10px;border:0;background:rgba(255,255,255,0.125);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
@media (max-width:860px){#jak-pracujemy .fs-stage--v .fsn{font-size:12px}}

/* ---------- big two-line cell titles, lead-in descriptions ---------- */
.flow__text{max-width:540px}
.flow__n{display:block;margin:0 0 18px;font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--lichen)}
.why3 .flow__n{color:var(--moss)}
.flow__t{display:block;margin:0 0 22px;font-size:clamp(34px,3.3vw,58px);font-weight:600;letter-spacing:-.048em;line-height:.98;color:var(--fl-tx)}
.flow__t .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.flow__t .ln>span{display:inline-block}
.flow__t .ln--mute{opacity:.4}
.flow__p{position:relative;padding-top:20px;font-size:16.5px;line-height:1.62;max-width:40ch;color:var(--fl-dim)}
.flow__p::before{content:"";position:absolute;left:0;top:0;width:44px;height:2px;border-radius:2px;background:var(--lichen)}
.why3 .flow__p::before{background:var(--moss)}
.flow__p b{font-weight:500;color:var(--fl-tx)}
.why3__grid .flow__cell--wide .flow__text{flex-basis:min(440px,34%)}
.flow__cta .flow__p{padding-top:0}
.flow__cta .flow__p::before{display:none}
@media (max-width:860px){.flow__t{font-size:clamp(32px,9vw,42px)}}

/* light panels fade out at the bottom like the dark ones */
.why3 .fp-frame{-webkit-mask-image:linear-gradient(#000 0 72%,transparent 100%);mask-image:linear-gradient(#000 0 72%,transparent 100%);box-shadow:none}
.fpipe__job .fsn__ic rect{fill:none;stroke:currentColor}
.flow__p{color:rgba(239,239,239,.5)}
.why3 .flow__p{color:rgba(20,20,20,.5)}
.flow__p b{font-weight:500;color:var(--fl-tx)}

/* ---------- CTA cell: an incoming-call card instead of plain rings ---------- */
.fring{position:relative;flex:1;min-height:320px;display:grid;place-items:center;margin-bottom:28px;color:#efefef;text-decoration:none;isolation:isolate}
.fring .fs-rings{--rc:181,208,138;--ra:.15;-webkit-mask-image:radial-gradient(circle at 50% 46%,#000 0,#000 24%,transparent 66%);mask-image:radial-gradient(circle at 50% 46%,#000 0,#000 24%,transparent 66%)}
.fring__card{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(300px,100%);padding:28px 22px 20px;border-radius:26px;
  background:rgba(255,255,255,0.068);border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 40px 80px -30px rgba(0,0,0,.95);transition:border-color .4s,box-shadow .4s}
.fring:hover .fring__card,.fring:focus-visible .fring__card{border-color:rgba(var(--acc-rgb),.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 40px 80px -30px rgba(0,0,0,.95)}
.fring:focus-visible{outline:none}
.fring__av{position:relative;width:80px;height:80px;border-radius:50%;display:grid;place-items:center;background:#1e221a;border:1px solid rgba(var(--acc-rgb),.55);
  box-shadow:0 0 0 6px rgba(var(--acc-rgb),.08)}
.fring__av::before,.fring__av::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--lichen);animation:fringPing 2.2s ease-out infinite}
.fring__av::after{animation-delay:1.1s}
@keyframes fringPing{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}
.fring__av img{width:46px;height:auto;max-width:none}
.fring__name{margin-top:8px;font-size:21px;font-weight:600;letter-spacing:-.02em}
.fring__st{display:flex;align-items:baseline;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lichen)}
.fring__st b{display:inline-flex;gap:3px;margin-left:5px}
.fring__st b i{width:3px;height:3px;border-radius:50%;background:currentColor;animation:fsHd 1.2s ease-in-out infinite}
.fring__st b i:nth-child(2){animation-delay:.4s}
.fring__st b i:nth-child(3){animation-delay:.8s}
.fring__wave{display:flex;align-items:center;gap:3px;width:100%;height:30px;margin:8px 0 8px}
.fring__wave i{flex:1;height:100%;border-radius:2px;background:var(--lichen);transform:scaleY(calc(var(--h) * .4));animation:fpWave 1s ease-in-out var(--d) infinite alternate}
.fring__btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:54px;border-radius:999px;background:var(--lichen);color:#141414;font-size:15px;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);transition:background .3s}
.fring:hover .fring__btn{background:var(--acc-hi)}
.fring__go{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#141414;color:var(--lichen);animation:fringShake 2.6s ease-in-out infinite}
.fring__go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes fringShake{0%,60%,100%{transform:rotate(0)}65%{transform:rotate(-14deg)}70%{transform:rotate(12deg)}75%{transform:rotate(-10deg)}80%{transform:rotate(7deg)}85%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.fring__av::before,.fring__av::after,.fring__go,.fring__wave i,.fring__st b i{animation:none}}

/* ---------- footer after the Nivara reference: info row, giant AVPGROUP rising with the scroll, bottom bar ---------- */
.foot2{position:relative;z-index:20;background:#171717;color:#efefef;padding:0;border-top:0;overflow:hidden}
.foot2__top{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));gap:40px;padding:clamp(64px,7vw,96px) clamp(16px,2.2vw,32px) 0}
.foot2__claim{margin:0 0 18px;max-width:17ch;font-size:clamp(26px,2.5vw,38px);line-height:1.12;letter-spacing:-.03em;font-weight:500;color:#efefef}
.foot2__col h4{margin:0 0 12px;font-family:var(--f-body);font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:rgba(239,239,239,.5)}
.foot2__col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot2__else{margin-top:44px}
.foot2__u{position:relative;display:inline-block;color:#efefef;text-decoration:none;font-size:14.5px;line-height:1.45}
.foot2__u::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;opacity:.55;transform-origin:right;transition:transform .45s var(--ease)}
.foot2__u:hover::after{transform:scaleX(0)}
.foot2__u:hover{color:var(--lichen)}
.foot2__word{display:flex;justify-content:space-between;margin:clamp(40px,5vw,64px) 0 0;padding:.12em 8px 0;overflow:hidden;white-space:nowrap;
  font-family:var(--f-display);font-weight:500;line-height:.76;letter-spacing:-.065em;color:#efefef;user-select:none}
.foot2__word span{display:block;will-change:transform}
.foot2__bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px clamp(16px,2.2vw,32px) 24px;font-size:12.5px;color:rgba(239,239,239,.62)}
.foot2__bottom .foot2__u{font-size:12.5px}
@media (max-width:900px){
  .foot2__top{grid-template-columns:1fr 1fr;gap:32px 24px}
  .foot2__lead{grid-column:1/-1}
  .foot2__else{margin-top:28px}
  .foot2__bottom{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ---------- CTA cell: a contact panel like the other cards (dark glass rows) ---------- */
.fcta__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fcta__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 10px 10px 10px;border-radius:12px;text-decoration:none;color:#efefef;
  border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,0.057);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 30px -18px rgba(0,0,0,.9);transition:border-color .35s,background .35s,transform .45s var(--ease)}
.fcta__row:hover,.fcta__row:focus-visible{border-color:rgba(var(--acc-rgb),.45);background:rgba(var(--acc-rgb),0.085);transform:translateX(4px);outline:none}
.fcta__row .fsn__ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--lichen);color:#141414;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.fcta__row .fsn__ic svg,.fcta__go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fcta__tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.fcta__tx b{font-size:13.5px;font-weight:600}
.fcta__tx span{font-family:var(--f-mono);font-size:12px;color:rgba(239,239,239,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcta__go{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:rgba(239,239,239,.8);border:1px solid rgba(255,255,255,.14);transition:background .3s,color .3s,border-color .3s}
.fcta__go svg{width:14px;height:14px}
.fcta__row:hover .fcta__go{background:var(--lichen);border-color:var(--lichen);color:#141414}
.fcta__row--main{border-color:rgba(var(--acc-rgb),.4);background:rgba(var(--acc-rgb),0.095)}
.fcta__row--main .fcta__tx span{font-size:15px;color:var(--lichen)}
.fcta__row--main .fcta__go{background:var(--lichen);border-color:var(--lichen);color:#141414}
.fcta__row--main .fsn__ic{position:relative}
.fcta__row--main .fsn__ic::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1.5px solid var(--lichen);animation:fringPing 2.2s ease-out infinite}
.fcta li{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s var(--ease)}
.fcta li:nth-child(2){transition-delay:.12s}.fcta li:nth-child(3){transition-delay:.24s}.fcta li:nth-child(4){transition-delay:.36s}
.flow__cell.is-on .fcta li{opacity:1;transform:none}
.flow__cell--cta{justify-content:flex-start}
@media (prefers-reduced-motion:reduce){.fcta li{opacity:1;transform:none;transition:none}.fcta__row--main .fsn__ic::after{animation:none}}
.fcta .fp__body{padding-bottom:44px}

/* ---------- Kontakt after the Nivara contact form: big masked headline, underline fields, rolling button ---------- */
.cform{--c-tx:#efefef;--c-dim:rgba(239,239,239,.55);--c-line:rgba(239,239,239,.22);--c-acc:var(--lichen);--c-bg:#141414;--c-btn:var(--lichen);--c-btn-tx:var(--graphite)}
.contact--light.cform{--c-tx:var(--graphite);--c-dim:rgba(20,20,20,.55);--c-line:rgba(20,20,20,.2);--c-acc:var(--moss);--c-bg:var(--fog);--c-btn:var(--graphite);--c-btn-tx:#f3f3f3}
.cform .contact__glow{display:none}
.cform__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,120px);align-items:start}
.cform__h{margin:0 0 28px;font-size:clamp(40px,4.6vw,76px);font-weight:600;letter-spacing:-.045em;line-height:.98;color:var(--c-tx)}
.cform__h .ln,.cform__lead .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.cform__h .ln>span,.cform__lead .ln>span{display:inline-block}
.cform__lead{margin:0 0 44px;max-width:30ch;font-size:clamp(18px,1.45vw,22px);line-height:1.42;color:var(--c-dim)}
.cform__dl{margin:0;display:grid;gap:18px}
.cform__dl dt{margin:0 0 4px;font-size:14px;color:var(--c-dim)}
.cform__dl dd{margin:0}
.cform .foot2__u{color:var(--c-tx);font-size:16px}
.cform .foot2__u:hover{color:var(--c-acc)}
.cform__form{display:grid;grid-template-columns:1fr 1fr;gap:36px 32px;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.cform__form::before{display:none}
.f2{display:block;min-width:0;margin:0;padding:0;border:0}
.f2--full{grid-column:1/-1}
.f2__l{display:block;padding:0;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--c-dim)}
.f2__w{position:relative;display:block}
.f2__i{display:block;width:100%;margin-top:8px;padding:8px 0 10px;border:0;border-bottom:1px solid var(--c-line);border-radius:0;background:transparent;color:var(--c-tx);font:inherit;font-size:18px;outline:none;resize:vertical;transition:border-color .3s}
.f2__i::placeholder{color:var(--c-dim);opacity:.7}
textarea.f2__i{min-height:120px;font-size:16px;line-height:1.5}
.f2__i:-webkit-autofill{-webkit-text-fill-color:var(--c-tx);transition:background-color 9999s}
.f2__line{position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--c-tx);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1);pointer-events:none}
.f2__i:focus+.f2__line{transform:scaleX(1)}
.f2__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.f2__chips label{position:relative;cursor:pointer}
.f2__chips input{position:absolute;opacity:0;pointer-events:none}
.f2__chips span{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--c-line);background:transparent;font-size:14.5px;color:var(--c-tx);transition:background .3s,border-color .3s,color .3s}
.f2__chips label:hover span{border-color:var(--c-tx)}
.f2__chips input:checked+span{background:var(--c-tx);border-color:var(--c-tx);color:var(--c-bg)}
.f2__chips input:focus-visible+span{outline:2px solid var(--c-acc);outline-offset:2px}
.cform .consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--c-dim)}
.cform .consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--c-acc)}
.cform .consent a{color:var(--c-tx)}
.cform .form__foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cbtn{position:relative;display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 26px;border:0;border-radius:8px;background:var(--c-btn);color:var(--c-btn-tx);font:inherit;font-size:17px;font-weight:500;cursor:pointer;overflow:hidden}
.cbtn__roll{display:block;height:1.3em;line-height:1.3em;overflow:hidden}
.cbtn__roll span{display:block;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.cbtn:hover .cbtn__roll span,.cbtn:focus-visible .cbtn__roll span{transform:translateY(-100%)}
.cbtn svg{width:16px;height:16px;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.cbtn:hover svg,.cbtn:focus-visible svg{transform:translateX(4px)}
.cbtn:focus-visible{outline:2px solid var(--c-acc);outline-offset:3px}
.cbtn:disabled{opacity:.6;cursor:wait}
@media (max-width:900px){
  .cform__grid{grid-template-columns:1fr}
  .cform__form{grid-template-columns:1fr;gap:28px}
}
.cform .cform__form{background:none;box-shadow:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- Rozwiązania cards: glass over the camera feed ---------- */
.sol2__card{padding:7px;background:rgba(255,255,255,0.063);border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 60px -30px rgba(0,0,0,.85);transition:border-color .4s,box-shadow .4s,background .4s}
.sol2__card:hover{border-color:rgba(var(--acc-rgb),.5);background:rgba(var(--acc-rgb),0.085);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 30px 60px -30px rgba(0,0,0,.85)}
.sol2__img::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none}
.sol2__body{padding:18px 12px 12px}
.sol2__card .link-arrow{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:8px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);font-size:14px;transition:background .3s,border-color .3s,color .3s}
.sol2__card:hover .link-arrow{background:var(--lichen);border-color:var(--lichen);color:var(--graphite)}

/* ---------- one corner radius for the whole project: 8px, like the buttons ---------- */
:root{--r-s:8px;--r-m:8px;--r-l:8px}
.sol2__card,.sol2__btn,.fp-frame,.fsn,.fsn--hub,.fcall__top,.fcta__row,.fcta__go,.ffit__pop,.ffit__row,.fstock li,.fticket li,.fown,.finbox li,.fnotes li,.fkit li,
.f2__chips span,.hv__card,.hv__panel,.scard,.sol,.proj,.next,.box,.cta-band,.page-hero__img,.bud2__card,.bud2__count,.xsec__fig,.header__bar,.dock,.ftags span,.ffit__sel,.fown__av,.fown__call,.fstock__b,.ftabs{border-radius:8px}
.fp{border-radius:5px}
.sol2__img,.hv__card-img,.scard__img,.sol__img,.proj__img{border-radius:5px}
.fsn__ic,.fticket__ic,.finbox__ic,.fcta__row .fsn__ic,.fcall__av{border-radius:6px}
.ftabs b,.fchip{border-radius:5px}
.xsec__fig{border-radius:8px 0 0 8px}

/* ---------- AVPBUD page (bud-page.mjs) ---------- */
.bud2--page{margin-top:0}
.bud2__crumbs{margin:0 0 14px;font-size:13px}
.bud2--page .bud2__card h1{font-size:clamp(30px,3.1vw,46px);margin:0 0 14px}

.bp{position:relative;padding:clamp(88px,11vw,150px) 0}
.bp--dark{background:#0b0b0b;color:#efefef;--bp-tx:#efefef;--bp-dim:rgba(239,239,239,.55);--bp-line:rgba(255,255,255,.11);--bp-acc:var(--lichen)}
.bp--light{background:var(--fog);color:var(--graphite);--bp-tx:var(--graphite);--bp-dim:rgba(20,20,20,.58);--bp-line:rgba(20,20,20,.12);--bp-acc:var(--moss)}
.bp--dark::before{content:"";position:absolute;inset:0;pointer-events:none;background:none}
.bp__head{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:24px 64px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,72px)}
.bp__h{margin:0;font-size:clamp(40px,4.9vw,80px);font-weight:600;letter-spacing:-.048em;line-height:.98;color:var(--bp-tx,inherit)}
.bp__h .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.bp__h .ln>span{display:inline-block}
.bp__h .ln--mute{opacity:.4}
.bp__lead{margin:0;max-width:36ch;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--bp-dim,inherit)}
.bp-faq .bp__lead{margin-top:20px;color:rgba(243,243,243,.6)}
.bp-faq .bp__h{color:var(--paper)}

/* service / reason cards */
.bp-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bp-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bp-card{display:flex;flex-direction:column;gap:12px;min-height:250px;padding:22px;border-radius:8px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,.11);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 50px -30px rgba(0,0,0,.9);transition:border-color .4s,background .4s,transform .6s var(--ease)}
.bp-card:hover{border-color:rgba(var(--acc-rgb),.45);background:rgba(var(--acc-rgb),0.07);transform:translateY(-4px)}
.bp-card__top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:auto}
.bp-card__n{font-family:var(--f-mono);font-size:12px;color:rgba(239,239,239,.36)}
.bp-card h3{margin:28px 0 0;font-size:21px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.bp-card p{margin:0;font-size:15px;line-height:1.55;color:var(--bp-dim)}
.bp-ic{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;background:var(--lichen);color:#141414;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.bp-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bp-card--light{min-height:240px;background:rgba(255,255,255,0.65);border-color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,0 18px 40px -26px rgba(20,20,20,.4),0 0 0 .5px rgba(20,20,20,.08)}
.bp-card--light:hover{border-color:rgba(255,255,255,.9);background:rgba(247,250,242,0.825)}
.bp-card--light .bp-ic{background:var(--moss);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.bp-card--light h3{margin-top:auto;padding-top:24px}
.bp-others{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 28px;margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid var(--bp-line)}
.bp-others>span{font-size:14px;color:var(--bp-dim)}
.bp-others>div{display:flex;flex-wrap:wrap;gap:10px 22px}
.bp--light .foot2__u{color:var(--graphite)}
.bp--light .foot2__u:hover{color:var(--moss)}

/* steps with a line that fills on scroll */
.bp-steps{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,120px);align-items:start}
.bp-steps__head{position:sticky;top:calc(var(--header-h) + 40px);display:flex;flex-direction:column;gap:22px}
.bp-steps__ctas{margin-top:8px}
.bp-steps__list{position:relative;list-style:none;margin:0;padding:0 0 0 64px;display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.bp-steps__line{position:absolute;left:21px;top:22px;bottom:22px;width:2px;border-radius:2px;background:rgba(255,255,255,.1)}
.bp-steps__line i{position:absolute;inset:0;border-radius:inherit;background:var(--lichen);transform:scaleY(0);transform-origin:top;box-shadow:none}
.bp-step{position:relative;display:flex;gap:20px}
.bp-step__n{position:absolute;left:-64px;top:0;width:44px;height:44px;border-radius:8px;display:grid;place-items:center;font-family:var(--f-mono);font-size:13px;
  color:rgba(239,239,239,.5);background:#141414;border:1px solid rgba(255,255,255,.14);transition:background .4s,color .4s,border-color .4s,box-shadow .4s}
.bp-step.is-on .bp-step__n{background:var(--lichen);border-color:var(--lichen);color:#141414;box-shadow:none}
.bp-step h3{margin:6px 0 8px;font-size:clamp(22px,2vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:rgba(239,239,239,.45);transition:color .4s}
.bp-step.is-on h3{color:#efefef}
.bp-step p{margin:0;max-width:44ch;font-size:16px;line-height:1.55;color:rgba(239,239,239,.5)}

@media (max-width:980px){
  .bp-grid,.bp-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bp-steps{grid-template-columns:1fr}
  .bp-steps__head{position:static}
}
@media (max-width:620px){
  .bp-grid,.bp-grid--4{grid-template-columns:1fr}
  .bp-card{min-height:0}
  .bp-card h3{margin-top:18px}
}
.bp--dark .btn{--bg:var(--lichen);--fg:var(--graphite)}
.bp--dark .btn .ic{background:var(--graphite);color:var(--lichen)}

/* ---------- premium glass: hairline gradient edge, fine grain, barely-there shadows (replaces the heavy drop shadows) ---------- */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  --g-dark-fill:linear-gradient(180deg,rgba(30,30,30,.62),rgba(14,14,14,.62));
  --g-dark-edge:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.05) 38%,rgba(255,255,255,.02) 70%,rgba(255,255,255,.09));
  --g-dark-edge-on:linear-gradient(180deg,rgba(199,221,159,.75),rgba(var(--acc-rgb),.14) 45%,rgba(var(--acc-rgb),.06) 75%,rgba(var(--acc-rgb),.3));
  --g-light-fill:linear-gradient(180deg,rgba(255,255,255,.78),rgba(249,249,249,.5));
  --g-light-edge:linear-gradient(180deg,#fff,rgba(255,255,255,.55) 40%,rgba(20,20,20,.06) 80%,rgba(20,20,20,.12));
  --g-light-edge-on:linear-gradient(180deg,#fff,rgba(var(--acc-rgb),.6) 50%,rgba(var(--moss-rgb),.35));
}
/* dark glass */
.bp-card:not(.bp-card--light),.sol2__card,.fcta__row,
#jak-pracujemy .fsn:not(.fsn--hub),#jak-pracujemy .fnotes li,#jak-pracujemy .fkit li,#jak-pracujemy .finbox li,#jak-pracujemy .fcall__top{
  border:1px solid transparent;
  background:var(--grain) padding-box,var(--g-dark-fill) padding-box,var(--g-dark-edge) border-box;
  -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.35),0 10px 30px -18px rgba(0,0,0,.55)}
.bp-card:not(.bp-card--light):hover,.sol2__card:hover,.fcta__row:hover,.fcta__row:focus-visible{
  background:var(--grain) padding-box,linear-gradient(rgba(27,29,25,0.66),rgba(27,29,25,0.66)) padding-box,var(--g-dark-edge-on) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 2px rgba(0,0,0,.35),0 14px 40px -20px rgba(0,0,0,.6),0 0 0 4px rgba(var(--acc-rgb),.05);transform:none}
.fcta__row--main,#jak-pracujemy .finbox li:first-child{
  background:var(--grain) padding-box,linear-gradient(rgba(var(--acc-rgb),0.08),rgba(var(--acc-rgb),0.08)) padding-box,var(--g-dark-edge-on) border-box}
#jak-pracujemy .fpipe__job.is-act{
  background:var(--grain) padding-box,linear-gradient(rgba(226,182,92,0.09),rgba(226,182,92,0.09)) padding-box,linear-gradient(rgba(231,188,101,0.373),rgba(231,188,101,0.373)) border-box}

/* light glass */
.bp-card--light,.why3 .fsn:not(.fsn--hub),.why3 .fown,.why3 .ffit__row,.why3 .fstock li,.why3 .fticket li,.why3 .ftags span{
  border:1px solid transparent;
  background:var(--grain) padding-box,var(--g-light-fill) padding-box,var(--g-light-edge) border-box;
  -webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);
  box-shadow:0 1px 1px rgba(20,20,20,.04),0 4px 10px -6px rgba(20,20,20,.08),0 18px 36px -26px rgba(20,20,20,.22)}
.bp-card--light:hover{background:var(--grain) padding-box,linear-gradient(rgba(250,252,246,0.76),rgba(250,252,246,0.76)) padding-box,var(--g-light-edge-on) border-box;transform:none}
.why3 .flow__cell.is-on .ftags span{background:var(--grain) padding-box,linear-gradient(rgba(233,241,220,0.775),rgba(233,241,220,0.775)) padding-box,var(--g-light-edge-on) border-box}
.fsn--con{background:var(--grain) padding-box,linear-gradient(rgba(255,242,237,0.68),rgba(255,242,237,0.68)) padding-box,linear-gradient(rgba(228,149,134,0.517),rgba(228,149,134,0.517)) border-box !important}

/* icon tiles: crisp, no glow blobs */
.bp-ic,.fsn__ic,.fcta__row .fsn__ic,.fstock__b,.why3 .fown__av,.why3 .fticket__ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.18)}
.fsn__ic--plain{box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(20,20,20,.14),0 1px 2px rgba(20,20,20,.08)}
#jak-pracujemy .fsn__ic--plain{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.3)}

/* panel frames: a hairline, no heavy shadow */
.fp-frame{box-shadow:none}
.why3 .fp-frame{background:rgba(255,255,255,.35)}

/* home: AVPBUD sections stack like the rest; sticky heads need overflow:clip instead of hidden */
.bud3{background:var(--fog)}
.layer--over{overflow:clip}

/* ---------- Zakres: stacked sticky service cards (after oxnod "our projects") ---------- */
.zk-side{display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:36ch}
.zk-stack{position:relative;display:flex;flex-direction:column;gap:20px;padding-bottom:20px}
.zk-card{position:sticky;top:calc(var(--header-h) + 16px + var(--i) * 20px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px;
  height:min(520px,calc(100vh - var(--header-h) - 150px));transform-origin:50% 0;will-change:transform}
.zk-card__info{display:flex;flex-direction:column;gap:18px;min-width:0;padding:clamp(22px,2.4vw,34px);border-radius:8px;color:#efefef;
  border:1px solid transparent;background:var(--grain) padding-box,linear-gradient(#171717,#171717) padding-box,var(--g-dark-edge) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 -12px 40px -20px rgba(0,0,0,.8)}
.zk-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.zk-card__title{display:flex;align-items:center;gap:14px;min-width:0}
.zk-card__title h3{margin:0;font-size:clamp(22px,1.9vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.08}
.zk-card__n{flex:none;font-family:var(--f-mono);font-size:12.5px;color:rgba(239,239,239,.45);padding-top:6px}
.zk-card__text{margin:0;max-width:44ch;font-size:16.5px;line-height:1.6;color:rgba(239,239,239,.62)}
.zk-card__meta{display:grid;gap:14px;margin:auto 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.zk-card__meta dt{font-size:13.5px;color:rgba(239,239,239,.5);margin-bottom:3px}
.zk-card__meta dd{margin:0;font-size:17px;color:#efefef}
.zk-card__btn{display:inline-flex;align-self:flex-start;align-items:center;gap:12px;height:46px;padding:0 18px;border-radius:8px;text-decoration:none;font-size:15px;font-weight:500;
  color:#141414;background:var(--lichen);transition:background .3s}
.zk-card__btn:hover{background:var(--acc-hi)}
.zk-card__btn:hover .cbtn__roll span{transform:translateY(-100%)}
.zk-card__btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.zk-card__btn:hover svg{transform:translateX(4px)}
.zk-card__art{position:relative;overflow:hidden;border-radius:8px;background:#121212;border:1px solid rgba(255,255,255,.08)}
.zk-card__art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.zk-line{fill:none;stroke:var(--lichen);stroke-width:3;stroke-dasharray:10 9;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(var(--acc-rgb),.6))}
.zk-tag rect{fill:rgba(20,20,20,.75);stroke:rgba(var(--acc-rgb),.45)}
.zk-tag text{font-family:var(--f-mono);font-size:12px;fill:var(--lichen)}
.zk-p rect{fill:#1d3b8a}
.zk-p text{font-family:var(--f-display);font-weight:700;font-size:42px;fill:#fff}
.zk-dot{fill:var(--lichen);filter:drop-shadow(0 0 8px rgba(var(--acc-rgb),.9))}
@media (max-width:860px){
  .zk-card{grid-template-columns:1fr;grid-template-rows:180px auto;height:auto;top:calc(var(--header-h) + 8px + var(--i) * 12px)}
  .zk-card__art{grid-row:1}
  .zk-card__info{gap:14px}
}
.zk-card{background:#0b0b0b;border-radius:8px}

/* ---------- Zakres cards: illustration under the whole card, liquid-glass panel on top ---------- */
.zk-card{display:block;overflow:hidden;border-radius:8px;background:#0b0b0b;border:1px solid rgba(255,255,255,.08)}
.zk-card__art{position:absolute;inset:0;border:0;border-radius:0;z-index:0}
.zk-card__art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,11,11,.35),transparent 55%),linear-gradient(transparent 60%,rgba(11,11,11,.55))}
.zk-card__info{position:relative;z-index:1;margin:14px;width:min(580px,54%);height:calc(100% - 28px);overflow:hidden;
  border:1px solid rgba(255,255,255,.2);border-radius:8px;
  background:rgba(255,255,255,0.075);
  -webkit-backdrop-filter:blur(22px) saturate(1.9) brightness(1.12);backdrop-filter:blur(22px) saturate(1.9) brightness(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 1px 0 0 rgba(255,255,255,.16),
    inset -1px 0 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(255,255,255,.1),
    inset 0 24px 48px -30px rgba(255,255,255,.28),
    0 30px 60px -28px rgba(0,0,0,.75)}
/* the glass edge catches light: a thin bright arc along the top-left */
.zk-card__info::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.zk-card__info>*{position:relative}
.zk-card__text,.zk-card__meta dd{text-shadow:0 1px 12px rgba(0,0,0,.35)}
.zk-card__meta{border-top-color:rgba(255,255,255,.14)}
@media (max-width:860px){
  .zk-card{display:block;height:auto}
  .zk-card__info{width:auto;height:auto;margin:150px 10px 10px}
}

/* ================= oxnod palette & type: neutral greys, white cards, Urbanist + Geist Mono.
   Accent stays our green; AVPBUD (.bud2 / .bud3 / .bp) swaps it for oxnod vermilion. ================= */
:root{
  --fog:#f2f2f2;--fog-2:#ececec;--paper:#ffffff;
  --graphite:#121212;--graphite-2:#161616;
  --ink-soft:#717171;--line:#ececec;
  --acc-rgb:181,208,138;--moss-rgb:79,107,44;
  --acc-hi:#c7dd9f;--acc-lo:#6f8c40;--moss-hi:#7d9b4b;--moss-lo:#3f5722;
  --vermilion:#f84022;
  --f-display:"Urbanist",system-ui,sans-serif;
  --f-body:"Urbanist",system-ui,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,monospace;
}
.bud2,.bud3,.bp{
  --lichen:#f84022;--moss:#f84022;
  --acc-rgb:248,64,34;--moss-rgb:248,64,34;
  --acc-hi:#ff7d5e;--acc-lo:#e0381c;--moss-hi:#ff6446;--moss-lo:#d6331a;
}
/* text sitting on the vermilion reads white, like oxnod buttons */
.bud2 .btn .ic,.bud3 .btn .ic,.bp .btn .ic,
.bp-step.is-on .bp-step__n,.bp .bp-ic{color:#fff}
body{font-weight:400;letter-spacing:-.01em}
.h-xl,.h-l,.h-m,.hv__title,.flow__t,.bp__h{font-weight:500;letter-spacing:-.04em}
.h-s{font-weight:500;letter-spacing:-.02em}
.statement{font-weight:500;letter-spacing:-.035em}
.bp--dark .btn{--fg:#fff}
.bp--dark .btn .ic{background:#121212;color:#fff}
.bud2 .zk-card__btn,.bp .zk-card__btn{color:#fff}

/* ================= "Po montażu nie znikamy": oxnod-style bento before FAQ =================
   Desktop: a 300vh section with a sticky stage; two dark photo panels part to the sides (bento.js). */
.bento{position:relative;background:var(--fog);color:var(--graphite);height:300vh}
.bento__stick{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;padding:clamp(48px,7vh,88px) 0;overflow:hidden}
.bento__in{position:relative;z-index:1;width:100%}
.bento__curtain{position:absolute;inset:0;z-index:3;display:flex;pointer-events:none}
.bento__half{position:relative;width:50%;height:100%;overflow:hidden;background:#0d0d0d;will-change:transform}
.bento__shot{position:absolute;inset:0;margin:0;opacity:0}
.bento__shot:first-child{opacity:1}
.bento__shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.05) brightness(.82);transform:scale(1.12)}
.bento__shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.45)),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.bento__shot figcaption{position:absolute;left:clamp(16px,2.4vw,32px);bottom:clamp(16px,3vh,32px);z-index:1;display:flex;align-items:center;gap:10px;font:500 12px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.bento__half--r .bento__shot figcaption{left:auto;right:clamp(16px,2.4vw,32px)}
.bento__rec{width:7px;height:7px;border-radius:50%;background:var(--lichen);box-shadow:none;animation:bentoRec 1.6s steps(2,jump-none) infinite}
@keyframes bentoRec{50%{opacity:.25}}

.bento__head{text-align:center;margin:0 auto clamp(32px,6vh,72px);max-width:760px}
.bento__label{margin:0 0 18px;font-size:15px;font-weight:500;color:var(--moss)}
.bento__h{margin:0;font-family:var(--f-display);font-weight:500;font-size:clamp(40px,4.6vw,68px);line-height:1;letter-spacing:-.04em}
.bento__h .ln{display:block;overflow:hidden;padding-bottom:.08em}
.bento__h .ln>span{display:inline-block}
.bento__h .ln--mute{opacity:.4}

.bento__grid{--row:clamp(330px,44vh,430px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:var(--row) auto;gap:8px}
.bento-c{position:relative;overflow:hidden;background:#fff;border:1px solid #ececec;border-radius:8px;padding:20px}
.bento-c--chat{grid-column:span 2}
.bento-c--glow{grid-column:span 2}
.bento-col{grid-column:span 2;display:flex;flex-direction:column;gap:8px;min-height:0}
.bento-c--text{grid-column:span 2}
.bento-c--trust{grid-column:span 4}
.bento-c__t{margin:0 0 8px;font-size:20px;line-height:26px;font-weight:500;letter-spacing:-.02em;color:var(--graphite)}
.bento-c__p{margin:0;font-size:16px;line-height:24px;color:#717171;font-weight:400}
.bento-c__cap{margin:0;font-size:16px;line-height:22px;font-weight:500;letter-spacing:-.01em;color:var(--graphite)}

/* 1 — chat in a phone */
.bento-c--chat{padding:0;background:#fff}
.bento-c--chat::before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 78%,rgba(18,18,18,.05) 0 1px,transparent 1px 46px);-webkit-mask:linear-gradient(180deg,transparent,#000 40%);mask:linear-gradient(180deg,transparent,#000 40%)}
.bento-c--chat .bento-c__cap{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:8px;padding:20px 20px 0}
.bento-live{width:6px;height:6px;border-radius:50%;background:var(--lichen);box-shadow:0 0 0 0 rgba(var(--acc-rgb),.5);animation:bentoLive 2s infinite}
@keyframes bentoLive{70%{box-shadow:0 0 0 7px rgba(var(--acc-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),0)}}
.bento-phone{position:absolute;left:50%;top:64px;width:min(300px,76%);height:calc(100% + 60px);transform:translateX(-50%);border-radius:44px;background:#f6f6f5;border:9px solid #121212;box-shadow:0 0 0 1px #2a2a2a,0 30px 60px -20px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden}
.bento-phone__bar{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 6px;font-size:13px}
.bento-phone__notch{width:84px;height:24px;border-radius:14px;background:#121212}
.bento-phone__sig{display:flex;align-items:flex-end;gap:2px;height:10px}
.bento-phone__sig i{width:3px;background:#121212;border-radius:1px}
.bento-phone__sig i:nth-child(1){height:4px}.bento-phone__sig i:nth-child(2){height:6px}.bento-phone__sig i:nth-child(3){height:8px}.bento-phone__sig i:nth-child(4){height:10px}
.bento-phone__head{display:flex;align-items:center;gap:10px;padding:8px 14px 10px;border-bottom:1px solid #ececec}
.bento-phone__ava{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#121212;color:#fff;font-size:10px;font-weight:600;letter-spacing:.02em}
.bento-phone__head b{display:block;font-size:13px;font-weight:600;line-height:16px}
.bento-phone__head small{font-size:11px;color:#5f7a3a}
.bento-phone__msgs{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding:12px 12px 80px}
.bm{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1)}
.bm>div{overflow:hidden;min-height:0}
.bm p{margin:0 0 8px;max-width:82%;padding:8px 11px 6px;border-radius:12px;font-size:12.5px;line-height:17px;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.bm.on{grid-template-rows:1fr}
.bm.on p{opacity:1;transform:none}
.bm--in p{margin-left:auto;background:var(--moss);color:var(--graphite);border-bottom-right-radius:4px;transform-origin:100% 100%}
.bm--out p{background:#fff;color:var(--graphite);border:1px solid #ececec;border-bottom-left-radius:4px;transform-origin:0 100%}
.bm time{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:3px;font-size:9.5px;opacity:.65}
.bm time svg{width:14px;height:8px;fill:none;stroke:currentColor;stroke-width:1.5}
.bm--typing p{display:inline-flex;gap:4px;padding:10px 12px}
.bm--typing i{width:6px;height:6px;border-radius:50%;background:#a5a5a5;animation:bentoType 1s infinite}
.bm--typing i:nth-child(2){animation-delay:.15s}.bm--typing i:nth-child(3){animation-delay:.3s}
@keyframes bentoType{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}

/* 2 — highlighted card: inner white panel on a green glow, line-drawn camera */
.bento-c--glow{padding:16px;border-color:rgba(var(--moss-rgb),.25);background:var(--moss)}
.bento-c__inner{position:relative;height:100%;padding:20px;border-radius:8px;background:#fff;border:1px solid #ececec;overflow:hidden;box-shadow:none}
.bento-c__inner .bento-c__p{max-width:340px;position:relative;z-index:1}
.bento-lines{position:absolute;left:0;right:0;bottom:0;width:100%;height:76%}

/* 3 — roles ticker */
.bento-c--roles{padding:20px 0 0 20px;flex:none}
.bento-c__row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-right:20px;margin-bottom:16px}
.bento-dots{display:flex;gap:4px}
.bento-dots i{width:6px;height:6px;border-radius:50%;background:var(--moss);opacity:.2;animation:bentoDot 1.8s infinite}
.bento-dots i:nth-child(2){animation-delay:.15s}.bento-dots i:nth-child(3){animation-delay:.3s}.bento-dots i:nth-child(4){animation-delay:.45s}.bento-dots i:nth-child(5){animation-delay:.6s}.bento-dots i:nth-child(6){animation-delay:.75s}
@keyframes bentoDot{0%,100%{opacity:.18}40%{opacity:1}}
.bento-tick{position:relative;overflow:hidden;border-top:1px solid #ececec;height:60px;display:flex;align-items:center;-webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.bento-tick__track{display:flex;gap:8px;width:max-content;animation:bentoMarq 22s linear infinite}
.bento-role{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 4px;border-radius:8px;background:#f6f6f5;border:1px solid #ececec;font-size:14px;font-weight:500;white-space:nowrap}
.bento-role__ic{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;background:#fff;border:1px solid #ececec;color:var(--moss)}
.bento-role__ic svg,.bento-tiles svg,.bento-sys svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@keyframes bentoMarq{to{transform:translateX(-50%)}}

/* 4 — service with glass infinity */
.bento-c--inf{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;padding:12px 12px 20px 20px}
.bento-c__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.bento-tiles{display:flex;margin-top:8px}
.bento-tiles span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#f6f6f5;border:2px solid #fff;box-shadow:0 0 0 1px #ececec;color:var(--graphite)}
.bento-tiles span+span{margin-left:-10px;background:var(--moss);color:var(--graphite);box-shadow:0 0 0 1px var(--moss)}
.bento-inf{width:min(210px,62%);height:auto;overflow:visible;animation:bentoFloat 6s ease-in-out infinite}
@keyframes bentoFloat{50%{transform:translateY(-6px) rotate(-2deg)}}

/* 5/6 — bottom row */
.bento-c--text{display:flex;flex-direction:column;justify-content:center}
.bento-c--trust{display:flex;align-items:center;gap:24px;padding:20px 0 20px 32px}
.bento-trust{display:flex;align-items:center;gap:16px;flex:none;padding-right:24px;border-right:1px solid #ececec}
.bento-sys{display:flex}
.bento-sys span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#f6f6f5;border:2px solid #fff;box-shadow:0 0 0 1px #ececec;color:var(--graphite);margin-left:-12px}
.bento-sys span:first-child{margin-left:0}
.bento-sys span:nth-child(odd){background:#fff}
.bento-sys span:last-child{background:var(--moss);color:var(--graphite);box-shadow:0 0 0 1px var(--moss)}
.bento-trust__t{margin:0;font-size:18px;line-height:24px;font-weight:500;letter-spacing:-.02em}
.bento-trust__p{margin:2px 0 0;font-size:14px;color:#717171}
.bento-logos{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.bento-logos__track{display:flex;align-items:center;gap:36px;width:max-content;animation:bentoMarq 26s linear infinite}
.bento-brand{font-size:22px;font-weight:700;letter-spacing:-.03em;color:#a8a8a8;white-space:nowrap}
.bento-brand:nth-of-type(2n){font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:18px}
.bento-brand__sep{width:6px;height:6px;border-radius:50%;background:#d6d6d6;flex:none}

/* tablet / phone: plain flow, no curtain */
@media (max-width:1080px){
  .bento__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .bento-c--chat,.bento-c--glow{grid-column:span 1;height:420px}
  .bento-col{grid-column:span 2;flex-direction:row}
  .bento-col>*{flex:1}
  .bento-c--inf{min-height:220px}
  .bento-c--text,.bento-c--trust{grid-column:span 2}
}
@media (max-width:860px){
  .bento{height:auto}
  .bento__stick{position:relative;min-height:0;padding:72px 0}
  .bento__curtain{display:none}
  .bento__grid{grid-template-columns:minmax(0,1fr)}
  .bento-c--chat,.bento-c--glow,.bento-col,.bento-c--text,.bento-c--trust{grid-column:auto}
  .bento-col{flex-direction:column}
  .bento-c--chat,.bento-c--glow{height:400px}
  .bento-c--trust{flex-direction:column;align-items:stretch;padding:20px}
  .bento-trust{border-right:0;padding-right:0;padding-bottom:16px;border-bottom:1px solid #ececec}
  .bento-sys span{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){
  .bento{height:auto}
  .bento__curtain{display:none}
  .bento-tick__track,.bento-logos__track,.bento-inf{animation:none}
}
@media (max-width:1080px) and (min-width:861px){.bento-c--roles{display:flex;flex-direction:column}.bento-c--roles .bento-tick{margin-top:auto}}

/* ===== flat finish: no gradient fills, no coloured glows (glass tokens become single colours) ===== */
:root{
  --g-dark-fill:linear-gradient(rgba(22,22,22,.62),rgba(22,22,22,.62));
  --g-dark-edge:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1));
  --g-dark-edge-on:linear-gradient(rgba(var(--acc-rgb),.45),rgba(var(--acc-rgb),.45));
  --g-light-fill:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72));
  --g-light-edge:linear-gradient(#e6e6e6,#e6e6e6);
  --g-light-edge-on:linear-gradient(rgba(var(--moss-rgb),.45),rgba(var(--moss-rgb),.45));
}
/* Zakres cards: generated tech drawings (assets/img/zk-N) fill the card, subject on the right */
.zk-card__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.zk-line,.zk-dot{filter:none}
@media (max-width:860px){.zk-card__art img{object-position:72% center}}
/* glass needs something behind it: the drawing runs under the panel, the panel blurs it lightly */
.zk-card__art img{left:auto;right:0;width:135%}
.zk-card__info{background:rgba(255,255,255,.045);-webkit-backdrop-filter:blur(9px) saturate(1.5) brightness(1.08);backdrop-filter:blur(9px) saturate(1.5) brightness(1.08);border-color:rgba(255,255,255,.22)}
@media (max-width:860px){.zk-card__art img{width:100%;left:0}}
@media (min-width:861px){.zk-card__art img{width:155%}.zk-card__art::after{background:none}}
.zk-card__info{background:rgba(255,255,255,.035);-webkit-backdrop-filter:blur(5px) saturate(1.6) brightness(1.35);backdrop-filter:blur(5px) saturate(1.6) brightness(1.35)}
.zk-card__art img{max-width:none}
@media (min-width:861px){.zk-card__art img{width:132%}}
.zk-card__info{background:rgba(14,14,14,.38);-webkit-backdrop-filter:blur(10px) saturate(1.4) brightness(1.15);backdrop-filter:blur(10px) saturate(1.4) brightness(1.15)}
/* glass without outlines: no border, no bright inner edges */
.zk-card__info{border:0;box-shadow:0 30px 60px -28px rgba(0,0,0,.75)}
.zk-card__info::before{display:none}

/* ================= "Jak układamy plac": one strip of ground at six stages =================
   Desktop: tall section, sticky stage, the track slides left with the scroll (bud-page.js). */
.bstrip{height:var(--bs-h,360vh);padding:0}
.bstrip__stick{position:sticky;top:0;height:100vh;min-height:620px;display:flex;flex-direction:column;overflow:hidden;padding-top:clamp(56px,9vh,104px)}
.bstrip__head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex:none;margin-bottom:clamp(20px,4vh,48px)}
.bstrip__head .bp__lead{max-width:46ch;margin-top:18px}
.bstrip__side{display:flex;flex-direction:column;align-items:flex-end;gap:22px;flex:none}
.bstrip__nav{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.bstrip__nav li{position:relative;display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:8px;background:rgba(255,255,255,.04);color:rgba(239,239,239,.38);font-size:13px;white-space:nowrap;overflow:hidden;transition:color .4s,background .4s}
.bstrip__nav span{font:500 11px/1 var(--f-mono);color:rgba(239,239,239,.3);transition:color .4s}
.bstrip__nav i{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--lichen);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.bstrip__nav li.is-done{color:rgba(239,239,239,.7)}
.bstrip__nav li.is-done i{transform:scaleX(1)}
.bstrip__nav li.is-now{color:#fff;background:rgba(255,255,255,.08)}
.bstrip__nav li.is-now span{color:var(--lichen)}

.bstrip__view{position:relative;flex:1;min-height:0}
.bstrip__track{list-style:none;margin:0;padding:0 0 0 var(--gut);display:flex;height:100%;width:max-content;will-change:transform}
.bstrip__panel{position:relative;width:clamp(460px,44vw,700px);height:100%;display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.08)}
.bstrip__panel:last-child{border-right:1px solid rgba(255,255,255,.08)}
.bstrip__meta{position:relative;z-index:1;padding:0 clamp(22px,2.4vw,36px);max-width:440px}
.bstrip__n{display:block;font-family:var(--f-display);font-weight:300;font-size:clamp(56px,6vw,96px);line-height:.9;letter-spacing:-.04em;color:rgba(255,255,255,.12);transition:color .5s}
.bstrip__panel.is-on .bstrip__n{color:var(--lichen)}
.bstrip__meta h3{margin:14px 0 8px;font-size:clamp(22px,1.9vw,28px);font-weight:500;letter-spacing:-.025em;color:#efefef}
.bstrip__meta p{margin:0;font-size:15px;line-height:1.55;color:rgba(239,239,239,.5)}
.bs-svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:62%;display:block}

/* drawing pieces */
.bs-t{font:500 11px var(--f-mono);fill:rgba(255,255,255,.5);letter-spacing:.02em}
.bs-dim{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1}
.bs-line{fill:none;stroke:#d6d6d6;stroke-width:1.5}
.bs-laser{fill:none;stroke:#F84022;stroke-width:1.5;stroke-dasharray:6 5}
.bs-plan{fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.2;stroke-dasharray:5 4}
.bs-plan--acc{stroke:#F84022;stroke-width:2;stroke-dasharray:none}
.bs-edge{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1}
.bs-arrow{fill:none;stroke:#F84022;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bs-pipe{fill:#0c0c0c;stroke:#F84022;stroke-width:2.5}
.bs-run{fill:none;stroke:#F84022;stroke-width:1.2;stroke-dasharray:2 4}
.bs-layer{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1;stroke-dasharray:3 3}
.bs-done{fill:none;stroke:#F84022;stroke-width:2}

/* each panel builds its stage when it comes on */
.bs-in{opacity:0;transform:translateY(8px);transition:opacity .5s var(--d,0s),transform .6s cubic-bezier(.22,1,.36,1) var(--d,0s)}
.bstrip__panel.is-on .bs-in{opacity:1;transform:none}
.bs-fill{transform:translateY(40px);opacity:0;transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .5s}
.bstrip__panel.is-on .bs-fill{transform:none;opacity:1}
.bs-pavers rect{opacity:0;transform:translateY(-14px);transition:opacity .3s,transform .45s cubic-bezier(.22,1,.36,1)}
.bstrip__panel.is-on .bs-pavers rect{opacity:1;transform:none}
.bs-pavers rect:nth-child(n){transition-delay:calc(var(--k,0) * 30ms)}

@media (max-width:1080px){.bstrip__nav{display:none}}
@media (max-width:860px){
  .bstrip{height:auto}
  .bstrip__stick{position:relative;height:auto;min-height:0;padding:72px 0 40px}
  .bstrip__head{flex-direction:column;align-items:flex-start}
  .bstrip__side{align-items:flex-start}
  .bstrip__track{flex-direction:column;width:auto;padding:0}
  .bstrip__panel{width:auto;height:auto;min-height:420px;border-left:0;border-top:1px solid rgba(255,255,255,.08)}
  .bstrip__panel:last-child{border-right:0}
  .bstrip__meta{padding:28px var(--gut) 0}
  .bs-svg{position:relative;height:auto;aspect-ratio:2/1;margin-top:auto}
}
@media (prefers-reduced-motion:reduce){
  .bstrip{height:auto}.bstrip__stick{position:relative;height:auto}
  .bstrip__track{flex-direction:column;width:auto}.bstrip__panel{width:auto;min-height:420px}
  .bs-in,.bs-fill,.bs-pavers rect{opacity:1;transform:none;transition:none}
}
.bs-svg{position:relative;left:auto;right:auto;bottom:auto;flex:1;height:auto;min-height:220px;margin-top:clamp(18px,3vh,40px)}
.bs-t{font-size:12px}
@media (max-width:860px){.bs-svg{flex:none;aspect-ratio:2/1;min-height:0}}
.bs-svg{position:absolute;left:0;right:0;bottom:0;height:54%;min-height:0;margin:0;flex:none}
@media (max-width:860px){.bs-svg{position:relative;height:auto;aspect-ratio:2/1;margin-top:24px}}
@media (min-width:861px){.bs-svg{height:68%}.bstrip__panel{padding-bottom:0}}
/* the section always shows whole, at 2:1, sitting on the panel bottom */
@media (min-width:861px){.bs-svg{top:auto;bottom:0;height:auto;aspect-ratio:2/1}}
.bstrip__head>div:first-child{flex:1;min-width:0}.bstrip__head .bp__h{white-space:nowrap}

/* ================= "Plac i instalacje w jednym planie": sticky site plan, list switches its layers ================= */
.bplan{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,88px);margin-top:clamp(40px,6vw,80px);align-items:start}
.bplan__stage{position:sticky;top:calc(var(--header-h) + 24px)}
.bplan__frame{background:#fff;border:1px solid #ececec;border-radius:8px;padding:clamp(12px,1.6vw,22px)}
.pl-svg{display:block;width:100%;height:auto}
.bplan__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bplan__item{position:relative;padding:28px 0 28px 0;border-top:1px solid #e3e3e3;min-height:34vh}
.bplan__item:last-child{border-bottom:1px solid #e3e3e3}
.bplan__item::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--lichen);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.bplan__item.is-on::before{transform:scaleX(1)}
.bplan__btn{display:flex;align-items:center;gap:14px;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left}
.bplan__n{font:500 12px/1 var(--f-mono);color:#a3a3a3;width:22px;transition:color .4s}
.bplan__btn .bp-ic{width:40px;height:40px;flex:none;background:#ececec;color:#8a8a8a;transition:background .4s,color .4s}
.bplan__t{font-size:clamp(20px,1.7vw,26px);font-weight:500;letter-spacing:-.025em;color:#9b9b9b;transition:color .4s}
.bplan__item p{margin:14px 0 0 76px;max-width:40ch;font-size:16px;line-height:1.55;color:#9b9b9b;transition:color .4s}
.bplan__item.is-on .bplan__n{color:var(--lichen)}
.bplan__item.is-on .bp-ic{background:var(--lichen);color:#fff}
.bplan__item.is-on .bplan__t{color:var(--graphite)}
.bplan__item.is-on p{color:#717171}
.bplan__btn:focus-visible{outline:2px solid var(--lichen);outline-offset:6px;border-radius:6px}

/* plan drawing */
.pl-grid{fill:#fbfbfb}
.pl-plaza{stroke:#121212;stroke-width:1.2}
.pl-hall{fill:#efefef;stroke:#121212;stroke-width:1.2}
.pl-dock{fill:#dcdcdc;stroke:#121212;stroke-width:1}
.pl-gate{stroke:#F84022;stroke-width:3;stroke-dasharray:6 4}
.pl-pole circle,.pl-pole rect{fill:#fff;stroke:#121212;stroke-width:1.4}
.pl-pole .pl-dot{fill:#121212;stroke:none}
.pl-fov{fill:#ececec;stroke:none}
.pl-north path{fill:#121212}
.pl-scale path{fill:none;stroke:#121212;stroke-width:1.2}
.pl-t{font:500 12px var(--f-mono);fill:#121212;letter-spacing:.02em}
.pl-t--s{font-size:11px;fill:#717171}
.pl-t--acc{font-size:11px;fill:#F84022}
.pl-route{fill:none;stroke:#F84022;stroke-width:2.2;stroke-dasharray:7 5}
.pl-hub{fill:#F84022}
.pl-zone circle{fill:#121212}
.pl-zone text{font:600 13px var(--f-mono);fill:#fff}
.pl-card rect:first-child{fill:#fff;stroke:#e3e3e3}
.pl-lane{fill:#f0f0f0}
.pl-bar{fill:#F84022}
.pl-heavy{stroke:#F84022;stroke-width:1.2}
.pl-foot{fill:none;stroke:#F84022;stroke-width:2}
.pl-sep{stroke:#e3e3e3}

/* layers: only the active one shows; the quote shows the others faintly behind it */
.pl-l{opacity:0;transition:opacity .5s}
.pl-l>*{transition:transform .6s cubic-bezier(.22,1,.36,1) var(--d,0s),opacity .5s var(--d,0s)}
.pl-svg[data-active="0"] [data-l="0"],.pl-svg[data-active="1"] [data-l="1"],.pl-svg[data-active="2"] [data-l="2"],.pl-svg[data-active="3"] [data-l="3"]{opacity:1}
.pl-svg[data-active="3"] [data-l="0"],.pl-svg[data-active="3"] [data-l="2"]{opacity:.35}
.pl-route{stroke-dashoffset:0}
.pl-svg[data-active="0"] .pl-route{animation:plFlow 1.6s linear infinite}
@keyframes plFlow{to{stroke-dashoffset:-24}}
.pl-bar{transform-box:fill-box;transform-origin:left;transform:scaleX(0)}
.pl-svg[data-active="1"] .pl-bar{transform:scaleX(1)}
.pl-row{opacity:0}
.pl-svg[data-active="3"] .pl-row{opacity:1}

@media (max-width:960px){
  .bplan{grid-template-columns:minmax(0,1fr)}
  .bplan__stage{top:calc(var(--header-h) + 8px);z-index:2}
  .bplan__item{min-height:0;padding:22px 0}
  .bplan__item p{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.pl-svg .pl-route{animation:none}}
@media (max-width:960px){.bplan__list{padding-bottom:28vh}.bplan__frame{box-shadow:0 18px 30px -24px rgba(0,0,0,.25)}}
@media (min-width:861px){.bstrip__stick{padding-top:calc(var(--header-h) + clamp(24px,4vh,48px))}}
/* strip head: the title never shrinks, the step chips wrap instead */
.bstrip__head>div:first-child{flex:none;min-width:0}.bstrip__head .bp__h{white-space:nowrap}
.bstrip__side{flex:1 1 auto;min-width:0}.bstrip__nav{flex-wrap:wrap;justify-content:flex-end}

/* ================= "Plac i instalacje": exploded axonometric of the plaza (CSS 3D) ================= */
.bplan__stage{top:calc(var(--header-h) + 16px)}
.bx-scene{position:relative;height:min(76vh,660px);min-height:440px;display:grid;place-items:center;perspective:2600px;perspective-origin:50% 20%;border-radius:8px;background:#ebebeb;overflow:hidden}
.bx-scene::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#e2e2e2 1px,transparent 1px),linear-gradient(90deg,#e2e2e2 1px,transparent 1px);background-size:40px 40px;opacity:.7}
.bx-stack{--gap:62px;position:relative;width:min(380px,58%);aspect-ratio:1;transform-style:preserve-3d;transform:translateY(-4%) rotateX(57deg) rotateZ(-38deg) translateZ(-80px);transition:--gap 1s}
.bx-plate{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--z) * var(--gap) + var(--lift, 0px)));transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .6s}
.bx-plate svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.bx-plate::before{content:"";position:absolute;inset:0;background:#bdbdbd;transform:translateZ(-5px)}
.bx-plate--ground::before{background:#a9a9a9;box-shadow:0 0 90px 10px rgba(0,0,0,.12)}
.bx-plate--inst::before{background:rgba(18,18,18,.08)}
.bx-tag{position:absolute;left:calc(100% + 18px);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;font:500 13px/1 var(--f-mono);color:#121212;transition:opacity .5s}
.bx-tag b{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:#121212;color:#fff;font-weight:500;font-size:11px}
.bx-route{fill:none;stroke:#F84022;stroke-width:.7;stroke-dasharray:2.2 1.4}
.bx-end{fill:#fff;stroke:#F84022;stroke-width:.5}
.bx-hub{fill:#F84022}
.bx-line{stroke:#c8c8c8;stroke-width:.3}
.bx-gate{stroke:#F84022;stroke-width:1.2}
.bx-heavy{transition:opacity .6s}

/* the hall and the poles stand on the paver plate */
.bx-box{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);transform-style:preserve-3d}
.bx-box i{position:absolute;display:block}
.bx-box__top{inset:0;background:#f4f4f4;box-shadow:inset 0 0 0 1px #121212;transform:translateZ(var(--bz))}
.bx-box__s{left:0;top:100%;width:100%;height:var(--bz);background:#d6d6d6;box-shadow:inset 0 0 0 1px #121212;transform-origin:0 0;transform:rotateX(90deg)}
.bx-box__e{left:100%;top:0;width:var(--bz);height:100%;background:#c4c4c4;box-shadow:inset 0 0 0 1px #121212;transform-origin:0 0;transform:rotateY(-90deg)}
.bx-pole{position:absolute;left:var(--x);top:var(--y);width:2px;height:40px;margin-left:-1px;background:#121212;transform-origin:50% 0;transform:rotateX(90deg)}
.bx-pole::after{content:"";position:absolute;left:-4px;bottom:-2px;width:10px;height:6px;border-radius:2px;background:#F84022}
.bx-pole--bar{height:18px}
.bx-pole--bar::after{left:0;width:46px;height:3px;border-radius:2px}
.bx-post{position:absolute;left:var(--x);top:var(--y);width:0;height:calc(var(--gap) * 3);border-left:1px dashed rgba(18,18,18,.4);transform-origin:0 0;transform:rotateX(90deg);transition:height 1s cubic-bezier(.22,1,.36,1)}

.bx-quote{position:absolute;left:50%;bottom:7%;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:8px;background:#fff;border:1px solid #e3e3e3;font:500 13px var(--f-mono);color:#121212;white-space:nowrap;opacity:0;transform:translate(-50%,12px);transition:opacity .5s,transform .6s cubic-bezier(.22,1,.36,1)}
.bx-quote b{color:#F84022;font-size:16px}
.bx-quote span{color:#bdbdbd}

/* states */
@property --gap{syntax:"<length>";inherits:true;initial-value:62px}
.bx-stack[data-active="0"] .bx-plate:not(.bx-plate--inst),.bx-stack[data-active="2"] .bx-plate:not(.bx-plate--base){opacity:.38}
.bx-stack[data-active="0"] .bx-plate--inst{--lift:34px}
.bx-stack[data-active="0"] .bx-route{animation:bxFlow 1.4s linear infinite}
@keyframes bxFlow{to{stroke-dashoffset:-7.2}}
.bx-stack[data-active="2"] .bx-plate--inst,.bx-stack[data-active="2"] .bx-plate--top{--lift:48px}
.bx-stack:not([data-active="2"]) .bx-heavy{opacity:.25}
.bx-stack[data-active="1"] .bx-plate{animation:bxBuild .9s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--z) * .18s)}
@keyframes bxBuild{from{opacity:0;transform:translateZ(calc(var(--z) * var(--gap) + 140px))}}
.bx-stack[data-active="3"]{--gap:6px}
.bx-stack[data-active="3"] .bx-tag{opacity:0}
.bx-scene:has(.bx-stack[data-active="3"]) .bx-quote{opacity:1;transform:translate(-50%,0)}

/* list: tighter, the first item lines up with the stage */
.bplan{align-items:start}
.bplan__item{min-height:24vh;padding:24px 0}
.bplan__item p{margin-left:76px}

@media (max-width:1180px){.bx-tag{font-size:11px;left:calc(100% + 10px)}}
@media (max-width:960px){
  .bx-scene{height:380px;min-height:0}
  .bx-stack{--gap:46px;width:min(260px,52%)}
  @property --gap{syntax:"<length>";inherits:true;initial-value:46px}
  .bx-tag{display:none}
  .bplan__item{min-height:0}
}
@media (prefers-reduced-motion:reduce){.bx-plate,.bx-post{transition:none}.bx-stack .bx-plate{animation:none}.bx-route{animation:none}}
.bstrip__nav{gap:4px}.bstrip__nav li{padding:0 9px;font-size:12px;gap:6px;height:32px}
.bx-stack[data-active="0"] .bx-plate:not(.bx-plate--inst),.bx-stack[data-active="2"] .bx-plate:not(.bx-plate--base){opacity:.55}
.bx-tag{left:calc(100% + 30px);font-size:14px}
@media (max-width:960px){.bplan__item p{margin-left:0}}

/* ================= "Plac i instalacje": the block pins, scroll steps through the four states ================= */
.bplan{display:block;height:calc(100vh + var(--n) * 85vh);margin-top:clamp(24px,4vw,56px)}
.bplan__pin{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4.5vw,80px);align-items:center;padding:calc(var(--header-h) + 24px) 0 32px}
.bplan__stage{position:relative;top:auto;height:100%}
.bplan__stage .bx-scene{height:100%;min-height:0}
.bplan__panel{display:flex;flex-direction:column;gap:clamp(20px,3.5vh,40px)}
.bplan__count{margin:0;display:flex;align-items:baseline;gap:12px;font-family:var(--f-display);line-height:.85}
.bplan__cur{font-weight:300;font-size:clamp(84px,9vw,148px);letter-spacing:-.05em;color:var(--lichen)}
.bplan__count span{font:500 14px var(--f-mono);color:#a3a3a3}
.bplan__slides{position:relative;min-height:clamp(200px,28vh,260px)}
.bplan__slide{position:absolute;inset:0;opacity:0;transform:translateY(28px);transition:opacity .45s,transform .7s cubic-bezier(.22,1,.36,1);pointer-events:none}
.bplan__slide.is-on{opacity:1;transform:none;pointer-events:auto}
.bplan__slide .bp-ic{width:48px;height:48px;background:var(--lichen);color:#fff;margin-bottom:22px}
.bplan__slide h3{margin:0 0 14px;font-size:clamp(28px,2.6vw,40px);line-height:1.05;font-weight:500;letter-spacing:-.035em;color:var(--graphite)}
.bplan__slide p{margin:0;max-width:34ch;font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:#717171}
.bplan__bars{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px}
.bplan__bar{position:relative;display:flex;flex-direction:column;gap:10px;padding:0 0 4px;border:0;background:none;cursor:pointer;text-align:left}
.bplan__bar span{font:500 12px var(--f-mono);color:#a3a3a3;transition:color .3s}
.bplan__bar i{position:relative;display:block;height:3px;border-radius:2px;background:#dcdcdc;overflow:hidden}
.bplan__bar i::after{content:"";position:absolute;inset:0;background:var(--lichen);transform-origin:left;transform:scaleX(var(--f,0))}
.bplan__bar.is-on span{color:var(--graphite)}
.bplan__bar:focus-visible{outline:2px solid var(--lichen);outline-offset:4px;border-radius:4px}

@media (max-width:960px){
  .bplan{height:calc(100vh + var(--n) * 70vh)}
  .bplan__pin{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:18px;align-items:stretch;padding:calc(var(--header-h) + 8px) 0 20px}
  .bplan__stage .bx-scene{height:100%}
  .bplan__panel{gap:14px}
  .bplan__count{display:none}
  .bplan__slides{min-height:150px}
  .bplan__slide .bp-ic{width:40px;height:40px;margin-bottom:12px}
  .bplan__slide h3{font-size:24px;margin-bottom:8px}
  .bplan__slide p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.bplan{height:auto}.bplan__pin{position:relative;height:auto;min-height:100vh}.bplan__slide{transition:none}}

/* ================= preloader in 3D: the plan draws on a tilted plate, the hall and poles rise, the view turns ================= */
.pl{background:var(--fog)}
.pl::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#e6e6e6 1px,transparent 1px),linear-gradient(90deg,#e6e6e6 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.pl>*{position:relative}
.pl3{align-self:center;justify-self:center;width:min(640px,80vw,78vh);aspect-ratio:1.25;display:grid;place-items:center;perspective:2200px;perspective-origin:50% 25%}
.pl3__stack{--k:0;position:relative;width:58%;aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(calc(-56deg + var(--k) * 24deg)) translateZ(-40px)}
.pl3__plate{position:absolute;inset:0;background:#fbfbfb;box-shadow:0 0 0 1px #e1e1e1,0 40px 80px -30px rgba(0,0,0,.18)}
.pl3__plate::after{content:"";position:absolute;inset:0;background:#d9d9d9;transform:translateZ(-6px)}
.pl3 svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pl3 .pl__ln{stroke:#121212;stroke-width:.45}
.pl3 .pl__ln--soft{stroke:rgba(18,18,18,.3);stroke-width:.3}
.pl3 .pl__ln--cable{stroke:var(--moss);stroke-width:.7;filter:none;stroke-dasharray:2 1.4}
.pl3__box{--k:0;--H:calc(var(--k) * 70px);position:absolute;left:10%;top:10%;width:36%;height:30%;transform-style:preserve-3d}
.pl3__box i{position:absolute;display:block}
.pl3__top{inset:0;background:#f4f4f4;box-shadow:inset 0 0 0 1px #121212;transform:translateZ(var(--H))}
.pl3__s{left:0;top:100%;width:100%;height:var(--H);background:#d4d4d4;box-shadow:inset 0 0 0 1px #121212;transform-origin:0 0;transform:rotateX(90deg)}
.pl3__e{left:100%;top:0;width:var(--H);height:100%;background:#bfbfbf;box-shadow:inset 0 0 0 1px #121212;transform-origin:0 0;transform:rotateY(-90deg)}
.pl3__pole{--k:0;position:absolute;width:2px;height:calc(var(--k) * 46px);margin-left:-1px;background:#121212;transform-origin:50% 0;transform:rotateX(90deg)}
.pl3__pole::after{content:"";position:absolute;left:-4px;bottom:-3px;width:10px;height:6px;border-radius:2px;background:var(--moss);opacity:calc((var(--k) - .8) * 5)}
@media (max-width:820px){.pl3{width:94vw}}
.pl3__plate{transform-style:preserve-3d}.pl3__plate::after{content:none}.pl3__plate::before{content:"";position:absolute;inset:0;background:#d9d9d9;transform:translateZ(-6px)}
.pl3{width:min(820px,88vw,90vh)}.pl3__stack{width:62%}
/* Rozwiązania cards: clear glass over the camera feed, no outline */
.sol2__card,.sol2__card:hover{border:0;background:rgba(255,255,255,.055);-webkit-backdrop-filter:blur(16px) saturate(1.5) brightness(1.12);backdrop-filter:blur(16px) saturate(1.5) brightness(1.12);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.sol2__card:hover{background:rgba(255,255,255,.1)}
.sol2__img::after{box-shadow:none}
/* Rozwiązania glass: lighter tint and blur so the feed reads through */
.sol2__card,.sol2__card:hover{background:rgba(255,255,255,.025);-webkit-backdrop-filter:blur(7px) saturate(1.6) brightness(1.3);backdrop-filter:blur(7px) saturate(1.6) brightness(1.3)}
.sol2__card:hover{background:rgba(255,255,255,.06)}
.sol2__card p{color:rgba(243,243,243,.75)}.sol2__card h3{text-shadow:0 1px 12px rgba(0,0,0,.35)}
/* statement pills: small 3D renders instead of line icons */
.why3 .pill-ic--img{width:1.75em;height:1.05em;padding:0;overflow:hidden;background:#ececec;border:0;box-shadow:inset 0 0 0 1px rgba(18,18,18,.06)}
.pill-ic--img img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* curtain: generated tech drawings, shown as they are */
.bento__half{background:#111}.bento__shot img{filter:none;transform:none}
.bento__shot::after{background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.pill-ic--img img{object-fit:contain;transform:scale(1.35)}

/* ================= "Co jest pod kostką": X-ray lens over the yard + a core sample ================= */
.xr__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:clamp(20px,3vw,48px);align-items:stretch}
.xr__stage{--x:50%;--y:50%;--r:150px;position:relative;aspect-ratio:1000/560;border-radius:8px;overflow:hidden;background:#ececec;cursor:none;touch-action:pan-y}
.xr__surface,.xr__under{position:absolute;inset:0}
.xr-svg{display:block;width:100%;height:100%}
.xr__under{clip-path:circle(var(--r) at var(--x) var(--y))}
.xr-route{fill:none;stroke:#F84022;stroke-width:4;stroke-dasharray:12 8;animation:xrFlow 1.2s linear infinite}
@keyframes xrFlow{to{stroke-dashoffset:-40}}
.xr-t{font:500 13px var(--f-mono);fill:rgba(255,255,255,.75);letter-spacing:.02em}
.xr__lens{position:absolute;left:var(--x);top:var(--y);width:calc(var(--r) * 2);height:calc(var(--r) * 2);transform:translate(-50%,-50%);pointer-events:none}
.xr__ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px #F84022,0 24px 50px -20px rgba(0,0,0,.45)}
.xr__ring::before,.xr__ring::after{content:"";position:absolute;background:#F84022}
.xr__ring::before{left:50%;top:-12px;width:2px;height:22px;margin-left:-1px;box-shadow:0 calc(var(--r) * 2 + 2px) 0 #F84022}
.xr__ring::after{top:50%;left:-12px;height:2px;width:22px;margin-top:-1px;box-shadow:calc(var(--r) * 2 + 2px) 0 0 #F84022}
.xr__read{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);white-space:nowrap;padding:6px 10px;border-radius:6px;background:#121212;color:#fff;font:500 12px var(--f-mono)}
.xr__read b{color:#F84022;font-weight:500}
.xr__hint{position:absolute;left:16px;top:14px;padding:6px 10px;border-radius:6px;background:rgba(255,255,255,.85);font:500 11px var(--f-mono);color:#717171;transition:opacity .4s}
.xr__stage.is-live .xr__hint{opacity:0}

/* core sample */
.xr__core{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:stretch}
.xr__rod{position:relative;display:flex;flex-direction:column;border-radius:36px 36px 10px 10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(18,18,18,.12);transform:translateY(var(--rise,0%))}
.xr__band{flex:var(--h) 0 0;display:block}
.xr__band--kostka{background:repeating-linear-gradient(90deg,#8d8d8d 0 30px,#7a7a7a 30px 32px)}
.xr__band--podsypka{background:#cdbb95}
.xr__band--podbudowa{background:#6e6e6e radial-gradient(circle at 30% 40%,#8a8a8a 0 3px,transparent 4px) 0 0/16px 14px}
.xr__band--grunt{background:#5a4636}
.xr__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.xr__k{display:flex;flex-direction:column;justify-content:center;gap:4px;border-top:1px solid #e3e3e3;padding:0 0 0 2px;opacity:0;transform:translateX(12px);transition:opacity .5s,transform .6s cubic-bezier(.22,1,.36,1)}
.xr__k--kostka{flex:14 0 0}.xr__k--podsypka{flex:8 0 0}.xr__k--podbudowa{flex:46 0 0}.xr__k--grunt{flex:32 0 0}
.xr__k b{font-size:15px;font-weight:500;color:var(--graphite);line-height:1.2}
.xr__k span{font:500 12px var(--f-mono);color:#F84022}
.xr__core.is-on .xr__k{opacity:1;transform:none}
.xr__core.is-on .xr__k:nth-child(2){transition-delay:.1s}.xr__core.is-on .xr__k:nth-child(3){transition-delay:.2s}.xr__core.is-on .xr__k:nth-child(4){transition-delay:.3s}

@media (max-width:960px){
  .xr__grid{grid-template-columns:minmax(0,1fr)}
  .xr__stage{--r:96px;aspect-ratio:4/3;cursor:auto}
  .xr__core{height:340px}
}
@media (prefers-reduced-motion:reduce){.xr-route{animation:none}.xr__k{opacity:1;transform:none}}
.why3 .pill-ic--img{width:1.6em;height:.86em}.pill-ic--img img{object-fit:contain;transform:scale(1.2);object-position:50% 50%}
.why3 .pill-ic--img{display:inline-block;position:relative}.pill-ic--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(1.25)}
.pill-ic--img img{transform:scale(1.55)}
/* glow card: no green frame, the line camera fills the card centred */
.bento-c--glow{padding:0;background:#fff;border-color:#ececec}
.bento-c--glow .bento-c__inner{border:0;border-radius:0;box-shadow:none}
.bento-c--glow .bento-lines{top:auto;bottom:0;height:72%}

/* one green: the brand lichen everywhere outside AVPBUD; dark text sits on it, small labels go graphite */
:root{--moss:#B5D08A;--moss-rgb:181,208,138;--moss-hi:#B5D08A;--moss-lo:#B5D08A;--acc-hi:#B5D08A;--acc-lo:#B5D08A}
.bud2,.bud3,.bp{--moss:#f84022;--moss-rgb:248,64,34;--moss-hi:#f84022;--moss-lo:#f84022}
.why3__label,.bento__label{color:var(--graphite)}
.bm--in p{color:var(--graphite)}
.bento-tiles span+span,.bento-sys span:last-child{color:var(--graphite)}
.bento-role__ic{color:var(--graphite)}
.bento-phone__head small{color:#5f7a3a}

/* ===== preloader arrival: grid fades in, plate unfolds, type slides up; exit: the screen breaks into pavers ===== */
.pl::before{animation:plGrid 1s ease both}
@keyframes plGrid{from{opacity:0}}
.pl__top,.pl__bottom{animation:plUp .9s cubic-bezier(.22,1,.36,1) .2s both}
@keyframes plUp{from{opacity:0;transform:translateY(28px)}}
.pl__bar{animation:plGrid .8s ease .3s both}
.pl3{animation:plIn 1.1s cubic-bezier(.22,1,.36,1) .05s both}
@keyframes plIn{from{opacity:0;transform:translateY(8vh) scale(.84)}}
.pl3__plate{animation:plPlate 1s cubic-bezier(.22,1,.36,1) .3s both}
@keyframes plPlate{from{opacity:0;transform:scale(.15)}}
.pl.is-out{background:transparent}
.pl.is-out::before{opacity:0;transition:opacity .3s}
.pl__tiles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.pl__row{display:flex;width:calc(100% + 100% / 12)}
.pl__row--off{margin-left:calc(-100% / 24)}
.pl__row i{flex:1 0 0;display:block;background:var(--fog);box-shadow:inset 0 0 0 .5px #dedede}
.pl.is-out>*:not(.pl__tiles){position:relative;z-index:1}
@media (max-width:699px){.pl__row{width:calc(100% + 100% / 6)}.pl__row--off{margin-left:calc(-100% / 12)}}
@media (prefers-reduced-motion:reduce){.pl::before,.pl__top,.pl__bottom,.pl__bar,.pl3,.pl3__plate{animation:none}}
@keyframes plPlate{from{transform:scale(.15)}}
.pl3__box{opacity:calc(var(--k) * 25)}

/* ================= Referencje: client list + recorder front panel lighting channels ================= */
.refs{background:var(--fog)}
.refs__h .ln{display:block;overflow:hidden;padding-bottom:.06em}.refs__h .ln>span{display:inline-block}.refs__h .ln--mute{opacity:.4}
.refs__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,4.5vw,80px);align-items:start}
.refs__list{list-style:none;margin:0;padding:0}
.refs__item{border-top:1px solid #dcdcdc}
.refs__item:last-child{border-bottom:1px solid #dcdcdc}
.refs__btn{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:baseline;gap:14px;width:100%;padding:26px 0;border:0;background:none;cursor:pointer;text-align:left}
.refs__n{font:500 12px var(--f-mono);color:#a3a3a3;transition:color .3s}
.refs__name{font-family:var(--f-display);font-weight:500;font-size:clamp(34px,4.2vw,64px);line-height:1;letter-spacing:-.045em;color:#b9b9b9;transition:color .4s,transform .6s cubic-bezier(.22,1,.36,1)}
.refs__cams{font:500 13px var(--f-mono);color:#a3a3a3;white-space:nowrap}
.refs__cams b{font-weight:500;color:inherit}
.refs__item.is-on .refs__name{color:var(--graphite);transform:translateX(6px)}
.refs__item.is-on .refs__n,.refs__item.is-on .refs__cams{color:var(--graphite)}
.refs__item.is-on .refs__cams b{background:var(--lichen);padding:2px 6px;border-radius:4px}
.refs__body{padding-left:50px}
.refs__body{overflow:hidden;max-height:0;opacity:0;transition:max-height .7s cubic-bezier(.22,1,.36,1),opacity .4s}
.refs__item.is-on .refs__body{max-height:260px;opacity:1}
.refs__sector{margin:0 0 6px;font:500 12px var(--f-mono);color:#717171;text-transform:uppercase;letter-spacing:.06em}
.refs__body p{margin:0;max-width:46ch;font-size:16px;line-height:1.55;color:#4a4a4a}
.refs__tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 26px}
.refs__tags span{padding:6px 10px;border-radius:6px;background:#fff;border:1px solid #e3e3e3;font-size:13px;color:var(--graphite)}
.refs__btn:focus-visible{outline:2px solid var(--graphite);outline-offset:4px;border-radius:6px}

.refs__stage{position:sticky;top:calc(var(--header-h) + 28px)}
.nvr{border-radius:8px;background:#121212;color:#efefef;padding:clamp(18px,2vw,28px);box-shadow:0 40px 80px -40px rgba(0,0,0,.5)}
.nvr__top{display:flex;align-items:center;gap:14px;font:500 11px var(--f-mono);letter-spacing:.08em;color:rgba(255,255,255,.45)}
.nvr__brand{flex:1}
.nvr__leds{display:flex;gap:5px}.nvr__leds i{width:6px;height:6px;border-radius:50%;background:#333}.nvr__leds i.is-on{background:var(--lichen)}
.nvr__rec{display:flex;align-items:center;gap:6px;color:#efefef}.nvr__rec i{width:7px;height:7px;border-radius:50%;background:#F84022;animation:camRec 1.4s steps(2,jump-none) infinite}
.nvr__name{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:22px 0 16px}
.nvr__client{font-family:var(--f-display);font-size:clamp(26px,2.4vw,36px);font-weight:500;letter-spacing:-.035em}
.nvr__ch{font:500 12px var(--f-mono);color:rgba(255,255,255,.5);white-space:nowrap}
.nvr__ch b{font-size:20px;color:var(--lichen);font-weight:500}
.nvr__grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.nvr__grid i{position:relative;aspect-ratio:16/10;border-radius:4px;background:#1c1c1c;display:block;transition:background .35s,opacity .35s;transition-delay:calc(var(--k) * 18ms)}
.nvr__grid i span{position:absolute;left:5px;top:4px;font:500 9px var(--f-mono);color:rgba(255,255,255,.25)}
.nvr__grid i.is-off{opacity:.25;background:repeating-linear-gradient(135deg,#1c1c1c 0 4px,#161616 4px 8px)}
.nvr__grid i.is-cam{background:#2a2f24}
.nvr__grid i.is-cam::after{content:"";position:absolute;inset:22% 18%;border-radius:2px;background:repeating-linear-gradient(0deg,rgba(181,208,138,.18) 0 1px,transparent 1px 3px);border:1px solid rgba(181,208,138,.55)}
.nvr__grid i.is-cam span{color:var(--lichen)}
.nvr__stats{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:22px;align-items:end;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.nvr__stats span{display:block;font:500 11px var(--f-mono);color:rgba(255,255,255,.45);margin-bottom:4px}
.nvr__stats b{font-family:var(--f-display);font-weight:500;font-size:28px;line-height:1}
.nvr__sys{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.nvr__sys em{font-style:normal;padding:6px 9px;border-radius:6px;font-size:12px;background:#1c1c1c;color:rgba(255,255,255,.35);transition:background .35s,color .35s}
.nvr__sys em.is-on{background:var(--lichen);color:#121212}
.refs__total{margin:16px 2px 0;font:500 12px var(--f-mono);color:#717171}
.refs__total b{color:var(--graphite)}

@media (max-width:960px){
  .refs__grid{grid-template-columns:minmax(0,1fr)}
  .refs__stage{position:sticky;top:calc(var(--header-h) + 8px);z-index:2;order:-1}
  .nvr__grid{gap:4px}
  .nvr__stats{grid-template-columns:auto auto;}
  .nvr__sys{grid-column:1/-1;justify-content:flex-start}
  .refs__body{padding-left:0}
  .refs__btn{padding:20px 0}
}
@media (max-width:960px){.nvr__stats{display:none}.nvr__name{margin:12px 0 10px}.nvr{padding:14px}}

/* ===== performance (Mac Chrome flicker / fps): no live backdrop blur on flat backgrounds or inside transformed blocks ===== */
.fsn,.why3 .fown,.why3 .ffit__row,.why3 .fstock li,.why3 .fticket li,.why3 .ftags span,.why3 .ffit__pop,
#jak-pracujemy .fsn,#jak-pracujemy .fnotes li,#jak-pracujemy .fkit li,#jak-pracujemy .finbox li,#jak-pracujemy .fcall__top,
.fring__card,.fcta__row,.bp-card,.zk-card__info,.sol2__card,.sol2__card:hover,.glass,.glass--dark{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* Zakres glass = a pre-blurred copy of the drawing clipped to the panel (static, nothing computed on scroll) */
.zk-card__art .zk-card__frost{position:absolute;inset:0;width:132%;left:auto;right:0;height:100%;max-width:none;object-fit:cover;object-position:right center;
  clip-path:inset(14px calc(100% - 14px - min(580px, 54%) / 1.32 * 1.32) 14px 14px round 8px)}
.zk-card__info{background:rgba(14,14,14,.32)}
@media (max-width:860px){.zk-card__art .zk-card__frost{display:none}.zk-card__info{background:rgba(14,14,14,.72)}}
/* Rozwiązania slider: tinted cards over the feed, no blend-mode noise (it repainted the whole screen every frame) */
.sol2__card,.sol2__card:hover{background:rgba(14,14,14,.5)}
.sol2__card:hover{background:rgba(14,14,14,.38)}
.sol2__fx::after{animation:none;mix-blend-mode:normal;opacity:.05}
.sol2__glitch{mix-blend-mode:normal}
@media (min-width:861px){.zk-card__art .zk-card__frost{clip-path:inset(14px calc(100% / 1.32 - 14px - min(580px, 100% * .54 / 1.32)) 14px calc(100% * .32 / 1.32 + 14px) round 8px)}}

/* ===== optimized, not removed ===== */
/* the grey/contrast/dark look is baked into sol-feed-*.mp4 — no per-frame CSS filter on a 2× wide video */
.sol2__vid{filter:none}
.sol2__feed{transform:translateZ(0)}
/* Rozwiązania glass back: a light blur on its own GPU layer, painted only inside the card */
.sol2__card,.sol2__card:hover{background:rgba(255,255,255,.03);-webkit-backdrop-filter:blur(8px) saturate(1.4)!important;backdrop-filter:blur(8px) saturate(1.4)!important;transform:translateZ(0);contain:paint}
.sol2__card:hover{background:rgba(255,255,255,.07)}
/* camera noise back, animated with transform only (compositor), no blend mode */
.sol2__fx::after{animation:camNoise .5s steps(4) infinite;opacity:.07;will-change:transform}

/* a block sliding under the next one: no live blur, CSS loops paused (see layers.js cover()) */
.layer.is-covered *{animation-play-state:paused!important}
/* fewer permanent GPU layers: GSAP promotes elements only while it animates them */
.btn,[data-fill],.foot2__word span,.zk-card,.world,.clouds__layer{will-change:auto}

/* strip on short screens (MacBook Air): the drawing never climbs into the text — it takes at most the room
   under the step text and crops only the empty sky above the ground */
@media (min-width:861px){
  .bstrip__panel{container-type:size}
  .bs-svg{aspect-ratio:auto;width:100%;height:min(50cqw, calc(100cqh - var(--meta, 200px)))}
  .bstrip__meta{--meta:200px}
}
@media (min-width:861px) and (max-height:820px){
  .bstrip__stick{padding-top:calc(var(--header-h) + 14px)}
  .bstrip__head{margin-bottom:14px}
  .bstrip__head .bp__h{font-size:clamp(34px,6.4vh,56px)}
  .bstrip__head .bp__lead{margin-top:10px;font-size:15px}
  .bstrip__n{font-size:clamp(40px,8vh,72px)}
  .bstrip__meta h3{margin:8px 0 6px;font-size:22px}
  .bstrip__meta p{font-size:14px;line-height:1.45}
  .bstrip__panel{--meta:160px}
}

/* ===== no live backdrop blur anywhere it sits over moving or scaling content (Mac Chrome flickers) =====
   Rozwiązania cards: translucent tint, the camera feed shows through without a blur */
.sol2__card,.sol2__card:hover{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(14,14,14,.48);transform:none;contain:none}
.sol2__card:hover{background:rgba(14,14,14,.34)}
.header .header__bar,.header.is-scrolled .header__bar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* closed mobile menu: fully hidden (it was an invisible full-screen blur layer over the whole page) */
.mnav{visibility:hidden;-webkit-backdrop-filter:none;backdrop-filter:none;transition:opacity .4s,visibility 0s linear .4s}
.mnav.is-open{visibility:visible;-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);transition:opacity .4s,visibility 0s}