/* projekty-logo.com.pl – style główne (mobile first, natywny CSS) */
@layer reset, tokens, base, layout, components, sections, utilities;

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Kąt obrotu ramki pakietu „Polecany” */
@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Płynne przejścia między podstronami (View Transitions) */
@view-transition { navigation: auto; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, picture, svg { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  fieldset { border: 0; padding: 0; min-inline-size: 0; }
  p { overflow-wrap: break-word; }
}

@layer tokens {
  :root {
    /* Kolory: neutralny grafit + pomarańcz z logo S 90 */
    --bg: #f3f3f4;
    --surface: #fbfbfb;
    --surface-2: #e8e8eb;
    --ink: #151518;
    --ink-2: #3a3a41;
    --muted: #5c5c65;
    --line: #dadade;
    --accent: #f5821f;
    --accent-hover: #ff9638;
    --accent-text: #a84b06;
    --on-accent: #151518;
    --feat-bg: #151518;
    --feat-ink: #f3f3f4;
    --feat-muted: #b4b4bc;
    --tile: #fdfdfd;
    --dots: rgb(21 21 24 / .16);
    --glow: rgb(245 130 31 / .16);
    --shadow: 0 1px 2px rgb(21 21 24 / .06), 0 14px 36px -14px rgb(21 21 24 / .22);
    --shadow-lg: 0 2px 4px rgb(21 21 24 / .06), 0 30px 60px -24px rgb(21 21 24 / .35);
    --grain: .035;

    /* Kształty: przyciski pill, karty 20px, pola 12px */
    --r-card: 20px;
    --r-field: 12px;
    --r-img: 18px;

    --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --font-body: "Geist", "Segoe UI", system-ui, sans-serif;

    --gutter: clamp(16px, 4vw, 40px);
    --max: 1360px;
    --header-h: 64px;
    --header-top: 12px;
    --section-y: clamp(72px, 10vw, 144px);
    --ease: cubic-bezier(.16, 1, .3, 1);
    --spring: cubic-bezier(.34, 1.56, .64, 1);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #111114;
      --surface: #19191d;
      --surface-2: #232328;
      --ink: #f2f2f3;
      --ink-2: #d4d4d8;
      --muted: #a3a3ad;
      --line: #2c2c33;
      --accent-text: #f9a35b;
      --feat-bg: #1f1f24;
      --feat-ink: #f2f2f3;
      --feat-muted: #a3a3ad;
      --tile: #ececef;
      --dots: rgb(255 255 255 / .12);
      --glow: rgb(245 130 31 / .14);
      --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 16px 40px -16px rgb(0 0 0 / .6);
      --shadow-lg: 0 2px 4px rgb(0 0 0 / .3), 0 34px 70px -24px rgb(0 0 0 / .75);
      --grain: .05;
    }
  }
}

@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--header-top) + 24px); }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-block-end: 76px;
    overflow-x: clip;
  }
  @media (min-width: 1024px) { body { padding-block-end: 0; } }

  /* Ziarno – tylko na nieruchomym pseudoelemencie */
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: var(--grain);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
  a:hover { color: var(--accent-text); }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
  ::selection { background: var(--accent); color: var(--on-accent); }

  .icon { inline-size: 1.15em; block-size: 1.15em; flex: none; }
  .icon--sm { inline-size: .9em; block-size: .9em; }

  .skip {
    position: absolute; inset-inline-start: 16px; inset-block-start: -100px; z-index: 100;
    background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px;
  }
  .skip:focus { inset-block-start: 12px; color: var(--bg); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}

@layer layout {
  .wrap { inline-size: 100%; max-inline-size: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
  .section { padding-block: var(--section-y); }
  .section__head { margin-block-end: clamp(36px, 4.5vw, 64px); }
  .section__head--row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; }
  .section__title { font-size: clamp(2.125rem, 4.4vw, 4rem); max-inline-size: 18ch; letter-spacing: -.035em; line-height: 1; }
  .section__lead { margin-block-start: 18px; color: var(--muted); max-inline-size: 52ch; font-size: 1.125rem; }
  .eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin-block-end: 14px; }
}

