/* rafal.lagowski.es. Colours follow labs.lagowski.es (tokens.css): off-white page, one blue accent. Layout: header with brand, language switch and nav row; content pages share one column; services read as catalogue rows. */
:root{
  --bg:#f6f5f2; --surface:#fcfbf8; --ink:#1f1f1f; --muted:#5f5d56; --line:#dcdad4;
  --accent:#2f2ff2; --accent-ink:#ffffff; --tint:#ebebf9; --tint-line:#a3a3f2; --ok:#14804a; --warn:#b45309; --bad:#9a4e36;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141317; --surface:#1e1d22; --ink:#e6e4df; --muted:#a9a69d; --line:#3b3943;
  --accent:#9a9aff; --accent-ink:#141317; --tint:#1c1b30; --tint-line:#4f4ea8; --ok:#4ade80; --warn:#fbbf24; --bad:#e8957a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141317; --surface:#1e1d22; --ink:#e6e4df; --muted:#a9a69d; --line:#3b3943;
  --accent:#9a9aff; --accent-ink:#141317; --tint:#1c1b30; --tint-line:#4f4ea8; --ok:#4ade80; --warn:#fbbf24; --bad:#e8957a; color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--body);margin:0;
  padding:0 16px}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* language: hide the two inactive languages; English is the no-JS default */
