/* ═══════════════════════════════════════════
   misiewicz-marketing.pl
   Kolejność: zmienne → reset → typografia →
   komponenty → sekcje → media queries
   Mobile-first. Breakpointy: 600 / 900 / 1200
   ═══════════════════════════════════════════ */

:root{
  /* granat / biel
     Ciemne tony są granatowe, nie czarne. Tekst na granacie jest chłodny —
     ciepła szarość na granacie wygląda brudno. Jasne sekcje są białe;
     logotypy narzędzi i makiety projektów są przezroczyste i projektowane
     pod biel, więc siadają na niej idealnie. */
  --ink:      #0C1B31;
  --ink-2:    #12253F;
  --paper:    #FFFFFF;
  --paper-2:  #F1F3F6;   /* subtelny odcień pod hover kafelka i ramkę portretu */
  --line-ink: rgba(255,255,255,.12);
  --line-pap: rgba(12,27,49,.14);

  /* akcent */
  --gold:     #E0A73C;
  --gold-lt:  #F0C46E;
  /* ciemniejszy wariant złota używany WYŁĄCZNIE na kremie — musi trzymać
     4.5:1 dla drobnego tekstu (kategoria projektu, numery usług) */
  --gold-dk:  #8A5F12;

  /* tekst */
  --tx-pap:   #0F1826;
  --tx-pap-2: #4E5666;
  --tx-ink:   #EEF2F8;
  --tx-ink-2: #93A3BC;

  /* typografia — dokładnie dwa kroje
     Space Grotesk: nagłówki. Czysty grotesk z odrobiną charakteru,
       znosi ciasny tracking i duże stopnie.
     Inter: tekst ORAZ etykiety. Dawne etykiety monospace robią teraz
       wersaliki Intera 600 z rozstrzeleniem — ten sam efekt, o font mniej. */
  --display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* rytm */
  --pad:   clamp(1.25rem, 5vw, 2rem);
  --gap:   clamp(3.5rem, 9vw, 8rem);
  --maxw:  1410px;

  --ease:  cubic-bezier(.22,.61,.36,1);
  --bar-h: 0px;
}

@media (max-width: 899px){ :root{ --bar-h: 62px; } }

/* PRELOADER */
html.is-loading,
html.is-loading body{
  overflow:hidden;
}
html.is-loading::before{
  content:"";
  position:fixed;
  z-index:9998;
  inset:0;
  background:
    radial-gradient(circle at 50% 42%, rgba(224,167,60,.18), transparent 28%),
    linear-gradient(135deg, var(--ink), #071121 72%);
  opacity:1;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
html.is-loading::after{
  content:"SEO";
  position:fixed;
  z-index:9999;
  left:50%;
  top:50%;
  width:clamp(132px,22vw,210px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid rgba(224,167,60,.48);
  border-radius:50%;
  background:
    linear-gradient(var(--ink),var(--ink)) padding-box,
    conic-gradient(from 120deg, transparent 0 18%, var(--gold) 32%, transparent 52%, var(--gold-lt) 76%, transparent 100%) border-box;
  color:var(--gold-lt);
  font-family:var(--display);
  font-size:clamp(2.1rem,5vw,3.6rem);
  font-weight:700;
  letter-spacing:.04em;
  line-height:1;
  text-transform:uppercase;
  box-shadow:0 28px 80px rgba(0,0,0,.32);
  transform:translate(-50%,-50%);
  animation:preloader-pulse 1.35s var(--ease) infinite, preloader-words 2.4s steps(1,end) infinite;
  transition:opacity .38s var(--ease), transform .45s var(--ease);
}
html.is-loading.preloader-leaving::before{
  opacity:0;
  transform:scale(1.03);
}
html.is-loading.preloader-leaving::after{
  opacity:0;
  transform:translate(-50%,-50%) scale(.86);
}
@keyframes preloader-pulse{
  50%{
    box-shadow:
      0 28px 80px rgba(0,0,0,.32),
      0 0 0 10px rgba(224,167,60,.08);
  }
}
@keyframes preloader-words{
  0%,16%{ content:"SEO"; }
  17%,32%{ content:"GEO"; }
  33%,48%{ content:"AI"; }
  49%,64%{ content:"LOCAL"; }
  65%,80%{ content:"WWW"; }
  81%,100%{ content:"ADS"; }
}
@media (prefers-reduced-motion:reduce){
  html.is-loading::after{
    animation:preloader-words 2.4s steps(1,end) infinite;
  }
}

/* ── reset ─────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}

body{
  background:var(--ink);
  color:var(--tx-ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-bottom:var(--bar-h);
}

img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }

::selection{ background:var(--gold); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; top:-100px; left:1rem; z-index:200;
  background:var(--gold); color:var(--ink);
  padding:.7rem 1.2rem; border-radius:4px; font-weight:600;
}
.skip:focus{ top:1rem; }

/* ── typografia ────────────────────────── */
.kicker{
  display:inline-block;
  font-family:var(--sans);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tx-pap-2);
  padding-bottom:.4rem;
  border-bottom:1px solid var(--line-pap);
  margin-bottom:1.6rem;
}
.kicker--gold{ color:var(--gold); border-color:rgba(224,167,60,.35); }

.sec__h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem, 5.5vw, 3.1rem);
  line-height:1.1;
  letter-spacing:-.025em;
  color:var(--tx-pap);
}
.sec__h2--light{ color:var(--tx-ink); }

.sec__sub{
  margin-top:1.4rem;
  max-width:46ch;
  color:var(--tx-pap-2);
  font-size:clamp(1rem, 2.6vw, 1.1rem);
}
.sec__sub--light{ color:var(--tx-ink-2); }
.sec__sub + .sec__sub{ margin-top:1rem; }

.dim{ opacity:.45; }

/* ── layout ────────────────────────────── */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
/* 80% głównego kontenera (1410 → 1128px), a nie 80% okna: dzięki temu FAQ
   zwęża się względem siatki strony, a nie względem monitora. max-width,
   nie width — na telefonie o zwężaniu decyduje --pad. */
.wrap--narrow{ max-width:calc(var(--maxw) * .8); }

.sec{ padding-block:var(--gap); position:relative; }
.sec--paper{ background:var(--paper); color:var(--tx-pap); }
.sec--ink{ background:var(--ink); color:var(--tx-ink); }

/* gdyby dwie kremowe sekcje kiedyś sąsiadowały, odstęp daje
   tylko dolny padding poprzedniej — inaczej urośnie do podwójnego */
.sec--paper + .sec--paper{ padding-top:0; }

/* ═══════════ PASEK CTA ═══════════ */
.cta{
  background:var(--ink-2);
  border-block:1px solid var(--line-ink);
  padding-block:clamp(2.5rem, 6vw, 4rem);
}
.cta--first{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--ink-2);
}
.cta--first::before{
  content:none;
}
.cta--first::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:-3%;
  bottom:-48%;
  width:42%;
  height:125%;
  opacity:.18;
  background:repeating-linear-gradient(
    115deg,
    transparent 0 15px,
    rgba(238,242,248,.3) 15px 16px
  );
  -webkit-mask-image:linear-gradient(90deg, #000, transparent 88%);
  mask-image:linear-gradient(90deg, #000, transparent 88%);
  transform:rotate(-5deg);
  pointer-events:none;
}
.cta__inner{
  position:relative;
  z-index:1;
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--pad);
  display:grid; gap:1.6rem; align-items:center;
}
.cta__h{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.4rem, 4vw, 2.05rem);
  line-height:1.18;
  letter-spacing:-.025em;
  color:var(--tx-ink);
  max-width:22ch;
}
.cta__p{
  margin-top:.7rem;
  font-size:.95rem;
  color:var(--tx-ink-2);
  max-width:48ch;
}
.cta__btns{ display:flex; flex-wrap:wrap; gap:.7rem; }

.sec__head{ margin-bottom:clamp(2.5rem, 6vw, 4.5rem); }

/* ── reveal ─────────────────────────────
   Treść jest widoczna domyślnie. Chowamy ją tylko wtedy,
   gdy JS wystartował (klasa .js na <html>) — inaczej awaria
   skryptu albo webview bez IntersectionObserver dałaby
   pustą stronę. */
.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ── pasek postępu ──────────────────────── */
.scroll-rail{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:120; pointer-events:none; background:transparent;
}
.scroll-rail__fill{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--gold-dk), var(--gold-lt));
  transition:width .1s linear;
}

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .35s var(--ease), backdrop-filter .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.nav__inner,
.topbar{
  padding-inline:max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
}
.nav__inner{
  display:flex; align-items:center; gap:1rem;
  padding-block:1rem;
  transition:padding .35s var(--ease);
}
.topbar{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:1.35rem;
  background:rgba(18,37,63,.8);
  border-bottom:1px solid var(--line-ink);
  font-size:.78rem;
  letter-spacing:.025em;
  color:var(--tx-ink-2);
}
.topbar a{ display:inline-flex; align-items:center; gap:.42rem; transition:color .25s; }
.topbar a:hover{ color:var(--gold-lt); }
.topbar svg{ width:13px; height:13px; fill:var(--gold); flex:none; }
.nav.stuck{
  background:rgba(11,11,12,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-ink);
}
.nav.stuck .nav__inner{ padding-block:.7rem; }
/* nad kremową sekcją nav pozostaje czytelny dzięki .stuck */

.nav__brand{ display:flex; align-items:center; margin-right:auto; }

/* Logo jest biało-złote na przezroczystym tle — nadaje się wyłącznie
   na ciemne tło, dlatego występuje tylko w nawigacji i stopce.
   Na kremowych sekcjach byłoby niewidoczne. */
.nav__logo{
  height:30px; width:auto;
  transition:opacity .3s var(--ease);
}
.nav__brand:hover .nav__logo{ opacity:.75; }

.nav__links{ display:none; }
/* .nav w selektorze celowo: .btn niżej ustawia display:inline-flex przy tej
   samej specyficzności i bez tego wygrałby kolejnością, pokazując przycisk
   na telefonie i wypychając burgera poza ekran. */
.nav .nav__cta{ display:none; }

/* burger */
.burger{
  width:42px; height:42px; flex:none;
  display:grid; place-content:center; gap:6px;
  border:1px solid var(--line-ink); border-radius:50%;
}
.burger span{
  display:block; width:16px; height:1.5px;
  background:var(--tx-ink);
  transition:transform .3s var(--ease), opacity .25s;
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

/* drawer */
.drawer{
  position:fixed; inset:0; z-index:99;
  background:var(--ink);
  padding:8rem var(--pad) 2rem;
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; transform:translateY(-8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}

@media (max-width: 599px){
  .topbar{
    justify-content:space-between;
    gap:.65rem;
    font-size:.62rem;
    letter-spacing:0;
  }
  .topbar a{ gap:.3rem; white-space:nowrap; }
  .topbar svg{ width:11px; height:11px; }
}
.drawer.open{ opacity:1; transform:none; }
.drawer[hidden]{ display:none; }

.drawer__nav{ display:flex; flex-direction:column; }
.drawer__nav a{
  display:flex; align-items:baseline; gap:1rem;
  padding:.85rem 0;
  border-bottom:1px solid var(--line-ink);
  font-family:var(--display);
  font-size:1.6rem; font-weight:600;
  letter-spacing:-.02em;
  transition:color .25s, padding-left .25s var(--ease);
}
.drawer__nav a:hover,.drawer__nav a:active{ color:var(--gold); padding-left:.5rem; }
.drawer__nav i{
  font-family:var(--sans); font-style:normal;
  font-size:.65rem; color:var(--gold);
  opacity:.6;
}

.drawer__foot{
  display:flex; flex-direction:column; gap:.4rem;
  font-family:var(--sans); font-size:.8rem;
  color:var(--tx-ink-2);
  padding-top:2rem;
}
.drawer__foot a:hover{ color:var(--gold); }

/* ═══════════ BUTTONS ═══════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.6rem;
  border-radius:100px;
  font-size:.92rem; font-weight:500;
  letter-spacing:.01em;
  white-space:nowrap;
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s;
  will-change:transform;
}
.btn--sm{ padding:.55rem 1.1rem; font-size:.82rem; }
.btn--full{ width:100%; }

.btn--gold{ background:var(--gold); color:var(--ink); font-weight:600; }
.btn--gold:hover{ background:var(--gold-lt); }

.btn--ghost{
  border:1px solid var(--line-ink);
  color:var(--tx-ink);
}
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }

.btn__arw{ transition:transform .3s var(--ease); font-size:.9em; }
.btn:hover .btn__arw{ transform:translate(2px,-2px); }

/* ═══════════ SZYBKI KONTAKT ═══════════ */
.contact-widget{
  position:fixed;
  z-index:80;
  right:clamp(.65rem,1.6vw,1.25rem);
  top:50%;
  display:flex;
  align-items:center;
  gap:.75rem;
  transform:translateY(-50%);
}
.contact-widget__tab{
  width:52px;
  min-height:156px;
  padding:.85rem .55rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  border:1px solid rgba(224,167,60,.5);
  border-radius:100px;
  background:var(--ink);
  color:var(--gold-lt);
  box-shadow:0 18px 45px rgba(12,27,49,.22);
  cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .3s var(--ease);
}
.contact-widget__tab svg{
  width:20px;
  height:20px;
  fill:currentColor;
}
.contact-widget__tab span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.12em;
  line-height:1;
  text-transform:uppercase;
}
.contact-widget__panel{
  width:min(310px,calc(100vw - 6.2rem));
  padding:.85rem;
  display:grid;
  gap:.55rem;
  border:1px solid rgba(224,167,60,.25);
  border-radius:14px;
  background:rgba(12,27,49,.96);
  color:var(--tx-ink);
  box-shadow:0 22px 65px rgba(0,0,0,.26);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(18px);
  transition:opacity .25s, visibility .25s, transform .32s var(--ease);
}
.contact-widget__panel > span{
  padding:.1rem .25rem .3rem;
  color:var(--gold);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.contact-widget__panel a{
  min-width:0;
  padding:.8rem;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:.75rem;
  border:1px solid var(--line-ink);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  transition:background .25s, border-color .25s, transform .3s var(--ease);
}
.contact-widget__panel a svg{
  width:18px;
  height:18px;
  justify-self:center;
  fill:var(--gold);
}
.contact-widget__panel small{
  display:block;
  color:var(--tx-ink-2);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.contact-widget__panel b{
  display:block;
  min-width:0;
  overflow:hidden;
  color:var(--tx-ink);
  font-size:.82rem;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.contact-widget:hover .contact-widget__panel,
.contact-widget:focus-within .contact-widget__panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);
}
.contact-widget:hover .contact-widget__tab,
.contact-widget:focus-within .contact-widget__tab{
  border-color:var(--gold);
  background:var(--gold);
  color:var(--ink);
  transform:translateX(-2px);
}
.contact-widget__panel a:hover,
.contact-widget__panel a:focus-visible{
  border-color:rgba(224,167,60,.7);
  background:rgba(224,167,60,.1);
  transform:translateX(-3px);
}
.scroll-top{
  position:fixed;
  z-index:79;
  right:clamp(.65rem,1.6vw,1.25rem);
  bottom:clamp(.65rem,1.6vw,1.25rem);
  --scroll-top-progress:0;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(224,167,60,.44);
  border-radius:50%;
  background:var(--ink);
  color:var(--paper);
  box-shadow:0 16px 42px rgba(12,27,49,.2);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.92);
  transition:opacity .25s, visibility .25s, transform .32s var(--ease), border-color .25s;
}
.scroll-top::before{
  content:"";
  position:absolute;
  left:-12%;
  right:-12%;
  bottom:-2px;
  height:calc((var(--scroll-top-progress) * 100%) + 2px);
  background:
    radial-gradient(70% 22% at 50% 0%, rgba(255,255,255,.28), transparent 65%),
    linear-gradient(180deg,var(--gold-lt),var(--gold));
  border-radius:999px 999px 0 0;
  transform:translateZ(0);
  transition:height .12s linear;
}
.scroll-top.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.scroll-top svg{
  position:relative;
  z-index:1;
  width:22px;
  height:22px;
  fill:currentColor;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.28));
}
.scroll-top:hover,
.scroll-top:focus-visible{
  border-color:var(--gold);
  transform:translateY(-3px) scale(1.04);
}

