/* =========================================================================
   PROJEKT GRYF, strona przejściowa "w budowie"
   Ten sam system co strona główna:
   Style   : Exaggerated Minimalism (oversized type, extreme negative space,
             czerń/biel + JEDEN akcent)
   Type    : Outfit 900 (display) / Work Sans (body)
   Motion  : Subtle tier, 300-400ms, y 12px
   ========================================================================= */

/* ---------- 1. Tokens (identyczne ze stroną główną) ---------- */
:root{
  --bg:#FFFFFF;
  --fg:#171717;
  --fg-muted:#575757;
  --fg-faint:#6E6E6E;
  --rule:#E5E5E5;
  --rule-strong:#171717;
  --surface:#F5F5F5;
  --surface-2:#EDEDED;
  --accent:#A16207;
  --on-accent:#FFFFFF;
  --invert-bg:#0A0A0A;
  --invert-fg:#FAFAFA;
  --focus:#A16207;

  --font-display:"Outfit","Helvetica Neue",Arial,sans-serif;
  --font-body:"Work Sans","Helvetica Neue",Arial,sans-serif;

  --t-mega:clamp(3rem,13vw,11.5rem);
  --t-xl:clamp(2.25rem,7vw,6rem);
  --t-lg:clamp(1.75rem,4vw,3rem);
  --t-md:clamp(1.25rem,2vw,1.75rem);
  --t-body:clamp(1rem,1.1vw,1.125rem);
  --t-sm:.875rem;
  --t-xs:.75rem;
  --t-micro:.6875rem;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem;  --s7:3rem;  --s8:4.5rem; --s9:7rem; --s10:10rem;
  --section:clamp(5rem,13vw,11rem);

  --gutter:clamp(1.25rem,4.5vw,4.5rem);
  --maxw:1600px;
  --nav-h:64px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --d-fast:180ms; --d:320ms; --d-reveal:360ms;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A0A0A;
    --fg:#FAFAFA;
    --fg-muted:#A3A3A3;
    --fg-faint:#8A8A8A;
    --rule:#262626;
    --rule-strong:#FAFAFA;
    --surface:#141414;
    --surface-2:#1C1C1C;
    --accent:#D9A441;
    --on-accent:#0A0A0A;
    --invert-bg:#FAFAFA;
    --invert-fg:#0A0A0A;
    --focus:#D9A441;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0A0A;
  --fg:#FAFAFA;
  --fg-muted:#A3A3A3;
  --fg-faint:#8A8A8A;
  --rule:#262626;
  --rule-strong:#FAFAFA;
  --surface:#141414;
  --surface-2:#1C1C1C;
  --accent:#D9A441;
  --on-accent:#0A0A0A;
  --invert-bg:#FAFAFA;
  --invert-fg:#0A0A0A;
  --focus:#D9A441;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--d) linear,color var(--d) linear;
}
img,svg,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
::selection{background:var(--fg);color:var(--bg)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}

.skip{
  position:absolute;left:var(--s4);top:-200px;z-index:200;
  background:var(--fg);color:var(--bg);padding:var(--s3) var(--s5);
  font-size:var(--t-sm);
}
.skip:focus{top:var(--s4)}

/* ---------- 3. Ikony (Phosphor) ---------- */
.i{width:1em;height:1em;fill:currentColor;flex:none;display:block}

/* ---------- 4. Typografia ---------- */
.display{
  font-family:var(--font-display);
  font-weight:900;
  font-size:var(--t-mega);
  line-height:.86;
  letter-spacing:-.05em;
  word-spacing:.14em;
  text-transform:uppercase;
  margin:0;
}
.h2{
  font-family:var(--font-display);
  font-weight:900;
  font-size:var(--t-xl);
  line-height:.92;
  letter-spacing:-.04em;
  word-spacing:.14em;
  text-transform:uppercase;
  max-inline-size:18ch;
  text-wrap:balance;
}
.h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--t-md);
  line-height:1.15;
  letter-spacing:-.02em;
}
.lead{
  font-size:clamp(1.0625rem,1.5vw,1.375rem);
  line-height:1.55;
  color:var(--fg-muted);
  max-inline-size:46ch;
}
.label{
  font-family:var(--font-body);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fg-faint);
}
.num{
  font-family:var(--font-display);
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.12em;
  color:var(--accent);
}