body:not(.es):not(.pl) .l:not(.en),body.es .l:not(.es),body.pl .l:not(.pl){display:none!important}
header{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;padding-block:18px;flex-wrap:wrap}
.brand{font:700 18px var(--display);letter-spacing:.01em;color:var(--ink);text-decoration:none}
.brand small{font:400 12px var(--mono);color:var(--muted);margin-left:10px;letter-spacing:.04em}
.langs{display:flex;gap:4px;font:500 12px var(--mono)}
.langs button{font:inherit;letter-spacing:.06em;background:none;border:1px solid var(--line);color:var(--muted);padding:6px 10px;border-radius:6px;cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
nav{flex-basis:100%;display:flex;gap:6px 22px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px;font:500 14px var(--body)}
nav a{color:var(--muted);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;padding-block:48px 64px;align-items:start}
.eyebrow{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
h1{font:700 clamp(36px,6vw,66px)/1.02 var(--display);letter-spacing:-.025em;margin:0 0 24px;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent)}
h1.ph{font-size:clamp(32px,5vw,52px);margin:40px 0 14px}
.lede{font-size:18px;color:var(--muted);max-width:60ch;margin:0 0 32px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;font:500 15px var(--body);text-decoration:none;padding:13px 20px;border-radius:8px;border:1px solid var(--ink);color:var(--ink);cursor:pointer;background:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:22px;font:400 13px/1.5 var(--mono)}
.sheet h2{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.sheet dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0 16px}
.sheet dt,.sheet dd{margin:0;padding:9px 0;border-top:1px dashed var(--line)}
.sheet dt{color:var(--muted)}
.sheet dd{text-align:right}
section{padding-block:56px;border-top:1px solid var(--line)}
section.tight{padding-block:24px 48px;border-top:0}
h2.s{font:700 clamp(26px,4vw,38px)/1.12 var(--display);letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance}
h2.s.sm{font-size:24px}
.intro{color:var(--muted);max-width:62ch;margin:0 0 32px}
.rows{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.9fr) minmax(0,.7fr) auto;gap:8px 24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.row b{font:700 18px/1.25 var(--display);letter-spacing:-.01em}
.row .d{color:var(--muted);font-size:15px}
.row .t{font:400 13px var(--mono);color:var(--muted)}
.row .p{font:500 15px var(--mono);text-align:right;white-space:nowrap}
.note{font:400 13px/1.5 var(--mono);color:var(--muted);margin-top:16px;max-width:70ch}
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.trust div{padding:18px 20px 18px 0;border-bottom:1px solid var(--line)}
.trust b{display:block;font:700 18px/1.25 var(--display);margin-bottom:6px}
.trust>div>span{color:var(--muted);font-size:15px;display:block}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.cols3.c4{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.cols3 h3{font:700 19px/1.25 var(--display);margin:0 0 8px}
.cols3 p{margin:0;color:var(--muted);font-size:15px}
.proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px;min-width:0;color:var(--ink);text-decoration:none;display:block}
.card h3{font:700 18px var(--display);margin:0 0 6px}
.card p{margin:0 0 10px;color:var(--muted);font-size:15px}
.card .tag{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.card .pv{font-size:14px;color:var(--ink)}
.card .pv span{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:6px}
a.card.big:hover{border-color:var(--accent)}
.card.big h3{font-size:22px;margin:8px 0}
.more{font:500 13px var(--mono);color:var(--accent)}
.ticks{list-style:none;margin:0 0 16px;padding:0;max-width:70ch}
.ticks li{padding:10px 0 10px 26px;position:relative;border-top:1px dashed var(--line)}
.ticks li::before{content:"";position:absolute;left:2px;top:19px;width:10px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.callout{margin-top:24px;padding:16px 20px;border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--surface);border-radius:6px;max-width:72ch;font-size:15px}
.callout b{display:block;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.steps.vert{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);counter-reset:s}
.steps.vert li{counter-increment:s;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:8px 16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.steps.vert li::before{content:counter(s);font:500 13px var(--mono);color:var(--accent);padding-top:4px}
.steps.vert b{display:block;font:700 19px/1.25 var(--display);margin-bottom:4px}
.steps.vert .x{color:var(--muted);font-size:15px;display:block;max-width:62ch}
.badge{font:500 12px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 12px;white-space:nowrap}
.about{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px}
.about p{margin:0 0 14px;max-width:62ch}
.timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--line)}
.timeline li{padding:0 0 22px 18px;position:relative}
.timeline li::before{content:"";position:absolute;left:-26px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.timeline b{display:block;font:700 17px var(--display)}
.timeline span{color:var(--muted);font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font:400 13px var(--mono);border:1px solid var(--line);background:var(--surface);padding:6px 12px;border-radius:6px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq details:first-child{border-top:1px solid var(--ink)}
.faq summary{cursor:pointer;font:700 18px/1.3 var(--display);padding:14px 28px 14px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 24px var(--mono);color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:0 0 16px;color:var(--muted);max-width:66ch}
.cta-band{background:var(--tint);border:1px solid var(--tint-line);border-radius:12px;padding:32px;margin-block:24px}
.cta-band .intro{margin-bottom:20px}
.contact{background:var(--ink);color:var(--bg);border-radius:14px;padding:clamp(24px,5vw,48px);border:0;margin-block:32px 0}
.contact h2.s{color:var(--bg)}
.contact .intro{color:inherit;opacity:.85}
.links{display:flex;gap:20px;flex-wrap:wrap;font:500 14px var(--mono)}
.links a{color:var(--bg)}
.links.dark a{color:var(--accent)}
footer{padding-block:32px 40px;font:400 12px/1.6 var(--mono);color:var(--muted)}
/* demos */
.demo{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:clamp(16px,3vw,28px);margin-top:8px}
.demo .badge{display:inline-block;margin-bottom:12px}
.demo h2,.demo h3{font:700 22px var(--display);margin:0 0 6px}
.demo .sub{color:var(--muted);margin:0 0 18px;max-width:64ch;font-size:15px}
.qs{display:grid;gap:8px;margin:0 0 16px}
.qs label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:15px;background:var(--bg)}
.qs input{margin-top:4px;accent-color:var(--accent)}
.result{border-radius:8px;padding:14px 16px;border:1px solid var(--line);background:var(--bg);font-size:15px}
.result b{font:700 17px var(--display);display:block;margin-bottom:4px}
.lvl{display:inline-block;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:999px;border:1px solid currentColor;margin-bottom:8px}
.lvl.bad{color:var(--bad)}.lvl.warn{color:var(--warn)}.lvl.ok{color:var(--ok)}.lvl.info{color:var(--accent)}
.chat{display:grid;gap:12px}
.presets{display:flex;gap:8px;flex-wrap:wrap}
.presets button,.seg button{font:400 13px var(--body);padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.presets button:hover,.seg button:hover{border-color:var(--accent)}
.ask{display:flex;gap:8px;flex-wrap:wrap}
.ask input[type=text]{flex:1 1 220px;min-width:0;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.src{font:400 13px var(--mono);color:var(--muted);margin-top:8px}
.src q{color:var(--ink);font-family:var(--body);quotes:"\201C" "\201D"}
.docs{display:grid;gap:6px;font-size:13px;color:var(--muted);margin-top:4px}
.docs b{color:var(--ink)}
.seg{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.bars{display:grid;gap:10px;margin:0 0 14px}
.bar{display:grid;grid-template-columns:96px minmax(0,1fr) 56px;gap:10px;align-items:center;font:400 13px var(--mono)}
.bar i{display:block;height:20px;border-radius:3px;background:var(--muted);transition:width .35s}
.bar i.f{background:var(--accent)}
.sim{display:grid;gap:12px}
.sim input[type=range]{width:100%;accent-color:var(--accent)}
.big-n{font:700 34px/1 var(--display)}
.cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cmp div{border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--bg)}
.cmp small{display:block;font:400 12px var(--mono);color:var(--muted);margin-top:4px}
/* portfolio additions */
.skip{position:absolute;left:-9999px;top:8px;background:var(--surface);color:var(--ink);padding:8px 12px;border-radius:6px;z-index:10}
.skip:focus{left:16px}
.role{font:700 clamp(20px,3vw,28px)/1.2 var(--display);margin:0 0 8px;letter-spacing:-.01em}
.tagline{font:500 clamp(17px,2.2vw,20px)/1.35 var(--display);color:var(--accent);margin:0 0 24px}
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:center;margin-bottom:16px}
.feature h3{font-size:26px}
.video{aspect-ratio:16/9;width:100%;border-radius:10px;border:1px dashed var(--tint-line);background:var(--tint);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px;color:var(--muted);font:400 13px/1.5 var(--mono)}
.video b{font:700 18px var(--display);color:var(--ink)}
.video iframe,.video video{width:100%;height:100%;border:0;border-radius:10px}
.stack{font:400 12px/1.5 var(--mono);color:var(--muted);margin:0 0 10px}
.card .links{font-size:13px;gap:14px}
.card .links a{color:var(--accent)}
.xp{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.xp li{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:6px 24px;padding:20px 0;border-bottom:1px solid var(--line)}
.xp .when{font:400 13px/1.6 var(--mono);color:var(--muted)}
.xp b{display:block;font:700 19px/1.3 var(--display)}
.xp .org{display:block;font:500 14px var(--mono);color:var(--accent);margin:2px 0 6px}
.xp p{margin:0;color:var(--muted);font-size:15px;max-width:68ch}
.ind{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;border-top:1px solid var(--ink)}
.ind div{padding:16px 0;border-bottom:1px solid var(--line)}
.ind b{display:block;font:700 18px/1.3 var(--display);margin-bottom:4px}
.ind>div>span:not(.k){color:var(--muted);font-size:15px;display:block}
.ind .k{display:inline-block;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.rate{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;margin:24px 0 0;padding:20px 24px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.rate b{font:700 clamp(22px,3vw,28px) var(--display)}
.rate>span{color:var(--muted);font-size:15px}
.pending{font-family:var(--mono);background:var(--warn);color:var(--bg);padding:0 6px;border-radius:4px}
footer nav{border-top:1px solid var(--line);padding-top:16px;margin-bottom:12px;font:500 13px var(--mono)}
footer p{margin:0}
.cform{display:grid;gap:14px;margin:8px 0 28px;max-width:760px}
.cform .f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cform label{display:grid;gap:6px;font:500 13px var(--mono);letter-spacing:.04em}
.cform input,.cform select,.cform textarea{font:16px/1.4 var(--body);padding:11px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%;min-width:0}
.cform textarea{resize:vertical}
.cform :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.contact .btn.primary{background:var(--bg);border-color:var(--bg);color:var(--ink)}
.cform .fend{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.fnote{margin:0;font:400 12px/1.5 var(--mono);opacity:.8;max-width:52ch}
.fstatus{margin:0;font:500 15px var(--body);min-height:1.4em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn:disabled{opacity:.6;cursor:wait}
@media (max-width:860px){.cform .f2{grid-template-columns:minmax(0,1fr)}.feature,.ind{grid-template-columns:minmax(0,1fr)}.xp li{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .hero,.about,.two{grid-template-columns:minmax(0,1fr);gap:28px}
  .hero{padding-block:28px 40px}
  .row{grid-template-columns:minmax(0,1fr) auto}
  .row b{grid-column:1/2}.row .p{grid-column:2/3;grid-row:1}
  .row .d,.row .t{grid-column:1/3}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols3,.proof{grid-template-columns:minmax(0,1fr)}
  .cols3.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps.vert li{grid-template-columns:32px minmax(0,1fr)}
  .steps.vert .badge{grid-column:2/3;justify-self:start}
}
@media (max-width:520px){.trust,.cols3.c4,.cmp{grid-template-columns:minmax(0,1fr)}.bar{grid-template-columns:76px minmax(0,1fr) 50px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.bar i{transition:none}}