/* COOKIES */
.cookie-widget{
  position:fixed;
  z-index:119;
  left:clamp(.85rem,2vw,1.5rem);
  bottom:clamp(.85rem,2vw,1.5rem);
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(224,167,60,.45);
  border-radius:50%;
  background:var(--ink);
  color:var(--gold-lt);
  box-shadow:0 16px 42px rgba(12,27,49,.2);
  transition:background .25s, color .25s, border-color .25s, transform .3s var(--ease);
}
.cookie-widget svg{
  width:21px;
  height:21px;
  fill:currentColor;
}
.cookie-widget:hover,
.cookie-widget:focus-visible{
  border-color:var(--gold);
  background:var(--gold);
  color:var(--ink);
  transform:translateY(-3px);
}
.cookie-consent{
  position:fixed;
  z-index:120;
  left:clamp(.85rem,2vw,1.5rem);
  right:clamp(.85rem,2vw,1.5rem);
  bottom:clamp(.85rem,2vw,1.5rem);
  display:flex;
  justify-content:flex-start;
  pointer-events:none;
}
.cookie-consent__card{
  width:min(620px,100%);
  padding:clamp(1rem,2vw,1.25rem);
  border:1px solid rgba(224,167,60,.28);
  border-radius:16px;
  background:rgba(12,27,49,.96);
  color:var(--tx-ink);
  box-shadow:0 24px 80px rgba(0,0,0,.28);
  pointer-events:auto;
  transform:translateY(0);
  animation:cookie-in .42s var(--ease) both;
}
.cookie-consent--hide .cookie-consent__card{
  animation:cookie-out .32s var(--ease) both;
}
.cookie-consent__tag{
  display:inline-flex;
  margin-bottom:.65rem;
  color:var(--gold);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.cookie-consent h2{
  color:var(--tx-ink);
  font-family:var(--display);
  font-size:clamp(1.15rem,2.2vw,1.45rem);
  line-height:1.1;
  letter-spacing:-.035em;
}
.cookie-consent p{
  margin-top:.65rem;
  max-width:62ch;
  color:var(--tx-ink-2);
  font-size:.82rem;
  line-height:1.55;
}
.cookie-consent__settings{
  margin-top:1rem;
  display:grid;
  gap:.55rem;
}
.cookie-consent__settings[hidden]{
  display:none;
}
.cookie-choice{
  padding:.75rem;
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:.7rem;
  align-items:start;
  border:1px solid var(--line-ink);
  border-radius:10px;
  background:rgba(255,255,255,.035);
}
.cookie-choice input{
  width:18px;
  height:18px;
  margin-top:.15rem;
  accent-color:var(--gold);
}
.cookie-choice b{
  display:block;
  color:var(--tx-ink);
  font-size:.82rem;
  line-height:1.25;
}
.cookie-choice small{
  display:block;
  margin-top:.15rem;
  color:var(--tx-ink-2);
  font-size:.72rem;
  line-height:1.35;
}
.cookie-choice--locked{
  opacity:.72;
}
.cookie-consent__actions{
  margin-top:1rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.65rem;
}
.cookie-consent__actions .btn--ghost{
  border-color:rgba(255,255,255,.24);
  color:var(--tx-ink);
}
.cookie-consent__link{
  min-height:38px;
  padding:.35rem .2rem;
  color:var(--gold-lt);
  font-size:.8rem;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:4px;
}
.cookie-consent__link:hover{
  color:var(--gold);
}
@keyframes cookie-in{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes cookie-out{
  to{ opacity:0; transform:translateY(18px); }
}
@media (max-width:899px){
  .contact-widget{
    display:none;
  }
  .scroll-top{
    right:.75rem;
    bottom:calc(var(--bar-h) + .9rem + env(safe-area-inset-bottom));
    z-index:99;
  }
  .cookie-consent{
    bottom:calc(var(--bar-h) + 4.35rem + env(safe-area-inset-bottom));
  }
  .cookie-widget{
    left:.75rem;
    bottom:calc(var(--bar-h) + .9rem + env(safe-area-inset-bottom));
  }
  .cookie-consent__actions .btn,
  .cookie-consent__link{
    flex:1 1 130px;
  }
}

/* ═══════════ HERO ═══════════ */
/* Padding poziomy siedzi na .hero__inner, nie na .hero — dzięki temu
   lewa krawędź hero trafia dokładnie w linię .wrap w sekcjach niżej.
   Żadnych złotych poświat w rogach: to najbardziej rozpoznawalny znak
   hero generowanego przez AI. Prawą połowę wypełnia portret, a nie glow. */
.hero{
  position:relative;
  padding:7.5rem 0 3.5rem;
  overflow:hidden;
  isolation:isolate;
}

/* samo ziarno — granat na dużej płaszczyźnie potrafi pasmować */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

.hero__inner{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--pad);
  display:grid; gap:2.75rem;
}

/* .hero__copy musi być wypozycjonowane: .hero__words jest absolutne z z-index:0,
   a taki element maluje się NAD zwykłym, niepozycjonowanym tekstem — bez tego
   obrysowe napisy weszłyby na nagłówek. */
.hero__copy{ position:relative; z-index:2; }

.hero__fig{
  position:relative;
  margin:0;
  width:min(100%, 360px);
  max-width:none;
  justify-self:center;
  isolation:isolate;
}

/* Dekoracje rozbijają prostokątny kadr bez dokładania ciężkiej ramki.
   Obręcz i siatka zostają za portretem, więc twarz nadal jest najważniejsza. */
.hero__fig::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:4% -7% 12% 5%;
  border:1px solid rgba(224,167,60,.56);
  border-radius:52% 48% 43% 57% / 38% 52% 48% 62%;
  transform:rotate(5deg);
  pointer-events:none;
}
.hero__fig::after{
  content:"";
  position:absolute;
  z-index:0;
  width:44%;
  aspect-ratio:1;
  right:-9%;
  bottom:13%;
  opacity:.3;
  background-image:
    linear-gradient(rgba(238,242,248,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,242,248,.35) 1px, transparent 1px);
  background-size:13px 13px;
  -webkit-mask-image:radial-gradient(circle, #000 25%, transparent 72%);
  mask-image:radial-gradient(circle, #000 25%, transparent 72%);
  transform:rotate(-9deg);
  pointer-events:none;
}

/* Napisy w tle. Obrys zamiast wypełnienia — czyta się jak zamierzony
   element typograficzny, a nie jak przygaszony tekst. */
.hero__words{
  position:absolute; z-index:2;
  inset:-4% -15% 5%;
  pointer-events:none; user-select:none;
}
.hero__words span{
  position:absolute;
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.45rem, 10vw, 4.6rem);
  line-height:.88;
  letter-spacing:-.055em;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(238,242,248,.28);
  text-stroke:1px rgba(238,242,248,.28);
  text-shadow:0 3px 22px rgba(12,27,49,.42);
  pointer-events:auto;
  cursor:default;
  transition:color .38s var(--ease), -webkit-text-stroke-color .38s var(--ease), text-shadow .38s var(--ease);
}
.hero__words span:nth-child(1){ top:7%; left:1%; }
.hero__words span:nth-child(2){ top:28%; right:0; -webkit-text-stroke-color:rgba(224,167,60,.62); }
.hero__words span:nth-child(3){
  top:78%;
  left:2%;
  font-size:clamp(1.7rem, 6.8vw, 3.1rem);
  letter-spacing:-.035em;
  transform:rotate(-90deg);
  transform-origin:left top;
  -webkit-text-stroke-color:rgba(238,242,248,.48);
}
.hero__words span:nth-child(4){
  right:0;
  bottom:13%;
  font-size:clamp(1.65rem, 6.5vw, 3rem);
  letter-spacing:-.045em;
  -webkit-text-stroke-color:rgba(238,242,248,.4);
}

@media (hover:hover){
  .hero__words span:hover{
    color:var(--tx-ink);
    -webkit-text-stroke-color:var(--tx-ink);
    text-shadow:0 8px 28px rgba(12,27,49,.72);
  }
  .hero__words span:nth-child(2):hover{
    color:var(--gold);
    -webkit-text-stroke-color:var(--gold);
  }
}

/* Zdjęcie wtopione w tło: maska wygasza krawędzie, więc portret nie ma
   ramki tylko rozpływa się w granacie i odsłania napisy pod spodem.
   Czerń i biel, bo kolorowe studyjne tło gryzłoby się z granatem. */
.hero__fig img{
  position:relative; z-index:1;
  width:100%; height:auto;
  aspect-ratio:680/735;
  object-fit:cover;
  display:block;
  border-radius:48% 52% 24% 30% / 25% 29% 14% 18%;
  filter:grayscale(1) contrast(1.06);
  -webkit-mask-image:radial-gradient(96% 91% at 50% 43%, #000 55%, rgba(0,0,0,.72) 76%, transparent 98%);
  mask-image:radial-gradient(96% 91% at 50% 43%, #000 55%, rgba(0,0,0,.72) 76%, transparent 98%);
}

.hero__fig figcaption{
  position:relative; z-index:3;
  width:100%;
  max-width:none;
  margin:.8rem 0 0;
  padding:.85rem 0 0;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:.75rem 1rem;
  font-size:.76rem;
  line-height:1.4;
  color:var(--tx-ink-2);
  border-top:1px solid rgba(238,242,248,.18);
}
.hero__fig figcaption b{
  position:relative;
  color:var(--tx-ink);
  font-family:var(--display);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:-.015em;
  padding-left:.85rem;
  white-space:nowrap;
}
.hero__fig figcaption b::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
  transform:translateY(-50%);
}
.hero__fig figcaption span{
  padding-left:1rem;
  border-left:1px solid rgba(238,242,248,.18);
}

@media (max-width: 420px){
  .hero__fig figcaption{ grid-template-columns:1fr; gap:.3rem; }
  .hero__fig figcaption span{ padding-left:.85rem; border-left:0; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans);
  font-weight:600;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tx-ink-2);
  margin-bottom:1.8rem;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--gold);
}

.hero__h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.15rem, 6.8vw, 4.2rem);
  line-height:1.06;
  letter-spacing:-.035em;
  max-width:17ch;
}

.hero__lead{
  margin-top:2rem;
  max-width:44ch;
  font-size:clamp(1.02rem, 3vw, 1.2rem);
  color:var(--tx-ink-2);
}

.hero__cta{
  margin-top:2.5rem;
  display:flex; flex-wrap:wrap; gap:.8rem;
}

/* ═══════════ STATS ═══════════ */
.stats{
  background:var(--ink-2);
  border-top:1px solid var(--line-ink);
  border-bottom:1px solid var(--line-ink);
  padding:2.5rem 0;
}
.stats__note{
  max-width:var(--maxw); margin:0 auto 1.8rem;
  padding-inline:var(--pad);
  font-family:var(--sans); font-weight:600; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx-ink-2);
}
.stats__row{
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:2rem 1rem;
}
.stat{ display:flex; flex-direction:column; gap:.3rem; }
.stat__num{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem, 6vw, 2.7rem);
  line-height:1.05;
  letter-spacing:-.025em;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.stat__lab{
  font-size:.82rem;
  color:var(--tx-ink-2);
  line-height:1.35;
  max-width:18ch;
}

