/* ═══════════════════════════════════════════════════════════════════════
   DANACO GROUP — Web Design Kit (monolityczny CSS, self-contained)
   Wersja: 4.3  ·  Aktualizacja: 2026-05-31
   Wygenerowane z assets/css/_source/ — NIE edytować ręcznie.

   ARCHITEKTURA 3-WARSTWOWA:
   ┌─ Warstwa 1: PRIMITYWY  (tokens.css)
   ├─ Warstwa 2: SEMANTYKA  (typography.css — tokeny per region)
   └─ Warstwa 3: KOMPONENTY (reset, layout, components/*)

   SPEC FONTÓW v2:
   - Display    (Hero h1, PageHead h1/h2) → General Sans (Fontshare)
   - Headings   (Sec h3, h4, h5)          → Plus Jakarta Sans (Google)
   - Body       (lead, body, btn, input)   → Manrope (Google)
   - UI         (kicker, secno, linki...) → DM Sans (Google)
   - Editorial  (akcent „kierunek...")     → Fraunces italic (Google)
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Brinnan';
  src: url('../fonts/Brinnan-Black.woff2') format('woff2'),
       url('../fonts/Brinnan-Black.otf')   format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}


/* ════════════════════════════════════════════════════════════════════
   FILE: tokens.css
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   DANACO GROUP — Design Tokens (CSS Custom Properties)
   Wersja: 2.0.0  ·  Aktualizacja: 2026-05-31
   Źródło: KSIĘGA ZNAKU DANACO GROUP (2021) — primitywy marki niezmienione.
   Użycie:  @import url('tokens.css');
   Zgodność kontrastu tekstu skalibrowana pod WCAG 2.2 AA.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── FONT MARKI: Brinnan Black (zakupiony z prawami) ───
   Wgraj plik do assets/fonts/ aby aktywować oryginalny krój.
   Do czasu wgrania renderuje się bliski zamiennik (Manrope). */