@layer components {
  /* Przyciski */
  .btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-block-size: 46px; padding: 0 22px; border-radius: 999px;
    font-weight: 600; font-size: 1rem; line-height: 1.1; white-space: nowrap; text-decoration: none;
    border: 1.5px solid transparent; cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, transform .35s var(--spring), box-shadow .3s;
  }
  .btn:active { transform: translateY(1px) scale(.97); }
  .btn .icon { transition: transform .35s var(--ease); }
  .btn:hover .icon { transform: translateX(4px); }
  .btn--sm { min-block-size: 40px; padding: 0 18px; font-size: .9375rem; }
  .btn--lg { min-block-size: 56px; padding: 0 30px; font-size: 1.0625rem; }
  .btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 28px -12px rgb(245 130 31 / .75), inset 0 1px 0 rgb(255 255 255 / .35); }
  .btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgb(245 130 31 / .85), inset 0 1px 0 rgb(255 255 255 / .35); }
  .btn--ghost { border-color: var(--line); color: var(--ink); background: color-mix(in srgb, var(--surface) 60%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
  .btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
  .btn--outline:hover { background: var(--ink); color: var(--bg); }

  .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
  .link-arrow .icon { transition: transform .3s var(--ease); }
  .link-arrow:hover .icon { transform: translateX(4px); }

  /* Nagłówek – pływająca „pigułka” */
  .site-header { position: sticky; inset-block-start: var(--header-top); z-index: 50; padding-inline: var(--gutter); margin-block-start: var(--header-top); }
  .site-header__in {
    display: flex; align-items: center; gap: 16px; min-block-size: var(--header-h);
    max-inline-size: calc(var(--max) - 2 * var(--gutter)); padding: 0 8px 0 18px !important;
    border-radius: 999px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
    box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 10px 30px -18px rgb(21 21 24 / .35);
    transition: box-shadow .3s, background-color .3s;
  }
  .site-header.is-scrolled .site-header__in { background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 18px 40px -20px rgb(21 21 24 / .45); }
  .brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; text-decoration: none; margin-inline-end: auto; }
  .brand img { block-size: 28px; inline-size: auto; }
  .brand__name {
    font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em;
    padding-inline-start: 12px; border-inline-start: 1px solid var(--line); line-height: 1.6;
  }
  .brand:hover .brand__name { color: var(--ink); }

  .nav-toggle {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; gap: 8px; min-block-size: 46px; padding: 0 16px;
    background: var(--ink); color: var(--bg); border: 0; border-radius: 999px; font-weight: 600; cursor: pointer;
  }
  .nav-toggle[hidden] { display: none; }
  .nav-toggle .icon--close { display: none; }
  .nav-toggle[aria-expanded="true"] .icon--open { display: none; }
  .nav-toggle[aria-expanded="true"] .icon--close { display: block; }

  .nav__list { display: flex; flex-wrap: wrap; gap: 2px; }
  .nav__link {
    display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding: 0 14px;
    background: none; border: 0; border-radius: 999px; cursor: pointer;
    font-weight: 500; font-size: .96875rem; text-decoration: none; color: var(--ink-2);
    transition: background-color .2s, color .2s;
  }
  .nav__link:hover, .nav__drop-btn[aria-expanded="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .nav__drop-btn .icon { transition: transform .25s var(--ease); }
  .nav__drop-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .nav__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .nav__phone .icon { color: var(--accent-text); }

  .drop__list a { display: block; padding: 10px 14px; border-radius: 12px; text-decoration: none; font-size: .9375rem; transition: background-color .15s, padding .25s var(--ease); }
  .drop__list a:hover { background: var(--surface-2); color: var(--ink); padding-inline-start: 18px; }

  .header-cta { display: none; }

  /* Menu na telefonie: bez JS lista pod logo, z JS panel na cały ekran */
  .nav { display: none; }
  @media (max-width: 1023px) {
    html:not(.js) .nav { display: block; order: 3; inline-size: 100%; padding-block-end: 12px; }
    html:not(.js) .site-header__in { flex-wrap: wrap; border-radius: 24px; }
    html:not(.js) .drop { display: none; }
  }
  .js .nav.is-open {
    display: block; position: fixed; inset: 0; z-index: 1; overflow-y: auto;
    background: var(--bg); padding: calc(var(--header-h) + var(--header-top) + 28px) var(--gutter) 120px;
    animation: panel-in .45s var(--ease) both;
  }
  @keyframes panel-in { from { opacity: 0; transform: translateY(-12px); } }
  .js .nav.is-open .nav__list { flex-direction: column; gap: 0; }
  .js .nav.is-open .nav__link { inline-size: 100%; justify-content: space-between; font-size: 1.75rem; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; min-block-size: 64px; border-radius: 0; border-block-end: 1px solid var(--line); padding: 0; color: var(--ink); }
  .js .nav.is-open .nav__link:hover, .js .nav.is-open .nav__drop-btn[aria-expanded="true"] { background: none; }
  .js .nav.is-open .drop { display: none; padding: 8px 0 16px; }
  .js .nav.is-open .nav__drop-btn[aria-expanded="true"] + .drop { display: block; }
  .js .nav.is-open .drop__list a { font-size: 1.0625rem; padding-inline: 0; }
  .js .nav.is-open .nav__phone { margin-block-start: 28px; font-size: 1.375rem; }
  html.nav-open { overflow: hidden; }
  html.nav-open .site-header__in { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
  html.nav-open .mobile-bar { display: none; }

  @media (min-width: 1024px) {
    .nav, .js .nav { display: flex; align-items: center; gap: 18px; }
    .nav-toggle { display: none !important; }
    .header-cta { display: inline-flex; }
    .nav__list { flex-wrap: nowrap; }
    .nav__item--drop { position: relative; }
    .drop {
      position: absolute; inset-block-start: calc(100% + 16px); inset-inline-start: -16px;
      inline-size: 540px; padding: 12px; border-radius: 24px;
      background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
      backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
      opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: 20% 0;
      transition: opacity .2s, transform .35s var(--ease), visibility 0s .35s;
    }
    .drop::before { content: ""; position: absolute; inset: -18px 0 auto; block-size: 18px; }
    .drop__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
    .nav__item--drop:hover .drop,
    html:not(.js) .nav__item--drop:focus-within .drop,
    .nav__drop-btn[aria-expanded="true"] + .drop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  }
  @media (max-width: 1279px) and (min-width: 1024px) { .nav__phone { display: none; } }
  @media (max-width: 520px) { .brand__name { display: none; } }

  .scroll-sentinel { position: absolute; inset: 0 0 auto 0; block-size: 1px; pointer-events: none; }

  /* Dolny pasek na telefonie */
  .mobile-bar {
    position: fixed; inset: auto 12px 12px 12px; z-index: 40;
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 8px;
    padding-block-end: calc(8px + env(safe-area-inset-bottom) / 2);
    border-radius: 999px; border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
    box-shadow: var(--shadow-lg);
  }
  .mobile-bar .btn { min-block-size: 48px; }
  @media (min-width: 1024px) { .mobile-bar { display: none; } }

  /* Formularz */
  .form { display: grid; gap: 18px; }
  .form__row { display: grid; gap: 18px; }
  @media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
  .field { display: grid; gap: 7px; }
  .field label { font-weight: 600; font-size: .9375rem; }
  .field__opt { font-weight: 400; opacity: .75; }
  .field input, .field select, .field textarea {
    inline-size: 100%; min-block-size: 52px; padding: 12px 16px;
    border-radius: var(--r-field); border: 1.5px solid var(--field-line, var(--line));
    background: var(--field-bg, var(--surface)); color: var(--field-ink, var(--ink));
    transition: border-color .2s, box-shadow .2s;
  }
  .field textarea { resize: vertical; min-block-size: 128px; }
  .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--field-ink, var(--ink)); box-shadow: 0 0 0 4px var(--field-ring, rgb(245 130 31 / .35)); }
  .field__help { font-size: .875rem; opacity: .8; }
  .field--hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: .9375rem; }
  .check input { inline-size: 22px; block-size: 22px; margin-block-start: 2px; accent-color: var(--ink); }
  .form__submit { justify-self: start; }
}