/* ═══════════ NARZĘDZIA ═══════════
   Pasek jest kremowy, nie ciemny, i to celowo: wszystkie te logotypy
   są projektowane pod jasne tło. Czarna żaba Screaming Froga zlewałaby
   się z #0B0B0C, a granat Ahrefs byłby ciemny na ciemnym. */
/* Pasek siedzi tuż pod usługami — obie sekcje są białe, więc rozdziela je
   linia u góry. Dołu nie kreskujemy: pod spodem zaczyna się granatowe CTA
   i sam kontrast tła wystarcza. */
.tools{
  --tools-gap: clamp(1.5rem, 3vw, 2.25rem);
  background:var(--paper);
  border-top:1px solid var(--line-pap);
  padding:2.4rem 0 2.6rem;
  overflow:hidden;
}
.tools__note{
  max-width:var(--maxw); margin:0 auto 1.5rem;
  padding-inline:var(--pad);
  font-family:var(--sans); font-weight:600; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx-pap-2);
}

/* maska wygasza logo na krawędziach, żeby nie ucinały się twardo */
.tools__track{
  --sets: 8;                 /* MUSI się zgadzać z liczbą .tools__set w HTML */
  display:flex; width:max-content;
  animation:tools-march 17s linear infinite;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tools:hover .tools__track,
.tools:focus-within .tools__track{ animation-play-state:paused; }

/* Zestaw ma szerokość własnej treści — żadnego rozciągania do ekranu.
   Wcześniej rozpychało go min-width:100vw + space-around, przez co odstępy
   na szerokim ekranie robiły się ogromne. Ciasne odstępy oznaczają jednak,
   że pięć logo nie wypełnia szerokiego monitora, dlatego zestaw powtarza
   się 8× (patrz --sets). Warunek braku dziury: (8-1) × szerokość zestawu
   musi przekraczać szerokość okna. Przy ~716px daje to zapas do ~5000px,
   czyli z nadmiarem na 4K i ultrawide.
   Padding = połowa odstępu, żeby szew między zestawami miał taki sam
   prześwit jak odstęp w środku. */
.tools__set{
  flex:0 0 auto;
  display:flex; align-items:center;
  gap:var(--tools-gap);
  padding-inline:calc(var(--tools-gap) / 2);
}

.tool{
  display:flex; align-items:center; justify-content:center;
  height:58px; flex:none;
  opacity:.62;
  transition:opacity .35s var(--ease);
}
.tool:hover{ opacity:1; }

/* Podwójny limit zamiast samej wysokości: logotyp-napis (Ahrefs, Localo)
   opiera się o szerokość, a znak kwadratowy (Screaming Frog) o wysokość.
   Bez tego napis 4:1 i kwadrat 1:1 miałyby zupełnie inną wagę optyczną. */
.tool img{
  max-height:46px; max-width:178px;
  width:auto; height:auto;
  object-fit:contain;
  filter:grayscale(1);
  transition:filter .35s var(--ease);
}
.tool:hover img{ filter:none; }

.tool b{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.05rem;
  color:var(--tx-pap);
  white-space:nowrap;
}
/* gdy logo faktycznie się wczyta, nazwa tekstowa znika */
.tool--img b{ display:none; }

/* Przesunięcie o dokładnie jeden zestaw = 1/--sets szerokości ścieżki.
   Liczone z --sets, żeby nie rozjechało się przy zmianie liczby zestawów. */
@keyframes tools-march{ to{ transform:translateX(calc(-100% / var(--sets))); } }

/* bez ruchu: jeden statyczny rząd zamiast pętli */
@media (prefers-reduced-motion: reduce){
  .tools__track{
    animation:none;
    -webkit-mask-image:none; mask-image:none;
  }
  .tools__track{ width:100%; }
  .tools__track .tools__set:not(:first-child){ display:none; }
  .tools__set{
    width:100%;
    flex-wrap:wrap; justify-content:center;
    row-gap:1.2rem;
    padding-inline:var(--pad);
  }
  .tool{ opacity:.75; }
}

/* ═══════════ USŁUGI ═══════════ */
.svc{ border-top:1px solid var(--line-pap); }
.svc__item{ border-bottom:1px solid var(--line-pap); }

.svc__head{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:.9rem;
  padding:1.5rem 0;
  text-align:left;
  transition:padding-left .35s var(--ease);
}
.svc__item:hover .svc__head{ padding-left:.6rem; }

.svc__no{
  font-family:var(--sans);
  font-weight:600;
  font-size:.68rem;
  color:var(--gold-dk);
  align-self:start;
  padding-top:.45rem;
}
.svc__title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.25rem, 4vw, 1.85rem);
  line-height:1.2;
  letter-spacing:-.02em;
  transition:color .3s;
}
.svc__item:hover .svc__title{ color:var(--gold-dk); }

.svc__plus{
  position:relative;
  width:22px; height:22px; flex:none;
}
.svc__plus::before,.svc__plus::after{
  content:""; position:absolute; top:50%; left:50%;
  background:var(--tx-pap);
  transform:translate(-50%,-50%);
  transition:transform .35s var(--ease), background .3s;
}
.svc__plus::before{ width:13px; height:1.5px; }
.svc__plus::after{ width:1.5px; height:13px; }
.svc__head[aria-expanded="true"] .svc__plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.svc__head[aria-expanded="true"] .svc__plus::before,
.svc__head[aria-expanded="true"] .svc__plus::after{ background:var(--gold-dk); }

.svc__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.svc__body > *{ overflow:hidden; }
.svc__item.open .svc__body{ grid-template-rows:1fr; }

.svc__inner{
  min-height:0;
  padding:0;
  max-width:60ch;
  transition:padding-bottom .45s var(--ease);
}
.svc__item.open .svc__inner{ padding-bottom:1.8rem; }
.svc__inner p{ color:var(--tx-pap-2); }

.svc__list{ margin-top:1.1rem; display:grid; gap:.5rem; }
.svc__list li{
  position:relative;
  padding-left:1.4rem;
  font-size:.92rem;
  color:var(--tx-pap-2);
}
.svc__list li::before{
  content:"→";
  position:absolute; left:0;
  color:var(--gold-dk);
  font-size:.8rem;
}
.svc__actions{ margin-top:1.5rem; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.15rem; }
.svc__actions .btn{ min-height:44px; padding:.75rem 1.15rem; }
.svc__contact{ min-height:44px; padding:.65rem 0; display:inline-flex; align-items:center; gap:.55rem; color:var(--tx-pap); font-size:.78rem; font-weight:700; }
.svc__contact span{ color:var(--gold-dk); transition:transform .25s var(--ease); }
@media (hover:hover){ .svc__contact:hover{ color:var(--gold-dk); }.svc__contact:hover span{ transform:translateX(4px); } }
@media (max-width:420px){ .svc__actions{ align-items:stretch; }.svc__actions .btn,.svc__contact{ width:100%; justify-content:center; }.svc__contact{ border:1px solid var(--line-pap); border-radius:999px; } }

@media (min-width: 800px){
  .svc{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:start;
    gap:1rem;
    border-top:0;
  }
  .svc__item{
    overflow:hidden;
    background:var(--paper);
    border:1px solid var(--line-pap);
    border-radius:12px;
    transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .svc__item:hover{
    border-color:rgba(138,95,18,.3);
    box-shadow:0 12px 30px rgba(12,27,49,.06);
  }
  .svc__item:last-child{ grid-column:1 / -1; }
  .svc__head{
    min-height:92px;
    padding:1.35rem 1.4rem;
    gap:1rem;
  }
  .svc__item:hover .svc__head{ padding-left:1.75rem; }
  .svc__title{ font-size:clamp(1.2rem, 2vw, 1.55rem); }
  .svc__inner{
    max-width:none;
    padding-inline:1.4rem;
  }
  .svc__item.open .svc__inner{ padding-bottom:1.5rem; }
  .svc__item:last-child .svc__inner{ max-width:82ch; }
}

/* ═══════════ PROJEKTY ═══════════ */
.cases{
  display:grid;
  gap:clamp(1rem, 2.5vw, 1.6rem);
}

.case{
  background:var(--paper);
  padding:clamp(1.6rem, 5vw, 2.6rem) clamp(1.2rem, 4vw, 2.2rem);
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line-pap);
  border-radius:18px;
  box-shadow:0 10px 35px rgba(12,27,49,.045);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.case::before{
  content:"";
  position:absolute;
  top:0;
  left:clamp(1.2rem, 4vw, 2.2rem);
  width:72px;
  height:3px;
  border-radius:0 0 3px 3px;
  background:var(--gold);
  transform:scaleX(.35);
  transform-origin:left;
  transition:transform .4s var(--ease);
}
.case:hover{
  transform:translateY(-6px);
  border-color:rgba(138,95,18,.28);
  box-shadow:0 20px 52px rgba(12,27,49,.11);
}
.case:hover::before{ transform:scaleX(1); }

/* Makieta projektu. Kafelki bez pliku tracą .case__shot przez onerror,
   więc siatka nie zostawia pustej dziury — po prostu zaczynają się
   od nagłówka. */
/* Bez tła — makiety są przezroczystymi PNG-ami/WebP i mają wtopić się
   w kafelek. Jakiekolwiek tło zrobiłoby z nich widoczny prostokąt.
   overflow:hidden zostaje, żeby powiększenie przy hoverze nie wylewało się
   poza kafelek. Wszystkie trzy mają identyczne marginesy w pliku, więc
   ustawiają się równo względem siebie bez dodatkowych korekt. */
.case__shot{
  min-height:clamp(190px, 27vw, 270px);
  margin:0 0 1.6rem;
  padding:1rem;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg, #f7f8fa, var(--paper-2));
  border:1px solid rgba(12,27,49,.07);
  border-radius:12px;
}
/* Makiety są kwadratowe, więc bez limitu rozpychały kafelek na całą
   szerokość (589px na desktopie) i przytłaczały treść. */
.case__shot img{
  width:100%; max-width:380px; max-height:250px; height:auto;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 12px 15px rgba(12,27,49,.12));
  transition:transform .5s var(--ease), filter .5s var(--ease);
}
.case:hover .case__shot img{
  transform:scale(1.035);
  filter:drop-shadow(0 16px 20px rgba(12,27,49,.17));
}

.case__top{ margin-bottom:1rem; }
.case__top h3{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.3rem, 3.8vw, 1.6rem);
  letter-spacing:-.025em;
  line-height:1.2;
}
.case__cat{
  display:block;
  margin-top:.3rem;
  font-family:var(--sans);
  font-weight:600;
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-dk);
}
.case__txt{
  color:var(--tx-pap-2);
  font-size:.94rem;
  max-width:52ch;
  margin-bottom:1.6rem;
}
.case__res{
  margin-top:auto;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:.8rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line-pap);
}
.case__res li{ display:flex; flex-direction:column; gap:.15rem; }
.case__res b{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1rem, 2.9vw, 1.2rem);
  letter-spacing:-.02em;
  line-height:1.2;
  color:var(--tx-pap);
  font-variant-numeric:tabular-nums;
}
.case__res span{
  font-size:.7rem;
  line-height:1.3;
  color:var(--tx-pap-2);
}
.case__link{
  margin-top:1.25rem;
  padding-top:1rem;
  border-top:1px solid var(--line-pap);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  color:var(--tx-pap);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:color .25s;
}
.case__link span{
  color:var(--gold-dk);
  font-size:.95rem;
  transition:transform .25s var(--ease);
}
.case__link:hover{
  color:var(--gold-dk);
}
.case__link:hover span{
  transform:translate(3px,-3px);
}
.case__time{
  position:absolute; top:1.25rem; right:1.2rem;
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.06em;
  font-weight:600;
  text-transform:uppercase;
  color:var(--gold-dk);
}

/* ═══════════ O MNIE ═══════════
   Portret przeniesiony do hero — ta sama twarz dwa razy na jednej stronie
   wygląda na niedopatrzenie. Sekcja jest teraz czysto tekstowa:
   nagłówek po lewej, treść po prawej. */
.about{ display:grid; gap:2rem; }

.about__rola{
  margin-top:.7rem;
  font-size:.86rem;
  color:var(--tx-pap-2);
}

.about__copy p{
  color:var(--tx-pap-2);
  max-width:62ch;
}
.about__copy p + p{ margin-top:1.1rem; }

/* Liczby zamiast dawnych wyróżników. Numery lecą przez ten sam licznik
   co pasek w hero — wystarczy data-count, JS podłącza je sam. */
.facts{
  width:min(100%, 920px);
  margin:clamp(2.5rem, 6vw, 4.5rem) auto 0;
  display:grid; gap:1px;
  background:var(--line-pap);
  border:1px solid var(--line-pap);
  border-radius:4px;
  overflow:hidden;
}
.fact{
  background:var(--paper);
  padding:1.25rem 1.1rem;
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  text-align:center;
}
.fact__num{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.7rem, 4.5vw, 2.2rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--gold-dk);
  font-variant-numeric:tabular-nums;
}
.fact__lab{
  font-size:.85rem;
  line-height:1.35;
  color:var(--tx-pap-2);
  max-width:20ch;
}