@font-face {
  font-family: 'Brinnan';
  src: url('../fonts/Brinnan-Black.woff2') format('woff2'),
       url('../fonts/Brinnan-Black.otf')   format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
:root {

  /* ─── KOLORY MARKI — PRIMITYWY (z księgi znaku) ─── */
  --brand-yellow:        #FDD000;  /* żółty element strzałki  C2 M17 Y93 K0 */
  --brand-blue-solid:    #0084B2;  /* font bez gradientu      C82 M34 Y16 K3 */
  --brand-cyan:          #1AB4EA;  /* górny stop gradientu */
  --brand-navy:          #22325C;  /* dolny stop gradientu */
  --brand-mono-grey:     #DADADA;  /* szarość strzałki (mono) K20 */
  --brand-ink:           #1A1A1A;  /* podpis „HOLDING” */

  /* ─── RAMPA: BLUE (kolor wiodący) ─── */
  --blue-50:   #ECF8FE;
  --blue-100:  #CFEEFB;
  --blue-200:  #A6DFF6;
  --blue-300:  #66C8EE;
  --blue-400:  #1AB4EA;   /* = brand-cyan */
  --blue-500:  #0E9BD0;
  --blue-600:  #0084B2;   /* = brand-blue-solid */
  --blue-700:  #0A6486;
  --blue-800:  #14406A;
  --blue-900:  #22325C;   /* = brand-navy */
  --blue-950:  #131D33;

  /* ─── RAMPA: YELLOW (akcent) ─── */
  --yellow-200: #FFF1A8;
  --yellow-300: #FEE45C;
  --yellow-400: #FDD000;  /* = brand-yellow */
  --yellow-500: #E6BC00;
  --yellow-600: #B89400;
  --yellow-700: #8A6E00;  /* amber — tekst/ikony na jasnym (AA) */

  /* ─── RAMPA: NEUTRAL (chłodna, oparta na navy) ─── */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F5F8FB;
  --neutral-100: #ECEFF3;
  --neutral-200: #DDE3EA;
  --neutral-300: #C3CCD6;
  --neutral-400: #9AA6B3;
  --neutral-500: #6B7785;
  --neutral-600: #4A5562;
  --neutral-700: #333D49;
  --neutral-800: #1F2733;
  --neutral-900: #131A24;

  /* ─── SEMANTYKA: TŁO / POWIERZCHNIE ─── */
  --bg-default:   #F5F8FB;
  --bg-subtle:    #ECEFF3;
  --bg-surface:   #FFFFFF;
  --bg-sunken:    #E6ECF2;
  --bg-inverse:   #131D33;
  --bg-inverse-2: #22325C;
  --bg-overlay:   rgba(19, 29, 51, 0.58);

  /* ─── SEMANTYKA: TEKST ─── */
  --text-strong:   #131A24;                  /* nagłówki — 15.4:1 na bg */
  --text-body:     #333D49;                  /* tekst główny — 9.6:1 */
  --text-muted:    #5A6573;                  /* pomocniczy — 5.3:1 (AA) */
  --text-subtle:   #7C8794;                  /* ~3:1 — tylko tekst dekoracyjny ≥24px / elementy nieinformacyjne */
  --text-link:     #0A6486;                  /* link — 5.9:1 (AA) */
  --text-on-dark:        #F5F8FB;
  --text-on-dark-muted:  rgba(245, 248, 251, 0.72);

  /* ─── SEMANTYKA: AKCENTY / UI ─── */
  --color-primary:        #0084B2;  /* akcent marki — wypełnienia / duży tekst (kontrast 4.25:1 — NIE dla tekstu normalnego) */
  --color-primary-button: #0A6486;  /* tło CTA z białym tekstem — AA 6.6:1 */
  --color-primary-hover:  #0A6486;
  --color-primary-strong: #0A6486;  /* tekst/link wariant AA */
  --color-accent:         #FDD000;  /* tylko wypełnienia/podkreślenia */
  --color-accent-strong:  #8A6E00;  /* tekst akcentowy AA na jasnym */
  --color-cyan:           #1AB4EA;

  /* ─── SEMANTYKA: OBRAMOWANIA / LINIE ─── */
  --border-default: #DDE3EA;
  --border-strong:  #C3CCD6;
  --border-glass:   rgba(19, 29, 51, 0.12);
  --rule:           rgba(19, 29, 51, 0.10);
  --rule-accent:    rgba(253, 208, 0, 0.45);
  --focus-ring:     #0E9BD0;

  /* ─── SEMANTYKA: STANY ─── */
  --state-success:    #1E8E5A;
  --state-success-bg: #E4F4EC;
  --state-warning:    #B89400;  /* tła / obrysy plakietek */
  --state-warning-text: #8A6E00; /* tekst / ikona stanu warning — AA 4.57:1 */
  --state-warning-bg: #FFF6D6;
  --state-danger:     #D1453B;
  --state-danger-bg:  #FBE7E5;
  --state-info:       #0084B2;
  --state-info-bg:    #E4F3FA;

  /* ─── GRADIENTY MARKI ─── */
  --grad-symbol:    linear-gradient(90deg,  #1AB4EA 0%, #22325C 100%);  /* znak: 0° */
  --grad-wordmark:  linear-gradient(180deg, #1AB4EA 0%, #22325C 100%);  /* font: -90° */
  --grad-brand:     linear-gradient(135deg, #22325C 0%, #0084B2 55%, #1AB4EA 100%);
  --grad-hero:      linear-gradient(160deg, #131D33 0%, #22325C 48%, #0A4E6E 100%);
  --grad-accent:    linear-gradient(90deg,  #FDD000 0%, #FEE45C 100%);
  --grad-rule-gold: linear-gradient(90deg, transparent, #FDD000 20%, #FEE45C 50%, #FDD000 80%, transparent);

  /* Reguła proporcji: Niebieski 60% · Off-white 28% · Żółty 7% · Navy 5% */

  /* ─── TYPOGRAFIA: RODZINY (primitywy — NIE używać bezpośrednio w komponentach,
        tylko przez semantyczne tokeny z typography.css) ─── */
  --ff-general:  'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;   /* Fontshare — display Kulczyk-like */
  --ff-jakarta:  'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;      /* Google — humanistic geometric */
  --ff-manrope:  'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;        /* Google — body geometric */
  --ff-dmsans:   'DM Sans', -apple-system, 'Segoe UI', sans-serif;                /* Google — low-contrast UI */
  --ff-fraunces: 'Fraunces', Georgia, 'Times New Roman', serif;                   /* Google — serif edytorski (akcent) */
  --ff-mono:     'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace;   /* fallback dla `.mono` jeśli używany */

  /* Aliasy historyczne — wskazują na primitywy. NIE używać w nowym kodzie. */
  --ff-display:  var(--ff-general);
  --ff-body:     var(--ff-manrope);
  --ff-serif:    var(--ff-fraunces);

  /* ─── TYPOGRAFIA: SKALA ROZMIARÓW ─── */
  --fs-micro:    0.6875rem;  /* 11px */
  --fs-caption:  0.75rem;    /* 12px */
  --fs-small:    0.875rem;   /* 14px */
  --fs-body:     1rem;       /* 16px */
  --fs-lead:     1.125rem;   /* 18px */
  --fs-h4:       1.25rem;    /* 20px */
  --fs-h3:       1.5rem;     /* 24px */
  --fs-h2:       2rem;       /* 32px */
  --fs-h1:       2.5rem;     /* 40px */
  --fs-display:  3.25rem;    /* 52px */
  --fs-hero:     4.25rem;    /* 68px */

  /* ─── TYPOGRAFIA: GRUBOŚCI ─── */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;  /* uwaga: krój Brinnan „Black" zmapowany na 800 (jedyny dostępny plik) */

  /* ─── TYPOGRAFIA: INTERLINIA / TRACKING ─── */
  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-normal:   1.55;
  --lh-relaxed:  1.7;
  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.14em;

  /* ─── SPACING (baza 4px) ─── */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 80px;
  --space-4xl: 128px;

  /* ─── BORDER RADIUS ─── */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ─── CIENIE / ELEWACJA (oparte na navy) ─── */
  --shadow-sm:   0 1px 2px rgba(19, 29, 51, 0.06);
  --shadow-md:   0 4px 12px rgba(19, 29, 51, 0.08);
  --shadow-lg:   0 10px 28px rgba(19, 29, 51, 0.12);
  --shadow-xl:   0 22px 48px rgba(19, 29, 51, 0.16);
  --shadow-blue: 0 12px 30px rgba(0, 132, 178, 0.28);
  --shadow-focus: 0 0 0 3px rgba(14, 155, 208, 0.4);

  /* ─── MOTION ─── */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:       cubic-bezier(0.5, 0, 0.9, 0.4);
  --ease-out:      cubic-bezier(0.1, 0.6, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast:      140ms;
  --dur-normal:    240ms;
  --dur-slow:      360ms;
  --dur-slower:    560ms;

  /* ─── Z-INDEX ─── */
  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ─── LAYOUT ─── */
  --nav-height:      72px;
  --sidebar-width:   264px;
  --content-max:     720px;
  --page-max:        1840px;   /* szerszy kontener — responsywnie na FullHD/4K */
  --page-margin:     clamp(20px, 3vw, 64px);
}

/* ═══ DARK MODE ═══ */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"], :root[data-theme="dark"] {
    --bg-default:  #0E1626;
    --bg-subtle:   #15203A;
    --bg-surface:  #18243F;
    --bg-sunken:   #0B1322;
    --bg-inverse:  #ECF8FE;
    --text-strong: #F5F8FB;
    --text-body:   #C7D2DF;
    --text-muted:  #93A1B3;
    --text-subtle: #6B7A8E;
    --text-link:   #66C8EE;
    --color-primary: #1AB4EA;
    --color-primary-hover: #66C8EE;
    --border-default: rgba(245,248,251,0.12);
    --border-strong:  rgba(245,248,251,0.22);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 28px rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"] {
  --bg-default:#0E1626; --bg-subtle:#15203A; --bg-surface:#18243F; --bg-sunken:#0B1322;
  --text-strong:#F5F8FB; --text-body:#C7D2DF; --text-muted:#93A1B3; --text-link:#66C8EE;
  --color-primary:#1AB4EA; --border-default:rgba(245,248,251,0.12); --border-strong:rgba(245,248,251,0.22);
}

/* ═══ KLASY UŻYTKOWE ═══ */
.dg-text-strong { color: var(--text-strong); }
.dg-text-body   { color: var(--text-body); }
.dg-text-muted  { color: var(--text-muted); }
.dg-text-blue   { color: var(--color-primary-strong); }
.dg-text-accent { color: var(--color-accent-strong); }
.dg-bg-paper    { background: var(--bg-surface); }
.dg-bg-cream    { background: var(--bg-subtle); }
.dg-bg-inverse  { background: var(--bg-inverse); color: var(--text-on-dark); }

/* ════════════════════════════════════════════════════════════════════
   FILE: typography.css
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   DANACO GROUP — Typografia (warstwa 2: semantyka per region)
   Wersja: 1.0  ·  Aktualizacja: 2026-05-31

   Tu i tylko tu definiujemy ROZMIARY/WAGI tekstu per region layoutu.
   Komponenty (header.css, hero.css, section.css, footer.css …) używają
   wyłącznie tych tokenów — NIE czytają primitywów z tokens.css ani nie
   wpisują wartości "na sztywno".

   ZASADA: zmieniasz tekst w sekcji → edytujesz tylko sekcję --sec-*
                                       (header, hero, footer NIE drgną).

   Bazuje na primitywach z tokens.css.
   ═══════════════════════════════════════════════════════════════════════ */

:root {

  /* ─── BAZA GLOBALNA (fallback gdy region nie nadpisze) ─── */
  --t-base-size:         clamp(1.04rem, 0.55vw + 0.92rem, 1.16rem);
  --t-base-line:         1.72;
  --t-base-weight:       var(--fw-regular);
  --t-base-color:        var(--ink-soft);
  --t-base-bg:           var(--paper);
  --t-base-family:       var(--ff-body);

  /* ─── KOLORY-SKRÓTY WEWNĘTRZNE ─── */
  --ink:                 #18233B;   /* nagłówki — głęboki navy (zgodne z poprzednim styles.css) */
  --ink-soft:            #3B4658;   /* tekst */
  --ink-muted:           #6A7486;   /* pomocniczy */
  --gold:                #8A6E00;   /* złoty akcent — AA */
  --gold-line:           #C9A227;   /* złoty cienki dekoracyjny */
  --cream:               #F6F3EC;
  --cream-2:             #F1ECE1;
  --paper:               #FFFFFF;
  --line:                #E7E2D6;   /* hairline */
  --line-cool:           #E4E9EF;

  /* ════════════════════════════════════════════════════════════════════
     MAPOWANIE SEMANTYCZNE FONTÓW PER ROLA (spec v2 — 2026-05-31)

     Display    →  General Sans   (Fontshare; hero h1, page-head h1/h2)
     Headings   →  Plus Jakarta   (Google; sec h3, h4, h5)
     Body       →  Manrope        (Google; lead, body, btn, input)
     UI         →  DM Sans        (Google; kicker, secno, linki, caption, table head)
     Editorial  →  Fraunces ital  (Google; akcent „kierunek wzrostu.")
     ════════════════════════════════════════════════════════════════════ */
  --ff-display:    var(--ff-general);
  --ff-headings:   var(--ff-jakarta);
  --ff-body-text:  var(--ff-manrope);   /* alias bez kolizji ze starym --ff-body z tokens */
  --ff-ui:         var(--ff-dmsans);
  --ff-editorial:  var(--ff-fraunces);

  /* Aliasy używane w komponentach jako selektor per region */
  --ff-head:       var(--ff-headings);  /* domyślny font nagłówków sekcji */

  /* ════════════════════════════════════════════════════════════════════
     NAGŁÓWEK STRONY (.site-header) — link = DM Sans (UI)
     ════════════════════════════════════════════════════════════════════ */
  --nav-link-family:      var(--ff-ui);
  --nav-link-size:        0.95rem;          /* z 0.84 — czytelniejsze */
  --nav-link-weight:      var(--fw-semibold);
  --nav-link-tracking:    0.1em;
  --nav-link-transform:   uppercase;
  --nav-link-color:       var(--ink-soft);
  --nav-link-color-on:    var(--ink);

  --nav-utility-family:   var(--ff-ui);
  --nav-utility-size:     0.95rem;          /* z 0.78 — PL/EN i login czytelne */
  --nav-utility-weight:   var(--fw-semibold);
  --nav-utility-tracking: 0.08em;

  --nav-icon-size:        40px;             /* z 32 — ikonki social/login */
  --nav-icon-svg:         18px;             /* z 15 — wnętrze ikonki */

  --nav-brand-height:     56px;             /* z 50 — większe logo */
  --nav-row-height:       152px;            /* z 128 — pełne 2.5 linii (grubszy header) */
  --nav-row-height-mobile: 88px;

  /* ════════════════════════════════════════════════════════════════════
     HERO (sekcja powitalna .hero) — h1 = General Sans, lead = Manrope, kicker = DM Sans
     ════════════════════════════════════════════════════════════════════ */
  --hero-kicker-family:   var(--ff-ui);
  --hero-kicker-size:     1rem;      /* podniesione: 0.78 → 0.88 → 1rem */
  --hero-kicker-weight:   var(--fw-semibold);
  --hero-kicker-tracking: 0.22em;

  --hero-h1-family:       var(--ff-display);
  --hero-h1-size:         clamp(3.1rem, 6.6vw, 6.2rem);
  --hero-h1-weight:       var(--fw-light);
  --hero-h1-line:         1.04;
  --hero-h1-tracking:     -0.025em;
  --hero-h1-color:        var(--ink);

  --hero-lead-family:     var(--ff-body-text);
  --hero-lead-size:       clamp(1.2rem, 1.6vw, 1.5rem);
  --hero-lead-weight:     var(--fw-regular);
  --hero-lead-color:      var(--ink-soft);

  --hero-scroll-family:   var(--ff-ui);
  --hero-scroll-size:     0.7rem;
  --hero-scroll-tracking: 0.2em;

  /* ════════════════════════════════════════════════════════════════════
     PAGE HEAD (.page-head) — h1/h2 = General Sans, crumbs = DM Sans, lead = Manrope
     ════════════════════════════════════════════════════════════════════ */
  --ph-h1-family:         var(--ff-display);
  --ph-h1-size:           clamp(3.6rem, 7.5vw, 6.8rem);   /* większe h1 podstron */
  --ph-h1-weight:         var(--fw-light);
  --ph-h1-tracking:       -0.025em;
  --ph-lead-family:       var(--ff-body-text);
  --ph-lead-size:         clamp(1.3rem, 1.6vw, 1.7rem);
  --ph-crumbs-family:     var(--ff-ui);
  --ph-crumbs-size:       0.74rem;
  --ph-crumbs-tracking:   0.12em;

  /* ════════════════════════════════════════════════════════════════════
     SEKCJE ZASADNICZE (.section …)
     h1/h2 = General Sans (display), h3/h4/h5 = Plus Jakarta (headings),
     body/lead = Manrope, kicker/secno/caption = DM Sans, akcent = Fraunces italic
     ════════════════════════════════════════════════════════════════════ */
  --sec-h1-family:        var(--ff-display);
  --sec-h1-size:          clamp(2.6rem, 5.4vw, 4.6rem);
  --sec-h1-weight:        var(--fw-light);

  --sec-h2-family:        var(--ff-display);
  --sec-h2-size:          clamp(2rem, 4vw, 3.2rem);
  --sec-h2-weight:        var(--fw-light);

  --sec-h3-family:        var(--ff-headings);
  --sec-h3-size:          clamp(1.4rem, 2.3vw, 1.95rem);
  --sec-h3-weight:        var(--fw-regular);

  --sec-h4-family:        var(--ff-headings);
  --sec-h4-size:          1.3rem;
  --sec-h4-weight:        var(--fw-medium);

  --sec-h5-family:        var(--ff-headings);
  --sec-h5-size:          1.05rem;
  --sec-h5-weight:        var(--fw-medium);

  --sec-body-family:      var(--ff-body-text);
  --sec-body-size:        clamp(1rem, 0.4vw + 0.92rem, 1.1rem);
  --sec-body-weight:      var(--fw-regular);
  --sec-body-line:        1.7;
  --sec-body-color:       var(--ink-muted);

  --sec-lead-family:      var(--ff-body-text);
  --sec-lead-size:        clamp(1.18rem, 1.5vw, 1.45rem);
  --sec-lead-weight:      var(--fw-regular);
  --sec-lead-line:        1.62;
  --sec-lead-color:       var(--ink-muted);

  --sec-kicker-family:    var(--ff-ui);
  --sec-kicker-size:      1rem;      /* podniesione: 0.78 → 0.88 → 1rem */
  --sec-kicker-weight:    var(--fw-semibold);
  --sec-kicker-tracking:  0.22em;
  --sec-kicker-color:     var(--gold);

  --sec-secno-family:     var(--ff-ui);
  --sec-secno-size:       1rem;        /* tożsame z kicker — spójność wizualna */
  --sec-secno-tracking:   0.2em;

  --sec-caption-family:   var(--ff-ui);
  --sec-caption-size:     var(--fs-small);
  --sec-caption-color:    var(--ink-muted);

  --sec-editorial-family: var(--ff-editorial);
  --sec-editorial-style:  italic;

  /* Akapit w bloku statement / onas (większy, edytorski — serif Fraunces) */
  --sec-statement-family: var(--ff-editorial);
  --sec-statement-size:   clamp(1.75rem, 3.2vw, 3rem);
  --sec-statement-line:   1.28;
  --sec-statement-weight: var(--fw-regular);

  /* ════════════════════════════════════════════════════════════════════
     KOMPONENT: BUTTON (.btn) — Manrope (body family)
     ════════════════════════════════════════════════════════════════════ */
  --btn-family:           var(--ff-body-text);
  --btn-size:             0.84rem;
  --btn-weight:           var(--fw-semibold);
  --btn-tracking:         0.06em;
  --btn-transform:        uppercase;
  --btn-min-h:            52px;
  --btn-padding-x:        30px;

  /* ════════════════════════════════════════════════════════════════════
     KOMPONENT: TLINK (.tlink — link tekstowy ze strzałką) — DM Sans (linki)
     ════════════════════════════════════════════════════════════════════ */
  --tlink-family:         var(--ff-ui);
  --tlink-size:           0.82rem;
  --tlink-weight:         var(--fw-semibold);
  --tlink-tracking:       0.12em;
  --tlink-transform:      uppercase;

  /* ════════════════════════════════════════════════════════════════════
     KOMPONENT: FORM (.field) — label DM Sans, input Manrope
     ════════════════════════════════════════════════════════════════════ */
  --form-label-family:    var(--ff-ui);
  --form-label-size:      0.78rem;
  --form-label-weight:    var(--fw-semibold);
  --form-label-tracking:  0.06em;
  --form-input-family:    var(--ff-body-text);
  --form-input-min-h:     52px;
  --form-hint-family:     var(--ff-ui);
  --form-hint-size:       var(--fs-caption);

  /* ════════════════════════════════════════════════════════════════════
     KOMPONENT: TABLE (table.dg) — head DM Sans, body Manrope
     ════════════════════════════════════════════════════════════════════ */
  --tbl-body-family:      var(--ff-body-text);
  --tbl-body-size:        var(--fs-small);
  --tbl-head-family:      var(--ff-ui);
  --tbl-head-size:        0.72rem;
  --tbl-head-tracking:    0.1em;

  /* ════════════════════════════════════════════════════════════════════
     STOPKA (.site-footer)
     h5 = Plus Jakarta · linki/text = DM Sans · brand p = Manrope · legal = DM Sans
     ════════════════════════════════════════════════════════════════════ */
  --foot-heading-family:    var(--ff-headings);
  --foot-heading-size:      0.84rem;            /* UPPERCASE + tracking */
  --foot-heading-weight:    var(--fw-semibold);
  --foot-heading-tracking:  0.18em;
  --foot-heading-transform: uppercase;

  /* ─── Treść stopki — JEDNAKOWY ROZMIAR 1rem dla wszystkich tekstów ─── */
  --foot-text-size:       1rem;                /* 16px — bazowy dla całej treści */

  --foot-link-family:     var(--ff-ui);        /* DM Sans dla linków */
  --foot-link-size:       var(--foot-text-size);

  --foot-body-family:     var(--ff-body-text); /* Manrope dla brand description */
  --foot-body-size:       var(--foot-text-size);

  --foot-legal-family:    var(--ff-ui);
  --foot-legal-size:      var(--foot-text-size); /* = 1rem (16px) zamiast 0.95 */
  --foot-legal-tracking:  0;

  --foot-logo-height:     44px;
}

/* ════════════════════════════════════════════════════════════════════
   FILE: reset.css
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   RESET + BAZA GLOBALNA
   Tu są wyłącznie reguły, które MUSZĄ być globalne (box-sizing, body
   font-family, focus-visible). Wszystko inne — w typografii regionów.
   ═══════════════════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

body {
  font-family: var(--t-base-family);
  font-size: var(--t-base-size);
  line-height: var(--t-base-line);
  font-weight: var(--t-base-weight);
  color: var(--t-base-color);
  background: var(--t-base-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* overflow-x: hidden — usunięte; psuje position:fixed dla .site-header */
}
/* Hero/page-head są scrolowanie pod fixed header — nie potrzebują padding-top */

img, svg { max-width: 100%; display: block; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--ink); }

ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--brand-yellow); color: var(--brand-navy); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ─── Skip-link i visually-hidden (a11y) — globalne ─── */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--brand-yellow); color: var(--brand-navy);
  padding: var(--space-2xs) var(--space-md);
  z-index: var(--z-toast);
  font-weight: var(--fw-semibold);
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}

/* ─── Reveal animacja (uniwersalna) ─── */
.reveal {
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
/* Animacja tylko gdy JS działa (klasa .js dodawana przez main.js).
   Bez JS treść jest od razu widoczna — strona nigdy nie jest pusta. */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ════════════════════════════════════════════════════════════════════
   FILE: layout.css
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT — siatka, kontener, sekcje, splity. Bez fontów.
   ═══════════════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}
.container--narrow { max-width: 980px; }

.section { padding-block: clamp(72px, 10vw, 144px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--cream { background: var(--cream); }
.section--paper { background: var(--paper); }
.section--cool  { background: var(--neutral-50); }
.section--ink   { background: var(--blue-950); color: var(--text-on-dark); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink p { color: rgba(245,248,251,.78); }

/* Section-head wewnątrz sekcji */
.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head.is-center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: var(--space-md); }
.section-head .lead { margin-top: var(--space-md); }

/* Grid */
.grid    { display: grid; gap: var(--space-lg); }
.grid-2  { grid-template-columns: repeat(2, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Split (2-kolumnowy) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.split--wide-left { grid-template-columns: 1.2fr 0.8fr; align-items: start; }
@media (max-width: 900px) { .split, .split--wide-left { grid-template-columns: 1fr; gap: var(--space-xl); } }

/* Stack i hairline */
.stack > * + * { margin-top: var(--space-md); }
.hairline { height: 1px; background: var(--line); border: 0; }

/* Pomocnicze */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* ════════════════════════════════════════════════════════════════════
   FILE: components/header.css
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   HEADER — scope #site-header. Używa tokenów --nav-* z typography.css.
   Zmiana w typografii sekcji NIE wpływa na ten plik.
   ═══════════════════════════════════════════════════════════════════════ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-normal);
}
.site-header.is-scrolled { box-shadow: 0 2px 24px rgba(19, 29, 51, 0.08); }

.nav {
  height: var(--nav-row-height);
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 48px);
}

.nav__brand { margin-right: auto; display: inline-flex; align-items: center; }
.nav__brand img { height: var(--nav-brand-height); width: auto; }
.nav__brand .logo-light { display: none; }
.nav__brand .logo-dark { display: block; }

.nav__menu { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 36px); }

.nav__link {
  font-family: var(--nav-link-family);
  font-size: var(--nav-link-size);
  font-weight: var(--nav-link-weight);
  letter-spacing: var(--nav-link-tracking);
  text-transform: var(--nav-link-transform);
  color: var(--nav-link-color);
  padding: 12px 2px;
  position: relative;
}
.nav__link:hover { color: var(--nav-link-color-on); }
.nav__link.is-active { color: var(--nav-link-color-on); }
.nav__link.is-active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--gold-line);
}

