:root{--surface:#002726;--surface-2:#0a3a37;--accent:#ade88c;--paper:#f5f5f4;--card:#fff;--ink:#141414;--muted:#6b6b6b;--line:#e2e2df;--on-dark:#f5f5f4;--muted-dark:#9fb3ae;--line-dark:rgba(245,245,244,.14);--logo-dot:#9BE171}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Geist,system-ui,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.wrap{max-width:1480px;margin:0 auto;padding:0 24px}
.mono{font-family:"Geist Mono",monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;font-weight:600;font-size:16px;transition:transform .2s}
.btn--accent{background:var(--accent);color:var(--surface)}
.btn--dark{background:var(--surface);color:var(--on-dark)}
.btn--glass{background:rgba(245,245,244,.08);color:var(--on-dark);border:1px solid var(--line-dark)}
.btn--line{border:1px solid var(--ink);color:var(--ink)}
.grain{position:relative;isolation:isolate}
.grain::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.2;pointer-events:none;border-radius:inherit;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.header{position:sticky;top:12px;z-index:30;padding:12px 0}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 10px 0 24px;border-radius:999px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border:1px solid var(--line)}
.logo{display:block;width:96px;color:var(--ink)}
.logo svg{width:100%;height:auto}
.nav{display:flex;gap:30px;font-size:15px;color:var(--muted)}
.bar .btn{height:46px;font-size:15px}
.right{display:flex;align-items:center;gap:12px}
.nav .dd{position:relative}
.nav .dd>a{display:inline-flex;align-items:center;gap:6px}
.nav .dd>a::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.menu{position:absolute;left:-18px;top:100%;padding-top:22px;display:none}
.dd:hover .menu,.dd:focus-within .menu,.dd.open .menu{display:block}
.dd.open>a,.dd:hover>a{color:var(--ink)}
.menu-in{width:320px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:8px;box-shadow:0 20px 50px rgba(0,39,38,.14)}
.menu-in a{display:block;padding:12px 14px;border-radius:14px;color:var(--ink);font-size:15px}
.menu-in a small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.menu-in a:hover{background:var(--paper)}
.menu-in .all{border-top:1px solid var(--line);border-radius:0 0 14px 14px;margin-top:6px;padding-top:14px;font-weight:600}
.lang{display:flex;padding:3px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.lang a{height:34px;min-width:40px;padding:0 10px;display:grid;place-items:center;border-radius:999px;font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.06em;color:var(--muted)}
.lang a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* hero */
.hero{border-radius:36px;background:var(--surface);color:var(--on-dark);overflow:hidden;margin-top:8px}
.hero-in{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;padding:88px 72px 72px;align-items:center}
.hero .mono{color:var(--accent)}
.hero h1{font-size:clamp(56px,7vw,116px);line-height:.96;letter-spacing:-.045em;font-weight:700}
.hero p{font-size:24px;line-height:1.4;color:var(--muted-dark);margin-top:28px;max-width:560px}
.hero .actions{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}
.chatwrap{display:flex;flex-direction:column;gap:14px}
.chatwrap>small{color:var(--muted-dark);font-size:13px;padding-left:4px}
.ask{border-radius:24px;background:var(--card);color:var(--ink);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.ask-top{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line);font-size:15px}
.ask-top .spark{width:28px;height:28px;border-radius:8px;background:var(--surface);color:var(--accent);display:grid;place-items:center;font-size:14px}
.ask-top .new{margin-left:auto;font-size:13px;color:var(--muted);border:1px solid var(--line);padding:5px 10px;border-radius:999px}
.ask-body{padding:22px 20px;display:flex;flex-direction:column;gap:18px;background:#fafaf9}
.ask .q{align-self:flex-end;background:var(--surface);color:var(--on-dark);padding:12px 16px;border-radius:18px 18px 4px 18px;font-size:15px;line-height:1.45;max-width:82%}
.ask .a{display:flex;gap:12px}
.ask .dot{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--surface);flex:none;display:grid;place-items:center;font-size:13px}
.ask .a p{font-size:15px;line-height:1.55;color:var(--ink);margin:2px 0 0}
.ask .src{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ask .src span{display:inline-flex;align-items:center;gap:7px;font-size:13px;padding:6px 11px 6px 7px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted)}
.ask .src i{width:16px;height:16px;border-radius:50%;background:var(--line)}
.ask .src .you{border-color:var(--surface);color:var(--surface);font-weight:600;box-shadow:0 0 0 3px var(--accent)}
.ask .src .you i{background:var(--accent)}
.ask-input{display:flex;align-items:center;justify-content:space-between;margin:0 16px 16px;padding:10px 10px 10px 18px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:14px;background:var(--card)}
.ask-input i{width:34px;height:34px;border-radius:50%;background:var(--surface);color:var(--on-dark);display:grid;place-items:center;font-style:normal}
.stats{display:grid;grid-template-columns:1.3fr repeat(4,1fr);border-top:1px solid var(--line-dark)}
.stats>div{padding:28px 32px;border-right:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center}
.stats>div:last-child{border-right:0}
.stats img{height:28px;width:auto;filter:brightness(0) invert(1);opacity:.65}
.stats .big{justify-content:flex-start;gap:16px}
.stats .big b{font-size:44px;letter-spacing:-.04em;line-height:1;color:var(--accent)}
.stats .big span{font-size:15px;line-height:1.3;max-width:180px;color:var(--muted-dark)}

/* sections */
.sec{padding:120px 0}
.head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:48px;padding:0 24px}
.head h2{font-size:clamp(40px,4.8vw,72px);line-height:1.02;letter-spacing:-.04em;font-weight:700;max-width:860px}
.head p{font-size:20px;color:var(--muted);max-width:440px;line-height:1.45}

/* problem */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pain{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:56px}
.pain .n{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-family:"Geist Mono",monospace;font-size:14px;color:var(--muted)}
.pain p{font-size:24px;line-height:1.3;letter-spacing:-.015em;font-weight:500}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{border-radius:28px;padding:36px;min-height:360px;display:flex;flex-direction:column}
.step .mono{opacity:.7}
.step h3{font-size:34px;letter-spacing:-.03em;line-height:1.08;font-weight:600;margin-top:auto}
.step p{font-size:18px;line-height:1.5;margin-top:14px}
.s1{background:var(--card);border:1px solid var(--line)}.s1 p{color:var(--muted)}
.s2{background:var(--surface-2);color:var(--on-dark)}.s2 p{color:var(--muted-dark)}
.s3{background:var(--surface);color:var(--on-dark)}.s3 p{color:var(--muted-dark)}
.s3 .mono{color:var(--accent);opacity:1}