/* ---------- 5. Przyciski ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
  min-height:52px;padding:0 var(--s6);cursor:pointer;
  font-size:var(--t-sm);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--fg);color:var(--bg);
  transition:background-color var(--d) var(--ease),color var(--d) var(--ease);
}
.btn:hover{background:var(--accent);color:var(--on-accent)}
.btn--ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.btn--ghost:hover{background:var(--fg);color:var(--bg);box-shadow:inset 0 0 0 1px var(--fg)}

/* ---------- 6. Nawigacja ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
  transition:transform 420ms var(--ease);
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){.nav{background:var(--bg)}}
.nav.is-hidden{transform:translateY(-101%)}
.nav__in{display:flex;align-items:center;gap:var(--s5);height:var(--nav-h)}
.brand{
  font-family:var(--font-display);font-weight:900;
  font-size:1rem;letter-spacing:-.02em;text-transform:uppercase;
  margin-right:auto;white-space:nowrap;
}
.brand span{color:var(--accent)}
.nav__links{display:flex;align-items:center;gap:var(--s6)}
.nav__link{
  position:relative;font-size:var(--t-xs);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);
  padding-block:var(--s2);
  transition:color var(--d-fast) var(--ease);
}
.nav__link:hover,.nav__link[aria-current="true"]{color:var(--fg)}
.nav__link[aria-current="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
}
.nav__tools{display:flex;align-items:center;gap:var(--s2);flex:none}

.iconbtn{
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  color:var(--fg-muted);font-size:18px;
  transition:color var(--d-fast) var(--ease);
}
.iconbtn:hover{color:var(--fg)}

.lang{display:flex;align-items:center;font-size:var(--t-xs);font-weight:600;letter-spacing:.1em}
.lang__btn{
  min-width:40px;min-height:44px;padding:0 var(--s2);cursor:pointer;
  color:var(--fg-faint);transition:color var(--d-fast) var(--ease);
}
.lang__btn:hover{color:var(--fg)}
.lang__btn[aria-pressed="true"]{color:var(--fg);text-decoration:underline;text-underline-offset:5px}
.lang__sep{color:var(--rule)}

.burger{display:none}

/* ---------- 7. Pasek "w budowie" ----------
   Odpowiednik czarnego paska z materiału drukowanego: pełna szerokość,
   odwrócona paleta, żeby komunikat był pierwszą rzeczą, którą widać. */
.strip{
  position:relative;overflow:hidden;
  margin-top:var(--nav-h);
  background:var(--invert-bg);color:var(--invert-fg);
}
.strip__in{
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center;
  padding-block:var(--s5);
}
.strip__tag{
  display:inline-flex;align-items:center;gap:var(--s3);flex:none;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
}
.strip__dot{
  width:8px;height:8px;flex:none;border-radius:50%;
  background:var(--accent);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(.7)}
}
.strip__text{font-size:var(--t-sm);line-height:1.5;max-inline-size:78ch;color:var(--invert-fg)}
.strip__text b{font-weight:600;color:var(--accent)}
/* cienki pasek postępu: jedyny element, który sam z siebie sygnalizuje "trwa" */
.strip__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:color-mix(in srgb,var(--invert-fg) 15%,transparent)}
.strip__bar::after{
  content:"";position:absolute;top:0;bottom:0;width:28%;background:var(--accent);
  animation:sweep 5.5s var(--ease) infinite;
}
@keyframes sweep{
  0%{left:-28%}
  100%{left:100%}
}

/* ---------- 8. Hero ---------- */
.hero{
  display:flex;flex-direction:column;justify-content:center;gap:var(--s7);
  padding-top:var(--s9);padding-bottom:var(--s8);
}
/* Nagłówek jest dłuższy niż na stronie głównej ("KOMPLEKSOWE" to 7,46 em
   szerokości przy Outfit 900), więc skala jest policzona tak, aby najdłuższa
   linia plus wcięcie mieściły się w kolumnie treści na każdej szerokości. */
.hero__display{font-size:clamp(2.5rem,10.2vw,10.5rem);line-height:.95;margin-block:var(--s6) 0}
/* Maska linii musi przepuścić polskie znaki: ogonek Ę schodzi pod linię pisma,
   a kreska nad Ń wychodzi ponad wersaliki. Stąd clip zamiast hidden. */