/* ─── Dropdown na zakładce („O nas", „Działalność", „Portfolio", „Danaco Share") ─── */
.nav__item {
  display: inline-flex; align-items: center;
  height: 100%;
  position: static;            /* dropdown jest full-width — pozycjonowany do .site-header */
}
.nav__item .nav__link {
  display: inline-flex; align-items: center; gap: 6px;
}
.nav__item .nav__link svg.nav__caret {
  width: 10px; height: 10px;
  opacity: .55;
  transition: transform var(--dur-fast), opacity var(--dur-fast);
  margin-top: 1px;
}
.nav__item:hover .nav__link svg.nav__caret,
.nav__item:focus-within .nav__link svg.nav__caret { transform: rotate(180deg); opacity: .85; }
.nav__item:hover > .nav__link,
.nav__item:focus-within > .nav__link { color: var(--nav-link-color-on); }
.nav__item:hover > .nav__link::after,
.nav__item:focus-within > .nav__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--gold-line);
}

/* Mega-menu — full-width pod paskiem nawigacyjnym */
.nav__dd {
  position: absolute;
  top: var(--nav-row-height, 72px);
  left: 0; right: 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 28px 64px rgba(19, 29, 51, 0.12);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-normal) var(--ease-standard),
              transform var(--dur-normal) var(--ease-standard),
              visibility var(--dur-normal);
  z-index: 90;
}
.nav__item:hover .nav__dd,
.nav__item:focus-within .nav__dd {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__dd-inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: clamp(32px, 4vw, 56px) clamp(20px, 4vw, 72px);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.nav__dd-intro h3 {
  font-family: var(--ff-head);
  font-weight: 300;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 var(--space-md);
  max-width: 18ch;
}
.nav__dd-intro h3 em {
  font-family: var(--ff-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}
.nav__dd-intro p {
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 38ch;
  margin-bottom: var(--space-md);
}
.nav__dd-intro .tlink {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink);
  font-family: var(--ff-head);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--gold-line);
  padding-bottom: 2px;
  margin-top: 6px;
}
.nav__dd-intro .tlink:hover { color: var(--gold); }
.nav__dd-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(20px, 3vw, 40px);
}
.nav__dd-link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0;
  color: var(--ink-soft);
  font-family: var(--ff-head);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--neutral-100);
  transition: color var(--dur-fast), padding var(--dur-fast);
}
.nav__dd-link::before {
  content: "—";
  color: var(--neutral-300);
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.nav__dd-link:hover {
  color: var(--gold);
  padding-left: 6px;
}
.nav__dd-link:hover::before { color: var(--gold-line); transform: translateX(2px); }

/* Sub-lista wewnątrz dropdownu (np. Danaco Policy w Danaco Share) */
.nav__dd-sublist {
  grid-column: 1 / -1;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(20px, 3vw, 40px);
}
.nav__dd-subhead {
  grid-column: 1 / -1;
  font-family: var(--ff-body);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 8px;
}
.nav__dd-sublist .nav__dd-link {
  border-bottom-color: var(--neutral-100);
}

.nav__utils {
  display: flex; align-items: center;
  gap: clamp(14px, 1.4vw, 22px);
  padding-left: clamp(16px, 2vw, 30px);
  border-left: 1px solid var(--line);
}

.lang {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--nav-utility-family);
  font-size: var(--nav-utility-size);
}
.lang__opt {
  font-weight: var(--fw-bold);
  letter-spacing: var(--nav-utility-tracking);
  color: var(--ink-muted);
}
.lang__opt.is-active { color: var(--ink); }
.lang__opt:not(.is-active):hover { color: var(--gold); }
.lang__sep { color: var(--border-strong); }

.nav__social {
  display: inline-grid; place-items: center;
  width: var(--nav-icon-size); height: var(--nav-icon-size);
  color: var(--ink-soft);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.nav__social svg { width: var(--nav-icon-svg); height: var(--nav-icon-svg); }
.nav__social:hover { color: #fff; background: var(--blue-700); border-color: var(--blue-700); }

.nav__login,
.nav__logout {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--nav-utility-family);
  font-size: var(--nav-utility-size);
  font-weight: var(--nav-utility-weight);
  letter-spacing: var(--nav-utility-tracking);
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.nav__login svg,
.nav__logout svg { width: var(--nav-icon-svg); height: var(--nav-icon-svg); flex: none; }
.nav__login:hover,
.nav__logout:hover { color: var(--gold); }

.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  color: var(--ink);
  margin-left: var(--space-2xs);
}
.nav__toggle svg { width: 26px; height: 26px; }

/* ─── MOBILE ─── */
@media (max-width: 1100px) {
  .nav { height: var(--nav-row-height-mobile); }
  .nav__menu { display: none; }
  .nav__utils { border-left: 0; padding-left: 0; gap: 14px; }
  .nav__login span,
  .nav__logout span { display: none; }
  .nav__toggle { display: inline-flex; }

  .nav__menu.is-open {
    display: flex;
    position: fixed; left: 0; right: 0; top: var(--nav-row-height-mobile); bottom: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    padding: var(--space-md);
    overflow-y: auto;
  }
  .nav__menu.is-open .nav__link {
    color: var(--ink);
    padding: var(--space-sm) var(--space-2xs);
    font-size: var(--fs-lead);
    border-bottom: 1px solid var(--line);
  }
  .nav__menu.is-open .nav__link.is-active::after { display: none; }

  /* Mobile dropdown — inline jako lista pod zakładką */
  .nav__menu.is-open .nav__item { display: block; height: auto; width: 100%; position: static; }
  .nav__menu.is-open .nav__dd {
    position: static;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    opacity: 1; visibility: visible; transform: none;
    background: var(--neutral-50);
    width: 100%;
  }
  .nav__menu.is-open .nav__dd-inner {
    grid-template-columns: 1fr;
    padding: var(--space-md) var(--space-2xs);
    gap: var(--space-md);
  }
  .nav__menu.is-open .nav__dd-list { grid-template-columns: 1fr; }
  .nav__menu.is-open .nav__dd-sublist { grid-template-columns: 1fr; }
}

/* Poza mobile: ukryj dropdown jeśli nav__menu NIE jest otwarty (gdy user wcześniej kliknął hamburger, a teraz wraca na desktop) */
@media (min-width: 1101px) {
  .nav__menu .nav__dd { /* normalny default — kontrolowany przez :hover/:focus-within wyżej */ }
}

/* ════════════════════════════════════════════════════════════════════
   FILE: components/hero.css
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   HERO — sekcja powitalna (.hero). Tokeny --hero-* z typography.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── HERO: dokładnie tyle ile zostaje w viewport po brandstrip ─── */
.hero {
  position: relative;
  /* height ostre — gwarantuje że hero zajmuje DOKŁADNIE 100vh - brandstrip
     (max-height nie zawsze jest honorowane przy flex align-items: center) */
  height: calc(100vh - var(--brandstrip-h, 96px));
  min-height: 600px;                              /* podłoga dla niskich ekranów */
  display: flex; align-items: center;
  color: var(--ink);
  overflow: hidden;
  background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 88%);
}
/* Na bardzo niskich ekranach (< 720px viewport) hero rośnie naturalnie */
@media (max-height: 720px) {
  .hero { height: auto; }
}

/* ─── CHEVRON Z LOGO (deco.png aspect 208×338 = 0.615:1 W:H) ───
   STRATEGIA:
   - Wysokość = 75% viewport (75vh)
   - Wyśrodkowany pionowo w hero
   - 30% szerokości WYSTAJE poza prawą krawędź viewport (translateX(30%))
   - Domyślnie: glossy/silver (grayscale + brightness) — frozen look
   - Hover: oryginalne barwy z księgi znaku (blue + yellow)
   ────────────────────────────────────────────────────────────────────────── */
.hero__wm {
  position: absolute !important;
  right: 12% !important;
  top: 46% !important;                           /* logo podniesione */
  bottom: auto !important;
  left: auto !important;
  height: 75vh !important;                       /* +15% (z 65vh) */
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate(10%, -50%) !important;    /* prawie nie wystaje */
  z-index: 1;                                     /* nad inner, by łapać hover */
  pointer-events: auto;                           /* logo łapie hover */
  cursor: default;
  /* GLOSSY / FROZEN domyślnie — bezbarwny srebrzysto-szklisty wygląd */
  filter: grayscale(1) brightness(1.5) contrast(0.55) saturate(0) !important;
  opacity: 0.45 !important;
  transition: filter 0.6s var(--ease-standard), opacity 0.6s var(--ease-standard) !important;
}
/* Hover na SAMYM LOGO — chevron nabiera oryginalnych barw */
.hero__wm:hover {
  filter: none !important;
  opacity: 1 !important;
}
@media (max-width: 980px) {
  .hero__wm { height: 60vh !important; opacity: 0.25; }
}

.hero__inner {
  position: relative; z-index: 1;
  padding-block: clamp(110px, 14vh, 200px) clamp(60px, 9vh, 110px);
}

/* Typografia hero — scope wyłącznie tutaj */
.hero .kicker {
  font-family: var(--hero-kicker-family);
  font-size: var(--hero-kicker-size);
  font-weight: var(--hero-kicker-weight);
  letter-spacing: var(--hero-kicker-tracking);
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 12px;
}
.hero .kicker::before { content: ""; width: 26px; height: 1px; background: var(--gold-line); }

.hero h1 {
  font-family: var(--hero-h1-family);
  font-size: var(--hero-h1-size);
  font-weight: var(--hero-h1-weight);
  line-height: var(--hero-h1-line);
  letter-spacing: var(--hero-h1-tracking);
  color: var(--hero-h1-color);
  margin-block: var(--space-lg);
  max-width: 18ch;
}
.hero h1 .accent {
  color: var(--gold);
  font-family: var(--ff-editorial);
  font-style: italic;
  font-weight: var(--fw-regular);
}

.hero .lead {
  font-family: var(--hero-lead-family);
  font-size: var(--hero-lead-size);
  font-weight: var(--hero-lead-weight);
  color: var(--hero-lead-color);
  max-width: 56ch;
}

.hero__scroll { font-family: var(--hero-scroll-family); }

.hero__actions {
  display: flex; flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: clamp(32px, 4vw, 48px);
}

.hero__scroll {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: var(--ink-muted);
  font-size: var(--hero-scroll-size);
  letter-spacing: var(--hero-scroll-tracking);
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
}
.hero__scroll svg { width: 18px; height: 18px; animation: hero-bob 2s var(--ease-standard) infinite; }

@keyframes hero-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ════════════════════════════════════════════════════════════════════
   FILE: components/section.css
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   SEKCJE ZASADNICZE — typografia treści głównej.
   Scope: wszystko WEWNĄTRZ .section (+ globalne fallbacki h1-h4 dla
   podstron bez .section). Używa tokenów --sec-* z typography.css.

   ZASADA: zmieniasz tutaj rozmiar tekstu — header, hero, footer pozostają
           niezmienione (mają własne tokeny --nav-* / --hero-* / --foot-*).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── BAZA: paragraf w sekcji = Manrope (body), max 64ch ─── */
p { font-family: var(--sec-body-family); max-width: 64ch; }
strong { color: var(--ink); font-weight: var(--fw-semibold); }