/* bento services */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(300px,auto);gap:16px}
.tile{border-radius:28px;padding:36px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .25s}
.tile:hover{transform:translateY(-4px)}
.tile .mono{opacity:.7}
.tile h3{font-size:38px;letter-spacing:-.03em;line-height:1.05;font-weight:600;margin-top:auto;max-width:520px}
.tile p{font-size:18px;line-height:1.45;margin-top:12px;max-width:460px}
.tile .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tile .chips span{font-size:13px;padding:7px 12px;border-radius:999px}
.t1{grid-column:span 3;background:var(--surface);color:var(--on-dark)}
.t1 p{color:var(--muted-dark)}.t1 .chips span{border:1px solid var(--line-dark);color:var(--muted-dark)}
.t2{grid-column:span 3;background:var(--accent);color:var(--surface)}
.t2 .chips span{background:rgba(0,39,38,.1)}
.t3{grid-column:span 3;background:var(--card);border:1px solid var(--line)}
.t3 p{color:var(--muted)}.t3 .chips span{background:var(--paper);color:var(--muted)}
.t4{grid-column:span 3;background:var(--card);border:1px solid var(--line)}
.t4 p{color:var(--muted)}.t4 .chips span{background:var(--paper);color:var(--muted)}
.t1 .orb{position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#7cbf78,#0e4a46 70%)}
.t2 .orb{position:absolute;right:28px;top:28px;width:72px;height:72px;border-radius:50%;background:var(--surface)}
.tag{display:inline-flex;align-self:flex-start;font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;background:var(--surface);color:var(--accent);margin-bottom:14px}

/* audience */
.aud{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.au{grid-column:span 2;border-radius:28px;padding:36px;min-height:340px;transition:transform .25s;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line)}
.au:nth-child(-n+2){grid-column:span 3}
.au:hover{transform:translateY(-4px)}
.au .go{margin-top:24px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.au .go i{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--surface);display:grid;place-items:center;font-style:normal}
.au h3{font-size:34px;letter-spacing:-.03em;line-height:1.05;font-weight:600;margin-top:auto;max-width:520px}
.au p{font-size:18px;line-height:1.45;color:var(--muted);margin-top:16px;max-width:520px}
.au .ic{width:64px;height:64px;border-radius:18px;background:var(--paper);display:grid;place-items:center}
.au--dark{background:var(--surface);color:var(--on-dark);border:0}.au--dark p{color:var(--muted-dark)}.au--dark .ic{background:var(--surface-2)}

/* cases */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.case{border-radius:28px;overflow:hidden;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}
.case .img{aspect-ratio:4/3;position:relative;display:flex;align-items:flex-end;padding:24px}
.case .img .ph{font-size:13px;color:inherit;opacity:.6}
.case .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case .img .mono{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.92);padding:8px 12px;border-radius:999px;font-size:12px;color:var(--ink)}
.c1 .img{background:var(--surface-2);color:var(--on-dark)}
.c2 .img{background:#e9f6e1;color:var(--surface)}
.c3 .img{background:#dfe5e3;color:var(--surface)}
.case .body{padding:28px;display:flex;flex-direction:column;gap:14px;flex:1}
.case .years{font-family:"Geist Mono",monospace;font-size:13px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.case h3{font-size:23px;line-height:1.3;letter-spacing:-.015em;font-weight:600}
.case .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.case .go i{width:40px;height:40px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-style:normal}
.more{display:flex;justify-content:center;margin-top:40px}

/* why */
.why{background:var(--surface);color:var(--on-dark);border-radius:36px;padding:96px 72px}
.why .head h2{max-width:1180px}
.why .head{padding:0}.why .head p{color:var(--muted-dark)}
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.reason{border-top:1px solid var(--line-dark);padding-top:28px}
.reason b{display:block;font-size:28px;letter-spacing:-.02em;font-weight:600}
.reason p{font-size:18px;line-height:1.5;color:var(--muted-dark);margin-top:12px;max-width:380px}
.reason .mono{color:var(--accent);display:block;margin-bottom:20px}

/* opinions */
.ops{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.op{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:28px}
.op .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.op .top img{height:26px;width:auto;filter:brightness(0);opacity:.75}
.op .top .lg-ph{font-family:"Geist Mono",monospace;font-size:12px;color:var(--muted);border:1px dashed var(--line);padding:6px 10px;border-radius:8px}
.op .mark{font-size:64px;line-height:.6;color:var(--accent);font-weight:700}
.op p{font-size:19px;line-height:1.5}
.op .who{margin-top:auto;display:flex;align-items:center;gap:12px}
.op .av{width:44px;height:44px;border-radius:50%;background:var(--surface);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:15px}
.op b{display:block;font-size:15px}.op small{color:var(--muted);font-size:13px}

/* CTA */
.cta{background:var(--accent);color:var(--surface);border-radius:36px;padding:96px 72px;margin:16px 0;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end}
.cta h2{font-size:clamp(44px,5.6vw,88px);line-height:.95;letter-spacing:-.05em;font-weight:700}
.cta p{font-size:22px;line-height:1.45;margin-top:24px;max-width:540px}
.cta .card{background:var(--surface);color:var(--on-dark);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:18px}
.cta .card .top{display:flex;gap:16px;align-items:center}
.cta .card img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.cta .card b{font-size:20px;display:block}.cta .card small{color:var(--muted-dark)}
.cta .card .tel{font-size:28px;font-weight:600;color:var(--accent)}

.footer{padding:56px 24px 36px;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer .addr{color:var(--muted);line-height:1.7;margin-top:20px}
.footer nav{display:flex;gap:28px;color:var(--muted);font-size:15px;flex-wrap:wrap;align-items:flex-start}

@media (max-width:960px){
.wrap{padding:0 16px}.nav{display:none}
.bar{padding:0 6px 0 16px}.logo{width:80px}.right{gap:8px}
.bar .btn{height:42px;padding:0 16px;font-size:14px;white-space:nowrap}
.lang a{min-width:32px;height:30px;padding:0 6px}
.hero-in{grid-template-columns:1fr;padding:48px 24px;gap:40px}
.hero h1{font-size:50px}.hero p{font-size:20px}.tile .orb{display:none}
.stats{grid-template-columns:1fr 1fr}.stats .big{grid-column:span 2}
.stats>div:nth-child(3),.stats>div:nth-child(5){border-right:0}
.head{flex-direction:column;align-items:start;padding:0}
.sec{padding:80px 0}
.pains,.steps,.cases,.ops,.reasons,.aud{grid-template-columns:1fr}
.bento{grid-template-columns:1fr}.t1,.t2,.t3,.t4{grid-column:auto}
.tile h3,.au h3{font-size:30px}.step{min-height:280px}.step h3{font-size:28px}
.au,.au:nth-child(-n+2){grid-column:auto;padding:32px;min-height:280px}
.why{padding:56px 24px}.why .head h2{font-size:34px}.cta h2{font-size:42px}
.cta{grid-template-columns:1fr;padding:48px 24px}
.footer{padding:48px 0}
}

/* before / after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ba-col{border-radius:28px;padding:44px;display:flex;flex-direction:column}
.ba-col>.mono{color:var(--muted)}
.ba-col ul{list-style:none;display:flex;flex-direction:column;margin-top:28px}
.ba-col li{display:flex;gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.ba-col li i{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:15px;font-weight:700}
.ba-col li b{display:block;font-size:22px;letter-spacing:-.015em;line-height:1.25;font-weight:600}
.ba-col li p{font-size:17px;line-height:1.5;margin-top:6px}
.ba-now{background:var(--card);border:1px solid var(--line)}
.ba-now li i{background:#f1e4e1;color:#9c3b2c}.ba-now li p{color:var(--muted)}
.ba-good{background:var(--surface);color:var(--on-dark)}
.ba-good>.mono{color:var(--accent)}
.ba-good li{border-top-color:var(--line-dark)}.ba-good li i{background:var(--accent);color:var(--surface)}.ba-good li p{color:var(--muted-dark)}
.ba-link{margin-top:auto;padding-top:24px;display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.ba-link i{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--surface);display:grid;place-items:center;font-style:normal}
@media (max-width:960px){.ba{grid-template-columns:1fr}.ba-col{padding:28px 22px}.ba-col li b{font-size:19px}}

/* subpages */
.nav a[aria-current]{color:var(--ink);font-weight:600}
.phero{border-radius:36px;background:var(--surface);color:var(--on-dark);margin-top:8px;padding:72px 72px 56px}
.crumbs{font-size:14px;color:var(--muted-dark)}.crumbs a{color:var(--on-dark)}
.phero h1{font-size:clamp(48px,6vw,96px);line-height:.98;letter-spacing:-.045em;font-weight:700;margin-top:28px;max-width:1400px}
.phero p{font-size:22px;line-height:1.45;color:var(--muted-dark);margin-top:24px;max-width:720px}
.jump{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:56px}
.jump a{border:1px solid var(--line-dark);border-radius:20px;padding:20px 22px;display:flex;flex-direction:column;gap:22px;transition:background .2s}
.jump a:hover{background:rgba(245,245,244,.06)}
.jump .mono{color:var(--accent)}
.jump b{font-size:18px;line-height:1.25;font-weight:600}
.svc{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;margin-top:16px}
.svc-main{border-radius:28px;padding:48px;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line)}
.svc-main .mono{color:var(--muted)}
.svc-main h2{font-size:clamp(36px,3.6vw,56px);line-height:1.02;letter-spacing:-.04em;font-weight:700;margin-top:24px}
.svc-main .lead{font-size:20px;line-height:1.5;color:var(--muted);margin-top:20px;max-width:540px}
.when{margin-top:auto;padding-top:40px}
.when b{display:block;font-size:15px;margin-bottom:12px}
.when li{list-style:none;font-size:17px;line-height:1.5;padding-left:22px;position:relative;margin-top:6px}
.when li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.svc-side{display:flex;flex-direction:column;gap:16px}
.scope{border-radius:28px;padding:40px;background:var(--card);border:1px solid var(--line);flex:1}
.scope>b{display:block;font-size:15px;margin-bottom:18px}
.scope ul{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scope li{list-style:none;background:var(--paper);border-radius:16px;padding:16px 18px;font-size:16px;line-height:1.4;font-weight:600}
.scope li small{display:block;color:var(--muted);font-size:14px;margin-top:4px;font-weight:400}
.get{border-radius:28px;padding:32px 40px;background:var(--surface);color:var(--on-dark);display:flex;justify-content:space-between;align-items:center;gap:24px}
.get .mono{color:var(--accent);display:block;margin-bottom:8px}
.get p{font-size:19px;line-height:1.45;max-width:520px}
.get a{flex:none;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px}
.get a i,.go-i{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--surface);display:grid;place-items:center;font-style:normal}
.svc--accent .svc-main{background:var(--accent);border:0;color:var(--surface)}
.svc--accent .svc-main .mono,.svc--accent .svc-main .lead{color:var(--surface)}
.svc--accent .when li::before{background:var(--surface)}
.honest{margin-top:24px;padding:16px 18px;border-radius:16px;background:rgba(0,39,38,.08);font-size:15px;line-height:1.5;max-width:560px}
.svc--dark .svc-main{background:var(--surface);color:var(--on-dark);border:0}
.svc--dark .svc-main .mono,.svc--dark .svc-main .lead{color:var(--muted-dark)}
.sol-teaser{display:flex;flex-wrap:wrap;gap:10px;padding:0 24px}
.sol-teaser a{display:inline-flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:14px 20px;font-weight:600;font-size:16px}
.sol-teaser a:hover{border-color:var(--surface)}
.sol-teaser .all{background:var(--surface);color:var(--on-dark);border-color:var(--surface)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{border-radius:28px;padding:36px;min-height:320px;display:flex;flex-direction:column}
.step .mono{opacity:.7}
.step h3{font-size:30px;letter-spacing:-.03em;line-height:1.08;font-weight:600;margin-top:auto}
.step p{font-size:17px;line-height:1.5;margin-top:14px}
.s1{background:var(--card);border:1px solid var(--line)}.s1 p{color:var(--muted)}
.s2{background:var(--surface-2);color:var(--on-dark)}.s2 p{color:var(--muted-dark)}
.s3{background:var(--surface);color:var(--on-dark)}.s3 p{color:var(--muted-dark)}.s3 .mono{color:var(--accent);opacity:1}
.cat-g{display:grid;grid-template-columns:300px 1fr;gap:32px;border-top:1px solid var(--line);padding:40px 24px}
.cat-g:last-of-type{border-bottom:1px solid var(--line)}
.cat-g h2{font-size:32px;letter-spacing:-.03em;line-height:1.1;font-weight:700}
.cat-g .mono{color:var(--muted);display:block;margin-bottom:14px}
.cat-g .gl{font-size:16px;line-height:1.5;color:var(--muted);margin-top:12px;max-width:260px}
.cat-g ul{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cat-g li{list-style:none}
.sol{display:flex;flex-direction:column;gap:10px;height:100%;min-height:200px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;transition:border-color .2s,transform .2s}
.sol:hover{border-color:var(--surface);transform:translateY(-3px)}
.sol b{font-size:20px;letter-spacing:-.015em;line-height:1.25;font-weight:600}
.sol p{font-size:15px;line-height:1.5;color:var(--muted)}
.sol .ft{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.sol .tags{display:flex;flex-wrap:wrap;gap:6px}
.sol .tags span{font-size:12px;padding:5px 9px;border-radius:999px;background:var(--paper);color:var(--muted)}
.sol .go-i{width:34px;height:34px;flex:none;font-size:14px}
.sol--hl{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.sol--hl p{color:var(--surface)}.sol--hl .tags span{background:rgba(0,39,38,.1);color:var(--surface)}.sol--hl .go-i{background:var(--surface);color:var(--accent)}
.cat-note{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:24px;padding:28px 32px;border-radius:24px;background:var(--surface);color:var(--on-dark)}
.cat-note p{font-size:20px}
.faq{display:grid;grid-template-columns:1fr 1.6fr;gap:48px;padding:0 24px}
.faq h2{font-size:clamp(40px,4.8vw,72px);line-height:1.02;letter-spacing:-.04em;font-weight:700}
.faq details{border-top:1px solid var(--line);padding:24px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;font-size:22px;font-weight:600;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:28px;line-height:1;color:var(--muted)}
.faq details[open] summary::after{content:"-"}
.faq details p{font-size:18px;line-height:1.55;color:var(--muted);margin-top:14px;max-width:720px}
@media (max-width:1200px){.cat-g ul{grid-template-columns:repeat(2,1fr)}.jump{grid-template-columns:repeat(3,1fr)}}
@media (max-width:960px){
.phero{padding:48px 24px 32px}.phero h1{font-size:42px}.phero p{font-size:19px}
.jump{grid-template-columns:1fr 1fr}
.svc{grid-template-columns:1fr}.svc-main{padding:32px 24px}.svc-main h2{font-size:34px}.scope{padding:28px 20px}.scope ul{grid-template-columns:1fr}
.get{flex-direction:column;align-items:flex-start;padding:28px 24px}
.steps{grid-template-columns:1fr}.step{min-height:240px}.step h3{font-size:26px}
.sol-teaser{padding:0}
.cat-g{grid-template-columns:1fr;gap:20px;padding:32px 0}.cat-g ul{grid-template-columns:1fr}.sol{min-height:0}
.cat-note{flex-direction:column;align-items:flex-start;padding:24px}
.faq{grid-template-columns:1fr;padding:0;gap:24px}.faq h2{font-size:40px}.faq summary{font-size:19px}
}

/* kontrola przed startem 24.10: logotypy bez zniekształceń, nagłówki tylko dla czytników */
.stats img{object-fit:contain;max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* cookies */
.cc{position:fixed;left:16px;bottom:16px;z-index:200;max-width:420px;background:#fff;color:#0f1a19;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:18px 20px;box-shadow:0 12px 40px rgba(0,0,0,.14);display:none;font-size:14px;line-height:1.5}
.cc.on{display:block}
.cc p{margin:0 0 14px}
.cc a{text-decoration:underline}
.cc-b{display:flex;gap:10px;justify-content:flex-end}
.cc-b .btn{padding:10px 18px;font-size:14px}
@media (max-width:520px){.cc{right:16px;max-width:none}.cc-b .btn{flex:1}}
.flegal .cc-open{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;opacity:inherit}
/* site */
.ph{display:inline-block;font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.02em;color:#8a5a00;background:#fff4d6;border:1px dashed #e0b44a;border-radius:8px;padding:4px 8px}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--ink);box-shadow:0 6px 0 var(--ink),0 -6px 0 var(--ink)}
.footer{display:block;padding-left:0 !important;padding-right:0 !important}
.fcols{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:32px}
.fcols b{display:block;font-size:14px;margin-bottom:14px}
.fcols ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.fcols li a{color:var(--muted);font-size:14px}
.fcols li a:hover{color:var(--ink)}
.fbottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.phero .actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.phero .tags{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.phero .tags a,.phero .tags span{font-size:13px;padding:7px 12px;border-radius:999px;border:1px solid var(--line-dark);color:var(--muted-dark)}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bx{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:14px}
.bx .n{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-family:"Geist Mono",monospace;font-size:13px;color:var(--muted)}
.bx h3{font-size:22px;line-height:1.25;letter-spacing:-.015em;font-weight:600}
.bx p{font-size:16px;line-height:1.5;color:var(--muted)}
.bx--big p{font-size:21px;line-height:1.35;color:var(--ink);font-weight:500;letter-spacing:-.01em}
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none}
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.case .img{aspect-ratio:16/10}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;padding:0 24px}
.filters button{font:inherit;font-size:15px;font-weight:600;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);cursor:pointer}
.filters button.on{background:var(--surface);color:var(--on-dark);border-color:var(--surface)}
.cs-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-top:16px}
.cs-img{border-radius:28px;background:var(--surface-2);aspect-ratio:16/9;display:flex;align-items:flex-end;padding:28px;color:var(--on-dark)}
.cs-body{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:44px;margin-top:16px}
.cs-body h2{font-size:30px;letter-spacing:-.025em;font-weight:700;margin-bottom:18px}
.cs-body h2:not(:first-child){margin-top:40px}
.cs-body li{font-size:18px;line-height:1.5;margin-left:20px;margin-top:8px}
.cs-side{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:24px;align-self:start;position:sticky;top:100px}
.cs-side .mono{color:var(--muted);display:block;margin-bottom:8px;font-size:12px}
.cs-side a{text-decoration:underline;text-underline-offset:3px}
.cs-side .list{display:flex;flex-direction:column;gap:6px;font-size:16px}
.bq{background:var(--surface);color:var(--on-dark);border-radius:28px;padding:44px;margin-top:16px}
.bq p{font-size:26px;line-height:1.4;letter-spacing:-.015em}
.bq b{display:block;margin-top:24px}.bq small{color:var(--muted-dark)}
.stat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.stat>div{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px}
.stat b{display:block;font-size:56px;letter-spacing:-.04em;line-height:1;color:var(--surface)}
.stat span{display:block;margin-top:12px;color:var(--muted);font-size:16px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.split>div{border-radius:28px;padding:44px}
.split h3{font-size:32px;letter-spacing:-.03em;font-weight:700}
.split ul{margin-top:20px;list-style:none;display:flex;flex-direction:column;gap:10px}
.split li{font-size:18px;padding-left:22px;position:relative}
.split li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.form{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{font:inherit;font-size:16px;font-weight:400;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.form textarea{min-height:140px;resize:vertical}
.form .check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;color:var(--muted);line-height:1.5}
.form .check input{margin-top:4px}
.contact-side{display:flex;flex-direction:column;gap:16px}
.contact-side .box{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:32px;line-height:1.7}
.contact-side .box .mono{color:var(--muted);display:block;margin-bottom:10px}

.case .img .ph{opacity:1;color:#8a5a00}
.cs-layout>*{min-width:0}
.form input,.form select,.form textarea{width:100%;min-width:0}
.phero h1{hyphens:auto;overflow-wrap:break-word}


/* full-width header */
.header .nav{gap:40px}
.header{position:sticky;top:0;z-index:30;padding:0;border-bottom:1px solid transparent;transition:background .25s,border-color .25s,box-shadow .25s}
.header .bar{max-width:1480px;margin:0 auto;height:80px;padding:0 24px;border:0;border-radius:0;background:transparent;backdrop-filter:none}
.header.scrolled{background:#fff;border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(0,39,38,.06)}
.header .menu{padding-top:28px}

/* decorations */
html,body{overflow-x:clip}
.dotgrid{position:absolute;right:-34px;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(3,92px);gap:22px;pointer-events:none;z-index:0}
.dotgrid i{width:92px;height:92px;border-radius:50%;opacity:var(--o);background:radial-gradient(circle at 32% 28%,#c9f2ae,#5f9f6b 55%,#1f5a50 100%)}
.phero,.hero,.why,.cta{position:relative;overflow:hidden}
.phero>*:not(.dotgrid),.hero>*:not(.dotgrid),.why>*:not(.dotgrid):not(.orb-deco),.cta>*:not(.orb-deco){position:relative;z-index:1}
.hero .dotgrid{top:auto;bottom:118px;transform:none;right:-46px}
.why .dotgrid{top:64px;transform:none;right:-46px;grid-template-columns:repeat(3,72px);gap:18px}.why .dotgrid i{width:72px;height:72px}
.orb-deco{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.why .orb-deco{width:340px;height:340px;left:-120px;bottom:-160px;background:radial-gradient(circle at 30% 30%,#7cbf78,#0e4a46 70%);opacity:.55}
.cta .orb-deco{width:420px;height:420px;right:-140px;top:-180px;background:radial-gradient(circle at 35% 35%,#e6fbd6,#ade88c 45%,#7cbf78 75%);box-shadow:inset -30px -40px 80px rgba(0,39,38,.18)}
.sec{position:relative}
.sec:nth-of-type(3n+1)::before,.sec:nth-of-type(3n+2)::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle at 40% 40%,rgba(173,232,140,.55),rgba(173,232,140,0) 68%)}
.sec:nth-of-type(3n+1)::before{right:-260px;top:-80px}
.sec:nth-of-type(3n+2)::after{left:-280px;bottom:-120px;background:radial-gradient(circle at 40% 40%,rgba(14,74,70,.16),rgba(14,74,70,0) 68%)}
.t3,.t4{position:relative;overflow:hidden}
.t3::after,.t4::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-30px;bottom:-30px;background:radial-gradient(circle at 32% 28%,#c9f2ae,#5f9f6b 60%,#1f5a50);opacity:.85}
.t3::after,.t4::after{width:64px;height:64px;right:36px;top:36px;bottom:auto;opacity:1;background:radial-gradient(circle at 32% 28%,#e6fbd6,#ade88c 60%)}

.cs-img.has-img{padding:0;overflow:hidden;background:var(--paper)}.cs-img.has-img img{width:100%;height:100%;object-fit:cover}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.gallery img{width:100%;border-radius:20px;border:1px solid var(--line);background:#fff}
@media (max-width:960px){.dotgrid{grid-template-columns:repeat(3,56px);gap:12px;right:-20px}.dotgrid i{width:56px;height:56px}.hero .dotgrid{bottom:auto;top:24px;opacity:.5}.phero .dotgrid{opacity:.45}.gallery{grid-template-columns:1fr}.cta .orb-deco{width:240px;height:240px;right:-90px;top:-100px}}

/* bento hover: small flat dot -> moves into the corner and turns 3D */
.tile>*:not(.orb){position:relative;z-index:1}
.t3::after,.t4::after{content:"";width:64px !important;height:64px !important;right:36px !important;top:36px !important;bottom:auto !important;background:#ade88c !important;opacity:1 !important;transform-origin:50% 50%;transition:transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .8s ease}
.t3:hover::after,.t4:hover::after{transform:translate(58px,-58px) scale(3);box-shadow:inset -9px -11px 17px rgba(0,39,38,.36),inset 7px 6px 12px rgba(255,255,255,.75)}
.tile .orb{transition:transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .8s ease}
.t2 .orb{width:72px !important;height:72px !important;right:28px !important;top:28px !important;transform-origin:50% 50%}
.t2:hover .orb{transform:translate(62px,-62px) scale(2.7);box-shadow:inset 8px 7px 14px rgba(173,232,140,.5),inset -9px -11px 17px rgba(0,0,0,.45)}
.t1:hover .orb{transform:translate(-18px,18px) scale(1.06)}
@media (prefers-reduced-motion:reduce){.t3::after,.t4::after,.tile .orb{transition:none}}
@media (max-width:960px){.t2 .orb{display:none}}
/* about stats */
.stat>div{position:relative;overflow:hidden;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:28px;padding:36px}
.stat b{font-size:clamp(64px,7vw,104px);letter-spacing:-.05em;font-weight:700}
.stat span{font-size:18px}
.stat>div::after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-50px;top:-50px;transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .7s ease}
.stat>div:hover::after{transform:scale(1.14) rotate(-10deg)}
.st1{background:var(--surface) !important;border:0 !important;color:var(--on-dark)}.st1 b{color:var(--accent) !important}.st1 span{color:var(--muted-dark) !important}
.st1::after{background:#0a3a37}.st1:hover::after{box-shadow:inset 22px 20px 40px rgba(173,232,140,.4),inset -26px -32px 50px rgba(0,0,0,.45)}
.st2{background:var(--accent) !important;border:0 !important}.st2 b,.st2 span{color:var(--surface) !important}
.st2::after{background:var(--surface)}.st2:hover::after{box-shadow:inset 22px 20px 40px rgba(173,232,140,.5),inset -26px -32px 50px rgba(0,0,0,.45)}
.st3::after{background:#ade88c}.st3:hover::after{box-shadow:inset -26px -32px 52px rgba(0,39,38,.38),inset 20px 18px 36px rgba(255,255,255,.75)}
.stat>div>*{position:relative;z-index:1}

/* group section */
.grp{background:var(--surface);color:var(--on-dark);border-radius:36px;padding:72px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px 56px;align-items:center;position:relative;overflow:hidden}
.grp-head .mono{color:var(--accent)}
.grp-head h2{font-size:clamp(40px,4.6vw,68px);line-height:1.02;letter-spacing:-.04em;font-weight:700;margin-top:18px}
.grp-head p{font-size:20px;line-height:1.5;color:var(--muted-dark);margin-top:20px;max-width:560px}
.venn{position:relative;height:380px;max-width:440px;width:100%;justify-self:center}
.venn span{position:absolute;width:230px;height:230px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.venn .v1{left:0;top:0;background:rgba(173,232,140,.16);border:1px solid rgba(173,232,140,.45);padding:0 56px 56px 0}
.venn .v3{right:0;top:0;background:rgba(173,232,140,.16);border:1px solid rgba(173,232,140,.45);padding:0 0 56px 56px}
.venn .v2{left:50%;bottom:0;margin-left:-115px;background:var(--accent);color:var(--surface);padding-top:70px;mix-blend-mode:normal;opacity:.92}
.venn b{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:var(--surface);color:var(--accent);padding:8px 12px;border-radius:999px;border:1px solid var(--accent);white-space:nowrap;z-index:2}

.venn span{background:rgba(173,232,140,.14) !important;border:1px solid rgba(173,232,140,.45) !important;color:inherit !important;opacity:1 !important;transition:background .4s,border-color .4s,opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.venn span{padding:0 !important}
.venn span img{height:22px;width:auto;max-width:120px;filter:brightness(0) invert(1);transition:filter .4s}
.venn .v2{background:var(--accent) !important;border-color:var(--accent) !important}.venn .v2 img{filter:brightness(0)}
.grp:has(.gc:hover) .venn span{opacity:.4 !important;background:rgba(173,232,140,.08) !important;border-color:rgba(173,232,140,.3) !important}
.grp:has(.gc:hover) .venn span img{filter:brightness(0) invert(1)}
.grp:has(.gc[data-c=whites]:hover) .v1,.grp:has(.gc[data-c=goodc]:hover) .v2,.grp:has(.gc[data-c=vecton]:hover) .v3{opacity:1 !important;background:var(--accent) !important;border-color:var(--accent) !important;transform:scale(1.06)}
.grp:has(.gc[data-c=whites]:hover) .v1 img,.grp:has(.gc[data-c=goodc]:hover) .v2 img,.grp:has(.gc[data-c=vecton]:hover) .v3 img{filter:brightness(0)}
.gc{transition:border-color .3s,background .3s;cursor:default}.gc:hover{border-color:var(--accent)}
.gc .lg{height:26px;width:auto;filter:brightness(0) invert(1)}.gc--you .lg{filter:brightness(0)}
.grp-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gc{border:1px solid var(--line-dark);border-radius:24px;padding:28px}
.gc .mono{color:var(--accent)}
.gc h3{font-size:24px;letter-spacing:-.02em;font-weight:600;margin-top:12px}
.gc ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px;color:var(--muted-dark);font-size:16px}
.gc li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:2px}
.gc--you{background:var(--accent);color:var(--surface);border-color:var(--accent)}
.gc--you .mono,.gc--you ul{color:var(--surface)}.gc--you li::before{background:var(--surface)}
/* flow */
.flow ol{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;position:relative;padding-top:34px}
.flow ol::before{content:"";position:absolute;left:20px;right:20px;top:20px;height:2px;background:linear-gradient(90deg,var(--surface),var(--accent))}
.flow li{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px 22px;display:flex;flex-direction:column;gap:10px}
.flow .fn{position:absolute;top:-34px;left:16px;width:30px;height:30px;border-radius:50%;background:var(--surface);color:var(--accent);display:grid;place-items:center;font-family:"Geist Mono",monospace;font-size:11px;box-shadow:0 0 0 5px var(--paper)}
.flow h3{font-size:20px;letter-spacing:-.015em;line-height:1.2;font-weight:600}
.flow p{font-size:15px;line-height:1.5;color:var(--muted)}
.fget{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:15px;font-weight:600;line-height:1.35}
.fget .mono{display:block;font-size:11px;color:var(--muted);margin-bottom:6px;font-weight:400}
.flow .fkey{background:var(--accent);border-color:var(--accent)}.flow .fkey p,.flow .fkey .fget .mono{color:var(--surface)}.flow .fkey .fget{border-color:rgba(0,39,38,.2)}
.flow .floop{background:var(--surface);color:var(--on-dark);border-color:var(--surface)}.flow .floop p,.flow .floop .fget .mono{color:var(--muted-dark)}.flow .floop .fget{border-color:var(--line-dark)}
.flow .floop .fn{background:var(--accent);color:var(--surface);font-size:16px}
@media (max-width:1200px){.flow ol{grid-template-columns:repeat(3,1fr);row-gap:44px}.flow ol::before{display:none}}
@media (max-width:960px){.grp{grid-template-columns:1fr;padding:40px 22px}.venn{height:300px;transform:scale(.8)}.grp-cards{grid-template-columns:1fr}
.flow ol{grid-template-columns:1fr;row-gap:12px;padding-top:0;padding-left:44px}.flow ol::before{display:block;left:15px;right:auto;top:10px;bottom:10px;width:2px;height:auto;background:linear-gradient(180deg,var(--surface),var(--accent))}
.flow .fn{top:22px;left:-44px}}

/* contact */
.cta .card .mail{color:var(--on-dark);font-size:17px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(173,232,140,.5)}
.kt{margin-top:8px;border-radius:36px;background:var(--surface);color:var(--on-dark);display:grid;grid-template-columns:1.5fr 1fr;gap:48px;padding:60px 72px;align-items:center;position:relative;overflow:hidden}
.kt>*:not(.dotgrid){position:relative;z-index:1}
.kt h1{font-size:clamp(48px,6vw,96px);line-height:.98;letter-spacing:-.045em;font-weight:700;margin-top:28px}
.kt-lead{font-size:21px;line-height:1.5;color:var(--muted-dark);margin-top:22px;max-width:600px}
.kt-line{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-dark)}
.kt-lead+.kt-line{margin-top:36px}
.kt-line .mono{color:var(--accent);display:block;margin-bottom:6px}
.kt-big{display:inline-block;font-size:clamp(30px,3.8vw,54px);letter-spacing:-.035em;font-weight:600;line-height:1.1;border-bottom:3px solid var(--accent);padding-bottom:4px;transition:color .2s}
.kt-big:hover{color:var(--accent)}
.kt-btns{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.kt-copy{font:inherit;font-weight:600;font-size:16px;cursor:pointer}
.kt-person{background:var(--surface-2);border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:6px}
.kt-photo{width:220px;height:auto;border-radius:0;overflow:visible;background:none;margin-bottom:18px}
.kt-photo img{width:100%;height:auto;display:block}
.kt-person b{font-size:22px}.kt-person span{color:var(--muted-dark)}
.kt-person p{margin-top:14px;font-size:16px;line-height:1.55;color:var(--muted-dark)}
.kt-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kt-steps>div{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:12px}
.kt-steps .n{font-family:"Geist Mono",monospace;font-size:13px;color:var(--muted)}
.kt-steps h3{font-size:24px;letter-spacing:-.02em;font-weight:600;margin-top:28px}.kt-steps p{color:var(--muted);font-size:17px;line-height:1.5}
.kt-prep{background:var(--accent);border-radius:32px;padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;color:var(--surface)}
.kt-prep h2{font-size:clamp(30px,3vw,44px);letter-spacing:-.03em;line-height:1.08;font-weight:700;margin-top:12px}
.kt-prep ul{list-style:none;display:flex;flex-direction:column}
.kt-prep li{font-size:19px;font-weight:500;padding:14px 0;border-top:1px solid rgba(0,39,38,.2)}
.kt-prep li:last-child{border-bottom:1px solid rgba(0,39,38,.2)}
.kt-info{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kt-info>div{border-top:2px solid var(--surface);padding-top:22px}
.kt-info .mono{color:var(--muted);display:block;margin-bottom:12px}
.kt-info p{font-size:17px;line-height:1.6}
.kt-info a{display:inline-block;margin-top:12px;font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:4px}
@media (max-width:960px){.kt{grid-template-columns:1fr;padding:40px 22px;gap:32px}.kt h1{font-size:40px}.kt-big{font-size:28px;word-break:break-all}
.kt-person{flex-direction:column}.kt-photo{max-width:220px}.kt-steps,.kt-prep,.kt-info{grid-template-columns:1fr}.kt-prep{padding:28px 22px}}

.kt{grid-template-columns:1fr !important;align-items:start !important}
.kt-row{display:grid;grid-template-columns:auto auto;justify-content:start;gap:0 72px;margin-top:36px}
.kt-row .kt-line{margin-top:0}
.kt-bio{display:grid;grid-template-columns:auto 1.3fr 1fr;gap:40px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:32px;padding:36px 44px}
.kt-bio .kt-photo{width:170px;margin:0}
.kt-bio .mono{color:var(--muted);display:block;margin-bottom:10px}
.kt-bio h2{font-size:34px;letter-spacing:-.03em;font-weight:700;line-height:1.1}
.kt-bio .role{display:block;color:var(--muted);margin-top:4px}
.kt-bio p{font-size:18px;line-height:1.55;margin-top:14px;max-width:520px}
.kt-bio-side{border-left:1px solid var(--line);padding-left:40px;display:flex;flex-direction:column;gap:22px}
.kt-tags{display:flex;flex-wrap:wrap;gap:8px}
.kt-tags em{font-style:normal;align-self:center;color:var(--muted);font-size:16px;padding-left:4px}
.kt-tags span{font-weight:600;font-size:16px;padding:10px 16px;border-radius:999px;background:var(--accent);color:var(--surface)}
.kt-years b{font-size:56px;letter-spacing:-.04em;line-height:1;color:var(--surface)}.kt-years span{display:block;color:var(--muted);margin-top:6px}
@media (max-width:960px){.kt-row{grid-template-columns:1fr;gap:20px}.kt-row .kt-line+.kt-line{margin-top:0}.kt-bio{grid-template-columns:1fr;padding:28px 22px;gap:22px}.kt-bio-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}.kt-bio .kt-photo{width:140px}}

.fsoc{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px}
.fsoc a{font-size:14px;font-weight:600;color:var(--ink)}
.kt-info{grid-template-columns:repeat(4,1fr) !important}
.kt-soc{display:flex;flex-direction:column;gap:6px}.kt-soc a{margin-top:0 !important}
.kt .dotgrid{top:56px;transform:none;right:-40px}
@media (max-width:960px){.kt-info{grid-template-columns:1fr !important}.kt .dotgrid{opacity:.35}}

.fsep{align-self:center;margin:0 6px 0 14px;font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* case study v2 */
.cs2-head{padding:56px 24px 40px}
.cs2-head .crumbs{color:var(--muted)}.cs2-head .crumbs a{color:var(--ink)}
.cs2-title{display:grid;grid-template-columns:1fr 2.4fr;gap:40px;margin-top:40px;align-items:start}
.cs2-title>div{display:flex;flex-direction:column;gap:8px;padding-top:12px}
.cs2-title .mono{color:var(--surface)}.cs2-title .dim{color:var(--muted)}
.cs2-title h1{font-size:clamp(40px,5vw,80px);line-height:1.02;letter-spacing:-.045em;font-weight:700}
.cs2-strip{display:grid;grid-template-columns:2fr 1fr;gap:16px;height:min(62vw,640px)}
.cs2-strip>div{border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.cs2-strip img{width:100%;height:100%;object-fit:cover;object-position:top}
.cs2-strip .big:only-child{grid-column:1/-1}
.ph-box{display:grid;place-items:center;background:var(--surface-2) !important}
.cs2-body{display:grid;grid-template-columns:1fr 2.4fr;gap:40px;padding:96px 24px}
.cs2-facts{position:sticky;top:110px;align-self:start}
.cs2-facts dl>div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--line);font-size:15px}
.cs2-facts dl>div:last-child{border-bottom:1px solid var(--line)}
.cs2-facts dt{color:var(--muted)}.cs2-facts dd{font-weight:500;line-height:1.5}
.cs2-facts dd a{text-decoration:underline;text-underline-offset:3px}
.cs2-facts .sols{display:flex;flex-direction:column;gap:4px}
.cs2-facts>p{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:32px 0 14px}
.cs2-lead{font-size:clamp(24px,2.3vw,34px);line-height:1.35;letter-spacing:-.02em;font-weight:500}
.cs2-main h2{font-family:"Geist Mono",monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400;margin:56px 0 8px}
.cs2-scope{list-style:none}
.cs2-scope li{display:flex;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);font-size:22px;letter-spacing:-.015em;font-weight:500}
.cs2-scope li span{font-family:"Geist Mono",monospace;font-size:13px;color:var(--muted);flex:none}
.cs2-story p{font-size:19px;line-height:1.6;max-width:760px;margin-top:4px}
.cs2-res{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:40px}
.cs2-res div{border:1px solid var(--line);border-radius:24px;padding:24px 28px;background:#fff}
.cs2-res dt{font-size:clamp(28px,3vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1.1}.cs2-res dd{color:var(--muted);margin-top:8px;font-size:15px;line-height:1.45}
.cs2-facts{order:-1}
.cs2-effect{margin-top:40px;background:var(--accent);border-radius:24px;padding:32px;color:var(--surface)}
.cs2-effect .mono{display:block;margin-bottom:10px}.cs2-effect p{font-size:24px;line-height:1.35;letter-spacing:-.015em;font-weight:600}
.cs2-quote{margin-top:40px;background:var(--surface);color:var(--on-dark);border-radius:24px;padding:40px;position:relative;overflow:hidden}
.cs2-quote .mark{font-size:80px;line-height:.5;color:var(--accent);font-weight:700;display:block;margin-bottom:8px}
.cs2-quote p{font-size:24px;line-height:1.4;letter-spacing:-.015em}.cs2-quote b{display:block;margin-top:24px}.cs2-quote small{color:var(--muted-dark)}
.cs2-gal{display:flex;flex-direction:column;gap:16px}
.cs2-gal img{width:100%;display:block;border-radius:28px;border:1px solid var(--line);background:#fff}
.cs2-gal .g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.cs2-gal .g2 img{height:100%;object-fit:cover;object-position:top}
.cs2-next{display:grid;grid-template-columns:1fr 1.2fr;margin:96px 0 16px;border-radius:36px;overflow:hidden;background:var(--surface);color:var(--on-dark);min-height:380px;transition:transform .3s}
.cs2-next:hover{transform:translateY(-4px)}
.cs2-next .im:empty{display:none}.cs2-next:has(.im:empty){grid-template-columns:1fr;min-height:0}
.cs2-next .t{padding:56px;display:flex;flex-direction:column;gap:14px;position:relative}
.cs2-next .t .mono{color:var(--accent)}
.cs2-next h2{font-size:clamp(40px,4.4vw,64px);letter-spacing:-.04em;font-weight:700;line-height:1}
.cs2-next p{color:var(--muted-dark);font-size:18px;line-height:1.5;max-width:460px}
.cs2-next i{margin-top:auto;width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--surface);display:grid;place-items:center;font-style:normal;font-size:20px}
.cs2-next .im img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}
.cs2-next:hover .im img{transform:scale(1.04)}
@media (max-width:960px){.cs2-head{padding:32px 0 24px}.cs2-title,.cs2-body{grid-template-columns:1fr;gap:20px}.cs2-title h1{font-size:36px}
.cs2-strip{grid-template-columns:1fr;height:auto}.cs2-strip>div{aspect-ratio:4/3}.cs2-body{padding:48px 0}.cs2-facts{position:static}
.cs2-scope li{font-size:18px}.cs2-gal .g2{grid-template-columns:1fr}.cs2-next{grid-template-columns:1fr}.cs2-next .t{padding:32px 24px}.cs2-next .im{aspect-ratio:16/10}}
.p-kontakt .kt+.sec::after{background:radial-gradient(circle at 40% 40%,rgba(173,232,140,.55),rgba(173,232,140,0) 68%);top:-300px;bottom:auto}
.p-kontakt .sec:has(.kt-prep)::before{display:none}
.p-kontakt .sec:has(.kt-info)::after{left:auto;right:-280px;top:-260px;bottom:auto}

/* industry hero photo */
.phero--col{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.phero--col h1{font-size:clamp(40px,4.6vw,72px) !important}
.ph-col{position:relative;height:480px}
.ph-photo{position:absolute;inset:0;border-radius:28px;overflow:hidden;background:var(--surface-2)}
.ph-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);mix-blend-mode:luminosity;opacity:.9}
.ph-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(173,232,140,.28),rgba(0,39,38,.55) 70%);mix-blend-mode:multiply}
.ph-card{position:absolute;left:-28px;bottom:-24px;width:56%;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.35);border:4px solid var(--surface);aspect-ratio:16/10;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.ph-card:hover{transform:translateY(-4px)}
.ph-card img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.ph-card span{position:absolute;left:10px;bottom:10px;font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.04em;text-transform:uppercase;background:var(--surface);color:var(--on-dark);padding:6px 10px;border-radius:999px}
@media (max-width:960px){.phero--col{grid-template-columns:1fr;gap:32px}.ph-col{height:280px;margin-bottom:24px}.ph-card{left:12px;bottom:-20px;width:62%}}

/* legal */
.legal{max-width:760px}
.bl-head{padding:140px 24px 48px;max-width:1240px;margin:0 auto}
.bl-head .crumbs,.bl-head .crumbs a{color:var(--muted)}.bl-head .crumbs a:hover{color:var(--ink)}
.bl-head h1{font-size:clamp(48px,7vw,96px);letter-spacing:-.045em;line-height:1;font-weight:600;margin:24px 0 16px}
.bl-head p{font-size:20px;color:var(--muted);max-width:620px;line-height:1.5}
.bl{max-width:1240px;margin:0 auto;padding:0 24px 96px}
.bl-feat{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center;padding:48px 0;border-top:1px solid var(--line)}
.bl-feat .img{border-radius:28px;overflow:hidden;background:#0d1d1c}.bl-feat img{width:100%;aspect-ratio:1200/627;object-fit:cover;display:block;transition:transform .5s}
.bl-feat:hover img{transform:scale(1.03)}
.bl-feat h2{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.03em;line-height:1.1;font-weight:600;margin:14px 0 16px}
.bl-feat p{font-size:18px;line-height:1.55;color:var(--muted)}.bl-feat .go{display:inline-block;margin-top:28px;font-weight:600;border-bottom:2px solid var(--accent);padding-bottom:2px}
.bl-list{border-top:1px solid var(--line);padding-top:32px}.bl-lab{display:block;margin-bottom:8px}
.bl-row{display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:center;padding:32px 0;border-bottom:1px solid var(--line)}
.bl-row h3{font-size:26px;letter-spacing:-.02em;line-height:1.2;font-weight:600;margin:10px 0 10px}.bl-row p{color:var(--muted);line-height:1.5;max-width:640px}
.bl-row img{width:100%;aspect-ratio:1200/627;object-fit:cover;border-radius:18px}
.bl-row:hover h3,.bl-feat:hover h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:820px){.bl-feat{grid-template-columns:1fr;gap:24px}.bl-row{grid-template-columns:1fr;gap:16px}.bl-row img{order:-1}.bl-head{padding-top:110px}}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.post{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:28px;padding:16px 16px 24px;background:#fff}
.post img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px}
.post h2{font-size:22px;letter-spacing:-.02em;line-height:1.25;font-weight:600;padding:0 8px}.post p{color:var(--muted);font-size:15px;line-height:1.5;padding:0 8px}
.post .mono,.post .go{padding:0 8px}.post .go{margin-top:auto;font-weight:600}
.post-hero{width:100%;height:auto;max-width:1100px;aspect-ratio:16/8;object-fit:cover;border-radius:28px;display:block;margin:0 auto 56px}
.post-body{margin:0 auto}.post-body figure{margin:28px 0}.post-body figure img{width:100%;height:auto;border-radius:20px;border:1px solid var(--line)}
.post-body ul,.post-body ol{margin:12px 0 12px 22px}.post-body h2{margin-top:44px}.post-body li+li{margin-top:6px}
.post-body a{text-decoration:underline;text-underline-offset:3px}
.post-body .tbl{overflow-x:auto;margin:20px 0;border:1px solid var(--line);border-radius:18px;background:#fff}
.post-body table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}.post-body th,.post-body td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.post-body th{font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400}.post-body tr:last-child td{border-bottom:0}
.post-rel{max-width:760px;margin:56px auto 0;padding-top:28px;border-top:1px solid var(--line)}.post-rel .pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.post-rel a{border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-weight:600;background:#fff}
.legal h2{font-size:24px;letter-spacing:-.02em;font-weight:600;margin:40px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:17px;line-height:1.65;color:var(--ink)}
.legal p+p,.legal ul+p{margin-top:12px}
.legal ul{margin:10px 0 0 20px}.legal li{margin-top:6px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.flegal{display:flex;gap:20px;flex-wrap:wrap}.flegal a{text-decoration:underline;text-underline-offset:3px}

/* industry logos under hero */
.br-logos{display:flex;align-items:center;gap:40px;padding:40px 24px 8px}
.br-logos .mono{color:var(--muted);flex:none}
.br-logos ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px}
.br-logos img{height:44px;width:auto;max-width:220px;object-fit:contain;filter:grayscale(1);mix-blend-mode:multiply;opacity:.75;transition:opacity .2s,filter .2s}
.br-logos li:hover img{filter:none;opacity:1}
@media (max-width:960px){.br-logos{flex-direction:column;align-items:flex-start;gap:20px;padding:32px 0 0}.br-logos ul{gap:16px 32px}.br-logos img{height:38px;max-width:180px}}

/* industry solutions */
.sol-more{display:flex;align-items:center;gap:24px;margin-top:28px}.sol-more .mono{color:var(--muted);flex:none}
@media (max-width:960px){.sol-more{flex-direction:column;align-items:flex-start;gap:12px}}
/* (old grouped list) */
.bsol{display:flex;flex-direction:column;gap:16px}
.bsol-g{display:grid;grid-template-columns:1fr 2.4fr;gap:40px;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:36px 40px}
.bsol-g .gh{position:sticky;top:110px;align-self:start}
.bsol-g .gh h3{font-size:26px;letter-spacing:-.025em;font-weight:700;line-height:1.1}
.bsol-g .gh p{margin-top:12px;color:var(--muted);font-size:16px;line-height:1.5}
.bsol-g ul{list-style:none}
.bsol-g li{display:grid;grid-template-columns:44px 1fr auto;gap:20px;align-items:start;padding:22px 0;border-top:1px solid var(--line)}
.bsol-g li:first-child{border-top:0;padding-top:0}
.bsol-g li:last-child{padding-bottom:0}
.bsol-g .n{font-family:"Geist Mono",monospace;font-size:13px;color:var(--muted);padding-top:5px}
.bsol-g .tx h3{font-size:20px;letter-spacing:-.015em;font-weight:600}
.bsol-g .tx p{margin-top:6px;color:var(--muted);font-size:16px;line-height:1.5;max-width:560px}
.bsol-g .lk{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-top:3px}
.bsol-g .lk a{font-size:14px;font-weight:600;white-space:nowrap;color:var(--ink)}
.bsol-g .lk a i{font-style:normal;color:var(--muted);transition:transform .2s;display:inline-block}
.bsol-g .lk a:hover i{transform:translate(2px,-2px);color:var(--ink)}
.bsol-g .lk .cs{background:var(--accent);color:var(--surface);padding:6px 12px;border-radius:999px;font-size:13px}
.bsol-g .lk .cs i{color:var(--surface)}
@media (max-width:960px){.bsol-g{grid-template-columns:1fr;gap:20px;padding:24px 20px}.bsol-g .gh{position:static}
.bsol-g li{grid-template-columns:32px 1fr;gap:12px}.bsol-g .lk{grid-column:2;align-items:flex-start;flex-direction:row;flex-wrap:wrap}}

/* case card logo */
.case .img .lg{position:absolute;left:16px;top:16px;background:#fff;padding:10px 16px;border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.12);display:flex;align-items:center}
.case .img .lg img{position:static;height:22px;width:auto;max-width:120px;object-fit:contain}
.case .img .lg--txt{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:22px}
/* home industries: dark state follows hover */
.au,.au p,.au .ic{transition:background .35s,color .35s,border-color .35s,transform .25s}
.au .ic svg{transition:stroke .35s}
.au.on,.au:hover{background:var(--surface);color:var(--on-dark);border-color:var(--surface)}
.au.on p,.au:hover p{color:var(--muted-dark)}
.au.on .ic,.au:hover .ic{background:var(--accent)}
.au.on .ic svg,.au:hover .ic svg{stroke:var(--surface)}
.aud.touched .au--dark:not(.on){background:var(--card);color:var(--ink);border:1px solid var(--line)}
.aud.touched .au--dark:not(.on) p{color:var(--muted)}
.aud.touched .au--dark:not(.on) .ic{background:var(--paper)}
.aud.touched .au--dark:not(.on) .ic svg{stroke:var(--surface)}
.au--dark .grain,.au--dark.grain::after{transition:opacity .35s}
.aud.touched .au--dark:not(.on).grain::after,.aud.touched .au--dark:not(.on).grain::before{opacity:0;transition:opacity .35s}

.case{border:0 !important;box-shadow:inset 0 0 0 1px var(--line)}
/* realizacje layout */
.rl{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start}
.rl-side{position:sticky;top:110px}
.rl-side .mono{display:block;color:var(--muted);margin-bottom:14px}
.rl .filters{flex-direction:column;align-items:stretch;gap:2px;padding:0;margin:0}
.rl .filters button{display:flex;justify-content:space-between;align-items:center;text-align:left;border:0;background:transparent;border-radius:14px;padding:12px 14px;font-size:16px}
.rl .filters button i{font-style:normal;font-family:"Geist Mono",monospace;font-size:12px;color:var(--muted)}
.rl .filters button:hover{background:var(--card)}
.rl .filters button.on{background:var(--surface);color:var(--on-dark)}
.rl .filters button.on i{color:var(--accent)}
.rl .cases-grid{grid-template-columns:repeat(2,1fr)}
@media (max-width:960px){.rl{grid-template-columns:1fr;gap:20px}.rl-side{position:static}
.rl .filters{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
.rl .filters button{flex:none;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:9px 14px;gap:8px;font-size:14px}
.rl .cases-grid{grid-template-columns:1fr}}

/* realizacje hero */
.rl-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:end}
.rl-hero p{max-width:640px}
.rl-stats{display:flex;flex-direction:column}
.rl-stats>div{display:flex;align-items:baseline;gap:20px;padding:18px 0;border-top:1px solid var(--line-dark)}
.rl-stats>div:last-child{border-bottom:1px solid var(--line-dark)}
.rl-stats dt{font-size:clamp(40px,4vw,56px);font-weight:700;letter-spacing:-.04em;color:var(--accent);min-width:130px;line-height:1}
.rl-stats dd{color:var(--muted-dark);font-size:17px}
@media (max-width:960px){.rl-hero{grid-template-columns:1fr;gap:32px}.rl-stats dt{min-width:96px}}

/* realizacje listing decorations */
.p-realizacje .sec.rl::before,.p-realizacje .sec.rl::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1;width:640px;height:640px}
.p-realizacje .sec.rl::before{right:-280px;top:-300px;background:radial-gradient(circle at 40% 40%,rgba(173,232,140,.5),rgba(173,232,140,0) 68%)}
.p-realizacje .sec.rl::after{display:none}
.rl-side .dotgrid{position:static;transform:none;margin-top:40px;grid-template-columns:repeat(3,56px);gap:14px;opacity:.9}
.rl-side .dotgrid i{width:56px;height:56px}
@media (max-width:960px){.rl-side .dotgrid{display:none}.p-realizacje .sec.rl::before{width:360px;height:360px;right:-180px}.p-realizacje .sec.rl::after{display:none}}

/* case page logo */
.cs2-logo{display:inline-flex;align-self:flex-start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 22px;margin-bottom:14px}
.cs2-logo img{height:34px;width:auto;max-width:180px;object-fit:contain;display:block}
@media (max-width:960px){.cs2-logo{padding:12px 16px}.cs2-logo img{height:26px}}

/* industry mini solution cards */
.sol-grid .sol--mini{min-height:0;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px}
.sol-grid .sol--mini b{font-size:17px}
.sol-grid .sol--mini .go-i{flex:none}

/* testimonials: single quote with logo tabs */
.qs{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:80px;padding:0 24px;align-items:start}
.qs h2{font-size:clamp(40px,4.8vw,72px);line-height:1.02;letter-spacing:-.04em;font-weight:700}
.q-tabs{display:flex;flex-direction:column;margin-top:48px;border-top:1px solid var(--line)}
.q-tabs button{position:relative;display:flex;align-items:center;justify-content:space-between;padding:24px 0;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;color:var(--muted)}
.q-tabs img{height:24px;width:auto;filter:brightness(0);opacity:.28;transition:opacity .3s}
.q-tabs button:hover img,.q-tabs button.on img{opacity:.85}
.q-tabs .mono{font-size:12px}
.q-tabs button.on .mono{color:var(--ink)}
.q-tabs button::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--surface)}
.q-tabs button.on::after{animation:qprog 9s linear forwards}
.qs:hover .q-tabs button.on::after{animation-play-state:paused}
@keyframes qprog{to{width:100%}}
.q-stage{display:grid}
.q{grid-area:1/1;margin:0;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;pointer-events:none}
.q.on{opacity:1;transform:none;pointer-events:auto}
.q .mark{display:block;height:60px;font-size:140px;line-height:.75;color:var(--accent);font-weight:700}
.q blockquote{margin:0;font-size:clamp(26px,2.5vw,38px);line-height:1.3;letter-spacing:-.025em;font-weight:500}
.q figcaption{display:flex;align-items:center;gap:14px;margin-top:40px}
.q .av{width:52px;height:52px;border-radius:50%;background:var(--surface);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:16px;flex:none}
.q b{display:block;font-size:16px}.q small{color:var(--muted);font-size:14px}
@media (prefers-reduced-motion:reduce){.q-tabs button.on::after{animation:none;width:100%}.q{transition:none}}
@media (max-width:900px){
.qs{grid-template-columns:1fr;gap:28px;padding:0}
.qs h2{font-size:34px}
.q-tabs{flex-direction:row;margin-top:24px}
.q-tabs button{flex:1;justify-content:center;padding:18px 8px}
.q-tabs img{height:18px;max-width:100%}
.q-tabs .mono{display:none}
.q .mark{height:40px;font-size:96px}
.q blockquote{font-size:22px}
}

/* process: horizontal journey, no cards */
.jr{list-style:none;margin:0;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:56px;position:relative}
.jr::before{content:"";position:absolute;left:24px;right:24px;top:27px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--line),#0d4a3c 55%,var(--accent))}
.jr li{position:relative}
.jr .dot{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;font-family:"Geist Mono",monospace;font-size:13px;margin-bottom:40px}
.jr li:nth-child(1) .dot{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.jr li:nth-child(2) .dot{background:#0d4a3c;color:var(--accent)}
.jr li:nth-child(3) .dot{background:var(--surface);color:var(--accent);box-shadow:0 0 0 8px rgba(174,232,135,.45)}
.jr h3{font-size:32px;letter-spacing:-.03em;line-height:1.08;font-weight:600}
.jr p{font-size:18px;line-height:1.5;margin-top:14px;color:var(--muted);max-width:380px}
@media (max-width:900px){
.jr{grid-template-columns:1fr;gap:44px;padding:0 0 0 76px}
.jr::before{left:27px;right:auto;top:28px;bottom:40px;width:2px;height:auto;background:linear-gradient(180deg,var(--line),#0d4a3c 55%,var(--accent))}
.jr .dot{position:absolute;left:-76px;top:-14px;margin:0}
.jr h3{font-size:26px}
.jr p{font-size:16px}
}

/* home industries: row list + photo */
.ind{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;padding:0 24px;align-items:stretch}
.ind-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.aurow{display:grid;grid-template-columns:48px minmax(0,1fr) 52px;column-gap:24px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.ind-list li:last-child .aurow{border-bottom:0}
.aurow .mono{font-size:12px;color:var(--muted);align-self:start;padding-top:12px}
.aurow h3{font-size:clamp(28px,2.6vw,40px);letter-spacing:-.03em;line-height:1.05;font-weight:600;transition:transform .3s}
.aurow p{grid-column:2;font-size:16px;line-height:1.45;color:var(--muted);margin-top:8px;max-width:520px}
.ind-go{grid-column:3;grid-row:1/span 2;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-style:normal;transition:background .3s,border-color .3s,color .3s}
.aurow.on h3{transform:translateX(8px)}
.aurow.on .ind-go{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.ind-media{position:relative;border-radius:28px;overflow:hidden;background:var(--surface-2);min-height:480px}
.ind-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);mix-blend-mode:luminosity;opacity:0;transition:opacity .5s}
.ind-media img.on{opacity:.9}
.ind-media::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(173,232,140,.28),rgba(0,39,38,.55) 70%);mix-blend-mode:multiply}
@media (max-width:900px){
.ind{grid-template-columns:1fr;padding:0}
.ind-media{display:none}
.aurow{grid-template-columns:28px minmax(0,1fr) 44px;column-gap:14px;padding:22px 0}
.aurow h3{font-size:26px}
.aurow.on h3{transform:none}
.ind-go{width:44px;height:44px}
}

/* AI section: before/after comparison table */
.vs{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;padding:0 24px}
.vs-c{padding:28px 0}
.vs-g{background:var(--surface);color:var(--on-dark);padding-left:44px;padding-right:44px;position:relative}
.vs-h{padding-top:0;padding-bottom:20px}
.vs-h.vs-g{padding-top:40px;border-radius:28px 28px 0 0}
.vs-h .mono{color:var(--muted)}
.vs-h.vs-g .mono{color:var(--accent)}
.vs-r{display:flex;gap:18px;border-top:1px solid var(--line);align-self:stretch}
.vs-r.vs-g{border-top:0}
.vs-r.vs-g::before{content:"";position:absolute;top:0;left:44px;right:44px;height:1px;background:var(--line-dark)}
.vs-h:not(.vs-g){align-self:end}
.vs-r i{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:15px;font-weight:700;background:#f1e4e1;color:#9c3b2c}
.vs-r.vs-g i{background:var(--accent);color:var(--surface)}
.vs-r b{display:block;font-size:22px;letter-spacing:-.015em;line-height:1.25;font-weight:600}
.vs-r p{font-size:17px;line-height:1.5;margin-top:6px;color:var(--muted)}
.vs-r.vs-g p{color:var(--muted-dark)}
.vs-e{border-top:1px solid var(--line);padding:0}
.vs-f{padding-top:8px;padding-bottom:40px;border-radius:0 0 28px 28px}
.vs-link{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.vs-link i{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--surface);display:grid;place-items:center;font-style:normal}
@media (max-width:960px){
.vs{grid-template-columns:1fr;padding:0}
.vs-c:not(.vs-g){order:0}
.vs-g{order:1;padding-left:22px;padding-right:22px}
.vs-r.vs-g::before{left:22px;right:22px}
.vs-e{display:none}
.vs-h.vs-g{margin-top:32px;padding-top:28px}
.vs-r b{font-size:19px}
}

/* about: differentiators as manifesto */
.mf{padding:0 24px}
.mf-label{font-size:13px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mf-text{margin-top:28px;font-size:clamp(34px,4.4vw,66px);line-height:1.12;letter-spacing:-.035em;font-weight:600;max-width:1280px}
.mf-chip{display:inline-flex;align-items:center;vertical-align:middle;height:.95em;margin:0 .08em;position:relative;top:-.06em}
.mf-ini i{font-size:.2em;width:4.75em;height:4.75em;border-radius:50%;background:var(--surface);color:var(--accent);display:grid;place-items:center;font-style:normal;font-family:"Geist Mono",monospace;letter-spacing:0;font-weight:500;box-shadow:0 0 0 .35em var(--paper)}
.mf-ini i+i{margin-left:-1.1em}
.mf-ini i:nth-child(2){background:#0d4a3c}
.mf-ph img{width:.95em;height:.95em;border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.05) sepia(.35) hue-rotate(95deg) saturate(1.6) brightness(.85);box-shadow:0 0 0 .07em var(--paper)}
.mf-ph img+img{margin-left:-.22em}
.mf-pill{height:auto;background:var(--accent);color:var(--surface);border-radius:999px;padding:.32em .7em;font-family:"Geist Mono",monospace;font-size:.24em;letter-spacing:.02em;font-weight:500;top:-.2em}
.mf-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:80px}
.mf-cols>div{border-left:1px solid var(--line);padding-left:28px}
.mf-cols .mono{color:var(--muted);font-size:12px}
.mf-cols h3{font-size:26px;letter-spacing:-.02em;line-height:1.15;font-weight:600;margin-top:20px}
.mf-cols p{font-size:17px;line-height:1.5;color:var(--muted);margin-top:12px;max-width:380px}
@media (max-width:900px){
.mf{padding:0}
.mf-cols{grid-template-columns:1fr;gap:0;margin-top:48px}
.mf-cols>div{border-left:0;border-top:1px solid var(--line);padding:24px 0 0;margin-bottom:24px}
.mf-pill{font-size:.3em}
}

/* branch page: single client quote */
.bqt{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:80px;padding:0 24px;align-items:start}
.bqt-side{display:flex;flex-direction:column;align-items:flex-start;gap:28px;border-top:1px solid var(--line);padding-top:24px}
.bqt-side .mono{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bqt-side img{height:34px;width:auto;max-width:200px;object-fit:contain;filter:grayscale(1);mix-blend-mode:multiply;opacity:.75}
.bqt .q{grid-area:auto}
.bqt-link{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.bqt-link i{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--surface);display:grid;place-items:center;font-style:normal}
@media (max-width:900px){.bqt{grid-template-columns:1fr;gap:32px;padding:0}.bqt .q blockquote{font-size:22px}}

/* branch v2: problem and fix pairs */
.pf{list-style:none;margin:0;padding:0 24px}
.pf li{display:grid;grid-template-columns:72px minmax(0,5fr) minmax(0,6fr);gap:40px;padding:40px 0;border-top:1px solid var(--line)}
.pf li:last-child{border-bottom:1px solid var(--line)}
.pf-n{color:var(--muted);font-size:13px;padding-top:8px}
.pf-p h3{font-size:30px;line-height:1.12;letter-spacing:-.025em;font-weight:600}
.pf-p p{font-size:17px;line-height:1.55;color:var(--muted);margin-top:14px;max-width:460px}
.pf-f{border-left:2px solid var(--accent);padding-left:32px}
.pf-f>.mono{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pf-f p{font-size:19px;line-height:1.5;margin-top:10px}
.pf-l{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pf-l a,.pf-more a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:500;transition:background .2s,border-color .2s}
.pf-l a:hover,.pf-more a:hover{background:var(--accent);border-color:var(--accent)}
.pf-l i,.pf-more i,.pf-case i{font-style:normal}
.pf-case{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-weight:600;font-size:15px}
.pf-case .mono{font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pf-more{display:flex;gap:32px;align-items:baseline;padding:32px 24px 0}
.pf-more>.mono{flex:none;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pf-more>div{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:900px){
.pf{padding:0}
.pf li{grid-template-columns:1fr;gap:16px;padding:32px 0}
.pf-n{padding:0}
.pf-p h3{font-size:24px}
.pf-f{padding-left:20px;margin-top:8px}
.pf-f p{font-size:17px}
.pf-more{flex-direction:column;gap:14px;padding:28px 0 0}
}

/* branch v2: header visual */
.pf-head h2{max-width:760px}
.pf-vis{position:relative;flex:none;width:200px;height:170px;margin-right:40px}
.pf-vis i{position:absolute;border-radius:50%}
.pf-o1{width:150px;height:150px;right:0;top:0;background:radial-gradient(circle at 35% 32%,#e6fbd6,#ade88c 45%,#7cbf78 78%);box-shadow:inset -18px -24px 44px rgba(0,39,38,.2);animation:pff 6s ease-in-out infinite}
.pf-o2{width:58px;height:58px;left:10px;bottom:0;background:radial-gradient(circle at 32% 30%,#2f6b5f,#002726 72%);box-shadow:inset 5px 5px 10px rgba(173,232,140,.35);animation:pff 6s ease-in-out -3s infinite}
@keyframes pff{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.pf-vis i{animation:none}}
@media (max-width:900px){.pf-vis{display:none}}
.pf-note{display:flex;align-items:center;justify-content:space-between;gap:40px;margin:32px 24px 0;padding:32px 40px;border-radius:24px;background:var(--card)}
.pf-note p{font-size:20px;line-height:1.45;letter-spacing:-.01em;max-width:780px}
.pf-note .btn{flex:none}
@media (max-width:900px){.pf-note{flex-direction:column;align-items:flex-start;gap:20px;margin:28px 0 0;padding:24px}.pf-note p{font-size:17px}}
/* branch page: compact other branches */
.ob{display:flex;align-items:center;gap:40px;padding:0 24px}
.ob>.mono{flex:none;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ob ul{list-style:none;margin:0;padding:0;flex:1;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ob li+li{border-left:1px solid var(--line)}
.ob a{display:flex;align-items:center;gap:14px;padding:18px 20px;transition:background .2s}
.ob a:hover{background:var(--card)}
.ob img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;filter:grayscale(1) contrast(1.05) sepia(.35) hue-rotate(95deg) saturate(1.6) brightness(.85)}
.ob span{flex:1;min-width:0}
.ob b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.ob small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.ob i{font-style:normal;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:13px;flex:none;transition:background .2s,border-color .2s}
.ob a:hover i{background:var(--accent);border-color:var(--accent)}
@media (max-width:1100px){.ob{flex-direction:column;align-items:stretch;gap:16px}}
@media (max-width:900px){.ob{padding:0}.ob ul{grid-template-columns:1fr}.ob li+li{border-left:0;border-top:1px solid var(--line)}.ob a{padding:14px 0}}

/* services: chapters instead of tiles */
.jump.jl{display:flex;flex-wrap:wrap;gap:0;margin-top:48px;border-top:1px solid var(--line-dark)}
.jump.jl a{flex:1 1 0;min-width:160px;border:0;border-radius:0;padding:18px 24px 0 0;gap:8px;background:none}
.jump.jl a:hover{background:none}.jump.jl a:hover b{color:var(--accent)}
.jump.jl b{font-size:17px;transition:color .2s}
.sv{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;margin:0 24px;padding:72px 0;border-top:2px solid var(--ink)}
.sv+.sv{margin-top:0}
.sv-l{position:sticky;top:110px;align-self:start}
.sv-n{color:var(--muted);font-size:13px}
.sv-l h2{font-size:clamp(36px,4vw,56px);line-height:1.04;letter-spacing:-.035em;font-weight:700;margin-top:18px}
.sv-lead{font-size:19px;line-height:1.5;color:var(--muted);margin-top:18px;max-width:480px}
.sv-note{font-size:15px;line-height:1.5;margin-top:16px;padding-left:16px;border-left:2px solid var(--accent);max-width:460px}
.sv-when{margin-top:32px}
.sv-when .mono,.sv-r>.mono,.sv-get .mono{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sv-when ul{list-style:none;margin:12px 0 0;padding:0}
.sv-when li{position:relative;padding-left:20px;font-size:16px;line-height:1.5;margin-top:6px}
.sv-when li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.sv-case{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-weight:600;font-size:15px}
.sv-case i{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--surface);display:grid;place-items:center;font-style:normal}
.sv-list{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.sv-list li{border-bottom:1px solid var(--line)}
.sv-list a,.sv-list li>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 36px;gap:24px;align-items:center;padding:20px 0}
.sv-list b{font-size:20px;font-weight:600;letter-spacing:-.015em}
.sv-list small{font-size:15px;color:var(--muted);line-height:1.45}
.sv-list i{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:13px;transition:background .2s,border-color .2s}
.sv-list a:hover b{color:#0d4a3c}
.sv-list a:hover i{background:var(--accent);border-color:var(--accent)}
.sv-get{display:flex;gap:16px;align-items:flex-start;margin-top:28px}
.sv-get>i{flex:none;width:14px;height:14px;border-radius:50%;background:var(--accent);margin-top:4px;box-shadow:0 0 0 6px rgba(174,232,135,.35)}
.sv-get p{font-size:19px;line-height:1.45;margin-top:6px;font-weight:500}
.sv-more{display:flex;align-items:center;justify-content:space-between;gap:32px;margin:0 24px;padding:40px 0 0;border-top:2px solid var(--ink)}
.sv-more p{font-size:20px;line-height:1.45;max-width:640px}
.sv-more .btn{flex:none}
.jr6{grid-template-columns:repeat(6,1fr);gap:28px}
.jr6 h3{font-size:22px}
.jr6 p{font-size:15px}
.jr6 small{display:block;margin-top:16px;font-size:14px;font-weight:600;line-height:1.4}
.jr6 small .mono{display:block;font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.jr6 li .dot{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.jr6 li:nth-child(3) .dot,.jr6 li:nth-child(4) .dot{background:#0d4a3c;color:var(--accent);border:0}
.jr6 li:nth-child(5) .dot,.jr6 li:nth-child(6) .dot{background:var(--surface);color:var(--accent);border:0}
.jr6 li:nth-child(6) .dot{box-shadow:0 0 0 8px rgba(174,232,135,.45)}
@media (max-width:1100px){.jr6{grid-template-columns:repeat(3,1fr);row-gap:48px}.jr6::before{display:none}}
@media (max-width:900px){
.sv{grid-template-columns:1fr;gap:32px;margin:0;padding:48px 0}
.sv-l{position:static}
.sv-list a,.sv-list li>div{grid-template-columns:minmax(0,1fr) 36px;gap:4px 16px}
.sv-list small{grid-column:1;grid-row:2}
.sv-list i{grid-column:2;grid-row:1/3}
.sv-list b{font-size:18px}
.sv-more{flex-direction:column;align-items:flex-start;margin:0}
.jump.jl a{flex:1 1 45%;padding:14px 12px 0 0}
.jr6{grid-template-columns:1fr}.jr6::before{display:block}
}
.sv-btn{margin-top:32px}
.hm-more{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;padding:0 24px}
@media (max-width:900px){.hm-more{padding:0}}
/* hero chat animation */
.ask.anim .q,.ask.anim .a{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
.ask.anim .q.show,.ask.anim .a.show{opacity:1;transform:none}
.ask .typing{display:none;gap:5px;padding:9px 0}
.ask .a.thinking .typing{display:flex}.ask .a.thinking p,.ask .a.thinking .src{display:none}
.ask .typing i{width:7px;height:7px;border-radius:50%;background:#9a9a96;animation:askdot 1.1s infinite}
.ask .typing i:nth-child(2){animation-delay:.15s}.ask .typing i:nth-child(3){animation-delay:.3s}
@keyframes askdot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.ask.anim .src span{opacity:0;transform:scale(.92);transition:opacity .3s,transform .3s,box-shadow .4s}
.ask.anim .src span.show{opacity:1;transform:none}
.ask.anim .src .you{box-shadow:none}
.ask.anim .src .you.glow{box-shadow:0 0 0 3px var(--accent);animation:askglow 1.4s ease 2}
@keyframes askglow{50%{box-shadow:0 0 0 7px rgba(173,232,140,.45)}}
.ask-input span.typed{color:var(--ink)}
.ask-input span.typed::after{content:"";display:inline-block;width:2px;height:1.05em;background:var(--ink);margin-left:2px;vertical-align:-3px;animation:askcaret 1s steps(1) infinite}
@keyframes askcaret{50%{opacity:0}}
.ask-input i{transition:transform .15s,background .15s}
.ask-input i.press{transform:scale(.86);background:var(--accent);color:var(--surface)}
.ask.anim .ask-body>*{transition:opacity .4s}
.ask.fade .ask-body>*{opacity:0 !important}
@media (max-width:1100px){.fcols{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:960px){
.burger{display:inline-flex}
.phero h1{font-size:38px !important}
.header .bar{height:68px;padding:0 16px}
.header.open{background:var(--paper)}
.header.open .nav{display:flex;flex-direction:column;gap:4px;position:absolute;left:16px;right:16px;top:72px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:16px;font-size:17px}
.header.open .nav .menu{position:static;display:block;padding-top:8px}.header.open .nav .menu-in{width:auto;box-shadow:none}
.cards3,.cards4,.sol-grid,.cases-grid,.stat,.split,.cs-layout{grid-template-columns:1fr}
.cs-side{position:static}.cs-body,.bq,.split>div,.form{padding:28px 22px}.bq p{font-size:21px}
.form{grid-template-columns:1fr}.filters{padding:0}
.fcols{grid-template-columns:1fr 1fr}
}
/* hero v2: light mint, bars, dot patterns, brand dots */
/* full bleed: break out of .wrap and slide under the transparent header (80px) */
body{overflow-x:clip}
.hero--v2{background:#d9f3c8;color:var(--ink);border-radius:0;margin:-80px calc(50% - 50vw) 0}
.hero--v2 .hero-in{grid-template-columns:1.3fr auto;gap:56px;max-width:1320px;margin:0 auto;padding:128px 72px 56px}
.hero--v2 .stats{max-width:1320px;margin:0 auto}
.hero--v2 .eyebrow{display:block;font-size:24px;font-weight:600;letter-spacing:-.01em;color:var(--surface)}
.hero--v2 h1{font-size:clamp(40px,4.6vw,72px);line-height:1;letter-spacing:-.04em;margin-top:16px}
.hero--v2 .actions{margin-top:32px}
.hero--v2 p{font-size:21px;line-height:1.45;color:#2f4a44;max-width:600px;margin-top:20px}
.btn--white{background:#fff;color:var(--ink)}
.hero.hero--v2>.hv-deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.hv-deco span{position:absolute;display:block}
.hv-deco .pill{height:56px;border-radius:999px}
.hv-deco .p1{width:300px;left:6%;top:70px;background:var(--surface);transform:rotate(16deg)}
.hv-deco .p2{width:260px;left:9%;top:50px;background:#9BE171;transform:rotate(-12deg)}
.hv-deco .p3{width:380px;right:-90px;top:46%;background:var(--surface);transform:rotate(64deg)}
.hv-deco .p4{width:240px;right:30px;top:40%;background:#9BE171;transform:rotate(-10deg)}
.hv-deco .mx{background:radial-gradient(circle,#1f5a50 0 34%,transparent 38%) 0 0/16px 16px}
.hv-deco .mx1{left:-40px;top:170px;width:240px;height:320px;clip-path:polygon(20% 0,60% 0,60% 10%,80% 10%,80% 25%,100% 25%,100% 55%,85% 55%,85% 75%,65% 75%,65% 100%,30% 100%,30% 85%,10% 85%,10% 60%,0 60%,0 20%,20% 20%)}
.hv-deco .mx2{right:2%;top:24px;width:300px;height:260px;background-image:radial-gradient(circle,#5f9f6b 0 34%,transparent 38%);clip-path:polygon(0 0,35% 0,35% 20%,70% 20%,70% 0,100% 0,100% 45%,80% 45%,80% 80%,50% 80%,50% 100%,15% 100%,15% 60%,0 60%)}
.hv-deco .orb{border-radius:50%;background:var(--logo-dot)}
.hv-deco .o1{width:88px;height:88px;right:31%;bottom:110px}
.hv-deco .o2{width:40px;height:40px;right:4%;top:62px;background:var(--surface)}
.hv-deco .o3{width:24px;height:24px;left:24%;bottom:120px}
/* AI search illustration inside a phone frame */
.phone{width:290px;padding:10px;border-radius:42px;background:#141414;box-shadow:0 16px 32px rgba(0,39,38,.16);position:relative}
.phone .ask-top .spark,.phone .ask .dot{width:22px;height:22px;border-radius:50%;background:var(--logo-dot)}
.phone::before{content:"";position:absolute;top:22px;left:50%;width:90px;height:24px;margin-left:-45px;border-radius:999px;background:#141414;z-index:2}
.phone-screen{border-radius:36px;overflow:hidden;background:#fafaf9}
.phone .ph-status{display:flex;justify-content:space-between;padding:16px 26px 8px;font-size:13px;font-weight:600;color:var(--ink);background:var(--card)}
.phone .ask{display:flex;flex-direction:column;min-height:460px;border-radius:0;box-shadow:none}
.phone .ask-top{padding:12px 16px;font-size:14px}
.phone .ask-body{flex:1;padding:18px 14px;gap:14px}
.phone .ask .q{font-size:13px;max-width:88%}
.hero--v2 .phone p{font-size:13px;line-height:1.5;margin:0;color:var(--ink);max-width:none}
.phone .ask .src span{font-size:12px}
.phone .ask-input{margin:0 12px 14px;font-size:13px}
.hero--v2 .stats{border-top:1px solid rgba(0,39,38,.14)}
.hero--v2 .stats>div{border-right-color:rgba(0,39,38,.14)}
.hero--v2 .stats img{filter:brightness(0);opacity:.55}
.hero--v2 .stats .big b{color:var(--surface)}
.hero--v2 .stats .big span{color:#2f4a44}
@media (max-width:960px){
  .hero--v2{margin-top:-68px}
  .hero--v2 .hero-in{grid-template-columns:1fr;padding:132px 24px 48px;gap:48px}
  .phone{width:280px;margin:0 auto}
  .phone .ask{min-height:400px}
  .hv-deco .o2{display:none}
  .hero--v2 h1{font-size:46px}
  .hero--v2 p{font-size:19px}
  .hv-deco .p1,.hv-deco .p2,.hv-deco .mx1,.hv-deco .o1,.hv-deco .o3{display:none}
  .hv-deco .p3{width:220px;right:-80px;top:auto;bottom:40px;height:40px}
  .hv-deco .p4{width:140px;right:-20px;top:auto;bottom:120px;height:40px}
  .hv-deco .mx2{width:120px;height:110px;right:-10px;top:10px;opacity:.6}
}

/* hero with brand dots (v4, 2026-10-29): fal-style big headline left, GoodC dot grid right (colour shifts to lime,
   cropped by the edge), crowd photo shows through a few dots, AI answer window overlaps the grid */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.header,.header.scrolled{background:#fff;border-bottom-color:var(--line)}
.btn{border-radius:10px}
.btn--outline-light{border:1px solid rgba(245,245,244,.6);color:var(--on-dark)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hero--dots{--d:104px;--g:14px;background:var(--surface);color:var(--on-dark);margin-top:0}
.hero--dots .hero-in{grid-template-columns:1fr calc(4*var(--d) + 3*var(--g));gap:64px;align-items:center;padding:88px 72px 104px}
.hero--dots .eyebrow{color:var(--accent)}
.hero--dots h1{font-size:clamp(44px,4.8vw,76px);line-height:1;letter-spacing:-.045em;color:var(--on-dark)}
.hero--dots h1 span{display:block}
.hero--dots .hd-text>p{color:var(--muted-dark);font-size:20px;max-width:540px}
.hd-art{position:relative}
.hd-dots{display:grid;grid-template-columns:repeat(5,var(--d));gap:var(--g);width:max-content;transform:translateX(72px)}
.hd-dots span{width:var(--d);height:var(--d);border-radius:50%}
.hd-dots .hd-ph{background:url(hero-crowd.webp) no-repeat,var(--lavender);background-blend-mode:luminosity;background-size:auto calc(4*var(--d) + 3*var(--g));
  background-position:calc(-1*var(--x)*(var(--d) + var(--g)) + 40px) calc(-1*var(--y)*(var(--d) + var(--g)))}
.hd-art .ask{position:absolute;left:-72px;bottom:-24px;width:380px;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.3)}
.hd-art .ask-top{font-size:14px;padding:12px 16px}
.hd-art .ask-top .spark{width:18px;height:18px;border-radius:50%;background:var(--logo-dot)}
.hd-art .ask-body{padding:16px;gap:12px}
.hd-art .ask .q{font-size:14px}
.hd-art .ask .dot{width:22px;height:22px;background:var(--logo-dot)}
.hero--dots .hd-art p{font-size:14px;line-height:1.5;margin:0;color:var(--ink);max-width:none}
.hd-art .ask .src span{font-size:12px}
.ask .q.typed::after{content:"";display:inline-block;width:2px;height:1.05em;background:var(--on-dark);margin-left:2px;vertical-align:-3px;animation:askcaret 1s steps(1) infinite}
.ask.paused *,.ask.paused *::after{animation-play-state:paused !important}
.hp-pause{display:none;position:absolute;left:-72px;bottom:-80px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--muted-dark);font:500 14px/1 Geist,system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hd-art.is-anim .hp-pause{display:block}
.hp-pause:hover{color:var(--on-dark)}
.hp-pause:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hero--dots .stats{border-top-color:var(--line-dark)}
.hero--dots .stats>div{border-right-color:var(--line-dark)}
.hero--dots .stats img{filter:brightness(0) invert(1);opacity:.7}
.hero--dots .stats .big b{color:var(--accent)}
.hero--dots .stats .big span{color:var(--muted-dark)}
@media (max-width:1100px){.hero--dots{--d:84px;--g:12px}.hero--dots .hero-in{gap:40px}.hd-art .ask{width:340px;left:-48px}.hp-pause{left:-48px}}
@media (max-width:960px){
  .hero--dots{--d:68px;--g:10px;margin-top:0}
  .hero--dots .hero-in{grid-template-columns:1fr;gap:40px;padding:48px 24px 40px}
  .hero--dots h1{font-size:42px}
  .hero--dots .hd-text>p{font-size:18px}
  .hd-art .ask{position:relative;left:auto;bottom:auto;width:auto;margin-top:-96px;margin-left:16px}
  .hp-pause{position:static;margin-top:12px}
}
@media (max-width:960px){.hd-dots{transform:none}}

/* v4 round 2: hero on the page grid (same 1480/24 container as header and .wrap) + a bit of fal brutalism */
.hero--dots .hero-in{max-width:1480px;padding:88px 24px 104px}
.hero--dots .stats{max-width:1480px;padding:0 24px;border-top:0}
.hero--dots .stats>div:first-child{padding-left:0}
.hero--dots .stats>div{border-top:1px solid var(--line-dark)}
.hero--dots .hd-dots{transform:translateX(48px)}
/* hard edges instead of soft rounding */
.btn{border-radius:4px}
.hero--dots .eyebrow{display:inline-block;background:var(--accent);color:var(--surface);font-size:18px;padding:6px 10px}
.hero--dots h1 mark{background:var(--accent);color:var(--surface);padding:0 .12em;margin-left:-.04em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hd-art .ask{border-radius:4px;box-shadow:10px 10px 0 var(--accent)}
/* segmented line under the header, like fal's comparison section */
.hd-strip{display:flex;align-items:flex-start;height:6px}
.hd-strip span{height:6px}
@media (max-width:960px){
  .hero--dots .hero-in{padding:40px 16px 40px}
  .hero--dots .stats{padding:0 16px}
  .hero--dots .eyebrow{font-size:16px}
  .hd-art .ask{box-shadow:6px 6px 0 var(--accent)}
}

/* "Klienci pytają AI" (2026-10-29, ref: Ahrefs Brand Radar): industry -> buyer questions -> example AI answer with Dziś / Po wdrożeniu */
.aiq-box{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0;margin:0 24px;background:var(--card);border:1px solid var(--ink);border-radius:4px;box-shadow:10px 10px 0 var(--surface)}
.aiq-ind{grid-column:1/-1;display:flex;flex-wrap:wrap;border-bottom:1px solid var(--ink)}
.aiq-ind button,.aiq-tg button,.aiq-list button{font:inherit;cursor:pointer;border:0;background:none;color:var(--ink)}
.aiq-ind button{min-height:56px;padding:0 24px;font-size:16px;font-weight:600;border-right:1px solid var(--line)}
.aiq-ind button[aria-pressed="true"]{background:var(--surface);color:var(--on-dark)}
.aiq-ind button:hover:not([aria-pressed="true"]){background:var(--paper)}
.aiq-qs{padding:32px;border-right:1px solid var(--line)}
.aiq-qs h3{font-size:15px;font-weight:600;color:var(--muted);margin-bottom:16px}
.aiq-list{display:flex;flex-direction:column;gap:8px}
.aiq-list button{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:4px;font-size:17px;line-height:1.4}
.aiq-list button::before{content:"";flex:none;width:12px;height:12px;margin-top:6px;border-radius:50%;background:var(--line)}
.aiq-list button[aria-pressed="true"]{border-color:var(--ink);font-weight:600}
.aiq-list button[aria-pressed="true"]::before{background:var(--logo-dot)}
.aiq-card{padding:32px;background:#fafaf9}
.aiq-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.aiq-tg{display:flex;border:1px solid var(--ink);border-radius:4px;overflow:hidden}
.aiq-tg button{min-height:44px;padding:0 16px;font-size:14px;font-weight:600}
.aiq-tg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.aiq-ans{margin-top:24px}
.aiq-q{align-self:flex-end;margin-left:auto;width:fit-content;max-width:85%;background:var(--surface);color:var(--on-dark);padding:12px 16px;border-radius:4px;font-size:16px;line-height:1.45}
.aiq-a{margin-top:20px;font-size:17px;line-height:1.55}
.aiq-src-l{margin-top:16px;font-size:14px;color:var(--muted)}
.aiq-src{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;padding:0}
.aiq-src li{padding:8px 12px;border:1px solid var(--line);border-radius:4px;background:#fff;font-size:14px}
.aiq-src li.you{background:var(--accent);border-color:var(--surface);color:var(--surface);font-weight:700}
.aiq-src li.none{border-style:dashed;color:var(--muted);background:none}
.aiq-note{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--muted)}
.aiq-ind button:focus-visible,.aiq-list button:focus-visible,.aiq-tg button:focus-visible,.aiq-link:focus-visible{outline:3px solid var(--surface);outline-offset:2px}
.aiq-how{list-style:none;counter-reset:aiq;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:72px 24px 0;padding:0}
.aiq-how li{counter-increment:aiq}
.aiq-how li::before{content:counter(aiq);display:grid;place-items:center;width:44px;height:44px;margin-bottom:20px;border-radius:50%;background:var(--accent);color:var(--surface);font-weight:700;font-size:18px}
.aiq-how b{font-size:22px;letter-spacing:-.02em}
.aiq-how p{margin-top:8px;font-size:17px;line-height:1.5;color:var(--muted)}
.aiq-link{display:inline-flex;gap:8px;margin:40px 24px 0;font-weight:600;font-size:17px;border-bottom:2px solid var(--ink);padding-bottom:2px}
@media (max-width:960px){
  .aiq-box{grid-template-columns:1fr;margin:0;box-shadow:6px 6px 0 var(--surface)}
  .aiq-ind{flex-wrap:nowrap;overflow-x:auto}
  .aiq-ind button{white-space:nowrap;padding:0 16px;font-size:15px}
  .aiq-qs{padding:24px 20px;border-right:0;border-bottom:1px solid var(--line)}
  .aiq-card{padding:24px 20px}
  .aiq-how{grid-template-columns:1fr;margin:48px 0 0;gap:28px}
  .aiq-link{margin:32px 0 0}
}

/* sales CTA: lime, dark green text (same look as .btn--accent, kept as its own class so sales actions are easy to find) */
.btn--cta{background:var(--accent);color:var(--surface)}
.btn--cta:focus-visible{outline:3px solid var(--surface);outline-offset:3px}
.hero--dots .btn--cta:focus-visible{outline-color:var(--accent)}

/* one micro-interaction for every button: it widens a little on both sides on hover.
   Negative margin keeps neighbours in place. No lift, no shadow. */
.btn{transition:padding .2s ease}
@media (hover:hover){.btn:hover{padding-left:30px;padding-right:30px}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* remove soft blurred "glow" circles behind sections (AI-slop tell) */
.sec:nth-of-type(3n+1)::before,.sec:nth-of-type(3n+2)::after,.p-realizacje .sec.rl::before{display:none}

/* ===== homepage style pass (2026-10-29): bring the rest of the page in line with the hero =====
   Shared components, so other pages move the same way. Rules in DESIGN-SYSTEM.md. */

/* no grain, no gradient orbs, no uppercase mono labels */
.grain::before{display:none}
.mono{font-family:inherit;text-transform:none;letter-spacing:0;font-size:14px}
.orb-deco{display:none}

/* number dot: flat lime circle with the number, used for every numbered list */
.tile>.mono,.reason .mono{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--surface);font-weight:700;font-size:16px;opacity:1}
.t2>.mono{background:var(--surface);color:var(--accent)}

/* clickable cards: one hover for all = title gets underlined. No movement. */
.tile,.case{transition:none}
.tile:hover,.case:hover{transform:none}
.tile:hover h3,.case:hover h3,.aurow:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.tile:focus-visible,.case:focus-visible,.aurow:focus-visible{outline:3px solid var(--surface);outline-offset:3px}

/* services bento: square corners, flat dots only */
.tile{border-radius:4px}
.t3,.t4{border-color:var(--ink)}
.tile .chips span{border-radius:4px}
.t1 .orb{width:200px;height:200px;right:-60px;top:-60px;background:var(--accent)}
.t1:hover .orb,.t2:hover .orb{transform:none;box-shadow:none}
.t3::after,.t4::after{width:40px !important;height:40px !important;transition:none}
.t3:hover::after,.t4:hover::after{transform:none;box-shadow:none}

/* industries */
.aurow .mono{font-size:14px}
.aurow.on h3{transform:none}
.ind-media{border-radius:4px}

/* case studies */
.case{border-radius:4px}
.case .years{font-family:inherit;text-transform:none;letter-spacing:0;font-size:14px}
.case .img .lg{border-radius:4px;box-shadow:none}

/* why us: full-bleed dark band on the page grid, flat brand-dot grid shifting to lime, cropped by the edge */
.why{border-radius:0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:96px max(24px,calc(50vw - 716px));position:relative;overflow:hidden}
.why .dotgrid i{opacity:1;background:color-mix(in srgb,#ade88c calc(var(--o)*100%),#0f3d38)}
.why .dotgrid{right:-36px}
.why .head,.why .reasons{position:relative;z-index:1}
.why .head h2{max-width:900px}

/* testimonials: fade only, no slide */
.q{transform:none}
.qs:focus-within .q-tabs button.on::after{animation-play-state:paused}

/* process: flat line, number dots shifting from dark green to lime */
.jr::before{background:var(--ink);height:1px;top:28px}
.jr .dot{font-family:inherit;font-size:18px;font-weight:700;box-shadow:none !important;border:0 !important}
.jr li:nth-child(1) .dot{background:var(--surface);color:var(--accent)}
.jr li:nth-child(2) .dot{background:#3f7a5a;color:#fff}
.jr li:nth-child(3) .dot{background:var(--accent);color:var(--surface)}

/* final CTA: full-bleed lime band, logo colon as two big dark-green dots cropped at the right edge */
.cta{border-radius:0;margin:0 calc(50% - 50vw);padding:96px max(24px,calc(50vw - 716px));position:relative;overflow:hidden}
.cta .card{border-radius:4px;max-width:440px;position:relative;z-index:1}
.cta .btn--cta{background:var(--surface);color:var(--on-dark)}
.cta-lbl{font-size:14px;color:var(--muted-dark)}
.cta>.cta-colon{position:absolute;z-index:0;right:-90px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:32px;pointer-events:none}
.cta-colon i{display:block;width:180px;height:180px;border-radius:50%;background:var(--surface)}
@media (max-width:1250px){.cta>.cta-colon{display:none}}

@media (max-width:960px){
  .why{padding:56px 16px}
  .cta{padding:56px 16px}
  .jr::before{width:1px;background:var(--ink)}
}

/* industries: photos in natural colour, no grey filter or green overlay */
.ind-media{background:var(--paper)}
.ind-media img{filter:none;mix-blend-mode:normal}
.ind-media img.on{opacity:1}
.ind-media::after{display:none}

/* hero: lavender phone mockup (placeholder, Anna's asset) holding the AI answer instead of the floating window.
   --u = 1px of the 414px-wide source image; screen corners measured on the image, transform matches its tilt. */
:root{--lavender:#c9c2e8}
.hd-art{padding-bottom:150px}
.hd-phone{--pw:290px;--u:calc(var(--pw) / 414);position:absolute;left:-110px;top:60px;width:var(--pw);z-index:2}
.hd-phone img{display:block;width:100%;height:auto}
.hd-screen{position:absolute;left:calc(108*var(--u));top:calc(25*var(--u));width:calc(267*var(--u));height:calc(712*var(--u));
  transform:matrix(.9995,.0322,-.117,1,0,0);transform-origin:0 0;border-radius:calc(34*var(--u));overflow:hidden;background:#fafaf9;padding-top:calc(52*var(--u))}
.hd-screen .ask{position:static;width:auto;border-radius:0;box-shadow:none;background:none}
.hd-screen .ask-top{padding:8px 10px;font-size:11px;gap:6px}
.hd-screen .ask-top .spark{width:12px;height:12px}
.hd-screen .ask-body{padding:10px;gap:8px}
.hd-screen .ask .q{font-size:11px;padding:8px 10px;max-width:92%}
.hd-screen .ask .a{gap:6px}
.hd-screen .ask .dot{width:14px;height:14px}
.hero--dots .hd-screen p{font-size:11px;line-height:1.45}
.hd-screen .ask .src{gap:4px;margin-top:8px}
.hd-screen .ask .src span{font-size:9.5px;padding:3px 6px 3px 4px;gap:4px;border-radius:4px}
.hd-screen .ask .src i{width:9px;height:9px}
.hd-art .hp-pause{left:auto;right:0;bottom:auto;top:calc(4*var(--d) + 3*var(--g) + 20px)}
@media (max-width:1100px){.hd-phone{--pw:250px;left:-80px}}
@media (max-width:960px){
  .hd-art{padding-bottom:0}
  .hd-phone{--pw:240px;position:relative;left:auto;top:auto;margin:-180px 0 0 8px}
  .hd-art .hp-pause{position:static}
}
/* hero height fix: whole phone visible, filling the hero from 32px below its top edge down to the stats line.
   Phone height = grid height + 56px above + 104px hero bottom padding; --pw follows from the 414:807 image. */
.hd-art{padding-bottom:0}
.hd-phone{left:90px;top:-56px;height:auto;overflow:visible;--pw:calc((4*var(--d) + 3*var(--g) + 160px) * 414 / 807)}
@media (max-width:960px){.hd-phone{--pw:240px;left:auto;top:auto;margin-left:64px}}

/* hero bottom: no cut-outs (tried quarter circles, dropped) */
.hero--dots{padding-bottom:0}

/* "Klienci pytają AI" round 2: points above the module, no shadow, calmer lines, step labels as microcopy */
.aiq-how{margin:0 24px 64px}
.aiq-intro{margin:0 24px 16px;max-width:680px;font-size:17px;line-height:1.5;color:var(--muted)}
.aiq-box{box-shadow:none;border-color:var(--line)}
.aiq-lbl{display:block;margin-bottom:12px;font-size:15px;font-weight:600;color:var(--ink)}
.aiq-step--ind{grid-column:1/-1;padding:24px 32px;border-bottom:1px solid var(--line)}
.aiq-ind{border-bottom:0;gap:8px}
.aiq-ind button{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:4px;font-size:15px}
.aiq-ind button[aria-pressed="true"]{border-color:var(--surface)}
.aiq-top{justify-content:flex-start;gap:12px}
.aiq-ans{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
@media (max-width:960px){
  .aiq-how{margin:0 0 48px}
  .aiq-intro{margin:0 0 16px}
  .aiq-step--ind{padding:20px}
  .aiq-ind{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
}

/* industries photo: same quarter-circle cut as the hero, in the bottom-right corner */
.ind-media::after{display:block;content:"";position:absolute;right:0;bottom:0;left:auto;top:auto;width:88px;height:88px;z-index:2;mix-blend-mode:normal;
  background:radial-gradient(circle at 100% 100%,var(--paper) 87.5px,transparent 88px)}

/* type scale rule: H2 = 52–60% of H1. H1 (hero) 44→76px, so H2 24→42px (≈56%). */
:root{--h1:clamp(44px,4.8vw,76px);--h2:clamp(24px,2.7vw,42px)}
.hero--dots h1{font-size:var(--h1)}
.head h2,.why .head h2,.cta h2,.qs h2,.svc-main h2,.faq h2,.grp-head h2,.cs2-next h2,.sv-l h2,.kt-prep h2,.kt-bio h2{font-size:var(--h2);line-height:1.1;letter-spacing:-.03em}
.cs2-main h2{font-family:inherit;text-transform:none;letter-spacing:0;font-size:15px;font-weight:600;color:var(--ink)}
@media (max-width:960px){
  .hero--dots h1{font-size:42px}
  .head h2,.why .head h2,.cta h2,.qs h2,.svc-main h2,.faq h2,.grp-head h2,.cs2-next h2,.sv-l h2,.kt-prep h2,.kt-bio h2{font-size:24px}
}
/* everything below a section heading stays smaller than --h2 */
.tile h3{font-size:clamp(22px,2vw,30px)}
.aurow h3{font-size:clamp(22px,2vw,30px)}
.jr h3{font-size:clamp(20px,1.8vw,26px)}
.reason b{font-size:22px}
.q blockquote{font-size:clamp(20px,1.9vw,28px)}
.aiq-how b{font-size:20px}
@media (max-width:960px){.tile h3,.au h3,.aurow h3{font-size:22px}.jr h3{font-size:20px}.q blockquote{font-size:19px}}

/* header: dark green with white logo at the top of the page, white after scrolling (.scrolled is set in app.js) */
.header{transition:background .25s,border-color .25s}
.header,.header:not(.scrolled){background:var(--surface);border-bottom-color:transparent;box-shadow:none}
.header:not(.scrolled) .logo{color:var(--on-dark)}
.header:not(.scrolled) .nav>a,.header:not(.scrolled) .nav>.dd>a{color:var(--muted-dark)}
.header:not(.scrolled) .nav>a:hover,.header:not(.scrolled) .nav>.dd>a:hover,.header:not(.scrolled) .nav>a[aria-current]{color:var(--on-dark)}
.header:not(.scrolled) .lang{background:transparent;border-color:var(--line-dark)}
.header:not(.scrolled) .lang a{color:var(--muted-dark)}
.header:not(.scrolled) .lang a.on{background:var(--on-dark);color:var(--surface);box-shadow:none}
.header:not(.scrolled) .burger{background:transparent;border-color:var(--line-dark)}
.header:not(.scrolled) .burger span{background:var(--on-dark);box-shadow:0 6px 0 var(--on-dark),0 -6px 0 var(--on-dark)}
.header.scrolled{background:#fff;border-bottom-color:var(--line)}
.lang,.lang a,.burger{border-radius:4px}
.lang a{font-family:inherit;letter-spacing:0;font-size:13px}
.header .nav a:focus-visible,.header .lang a:focus-visible,.header .burger:focus-visible,.header .logo:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* open mobile menu keeps the light look */
.header.open{background:var(--paper)}
.header.open .logo{color:var(--ink)}
.header.open .burger span{background:var(--ink);box-shadow:0 6px 0 var(--ink),0 -6px 0 var(--ink)}
.header.open .nav>a,.header.open .nav>.dd>a{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.header{transition:none}}

/* nav: "Co robimy" megamenu grouped by client needs (2026-10-29). Square corners, ink border, no soft shadow. */
.header .bar{position:relative}
.menu-in{border-radius:4px;border-color:var(--ink);box-shadow:none}
.menu-in a{border-radius:4px}
.nav .dd--mega{position:static}
.dd--mega .menu{left:24px;right:24px}
.menu-in.mega{width:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 24px;padding:24px}
.mega-feat{grid-column:1/-1;display:block;background:var(--accent);color:var(--surface) !important;padding:16px 20px !important;margin-bottom:8px}
.mega-feat b{font-size:17px}
.mega-feat small{color:var(--surface) !important;font-size:14px !important}
.mega-feat:hover{background:var(--accent) !important;text-decoration:underline;text-underline-offset:3px}
.mega-col{display:flex;flex-direction:column}
.mega-h{display:block;padding:8px 14px 10px;font-size:14px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line);margin-bottom:6px}
.mega-col a{padding:8px 14px;font-size:15px}
.menu-in a[aria-current="page"]{font-weight:700}
.mega-foot{grid-column:1/-1;display:flex;gap:24px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.mega-foot a{font-weight:600;padding:8px 14px}
.menu-in a:focus-visible{outline:3px solid var(--surface);outline-offset:-3px}
@media (max-width:960px){
  .dd--mega .menu{left:auto;right:auto}
  .header.open .menu-in.mega{grid-template-columns:1fr;padding:8px;gap:4px}
  .header.open .mega-feat{margin-bottom:4px}
}

/* lavender accent trial (2026-10-30), round 4: two lavender gradient dots stacked at the right edge of the grid
   (top of the last, cropped column), like the colon in the logo. The middle of the grid sits behind the phone, so the accent goes where it shows.
   Anna asked for "gradienty": an exception to the flat-dots rule, only these 2 dots. Remove this block (and .hd-lav in index.html) to undo. */
.hd-dots .hd-lav{background:linear-gradient(135deg,#ebe7f8 0%,var(--lavender) 45%,#a99fd9 100%)}
.hd-dots .hd-lav~.hd-lav{background:linear-gradient(135deg,#ded8f3 0%,#bdb4e3 50%,#9a8fd0 100%)}
/* "dla AI." highlight: lime -> lavender. Mixed in oklab so the middle stays clean (no grey or blue band); plain lime fallback. */
.hero--dots h1 mark.mk-ai{background:var(--accent);background:linear-gradient(100deg in oklab,var(--accent) 20%,var(--lavender) 100%)}
/* strip under the header: one smooth bar through the strip's colours (lime, grey-green, lavender, off-white), mixed in oklab. Segments hidden. */
.hd-strip{background:#ade88c;background:linear-gradient(90deg in oklab,#ade88c 0%,#9fb3ae 22%,#c9c2e8 50%,#f5f5f4 72%,#c9c2e8 86%,#ade88c 100%)}
.hd-strip span{display:none}
/* "dla AI." highlight round 2: no rectangle. Overlapping lime and lavender circles behind the words, softly blurred together.
   Solid core behind the letters keeps dark green text readable; only the outer edge spills onto the green. */
.hero--dots h1 mark.mk-ai{background:none;position:relative;z-index:0;padding:0 .08em}
.hero--dots h1 mark.mk-ai::before{content:"";position:absolute;z-index:-1;inset:-.12em -.22em;pointer-events:none;filter:blur(.1em);
  background:
    radial-gradient(circle .62em at 14% 42%,#ade88c 70%,transparent 100%),
    radial-gradient(circle .58em at 38% 62%,#c9c2e8 70%,transparent 100%),
    radial-gradient(circle .62em at 60% 38%,#ade88c 70%,transparent 100%),
    radial-gradient(circle .6em at 86% 58%,#c9c2e8 70%,transparent 100%),
    linear-gradient(100deg in oklab,#ade88c,#c9c2e8) center/86% 62% no-repeat}
/* round 3: softer, more blending. Bigger circles that overlap more and fade out gradually from the centre, mixed in oklab, a stronger blur. */
.hero--dots h1 mark.mk-ai::before{inset:-.18em -.3em;filter:blur(.16em);
  background:
    radial-gradient(circle .95em at 12% 45% in oklab,#ade88c 0%,rgb(173 232 140/.85) 35%,rgb(173 232 140/0) 100%),
    radial-gradient(circle .9em at 36% 60% in oklab,#c9c2e8 0%,rgb(201 194 232/.85) 35%,rgb(201 194 232/0) 100%),
    radial-gradient(circle .95em at 62% 40% in oklab,#ade88c 0%,rgb(173 232 140/.8) 35%,rgb(173 232 140/0) 100%),
    radial-gradient(circle .9em at 88% 56% in oklab,#c9c2e8 0%,rgb(201 194 232/.85) 35%,rgb(201 194 232/0) 100%),
    linear-gradient(100deg in oklab,#ade88c,#c9c2e8 40%,#ade88c 65%,#c9c2e8) center/80% 58% no-repeat}
/* "dla AI." grain: fine noise over the blurred circles only (soft-light, faded out at the edges so no rectangle shows). Text stays crisp on top. */
.hero--dots h1 mark.mk-ai::after{content:"";position:absolute;z-index:-1;inset:-.18em -.3em;pointer-events:none;opacity:.55;mix-blend-mode:soft-light;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(ellipse at center,#000 45%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 45%,transparent 75%)}
/* strip under the header, on second thought: one thin lime line */
.hd-strip{background:#ade88c;height:2px}
/* H1 is longer now: highlights never split across lines (a split "dla AI." broke the blurred background) */
.hero--dots h1 mark{white-space:nowrap}

/* "dla AI." round 4, after research on blob gradients: fewer, bigger, uneven blobs; one heavy blur on the whole layer
   (not on each shape); stops fade in oklab so lime and lavender run into each other without a grey middle; a pale highlight
   for depth; grain on top against banding. The old rectangle base and the even row of 4 circles are gone. */
.hero--dots h1 mark.mk-ai::before{inset:-.32em -.42em;filter:blur(.2em);
  background:
    radial-gradient(.55em .4em at 52% 34% in oklab,rgb(244 242 251/.95) 0%,rgb(244 242 251/0) 100%),
    radial-gradient(1.5em 1em at 26% 58% in oklab,#ade88c 0%,#ade88c 38%,rgb(173 232 140/0) 78%),
    radial-gradient(1.7em 1.1em at 74% 46% in oklab,#c9c2e8 0%,#c9c2e8 36%,rgb(201 194 232/0) 80%),
    radial-gradient(.8em .6em at 90% 76% in oklab,rgb(169 159 217/.9) 0%,rgb(169 159 217/0) 100%)}
.hero--dots h1 mark.mk-ai::after{inset:-.32em -.42em}

/* reveal: the words are dark green on dark green, so they appear "out of the dark" as the colour blooms in. Runs once, under 2s. */
@keyframes mk-bloom{from{opacity:0;transform:scale(.55);filter:blur(.5em)}to{opacity:1;transform:none;filter:blur(.2em)}}
@keyframes mk-grain{from{opacity:0}to{opacity:.55}}
@media (prefers-reduced-motion:no-preference){
  .hero--dots h1 mark.mk-ai::before{animation:mk-bloom 1.6s cubic-bezier(.2,.7,.2,1) .4s both}
  .hero--dots h1 mark.mk-ai::after{animation:mk-grain 1.6s ease-out .6s both}
}

/* second line of the H1 at H2 size: "Wybierana przez ludzi." */
.hero--dots h1 span+span{font-size:var(--h2);line-height:1.1;letter-spacing:-.03em;margin-top:.35em}
@media (max-width:960px){.hero--dots h1 span+span{font-size:26px}}
/* fix: blobs reached past the layer's edge and got cut in straight lines once the blur settled. Bigger layer, every blob fades out inside it. */
.hero--dots h1 mark.mk-ai::before{inset:-.6em -.9em;
  background:
    radial-gradient(.55em .4em at 52% 39% in oklab,rgb(244 242 251/.95) 0%,rgb(244 242 251/0) 100%),
    radial-gradient(1.5em 1em at 34% 55% in oklab,#ade88c 0%,#ade88c 50%,rgb(173 232 140/0) 78%),
    radial-gradient(1.6em 1em at 64% 48% in oklab,#c9c2e8 0%,#c9c2e8 50%,rgb(201 194 232/0) 80%),
    radial-gradient(.8em .6em at 80% 66% in oklab,rgb(169 159 217/.9) 0%,rgb(169 159 217/0) 100%)}
.hero--dots h1 mark.mk-ai::after{inset:-.6em -.9em}
/* grain, stronger: grey noise (light and dark specks) in overlay mode, only where the colour is (oval mask) */
.hero--dots h1 mark.mk-ai::after{opacity:.5;mix-blend-mode:overlay;
  background: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='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(ellipse 42% 40% at 50% 52%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 42% 40% at 50% 52%,#000 55%,transparent 100%)}
@keyframes mk-grain{from{opacity:0}to{opacity:.5}}
/* tighter: colour stays about .2em around "dla AI." so it no longer touches "widoczna" or "ludzi." on the next line */
.hero--dots h1 mark.mk-ai::before{inset:-.4em -.45em;filter:blur(.14em);
  background:
    radial-gradient(.5em .35em at 51% 39% in oklab,rgb(244 242 251/.95) 0%,rgb(244 242 251/0) 100%),
    radial-gradient(1.4em .85em at 32% 50% in oklab,#ade88c 0%,#ade88c 50%,rgb(173 232 140/0) 78%),
    radial-gradient(1.56em .82em at 63% 50% in oklab,#c9c2e8 0%,#c9c2e8 50%,rgb(201 194 232/0) 80%),
    radial-gradient(.6em .45em at 78% 61% in oklab,rgb(169 159 217/.9) 0%,rgb(169 159 217/0) 100%)}
.hero--dots h1 mark.mk-ai::after{inset:-.4em -.45em}
@keyframes mk-bloom{from{opacity:0;transform:scale(.55);filter:blur(.4em)}to{opacity:1;transform:none;filter:blur(.14em)}}
/* more room before "dla AI." so the colour can be bigger without touching "widoczna" */
.hero--dots h1 mark.mk-ai{margin-left:.32em}
.hero--dots h1 mark.mk-ai::before{inset:-.45em -.6em;filter:blur(.16em);
  background:
    radial-gradient(.6em .38em at 50% 38% in oklab,rgb(244 242 251/.95) 0%,rgb(244 242 251/0) 100%),
    radial-gradient(1.75em .8em at 31% 50% in oklab,#ade88c 0%,#ade88c 50%,rgb(173 232 140/0) 80%),
    radial-gradient(1.9em .78em at 64% 50% in oklab,#c9c2e8 0%,#c9c2e8 50%,rgb(201 194 232/0) 82%),
    radial-gradient(.7em .48em at 79% 62% in oklab,rgb(169 159 217/.9) 0%,rgb(169 159 217/0) 100%)}
/* grain you can actually see: overlay barely shows on light colours, so multiply with light-grey noise (darker specks on the colour) */
.hero--dots h1 mark.mk-ai::after{inset:-.45em -.6em;opacity:.7;mix-blend-mode:multiply;
  background: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='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.3 0 0 0 .15 1.3 0 0 0 .15 1.3 0 0 0 .15 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes mk-grain{from{opacity:0}to{opacity:.7}}
@keyframes mk-bloom{from{opacity:0;transform:scale(.55);filter:blur(.4em)}to{opacity:1;transform:none;filter:blur(.16em)}}
/* hero label: plain text, no lime block */
.hero--dots .eyebrow{background:none;padding:0;color:var(--on-dark);font-weight:500}

/* "dla AI." round 5: the blobs are now soft ellipses blurred inside a small SVG (real Gaussian blur, so the colours melt into
   each other), drawn with room to spare so nothing gets cut, even mid-animation. Layer reaches .3em left (the gap before
   "dla" is wider than that) and .7em right, where the line ends. */
.hero--dots h1 mark.mk-ai::before{inset:-.35em -.7em -.3em -.3em;filter:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 255 100' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-40%25' width='140%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3Cg filter='url(%23b)'%3E%3Cellipse cx='74' cy='51' rx='54' ry='26' fill='%23ade88c'/%3E%3Cellipse cx='168' cy='50' rx='62' ry='26' fill='%23c9c2e8'/%3E%3Cellipse cx='120' cy='56' rx='34' ry='19' fill='%23bcd6bd' opacity='.85'/%3E%3Cellipse cx='124' cy='40' rx='30' ry='12' fill='%23f4f2fb' opacity='.9'/%3E%3Cellipse cx='208' cy='62' rx='22' ry='14' fill='%23a99fd9' opacity='.9'/%3E%3Cellipse cx='46' cy='44' rx='22' ry='14' fill='%23c6f0a8' opacity='.8'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
.hero--dots h1 mark.mk-ai::after{inset:-.35em -.7em -.3em -.3em}
@keyframes mk-bloom{from{opacity:0;transform:scale(.7);filter:blur(.25em)}to{opacity:1;transform:none;filter:blur(0)}}

/* "AI." in a circle (round 6, Anna: "since we use circles, close it in a circle"). Crisp round edge like the brand dots,
   soft lime/lavender gradient inside that slowly turns, so the tonal transitions keep shifting. Grain on top.
   Reveal on load, then a slow 24s turn. Stops with the hero's "Zatrzymaj animację" button and with reduced motion. */
.hero--dots h1 mark.mk-ai{margin-left:0;padding:0 .02em 0 .04em}
.hero--dots h1 mark.mk-ai::before,.hero--dots h1 mark.mk-ai::after{inset:auto;left:50%;top:52%;width:1.5em;height:1.5em;border-radius:50%;translate:-50% -50%;transform:none}
.hero--dots h1 mark.mk-ai::before{filter:none;
  background:
    radial-gradient(circle at 34% 30% in oklab,rgb(246 244 252/.95) 0%,rgb(246 244 252/0) 34%),
    radial-gradient(circle at 22% 68% in oklab,#ade88c 0%,rgb(173 232 140/.7) 30%,rgb(173 232 140/0) 66%),
    radial-gradient(circle at 82% 26% in oklab,#c9c2e8 0%,rgb(201 194 232/.7) 32%,rgb(201 194 232/0) 70%),
    radial-gradient(circle at 76% 82% in oklab,#a99fd9 0%,rgb(169 159 217/0) 52%),
    linear-gradient(135deg in oklab,#b9eb9c,#cdc7ea)}
.hero--dots h1 mark.mk-ai::after{-webkit-mask-image:none;mask-image:none}
@keyframes mk-bloom{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
@keyframes mk-turn{to{rotate:1turn}}
@media (prefers-reduced-motion:no-preference){
  .hero--dots h1 mark.mk-ai::before{animation:mk-bloom 1.4s cubic-bezier(.2,.7,.2,1) .4s both,mk-turn 24s linear 1.8s infinite}
  .hero--dots h1 mark.mk-ai::after{animation:mk-grain 1.4s ease-out .6s both}
  .hero--dots.is-paused h1 mark.mk-ai::before{animation-play-state:paused}
}

/* shared grain texture (grey noise, boosted contrast) */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2 0 0 0 -.5 2 0 0 0 -.5 2 0 0 0 -.5 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* hero dots: light grain on every dot (soft-light, so it shows on the dark greens and on lime/lavender) */
.hd-dots span{position:relative}
.hd-dots span::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--grain);mix-blend-mode:soft-light;opacity:.45;pointer-events:none}

/* hero dots closer to the middle: the text column has empty space on its right since the H1 got shorter lines */
@media (min-width:1200px){
  .hero--dots .hd-art{margin-left:-150px}
  .hero--dots .hd-dots{transform:none}
}

/* "AI." circle, bigger + floaty: 1.75em, nudged right so it grows away from "dla". Each colour blob is its own small tile
   that drifts on its own path (12s, eased, endless), so the tones float around inside; the whole thing still turns very slowly. */
.hero--dots h1 mark.mk-ai::before,.hero--dots h1 mark.mk-ai::after{left:56%;width:1.75em;height:1.75em}
.hero--dots h1 mark.mk-ai::before{
  background:
    radial-gradient(circle .45em in oklab,rgb(246 244 252/.95),rgb(246 244 252/0)),
    radial-gradient(circle .95em in oklab,#ade88c 0%,rgb(173 232 140/.7) 40%,rgb(173 232 140/0) 100%),
    radial-gradient(circle 1em in oklab,#c9c2e8 0%,rgb(201 194 232/.7) 40%,rgb(201 194 232/0) 100%),
    radial-gradient(circle .6em in oklab,#a99fd9,rgb(169 159 217/0)),
    linear-gradient(135deg in oklab,#b9eb9c,#cdc7ea);
  background-size:2em 2em,2em 2em,2em 2em,2em 2em,100% 100%;background-repeat:no-repeat;
  background-position:-.4em -.5em,-.55em .2em,.35em -.5em,.3em .4em,0 0}
@keyframes mk-float{
  0%,100%{background-position:-.4em -.5em,-.55em .2em,.35em -.5em,.3em .4em,0 0}
  33%{background-position:-.15em -.3em,-.3em -.1em,.1em -.25em,-.05em .25em,0 0}
  66%{background-position:-.55em -.2em,-.6em .35em,.4em -.15em,.15em .05em,0 0}}
@media (prefers-reduced-motion:no-preference){
  .hero--dots h1 mark.mk-ai::before{animation:mk-bloom 1.4s cubic-bezier(.2,.7,.2,1) .4s both,mk-float 12s ease-in-out 1.8s infinite,mk-turn 40s linear 1.8s infinite}
}

/* hero -> next section: no hard cut. Stripes step from dark green through the dot-grid greens to lime, then to light grey.
   They get thinner towards the light end, so it reads like a fade. Full width (the hero is full-bleed). */
.hd-fade{height:75px;background:linear-gradient(to bottom,
  #0a3a37 0 21.3%,#265544 0 38.7%,#3c6e50 0 53.3%,#699f68 0 65.3%,#96d080 0 76%,#ade88c 0 85.3%,#d3edc2 0 93.3%,#e9efe5 0 100%)}
@media (max-width:960px){.hd-fade{height:52px}}
/* "AI." circle must not touch "dla": extra space before the mark so the circle starts ~.1em after "dla" */
.hero--dots h1 mark.mk-ai{margin-left:.3em}

/* ===== "AI." circle round 7: a spotlight inside a dark circle (Anna: colours should come out of the dark, not scale up).
   ::after = the circle itself, dark and crisp, there from the start. ::before = the colours + grain, shown through a soft
   round "spotlight" mask that opens from nothing, then drifts a little. Edges stay slightly dimmed, like a lit sphere. ===== */
@property --sr{syntax:"<percentage>";inherits:false;initial-value:55%}
@property --sx{syntax:"<percentage>";inherits:false;initial-value:50%}
@property --sy{syntax:"<percentage>";inherits:false;initial-value:48%}
.hero--dots h1 mark.mk-ai::after{z-index:-2;opacity:1;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none;
  background:#0b3b37;box-shadow:inset 0 0 0 1px rgb(173 232 140/.18)}
.hero--dots h1 mark.mk-ai::before{
  background:
    var(--grain),
    radial-gradient(circle .45em in oklab,rgb(246 244 252/.95),rgb(246 244 252/0)),
    radial-gradient(circle .95em in oklab,#ade88c 0%,rgb(173 232 140/.7) 40%,rgb(173 232 140/0) 100%),
    radial-gradient(circle 1em in oklab,#c9c2e8 0%,rgb(201 194 232/.7) 40%,rgb(201 194 232/0) 100%),
    radial-gradient(circle .6em in oklab,#a99fd9,rgb(169 159 217/0)),
    linear-gradient(135deg in oklab,#b9eb9c,#cdc7ea);
  background-size:160px 160px,2em 2em,2em 2em,2em 2em,2em 2em,100% 100%;background-repeat:repeat,no-repeat;
  background-position:0 0,-.4em -.5em,-.55em .2em,.35em -.5em,.3em .4em,0 0;
  background-blend-mode:soft-light,normal,normal,normal,normal,normal;
  -webkit-mask-image:radial-gradient(circle at var(--sx) var(--sy),#000 0%,#000 var(--sr),rgb(0 0 0/.15) calc(var(--sr) + 45%));
  mask-image:radial-gradient(circle at var(--sx) var(--sy),#000 0%,#000 var(--sr),rgb(0 0 0/.15) calc(var(--sr) + 45%))}
@keyframes mk-float{
  0%,100%{background-position:0 0,-.4em -.5em,-.55em .2em,.35em -.5em,.3em .4em,0 0}
  33%{background-position:0 0,-.15em -.3em,-.3em -.1em,.1em -.25em,-.05em .25em,0 0}
  66%{background-position:0 0,-.55em -.2em,-.6em .35em,.4em -.15em,.15em .05em,0 0}}
@keyframes mk-spot{from{--sr:-45%}to{--sr:55%}}
@keyframes mk-wander{0%{--sx:50%;--sy:48%}35%{--sx:43%;--sy:42%}70%{--sx:57%;--sy:53%}100%{--sx:50%;--sy:48%}}
@media (prefers-reduced-motion:no-preference){
  .hero--dots h1 mark.mk-ai::before{animation:mk-spot 2.2s cubic-bezier(.3,.6,.2,1) .5s both,mk-wander 11s ease-in-out 2.7s infinite,mk-float 12s ease-in-out 2.7s infinite}
  .hero--dots h1 mark.mk-ai::after{animation:none}
}

/* ===== hero: one dot is a 3D sphere: shaded lime ball with the light slowly travelling across it ===== */
@property --lx{syntax:"<percentage>";inherits:false;initial-value:32%}
@property --ly{syntax:"<percentage>";inherits:false;initial-value:30%}
.hd-dots .hd-sphere{background:radial-gradient(circle at var(--lx) var(--ly) in oklab,#f4ffe6 0%,#c4f0a6 14%,#ade88c 30%,#6ea85a 60%,#2a5a3e 86%,#123f37 100%)}
@keyframes hd-light{0%,100%{--lx:32%;--ly:30%}33%{--lx:68%;--ly:34%}66%{--lx:58%;--ly:68%}}
@media (prefers-reduced-motion:no-preference){.hd-dots .hd-sphere{animation:hd-light 14s ease-in-out infinite}}
.hero--dots.is-paused .hd-sphere{animation-play-state:paused}

/* ===== "Klienci pytają AI", simplified: one question, two answers side by side (no industry picker, no toggles) ===== */
.aiq-vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 24px}
.aiq-vs-q{grid-column:1/-1;font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.aiq-vs-q span{display:block;font-size:15px;font-weight:500;color:var(--muted);margin-bottom:4px}
.aiq-vs-col{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:24px 28px}
.aiq-vs-col p{font-size:16px;line-height:1.55;color:var(--ink)}
.aiq-vs-h{display:block;margin-bottom:12px;font-size:15px;font-weight:600;color:var(--muted)}
.aiq-vs-col--after{border-color:var(--surface);box-shadow:inset 0 0 0 1px var(--surface)}
.aiq-vs-col--after .aiq-vs-h{color:var(--surface)}
.aiq-vs .aiq-note{grid-column:1/-1;margin-top:8px}
@media (max-width:960px){.aiq-vs{grid-template-columns:1fr;margin:0}}

/* menu easier to read: brighter text, a bit bigger and heavier. Dark header: off-white (hover lime). White header: near-black. */
.header .nav{font-size:16px;font-weight:500}
.header:not(.scrolled) .nav>a,.header:not(.scrolled) .nav>.dd>a{color:var(--on-dark)}
.header:not(.scrolled) .nav>a:hover,.header:not(.scrolled) .nav>.dd>a:hover{color:var(--accent)}
.header.scrolled .nav>a,.header.scrolled .nav>.dd>a{color:var(--ink)}
.header.scrolled .nav>a:hover,.header.scrolled .nav>.dd>a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.header:not(.scrolled) .lang a{color:var(--on-dark)}

/* "AI." circle round 8 (Anna: back to the floating gradient, just a light scale-up inside the circle + fade).
   No spotlight mask (it let colour show at the start). The dark circle (::after) stands still; the gradient disc (::before)
   fades in and grows from 85% to fill it, then floats and turns slowly as before. */
.hero--dots h1 mark.mk-ai::before{-webkit-mask-image:none;mask-image:none}
@keyframes mk-reveal{from{opacity:0;scale:.85}to{opacity:1;scale:1}}
@media (prefers-reduced-motion:no-preference){
  .hero--dots h1 mark.mk-ai::before{animation:mk-reveal 1.6s cubic-bezier(.25,.6,.25,1) .5s both,mk-float 12s ease-in-out 2.1s infinite,mk-turn 40s linear 2.1s infinite}
}

/* "Klienci pytają AI": the two answers as chat windows (black, white text). Chat-like, but our own look: no logos,
   no copied UI text, lime dot as the assistant avatar, no fake input field. */
.aiq-vs{align-items:start}
.chat{margin:0}
.chat-h{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:16px;font-weight:600;color:var(--ink)}
.chat-h::before{content:"";width:10px;height:10px;border-radius:50%;background:#b5b5b0}
.chat--after .chat-h::before{background:var(--accent);box-shadow:0 0 0 1px var(--surface)}
.chat-win{background:#0e0e0e;color:#f2f2f2;border-radius:12px;padding:0 24px 28px;overflow:hidden}
.chat-top{display:flex;align-items:center;gap:8px;margin:0 -24px 24px;padding:14px 24px;border-bottom:1px solid #262626;font-size:14px;font-weight:500;color:#bdbdbd}
.chat-av{flex:none;width:22px;height:22px;border-radius:50%;background:var(--logo-dot)}
.chat-top .chat-av{width:12px;height:12px}
.chat-q{margin-left:auto;width:fit-content;max-width:85%;background:#2a2a2a;color:#f2f2f2;padding:12px 16px;border-radius:18px 18px 4px 18px;font-size:16px;line-height:1.45}
.chat-a{display:flex;gap:12px;margin-top:20px}
.chat-a p{font-size:16px;line-height:1.6;color:#ececec}
.chat-src-l{margin-top:16px;font-size:13px;color:#a3a3a3}
.chat-src{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;padding:0}
.chat-src li{padding:7px 12px;border-radius:999px;background:#1d1d1d;border:1px solid #333;font-size:14px;color:#dcdcdc}
.chat-src li.you{background:var(--accent);border-color:var(--accent);color:var(--surface);font-weight:700}
.chat-src li.none{background:none;border-style:dashed;border-color:#5a5a5a;color:#a3a3a3}
.aiq-vs .aiq-note{grid-column:1/-1}
@media (max-width:960px){.chat-win{padding:0 16px 20px}.chat-top{margin:0 -16px 20px;padding:12px 16px}.chat-q{max-width:92%}}

/* "AI." circle round 9: nothing before the reveal (no dark disc, no ring). The circle never scales; the colour blobs
   fade in while rising into place, then float and turn as before. */
.hero--dots h1 mark.mk-ai::after{content:none}
@keyframes mk-rise{
  from{opacity:0;background-position:0 0,-.4em -.1em,-.55em .6em,.35em -.1em,.3em .8em,0 0}
  to{opacity:1;background-position:0 0,-.4em -.5em,-.55em .2em,.35em -.5em,.3em .4em,0 0}}
@media (prefers-reduced-motion:no-preference){
  .hero--dots h1 mark.mk-ai::before{animation:mk-rise 1.8s cubic-bezier(.25,.6,.25,1) .5s both,mk-float 12s ease-in-out 2.3s infinite,mk-turn 40s linear 2.3s infinite}
}
/* "Asystent AI" ends with the logo colon: two stacked lime dots */
.chat-top{gap:0}
.chat-colon{display:inline-flex;flex-direction:column;justify-content:space-between;height:.62em;margin-left:3px;align-self:flex-end;margin-bottom:.22em}
.chat-colon i{width:4px;height:4px;border-radius:50%;background:var(--logo-dot)}

/* ===== "AI." circle round 10 (Anna): the circle is only a mask and does nothing. Two blob layers inside it, each clipped
   to the same fixed circle: lime fades up first (from 300ms), lavender after it (from 600ms). Nothing is visible before.
   ::after (below) = lavender layer, fills the circle when done, carries the grain and highlight.
   ::before (above) = lime blob, bottom-left, fading out to the right so lavender shows through. ===== */
.hero--dots h1 mark.mk-ai::before,.hero--dots h1 mark.mk-ai::after{content:"";position:absolute;inset:auto;left:56%;top:52%;width:1.75em;height:1.75em;
  border-radius:50%;translate:-50% -50%;transform:none;scale:none;rotate:none;filter:none;opacity:1;pointer-events:none;
  mix-blend-mode:normal;box-shadow:none;-webkit-mask-image:none;mask-image:none;background-repeat:no-repeat;background-size:140% 140%;background-position:50% 50%;background-blend-mode:normal}
.hero--dots h1 mark.mk-ai::after{z-index:-2;
  background:
    var(--grain),
    radial-gradient(circle .45em at 52% 36% in oklab,rgb(246 244 252/.9),rgb(246 244 252/0)),
    radial-gradient(circle .55em at 72% 70% in oklab,#a99fd9,rgb(169 159 217/0)),
    radial-gradient(circle 1.7em at 64% 40% in oklab,#d6d0ef 0%,#c9c2e8 45%,#b3aade 100%);
  background-size:160px 160px,140% 140%,140% 140%,140% 140%;background-repeat:repeat,no-repeat;background-blend-mode:soft-light,normal,normal,normal}
.hero--dots h1 mark.mk-ai::before{z-index:-1;
  background:radial-gradient(circle 1.05em at 36% 62% in oklab,#ade88c 0%,#ade88c 38%,rgb(173 232 140/.55) 65%,rgb(173 232 140/0) 100%)}
@keyframes mk-up{from{opacity:0;background-position:50% calc(50% + .4em)}to{opacity:1;background-position:50% 50%}}
@keyframes mk-up-lav{from{opacity:0;background-position:0 0,50% calc(50% + .4em),50% calc(50% + .4em),50% calc(50% + .4em)}to{opacity:1;background-position:0 0,50% 50%,50% 50%,50% 50%}}
@keyframes mk-drift-lime{0%,100%{background-position:50% 50%}33%{background-position:calc(50% + .12em) calc(50% - .1em)}66%{background-position:calc(50% - .1em) calc(50% + .08em)}}
@keyframes mk-drift-lav{0%,100%{background-position:0 0,50% 50%,50% 50%,50% 50%}40%{background-position:0 0,calc(50% - .12em) calc(50% + .08em),calc(50% + .1em) calc(50% - .12em),calc(50% - .08em) 50%}75%{background-position:0 0,calc(50% + .08em) calc(50% - .06em),calc(50% - .06em) calc(50% + .06em),calc(50% + .1em) calc(50% + .06em)}}
@media (prefers-reduced-motion:no-preference){
  .hero--dots h1 mark.mk-ai::before{animation:mk-up 1.2s cubic-bezier(.25,.6,.25,1) .3s both,mk-drift-lime 11s ease-in-out 1.5s infinite}
  .hero--dots h1 mark.mk-ai::after{animation:mk-up-lav 1.2s cubic-bezier(.25,.6,.25,1) .6s both,mk-drift-lav 14s ease-in-out 1.8s infinite}
  .hero--dots.is-paused h1 mark.mk-ai::before,.hero--dots.is-paused h1 mark.mk-ai::after{animation-play-state:paused}
}

/* shared stripe fade (same as under the hero): dark green -> dot greens -> lime -> light grey */
:root{--stripes:linear-gradient(to bottom,#0a3a37 0 21.3%,#265544 0 38.7%,#3c6e50 0 53.3%,#699f68 0 65.3%,#96d080 0 76%,#ade88c 0 85.3%,#d3edc2 0 93.3%,#e9efe5 0 100%)}
.hd-fade{background:var(--stripes)}

/* case tiles: the visual sits on the stripes, inset from the sides, flush with the bottom.
   The client logo is a white tab rising from the description below it (same white, no shadow). */
.case .img{background:var(--stripes);overflow:hidden}
.case .img>img{inset:14% 9% 0;width:82%;height:86%;object-fit:cover;object-position:top;border-radius:4px 4px 0 0}
.case .img .lg{left:28px;top:auto;bottom:0;padding:14px 18px 10px;border-radius:4px 4px 0 0;background:var(--card);box-shadow:none;z-index:1}
.case .img .lg img{height:24px}
.case .body{padding-top:20px}
@media (max-width:960px){.case .img .lg{left:20px}}

/* contact paths: CTA in the AI section and one mid-page after the testimonials */
.aiq-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin:40px 24px 0}
.aiq-act .aiq-link{margin:0}
.mid-cta{padding:0 0 120px}
.mid-cta-in{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;margin:0 24px;padding:40px 48px;background:var(--card);border-radius:4px;box-shadow:inset 0 0 0 1px var(--line)}
.mid-cta h2{font-size:var(--h2);line-height:1.1;letter-spacing:-.03em}
.mid-cta p{margin-top:8px;font-size:17px;line-height:1.5;color:var(--muted)}
.mid-cta .btn{flex:none}
@media (max-width:960px){.aiq-act{margin:32px 0 0}.mid-cta{padding-bottom:80px}.mid-cta-in{flex-direction:column;align-items:flex-start;margin:0;padding:28px 24px}}
/* fix: the repeat list was shorter than the layer list, so the dark lavender blob tiled (visible copies). One value per layer. */
.hero--dots h1 mark.mk-ai::after{background-repeat:repeat,no-repeat,no-repeat,no-repeat}
.hero--dots h1 mark.mk-ai::before{background-repeat:no-repeat}

/* ===== "AI." circle round 11: same idea, smoother build. The pseudo-element version repainted big gradients every frame
   (stutter). Now: a fixed round window (.mk-orb, clip-path circle, never animates) with separate soft blobs inside that
   only move with transform/opacity, which the browser animates smoothly. Lime fades up from 300ms, lavender from 600ms. ===== */
.hero--dots h1 mark.mk-ai::before,.hero--dots h1 mark.mk-ai::after{content:none}
.mk-orb{position:absolute;z-index:-1;left:calc(56% - .875em);top:calc(52% - .875em);width:1.75em;height:1.75em;
  clip-path:circle(50%);isolation:isolate;pointer-events:none}
.mk-orb i{position:absolute;display:block;border-radius:50%}
.mk-orb .b-lav{left:-.25em;top:-.25em;width:2.25em;height:2.25em;background:radial-gradient(circle at 62% 40% in oklab,#ddd8f2 0%,#c9c2e8 45%,#b1a8dc 100%)}
.mk-orb .b-deep{left:.95em;top:1em;width:1em;height:1em;background:#a99fd9;filter:blur(.16em)}
.mk-orb .b-hi{left:.6em;top:.2em;width:.7em;height:.45em;background:#f6f4fc;filter:blur(.14em);opacity:.9}
.mk-orb .b-lime{left:-.35em;top:.45em;width:1.5em;height:1.5em;background:radial-gradient(circle in oklab,#ade88c 0%,#ade88c 45%,rgb(173 232 140/0) 72%);filter:blur(.06em)}
.mk-orb .b-grain{inset:0;border-radius:0;background:var(--grain);mix-blend-mode:soft-light;opacity:.9}
@keyframes orb-up{from{opacity:0;translate:0 .45em}}
@keyframes orb-up-hi{from{opacity:0;translate:0 .45em}to{opacity:.9;translate:0 0}}
@keyframes orb-fade-grain{from{opacity:0}to{opacity:.9}}
@keyframes orb-drift-a{0%,100%{transform:none}33%{transform:translate(.12em,-.1em)}66%{transform:translate(-.08em,.08em)}}
@keyframes orb-drift-b{0%,100%{transform:none}40%{transform:translate(-.12em,.06em)}75%{transform:translate(.06em,-.1em)}}
@media (prefers-reduced-motion:no-preference){
  .mk-orb .b-lime{animation:orb-up 1.2s cubic-bezier(.25,.6,.25,1) .3s both,orb-drift-a 11s ease-in-out 1.5s infinite}
  .mk-orb .b-lav{animation:orb-up 1.2s cubic-bezier(.25,.6,.25,1) .6s both,orb-drift-b 16s ease-in-out 1.8s infinite}
  .mk-orb .b-deep{animation:orb-up 1.2s cubic-bezier(.25,.6,.25,1) .6s both,orb-drift-a 13s ease-in-out 1.8s infinite reverse}
  .mk-orb .b-hi{animation:orb-up-hi 1.2s cubic-bezier(.25,.6,.25,1) .6s both,orb-drift-b 9s ease-in-out 1.8s infinite}
  .mk-orb .b-grain{animation:orb-fade-grain 1.2s ease-out .6s both}
  .hero--dots.is-paused .mk-orb i{animation-play-state:paused}
}

/* case tiles: smooth grainy gradient instead of stripes (same colours: dark green -> greens -> lime -> light grey) */
.case .img{background:var(--grain),linear-gradient(to bottom in oklab,#0a3a37 0%,#265544 22%,#4f8259 45%,#96d080 66%,#ade88c 76%,#e9efe5 100%);
  background-size:160px 160px,100% 100%;background-repeat:repeat,no-repeat;background-blend-mode:soft-light,normal}
/* case tiles: bigger logo tab; visuals dimmed until hover/focus (only on devices with a mouse, so phones see them normally) */
.case .img .lg{padding:18px 24px 12px}
.case .img .lg img{height:34px;max-width:170px}
@media (hover:hover){
  .case .img>img{filter:brightness(.7) saturate(.9);transition:filter .35s ease}
  .case:hover .img>img,.case:focus-visible .img>img{filter:none}
}
@media (prefers-reduced-motion:reduce){.case .img>img{transition:none}}
/* "AI." circle timing: longer, softer landing (expo ease-out, 2.2s); drift starts a moment after the blobs settle */
@media (prefers-reduced-motion:no-preference){
  .mk-orb .b-lime{animation:orb-up 2.2s cubic-bezier(.16,1,.3,1) .3s both,orb-drift-a 11s ease-in-out 3.2s infinite}
  .mk-orb .b-lav{animation:orb-up 2.2s cubic-bezier(.16,1,.3,1) .6s both,orb-drift-b 16s ease-in-out 3.5s infinite}
  .mk-orb .b-deep{animation:orb-up 2.2s cubic-bezier(.16,1,.3,1) .6s both,orb-drift-a 13s ease-in-out 3.5s infinite reverse}
  .mk-orb .b-hi{animation:orb-up-hi 2.2s cubic-bezier(.16,1,.3,1) .6s both,orb-drift-b 9s ease-in-out 3.5s infinite}
  .mk-orb .b-grain{animation:orb-fade-grain 2.2s cubic-bezier(.16,1,.3,1) .6s both}
}
/* grid rule: boxes (cards, tiles, windows) sit on the container edge like the offer and case tiles; text (headings, lists) is indented 24px */
.aiq-vs,.mid-cta-in{margin-left:0;margin-right:0}
.aiq-vs .aiq-note{padding-left:24px;padding-right:24px}
@media (max-width:960px){.aiq-vs .aiq-note{padding-left:0;padding-right:0}}
/* "AI." circle timing (Anna): durations, not delays. Both start together; lime takes 300ms, lavender 600ms. */
@media (prefers-reduced-motion:no-preference){
  .mk-orb .b-lime{animation:orb-up .3s cubic-bezier(.16,1,.3,1) .4s both,orb-drift-a 11s ease-in-out 1.6s infinite}
  .mk-orb .b-lav{animation:orb-up .6s cubic-bezier(.16,1,.3,1) .4s both,orb-drift-b 16s ease-in-out 1.6s infinite}
  .mk-orb .b-deep{animation:orb-up .6s cubic-bezier(.16,1,.3,1) .4s both,orb-drift-a 13s ease-in-out 1.6s infinite reverse}
  .mk-orb .b-hi{animation:orb-up-hi .6s cubic-bezier(.16,1,.3,1) .4s both,orb-drift-b 9s ease-in-out 1.6s infinite}
  .mk-orb .b-grain{animation:orb-fade-grain .6s cubic-bezier(.16,1,.3,1) .4s both}
}
/* reveal waits for page load (app.js adds .orb-wait, then .go). Without JS the circle is simply shown. */
.mk-orb.orb-wait:not(.go) i{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .mk-orb.orb-wait:not(.go) i{animation:none}
  .mk-orb.go .b-lime{animation:orb-up .3s cubic-bezier(.16,1,.3,1) both,orb-drift-a 11s ease-in-out 1.2s infinite}
  .mk-orb.go .b-lav{animation:orb-up .6s cubic-bezier(.16,1,.3,1) both,orb-drift-b 16s ease-in-out 1.2s infinite}
  .mk-orb.go .b-deep{animation:orb-up .6s cubic-bezier(.16,1,.3,1) both,orb-drift-a 13s ease-in-out 1.2s infinite reverse}
  .mk-orb.go .b-hi{animation:orb-up-hi .6s cubic-bezier(.16,1,.3,1) both,orb-drift-b 9s ease-in-out 1.2s infinite}
  .mk-orb.go .b-grain{animation:orb-fade-grain .6s cubic-bezier(.16,1,.3,1) both}
  .hero--dots.is-paused .mk-orb i{animation-play-state:paused}
}

/* ===== 8-column grid (2026-10-30, Anna): container 1480px, 8 columns, 24px gutter, 24px outer margin.
   Everything starts on the container edge (no extra 24px text indent any more).
   Spans: heading 1–5 + intro 6–8 · halves 1–4 / 5–8 · three-ups in 3–8 (2 columns each) · under 960px one column. ===== */
:root{--cols:repeat(8,minmax(0,1fr));--gut:24px}
.head,.hm-more,.qs,.jr,.ind,.aiq-how{padding-left:0;padding-right:0}
.aiq-how,.aiq-act{margin-left:0;margin-right:0}
.aiq-vs .aiq-note{padding-left:0;padding-right:0}
@media (min-width:961px){
  .head{display:grid;grid-template-columns:var(--cols);column-gap:var(--gut);align-items:end}
  .head h2{grid-column:1/6;max-width:none}
  .head p{grid-column:6/9;max-width:none}
  .why .head h2{grid-column:1/7}
  /* offer: asymmetric 2 rows (5+3, 3+5) */
  .bento{grid-template-columns:var(--cols);gap:var(--gut)}
  .bento .t1{grid-column:1/6}.bento .t2{grid-column:6/9}.bento .t3{grid-column:1/4}.bento .t4{grid-column:4/9}
  .bento .t1,.bento .t2,.bento .t3,.bento .t4{grid-row:auto}
  /* three-ups: columns 3–8, two columns each */
  .aiq-how,.reasons,.jr:not(.jr6){grid-template-columns:var(--cols);column-gap:var(--gut)}
  .aiq-how>li:nth-child(1),.reasons>.reason:nth-child(1),.jr:not(.jr6)>li:nth-child(1){grid-column:3/5}
  .aiq-how>li:nth-child(2),.reasons>.reason:nth-child(2),.jr:not(.jr6)>li:nth-child(2){grid-column:5/7}
  .aiq-how>li:nth-child(3),.reasons>.reason:nth-child(3),.jr:not(.jr6)>li:nth-child(3){grid-column:7/9}
  /* halves */
  .aiq-vs{grid-template-columns:var(--cols);column-gap:var(--gut)}
  .aiq-vs>.chat:nth-of-type(1){grid-column:1/5}.aiq-vs>.chat:nth-of-type(2){grid-column:5/9}
  /* cases: featured first case 1–4, two more 5–6 and 7–8, same image height */
  .cases{grid-template-columns:var(--cols);gap:var(--gut)}
  .cases .c1{grid-column:1/5}.cases .c2{grid-column:5/7}.cases .c3{grid-column:7/9}
  .cases .case .img{aspect-ratio:auto;height:300px}
  /* testimonials 1–3 / 4–8, industries 1–5 / 6–8, final CTA 1–5 / 6–8 */
  .qs{grid-template-columns:var(--cols);column-gap:var(--gut)}
  .qs>.qs-side{grid-column:1/4}.qs>.q-stage{grid-column:4/9}
  .ind{grid-template-columns:var(--cols);column-gap:var(--gut)}
  .ind>.ind-list{grid-column:1/6}.ind>.ind-media{grid-column:6/9}
  .cta{grid-template-columns:var(--cols);column-gap:var(--gut)}
  .cta>div:not(.card){grid-column:1/6}.cta>.card{grid-column:6/9}
}
/* "AI." reveal, slower and visible: gentle ease-out (not expo, which did ~90% in the first moments), longer rise.
   Same 1:2 ratio Anna asked for: lime 1.2s, lavender 2.4s, both start together. */
@keyframes orb-up{from{opacity:0;translate:0 .9em}}
@keyframes orb-up-hi{from{opacity:0;translate:0 .9em}to{opacity:.9;translate:0 0}}
@media (prefers-reduced-motion:no-preference){
  .mk-orb.go .b-lime{animation:orb-up 1.2s cubic-bezier(.33,1,.68,1) both,orb-drift-a 11s ease-in-out 3s infinite}
  .mk-orb.go .b-lav{animation:orb-up 2.4s cubic-bezier(.33,1,.68,1) both,orb-drift-b 16s ease-in-out 3s infinite}
  .mk-orb.go .b-deep{animation:orb-up 2.4s cubic-bezier(.33,1,.68,1) both,orb-drift-a 13s ease-in-out 3s infinite reverse}
  .mk-orb.go .b-hi{animation:orb-up-hi 2.4s cubic-bezier(.33,1,.68,1) both,orb-drift-b 9s ease-in-out 3s infinite}
  .mk-orb.go .b-grain{animation:orb-fade-grain 2.4s cubic-bezier(.33,1,.68,1) both}
}

/* offer tiles: one consistent style, 2x2 on the grid (1–4 / 5–8), less inner padding. No colour-coded tiles, no orbs,
   no "01" numbers (they suggested an order that isn't there). */
@media (min-width:961px){.bento .t1,.bento .t3{grid-column:1/5}.bento .t2,.bento .t4{grid-column:5/9}}
.bento{grid-auto-rows:auto}
.bento .tile{background:var(--card);color:var(--ink);border:0;box-shadow:inset 0 0 0 1px var(--line);padding:28px}
.bento .tile p{color:var(--muted)}
.bento .tile .chips span{background:var(--paper);border:0;color:var(--muted)}
.bento .tile .orb,.bento .tile>.mono{display:none}
.bento .tile h3{margin-top:0}
.bento .tile::after{content:none}
/* no "water rings": the blobs had firm round edges that slid through the window while rising. Now every blob is a
   heavily blurred circle, and the lavender one is bigger than the window, so no edge ever shows; only soft colour rises. */
.mk-orb .b-lav{left:-.45em;top:-.45em;width:2.65em;height:2.65em;background:radial-gradient(circle at 60% 42% in oklab,#ddd8f2 0%,#c9c2e8 50%,#b5acde 100%);filter:blur(.3em)}
.mk-orb .b-lime{left:-.3em;top:.5em;width:1.5em;height:1.5em;background:#ade88c;filter:blur(.28em)}
.mk-orb .b-deep{filter:blur(.3em)}
.mk-orb .b-hi{filter:blur(.22em)}
@keyframes orb-up{from{opacity:0;translate:0 .6em}}
@keyframes orb-up-hi{from{opacity:0;translate:0 .6em}to{opacity:.9;translate:0 0}}
/* the round window itself is slightly blurred: soft mask edge instead of a hard clip */
.mk-orb{clip-path:none;
  -webkit-mask-image:radial-gradient(circle closest-side,#000 calc(100% - .16em),transparent 100%);
  mask-image:radial-gradient(circle closest-side,#000 calc(100% - .16em),transparent 100%)}
.mk-orb{-webkit-mask-image:radial-gradient(circle closest-side,#000 calc(100% - .38em),transparent 100%);
  mask-image:radial-gradient(circle closest-side,#000 calc(100% - .38em),transparent 100%)}
/* bigger window: 2.1em (was 1.75em); blobs scaled with it; a bit more space before "AI." so it still clears "dla" */
.hero--dots h1 mark.mk-ai{margin-left:.45em}
.mk-orb{left:calc(56% - 1.05em);top:calc(52% - 1.05em);width:2.1em;height:2.1em}
.mk-orb .b-lav{left:-.5em;top:-.5em;width:3.1em;height:3.1em}
.mk-orb .b-lime{left:-.36em;top:.6em;width:1.8em;height:1.8em}
.mk-orb .b-deep{left:1.14em;top:1.2em;width:1.2em;height:1.2em}
.mk-orb .b-hi{left:.72em;top:.24em;width:.84em;height:.54em}
/* offer tiles: original colours back (dark green, lime, white, white); layout, padding and no-numbers stay */
.bento .t1{background:var(--surface);color:var(--on-dark);box-shadow:none}
.bento .t1 p{color:var(--muted-dark)}.bento .t1 .chips span{background:none;box-shadow:inset 0 0 0 1px var(--line-dark);color:var(--muted-dark)}
.bento .t2{background:var(--accent);color:var(--surface);box-shadow:none}
.bento .t2 p{color:var(--surface)}.bento .t2 .chips span{background:rgba(0,39,38,.1);color:var(--surface)}
.bento .t3,.bento .t4{background:var(--card);box-shadow:inset 0 0 0 1px var(--ink)}
.bento .t1:focus-visible{outline-color:var(--accent)}
/* start: the light "searches" for AI. — three small moves of the whole round window while the blobs fade up, then it settles */
@keyframes orb-search{0%{translate:-.45em -.18em}30%{translate:.32em .12em}62%{translate:-.16em .08em}100%{translate:0 0}}
@media (prefers-reduced-motion:no-preference){
  .mk-orb.go{animation:orb-search 2.6s cubic-bezier(.45,0,.25,1) both}
  .hero--dots.is-paused .mk-orb{animation-play-state:paused}
}

/* ===== Label with the triple "c" (from GoodC LPs in Figma, node 2003:2597): three stacked "c" marks in three shades,
   uppercase text, logo colon at the end. Colours per variant via custom properties. ===== */
.lbl{--lb-1:#d3edc2;--lb-2:#96d080;--lb-3:#3c6e50;--lb-colon:#96d080;--lb-text:var(--surface);
  display:inline-flex;align-items:center;gap:4px;font-size:16px;font-weight:400;line-height:.7;letter-spacing:.1em;text-transform:uppercase;color:var(--lb-text)}
.lbl-c{width:.555em;height:.748em;flex:none;overflow:visible}
.lbl-c .c1{fill:var(--lb-1)}.lbl-c .c2{fill:var(--lb-2)}.lbl-c .c3{fill:var(--lb-3)}
.lbl-colon{display:inline-flex;flex-direction:column;justify-content:space-between;height:.46em;margin-left:4px}
.lbl-colon i{display:block;width:.175em;height:.168em;border-radius:50%;background:var(--lb-colon)}
/* on dark green */
.lbl--dark{--lb-1:#3c6e50;--lb-2:#96d080;--lb-3:#ade88c;--lb-colon:#ade88c;--lb-text:var(--on-dark)}
/* lavender accent */
.lbl--lav{--lb-1:#e6e2f5;--lb-2:#c9c2e8;--lb-3:#8f84c9;--lb-colon:#c9c2e8}
.cta .card .lbl{margin:2px 0}
/* Mikołaj's photo (portrait from Figma): frame on the face in round avatars */
img[src$="mikolaj.png"]{object-position:50% 32%}
/* spotlight search, calmer: mostly sideways, small and shrinking swings (like settling), barely any vertical move */
@keyframes orb-search{0%{translate:-.24em -.05em}38%{translate:.14em .03em}72%{translate:-.05em .01em}100%{translate:0 0}}

/* "AI." reveal as a story, so both parts read clearly:
   1) search (0–1.7s): a dim, soft beam of light sweeps in from the left, overshoots, comes back and settles on "AI."
      (decelerating swings, almost no vertical move, like a hand-held light);
   2) found (from 1.3s): the colour switches on: lime fades up in 1.2s, lavender in 2.4s, the beam fades away;
   3) then the slow drift. */
.mk-orb .b-beam{inset:-.2em;background:radial-gradient(circle,rgb(246 244 252/.6) 0%,rgb(246 244 252/.25) 45%,rgb(246 244 252/0) 72%);filter:blur(.12em);opacity:0}
@keyframes orb-search{
  0%{translate:-.75em -.06em;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  48%{translate:.2em .03em;animation-timing-function:cubic-bezier(.4,0,.3,1)}
  78%{translate:-.06em 0;animation-timing-function:cubic-bezier(.4,0,.4,1)}
  100%{translate:0 0}}
@keyframes orb-beam{0%{opacity:0}15%{opacity:1}70%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .mk-orb.go{animation:orb-search 1.7s both}
  .mk-orb.go .b-beam{animation:orb-beam 2.6s ease-in-out both}
  .mk-orb.go .b-lime{animation:orb-up 1.2s cubic-bezier(.33,1,.68,1) 1.3s both,orb-drift-a 11s ease-in-out 4s infinite}
  .mk-orb.go .b-lav{animation:orb-up 2.4s cubic-bezier(.33,1,.68,1) 1.3s both,orb-drift-b 16s ease-in-out 4s infinite}
  .mk-orb.go .b-deep{animation:orb-up 2.4s cubic-bezier(.33,1,.68,1) 1.3s both,orb-drift-a 13s ease-in-out 4s infinite reverse}
  .mk-orb.go .b-hi{animation:orb-up-hi 2.4s cubic-bezier(.33,1,.68,1) 1.3s both,orb-drift-b 9s ease-in-out 4s infinite}
  .mk-orb.go .b-grain{animation:orb-fade-grain 2.4s cubic-bezier(.33,1,.68,1) 1.3s both}
}
@media (prefers-reduced-motion:reduce){.mk-orb .b-beam{display:none}}
/* contact card: bigger photo of Mikołaj */
.cta .card img{width:112px;height:112px}
@media (max-width:960px){.cta .card img{width:88px;height:88px}}

/* fade-up, after research: movement and light need different curves. Movement eases out (fast start, soft landing);
   opacity runs linear. Ease-out on opacity made the blobs jump to ~half visibility at once and then crawl to full. */
@keyframes orb-rise{from{translate:0 .6em}to{translate:0 0}}
@keyframes orb-op{from{opacity:0}to{opacity:1}}
@keyframes orb-op-hi{from{opacity:0}to{opacity:.9}}
@keyframes orb-op-grain{from{opacity:0}to{opacity:.9}}
@media (prefers-reduced-motion:no-preference){
  .mk-orb.go .b-lime{animation:orb-rise 1.2s cubic-bezier(.22,1,.36,1) 1.3s both,orb-op 1.2s linear 1.3s both,orb-drift-a 11s ease-in-out 4s infinite}
  .mk-orb.go .b-lav{animation:orb-rise 2.4s cubic-bezier(.22,1,.36,1) 1.3s both,orb-op 2.4s linear 1.3s both,orb-drift-b 16s ease-in-out 4s infinite}
  .mk-orb.go .b-deep{animation:orb-rise 2.4s cubic-bezier(.22,1,.36,1) 1.3s both,orb-op 2.4s linear 1.3s both,orb-drift-a 13s ease-in-out 4s infinite reverse}
  .mk-orb.go .b-hi{animation:orb-rise 2.4s cubic-bezier(.22,1,.36,1) 1.3s both,orb-op-hi 2.4s linear 1.3s both,orb-drift-b 9s ease-in-out 4s infinite}
  .mk-orb.go .b-grain{animation:orb-op-grain 2.4s linear 1.3s both}
  .mk-orb.go .b-beam{animation:orb-beam 2.6s linear both}
}
/* "AI." shows sooner: shorter, smaller search (1s, one swing and settle); colour starts at 0.5s */
@keyframes orb-search{
  0%{translate:-.35em -.03em;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  60%{translate:.08em .01em;animation-timing-function:cubic-bezier(.4,0,.4,1)}
  100%{translate:0 0}}
@keyframes orb-beam{0%{opacity:0}20%{opacity:1}55%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .mk-orb.go{animation:orb-search 1s both}
  .mk-orb.go .b-beam{animation:orb-beam 1.6s linear both}
  .mk-orb.go .b-lime{animation:orb-rise 1.2s cubic-bezier(.22,1,.36,1) .5s both,orb-op 1.2s linear .5s both,orb-drift-a 11s ease-in-out 3s infinite}
  .mk-orb.go .b-lav{animation:orb-rise 2.4s cubic-bezier(.22,1,.36,1) .5s both,orb-op 2.4s linear .5s both,orb-drift-b 16s ease-in-out 3s infinite}
  .mk-orb.go .b-deep{animation:orb-rise 2.4s cubic-bezier(.22,1,.36,1) .5s both,orb-op 2.4s linear .5s both,orb-drift-a 13s ease-in-out 3s infinite reverse}
  .mk-orb.go .b-hi{animation:orb-rise 2.4s cubic-bezier(.22,1,.36,1) .5s both,orb-op-hi 2.4s linear .5s both,orb-drift-b 9s ease-in-out 3s infinite}
  .mk-orb.go .b-grain{animation:orb-op-grain 2.4s linear .5s both}
}
/* hero label uses the triple-"c" label (dark variant) */
.hero--dots .eyebrow.lbl{display:inline-flex;font-size:16px;font-weight:400;padding:0;background:none;color:var(--lb-text)}
@media (max-width:960px){.hero--dots .eyebrow.lbl{font-size:14px}}
/* label fixes: colon drawn as the Figma vector (two circles) instead of tiny CSS dots; every label starts with a lime "c" */
.lbl-colon{display:block;flex:none;width:.175em;height:.46em;margin-left:4px;overflow:visible;fill:var(--lb-colon)}
.lbl{--lb-1:#ade88c;--lb-2:#6aa457;--lb-3:#2f5e3c}
.lbl--dark{--lb-1:#ade88c;--lb-2:#7cba66;--lb-3:#4f8259}
.lbl--lav{--lb-1:#ade88c;--lb-2:#c9c2e8;--lb-3:#8f84c9}
/* "Dziś / Po przygotowaniu strony": one column in from each side (columns 2–7), note aligned with them */
@media (min-width:961px){
  .aiq-vs>.chat:nth-of-type(1){grid-column:2/5}.aiq-vs>.chat:nth-of-type(2){grid-column:5/8}
  .aiq-vs .aiq-note{grid-column:2/8}
}
/* label starts with one full lime half-circle (left half of a dot) instead of the triple "c" */
.lbl-half{display:block;flex:none;width:.375em;height:.75em;margin-right:4px;fill:var(--accent)}
/* chat windows: equal height side by side; CTA row under the AI section centred */
.aiq-vs{align-items:stretch}
.aiq-vs>.chat{display:flex;flex-direction:column}
.aiq-vs .chat-win{flex:1}
.aiq-act{justify-content:center;text-align:center}

/* six-step process: one row on desktop, dots from dark green to lime (fix 02.11.2026) */
.jr.jr6 li:nth-child(1) .dot{background:#002726;color:var(--accent)}
.jr.jr6 li:nth-child(2) .dot{background:#0d4a3c;color:var(--accent)}
.jr.jr6 li:nth-child(3) .dot{background:#3f7a5a;color:#fff}
.jr.jr6 li:nth-child(4) .dot{background:#6fa577;color:var(--surface)}
.jr.jr6 li:nth-child(5) .dot{background:#8ec986;color:var(--surface)}
.jr.jr6 li:nth-child(6) .dot{background:var(--accent);color:var(--surface)}

/* Mikołaj's photo: a plain circle on the contact page too (02.11.2026) */
.kt-photo img{aspect-ratio:1;object-fit:cover;border-radius:50%}

/* hero: CSS phone, straight, so the AI answer sits flat on the screen (replaces the mockup image, 02.11.2026) */
.hd-phone{--ph:calc(4*var(--d) + 3*var(--g) + 127px);--pw:calc(var(--ph) * .54);width:var(--pw);height:var(--ph);left:94px;background:#0c1716;border-radius:48px;box-shadow:0 0 0 2px var(--lavender);box-sizing:border-box}
.hd-screen{position:absolute;left:10px;right:10px;top:10px;bottom:10px;width:auto;height:auto;transform:none;border-radius:38px;padding-top:50px;background:#fafaf9}
.hd-screen::before{content:"";position:absolute;left:50%;top:13px;width:92px;height:26px;margin-left:-46px;border-radius:14px;background:#0c1716}
.hd-screen .ask-top{padding:10px 16px;font-size:14px;line-height:1.3;gap:8px}
.hd-screen .ask-top .spark{width:14px;height:14px;flex:none}
.hd-screen .ask-body{padding:14px 16px;gap:12px}
.hd-screen .ask .q{font-size:14px;line-height:1.4;padding:10px 12px;max-width:94%}
.hd-screen .ask .a{gap:8px}
.hd-screen .ask .dot{width:18px;height:18px;flex:none}
.hero--dots .hd-screen p{font-size:14px;line-height:1.5}
.hd-screen .ask .src{gap:6px;margin-top:12px;flex-wrap:wrap}
.hd-screen .ask .src span{font-size:12px;padding:4px 8px 4px 6px;gap:5px}
.hd-screen .ask .src i{width:10px;height:10px}
@media (max-width:960px){
  .hd-phone{--ph:520px;--pw:270px;left:auto;margin-left:24px;border-radius:40px}
  .hd-screen{left:8px;right:8px;top:8px;bottom:8px;border-radius:32px;padding-top:44px}
  .hd-screen::before{top:10px;width:76px;height:22px;margin-left:-38px}
  .hd-screen .ask-top,.hd-screen .ask .q,.hero--dots .hd-screen p{font-size:13px}
}

/* phone: Android look: punch-hole camera, three nav buttons at the bottom */
.hd-screen::before{width:16px;height:16px;margin-left:-8px;border-radius:50%;top:16px}
.hd-screen .ask{margin:0}
.hd-nav{position:absolute;left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;justify-content:space-around;padding:0 24px;border-top:1px solid var(--line);background:#fafaf9}
.hd-nav svg{width:18px;height:18px;fill:none;stroke:#6b6b6b;stroke-width:1.5;stroke-linejoin:round}
@media (max-width:960px){.hd-screen::before{width:14px;height:14px;margin-left:-7px;top:13px}.hd-nav{height:44px}}
/* testimonials: more room between the logo column and the quote */
@media (min-width:961px){.qs-side{padding-right:72px}}

/* testimonials: 12 opinions in groups of 3 (1-3, 4-6...); the active one moves through a group, then app.js shows the next */
.q-tabs button:nth-child(n+4){display:none}
.q-tabs img{max-width:150px;object-fit:contain;object-position:left center}

/* subpages: nav and hero form one dark block, same as the home page (02.11.2026) */
.sub-bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.phero,.kt,.cs2-head,.bl-head{margin:0 calc(50% - 50vw);max-width:none;border-radius:0;padding:72px calc(50vw - 50%) 64px;box-sizing:border-box;background:var(--surface);color:var(--on-dark)}
.phero h1,.kt h1,.bl-head h1,.cs2-title h1,.phero--col h1{font-size:clamp(34px,4.8vw,69px) !important;line-height:1.02;letter-spacing:-.04em;font-weight:700}
.phero p,.bl-head p{font-size:20px;color:var(--muted-dark)}
.cs2-head .crumbs,.bl-head .crumbs{color:var(--muted-dark)}
.cs2-head .crumbs a,.bl-head .crumbs a{color:var(--on-dark)}
.bl-head .crumbs a:hover{color:var(--accent)}
.cs2-head .mono{color:var(--on-dark)}.cs2-head .mono.dim{color:var(--muted-dark)}
.cs2-head h1,.bl-head h1{color:var(--on-dark)}
.hd-fade.sub-bleed+*{margin-top:48px}
.hd-fade.sub-bleed+.sec{margin-top:0}
@media (max-width:960px){
  .phero,.kt,.cs2-head,.bl-head{padding-top:40px;padding-bottom:44px}
  .phero p,.bl-head p{font-size:17px}
  .hd-fade.sub-bleed+*{margin-top:24px}
  .hd-fade.sub-bleed+.sec{margin-top:0}
}

/* buttons inside a dark subpage hero (404) must stay visible */
.phero .btn:not([class*="--"]){background:var(--accent);color:var(--surface)}
.phero .btn--line{background:none;color:var(--on-dark);border-color:var(--line-dark)}

/* services: no line above the first chapter, the hero already separates it */
#strategia.sv{border-top:0}
/* AI offer: proof from Whites case studies, same square tiles as the home offer */
.wproof-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.wproof-grid li{display:flex;flex-direction:column;gap:14px;padding:32px;border-radius:4px}
.wproof-grid li:only-child{grid-column:1/-1}
.wp-dark{background:var(--surface);color:var(--on-dark)}
.wp-lime{background:var(--accent);color:var(--surface)}
.wp-line{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.wproof-n{font-size:clamp(40px,4vw,56px);line-height:1;letter-spacing:-.04em;font-weight:700}
.wproof-grid h3{font-size:clamp(20px,1.8vw,26px);line-height:1.2;letter-spacing:-.02em;font-weight:600;color:inherit}
.wproof-grid p{font-size:16px;line-height:1.5;color:inherit;opacity:.8}
.wproof-grid a{margin-top:auto;padding-top:12px;font-weight:600;color:inherit}
.wproof-grid a:hover{text-decoration:underline;text-underline-offset:3px}
.wproof-grid i{font-style:normal}
.wproof-note{margin-top:16px;font-size:14px;line-height:1.5;color:var(--muted)}
/* solution pages: scope as a ruled list with a sticky heading, same split as /uslugi */
.zakres{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.zakres .head{display:block;position:sticky;top:112px;margin:0;padding:0}
.zakres .head p{margin-top:16px;max-width:360px}
.zakres-list{list-style:none;border-bottom:1px solid var(--line)}
.zakres-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:baseline;padding:28px 0;border-top:1px solid var(--line)}
.zakres-list h3{font-size:clamp(20px,1.8vw,26px);line-height:1.2;letter-spacing:-.02em;font-weight:600}
.zakres-list p{font-size:16px;line-height:1.5;color:var(--muted)}
@media (max-width:960px){.zakres{grid-template-columns:1fr;gap:24px}.zakres .head{position:static}.zakres-list li{grid-template-columns:1fr;gap:8px;padding:20px 0}}
/* AI offer: what the client gets, dark band like "w dobrych rękach" on the home page */
.getbox{margin:0 calc(50% - 50vw) 96px;padding:72px calc(50vw - 50%);box-sizing:border-box;background:var(--surface);color:var(--on-dark)}
.getbox h2{color:var(--on-dark);font-size:clamp(28px,3vw,44px);line-height:1.1;letter-spacing:-.03em;font-weight:600;margin-bottom:40px}
.getbox-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.getbox-list span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--surface);font-weight:700;font-size:16px;margin-bottom:20px}
.getbox-list p{font-size:clamp(18px,1.6vw,22px);line-height:1.35}
@media (max-width:960px){.getbox{margin-bottom:56px;padding-top:48px;padding-bottom:48px}.getbox-list{grid-template-columns:1fr;gap:28px}}
.getbox h2:last-child{margin-bottom:0}
.sv-go{display:inline-block;margin-top:24px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* services: names only, two compact columns, arrow at the right edge */
.sv-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.sv-list a,.sv-list li>div{grid-template-columns:minmax(0,1fr) 36px;gap:16px;min-height:76px;padding:12px 0;box-sizing:border-box}
.sv-list b{font-size:18px;line-height:1.25}
@media (max-width:960px){.sv-list{grid-template-columns:1fr}.sv-list a,.sv-list li>div{min-height:60px}.sv-list i{grid-row:auto}}
.sv-l h2 a{color:inherit}
.sv-l h2 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
/* mobile menu at the top of the page: dark links on the white panel */
.header.open .nav>a,.header.open .nav .dd>a{color:var(--ink)}
/* development: CMS names as a plain ruled row */
.cms-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.cms-list li{border-top:1px solid var(--ink);padding-top:20px;font-size:clamp(24px,2.6vw,38px);line-height:1.1;letter-spacing:-.03em;font-weight:600}
.cms-list small{display:block;margin-top:8px;font-size:14px;line-height:1.35;letter-spacing:0;font-weight:400;color:var(--muted)}
.cms-note{margin-top:28px;font-size:16px;line-height:1.5;color:var(--muted)}
@media (max-width:960px){.cms-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
.ask-ex{display:block;margin-top:2px;font-size:11px;line-height:1.3;font-weight:400;color:var(--muted)}
.crumbs a{text-decoration:underline;text-underline-offset:2px}
/* industry heroes: natural photos, no overlay, same as the home page */
.ph-photo{background:var(--paper)}
.ph-photo img{filter:none;mix-blend-mode:normal;opacity:1}
.ph-photo::after{display:none}
/* hero stats on mobile: "130+" row spans the width, no border on its right */
@media (max-width:960px){.hero--dots .stats>.big{border-right:0}.hero--dots .eyebrow.lbl{display:none}
  /* long filters and the dot grid must not widen the page column */
  .jr.jr6{padding-left:76px}
  .rl{grid-template-columns:minmax(0,1fr)}.rl>*{min-width:0}
  .hero--dots .hero-in{grid-template-columns:minmax(0,1fr)}}
/* mobile menu: collapsed sections, panel scrolls inside the screen */
.menu-in a.menu-all{display:none}
.header.open .nav{left:0;right:0;top:100%;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;border-radius:0;border-width:0 0 1px;padding:8px 16px 16px}
.header.open .nav>a,.header.open .nav .dd>a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:8px}
.header.open .nav .dd .menu{display:none;padding-top:0}
.header.open .nav .dd.dd-open .menu{display:block}
.header.open .nav .dd>a::after{transition:rotate .2s}
.header.open .nav .dd.dd-open>a::after{rotate:180deg}
.header.open .menu-in a.menu-all{display:block}
/* AI pages: market data as plain columns, no cards */
.mstats-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.mstats-list li{border-top:1px solid var(--ink);padding-top:24px;display:flex;flex-direction:column;gap:14px}
.mstats-list strong{font-size:clamp(48px,6vw,88px);line-height:1;letter-spacing:-.045em;font-weight:700}
.mstats-list p{font-size:18px;line-height:1.45}
.mstats-list small{margin-top:auto;font-size:13px;line-height:1.4;color:var(--muted)}
.mstats+.sec{padding-top:0}
@media (max-width:960px){.mstats-list{grid-template-columns:1fr;gap:28px}}
/* solution pages: square cards like the home page */
.bx,.sol,.pf-note,.ph-photo{border-radius:4px}
.bx .n{width:44px;height:44px;border-radius:50%;border:0;background:var(--accent);color:var(--surface);font-family:inherit;font-size:16px;font-weight:700}
@media (max-width:960px){.wproof-grid{grid-template-columns:1fr;gap:16px}.wproof-grid li{padding:24px}
  /* timeline: keep room for the numbered dots, they were pushed off screen */
  .jr:not(.jr6){padding-left:76px}}