/* ═══════════════════════════════════════════════════════
       FONTS – self-hosted, latin + latin-ext (polskie znaki)
       ═══════════════════════════════════════════════════════ */
    /* Inter Tight – Variable (jeden plik, wagi 100-900, latin+latin-ext combined - poprawne polskie znaki) */
    @font-face {
      font-family: 'Inter Tight';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url('../fonts/inter-tight-pl.woff2') format('woff2');
    }

    /* Instrument Serif – normal + italic, latin+latin-ext combined */
    @font-face {
      font-family: 'Instrument Serif';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/instrument-serif-pl.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Instrument Serif';
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/instrument-serif-italic-pl.woff2') format('woff2');
    }

    /* JetBrains Mono – Variable normal + italic, latin+latin-ext combined */
    @font-face {
      font-family: 'JetBrains Mono';
      font-style: normal;
      font-weight: 100 800;
      font-display: swap;
      src: url('../fonts/jetbrains-mono-pl.woff2') format('woff2');
    }
    @font-face {
      font-family: 'JetBrains Mono';
      font-style: italic;
      font-weight: 100 800;
      font-display: swap;
      src: url('../fonts/jetbrains-mono-italic-pl.woff2') format('woff2');
    }

    /* Preview „Aa" w sekcji Realizacje – subset tylko do liter Aa */
    @font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/archivo-black-400-aa.woff2?v=2') format('woff2'); }
    @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/fraunces-500-aa.woff2?v=2') format('woff2'); }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500-aa.woff2?v=2') format('woff2'); }
    @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/nunito-sans-700-aa.woff2?v=2') format('woff2'); }
    @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/playfair-display-600-aa.woff2?v=2') format('woff2'); }
    @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/roboto-500-aa.woff2?v=2') format('woff2'); }

    /* ═══════════════════════════════════════════════════════
       TOKENS – soft warm light, generous whitespace
       ═══════════════════════════════════════════════════════ */
    :root {
      --bg: #EFE8DA;
      --bg-deep: #E7DECC;
      --paper: #FBF8F2;
      --ink: #1A1814;
      --ink-soft: #3D3833;
      --ink-mid: #6B6259;
      --ink-dim: #948B80;
      --ink-faint: #BCB2A4;
      --rule: rgba(26, 24, 20, 0.08);
      --rule-strong: rgba(26, 24, 20, 0.14);

      --accent: #2C5446;
      --accent-soft: #DDEAE2;
      --amber: #E8A33D;
      --amber-soft: #FBEAD0;
      --rose: #B85565;
      --rose-soft: #F5DDDF;
      --green: #2C5446;
      --green-soft: #DDEAE2;

      --shadow-xs: 0 1px 2px rgba(60, 40, 20, 0.04);
      --shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.03), 0 2px 5px -1px rgba(60, 40, 20, 0.04);
      --shadow-md: 0 1px 2px rgba(60, 40, 20, 0.03), 0 3px 8px -2px rgba(60, 40, 20, 0.04), 0 8px 18px -6px rgba(60, 40, 20, 0.05);
      --shadow-lg: 0 1px 2px rgba(60, 40, 20, 0.03), 0 5px 12px -4px rgba(60, 40, 20, 0.04), 0 14px 28px -10px rgba(60, 40, 20, 0.05);
      --shadow-xl: 0 1px 1px rgba(60, 40, 20, 0.03), 0 6px 14px -6px rgba(60, 40, 20, 0.04), 0 22px 40px -20px rgba(60, 40, 20, 0.05), 0 40px 70px -36px rgba(60, 40, 20, 0.05);

      --r-xs: 6px;
      --r-sm: 10px;
      --r-md: 14px;
      --r-lg: 20px;
      --r-xl: 28px;

      --font-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
      --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
      --font-mono: 'JetBrains Mono', ui-monospace, monospace;

      --ease: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-spring: cubic-bezier(0.5, 1.6, 0.5, 0.9);
      --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    *::selection { background: var(--ink); color: var(--paper); }

    html {
      color-scheme: light;
      scroll-behavior: smooth;
      scroll-padding-top: 5.5rem;
      -webkit-text-size-adjust: 100%;
      text-rendering: optimizeLegibility;
      /* Modern global form/text accent (kwiecień 2026 baseline) */
      accent-color: var(--accent);
      caret-color: var(--accent);
      /* Hyphenation language hint */
      hyphens: manual;
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
    }

    body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font-sans);
      font-size: 15.5px;
      line-height: 1.65;
      /* tnum: tabular cyfry · ss01: open digits (nowoczesne). */
      font-feature-settings: "tnum", "ss01";
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      letter-spacing: -0.005em;
      overflow-x: hidden;
    }

    /* Anti-FOUT: ukryj body do załadowania fontów (max 1.5s) */
    html:not(.fonts-ready) body { opacity: 0; }
    html.fonts-ready body { transition: opacity 0.3s var(--ease); }

    /* Modern selection color – pop */
    *::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); text-shadow: none; }

    /* Premium focus ring – consistent across all interactive */
    :where(a, button, summary, details, input, textarea, select, [tabindex]):focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 4px;
      /* Soft halo dla agencji-grade focus */
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    /* Touch fast-path: usuń 300ms tap-delay i domyślny niebieski highlight (mamy własne press states) */
    :where(a, button, summary, label, input[type="checkbox"], input[type="radio"], [role="button"]) {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    /* Touch targets – minimum 44×44 (WCAG 2.2 AA) */
    @media (hover: none) and (pointer: coarse) {
      .nav__link, .btn, .card__cta, .faq__q, .footer__list a, .nav__cta {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
      }
    }

    /* Skip to main – visible on focus only */
    .skip-link {
      position: fixed;
      top: 0.85rem;
      left: 50%;
      transform: translate(-50%, -200%);
      z-index: 1000;
      padding: 0.65rem 1.1rem;
      background: var(--ink);
      color: var(--paper);
      border-radius: 999px;
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: -0.01em;
      box-shadow: var(--shadow-md);
      transition: transform 0.25s var(--ease-snap);
    }
    .skip-link:focus,
    .skip-link:focus-visible {
      transform: translate(-50%, 0);
    }

    /* Headings rendering quality */
    h1, h2, h3, h4 {
      text-rendering: optimizeLegibility;
      -webkit-font-feature-settings: "tnum", "ss01";
      font-feature-settings: "tnum", "ss01";
    }

    /* Numbers always tabular */
    .card__price-num,
    .card__price-cur,
    .trust__num,
    .compare__cell,
    .mockup__card-tag,
    .proj__num,
    .step__num {
      font-variant-numeric: tabular-nums;
    }

    /* Subtle paper grain */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        radial-gradient(ellipse at 20% 0%, rgba(232, 163, 61, 0.08), transparent 50%),
        radial-gradient(ellipse at 100% 30%, rgba(44, 84, 70, 0.05), transparent 50%);
      pointer-events: none;
      z-index: 0;
    }

    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }

    /* ═══════════════════════════════════════════════════════
       LAYOUT
       ═══════════════════════════════════════════════════════ */
    .wrap {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 clamp(1.25rem, 3vw, 2rem);
      position: relative;
      z-index: 1;
    }
    .wrap--wide { max-width: 1340px; }
    .wrap--narrow { max-width: 920px; }

    /* ═══════════════════════════════════════════════════════
       NAV
       ═══════════════════════════════════════════════════════ */
    .nav {
      position: sticky;
      top: 0.85rem;
      z-index: 100;
      padding: 0 clamp(1.25rem, 3vw, 2rem);
      pointer-events: none;
    }
    .nav__inner {
      max-width: 1240px;
      margin: 0 auto;
      /* Flex z absolute-positioned linkami – linki ZAWSZE w geometrycznym
         środku pilla (left:50%), niezależnie od szerokości brand/end. */
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.55rem 0.7rem 0.55rem 1.1rem;
      background: rgba(251, 248, 242, 0.78);
      backdrop-filter: saturate(160%) blur(14px);
      -webkit-backdrop-filter: saturate(160%) blur(14px);
      border: 1px solid var(--rule);
      border-radius: 999px;
      box-shadow: var(--shadow-sm);
      pointer-events: auto;
    }
    .nav__inner > .nav__links {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .brand {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.4rem 0.25rem 0.55rem;
      transform: translateY(1px);
    }
    .brand__name {
      font-size: 16.5px;
      font-weight: 700;
      letter-spacing: -0.022em;
      font-family: var(--font-sans);
      color: var(--ink);
      transition: color 0.2s var(--ease);
    }
    .brand__name em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      letter-spacing: 0;
      margin: 0 0.08em;
      color: var(--ink-mid);
      transition: color 0.2s var(--ease);
    }
    .brand__ai {
      font-family: var(--font-mono);
      font-size: 0.78em;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--ink);
      text-transform: uppercase;
      margin-left: 0.1em;
      transition: color 0.25s var(--ease);
    }
    .brand:hover .brand__ai { color: var(--accent); }
    .nav__links {
      display: flex;
      align-items: center;
      gap: 0.15rem;
      font-size: 13.5px;
      font-weight: 500;
    }
    .nav__link {
      color: var(--ink-soft);
      padding: 0.45rem 0.85rem;
      border-radius: 999px;
      transition: color 0.2s var(--ease), background 0.2s var(--ease);
      position: relative;
    }
    .nav__link:hover { color: var(--ink); background: rgba(26, 24, 20, 0.04); }
    .nav__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
    .nav__end {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      flex-shrink: 0;
    }
    .nav__lang {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--bg-deep);
      color: var(--ink);
      border: none;
      padding: 0;
      display: inline-grid;
      place-items: center;
      font: 700 9.5px/1 var(--font-mono);
      letter-spacing: 0.04em;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.2s var(--ease);
    }
    .nav__lang:hover { background: #D8CBB3; }
    .nav__lang:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
    .nav__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.55rem 0.95rem;
      background: var(--ink);
      color: var(--paper);
      border-radius: 999px;
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: -0.01em;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 8px rgba(26,24,20,0.18);
      transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
    }
    .nav__cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 18px rgba(26,24,20,0.25); }
    .nav__cta:active { transform: translateY(0); }
    .nav__cta-arrow { width: 14px; height: 14px; }

    .nav.is-scrolled .nav__inner {
      padding: 0.4rem 0.6rem 0.4rem 0.95rem;
      box-shadow: var(--shadow-md);
      background: rgba(251, 248, 242, 0.92);
    }

    @media (max-width: 820px) {
      .nav__links { display: none; }
    }

    /* Touch devices: comfortable tap targets */
    @media (hover: none) and (pointer: coarse) {
      .nav__link { padding: 0.7rem 1rem; min-height: 44px; display: inline-flex; align-items: center; }
      .nav__lang { width: 32px; height: 32px; font-size: 11px; }
      .nav__cta { padding: 0.75rem 1.1rem; min-height: 44px; }
      .btn { min-height: 48px; padding-top: 0.95rem; padding-bottom: 0.95rem; }
      .faq__q { padding: 1.25rem 1.4rem; min-height: 56px; }
      .footer__list a { padding: 0.4rem 0; display: inline-flex; align-items: center; min-height: 32px; }
      .about__link { min-height: 40px; }
    }

    /* ═══════════════════════════════════════════════════════
       HERO
       ═══════════════════════════════════════════════════════ */
    .hero {
      padding: clamp(6.5rem, 11vw, 10rem) 0 clamp(5rem, 8vw, 7rem);
      position: relative;
      overflow: hidden; /* żeby floating cards nie powodowały horizontal scroll */
    }
    .hero--centered {
      text-align: center;
    }
    .hero__inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      gap: clamp(1.5rem, 4vw, 3.5rem);
      align-items: center;
    }
    @media (max-width: 980px) {
      .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    }

    /* HERO CENTERED – copy block */
    .hero--centered .hero__copy {
      max-width: 760px;
      margin: 0 auto;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.5rem 1rem;
      background: var(--paper);
      border: 1px solid var(--rule-strong);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-soft);
      letter-spacing: -0.005em;
      box-shadow: var(--shadow-xs);
    }
    .eyebrow__dot {
      width: 8px; height: 8px;
      background: var(--green);
      border-radius: 50%;
      box-shadow: 0 0 0 3px var(--green-soft);
      flex-shrink: 0;
      animation: pulse 2.4s var(--ease) infinite;
    }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 3px var(--green-soft); }
      50% { box-shadow: 0 0 0 5px rgba(44, 84, 70, 0.15); }
    }

    .hero__title {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: clamp(56px, 7vw, 88px);
      line-height: 0.98;
      letter-spacing: -0.035em;
      color: var(--ink);
      margin: 2.25rem 0 1.85rem;
      text-wrap: balance;
    }
    @media (max-width: 540px) {
      .hero__title { font-size: clamp(56px, 13.5vw, 68px); margin: 2.025rem 0 1.3rem; line-height: 0.96; }
    }
    .hero--centered .hero__title {
      max-width: 18ch;
      margin-left: auto;
      margin-right: auto;
    }
    .hero__title em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      letter-spacing: -0.01em;
      color: var(--ink-soft);
    }
    .hero__title-mark {
      position: relative;
      white-space: nowrap;
    }
    .hero__title-mark::after {
      content: '';
      position: absolute;
      left: -0.05em; right: -0.05em;
      bottom: 0.04em;
      height: 0.32em;
      background: var(--amber-soft);
      z-index: -1;
      border-radius: 3px;
    }

    .hero__sub {
      font-size: clamp(17px, 1.8vw, 19.5px);
      line-height: 1.5;
      color: var(--ink-soft);
      max-width: 42ch;
      margin-bottom: 2.5rem;
      text-wrap: pretty;
      font-weight: 400;
      letter-spacing: -0.012em;
    }
    @media (max-width: 540px) {
      .hero__sub { font-size: 17px; line-height: 1.55; margin-bottom: 1.875rem; }
      .eyebrow { font-size: 13px; }
    }
    .hero__sub strong {
      color: var(--ink);
      font-weight: 600;
    }
    .hero__sub em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--ink-soft);
      letter-spacing: 0;
    }
    .hero--centered .hero__sub {
      max-width: 48ch;
      margin-left: auto;
      margin-right: auto;
    }

    .hero__ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      align-items: center;
      margin-bottom: 1.75rem;
    }
    .hero--centered .hero__ctas {
      justify-content: center;
    }
    .btn {
      --lift: 0px;
      --press: 1;
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.85rem 1.25rem;
      border-radius: 999px;
      font-size: 14.5px;
      font-weight: 600;
      letter-spacing: -0.01em;
      transform: translateY(var(--lift)) scale(var(--press));
      transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease);
      white-space: nowrap;
      will-change: transform;
      isolation: isolate;
    }
    .btn--primary {
      background: var(--ink);
      color: var(--paper);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 12px rgba(26,24,20,0.2);
    }
    .btn--primary::after {
      /* Subtle shine sweep on hover */
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(120deg, transparent 38%, color-mix(in srgb, white 18%, transparent) 50%, transparent 62%);
      opacity: 0;
      transform: translateX(-110%);
      transition: opacity 0.3s var(--ease), transform 0.7s var(--ease-out-expo);
      pointer-events: none;
      z-index: -1;
    }
    .btn--primary:hover { --lift: -2px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 28px rgba(26,24,20,0.32); }
    .btn--primary:hover::after { opacity: 1; transform: translateX(110%); }
    .btn--primary:active { --lift: 0px; --press: 0.97; transition-duration: 80ms; }
    .btn--ghost {
      background: var(--paper);
      color: var(--ink);
      border: 1px solid var(--rule-strong);
      box-shadow: var(--shadow-xs);
    }
    .btn--ghost:hover { --lift: -2px; background: #FFFFFF; box-shadow: var(--shadow-sm); }
    .btn--ghost:active { --lift: 0px; --press: 0.97; transition-duration: 80ms; }
    .btn__icon { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.3s var(--ease-snap); }
    .btn:hover .btn__icon { transform: translateX(4px); }

    /* Unified white circle arrow (jednolity wzorzec we wszystkich CTA) */
    .arrow-circle {
      width: 24px; height: 24px;
      border-radius: 50%;
      background: var(--paper);
      color: var(--ink);
      display: inline-grid;
      place-items: center;
      flex-shrink: 0;
      transition: transform 0.35s var(--ease-snap);
    }
    .arrow-circle svg { width: 11px; height: 11px; display: block; }
    .arrow-circle--sm { width: 20px; height: 20px; }
    .arrow-circle--sm svg { width: 9.5px; height: 9.5px; }
    .arrow-circle--lg { width: 32px; height: 32px; }
    .arrow-circle--lg svg { width: 13px; height: 13px; }
    .btn--primary:hover .arrow-circle,
    .nav__cta:hover .arrow-circle,
    .flow__site-cta:hover .arrow-circle,
    .cta__primary:hover .arrow-circle { transform: rotate(-30deg); }
    /* Magnetic offset · używane przez JS pointer move */
    .nav__cta {
      --lift: 0px; --press: 1;
      transform: translateY(var(--lift)) scale(var(--press));
      transition: transform 0.18s var(--ease), background 0.2s var(--ease), box-shadow 0.25s var(--ease);
    }
    .nav__cta:hover { --lift: -1px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 18px rgba(26,24,20,0.25); }
    .nav__cta:active { --lift: 0px; --press: 0.97; transition-duration: 80ms; }

    .hero__assurance {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 13px;
      color: var(--ink-mid);
    }
    .hero__assurance-dots {
      display: inline-flex;
    }
    .hero__assurance-dot {
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 2px solid var(--bg);
      margin-left: -7px;
      display: grid;
      place-items: center;
      font-size: 9.5px;
      font-weight: 700;
      color: var(--paper);
      letter-spacing: -0.04em;
    }
    .hero__assurance-dot:first-child { margin-left: 0; }
    .hero__assurance-dot:nth-child(1) { background: var(--accent); }
    .hero__assurance-dot:nth-child(2) { background: var(--amber); }
    .hero__assurance-dot:nth-child(3) { background: var(--rose); }
    .hero__assurance-dot:nth-child(4) { background: var(--green); }

    /* ═══ HERO MOCKUP (Strut-style dashboard) ═══ */
    .mockup {
      position: relative;
      background: var(--paper);
      border-radius: var(--r-xl);
      box-shadow: var(--shadow-xl);
      overflow: hidden;
      border: 1px solid rgba(0,0,0,0.04);
      transform-origin: center;
      animation: float 8s ease-in-out infinite;
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }
    .mockup__chrome {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      padding: 0.7rem 1rem;
      background: #F4F1EA;
      border-bottom: 1px solid var(--rule);
    }
    .mockup__dots {
      display: flex;
      gap: 0.4rem;
    }
    .mockup__dot {
      width: 11px; height: 11px;
      border-radius: 50%;
    }
    .mockup__dot:nth-child(1) { background: #FF6058; }
    .mockup__dot:nth-child(2) { background: #FFBE2F; }
    .mockup__dot:nth-child(3) { background: #28C842; }
    .mockup__url {
      flex: 1;
      background: rgba(255,255,255,0.7);
      border: 1px solid var(--rule);
      border-radius: 6px;
      padding: 0.3rem 0.65rem;
      font-family: var(--font-mono);
      font-size: 11.5px;
      color: var(--ink-mid);
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }
    .mockup__url svg { width: 11px; height: 11px; }
    .mockup__body {
      display: grid;
      grid-template-columns: 180px 1fr;
      min-height: 420px;
    }
    .mockup__sidebar {
      background: #F8F5EE;
      border-right: 1px solid var(--rule);
      padding: 0.85rem 0.7rem;
      font-size: 12px;
    }
    .mockup__side-section {
      padding: 0.55rem 0.5rem 0.3rem;
      font-size: 10px;
      font-weight: 600;
      color: var(--ink-dim);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .mockup__side-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.42rem 0.5rem;
      border-radius: 6px;
      color: var(--ink-soft);
      font-size: 12.5px;
      cursor: pointer;
      transition: background 0.15s;
    }
    .mockup__side-item:hover { background: rgba(0,0,0,0.04); }
    .mockup__side-item.is-active { background: #FFFFFF; color: var(--ink); font-weight: 500; box-shadow: var(--shadow-xs); }
    .mockup__side-item svg { width: 13px; height: 13px; opacity: 0.65; flex-shrink: 0; }
    .mockup__side-divider {
      height: 1px;
      background: var(--rule);
      margin: 0.5rem 0.5rem;
    }

    .mockup__content {
      padding: 1.1rem 1.2rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      overflow: hidden;
    }
    .mockup__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 0.6rem;
      border-bottom: 1px solid var(--rule);
    }
    .mockup__title {
      font-size: 15.5px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.015em;
    }
    .mockup__top-actions {
      display: flex;
      gap: 0.4rem;
    }
    .mockup__top-btn {
      width: 24px; height: 24px;
      border-radius: 6px;
      background: rgba(0,0,0,0.04);
      display: grid;
      place-items: center;
      font-size: 13px;
      color: var(--ink-mid);
    }
    .mockup__top-btn--cta {
      width: auto;
      padding: 0 0.7rem;
      background: var(--ink);
      color: var(--paper);
      font-size: 11.5px;
      font-weight: 500;
    }

    .mockup__section-title {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ink-soft);
    }
    .mockup__section-title::before {
      content: '';
      width: 9px; height: 9px;
      border-radius: 50%;
      border: 1.5px dashed var(--ink-dim);
    }
    .mockup__section-title.is-accent::before { background: var(--accent); border: 0; }
    .mockup__section-title.is-amber::before { background: var(--amber); border: 0; }

    .mockup__cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.6rem;
    }
    .mockup__card {
      background: #FFFFFF;
      border: 1px solid var(--rule);
      border-radius: 10px;
      padding: 0.65rem 0.75rem 0.7rem;
      box-shadow: var(--shadow-xs);
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      min-height: 132px;
      position: relative;
      overflow: hidden;
      transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    }
    .mockup__card:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-sm); }
    .mockup__card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.4rem;
    }
    .mockup__card-tag {
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 500;
      color: var(--ink);
      letter-spacing: 0.01em;
      white-space: nowrap;
    }
    .mockup__card-h {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.01em;
      line-height: 1.25;
    }
    .mockup__card-list {
      list-style: none;
      font-size: 10.5px;
      line-height: 1.45;
      color: var(--ink-mid);
      display: flex;
      flex-direction: column;
      gap: 0.18rem;
      margin-top: 0.1rem;
    }
    .mockup__card-list li {
      padding-left: 0.65rem;
      position: relative;
    }
    .mockup__card-list li::before {
      content: '';
      width: 3px; height: 3px;
      border-radius: 50%;
      background: var(--ink-dim);
      position: absolute;
      left: 0; top: 0.45rem;
    }
    .mockup__card-pill {
      font-size: 9px;
      padding: 0.16rem 0.42rem;
      border-radius: 999px;
      font-family: var(--font-mono);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      flex-shrink: 0;
      line-height: 1;
    }
    .mockup__card-pill--accent { background: var(--accent-soft); color: var(--accent); }
    .mockup__card-pill--amber { background: var(--amber-soft); color: #9D6F1A; }
    .mockup__card-pill--rose { background: var(--rose-soft); color: #A03263; }

    .mockup__add {
      background: rgba(0,0,0,0.025);
      border: 1px dashed var(--rule-strong);
      border-radius: 10px;
      display: grid;
      place-items: center;
      min-height: 130px;
      color: var(--ink-dim);
      font-size: 12px;
    }
    .mockup__chat {
      position: absolute;
      bottom: 1.1rem;
      right: 1.1rem;
      width: 200px;
      background: #FFFFFF;
      border-radius: var(--r-md);
      padding: 0.6rem 0.7rem 0.7rem;
      box-shadow: var(--shadow-md);
      border: 1px solid var(--rule);
      font-size: 11.5px;
      animation: float 6s ease-in-out infinite reverse;
    }
    .mockup__chat-h {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 0.3rem;
      font-size: 11.5px;
    }
    .mockup__chat-h::before {
      content: '';
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--amber);
    }
    .mockup__chat-line {
      color: var(--ink-mid);
      font-size: 10.5px;
      line-height: 1.45;
    }
    .mockup__chat-input {
      margin-top: 0.45rem;
      padding: 0.32rem 0.45rem;
      background: rgba(0,0,0,0.03);
      border-radius: 6px;
      font-size: 10px;
      color: var(--ink-dim);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    @media (max-width: 720px) {
      .mockup__body { grid-template-columns: 130px 1fr; min-height: 380px; }
      .mockup__cards { grid-template-columns: repeat(2, 1fr); }
      .mockup__chat { display: none; }
    }

    /* ═══════════════════════════════════════════════════════
       HERO VISUAL · browser device w środku + 2 floating cards
       ═══════════════════════════════════════════════════════ */
    .hero__visual {
      margin: clamp(2.5rem, 5vw, 4rem) auto 0;
      max-width: 1200px;
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr) minmax(0, 0.85fr);
      grid-template-areas: "left device right";
      align-items: center;
      gap: clamp(0.5rem, 2vw, 1rem);
    }
    .hero__device       { grid-area: device; }
    .float-card--left   { grid-area: left; }
    .float-card--right  { grid-area: right; }

    /* Tablet: device na górze, 2 małe karty obok siebie pod spodem */
    @media (max-width: 1080px) {
      .hero__visual {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "device device"
          "left   right";
        max-width: 600px;
        gap: 0.9rem;
      }
    }
    /* Mobile: wszystko stacked w 1 kolumnie */
    @media (max-width: 520px) {
      .hero__visual {
        grid-template-columns: 1fr;
        grid-template-areas:
          "device"
          "left"
          "right";
        max-width: 420px;
        gap: 0.75rem;
      }
    }

    /* Browser device */
    .hero__device {
      position: relative;
      background: var(--paper);
      border-radius: var(--r-xl);
      box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        var(--shadow-xl);
      overflow: hidden;
      border: 1px solid rgba(26, 24, 20, 0.06);
      animation: hero-float 9s ease-in-out infinite;
      z-index: 2;
    }
    @keyframes hero-float {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-8px); }
    }
    .device__chrome {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      padding: 0.7rem 0.95rem;
      background: var(--bg-deep);
      border-bottom: 1px solid var(--rule);
    }
    .device__dots {
      display: flex;
      gap: 0.42rem;
      flex-shrink: 0;
    }
    .device__dot {
      width: 11px; height: 11px;
      border-radius: 50%;
    }
    .device__dot:nth-child(1) { background: #FF6058; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.06); }
    .device__dot:nth-child(2) { background: #FFBE2F; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.06); }
    .device__dot:nth-child(3) { background: #28C842; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.06); }
    .device__url {
      flex: 1;
      background: rgba(255,255,255,0.7);
      border: 1px solid var(--rule);
      border-radius: 6px;
      padding: 0.34rem 0.7rem;
      font-family: var(--font-mono);
      font-size: 11.5px;
      color: var(--ink-dim);
      text-align: center;
      max-width: 320px;
      margin: 0 auto;
      letter-spacing: -0.005em;
    }
    .device__chrome-spacer {
      width: 32px;
      flex-shrink: 0;
    }
    .device__body {
      padding: 1.6rem 1.5rem 1.4rem;
    }
    .device__h {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: clamp(20px, 2vw, 24px);
      color: var(--ink);
      letter-spacing: -0.025em;
      margin-bottom: 0.35rem;
      line-height: 1.1;
      text-align: center;
    }
    .device__sub {
      font-size: 13px;
      color: var(--ink-dim);
      margin-bottom: 1.15rem;
      text-align: center;
    }
    .device__rows {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .device__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.78rem 0.95rem;
      background: rgba(26, 24, 20, 0.035);
      border-radius: 12px;
      gap: 0.85rem;
      transition: background 0.2s var(--ease);
    }
    .device__row:hover { background: rgba(26, 24, 20, 0.055); }
    .device__row-l {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      color: var(--ink-soft);
      font-size: 13.5px;
      flex: 1;
      min-width: 0;
    }
    .device__row-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .device__row-tag {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.06em;
      padding: 0.22rem 0.5rem;
      border-radius: 5px;
      background: var(--ink);
      color: var(--paper);
      text-transform: uppercase;
      flex-shrink: 0;
      line-height: 1;
    }
    .device__row-tag--accent { background: var(--accent); }
    .device__row-tag--amber  { background: var(--amber); color: var(--ink); }
    .device__row-r {
      font-family: var(--font-sans);
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.012em;
      font-size: 14.5px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .device__row-r small {
      font-weight: 400;
      color: var(--ink-dim);
      font-size: 11px;
      letter-spacing: 0;
      margin-left: 2px;
    }

    /* Floating cards · po bokach device */
    .float-card {
      position: relative;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: var(--r-lg);
      padding: 1.25rem 1.35rem;
      box-shadow: var(--shadow-md);
      text-align: left;
      z-index: 1;
      transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
      max-width: 280px;
      justify-self: stretch;
    }
    .float-card--left {
      transform: translateY(28px) rotate(-2.4deg);
      justify-self: end;
    }
    .float-card--right {
      transform: translateY(-28px) rotate(2.4deg);
      justify-self: start;
    }
    .float-card--left:hover  { transform: translateY(20px) rotate(-1deg); box-shadow: var(--shadow-lg); }
    .float-card--right:hover { transform: translateY(-36px) rotate(1deg); box-shadow: var(--shadow-lg); }

    /* Tablet/mobile (≤1080px): cards bez rotacji, równe odstępy, focal browser */
    @media (max-width: 1080px) {
      .float-card,
      .float-card--left,
      .float-card--right {
        transform: none;
        max-width: 100%;
        justify-self: stretch;
        margin: 0;
      }
      .float-card--left:hover,
      .float-card--right:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
      }
      /* Karty na tablecie/mobile mają mniejszy padding – kompaktowy "highlight" */
      .float-card {
        padding: 1.1rem 1.2rem;
      }
      .float-card__h {
        font-size: 18px;
        margin-bottom: 0.4rem;
      }
      .float-card__p {
        font-size: 12.5px;
        line-height: 1.45;
        margin-bottom: 0.7rem;
        /* Skróć opis do 2 linijek na tablet, żeby cards były równej wysokości */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .float-card__stat {
        padding-top: 0.6rem;
      }
      .float-card__stat-num {
        font-size: 22px;
      }
    }
    @media (max-width: 520px) {
      /* Na małym mobile clamp znika, opis pełny */
      .float-card__p {
        -webkit-line-clamp: unset;
        display: block;
        overflow: visible;
      }
    }

    .float-card__pill {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.25rem 0.6rem;
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 0.85rem;
      line-height: 1;
    }
    .float-card__pill--accent { background: var(--accent-soft); color: var(--accent); }
    .float-card__pill--amber  { background: var(--amber-soft);  color: #8C5C00; }
    .float-card__h {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 20px;
      letter-spacing: -0.025em;
      line-height: 1.15;
      color: var(--ink);
      margin-bottom: 0.5rem;
    }
    .float-card__h em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      letter-spacing: -0.01em;
      color: var(--accent);
    }
    .float-card__p {
      font-size: 12.5px;
      color: var(--ink-mid);
      line-height: 1.5;
      margin-bottom: 0.9rem;
    }
    .float-card__stat {
      display: flex;
      align-items: baseline;
      gap: 0.4rem;
      padding-top: 0.8rem;
      border-top: 1px solid var(--rule);
    }
    .float-card__stat-num {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 26px;
      color: var(--ink);
      letter-spacing: -0.025em;
      line-height: 1;
    }
    .float-card__stat-lbl {
      font-size: 11.5px;
      color: var(--ink-dim);
    }

    @media (prefers-reduced-motion: reduce) {
      .hero__device,
      .float-card { animation: none !important; transform: none !important; }
    }

    /* ═══════════════════════════════════════════════════════
       MARQUEE / TRUST BAR
       ═══════════════════════════════════════════════════════ */
    .trust {
      padding: 1rem 0 2rem;
    }
    .trust__inner {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      padding: 1.5rem 1.75rem;
      background: var(--paper);
      border-radius: var(--r-lg);
      border: 1px solid var(--rule);
      box-shadow: var(--shadow-sm);
    }
    .trust__item {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }
    .trust__num {
      font-family: var(--font-sans);
      font-size: clamp(26px, 3.2vw, 34px);
      font-weight: 700;
      letter-spacing: -0.035em;
      color: var(--ink);
      line-height: 1;
      font-variant-numeric: tabular-nums;
      display: inline-flex;
      align-items: baseline;
      gap: 0.18em;
    }
    .trust__num em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--ink-soft);
      font-size: 0.62em;
      letter-spacing: -0.005em;
    }
    .trust__lbl {
      font-size: 13px;
      color: var(--ink-mid);
      line-height: 1.45;
      max-width: 26ch;
      text-wrap: pretty;
    }
    @media (max-width: 720px) {
      .trust__inner { grid-template-columns: repeat(2, 1fr); gap: 1rem 0.8rem; padding: 1.2rem 1.2rem; }
    }

    /* ═══════════════════════════════════════════════════════
       SECTION HEADER
       ═══════════════════════════════════════════════════════ */
    section { padding: clamp(3.4rem, 6.5vw, 5.6rem) 0; position: relative; }
    section[id] { scroll-margin-top: 5.5rem; }
    main > section + section::before {
      content: '';
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--ink-faint);
      opacity: 0.5;
    }
    .section__label {
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 600;
      color: var(--ink-mid);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-bottom: 1.2rem;
    }
    .section__label::before,
    .section__label::after {
      content: '';
      width: 18px; height: 1px;
      background: var(--ink-mid);
    }
    .section__title {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: clamp(30px, 4.5vw, 52px);
      line-height: 1.02;
      letter-spacing: -0.03em;
      color: var(--ink);
      max-width: 22ch;
      margin-bottom: 1rem;
      text-wrap: balance;
    }
    .section__title em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--ink-soft);
    }
    .section__lead {
      font-size: clamp(17px, 1.8vw, 19.5px);
      line-height: 1.5;
      color: var(--ink-soft);
      max-width: 56ch;
      text-wrap: pretty;
      font-weight: 400;
      letter-spacing: -0.012em;
    }
    .section__lead strong { color: var(--ink); font-weight: 600; }
    /* Na desktopie łamie linię przed „– autorska kompozycja", na mobile zostaje
       w ciągu zdania – inaczej urwana końcówka wisi samotnie pod spodem. */
    .section__lead-break { display: inline; }
    @media (min-width: 720px) {
      .section__lead-break { display: block; }
    }
    /* hero__sub-break: na desktopie łamie linię (block), na mobile zostaje inline */
    @media (min-width: 720px) {
      .hero__sub-break { display: block; }
    }
    /* Highlight – subtle warm cream, minimalistic */
    .highlight {
      padding: 0 0.2em;
      border-radius: 0.2em;
      background: #EFE0BC;
      color: var(--ink);
      font-weight: 600;
    }
    .section__lead em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--ink-soft);
      letter-spacing: 0;
    }
    .section__head {
      margin-bottom: clamp(2.5rem, 5vw, 4rem);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 1rem;
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
    }
    .section__head .section__label { margin-bottom: 0; }
    .section__head .section__title { margin: 0 auto; max-width: 22ch; }
    .section__head .section__lead { max-width: 52ch; margin: 0 auto; }
    /* Bez leadu = mniejszy margin-bottom (spójność wizualna z sekcjami z leadem) */
    .section__head:not(:has(.section__lead)) { margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }

    /* ═══════════════════════════════════════════════════════
       USŁUGI – BENTO
       ═══════════════════════════════════════════════════════ */
    .bento {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: minmax(0, auto);
      gap: 1rem;
    }
    .card {
      position: relative;
      /* Premium Cream – paper-toned, warm, jasniejsze niż tło */
      background: linear-gradient(155deg, #FBF8F0 0%, #F4EEDF 100%);
      border: 1px solid rgba(26, 24, 20, 0.04);
      border-radius: var(--r-lg);
      padding: 1.6rem 1.6rem 1.5rem;
      /* White inner border = „lifted glass" feel + subtle outer drop */
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.5),
        var(--shadow-xs);
      transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), background 0.35s var(--ease);
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      overflow: hidden;
    }
    .card:hover {
      transform: translateY(-3px);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.65),
        var(--shadow-md);
      border-color: rgba(26, 24, 20, 0.08);
    }
    .card--span-3 { grid-column: span 3; }
    .card--span-2 { grid-column: span 2; }
    .card--span-4 { grid-column: span 4; }
    .card--span-6 { grid-column: span 6; }
    .card--feature {
      background: linear-gradient(155deg, #FBF8F0 0%, #F4EEDF 100%);
      border-color: rgba(26, 24, 20, 0.06);
    }
    .card--ink {
      background: var(--ink);
      color: var(--paper);
      border-color: rgba(255,255,255,0.06);
    }
    .card--ink .card__price-cur,
    .card--ink .card__lead { color: rgba(251,248,242,0.65); }
    .card--ink:hover { border-color: rgba(255,255,255,0.12); }

    .card--sand {
      /* Cool variant Premium Cream */
      background: linear-gradient(155deg, #F8F4EA 0%, #F0EAD8 100%);
      border-color: rgba(26, 24, 20, 0.06);
      /* White inner border + subtle drop, jak inne karty */
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.5),
        var(--shadow-xs);
    }
    .card--sand .card__title { font-size: clamp(28px, 3.2vw, 38px); }
    .card--sand .card__pill { background: var(--paper); }
    .card.is-selected .card__pill { background: var(--paper); }

    .card__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.85rem;
      margin-bottom: 1.6rem;
    }
    .card__pill {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.3rem 0.65rem;
      background: var(--bg-deep);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      color: var(--ink-soft);
      letter-spacing: 0.03em;
    }
    .card--ink .card__pill { background: rgba(255,255,255,0.07); color: rgba(251,248,242,0.85); }
    .card__pill-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }
    .card__pill--amber .card__pill-dot { background: var(--amber); }
    .card__pill--rose .card__pill-dot { background: var(--rose); }
    .card__pill--green .card__pill-dot { background: var(--green); }

    .card__time {
      display: inline-flex;
      align-items: center;
      padding: 0.35rem 0.75rem;
      background: var(--paper);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 600;
      color: var(--ink-soft);
      letter-spacing: 0.06em;
      text-align: center;
      line-height: 1;
      box-shadow:
        inset 0 0 0 1px rgba(26, 24, 20, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
    .card--ink .card__time { background: rgba(255,255,255,0.07); color: rgba(251,248,242,0.75); }

    /* Service selector checkbox – upper right of card head */
    .card__select {
      position: relative;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      user-select: none;
      flex-shrink: 0;
    }
    /* Niewidzialne rozszerzenie hit area do 40×40px (rekomendacja Krehel #16) */
    .card__select::before {
      content: '';
      position: absolute;
      inset: -9px;
      pointer-events: auto;
    }
    .card__select-input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
      width: 0;
      height: 0;
    }
    .card__select-box {
      width: 24px;
      height: 24px;
      border-radius: 7px;
      border: 1px solid var(--rule-strong);
      background: var(--paper);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 1px 2px rgba(26, 24, 20, 0.06);
      display: grid;
      place-items: center;
      transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.25s var(--ease), transform 0.18s var(--ease);
    }
    .card__select-box svg {
      width: 12px;
      height: 12px;
      fill: none;
      stroke: var(--paper);
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0;
      transform: scale(0.5);
      transition: opacity 0.18s var(--ease), transform 0.3s var(--ease-snap);
    }
    .card__select:hover .card__select-box {
      border-color: var(--ink);
      transform: scale(1.06);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 2px 6px rgba(26, 24, 20, 0.1);
    }
    .card__select-input:focus-visible ~ .card__select-box {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }
    /* Checked: dark fill + white tick = scannable z daleka, premium standard */
    .card__select-input:checked ~ .card__select-box {
      background: var(--ink);
      border-color: var(--ink);
      box-shadow:
        0 3px 10px rgba(26, 24, 20, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }
    .card__select-input:checked ~ .card__select-box svg {
      opacity: 1;
      transform: scale(1);
    }
    /* Selected = subtle bg shift + ink ring (Option B premium 2026)
       – minimalistyczny lift bg + mocny dark ring, brand-consistent warmth */
    .card.is-selected {
      background: linear-gradient(155deg, var(--bg) 0%, var(--bg-deep) 100%);
      border-color: var(--ink);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        0 0 0 1px var(--ink),
        0 6px 18px rgba(26, 24, 20, 0.07);
    }
    .card--feature.is-selected,
    .card--sand.is-selected {
      background: linear-gradient(155deg, var(--bg) 0%, var(--bg-deep) 100%);
    }
    .card--ink .card__select-box {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.2);
    }
    .card--ink .card__select-input:checked ~ .card__select-box {
      background: var(--paper);
      border-color: var(--paper);
    }
    .card--ink .card__select-input:checked ~ .card__select-box svg {
      stroke: var(--ink);
    }

    .card__title {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: clamp(22px, 2.5vw, 28px);
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: inherit;
    }
    .card--feature .card__title {
      font-size: clamp(28px, 3.2vw, 38px);
    }
    .card__title em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      font-size: 0.82em;
      color: var(--ink-soft);
    }
    .card--ink .card__title em { color: rgba(251,248,242,0.7); }

    .card__lead {
      font-size: 15px;
      color: var(--ink-soft);
      line-height: 1.6;
      max-width: 46ch;
      /* text-wrap: auto (default) zamiast 'pretty' — 'pretty' balansuje linie
         i pcha krótkie słowa typu "start." do następnej linii. */
      text-wrap: auto;
      letter-spacing: -0.005em;
    }
    .card__lead-link {
      color: var(--ink);
      font-weight: 600;
      letter-spacing: -0.005em;
      white-space: nowrap;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-decoration-color: color-mix(in srgb, var(--ink) 10%, transparent);
      text-underline-offset: 4px;
      transition: text-decoration-color 0.2s var(--ease);
    }
    .card__lead-link:hover {
      text-decoration-color: var(--ink);
    }

    .card__price {
      display: flex;
      align-items: baseline;
      gap: 0.35rem;
      margin-top: 0.4rem;
      font-family: var(--font-sans);
      font-weight: 700;
      letter-spacing: -0.025em;
    }
    .card__price-num {
      font-size: clamp(36px, 5vw, 56px);
      line-height: 1;
      color: var(--ink);
    }
    .card--ink .card__price-num { color: var(--paper); }
    .card__price-cur {
      font-size: 17px;
      color: var(--ink-mid);
      font-weight: 500;
      letter-spacing: 0;
    }
    /* prefix "od" przed liczbą — taki sam rozmiar/kolor jak waluta */
    .card__price-from {
      font-size: 17px;
      color: var(--ink-mid);
      font-weight: 500;
      letter-spacing: 0;
    }

    .card__bullets {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      margin-top: 0.4rem;
    }
    .card__bullets li {
      font-size: 13.5px;
      color: var(--ink-soft);
      line-height: 1.5;
      padding-left: 1.5rem;
      position: relative;
    }
    .card--ink .card__bullets li { color: rgba(251,248,242,0.85); }
    .card__bullets li::before {
      content: '';
      width: 14px; height: 14px;
      border-radius: 50%;
      background: var(--green-soft);
      position: absolute;
      left: 0; top: 0.2rem;
    }
    .card__bullets li::after {
      content: '';
      position: absolute;
      left: 4px; top: 0.45rem;
      width: 6px; height: 3px;
      border-left: 1.5px solid var(--green);
      border-bottom: 1.5px solid var(--green);
      transform: rotate(-45deg);
    }
    .card--ink .card__bullets li::before { background: rgba(44, 84, 70, 0.2); }
    .card--ink .card__bullets li::after { border-color: var(--green); }

    .card__cta {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      margin-top: auto;
      /* 45,5 px wysokości (zmierzone), wyraźnie niżej niż przycisk w podsumowaniu
         (62,4 px) – hierarchia zostaje czytelna. */
      padding: 0.7rem 1.1rem;
      /* 31 px do krawędzi karty. Sam rachunek dałby 27 px, czyli tyle co pod podkreśleniem
         „Więcej o…" w kartach obok, ale pełna czarna plama przycisku ma większą wagę
         optyczną niż cienka linia i przy równej odległości wygląda na dociśniętą do dołu. */
      margin-bottom: 6px;
      background: var(--ink);
      color: var(--paper);
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -0.005em;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 4px 12px rgba(26, 24, 20, 0.18);
      transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
    }
    .card--ink .card__cta {
      background: rgba(255, 255, 255, 0.08);
      color: var(--paper);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    .card__cta::after {
      content: '→';
      font-weight: 500;
      transition: transform 0.25s var(--ease-snap);
    }
    .card__cta:hover {
      background: var(--ink);
      color: var(--paper);
      transform: translateY(-2px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 8px 22px rgba(26, 24, 20, 0.28);
    }
    .card__cta:hover::after { transform: translateX(4px); }
    /* Na wąskim ekranie przycisk zajmuje całą szerokość karty. Cel dotykowy rośnie
       z ~150 px do pełnej szerokości, a strzałka trafia na prawą krawędź, więc
       przycisk czyta się jak domknięcie karty, a nie doklejony element. */
    @media (max-width: 640px) {
      .card__cta {
        align-self: stretch;
        justify-content: space-between;
        /* 54,3 px zmierzone (było 50,3) – palec trafia pewniej, a do przycisku
           podsumowania (62,4 px) wciąż zostaje 8 px, więc hierarchia się nie zaciera. */
        padding: 0.975rem 1.1rem;
        /* Domknięcie karty pod przyciskiem. Liczy się cała droga do krawędzi bloku,
           nie sam margines: karta ma pod spodem 1.5rem paddingu, a podsumowanie 1.4rem,
           więc przy równych marginesach karta wychodziła szersza. Stąd 0.3rem – daje
           29,8 px, zmierzone dokładnie tyle samo co pod „Napisz maila". */
        margin-bottom: 0.3rem;
      }
    }
    .card--ink .card__cta:hover {
      background: var(--paper);
      color: var(--ink);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 6px 16px rgba(0, 0, 0, 0.25);
    }
    .card__cta:active { transform: translateY(0) scale(0.97); transition-duration: 80ms; }

    .card__decor {
      position: absolute;
      right: -40px; top: -40px;
      width: 200px; height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--amber-soft), transparent 70%);
      pointer-events: none;
      opacity: 0.5;
    }

    /* "Co dostajesz" accordion – styl identyczny ze strut-item, akcent tylko na ikonie */
    .card__spec {
      margin-top: -0.85rem;
      margin-bottom: 1.875rem;
      border-bottom: 1px solid var(--rule);
    }
    .card__spec[open] { border-bottom: none; }
    .card__spec-summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.85rem 0;
      background: transparent;
      border: none;
      border-radius: 0;
      font-size: 15px;
      font-weight: 500;
      color: var(--ink);
      letter-spacing: -0.01em;
      transition: color 0.2s var(--ease);
    }
    .card__spec-summary::-webkit-details-marker { display: none; }
    .card__spec-summary:hover { color: var(--ink); }
    .card__spec[open] .card__spec-summary { color: var(--ink); }
    .card--ink .card__spec { border-top-color: rgba(255,255,255,0.1); }
    .card--ink .card__spec-summary { color: rgba(251,248,242,0.65); }
    .card--ink .card__spec-summary:hover { color: var(--paper); }
    .card__spec-icon {
      width: auto; height: auto;
      background: transparent;
      border-radius: 0;
      color: var(--ink-faint);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.3s var(--ease-snap), color 0.2s var(--ease), font-weight 0.2s var(--ease);
    }
    .card__spec-icon::before {
      content: '+';
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 500;
      line-height: 1;
      transition: font-weight 0.2s var(--ease);
    }
    .card__spec[open] .card__spec-icon { transform: rotate(45deg); color: var(--ink); }
    .card__spec[open] .card__spec-icon::before { font-weight: 600; }
    .card__spec-summary:hover .card__spec-icon { color: var(--ink); }
    .card__spec-summary:hover .card__spec-icon::before { font-weight: 600; }
    .card--ink .card__spec-icon { color: rgba(251,248,242,0.55); }
    .card--ink .card__spec-summary:hover .card__spec-icon { color: var(--paper); }

    .card__spec-body {
      padding: 0.8rem 0 0.4rem;
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
    }
    .card__spec-group {
      padding: 1rem 1.15rem 1.1rem;
      background: #FFFCF4;
      border: 1px solid rgba(26, 24, 20, 0.05);
      border-radius: var(--r-sm);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        var(--shadow-xs);
      transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), border-color 0.2s var(--ease);
    }
    .card__spec-group:hover {
      transform: translateY(-1px);
      border-color: rgba(26, 24, 20, 0.1);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        var(--shadow-sm);
    }
    .card__spec-body .card__disclaimer {
      margin: 1rem 0 0;
      padding: 0.85rem 0 0;
      background: none;
      border-left: 0;
      border-top: 1px dashed var(--rule);
      border-radius: 0;
      color: var(--ink-mid);
      font-style: italic;
      font-size: 12px;
      line-height: 1.55;
    }
    .card__spec-group-h {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 0.7rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px dashed rgba(44, 84, 70, 0.12);
    }
    .card__spec-group-icon {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      color: currentColor;
    }
    .card__spec-group:last-of-type .card__spec-group-h,
    .card__spec-group--final .card__spec-group-h {
      color: var(--ink);
      border-bottom-color: rgba(26, 24, 20, 0.12);
    }
    .card--ink .card__spec-group-h {
      color: rgba(251,248,242,0.6);
      border-bottom-color: rgba(255,255,255,0.1);
    }
    .card__spec-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .card__spec-list li {
      font-size: 13.5px;
      font-weight: 500;
      line-height: 1.5;
      color: var(--ink);
      padding-left: 1.6rem;
      position: relative;
    }
    .card--ink .card__spec-list li { color: rgba(251,248,242,0.78); }
    .card__spec-list li::before {
      content: '✓';
      position: absolute;
      left: 0; top: 0.1rem;
      width: 17px;
      height: 17px;
      border-radius: 5px;
      background: rgba(44, 84, 70, 0.1);
      color: var(--accent);
      font-size: 10px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .card--ink .card__spec-list li::before {
      background: rgba(232, 163, 61, 0.15);
      color: var(--amber);
    }
    .card__spec-list code {
      font-family: var(--font-mono);
      font-size: 11.5px;
      padding: 0.05rem 0.32rem;
      background: rgba(0,0,0,0.05);
      border-radius: 4px;
      color: var(--ink);
      letter-spacing: -0.01em;
    }
    .card--ink .card__spec-list code {
      background: rgba(255,255,255,0.08);
      color: var(--amber);
    }

    .card__disclaimer {
      margin-top: 1rem;
      padding-top: 0.85rem;
      border-top: 1px dashed var(--rule);
      font-size: 12px;
      line-height: 1.55;
      color: var(--ink-mid);
      font-style: italic;
    }
    .card--ink .card__disclaimer {
      background: rgba(255,255,255,0.04);
      border-left-color: var(--amber);
      color: rgba(251,248,242,0.65);
    }

    @media (max-width: 980px) {
      .card--span-3 { grid-column: span 6; }
      .card--span-2, .card--span-4 { grid-column: span 6; }
    }

    /* Strut-style expandable details */
    .card__strut { margin-top: 0.6rem; }
    .card__strut-item { border-bottom: 1px solid var(--rule); }
    .card__strut-item:first-child { border-top: 1px solid var(--rule); }
    .card__strut-item summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.85rem 0;
      font-size: 15px;
      font-weight: 500;
      color: var(--ink);
      letter-spacing: -0.01em;
      transition: color 0.2s var(--ease);
    }
    .card__strut-item summary::-webkit-details-marker { display: none; }
    .card__strut-item summary:hover { color: var(--ink); }
    .card__strut-item[open] summary { color: var(--ink); }
    .card__strut-item-l {
      display: inline-flex;
      align-items: center;
      min-width: 0;
    }
    .card__strut-item-icon {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
      margin-right: 0.75rem;
    }
    .card__strut-item summary::after {
      content: '+';
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 500;
      color: var(--ink-faint);
      flex-shrink: 0;
      margin-left: 1rem;
      transition: transform 0.3s var(--ease-snap), color 0.2s var(--ease), font-weight 0.2s var(--ease);
    }
    .card__strut-item summary:hover::after { color: var(--ink); font-weight: 600; }
    .card__strut-item[open] summary::after { transform: rotate(45deg); color: var(--ink); font-weight: 600; }
    .card__strut-desc {
      font-size: 15px;
      line-height: 1.6;
      color: var(--ink-soft);
      letter-spacing: -0.005em;
      padding: 0 0 0.85rem;
      max-width: 50ch;
    }
    .card__strut-desc code {
      font-family: var(--font-mono);
      font-size: 14px;
      letter-spacing: 0;
    }

    /* ═══════════════════════════════════════════════════════
       BENTO SUMMARY – wybór usług + suma + mailto
       ═══════════════════════════════════════════════════════ */
    .bento-summary {
      margin-top: clamp(2rem, 4vw, 3rem);
      padding: clamp(1.4rem, 2.5vw, 2rem) clamp(1.4rem, 2.5vw, 2.2rem);
      background: linear-gradient(155deg, var(--paper) 0%, #F5F1E8 100%);
      border: 1px solid rgba(26, 24, 20, 0.04);
      border-radius: var(--r-lg);
      /* White inner border + subtle drop – spójnie z kartami powyżej */
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.6),
        var(--shadow-xs);
      transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
    }
    .bento-summary.is-active {
      border-color: rgba(26, 24, 20, 0.08);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.7),
        var(--shadow-md);
    }
    .bento-summary__inner {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: clamp(2rem, 4vw, 3.5rem);
      align-items: center;
    }
    @media (max-width: 880px) {
      .bento-summary__inner {
        grid-template-columns: 1fr;
        gap: 1.4rem;
        align-items: stretch;
      }
    }
    .bento-summary__col {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      min-width: 0;
    }
    @media (min-width: 881px) {
      .bento-summary.is-active .bento-summary__inner > .bento-summary__col:first-child {
        padding-top: 10px;
      }
    }
    .bento-summary__checkout {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.85rem;
      min-width: 220px;
      view-transition-name: checkout;
    }
    .bento-summary__col--total {
      align-items: center;
      text-align: center;
      gap: 0.4rem;
    }
    .bento-summary:not(.is-active) .bento-summary__checkout {
      flex-direction: row;
      align-items: center;
      gap: 1.4rem;
    }
    .bento-summary:not(.is-active) .bento-summary__col--total {
      align-items: flex-start;
      text-align: left;
    }
    @media (max-width: 880px) {
      .bento-summary__checkout,
      .bento-summary:not(.is-active) .bento-summary__checkout {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
        padding-top: 0.9rem;
        border-top: 1px dashed var(--rule);
        min-width: 0;
      }
      /* Kwota przy prawej krawędzi – tak jak na rachunku, gdzie sumy trzymają
         wspólną oś po prawej. Odstęp 5 px nad i pod odsuwa ją od linii
         przerywanej i od przycisku. */
      .bento-summary__col--total,
      .bento-summary:not(.is-active) .bento-summary__col--total {
        align-items: flex-end;
        text-align: right;
        padding: 5px 0;
      }
      /* Domknięcie karty pod przyciskiem – tyle samo światła co między kartami
         cennika powyżej, żeby blok nie kończył się nagle. */
      .bento-summary__cta { margin-bottom: 0.4rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .bento-summary__checkout { view-transition-name: none; }
    }
    .bento-summary__lbl {
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-dim);
    }
    .bento-summary__list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
      margin: 0;
      padding: 0;
    }
    .bento-summary__list li {
      transition: background 0.2s var(--ease);
      border-radius: 6px;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      font-size: 14px;
      color: var(--ink);
      letter-spacing: -0.005em;
      padding: 0.45rem 0;
      border-bottom: 1px dashed var(--rule);
    }
    .bento-summary__list li:last-child { border-bottom: 0; }
    .bento-summary__list li:hover { background: rgba(26, 24, 20, 0.025); }
    .bento-summary__list li > span:first-child {
      flex: 1;
      min-width: 0;
      font-weight: 500;
    }
    .bento-summary__list li > span:last-child {
      font-family: var(--font-mono);
      font-size: 12.5px;
      color: var(--ink-soft);
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }
    .bento-summary__empty {
      font-size: 14px;
      color: var(--ink-mid);
      letter-spacing: -0.005em;
      margin: 0;
      font-family: var(--font-sans);
      line-height: 1.5;
    }
    .bento-summary.is-active .bento-summary__empty { display: none; }
    .bento-summary:not(.is-active) .bento-summary__list { display: none; }
    .bento-summary__total {
      position: relative;
      font-family: var(--font-sans);
      font-size: clamp(32px, 4vw, 44px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.03em;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
      display: inline-flex;
      align-items: baseline;
      gap: 0.25rem;
      transform-origin: right center;
      transition: color 0.2s var(--ease), transform 0.4s var(--ease-snap);
    }
    .bento-summary:not(.is-active) .bento-summary__total { color: var(--ink-dim); }
    .bento-summary__total.is-pulsing { animation: total-flash 0.45s var(--ease-snap); }
    @keyframes total-flash {
      0% { transform: scale(1); }
      45% { transform: scale(1.06); }
      100% { transform: scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .bento-summary__total.is-pulsing { animation: none; }
    }
    .bento-summary__cur {
      font-size: 13.5px;
      font-weight: 500;
      color: var(--ink-mid);
      letter-spacing: 0;
      font-family: var(--font-sans);
    }
    .bento-summary__cta {
      --lift: 0px; --press: 1;
      align-self: center;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.85rem;
      padding: 0.95rem 1rem 0.95rem 1.5rem;
      background: var(--ink);
      color: var(--paper);
      border-radius: 999px;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.01em;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 12px rgba(26,24,20,0.2);
      transform: translateY(var(--lift)) scale(var(--press));
      transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease), opacity 0.2s var(--ease);
      pointer-events: none;
      opacity: 0.45;
      white-space: nowrap;
    }
    .bento-summary.is-active .bento-summary__cta {
      pointer-events: auto;
      opacity: 1;
    }
    .bento-summary.is-active .bento-summary__cta:hover {
      --lift: -2px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 28px rgba(26,24,20,0.32);
    }
    .bento-summary.is-active .bento-summary__cta:active { --lift: 0px; --press: 0.97; transition-duration: 80ms; }
    @media (max-width: 880px) {
      .bento-summary__cta { width: 100%; justify-content: space-between; }
    }

    /* Easter egg: rabat pakietowy – plakietka „naklejka" w prawym górnym rogu summary */
    .bento-summary { position: relative; }
    .bento-summary__bonus-tag {
      position: absolute;
      top: -0.85rem;
      right: 1.4rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.4rem 0.75rem;
      background: var(--accent);
      color: var(--paper);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      box-shadow:
        0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent),
        0 6px 14px -4px rgba(44, 84, 70, 0.35);
      opacity: 0;
      transform: translateY(4px) scale(0.9);
      transition: opacity 0.28s var(--ease), transform 0.32s var(--ease-snap);
      pointer-events: none;
      white-space: nowrap;
      line-height: 1;
      z-index: 2;
    }
    .bento-summary.is-bonus .bento-summary__bonus-tag {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    @media (max-width: 880px) {
      .bento-summary__bonus-tag { right: 1rem; top: -0.75rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .bento-summary__bonus-tag { transition: none; }
    }

    /* ═══════════════════════════════════════════════════════
       PROCES – premium horizontal flow z animowanymi strzałkami
       ═══════════════════════════════════════════════════════ */
    .process {
      display: grid;
      grid-template-columns: 1fr 36px 1fr 36px 1fr 36px 1fr 36px 1fr;
      align-items: start;
      column-gap: clamp(0.6rem, 1.5vw, 1.4rem);
      counter-reset: step;
    }
    .step {
      counter-increment: step;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      padding: 0;
    }
    .process__arrow {
      align-self: start;
      margin-top: 28px;
      width: 36px;
      height: 18px;
      display: block;
      overflow: visible;
    }
    .process__arrow path {
      stroke: var(--ink-mid);
      stroke-width: 1.4;
      stroke-dasharray: 3 5;
      stroke-linecap: round;
      fill: none;
      animation: process-dash 1.6s linear infinite;
    }
    .process__arrow polyline {
      stroke: var(--ink-mid);
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }
    @keyframes process-dash {
      to { stroke-dashoffset: -16; }
    }
    .step__num {
      display: block;
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--ink-dim);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      line-height: 1;
    }
    .step__num::before {
      content: counter(step, decimal-leading-zero);
      display: block;
      font-family: var(--font-sans);
      font-size: clamp(40px, 4.5vw, 56px);
      font-weight: 700;
      color: var(--ink);
      line-height: 0.95;
      letter-spacing: -0.04em;
      margin-bottom: 0.55rem;
    }
    .step__h {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.15;
      color: var(--ink);
      margin-top: 0.1rem;
      text-wrap: balance;
    }
    .step__h em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--ink-soft);
    }
    .step__p {
      font-size: 16px;
      color: var(--ink-soft);
      line-height: 1.6;
      max-width: 28ch;
      letter-spacing: -0.008em;
    }
    @media (max-width: 980px) {
      .process { grid-template-columns: repeat(2, 1fr); row-gap: 2.6rem; column-gap: 2rem; }
      .process__arrow { display: none; }
    }
    @media (max-width: 540px) {
      .process { grid-template-columns: 1fr; row-gap: 2rem; }
      .step { padding: 0 0 2rem; border-bottom: 1px solid var(--rule); }
      .step:last-child { border-bottom: 0; padding-bottom: 0; }
    }

    /* ═══════════════════════════════════════════════════════
       PORÓWNANIE – semantic table z horizontal scroll na mobile
       ═══════════════════════════════════════════════════════ */
    .compare-scroll {
      position: relative;
      background: var(--paper);
      border-radius: var(--r-xl);
      border: 1px solid var(--rule);
      box-shadow: var(--shadow-sm);
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--rule-strong) transparent;
    }
    .compare-scroll::-webkit-scrollbar { height: 8px; }
    .compare-scroll::-webkit-scrollbar-track { background: transparent; }
    .compare-scroll::-webkit-scrollbar-thumb {
      background: var(--rule-strong);
      border-radius: 999px;
    }
    /* Subtle right-edge fade on mobile – sygnalizuje "swipe right" */
    .compare-scroll::after {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 8px;
      width: 28px;
      background: linear-gradient(to left, var(--paper), transparent);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.25s var(--ease);
    }
    .compare-scroll.has-overflow::after { opacity: 1; }
    .compare-scroll.is-scrolled::after,
    .compare-scroll.is-end::after { opacity: 0; }

    .compare {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      font-family: inherit;
      font-size: 14px;
      font-variant-numeric: tabular-nums;
    }
    .compare__col--label { width: 23%; }
    .compare__row > * {
      padding: 1rem 1.5rem;
      vertical-align: middle;
      border-bottom: 1px solid var(--rule);
      text-align: left;
      transition: background 0.2s var(--ease);
    }
    .compare tbody tr:last-child > * { border-bottom: 0; }
    .compare tbody tr:not(.compare__row--head):hover > * { background: rgba(26, 24, 20, 0.022); }
    .compare tbody tr:not(.compare__row--head):hover > .compare__cell--us { background: rgba(26, 24, 20, 0.05); }

    .compare__row--head > * {
      background: var(--bg-deep);
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ink);
      padding-top: calc(0.85rem + 1px);
      padding-bottom: calc(0.85rem - 1px);
    }

    .compare__cell { color: var(--ink-soft); }
    .compare__cell--label {
      font-weight: 500;
      color: var(--ink);
    }
    .compare__cell--us {
      font-weight: 600;
      color: var(--ink);
      background: rgba(26, 24, 20, 0.028);
    }
    .compare__cell--us .check {
      display: inline-block;
      color: var(--green);
      font-weight: 700;
      margin-right: 6px;
    }

    /* Mobile: tabela trzyma min-width, scrolluje się w bok, pierwsza kolumna sticky */
    @media (max-width: 820px) {
      .compare { min-width: 720px; }
      .compare__row > *:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--paper);
        box-shadow: 1px 0 0 var(--rule);
      }
      .compare__row--head > *:first-child {
        background: var(--bg-deep);
        z-index: 2;
      }
      /* Fix: hover na wierszu nie może nadpisać solid background sticky kolumny
         (półprzezroczyste rgba sprawiało że scrollowana zawartość przebijała przez sticky). */
      .compare tbody tr:not(.compare__row--head):hover > *:first-child {
        background: var(--paper);
      }
    }
    @media (max-width: 540px) {
      .compare__row > * { padding: 0.85rem 1rem; }
      .compare__row--head > * { font-size: 10.5px; padding-top: calc(0.85rem + 1px); padding-bottom: calc(0.85rem - 1px); }
    }

    /* ═══ FEATURE: savings-calc – łatwe cofnięcie: usuń ten cały blok CSS ═══ */
    .calc {
      margin-top: clamp(2rem, 4vw, 3rem);
      padding: clamp(1.4rem, 2.5vw, 2rem) clamp(1.6rem, 3vw, 2.4rem);
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-sm);
    }
    .calc__head {
      text-align: center;
      margin-bottom: 1.8rem;
    }
    @media (max-width: 640px) {
      .calc__head { margin-bottom: 0.7rem; }
    }
    .calc__label {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-dim);
      margin-bottom: 0.4rem;
    }
    .calc__title {
      font-family: var(--font-sans);
      font-size: clamp(22px, 2.5vw, 28px);
      font-weight: 700;
      letter-spacing: -0.025em;
      line-height: 1.05;
      color: var(--ink);
      margin: 0;
      text-wrap: balance;
    }
    .calc__title em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--ink-soft);
    }
    .calc__body {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: clamp(1.4rem, 3vw, 2.2rem);
      align-items: stretch;
      max-width: 880px;
      margin: 0 auto;
    }
    @media (max-width: 640px) {
      .calc__body { grid-template-columns: 1fr; }
    }
    .calc__slider-wrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.7rem;
    }
    .calc__slider-label {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-mid);
    }
    .calc__slider-out {
      font-family: var(--font-sans);
      font-size: 17px;
      font-weight: 600;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      text-transform: none;
    }
    .calc__slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      background: var(--bg-deep);
      border-radius: 999px;
      outline: none;
      cursor: pointer;
    }
    .calc__slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--ink);
      border: 3px solid var(--paper);
      box-shadow: 0 2px 6px rgba(26,24,20,0.2);
      cursor: pointer;
      transition: transform 0.15s var(--ease);
    }
    .calc__slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
    .calc__slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(26,24,20,0.18), 0 2px 6px rgba(26,24,20,0.2); }
    .calc__slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(26,24,20,0.18), 0 2px 6px rgba(26,24,20,0.2); }
    .calc__slider::-moz-range-thumb {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--ink);
      border: 3px solid var(--paper);
      box-shadow: 0 2px 6px rgba(26,24,20,0.2);
      cursor: pointer;
    }
    .calc__slider-ticks {
      display: flex;
      justify-content: space-between;
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--ink-dim);
      letter-spacing: 0.04em;
    }
    .calc__result {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
      padding: 0.85rem 1.1rem;
      background: var(--bg);
      border-radius: var(--r-md);
    }
    .calc__result-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.85rem;
    }
    .calc__result-l {
      font-size: 13px;
      color: var(--ink-mid);
      white-space: nowrap;
    }
    .calc__result-r {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 500;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.015em;
      white-space: nowrap;
    }
    .calc__result-r--ours {
      color: var(--green);
    }
    .calc__result-divider {
      height: 1px;
      background: var(--rule);
      margin: 0.25rem 0;
    }
    .calc__result-row--total .calc__result-l {
      color: var(--ink);
      font-weight: 600;
      font-size: 13.5px;
    }
    .calc__result-r--save {
      font-family: var(--font-sans);
      font-size: clamp(20px, 2.4vw, 26px);
      font-weight: 600;
      letter-spacing: -0.022em;
      color: var(--green);
      white-space: nowrap;
    }
    /* ═══ /FEATURE: savings-calc ═══ */

    /* ═══════════════════════════════════════════════════════
       PORTFOLIO · Gallery Frame (4:3 cards, 2×2 grid, editorial)
       ═══════════════════════════════════════════════════════ */
    .pf-j {
      background: transparent;
      overflow: hidden;
    }
    .pf-j__inner {
      max-width: 1500px;
      margin: 0 auto;
      padding: 0 clamp(1.25rem, 3vw, 2rem);
    }
    .pf-j__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }
    .pf-j__item {
      display: grid;
      grid-template-rows: 26px 1fr 36px;
      align-items: center;
      justify-items: center;
      gap: 1.5rem;
      padding: 2.25rem 1rem;
      min-width: 0;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: #F0EBDF;
      border-radius: 16px;
      box-shadow:
        inset 0 0 0 1px rgba(26, 24, 20, 0.06),
        0 1px 2px rgba(60, 40, 20, 0.03),
        0 2px 6px -2px rgba(60, 40, 20, 0.04);
    }
    .pf-j__head {
      width: 96%;
      align-self: end;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .pf-j__palette {
      display: flex;
      gap: 5px;
    }
    .pf-j__palette span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    }
    .pf-j__tags {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-mid);
      padding: 0.35rem 0.7rem;
      border-radius: 999px;
      background: var(--paper);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
      line-height: 1;
      white-space: nowrap;
    }
    .pf-j__frame {
      display: flex;
      width: 96%;
      height: 100%;
      min-height: 0;
      background: transparent;
      padding: 0;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      box-shadow: none;
      transition: transform 0.5s var(--ease);
    }
    .pf-j__frame::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 2px solid rgba(255, 255, 255, 0.85);
      border-radius: 10px;
      pointer-events: none;
      z-index: 1;
    }
    .pf-j__item:hover .pf-j__frame {
      transform: translateY(-3px);
    }
    .pf-j__frame img {
      --base-scale: 1;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      border-radius: 10px;
      transform: scale(var(--base-scale));
      transform-origin: top center;
      transition: transform 0.7s var(--ease-out-expo);
    }
    .pf-j__item:hover .pf-j__frame img { transform: scale(calc(var(--base-scale) * 1.02)); }
    /* Per-image zoom: Prima (m2) tnie dolny pasek "GRATIS · Dowóz · -10%",
       Geniusze (m4) lekki zoom dla lepszej kompozycji. transform-origin: top
       trzyma menu/górę widoczne, dół przycina. */
    .pf-j__frame img[src*="m2.jpg"] { --base-scale: 1.09; }
    .pf-j__frame img[src*="m4.jpg"] { --base-scale: 1.15; }

    /* Miniatury na wąskich ekranach.
       Kafel miał sztywne 4/3, a w środku mieści nagłówek, obraz, stopkę, odstępy
       i padding. Przy 375 px na obraz zostawało kilkadziesiąt pikseli wysokości
       i miniatura spłaszczała się do paska. Tutaj wysokość kafla bierze się
       z zawartości, a proporcję trzyma sam obraz. Desktop zostaje bez zmian. */
    @media (max-width: 640px) {
      .pf-j__item {
        aspect-ratio: auto;
        grid-template-rows: auto auto auto;
        gap: 0.9rem;
        padding: 1.4rem 1rem;
      }
      .pf-j__frame {
        height: auto;
        aspect-ratio: 4 / 3;
      }
      /* Zdjęcia są 600×450, czyli dokładnie 4:3 – tyle samo co ramka, więc samo
         kadrowanie nic nie ucina. Boki zjada dopiero powiększenie (m2: 9%, m4: 15%),
         dodane po to, by na desktopie schować dolny pasek promocyjny. Na wąskim
         kaflu ta sama wartość wycina zbyt dużo z lewej i prawej, przez co środek
         strony ucieka w bok. Tutaj pokazujemy kadr w całości. */
      .pf-j__frame img,
      .pf-j__frame img[src*="m2.jpg"],
      .pf-j__frame img[src*="m4.jpg"] { --base-scale: 1; }
      .pf-j__item:hover .pf-j__frame img { transform: scale(1); }
    }
    .pf-j__foot {
      width: 96%;
      align-self: start;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }
    .pf-j__foot .pf-j__palette {
      margin-top: 0.5rem;
      margin-right: 7px;
    }
    .pf-j__name {
      font-family: var(--font-sans);
      font-size: clamp(14px, 1.3vw, 16px);
      font-weight: 600;
      letter-spacing: -0.018em;
      color: var(--ink);
      line-height: 1.2;
      padding: 0.55rem 1.1rem;
      border-radius: 999px;
      background: var(--paper);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
      white-space: nowrap;
    }
    .pf-j__name em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--ink-soft);
    }
    .pf-j__link {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s var(--ease);
    }
    .pf-j__link:hover { color: var(--accent); }
    @media (max-width: 1100px) {
      .pf-j__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    }

    /* ═══════════════════════════════════════════════════════
       FOUNDER – premium editorial profile
       ═══════════════════════════════════════════════════════ */
    .founder {
      max-width: 980px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: clamp(2.8rem, 5vw, 4.5rem);
    }

    /* Header centered – Apple Newsroom style */
    .founder__head {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.4rem;
      text-align: center;
    }
    .founder__label {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink);
    }
    .founder__label::before,
    .founder__label::after {
      content: '';
      width: 18px;
      height: 1.5px;
      background: var(--accent);
    }
    .founder__title {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: clamp(40px, 5.5vw, 68px);
      line-height: 0.96;
      letter-spacing: -0.04em;
      color: var(--ink);
      text-wrap: balance;
      margin: 0;
      max-width: 18ch;
    }
    .founder__title em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--ink-soft);
      letter-spacing: -0.005em;
    }
    .founder__lead {
      font-size: clamp(16px, 1.7vw, 19px);
      line-height: 1.5;
      color: var(--ink-soft);
      letter-spacing: -0.008em;
      max-width: 48ch;
      text-wrap: pretty;
      margin: 0;
    }
    .founder__lead em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--ink);
      letter-spacing: -0.005em;
    }

    /* Hero portrait centered */
    .founder__portrait {
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.4rem;
    }
    .founder__portrait-frame {
      position: relative;
      width: clamp(264px, 28.8vw, 360px);
      aspect-ratio: 1;
      border-radius: clamp(20px, 2.5vw, 28px);
      overflow: hidden;
      box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.06),
        var(--shadow-lg);
    }
    .founder__portrait-frame img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: 58% 28%;
      display: block;
      transition: transform 0.6s var(--ease-out-expo);
    }
    .founder__portrait-frame:hover img { transform: scale(1.025); }
    .founder__portrait-name {
      font-family: var(--font-sans);
      font-size: clamp(23px, 2.4vw, 28px);
      font-weight: 700;
      letter-spacing: -0.025em;
      color: var(--ink);
      text-align: center;
      line-height: 1.1;
      margin-top: 5px;
    }
    .founder__portrait-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem;
      max-width: 100%;
      margin-top: 1.4rem;
    }
    .founder__chip {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.45rem 0.9rem;
      background: var(--paper);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-soft);
      box-shadow:
        inset 0 0 0 1px rgba(26, 24, 20, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
    .founder__chip strong { color: var(--ink); font-weight: 700; }
    .founder__chip-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 3px var(--green-soft);
    }

    /* Bio – długi opis pod portretem */
    .founder__bio {
      max-width: 640px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 1.1rem;
      font-size: clamp(15px, 1.4vw, 16.5px);
      line-height: 1.7;
      color: var(--ink-soft);
      letter-spacing: -0.005em;
    }
    .founder__bio p {
      margin: 0;
    }
    .founder__bio p strong {
      color: var(--ink);
      font-weight: 600;
    }
    .founder__bio em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--ink);
      letter-spacing: -0.005em;
    }

    /* Manifest pull-quote – Apple-style display quote */
    .founder__manifest {
      margin: clamp(1rem, 2vw, 1.5rem) 0;
      padding: clamp(1rem, 2.5vw, 1.8rem) clamp(1rem, 4vw, 2rem);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.4rem;
      text-align: center;
    }
    .founder__manifest-text {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: clamp(28px, 4vw, 46px);
      line-height: 1.08;
      letter-spacing: -0.03em;
      color: var(--ink);
      margin: 0;
      text-wrap: balance;
      max-width: 22ch;
    }
    .founder__manifest-text em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--ink-soft);
      letter-spacing: -0.005em;
    }
    .founder__manifest-cite {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-dim);
    }
    .founder__manifest-cite::before {
      content: '';
      width: 16px; height: 1px;
      background: var(--ink-dim);
    }

    /* Two cores – feature blocks side-by-side */
    .founder__cores {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(1rem, 2vw, 1.5rem);
    }
    @media (max-width: 720px) {
      .founder__cores { grid-template-columns: 1fr; }
    }
    .founder__core {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      padding: clamp(1.6rem, 3vw, 2.2rem);
      background: linear-gradient(155deg, #F5F1E8 0%, var(--bg) 100%);
      border: 1px solid rgba(26, 24, 20, 0.06);
      border-radius: var(--r-lg);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.5),
        var(--shadow-xs);
      transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.2s var(--ease);
    }
    .founder__core:hover {
      transform: translateY(-3px);
      border-color: rgba(26, 24, 20, 0.1);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.65),
        var(--shadow-md);
    }
    .founder__core:hover .founder__core-num { color: var(--ink); }
    .founder__core-num {
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 0.3rem;
      transition: color 0.25s var(--ease);
    }
    .founder__core-title {
      font-family: var(--font-sans);
      font-size: clamp(22px, 2.5vw, 30px);
      font-weight: 700;
      letter-spacing: -0.025em;
      color: var(--ink);
      line-height: 1.05;
      margin: 0;
    }
    .founder__core-title em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--ink-soft);
      letter-spacing: -0.005em;
    }
    .founder__core-desc {
      font-size: 15px;
      line-height: 1.6;
      color: var(--ink-soft);
      letter-spacing: -0.005em;
      margin: 0;
    }

    /* Stats – 3-col display numbers, paper tiles (spójne z Cores) */
    .founder__stats {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(0.7rem, 1.5vw, 1rem);
      margin: 0;
    }
    @media (max-width: 540px) {
      .founder__stats { grid-template-columns: 1fr; gap: 0.8rem; }
    }
    .founder__stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      text-align: center;
      padding: clamp(1.1rem, 2vw, 1.4rem) 1rem;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: var(--r-md);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        var(--shadow-xs);
      transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
    }
    .founder__stat:hover {
      border-color: var(--rule-strong);
      transform: translateY(-1px);
    }
    .founder__stat-val {
      font-family: var(--font-sans);
      font-size: clamp(30px, 3.6vw, 42px);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
    }
    .founder__stat-lbl {
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-soft);
      line-height: 1.4;
      max-width: 22ch;
    }

    /* CTA centered – email button + projects */
    .founder__cta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
    }
    .founder__email {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.95rem 1.4rem 0.95rem 1.1rem;
      background: var(--ink);
      color: var(--paper);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: -0.005em;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 12px rgba(26,24,20,0.18);
      transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
      white-space: nowrap;
    }
    .founder__email:hover {
      transform: translateY(-2px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 24px rgba(26,24,20,0.28);
    }
    .founder__email:active { transform: translateY(0) scale(0.97); transition-duration: 80ms; }
    .founder__email-icon {
      display: inline-grid;
      place-items: center;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      font-size: 11px;
    }
    .founder__projects {
      display: flex;
      gap: 0.7rem;
      flex-wrap: wrap;
      justify-content: center;
    }
    @media (max-width: 540px) {
      .founder__projects { flex-direction: column; width: 100%; max-width: 320px; }
    }
    .founder__project {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.5rem 1.05rem 0.5rem 1.1rem;
      background: var(--paper);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-soft);
      box-shadow:
        inset 0 0 0 1px rgba(26, 24, 20, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
      transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), color 0.2s var(--ease);
    }
    .founder__project:hover {
      color: var(--ink);
      transform: translateY(-1px);
      box-shadow:
        inset 0 0 0 1px rgba(26, 24, 20, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 4px 10px rgba(26, 24, 20, 0.08);
    }
    .founder__project:hover .founder__project-arrow { transform: translate(2px, -2px); color: var(--ink); }
    .founder__project-name {
      color: var(--ink);
      font-weight: 700;
    }
    .founder__project-desc {
      color: var(--ink-mid);
      font-weight: 500;
    }
    .founder__project-arrow {
      display: inline-grid;
      place-items: center;
      width: 16px; height: 16px;
      font-size: 12px;
      color: var(--ink-dim);
      transition: transform 0.25s var(--ease-snap), color 0.2s var(--ease);
    }

    /* Titan-style card badges */
    .founder__cards {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      justify-content: center;
    }

    .founder__card {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: 180px;
      height: 120px;
      padding: 1rem 1.1rem;
      background: var(--paper);
      border: none;
      border-radius: 16px;
      text-decoration: none;
      box-shadow: none;
      transition: background 0.25s var(--ease), box-shadow 0.3s var(--ease);
    }
    .founder__card-arrow {
      position: absolute;
      right: 0.85rem;
      top: 0.85rem;
      display: inline-flex;
      width: 16px;
      height: 16px;
      align-items: center;
      justify-content: center;
      color: var(--ink-mid);
      opacity: 0;
      transition: opacity 0.3s ease-out, color 0.3s ease-out;
    }
    .founder__card-arrow svg {
      transform: translate(-6px, 6px);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .founder__card:hover {
      background: var(--bg);
      box-shadow: 0 2px 8px -2px rgba(60, 40, 20, 0.06);
    }
    .founder__card:hover .founder__card-arrow {
      opacity: 1;
      color: var(--ink);
    }
    .founder__card:hover .founder__card-arrow svg {
      transform: translate(0, 0);
    }
    .founder__card-title {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    @media (max-width: 540px) {
      .founder__cards { gap: 0.6rem; }
      .founder__card { flex: 1 1 0; width: auto; min-width: 0; height: 110px; padding: 0.85rem 0.9rem; }
      .founder__card-title { font-size: 11px; }
    }

    /* ═══════════════════════════════════════════════════════
       FAQ
       ═══════════════════════════════════════════════════════ */
    .faq__group {
      margin-bottom: 2.4rem;
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
    }
    .faq__group:last-child { margin-bottom: 0; }
    .faq__group-label {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink);
      margin-bottom: 2rem;
    }
    .faq__group-label::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }
    .faq__group--ai .faq__group-label::before { background: var(--amber); }
    .faq__group--wsp .faq__group-label::before { background: var(--rose); }

    .faq__list {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .faq__item {
      background: var(--paper);
      border: 1px solid rgba(26, 24, 20, 0.1);
      border-radius: var(--r-md);
      overflow: hidden;
      box-shadow:
        0 2px 2px rgba(26, 24, 20, 0.04),
        inset 0 0 40px 2px var(--paper);
      transition: box-shadow 0.25s var(--ease);
    }
    .faq__item:hover:not([open]) {
      box-shadow:
        0 4px 10px -2px rgba(26, 24, 20, 0.08),
        inset 0 0 40px 2px var(--paper);
    }
    .faq__item[open] {
      box-shadow:
        0 6px 16px -4px rgba(26, 24, 20, 0.1),
        inset 0 0 40px 2px var(--paper);
    }
    .faq__item[open] .faq__q { border-bottom: 1px solid var(--rule); }
    .faq__q {
      list-style: none;
      cursor: pointer;
      padding: 1.2rem 1.35rem;
      font-size: 16.5px;
      font-weight: 500;
      letter-spacing: -0.012em;
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .faq__q::-webkit-details-marker { display: none; }
    .faq__icon {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--bg-deep);
      flex-shrink: 0;
      position: relative;
      transition: background 0.2s var(--ease), transform 0.3s var(--ease-snap);
    }
    .faq__icon::before, .faq__icon::after {
      content: '';
      position: absolute;
      background: var(--ink);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
    }
    .faq__icon::before { width: 9px; height: 1.5px; }
    .faq__icon::after { width: 1.5px; height: 9px; transition: transform 0.25s var(--ease); }
    .faq__item[open] .faq__icon { background: var(--ink); }
    .faq__item[open] .faq__icon::before,
    .faq__item[open] .faq__icon::after { background: var(--paper); }
    .faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
    .faq__a {
      padding: 1.25rem 1.5rem 1.5rem;
      font-size: 15.5px;
      color: var(--ink-soft);
      line-height: 1.75;
      letter-spacing: -0.005em;
      text-wrap: pretty;
    }
    .faq__a p { margin: 0; }
    .faq__a p + p { margin-top: 0.85rem; }
    .faq__a strong {
      color: var(--ink);
      font-weight: 600;
    }
    .faq__a code {
      font-family: var(--font-mono);
      font-size: 0.92em;
      background: var(--bg-deep);
      padding: 1px 6px;
      border-radius: 4px;
      color: var(--ink);
      letter-spacing: -0.01em;
    }

    /* ═══════════════════════════════════════════════════════
       CTA STRIP – jasna kompozycja kontaktowa (premium)
       ═══════════════════════════════════════════════════════ */
    .cta {
      position: relative;
      color: var(--ink);
      padding: 0;
    }
    /* ═══ FEATURE: cta-grid-2col – łatwe cofnięcie: usuń ten blok i przywróć poprzedni ═══ */
    .cta__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2.5rem, 5vw, 4.5rem);
      align-items: center;
    }
    .cta__left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      width: 100%;
    }
    @media (max-width: 820px) {
      .cta__grid { grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 2.8rem); }
      .cta__left { align-items: center; text-align: center; }
    }
    /* ═══ /FEATURE: cta-grid-2col ═══ */
    .cta__head-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.4rem 0.95rem 0.4rem 0.95rem;
      background: var(--bg);
      border: 1px solid var(--rule-strong);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-bottom: 1.5rem;
    }
    .cta__head-eyebrow-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 3px var(--green-soft);
      animation: pulse 2.4s var(--ease) infinite;
    }
    .cta__title {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: clamp(34px, 4.4vw, 56px);
      line-height: 1;
      letter-spacing: -0.035em;
      color: var(--ink);
      margin-bottom: 1.1rem;
      text-wrap: balance;
    }
    .cta__title em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--ink-soft);
      letter-spacing: -0.005em;
    }
    .cta__sub {
      font-size: 16px;
      color: var(--ink-mid);
      line-height: 1.6;
      max-width: 44ch;
      margin: 0 auto 1.6rem;
      text-wrap: pretty;
    }
    .cta__points {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.65rem 1.4rem;
      margin: 0 auto 1.8rem;
      max-width: 460px;
      justify-content: center;
    }
    @media (max-width: 540px) {
      .cta__points { grid-template-columns: 1fr; }
    }
    .cta__points li {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 13.5px;
      color: var(--ink-soft);
      letter-spacing: -0.005em;
      position: relative;
    }
    .cta__points li::before {
      content: '';
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--green-soft);
      flex-shrink: 0;
    }
    .cta__points li::after {
      content: '';
      position: absolute;
      left: 5px; top: 50%;
      width: 7px; height: 4px;
      border-left: 1.6px solid var(--green);
      border-bottom: 1.6px solid var(--green);
      transform: translateY(-30%) rotate(-45deg);
    }
    .cta__author {
      display: inline-flex;
      align-items: center;
      gap: 0.85rem;
      padding-top: 1.4rem;
      margin-top: 0.4rem;
      border-top: 1px solid var(--rule);
      text-align: left;
    }
    .cta__author-pic {
      width: 44px; height: 44px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--bg-deep);
      flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    }
    .cta__author-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cta__author-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.005em;
    }
    .cta__author-role {
      font-size: 12.5px;
      color: var(--ink-mid);
    }

    /* Contact card – centered */
    .cta__card {
      background: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%);
      border: 1px solid var(--rule-strong);
      border-radius: var(--r-lg);
      padding: 2.2rem 1.8rem;
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
      box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.6);
      width: 100%;
      max-width: 580px;
      margin: 0 auto;
      text-align: left;
    }
    .cta__card-h {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px dashed var(--rule);
    }
    .cta__card-h-l {
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
    }
    .cta__card-h-l::before {
      content: '✉';
      display: inline-grid;
      place-items: center;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--amber-soft);
      color: #8C5C00;
      font-size: 12px;
    }
    .cta__card-h-r {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--ink-dim);
      letter-spacing: 0.04em;
    }
    .cta__rows {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .cta__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.7rem;
      padding: 0.65rem 0.9rem;
      background: var(--bg);
      border: 1px solid var(--rule);
      border-radius: var(--r-sm);
      font-size: 13.5px;
      transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
    }
    .cta__row:hover { background: var(--bg-deep); border-color: var(--rule-strong); }
    .cta__row-l {
      color: var(--ink);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      flex-shrink: 0;
    }
    .cta__row-r {
      color: var(--ink);
      font-weight: 500;
      letter-spacing: -0.005em;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      text-align: right;
    }
    .cta__row-r--link {
      color: var(--ink);
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 12.5px;
      text-decoration: none;
    }
    .cta__row-l--status {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    .cta__row-l--status::after {
      content: '';
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 3px var(--green-soft);
      flex-shrink: 0;
    }

    .cta__primary {
      --lift: 0px; --press: 1;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.85rem 0.95rem 0.85rem 1.4rem;
      background: var(--ink);
      color: var(--paper);
      border-radius: 999px;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.015em;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 8px rgba(26,24,20,0.18);
      transform: translateY(var(--lift)) scale(var(--press));
      transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
      margin-top: 0.2rem;
    }
    .cta__primary:hover {
      --lift: -1px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 16px rgba(26,24,20,0.22);
    }
    .cta__primary:active { --lift: 0px; --press: 0.97; transition-duration: 80ms; }
    .cta__primary-arrow {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--paper);
      color: var(--ink);
      display: grid;
      place-items: center;
      font-size: 14px;
      flex-shrink: 0;
      transition: transform 0.3s var(--ease-snap);
    }
    .cta__primary:hover .cta__primary-arrow { transform: rotate(-30deg); }
    .cta__hint {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      color: var(--ink-dim);
      text-align: center;
      margin-top: 0.5rem;
    }


    /* ═══════════════════════════════════════════════════════
       FOOTER – premium hierarchy
       ═══════════════════════════════════════════════════════ */
    .footer {
      padding: 5rem 0 1.3rem;
      color: var(--ink-mid);
      font-size: 13px;
      position: relative;
    }
    .footer__rule {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--rule-strong) 30%, var(--rule-strong) 70%, transparent);
      margin-bottom: 3.5rem;
    }
    .footer__inner {
      display: grid;
      grid-template-columns: 1.5fr 1.25fr 1.25fr;
      gap: clamp(2rem, 4vw, 3.5rem);
      padding-bottom: 2.25rem;
    }
    .footer__brand {
      display: flex;
      flex-direction: column;
    }
    /* Lewa kolumna: identyczne odstępy nagłówka jak w prawych footer__col, by features wyrównały się z pierwszym itemem prawej listy */
    .footer__brand .footer__group-h--link { margin-bottom: 1.2rem; }
    .footer__brand .footer__legal { margin-top: 0.55rem; margin-left: -2px; }
    .footer__brand .footer__sig { margin-top: auto; }
    .footer__brand .brand {
      align-self: flex-start;
    }
    .footer__pitch {
      max-width: 38ch;
      color: var(--ink-soft);
      line-height: 1.6;
      font-size: 14px;
    }
    .footer__features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      max-width: 40ch;
    }
    .footer__features li {
      font-size: 13.5px;
      font-weight: 500;
      color: var(--ink-soft);
      line-height: 1.5;
      padding-left: 1.2rem;
      position: relative;
    }
    .footer__features li::before {
      content: '';
      position: absolute;
      left: 1px; top: calc(0.4rem + 1px);
      width: 8px; height: 4px;
      border-left: 1.5px solid var(--ink);
      border-bottom: 1.5px solid var(--ink);
      transform: rotate(-45deg);
    }
    .footer__sig {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      padding: 0.55rem 1.1rem 0.55rem 0.55rem;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: 999px;
      align-self: flex-start;
      box-shadow: var(--shadow-xs);
      text-decoration: none;
      color: inherit;
      transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), border-color 0.2s var(--ease);
    }
    .footer__sig:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }
    .footer__sig-pic {
      width: 40px; height: 40px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--bg-deep);
      flex-shrink: 0;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    }
    .footer__sig-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .footer__sig-meta {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }
    .footer__sig-role {
      font-family: var(--font-mono);
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-dim);
      line-height: 1;
    }
    .footer__sig-name {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.012em;
      line-height: 1.1;
    }
    .footer__col {
      display: flex;
      flex-direction: column;
    }
    .footer__group-h {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-bottom: 1.2rem;
      padding-bottom: 0.85rem;
      border-bottom: 1px solid var(--rule);
    }
    .footer__group-h::before {
      content: '';
      width: 14px; height: 1px;
      background: var(--ink-mid);
      flex-shrink: 0;
    }
    .footer__group-h--link {
      text-decoration: none;
      color: var(--ink-soft);
      margin-bottom: 0;
      transition: color 0.2s var(--ease);
    }
    .footer__group-h--link:hover { color: var(--ink); }
    .footer__group-h--link:focus-visible {
      outline: 2px solid var(--ink-mid);
      outline-offset: 4px;
      border-radius: 2px;
    }
    .footer__list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .footer__list a, .footer__list span {
      font-size: 13.5px;
      color: var(--ink-soft);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      letter-spacing: -0.005em;
    }
    .footer__list .footer__item {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.85rem;
      width: 100%;
    }
    .footer__list a:hover { color: var(--ink); }
    .footer__list a::after {
      content: '↗';
      font-size: 0.85em;
      color: var(--ink-dim);
      opacity: 0;
      transform: translate(-4px, 4px);
      transition: opacity 0.2s var(--ease), transform 0.25s var(--ease-snap);
    }
    .footer__list a:hover::after { opacity: 1; transform: translate(0, 0); }
    .footer__list a.no-arrow::after { display: none; }

    /* Service items: nazwa + cena (czysta typografia, bez dashed lines) */
    .footer__list li a {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.85rem;
    }
    .footer__price {
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 600;
      color: var(--ink-mid);
      letter-spacing: 0.02em;
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }
    .footer__list a:hover .footer__price { color: var(--ink); }
    .footer__legal {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 13.5px;
      font-weight: 400;
      letter-spacing: -0.005em;
      color: var(--ink);
      text-decoration: none;
    }
    .footer__legal-icon {
      flex-shrink: 0;
      width: 15px;
      height: 15px;
      color: currentColor;
    }
    .footer__legal-icon svg { width: 15px; height: 15px; display: block; }
    .footer__legal-text {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-decoration-color: color-mix(in srgb, var(--ink) 10%, transparent);
      text-underline-offset: 4px;
      transition: text-decoration-color 0.2s var(--ease);
    }
    .footer__legal:hover .footer__legal-text {
      text-decoration-color: var(--ink);
    }

    .footer__weight {
      margin: 2rem 0 0;
      padding: 1.2rem 1.5rem;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: var(--r-md);
      font-size: 12.5px;
      line-height: 1.65;
      color: var(--ink-soft);
      max-width: 100%;
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      box-shadow: var(--shadow-xs);
    }
    .footer__weight-icon {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--paper);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 700;
      box-shadow:
        0 2px 6px rgba(26, 24, 20, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    .footer__weight strong { color: var(--ink); font-weight: 600; }
    .footer__weight-num {
      font-family: var(--font-mono);
      color: var(--ink);
      font-weight: 600;
    }

    .footer__bottom-nav {
      margin-top: 2rem;
      padding: 1.4rem 0 1.4rem;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: clamp(1.2rem, 3vw, 2.5rem);
      font-family: var(--font-mono);
      font-size: 11.5px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .footer__bottom-nav a {
      color: var(--ink-soft);
      transition: color 0.2s var(--ease);
      position: relative;
    }
    .footer__bottom-nav a:hover { color: var(--ink); }
    .footer__bottom-nav a:hover::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      bottom: -4px;
      height: 1.5px;
      background: var(--ink);
    }

    .footer__bottom {
      margin-top: 1.5rem;
      padding-top: 1.4rem;
      border-top: 1px solid var(--rule);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 1rem;
    }
    .footer__bottom-year {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-soft);
      font-variant-numeric: tabular-nums;
      justify-self: start;
    }
    .footer__bottom-credits {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.15rem;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      line-height: 1.8;
      text-align: center;
    }
    .footer__bottom-credits-eyebrow {
      color: var(--ink-dim);
      font-weight: 500;
    }
    .footer__bottom-credits-main {
      color: var(--ink);
      font-weight: 600;
    }
    .footer__bottom-site {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-soft);
      transition: color 0.2s var(--ease);
      justify-self: end;
    }
    .footer__bottom-site:hover { color: var(--ink); }
    @media (max-width: 720px) {
      .footer__bottom { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
      .footer__bottom-year, .footer__bottom-site { justify-self: center; }
    }

    .footer__bottom-meta {
      list-style: none;
      display: inline-flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      align-items: center;
      margin: 0;
      padding: 0;
      justify-self: end;
    }
    .footer__bottom-meta li {
      display: inline-flex;
      align-items: center;
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-soft);
      padding: 0.45rem 0.85rem;
      border-radius: 999px;
      background: var(--paper);
      line-height: 1;
      box-shadow:
        inset 0 0 0 1px rgba(26, 24, 20, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
      transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
    }
    .footer__bottom-meta li:hover {
      transform: translateY(-1px);
      box-shadow:
        inset 0 0 0 1px rgba(26, 24, 20, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 4px rgba(26, 24, 20, 0.06);
    }

    @media (max-width: 820px) {
      .footer__inner { grid-template-columns: 1fr; gap: 2.4rem; }
      .footer__brand { max-width: 520px; }
      .footer__brand .footer__sig { margin-top: 1.6rem; }
    }
    @media (max-width: 720px) {
      .footer__bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.2rem;
      }
      .footer__bottom-meta {
        justify-content: center;
        flex-wrap: wrap;
      }
    }

    /* ═══════════════════════════════════════════════════════
       FLOW DEMO · email → arrow → strona (przed/po, à la wisprflow)
       ═══════════════════════════════════════════════════════ */
    .flow {
      display: grid;
      grid-template-columns: minmax(0, 1fr) clamp(120px, 14vw, 180px) minmax(0, 1fr);
      gap: clamp(0.5rem, 1.5vw, 1.2rem);
      align-items: center;
      margin: clamp(2rem, 5vw, 3.5rem) auto 0;
      max-width: 1080px;
    }

    /* LEFT · email card */
    .flow__email {
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: var(--r-lg);
      padding: 1.4rem 1.4rem 1.2rem;
      box-shadow: var(--shadow-md);
      font-size: 13.5px;
      line-height: 1.6;
      text-align: left;
      transform: rotate(-1.4deg);
      transition: transform 0.5s var(--ease-out-expo), box-shadow 0.4s var(--ease);
    }
    .flow__email:hover { transform: rotate(0); box-shadow: var(--shadow-lg); }
    .flow__email-head {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      padding-bottom: 0.85rem;
      border-bottom: 1px solid var(--rule);
    }
    .flow__email-avatar {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--amber));
      color: var(--paper);
      display: grid;
      place-items: center;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: -0.02em;
      flex-shrink: 0;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255,255,255,0.2);
    }
    .flow__email-meta { flex: 1; min-width: 0; }
    .flow__email-from {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
    .flow__email-addr {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--ink-dim);
      letter-spacing: -0.005em;
    }
    .flow__email-time {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--ink-dim);
      letter-spacing: 0.04em;
      flex-shrink: 0;
    }
    .flow__email-subject {
      font-size: 14.5px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.012em;
      padding: 0.85rem 0 0.6rem;
    }
    .flow__email-body {
      font-size: 14px;
      line-height: 1.6;
      color: var(--ink-soft);
    }
    .flow__email-body p { margin-bottom: 0.65rem; }
    .flow__email-body p:last-child { margin-bottom: 0; }
    .flow__email-foot {
      margin-top: 0.95rem;
      padding-top: 0.85rem;
      border-top: 1px dashed var(--rule);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .flow__email-tag {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--ink-dim);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .flow__email-tag::before {
      content: '';
      display: inline-block;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--green);
      margin-right: 0.35rem;
      vertical-align: middle;
    }

    /* MIDDLE · pozioma krzywa + label nad linią arrow */
    .flow__bridge {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      min-height: 110px;
    }
    .flow__arrow {
      width: 100%;
      height: auto;
      overflow: visible;
      display: block;
    }
    .flow__arrow-path {
      stroke: var(--ink);
      stroke-width: 1.4;
      stroke-dasharray: 4 7;
      stroke-linecap: round;
      fill: none;
      animation: dash-flow 1.6s linear infinite;
    }
    @keyframes dash-flow {
      to { stroke-dashoffset: -22; }
    }
    .flow__bridge-label {
      position: absolute;
      top: calc(32% + 10px);
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--bg);
      padding: 0.38rem 0.9rem 0.42rem;
      border-radius: 999px;
      border: 1px solid var(--rule-strong);
      box-shadow: var(--shadow-sm);
      white-space: nowrap;
      z-index: 2;
      line-height: 1;
    }
    .flow__bridge-label-num {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 13.5px;
      color: var(--ink);
      letter-spacing: -0.025em;
      display: block;
      line-height: 1;
    }

    /* RIGHT · website preview */
    .flow__site {
      background: var(--paper);
      border-radius: var(--r-xl);
      border: 1px solid rgba(26,24,20,0.04);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      transform: rotate(1.4deg);
      transition: transform 0.5s var(--ease-out-expo), box-shadow 0.4s var(--ease);
    }
    .flow__site:hover { transform: rotate(0); }
    .flow__site-chrome {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 0.85rem;
      padding: 0.7rem 0.95rem;
      background: var(--bg-deep);
      border-bottom: 1px solid var(--rule);
    }
    .flow__site-dots { display: flex; gap: 0.4rem; flex-shrink: 0; justify-self: start; }
    .flow__site-dots span {
      width: 11px; height: 11px;
      border-radius: 50%;
    }
    .flow__site-dots span:nth-child(1) { background: #FF6058; }
    .flow__site-dots span:nth-child(2) { background: #FFBE2F; }
    .flow__site-dots span:nth-child(3) { background: #28C842; }
    .flow__site-url {
      background: rgba(255,255,255,0.7);
      border: 1px solid var(--rule);
      border-radius: 6px;
      padding: 0.45rem 1.4rem;
      font-family: var(--font-mono);
      font-size: 12.5px;
      color: var(--ink-dim);
      text-align: center;
      letter-spacing: -0.005em;
      justify-self: center;
    }
    .flow__site-body {
      padding: 1.6rem 1.6rem 1.5rem;
      text-align: center;
    }
    .flow__site-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 600;
      color: var(--ink-mid);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 1.2rem;
      justify-content: center;
    }
    .flow__site-eyebrow::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }
    .flow__site-title {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: clamp(22px, 2.6vw, 30px);
      line-height: 1;
      letter-spacing: -0.03em;
      color: var(--ink);
      margin-bottom: 1rem;
      text-wrap: balance;
    }
    .flow__site-title em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      letter-spacing: -0.005em;
      color: var(--ink-soft);
    }
    .flow__site-sub {
      font-size: 14px;
      color: var(--ink-soft);
      line-height: 1.6;
      margin: 0 auto 1.25rem;
      max-width: 38ch;
      text-wrap: pretty;
    }
    .flow__site-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.65rem 1.1rem 0.65rem 1.15rem;
      background: var(--accent);
      color: var(--paper);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.01em;
      margin-bottom: 1.9rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 4px 12px rgba(44, 84, 70, 0.28);
    }
    .flow__site-cta-arrow {
      width: 20px; height: 20px;
      border-radius: 50%;
      background: var(--paper);
      color: var(--accent);
      display: grid;
      place-items: center;
      font-size: 10.5px;
      flex-shrink: 0;
    }
    .flow__site-tiles {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.5rem;
    }
    .flow__site-tile {
      background: var(--bg-deep);
      border: 1px solid var(--rule);
      border-radius: var(--r-sm);
      padding: 0.55rem 0.75rem 0.6rem;
      text-align: center;
      transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
    }
    .flow__site-tile:hover {
      background: #FFFFFF;
      border-color: var(--rule-strong);
    }
    .flow__site-tile-num {
      font-family: var(--font-mono);
      font-size: 9.5px;
      font-weight: 600;
      color: var(--ink-dim);
      letter-spacing: 0.1em;
      display: block;
      margin-bottom: 0.22rem;
    }
    .flow__site-tile-h {
      font-size: 13.5px;
      font-weight: 500;
      color: var(--ink);
      letter-spacing: -0.015em;
      line-height: 1.05;
    }
    .flow__site-tile-p {
      font-family: var(--font-mono);
      font-size: 9.5px;
      color: var(--ink-mid);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-top: 0.25rem;
    }

    /* Mobile: stack pionowo, strzałka rotuje 90deg */
    @media (max-width: 900px) {
      .flow {
        grid-template-columns: 1fr;
        gap: 0.6rem;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
      }
      .flow__email,
      .flow__site { transform: rotate(0); }
      .flow__bridge {
        position: relative;
        min-height: 90px;
        place-items: center;
      }
      .flow__arrow {
        width: 70px;
        height: 80px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
      }
      .flow__bridge-label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .flow__arrow-path { animation: none; }
      .flow__email, .flow__site { transform: none !important; }
    }

    /* Flow w hero · entry animacje */
    .flow--in-hero {
      margin: clamp(4.5rem, 7vw, 6.5rem) auto 0;
      max-width: 1200px;
    }
    @keyframes flow-in-left {
      from { opacity: 0; transform: translateX(-30px) rotate(-1.4deg); }
      to   { opacity: 1; transform: translateX(0) rotate(-1.4deg); }
    }
    @keyframes flow-in-right {
      from { opacity: 0; transform: translateX(30px) rotate(1.4deg); }
      to   { opacity: 1; transform: translateX(0) rotate(1.4deg); }
    }
    @keyframes flow-in-bridge {
      from { opacity: 0; transform: scale(0.88); }
      to   { opacity: 1; transform: scale(1); }
    }
    .hero--centered .flow__email  { animation: flow-in-left   0.9s 0.55s var(--ease-out-expo) backwards; }
    .hero--centered .flow__bridge { animation: flow-in-bridge 0.9s 0.85s var(--ease-out-expo) backwards; }
    .hero--centered .flow__site   { animation: flow-in-right  0.9s 0.70s var(--ease-out-expo) backwards; }

    @media (max-width: 900px) {
      .hero--centered .flow__email,
      .hero--centered .flow__bridge,
      .hero--centered .flow__site {
        animation: hero-up 0.7s var(--ease-out-expo) backwards;
      }
      .hero--centered .flow__email  { animation-delay: 0.50s; }
      .hero--centered .flow__bridge { animation-delay: 0.65s; }
      .hero--centered .flow__site   { animation-delay: 0.80s; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero--centered .flow__email,
      .hero--centered .flow__bridge,
      .hero--centered .flow__site { animation: none !important; }
    }

    /* Cennik mockup section · reset .hero__visual margin */
    #cennik-mockup .hero__visual {
      margin-top: 0;
    }

    /* ═══════════════════════════════════════════════════════
       CONTACT DEVICE – browser mockup z treścią kontaktu
       (Cztery klocki style, samodzielny boks pod cennik-mockup)
       ═══════════════════════════════════════════════════════ */
    .contact-device {
      position: relative;
      background: var(--paper);
      border-radius: var(--r-xl);
      border: 1px solid rgba(26, 24, 20, 0.06);
      overflow: hidden;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        var(--shadow-md);
      margin: clamp(2.5rem, 5vw, 4.5rem) auto 0;
      max-width: 720px;
    }
    .contact-device__body {
      padding: clamp(2.2rem, 4vw, 3.2rem) clamp(1.6rem, 3vw, 2.4rem) clamp(1.8rem, 3vw, 2.6rem);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 1.4rem;
    }
    .contact-device__title {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: clamp(34px, 4.4vw, 52px);
      line-height: 1;
      letter-spacing: -0.035em;
      color: var(--ink);
      text-wrap: balance;
      margin: 0.2rem 0 0.4rem;
    }
    .contact-device__title em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--ink-soft);
      letter-spacing: -0.005em;
    }
    .contact-device__rows-wrap {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .contact-device__rows-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding-bottom: 0.85rem;
      border-bottom: 1px dashed var(--rule);
    }
    .contact-device .cta__primary {
      width: 100%;
      max-width: 480px;
      justify-content: space-between;
      margin-top: 0.2rem;
    }
    .contact-device .cta__hint {
      text-align: center;
      margin-top: -0.2rem;
    }

    /* ═══════════════════════════════════════════════════════
       REVEAL · scroll-driven (IntersectionObserver) + hero stagger
       ═══════════════════════════════════════════════════════ */
    .reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    }
    .reveal.is-in {
      opacity: 1;
      transform: translateY(0);
    }

    /* Hero · immediate stagger entry (above-the-fold, nie czeka na IO) */
    @keyframes hero-up {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes hero-pop {
      0%   { opacity: 0; transform: translateY(40px) scale(0.92); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes hero-card-left {
      0%   { opacity: 0; transform: translateY(60px) rotate(-8deg) scale(0.9); }
      100% { opacity: 1; transform: translateY(28px) rotate(-2.4deg) scale(1); }
    }
    @keyframes hero-card-right {
      0%   { opacity: 0; transform: translateY(-60px) rotate(8deg) scale(0.9); }
      100% { opacity: 1; transform: translateY(-28px) rotate(2.4deg) scale(1); }
    }
    .hero--centered .hero__copy > * {
      animation: hero-up 0.8s var(--ease-out-expo) backwards;
    }
    .hero--centered .hero__copy > .eyebrow         { animation-delay: 0.05s; }
    .hero--centered .hero__copy > .hero__title     { animation-delay: 0.18s; }
    .hero--centered .hero__copy > .hero__sub       { animation-delay: 0.32s; }
    .hero--centered .hero__copy > .hero__ctas      { animation-delay: 0.46s; }
    .hero--centered .hero__copy > .hero__assurance { animation-delay: 0.6s; }
    .hero__device { animation: hero-pop 0.9s 0.5s var(--ease-out-expo) backwards, hero-float 9s 1.5s ease-in-out infinite; }
    /* Floating cards: w wersji desktop wpadają z rotacją; mobile po prostu fade-up */
    @media (min-width: 1081px) {
      .float-card--left  { animation: hero-card-left  0.9s 0.7s var(--ease-spring) backwards; }
      .float-card--right { animation: hero-card-right 0.9s 0.85s var(--ease-spring) backwards; }
    }
    @media (max-width: 1080px) {
      .float-card { animation: hero-up 0.7s 0.7s var(--ease-out-expo) backwards; }
    }

    /* Stagger dla kart w siatkach (cennik bento, realizacje, kroki) */
    .reveal[data-stagger] { transition-delay: calc(var(--stagger, 0) * 70ms); }

    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      .mockup, .mockup__chat,
      .hero__device, .float-card,
      .hero--centered .hero__copy > * { animation: none !important; }
      * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    }
    /* Forced colors / high contrast – pełna czytelność */
    @media (forced-colors: active) {
      .btn, .card, .proj, .compare-scroll, .faq__item, .nav__inner {
        border: 1px solid CanvasText;
      }
      .btn--primary, .nav__cta { background: CanvasText; color: Canvas; }
      .nav__lang { border: 1px solid CanvasText; }
    }
    /* Below-the-fold sekcje: usunięto content-visibility — powodowało phantom-space pod stopką
       po odświeżeniu (intrinsic-size 800px różniło się od rzeczywistej wysokości sekcji,
       browser nie przeliczał layoutu dopóki scroll nie wymusił re-paintu). */

    /* Print stylesheet – prosty, czytelny wydruk */
    @media print {
      :root { --bg: #FFFFFF; --paper: #FFFFFF; --ink: #000000; }
      body { background: #FFFFFF; color: #000000; }
      body::before { display: none; }
      .nav, .skip-link, .mockup__chat, .cta__card,
      .footer__weight { display: none !important; }
      .hero__mockup { display: none; }
      .hero__inner { grid-template-columns: 1fr; }
      .card, .proj, .faq__item, .compare-scroll, .about, .cta {
        page-break-inside: avoid;
        box-shadow: none !important;
      }
      .compare-scroll { overflow: visible; }
      .compare { min-width: 0; }
      a { color: #000000; text-decoration: underline; }
      .reveal { opacity: 1 !important; transform: none !important; }
    }


    /* ═══════════════════════════════════════════════════════════════════
       TYPO SYSTEM v2 · OVERRIDE LAYER (ported z main4.css po akceptacji)
       Premium typography upgrade dla całej strony głównej + porownanie

       Zmiany vs poprzednia wersja:
       — Hero title: dramatyczny scale (clamp 56–96px), 800 weight, -0.045em
       — Section title: bigger (34–60px) + 800 weight + -0.028em
       — CTA title: bigger (36–60px) + 800 weight
       — Card price: 800 weight + tabular-nums
       — Hero/Section/CTA/Founder lead: 18–22px ink-soft (czytelniej)
       — Founder lead bumped (był 16–19px, teraz 18–22px)
       — Bullets/Timeline: refined typography
       — Tabular nums w cenach i datach
       — Hanging punctuation + text-wrap balance globalnie
       — FAQ + Section label + Footer sig-name = bez zmian (oryginalny main.css)
       ═══════════════════════════════════════════════════════════════════ */

    :root {
      --ts-display: clamp(56px, 8vw, 112px);
      --ts-h1: clamp(48px, 6.5vw, 84px);
      --ts-h2: clamp(32px, 4.4vw, 60px);
      --ts-h3: clamp(22px, 2.4vw, 26px);
      --ts-lead: clamp(18px, 1.9vw, 22px);
      --ts-body: 16px;
      --ts-small: 14px;
      --ts-micro: 11.5px;

      --ls-display: -0.045em;
      --ls-h1: -0.038em;
      --ls-h2: -0.028em;
      --ls-h3: -0.018em;
      --ls-body: -0.006em;
      --ls-caps: 0.10em;

      --lh-tight: 1.0;
      --lh-heading: 1.08;
      --lh-sub: 1.32;
      --lh-body: 1.6;
      --lh-loose: 1.78;
    }

    /* ─── BASE ─── */
    html {
      hanging-punctuation: first last;
    }
    /* font-features main.css ("tnum","ss01") zostają – brak cv11/calt overrides */

    /* ─── HERO ─── */
    .hero__title {
      font-size: clamp(56px, 7.4vw, 96px);
      letter-spacing: -0.045em;
      line-height: 0.96;
      font-weight: 800;
    }
    @media (max-width: 540px) {
      .hero__title {
        font-size: clamp(48px, 12vw, 64px);
        letter-spacing: -0.04em;
        line-height: 0.98;
      }
    }
    .hero--centered .hero__title {
      max-width: 18ch;
    }

    .hero__sub {
      font-size: clamp(18px, 1.95vw, 22px);
      line-height: 1.5;
      color: var(--ink-soft);
      letter-spacing: var(--ls-body);
      max-width: 52ch;
    }
    .hero--centered .hero__sub {
      max-width: 52ch;
    }
    @media (max-width: 540px) {
      .hero__sub { font-size: 18px; line-height: 1.55; }
    }

    /* ─── SECTION HEAD ─── */
    /* Section label – zostawiamy main.css 1:1 (2 kreski, ink-mid, 11.5px) */

    /* Section title – mocniejszy weight 800 + większa skala = premium impact */
    .section__title {
      font-size: clamp(34px, 4.6vw, 60px);
      letter-spacing: -0.028em;
      line-height: 1.04;
      font-weight: 800;
      max-width: 22ch;
      margin-bottom: 1.1rem;
    }
    @media (max-width: 540px) {
      .section__title {
        font-size: clamp(32px, 8vw, 42px);
        letter-spacing: -0.025em;
        line-height: 1.06;
      }
    }
    .section__title em {
      letter-spacing: -0.015em;
    }

    .section__lead {
      font-size: clamp(18px, 1.95vw, 22px);
      line-height: 1.5;
      color: var(--ink-soft);
      max-width: 52ch;
      letter-spacing: var(--ls-body);
    }
    @media (max-width: 540px) {
      .section__lead { font-size: 18px; line-height: 1.55; }
    }

    /* Bullets/Timeline – te klasy są w podstrony.css (audyt/agenci),
       nie w index.html. Override przeniesiony tam. */

    /* FAQ a – bumped do 16.5px (FAQ to mini-artykuł, nie label – Stripe/Linear standard).
       FAQ q zostaje 16.5px/500 z main.css. */
    .faq__a {
      font-size: 16.5px;
      line-height: 1.7;
    }

    /* CARDS – mocniejszy price + tabular-nums (premium feel) */
    .card__price-num {
      font-variant-numeric: tabular-nums;
      font-weight: 800;
      letter-spacing: -0.028em;
    }
    .card__price-cur {
      font-variant-numeric: tabular-nums;
    }

    /* ─── DELIVERS / LISTS ─── */
    .delivers__grid li {
      font-size: 15px;
      line-height: 1.6;
      letter-spacing: -0.003em;
    }
    .delivers__label {
      font-size: 11px;
      letter-spacing: 0.14em;
      font-weight: 700;
    }

    /* ─── PRICE CARD ─── */
    .price-card__num {
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.028em;
      font-weight: 800;
    }
    .price-card__label {
      font-size: 11px;
      letter-spacing: 0.14em;
    }

    /* ─── COMPARE ─── */
    .compare-row__name {
      font-weight: 700;
      letter-spacing: -0.014em;
    }
    .compare-row__cell {
      font-variant-numeric: tabular-nums;
    }

    /* PROJECTS – main.css ma 700/-0.028em (lepsze niż moje), zostawiam bez override */

    /* Founder section ("Pracownia. Nie agencja.") – lead bumped do 18-22px */
    .founder__lead {
      font-size: clamp(18px, 1.95vw, 22px);
      line-height: 1.5;
      color: var(--ink-soft);
      letter-spacing: var(--ls-body);
    }
    /* Founder body – bumped do 16-18px (premium long-form readability)
       Wcześniej clamp(15px, 1.4vw, 16.5px) – za mały dla długiego tekstu */
    .founder__bio {
      font-size: clamp(16px, 1.5vw, 18px);
      line-height: 1.7;
    }

    /* CTA – mocniejszy title + większy sub (premium feel) */
    .cta__title {
      font-size: clamp(36px, 4.6vw, 60px);
      letter-spacing: -0.028em;
      line-height: 1.04;
      font-weight: 800;
    }
    .cta__sub {
      font-size: clamp(18px, 1.9vw, 21px);
      line-height: 1.55;
      color: var(--ink-soft);
      letter-spacing: var(--ls-body);
    }

    /* ─── NAV refinements ─── */
    .brand__name {
      font-weight: 700;
      letter-spacing: -0.024em;
    }

    /* ─── TABULAR NUMS for monetary/numeric pills ─── */
    .hero__chip,
    .price-card__price,
    .compare__cell,
    .nav__cta,
    .footer__bottom-year {
      font-variant-numeric: tabular-nums;
    }

    /* ─── HEADINGS GLOBAL ─── */
    h1, h2, h3, h4, h5, h6 {
      text-wrap: balance;
      scroll-margin-top: 6rem;
    }
    p {
      text-wrap: pretty;
    }

    /* ─── EYEBROW / KONSOLA refinements ─── */
    .eyebrow {
      font-size: 13px;
      letter-spacing: -0.005em;
      font-weight: 500;
      padding: 0.5rem 1.05rem;
    }
    .konsola {
      font-size: 12.5px;
      letter-spacing: 0.02em;
    }

    /* ─── FOOTER ─── */
    .footer {
      font-size: 13.5px;
      letter-spacing: -0.003em;
    }
    .footer__pitch {
      font-size: 14.5px;
      line-height: 1.62;
      color: var(--ink-soft);
    }
    /* footer__sig-name "Michał Rybicki" – zostaje main.css 600 weight (bez override) */
    /* ═══════════════════════════════════════════════════════════════════
       END · TYPO SYSTEM v2 OVERRIDE
       ═══════════════════════════════════════════════════════════════════ */


    /* ═══════════════════════════════════════════════════════════════════
       PILLS PREMIUM v3 · ported z index2.html (po akceptacji)

       Zmiany SELEKTYWNE — tylko 3 elementy:
       — founder__chip (Właściciel pracowni, 14 LAT) → padding/shadow refinement
       — founder__card (Polscy Geniusze, Mentosfera) → paper warm bg + border + shadow
       — footer__bottom-meta li (Faktury VAT, Wersja 2.0) → tylko outer shadow

       NIE TYKAMY:
       — card__time (cennik 24h, 3 dni) → oryginał
       — proj__num (projekty 001) → oryginał
       — proj__tag (Pełna strona) → oryginał
       ═══════════════════════════════════════════════════════════════════ */

    /* Founder chips — mono caps pill, węższy padding, dodany outer shadow */
    .founder__chip {
      padding: 0.45rem 0.9rem;
      box-shadow:
        inset 0 0 0 1px rgba(26, 24, 20, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 1px rgba(26, 24, 20, 0.03);
      line-height: 1;
      white-space: nowrap;
    }
    /* "14 lat" — weight jak reszta, tylko kolor ink (delikatne wyróżnienie przez kolor) */
    .founder__chip strong {
      font-weight: 600;
      color: var(--ink);
    }

    /* Founder cards (Polscy Geniusze, Mentosfera) — paper warm bg + border + shadow */
    .founder__card {
      background: #FAF6EF;
      box-shadow:
        0 0 0 1px rgba(26, 24, 20, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 2px rgba(26, 24, 20, 0.04);
      transition: background 0.25s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
    }
    /* Hover: lift premium — border znika, plakietka odrywa się od strony,
       zostaje tylko soft shadow + top highlight (3D feel jak Stripe/Linear) */
    .founder__card:hover {
      background: #FAF6EF;
      box-shadow:
        0 0 0 1px rgba(26, 24, 20, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 4px 10px -2px rgba(26, 24, 20, 0.10),
        0 12px 24px -10px rgba(26, 24, 20, 0.12);
      transform: translateY(-2px);
    }

    /* Footer bottom meta — DODANY tylko subtle outer shadow (reszta jak było) */
    .footer__bottom-meta li {
      box-shadow:
        inset 0 0 0 1px rgba(26, 24, 20, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 1px rgba(26, 24, 20, 0.03);
    }

    /* Project tags na ciemnych zdjęciach — wzmocnienie widoczności
       (bez nowego stylu: lekko mocniejszy border + minimalny outer shadow) */
    .proj__tag {
      box-shadow:
        inset 0 0 0 1px rgba(26, 24, 20, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.06);
    }
    .proj__num {
      box-shadow:
        inset 0 0 0 1px rgba(26, 24, 20, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.06);
    }

    /* Highlight ("DNA.") — jaśniejszy warm cream, mniej żółtego, spójny z paletą strony.
       Subtelny warm rim na dole zamiast amber glow. */
    .highlight {
      padding: 0.05em 0.3em;
      border-radius: 0.25em;
      background: linear-gradient(135deg, #FBF6E8 0%, #F4ECD7 55%, #EEE4C8 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1.5px 0 rgba(180, 145, 80, 0.16);
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }
    /* ═══════════════════════════════════════════════════════════════════
       END · PILLS PREMIUM v3
       ═══════════════════════════════════════════════════════════════════ */


    /* ═══════════════════════════════════════════════════════════════════
       COOKIE CONSENT (cc-slate · ciemny pasek dolny + modal "Dostosuj")
       Storage: localStorage 'cc-consent-v1', TTL 365 dni.
       Po accept/reject banner znika i nie pokazuje się ponownie aż wygaśnie
       zapis (po roku) lub user wyczyści localStorage.
       ═══════════════════════════════════════════════════════════════════ */
    .cc-hidden { display: none !important; }
    @keyframes cc-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes cc-fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes cc-pop { from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

    .cc {
      --cc-bg: var(--paper);
      --cc-ink: var(--ink);
      --cc-ink-soft: var(--ink-mid);
      --cc-border: var(--rule-strong);
      font-family: var(--font-sans);
      color: var(--cc-ink);
      z-index: 9000;
    }
    .cc *, .cc *::before, .cc *::after { box-sizing: border-box; }

    .cc__title {
      font-family: var(--font-sans);
      font-size: 16px;
      font-weight: 650;
      letter-spacing: -0.015em;
      line-height: 1.25;
      color: var(--cc-ink);
      margin-bottom: 0.35rem;
      display: flex;
      align-items: baseline;
      gap: 0.4em;
    }
    .cc__title em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      letter-spacing: -0.01em;
      color: var(--accent);
      font-size: 1.05em;
    }
    .cc-modal .cc__title em {
      color: var(--cc-ink);
      font-family: inherit;
      font-style: normal;
      font-weight: inherit;
      font-size: 1em;
    }
    .cc__text {
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--cc-ink-soft);
      max-width: 56ch;
    }
    .cc__text a {
      color: var(--cc-ink);
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-thickness: 1px;
      text-decoration-color: color-mix(in srgb, var(--ink) 10%, transparent);
      transition: text-decoration-color 0.2s var(--ease);
    }
    .cc__text a:hover { text-decoration-color: var(--ink); }

    .cc__btn {
      --lift: 0px;
      --press: 1;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      min-height: 42px;
      padding: 0.7rem 1.05rem;
      border-radius: 999px;
      font-family: var(--font-sans);
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: -0.005em;
      cursor: pointer;
      border: 1px solid transparent;
      transform: translateY(var(--lift)) scale(var(--press));
      transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
      white-space: nowrap;
      text-decoration: none;
      will-change: transform;
    }
    .cc__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .cc__btn--primary {
      background: var(--ink);
      color: var(--paper);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 12px rgba(26,24,20,0.18);
    }
    .cc__btn--primary:hover { --lift: -1px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 22px -6px rgba(26,24,20,0.32); }
    .cc__btn--primary:active { --press: 0.97; transition-duration: 80ms; }
    .cc__btn--secondary {
      background: var(--paper);
      color: var(--ink);
      border-color: var(--rule-strong);
      box-shadow: var(--shadow-xs);
    }
    .cc__btn--secondary:hover { --lift: -1px; background: #FFFFFF; border-color: rgba(26,24,20,0.22); box-shadow: var(--shadow-sm); }
    .cc__btn--secondary:active { --press: 0.97; transition-duration: 80ms; }
    .cc__btn--link {
      background: transparent;
      color: var(--ink-soft);
      padding: 0;
      min-height: auto;
      font-size: 13px;
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-thickness: 1px;
      text-decoration-color: color-mix(in srgb, var(--ink) 10%, transparent);
      border-radius: 4px;
      transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
    }
    .cc__btn--link:hover { color: var(--ink); text-decoration-color: var(--ink); }
    .cc__btn--link:focus-visible { outline-offset: 4px; }

    /* Toggle (granular consent) — modal */
    .cc-tog {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 0.85rem;
      align-items: start;
      padding: 0.85rem 0;
      border-bottom: 1px solid var(--rule);
    }
    .cc-tog:last-child { border-bottom: 0; }
    .cc-tog__meta { min-width: 0; }
    .cc-tog__head {
      display: flex; align-items: center; gap: 0.5rem;
      font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--cc-ink);
      margin-bottom: 0.2rem;
    }
    .cc-tog__pill {
      display: inline-block;
      padding: 1px 7px;
      border-radius: 999px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      background: var(--accent-soft);
      color: var(--accent);
    }
    .cc-tog__desc { font-size: 12.5px; line-height: 1.5; color: var(--ink-mid); }
    .cc-tog__switch {
      position: relative;
      width: 40px; height: 24px;
      flex-shrink: 0;
      background: rgba(26,24,20,0.14);
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.2s var(--ease);
      display: inline-block;
      margin-top: 2px;
    }
    .cc-tog__switch::after {
      content: '';
      position: absolute;
      top: 3px; left: 3px;
      width: 18px; height: 18px;
      background: #FFFFFF;
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(26,24,20,0.2);
      transition: transform 0.22s var(--ease-snap);
    }
    .cc-tog input { position: absolute; opacity: 0; pointer-events: none; }
    .cc-tog input:checked ~ .cc-tog__switch { background: var(--accent); }
    .cc-tog input:checked ~ .cc-tog__switch::after { transform: translateX(16px); }
    .cc-tog input:focus-visible ~ .cc-tog__switch { outline: 2px solid var(--accent); outline-offset: 2px; }
    .cc-tog input:disabled ~ .cc-tog__switch { background: var(--accent); opacity: 0.55; cursor: not-allowed; }
    .cc-tog input:disabled ~ .cc-tog__switch::after { transform: translateX(16px); }
    .cc-tog label { display: contents; cursor: pointer; }

    /* Modal "Dostosuj" */
    .cc-modal__backdrop {
      position: fixed; inset: 0;
      background: rgba(26,24,20,0.42);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 9100;
      animation: cc-fade-in 0.25s var(--ease);
    }
    .cc-modal {
      position: fixed;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: min(520px, calc(100vw - 1.6rem));
      max-height: calc(100vh - 2rem);
      background: var(--cc-bg);
      border: 1px solid var(--cc-border);
      border-radius: 22px;
      box-shadow: var(--shadow-xl);
      z-index: 9101;
      animation: cc-pop 0.32s var(--ease-out-expo);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .cc-modal__head {
      flex-shrink: 0;
      padding: 1.3rem 1.4rem 0.95rem;
      border-bottom: 1px solid var(--rule);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
    }
    .cc-modal__head .cc__title { margin-bottom: 0.25rem; font-size: 18px; }
    .cc-modal__head .cc__text { font-size: 13.5px; }
    .cc-modal__close {
      flex-shrink: 0;
      width: 32px; height: 32px;
      border-radius: 50%;
      border: 1px solid var(--rule-strong);
      background: var(--paper);
      color: var(--ink-mid);
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
    }
    .cc-modal__close:hover { background: #FFFFFF; color: var(--ink); border-color: rgba(26,24,20,0.22); }
    .cc-modal__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
    .cc-modal__body {
      flex: 1;
      overflow-y: auto;
      padding: 0.4rem 1.4rem 0.6rem;
    }
    .cc-modal__foot {
      flex-shrink: 0;
      padding: 0.95rem 1.4rem 1.1rem;
      border-top: 1px solid var(--rule);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.55rem;
    }
    .cc-modal__foot .cc__btn { width: 100%; }
    @media (max-width: 480px) {
      .cc-modal__head, .cc-modal__body, .cc-modal__foot { padding-left: 1.1rem; padding-right: 1.1rem; }
      .cc-modal__foot { grid-template-columns: 1fr; }
    }

    /* Reopen button — pływający, lewy-dół, pojawia się PO decyzji */
    .cc-reopen {
      position: fixed;
      left: 1rem; bottom: 1rem;
      z-index: 7000;
      width: 38px; height: 38px;
      border-radius: 50%;
      border: 1px solid var(--rule-strong);
      background: var(--paper);
      color: var(--ink-mid);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.2s var(--ease);
      font-family: var(--font-sans);
    }
    .cc-reopen:hover { transform: translateY(-1px); color: var(--accent); border-color: rgba(44,84,70,0.32); box-shadow: var(--shadow-md); }
    .cc-reopen:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .cc-reopen svg { width: 16px; height: 16px; }
    @media (max-width: 480px) { .cc-reopen { left: 0.6rem; bottom: 0.6rem; } }

    /* Wariant 10: SLATE — ciemny pasek dolny */
    .cc-slate {
      position: fixed;
      left: 1rem; right: 1rem; bottom: 1rem;
      max-width: 1180px;
      margin: 0 auto;
      background: linear-gradient(180deg, #1F1C17 0%, #15130F 100%);
      color: #F5EFE2;
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 18px;
      padding: 0.95rem 1.4rem;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 1px 2px rgba(0,0,0,0.2),
        0 18px 40px -14px rgba(0,0,0,0.45);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 1.4rem;
      align-items: center;
      animation: cc-fade-up 0.42s var(--ease-out-expo);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      overflow: hidden;
    }
    .cc-slate::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100%);
      opacity: 0.7;
    }
    .cc-slate__copy { min-width: 0; }
    .cc-slate__title {
      font-size: 14.5px;
      font-weight: 650;
      letter-spacing: -0.01em;
      color: #F5EFE2;
      margin-bottom: 0.2rem;
      display: flex;
      align-items: baseline;
      gap: 0.5em;
    }
    .cc-slate__title em {
      font-family: inherit;
      font-style: normal;
      font-weight: inherit;
      color: #F5EFE2;
      font-size: 1em;
    }
    .cc-slate__text {
      font-size: 13px;
      line-height: 1.5;
      color: rgba(245, 239, 226, 0.65);
      max-width: 60ch;
    }
    .cc-slate__text a {
      color: rgba(245, 239, 226, 0.92);
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-color: rgba(255,255,255,0.18);
    }
    .cc-slate__text a:hover { text-decoration-color: #F5EFE2; color: #F5EFE2; }
    .cc-slate__actions { display: flex; gap: 0.65rem; flex-shrink: 0; align-items: center; }
    .cc-slate__actions .cc__btn { padding-left: 1.3rem; padding-right: 1.3rem; }
    .cc-slate__actions .cc__btn--link { padding-left: 0.4rem; padding-right: 0.4rem; }
    .cc-slate .cc__btn--primary {
      background: #FBF8F2;
      color: #1A1814;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 12px rgba(0,0,0,0.25);
    }
    .cc-slate .cc__btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 22px -6px rgba(0,0,0,0.45); }
    .cc-slate .cc__btn--secondary {
      background: rgba(255,255,255,0.04);
      color: #F5EFE2;
      border-color: rgba(255,255,255,0.14);
      box-shadow: none;
    }
    .cc-slate .cc__btn--secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); }
    .cc-slate .cc__btn--link { color: rgba(245,239,226,0.7); text-decoration-color: rgba(255,255,255,0.18); }
    .cc-slate .cc__btn--link:hover { color: #F5EFE2; text-decoration-color: #F5EFE2; }
    @media (max-width: 760px) {
      .cc-slate { grid-template-columns: 1fr; gap: 0.85rem; left: 0.6rem; right: 0.6rem; bottom: 0.6rem; padding: 1rem 1.1rem 1rem 1.3rem; }
      .cc-slate__actions { justify-content: flex-end; flex-wrap: wrap; }
    }
    @media (prefers-reduced-motion: reduce) {
      .cc-slate { animation: none !important; }
      .cc-modal { animation: none !important; }
      .cc-modal__backdrop { animation: none !important; }
    }
    /* ═══════════════════════════════════════════════════════════════════
       END · COOKIE CONSENT
       ═══════════════════════════════════════════════════════════════════ */


    /* ═══════════════════════════════════════════════════════════════════
       UX-CTA REVEAL (Generator palet · wariant 10)
       Box jest <div>, klikalny jest tylko CTA <a>.
       ═══════════════════════════════════════════════════════════════════ */
    /* padding-bottom dziedziczy z `section { padding: clamp(3.4rem, 6.5vw, 5.6rem) 0; }`,
       a padding-top jest zmniejszony — żeby CTA wizualnie należał do portfolio (bliskość = przynależność),
       a większy odstęp pod jasno oddzielał go od sekcji "O właścicielu". */
    .ux-cta-section {
      position: relative;
      z-index: 1;
      padding-top: clamp(1.5rem, 3vw, 2.8rem);
    }
    .ux-cta-section > .wrap > .ux-cta-reveal { margin-left: auto; margin-right: auto; }

    .ux-cta-reveal {
      --lift: 0;
      display: flex;
      flex-direction: column;
      gap: clamp(1.375rem, 1.75vw, 1.525rem);
      max-width: 760px;
      width: 100%;
      padding: clamp(1.675rem, 2.65vw, 2.35rem);
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-sm);
      transform: translateY(calc(var(--lift) * 1px));
      transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease);
      cursor: default;
    }
    .ux-cta-reveal__head { display: flex; flex-direction: column; gap: 0.5rem; }
    .ux-cta-reveal__tag {
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      align-self: flex-start;
    }
    .ux-cta-reveal__h {
      font-family: var(--font-sans);
      font-size: clamp(22px, 2.5vw, 28px);
      font-weight: 700;
      letter-spacing: -0.025em;
      line-height: 1.05;
      color: var(--ink);
      text-wrap: balance;
    }
    .ux-cta-reveal__h em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--ink-soft);
    }
    .ux-cta-reveal__strip {
      display: flex;
      gap: 4px;
      height: 76px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
      position: relative;
      /* Pasek stykał się z nagłówkiem i przyciskiem – 5 px z góry i z dołu daje mu
         oddech, bez zmiany wysokości samych próbek. Dotyczy obu widoków. */
      margin: 5px 0;
    }
    .ux-cta-reveal__strip span {
      flex: 1;
      position: relative;
      transition: flex 0.45s var(--ease), transform 0.3s var(--ease);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 0.35rem;
      transform-origin: center bottom;
      will-change: transform, filter, opacity;
    }
    .ux-cta-reveal__strip span:nth-child(1)  { --i: 0; }
    .ux-cta-reveal__strip span:nth-child(2)  { --i: 1; }
    .ux-cta-reveal__strip span:nth-child(3)  { --i: 2; }
    .ux-cta-reveal__strip span:nth-child(4)  { --i: 3; }
    .ux-cta-reveal__strip span:nth-child(5)  { --i: 4; }
    .ux-cta-reveal__strip span:nth-child(6)  { --i: 5; }
    .ux-cta-reveal__strip span:nth-child(7)  { --i: 6; }
    .ux-cta-reveal__strip span:nth-child(8)  { --i: 7; }
    .ux-cta-reveal__strip span:nth-child(9)  { --i: 8; }
    .ux-cta-reveal__strip span:nth-child(10) { --i: 9; }
    .ux-cta-reveal__strip span:nth-child(11) { --i: 10; }
    .ux-cta-reveal__strip span {
      animation:
        paletteIn 0.85s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 70ms) backwards,
        paletteBreath 6.5s ease-in-out calc(900ms + var(--i, 0) * 220ms) infinite;
    }
    .ux-cta-reveal__strip::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(
        100deg,
        transparent 0%,
        transparent 40%,
        rgba(255,255,255,0.18) 50%,
        transparent 60%,
        transparent 100%
      );
      mix-blend-mode: overlay;
      transform: translateX(-100%);
      animation: paletteShine 4.5s cubic-bezier(.45,0,.55,1) 0.4s infinite;
    }
    @keyframes paletteIn {
      0%   { opacity: 0; transform: translateY(14px) scaleY(0.86); filter: saturate(0.45) brightness(1.08); }
      60%  { opacity: 1; }
      100% { opacity: 1; transform: translateY(0) scaleY(1); filter: saturate(1) brightness(1); }
    }
    @keyframes paletteBreath {
      0%, 100% { transform: translateY(0) scaleY(1);     filter: brightness(1)    saturate(1); }
      50%      { transform: translateY(-1.5px) scaleY(1.015); filter: brightness(1.05) saturate(1.06); }
    }
    @keyframes paletteShine {
      0%   { transform: translateX(-100%); }
      40%  { transform: translateX(110%); }
      100% { transform: translateX(110%); }
    }
    .ux-cta-reveal__strip span em {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.04em;
      font-style: normal;
      color: var(--ink);
      opacity: 0;
      transition: opacity 0.2s var(--ease);
      font-variant-numeric: tabular-nums;
    }
    .ux-cta-reveal__strip span[data-light] em { color: var(--paper); }
    .ux-cta-reveal__strip:hover span { flex: 0.6; }
    .ux-cta-reveal__strip:hover span:hover { flex: 2.4; }
    .ux-cta-reveal__strip span:hover em { opacity: 1; }
    .ux-cta-reveal__strip:hover::after { animation-play-state: paused; }
    @media (max-width: 720px) {
      .ux-cta-reveal__strip { height: 110px; }
      .ux-cta-reveal__strip span em { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ux-cta-reveal__strip span,
      .ux-cta-reveal__strip::after { animation: none !important; }
    }
    .ux-cta-reveal__btn {
      --lift: 0;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.85rem 1.3rem;
      background: var(--ink);
      color: var(--paper);
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -0.005em;
      align-self: flex-start;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 14px rgba(26,24,20,0.2);
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
    }
    .ux-cta-reveal__btn svg { width: 13px; height: 13px; transition: transform 0.3s var(--ease-snap); }
    .ux-cta-reveal__btn:hover { transform: translateY(-1px); }
    .ux-cta-reveal__btn:hover svg { transform: translateX(3px); }
    .ux-cta-reveal__btn:active { transform: translateY(0) scale(0.97); transition-duration: 80ms; }
    /* ═══════════════════════════════════════════════════════════════════
       END · UX-CTA REVEAL
       ═══════════════════════════════════════════════════════════════════ */

    /* ════════════════════════════════════════════════════════════
       Nav CTA → icon-only on mobile ("Napisz maila" overflowed)
       ════════════════════════════════════════════════════════════ */
    @media (max-width: 720px) {
      .nav__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
        gap: 0;
        padding: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      .nav__cta > * { display: none; }
      .nav__cta::after {
        content: "";
        display: block;
        width: 17px;
        height: 17px;
        background: var(--paper);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M22 2 15 22 11 13 2 9Z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M22 2 15 22 11 13 2 9Z'/%3E%3C/svg%3E") center / contain no-repeat;
      }
    }

    /* ═══════════════════════════════════════════════════════════════════
       HERO RIGHT · REPORT VIEW (panel poranny dla właściciela)
       Apple Activity Ring style — liczba (HERO, sans bold, tabular-nums)
       na górze, etykieta (mono uppercase, mała) pod. Wszystko centered.
       Wysokość ≈ oryginał (45 px), żeby panel się nie rozjeżdzał w górę.
       ═══════════════════════════════════════════════════════════════════ */
    .flow__site--report .flow__site-tile {
      text-align: center;
      padding: 0.45rem 0.55rem 0.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.12rem;
    }
    .flow__site--report .flow__site-tile-row {
      display: flex;
      justify-content: center;
      order: 1;
    }
    .flow__site--report .flow__site-tile-num {
      font-family: var(--font-sans);
      font-size: 19px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.03em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .flow__site--report .flow__site-tile-h {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 600;
      color: var(--ink-dim);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      order: 2;
    }
    .flow__site--report .flow__site-tile-trend { display: none; }