/* ─── NAGŁÓWKI: H1/H2 = General Sans (display), H3/H4/H5 = Plus Jakarta (headings) ─── */
h1, h2 {
  font-family: var(--sec-h1-family);  /* h1 i h2 = display (General Sans) */
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
h3, h4, h5 {
  font-family: var(--sec-h3-family);  /* h3, h4, h5 = headings (Plus Jakarta) */
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
h1 { font-size: var(--sec-h1-size); font-weight: var(--sec-h1-weight); }
h2 { font-size: var(--sec-h2-size); font-weight: var(--sec-h2-weight); }
h3 { font-size: var(--sec-h3-size); font-weight: var(--sec-h3-weight); }
h4 { font-size: var(--sec-h4-size); font-weight: var(--sec-h4-weight); letter-spacing: -0.01em; }
h5 { font-size: var(--sec-h5-size); font-weight: var(--sec-h5-weight); letter-spacing: -0.005em; }

/* ─── Lead (Manrope) ─── */
.lead {
  font-family: var(--sec-lead-family);
  font-size: var(--sec-lead-size);
  color: var(--sec-lead-color);
  line-height: var(--sec-lead-line);
  font-weight: var(--sec-lead-weight);
}

/* ─── Editorial (Fraunces italic — akcent „kierunek wzrostu.") ─── */
.editorial {
  font-family: var(--sec-editorial-family);
  font-weight: var(--fw-regular);
  font-style: var(--sec-editorial-style);
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* ─── Kicker / Eyebrow (DM Sans UI) ─── */
.kicker,
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sec-kicker-family);
  font-size: var(--sec-kicker-size);
  font-weight: var(--sec-kicker-weight);
  letter-spacing: var(--sec-kicker-tracking);
  text-transform: uppercase;
  color: var(--sec-kicker-color);
}
/* Kicker/eyebrow bez dekoracyjnej kreski (usunięte przez usera) */
.kicker::before,
.eyebrow::before { display: none; }
.kicker--center { justify-content: center; }
.kicker--light, .eyebrow--light { color: var(--brand-yellow); }
.kicker--light::before, .eyebrow--light::before { background: var(--brand-yellow); }

/* ─── Sec-numer (DM Sans UI) ─── */
.secno {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sec-secno-family);
  font-size: var(--sec-secno-size);
  letter-spacing: var(--sec-secno-tracking);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.secno b { color: var(--gold); font-weight: var(--fw-semibold); }
.secno::after { content: ""; width: 40px; height: 1px; background: var(--line); }

/* ─── Override v4: większy font treści głównej w komponentach (Manrope) ─── */
.area p, .card p, .navtile p, .acc-panel p, .hcard p, .tile p {
  font-family: var(--sec-body-family);
  font-size: var(--sec-body-size);
  line-height: var(--sec-body-line);
}
.value-row p, .vtl__item p, .onas-body p {
  font-family: var(--sec-body-family);
  font-size: clamp(1.04rem, 0.45vw + 0.95rem, 1.18rem);
  line-height: 1.7;
}

/* ════════════════════════════════════════════════════════════════════
   FILE: components/buttons.css
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   PRZYCISKI — .btn, .btn--*, .tlink
   Używa tokenów --btn-* i --tlink-* z typography.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── BTN — przycisk główny i warianty (Manrope) ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  min-height: var(--btn-min-h);
  padding: 0 var(--btn-padding-x);
  font-family: var(--btn-family);
  font-weight: var(--btn-weight);
  font-size: var(--btn-size);
  letter-spacing: var(--btn-tracking);
  text-transform: var(--btn-transform);
  white-space: nowrap;
  border-radius: 0;
  transition:
    background var(--dur-normal) var(--ease-standard),
    color var(--dur-normal),
    border-color var(--dur-normal);
}
.btn svg { width: 16px; height: 16px; transition: transform var(--dur-normal) var(--ease-spring); }
.btn:hover svg { transform: translateX(5px); }

.btn--primary       { background: var(--blue-950); color: #fff; }
.btn--primary:hover { background: var(--blue-900); color: #fff; }

.btn--gold       { background: var(--brand-yellow); color: var(--brand-navy); }
.btn--gold:hover { background: var(--yellow-300);  color: var(--brand-navy); }

.btn--outline       { background: transparent; color: var(--blue-950); border: 1px solid var(--blue-950); }
.btn--outline:hover { background: var(--blue-950); color: #fff; border-color: var(--blue-950); }

.btn--on-dark       { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.btn--on-dark:hover { background: #fff; color: var(--blue-950); border-color: #fff; }

.btn--solid-light       { background: #fff; color: var(--blue-950); }
.btn--solid-light:hover { background: var(--brand-yellow); color: var(--brand-navy); }

/* ─── TLINK — tekstowy link ze strzałką (DM Sans — linki) ─── */
.tlink {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--tlink-family);
  font-size: var(--tlink-size);
  font-weight: var(--tlink-weight);
  letter-spacing: var(--tlink-tracking);
  text-transform: var(--tlink-transform);
  color: var(--ink);
  border-radius: 0;
}
.tlink svg { width: 16px; height: 16px; transition: transform var(--dur-normal) var(--ease-spring); }
.tlink:hover { color: var(--gold); }
.tlink:hover svg { transform: translateX(5px); }
.tlink--gold  { color: var(--gold); }
.tlink--light { color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   FILE: components/card.css
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   KARTY — area, card, tile, navtile, hcard, statblock, stat
   Komponenty kart używane w sekcjach. Typografia → przez --sec-* / fallback.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── BLOK STATYSTYCZNY (key facts) — bez „okna w oknie" ─── */
.statblock {
  padding: clamp(28px, 3vw, 48px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.statblock .grid2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px);
}
.stat .num {
  font-family: var(--ff-display);  /* General Sans — duża cyfra wyróżnik */
  font-weight: var(--fw-light);
  font-size: clamp(2.8rem, 4.6vw, 4.2rem); line-height: 1;
  color: var(--gold); letter-spacing: -0.02em;
}
.stat .cap {
  font-family: var(--ff-ui);  /* DM Sans — caption */
  font-size: 0.8rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 12px;
  line-height: 1.4;
  display: block;
}

/* ─── KARTA UNIWERSALNA (.card) ─── */
.card {
  background: var(--paper); border: 1px solid var(--line);
  padding: var(--space-lg);
  transition:
    border-color var(--dur-normal),
    box-shadow var(--dur-normal),
    transform var(--dur-normal);
  height: 100%; position: relative;
}
.card:hover { border-color: var(--line-cool); box-shadow: 0 18px 48px rgba(19,29,51,.10); transform: translateY(-4px); }
.card h3, .card h4 { margin-bottom: var(--space-2xs); }
.card p { color: var(--ink-muted); }
.card__num { font-family: var(--ff-editorial); font-size: 1.6rem; color: var(--gold); line-height: 1; }
.card--line { border: 0; border-top: 1px solid var(--ink); padding: var(--space-md) 0 0; background: transparent; }
.card--line:hover { box-shadow: none; transform: none; border-top-color: var(--gold-line); }

/* ─── KAFLE ACCOR-LIKE (.tile) ─── */
.tile {
  position: relative; min-height: 360px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-lg);
  color: #fff;
  overflow: hidden;
  background: var(--blue-950);
}
.tile__img {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: transform var(--dur-slower) var(--ease-standard);
}
.tile:hover .tile__img { transform: scale(1.05); }
.tile__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,15,28,.15) 0%, rgba(8,15,28,.78) 100%);
}
.tile__body { position: relative; z-index: 2; }
.tile h3 { color: #fff; font-weight: var(--fw-regular); }
.tile p { color: rgba(245,248,251,.82); margin-top: var(--space-2xs); }
.tile .kicker { color: var(--brand-yellow); margin-bottom: var(--space-2xs); }
.tile .kicker::before { background: var(--brand-yellow); }

/* ─── KARTA OBSZARU (.area) ─── */
.area {
  display: flex; flex-direction: column; gap: 14px;
  padding: var(--space-lg);
  border: 1px solid var(--line);
  background: transparent;
  height: 100%;
  transition:
    border-color var(--dur-normal),
    box-shadow var(--dur-normal),
    transform var(--dur-normal);
}
.area:hover { border-color: var(--gold-line); box-shadow: 0 14px 36px rgba(19,29,51,.06); transform: translateY(-2px); }
.area__top { display: flex; align-items: center; justify-content: flex-end; }   /* chevron sam, bez .idx */
/* Chevron brand — strzałka jak w logo Danaco (»). W spoczynku navy, na hover żółty brand + przesunięcie */
.area .chev {
  width: 36px; height: 36px;
  color: var(--blue-700);
  stroke-width: 1.8;
  transition: color var(--dur-normal) var(--ease-standard), transform var(--dur-normal) var(--ease-spring);
}
.area:hover .chev {
  color: var(--brand-yellow);   /* żółty z logo */
  transform: translateX(6px);
}
.area .idx { display: none; }   /* numery 01,02 usunięte */
.area h3 { font-weight: var(--fw-regular); }
.area p { color: var(--ink-muted); flex: 1; }
.area .tag { margin-top: auto; }

/* ─── KARTY-WYRÓŻNIKI 3-up kremowe (.hcard) ─── */
.hcard { background: var(--cream); padding: clamp(28px, 3vw, 48px); height: 100%; }
.hcard .kicker { margin-bottom: var(--space-md); }
.hcard h3 { font-weight: var(--fw-regular); }
.hcard p { color: var(--ink-muted); margin-top: var(--space-sm); }

/* ─── DUŻE KAFLE NAWIGACYJNE (.navtile — wzorzec Kulczyk) ─── */
.navtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
@media (max-width: 820px) { .navtiles { grid-template-columns: 1fr; } }
.navtile {
  display: flex; flex-direction: column;
  min-height: 360px;
  padding: clamp(28px, 3vw, 44px);
  background: var(--blue-50);
  transition: transform var(--dur-normal) var(--ease-standard), box-shadow var(--dur-normal);
}
.navtile:nth-child(2) { background: var(--neutral-100); }
.navtile:nth-child(3) { background: #EAF0EC; }
.navtile:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(19,29,51,.10); }
.navtile h3 {
  font-family: var(--ff-display); font-weight: 500;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem); color: var(--ink);
  letter-spacing: -0.015em;
}
.navtile p { color: var(--ink-muted); margin-top: var(--space-md); flex: 1; }
.navtile .tlink { margin-top: var(--space-lg); }

/* ════════════════════════════════════════════════════════════════════
   FILE: components/form.css
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   FORMULARZE — pola, label, hint, banner demo.
   Używa tokenów --form-* z typography.css.
   ═══════════════════════════════════════════════════════════════════════ */

.field {
  display: flex; flex-direction: column;
  gap: 7px;
  margin-bottom: var(--space-md);
}

.field label {
  font-family: var(--form-label-family);
  font-size: var(--form-label-size);
  font-weight: var(--form-label-weight);
  letter-spacing: var(--form-label-tracking);
  text-transform: uppercase;
  color: var(--ink);
}

.field input,
.field textarea,
.field select {
  font-family: var(--form-input-family);
  min-height: var(--form-input-min-h);
  padding: 14px 16px;
  border: 1px solid var(--line-cool);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 1rem;
  transition: border-color var(--dur-fast);
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold);
}

.field .hint {
  font-family: var(--form-hint-family);
  font-size: var(--form-hint-size);
  color: var(--ink-muted);
}

/* ─── Banner trybu demonstracyjnego (.demo-banner) ─── */
.demo-banner {
  display: flex; align-items: flex-start;
  gap: var(--space-2xs);
  margin-block: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--state-warning-bg);
  border-left: 3px solid var(--gold-line);
  color: var(--state-warning-text);
  font-size: var(--fs-small);
  line-height: 1.5;
  border-radius: var(--radius-sm);
}
.demo-banner::before {
  content: "ⓘ";
  font-weight: var(--fw-bold);
}

/* ════════════════════════════════════════════════════════════════════
   FILE: components/accordion.css
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   ACCORDION — wzorzec Accor (obraz + zwijane panele)
   ═══════════════════════════════════════════════════════════════════════ */

.acc-wrap {
  max-width: 1080px;
  margin-inline: auto;
}
/* Lewy panel z chevronem usunięty — accordion na pełną szerokość */
.acc-media,
.acc-slide,
.acc-slide__num,
.acc-slide__title,
.acc-slide__rule,
.acc-slide__hint { display: none !important; }

.acc-media {
  position: sticky;
  top: calc(var(--nav-row-height) + 24px);
  aspect-ratio: 4/5;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}