.hero__display .ln{display:block;overflow:clip;overflow-clip-margin:.1em}
.hero__display .ln > span{display:block}
.hero__display .ln--indent{padding-left:6vw}
.hero__display .ln--accent{color:var(--accent)}
.hero__sub{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.125rem,2.6vw,2rem);line-height:1.1;
  letter-spacing:.02em;text-transform:uppercase;color:var(--fg-muted);
  margin-top:var(--s5);
}
.hero__bottom{
  display:grid;gap:var(--s6);align-items:start;
  grid-template-columns:minmax(0,1fr) auto;
  margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid var(--rule);
}
@media (max-width:900px){.hero__bottom{grid-template-columns:1fr}}
.hero__acts{display:flex;flex-wrap:wrap;gap:var(--s4);align-content:start}

/* pasek zaufania: rzetelność / doświadczenie / jakość */
.trust{
  display:flex;flex-wrap:wrap;gap:var(--s5) var(--s8);align-items:center;
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--rule);
}
.trust__item{display:flex;align-items:center;gap:var(--s3)}
.trust__item .i{font-size:20px;color:var(--accent)}
.trust__item span{
  font-size:var(--t-micro);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
}

/* ---------- 9. Jak działamy ---------- */
/* 4 zasady stoją obok siebie dopiero wtedy, gdy kolumna nie ściska tekstu
   do nieczytelnej miary; wcześniej 2x2, bo 3+1 zostawia sierotę */
.ways{display:grid;gap:var(--s7);grid-template-columns:1fr;margin-top:var(--s8)}
@media (min-width:620px){.ways{grid-template-columns:1fr 1fr}}
@media (min-width:1180px){.ways{grid-template-columns:repeat(4,1fr)}}
.way{
  display:grid;gap:var(--s4);align-content:start;
  padding-top:var(--s5);border-top:1px solid var(--rule);
  transition:border-color var(--d) var(--ease);
}
.way:hover{border-color:var(--accent)}
.way__i{
  width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  background:var(--accent);color:var(--on-accent);font-size:26px;
  transition:transform var(--d) var(--ease);
}
.way:hover .way__i{transform:translateY(-4px)}
.way p{color:var(--fg-muted);font-size:var(--t-sm);line-height:1.65}

/* ---------- 10. Zakres prac ---------- */
.scope{
  display:grid;gap:0 var(--s8);
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  margin-top:var(--s7);border-top:1px solid var(--rule);
}
.scope__item{
  display:grid;gap:var(--s4);align-items:start;
  grid-template-columns:auto minmax(0,1fr);
  padding-block:var(--s4);border-bottom:1px solid var(--rule);
  font-size:var(--t-sm);line-height:1.55;
}
.scope__item .i{font-size:19px;color:var(--accent);margin-top:2px}
.scope__item--lead{font-weight:600}

/* ---------- 11. Kontakt ---------- */
.contact{
  display:grid;gap:var(--s8);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  margin-top:var(--s7);
}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
/* nagłówek CTA stoi w węższej kolumnie, a "PRZYGOTUJEMY" ma 7,8 em,
   więc skala musi być mniejsza niż u nagłówków na pełną szerokość */
.contact .h2{font-size:clamp(1.75rem,4.4vw,3.25rem)}
.contact__acts{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s6)}

.info{display:grid;gap:0;align-content:start;border-top:1px solid var(--rule)}
.info__row{
  display:grid;gap:var(--s4);align-items:center;
  grid-template-columns:auto minmax(88px,auto) minmax(0,1fr);
  padding-block:var(--s5);border-bottom:1px solid var(--rule);
}
.info__row .i{font-size:20px;color:var(--accent)}
.info__row dt{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint)}
.info__row dd{font-family:var(--font-display);font-weight:600;font-size:var(--t-md);letter-spacing:-.01em;word-break:break-word}
.info__row a{transition:color var(--d-fast) var(--ease)}
.info__row a:hover{color:var(--accent)}
@media (max-width:560px){
  .info__row{grid-template-columns:auto minmax(0,1fr);row-gap:var(--s1)}
  .info__row dd{grid-column:2}
}