@layer sections {
  /* ===== Hero: obszar roboczy projektanta ===== */
  .hero { position: relative; overflow-x: clip; padding-block: clamp(40px, 6vw, 96px) clamp(72px, 9vw, 136px); margin-block-start: calc(-1 * (var(--header-h) + var(--header-top))); padding-block-start: calc(var(--header-h) + var(--header-top) + clamp(40px, 6vw, 96px)); }
  .hero__canvas {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(circle at 78% 38%, var(--glow), transparent 42%),
      radial-gradient(var(--dots) 1px, transparent 1.4px) 0 0 / 24px 24px;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
    mask-image: linear-gradient(to bottom, #000 60%, transparent);
  }
  .hero__grid { position: relative; display: grid; gap: 28px; grid-template-areas: "title" "copy" "stack"; }

  .hero__title {
    --h: clamp(3.4rem, 10.4vw, 10.25rem);
    grid-area: title; font-size: var(--h); line-height: .9; letter-spacing: -.055em; font-weight: 760;
  }
  .hero__line { display: block; }
  .hero__line--2 { padding-block-start: .1em; }

  /* Ramka zaznaczenia jak w programie graficznym */
  .sel { position: relative; display: inline-block; padding-inline: .06em .1em; }
  .sel::before { content: ""; position: absolute; inset: .02em -.04em -.04em; border: max(2px, .018em) solid var(--accent); pointer-events: none; }
  .sel__h { position: absolute; inline-size: clamp(9px, .085em, 14px); aspect-ratio: 1; background: var(--bg); border: 2px solid var(--accent); }
  .sel__h--tl { inset-block-start: .02em; inset-inline-start: -.04em; translate: -50% -50%; }
  .sel__h--tr { inset-block-start: .02em; inset-inline-end: -.04em; translate: 50% -50%; }
  .sel__h--bl { inset-block-end: -.04em; inset-inline-start: -.04em; translate: -50% 50%; }
  .sel__h--br { inset-block-end: -.04em; inset-inline-end: -.04em; translate: 50% 50%; }
  .sel__tag {
    position: absolute; inset-block-start: 50%; inset-inline-start: calc(100% + .04em + 18px); translate: 0 -50%;
    font: 600 clamp(.75rem, .9vw, .875rem)/1 var(--font-body); letter-spacing: 0;
    background: var(--accent); color: var(--on-accent); padding: 7px 11px; border-radius: 8px; white-space: nowrap;
  }

  .hero__copy { grid-area: copy; }
  .hero__lead { font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); color: var(--ink-2); max-inline-size: 40ch; line-height: 1.5; }
  .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 32px; }

  /* Stos wydrukowanych prac */
  .stack {
    grid-area: stack; position: relative; aspect-ratio: 1 / .9; inline-size: 100%;
    margin-block-start: 20px; perspective: 1400px;
  }
  .stack__in, .stack { transform-style: preserve-3d; }
  .stack__card {
    --r: 0deg; --z: 0px;
    position: absolute; overflow: hidden; border-radius: var(--r-img); background: #fff;
    box-shadow: var(--shadow-lg); outline: 1px solid rgb(0 0 0 / .05);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--r)) translateZ(var(--z));
    transition: transform .6s var(--ease), box-shadow .4s;
  }
  .stack__card picture, .stack__card img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .stack__card--a { --r: -2.5deg; inset-block-start: 0; inset-inline-start: 4%; inline-size: 90%; aspect-ratio: 16 / 10.2; }
  .stack__card--b { --r: 3.5deg; --z: 40px; inset-block-end: 2%; inset-inline-start: 0; inline-size: 50%; aspect-ratio: 4 / 3; }
  .stack__card--c { --r: -4deg; --z: 70px; inset-block-end: 8%; inset-inline-end: 0; inline-size: 46%; aspect-ratio: 4 / 3; }
  .stack__card--c img { transform: scale(1.3); }
  .stack__card:hover { --z: 120px; box-shadow: var(--shadow-lg), 0 40px 80px -30px rgb(21 21 24 / .4); }

  .sticker {
    position: absolute; z-index: 5; inset-block-start: -6%; inset-inline-end: 2%;
    inline-size: clamp(108px, 11vw, 156px); aspect-ratio: 1; border-radius: 50%;
    display: grid; place-items: center; background: var(--accent); color: var(--on-accent);
    box-shadow: 0 18px 40px -16px rgb(245 130 31 / .9), inset 0 1px 0 rgb(255 255 255 / .4);
    transform: translateZ(110px) rotate(8deg);
  }
  .sticker__ring { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; animation: spin 24s linear infinite; }
  .sticker__ring text { font: 700 15.5px var(--font-display); letter-spacing: .2em; fill: currentColor; }
  .sticker__in { position: relative; display: grid; justify-items: center; font-family: var(--font-display); font-weight: 750; font-size: clamp(1.125rem, 1.7vw, 1.625rem); letter-spacing: -.03em; line-height: 1; }
  .sticker__in small { font-size: .55em; font-weight: 600; letter-spacing: 0; margin-block-end: 2px; }
  @keyframes spin { to { rotate: 360deg; } }

  @media (min-width: 1024px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); grid-template-areas: "title title" "copy stack"; column-gap: clamp(40px, 6vw, 96px); row-gap: 40px; }
    .hero__copy { align-self: start; padding-block-start: 12px; }
    .stack { margin-block-start: calc(var(--h) * -1.18); }
  }

  /* Animacja wejścia hero – tylko transform i opacity */
  @media (prefers-reduced-motion: no-preference) {
    .js .hero__line > span:not(.sel) { display: inline-block; animation: rise 1s var(--ease) backwards; }
    .js .sel { animation: rise 1s var(--ease) .1s backwards; }
    .js .sel::before { animation: frame .7s var(--ease) .55s backwards; }
    .js .sel__h, .js .sel__tag { animation: pop .5s var(--spring) .8s backwards; }
    .js .sel__tag { animation-delay: .95s; }
    .js .hero__copy { animation: rise 1s var(--ease) .25s backwards; }
    .js .stack__card { animation: deal 1.1s var(--ease) backwards; }
    .js .stack__card--a { animation-delay: .3s; }
    .js .stack__card--b { animation-delay: .42s; }
    .js .stack__card--c { animation-delay: .54s; }
    .js .sticker { animation: pop .7s var(--spring) .9s backwards; }
    @keyframes rise { from { opacity: 0; transform: translateY(.45em); } }
    @keyframes frame { from { opacity: 0; transform: scale(1.12); } }
    @keyframes pop { from { opacity: 0; scale: .4; } }
    @keyframes deal { from { opacity: 0; transform: translateY(80px) rotate(0deg) scale(.92); } }

    /* Paralaksa stosu przy przewijaniu (scroll-driven, bez JS) */
    @supports (animation-timeline: scroll()) {
      .stack { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
      @keyframes drift { to { translate: 0 -60px; } }
    }
  }

  /* ===== Ściana logo ===== */
  .logos__grid { display: grid; gap: 40px; }
  .logos .section__title { font-size: clamp(2.125rem, 3.6vw, 3.5rem); }
  .logos__big { display: grid; margin-block-start: 32px; }
  .logos__big strong { font-family: var(--font-display); font-weight: 760; font-size: clamp(5rem, 11vw, 10rem); line-height: .85; letter-spacing: -.06em; }
  .logos__big strong::after { content: "+"; color: var(--accent); }
  .logos__big span { color: var(--muted); font-size: 1.125rem; margin-block-start: 10px; }
  .logos__stats { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 24px; }
  .logos__stats li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: .9375rem; color: var(--muted); }
  .logos__stats strong { color: var(--ink); }
  .logos__wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  @media (min-width: 640px) { .logos__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
  .logo-tile {
    display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 14% 16%;
    border-radius: var(--r-card); background: var(--tile); border: 1px solid var(--line);
    transition: transform .5s var(--spring), box-shadow .4s, border-color .3s;
  }
  .logo-tile { min-inline-size: 0; overflow: hidden; position: relative; }
  /* Pole logo o określonej wysokości – wysokie znaki (np. Wojowniczka) mieszczą się w całości */
  .logo-tile picture { position: absolute; inset: 14% 16%; display: grid; place-items: center; }
  .logo-tile img {
    inline-size: 100%; block-size: 100%; object-fit: contain;
    mix-blend-mode: multiply; filter: grayscale(1) contrast(1.15); opacity: .82;
    transition: filter .4s, opacity .4s, transform .5s var(--ease);
  }
  .logo-tile:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--shadow); border-color: transparent; }
  .logo-tile:hover img { filter: none; opacity: 1; transform: scale(1.06); }
  @media (hover: none) { .logo-tile img { filter: none; opacity: 1; } }
  @media (min-width: 1024px) {
    .logos__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
    .logos__intro { position: sticky; inset-block-start: calc(var(--header-h) + var(--header-top) + 40px); }
  }

  /* ===== Realizacje ===== */
  .works { padding-block-start: 0; }
  /* Bez kadrowania: obrazek w naturalnych proporcjach (wysokość z atrybutów width/height) */
  .works__grid { display: grid; gap: 36px 20px; }
  .works__row { display: contents; }
  .work { display: flex; flex-direction: column; min-inline-size: 0; }
  .work__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; }
  .work__img { border-radius: var(--r-img); overflow: hidden; background: var(--surface-2); box-shadow: 0 1px 0 rgb(255 255 255 / .4) inset; }
  .work__img picture { display: block; }
  .work__img img { display: block; inline-size: 100%; block-size: auto; transition: transform .9s var(--ease), filter .5s; }
  a.work__link:hover .work__img img { transform: scale(1.045); }
  /* MZGO: pionowy papier firmowy – na tle, w kwadratowym polu */
  .work--6 .work__img { background: #ececef; aspect-ratio: 1; display: grid; place-items: center; }
  .work--6 .work__img picture { block-size: 100%; }
  .work--6 .work__img img { block-size: 100%; inline-size: auto; max-inline-size: 100%; object-fit: contain; padding: 6% 0; margin-inline: auto; }
  .work__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin-block-start: 14px; }
  .work__client { font-weight: 600; font-size: 1.0625rem; }
  .work__type { color: var(--muted); margin-inline-start: auto; }
  .work__arrow { color: var(--accent-text); opacity: 0; transform: translate(-6px, 6px); transition: opacity .3s, transform .4s var(--ease); }
  a.work__link:hover .work__arrow { opacity: 1; transform: none; }
  a.work__link:hover .work__client { color: var(--accent-text); }
  @media (min-width: 640px) {
    .works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  }
  /* Komputer: wiersze równej wysokości – flex-grow = szerokość / wysokość obrazka (site.php → images) */
  @media (min-width: 1024px) {
    .works__grid { display: flex; flex-direction: column; gap: 40px; }
    .works__row { display: flex; gap: 20px; align-items: flex-start; }
    .work { flex: 1 1 0; }
    .work--1 { flex-grow: 1.476; } /* logo-renovierung 1500×1016 */
    .work--2 { flex-grow: 2.065; } /* identyfikacja-autoopony 826×400 */
    .work--3 { flex-grow: 1.444; } /* logo-wojowniczka 921×638 */
    .work--4 { flex-grow: 1.249; } /* logo-avernus-software-billboard 1280×1025 */
    .work--5 { flex-grow: 1.444; } /* ulotka-wizytowka-avendi 921×638 */
    .work--6 { flex-grow: 1; }     /* papier-firmowy-mzgo – pole kwadratowe */
  }

  /* ===== Pakiety ===== */
  .packages { position: relative; background: var(--surface); border-block: 1px solid var(--line); }
  .vat { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
  .vat input { position: absolute; opacity: 0; pointer-events: none; }
  .vat label { padding: 9px 20px; border-radius: 999px; font-weight: 600; cursor: pointer; color: var(--muted); transition: background-color .25s, color .25s; }
  .vat input:checked + label { background: var(--ink); color: var(--bg); }
  .vat input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }

  .packages__grid { display: grid; gap: 16px; }
  @media (min-width: 700px) { .packages__grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1180px) { .packages__grid { grid-template-columns: repeat(4, 1fr); align-items: stretch; } }
  .pkg {
    position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 30px; border-radius: var(--r-card);
    background: var(--bg); border: 1px solid var(--line);
    transition: transform .5s var(--spring), box-shadow .4s;
  }
  .pkg:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
  .pkg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .pkg__name { font-size: 1.625rem; }
  .pkg__badge { background: var(--accent); color: var(--on-accent); font-size: .8125rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
  .pkg__lead { margin-block-start: 8px; color: var(--muted); font-size: .9875rem; min-block-size: 3.2em; }
  .pkg__price { margin-block-start: 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
  /* Kwota nigdy się nie łamie („1 228,77 zł”); dopisek „brutto” w razie braku miejsca schodzi pod spód */
  .pkg__price strong { font-family: var(--font-display); font-size: clamp(2.5rem, 3.4vw, 3.125rem); letter-spacing: -.045em; line-height: 1; font-weight: 750; white-space: nowrap; }
  /* Brutto ma więcej znaków – mniejszy krój, żeby zmieścić się w karcie */
  .pkg__price--gross strong { font-size: clamp(2rem, 2.5vw, 2.5rem); }
  .pkg__price span { color: var(--muted); font-weight: 500; }
  .pkg__alt { color: var(--muted); font-size: .875rem; margin-block-start: 8px; }
  .pkg__price--gross, .pkg__alt--gross { display: none; }
  .packages:has(#vat-gross:checked) .pkg__price--net,
  .packages:has(#vat-gross:checked) .pkg__alt--net { display: none; }
  .packages:has(#vat-gross:checked) .pkg__price--gross { display: flex; }
  .packages:has(#vat-gross:checked) .pkg__alt--gross { display: block; }
  .pkg__list { display: grid; gap: 10px; margin-block: 24px; padding-block-start: 24px; border-block-start: 1px solid var(--line); }
  .pkg__list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
  .pkg__list .icon { color: var(--accent-text); margin-block-start: .1em; }
  .pkg__bonus { margin-block-end: 24px; font-size: .9375rem; line-height: 1.45; }
  .pkg__bonus span { font-weight: 700; color: var(--accent-text); }
  .pkg__cta { margin-block-start: auto; inline-size: 100%; }

  /* Pakiet polecany: ciemna karta z obracającą się świetlną krawędzią */
  .pkg--featured { background: var(--feat-bg); color: var(--feat-ink); border-color: transparent; box-shadow: var(--shadow-lg); }
  .pkg--featured::before {
    content: ""; position: absolute; inset: -1.5px; z-index: -2; border-radius: inherit;
    background: conic-gradient(from var(--a), transparent 0 55%, var(--accent) 72%, #ffd2a8 78%, transparent 92%);
    animation: orbit 5s linear infinite;
  }
  .pkg--featured::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--feat-bg); }
  @keyframes orbit { to { --a: 360deg; } }
  .pkg--featured .pkg__lead, .pkg--featured .pkg__price span, .pkg--featured .pkg__alt { color: var(--feat-muted); }
  .pkg--featured .pkg__list { border-color: rgb(255 255 255 / .14); }
  .pkg--featured .pkg__list .icon, .pkg--featured .pkg__bonus span { color: var(--accent); }
  @media (min-width: 1180px) { .pkg--featured { transform: translateY(-14px); } .pkg--featured:hover { transform: translateY(-20px); } }

  .packages__always { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-block-start: 36px; color: var(--ink-2); font-weight: 500; }
  .packages__always li { display: flex; align-items: center; gap: 10px; }
  .packages__always .icon { color: var(--accent-text); inline-size: 1.4em; block-size: 1.4em; }

  /* ===== Proces ===== */
  .process__grid { display: grid; gap: 48px; }
  .process__text { margin-block-start: 20px; color: var(--muted); max-inline-size: 46ch; font-size: 1.125rem; }
  .files { margin-block-start: 40px; }
  .files__title { font-weight: 700; margin-block-end: 12px; }
  .files__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
  .files__list li {
    display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-field); background: var(--surface); border: 1px solid var(--line);
    transition: transform .4s var(--spring), border-color .3s;
  }
  .files__list li:hover { transform: translateY(-3px); border-color: var(--accent); }
  .files__list b { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.1; }
  .files__list span { font-size: .8125rem; color: var(--muted); line-height: 1.3; }
  .files__note { margin-block-start: 12px; font-size: .9375rem; color: var(--muted); }
  .steps { position: relative; }
  .step { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding-block: 30px; border-block-start: 1px solid var(--line); }
  .step:last-child { border-block-end: 1px solid var(--line); }
  .step__no {
    font-family: var(--font-display); font-size: 3rem; font-weight: 750; line-height: .9; letter-spacing: -.05em;
    color: transparent; -webkit-text-stroke: 1.5px var(--accent);
    transition: color .4s;
  }
  .step:hover .step__no { color: var(--accent); }
  .step__title { font-size: clamp(1.375rem, 2.2vw, 1.875rem); margin-block-end: 10px; }
  .step p { color: var(--muted); max-inline-size: 56ch; }
  @media (min-width: 1024px) {
    .process__grid { grid-template-columns: 5fr 7fr; gap: clamp(48px, 7vw, 112px); align-items: start; }
    .process__intro { position: sticky; inset-block-start: calc(var(--header-h) + var(--header-top) + 40px); }
    .step { grid-template-columns: 120px 1fr; padding-block: 44px; }
    .step__no { font-size: 5.5rem; }
  }
  /* Numer kroku wypełnia się podczas przewijania (scroll-driven, bez JS) */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .step__no { animation: fill-no linear both; animation-timeline: view(); animation-range: entry 60% cover 45%; }
      @keyframes fill-no { to { color: var(--accent); } }
    }
  }

  /* ===== Pozostałe usługi ===== */
  .services { background: var(--surface); border-block: 1px solid var(--line); }
  .services__list { display: grid; column-gap: 56px; }
  @media (min-width: 860px) { .services__list { grid-template-columns: 1fr 1fr; } }
  .svc {
    position: relative; display: grid; grid-template-columns: 1fr auto 24px; grid-template-areas: "name price arrow" "note note note";
    gap: 2px 16px; align-items: baseline; padding-block: 22px; text-decoration: none; border-block-end: 1px solid var(--line);
  }
  .svc::after { content: ""; position: absolute; inset: auto 0 -1px 0; block-size: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
  .svc:hover::after { transform: scaleX(1); }
  .svc__name { grid-area: name; font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; letter-spacing: -.015em; line-height: 1.25; transition: transform .4s var(--ease); }
  .svc__note { grid-area: note; color: var(--muted); font-size: .9375rem; }
  .svc__price { grid-area: price; font-weight: 600; white-space: nowrap; }
  .svc__price small, .related__price small { font-size: .8em; font-weight: 500; color: var(--muted); }
  .svc__arrow { grid-area: arrow; align-self: center; color: var(--muted); transition: transform .35s var(--ease), color .2s; }
  .svc:hover { color: var(--ink); }
  .svc:hover .svc__name { color: var(--accent-text); transform: translateX(6px); }
  .svc:hover .svc__arrow { transform: translate(3px, -3px); color: var(--accent-text); }

  /* ===== Opinie ===== */
  .reviews__grid { margin-block-start: clamp(32px, 4vw, 56px); columns: 1; column-gap: 20px; }
  @media (min-width: 768px) { .reviews__grid { columns: 2; } }
  .review { break-inside: avoid; margin-block-end: 20px; padding: 30px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
  .review blockquote p { color: var(--ink-2); }
  .review blockquote p::before { content: "„"; }
  .review blockquote p::after { content: "”"; }
  .review figcaption { display: grid; margin-block-start: 18px; font-size: .9375rem; }
  .review figcaption span { color: var(--muted); }
  .review--big { position: relative; column-span: all; background: none; border: 0; padding: 0 0 clamp(28px, 3vw, 48px); margin-block-end: clamp(28px, 3vw, 48px); border-block-end: 1px solid var(--line); border-radius: 0; }
  .review--big::before {
    content: "”"; position: absolute; inset-block-start: -.32em; inset-inline-end: 0; z-index: -1;
    font: 800 clamp(12rem, 26vw, 24rem)/1 var(--font-display); color: color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .review--big blockquote p { font-family: var(--font-display); font-size: clamp(1.625rem, 3.2vw, 2.75rem); font-weight: 500; line-height: 1.18; letter-spacing: -.025em; color: var(--ink); max-inline-size: 30ch; }
  .review--big blockquote p::before { color: var(--accent); }
  .review--big figcaption { font-size: 1rem; }
  .reviews { position: relative; isolation: isolate; overflow-x: clip; }

  /* ===== FAQ ===== */
  .faq { padding-block-start: 0; }
  .faq__grid { display: grid; gap: 32px; }
  @media (min-width: 1024px) { .faq__grid { grid-template-columns: 5fr 7fr; gap: clamp(48px, 7vw, 112px); } }
  .qa { border-block-end: 1px solid var(--line); }
  .qa:first-child { border-block-start: 1px solid var(--line); }
  .qa summary {
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    padding-block: 24px; cursor: pointer; list-style: none;
    font-family: var(--font-display); font-weight: 600; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.3; letter-spacing: -.01em;
  }
  .qa summary::-webkit-details-marker { display: none; }
  .qa summary:hover { color: var(--accent-text); }
  .qa__icon {
    inline-size: 36px; block-size: 36px; padding: 9px; border-radius: 50%; border: 1px solid var(--line);
    transition: transform .4s var(--spring), background-color .3s, color .3s; color: var(--ink);
  }
  .qa[open] .qa__icon { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .qa p { padding-block-end: 26px; color: var(--muted); max-inline-size: 62ch; }
  @media (prefers-reduced-motion: no-preference) {
    .qa[open] p { animation: rise-sm .45s var(--ease) both; }
    @keyframes rise-sm { from { opacity: 0; transform: translateY(-6px); } }
  }

  /* ===== Kontakt: pomarańczowy panel – stałe kolory w obu motywach ===== */
  .contact { padding-block-start: 0; }
  .contact__grid {
    --field-bg: #fdfdfd; --field-ink: #151518; --field-line: rgb(21 21 24 / .18); --field-ring: rgb(21 21 24 / .25);
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; gap: 40px; padding: clamp(28px, 5vw, 80px); border-radius: 32px;
    background: var(--accent); color: #151518;
  }
  .contact__grid::before {
    content: ""; position: absolute; z-index: -1; inset-block-start: -30%; inset-inline-end: -10%;
    inline-size: 70%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgb(255 214 170 / .65), transparent 62%);
  }
  .contact__grid a:hover { color: #151518; text-decoration-thickness: 2px; }
  .contact .section__title { font-size: clamp(2.25rem, 5vw, 4.5rem); }
  .contact .section__lead { color: #2a2118; }
  .contact__direct { display: grid; gap: 12px; margin-block-start: 36px; }
  .contact__direct a { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 650; font-size: clamp(1.375rem, 2.4vw, 2rem); letter-spacing: -.02em; text-decoration: none; }
  .contact__direct .icon { inline-size: 1em; block-size: 1em; }
  .contact .btn--primary { background: #151518; color: #f3f3f4; box-shadow: 0 14px 30px -14px rgb(21 21 24 / .7); }
  .contact .btn--primary:hover { background: #2c2c31; color: #fff; }
  .contact .check input { accent-color: #151518; }
  .contact :focus-visible { outline-color: #151518; }
  @media (min-width: 1024px) { .contact__grid { grid-template-columns: 5fr 7fr; gap: clamp(48px, 6vw, 96px); } }

  /* ===== Stopka ===== */
  .site-footer { padding-block: 64px 24px; font-size: .9375rem; color: var(--muted); overflow: hidden; }
  .site-footer__grid { display: grid; gap: 32px; }
  @media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
  .site-footer__brand { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ink); margin-block-end: 10px; }
  .site-footer__about p + p { margin-block-start: 12px; }
  .site-footer__nap { font-style: normal; margin-block-start: 12px; line-height: 1.55; }
  .site-footer__head { font-weight: 700; color: var(--ink); margin-block-end: 12px; }
  .site-footer ul { display: grid; gap: 6px; list-style: none; padding: 0; }
  .site-footer a { text-decoration: none; }
  .site-footer a:hover { text-decoration: underline; }
  .site-footer__social { display: inline-flex; align-items: center; gap: 8px; }
  .site-footer__social .icon { inline-size: 1.25em; block-size: 1.25em; }
  .footer-mark {
    margin-block-start: 56px; font-family: var(--font-display); font-weight: 800; white-space: nowrap; text-align: center;
    font-size: clamp(2.5rem, 9.6vw, 9.25rem); line-height: .82; letter-spacing: -.06em; padding-block-end: .08em; user-select: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 16%, transparent), transparent 92%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .footer-mark span { color: color-mix(in srgb, var(--accent) 55%, transparent); -webkit-text-fill-color: color-mix(in srgb, var(--accent) 55%, transparent); }
  .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block-start: 20px; border-block-start: 1px solid var(--line); }

  /* 404 */
  .notfound { padding-block-start: calc(var(--section-y) * .6); }
  .notfound__links { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 32px; }
}

@layer utilities {
  .visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ===== Podstrony usług ===== */
@layer sections {
  .svc-hero { position: relative; overflow-x: clip; margin-block-start: calc(-1 * (var(--header-h) + var(--header-top))); padding-block: calc(var(--header-h) + var(--header-top) + clamp(28px, 4vw, 64px)) clamp(56px, 7vw, 112px); }
  .svc-hero__grid { position: relative; display: grid; gap: 40px; align-items: center; }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; font-size: .875rem; color: var(--muted); margin-block-end: 20px; }
  .crumbs li + li::before { content: "/"; margin-inline-end: 6px; opacity: .5; }
  .crumbs a { text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }
  .svc-hero__title { font-size: clamp(2.75rem, 6.6vw, 6.25rem); line-height: .94; letter-spacing: -.05em; font-weight: 760; max-inline-size: 12ch; }
  .svc-hero__lead { margin-block-start: 24px; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); color: var(--ink-2); max-inline-size: 42ch; line-height: 1.5; }
  .svc-hero__chip { display: inline-flex; align-items: center; gap: 10px; margin-block-start: 24px; padding: 8px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; }
  .svc-hero__chip .icon { color: var(--accent); }
  .svc-hero__art { perspective: 1400px; }
  .svc-hero__card {
    overflow: hidden; border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-lg); outline: 1px solid rgb(0 0 0 / .05);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-1.5deg); transition: transform .6s var(--ease);
  }
  .svc-hero__card img { inline-size: 100%; block-size: auto; max-block-size: 70vh; object-fit: contain; background: #fff; }
  @media (min-width: 1024px) { .svc-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); } }
  @media (prefers-reduced-motion: no-preference) {
    .js .svc-hero__copy > * { animation: rise .9s var(--ease) backwards; }
    .js .svc-hero__copy > :nth-child(2) { animation-delay: .06s; }
    .js .svc-hero__copy > :nth-child(3) { animation-delay: .14s; }
    .js .svc-hero__copy > :nth-child(n+4) { animation-delay: .22s; }
    .js .svc-hero__card { animation: deal 1.1s var(--ease) .25s backwards; }
  }

  /* Galeria realizacji: „biurko projektanta” – równe kafelki, płaskie projekty z cieniem i obrotem */
  .gallery { padding-block-start: 0; }
  .gallery__grid {
    display: grid; gap: 16px; margin-block-start: clamp(32px, 4vw, 56px);
    grid-template-columns: minmax(0, 1fr); grid-auto-rows: 300px;
  }
  @media (min-width: 640px) { .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(260px, 30vw, 340px); } }
  @media (min-width: 640px) and (max-width: 1023px) { .gallery__grid > :last-child:nth-child(odd) { grid-column: span 2; } }
  @media (min-width: 1024px) {
    .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(280px, 24vw, 360px); }
    /* Siatka zawsze pełna: 7 prac = szeroka pierwsza i ostatnia, 8 prac = szeroka pierwsza, 2 prace = dwie kolumny */
    .gallery__grid:has(> :nth-child(7):last-child) > :is(:first-child, :last-child),
    .gallery__grid:has(> :nth-child(8):last-child) > :first-child,
    .gallery__grid:has(> :nth-child(5):last-child) > :is(:first-child, :last-child),
    .gallery__grid:has(> :nth-child(4):last-child) > :is(:first-child, :last-child) { grid-column: span 2; }
    .gallery__grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(320px, 30vw, 440px); }
  }
  .gallery__item { display: flex; flex-direction: column; min-block-size: 0; }
  .gallery__img {
    position: relative; flex: 1; min-block-size: 0; overflow: hidden; border-radius: var(--r-card);
    padding: 0;
    background:
      radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--surface) 85%, transparent), transparent 60%),
      radial-gradient(var(--dots) 1px, transparent 1.3px) 0 0 / 18px 18px,
      var(--surface-2);
    border: 1px solid var(--line);
  }
  .gallery__img picture { position: absolute; inset: 10% 12%; display: flex; align-items: center; justify-content: center; }
  .gallery__img img {
    max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; min-inline-size: 0; object-fit: contain;
    border-radius: 4px; box-shadow: 0 2px 4px rgb(21 21 24 / .08), 0 22px 40px -18px rgb(21 21 24 / .45);
    rotate: -1.6deg; transition: rotate .6s var(--spring), scale .6s var(--spring), box-shadow .4s;
  }
  .gallery__item:nth-child(even) .gallery__img img { rotate: 1.8deg; }
  .gallery__item:nth-child(3n) .gallery__img img { rotate: -.6deg; }
  .gallery__item:hover .gallery__img img { rotate: 0deg; scale: 1.05; box-shadow: 0 4px 8px rgb(21 21 24 / .08), 0 34px 60px -22px rgb(21 21 24 / .55); }
  /* Zdjęcia makiet: pełny kadr bez cienia */
  .gallery__item--photo .gallery__img picture { inset: 0; }
  .gallery__item--photo .gallery__img img { inline-size: 100%; block-size: 100%; max-block-size: none; }
  .gallery__item--photo .gallery__img img { object-fit: cover; border-radius: 0; box-shadow: none; rotate: none !important; }
  .gallery__item--photo:hover .gallery__img img { scale: 1.04; }
  .gallery__item figcaption { margin-block-start: 12px; font-weight: 600; font-size: .9375rem; flex: none; }

  /* Argumenty sprzedażowe */
  .pitch { background: var(--surface); border-block: 1px solid var(--line); }
  .pitch__grid { display: grid; gap: 48px; }
  .pitch__text { margin-block-start: 20px; color: var(--ink-2); font-size: 1.125rem; max-inline-size: 56ch; }
  .benefits { display: grid; gap: 12px; }
  @media (min-width: 640px) { .benefits { grid-template-columns: 1fr 1fr; } }
  .benefit { padding: 26px; border-radius: var(--r-card); background: var(--bg); border: 1px solid var(--line); transition: transform .5s var(--spring), border-color .3s; }
  .benefit:hover { transform: translateY(-4px); border-color: var(--accent); }
  .benefit__no { font-family: var(--font-display); font-weight: 700; color: var(--accent-text); font-size: .9375rem; }
  .benefit__title { font-size: 1.25rem; margin-block: 10px 8px; }
  .benefit p { color: var(--muted); font-size: .9875rem; }
  @media (min-width: 1024px) { .pitch__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 112px); align-items: start; } }

  /* Oferta z jedną ceną */
  .offer { display: grid; gap: 32px; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-card); background: var(--feat-bg); color: var(--feat-ink); box-shadow: var(--shadow-lg); position: relative; isolation: isolate; }
  .offer::before {
    content: ""; position: absolute; inset: -1.5px; z-index: -2; border-radius: inherit;
    background: conic-gradient(from var(--a), transparent 0 55%, var(--accent) 72%, #ffd2a8 78%, transparent 92%);
    animation: orbit 6s linear infinite;
  }
  .offer::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--feat-bg); }
  .offer__name { font-size: 1.5rem; }
  .offer .pkg__price { margin-block-start: 16px; }
  .offer .pkg__price strong { font-size: clamp(3rem, 6vw, 5rem); }
  .offer__note { margin-block-start: 8px; color: var(--feat-muted); max-inline-size: 30ch; }
  .offer .pkg__price small { font-size: .4em; font-weight: 600; color: var(--feat-muted); letter-spacing: 0; }
  .offer__days { display: flex; align-items: center; gap: 8px; color: var(--feat-muted); margin-block: 12px 28px; }
  .offer__days .icon { color: var(--accent); }
  .offer__list { display: grid; gap: 14px; align-content: center; font-size: 1.0625rem; }
  .offer__list li { display: flex; gap: 12px; align-items: flex-start; }
  .offer__list .icon { color: var(--accent); margin-block-start: .15em; }
  @media (min-width: 860px) { .offer { grid-template-columns: 1fr 1fr; gap: 64px; } .offer__list { padding-inline-start: 48px; border-inline-start: 1px solid rgb(255 255 255 / .14); } }
  .pkg__name--sm { font-size: 1.3125rem; }

  .svc-steps .step__no { font-size: 3rem; }
  @media (min-width: 1024px) { .svc-steps .step__no { font-size: 4.5rem; } }

  /* Powiązane usługi */
  .related { padding-block-start: 0; }
  .related__grid { display: grid; gap: 12px; margin-block-start: 32px; }
  @media (min-width: 640px) { .related__grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1024px) { .related__grid { grid-template-columns: repeat(4, 1fr); } }
  .related__card {
    position: relative; display: grid; gap: 6px; min-block-size: 150px; align-content: end; padding: 24px; border-radius: var(--r-card);
    background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: transform .5s var(--spring), box-shadow .4s, border-color .3s;
  }
  .related__card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--accent); color: var(--ink); }
  .related__card--logo { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .related__card--logo:hover { color: var(--on-accent); }
  .related__name { font-family: var(--font-display); font-weight: 650; font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.15; }
  .related__price { font-weight: 600; opacity: .75; }
  .related__arrow { position: absolute; inset-block-start: 22px; inset-inline-end: 22px; inline-size: 1.4em; block-size: 1.4em; transition: transform .4s var(--ease); }
  .related__card:hover .related__arrow { transform: translate(4px, -4px); }
}