@media (max-width: 920px) {
  .acc-media { position: relative; top: 0; aspect-ratio: 16/10; }
}
/* Subtelny chevron-watermark w tle (z księgi znaku, jasny) */
.acc-media::before {
  content: "";
  position: absolute;
  right: -8%; top: 50%;
  transform: translateY(-50%);
  width: 80%; aspect-ratio: 1/1;
  background-image: url('../img/motif/deco.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.acc-media img { display: none; } /* fallback dla starego HTML z <img> */

/* Editorial slide — synchronizowany z accordion item przez data-img */
.acc-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: clamp(36px, 5vw, 64px);
  opacity: 0;
  transition: opacity .55s var(--ease-standard);
  z-index: 1;
}
.acc-slide.is-active { opacity: 1; }
.acc-slide__num {
  font-family: var(--ff-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4rem, 9vw, 8rem);
  color: var(--gold);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.acc-slide__title {
  font-family: var(--ff-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
  max-width: 14ch;
  margin-top: var(--space-md);
}
.acc-slide__rule {
  width: 56px; height: 1px;
  background: var(--gold-line);
  border: 0;
  margin: var(--space-lg) 0 var(--space-md);
}
.acc-slide__hint {
  font-family: var(--ff-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.55;
  max-width: 32ch;
}
/* Subtelne gradienty per filar */
.acc-media:has(.acc-slide.is-active[data-img="eko"])    { background: linear-gradient(180deg, var(--paper) 0%, var(--blue-50) 100%); }
.acc-media:has(.acc-slide.is-active[data-img="ludzie"]) { background: linear-gradient(180deg, var(--paper) 0%, var(--cream-2) 100%); }
.acc-media:has(.acc-slide.is-active[data-img="esg"])    { background: linear-gradient(180deg, var(--paper) 0%, #EAF0EC 100%); }
.acc-media:has(.acc-slide.is-active[data-img="lad"])    { background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%); }

.acc-item { border-top: 1px solid var(--line); }
.acc-item:last-child { border-bottom: 1px solid var(--line); }

.acc-head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding: clamp(24px, 2.4vw, 36px) 0;
  text-align: left;
  font-family: var(--ff-headings);
  font-weight: var(--fw-regular);
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);     /* +27% — bardziej obecne nagłówki filar */
  color: var(--ink);
  letter-spacing: -0.012em;
}
.acc-head:hover { color: var(--gold); }
.acc-item.is-open .acc-head { color: var(--gold); }

.acc-icon {
  flex: none;
  width: 22px; height: 22px;
  position: relative;
  color: currentColor;
}
.acc-icon::before,
.acc-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.acc-icon::before { left: 0; right: 0; top: 10px; height: 1.5px; }
.acc-icon::after  { top: 0; bottom: 0; left: 10px; width: 1.5px; transition: transform .3s var(--ease-standard); }
.acc-item.is-open .acc-icon::after { transform: scaleY(0); }

.acc-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s var(--ease-standard);
}
.acc-panel__inner { padding-bottom: var(--space-lg); }
.acc-panel p {
  color: var(--ink-soft);
  line-height: 1.7;
  font-size: clamp(1.1rem, 0.5vw + 1rem, 1.25rem);
  max-width: 72ch;
}
.acc-panel p + p { margin-top: var(--space-md); }
.acc-panel p strong { color: var(--ink); }
.acc-panel .tlink { margin-top: var(--space-lg); }

/* ════════════════════════════════════════════════════════════════════
   FILE: components/timeline.css
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   OSIE CZASU — pozioma (.tl-*) i pionowa (.vtl-*)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── POZIOMA OŚ CZASU ─── */
.tl-tabs {
  display: flex; flex-wrap: wrap;
  gap: clamp(16px, 3vw, 48px);
  border-bottom: 1px solid var(--line);
}
.tl-tab {
  padding: 0 0 var(--space-md);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  position: relative;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.tl-tab:hover { color: var(--ink); }
.tl-tab.is-active { color: var(--ink); }
.tl-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gold-line);
}

.tl-panel { display: none; padding-top: clamp(28px, 4vw, 56px); }
.tl-panel.is-active { display: block; }
.tl-panel .yr {
  font-family: var(--ff-editorial);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--gold);
  line-height: 1;
}
.tl-panel h3 { font-weight: var(--fw-regular); margin-top: var(--space-sm); }
.tl-panel p { color: var(--ink-soft); margin-top: var(--space-md); }

/* ─── PIONOWA OŚ CZASU (Rok po roku) ─── */
.vtl {
  position: relative;
  max-width: 860px;
  padding-left: 44px;
}
.vtl::before {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--line);
}
.vtl__item {
  position: relative;
  padding-bottom: clamp(32px, 5vw, 64px);
}
.vtl__item:last-child { padding-bottom: 0; }
.vtl__item::before {
  content: "";
  position: absolute;
  left: -44px; top: 6px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--gold-line);
}
.vtl__yr {
  font-family: var(--ff-editorial);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--gold);
  line-height: 1;
}
.vtl__item h3 { font-weight: var(--fw-regular); margin-top: 10px; }
.vtl__item p { color: var(--ink-muted); margin-top: 10px; max-width: 60ch; }

/* ════════════════════════════════════════════════════════════════════
   FILE: components/misc.css
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   POZOSTAŁE KOMPONENTY — page-head, statement, onas, brandstrip, table,
   value-row, manifesto, founder, tag, monogram, imgblock, crumbs.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── PAGE HEAD (nagłówki podstron) ───
   UJEDNOLICONE Z .hero: identyczne umiejscowienie całej sekcji i treści
   jak na stronie startowej (różnica wyłącznie: brak znaku wodnego/logo). */
.page-head {
  position: relative;
  background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 88%);   /* jak .hero */
  height: calc(100vh - var(--brandstrip-h, 96px));   /* wysokość sekcji = jak .hero */
  min-height: 600px;                                  /* podłoga = jak .hero */
  display: flex; align-items: center;                 /* treść wyśrodkowana pionowo = jak .hero */
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
/* Na bardzo niskich ekranach hero rośnie naturalnie — jak .hero */
@media (max-height: 720px) {
  .page-head { height: auto; padding-block: clamp(140px, 18vh, 200px) clamp(60px, 9vh, 110px); }
}
.page-head__bg, .page-head__grid { display: none; }
.page-head .container {
  position: relative; z-index: 1;
  /* identyczny model paddingu jak .hero__inner — to samo umiejscowienie bloku treści */
  padding-block: clamp(110px, 14vh, 200px) clamp(60px, 9vh, 110px);
}
.page-head::after {
  content: "";
  position: absolute; z-index: 0;
  top: 50%; transform: translateY(-50%);              /* akcent wyśrodkowany — spójnie z treścią */
  right: calc((100% - 100vw) / 2);
  width: min(46vw, 640px);
  height: 64%;
  background: var(--blue-50);
  opacity: .6;
  pointer-events: none;
}
.page-head h1, .page-head h2 {
  font-family: var(--ph-h1-family);   /* General Sans — display */
  color: var(--ink);
  font-size: var(--ph-h1-size);
  font-weight: var(--ph-h1-weight);
  letter-spacing: var(--ph-h1-tracking);
  line-height: 1.04;
  max-width: 22ch;
}
.page-head .lead {
  font-family: var(--ph-lead-family);   /* Manrope */
  color: var(--ink-soft);
  margin-top: var(--space-xl);
  max-width: 56ch;
  font-size: var(--ph-lead-size);
  line-height: 1.5;
}

/* ─── BRADCRUMBS ─── */
.crumbs {
  font-family: var(--ph-crumbs-family);   /* DM Sans */
  font-size: var(--ph-crumbs-size);
  letter-spacing: var(--ph-crumbs-tracking);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-md);
}
.crumbs a { color: var(--ink-muted); }
.crumbs a:hover { color: var(--gold); }

/* ─── ZŁOTA LINIA OZDOBNA — usunięta przez usera ─── */
.gold-rule { display: none; }
.brand-bar { display: none; }

/* ─── PASEK MAREK (brandstrip) v3 — bez tła ciemnego, bez poziomych linii ─── */
:root { --brandstrip-h: 96px; }   /* używane przez .hero dla obliczenia 100vh = hero + brandstrip */

.brandstrip {
  border-top: 0 !important;        /* bez poziomej linii górnej */
  border-bottom: 0 !important;     /* bez poziomej linii dolnej */
  background: var(--paper) !important;   /* tło białe — zlewa się z sekcją */
  min-height: var(--brandstrip-h);
  display: flex; align-items: flex-start;   /* zawartość przy górnej krawędzi */
}
.brandstrip__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  padding-block: 4px 18px;                  /* mniejszy top — podciąga marki w górę */
  width: 100%;
}
/* Label "Marki grupy" — kicker style (globalny rozmiar, gold uppercase tracked) */
.brandstrip .lbl {
  font-family: var(--sec-kicker-family) !important;
  font-size: var(--sec-kicker-size) !important;
  font-weight: var(--sec-kicker-weight) !important;
  letter-spacing: var(--sec-kicker-tracking) !important;
  text-transform: uppercase !important;
  color: var(--sec-kicker-color) !important;
  white-space: nowrap;
  max-width: 9ch;
  line-height: 1.4;
}
.brandstrip .lbl::before,
.brandstrip .lbl::after { display: none !important; content: none !important; }

/* Lista marek — wycentrowany flex, marki rozłożone z subtelnym diamond między nimi */
.brandstrip__list {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
}

/* Nazwy marek — General Sans, normalna pisownia, większe i widoczne, navy.
   Bez ramek, bulletów, podkreśleń, separatorów. Rytm = sam odstęp. */
.brandstrip b {
  font-family: var(--ff-display) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem) !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  color: var(--brand-navy) !important;
  white-space: nowrap;
  line-height: 1.3;
  padding: 0 clamp(18px, 2.6vw, 40px) !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center;
  transition: color 0.3s var(--ease-standard), transform 0.3s var(--ease-standard);
  position: relative;
}
.brandstrip b::before,
.brandstrip b::after { content: none !important; display: none !important; }
.brandstrip b + b::before { content: none !important; }

/* Hover: subtle lift + gold */
.brandstrip b:hover {
  color: var(--gold) !important;
  cursor: default;
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .brandstrip__inner { grid-template-columns: 1fr; gap: var(--space-sm); }
  .brandstrip .lbl { text-align: center; max-width: none; }
  .brandstrip__list { justify-content: center; gap: 4px var(--space-sm); }
  .brandstrip b { padding: 0 var(--space-2xs) !important; }
  .brandstrip b + b::before { margin: 0 var(--space-2xs) 0 0; }
}

/* ─── INTRO GRID ─── */
.intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
}
@media (max-width: 940px) {
  .intro-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* ─── VALUE ROW (rząd „kluczowych wartości") ─── */
.value-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  align-items: start;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--line);
}
.value-row:last-child { border-bottom: 1px solid var(--line); }
.value-row .marker {
  font-family: var(--ff-editorial);
  font-size: 1.4rem;
  color: var(--gold);
  line-height: 1.2;
}
.value-row h3 { font-weight: var(--fw-regular); }

/* ─── MANIFEST (duży serif italic) ─── */
.manifesto {
  font-family: var(--ff-editorial);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 24ch;
}
.section--ink .manifesto { color: #fff; }
.manifesto .accent { color: var(--gold); font-style: normal; }
.section--ink .manifesto .accent { color: var(--brand-yellow); }

/* ─── PULLQUOTE ─── */
.pullquote { text-align: center; max-width: 18ch; margin-inline: auto; }
.pullquote .manifesto { max-width: none; }

/* ─── TABELA (table.dg) ─── */
.table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--ink);
}
table.dg {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--tbl-body-family);   /* Manrope */
  font-size: var(--tbl-body-size);
  min-width: 560px;
}
table.dg th, table.dg td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--line);
}
table.dg thead th {
  font-family: var(--tbl-head-family);   /* DM Sans */
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tbl-head-tracking);
  text-transform: uppercase;
  font-size: var(--tbl-head-size);
  color: var(--gold);
}
table.dg tbody tr:hover { background: var(--cream); }
table.dg td { color: var(--ink-soft); }

/* ─── TAGI ─── */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 0;
  color: var(--gold);
}
.tag--neutral { color: var(--ink-muted); }
.tag--dark    { color: var(--brand-yellow); }

/* ─── IMGBLOCK / MONOGRAM ─── */
.imgblock { aspect-ratio: 5/4; background: var(--blue-950) center/cover no-repeat; }
.imgblock--tall { aspect-ratio: 4/5; }
.feature .imgblock { box-shadow: var(--shadow-lg); }
.monogram {
  display: grid; place-items: center;
  aspect-ratio: 1/1;
  background: var(--grad-hero);
  color: #fff;
  font-family: var(--ff-editorial);
  font-size: clamp(3rem, 7vw, 5.5rem);
  letter-spacing: .04em;
}

/* ─── STATEMENT (wielkie zdanie serifowe + tint, wzorzec Kulczyk) ─── */
/* Statement — czysty editorial pull-quote, bez kolorowych prostokątów */
.statement {
  padding-block: clamp(96px, 12vw, 180px);
  position: relative;
}
.statement__inner {
  max-width: 1100px;
  margin-inline: auto;
  text-align: center;
  display: block;
  padding: 0;
}
.statement__tint,
.statement__tint--sage { display: none; }
.statement .lbl {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--ff-body);
  font-size: 0.82rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(28px, 3vw, 44px);
}
.statement .lbl::before,
.statement .lbl::after {
  content: "";
  width: 36px; height: 1px;
  background: var(--gold-line);
}
.statement .stmt {
  font-family: var(--ff-editorial);
  font-weight: var(--fw-regular);
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 26ch;
  margin-inline: auto;
}
.statement .stmt .accent {
  color: var(--gold);
  font-style: italic;
}