/* ---------- 12. Stopka ---------- */
.footer{border-top:1px solid var(--rule);padding-block:var(--s8) var(--s6)}
.footer__mark{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.5rem,11vw,9rem);line-height:.85;letter-spacing:-.05em;word-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:var(--s7);
}
.footer__grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  padding-bottom:var(--s6);border-bottom:1px solid var(--rule)}
.footer h4{font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);
  margin-bottom:var(--s4);font-weight:600}
.footer__list{display:grid;gap:var(--s3);font-size:var(--t-sm)}
.footer__list a{color:var(--fg-muted);transition:color var(--d-fast) var(--ease)}
.footer__list a:hover{color:var(--accent)}
.footer__bot{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;
  padding-top:var(--s5);font-size:var(--t-micro);letter-spacing:.06em;color:var(--fg-faint)}
.footer__credit{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.footer__credit a{
  color:var(--fg);font-weight:600;letter-spacing:.12em;
  border-bottom:1px solid var(--accent);padding-bottom:1px;
  transition:color var(--d-fast) var(--ease);
}
.footer__credit a:hover{color:var(--accent)}
@media (max-width:560px){.footer__credit{margin-left:0;width:100%}}

/* ---------- 13. Komunikat o języku ---------- */
.notice{
  position:fixed;left:var(--gutter);right:var(--gutter);bottom:var(--s5);z-index:120;
  max-width:520px;margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;
  padding:var(--s4) var(--s5);
  background:var(--invert-bg);color:var(--invert-fg);
  font-size:var(--t-sm);
  transform:translateY(140%);opacity:0;
  transition:transform 420ms var(--ease),opacity 420ms var(--ease);
}
.notice.is-visible{transform:none;opacity:1}
.notice__acts{display:flex;align-items:center;gap:var(--s3);margin-left:auto}
.notice__btn{
  cursor:pointer;min-height:40px;padding:0 var(--s4);white-space:nowrap;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px currentColor;
  transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease);
}
.notice__btn:hover{background:var(--invert-fg);color:var(--invert-bg)}
.notice__x{width:40px;height:40px;display:grid;place-items:center;cursor:pointer;font-size:16px}

/* ---------- 14. Ruch (subtle tier, ograniczony klasą .js) ---------- */
.js .reveal{
  opacity:0;transform:translateY(12px);
  transition:opacity var(--d-reveal) var(--ease),transform var(--d-reveal) var(--ease);
  transition-delay:calc(var(--i,0) * 60ms);
}
.js .reveal.is-in{opacity:1;transform:none}

/* wjazd linii nagłówka spod maski, tylko przy pierwszym malowaniu.
   Opacity dokłada się do przesunięcia, bo maska przepuszcza .1em na diakrytyki
   i bez tego przez chwilę widać pasek liter pod krawędzią. */
.js .hero__display .ln > span{
  opacity:0;transform:translateY(105%);
  transition:transform 620ms var(--ease),opacity 380ms var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
.js .is-ready .hero__display .ln > span{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1;transform:none}
  .js .hero__display .ln > span{opacity:1;transform:none}
  .strip__bar::after{display:none}
}

/* ---------- 15. Responsywność ---------- */
@media (max-width:900px){
  .burger{display:grid}
  .nav__links{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--rule);
    padding:var(--s4) var(--gutter) var(--s6);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity var(--d) var(--ease),transform var(--d) var(--ease),visibility var(--d);
  }
  .nav__links.is-open{opacity:1;visibility:visible;transform:none}
  .nav__link{padding-block:var(--s4);font-size:var(--t-sm);border-bottom:1px solid var(--rule)}
  .nav__link[aria-current="true"]::after{display:none}
  .hero__display .ln--indent{padding-left:4vw}
}
@media (max-width:560px){
  .hero__display .ln--indent{padding-left:0}
  .nav__in{gap:var(--s3)}
  .brand{font-size:.8125rem}
  .lang__btn{min-width:32px;padding:0 4px}
  .iconbtn{width:40px}
  .hero__acts .btn{width:100%}
  .notice{flex-direction:column;align-items:stretch}
  .notice__acts{margin-left:0}
  .notice__btn{flex:1}
}
@media print{
  .nav,.notice,.strip__bar{display:none}
  .js .reveal{opacity:1;transform:none}
  .js .hero__display .ln > span{opacity:1;transform:none}
}