/* Pasek technologii pod kaflami usług — 1:1 z prod (v12-bez-om), zmienne podmienione na kolory MBFlow */
.tech-wrap{margin-top:-60px;padding-bottom:90px}
.stack-strip{padding-top:24px;border-top:1px solid #ddd6cc;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stack-strip .lbl{font-family:Montserrat,sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5b6b6a}
.stack-strip span.tch{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#14202C;background:#fff;border:1px solid #ddd6cc;border-radius:100px;padding:6px 14px 6px 10px;position:relative;cursor:help}
.stack-strip span.tch svg{width:16px;height:16px;display:block;flex:0 0 auto}
.stack-strip span.tch::after{content:"?";margin-left:2px;font-family:Montserrat,sans-serif;font-size:9.5px;font-weight:700;color:#8a9794;transform:translateY(-4px);display:inline-block}
.stack-strip .tip{display:none;position:absolute;left:50%;bottom:calc(100% + 11px);transform:translateX(-50%);width:max-content;max-width:min(280px,72vw);background:#14202C;color:#fff;font-family:Inter,sans-serif;font-size:12.5px;font-weight:400;line-height:1.5;text-align:left;padding:11px 13px;border-radius:10px;box-shadow:0 18px 40px -18px rgba(20,32,44,.55);pointer-events:none;z-index:20;white-space:normal}
.stack-strip .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#14202C;border-bottom:0}
.stack-strip span.tch:hover .tip,.stack-strip span.tch:focus-visible .tip,.stack-strip span.tch.open .tip{display:block;animation:tipIn .16s ease both}
@keyframes tipIn{from{opacity:0}to{opacity:1}}
.stack-strip span.tch:hover,.stack-strip span.tch.open{border-color:#C6B89A}
.stack-strip span.tch:focus-visible{outline:2px solid #4E6A62;outline-offset:2px}
.stack-strip span.tch:nth-child(2) .tip{left:0;transform:none}
.stack-strip span.tch:nth-child(2) .tip::after{left:28px}
.stack-strip span.tch:last-child .tip{left:auto;right:0;transform:none}
.stack-strip span.tch:last-child .tip::after{left:auto;right:28px;transform:none}
@media(max-width:760px){
  .tech-wrap{margin-top:-30px;padding-bottom:60px}
  .stack-strip{position:relative}
  .stack-strip span.tch{position:static;padding-top:11px;padding-bottom:11px}
  .stack-strip .tip,.stack-strip span.tch:nth-child(2) .tip,.stack-strip span.tch:last-child .tip{left:0;right:0;width:auto;max-width:none;transform:none;bottom:calc(100% + 10px)}
  .stack-strip .tip::after{display:none}
}
/* kafle usług: wyróżnienie granatem MBFlow (Slate) zamiast zieleni */
.service:hover,.service:focus-within{background:#14202C;color:#FAF7F2}
.service:hover p,.service:focus-within p{color:#d9dee2}
.service:hover .chips span,.service:focus-within .chips span{border-color:rgba(250,247,242,.5);color:#FAF7F2}
.service:hover .service-link,.service:focus-within .service-link{border-top-color:rgba(250,247,242,.25)}
/* druga linia nagłówków sekcji: przygaszony granat (Slate) zamiast szarozielonego */
.muted{color:#4b5d70}
/* „Porozmawiajmy": na górze strony jak wcześniej (jasny), w przypiętym menu granat + złota strzałka */
.header.hdr-scrolled .button.small{background:#14202C;color:#FAF7F2}
.header.hdr-scrolled .button.small .arrow{background:#F2B705;color:#14202C}
.header.hdr-scrolled .button.small:hover{background:#2A3D52}
.header.hdr-scrolled .button.small{box-shadow:inset 0 0 0 1px rgba(250,247,242,.35)}
/* główne CTA hero „Zobacz, jak pracujemy": strzałka w dół — przy hover zjeżdża, nie obraca się */
.button-down:hover .arrow{transform:translateY(4px)}

/* hover CTA: jaśniejszy granat zamiast zieleni (wszystkie ciemne przyciski) */
.button:not(.small):hover{background:#2A3D52}
/* CTA hero lekkie: złoty kwadrat + tekst, bez granatowego bloku */
.hero-actions .button-down{background:transparent;color:#14202C;padding:0;min-height:0;gap:16px;font-weight:600}
.hero-actions .button-down:hover{background:transparent}
.hero-actions .button-down .arrow{height:48px;width:48px}
.hero-actions .button-down .lbl{position:relative;padding:6px 0}
.hero-actions .button-down .lbl:after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:#14202C;transition:width .25s}
.hero-actions .button-down:hover .lbl:after{width:100%}
/* wariant: strzałka przewijania na środku dołu hero */
.hero-scroll{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:3;display:grid;place-items:center;width:48px;height:48px;background:#F2B705;color:#14202C;font-size:1.35rem;animation:hs-bob 2.2s ease-in-out infinite}
.hero-scroll:hover{background:#F6C63A}
.hero-scroll:focus-visible{outline:2px solid #14202C;outline-offset:3px}
@keyframes hs-bob{0%,100%{translate:0 0}50%{translate:0 7px}}
@media(prefers-reduced-motion:reduce){.hero-scroll{animation:none}}
@media(max-width:760px){.hero-scroll{bottom:108px;width:42px;height:42px}}
/* ikony tematyczne w kaflach (zamiast strzalki): bez ruchu przy hover, kolor Slate -> zloto na granacie */ .service-symbol{display:grid;color:#14202C} .service-icon{display:block} .service:hover .service-symbol,.service:focus-within .service-symbol{transform:none;color:#F2B705}