/* ─── ONAS (sekwencja, eyebrow z lewej, zdanie serif + akapity — Kulczyk) ─── */
.onas { position: relative; max-width: 1280px; margin-inline: auto; }
.onas-row {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: start;
  padding-block: clamp(48px, 6vw, 88px);
}
.onas-row + .onas-row { border-top: 1px solid var(--line); }
.onas-row .lbl {
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 16px;
}
.onas-stmt {
  font-family: var(--ff-editorial);
  font-weight: var(--fw-regular);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 42ch;
}
.onas-stmt .accent { color: var(--gold); }
.onas-body {
  margin-top: var(--space-lg);
  max-width: 72ch;
}
.onas-body p {
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 0.4vw + 0.98rem, 1.18rem);
  line-height: 1.7;
}
.onas-body p + p { margin-top: var(--space-md); }
.onas-more {
  display: flex; flex-wrap: wrap;
  gap: clamp(20px, 4vw, 56px);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  margin-top: var(--space-lg);
}
/* dekoracyjne kwadraty — wyłączone (były niezgrabne) */
.onas-deco { display: none; }
@media (max-width: 860px) {
  .onas-row { grid-template-columns: 1fr; gap: var(--space-xs); }
  .onas-row .lbl { padding-top: 0; }
}

/* ─── FOUNDER (blok założyciela, Kulczyk-style) ─── */
.founder {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
@media (max-width: 860px) {
  .founder { grid-template-columns: 1fr; gap: var(--space-xl); }
}
.founder h2 {
  font-family: var(--ff-editorial);
  font-weight: var(--fw-regular);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.06;
}
.founder .role {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--space-md);
}
.founder__media {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}
.founder__media .imgblock,
.founder__media .monogram {
  position: relative; z-index: 1;
  aspect-ratio: 4/5;
}
.founder__media .imgblock { object-fit: cover; }
.founder__media::after {
  content: "";
  position: absolute;
  right: -5%; bottom: -5%;
  width: 58%; height: 58%;
  background: var(--blue-50);
  z-index: 0;
}

/* ════════════════════════════════════════════════════════════════════
   FILE: components/footer.css
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   STOPKA — scope .site-footer. Używa tokenów --foot-* z typography.css.
   Zmiana typografii sekcji NIE wpływa na ten plik.
   ═══════════════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--blue-950);
  color: rgba(245, 248, 251, 0.78);
  padding-block: clamp(64px, 8vw, 104px) var(--space-xl);
}

.site-footer a {
  color: rgba(245, 248, 251, 0.78);
  transition: color var(--dur-fast);
}
.site-footer a:hover { color: #fff; }

/* Stopka — klasyczny układ: brand (szerszy) + 4 kolumny linków, RÓWNO ROZŁOŻONE
   na całej szerokości kontenera. Wszystko zaczyna na górze (align-items: start). */
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: var(--space-xl) clamp(24px, 3vw, 56px);
  align-items: start;
}
.footer-brand { max-width: 36ch; }
.footer-links {
  display: contents;     /* dzieci .footer-links wpadają do grida .footer-grid jako prawdziwe kolumny */
}
.footer-grid ul { padding: 0; margin: 0; list-style: none; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / 3; max-width: none; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: 1; }
}

/* Kolumna brand: logo + opis + Dane rejestrowe pod spodem (ten sam blok) */
.footer-brand .foot-logo { margin-bottom: var(--space-md); }
.footer-brand > p { margin-bottom: var(--space-xl); }
.footer-reg h5 { margin-bottom: var(--space-md); }

.site-footer img.foot-logo {
  height: var(--foot-logo-height);   /* 44px — większe */
  width: auto;
  margin-bottom: var(--space-lg);
  display: block;
}

.site-footer h5 {
  color: #fff;
  font-family: var(--foot-heading-family);
  font-weight: var(--foot-heading-weight);
  font-size: var(--foot-heading-size);
  letter-spacing: var(--foot-heading-tracking);
  text-transform: var(--foot-heading-transform);   /* UPPERCASE */
  margin-bottom: var(--space-lg);
}

/* ─── JEDNAKOWY rozmiar tekstu (1rem) dla wszystkich elementów treści ─── */
.site-footer li,
.site-footer a,
.site-footer p,
.site-footer span,
.footer-legal,
.footer-legal span,
.footer-legal .mono {
  font-size: var(--foot-text-size);  /* 1rem — JEDNAKOWE */
  line-height: 1.65;
}

.site-footer li,
.site-footer a {
  font-family: var(--foot-link-family);      /* DM Sans */
}
.site-footer li {
  margin-bottom: var(--space-2xs);
}
.site-footer p {
  font-family: var(--foot-body-family);      /* Manrope */
}

.footer-legal {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--foot-legal-family);     /* DM Sans */
  color: rgba(245, 248, 251, 0.62);
}
.footer-legal .mono { font-family: var(--foot-legal-family); }

/* ═══════════════════════════════════════════════════════════════════════
   POLISH PASS (index.html) — dopracowanie wszystkich sekcji
   Wszystkie reguły poniżej nadpisują wcześniejsze defaults; usuwalne łatwo.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. SECTION — mniej powietrza między sekcjami */
.section { padding-block: clamp(56px, 7vw, 112px); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }

/* 2. SECTION-HEAD — spójna hierarchia secno → h2 → lead */
.section-head { margin-bottom: clamp(32px, 4vw, 56px); }
.section-head .secno { margin-bottom: var(--space-lg); }
.section-head h2 { margin-top: 0 !important; max-width: 22ch; line-height: 1.1; }
.section-head .lead { margin-top: var(--space-md); max-width: 60ch; }

/* 3. HERO — dopracowane proporcje + przyciski */
.hero .kicker { margin-bottom: clamp(20px, 2.4vw, 32px); }
.hero h1 { margin-block: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 40px); }
.hero .lead { margin-bottom: clamp(36px, 4vw, 56px); max-width: 52ch; }
.hero__actions { display: flex; gap: clamp(12px, 1.4vw, 20px); flex-wrap: wrap; }
.hero__actions .btn { min-height: 54px; padding: 0 28px; }

/* 4. INTRO-GRID (sekcja 01 — tekst + statblock) */
.intro-grid { grid-template-columns: 1.15fr 0.85fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.intro-grid h2 { line-height: 1.1; }
.intro-grid .lead { max-width: 56ch; }
.intro-grid .tlink { display: inline-flex; }
.statblock { padding-block: clamp(32px, 3.5vw, 56px); margin-top: clamp(8px, 1vw, 16px); }
.stat { padding-right: var(--space-sm); }

/* 5. STATEMENT — refine padding */
.statement { padding-block: clamp(80px, 10vw, 152px); }
.statement .lbl { font-size: 0.86rem; }

/* 6. NAVTILES — wyrazistsze, lepszy hover */
.navtiles { gap: clamp(16px, 1.8vw, 24px); }
.navtile {
  padding: clamp(32px, 3.6vw, 52px);
  min-height: 340px;
  border-top: 3px solid transparent;
  transition: transform var(--dur-normal) var(--ease-standard),
              box-shadow var(--dur-normal),
              border-color var(--dur-normal);
}
.navtile:nth-child(1) { background: var(--blue-50); }
.navtile:nth-child(2) { background: var(--cream-2); }
.navtile:nth-child(3) { background: #EAF0EC; }
.navtile:hover {
  transform: translateY(-4px);
  border-top-color: var(--gold-line);
  box-shadow: 0 18px 40px rgba(19,29,51,0.08);
}
.navtile h3 { font-size: clamp(1.4rem, 1.9vw, 1.75rem); font-weight: 400; margin-bottom: var(--space-sm); }
.navtile p { color: var(--ink-soft); flex: 1; line-height: 1.6; }
.navtile .tlink { margin-top: var(--space-lg); align-self: flex-start; }

/* 7. FILARY — accordion refined */
.acc-wrap { max-width: 1080px; }
.acc-item { border-top: 1px solid var(--line); transition: border-color var(--dur-normal); }
.acc-item.is-open { border-top-color: var(--gold-line); border-top-width: 2px; }
.acc-head { padding-block: clamp(20px, 2.4vw, 36px); }
.acc-panel__inner { padding-bottom: clamp(20px, 2.4vw, 36px); }
.acc-panel p:first-child { margin-top: 0; }
.acc-icon { color: var(--ink-muted); transition: color var(--dur-normal); }
.acc-item.is-open .acc-icon,
.acc-head:hover .acc-icon { color: var(--gold); }

/* 8. AREA (sekcje Obszary + Aktualności) — wyraźniejsze karty */
.area {
  padding: clamp(24px, 2.4vw, 36px);
  gap: clamp(12px, 1.2vw, 18px);
}
.area h3 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); margin-top: var(--space-2xs); }
.area p { font-size: clamp(1rem, 0.4vw + 0.92rem, 1.1rem); line-height: 1.6; }
.area .tag {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
}
.area .tag--neutral { color: var(--ink-muted); }
.area .chev { width: 26px; height: 26px; color: var(--blue-700); opacity: .65; transition: opacity var(--dur-fast); }
.area:hover .chev { opacity: 1; color: var(--gold); }
.area .idx { font-family: var(--ff-editorial); font-style: italic; font-size: 1.4rem; color: var(--neutral-300); }

/* 9. AKTUALNOŚCI — badge "Wkrótce" estetyczniej */
.badge--soon {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  background: var(--state-warning-bg);
  color: var(--state-warning-text);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: auto;
  align-self: flex-start;
}

/* 10. CTA Kontakt — dopracowane proporcje */
.section--tight.section--paper .container--narrow {
  max-width: 880px;
}
.section--tight.section--paper .container--narrow h2 {
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.15;
  max-width: 24ch;
  margin-inline: auto;
}
.section--tight.section--paper .container--narrow .lead {
  margin-top: var(--space-md);
  max-width: 50ch;
}
.section--tight.section--paper .container--narrow .hero__actions,
.section--tight.section--paper .container--narrow .btn + .btn {
  margin-left: 4px;
}

/* 11. Separacja sąsiadujących sekcji paper-paper — delikatna pozioma linia */
.section--paper + .section--paper {
  position: relative;
}
.section--paper + .section--paper::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(140px, 16vw, 240px);
  height: 1px;
  background: var(--gold-line);
  opacity: 0.4;
}

/* 12. Header utility — luźniejsze, spójniejsze ikony */
.nav__utils { gap: clamp(14px, 1.4vw, 22px); }
.nav__login,
.nav__logout {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--ink-soft);
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.nav__login:hover,
.nav__logout:hover {
  color: #fff;
  background: var(--blue-700);
  border-color: var(--blue-700);
}
.nav__login svg,
.nav__logout svg { width: 14px; height: 14px; }
.nav__social {
  width: 36px; height: 36px;
}
.nav__social svg { width: 14px; height: 14px; }
.lang { font-size: 0.85rem; gap: 8px; }

/* 13. Brandstrip — przeprojektowany w głównym bloku .brandstrip (linie 1722+) */
/* (patch usunięty — pełen redesign w głównym bloku .brandstrip) */

/* 14. Hero watermark — overflow hidden + chevron bounded by hero (max-width w głównym bloku) */
.hero { overflow: hidden; }

/* 15. Reveal — szybsza animacja */
.reveal { transition-duration: .6s; }

/* ═══════════════════════════════════════════════════════════════════════
   POLISH PASS v2 — 8 napraw z feedback'u
   ═══════════════════════════════════════════════════════════════════════ */

/* 2. PL/EN i 3 ikonki powiększone */
.lang { font-size: 0.95rem !important; gap: 9px; }
.lang__opt { font-weight: 700; }
.lang__sep { font-size: 0.95rem; }
.nav__login,
.nav__logout,
.nav__social {
  width: 44px !important;
  height: 44px !important;
}
.nav__login svg,
.nav__logout svg,
.nav__social svg { width: 18px !important; height: 18px !important; }

/* 4. USUNIĘCIE poziomych złotych kresek między sekcjami paper-paper */
.section--paper + .section--paper::before { display: none !important; }

