/* ============================================================
   LIFE ON BLEED — tokeny
   ============================================================ */
:root{
  --paper:#F3F3F1;
  --paper-2:#E7E7E2;
  --ink:#0A0A0A;
  --ink-soft:#75756E;
  --bleed:#F9E915;      /* zolty z identyfikacji */
  --trim:#EC008C;       /* magenta procesowa - linia ciecia */
  --safe:#00AEEF;       /* cyan procesowy - obszar bezpieczny */
  --rule:rgba(10,10,10,.16);

  --trim-inset:20px;   /* linia ciecia = wewnetrzna krawedz znacznikow */
  --safe-inset:50px;
  --pad:clamp(1.15rem, 4.5vw, 3.5rem);
  --gap:clamp(2.5rem, 7vw, 6.5rem);
  --maxw:1280px;

  --mono:"DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans:"Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;overflow-x:clip;
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:clamp(1rem,.95rem + .3vw,1.12rem);
  line-height:1.55;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
::selection{background:var(--bleed);color:var(--ink)}

/* ============================================================
   TYPOGRAFIA
   ============================================================ */
.mono{
  font-family:var(--mono);font-weight:400;
  font-size:clamp(.66rem,.62rem + .18vw,.78rem);
  letter-spacing:.14em;text-transform:uppercase;
}
.eyebrow{margin:0;color:var(--ink-soft)}
h2,h3{margin:0;font-weight:500;letter-spacing:-.02em;line-height:1}
.h-sec{
  font-size:clamp(2.4rem,1.2rem + 6vw,5.2rem);
  font-weight:200;font-stretch:125%;letter-spacing:-.03em;line-height:.92;
}
.h-sec em{font-style:normal;font-weight:700;font-stretch:75%}
.lead{max-width:46ch;color:var(--ink-soft);font-size:clamp(1.02rem,.98rem + .35vw,1.25rem)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* ============================================================
   UKLAD
   ============================================================ */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--gap);position:relative}
.section + .section{border-top:1px solid var(--rule)}
.head{display:flex;flex-direction:column;gap:.9rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.head .lead{margin-top:.4rem}

/* ============================================================
   NAGLOWEK STRONY
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(243,243,241,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.topbar-in{
  max-width:var(--maxw);margin-inline:auto;padding:.7rem var(--pad);
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto}
.brand-txt{line-height:1.1}
.brand-txt b{display:block;font-weight:700;font-stretch:70%;letter-spacing:.01em;font-size:1.22rem;text-transform:uppercase}
.brand-txt span{display:block;color:var(--ink-soft);font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;margin-top:.15rem}
.nav{
  margin-left:auto;display:flex;gap:clamp(.8rem,2vw,1.9rem);align-items:center;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.nav::-webkit-scrollbar{display:none}
.nav a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);white-space:nowrap;padding:.35rem 0;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--bleed);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;z-index:-1;
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
@media (max-width:860px){
  .nav{order:3;flex-basis:100%;margin-left:0;margin-top:.45rem;padding-top:.5rem;border-top:1px solid var(--rule);gap:1.1rem}
  .bleed-btn{margin-left:auto}
}

/* przelacznik podgladu spadu */
.bleed-btn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;color:var(--ink);border:1px solid var(--ink);
  padding:.5rem .7rem;border-radius:999px;transition:background .2s,color .2s;
}
.bleed-btn .dot{width:7px;height:7px;border-radius:50%;background:var(--ink);opacity:.35;transition:.2s}
.bleed-btn:hover{background:var(--ink);color:var(--paper)}
.bleed-btn:hover .dot{background:var(--paper)}
.bleed-btn[aria-pressed="true"]{background:var(--trim);border-color:var(--trim);color:#fff}
.bleed-btn[aria-pressed="true"] .dot{background:#fff;opacity:1}
.bleed-btn .lbl-off{display:inline}
.bleed-btn .lbl-on{display:none}
.bleed-btn[aria-pressed="true"] .lbl-off{display:none}
.bleed-btn[aria-pressed="true"] .lbl-on{display:inline}
@media (max-width:560px){ .bleed-btn .lbl-off, .bleed-btn .lbl-on{display:none !important} .bleed-btn{padding:.5rem} }

/* ============================================================
   SYGNATURA: podglad spadu (znaczniki drukarskie)
   ============================================================ */
.marks{position:fixed;inset:0;z-index:90;pointer-events:none;mix-blend-mode:difference}
/* znacznik biegnie od krawedzi arkusza do linii ciecia, z klasyczna przerwa w narozniku */
.marks .corner{position:absolute;width:var(--trim-inset);height:var(--trim-inset)}
.marks .corner::before,.marks .corner::after{content:"";position:absolute;background:#9a9a9a}
.marks .corner::before{width:1px;left:var(--trim-inset);top:0;height:calc(var(--trim-inset) - 6px)}
.marks .corner::after{height:1px;top:var(--trim-inset);left:0;width:calc(var(--trim-inset) - 6px)}
.marks .tl{top:0;left:0}
.marks .tr{top:0;right:0;transform:scaleX(-1)}
.marks .bl{bottom:0;left:0;transform:scaleY(-1)}
.marks .br{bottom:0;right:0;transform:scale(-1)}

.preview{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:0;transition:opacity .35s ease}
body.bleed-on .preview{opacity:1}
.preview .trim,.preview .safe{position:absolute;border:1px dashed}
.preview .trim{inset:var(--trim-inset);border-color:var(--trim)}
.preview .safe{inset:var(--safe-inset);border-color:var(--safe)}
/* pole spadu: pas miedzy krawedzia arkusza a linia ciecia */
.preview .bleedzone{position:absolute;inset:0;border:var(--trim-inset) solid rgba(249,233,21,.28)}
.preview .tag{
  position:absolute;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--paper);padding:.15rem .4rem;
}
.preview .tag-trim{top:calc(var(--trim-inset) - 7px);left:64px;color:var(--trim)}
.preview .tag-safe{bottom:calc(var(--safe-inset) - 8px);left:64px;color:var(--safe)}
.preview .tag-bleed{top:2px;right:64px;color:var(--ink-soft);background:transparent}
.preview .strip{position:absolute;left:var(--trim-inset);bottom:calc(var(--trim-inset) + 4px);display:flex;height:9px;width:150px;border:1px solid rgba(10,10,10,.25)}
.preview .strip i{flex:1}
@media (max-width:640px){
  :root{--trim-inset:14px;--safe-inset:34px}
  .preview .tag-bleed{display:none}
  .preview .tag-trim{left:38px}.preview .tag-safe{left:38px}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:clamp(2.5rem,6vw,5rem);padding-bottom:clamp(3rem,7vw,6rem);position:relative}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.5rem)}