/* ═══════════ OPINIE ═══════════ */
.testimonials{ padding-top:0; }
.testimonials__grid{ display:grid; gap:1rem; }
.testimonial{
  position:relative;
  min-height:285px;
  padding:clamp(1.4rem, 3vw, 2rem);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#eef0f2;
  border:1px solid rgba(12,27,49,.12);
  border-radius:16px;
  color:#626976;
  filter:grayscale(1);
  transition:transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), filter .45s var(--ease);
}
.testimonial::before{
  content:"“";
  position:absolute;
  top:-.45rem;
  right:1rem;
  font-family:Georgia, serif;
  font-size:8rem;
  line-height:1;
  color:rgba(74,82,96,.09);
  transition:color .45s var(--ease), transform .45s var(--ease);
}
.testimonial__stars{
  position:relative;
  z-index:1;
  margin-bottom:1.35rem;
  font-size:.9rem;
  letter-spacing:.16em;
  color:#8b9099;
  transition:color .4s var(--ease);
}
.testimonial blockquote{
  position:relative;
  z-index:1;
  font-family:var(--display);
  font-size:clamp(1.05rem, 2vw, 1.25rem);
  font-weight:600;
  line-height:1.45;
  letter-spacing:-.015em;
}
.testimonial footer{
  position:relative;
  z-index:1;
  margin-top:auto;
  padding-top:1.5rem;
  display:flex;
  align-items:center;
  gap:.8rem;
}
.testimonial__avatar{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:50%;
  background:#d8dbe0;
  font-size:.62rem;
  font-weight:700;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.testimonial footer div{ display:flex; flex-direction:column; }
.testimonial footer b{ font-size:.84rem; color:inherit; }
.testimonial footer div span{ font-size:.72rem; opacity:.72; }

@media (hover:hover){
  .testimonial:hover{
    transform:translateY(-7px);
    background:var(--ink-2);
    border-color:rgba(224,167,60,.42);
    color:var(--tx-ink);
    filter:none;
    box-shadow:0 22px 50px rgba(12,27,49,.18);
  }
  .testimonial:hover::before{ color:rgba(224,167,60,.13); transform:rotate(-5deg); }
  .testimonial:hover .testimonial__stars{ color:var(--gold); }
  .testimonial:hover .testimonial__avatar{ background:var(--gold); color:var(--ink); }
}
.testimonials__grid .testimonial:nth-child(2){ transition-delay:.08s; }
.testimonials__grid .testimonial:nth-child(3){ transition-delay:.16s; }

@media (min-width:760px){
  .testimonials__grid{ grid-template-columns:repeat(3,1fr); }
}

/* ═══════════ FAQ ═══════════ */
.faq{ border-top:1px solid var(--line-pap); }
.faq__i{ border-bottom:1px solid var(--line-pap); }

.faq__q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:1.3rem 0;
  text-align:left;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.02rem, 3vw, 1.2rem);
  line-height:1.35;
  letter-spacing:-.02em;
  transition:color .3s;
}
.faq__q:hover{ color:var(--gold-dk); }

.faq__ic{
  position:relative; width:18px; height:18px; flex:none;
}
.faq__ic::before,.faq__ic::after{
  content:""; position:absolute; top:50%; left:50%;
  background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .35s var(--ease);
}
.faq__ic::before{ width:11px; height:1.5px; }
.faq__ic::after{ width:1.5px; height:11px; }
.faq__q[aria-expanded="true"] .faq__ic::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__q[aria-expanded="true"]{ color:var(--gold-dk); }

.faq__a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease);
}
.faq__a > div{ overflow:hidden; }
.faq__i.open .faq__a{ grid-template-rows:1fr; }
.faq__a p{
  padding:0 0 1.5rem;
  max-width:62ch;
  color:var(--tx-pap-2);
  font-size:.94rem;
}

/* ═══════════ KONTAKT ═══════════ */
.kt{ display:grid; gap:3rem; }

.kt__direct{
  margin-top:2.5rem;
  display:grid; gap:1px;
  background:var(--line-ink);
  border:1px solid var(--line-ink);
  border-radius:6px;
  overflow:hidden;
}
.kt__direct li{
  background:var(--ink-2);
  padding:.95rem 1.1rem;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.kt__lab{
  font-family:var(--sans);
  font-weight:600;
  font-size:.64rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tx-ink-2);
  flex:none;
}
.kt__val{
  font-size:.9rem;
  color:var(--gold);
  text-align:right;
  word-break:break-word;
  transition:color .25s;
}
a.kt__val:hover{ color:var(--gold-lt); text-decoration:underline; text-underline-offset:3px; }
.kt__val--plain{ color:var(--tx-ink); }

/* formularz */
.form{
  background:var(--ink-2);
  border:1px solid var(--line-ink);
  border-radius:6px;
  padding:clamp(1.4rem, 5vw, 2.2rem);
}
.form__row{ margin-bottom:1.3rem; }
.form__split{ display:grid; gap:0 1rem; }
.form__row label{
  display:block;
  font-size:.82rem;
  color:var(--tx-ink-2);
  margin-bottom:.5rem;
}
.form__row label i{ opacity:.6; font-style:normal; }

@media (min-width:600px){
  .form__split{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.form input,.form textarea{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line-ink);
  padding:.6rem 0;
  font-size:1rem;
  transition:border-color .3s;
  border-radius:0; /* iOS */
  resize:vertical;
}
.form input::placeholder,.form textarea::placeholder{ color:rgba(255,255,255,.2); }
.form input:focus,.form textarea:focus{
  outline:0;
  border-bottom-color:var(--gold);
}
.form input.err,.form textarea.err{ border-bottom-color:#D9534F; }

.form__trap{
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.form__note{
  margin-top:1.1rem;
  font-size:.74rem;
  line-height:1.55;
  color:var(--tx-ink-2);
  text-align:center;
}
.form__note a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
.form__note.ok{ color:var(--gold); }

.form-thanks{
  position:fixed;
  z-index:150;
  inset:0;
  display:grid;
  place-items:center;
  padding:var(--pad);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s var(--ease), visibility .25s;
}
.form-thanks--show{
  opacity:1;
  visibility:visible;
}
.form-thanks--hide{
  opacity:0;
  visibility:hidden;
}
.form-thanks__backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(7,17,33,.68);
  backdrop-filter:blur(10px);
  cursor:pointer;
}
.form-thanks__card{
  position:relative;
  width:min(520px,100%);
  padding:clamp(1.35rem,4vw,2rem);
  border:1px solid rgba(224,167,60,.32);
  background:var(--ink);
  color:var(--tx-ink);
  box-shadow:0 28px 90px rgba(0,0,0,.36);
  transform:translateY(16px) scale(.97);
  transition:transform .32s var(--ease);
}
.form-thanks--show .form-thanks__card{ transform:translateY(0) scale(1); }
.form-thanks__icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--gold);
  color:var(--ink);
}
.form-thanks__icon svg{
  width:28px;
  height:28px;
  fill:currentColor;
}
.form-thanks__tag{
  display:block;
  margin-top:1.1rem;
  color:var(--gold);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.form-thanks h2{
  margin-top:.55rem;
  font-family:var(--display);
  font-size:clamp(1.65rem,4vw,2.55rem);
  line-height:1.02;
}
.form-thanks p{
  margin-top:.85rem;
  max-width:54ch;
  color:var(--tx-ink-2);
  line-height:1.7;
}
.form-thanks .btn{
  margin-top:1.25rem;
}

/* ═══════════ FOOTER ═══════════ */
/* Blog na stronie głównej */
.blog-hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(7rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 7rem);
  background:
    linear-gradient(90deg, rgba(12,27,49,.96) 0%, rgba(12,27,49,.82) 39%, rgba(12,27,49,.38) 72%, rgba(12,27,49,.72) 100%),
    linear-gradient(180deg, rgba(12,27,49,.4), rgba(12,27,49,.95)),
    url("../img/business-people-reading-newspaper.jpg") center 48% / cover no-repeat;
}
.blog-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 26% 32%, rgba(224,167,60,.24), transparent 30%),
    repeating-linear-gradient(115deg, transparent 0 18px, rgba(238,242,248,.11) 18px 19px);
  mix-blend-mode:screen;
  opacity:.52;
  pointer-events:none;
}
.blog-hero::after{
  content:"BLOG";
  position:absolute;
  right:-.05em;
  bottom:-.18em;
  z-index:-1;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.14);
  font-family:var(--display);
  font-size:clamp(8rem, 24vw, 22rem);
  font-weight:700;
  line-height:1;
  letter-spacing:0;
  pointer-events:none;
}
.blog-hero__inner{ position:relative; z-index:1; }
.blog-hero__copy{ max-width:780px; }
.blog-hero__copy h1{
  margin-top:1rem;
  max-width:18ch;
  font-family:var(--display);
  font-size:clamp(2.05rem, 4.6vw, 4rem);
  line-height:1.04;
  letter-spacing:0;
  color:var(--tx-ink);
}
.blog-hero__copy > p{
  margin-top:2rem;
  max-width:58ch;
  color:rgba(238,242,248,.82);
  font-size:clamp(1.02rem, 2vw, 1.2rem);
}
.blog-page .service-text-link{ color:rgba(238,242,248,.78); }
.blog-page .service-text-link:hover{ color:var(--gold); }

.home-blog{ position:relative; overflow:hidden; background:var(--paper); }
.home-blog::before{ content:"BLOG"; position:absolute; right:-.04em; top:-.2em; color:transparent; -webkit-text-stroke:1px rgba(138,95,18,.1); font-family:var(--display); font-size:clamp(8rem,24vw,22rem); font-weight:700; line-height:1; pointer-events:none; }
.home-blog .wrap{ position:relative; z-index:1; }
.home-blog__head{ margin-bottom:clamp(2.5rem,6vw,4.5rem); display:grid; gap:1.5rem; align-items:end; }
.home-blog__head h2{ max-width:15ch; }
.home-blog__head > p{ max-width:52ch; color:var(--tx-pap-2); font-size:.9rem; }
.home-blog__head > p a{ color:var(--gold-dk); font-weight:700; }
.home-blog__grid{ display:grid; gap:1rem; }
.blog-card{ min-width:0; display:grid; background:var(--paper-2); border:1px solid var(--line-pap); transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s; }
.blog-card__visual{ position:relative; min-height:190px; overflow:hidden; padding:1.15rem; display:flex; justify-content:space-between; align-items:flex-start; background:var(--ink-2); color:var(--tx-ink); }
.blog-card__visual::after{ content:""; position:absolute; width:170px; height:170px; right:-50px; bottom:-75px; border:1px solid rgba(224,167,60,.4); border-radius:50%; transition:transform .5s var(--ease),background .5s; }
.blog-card__visual span{ color:var(--gold); font-size:.65rem; font-weight:700; }
.blog-card__visual strong{ align-self:flex-end; font-family:var(--display); font-size:clamp(2.6rem,6vw,4.8rem); line-height:.78; letter-spacing:-.08em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.42); }
.blog-card__content{ padding:1.35rem; display:flex; flex-direction:column; }
.blog-card__meta{ display:flex; justify-content:space-between; gap:1rem; color:var(--tx-pap-2); font-size:.61rem; }
.blog-card__meta span{ color:var(--gold-dk); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.blog-card h3{ margin-top:1.4rem; color:var(--tx-pap); font-family:var(--display); font-size:clamp(1.25rem,2.4vw,1.65rem); line-height:1.08; }
.blog-card p{ margin-top:.8rem; color:var(--tx-pap-2); font-size:.8rem; }
.blog-card__status{ margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--line-pap); display:inline-flex; align-items:center; gap:.45rem; color:var(--tx-pap); font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.blog-card__status span{ color:var(--gold-dk); transition:transform .25s var(--ease); }
@media (hover:hover){ .blog-card__status:hover{ color:var(--gold-dk); }.blog-card__status:hover span{ transform:translate(2px,-2px); } }
@media (hover:hover){ .blog-card:hover{ transform:translateY(-7px); border-color:rgba(138,95,18,.35); box-shadow:0 22px 55px rgba(12,27,49,.1); }.blog-card:hover .blog-card__visual::after{ transform:scale(1.25); background:rgba(224,167,60,.08); } }
@media (min-width:700px){ .home-blog__head{ grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); }.home-blog__grid{ grid-template-columns:repeat(2,1fr); }.blog-card--featured{ grid-column:1 / -1; grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr); }.blog-card--featured .blog-card__visual{ min-height:330px; }.blog-card--featured .blog-card__content{ padding:clamp(1.5rem,4vw,2.5rem); justify-content:center; } }
@media (min-width:1000px){ .home-blog__grid{ grid-template-columns:repeat(3,1fr); }.blog-card--featured{ grid-column:auto; grid-template-columns:1fr; }.blog-card--featured .blog-card__visual{ min-height:190px; }.blog-card--featured .blog-card__content{ padding:1.35rem; justify-content:flex-start; } }