/* 5. STATEMENT (Nasza misja) v3 — minimalistyczny centered editorial */
.statement {
  padding-block: clamp(140px, 18vw, 240px) !important;
  background: var(--paper) !important;
  position: relative;
  overflow: hidden;
}
/* Dekoracyjny duży chevron w tle (bardzo subtelny) — sygnatura brand */
.statement::before {
  content: "";
  position: absolute;
  left: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  height: 280px;
  background-image: url('../img/motif/deco.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: grayscale(1) brightness(1.6);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.statement__inner {
  position: relative;
  z-index: 1;
  max-width: 1000px !important;
  margin-inline: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 clamp(20px, 4vw, 64px) !important;
}
.statement__tint,
.statement__tint--sage { display: none !important; }

/* Kicker label — z dwiema złotymi kreskami po bokach */
.statement .lbl {
  display: inline-flex !important;
  align-items: center !important;
  gap: 18px !important;
  font-family: var(--ff-ui) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  margin-bottom: clamp(48px, 6vw, 80px) !important;
}
.statement .lbl::before,
.statement .lbl::after {
  content: "" !important;
  display: block !important;
  width: 56px !important;
  height: 1px !important;
  background: var(--gold-line) !important;
}

/* Wielkie zdanie centered Fraunces, oddychający rytm linii */
.statement .stmt {
  font-family: var(--ff-editorial) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(2rem, 3.8vw, 3.4rem) !important;
  line-height: 1.32 !important;
  letter-spacing: -0.012em !important;
  color: var(--ink) !important;
  max-width: 26ch !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.statement .stmt .accent {
  color: var(--gold) !important;
  font-style: italic !important;
}
/* Decorative złota kropka na końcu — sygnatura */
.statement__inner::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background: var(--brand-yellow);
  border-radius: 50%;
  margin-top: clamp(48px, 6vw, 72px);
}

/* 7. OBSZARY karty — usunięcie numerków + brand chevron z hover */
.area .idx { display: none !important; }
.area__top {
  justify-content: flex-start !important;
}
.area .chev {
  width: 38px !important;
  height: 38px !important;
  color: var(--neutral-300);
  opacity: 1 !important;
  transition: color var(--dur-normal), transform var(--dur-normal);
  flex: none;
}
.area:hover .chev {
  color: var(--brand-blue-solid);
  transform: translateX(4px);
}
/* Brand chevron — dwukolorowy gradient po hover */
.area .chev path { transition: stroke var(--dur-normal); }
.area:hover .chev path:first-child { stroke: var(--brand-cyan); }
.area:hover .chev path:last-child  { stroke: var(--brand-yellow); }

/* 8. AKTUALNOŚCI — usunięcie badge "Wkrótce" */
.area .badge,
.area .badge--soon { display: none !important; }
.area article > .badge { display: none !important; }
/* Selektor dla bezpośrednich wystąpień w aktualności */
article.area > span.badge { display: none !important; }
.badge--soon { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════
   FILARY GRUPY — pełen redesign na 2×2 grid kart
   Hide acc-media i collapse mechanism; transform acc-list w grid;
   każdy acc-item staje się statyczną kartą z zawsze widoczną treścią.
   ═══════════════════════════════════════════════════════════════════════ */
.acc-wrap {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: clamp(20px, 2.4vw, 36px) !important;
  align-items: stretch !important;
}
@media (max-width: 820px) { .acc-wrap { grid-template-columns: 1fr !important; } }

/* Ukryj kolumnę z chevronowym tłem — niepotrzebna w grid */
.acc-media { display: none !important; }

/* Odpakuj acc-list — żeby acc-items były bezpośrednio w acc-wrap grid */
.acc-list {
  display: contents !important;
}

/* Każdy item = karta */
.acc-item {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: clamp(28px, 3vw, 44px) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-md) !important;
  transition: border-color var(--dur-normal), transform var(--dur-normal), box-shadow var(--dur-normal);
}
.acc-item:hover {
  border-color: var(--gold-line) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(19, 29, 51, .06);
}
.acc-item:last-child { border-bottom: 1px solid var(--line) !important; }

/* Numerek w narożniku — sygnatura editorial */
.acc-item::before {
  content: counter(filar-counter, decimal-leading-zero);
  counter-increment: filar-counter;
  position: absolute;
  top: clamp(20px, 2vw, 28px);
  right: clamp(20px, 2vw, 28px);
  font-family: var(--ff-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 2.8rem);
  color: var(--gold);
  line-height: 1;
  opacity: .85;
}
.acc-list { counter-reset: filar-counter; }

/* Head = tytuł filaru, zawsze widoczny, bez expand/collapse */
.acc-head {
  font-family: var(--ff-headings) !important;
  font-weight: 500 !important;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem) !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
  padding: 0 !important;
  cursor: default !important;
  pointer-events: none !important;
  max-width: calc(100% - 80px) !important;   /* zostaw miejsce na numerek w narożniku */
}
.acc-head:hover { color: var(--ink) !important; }
.acc-item.is-open .acc-head { color: var(--ink) !important; }

/* Schowaj ikonkę expand/collapse */
.acc-icon { display: none !important; }

/* Panel zawsze otwarty */
.acc-panel {
  max-height: none !important;
  overflow: visible !important;
}
.acc-panel__inner { padding-bottom: 0 !important; }
.acc-panel p {
  color: var(--ink-soft) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
}
.acc-panel .tlink { margin-top: var(--space-md) !important; }
/* ═══════════════════════════════════════════════════════════════════════
   MISJA — wycentrowane statement, spójne z resztą sekcji
   .secno (z numerem 02 + Nasza misja w gold) + duży display tekst
   ═══════════════════════════════════════════════════════════════════════ */
.mission .mission__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mission__no { margin-inline: auto; }
.mission__statement {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--brand-navy);
  margin: clamp(28px, 4vh, 56px) auto 0;
  max-width: 32ch;
}
.mission__statement em {
  font-family: var(--ff-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════════════
   FILARY — editorial vertical list (numer + tytuł + body + cienka linia)
   Bez boxów, bez tła, czysta typografia w kolumnie
   ═══════════════════════════════════════════════════════════════════════ */
.pillars {
  list-style: none;
  padding: 0;
  margin: clamp(48px, 6vh, 88px) 0 0;
}
.pillar {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  padding-block: clamp(28px, 4vh, 52px);
  border-top: 1px solid var(--rule, rgba(19, 29, 51, 0.10));
}
.pillar:last-child { border-bottom: 1px solid var(--rule, rgba(19, 29, 51, 0.10)); }
.pillar__no {
  font-family: var(--ff-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold);
  padding-top: 8px;
}
.pillar__body { max-width: 78ch; }
.pillar__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--brand-navy);
  margin: 0;
}
.pillar__body p {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: clamp(12px, 1.6vh, 20px) 0 clamp(16px, 2vh, 24px);
  max-width: 70ch;
}
.pillar__body .tlink { font-size: 0.92rem; }

@media (max-width: 760px) {
  .pillar { grid-template-columns: 1fr; gap: var(--space-sm); }
  .pillar__no { padding-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PASEK MAREK v4 — flex-wrap, 2+ linie naprzemiennie
   ═══════════════════════════════════════════════════════════════════════ */
.brandstrip__list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  row-gap: clamp(8px, 1vh, 16px) !important;
  column-gap: 0 !important;
}
.brandstrip b {
  padding: 0 clamp(14px, 1.6vw, 30px) !important;
  position: relative;
}
/* Subtelny pionowy myślnik między markami (NIE ramka) */
.brandstrip b + b::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30%;
  bottom: 30%;
  width: 1px;
  background: var(--rule, rgba(19,29,51,.10));
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPOSE — Misja + 3 kierunki (asymetria, bez boxów)
   ═══════════════════════════════════════════════════════════════════════ */
.compose__top {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 4.6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  padding-bottom: clamp(56px, 8vh, 96px);
  border-bottom: 1px solid var(--rule, rgba(19,29,51,.10));
}
.compose__no { padding-top: 6px; }
.compose__statement {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--brand-navy);
  margin: 0;
  max-width: 48ch;
}
.compose__statement em {
  font-family: var(--ff-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

/* 3 kierunki — bez boxów, cienkie pionowe separatory */
.compose__paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(56px, 8vh, 96px);
}
.cpath {
  display: flex;
  flex-direction: column;
  padding: 0 clamp(20px, 3vw, 56px);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s var(--ease-standard);
}
.cpath + .cpath { border-left: 1px solid var(--rule, rgba(19,29,51,.10)); }
.cpath:first-child { padding-left: 0; }
.cpath:last-child { padding-right: 0; }
.cpath:hover { transform: translateY(-3px); }
.cpath__idx {
  font-family: var(--ff-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 14px;
}
.cpath__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--brand-navy);
  margin: 0 0 16px;
}
.cpath__body {
  font-family: var(--ff-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 24px;
  flex: 1;
}
.cpath__cta { font-size: 0.95rem; }

@media (max-width: 900px) {
  .compose__top { grid-template-columns: 1fr; gap: var(--space-lg); }
  .compose__paths { grid-template-columns: 1fr; }
  .cpath { padding: clamp(24px, 4vh, 40px) 0; border-left: 0 !important; border-top: 1px solid var(--rule, rgba(19,29,51,.10)); }
  .cpath:first-child { border-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PILLARS2 — asymetryczny stair-step, TYLKO poziome separatory
   Każdy filar ma inną szerokość i wcięcie — brak krzyży/symetrii
   ═══════════════════════════════════════════════════════════════════════ */
.pillars2 {
  display: block;
  margin-top: clamp(48px, 6vh, 88px);
}
.p2 {
  display: block;
  padding: clamp(40px, 6vh, 80px) 0;
  border-top: 1px solid var(--rule, rgba(19, 29, 51, .10));
  position: relative;
}
.p2__no { display: none; }                        /* numeracja usunięta */
.p2:last-child { border-bottom: 1px solid var(--rule, rgba(19, 29, 51, .10)); }

/* Asymetryczne wcięcia — każdy filar w innym miejscu i o innej szerokości */
.p2--a { margin-left: 0;    margin-right: 38%; }   /* lewa strona, ~62% szerokości */
.p2--b { margin-left: 42%;  margin-right: 0;   }   /* prawa strona, ~58% */
.p2--c { margin-left: 8%;   margin-right: 28%; }   /* środek-lewo, ~64% */
.p2--d { margin-left: 32%;  margin-right: 6%;  }   /* środek-prawo, ~62% */

/* Numer w lewej kolumnie, reszta w prawej — bez odwracania */
.p2__no {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--ff-ui);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--gold);
  padding-top: 12px;
}
.p2__title {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--brand-navy);
  margin: 0 0 18px;
}
.p2__body {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 60ch;
}
.p2__cta {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
  display: inline-flex;
}