.hero-title{margin:0;line-height:.8;letter-spacing:-.045em}
.hero-title .l1{
  display:block;font-size:clamp(2.8rem,10vw,9rem);
  font-weight:200;font-stretch:125%;white-space:nowrap;width:max-content;max-width:none;
}
.hero-title .l2{
  display:block;font-size:clamp(3.8rem,15vw,13rem);
  font-weight:800;font-stretch:62%;letter-spacing:-.02em;
  white-space:nowrap;margin-left:-.04em;
  position:relative;width:max-content;
}
/* czesc slowa, ktora wychodzi poza linie ciecia */
.hero-title .l2 .off{color:var(--ink);position:relative}
body.bleed-on .hero-title .l2 .off{color:var(--trim)}
.hero-title .l2 .off::after{
  content:"";position:absolute;left:-.02em;right:-.3em;top:.12em;bottom:.16em;
  background:var(--bleed);z-index:-1;transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
body.bleed-on .hero-title .l2 .off::after{transform:scaleX(1)}

.hero-meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;
  color:var(--ink-soft);border-top:1px solid var(--rule);padding-top:1rem;
}
.hero-bottom{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,3rem);align-items:end}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.95rem 1.4rem;border:1px solid var(--ink);border-radius:999px;
  transition:background .22s ease,color .22s ease,transform .22s ease;
}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--bleed);color:var(--ink);border-color:var(--bleed)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn:active{transform:translateY(1px)}

.hero-bottom .lead{max-width:52ch}

/* ============================================================
   OBJAWY (pogotowie)
   ============================================================ */
.split{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem)}
@media (min-width:960px){
  .split{grid-template-columns:minmax(280px,.85fr) minmax(0,1.4fr)}
  .split .col-a{position:sticky;top:110px;align-self:start}
}
.sym{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.sym li{border-bottom:1px solid var(--rule)}
.sym button{
  all:unset;display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  width:100%;box-sizing:border-box;cursor:pointer;padding:1.15rem .6rem;position:relative;
}
.sym button:focus-visible{outline:2px solid var(--ink);outline-offset:-5px}
.sym button::before{
  content:"";position:absolute;inset:0;background:var(--bleed);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:-1;
}
.sym li.open button::before,.sym button:hover::before{transform:scaleX(1)}
.sym .plus{
  font-family:var(--mono);font-size:.95rem;line-height:1.4;color:var(--ink-soft);
  transition:transform .3s ease,color .2s;
}
.sym li.open .plus{transform:rotate(45deg);color:var(--ink)}
.sym .q{font-size:clamp(1.05rem,1rem + .5vw,1.5rem);font-weight:400;letter-spacing:-.02em}
.sym .a{
  max-height:0;overflow:hidden;transition:max-height .4s ease;
  padding-left:calc(.6rem + 1.6rem);padding-right:.6rem;
}
.sym li.open .a{max-height:220px}
.sym .a p{padding-bottom:1.2rem;max-width:52ch;color:var(--ink-soft)}
.sym .a .tag{display:inline-block;margin-bottom:1.2rem;color:var(--ink);border-bottom:2px solid var(--bleed);padding-bottom:.15rem}

/* ============================================================
   ZAKRES
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.card{background:var(--paper);padding:clamp(1.4rem,2.4vw,2.1rem);display:flex;flex-direction:column;gap:.7rem;min-height:200px;transition:background .3s ease}
.card:hover{background:var(--paper-2)}
.card h3{font-size:1.28rem;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.card p{color:var(--ink-soft);font-size:.96rem}
.card .spec{margin-top:auto;color:var(--ink-soft);border-top:1px dotted var(--rule);padding-top:.7rem}

/* ============================================================
   PROCES
   ============================================================ */
.steps{display:grid;grid-template-columns:1fr;gap:0;counter-reset:s}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2.5rem);padding:clamp(1.4rem,3vw,2.2rem) 0;border-top:1px solid var(--rule);align-items:baseline}
.step:last-child{border-bottom:1px solid var(--rule)}
.step .n{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);letter-spacing:.1em;padding-top:.35rem}
.step h3{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);font-weight:300;font-stretch:110%;letter-spacing:-.03em;margin-bottom:.5rem}
.step p{color:var(--ink-soft);max-width:56ch}
.urgent{margin-top:2rem;display:inline-flex;gap:.6rem;align-items:center;background:var(--bleed);padding:.7rem 1rem;color:var(--ink)}