@layer sections {
  .pitch .section__title { font-size: clamp(2rem, 3.3vw, 3.25rem); max-inline-size: 16ch; }
}

@layer sections {
  .svc-hero__title { font-size: clamp(2.5rem, 5.6vw, 5.5rem); max-inline-size: 13ch; }
}

/* ===== Strony: cennik, realizacje, o nas, kontakt, polityka ===== */
@layer sections {
  /* Nagłówek prostych stron */
  .page-hero { position: relative; overflow-x: clip; margin-block-start: calc(-1 * (var(--header-h) + var(--header-top))); padding-block: calc(var(--header-h) + var(--header-top) + clamp(28px, 4vw, 64px)) clamp(48px, 6vw, 96px); }
  .page-hero__in { position: relative; }
  .page-hero__title { font-size: clamp(3rem, 9vw, 8.5rem); line-height: .9; letter-spacing: -.055em; font-weight: 760; max-inline-size: 14ch; }
  .page-hero__lead { margin-block-start: 24px; font-size: clamp(1.0625rem, 1.6vw, 1.375rem); color: var(--ink-2); max-inline-size: 52ch; line-height: 1.5; }
  .page-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 32px; list-style: none; padding: 0; }
  .page-hero__chips a {
    display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 0 18px; border-radius: 999px;
    border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); text-decoration: none; font-weight: 600;
    transition: background-color .2s, color .2s, border-color .2s;
  }
  .page-hero__chips a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .page-hero__chips span { font-size: .8125rem; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
  .page-hero .hero__cta { margin-block-start: 32px; }
  @media (prefers-reduced-motion: no-preference) {
    .js .page-hero__in > * { animation: rise .9s var(--ease) backwards; }
    .js .page-hero__in > :nth-child(2) { animation-delay: .06s; }
    .js .page-hero__in > :nth-child(n+3) { animation-delay: .16s; }
  }

  /* Cennik wizytówek – wiersze */
  .ptable { display: grid; gap: 10px; }
  .ptable__row {
    display: grid; gap: 8px 24px; align-items: center; padding: 20px 24px; border-radius: var(--r-card);
    background: var(--surface); border: 1px solid var(--line); grid-template-columns: 1fr auto;
  }
  .ptable__name { display: grid; gap: 4px; grid-column: 1 / -1; }
  .ptable__name strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 650; letter-spacing: -.015em; }
  .ptable__name span, .ptable__days { color: var(--muted); font-size: .9375rem; }
  .ptable__price { font-family: var(--font-display); font-size: 1.75rem; font-weight: 750; letter-spacing: -.03em; white-space: nowrap; }
  .ptable__price small { font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--muted); }
  @media (min-width: 860px) {
    .ptable__row { grid-template-columns: minmax(0, 1fr) 150px 120px auto; }
    .ptable__name { grid-column: auto; }
  }
  .price-cards--alt { padding-block-start: 0; }
  .price-grid { display: grid; gap: 12px; }
  @media (min-width: 640px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .price-card {
    position: relative; display: grid; gap: 6px; align-content: start; min-block-size: 190px; padding: 26px; border-radius: var(--r-card);
    background: var(--surface); border: 1px solid var(--line); text-decoration: none;
    transition: transform .5s var(--spring), box-shadow .4s, border-color .3s;
  }
  .price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--accent); color: var(--ink); }
  .price-card__name { font-family: var(--font-display); font-weight: 650; font-size: 1.375rem; letter-spacing: -.02em; padding-inline-end: 32px; }
  .price-card__note { color: var(--muted); font-size: .9375rem; }
  .price-card__price { margin-block-start: auto; padding-block-start: 18px; font-family: var(--font-display); font-weight: 750; font-size: 2.25rem; letter-spacing: -.04em; line-height: 1; }
  .price-card__price small { font-size: .45em; font-weight: 600; letter-spacing: 0; color: var(--muted); }
  .price-card__arrow { position: absolute; inset-block-start: 24px; inset-inline-end: 24px; inline-size: 1.4em; block-size: 1.4em; color: var(--muted); transition: transform .4s var(--ease), color .2s; }
  .price-card:hover .price-card__arrow { transform: translate(4px, -4px); color: var(--accent-text); }

  /* Opisane realizacje – karty */
  .cases { padding-block-start: 0; }
  .cases__grid { display: grid; gap: 20px; margin-block-start: clamp(28px, 3vw, 48px); list-style: none; padding: 0; }
  @media (min-width: 640px) { .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) {
    .cases__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* 7 realizacji: szeroka pierwsza i ostatnia – siatka 3×3 bez dziur */
    .cases__grid:has(> :nth-child(7):last-child) > :is(:first-child, :last-child) { grid-column: span 2; }
    .cases__grid:has(> :nth-child(7):last-child) > :is(:first-child, :last-child) .case-card__img { aspect-ratio: auto; block-size: calc(100% - 64px); min-block-size: 280px; }
  }
  .case-card { position: relative; display: grid; gap: 14px; text-decoration: none; }
  .case-card__img { overflow: hidden; border-radius: var(--r-card); aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--line); }
  .case-card__img picture, .case-card__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .9s var(--ease); }
  .case-card:hover .case-card__img img { transform: scale(1.05); }
  .case-card__body { display: grid; gap: 2px; padding-inline-end: 36px; }
  .case-card__client { font-family: var(--font-display); font-weight: 650; font-size: 1.375rem; letter-spacing: -.02em; }
  .case-card__scope { color: var(--muted); font-size: .9375rem; }
  .case-card__arrow { position: absolute; inset-block-end: 8px; inset-inline-end: 0; inline-size: 1.4em; block-size: 1.4em; color: var(--muted); transition: transform .4s var(--ease), color .2s; }
  .case-card:hover { color: var(--ink); }
  .case-card:hover .case-card__client, .case-card:hover .case-card__arrow { color: var(--accent-text); }
  .case-card:hover .case-card__arrow { transform: translate(4px, -4px); }

  /* Archiwum: ściana logo i „biurko” z drukami */
  .archive { padding-block-start: 0; }
  .archive__count { display: inline-block; vertical-align: super; font-size: .35em; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); letter-spacing: 0; }
  .archive__grid { display: grid; gap: 10px; list-style: none; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 640px) { .archive__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .archive__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  @media (min-width: 1360px) { .archive--logo .archive__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
  .archive__item {
    position: relative; overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid var(--line);
    aspect-ratio: 16 / 10; transition: transform .45s var(--spring), box-shadow .35s, border-color .3s;
  }
  .archive__item picture { position: absolute; inset: 6%; display: flex; align-items: center; justify-content: center; }
  .archive__item img { max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; object-fit: contain; }
  .archive__item:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow); border-color: transparent; z-index: 1; }
  .archive--papier .archive__item, .archive--wizytowki .archive__item {
    aspect-ratio: 3 / 4;
    background: radial-gradient(var(--dots) 1px, transparent 1.3px) 0 0 / 16px 16px, var(--surface-2);
  }
  .archive--wizytowki .archive__item { aspect-ratio: 4 / 3; }
  .archive--papier .archive__item picture, .archive--wizytowki .archive__item picture { inset: 9% 12%; }
  .archive--papier .archive__item img, .archive--wizytowki .archive__item img { box-shadow: 0 2px 4px rgb(21 21 24 / .08), 0 18px 30px -16px rgb(21 21 24 / .45); rotate: -1.2deg; transition: rotate .5s var(--spring); }
  .archive--papier .archive__item:nth-child(even) img, .archive--wizytowki .archive__item:nth-child(even) img { rotate: 1.4deg; }
  .archive--papier .archive__item:hover img, .archive--wizytowki .archive__item:hover img { rotate: 0deg; }

  /* Pojedyncza realizacja */
  .case-hero .page-hero__title { font-size: clamp(2.5rem, 6vw, 5.5rem); max-inline-size: 16ch; }
  .case-meta { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-block-start: 32px; padding-block-start: 24px; border-block-start: 1px solid var(--line); }
  .case-meta dt { font-size: .8125rem; color: var(--muted); }
  .case-meta dd { margin: 0; font-weight: 600; }
  .case-images__grid { display: grid; gap: 16px; }
  .case-images__item { overflow: hidden; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); }
  .case-images__item img { inline-size: 100%; block-size: auto; }
  /* Podpis pod zdjęciem (np. „Projekt” / „Po montażu”) */
  .case-images__item figcaption { padding: 10px 16px; font-weight: 600; font-size: .9375rem; border-block-start: 1px solid var(--line); }
  .case-images__grid .case-images__item--cap { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; }
  @media (min-width: 860px) {
    .case-images__grid--2, .case-images__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .case-images__grid--3 .case-images__item:first-child { grid-column: 1 / -1; }
    .case-images__grid--2 .case-images__item, .case-images__grid--3 .case-images__item:not(:first-child) { display: flex; align-items: center; justify-content: center; }
  }
  .case-story__grid { display: grid; gap: 24px; }
  .case-story__text { display: grid; gap: 18px; font-size: 1.1875rem; color: var(--ink-2); max-inline-size: 62ch; }
  .case-story__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 16px; }
  .case-quote { margin-block: 16px; padding: 28px 32px; border-radius: var(--r-card); background: var(--feat-bg); color: var(--feat-ink); }
  .case-quote p { font-family: var(--font-display); font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
  .case-quote p::before { content: "\201E"; color: var(--accent); }
  .case-quote p::after { content: "\201D"; }
  .case-quote figcaption { margin-block-start: 14px; font-size: .9375rem; color: var(--feat-muted); }
  @media (min-width: 1024px) { .case-story__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(48px, 7vw, 112px); } }
  .cases--more { padding-block-start: 0; }

  /* O nas */
  .about-stats { padding-block: 0 var(--section-y); }
  .about-stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; padding: 0; }
  @media (min-width: 860px) { .about-stats__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  .about-stats__grid li { display: grid; gap: 4px; padding: 24px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
  .about-stats__grid li:first-child { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .about-stats__grid li:first-child span { color: #3a2a1a; }
  .about-stats__grid strong { font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 760; letter-spacing: -.05em; line-height: 1; }
  .about-stats__grid span { color: var(--muted); font-size: .9375rem; }
  .about-more__grid { display: grid; gap: 40px; }
  @media (min-width: 1024px) { .about-more__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 7vw, 112px); align-items: start; } }
  .about-card { display: grid; gap: 14px; padding: 32px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
  .about-card address { font-style: normal; }
  .about-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; }

  /* Kontakt */
  .contact-cards { padding-block: 0 var(--section-y); }
  .contact-cards__grid { display: grid; gap: 12px; list-style: none; padding: 0; }
  @media (min-width: 860px) { .contact-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .contact-card {
    display: grid; gap: 6px; align-content: start; block-size: 100%; padding: 28px; border-radius: var(--r-card);
    background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: transform .5s var(--spring), box-shadow .4s;
  }
  a.contact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); color: var(--ink); }
  .contact-card--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  a.contact-card--accent:hover { color: var(--on-accent); }
  .contact-card__icon { inline-size: 2rem; block-size: 2rem; margin-block-end: 18px; color: var(--accent-text); }
  .contact-card--accent .contact-card__icon { color: var(--on-accent); }
  .contact-card__label { font-size: .875rem; opacity: .75; }
  .contact-card__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.125rem); letter-spacing: -.03em; line-height: 1.1; overflow-wrap: anywhere; }
  .contact-card__value--sm { font-size: clamp(1.25rem, 2vw, 1.5rem); }
  .contact-card__note { font-size: .9375rem; opacity: .75; }

  /* Polityka prywatności */
  .prose-section { padding-block-start: 0; }
  .prose { max-inline-size: 72ch; }
  .prose h2 { font-size: 1.5rem; margin-block: 40px 12px; }
  .prose h2:first-child { margin-block-start: 0; }
  .prose p, .prose li { color: var(--ink-2); }
  .prose ul { padding-inline-start: 1.2em; display: grid; gap: 6px; }

  /* Błędy formularza */
  .form__alert { padding: 14px 18px; border-radius: var(--r-field); background: #151518; color: #fff; font-weight: 600; }
  .field__err { font-size: .875rem; font-weight: 700; color: #5a0f00; }
  .field [aria-invalid="true"] { border-color: #5a0f00 !important; box-shadow: 0 0 0 3px rgb(90 15 0 / .25); }
  .check .field__err { grid-column: 2; }

  /* Poradnik (/poradnik/{slug}/) */
  .process__guide { margin-block-start: 28px; }
  .article__meta { margin-block-start: 20px; font-size: .9375rem; color: var(--muted); }
  .article { padding-block-start: 0; }
  .article__grid { display: grid; gap: 32px; }
  .article__toc { align-self: start; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-card); }
  .article__toc-title { font-weight: 700; margin-block-end: 10px; }
  .article__toc ol { display: grid; gap: 8px; padding-inline-start: 1.2em; }
  .article__toc a { color: var(--ink-2); text-decoration: none; }
  .article__toc a:hover { color: var(--accent-text); text-decoration: underline; }
  .article__toc-cta { margin-block-start: 18px; }
  .article__body { font-size: 1.0625rem; line-height: 1.7; }
  .article__body > * + * { margin-block-start: 16px; }
  .article__body h2 { scroll-margin-block-start: 120px; }
  .article__body a:not(.btn) { color: var(--accent-text); }
  .article__intro { font-size: 1.1875rem; }
  .article__figure { margin-block: 28px; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); background: #fff; }
  .article__figure img { display: block; inline-size: 100%; block-size: auto; }
  .article__figure figcaption { padding: 10px 16px; font-size: .9375rem; color: #55555c; background: #fff; border-block-start: 1px solid var(--line); }
  .article__figure--hero { margin-block-start: 0; }
  .checklist { padding: 22px 24px; border-radius: var(--r-card); background: var(--surface-2); }
  .checklist__title { font-weight: 700; margin-block-end: 10px; }
  .prose .checklist ul { list-style: none; padding: 0; }
  .checklist li { display: flex; gap: 10px; align-items: baseline; }
  .checklist .icon { flex: none; color: var(--accent-text); transform: translateY(2px); }
  .article__table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); }
  .article__table table { inline-size: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
  .article__table :is(th, td) { padding: 12px 14px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--line); }
  .article__table tbody tr:last-child :is(th, td) { border-block-end: 0; }
  .article__table thead th { font-size: .8125rem; color: var(--muted); font-weight: 600; }
  .article__price { white-space: nowrap; font-weight: 700; }
  .article__note { font-size: .9375rem; color: var(--muted); }
  .prose .article__files { padding: 0; }
  .prose .article__links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .article__links a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .9375rem; }
  .article__links a:hover { border-color: var(--accent); }
  @media (min-width: 1024px) {
    .article__grid { grid-template-columns: minmax(0, 260px) minmax(0, 720px); gap: clamp(40px, 6vw, 96px); }
    .article__toc { position: sticky; inset-block-start: calc(var(--header-h) + var(--header-top) + 24px); }
  }
}