@media (max-width: 900px) {
  .p2--a, .p2--b, .p2--c, .p2--d {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .p2 {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: clamp(28px, 4vh, 48px) 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   OBSZARY — naprawiony font nagłówków (.area h3)
   ═══════════════════════════════════════════════════════════════════════ */
.area h3 {
  font-family: var(--ff-display) !important;
  font-weight: 500 !important;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.012em !important;
  color: var(--brand-navy) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CTABLK — Kontakt split layout (asymetryczny)
   ═══════════════════════════════════════════════════════════════════════ */
.ctablk__grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.ctablk__left .secno { margin-bottom: 28px; }
.ctablk__h {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--brand-navy);
  margin: 0;
}
.ctablk__lead {
  font-family: var(--ff-body);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}
.ctablk__meta {
  margin-top: clamp(28px, 4vh, 48px);
  border-top: 1px solid var(--rule, rgba(19,29,51,.10));
}
.ctablk__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule, rgba(19,29,51,.10));
}
.ctablk__lbl {
  font-family: var(--ff-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.ctablk__val {
  font-family: var(--ff-body);
  font-size: 1rem;
  color: var(--brand-navy);
  font-weight: 500;
}
.ctablk__cta {
  display: flex;
  gap: 14px;
  margin-top: clamp(28px, 4vh, 44px);
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .ctablk__grid { grid-template-columns: 1fr; }
  .ctablk__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   KONTAKT — szybki email + meta dane (asymetryczny split)
   ═══════════════════════════════════════════════════════════════════════ */
.ctablk__quick {
  margin-top: clamp(28px, 4vh, 44px);
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid var(--rule, rgba(19,29,51,.10));
}
.ctablk__lbl2 {
  display: block;
  font-family: var(--ff-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.ctablk__inline {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.ctablk__inline input {
  flex: 1;
  font-family: var(--ff-body);
  font-size: 1rem;
  padding: 14px 18px;
  background: transparent;
  border: 1px solid var(--rule, rgba(19,29,51,.18));
  border-radius: var(--radius-sm, 6px);
  color: var(--brand-navy);
  outline: none;
  transition: border-color 0.2s;
}
.ctablk__inline input:focus { border-color: var(--brand-navy); }
.ctablk__inline .btn { white-space: nowrap; }
.ctablk__note {
  margin-top: 12px;
  font-family: var(--ff-body);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.ctablk__note a { color: var(--brand-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ctablk__note a:hover { color: var(--gold); }

@media (max-width: 600px) {
  .ctablk__inline { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO PHOTO — fragment szerokiego zdjęcia jako wertykalny strip
   Ulokowany między kolumną treści (lewa) a logo (prawa)
   Z gradient-fade po obu krawędziach dla płynnego wtopienia w tło hero
   ═══════════════════════════════════════════════════════════════════════ */
.hero__photo {
  position: absolute;
  top: 50%;
  right: 38%;                              /* środkowo-prawo, między tekstem a logo */
  transform: translateY(-50%);
  width: clamp(180px, 18vw, 320px);
  height: 70vh;
  max-height: 720px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  /* Miękki gradient-fade do papieru po lewej i prawej stronie (mniej agresywny) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
  opacity: 0.85;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* LEWA strona zdjęcia ~5-25% — okna + stół konferencyjny + krzesła, bez postaci */
  object-position: 12% 50%;
  display: block;
  /* Lekki kolor-grading by dopasować do palety hero */
  filter: brightness(1.05) contrast(0.95) saturate(0.8);
}

@media (max-width: 980px) {
  .hero__photo { display: none; }          /* na mobile chowamy by nie zaburzało hierarchii */
}

/* ═══════════════════════════════════════════════════════════════════════
   PODSTRONY — HERO v3
   Struktura jak .hero strony startowej (złoty kicker + h1 + lead + 1 link),
   ALE bez znaku wodnego/logo i bez przycisków. Czyste, jednolite tło.
   ═══════════════════════════════════════════════════════════════════════ */

/* Sekcja hero podstrony — wyrazista, lecz bez nadmiernej pustki */
.page-head {
  height: auto !important;
  min-height: clamp(600px, 80vh, 920px);   /* wysokie hero — jak na stronie startowej (~3/4+ ekranu) */
  align-items: center;
  border-bottom: 0 !important;            /* bez poziomej linii pod hero */
  background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 92%);
}
.page-head::after { display: none !important; }   /* usunięty niebieski prostokąt */
.page-head .container {
  padding-block: clamp(84px, 11vh, 144px) clamp(40px, 6vh, 76px);
}

/* Kicker — złota nazwa/kategoria sekcji; ten sam język co .hero .kicker */
.page-head .kicker {
  font-family: var(--hero-kicker-family);
  font-size: var(--hero-kicker-size);
  font-weight: var(--hero-kicker-weight);
  letter-spacing: var(--hero-kicker-tracking);
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(18px, 2.2vw, 30px);
}
.page-head .kicker::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--gold-line);
}

/* H1 — rozmiar jak na startowej + zawijanie (koniec przycinania długich słów) */
.page-head h1 {
  font-size: var(--hero-h1-size) !important;
  line-height: 1.05;
  max-width: 18ch;
  margin: 0 0 clamp(22px, 2.6vw, 36px) !important;
  overflow-wrap: break-word;
}
.page-head h1 .accent,
.page-head h1 .editorial {
  color: var(--gold);
  font-family: var(--ff-editorial);
  font-style: italic;
  font-weight: var(--fw-regular);
}

/* Lead + pojedynczy link tematyczny */
.page-head .lead { max-width: 56ch; margin-top: 0; }
.page-head .hero__link {
  display: inline-flex;
  margin-top: clamp(26px, 3vw, 42px);
}

/* Odstępy sekcji — delikatnie skrócone (korekta zbyt dużych przerw) */
.section { padding-block: clamp(52px, 6vw, 100px); }
.section--tight { padding-block: clamp(40px, 4.5vw, 76px); }

/* ═══════════════════════════════════════════════════════════════════════
   PODSTRONY — KOMPONENTY GRAFICZNE v1
   Rytm tła + diagramy / oś czasu / schemat cyklu / figury z podpisem.
   Cel: wyrazić meritum sekcji wizualnie, nie tylko tekstem.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Rytm tła sekcji (lekki, czysty — bez twardych krawędzi) ── */
.section--tint   { background: #FAF8F3; }                 /* ledwie ciepły odcień */
.section--accent { background: var(--blue-950, #0B1322); color: rgba(245,248,251,.86); }
.section--accent h1, .section--accent h2, .section--accent h3, .section--accent h4 { color: #fff; }
.section--accent .secno b { color: var(--brand-yellow, #E8B400); }
.section--accent .secno::after { background: rgba(255,255,255,.22); }
.section--accent .lead { color: rgba(245,248,251,.92); }
.section--accent p { color: rgba(245,248,251,.80); }

/* ── Figura: wspólny kontener wizualizacji + podpis ── */
.figure { margin-top: clamp(32px, 4vw, 56px); }
.figure__cap {
  margin-top: var(--space-md, 18px);
  font-family: var(--ff-ui, inherit);
  font-size: .82rem; letter-spacing: .04em;
  color: var(--ink-muted, #6b7280);
}

/* ── DIAGRAM STRUKTURY: węzły + pionowe łączniki + rząd marek ── */
.diagram { display: flex; flex-direction: column; align-items: center; gap: 0; }
.diagram__node {
  width: min(520px, 100%);
  background: var(--paper, #fff);
  border: 1px solid var(--line, #e6e3da);
  border-radius: 14px;
  padding: clamp(16px, 2vw, 24px) clamp(20px, 2.6vw, 30px);
  box-shadow: 0 1px 2px rgba(11,19,34,.04), 0 8px 28px -18px rgba(11,19,34,.18);
  text-align: center;
}
.diagram__node--apex   { border-color: var(--gold-line, #C9A227); }
.diagram__node .role {
  display: inline-block;
  font-family: var(--ff-ui, inherit);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold, #8A6E00); margin-bottom: 8px;
}
.diagram__node .name { font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink, #18233b); line-height: 1.25; }
.diagram__node .meta { margin-top: 6px; font-size: .85rem; color: var(--ink-muted, #6b7280); }
.diagram__link { width: 2px; height: clamp(28px, 4vw, 44px); background: linear-gradient(var(--gold-line, #C9A227), var(--line, #e6e3da)); }
.diagram__brands {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  width: min(720px, 100%); margin-top: 4px;
}
.diagram__brands .chip {
  font-size: .85rem; color: var(--ink-soft, #3a4356);
  background: var(--cream, #F6F3EC); border: 1px solid var(--line, #e6e3da);
  border-radius: 999px; padding: 8px 16px;
}

/* ── OŚ CZASU (pionowa, z punktami i latami) ── */
.timeline { position: relative; margin-top: clamp(28px, 3.4vw, 48px); padding-left: 0; list-style: none; }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px;
  width: 2px; background: linear-gradient(var(--gold-line, #C9A227), var(--line, #e6e3da));
}
.timeline__item { position: relative; padding: 0 0 clamp(26px, 3vw, 40px) clamp(40px, 4vw, 56px); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: 3px; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper, #fff); border: 2px solid var(--gold, #8A6E00);
}
.timeline__year {
  font-family: var(--ff-ui, inherit); font-weight: 700;
  letter-spacing: .04em; color: var(--gold, #8A6E00);
  font-size: .9rem; text-transform: uppercase;
}
.timeline__title { margin: 4px 0 6px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink, #18233b); font-weight: 600; }
.timeline__item p { color: var(--ink-soft, #3a4356); max-width: 62ch; }

/* ── SCHEMAT CYKLU / PRZEPŁYWU (kroki + strzałki) ── */
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: clamp(28px, 3.4vw, 48px); }
.flow__step {
  flex: 1 1 150px; min-width: 140px;
  background: var(--paper, #fff); border: 1px solid var(--line, #e6e3da);
  border-radius: 12px; padding: 18px 20px; position: relative;
}
.flow__step .n { font-family: var(--ff-ui, inherit); font-size: .75rem; font-weight: 700; letter-spacing: .14em; color: var(--gold, #8A6E00); }
.flow__step .t { margin-top: 6px; font-weight: 600; color: var(--ink, #18233b); }
.flow__step .d { margin-top: 6px; font-size: .88rem; color: var(--ink-muted, #6b7280); }
.flow__step:not(:last-child)::after {
  content: "→"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%);
  color: var(--gold-line, #C9A227); font-size: 1.1rem; z-index: 1;
}
@media (max-width: 720px) {
  .flow { flex-direction: column; }
  .flow__step:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -16px; transform: translateX(50%); }
}

/* ── Tabela danych / zestawienie (czysta, bez ciężkich linii) ── */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line, #e6e3da); border: 1px solid var(--line, #e6e3da); border-radius: 12px; overflow: hidden; margin-top: clamp(24px,3vw,40px); }
.dl-grid .cell { background: var(--paper, #fff); padding: 18px 20px; }
.dl-grid .k { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold, #8A6E00); }
.dl-grid .v { margin-top: 6px; color: var(--ink, #18233b); font-weight: 500; }

/* Sekcja akcentowa: chip/diagram warianty na ciemnym tle */
.section--accent .diagram__node { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16); box-shadow: none; }
.section--accent .diagram__node .name { color: #fff; }
.section--accent .diagram__brands .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: rgba(245,248,251,.86); }
.section--accent .flow__step { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16); }
.section--accent .flow__step .t { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   PODSTRONY — HERO 2-KOLUMNY (LEWOSTRONNE): tekst po lewej + panel po prawej.
   Wypełnia prawą stronę (zamiast pustki / centrowania) — układ jak na startowej,
   gdzie prawą stronę zajmuje logo. Tu zamiast logo: panel z faktami / akcent.
   ═══════════════════════════════════════════════════════════════════════ */
.page-head h1 { max-width: 16ch; }            /* lewostronnie, wypełnia lewą kolumnę */
.page-head h1[style] { margin-top: 0 !important; }   /* strony prawne: kasujemy inline margin-top */

@media (min-width: 900px) {
  .page-head .container:has(.page-head__aside) {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    column-gap: clamp(40px, 5vw, 88px);
    align-items: center;
  }
  .page-head .container:has(.page-head__aside) > :not(.page-head__aside) { grid-column: 1; }
  .page-head .container:has(.page-head__aside) > .page-head__aside { grid-column: 2; grid-row: 1 / span 50; align-self: center; }
}

/* Panel po prawej w hero — karta z kluczowymi faktami */
.page-head__aside {
  border: 1px solid var(--line, #e6e3da);
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  padding: clamp(22px, 2.4vw, 34px);
  box-shadow: 0 1px 2px rgba(11,19,34,.04), 0 18px 44px -30px rgba(11,19,34,.24);
}
.page-head__aside .ttl {
  font-family: var(--ff-ui, inherit); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold, #8A6E00);
  margin-bottom: 16px;
}
.page-head__aside .row { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line, #e6e3da); }
.page-head__aside .row:first-of-type { border-top: 0; padding-top: 0; }
.page-head__aside .k { font-size: .78rem; letter-spacing: .03em; color: var(--ink-muted, #6b7280); }
.page-head__aside .v { font-size: 1.04rem; font-weight: 600; color: var(--ink, #18233b); line-height: 1.3; }
@media (max-width: 899px) { .page-head__aside { margin-top: clamp(28px, 5vw, 40px); } }

/* ═══════════════════════════════════════════════════════════════════════
   PODSTRONY — SEKCJE CZYSTO-TEKSTOWE → układ redakcyjny 2-kolumnowy.
   Nagłówek po lewej, treść w prawej (szerszej) kolumnie. Wypełnia szerokość,
   LEWOSTRONNIE — koniec pustej prawej połowy, BEZ centrowania.
   Sekcje z komponentem układu są wykluczone (nadal własny layout).
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .section > .container:not(:has(.split, .grid, .grid-3, .intro-grid, .pillars2, .diagram, .flow, .dl-grid, .statblock, .timeline, .area, .value-row, .dg, .onas, .onas-row, .legal, form, table)):has(.section-head) {
    display: grid;
    grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1.55fr);
    column-gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }
  .section > .container:not(:has(.split, .grid, .grid-3, .intro-grid, .pillars2, .diagram, .flow, .dl-grid, .statblock, .timeline, .area, .value-row, .dg, .onas, .onas-row, .legal, form, table)):has(.section-head) > .section-head { grid-column: 1; margin-bottom: 0; }
  .section > .container:not(:has(.split, .grid, .grid-3, .intro-grid, .pillars2, .diagram, .flow, .dl-grid, .statblock, .timeline, .area, .value-row, .dg, .onas, .onas-row, .legal, form, table)):has(.section-head) > :not(.section-head) { grid-column: 2; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PODSTRONY — TWARDE REGUŁY UKŁADU (zakres: tylko podstrony = main:has(.page-head))
   Bez centrowania, bez „szachownicy", pełna szerokość. Strona startowa nietknięta.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Filary/wartości: równe karty, auto-dopasowanie kolumn (koniec „szachownicy" i samotnych kart) */
main:has(.page-head) .pillars2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(24px, 2.6vw, 44px);
  margin-top: clamp(28px, 3vw, 44px);
}
main:has(.page-head) .p2,
main:has(.page-head) .p2--a,
main:has(.page-head) .p2--b,
main:has(.page-head) .p2--c,
main:has(.page-head) .p2--d {
  margin: 0 !important;
  max-width: none !important;
  padding: clamp(20px, 2vw, 28px) 0 0 !important;
  border-top: 1px solid var(--line, #e6e3da) !important;
  border-bottom: 0 !important;
}
main:has(.page-head) .p2__title { font-size: clamp(1.15rem, 1.6vw, 1.4rem) !important; line-height: 1.2; margin: 0 0 10px !important; }
main:has(.page-head) .p2__body  { font-size: 1.02rem !important; line-height: 1.62; color: var(--ink-soft) !important; max-width: none !important; margin: 0 !important; }

/* 1b. dl-grid: przezroczyste tło + obramowane karty (koniec „beżowego pustego bloku") */
.dl-grid { background: transparent !important; border: 0 !important; gap: clamp(12px, 1.4vw, 18px) !important; border-radius: 0 !important; overflow: visible !important; }
.dl-grid .cell { background: var(--paper, #fff); border: 1px solid var(--line, #e6e3da); border-radius: 12px; }

/* 1c. flow: bez przepełnienia poza okno (kroki kurczą się, strzałka mieści się w odstępie) */
.flow { overflow: visible; }
.flow__step { min-width: 0 !important; }
.flow__step:not(:last-child)::after { right: -13px; }
main:has(.page-head) .flow { width: 100%; }

/* 2. Diagram wypełnia całą szerokość (węzły jako pełne paski, koniec wąskiego, „zagubionego" bloku) */
main:has(.page-head) .diagram { width: 100%; }
main:has(.page-head) .diagram__node { width: 100%; max-width: none; text-align: left; }
main:has(.page-head) .diagram__brands { width: 100%; }

/* 3. Sekcje CTA/wąskie — do lewej i pełna szerokość (bez centrowania) */
main:has(.page-head) .container--narrow { max-width: none; margin-inline: 0; }
main:has(.page-head) .text-center { text-align: left !important; }
main:has(.page-head) .mx-auto { margin-inline: 0 !important; }
main:has(.page-head) .section--tight .hero__actions { justify-content: flex-start !important; }

/* 4. Nic w treści podstron nie jest wyśrodkowane (poza panelem hero, który ma swój układ) */
main:has(.page-head) .section .container { text-align: left; }