/* ============================================================
   REWERS — poza praca
   ============================================================ */
.rev{background:var(--ink);color:var(--paper);--rule:rgba(243,243,241,.18);--ink-soft:#9A9A93}
.rev .h-sec,.rev h3{color:var(--paper)}
.rev .card{background:var(--ink)}
.rev .card:hover{background:#141414}
.rev .cards{border-color:var(--rule);background:var(--rule)}
.rev .card .spec{border-top-color:rgba(243,243,241,.2)}

/* ============================================================
   KONTAKT + STOPKA
   ============================================================ */
.mail{
  display:inline-block;text-decoration:none;position:relative;
  font-size:clamp(1.7rem,.6rem + 5.6vw,4.6rem);font-weight:300;font-stretch:110%;letter-spacing:-.035em;
  line-height:1.05;word-break:break-word;
}
.mail::after{
  content:"";position:absolute;left:-.04em;right:-.04em;top:.16em;bottom:.14em;background:var(--bleed);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:-1;
}
.mail:hover::after,.mail:focus-visible::after{transform:scaleX(1)}
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem)}
@media (min-width:900px){.contact-grid{grid-template-columns:1.6fr .9fr}}
.info{display:flex;flex-direction:column;gap:1.1rem}
.info div{border-top:1px solid var(--rule);padding-top:.6rem}
.info a{text-decoration:none;border-bottom:1px solid var(--rule)}
.info a:hover{border-bottom-color:var(--ink)}
.info .k{display:block;color:var(--ink-soft);margin-bottom:.25rem}

.foot{border-top:1px solid var(--rule);padding-block:2rem;color:var(--ink-soft)}
.foot-in{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.cmyk{display:flex;height:12px;width:190px;border:1px solid var(--rule)}
.cmyk i{flex:1}

/* ============================================================
   ANIMACJE
   ============================================================ */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none}
}

/* ============================================================
   PODSTRONY TEKSTOWE (polityka prywatności)
   ============================================================ */
.foot-link{text-decoration:none;position:relative;color:var(--ink-soft)}
.foot-link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--rule);transition:background .2s}
.foot-link:hover{color:var(--ink)}
.foot-link:hover::after{background:var(--ink)}

.page-head{padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.page-head .h-sec{margin:.7rem 0 1.2rem}

.prose{max-width:74ch;font-size:clamp(.95rem,.92rem + .2vw,1.03rem)}
.prose h2{
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.9rem);font-weight:400;font-stretch:110%;
  letter-spacing:-.02em;line-height:1.15;
  margin:3.2rem 0 1.2rem;padding-top:1.4rem;border-top:1px solid var(--rule);
}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prose ol,.prose ul{margin:0 0 1.2rem;padding-left:1.5rem}
.prose ol{list-style:decimal}
.prose ol ol{list-style:lower-alpha;margin-top:.6rem}
.prose ul{list-style:none}
.prose ul li{position:relative}
.prose ul li::before{content:"—";position:absolute;left:-1.5rem;color:var(--bleed);font-weight:700}
.prose li{margin-bottom:.65rem;color:var(--ink-soft)}
.prose li::marker{color:var(--ink)}
.prose li b{color:var(--ink);font-weight:600}
.prose p{color:var(--ink-soft)}
.prose a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--bleed);padding-bottom:.05rem}
.prose a:hover{background:var(--bleed)}
.prose .cols{columns:2;column-gap:2.5rem;padding-left:1.5rem}
@media (max-width:640px){.prose .cols{columns:1}}

.fineprint{
  margin-top:3rem;padding:1.3rem 1.4rem;border:1px solid var(--rule);
  font-size:.83rem;line-height:1.6;color:var(--ink-soft);
}
.fineprint strong{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.6rem;font-weight:400}
.backlink{display:inline-flex;align-items:center;gap:.5rem;margin-top:2.5rem;text-decoration:none;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--ink);border-radius:999px;padding:.8rem 1.3rem;transition:background .2s,color .2s}
.backlink:hover{background:var(--ink);color:var(--paper)}

/* pominiecie nawigacji (dostepnosc) */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);
  padding:.8rem 1.2rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:8px;top:8px}