.article-page{ background:var(--paper); color:var(--tx-pap); }
.article-hero{
  position:relative;
  overflow:hidden;
  min-height:min(760px,86vh);
  padding-block:calc(var(--bar-h) + 7.4rem) clamp(4rem,8vw,7rem);
  display:flex;
  align-items:end;
  background:
    linear-gradient(135deg, rgba(12,27,49,.94), rgba(12,27,49,.72)),
    radial-gradient(circle at 82% 16%, rgba(224,167,60,.24), transparent 34%),
    var(--ink);
  color:var(--tx-ink);
}
.article-hero::before{
  content:"";
  position:absolute;
  inset:auto -10vw -18vw auto;
  width:52vw;
  max-width:680px;
  aspect-ratio:1;
  border:1px solid rgba(224,167,60,.26);
  border-radius:50%;
  pointer-events:none;
}
.article-hero::after{
  content:"SEO";
  position:absolute;
  right:-.08em;
  top:.12em;
  font-family:var(--display);
  font-size:clamp(8rem,23vw,23rem);
  font-weight:700;
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.08);
  pointer-events:none;
}
.article-hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  gap:2rem;
  align-items:end;
}
.article-hero__copy{ max-width:840px; }
.article-crumb{
  display:inline-flex;
  margin-bottom:1.35rem;
  color:var(--gold);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.article-hero__copy h1{
  max-width:13ch;
  font-family:var(--display);
  font-size:clamp(2.35rem,5.8vw,5.15rem);
  line-height:.92;
  color:var(--tx-ink);
}
.article-hero__copy > p{
  margin-top:1.25rem;
  max-width:730px;
  color:var(--tx-ink-2);
  font-size:clamp(.98rem,1.4vw,1.14rem);
  line-height:1.78;
}
.article-meta{
  margin-top:1.65rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem .85rem;
  color:var(--tx-ink-2);
}
.article-meta span{
  position:relative;
  padding:0;
  color:inherit;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.article-meta span:first-child{ color:var(--gold); }
.article-meta span + span{
  padding-left:1.05rem;
}
.article-meta span + span::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(224,167,60,.72);
  transform:translateY(-50%);
}
.article-hero__card{
  max-width:390px;
  justify-self:start;
  padding:1.35rem;
  border-left:3px solid var(--gold);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(16px);
}
.article-hero__card span{
  color:var(--gold);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.article-hero__card p{
  margin-top:.9rem;
  color:var(--tx-ink);
  line-height:1.68;
}
.article-actions{
  margin-top:1.25rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;
  gap:.65rem;
}
.article-action{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:var(--tx-ink);
  cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.article-action svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.article-action:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
  transform:translateY(-2px);
}
.article-shell{ position:relative; }
.article-shell__grid{ display:grid; gap:2rem; align-items:start; }
.article-toc{
  padding:1.2rem 0 1.4rem;
  border-block:1px solid var(--line-pap);
  display:grid;
  gap:.75rem;
}
.article-toc b{
  color:var(--gold-dk);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.article-toc a{
  color:var(--tx-pap-2);
  font-size:.84rem;
  font-weight:700;
  line-height:1.35;
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.article-toc a:hover{ color:var(--tx-pap); transform:translateX(4px); }
.article-content{
  max-width:850px;
  min-width:0;
}
.article-block{
  padding-block:clamp(2.6rem,6vw,4.4rem);
  border-bottom:1px solid var(--line-pap);
}
.article-lead{
  padding-top:0;
  font-size:clamp(1.08rem,1.8vw,1.35rem);
  line-height:1.72;
}
.article-block:last-child{ border-bottom:0; }
.article-step{
  display:inline-flex;
  margin-bottom:1rem;
  color:var(--gold-dk);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
}
.article-block h2,
.article-faq h2,
.article-cta h2{
  font-family:var(--display);
  color:var(--tx-pap);
  font-size:clamp(1.7rem,3.6vw,3.2rem);
  line-height:1.02;
}
.article-block h3{
  margin-top:1.6rem;
  color:var(--tx-pap);
  font-family:var(--display);
  font-size:clamp(1.15rem,2vw,1.55rem);
  line-height:1.12;
}
.article-block p,
.article-block li,
.article-faq p{
  color:var(--tx-pap-2);
  font-size:.98rem;
  line-height:1.82;
}
.article-block p{ margin-top:1rem; }
.article-block ul{
  margin-top:1rem;
  display:grid;
  gap:.7rem;
}
.article-block li{
  position:relative;
  padding-left:1.35rem;
}
.article-block li::before{
  content:"";
  position:absolute;
  left:0;
  top:.78em;
  width:7px;
  height:7px;
  background:var(--gold);
}
.article-note{
  margin-top:1.6rem;
  padding:1.25rem;
  border-left:3px solid var(--ink);
  background:var(--paper-2);
}
.article-note--gold{
  border-left-color:var(--gold);
  background:rgba(224,167,60,.12);
}
.article-note b{
  color:var(--tx-pap);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.article-note p{ margin-top:.6rem; }
.article-checklist{
  margin-top:1.5rem;
  display:grid;
  gap:.65rem;
}
.article-checklist label{
  min-width:0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.75rem;
  align-items:start;
  padding:1rem;
  border:1px solid var(--line-pap);
  background:var(--paper);
}
.article-checklist input{
  width:18px;
  height:18px;
  margin-top:.18rem;
  accent-color:var(--gold);
}
.article-checklist span{
  color:var(--tx-pap);
  font-size:.92rem;
  font-weight:700;
  line-height:1.45;
}
.article-faq{
  padding-top:clamp(2.6rem,6vw,4.4rem);
}
.article-faq details{
  border-bottom:1px solid var(--line-pap);
  padding:1.25rem 0;
}
.article-faq summary{
  cursor:pointer;
  color:var(--tx-pap);
  font-family:var(--display);
  font-size:1.08rem;
  font-weight:700;
}
.article-faq summary::marker{ color:var(--gold-dk); }
.article-faq p{ max-width:720px; }
.article-author{
  position:relative;
  overflow:hidden;
  margin-top:clamp(2.4rem,5vw,4rem);
  padding:1rem;
  border:1px solid var(--line-pap);
  background:var(--paper);
  display:grid;
  gap:1rem;
  align-items:center;
}
.article-author::before,
.article-author::after{
  content:"";
  position:absolute;
  width:118px;
  height:118px;
  left:1rem;
  top:50%;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.article-author::before{
  border:1px solid rgba(224,167,60,.72);
  transform:translateY(-50%) scale(.72);
}
.article-author::after{
  background:rgba(224,167,60,.14);
  transform:translateY(-50%) scale(.45);
}
.article-author:hover::before{ opacity:1; transform:translateY(-50%) scale(1.18); }
.article-author:hover::after{ opacity:1; transform:translateY(-50%) scale(.92); }
.article-author > *{
  position:relative;
  z-index:1;
}
.article-author img{
  width:100%;
  max-width:118px;
  height:118px;
  border-radius:50%;
  object-fit:cover;
  object-position:center top;
  filter:grayscale(1);
  transition:filter .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.article-author:hover img{
  filter:grayscale(.15);
  transform:scale(1.03);
  box-shadow:0 14px 34px rgba(12,27,49,.14);
}
.article-author span{
  color:var(--gold-dk);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.article-author h2{
  margin-top:.35rem;
  color:var(--tx-pap);
  font-family:var(--display);
  font-size:clamp(1.45rem,2.8vw,2.2rem);
  line-height:1.05;
}
.article-author p{
  max-width:560px;
  margin-top:.75rem;
  color:var(--tx-pap-2);
  font-size:.92rem;
  line-height:1.72;
}
.article-author__socials{
  margin-top:1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.article-author__socials a{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-pap);
  color:var(--tx-pap);
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.article-author__socials a:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--gold);
  transform:translateY(-2px);
}
.article-author__socials svg{
  width:16px;
  height:16px;
  fill:currentColor;
}
.article-cta{
  background:var(--ink);
  color:var(--tx-ink);
  padding-block:clamp(3rem,7vw,5.5rem);
}
.article-cta__inner{
  display:grid;
  gap:1.5rem;
  align-items:center;
}
.article-cta h2{
  max-width:800px;
  margin-top:.8rem;
  color:var(--tx-ink);
}
.article-cta p{
  max-width:650px;
  margin-top:1rem;
  color:var(--tx-ink-2);
  line-height:1.72;
}
@media (min-width:780px){
  .article-hero__grid{ grid-template-columns:minmax(0,1fr) minmax(280px,.38fr); }
  .article-hero__card{ justify-self:end; }
  .article-shell__grid{ grid-template-columns:220px minmax(0,1fr); gap:clamp(2rem,5vw,4rem); }
  .article-toc{ position:sticky; top:calc(var(--bar-h) + 6rem); }
  .article-author{ grid-template-columns:132px minmax(0,1fr); padding:1rem; }
  .article-cta__inner{ grid-template-columns:minmax(0,1fr) auto; }
}
@media (max-width:779px){
  .article-hero{ min-height:0; padding-block:calc(var(--bar-h) + 6.1rem) 3.4rem; }
  .article-hero__copy h1{ max-width:13ch; }
  .article-hero__card{ max-width:none; }
  .article-author::before,
  .article-author::after{ left:1rem; top:1rem; transform:none; }
  .article-author:hover::before{ transform:scale(1.18); }
  .article-author:hover::after{ transform:scale(.92); }
}

@media print{
  @page{ margin:12mm 11mm; }
  html,
  body{ background:#fff !important; color:#111 !important; }
  .js .reveal,
  .js .reveal.in{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .nav,
  .drawer,
  .scroll-rail,
  .contact-widget,
  .scroll-top,
  .cookie-widget,
  .cookie-consent,
  .article-actions,
  .article-toc,
  .article-cta,
  .foot{ display:none !important; }
  .article-hero,
  .article-shell,
  .sec{ padding:0 !important; background:#fff !important; color:#111 !important; }
  .article-hero{ min-height:0 !important; display:block !important; }
  .article-hero::before,
  .article-hero::after{ display:none !important; }
  .article-hero__grid,
  .article-shell__grid{ display:block !important; }
  .article-hero__copy h1{ max-width:none !important; color:#111 !important; font-size:30pt !important; line-height:1.02 !important; }
  .article-hero__copy > p,
  .article-hero__card p,
  .article-block p,
  .article-block li,
  .article-faq p,
  .article-author p{ color:#222 !important; font-size:10.2pt !important; line-height:1.43 !important; }
  .article-hero__copy > p,
  .article-hero__card p,
  .article-block p{ margin-top:7pt !important; }
  .article-meta{ margin-top:8pt !important; gap:4pt 8pt !important; }
  .article-meta span{ font-size:7.5pt !important; }
  .article-hero__card{ margin-top:10pt !important; padding:9pt !important; }
  .article-hero__card,
  .article-note,
  .article-checklist label,
  .article-author{ border:1px solid #ddd !important; background:#fff !important; box-shadow:none !important; }
  .article-block{
    break-inside:avoid;
    page-break-inside:avoid;
    padding-block:13pt !important;
    border-bottom:1px solid #ddd !important;
  }
  .article-lead{ font-size:10.8pt !important; padding-bottom:13pt !important; }
  .article-block h2,
  .article-faq h2{ color:#111 !important; font-size:18pt !important; line-height:1.08 !important; }
  .article-block h3{ margin-top:9pt !important; font-size:13pt !important; }
  .article-block ul{ margin-top:7pt !important; gap:3pt !important; }
  .article-note{ margin-top:9pt !important; padding:8pt !important; }
  .article-checklist{ margin-top:9pt !important; gap:4pt !important; }
  .article-checklist label{ padding:6pt !important; }
  .article-faq{ break-before:auto; page-break-before:auto; }
  .article-faq details{
    display:block !important;
    break-inside:avoid;
    page-break-inside:avoid;
    padding:6pt 0 !important;
  }
  .article-faq summary{ font-size:11.5pt !important; }
  .article-faq details[open] > *:not(summary){
    display:block !important;
  }
  .article-author{
    break-before:auto;
    page-break-before:auto;
    break-inside:avoid;
    page-break-inside:avoid;
    display:grid !important;
    grid-template-columns:82px 1fr !important;
    gap:14pt !important;
    margin-top:14pt !important;
    padding:9pt !important;
    overflow:visible !important;
  }
  .article-author::before,
  .article-author::after,
  .article-author__socials{ display:none !important; }
  .article-author img{
    width:82px !important;
    height:82px !important;
    max-width:82px !important;
    filter:grayscale(1) !important;
    box-shadow:none !important;
    transform:none !important;
  }
}

.foot{
  background:var(--ink);
  border-top:1px solid var(--line-ink);
  padding-block:clamp(3rem, 7vw, 4.5rem) 2rem;
}
.foot__top{ display:grid; gap:2.5rem; }

.foot__logo{ height:42px; width:auto; }

.foot__claim{
  margin-top:1.2rem;
  font-family:var(--display);
  font-weight:600;
  font-size:1.25rem;
  line-height:1.3;
  letter-spacing:-.02em;
  color:var(--tx-ink);
}

.foot__nav{ display:grid; grid-template-columns:1fr 1fr; gap:2rem 1rem; }
.foot__nav > div{ min-width:0; display:flex; flex-direction:column; gap:.55rem; }
.foot-city-links{
  padding-top:.2rem;
}
.foot__nav b{
  font-family:var(--sans);
  font-size:.64rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
  margin-bottom:.25rem;
}
.foot__nav a{
  font-size:.85rem;
  color:var(--tx-ink-2);
  transition:color .25s, transform .25s var(--ease);
}
.foot__nav a[href^="mailto:"]{
  font-size:clamp(.72rem,1.05vw,.85rem);
  white-space:nowrap;
}
.foot__nav a:hover{ color:var(--tx-ink); transform:translateX(3px); }

.foot__socials{
  margin-top:.85rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.foot__social{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-ink);
  border-radius:50%;
  color:var(--tx-ink-2);
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.foot__social svg{ width:16px; height:16px; fill:currentColor; }
.foot__social:hover{
  color:var(--ink);
  background:var(--gold);
  border-color:var(--gold);
  transform:translateY(-3px);
}

.foot__bot{
  margin-top:3rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line-ink);
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between;
  font-family:var(--sans);
  font-size:.66rem;
  color:var(--tx-ink-2);
}
.foot__made{ color:var(--gold); opacity:.7; }

/* ═══════════ MOBILNY PASEK ═══════════ */
.bar{
  position:fixed; bottom:0; left:0; right:0; z-index:98;
  display:flex; gap:1px;
  background:var(--line-ink);
  border-top:1px solid var(--line-ink);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%);
  transition:transform .4s var(--ease);
}
.bar.show{ transform:none; }

.bar__btn{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1.1rem .5rem;
  background:var(--ink-2);
  font-size:.88rem; font-weight:500;
  color:var(--tx-ink);
}
.bar__btn svg{ width:16px; height:16px; fill:currentColor; }
.bar__btn--gold{ background:var(--gold); color:var(--ink); font-weight:600; }
.bar__btn:active{ filter:brightness(1.15); }

/* ═══════════════════════════════════════════
   ≥ 600px — tablet w pionie
   ═══════════════════════════════════════════ */
@media (min-width: 600px){
  .stats__row{ grid-template-columns:repeat(4,1fr); }
  .svc__head{ gap:1.4rem; }
  .cases{ grid-template-columns:1fr 1fr; }
  .foot__nav{ grid-template-columns:1fr 1fr .95fr 1.35fr; }
}

/* ═══════════════════════════════════════════
   ≥ 900px — desktop
   ═══════════════════════════════════════════ */
@media (min-width: 900px){
  .bar{ display:none; }
  .burger{ display:none; }
  .drawer{ display:none !important; }

  .nav__links{
    display:flex; gap:2rem;
    margin-inline:auto;
  }
  .nav__links a{
    position:relative;
    font-size:.86rem;
    color:var(--tx-ink-2);
    padding-block:.3rem;
    transition:color .25s;
  }
  .nav__links a::after{
    content:""; position:absolute; left:0; bottom:0;
    width:100%; height:1px;
    background:var(--gold);
    transform:scaleX(0); transform-origin:right;
    transition:transform .35s var(--ease);
  }
  .nav__links a:hover{ color:var(--tx-ink); }
  .nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
  .nav__dropdown{ position:relative; }
  .nav__dropdown-trigger{ display:inline-flex; align-items:center; }
  .nav__submenu{
    position:absolute;
    top:calc(100% + 1rem);
    left:50%;
    width:260px;
    padding:.65rem;
    display:grid;
    gap:.15rem;
    background:rgba(12,27,49,.97);
    border:1px solid var(--line-ink);
    border-radius:10px;
    box-shadow:0 18px 45px rgba(2,9,18,.35);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,-8px);
    transition:opacity .25s var(--ease), visibility .25s, transform .25s var(--ease);
  }
  .nav__submenu::before{ content:""; position:absolute; left:0; right:0; top:-1.1rem; height:1.1rem; }
  .nav__submenu a{
    padding:.68rem .75rem;
    border-radius:6px;
    color:var(--tx-ink-2);
    font-size:.78rem;
    line-height:1.25;
    transition:background .25s, color .25s, padding-left .25s var(--ease);
  }
  .nav__submenu a::after{ display:none; }
  .nav__submenu a:hover,
  .nav__submenu a:focus-visible{ background:rgba(224,167,60,.1); color:var(--gold-lt); padding-left:1rem; }
  .nav__dropdown:hover .nav__submenu,
  .nav__dropdown:focus-within .nav__submenu{ opacity:1; visibility:visible; transform:translate(-50%,0); }
  .nav .nav__cta{ display:inline-flex; }

  /* dopiero tu hero dostaje pełną wysokość — na telefonie 100svh przy
     portrecie pod przyciskami dałoby absurdalnie długi pierwszy ekran */
  .hero{ min-height:100svh; display:flex; align-items:center; padding-block:6rem 4rem; }
  .hero__inner{ grid-template-columns:minmax(0, .95fr) minmax(500px, 1.05fr); gap:clamp(1.5rem, 3vw, 3.5rem); align-items:center; }
  .hero__fig{ width:min(100%, 570px); justify-self:end; }
  .hero__words{ inset:-3% -17% 3% -13%; }
  .hero__words span{ font-size:clamp(4.5rem, 6.2vw, 6.6rem); }
  .hero__words span:nth-child(1){ top:5%; left:0; }
  .hero__words span:nth-child(2){ top:29%; right:0; }
  .hero__words span:nth-child(3){
    top:82%;
    left:2%;
    font-size:clamp(2.5rem, 3.6vw, 4rem);
  }
  .hero__words span:nth-child(4){
    right:1%;
    bottom:10%;
    font-size:clamp(2.5rem, 3.55vw, 4rem);
  }
  .hero__lead{ font-size:1.25rem; }

  .stat__num{ font-size:2.6rem; }

  .about{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:4.5rem; align-items:start; }
  .facts{ grid-template-columns:repeat(3,1fr); }

  .kt{ grid-template-columns:1fr 1fr; gap:4.5rem; align-items:start; }

  .cta__inner{ grid-template-columns:1fr auto; gap:3rem; }
  .cta__btns{ justify-content:flex-end; }

  .foot__top{ grid-template-columns:.9fr 1.9fr; gap:4rem; }
  .foot__claim{ font-size:1.6rem; }
}

/* ═══════════════════════════════════════════
   ≥ 1200px — szeroki desktop
   ═══════════════════════════════════════════ */
@media (min-width: 1200px){
  .cases{ grid-template-columns:repeat(2,1fr); }
  .case{ padding:3rem 2.6rem; }
  /* stopień .sec__h2 wynika wyłącznie z clamp() w definicji — bez nadpisań,
     żeby skala miała jedno źródło prawdy */
}

/* ── urządzenia dotykowe: bez hoverów, które się „przyklejają" ── */
@media (hover:none){
  .svc__item:hover .svc__head{ padding-left:0; }
  .svc__item:hover .svc__title{ color:inherit; }
  .case:hover{
    transform:none;
    border-color:var(--line-pap);
    box-shadow:0 10px 35px rgba(12,27,49,.045);
  }
  .case:hover::before{ transform:scaleX(.35); }
  .case:hover .case__shot img{ transform:none; }
}

@media (hover:none) and (min-width:800px){
  .svc__item:hover{
    border-color:var(--line-pap);
    box-shadow:none;
  }
  .svc__item:hover .svc__head{ padding-left:1.4rem; }
}

/* ═══════════════════════════════════════════
   PODSTRONA KONTAKT
   ═══════════════════════════════════════════ */
.nav--solid{ background:rgba(12,27,49,.96); border-bottom-color:var(--line-ink); }
.contact-page{ padding-top:104px; }
.contact-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(5rem, 10vw, 9rem) 0;
  border-bottom:1px solid var(--line-ink);
}
.contact-hero::before{
  content:"";
  position:absolute;
  width:420px;
  aspect-ratio:1;
  right:-180px;
  top:8%;
  border:1px solid rgba(224,167,60,.25);
  border-radius:50%;
  pointer-events:none;
}
.contact-hero__grid{ display:grid; gap:clamp(3rem, 7vw, 7rem); align-items:center; }
.contact-hero__copy h1{
  margin-top:1rem;
  max-width:12ch;
  font-family:var(--display);
  font-size:clamp(2.8rem, 8vw, 6.5rem);
  line-height:.98;
  letter-spacing:-.055em;
}
.contact-hero__copy > p{ margin-top:2rem; max-width:58ch; color:var(--tx-ink-2); font-size:clamp(1.02rem, 2vw, 1.18rem); }
.contact-hero__meta{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:.8rem 2rem; color:var(--tx-ink-2); font-size:.78rem; }
.contact-hero__meta b{ color:var(--gold); font-weight:600; }
.contact-direct{ position:relative; padding:clamp(1.4rem, 4vw, 2.2rem); border:1px solid var(--line-ink); background:var(--ink-2); }
.contact-direct__label{ display:block; margin-bottom:1rem; font-size:.65rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--gold); }
.contact-direct a{ position:relative; display:flex; flex-direction:column; padding:1.15rem 2rem 1.15rem 0; border-top:1px solid var(--line-ink); }
.contact-direct small{ color:var(--tx-ink-2); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; }
.contact-direct strong{ margin-top:.2rem; font-size:clamp(.9rem, 2vw, 1.05rem); font-weight:500; word-break:break-word; }
.contact-direct i{ position:absolute; right:0; top:50%; color:var(--gold); font-style:normal; transition:transform .3s var(--ease); }
.contact-direct a:hover i{ transform:translate(3px,-3px); }
.contact-direct > p{ padding-top:1.1rem; border-top:1px solid var(--line-ink); color:var(--tx-ink-2); font-size:.75rem; }
.contact-form-grid{ display:grid; gap:clamp(3rem, 7vw, 7rem); align-items:start; }
.contact-steps{ margin-top:2.5rem; display:grid; gap:0; }
.contact-steps li{ display:grid; grid-template-columns:36px 1fr; gap:1rem; padding:1rem 0; border-top:1px solid var(--line-pap); }
.contact-steps li > span{ color:var(--gold-dk); font-size:.65rem; font-weight:700; }
.contact-steps b{ font-family:var(--display); font-size:.95rem; }
.contact-steps p{ margin-top:.15rem; color:var(--tx-pap-2); font-size:.8rem; }
.form--contact{ border-radius:14px; box-shadow:0 24px 60px rgba(12,27,49,.14); }
.contact-close{ padding:clamp(3rem, 7vw, 5rem) 0; background:var(--ink-2); border-bottom:1px solid var(--line-ink); }
.contact-close__inner{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem 2rem; }
.contact-close p{ color:var(--tx-ink-2); }
.contact-close a{ font-family:var(--display); font-size:clamp(1.1rem, 3vw, 1.8rem); font-weight:700; color:var(--gold); word-break:break-word; }
.contact-close a span{ display:inline-block; transition:transform .3s var(--ease); }
.contact-close a:hover span{ transform:translate(3px,-3px); }

@media (min-width:900px){
  .contact-hero__grid{ grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr); }
  .contact-form-grid{ grid-template-columns:minmax(0,.85fr) minmax(420px,1.15fr); }
}

@media (max-width:599px){
  .contact-page{ padding-top:108px; }
  .contact-hero::before{ display:none; }
}

/* ═══════════════════════════════════════════
   PODSTRONA O MNIE
   ═══════════════════════════════════════════ */
.about-page{ padding-top:104px; }
.about-hero{ position:relative; overflow:hidden; padding:clamp(4.5rem,9vw,8rem) 0; }
.about-hero__grid{ display:grid; gap:clamp(3rem,7vw,7rem); align-items:center; }
.about-hero__copy h1{ margin-top:1rem; font-family:var(--display); font-size:clamp(3.4rem,10vw,7.5rem); line-height:.83; letter-spacing:-.07em; }
.about-hero__lead{ margin-top:2.2rem; max-width:49ch; color:var(--tx-ink-2); font-size:clamp(1.05rem,2vw,1.25rem); }
.about-hero__tags{
  margin-top:2rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem .8rem;
}
.about-hero__tags span{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  color:var(--tx-ink-2);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.about-hero__tags span + span::before{
  content:"";
  width:4px;
  height:4px;
  flex:none;
  border-radius:50%;
  background:var(--gold);
}
.about-portrait{ position:relative; width:min(100%,500px); margin:0 auto; }
.about-portrait__frame{ position:absolute; inset:4% -5% 10% 7%; border:1px solid rgba(224,167,60,.48); border-radius:48% 52% 24% 30% / 28% 30% 16% 18%; transform:rotate(4deg); }
.about-portrait img{ position:relative; width:100%; aspect-ratio:680/735; object-fit:cover; border-radius:48% 52% 24% 30% / 25% 29% 14% 18%; filter:grayscale(1) contrast(1.05); }
.about-portrait figcaption{ position:relative; margin-top:1rem; padding-top:.9rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem 1rem; border-top:1px solid var(--line-ink); font-size:.75rem; color:var(--tx-ink-2); }
.about-portrait figcaption b{ color:var(--gold); }
.story__grid{ display:grid; gap:clamp(2.5rem,7vw,6rem); }
.story__copy{ max-width:65ch; font-size:clamp(1rem,2vw,1.12rem); color:var(--tx-pap-2); }
.story__copy p + p{ margin-top:1.4rem; }
.about-numbers{ padding-block:clamp(3rem,7vw,5rem); }
.about-numbers__grid{ display:grid; gap:1px; background:var(--line-ink); border:1px solid var(--line-ink); }
.about-numbers__grid div{ padding:2rem 1.2rem; display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--ink-2); }
.about-numbers strong{ font-family:var(--display); font-size:clamp(2.5rem,7vw,4.8rem); line-height:1; color:var(--gold); letter-spacing:-.05em; }
.about-numbers span{ margin-top:.55rem; max-width:20ch; color:var(--tx-ink-2); font-size:.78rem; }
.principles__grid{ display:grid; gap:1rem; }
.principle{ position:relative; min-height:245px; padding:clamp(1.4rem,3vw,2rem); border:1px solid var(--line-pap); border-radius:14px; background:var(--paper); transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
.principle > span{ font-size:.65rem; font-weight:700; color:var(--gold-dk); }
.principle h3{ margin-top:3rem; font-family:var(--display); font-size:clamp(1.25rem,2.5vw,1.6rem); line-height:1.15; }
.principle p{ margin-top:.8rem; color:var(--tx-pap-2); font-size:.88rem; }
@media (hover:hover){
  .principle:hover{ transform:translateY(-5px); background:var(--ink-2); color:var(--tx-ink); box-shadow:0 20px 45px rgba(12,27,49,.14); }
  .principle:hover p{ color:var(--tx-ink-2); }
  .principle:hover > span{ color:var(--gold); }
}
.about-cta{ padding:clamp(4rem,8vw,7rem) 0; background:var(--ink-2); border-block:1px solid var(--line-ink); }
.about-cta__inner{ display:grid; gap:2rem; align-items:end; }
.about-cta h2{ margin-top:.8rem; max-width:19ch; font-family:var(--display); font-size:clamp(2rem,5vw,4rem); line-height:1.05; letter-spacing:-.045em; }
.about-cta .btn{ justify-self:start; }

@media (min-width:700px){
  .about-numbers__grid{ grid-template-columns:repeat(3,1fr); }
  .principles__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:900px){
  .about-hero__grid{ grid-template-columns:minmax(0,1fr) minmax(430px,.82fr); }
  .story__grid{ grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); }
  .about-cta__inner{ grid-template-columns:1fr auto; }
  .about-cta .btn{ justify-self:end; }
}
@media (max-width:599px){ .about-page{ padding-top:108px; } }

/* ═══════════════════════════════════════════
   SZABLON PODSTRONY USŁUGI
   ═══════════════════════════════════════════ */
.service-page{ padding-top:104px; }
.service-hero{ position:relative; overflow:hidden; padding:clamp(5rem,10vw,9rem) 0; }
.service-hero__word{
  position:absolute;
  z-index:0;
  right:-.04em;
  bottom:-.08em;
  font-family:var(--display);
  font-size:clamp(5rem,14vw,13rem);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.07em;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(224,167,60,.28);
  cursor:default;
  user-select:none;
  transition:color .45s var(--ease), -webkit-text-stroke-color .45s var(--ease), text-shadow .45s var(--ease);
}
@media (hover:hover){
  .service-hero__word:hover{
    color:rgba(224,167,60,.16);
    -webkit-text-stroke-color:rgba(224,167,60,.72);
    text-shadow:0 12px 40px rgba(4,12,24,.2);
  }
}
.service-hero__grid{ position:relative; z-index:1; display:grid; gap:clamp(3rem,8vw,8rem); align-items:center; }
.service-hero__copy h1{ margin-top:1rem; max-width:13ch; font-family:var(--display); font-size:clamp(2.8rem,7.6vw,6.2rem); line-height:.98; letter-spacing:-.06em; }
.service-hero__copy > p{ margin-top:2rem; max-width:61ch; color:var(--tx-ink-2); font-size:clamp(1.02rem,2vw,1.2rem); }
.service-hero__actions{ margin-top:2.5rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; }
.service-text-link{ color:var(--tx-ink-2); font-size:.8rem; transition:color .25s; }
.service-text-link:hover{ color:var(--gold); }
.service-hero__aside{ padding:clamp(1.5rem,4vw,2.3rem); background:var(--ink-2); border-top:3px solid var(--gold); }
.service-hero__aside > span{ font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.service-hero__aside ul{ margin-top:1.3rem; display:grid; gap:.8rem; }
.service-hero__aside li{ position:relative; padding-left:1.1rem; color:var(--tx-ink-2); font-size:.85rem; }
.service-hero__aside li::before{ content:""; position:absolute; left:0; top:.7em; width:4px; height:4px; border-radius:50%; background:var(--gold); }
.service-hero__aside > div{ margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--line-ink); display:flex; flex-direction:column; }
.service-hero__aside small{ color:var(--tx-ink-2); font-size:.65rem; }
.service-hero__aside strong{ margin-top:.35rem; font-family:var(--display); font-size:1.15rem; line-height:1.3; }
.service-benefits{ border-block:1px solid var(--line-ink); background:var(--ink-2); }
.service-benefits__grid{ display:grid; gap:1px; background:var(--line-ink); }
.service-benefits__grid > div{ padding:1.7rem 1.2rem; background:var(--ink-2); }
.service-benefits span{ font-size:.62rem; color:var(--gold); }
.service-benefits b{ display:block; margin-top:.5rem; font-family:var(--display); font-size:1.05rem; }
.service-benefits p{ margin-top:.2rem; color:var(--tx-ink-2); font-size:.75rem; }
.service-scope{ display:grid; gap:1rem; }
.service-scope article{ min-height:260px; padding:clamp(1.4rem,3vw,2rem); border:1px solid var(--line-pap); border-radius:14px; transition:transform .35s var(--ease), background .35s, color .35s; }
.service-scope article > span{ color:var(--gold-dk); font-size:.65rem; font-weight:700; }
.service-scope h3{ margin-top:3.2rem; font-family:var(--display); font-size:1.4rem; }
.service-scope p{ margin-top:.75rem; color:var(--tx-pap-2); font-size:.88rem; }
@media (hover:hover){ .service-scope article:hover{ transform:translateY(-5px); background:var(--ink-2); color:var(--tx-ink); }.service-scope article:hover p{ color:var(--tx-ink-2); }.service-scope article:hover > span{ color:var(--gold); } }
.service-process__grid{ display:grid; gap:clamp(3rem,8vw,7rem); }
.service-process__list{ border-top:1px solid var(--line-ink); }
.service-process__list li{ display:grid; grid-template-columns:36px 1fr; gap:1rem; padding:1.25rem 0; border-bottom:1px solid var(--line-ink); }
.service-process__list li > span{ color:var(--gold); font-size:.65rem; font-weight:700; }
.service-process__list b{ font-family:var(--display); }
.service-process__list p{ margin-top:.25rem; color:var(--tx-ink-2); font-size:.83rem; }
.service-faq-section{ padding-top:clamp(4rem,9vw,8rem); }

/* Oś czasu efektów Local SEO */
.seo-timeline__head{ max-width:none; margin-inline:0; text-align:left; }
.seo-timeline__head .sec__sub{ margin-inline:0; }
.seo-milestones{
  margin-top:clamp(2.5rem,6vw,4.5rem);
  display:grid;
  gap:1px;
  overflow:hidden;
  background:var(--line-pap);
  border:1px solid var(--line-pap);
  border-radius:14px;
}
.seo-milestones > div{
  min-height:145px;
  padding:1.4rem 1.1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--paper-2);
}
.seo-milestones strong{
  font-family:var(--display);
  font-size:clamp(1.45rem,3vw,2rem);
  line-height:1;
  letter-spacing:-.035em;
  color:var(--gold-dk);
}
.seo-milestones span{ margin-top:.65rem; max-width:24ch; color:var(--tx-pap-2); font-size:.75rem; line-height:1.45; }
.seo-phases{ margin-top:clamp(2rem,5vw,3.5rem); display:grid; gap:.75rem; }
.seo-phase{
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line-pap);
  border-radius:10px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.seo-phase summary{
  min-height:74px;
  padding:1rem 1.2rem;
  display:grid;
  grid-template-columns:34px 1fr auto 18px;
  align-items:center;
  gap:.7rem 1rem;
  cursor:pointer;
  list-style:none;
}
.seo-phase summary::-webkit-details-marker{ display:none; }
.seo-phase__no{ font-family:var(--display); font-size:.72rem; font-weight:700; color:var(--gold-dk); }
.seo-phase summary b{ font-family:var(--display); font-size:clamp(.95rem,2vw,1.1rem); line-height:1.25; }
.seo-phase summary em{ padding:.32rem .6rem; border-radius:999px; background:var(--paper-2); color:var(--tx-pap-2); font-size:.62rem; font-style:normal; font-weight:600; white-space:nowrap; }
.seo-phase summary i{ position:relative; width:16px; height:16px; }
.seo-phase summary i::before,.seo-phase summary i::after{ content:""; position:absolute; top:50%; left:50%; background:var(--tx-pap); transform:translate(-50%,-50%); transition:transform .3s var(--ease), background .3s; }
.seo-phase summary i::before{ width:12px; height:1.5px; }
.seo-phase summary i::after{ width:1.5px; height:12px; }
.seo-phase[open]{ background:#f8f6f1; border-color:rgba(138,95,18,.3); box-shadow:0 12px 30px rgba(12,27,49,.055); }
.seo-phase[open] summary i::after{ transform:translate(-50%,-50%) rotate(90deg); }
.seo-phase[open] summary i::before,.seo-phase[open] summary i::after{ background:var(--gold-dk); }
.seo-phase__body{ padding:0 1.2rem 1.25rem 4.25rem; }
.seo-phase__body p{ max-width:76ch; color:var(--tx-pap-2); font-size:.86rem; }
.seo-timeline__note{ margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--line-pap); color:var(--tx-pap-2); font-size:.7rem; text-align:center; }
@media (hover:hover){ .seo-phase:hover{ border-color:rgba(138,95,18,.28); }.seo-phase summary:hover b{ color:var(--gold-dk); } }
@media (min-width:700px){ .seo-milestones{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:599px){
  .seo-phase summary{ grid-template-columns:28px 1fr 16px; }
  .seo-phase summary em{ grid-column:2; grid-row:2; justify-self:start; }
  .seo-phase summary i{ grid-column:3; grid-row:1 / span 2; }
  .seo-phase__body{ padding-left:3.95rem; }
}
.local-city-hub__grid{
  display:grid;
  gap:clamp(2.5rem,7vw,6rem);
  align-items:center;
}
.local-city-hub__copy .sec__sub{
  margin-inline:0;
  max-width:58ch;
}
.local-city-hub__actions{
  margin-top:2rem;
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
}
.local-city-hub__actions .btn{
  margin-top:0;
}
.local-city-hub__actions .btn--ghost{
  border-color:rgba(12,27,49,.22);
  color:var(--tx-pap);
}
.local-city-hub__actions .btn--ghost:hover{
  border-color:var(--gold-dk);
  color:var(--gold-dk);
}
.poland-map{
  position:relative;
  overflow:hidden;
  background:transparent;
}
.poland-map__svg{
  width:100%;
  height:auto;
  display:block;
  padding:clamp(2rem,4vw,3rem);
}
.poland-map__region{
  fill:rgba(224,167,60,.1);
  stroke:rgba(138,95,18,.52);
  stroke-width:1.4;
  transition:fill .2s var(--ease), stroke .2s var(--ease), filter .2s var(--ease);
}
.poland-map__region:hover,
.poland-map__region:focus-visible{
  fill:rgba(224,167,60,.32);
  stroke:rgba(138,95,18,.85);
  outline:none;
}
.poland-map__region--active{
  fill:rgba(224,167,60,.45);
  stroke:var(--gold-dk);
  filter:drop-shadow(0 8px 16px rgba(138,95,18,.22));
}
.poland-map__city circle{
  fill:var(--tx-pap-2);
  stroke:var(--paper-2);
  stroke-width:3;
  filter:drop-shadow(0 4px 8px rgba(12,27,49,.18));
}
.poland-map__city text{
  fill:var(--tx-pap);
  font-family:var(--sans);
  font-size:18px;
  font-weight:800;
  paint-order:stroke;
  stroke:var(--paper-2);
  stroke-width:7px;
  stroke-linejoin:round;
}
.poland-map__city--left text{
  text-anchor:end;
}
.poland-map__city--active circle{
  fill:var(--gold);
  stroke:var(--ink);
  stroke-width:4;
  filter:drop-shadow(0 0 12px rgba(224,167,60,.55));
}
.poland-map__city--active text{
  fill:var(--gold-dk);
}
.poland-map__city--active:hover text{
  fill:var(--ink);
}
@media (min-width:900px){
  .local-city-hub__grid{
    grid-template-columns:minmax(0,.85fr) minmax(420px,1.15fr);
  }
}
@media (max-width:599px){
  .poland-map{ overflow-x:auto; }
  .poland-map__svg{ width:620px; max-width:none; }
  .poland-map__city text{ font-size:16px; }
}
.service-contact__grid{ display:grid; gap:clamp(3rem,8vw,7rem); align-items:start; }
.service-contact__points{ margin-top:2.2rem; display:grid; gap:.75rem; }
.service-contact__points li{ position:relative; padding-left:1.25rem; color:var(--tx-ink-2); font-size:.84rem; }
.service-contact__points li::before{ content:""; position:absolute; left:0; top:.65em; width:5px; height:5px; border-radius:50%; background:var(--gold); }
@media (min-width:700px){ .service-benefits__grid{ grid-template-columns:repeat(3,1fr); }.service-scope{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .service-hero__grid{ grid-template-columns:minmax(0,1.2fr) minmax(350px,.8fr); }.service-process__grid{ grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); }.service-contact__grid{ grid-template-columns:minmax(0,.85fr) minmax(440px,1.15fr); }.service-contact__copy{ position:sticky; top:9rem; } }
@media (max-width:599px){ .service-page{ padding-top:108px; }.service-hero__word{ display:none; } }

/* Lokalne podstrony SEO */
.city-areas__panel{
  overflow:hidden;
  background:var(--ink-2);
  border:1px solid var(--line-ink);
  border-top:3px solid var(--gold);
  box-shadow:0 22px 60px rgba(0,0,0,.12);
}
.city-areas__intro{
  padding:clamp(1.25rem,3vw,1.8rem);
  border-bottom:1px solid var(--line-ink);
}
.city-areas__intro span{
  display:block;
  color:var(--tx-ink-2);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.city-areas__intro p{
  margin-top:.9rem;
  max-width:58ch;
  color:var(--tx-ink-2);
  font-size:.88rem;
  line-height:1.55;
}
.city-areas__routes{
  display:grid;
  counter-reset:area;
}
.city-areas__routes article{
  position:relative;
  counter-increment:area;
  padding:1.15rem 1.25rem 1.15rem 4.2rem;
  border-bottom:1px solid var(--line-ink);
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.city-areas__routes article:last-child{
  border-bottom:0;
}
.city-areas__routes article::before{
  content:counter(area, decimal-leading-zero);
  position:absolute;
  left:1.25rem;
  top:1.25rem;
  color:var(--gold);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.08em;
}
.city-areas__routes article::after{
  content:"";
  position:absolute;
  left:3rem;
  top:1.2rem;
  bottom:1.2rem;
  width:1px;
  background:var(--line-ink);
}
.city-areas__routes b{
  display:block;
  color:var(--tx-ink);
  font-family:var(--display);
  font-size:clamp(1rem,2vw,1.18rem);
  line-height:1.2;
}
.city-areas__routes p{
  margin-top:.4rem;
  color:var(--tx-ink-2);
  font-size:.8rem;
  line-height:1.45;
}
@media (hover:hover){
  .city-areas__routes article:hover{
    padding-left:4.45rem;
    background:rgba(224,167,60,.06);
  }
}

/* Platformy AI pod hero GEO */
.ai-platforms{ overflow:hidden; padding:1.5rem 0 1.8rem; background:var(--paper); border-block:1px solid var(--line-pap); }
.ai-platforms__label{ margin-bottom:1.25rem; color:var(--tx-pap-2); font-size:.68rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; }
.ai-platforms__marquee{ position:relative; overflow:hidden; }
.ai-platforms__marquee::before,.ai-platforms__marquee::after{ content:""; position:absolute; z-index:2; top:0; bottom:0; width:clamp(35px,9vw,150px); pointer-events:none; }
.ai-platforms__marquee::before{ left:0; background:linear-gradient(90deg,var(--paper),transparent); }
.ai-platforms__marquee::after{ right:0; background:linear-gradient(-90deg,var(--paper),transparent); }
.ai-platforms__track{ display:flex; width:max-content; animation:ai-platforms-scroll 24s linear infinite; }
.ai-platforms__group{ display:flex; align-items:center; gap:clamp(1.2rem,3vw,2.5rem); padding-right:clamp(1.2rem,3vw,2.5rem); }
.ai-platform{ width:240px; height:76px; flex:0 0 240px; display:grid; place-items:center; }
.ai-platform img{ display:block; width:210px; height:64px; object-fit:contain; filter:grayscale(1); opacity:.48; mix-blend-mode:multiply; transition:filter .35s var(--ease),opacity .35s var(--ease),transform .35s var(--ease); }
@keyframes ai-platforms-scroll{ to{ transform:translateX(-50%); } }
@media (hover:hover){
  .ai-platforms__marquee:hover .ai-platforms__track{ animation-play-state:paused; }
  .ai-platform:hover img{ filter:grayscale(0); opacity:1; transform:scale(1.06); }
}
@media (prefers-reduced-motion:reduce){ .ai-platforms__track{ animation:none; } }
@media (max-width:599px){ .ai-platforms{ padding-block:1.25rem; }.ai-platform{ width:190px; height:68px; flex-basis:190px; }.ai-platform img{ width:170px; height:56px; } }

/* Jasne przejście między logotypami a korzyściami na stronie GEO */
.geo-page .service-benefits{ padding:clamp(1.5rem,3vw,2.4rem) 0; border-block:0; background:var(--paper); }
.geo-page .service-benefits__grid{ gap:clamp(.8rem,2vw,1.2rem); background:transparent; }
.geo-page .service-benefits__grid > div{ position:relative; padding:1.5rem 1.25rem 1.4rem; background:var(--paper-2); border-top:2px solid rgba(224,167,60,.7); }
.geo-page .service-benefits span{ color:var(--gold-dk); }
.geo-page .service-benefits b{ color:var(--tx-pap); }
.geo-page .service-benefits p{ color:var(--tx-pap-2); }

/* Realizacje na podstronie Strony internetowe */
.web-projects{ overflow:hidden; background:var(--paper-2); }
.web-projects__head{ margin-bottom:clamp(2.2rem,5vw,4rem); display:grid; gap:1.5rem; align-items:end; }
.web-projects__head h2{ max-width:16ch; }
.web-projects__head > p{ max-width:55ch; color:var(--tx-pap-2); font-size:.88rem; }
.web-projects__grid{ display:grid; gap:clamp(1rem,2.2vw,1.6rem); }
.web-project{ overflow:hidden; background:var(--paper); box-shadow:0 18px 50px rgba(12,27,49,.08); transition:transform .35s var(--ease),box-shadow .35s var(--ease); }
.web-project__screen{ position:relative; height:clamp(330px,42vw,520px); overflow:hidden; background:#ece9e2; }
.web-project__screen::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(12,27,49,.06); pointer-events:none; }
.web-project__screen img{ width:100%; height:135%; display:block; object-fit:cover; object-position:top center; transition:object-position 2.8s var(--ease),transform .5s var(--ease); }
.web-project__body{ padding:1.2rem 1.25rem 1.35rem; color:var(--tx-pap); }
.web-project__body > span{ color:var(--gold-dk); font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.web-project__body h3{ margin-top:.38rem; color:var(--tx-pap); font-family:var(--display); font-size:clamp(1.05rem,2vw,1.25rem); font-weight:700; }
.web-project__body a{ margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line-pap); display:flex; justify-content:space-between; align-items:center; color:var(--tx-pap); font-size:.76rem; font-weight:700; }
.web-project__body a i{ color:var(--gold-dk); font-style:normal; transition:transform .3s var(--ease); }
@media (hover:hover){
  .web-project:hover{ transform:translateY(-7px); box-shadow:0 26px 65px rgba(12,27,49,.13); }
  .web-project:hover .web-project__screen img{ object-position:bottom center; transform:scale(1.015); }
  .web-project__body a:hover{ color:var(--gold-dk); }
  .web-project__body a:hover i{ transform:translate(3px,-3px); }
}
@media (min-width:700px){ .web-projects__head{ grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); }.web-projects__grid{ grid-template-columns:repeat(3,1fr); }.web-project__screen{ height:clamp(360px,38vw,520px); } }
@media (max-width:699px){ .web-projects__grid{ grid-auto-flow:column; grid-auto-columns:minmax(82vw,1fr); overflow-x:auto; padding:0 0 1rem; scroll-snap-type:x mandatory; }.web-project{ scroll-snap-align:start; }.web-project__screen{ height:420px; } }

/* ═══════════ STRONA 404 ═══════════ */
.error-page{ padding-top:104px; }
.error-hero{ position:relative; min-height:calc(100svh - 104px); display:flex; align-items:center; overflow:hidden; padding:clamp(5rem,10vw,9rem) 0; }
.error-hero__inner{ position:relative; z-index:1; }
.error-hero__code{ position:absolute; z-index:-1; left:-.06em; top:50%; transform:translateY(-54%); font-family:var(--display); font-size:clamp(13rem,35vw,34rem); font-weight:700; line-height:.8; letter-spacing:-.1em; color:transparent; -webkit-text-stroke:1px rgba(224,167,60,.16); user-select:none; }
.error-hero h1{ margin-top:1rem; max-width:11ch; font-family:var(--display); font-size:clamp(3rem,8vw,6.8rem); line-height:.95; letter-spacing:-.06em; }
.error-hero p{ margin-top:2rem; max-width:55ch; color:var(--tx-ink-2); font-size:clamp(1rem,2vw,1.15rem); }
.error-hero__actions{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:.8rem; }
.error-links{ padding:clamp(2.5rem,6vw,4rem) 0; background:var(--ink-2); border-block:1px solid var(--line-ink); }
.error-links p{ margin-bottom:1rem; color:var(--tx-ink-2); font-size:.75rem; }
.error-links nav{ display:grid; gap:1px; background:var(--line-ink); border:1px solid var(--line-ink); }
.error-links a{ padding:1.15rem; display:flex; align-items:center; gap:1rem; background:var(--ink-2); font-family:var(--display); font-weight:600; transition:background .25s,color .25s,padding-left .25s var(--ease); }
.error-links a span{ color:var(--gold); font-family:var(--sans); font-size:.62rem; }
.error-links a:hover{ padding-left:1.45rem; background:var(--ink); color:var(--gold-lt); }
@media (min-width:700px){ .error-links nav{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:599px){ .error-page{ padding-top:108px; }.error-hero__code{ opacity:.65; } }

/* Podstrona Projekty */
.projects-page .service-hero__grid{
  grid-template-columns:1fr;
}
.projects-list{
  max-width:1020px;
  margin:0 auto;
  grid-template-columns:1fr;
}
.projects-list .case{
  width:100%;
}
.project-view{
  position:absolute;
  z-index:2;
  right:0;
  top:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:48px;
  padding:.95rem 1.15rem;
  background:var(--gold);
  color:var(--ink);
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.07em;
  line-height:1;
  text-transform:uppercase;
  box-shadow:0 14px 34px rgba(138,95,18,.24);
  transform:translate(104%,-50%);
  transition:transform .42s var(--ease), background .25s, color .25s;
}
.project-view span{
  font-size:.9rem;
  line-height:1;
  transition:transform .25s var(--ease);
}
.projects-list .case:hover .project-view,
.projects-list .case:focus-within .project-view{
  transform:translate(0,-50%);
}
.project-view:hover{
  background:var(--ink);
  color:var(--gold-lt);
}
.project-view:hover span{
  transform:translate(2px,-2px);
}
@media (min-width:800px){
  .projects-list .case{
    display:grid;
    grid-template-columns:minmax(240px,360px) minmax(0,1fr);
    grid-template-areas:
      "shot top"
      "shot txt"
      "shot res";
    gap:0 2rem;
    align-items:start;
    padding-right:clamp(5.4rem,10vw,8.4rem);
  }
  .projects-list .case__shot{
    grid-area:shot;
    margin:0;
    min-height:230px;
  }
  .projects-list .case__top{ grid-area:top; padding-right:5.5rem; }
  .projects-list .case__txt{ grid-area:txt; max-width:none; }
  .projects-list .case__res{ grid-area:res; }
}
@media (min-width:900px){
  .projects-page .service-hero__grid{
    grid-template-columns:minmax(0,1.2fr) minmax(350px,.8fr);
  }
}
@media (hover:none){
  .projects-list .project-view{
    position:static;
    width:max-content;
    margin-top:1.1rem;
    transform:none;
  }
}
@media (hover:none) and (min-width:800px){
  .projects-list .project-view{
    grid-column:2;
  }
}

/* Podstrona pojedynczej realizacji */
.case-study-page{
  background:var(--paper);
}
.case-study-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(7rem,14vw,12rem) 0 clamp(4rem,8vw,7rem);
  background:var(--ink);
  color:var(--tx-ink);
}
.case-study-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(224,167,60,.1) 1px, transparent 1px),
    linear-gradient(0deg, rgba(224,167,60,.08) 1px, transparent 1px);
  background-size:72px 72px;
  opacity:.22;
  pointer-events:none;
}
.case-study-hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  gap:clamp(3rem,8vw,7rem);
  align-items:center;
}
.case-study-hero__copy h1{
  margin-top:1rem;
  max-width:12ch;
  font-family:var(--display);
  font-size:clamp(2.45rem,6vw,4.9rem);
  line-height:.95;
  letter-spacing:-.06em;
}
.case-study-hero__copy p{
  margin-top:2rem;
  max-width:61ch;
  color:var(--tx-ink-2);
  font-size:clamp(1rem,2vw,1.18rem);
}
.case-study-hero__actions{
  margin-top:2.4rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.5rem;
}
.company-card{
  padding:clamp(1.5rem,4vw,2.4rem);
  background:var(--ink-2);
  border:1px solid var(--line-ink);
  border-top:3px solid var(--gold);
}
.company-card__logo{
  width:180px;
  min-height:82px;
  display:grid;
  place-items:center;
}
.company-card__logo img{
  width:100%;
  max-width:150px;
  height:auto;
  display:block;
  object-fit:contain;
}
.company-card h2{
  margin-top:1.5rem;
  font-family:var(--display);
  font-size:clamp(1.6rem,3vw,2.2rem);
  letter-spacing:-.04em;
}
.company-card p{
  margin-top:.75rem;
  color:var(--tx-ink-2);
  font-size:.9rem;
}
.company-card dl{
  margin-top:1.6rem;
  display:grid;
  gap:1px;
  background:var(--line-ink);
}
.company-card dl div{
  padding:.95rem 0;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  background:var(--ink-2);
}
.company-card dt{
  color:var(--tx-ink-2);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.company-card dd{
  color:var(--gold-lt);
  font-size:.78rem;
  font-weight:700;
  text-align:right;
}
.case-study-results{
  padding:clamp(2.2rem,5vw,3.5rem) 0;
  background:var(--ink-2);
  border-block:1px solid var(--line-ink);
}
.case-study-results__grid{
  display:grid;
  gap:1px;
  background:var(--line-ink);
  border:1px solid var(--line-ink);
}
.case-study-results article{
  min-height:170px;
  padding:clamp(1.35rem,3vw,2rem);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--ink-2);
}
.case-study-results__num{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.4rem,6vw,4rem);
  line-height:.95;
  letter-spacing:-.055em;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.case-study-results article span{
  max-width:22ch;
  color:var(--tx-ink-2);
  font-size:.82rem;
  line-height:1.4;
}
.case-study-shot figcaption span,
.case-study-proof figcaption span{
  color:var(--gold-dk);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.08em;
}
.case-study-media{
  padding-top:clamp(2.5rem,5vw,4rem);
}
.case-study-media__rows{
  display:grid;
  gap:clamp(1.5rem,3vw,2.25rem);
}
.case-study-media__row{
  display:grid;
  gap:clamp(.8rem,1.7vw,1.2rem);
}
.case-study-shot,
.case-study-proof{
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line-pap);
  border-radius:10px;
  box-shadow:0 10px 28px rgba(12,27,49,.055);
}
.case-study-shot img{
  width:100%;
  aspect-ratio:4 / 3;
  display:block;
  object-fit:contain;
  background:linear-gradient(145deg,#f7f8fa,var(--paper-2));
  padding:clamp(.75rem,2vw,1.25rem);
}
.case-study-shot figcaption,
.case-study-proof figcaption{
  padding:.8rem 1rem .9rem;
  display:flex;
  align-items:center;
  gap:.8rem;
  color:var(--tx-pap);
  font-size:.78rem;
  font-weight:700;
}
.case-study-proof__screen{
  min-height:clamp(230px,28vw,340px);
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#f7f8fa,var(--paper-2));
  overflow:hidden;
}
.case-study-proof__screen img{
  width:100%;
  height:100%;
  min-height:clamp(230px,28vw,340px);
  display:block;
  object-fit:cover;
  object-position:top center;
}
.case-study-proof__screen--empty{
  min-height:clamp(230px,28vw,340px);
}
.case-study-work__grid{
  display:grid;
  gap:clamp(3rem,8vw,7rem);
}
@media (min-width:700px){
  .case-study-results__grid{
    grid-template-columns:repeat(4,1fr);
  }
  .case-study-media__row--site{
    grid-template-columns:repeat(4,1fr);
  }
  .case-study-media__row--proof{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (min-width:900px){
  .case-study-hero__grid{
    grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
  }
  .case-study-work__grid{
    grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);
  }
}
@media (max-width:599px){
  .case-study-hero{
    padding-top:8rem;
  }
  .company-card dl div{
    display:block;
  }
  .company-card dd{
    margin-top:.35rem;
    text-align:left;
  }
}