/* 01-common.css */
/* ===== Tokens (Palette A — Original) ===== */
    :root {
      --ink: #1d1d1b;
      --indigo: #3909f3;
      --yellow: #f5c313;
      --paper: #ffffff;
      --paper-2: #f5f5f3;
      --line: #e3e3df;
      --muted: #6e6e6a;
      --font: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
      --pad-x: max(48px, calc((100vw - 1280px) / 2));
    }
/* ===== Reset & base ===== */
    *, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
/* ===== Top nav ===== */
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 18px var(--pad-x);
      border-bottom: 1px solid var(--line);
      position: sticky;
      top: 0;
      z-index: 30;
      background: var(--paper);
    }
.logo {
      font-weight: 800;
      font-size: 18px;
      letter-spacing: -0.02em;
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
    }
.logo .dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      background: var(--indigo);
      margin: 0 1px;
      position: relative;
      top: -1px;
    }
.logo .by { font-weight: 500; font-size: 12px; color: var(--muted); margin-left: 6px; }
.logo .by b { color: var(--yellow); font-weight: 700; }
.nav-items {
      display: flex;
      gap: 26px;
      font-size: 13px;
      font-weight: 500;
    }
.nav-items a:hover { color: var(--indigo); }
.cta {
      background: var(--ink);
      color: var(--paper);
      padding: 9px 18px;
      border-radius: 999px;
      font-weight: 600;
      font-size: 13px;
      border: none;
      cursor: pointer;
      transition: opacity .15s;
    }
.cta:hover { opacity: 0.85; }
/* ===== Sections ===== */
    .section {
      padding: 80px var(--pad-x);
      border-bottom: 1px solid var(--line);
    }
.section.tight { padding: 56px var(--pad-x); }
.section.dark { background: var(--ink); color: var(--paper); border-color: rgba(255,255,255,.08); }
.section.indigo { background: var(--indigo); color: var(--paper); border-color: transparent; }
.section.yellow { background: var(--yellow); color: var(--ink); border-color: transparent; }
.section.alt { background: var(--paper-2); }
/* ===== Type ===== */
    .eyebrow {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
.eyebrow::before {
      content: '';
      width: 18px;
      height: 2px;
      background: var(--indigo);
    }
.section.dark .eyebrow,
    .section.indigo .eyebrow { color: rgba(255,255,255,.6); }
.section.yellow .eyebrow { color: rgba(0,0,0,.55); }
.section.dark .eyebrow::before,
    .section.indigo .eyebrow::before { background: var(--yellow); }
.section.yellow .eyebrow::before { background: var(--indigo); }
.h1 {
      font-weight: 800;
      font-size: 64px;
      line-height: 1.02;
      letter-spacing: -0.035em;
      text-wrap: balance;
    }
.h2 {
      font-weight: 700;
      font-size: 44px;
      line-height: 1.05;
      letter-spacing: -0.025em;
      text-wrap: balance;
    }
.h3 {
      font-weight: 700;
      font-size: 22px;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }
.body-txt {
      font-size: 15px;
      color: var(--muted);
      max-width: 640px;
      line-height: 1.55;
    }
.section.dark .body-txt,
    .section.indigo .body-txt { color: rgba(255,255,255,.75); }
/* ===== Buttons ===== */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 22px;
      border-radius: 999px;
      font-weight: 600;
      font-size: 14px;
      border: 1.5px solid var(--ink);
      background: var(--ink);
      color: var(--paper);
      cursor: pointer;
      transition: transform .15s, opacity .15s;
    }
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.yellow { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.btn.white { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn.white-ghost { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* ===== Pill ===== */
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 500;
      background: var(--paper);
    }
/* ===== Card ===== */
    .card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 24px;
    }
.card.indigo { background: var(--indigo); border-color: var(--indigo); color: var(--paper); }
.card.yellow { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
/* ===== Stats ===== */
    .stat {
      font-weight: 800;
      font-size: 80px;
      line-height: 0.95;
      letter-spacing: -0.04em;
    }
.stat-lbl {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 8px;
    }
.section.dark .stat-lbl,
    .section.indigo .stat-lbl { color: rgba(255,255,255,.6); }
/* ===== Placeholder pattern ===== */
    .ph {
      background:
        repeating-linear-gradient(135deg, transparent 0 8px, rgba(0,0,0,.04) 8px 9px),
        var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      text-align: center;
      padding: 12px;
    }
.ph.dark {
      background:
        repeating-linear-gradient(135deg, transparent 0 8px, rgba(255,255,255,.05) 8px 9px),
        #2a2a26;
      border-color: rgba(255,255,255,.1);
      color: rgba(255,255,255,.5);
    }
/* ===== Logo bar ===== */
    .logos {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 32px;
      align-items: center;
      justify-items: center;
      width: 100%;
    }
.logo-slot {
      height: 48px;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
.logo-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: grayscale(100%) brightness(0.6);
      opacity: 0.85;
      transition: filter .2s, opacity .2s;
    }
.logo-img:hover { filter: grayscale(0%) brightness(1); opacity: 1; }
/* ===== Step list ===== */
    .step {
      display: flex;
      gap: 18px;
      align-items: flex-start;
      padding: 22px 0;
      border-bottom: 1px solid var(--line);
    }
.step:last-of-type { border-bottom: none; }
.step-n {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      color: var(--indigo);
      min-width: 32px;
    }
.step-content { flex: 1; }
.step-title {
      font-weight: 700;
      font-size: 18px;
      margin: 0 0 6px;
      letter-spacing: -0.01em;
    }
.step-time {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: .02em;
      margin-left: 4px;
    }
/* ===== Check list ===== */
    .check li {
      display: flex;
      gap: 10px;
      padding: 8px 0;
      font-size: 14px;
      border-bottom: 1px solid var(--line);
    }
.check li::before {
      content: '';
      width: 8px;
      height: 8px;
      background: var(--indigo);
      border-radius: 2px;
      margin-top: 8px;
      flex-shrink: 0;
    }
.section.dark .check li,
    .section.indigo .check li,
    .card.indigo .check li { border-color: rgba(255,255,255,.1); }
.card.yellow .check li { border-color: rgba(0,0,0,.15); }
.section.dark .check li::before,
    .section.indigo .check li::before,
    .card.indigo .check li::before { background: var(--yellow); }
.section.yellow .check li::before,
    .card.yellow .check li::before { background: var(--indigo); }
/* ===== Form ===== */
    .input {
      width: 100%;
      height: 48px;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 0 14px;
      font-family: var(--font);
      font-size: 14px;
      background: var(--paper);
      color: var(--ink);
    }
textarea.input { height: 90px; padding: 12px 14px; resize: vertical; }
.input:focus { outline: 2px solid var(--indigo); outline-offset: 1px; border-color: var(--indigo); }
.label {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      display: block;
      margin-bottom: 6px;
      font-weight: 500;
    }
.radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.radio {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 14px;
      font-size: 13px;
      background: var(--paper);
      color: var(--ink);
      cursor: pointer;
      font-family: inherit;
    }
.radio.active,
    .radio:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* ===== HERO ===== */
    .hero { position: relative; overflow: hidden; }
.hero-glow {
      position: absolute;
      top: -10%;
      right: -15%;
      width: 75%;
      height: 120%;
      background: radial-gradient(ellipse at 65% 50%, rgba(57, 9, 243, 0.75) 0%, rgba(57, 9, 243, 0.5) 25%, rgba(57, 9, 243, 0.2) 50%, transparent 70%);
      filter: blur(20px);
      pointer-events: none;
    }
.hero-grid {
      display: grid;
      grid-template-columns: 1.4fr 0.95fr;
      gap: 40px;
      align-items: center;
      position: relative;
      z-index: 1;
    }
.hero-grid > :nth-child(2) {
      justify-self: end;
      width: 100%;
      max-width: 460px;
    }
.hero h1 .accent { color: var(--yellow); display: inline-block; margin-top: 14px; }
.hero .eyebrow { margin-bottom: 32px; font-size: 14px; }
.hero-card {
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: transparent;
      border: 1px solid rgba(255,255,255,.18);
      color: #fff;
      backdrop-filter: blur(2px);
      border-radius: 14px;
    }
.hero-card-head {
      padding: 18px 22px;
      border-bottom: 1px solid rgba(255,255,255,.12);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
.hero-card-head .eyebrow {
      margin: 0;
      color: rgba(255,255,255,.7);
    }
.hero-card-head .eyebrow .acc { color: var(--yellow); margin-left: 8px; }
.arrow-pill {
      border: 1px solid rgba(255,255,255,.45);
      color: #fff;
      cursor: pointer;
      background: rgba(255,255,255,.08);
      border-radius: 999px;
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      line-height: 1;
      padding: 0;
      font-family: var(--font);
    }
.hero-card-body {
      padding: 26px 22px 22px;
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
.hero-case-brand { display: flex; align-items: center; gap: 16px; }
.hero-case-logo {
      width: 64px;
      height: 64px;
      border-radius: 10px;
      flex-shrink: 0;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      overflow: hidden;
    }
.hero-case-logo img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
.hero-case-logo .fallback {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--ink);
      font-family: var(--font);
    }
.hero-case-name { display: flex; flex-direction: column; line-height: 1.3; gap: 2px; }
.hero-case-name b { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.hero-case-name span {
      font-size: 13px;
      color: rgba(255,255,255,.85);
      font-family: var(--mono);
      letter-spacing: .04em;
      text-transform: uppercase;
      font-weight: 500;
    }
.hero-case-result { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hero-case-result .num {
      font-size: 64px;
      font-weight: 800;
      color: var(--yellow);
      line-height: 1;
      letter-spacing: -.04em;
    }
.hero-case-result .num.long { font-size: 42px; letter-spacing: -.03em; }
.hero-case-result .lbl {
      font-size: 13px;
      color: rgba(255,255,255,.85);
      line-height: 1.4;
    }
.hero-card-foot {
      margin-top: auto;
      padding: 14px 22px;
      border-top: 1px solid rgba(255,255,255,.12);
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
.hero-dots { display: flex; gap: 6px; }
.hero-dots span {
      height: 3px;
      width: 8px;
      border-radius: 2px;
      background: rgba(255,255,255,.3);
      cursor: pointer;
      transition: width .25s, background .25s;
    }
.hero-dots span.active { width: 22px; background: var(--yellow); }
.hero-slide[hidden] { display: none; }
.hero-card-foot .full-link {
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 4px;
      cursor: pointer;
    }
/* ===== Logo stripe ===== */
    .logo-stripe {
      background: var(--paper);
      padding: 36px var(--pad-x);
      border-bottom: 1px solid var(--line);
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 48px;
      align-items: center;
    }
.logo-stripe .eyebrow { margin: 0; white-space: nowrap; }
/* ===== Pillars ===== */
    .row-between {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 40px;
    }
.row-between .body-txt { max-width: 380px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar-card { padding: 28px; display: flex; flex-direction: column; }
.pillar-card .pill {
      margin-bottom: 20px;
      background: transparent;
      border-color: currentColor;
      color: inherit;
    }
.pillar-card p {
      font-size: 14px;
      line-height: 1.5;
      opacity: .75;
      margin-bottom: 18px;
      text-wrap: pretty;
    }
.pillar-card .check { border-top: 1px solid var(--line); }
.pillar-card.yellow .check { border-color: rgba(0,0,0,.15); }
.pillar-card.indigo .check { border-color: rgba(255,255,255,.15); }
.pillar-card .link {
      margin-top: auto;
      padding-top: 18px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .02em;
      text-decoration: underline;
      text-underline-offset: 4px;
      cursor: pointer;
    }
.pillar-coda {
      font-size: 14px;
      line-height: 1.5;
      font-weight: 600;
      opacity: 1;
      margin-top: 18px;
      margin-bottom: 0;
      text-wrap: pretty;
    }
.ref-head {
      display: flex;
      align-items: center;
      gap: 18px;
      padding-bottom: 22px;
      border-bottom: 1px solid var(--line);
    }
.ref-logo {
      width: 96px;
      height: 96px;
      border-radius: 6px;
      background: var(--paper-2);
      border: 1px solid var(--line);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      color: var(--muted);
      font-family: var(--mono);
      letter-spacing: .05em;
      text-transform: uppercase;
    }
.ref-logo.dark {
      background: #000;
      border-color: #000;
    }
.ref-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 10px;
    }
.ref-logo svg {
      width: 100%;
      height: 100%;
      padding: 10px;
    }
.ref-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.ref-company {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.015em;
      line-height: 1.15;
      color: var(--ink);
    }
.ref-person {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.4;
    }
.ref-person b {
      font-weight: 600;
      color: var(--ink);
    }
.ref-quote-mark {
      font-size: 32px;
      font-weight: 800;
      color: var(--indigo);
      line-height: 0.5;
      margin-bottom: 8px;
      font-family: serif;
    }
.ref-quote {
      font-size: 14.5px;
      line-height: 1.55;
      font-weight: 500;
      color: var(--ink);
      flex: 1;
    }
.ref-link {
      font-size: 12px;
      font-weight: 600;
      color: var(--indigo);
      text-decoration: underline;
      text-underline-offset: 4px;
      cursor: pointer;
      align-self: flex-start;
    }
.ref-link:hover { color: var(--ink); }
/* ===== Services ===== */
    .services-card {
      padding: 28px;
      display: flex;
      flex-direction: column;
    }
.services-card .num {
      font-size: 48px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.025em;
      color: var(--indigo);
    }
.services-card h3 { margin-top: 18px; font-size: 26px; }
.services-card p {
      font-size: 13px;
      margin-top: 6px;
      margin-bottom: 18px;
      min-height: 80px;
    }
.services-card .check { margin-top: 0; }
.services-foot {
      margin-top: 32px;
      padding-top: 28px;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
    }
.services-foot p { font-size: 14px; margin: 0; max-width: 640px; color: var(--muted); }
.partners-block {
      margin-top: 40px;
      padding-top: 28px;
      border-top: 1px solid var(--line);
    }
.partners-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;
      max-width: 720px;
    }
.partner-cell {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 4px;
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
.partner-cell b { font-size: 15px; font-weight: 700; color: var(--ink); }
.partner-cell span {
      font-size: 11px;
      color: var(--muted);
      font-family: var(--mono);
      letter-spacing: .04em;
      text-transform: uppercase;
    }
.stats-bar .num.accent { color: var(--yellow); }
.stats-bar .lbl {
      font-size: 12px;
      color: rgba(255,255,255,.65);
      font-family: var(--mono);
      text-transform: uppercase;
      letter-spacing: .05em;
      text-wrap: pretty;
      margin-top: 6px;
    }
/* ===== Diagnosis ===== */
    .diag { position: relative; overflow: hidden; }
.diag-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(800px 500px at 10% 100%, rgba(57,9,243,0.35) 0%, transparent 60%);
      pointer-events: none;
    }
.diag-inner { position: relative; }
.diag-card {
      background: #fff;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 28px;
    }
.diag-card .pill { margin-bottom: 18px; }
.diag-card h3 { font-size: 22px; }
.diag-card .body-txt { font-size: 14px; margin-top: 10px; }
.diag-answer {
      font-size: 14px;
      margin-top: 12px;
      font-weight: 600;
      color: var(--ink);
      border-top: 1px solid var(--line);
      padding-top: 12px;
    }
/* ===== Cases ===== */
    .case-card {
      padding: 26px;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      min-height: 200px;
      transition: border-color .15s, transform .15s;
    }
.case-card:hover { border-color: var(--indigo); transform: translateY(-2px); }
.case-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 18px;
    }
.case-icon {
      font-size: 28px;
      color: var(--indigo);
      line-height: 1;
      font-family: var(--mono);
    }
.case-count {
      font-size: 11px;
      color: rgba(0,0,0,.5);
      font-family: var(--mono);
      letter-spacing: .05em;
      text-transform: uppercase;
    }
.case-card h3 {
      font-size: 22px;
      line-height: 1.2;
      margin-bottom: 10px;
      font-weight: 700;
    }
.case-card p {
      font-size: 13px;
      line-height: 1.5;
      color: rgba(0,0,0,.65);
      text-wrap: pretty;
    }
.case-link {
      margin-top: auto;
      padding-top: 18px;
      font-size: 12px;
      font-weight: 600;
      color: var(--indigo);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
/* ===== Team ===== */
    .team-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }
.team-fig { display: flex; flex-direction: column; }
.team-img {
      aspect-ratio: 4 / 5;
      border-radius: 0;
      border: none;
      background:
        repeating-linear-gradient(135deg, transparent 0 8px, rgba(0,0,0,.04) 8px 9px),
        var(--paper-2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
    }
.team-cap { padding-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.team-cap b { font-size: 15px; font-weight: 700; line-height: 1.2; }
.team-cap span {
      font-size: 11px;
      color: var(--muted);
      font-family: var(--mono);
      letter-spacing: .05em;
      text-transform: uppercase;
    }
/* ===== Process ===== */
    .process-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      margin-top: 32px;
    }
.process-card.yellow {
      padding: 32px;
      align-self: flex-start;
      background: var(--yellow);
      border-color: var(--yellow);
    }
.process-card .eyebrow { color: rgba(0,0,0,.55); }
.process-card .stat { margin-top: 18px; font-size: 80px; }
.process-card .stat-lbl { color: rgba(0,0,0,.6); }
.process-card hr {
      border: none;
      border-top: 1px solid rgba(0,0,0,.15);
      margin: 24px 0;
    }
.process-card .body-txt {
      color: rgba(0,0,0,.7);
      font-size: 14px;
    }
/* ===== Models ===== */
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; }
.model-card {
      padding: 28px;
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
    }
.model-card .pill {
      margin-bottom: 18px;
      background: transparent;
      border-color: rgba(255,255,255,.25);
      color: rgba(255,255,255,.85);
    }
.model-card h3 { font-size: 34px; margin-bottom: 14px; color: var(--paper); letter-spacing: -0.02em; }
.model-card p { font-size: 14px; margin-bottom: 0; }
.model-card .body-txt { color: rgba(255,255,255,.75); }
.model-when {
      border-top: 1px solid rgba(255,255,255,.12);
      padding-top: 14px;
    }
.model-when p { font-size: 13px; margin-top: 4px; }
.model-price {
      font-family: var(--mono);
      font-size: 13px;
      color: rgba(255,255,255,.7);
      margin-top: 0;
      margin-bottom: 22px;
      letter-spacing: .02em;
    }
.model-price b { font-weight: 700; font-size: 17px; color: var(--yellow); }
.model-shared {
      margin-top: 40px;
      padding: 56px 48px;
      background: var(--paper-2);
      color: var(--ink);
      border-radius: 16px;
      border: 1px solid var(--line);
    }
.model-shared-head {
      max-width: 720px;
      margin: 0 auto 48px;
      text-align: center;
    }
.model-shared-head .shared-eyebrow {
      font-family: var(--mono);
      font-size: 28px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin: 0;
      text-transform: none;
    }
.model-shared-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
    }
.model-shared-item .num {
      font-family: var(--mono);
      font-size: 13px;
      color: var(--indigo);
      letter-spacing: 0.08em;
      margin-bottom: 16px;
      display: block;
    }
.model-shared-item h4 {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.01em;
      margin: 0 0 10px;
      color: var(--ink);
    }
.model-shared-item p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.55;
      margin: 0;
    }
@media (max-width: 900px) {
      .model-shared { padding: 40px 24px; }
      .model-shared-list { grid-template-columns: 1fr; gap: 28px; }
    }
/* ===== FAQ ===== */
    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 56px;
    }
.faq-row {
      border-bottom: 1px solid var(--line);
      padding: 18px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      cursor: pointer;
    }
.faq-q { font-weight: 600; font-size: 16px; }
.faq-plus {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--ink);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }
/* ===== Form section ===== */
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 56px;
    }
.form-col h2 { color: #fff; }
.form-card {
      background: #fff;
      padding: 32px;
      border-radius: 14px;
      color: var(--ink);
    }
.form-row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 14px;
    }
.field { margin-bottom: 14px; }
.form-card .btn {
      width: 100%;
      justify-content: center;
      margin-top: 20px;
    }
/* ===== Footer ===== */
    .footer {
      background: var(--ink);
      color: var(--paper);
      padding: 56px var(--pad-x) 36px;
    }
.footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
      gap: 32px;
      border-bottom: 1px solid rgba(255,255,255,.1);
      padding-bottom: 36px;
      margin-bottom: 24px;
    }
.footer-grid h5 {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
      font-weight: 500;
      margin-bottom: 14px;
    }
.footer-grid li {
      padding: 5px 0;
      font-size: 13px;
      color: rgba(255,255,255,.85);
    }
.footer-grid li a:hover { color: var(--yellow); }
.footer-brand .logo { color: #fff; }
.footer-brand p {
      margin-top: 14px;
      font-size: 13px;
      color: rgba(255,255,255,.65);
      max-width: 280px;
    }
.footer-addr {
      margin-top: 20px;
      font-size: 12px;
      color: rgba(255,255,255,.5);
      line-height: 1.6;
    }
.footer-social { margin-top: 20px; display: flex; gap: 10px; }
.footer-social a {
      width: 36px;
      height: 36px;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      color: rgba(255,255,255,.7);
      font-family: var(--mono);
      letter-spacing: .04em;
    }
.footer-social a:hover { border-color: var(--yellow); color: var(--yellow); }
.footer-bottom {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: rgba(255,255,255,.5);
      flex-wrap: wrap;
      gap: 12px;
    }
/* ===========================================================
       ANIMACJE — pakiet "subtelna nowoczesność"
       =========================================================== */

    /* Respektuje preferencję użytkownika "reduce motion" */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }
/* 1) FADE-UP on scroll — sekcje delikatnie wjeżdżają */
    [data-reveal] {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
      will-change: opacity, transform;
    }
[data-reveal].is-visible {
      opacity: 1;
      transform: translateY(0);
    }
/* Dla sekcji ze stagger nie animujemy ich kontenera (bo dzieci to robią) */
    [data-stagger][data-reveal] {
      opacity: 1;
      transform: none;
    }
/* 2) HOVER MICRO na kartach */
    .card,
    .case-card,
    .ref-card,
    .pillar-card {
      transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease;
    }
.card:hover,
    .case-card:hover,
    .ref-card:hover,
    .pillar-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 28px -12px rgba(29,29,27,.18);
    }
.section.dark .card:hover,
    .section.dark .ref-card:hover,
    .section.dark .pillar-card:hover {
      box-shadow: 0 12px 28px -12px rgba(0,0,0,.5);
      border-color: rgba(255,255,255,.18);
    }
/* Wyjątek: model-shared-item nie unosi się — to nie jest karta */
    .model-shared-item:hover { transform: none; box-shadow: none; }
/* 3) ANIMOWANE GLOW w hero / diag — slow pulse */
    @keyframes glowPulse {
      0%, 100% { opacity: 0.55; transform: translate(0, 0) scale(1); }
      50%       { opacity: 0.85; transform: translate(8px, -6px) scale(1.05); }
    }
/* 4) STRZAŁKI "→" na hover */
    .btn,
    .full-link,
    .case-link span,
    a.nav-cta,
    .hero-card-foot .full-link {
      position: relative;
    }
.btn::after,
    .full-link::after,
    .case-link span::after {
      content: '';
      display: inline-block;
    }
/* Animuję istniejący znak strzałki w tekście — przesuwa się o 3px */
    .btn,
    .full-link,
    .case-link span,
    .nav-items a {
      transition: transform .2s ease, color .2s ease, opacity .2s ease;
    }
/* Hover dla buttonów już istnieje (translateY -1px); dodaję ruch strzałki via background */
    /* Prościej: użyję .arrow-shift na elementach ze strzałką */
    a:hover .arrow,
    .btn:hover .arrow {
      transform: translateX(4px);
    }
.arrow {
      display: inline-block;
      transition: transform .2s cubic-bezier(.2,.7,.2,1);
    }
/* 5) ANIMACJA przejścia slidera hero */
    .hero-slide {
      animation: slideIn .45s cubic-bezier(.2,.7,.2,1);
    }
@keyframes slideIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
/* 6) EMPHASIS liczby w sliderze przy zmianie */
    @keyframes numPop {
      0%   { transform: scale(.92); opacity: 0; }
      60%  { transform: scale(1.02); opacity: 1; }
      100% { transform: scale(1); }
    }
.hero-case-result .num {
      display: inline-block;
      animation: numPop .6s cubic-bezier(.2,.7,.2,1);
    }
/* 7) STICKY NAV — shadow po scrollu */
    .nav {
      transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
    }
.nav.scrolled {
      box-shadow: 0 4px 16px -8px rgba(29,29,27,.12);
      border-bottom-color: transparent;
    }
/* Bonus: hover na strzałkach slidera */
    .arrow-pill {
      transition: background .2s ease, transform .2s ease, border-color .2s ease;
    }
.arrow-pill:hover {
      background: var(--yellow);
      color: var(--ink);
      border-color: var(--yellow);
      transform: scale(1.08);
    }
/* ===== Model card - linijka z kanałami pod ceną ===== */
    .model-channels {
      font-family: var(--mono);
      font-size: 12px;
      color: rgba(255,255,255,.55);
      letter-spacing: .04em;
      margin-top: -16px;
      margin-bottom: 22px;
    }
/* ===== Inne kanały - sekcja pod kartami ===== */
    .other-channels {
      margin-top: 0;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 0;
    }
.other-channels-header {
      max-width: 720px;
      margin-bottom: 28px;
    }
.other-channels-label {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--muted);
      letter-spacing: .05em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
.other-channels-h3 {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin: 0 0 12px 0;
      line-height: 1.25;
    }
.other-channels-intro {
      font-size: 14px;
      color: var(--muted);
      margin: 0;
    }
.other-channels-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 24px;
    }
.other-channel-card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 18px 16px;
      transition: border-color .2s ease, transform .2s ease;
    }
.other-channel-card:hover {
      border-color: var(--ink);
      transform: translateY(-2px);
    }
.other-channel-name {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin-bottom: 8px;
    }
.other-channel-card p {
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--muted);
      margin: 0;
    }
.other-channels-cta-row {
      display: flex;
      justify-content: flex-start;
    }
@media (max-width: 980px) {
      .other-channels-grid { grid-template-columns: repeat(2, 1fr); }
    }
@media (max-width: 540px) {
      .other-channels-grid { grid-template-columns: 1fr; }
    }
/* ===== Model card - sekcja "Pasujemy, gdy" ===== */
    .model-fit {
      margin-top: 24px;
      padding: 20px 22px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 8px;
    }
/* ===== Hero podstrony Współpraca - jasne tło z subtelnym indigo akcentem ===== */
    .wsp-hero {
      position: relative;
      overflow: hidden;
      padding-top: 56px;
      padding-bottom: 64px;
      border-bottom: 1px solid var(--line);
      background:
        linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
    }
/* Subtelny indigo glow w prawym górnym rogu */
    .wsp-hero-blob {
      position: absolute;
      top: -10%;
      right: -15%;
      width: 65%;
      height: 130%;
      background: radial-gradient(ellipse at 70% 40%,
        rgba(57, 9, 243, 0.18) 0%,
        rgba(57, 9, 243, 0.08) 35%,
        transparent 65%);
      filter: blur(20px);
      pointer-events: none;
    }
/* Faktura kropek - subtelne na jasnym */
    .wsp-hero-grid {
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 1px 1px, rgba(57,9,243,.15) 1px, transparent 0);
      background-size: 28px 28px;
      mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 50%, transparent 100%);
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 50%, transparent 100%);
      pointer-events: none;
      opacity: .7;
    }
.wsp-hero-inner {
      position: relative;
      max-width: 880px;
      z-index: 1;
    }
.wsp-breadcrumb {
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: .05em;
      text-transform: uppercase;
      margin-bottom: 22px;
    }
.wsp-breadcrumb a {
      color: var(--indigo);
      text-decoration: none;
      transition: opacity .2s ease;
    }
.wsp-breadcrumb a:hover { opacity: .7; }
.wsp-breadcrumb-sep {
      margin: 0 8px;
      color: var(--muted);
    }
.wsp-breadcrumb-current {
      color: var(--ink);
    }
.wsp-hero-h1 {
      font-size: 56px;
      line-height: 1.0;
      letter-spacing: -0.025em;
      color: var(--ink);
      margin: 0;
    }
/* Sekcja H2 + opis w hero - z żółtym paskiem po lewej */
    .wsp-hero-models {
      position: relative;
      padding-left: 24px;
      margin-top: 40px;
      max-width: 760px;
    }
.wsp-hero-bar {
      position: absolute;
      left: 0;
      top: 8px;
      bottom: 8px;
      width: 4px;
      background: var(--yellow);
      border-radius: 2px;
    }
.wsp-hero-h2 {
      margin: 0 0 14px 0;
      font-size: 30px;
      line-height: 1.15;
    }
.wsp-hero-sub {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }
@media (max-width: 720px) {
      .wsp-hero-h1 { font-size: 40px; }
      .wsp-hero-h2 { font-size: 24px; }
      .wsp-hero-models { padding-left: 18px; }
      .wsp-hero-bar { width: 3px; }
    }
/* ===== Model card - tagi kanałów pod ceną ===== */
    .model-channels-tags {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: -8px;
      margin-bottom: 22px;
    }
.model-channels-label {
      font-family: var(--mono);
      font-size: 11px;
      color: rgba(255,255,255,.5);
      letter-spacing: .05em;
      text-transform: uppercase;
      margin-right: 4px;
    }
.model-channel-tag {
      display: inline-block;
      padding: 5px 12px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      color: rgba(255,255,255,.92);
      letter-spacing: -0.005em;
    }
/* ===== Sekcja "Modele rozliczeń" - header w stylu Inne usługi ===== */
    .models-channels-block {
      padding: 36px 32px;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 12px;
    }
.models-channels-header {
      max-width: 720px;
      margin-bottom: 28px;
    }
.models-channels-label {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--muted);
      letter-spacing: .05em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
.models-channels-h3 {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin: 0 0 12px 0;
      line-height: 1.25;
    }
.models-channels-intro {
      font-size: 14px;
      color: var(--muted);
      margin: 0;
    }
.models-channels-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
.models-channel-card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 18px 16px;
      transition: border-color .2s ease, transform .2s ease;
    }
.models-channel-card:hover {
      border-color: var(--ink);
      transform: translateY(-2px);
    }
.models-channel-name {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin-bottom: 8px;
    }
.models-channel-card p {
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--muted);
      margin: 0;
    }
@media (max-width: 720px) {
      .models-channels-grid { grid-template-columns: 1fr; }
      .models-channels-block { padding: 28px 22px; }
    }
#modele .model-card.model-card-featured {
      border-color: var(--yellow);
      border-width: 2px;
      border-style: solid;
    }
#modele .model-card .body-txt {
      color: rgba(255,255,255,.85);
    }
#modele .model-card .pill {
      border-color: rgba(255,255,255,.3);
      color: rgba(255,255,255,.9);
    }
#modele .model-fit-list li {
      color: rgba(255,255,255,.85);
    }
#modele .model-fit-label {
      color: rgba(255,255,255,.65);
    }
#modele .model-channels {
      color: rgba(255,255,255,.65);
    }
.model-fit-label {
      font-family: var(--mono);
      font-size: 12px;
      color: rgba(255,255,255,.55);
      letter-spacing: .05em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
.model-fit-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
.model-fit-list li {
      font-size: 14px;
      line-height: 1.55;
      color: rgba(255,255,255,.78);
      padding-left: 18px;
      position: relative;
    }
.model-fit-list li::before {
      content: "—";
      position: absolute;
      left: 0;
      color: var(--yellow);
      font-weight: 600;
    }
/* ===== FAQ details (rozwijane, podstrona Współpraca) ===== */
    .faq-item {
      border-bottom: 1px solid var(--line);
      padding: 16px 0;
    }
.faq-item:first-of-type {
      border-top: 1px solid var(--line);
    }
.faq-item summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      list-style: none;
      padding: 8px 0;
    }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-q {
      font-size: 17px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.01em;
    }
.faq-item .faq-plus {
      font-size: 24px;
      color: var(--muted);
      transition: transform .25s ease;
      flex-shrink: 0;
      margin-left: 16px;
    }
.faq-item[open] .faq-plus {
      transform: rotate(45deg);
      color: var(--ink);
    }
.faq-item .faq-answer {
      padding: 12px 0 8px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.65;
      max-width: 720px;
    }
.faq-item:hover summary .faq-q { color: var(--indigo); }
.ref-hero::before {
      content: "";
      position: absolute;
      inset: -10% -15% auto auto;
      width: 65%;
      height: 70%;
      background: radial-gradient(ellipse at center,
        rgba(57, 9, 243, 0.18) 0%,
        rgba(57, 9, 243, 0.08) 35%,
        transparent 70%);
      filter: blur(20px);
      pointer-events: none;
    }
.ref-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle at 1px 1px, rgba(57, 9, 243, 0.15) 1px, transparent 0);
      background-size: 28px 28px;
      opacity: 0.4;
      pointer-events: none;
    }
.ref-hero-inner {
      position: relative;
      z-index: 1;
      max-width: 880px;
    }
.ref-hero-bar {
      position: absolute;
      left: -18px;
      top: 0;
      bottom: 0;
      width: 4px;
      background: linear-gradient(
        180deg,
        var(--indigo) 0%,
        rgba(57, 9, 243, 0.3) 100%
      );
      pointer-events: none;
    }
.ref-breadcrumb {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 18px;
    }
.ref-breadcrumb a {
      color: var(--indigo);
      text-decoration: none;
    }
.ref-breadcrumb a:hover { text-decoration: underline; }
.ref-breadcrumb-sep { margin: 0 8px; color: var(--line); }
.ref-hero-h1 {
      font-size: 56px;
      line-height: 1.0;
      letter-spacing: -0.025em;
      color: var(--ink);
      max-width: 580px;
      margin: 0 0 22px;
    }
.ref-hero-sub {
      font-size: 17px;
      line-height: 1.55;
      color: var(--muted);
      max-width: 620px;
      margin: 0;
    }
.pill-check input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
.pill-check-label:hover {
      border-color: var(--indigo);
    }
.pill-check input[type="checkbox"]:checked + .pill-check-label {
      background: var(--ink);
      border-color: var(--ink);
      color: var(--paper);
    }
.pill-check input[type="checkbox"]:focus-visible + .pill-check-label {
      outline: 2px solid var(--indigo);
      outline-offset: 2px;
    }
.logo img {
      height: 40px;
      width: auto;
      display: block;
    }
/* RODO checkbox + Thank you overlay */
    .rodo-row {
      margin: 18px 0 8px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
.rodo-row input[type="checkbox"] {
      margin-top: 3px;
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      accent-color: var(--ink);
      cursor: pointer;
    }
.rodo-row label {
      font-size: 13px;
      line-height: 1.5;
      color: var(--ink);
      cursor: pointer;
    }
.rodo-row label a {
      color: var(--indigo);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
.rodo-row label a:hover {
      opacity: 0.7;
    }
.form-card.is-submitted .form-card-fields { display: none; }
.form-thanks {
      display: none;
      text-align: center;
      padding: 32px 16px;
    }
.form-card.is-submitted .form-thanks {
      display: block;
      animation: thanksFade .5s ease;
    }
@keyframes thanksFade {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
.form-thanks-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--yellow);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      font-size: 26px;
      font-weight: 700;
      color: var(--ink);
    }
.form-thanks h3 {
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.01em;
      font-weight: 700;
      margin: 0 0 12px;
      color: var(--ink);
    }
.form-thanks p {
      font-size: 15px;
      line-height: 1.5;
      color: var(--muted);
      margin: 0 0 8px;
      max-width: 420px;
      margin-left: auto;
      margin-right: auto;
    }
.form-thanks-error {
      color: #c2410c;
    }
.form-card .submit-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
/* Google reCAPTCHA widget styling */
    .g-recaptcha {
      transform: scale(0.95);
      transform-origin: 0 0;
    }
body {
      font-family: var(--font);
      color: var(--ink);
      font-size: 14px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
/* ===== Trust / referencje ===== */
    .trust { position: relative; overflow: hidden; padding-top: 72px; padding-bottom: 72px; }
.trust-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(900px 500px at 90% 0%, rgba(57,9,243,0.4) 0%, transparent 60%);
      pointer-events: none;
    }
.trust-inner { position: relative; }
.trust .lead {
      font-size: 15px;
      margin-top: 14px;
      color: rgba(255,255,255,.7);
      line-height: 1.6;
    }
.trust-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 18px;
      margin-top: 40px;
    }
.trust-foot {
      position: relative;
      margin-top: 48px;
      padding-top: 32px;
      border-top: 1px solid rgba(255,255,255,.12);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
    }
.trust-foot .eyebrow { margin: 0; color: rgba(255,255,255,.6); }
/* ===== Responsive ===== */
    @media (max-width: 1080px) {
      .h1 { font-size: 52px; }
      .h2 { font-size: 36px; }
      .stats-bar .num { font-size: 44px; }
      .nav-items { display: none; }
      .hero-grid,
      .grid-3,
      .grid-2,
      .trust-grid,
      .process-grid,
      .form-grid,
      .faq-grid,
      .team-grid,
      .partners-grid,
      .stats-bar,
      .footer-grid,
      .logos {
        grid-template-columns: 1fr 1fr;
      }
      .hero-grid > :nth-child(2) { justify-self: stretch; max-width: none; }
    }
@media (max-width: 720px) {
      :root { --pad-x: 24px; }
      .h1 { font-size: 40px; }
      .h2 { font-size: 30px; }
      .section { padding: 56px var(--pad-x); }
      .hero-grid,
      .grid-3,
      .grid-2,
      .trust-grid,
      .process-grid,
      .form-grid,
      .faq-grid,
      .team-grid,
      .partners-grid,
      .stats-bar,
      .footer-grid,
      .logos,
      .form-row-2 {
        grid-template-columns: 1fr;
      }
      .logo-stripe {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .row-between { align-items: flex-start; }
      .stats-bar .num { font-size: 40px; }
    }
.hero-glow,
    .diag-glow,
    .trust-glow {
      animation: glowPulse 9s ease-in-out infinite;
    }
.diag-glow { animation-duration: 11s; }
.trust-glow { animation-duration: 13s; }
.pill-check-group {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
.pill-check {
      position: relative;
      display: block;
    }
.pill-check-label {
      display: block;
      text-align: center;
      padding: 10px 16px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
    }
/* 02-audyt.css */
body {
      font-family: var(--font);
      color: var(--ink);
      font-size: 14px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }
.h2-line2 {
      white-space: nowrap;
    }
@media (max-width: 720px) {
      .h2-line2 { white-space: normal; }
    }
/* ===== Modyfikator .checkmarks - ptaszek zamiast kwadracika ===== */
    .check.checkmarks li::before {
      width: 18px;
      height: 18px;
      background: var(--indigo);
      border-radius: 50%;
      margin-top: 4px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 11px 11px;
    }
/* ===== Rich list item (nagłówek + opis pod spodem) ===== */
    .check.checkmarks li {
      padding: 14px 0;
      align-items: flex-start;
    }
.check.checkmarks li:last-child {
      border-bottom: none;
    }
.check-rich {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
.check-rich-title {
      font-weight: 700;
      font-size: 15px;
      color: var(--ink);
      letter-spacing: -0.005em;
      line-height: 1.3;
    }
.check-rich-desc {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.5;
    }
.pillar-card h3 {
      font-size: 26px;
      margin-bottom: 14px;
      min-height: calc(26px * 1.2 * 2);
    }
/* ===== Trust / referencje ===== */
    .ref-card {
      background: #fff;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      min-height: 280px;
    }
/* ===== Stats bar ===== */
    .stats-bar {
      padding: 32px var(--pad-x);
      background: var(--ink);
      color: #fff;
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }
.stats-bar .num {
      font-size: 56px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -.04em;
      color: #fff;
    }
.form-col .body-txt { color: rgba(255,255,255,.85); margin-top: 24px; margin-bottom: 24px; }
/* ===== Responsive ===== */
    @media (max-width: 1080px) {
      .h1 { font-size: 52px; }
      .h2 { font-size: 36px; }
      .stats-bar .num { font-size: 44px; }
      .nav-items { display: none; }
      .hero-grid,
      .grid-3,
      .grid-2,
      .hero-grid > :nth-child(2) { justify-self: stretch; max-width: none; }
    }
@media (max-width: 720px) {
      :root { --pad-x: 24px; }
      .h1 { font-size: 40px; }
      .h2 { font-size: 30px; }
      .section { padding: 56px var(--pad-x); }
      .hero-grid,
      .grid-3,
      .grid-2,
      .logo-stripe {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .row-between { align-items: flex-start; }
      .stats-bar .num { font-size: 40px; }
    }
/* 1a) STAGGER REVEAL — dzieci sekcji animują się kaskadowo */
    [data-stagger] > *,
    [data-stagger] .grid-2 > *,
    [data-stagger] .grid-3 > *,
    [data-stagger] .check > *,
    [data-stagger] .step,
    [data-stagger] .ref-card,
    [data-stagger] .case-card,
    [data-stagger] .pillar-card,
    [data-stagger] .model-shared-item,
    [data-stagger] .partner-cell,
    [data-stagger] .stats-bar > *,
    [data-stagger] .channels-grid > *,
    [data-stagger] .extras-row > * {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
      transition-delay: calc(var(--i, 0) * 90ms);
      will-change: opacity, transform;
    }
[data-stagger].is-visible > *,
    [data-stagger].is-visible .grid-2 > *,
    [data-stagger].is-visible .grid-3 > *,
    [data-stagger].is-visible .check > *,
    [data-stagger].is-visible .step,
    [data-stagger].is-visible .ref-card,
    [data-stagger].is-visible .case-card,
    [data-stagger].is-visible .pillar-card,
    [data-stagger].is-visible .model-shared-item,
    [data-stagger].is-visible .partner-cell,
    [data-stagger].is-visible .stats-bar > *,
    [data-stagger].is-visible .channels-grid > *,
    [data-stagger].is-visible .extras-row > * {
      opacity: 1;
      transform: translateY(0);
    }
.hero-glow,
    .diag-glow,
    .diag-glow { animation-duration: 11s; }
/* ===== Override dla kart modeli na podstronie Współpraca ===== */
    /* Karty są tu większe (więcej treści) → lekko jaśniejsze tło dla czytelności */
    #modele .model-card {
      background: #15171a;
      border-color: #15171a;
    }
#modele .model-fit {
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.1);
    }
/* ===== Hero podstrony (styl referencji) ===== */
    .ref-hero {
      position: relative;
      background: linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
      padding: 80px var(--pad-x) 88px;
      overflow: hidden;
    }
.ref-hero-sub-2 {
      margin-top: 8px;
    }
.ref-hero-stats {
      display: flex;
      gap: 36px;
      margin-top: 32px;
      flex-wrap: wrap;
    }
.ref-stat {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
.ref-stat-num {
      font-size: 28px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1;
    }
/* Wariant z dłuższą frazą zamiast liczby */
    .ref-stat-num.is-text {
      font-size: 17px;
      letter-spacing: -0.01em;
    }
.ref-stat-lab {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
/* ===== Sekcja 3 kanałów głównych ===== */
    .channels-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
.channel-card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      transition: border-color 0.2s ease, transform 0.2s ease;
      position: relative;
      overflow: hidden;
    }
.channel-card:hover {
      border-color: var(--indigo);
      transform: translateY(-2px);
    }
.channel-card .channel-brand-mark {
      position: absolute;
      top: 22px;
      right: 22px;
      width: 40px;
      height: 40px;
      opacity: 1;
      transition: transform .3s cubic-bezier(.2,.7,.2,1);
    }
.channel-card:hover .channel-brand-mark {
      transform: rotate(2deg) scale(1.08);
    }
.channel-card-num {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 14px;
    }
.channel-card h3 {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: 0 0 10px;
    }
.channel-card-tag {
      display: inline-block;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--indigo);
      background: rgba(57, 9, 243, 0.08);
      padding: 4px 10px;
      border-radius: 999px;
      margin-bottom: 18px;
      align-self: flex-start;
    }
.channel-card p {
      font-size: 14px;
      line-height: 1.6;
      color: var(--muted);
      margin: 0 0 22px;
      flex-grow: 1;
    }
.channel-card-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      color: var(--indigo);
      text-decoration: none;
      align-self: flex-start;
      transition: gap 0.2s ease;
    }
.channel-card-link:hover { gap: 10px; }
.channel-card-link .arrow { transition: transform 0.2s ease; }
.channel-card:hover .channel-card-link .arrow { transform: translateX(2px); }
/* Stopka sekcji kanałów - wzmianka o wyborze kanałów (wariant B - callout) */
    .channels-foot {
      margin-top: 48px;
      padding: 18px 24px 18px 28px;
      background: var(--paper-2);
      border-left: 4px solid var(--indigo);
      border-radius: 0 8px 8px 0;
      font-size: 16px;
      line-height: 1.6;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 14px;
    }
.channels-foot-label {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 50%;
      font-family: var(--mono);
      font-weight: 700;
      font-size: 16px;
      color: var(--indigo);
    }
.channel-card-list {
      list-style: none;
      padding: 0;
      margin: 0 0 22px;
      flex-grow: 1;
    }
.channel-card-list li {
      font-size: 13px;
      line-height: 1.5;
      color: var(--ink);
      padding: 8px 0;
      border-top: 1px solid var(--line);
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
.channel-card-list li::before {
      content: "→";
      color: var(--indigo);
      font-weight: 700;
      flex-shrink: 0;
    }
.channel-card-foot {
      border-top: 1px solid var(--line);
      padding-top: 16px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
    }
/* ===== Sekcja pozostałe usługi ===== */
    .extras-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 24px;
    }
.extra-item {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 22px 20px;
      transition: border-color 0.2s ease;
    }
.extra-item:hover {
      border-color: var(--indigo);
    }
.extra-item h4 {
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      margin: 0 0 6px;
    }
.extra-item p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
      margin: 0;
    }
/* ===== extra-item na ciemnej sekcji ===== */
    .section.dark .extra-item {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.12);
    }
.section.dark .extra-item:hover {
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(98, 86, 255, 0.5);
    }
.section.dark .extra-item h4 {
      color: var(--paper);
    }
.section.dark .extra-item p {
      color: rgba(255, 255, 255, 0.7);
    }
/* Yellow accent — karta z największym potencjałem */
    .section.dark .extra-item.yellow-accent {
      background: rgba(255, 195, 40, 0.08);
      border-color: rgba(255, 195, 40, 0.3);
    }
.section.dark .extra-item.yellow-accent:hover {
      background: rgba(255, 195, 40, 0.12);
      border-color: rgba(255, 195, 40, 0.5);
    }
/* ===== Mobile - hero/kanaly/extras ===== */
    @media (max-width: 980px) {
      .ref-hero {
        padding: 36px 18px 44px;
      }
      .ref-hero-h1 {
        font-size: 40px;
      }
      .channels-grid {
        grid-template-columns: 1fr;
      }
      .extras-row {
        grid-template-columns: 1fr;
      }
    }
.pill-check-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
.pill-check {
      position: relative;
    }
.pill-check-label {
      display: inline-block;
      padding: 10px 16px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
    }
/* ===== Mobile nav: burger + drawer ===== */
    .nav-burger {
      display: none;
      width: 44px; height: 44px;
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 0;
      cursor: pointer;
      position: relative;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
    }
.nav-burger span {
      display: block;
      width: 20px; height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: transform .25s ease, opacity .2s ease;
    }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-drawer {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 999;
      background: rgba(11, 11, 12, 0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
    }
.nav-drawer.is-open { opacity: 1; pointer-events: auto; }
.nav-drawer-inner {
      position: absolute;
      top: 64px; left: 12px; right: 12px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      transform: translateY(-12px);
      transition: transform .3s cubic-bezier(.2,.7,.2,1);
      box-shadow: 0 24px 60px rgba(0,0,0,.18);
    }
.nav-drawer.is-open .nav-drawer-inner { transform: translateY(0); }
.nav-drawer-inner a {
      display: block;
      padding: 14px 16px;
      font-size: 16px;
      font-weight: 500;
      color: var(--ink);
      border-radius: 10px;
      transition: background .15s ease;
    }
.nav-drawer-inner a:hover,
    .nav-drawer-inner a:focus { background: rgba(0,0,0,.04); }
.nav-drawer-inner .nav-drawer-cta {
      margin-top: 8px;
      background: var(--ink);
      color: var(--paper);
      text-align: center;
      border-radius: 999px;
      padding: 14px 18px;
    }
.nav-drawer-inner .nav-drawer-cta:hover { background: var(--indigo); }
body.no-scroll { overflow: hidden; }
@media (max-width: 1080px) {
      .nav-burger { display: flex; }
      .nav .cta { display: none; }
    }
/* ===== Mobile fallback dla inline max-width (reflow do 100%) ===== */
    @media (max-width: 720px) {
      .h2[style*="max-width"] { max-width: 100% !important; }
      .body-txt[style*="max-width"] { max-width: 100% !important; }
      .section-head[style*="max-width"] { max-width: 100% !important; }
    }
/* ===== Sekcja "Dlaczego audyt" — wariant z ikonami ===== */
    .reason-card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 28px;
      transition: border-color .25s ease, transform .25s ease;
    }
.reason-card:hover {
      border-color: var(--indigo);
      transform: translateY(-3px);
    }
.reason-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: rgba(98, 86, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--indigo);
      margin-bottom: 18px;
      transition: transform .25s ease, background .25s ease;
    }
.reason-card:hover .reason-icon {
      transform: rotate(-3deg) scale(1.05);
      background: rgba(98, 86, 255, 0.14);
    }
.reason-icon svg { width: 24px; height: 24px; }
/* Yellow variant dla 04 — strategia/decyzja pozytywna */
    .reason-card.yellow .reason-icon {
      background: rgba(255, 195, 40, 0.18);
      color: #b88a00;
    }
.reason-card.yellow:hover {
      border-color: var(--yellow);
    }
.reason-num {
      display: inline-block;
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--muted);
      font-weight: 500;
      margin-bottom: 6px;
    }
/* 02-case-horostudio.css */
.pillar-card h3 {
      font-size: 26px;
      margin-bottom: 14px;
      min-height: calc(26px * 1.2 * 2);
    }
/* ===== Stats bar ===== */
    .stats-bar {
      padding: 32px var(--pad-x);
      background: var(--ink);
      color: #fff;
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }
.stats-bar .num {
      font-size: 56px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -.04em;
      color: #fff;
    }
/* ===== Override dla kart modeli na podstronie Współpraca ===== */
    /* Karty są tu większe (więcej treści) → lekko jaśniejsze tło dla czytelności */
    #modele .model-card {
      background: #15171a;
      border-color: #15171a;
    }
#modele .model-fit {
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.1);
    }
.ref-hero-sub-2 {
      margin-top: 8px;
    }
.ref-hero-stats {
      display: flex;
      gap: 36px;
      margin-top: 32px;
      flex-wrap: wrap;
    }
.ref-stat {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
.ref-stat-num {
      font-size: 28px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1;
    }
.ref-stat-lab {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
.ref-card {
      background: #fff;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      min-height: 280px;
      position: relative;
      overflow: hidden;
      transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
    }
/* Akcentowy pasek indigo na górze - rozwija się od lewej przy hover */
    .ref-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--indigo), var(--indigo) 60%, var(--yellow));
      transition: width .5s cubic-bezier(.2,.7,.2,1);
    }
.ref-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px -16px rgba(29,29,27,.22);
      border-color: rgba(67, 56, 202, 0.25);
    }
.ref-card:hover::before {
      width: 100%;
    }
.form-col .body-txt { color: rgba(255,255,255,.85); margin-bottom: 24px; }
/* 1a) STAGGER REVEAL — dzieci sekcji animują się kaskadowo */
    [data-stagger] > *,
    [data-stagger] .grid-2 > *,
    [data-stagger] .grid-3 > *,
    [data-stagger] .check > *,
    [data-stagger] .step,
    [data-stagger] .ref-card,
    [data-stagger] .case-card,
    [data-stagger] .pillar-card,
    [data-stagger] .model-shared-item,
    [data-stagger] .partner-cell,
    [data-stagger] .stats-bar > *,
    [data-stagger] .ref-grid-3 > * {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
      transition-delay: calc(var(--i, 0) * 60ms);
      will-change: opacity, transform;
    }
[data-stagger].is-visible > *,
    [data-stagger].is-visible .grid-2 > *,
    [data-stagger].is-visible .grid-3 > *,
    [data-stagger].is-visible .check > *,
    [data-stagger].is-visible .step,
    [data-stagger].is-visible .ref-card,
    [data-stagger].is-visible .case-card,
    [data-stagger].is-visible .pillar-card,
    [data-stagger].is-visible .model-shared-item,
    [data-stagger].is-visible .partner-cell,
    [data-stagger].is-visible .stats-bar > *,
    [data-stagger].is-visible .ref-grid-3 > * {
      opacity: 1;
      transform: translateY(0);
    }
/* Override: 22 referencji - szybszy stagger + krótszy transition */
    [data-stagger] .ref-grid-3 > * {
      transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1);
      transition-delay: calc(var(--i, 0) * 25ms);
    }
/* ===== Podstrona referencji — hero ===== */
    .ref-hero {
      position: relative;
      background: linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
      padding: 56px var(--pad-x) 32px;
      overflow: hidden;
    }
/* ===== Grid 3-kol z kartami referencji ===== */
    .ref-section {
      padding: 40px var(--pad-x) 72px;
      background: var(--paper);
    }
.ref-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
.ref-item {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 28px 24px 24px;
      display: flex;
      flex-direction: column;
      transition: border-color 0.2s ease, transform 0.2s ease;
    }
.ref-item:hover {
      border-color: var(--indigo);
      transform: translateY(-2px);
    }
.ref-item-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }
.ref-mono {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--paper-2);
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font);
      font-weight: 700;
      font-size: 14px;
      color: var(--indigo);
      letter-spacing: 0.02em;
      flex-shrink: 0;
      transition: background 0.2s ease, border-color 0.2s ease;
    }
.ref-item:hover .ref-mono {
      background: var(--indigo);
      color: var(--paper);
      border-color: var(--indigo);
    }
.ref-industry {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      line-height: 1.3;
    }
.ref-item-quote {
      font-size: 14px;
      line-height: 1.6;
      color: var(--ink);
      margin: 0 0 20px;
      flex-grow: 1;
    }
.ref-item-meta {
      border-top: 1px solid var(--line);
      padding-top: 14px;
    }
.ref-item-co {
      font-weight: 600;
      font-size: 14px;
      color: var(--ink);
      margin-bottom: 2px;
    }
.ref-item-pers {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.4;
    }
/* ===== CTA bottom (sekcja indigo) ===== */
    .ref-cta {
      background: var(--indigo);
      color: var(--paper);
      padding: 72px var(--pad-x) 80px;
    }
.ref-cta-inner {
      max-width: 720px;
      margin: 0 auto;
    }
.ref-cta-head {
      text-align: center;
      margin-bottom: 36px;
    }
.ref-cta-tag {
      display: inline-block;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--yellow);
      margin-bottom: 18px;
    }
.ref-cta h2 {
      font-size: 38px;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--paper);
      max-width: 720px;
      margin: 0 auto 14px;
    }
.ref-cta p {
      font-size: 17px;
      color: rgba(255,255,255,0.85);
      max-width: 580px;
      margin: 0 auto;
      line-height: 1.55;
    }
/* ===== Formularz w sekcji indigo ===== */
    .ref-form {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 16px;
      padding: 32px;
    }
.ref-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }
.ref-form-field {
      display: flex;
      flex-direction: column;
      margin-bottom: 16px;
    }
.ref-form-row .ref-form-field {
      margin-bottom: 0;
    }
.ref-form-label {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      margin-bottom: 8px;
    }
.ref-form-hint {
      text-transform: none;
      letter-spacing: 0;
      color: rgba(255,255,255,0.5);
      font-size: 11px;
    }
.ref-form-input {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 10px;
      padding: 12px 14px;
      font-family: var(--font);
      font-size: 14px;
      color: var(--paper);
      width: 100%;
      transition: border-color 0.2s ease, background 0.2s ease;
    }
.ref-form-input::placeholder {
      color: rgba(255,255,255,0.4);
    }
.ref-form-input:focus {
      outline: none;
      border-color: var(--yellow);
      background: rgba(255,255,255,0.12);
    }
.ref-form-textarea {
      min-height: 90px;
      resize: vertical;
      font-family: var(--font);
    }
.ref-form-foot {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-top: 8px;
      flex-wrap: wrap;
    }
.ref-form-submit {
      background: var(--yellow);
      color: var(--ink);
      font-family: var(--font);
      font-weight: 600;
      font-size: 15px;
      padding: 14px 28px;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      transition: transform 0.2s ease;
    }
.ref-form-submit:hover { transform: translateY(-2px); }
.ref-form-submit .arrow {
      display: inline-block;
      margin-left: 4px;
    }
.ref-form-policy {
      font-size: 12px;
      color: rgba(255,255,255,0.6);
      line-height: 1.4;
    }
.ref-form-policy a {
      color: rgba(255,255,255,0.85);
      text-decoration: underline;
    }
/* ===== Mobile ===== */
    @media (max-width: 980px) {
      .ref-grid-3 {
        grid-template-columns: 1fr;
      }
      .ref-hero-h1 {
        font-size: 40px;
      }
      .ref-hero {
        padding: 36px 18px 44px;
      }
      .ref-section {
        padding: 48px 18px;
      }
      .ref-cta {
        padding: 48px 18px 56px;
      }
      .ref-cta h2 {
        font-size: 28px;
      }
      .ref-form {
        padding: 24px 18px;
      }
      .ref-form-row {
        grid-template-columns: 1fr;
        gap: 0;
      }
      .ref-form-row .ref-form-field {
        margin-bottom: 16px;
      }
    }
@media (min-width: 981px) and (max-width: 1280px) {
      .ref-grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
@media (max-width: 600px) {
      .pill-check-group {
        grid-template-columns: repeat(2, 1fr);
      }
    }
/* ===== Wstawki przerywające grid referencji ===== */
    /* Stat-kafel: 1 kolumna, jasne tło, duża liczba */
    .ref-stat-tile {
      background: var(--ink);
      color: var(--paper);
      border-radius: 16px;
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      overflow: hidden;
      transition: transform .3s cubic-bezier(.2,.7,.2,1);
    }
.ref-stat-tile::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 20% 0%, rgba(245, 197, 24, 0.12), transparent 60%);
      pointer-events: none;
    }
.ref-stat-tile:hover {
      transform: translateY(-4px);
    }
.ref-stat-tile-eyebrow {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      position: relative;
      z-index: 1;
    }
.ref-stat-tile-num {
      font-size: 56px;
      line-height: 1;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--yellow);
      margin-top: 8px;
      position: relative;
      z-index: 1;
    }
.ref-stat-tile-num-sub {
      font-family: var(--mono);
      font-size: 12px;
      color: rgba(255,255,255,.7);
      letter-spacing: .04em;
      position: relative;
      z-index: 1;
    }
.ref-stat-tile-desc {
      font-size: 14px;
      line-height: 1.5;
      color: rgba(255,255,255,.85);
      margin-top: auto;
      padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,.1);
      position: relative;
      z-index: 1;
    }
.ref-stat-tile-co {
      font-weight: 700;
      color: var(--paper);
    }
/* Featured cytat: pełna szerokość (3 kolumny), yellow tło */
    .ref-featured {
      grid-column: 1 / -1;
      background: rgba(245, 197, 24, 0.08);
      border: 1px solid rgba(245, 197, 24, 0.3);
      color: var(--ink);
      border-radius: 16px;
      padding: 48px;
      position: relative;
      overflow: hidden;
      transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s ease, border-color .3s ease;
    }
.ref-featured:hover {
      background: rgba(245, 197, 24, 0.12);
      border-color: rgba(245, 197, 24, 0.5);
      transform: translateY(-3px);
    }
.ref-featured-quote {
      font-size: 28px;
      line-height: 1.3;
      font-weight: 600;
      letter-spacing: -0.015em;
      color: var(--ink);
      margin: 0 0 24px;
      max-width: 880px;
      position: relative;
      z-index: 1;
    }
.ref-featured-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      position: relative;
      z-index: 1;
    }
.ref-featured-mono {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--paper);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font);
      font-weight: 700;
      font-size: 14px;
      letter-spacing: .02em;
      flex-shrink: 0;
    }
.ref-featured-name {
      font-weight: 700;
      font-size: 16px;
      color: var(--ink);
    }
.ref-featured-co {
      font-family: var(--mono);
      font-size: 13px;
      color: rgba(29,29,27,.65);
      margin-top: 2px;
    }
@media (max-width: 900px) {
      .ref-featured {
        grid-template-columns: 1fr;
        padding: 32px;
        gap: 28px;
      }
      .ref-featured-quote {
        font-size: 22px;
      }
        }
/* ===== Bento - poziomy kafel 2×1 (zajmuje 2 kolumny) ===== */
/* Wide kafle - subtelne yellow tło + akcent */
    .ref-item.is-wide {
      grid-column: span 2;
      background: rgba(245, 197, 24, 0.08);
      border-color: rgba(245, 197, 24, 0.3);
    }
.ref-item.is-wide:hover {
      background: rgba(245, 197, 24, 0.12);
      border-color: rgba(245, 197, 24, 0.5);
    }
.ref-item.is-wide .ref-mono {
      background: rgba(245, 197, 24, 0.18);
      border-color: rgba(245, 197, 24, 0.4);
      color: var(--ink);
    }
/* Treść poziomego kafla rozkłada się elastyczniej */
    .ref-item.is-wide .ref-item-quote {
      font-size: 17px;
      line-height: 1.55;
      max-width: 720px;
    }
/* Mobile - wszystko na 1 kolumnie, anulujemy span */
    @media (max-width: 760px) {
      .ref-item.is-wide {
        grid-column: span 1;
      }
      .ref-item.is-wide .ref-item-quote {
        font-size: 15px;
      }
    }
/* ===== Button "Pokaż wszystkie referencje" ===== */
    .ref-show-more-btn {
      grid-column: 1 / -1;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 24px 32px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-family: var(--font);
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.01em;
      transition: all 0.25s cubic-bezier(.2,.7,.2,1);
      margin: 8px 0 0;
    }
.ref-show-more-btn:hover {
      background: var(--paper-2);
      border-color: var(--ink);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px -10px rgba(29,29,27,0.18);
    }
.ref-show-more-count {
      font-family: var(--mono);
      font-size: 14px;
      color: var(--muted);
      font-weight: 500;
    }
.ref-show-more-arrow {
      font-size: 18px;
      transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
      color: var(--indigo);
    }
.ref-show-more-btn[aria-expanded="true"] .ref-show-more-arrow {
      transform: rotate(180deg);
    }
/* Ukryta część - display:contents pozwala dzieciom wpasować się w grid */
    .ref-hidden {
      display: contents;
    }
.ref-hidden[hidden] {
      display: none;
    }
/* Wide kafel - wariant niebieski (indigo) */
    .ref-item.is-wide.is-blue {
      background: rgba(67, 56, 202, 0.06);
      border-color: rgba(67, 56, 202, 0.2);
    }
.ref-item.is-wide.is-blue:hover {
      background: rgba(67, 56, 202, 0.10);
      border-color: rgba(67, 56, 202, 0.4);
    }
.ref-item.is-wide.is-blue .ref-mono {
      background: rgba(67, 56, 202, 0.12);
      border-color: rgba(67, 56, 202, 0.3);
      color: var(--indigo);
    }
/* ===== Case studies grid ===== */
    .cs-section { padding: 80px var(--pad-x); border-bottom: 1px solid var(--line); }
.cs-section-head {
      max-width: 720px;
      margin-bottom: 48px;
    }
.cs-section-head .h2 { margin-bottom: 14px; }
.cs-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
.cs-featured-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }
/* karta case study - duża, na ciemnym tle */
    .cs-card {
      background: var(--ink);
      color: var(--paper);
      border-radius: 18px;
      padding: 36px 32px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: relative;
      overflow: hidden;
      transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
      min-height: 380px;
      text-decoration: none;
    }
.cs-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 100% 0%, rgba(245, 197, 24, 0.10), transparent 50%);
      pointer-events: none;
    }
.cs-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 48px rgba(0,0,0,.18);
    }
.cs-card.is-mock {
      background: var(--paper);
      color: var(--ink);
      border: 1px dashed var(--line);
    }
.cs-card.is-mock::before {
      background: radial-gradient(circle at 100% 0%, rgba(57, 9, 243, 0.05), transparent 50%);
    }
.cs-card.is-mock:hover {
      border-color: var(--indigo);
      border-style: solid;
    }
/* header karty: branża + kanał */
    .cs-card-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      position: relative;
      z-index: 1;
    }
.cs-card.is-mock .cs-card-meta { color: var(--muted); }
.cs-card-channel {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      font-size: 10px;
      letter-spacing: .1em;
    }
.cs-card.is-mock .cs-card-channel {
      border-color: var(--line);
    }
/* badge "wkrótce" dla mockupów */
    .cs-card-badge {
      position: absolute;
      top: 20px;
      right: 20px;
      background: var(--yellow);
      color: var(--ink);
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 999px;
      z-index: 2;
    }
/* tytuł case'a */
    .cs-card-brand {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.2;
      position: relative;
      z-index: 1;
      margin-top: 4px;
    }
/* wynik liczbowy */
    .cs-card-result {
      display: flex;
      align-items: baseline;
      gap: 14px;
      flex-wrap: wrap;
      padding: 18px 0;
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
      position: relative;
      z-index: 1;
    }
.cs-card.is-mock .cs-card-result {
      border-color: var(--line);
    }
.cs-card-num {
      font-size: 52px;
      line-height: 0.95;
      font-weight: 800;
      letter-spacing: -0.035em;
      color: var(--yellow);
    }
.cs-card.is-mock .cs-card-num {
      color: var(--indigo);
    }
.cs-card-num-lbl {
      font-family: var(--mono);
      font-size: 12px;
      line-height: 1.4;
      color: rgba(255,255,255,.7);
      letter-spacing: .02em;
    }
.cs-card.is-mock .cs-card-num-lbl {
      color: var(--muted);
    }
/* problem - co rozwiązaliśmy */
    .cs-card-problem {
      font-size: 14px;
      line-height: 1.55;
      color: rgba(255,255,255,.82);
      flex: 1;
      position: relative;
      z-index: 1;
    }
.cs-card.is-mock .cs-card-problem { color: var(--muted); }
/* CTA na dole */
    .cs-card-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--yellow);
      margin-top: auto;
      position: relative;
      z-index: 1;
    }
.cs-card.is-mock .cs-card-link {
      color: var(--indigo);
      opacity: .55;
      pointer-events: none;
    }
.cs-card-link .arrow {
      transition: transform .2s ease;
    }
.cs-card:hover .cs-card-link .arrow {
      transform: translateX(4px);
    }
/* featured cards bigger */
    .cs-featured-grid .cs-card { min-height: 440px; }
.cs-featured-grid .cs-card-num { font-size: 64px; }
.cs-featured-grid .cs-card-brand { font-size: 30px; }
/* responsywność */
    @media (max-width: 1024px) {
      .cs-grid-3 { grid-template-columns: repeat(2, 1fr); }
    }
@media (max-width: 720px) {
      .cs-featured-grid,
      .cs-grid-3 { grid-template-columns: 1fr; }
      .cs-card { min-height: auto; padding: 28px 24px; }
      .cs-featured-grid .cs-card { min-height: auto; }
      .cs-card-num { font-size: 44px; }
      .cs-featured-grid .cs-card-num { font-size: 52px; }
      .cs-featured-grid .cs-card-brand { font-size: 24px; }
    }
/* stagger animation dla kart */
    [data-stagger] .cs-grid-3 > *,
    [data-stagger] .cs-featured-grid > * {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
    }
[data-stagger].is-visible .cs-grid-3 > *,
    [data-stagger].is-visible .cs-featured-grid > * {
      opacity: 1;
      transform: translateY(0);
    }
[data-stagger].is-visible .cs-grid-3 > *:nth-child(1),
    [data-stagger].is-visible .cs-featured-grid > *:nth-child(1) { transition-delay: 0s; }
[data-stagger].is-visible .cs-grid-3 > *:nth-child(2),
    [data-stagger].is-visible .cs-featured-grid > *:nth-child(2) { transition-delay: .08s; }
[data-stagger].is-visible .cs-grid-3 > *:nth-child(3) { transition-delay: .16s; }
[data-stagger].is-visible .cs-grid-3 > *:nth-child(4) { transition-delay: .24s; }
[data-stagger].is-visible .cs-grid-3 > *:nth-child(5) { transition-delay: .32s; }
[data-stagger].is-visible .cs-grid-3 > *:nth-child(6) { transition-delay: .40s; }
/* === Hero: 2-kolumnowy układ (tekst | logo) === */
    .cs-hero-grid {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 48px;
      align-items: center;
    }
.cs-hero-text {
      min-width: 0;
    }
/* === Hero: logo klienta === */
    .cs-hero-logo {
      width: 84px;
      height: 84px;
      border-radius: 14px;
      background: var(--paper-2);
      border: 1px dashed var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      margin: 20px 0 24px;
      transition: border-color .2s;
    }
.cs-hero-logo:hover { border-color: var(--indigo); }
.cs-hero-logo-label {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      text-align: center;
      line-height: 1.3;
    }
/* Wariant: prawdziwe logo klienta (bez ramki, duże, po prawej w hero) */
    .cs-hero-logo.has-logo {
      width: 240px;
      height: 240px;
      background: transparent;
      border: none;
      padding: 0;
      border-radius: 0;
      margin: 0;
      flex-shrink: 0;
    }
.cs-hero-logo.has-logo:hover { border: none; }
.cs-hero-logo.has-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
@media (max-width: 880px) {
      .cs-hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .cs-hero-logo.has-logo {
        width: 160px;
        height: 160px;
        order: -1;
      }
    }
/* === Grafika produktowa jako tło sekcji (paralax-style) === */
    .cs-photo-section {
      position: relative;
      padding: 0;
      border-bottom: 1px solid var(--line);
      overflow: hidden;
    }
.cs-photo-slot {
      width: 100%;
      height: 380px;
      background: var(--paper-2);
      border-top: 1px dashed var(--line);
      border-bottom: 1px dashed var(--line);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      position: relative;
      background-image:
        linear-gradient(45deg, transparent 48%, var(--line) 49%, var(--line) 51%, transparent 52%);
      background-size: 24px 24px;
      transition: border-color .2s;
    }
.cs-photo-slot:hover { border-color: var(--indigo); }
.cs-photo-slot-inner {
      background: var(--paper);
      padding: 24px 32px;
      border-radius: 14px;
      box-shadow: 0 6px 24px rgba(0,0,0,.06);
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 480px;
    }
.cs-photo-slot-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--indigo);
      font-weight: 600;
    }
.cs-photo-slot-h {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.005em;
      color: var(--ink);
    }
.cs-photo-slot-desc {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
    }
@media (max-width: 720px) {
      .cs-photo-slot { height: 260px; }
      .cs-photo-slot-inner { padding: 18px 22px; max-width: 90%; }
    }
/* === Wykres: wartość konwersji vs koszt === */
    .cs-chart {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 36px 32px 28px;
      margin-top: 36px;
    }
.cs-chart-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 24px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }
.cs-chart-title {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.005em;
      color: var(--ink);
    }
.cs-chart-sub {
      font-size: 13px;
      color: var(--muted);
      margin-top: 4px;
    }
.cs-chart-legend {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
    }
.cs-chart-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
    }
.cs-chart-legend-dot {
      width: 12px;
      height: 12px;
      border-radius: 3px;
    }
.cs-chart-legend-dot.is-value { background: var(--indigo); }
.cs-chart-legend-dot.is-cost { background: var(--line); border: 1px solid var(--muted); }
.cs-chart-svg {
      width: 100%;
      height: auto;
      display: block;
    }
.cs-chart-footnote {
      margin-top: 18px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }
@media (max-width: 720px) {
      .cs-chart { padding: 24px 18px; }
      .cs-chart-head { flex-direction: column; align-items: stretch; gap: 12px; }
    }
/* ===== Case detail page ===== */

    /* tag "Case study" pod tytułem hero */
    .cs-hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--yellow);
      color: var(--ink);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 999px;
      margin-top: 18px;
    }
/* meta-pasek pod hero: branża / kanał / okres */
    .cs-meta-bar {
      display: flex;
      gap: 32px;
      flex-wrap: wrap;
      padding: 24px 0 0;
      margin-top: 28px;
      border-top: 1px solid var(--line);
    }
.cs-meta-bar-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
.cs-meta-bar-lbl {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
    }
.cs-meta-bar-val {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
    }
.cs-meta-bar-link {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: opacity .2s;
    }
.cs-meta-bar-link:hover {
      opacity: 0.65;
    }
.cs-meta-bar-arrow {
      font-size: 12px;
      color: var(--muted);
      transition: transform .2s;
    }
.cs-meta-bar-link:hover .cs-meta-bar-arrow {
      transform: translate(2px, -2px);
    }
/* sticky-bar z liczbami pod nav */
    .cs-stickybar {
      position: sticky;
      top: 71px;
      z-index: 20;
      background: var(--paper);
      color: var(--ink);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 4px 16px rgba(0,0,0,.04);
      padding: 14px var(--pad-x);
      margin-top: 40px;
    }
.cs-stickybar-inner {
      display: flex;
      gap: 0;
      align-items: stretch;
      justify-content: space-between;
      max-width: 1280px;
      margin: 0 auto;
    }
.cs-stickybar-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
      padding: 0 24px;
      border-right: 1px solid var(--line);
    }
.cs-stickybar-item:last-child { border-right: none; }
.cs-stickybar-item:first-child { padding-left: 0; }
.cs-stickybar-num {
      font-size: 24px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--indigo);
    }
.cs-stickybar-num.muted { color: var(--muted); }
.cs-stickybar-lbl {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
    }
/* "Wyzwanie" - 3 punkty z numerami */
    .cs-challenge-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 36px;
    }
.cs-challenge {
      background: var(--paper-2);
      border-radius: 14px;
      padding: 28px 26px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
.cs-challenge-num {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .12em;
      color: var(--indigo);
    }
.cs-challenge-h {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.005em;
    }
.cs-challenge-p {
      font-size: 14px;
      line-height: 1.55;
      color: var(--muted);
    }
/* "Strategia" - 3 filary, kafle na ciemnym */
    .cs-pillars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 40px;
    }
.cs-pillar {
      background: var(--ink);
      color: var(--paper);
      border-radius: 18px;
      padding: 36px 30px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      overflow: hidden;
    }
.cs-pillar::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 100% 0%, rgba(245, 197, 24, 0.08), transparent 55%);
      pointer-events: none;
    }
.cs-pillar-no {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .15em;
      color: var(--yellow);
      position: relative;
      z-index: 1;
    }
.cs-pillar-h {
      font-size: 20px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.005em;
      position: relative;
      z-index: 1;
    }
.cs-pillar-p {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255,255,255,.78);
      position: relative;
      z-index: 1;
    }
.cs-pillar-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255,255,255,.7);
      margin-top: auto;
      align-self: flex-start;
      position: relative;
      z-index: 1;
    }
/* "Wyniki" - duża sekcja z 4 liczbami */
    .cs-results {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 40px;
    }
.cs-result {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 32px 26px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease;
    }
.cs-result:hover {
      transform: translateY(-3px);
      border-color: var(--indigo);
    }
.cs-result.is-cost {
      background: var(--paper-2);
    }
.cs-result-num {
      font-size: 56px;
      font-weight: 800;
      line-height: 0.95;
      letter-spacing: -0.035em;
      color: var(--indigo);
    }
.cs-result.is-cost .cs-result-num {
      color: var(--muted);
    }
.cs-result-lbl {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.35;
    }
.cs-result-note {
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
      margin-top: 4px;
    }
/* "Co konkretnie zadziałało" - lista wniosków */
    .cs-wins {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      margin-top: 36px;
      border-top: 1px solid var(--line);
    }
.cs-win {
      display: grid;
      grid-template-columns: 60px 1fr;
      gap: 24px;
      padding: 24px 0;
      border-bottom: 1px solid var(--line);
      align-items: start;
    }
.cs-win-no {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .12em;
      color: var(--indigo);
      padding-top: 4px;
    }
.cs-win-body {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
.cs-win-h {
      font-size: 17px;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -0.005em;
    }
.cs-win-p {
      font-size: 14px;
      line-height: 1.55;
      color: var(--muted);
    }
/* Cytat klienta - duży indigo blok */
    .cs-quote {
      background: var(--indigo);
      color: var(--paper);
      border-radius: 22px;
      padding: 56px 56px 48px;
      position: relative;
      overflow: hidden;
      margin-top: 40px;
    }
.cs-quote-mark {
      position: absolute;
      top: 24px;
      right: 56px;
      font-family: 'Poppins', serif;
      font-size: 140px;
      line-height: 1;
      font-weight: 900;
      color: var(--yellow);
      opacity: .35;
      pointer-events: none;
    }
.cs-quote-text {
      font-size: 26px;
      line-height: 1.4;
      font-weight: 600;
      letter-spacing: -0.015em;
      max-width: 880px;
      position: relative;
      z-index: 1;
      color: var(--paper);
    }
.cs-quote-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 32px;
      position: relative;
      z-index: 1;
    }
.cs-quote-mono {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: var(--yellow);
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .04em;
    }
.cs-quote-id {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
.cs-quote-co {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.005em;
      color: var(--paper);
    }
.cs-quote-pers {
      font-size: 13px;
      color: rgba(255,255,255,.7);
    }
/* dolny CTA: "Zobacz inne case'y" */
    .cs-bottomnav {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 40px;
    }
.cs-bottomnav-card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 28px 26px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: transform .3s, border-color .3s;
      text-decoration: none;
    }
.cs-bottomnav-card:hover {
      transform: translateY(-2px);
      border-color: var(--ink);
    }
.cs-bottomnav-eyebrow {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
    }
.cs-bottomnav-h {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.005em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--ink);
    }
.cs-bottomnav-card:hover .cs-bottomnav-h .arrow {
      transform: translateX(4px);
      transition: transform .2s;
    }
.cs-bottomnav-p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
    }
/* Responsywność dla pełnego case study */
    @media (max-width: 1024px) {
      .cs-challenge-list,
      .cs-pillars { grid-template-columns: 1fr 1fr; }
      .cs-results { grid-template-columns: 1fr 1fr; }
    }
@media (max-width: 720px) {
      .cs-challenge-list,
      .cs-pillars,
      .cs-results,
      .cs-bottomnav { grid-template-columns: 1fr; }
      .cs-stickybar { padding: 12px var(--pad-x); }
      .cs-stickybar-inner { gap: 8px; flex-wrap: wrap; }
      .cs-stickybar-item { padding: 6px 12px 6px 0; min-width: 45%; flex: 0 0 45%; border-right: none; }
      .cs-stickybar-num { font-size: 20px; }
      .cs-result-num { font-size: 44px; }
      .cs-quote { padding: 36px 28px; }
      .cs-quote-text { font-size: 20px; }
      .cs-quote-mark { font-size: 90px; right: 24px; top: 12px; }
      .cs-meta-bar { gap: 20px; }
    }
/* 02-case-muuv.css */
.form-col .body-txt { color: rgba(255,255,255,.85); margin-bottom: 24px; }
/* 1a) STAGGER REVEAL — dzieci sekcji animują się kaskadowo */
    [data-stagger] > *,
    [data-stagger] .grid-2 > *,
    [data-stagger] .grid-3 > *,
    [data-stagger] .check > *,
    [data-stagger] .step,
    [data-stagger] .ref-card,
    [data-stagger] .case-card,
    [data-stagger] .pillar-card,
    [data-stagger] .model-shared-item,
    [data-stagger] .partner-cell,
    [data-stagger] .stats-bar > *,
    [data-stagger] .ref-grid-3 > * {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
      transition-delay: calc(var(--i, 0) * 60ms);
      will-change: opacity, transform;
    }
[data-stagger].is-visible > *,
    [data-stagger].is-visible .grid-2 > *,
    [data-stagger].is-visible .grid-3 > *,
    [data-stagger].is-visible .check > *,
    [data-stagger].is-visible .step,
    [data-stagger].is-visible .ref-card,
    [data-stagger].is-visible .case-card,
    [data-stagger].is-visible .pillar-card,
    [data-stagger].is-visible .model-shared-item,
    [data-stagger].is-visible .partner-cell,
    [data-stagger].is-visible .stats-bar > *,
    [data-stagger].is-visible .ref-grid-3 > * {
      opacity: 1;
      transform: translateY(0);
    }
/* ===== Podstrona referencji — hero ===== */
    .ref-hero {
      position: relative;
      background: linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
      padding: 56px var(--pad-x) 32px;
      overflow: hidden;
    }
/* ===== Mobile ===== */
    @media (max-width: 980px) {
      .ref-grid-3 {
        grid-template-columns: 1fr;
      }
      .ref-hero-h1 {
        font-size: 40px;
      }
      .ref-hero {
        padding: 36px 18px 44px;
      }
      .ref-section {
        padding: 48px 18px;
      }
      .ref-cta {
        padding: 48px 18px 56px;
      }
      .ref-cta h2 {
        font-size: 28px;
      }
      .ref-form {
        padding: 24px 18px;
      }
      .ref-form-row {
        grid-template-columns: 1fr;
        gap: 0;
      }
      .ref-form-row .ref-form-field {
        margin-bottom: 16px;
      }
    }
@media (min-width: 981px) and (max-width: 1280px) {
      .ref-grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
@media (max-width: 600px) {
      .pill-check-group {
        grid-template-columns: repeat(2, 1fr);
      }
    }
/* ===== Wstawki przerywające grid referencji ===== */
    /* Stat-kafel: 1 kolumna, jasne tło, duża liczba */
    .ref-stat-tile {
      background: var(--ink);
      color: var(--paper);
      border-radius: 16px;
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      overflow: hidden;
      transition: transform .3s cubic-bezier(.2,.7,.2,1);
    }
/* Featured cytat: pełna szerokość (3 kolumny), yellow tło */
    .ref-featured {
      grid-column: 1 / -1;
      background: rgba(245, 197, 24, 0.08);
      border: 1px solid rgba(245, 197, 24, 0.3);
      color: var(--ink);
      border-radius: 16px;
      padding: 48px;
      position: relative;
      overflow: hidden;
      transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s ease, border-color .3s ease;
    }
@media (max-width: 900px) {
      .ref-featured {
        grid-template-columns: 1fr;
        padding: 32px;
        gap: 28px;
      }
      .ref-featured-quote {
        font-size: 22px;
      }
        }
/* Mobile - wszystko na 1 kolumnie, anulujemy span */
    @media (max-width: 760px) {
      .ref-item.is-wide {
        grid-column: span 1;
      }
      .ref-item.is-wide .ref-item-quote {
        font-size: 15px;
      }
    }
/* karta case study - duża, na ciemnym tle */
    .cs-card {
      background: var(--ink);
      color: var(--paper);
      border-radius: 18px;
      padding: 36px 32px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: relative;
      overflow: hidden;
      transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
      min-height: 380px;
      text-decoration: none;
    }
/* responsywność */
    @media (max-width: 1024px) {
      .cs-grid-3 { grid-template-columns: repeat(2, 1fr); }
    }
@media (max-width: 720px) {
      .cs-featured-grid,
      .cs-grid-3 { grid-template-columns: 1fr; }
      .cs-card { min-height: auto; padding: 28px 24px; }
      .cs-featured-grid .cs-card { min-height: auto; }
      .cs-card-num { font-size: 44px; }
      .cs-featured-grid .cs-card-num { font-size: 52px; }
      .cs-featured-grid .cs-card-brand { font-size: 24px; }
    }
/* === Hero: 2-kolumnowy układ (tekst | logo) === */
    .cs-hero-grid {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 48px;
      align-items: center;
    }
.cs-hero-text {
      min-width: 0;
    }
/* === Hero: logo klienta === */
    .cs-hero-logo {
      width: 84px;
      height: 84px;
      border-radius: 14px;
      background: var(--paper-2);
      border: 1px dashed var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      margin: 20px 0 24px;
      transition: border-color .2s;
    }
.cs-hero-logo:hover { border-color: var(--indigo); }
.cs-hero-logo-label {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      text-align: center;
      line-height: 1.3;
    }
/* Wariant: prawdziwe logo klienta (bez ramki, duże, po prawej w hero) */
    .cs-hero-logo.has-logo {
      width: 240px;
      height: 240px;
      background: transparent;
      border: none;
      padding: 0;
      border-radius: 0;
      margin: 0;
      flex-shrink: 0;
    }
@media (max-width: 880px) {
      .cs-hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .cs-hero-logo.has-logo {
        width: 160px;
        height: 160px;
        order: -1;
      }
    }
/* === Grafika produktowa jako tło sekcji (paralax-style) === */
    .cs-photo-section {
      position: relative;
      padding: 0;
      border-bottom: 1px solid var(--line);
      overflow: hidden;
    }
@media (max-width: 720px) {
      .cs-photo-slot { height: 260px; }
      .cs-photo-slot-inner { padding: 18px 22px; max-width: 90%; }
    }
@media (max-width: 720px) {
      .cs-chart { padding: 24px 18px; }
      .cs-chart-head { flex-direction: column; align-items: stretch; gap: 12px; }
    }
/* meta-pasek pod hero: branża / kanał / okres */
    .cs-meta-bar {
      display: flex;
      gap: 32px;
      flex-wrap: wrap;
      padding: 24px 0 0;
      margin-top: 28px;
      border-top: 1px solid var(--line);
    }
.cs-meta-bar-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
.cs-meta-bar-lbl {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
    }
.cs-meta-bar-val {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
    }
.cs-meta-bar-link {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: opacity .2s;
    }
.cs-meta-bar-link:hover {
      opacity: 0.65;
    }
.cs-meta-bar-arrow {
      font-size: 12px;
      color: var(--muted);
      transition: transform .2s;
    }
.cs-meta-bar-link:hover .cs-meta-bar-arrow {
      transform: translate(2px, -2px);
    }
/* sticky-bar z liczbami pod nav */
    .cs-stickybar {
      position: sticky;
      top: 71px;
      z-index: 20;
      background: var(--paper);
      color: var(--ink);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 4px 16px rgba(0,0,0,.04);
      padding: 14px var(--pad-x);
      margin-top: 40px;
    }
.cs-stickybar-inner {
      display: flex;
      gap: 0;
      align-items: stretch;
      justify-content: space-between;
      max-width: 1280px;
      margin: 0 auto;
    }
.cs-stickybar-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
      padding: 0 24px;
      border-right: 1px solid var(--line);
    }
.cs-stickybar-item:last-child { border-right: none; }
.cs-stickybar-item:first-child { padding-left: 0; }
.cs-stickybar-num {
      font-size: 24px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--indigo);
    }
.cs-stickybar-lbl {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
    }
/* "Wyzwanie" - 3 punkty z numerami */
    .cs-challenge-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 36px;
    }
.cs-challenge {
      background: var(--paper-2);
      border-radius: 14px;
      padding: 28px 26px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
.cs-challenge-num {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .12em;
      color: var(--indigo);
    }
.cs-challenge-h {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.005em;
    }
.cs-challenge-p {
      font-size: 14px;
      line-height: 1.55;
      color: var(--muted);
    }
/* "Strategia" - 3 filary, kafle na ciemnym */
    .cs-pillars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 40px;
    }
.cs-pillar {
      background: var(--ink);
      color: var(--paper);
      border-radius: 18px;
      padding: 36px 30px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      overflow: hidden;
    }
.cs-pillar::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 100% 0%, rgba(245, 197, 24, 0.08), transparent 55%);
      pointer-events: none;
    }
.cs-pillar-no {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .15em;
      color: var(--yellow);
      position: relative;
      z-index: 1;
    }
.cs-pillar-h {
      font-size: 20px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.005em;
      position: relative;
      z-index: 1;
    }
.cs-pillar-p {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255,255,255,.78);
      position: relative;
      z-index: 1;
    }
.cs-pillar-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255,255,255,.7);
      margin-top: auto;
      align-self: flex-start;
      position: relative;
      z-index: 1;
    }
/* "Wyniki" - duża sekcja z 4 liczbami */
    .cs-results {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 40px;
    }
.cs-result {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 32px 26px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease;
    }
.cs-result:hover {
      transform: translateY(-3px);
      border-color: var(--indigo);
    }
.cs-result-num {
      font-size: 56px;
      font-weight: 800;
      line-height: 0.95;
      letter-spacing: -0.035em;
      color: var(--indigo);
    }
.cs-result-lbl {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.35;
    }
.cs-result-note {
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
      margin-top: 4px;
    }
/* "Co konkretnie zadziałało" - lista wniosków */
    .cs-wins {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      margin-top: 36px;
      border-top: 1px solid var(--line);
    }
.cs-win {
      display: grid;
      grid-template-columns: 60px 1fr;
      gap: 24px;
      padding: 24px 0;
      border-bottom: 1px solid var(--line);
      align-items: start;
    }
.cs-win-no {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .12em;
      color: var(--indigo);
      padding-top: 4px;
    }
.cs-win-body {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
.cs-win-h {
      font-size: 17px;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -0.005em;
    }
.cs-win-p {
      font-size: 14px;
      line-height: 1.55;
      color: var(--muted);
    }
/* dolny CTA: "Zobacz inne case'y" */
    .cs-bottomnav {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 40px;
    }
.cs-bottomnav-card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 28px 26px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: transform .3s, border-color .3s;
      text-decoration: none;
    }
.cs-bottomnav-card:hover {
      transform: translateY(-2px);
      border-color: var(--ink);
    }
.cs-bottomnav-eyebrow {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
    }
.cs-bottomnav-h {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.005em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--ink);
    }
.cs-bottomnav-card:hover .cs-bottomnav-h .arrow {
      transform: translateX(4px);
      transition: transform .2s;
    }
.cs-bottomnav-p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
    }
/* Responsywność dla pełnego case study */
    @media (max-width: 1024px) {
      .cs-challenge-list,
      .cs-pillars { grid-template-columns: 1fr 1fr; }
      .cs-results { grid-template-columns: 1fr 1fr; }
    }
@media (max-width: 720px) {
      .cs-challenge-list,
      .cs-pillars,
      .cs-results,
      .cs-bottomnav { grid-template-columns: 1fr; }
      .cs-stickybar { padding: 12px var(--pad-x); }
      .cs-stickybar-inner { gap: 8px; flex-wrap: wrap; }
      .cs-stickybar-item { padding: 6px 12px 6px 0; min-width: 45%; flex: 0 0 45%; border-right: none; }
      .cs-stickybar-num { font-size: 20px; }
      .cs-result-num { font-size: 44px; }
      .cs-quote { padding: 36px 28px; }
      .cs-quote-text { font-size: 20px; }
      .cs-quote-mark { font-size: 90px; right: 24px; top: 12px; }
      .cs-meta-bar { gap: 20px; }
    }
h1, h2, h3, h4, h4, p, ul { margin: 0; }
.footer-grid h4 {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
      font-weight: 500;
      margin-bottom: 14px;
    }
/* Wariant: placeholder w rozmiarze docelowego logo (240x240) */
    .cs-hero-logo.is-placeholder {
      width: 240px;
      height: 240px;
      margin: 0;
      flex-shrink: 0;
      border-radius: 18px;
      padding: 20px;
    }
.cs-hero-logo.is-placeholder .cs-hero-logo-label {
      font-size: 11px;
      line-height: 1.4;
    }
/* Wariant: z realnym zdjęciem */
    .cs-photo-section.has-photo {
      border: none;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
.cs-photo-img {
      width: 100%;
      aspect-ratio: 1600 / 713;
      object-fit: cover;
      display: block;
    }
/* 02-case-studies.css */
.form-col .body-txt { color: rgba(255,255,255,.85); margin-bottom: 24px; }
/* 1a) STAGGER REVEAL — dzieci sekcji animują się kaskadowo */
    [data-stagger] > *,
    [data-stagger] .grid-2 > *,
    [data-stagger] .grid-3 > *,
    [data-stagger] .check > *,
    [data-stagger] .step,
    [data-stagger] .ref-card,
    [data-stagger] .case-card,
    [data-stagger] .pillar-card,
    [data-stagger] .model-shared-item,
    [data-stagger] .partner-cell,
    [data-stagger] .stats-bar > *,
    [data-stagger] .ref-grid-3 > * {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
      transition-delay: calc(var(--i, 0) * 60ms);
      will-change: opacity, transform;
    }
[data-stagger].is-visible > *,
    [data-stagger].is-visible .grid-2 > *,
    [data-stagger].is-visible .grid-3 > *,
    [data-stagger].is-visible .check > *,
    [data-stagger].is-visible .step,
    [data-stagger].is-visible .ref-card,
    [data-stagger].is-visible .case-card,
    [data-stagger].is-visible .pillar-card,
    [data-stagger].is-visible .model-shared-item,
    [data-stagger].is-visible .partner-cell,
    [data-stagger].is-visible .stats-bar > *,
    [data-stagger].is-visible .ref-grid-3 > * {
      opacity: 1;
      transform: translateY(0);
    }
/* ===== Podstrona referencji — hero ===== */
    .ref-hero {
      position: relative;
      background: linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
      padding: 56px var(--pad-x) 32px;
      overflow: hidden;
    }
/* ===== Mobile ===== */
    @media (max-width: 980px) {
      .ref-grid-3 {
        grid-template-columns: 1fr;
      }
      .ref-hero-h1 {
        font-size: 40px;
      }
      .ref-hero {
        padding: 36px 18px 44px;
      }
      .ref-section {
        padding: 48px 18px;
      }
      .ref-cta {
        padding: 48px 18px 56px;
      }
      .ref-cta h2 {
        font-size: 28px;
      }
      .ref-form {
        padding: 24px 18px;
      }
      .ref-form-row {
        grid-template-columns: 1fr;
        gap: 0;
      }
      .ref-form-row .ref-form-field {
        margin-bottom: 16px;
      }
    }
@media (min-width: 981px) and (max-width: 1280px) {
      .ref-grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
@media (max-width: 600px) {
      .pill-check-group {
        grid-template-columns: repeat(2, 1fr);
      }
    }
/* ===== Wstawki przerywające grid referencji ===== */
    /* Stat-kafel: 1 kolumna, jasne tło, duża liczba */
    .ref-stat-tile {
      background: var(--ink);
      color: var(--paper);
      border-radius: 16px;
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      overflow: hidden;
      transition: transform .3s cubic-bezier(.2,.7,.2,1);
    }
/* Featured cytat: pełna szerokość (3 kolumny), yellow tło */
    .ref-featured {
      grid-column: 1 / -1;
      background: rgba(245, 197, 24, 0.08);
      border: 1px solid rgba(245, 197, 24, 0.3);
      color: var(--ink);
      border-radius: 16px;
      padding: 48px;
      position: relative;
      overflow: hidden;
      transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s ease, border-color .3s ease;
    }
@media (max-width: 900px) {
      .ref-featured {
        grid-template-columns: 1fr;
        padding: 32px;
        gap: 28px;
      }
      .ref-featured-quote {
        font-size: 22px;
      }
        }
/* Mobile - wszystko na 1 kolumnie, anulujemy span */
    @media (max-width: 760px) {
      .ref-item.is-wide {
        grid-column: span 1;
      }
      .ref-item.is-wide .ref-item-quote {
        font-size: 15px;
      }
    }
/* ===== Case studies grid ===== */
    .cs-section { padding: 80px var(--pad-x); border-bottom: 1px solid var(--line); }
.cs-section-head {
      max-width: 720px;
      margin-bottom: 48px;
    }
.cs-section-head .h2 { margin-bottom: 14px; }
.cs-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
.cs-featured-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }
/* karta case study - duża, na ciemnym tle */
    .cs-card {
      background: var(--ink);
      color: var(--paper);
      border-radius: 18px;
      padding: 36px 32px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: relative;
      overflow: hidden;
      transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
      min-height: 380px;
      text-decoration: none;
    }
.cs-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 100% 0%, rgba(245, 197, 24, 0.10), transparent 50%);
      pointer-events: none;
    }
.cs-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 48px rgba(0,0,0,.18);
    }
.cs-card.is-mock {
      background: var(--paper);
      color: var(--ink);
      border: 1px dashed var(--line);
    }
.cs-card.is-mock::before {
      background: radial-gradient(circle at 100% 0%, rgba(57, 9, 243, 0.05), transparent 50%);
    }
.cs-card.is-mock:hover {
      border-color: var(--indigo);
      border-style: solid;
    }
/* header karty: branża + kanał */
    .cs-card-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      position: relative;
      z-index: 1;
    }
.cs-card.is-mock .cs-card-meta { color: var(--muted); }
.cs-card-channel {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      font-size: 10px;
      letter-spacing: .1em;
    }
.cs-card.is-mock .cs-card-channel {
      border-color: var(--line);
    }
/* badge "wkrótce" dla mockupów */
    .cs-card-badge {
      position: absolute;
      top: 20px;
      right: 20px;
      background: var(--yellow);
      color: var(--ink);
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 999px;
      z-index: 2;
    }
/* wynik liczbowy */
    .cs-card-result {
      display: flex;
      align-items: baseline;
      gap: 14px;
      flex-wrap: wrap;
      padding: 18px 0;
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
      position: relative;
      z-index: 1;
    }
.cs-card.is-mock .cs-card-result {
      border-color: var(--line);
    }
.cs-card-num {
      font-size: 52px;
      line-height: 0.95;
      font-weight: 800;
      letter-spacing: -0.035em;
      color: var(--yellow);
    }
.cs-card.is-mock .cs-card-num {
      color: var(--indigo);
    }
.cs-card-num-lbl {
      font-family: var(--mono);
      font-size: 12px;
      line-height: 1.4;
      color: rgba(255,255,255,.7);
      letter-spacing: .02em;
    }
.cs-card.is-mock .cs-card-num-lbl {
      color: var(--muted);
    }
/* problem - co rozwiązaliśmy */
    .cs-card-problem {
      font-size: 14px;
      line-height: 1.55;
      color: rgba(255,255,255,.82);
      flex: 1;
      position: relative;
      z-index: 1;
    }
.cs-card.is-mock .cs-card-problem { color: var(--muted); }
/* CTA na dole */
    .cs-card-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--yellow);
      margin-top: auto;
      position: relative;
      z-index: 1;
    }
.cs-card.is-mock .cs-card-link {
      color: var(--indigo);
      opacity: .55;
      pointer-events: none;
    }
.cs-card-link .arrow {
      transition: transform .2s ease;
    }
.cs-card:hover .cs-card-link .arrow {
      transform: translateX(4px);
    }
/* featured cards bigger */
    .cs-featured-grid .cs-card { min-height: 440px; }
.cs-featured-grid .cs-card-num { font-size: 64px; }
.cs-featured-grid .cs-card-brand { font-size: 30px; }
/* responsywność */
    @media (max-width: 1024px) {
      .cs-grid-3 { grid-template-columns: repeat(2, 1fr); }
    }
@media (max-width: 720px) {
      .cs-featured-grid,
      .cs-grid-3 { grid-template-columns: 1fr; }
      .cs-card { min-height: auto; padding: 28px 24px; }
      .cs-featured-grid .cs-card { min-height: auto; }
      .cs-card-num { font-size: 44px; }
      .cs-featured-grid .cs-card-num { font-size: 52px; }
      .cs-featured-grid .cs-card-brand { font-size: 24px; }
    }
/* stagger animation dla kart */
    [data-stagger] .cs-grid-3 > *,
    [data-stagger] .cs-featured-grid > * {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
    }
[data-stagger].is-visible .cs-grid-3 > *,
    [data-stagger].is-visible .cs-featured-grid > * {
      opacity: 1;
      transform: translateY(0);
    }
[data-stagger].is-visible .cs-grid-3 > *:nth-child(1),
    [data-stagger].is-visible .cs-featured-grid > *:nth-child(1) { transition-delay: 0s; }
[data-stagger].is-visible .cs-grid-3 > *:nth-child(2),
    [data-stagger].is-visible .cs-featured-grid > *:nth-child(2) { transition-delay: .08s; }
[data-stagger].is-visible .cs-grid-3 > *:nth-child(3) { transition-delay: .16s; }
[data-stagger].is-visible .cs-grid-3 > *:nth-child(4) { transition-delay: .24s; }
[data-stagger].is-visible .cs-grid-3 > *:nth-child(5) { transition-delay: .32s; }
[data-stagger].is-visible .cs-grid-3 > *:nth-child(6) { transition-delay: .40s; }
h1, h2, h3, h4, h4, p, ul { margin: 0; }
.footer-grid h4 {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
      font-weight: 500;
      margin-bottom: 14px;
    }
/* tytuł case'a */
    .cs-card-brand {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.2;
      position: relative;
      z-index: 1;
      margin: 4px 0 0;
    }
/* 02-home.css */
body {
      font-family: var(--font);
      color: var(--ink);
      font-size: 14px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }
.form-col .body-txt { color: rgba(255,255,255,.85); margin-top: 24px; margin-bottom: 24px; }
.nav-burger span {
      display: block;
      width: 20px; height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: transform .25s ease, opacity .2s ease;
    }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-drawer.is-open { opacity: 1; pointer-events: auto; }
.nav-drawer-inner {
      position: absolute;
      top: 64px; left: 12px; right: 12px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      transform: translateY(-12px);
      transition: transform .3s cubic-bezier(.2,.7,.2,1);
      box-shadow: 0 24px 60px rgba(0,0,0,.18);
    }
.nav-drawer.is-open .nav-drawer-inner { transform: translateY(0); }
.nav-drawer-inner a {
      display: block;
      padding: 14px 16px;
      font-size: 16px;
      font-weight: 500;
      color: var(--ink);
      border-radius: 10px;
      transition: background .15s ease;
    }
.nav-drawer-inner a:hover,
    .nav-drawer-inner a:focus { background: rgba(0,0,0,.04); }
.nav-drawer-inner .nav-drawer-cta {
      margin-top: 8px;
      background: var(--ink);
      color: var(--paper);
      text-align: center;
      border-radius: 999px;
      padding: 14px 18px;
    }
.nav-drawer-inner .nav-drawer-cta:hover { background: var(--indigo); }
body.no-scroll { overflow: hidden; }
@media (max-width: 600px) {
      .pill-check-group {
        grid-template-columns: repeat(2, 1fr);
      }
    }
.logo {
      font-weight: 800;
      font-size: 18px;
      letter-spacing: -0.02em;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
.pillar-card h3 {
      font-size: 36px;
      line-height: 1.1;
      letter-spacing: -0.025em;
      font-weight: 700;
      margin: 0 0 24px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--line);
      max-width: 90%;
      min-height: calc(36px * 1.1 * 3);
    }
.pillar-card.yellow h3 { border-bottom-color: rgba(0,0,0,.18); }
.pillar-card.indigo h3 { border-bottom-color: rgba(255,255,255,.2); }
.pillar-card h3 + p {
      min-height: calc(14px * 1.5 * 2);
    }
.ref-card {
      background: #fff;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      min-height: 280px;
    }
.services-card p {
      font-size: 13px;
      margin-top: 6px;
      margin-bottom: 18px;
      flex-grow: 1;
    }
.services-card-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      color: var(--indigo);
      text-decoration: none;
      align-self: flex-start;
      transition: gap 0.2s ease;
    }
.services-card-link:hover { gap: 10px; }
.services-card-link .arrow { transition: transform 0.2s ease; }
.services-card:hover .services-card-link .arrow { transform: translateX(2px); }
.services-foot {
      margin-top: 32px;
      padding: 28px 32px;
      background: rgba(245, 197, 24, 0.08);
      border: 1px solid rgba(245, 197, 24, 0.3);
      border-radius: 16px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: center;
      transition: background .25s ease, border-color .25s ease;
    }
.services-foot:hover {
      background: rgba(245, 197, 24, 0.12);
      border-color: rgba(245, 197, 24, 0.5);
    }
.services-foot-content { display: flex; flex-direction: column; gap: 8px; }
.services-foot .eyebrow {
      margin: 0;
      color: var(--ink);
    }
.services-foot-channels {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--ink);
      line-height: 1.3;
    }
.services-foot-channels b { font-weight: 700; }
.services-foot p {
      font-size: 14px;
      margin: 0;
      max-width: 640px;
      color: var(--muted);
      line-height: 1.5;
    }
@media (max-width: 720px) {
      .services-foot {
        grid-template-columns: 1fr;
        padding: 24px 20px;
      }
      .services-foot-channels { font-size: 16px; }
    }
/* ===== Stats bar ===== */
    .stats-bar {
      padding: 32px var(--pad-x);
      background: var(--ink);
      color: #fff;
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 32px;
      text-align: center;
    }
.stats-bar .num {
      font-size: 48px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -.04em;
      color: #fff;
    }
.diag-card {
      background: #fff;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 28px;
      display: flex;
      flex-direction: column;
    }
.diag-card > p:last-child { margin-top: auto; }
.diag-card .body-txt { font-size: 14px; margin-top: 10px; color: var(--ink); opacity: .78; }
.section.dark .diag-card .body-txt { color: var(--ink); opacity: .78; }
.team-fig {
      display: flex;
      flex-direction: column;
      cursor: default;
    }
.team-img {
      aspect-ratio: 4 / 5;
      border-radius: 0;
      overflow: hidden;
      background: var(--paper-2);
      position: relative;
    }
.team-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
.team-img-placeholder {
      background:
        repeating-linear-gradient(135deg, transparent 0 8px, rgba(0,0,0,.04) 8px 9px),
        var(--paper-2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
    }
.team-cap { padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.team-cap b { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.team-cap span {
      font-size: 12px;
      color: var(--ink);
      opacity: 0.7;
      font-family: var(--mono);
      letter-spacing: .05em;
      text-transform: uppercase;
    }
/* 1a) STAGGER REVEAL — dzieci sekcji animują się kaskadowo */
    [data-stagger] > *,
    [data-stagger] .grid-2 > *,
    [data-stagger] .grid-3 > *,
    [data-stagger] .check > *,
    [data-stagger] .step,
    [data-stagger] .ref-card,
    [data-stagger] .case-card,
    [data-stagger] .pillar-card,
    [data-stagger] .diag-card,
    [data-stagger] .model-shared-item,
    [data-stagger] .partner-cell,
    [data-stagger] .stats-bar > * {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
      transition-delay: calc(var(--i, 0) * 90ms);
      will-change: opacity, transform;
    }
[data-stagger].is-visible > *,
    [data-stagger].is-visible .grid-2 > *,
    [data-stagger].is-visible .grid-3 > *,
    [data-stagger].is-visible .check > *,
    [data-stagger].is-visible .step,
    [data-stagger].is-visible .ref-card,
    [data-stagger].is-visible .case-card,
    [data-stagger].is-visible .pillar-card,
    [data-stagger].is-visible .diag-card,
    [data-stagger].is-visible .model-shared-item,
    [data-stagger].is-visible .partner-cell,
    [data-stagger].is-visible .stats-bar > * {
      opacity: 1;
      transform: translateY(0);
    }
@media (max-width: 360px) {
      .g-recaptcha {
        transform: scale(0.82);
      }
    }
/* ===== V2 Enhancements (Strona Główna v2) ===== */
    .hero-card {
          padding: 0;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          background: transparent;
          border: 1px solid rgba(255,255,255,.18);
          color: #fff;
          backdrop-filter: blur(2px);
          border-radius: 14px;
        }
/* === 2) Hero autoplay + progress bar + crossfade === */
        .hero-progress { display: block; }
.hero-progress {
          display: block;
          height: 2px;
          background: rgba(255,255,255,.12);
          position: relative;
          margin: 0;
        }
.hero-progress > i {
          position: absolute;
          left: 0; top: 0; bottom: 0;
          width: 0%;
          background: var(--yellow);
          transition: width .1s linear;
        }
.hero-slide { animation: heroFade .6s cubic-bezier(.2,.7,.2,1); }
.stat-context {
          display: none;
          font-family: var(--mono);
          font-size: 11px;
          letter-spacing: .08em;
          text-transform: uppercase;
          color: rgba(255,255,255,.45);
          margin-top: 6px;
        }
/* stat-context: NIE używamy w tej implementacji */
    
    .nav.is-scrolled {
          padding-top: 10px;
          padding-bottom: 10px;
          background: rgba(255,255,255,.92);
          backdrop-filter: saturate(140%) blur(10px);
          -webkit-backdrop-filter: saturate(140%) blur(10px);
          box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
        }
.nav.is-scrolled .logo img { height: 32px; transition: height .2s; }
/* ===========================================================
           MOBILE PASS — hamburger drawer + tighter responsive rules
           =========================================================== */
    
        /* Hamburger button — hidden on desktop, shown on small screens */
        .nav-burger {
          display: none;
          width: 44px; height: 44px;
          background: transparent;
          border: 1px solid var(--line);
          border-radius: 10px;
          padding: 0;
          cursor: pointer;
          position: relative;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          gap: 5px;
        }
/* Drawer */
        .nav-drawer {
          position: fixed;
          top: 0; left: 0; right: 0; bottom: 0;
          z-index: 999;
          background: rgba(11, 11, 12, 0.55);
          backdrop-filter: blur(6px);
          -webkit-backdrop-filter: blur(6px);
          opacity: 0;
          pointer-events: none;
          transition: opacity .25s ease;
        }
.nav-burger { display: flex; }
/* Hero card slider */
          .hero-card-head { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
.hero-card-head .eyebrow { font-size: 11px; }
.hero-card-body { padding: 20px 16px !important; }
.hero-case-result .num { font-size: 38px !important; }
.hero-case-logo { width: 56px !important; height: 56px !important; }
.hero-case-result .num { font-size: 32px !important; }
@media (max-width: 1080px) {
          .nav-burger { display: flex; }
          .nav .cta { display: none; } /* CTA przenosi się do drawera */
        }
@media (max-width: 720px) {
          .nav { padding: 14px 20px; gap: 12px; }
          .logo img { height: 32px; }
    
          /* Hero */
          .hero { padding-top: 56px !important; padding-bottom: 56px !important; }
          .hero .eyebrow { font-size: 13px !important; letter-spacing: 0.08em !important; margin-bottom: 20px !important; }
          .hero h1 { font-size: 36px !important; line-height: 1.05 !important; }
          .hero .body-txt { font-size: 15px; margin-top: 20px !important; margin-bottom: 24px !important; }
          .hero-grid { gap: 32px !important; }
          .btn-row { gap: 10px; }
          .btn-row .btn { width: 100%; justify-content: center; text-align: center; }
    
          /* Hero card slider */
          .hero-card-head { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
          .hero-card-head .eyebrow { font-size: 11px; }
          .hero-card-body { padding: 20px 16px !important; }
          .hero-case-result .num { font-size: 38px !important; }
          .hero-case-logo { width: 56px !important; height: 56px !important; }
    
          /* Sections */
          .h1 { font-size: 36px; }
          .h2 { font-size: 26px; line-height: 1.15; }
          .h3 { font-size: 20px; }
          .body-txt, .lead { font-size: 15px; }
          .section { padding: 56px 20px; }
          :root { --pad-x: 20px; }
    
          /* Stats */
          .stats-bar { padding: 32px 20px; gap: 28px !important; }
          .stats-bar .num { font-size: 36px !important; }
          .stats-bar .lbl { font-size: 12px; }
    
          /* Diagnoza / referencje glow contained */
          .diag-glow, .trust-glow, .hero-glow {
            filter: blur(80px) !important;
            opacity: 0.6 !important;
          }
    
          /* Diagnoza cards */
          .diag-card { padding: 22px 20px; }
    
          /* Pillars + cases */
          .pillar-card, .diag-card { padding: 24px 20px; }
          .row-between { flex-direction: column; gap: 16px; align-items: flex-start; }
          .row-between .body-txt { max-width: 100%; }
    
          /* Footer */
          .footer { padding: 48px 20px 28px; }
          .footer-grid { gap: 32px; }
          .footer-bottom {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            font-size: 12px;
          }
    
          /* Inline H2 + max-width helpers — let them flow */
          .h2[style*="max-width"] { max-width: 100% !important; }
          .body-txt[style*="max-width"] { max-width: 100% !important; }
    
          /* Wyłącz parallax i ciężkie animacje na mobile dla wydajności */
          .hero-glow, .trust-glow, .diag-glow { animation: none !important; }
        }
@media (max-width: 480px) {
          .hero h1 { font-size: 32px !important; }
          .h1 { font-size: 32px; }
          .h2 { font-size: 24px; }
          .stats-bar .num { font-size: 32px !important; }
          .hero-case-result .num { font-size: 32px !important; }
          .nav { padding: 12px 16px; }
          .section { padding: 48px 16px; }
          :root { --pad-x: 16px; }
        }
/* 02-referencje.css */
.pillar-card h3 {
      font-size: 26px;
      margin-bottom: 14px;
      min-height: calc(26px * 1.2 * 2);
    }
/* ===== Stats bar ===== */
    .stats-bar {
      padding: 32px var(--pad-x);
      background: var(--ink);
      color: #fff;
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }
.stats-bar .num {
      font-size: 56px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -.04em;
      color: #fff;
    }
/* ===== Override dla kart modeli na podstronie Współpraca ===== */
    /* Karty są tu większe (więcej treści) → lekko jaśniejsze tło dla czytelności */
    #modele .model-card {
      background: #15171a;
      border-color: #15171a;
    }
#modele .model-fit {
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.1);
    }
.ref-card {
      background: #fff;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      min-height: 280px;
      position: relative;
      overflow: hidden;
      transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
    }
/* Akcentowy pasek indigo na górze - rozwija się od lewej przy hover */
    .ref-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--indigo), var(--indigo) 60%, var(--yellow));
      transition: width .5s cubic-bezier(.2,.7,.2,1);
    }
.ref-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px -16px rgba(29,29,27,.22);
      border-color: rgba(67, 56, 202, 0.25);
    }
.ref-card:hover::before {
      width: 100%;
    }
.form-col .body-txt { color: rgba(255,255,255,.85); margin-bottom: 24px; }
/* 1a) STAGGER REVEAL — dzieci sekcji animują się kaskadowo */
    [data-stagger] > *,
    [data-stagger] .grid-2 > *,
    [data-stagger] .grid-3 > *,
    [data-stagger] .check > *,
    [data-stagger] .step,
    [data-stagger] .ref-card,
    [data-stagger] .case-card,
    [data-stagger] .pillar-card,
    [data-stagger] .model-shared-item,
    [data-stagger] .partner-cell,
    [data-stagger] .stats-bar > *,
    [data-stagger] .ref-grid-3 > * {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
      transition-delay: calc(var(--i, 0) * 60ms);
      will-change: opacity, transform;
    }
[data-stagger].is-visible > *,
    [data-stagger].is-visible .grid-2 > *,
    [data-stagger].is-visible .grid-3 > *,
    [data-stagger].is-visible .check > *,
    [data-stagger].is-visible .step,
    [data-stagger].is-visible .ref-card,
    [data-stagger].is-visible .case-card,
    [data-stagger].is-visible .pillar-card,
    [data-stagger].is-visible .model-shared-item,
    [data-stagger].is-visible .partner-cell,
    [data-stagger].is-visible .stats-bar > *,
    [data-stagger].is-visible .ref-grid-3 > * {
      opacity: 1;
      transform: translateY(0);
    }
/* Override: 22 referencji - szybszy stagger + krótszy transition */
    [data-stagger] .ref-grid-3 > * {
      transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1);
      transition-delay: calc(var(--i, 0) * 25ms);
    }
/* ===== Podstrona referencji — hero ===== */
    .ref-hero {
      position: relative;
      background: linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
      padding: 56px var(--pad-x) 32px;
      overflow: hidden;
    }
/* ===== Grid 3-kol z kartami referencji ===== */
    .ref-section {
      padding: 40px var(--pad-x) 72px;
      background: var(--paper);
    }
.ref-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
.ref-item {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 28px 24px 24px;
      display: flex;
      flex-direction: column;
      transition: border-color 0.2s ease, transform 0.2s ease;
    }
.ref-item:hover {
      border-color: var(--indigo);
      transform: translateY(-2px);
    }
.ref-item-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }
.ref-item:hover .ref-mono {
      background: var(--indigo);
      color: var(--paper);
      border-color: var(--indigo);
    }
.ref-industry {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      line-height: 1.3;
    }
.ref-item-quote {
      font-size: 14px;
      line-height: 1.6;
      color: var(--ink);
      margin: 0 0 20px;
      flex-grow: 1;
    }
.ref-item-meta {
      border-top: 1px solid var(--line);
      padding-top: 14px;
    }
.ref-item-co {
      font-weight: 600;
      font-size: 14px;
      color: var(--ink);
      margin-bottom: 2px;
    }
.ref-item-pers {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.4;
    }
/* ===== CTA bottom (sekcja indigo) ===== */
    .ref-cta {
      background: var(--indigo);
      color: var(--paper);
      padding: 72px var(--pad-x) 80px;
    }
.ref-cta-inner {
      max-width: 720px;
      margin: 0 auto;
    }
.ref-cta-head {
      text-align: center;
      margin-bottom: 36px;
    }
.ref-cta-tag {
      display: inline-block;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--yellow);
      margin-bottom: 18px;
    }
.ref-cta h2 {
      font-size: 38px;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--paper);
      max-width: 720px;
      margin: 0 auto 14px;
    }
.ref-cta p {
      font-size: 17px;
      color: rgba(255,255,255,0.85);
      max-width: 580px;
      margin: 0 auto;
      line-height: 1.55;
    }
/* ===== Formularz w sekcji indigo ===== */
    .ref-form {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 16px;
      padding: 32px;
    }
.ref-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }
.ref-form-field {
      display: flex;
      flex-direction: column;
      margin-bottom: 16px;
    }
.ref-form-row .ref-form-field {
      margin-bottom: 0;
    }
.ref-form-label {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      margin-bottom: 8px;
    }
.ref-form-hint {
      text-transform: none;
      letter-spacing: 0;
      color: rgba(255,255,255,0.5);
      font-size: 11px;
    }
.ref-form-input {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 10px;
      padding: 12px 14px;
      font-family: var(--font);
      font-size: 14px;
      color: var(--paper);
      width: 100%;
      transition: border-color 0.2s ease, background 0.2s ease;
    }
.ref-form-input::placeholder {
      color: rgba(255,255,255,0.4);
    }
.ref-form-input:focus {
      outline: none;
      border-color: var(--yellow);
      background: rgba(255,255,255,0.12);
    }
.ref-form-textarea {
      min-height: 90px;
      resize: vertical;
      font-family: var(--font);
    }
.ref-form-foot {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-top: 8px;
      flex-wrap: wrap;
    }
.ref-form-submit {
      background: var(--yellow);
      color: var(--ink);
      font-family: var(--font);
      font-weight: 600;
      font-size: 15px;
      padding: 14px 28px;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      transition: transform 0.2s ease;
    }
.ref-form-submit:hover { transform: translateY(-2px); }
.ref-form-submit .arrow {
      display: inline-block;
      margin-left: 4px;
    }
.ref-form-policy {
      font-size: 12px;
      color: rgba(255,255,255,0.6);
      line-height: 1.4;
    }
.ref-form-policy a {
      color: rgba(255,255,255,0.85);
      text-decoration: underline;
    }
.ref-item.is-wide:hover {
      background: rgba(245, 197, 24, 0.12);
      border-color: rgba(245, 197, 24, 0.5);
    }
.ref-item.is-wide .ref-mono {
      background: rgba(245, 197, 24, 0.18);
      border-color: rgba(245, 197, 24, 0.4);
      color: var(--ink);
    }
/* Treść poziomego kafla rozkłada się elastyczniej */
    .ref-item.is-wide .ref-item-quote {
      font-size: 17px;
      line-height: 1.55;
      max-width: 720px;
    }
/* Mobile - wszystko na 1 kolumnie, anulujemy span */
    @media (max-width: 760px) {
      .ref-item.is-wide {
        grid-column: span 1;
      }
      .ref-item.is-wide .ref-item-quote {
        font-size: 15px;
      }
    }
.ref-item.is-wide.is-blue:hover {
      background: rgba(67, 56, 202, 0.10);
      border-color: rgba(67, 56, 202, 0.4);
    }
.ref-item.is-wide.is-blue .ref-mono {
      background: rgba(67, 56, 202, 0.12);
      border-color: rgba(67, 56, 202, 0.3);
      color: var(--indigo);
    }
.ref-hero-h1 {
      font-size: 56px;
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: var(--ink);
      max-width: 780px;
      margin: 0 0 22px;
      text-wrap: balance;
    }
.ref-hero-sub-2 {
      margin-top: 12px;
    }
.ref-mono {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--paper-2);
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font);
      font-weight: 700;
      font-size: 16px;
      color: var(--indigo);
      letter-spacing: 0.02em;
      flex-shrink: 0;
      transition: background 0.2s ease, border-color 0.2s ease;
    }
.ref-logo-mini {
      width: 130px;
      height: 52px;
      border-radius: 6px;
      background: var(--paper);
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      flex-shrink: 0;
      transition: border-color 0.2s ease, background 0.2s ease;
    }
.ref-logo-mini img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      display: block;
    }
.ref-item:hover .ref-logo-mini {
      border-color: var(--indigo);
    }
/* ===== Mobile ===== */
    @media (max-width: 980px) {
      .ref-hero-h1 {
        font-size: 36px;
      }
      .ref-hero {
        padding: 36px 18px 44px;
      }
      .ref-section {
        padding: 48px 18px;
      }
      .ref-cta {
        padding: 48px 18px 56px;
      }
      .ref-cta h2 {
        font-size: 28px;
      }
      .ref-form {
        padding: 24px 18px;
      }
      .ref-form-row {
        grid-template-columns: 1fr;
        gap: 0;
      }
      .ref-form-row .ref-form-field {
        margin-bottom: 16px;
      }
    }
/* Grid: 1 kol na małych telefonach, 2 kol na tabletach i średnich ekranach, 3 kol >1280 */
    @media (max-width: 599px) {
      .ref-grid-3 {
        grid-template-columns: 1fr;
      }
    }
@media (min-width: 600px) and (max-width: 1280px) {
      .ref-grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
/* ===== Toggle "Pokaż więcej" - aktywny tylko na mobile (≤980px) ===== */
    /* Desktop: button ukryty, wszystkie karty widoczne */
    .ref-show-more {
      display: none;
    }
/* Mobile: button widoczny, karty extra ukryte do momentu kliknięcia */
    @media (max-width: 980px) {
      .ref-item-extra {
        display: none;
      }
      .ref-show-more {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--paper);
        border: 1.5px solid var(--ink);
        border-radius: 999px;
        padding: 16px 24px;
        font-family: var(--font);
        font-weight: 600;
        font-size: 15px;
        color: var(--ink);
        cursor: pointer;
        margin: 8px 0;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
      }
      .ref-show-more:hover,
      .ref-show-more:focus-visible {
        background: var(--ink);
        color: var(--paper);
        outline: none;
      }
      .ref-show-more:focus-visible {
        outline: 2px solid var(--indigo);
        outline-offset: 3px;
      }
      .ref-show-more-count {
        font-family: var(--mono);
        font-weight: 500;
        opacity: 0.7;
      }
      /* Stan rozwinięty: button znika, karty pokazują się */
      .ref-show-more[aria-expanded="true"] {
        display: none;
      }
      .ref-show-more[aria-expanded="true"] ~ .ref-item-extra,
      .ref-grid-3.is-expanded .ref-item-extra {
        display: flex;
      }
    }
@media (max-width: 600px) {
      .pill-check-group,
      .pill-check-group-4 {
        grid-template-columns: 1fr;
      }
    }
.pill-check input[type="checkbox"], .pill-check input[type="radio"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
.pill-check input[type="checkbox"]:checked + .pill-check-label, .pill-check input[type="radio"]:checked + .pill-check-label {
      background: var(--ink);
      border-color: var(--ink);
      color: var(--paper);
    }
.pill-check input[type="checkbox"]:focus-visible + .pill-check-label, .pill-check input[type="radio"]:focus-visible + .pill-check-label {
      outline: 2px solid var(--indigo);
      outline-offset: 2px;
    }
/* ===== Wstawki przerywające grid referencji ===== */
    /* Stat-kafel: 1 kolumna, jasne tło, duża liczba */
    
    
    
    
    
    
    
    

    /* Featured cytat: pełna szerokość (3 kolumny), yellow tło */
    
    

    /* ===== Bento - poziomy kafel 2×1 (zajmuje 2 kolumny) ===== */
/* Wide kafle - subtelne yellow tło + akcent */
    .ref-item.is-wide {
      grid-column: span 2;
      background: rgba(245, 197, 24, 0.08);
      border-color: rgba(245, 197, 24, 0.3);
    }
/* ===== Info-bar (subtelne przełamanie w gridzie - link do case studies) ===== */
    
    
    

    /* ===== Button "Pokaż wszystkie referencje" ===== */
    
    

    /* Ukryta część - display:contents pozwala dzieciom wpasować się w grid */
    

    /* Wide kafel - wariant niebieski (indigo) */
    .ref-item.is-wide.is-blue {
      background: rgba(67, 56, 202, 0.06);
      border-color: rgba(67, 56, 202, 0.2);
    }
/* 02-uslugi-google-ads.css */
.pillar-card h3 {
      font-size: 26px;
      margin-bottom: 14px;
      min-height: calc(26px * 1.2 * 2);
    }
/* ===== Stats bar ===== */
    .stats-bar {
      padding: 32px var(--pad-x);
      background: var(--ink);
      color: #fff;
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }
.stats-bar .num {
      font-size: 56px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -.04em;
      color: #fff;
    }
.form-col .body-txt { color: rgba(255,255,255,.85); margin-top: 24px; margin-bottom: 24px; }
/* 1a) STAGGER REVEAL — dzieci sekcji animują się kaskadowo */
    [data-stagger] > *,
    [data-stagger] .grid-2 > *,
    [data-stagger] .grid-3 > *,
    [data-stagger] .check > *,
    [data-stagger] .step,
    [data-stagger] .ref-card,
    [data-stagger] .case-card,
    [data-stagger] .pillar-card,
    [data-stagger] .model-shared-item,
    [data-stagger] .partner-cell,
    [data-stagger] .stats-bar > *,
    [data-stagger] .channels-grid > *,
    [data-stagger] .extras-row > * {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
      transition-delay: calc(var(--i, 0) * 90ms);
      will-change: opacity, transform;
    }
[data-stagger].is-visible > *,
    [data-stagger].is-visible .grid-2 > *,
    [data-stagger].is-visible .grid-3 > *,
    [data-stagger].is-visible .check > *,
    [data-stagger].is-visible .step,
    [data-stagger].is-visible .ref-card,
    [data-stagger].is-visible .case-card,
    [data-stagger].is-visible .pillar-card,
    [data-stagger].is-visible .model-shared-item,
    [data-stagger].is-visible .partner-cell,
    [data-stagger].is-visible .stats-bar > *,
    [data-stagger].is-visible .channels-grid > *,
    [data-stagger].is-visible .extras-row > * {
      opacity: 1;
      transform: translateY(0);
    }
/* ===== Override dla kart modeli na podstronie Współpraca ===== */
    /* Karty są tu większe (więcej treści) → lekko jaśniejsze tło dla czytelności */
    #modele .model-card {
      background: #15171a;
      border-color: #15171a;
    }
#modele .model-fit {
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.1);
    }
/* ===== Hero podstrony (styl referencji) ===== */
    .ref-hero {
      position: relative;
      background: linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
      padding: 80px var(--pad-x) 88px;
      overflow: hidden;
    }
.ref-hero-sub-2 {
      margin-top: 8px;
    }
.ref-hero-stats {
      display: flex;
      gap: 36px;
      margin-top: 32px;
      flex-wrap: wrap;
    }
.ref-stat {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
.ref-stat-num {
      font-size: 28px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1;
    }
/* Wariant z dłuższą frazą zamiast liczby */
    .ref-stat-num.is-text {
      font-size: 17px;
      letter-spacing: -0.01em;
    }
.ref-stat-lab {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
/* ===== Sekcja 3 kanałów głównych ===== */
    .channels-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
.channel-card:hover {
      border-color: var(--indigo);
      transform: translateY(-2px);
    }
.channel-card-num {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 14px;
    }
.channel-card h3 {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: 0 0 10px;
    }
.channel-card-tag {
      display: inline-block;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--indigo);
      background: rgba(57, 9, 243, 0.08);
      padding: 4px 10px;
      border-radius: 999px;
      margin-bottom: 18px;
      align-self: flex-start;
    }
.channel-card p {
      font-size: 14px;
      line-height: 1.6;
      color: var(--muted);
      margin: 0 0 22px;
      flex-grow: 1;
    }
.channel-card-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      color: var(--indigo);
      text-decoration: none;
      align-self: flex-start;
      transition: gap 0.2s ease;
    }
.channel-card-link:hover { gap: 10px; }
.channel-card-link .arrow { transition: transform 0.2s ease; }
.channel-card:hover .channel-card-link .arrow { transform: translateX(2px); }
.channel-card-list {
      list-style: none;
      padding: 0;
      margin: 0 0 22px;
      flex-grow: 1;
    }
.channel-card-list li {
      font-size: 13px;
      line-height: 1.5;
      color: var(--ink);
      padding: 8px 0;
      border-top: 1px solid var(--line);
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
.channel-card-list li::before {
      content: "→";
      color: var(--indigo);
      font-weight: 700;
      flex-shrink: 0;
    }
.channel-card-foot {
      border-top: 1px solid var(--line);
      padding-top: 16px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
    }
/* ===== Sekcja pozostałe usługi ===== */
    .extras-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 24px;
    }
.extra-item {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 22px 20px;
      transition: border-color 0.2s ease;
    }
.extra-item:hover {
      border-color: var(--indigo);
    }
.extra-item h4 {
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      margin: 0 0 6px;
    }
.extra-item p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
      margin: 0;
    }
/* ===== Mobile - hero/kanaly/extras ===== */
    @media (max-width: 980px) {
      .ref-hero {
        padding: 36px 18px 44px;
      }
      .ref-hero-h1 {
        font-size: 40px;
      }
      .channels-grid {
        grid-template-columns: 1fr;
      }
      .extras-row {
        grid-template-columns: 1fr;
      }
    }
.pill-check-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
.pill-check {
      position: relative;
    }
.pill-check-label {
      display: inline-block;
      padding: 10px 16px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
    }
.ref-card {
      background: #fff;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      min-height: 280px;
    }
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("4de02569-2a74-45b4-9e75-7ced8998f1a5") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("72994c69-0fbd-43e9-a4a0-761498a3ee7a") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("7103e387-f983-4b49-ad1c-e6a75476df89") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("7eebb49b-2928-45ac-9c25-bba9c6521b11") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("ad8871ef-a66d-4714-947a-1af3a9cb0a1e") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("e7b0b348-fe49-41c1-b1f9-e3ce9a5469a2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4de02569-2a74-45b4-9e75-7ced8998f1a5") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("72994c69-0fbd-43e9-a4a0-761498a3ee7a") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("7103e387-f983-4b49-ad1c-e6a75476df89") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("7eebb49b-2928-45ac-9c25-bba9c6521b11") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("ad8871ef-a66d-4714-947a-1af3a9cb0a1e") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("e7b0b348-fe49-41c1-b1f9-e3ce9a5469a2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fa803263-1fee-4668-8ae3-9eb90e96b6ba") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("d7129f9e-ece6-447a-ab15-83c7d8ff76a3") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("18df5f54-0416-4f34-a4e8-bce83c38972d") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("7bf02dc6-78ae-49d7-9e5e-64f776b7152f") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("0c936f39-5de1-4585-847d-5d38bb67d7e4") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("a970d0d7-3b43-40cd-9565-4388a39142bb") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("760a917c-c5b7-4179-8cfb-cfa7560f6a75") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("cf21a67b-95d9-4d63-834f-0458557f1a7e") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("e6ab3c10-5b03-4f76-afff-93347b702095") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("04f22482-ec4f-4b44-9d47-6c589a7836ac") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("13d9172a-bc26-4619-9045-1ccd5486568d") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("2c417072-6a0c-46a9-b2a3-7f5e47fb9b47") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("bc963f03-f95f-4cd8-bdfc-fa330d149d7b") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("0d2bb134-3505-4c53-a9de-0dffb1dd21b7") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("9891df11-f55c-4632-b989-7e843f2b41fb") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("0e712e34-ed39-4539-933d-0a550bba9f95") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("2ae4c6d9-d945-4e7e-906c-37bab7161125") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("0f86815a-94c7-4b64-9f7a-d1c23c08f6a0") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.channel-card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      transition: border-color 0.2s ease, transform 0.2s ease;
    }
/* Stopka sekcji kanałów - wzmianka o pozostałych usługach */
    .channels-foot {
      margin-top: 48px;
      padding-top: 32px;
      border-top: 1px solid var(--line);
      font-size: 16px;
      line-height: 1.6;
      color: var(--ink);
    }
.channels-foot-label {
      display: inline-block;
      width: 28px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 50%;
      font-family: var(--mono);
      font-weight: 700;
      font-size: 16px;
      color: var(--indigo);
      margin-right: 12px;
      vertical-align: middle;
    }
.extra-icon {
      color: var(--indigo);
      margin-bottom: 14px;
      display: block;
    }
/* hCaptcha widget styling */
    .h-captcha {
      transform: scale(0.95);
      transform-origin: 0 0;
    }
/* === Sekcje TOFU/MOFU/BOFU: lejek po lewej + treść po prawej === */
    @media (max-width: 900px) {
      .funnel-stage {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 28px !important;
      }
      .funnel-stage .mini-funnel-wrap {
        position: static !important;
        max-width: 220px;
        margin: 0 auto;
      }
    }
/* Skip link dla a11y - widoczny tylko po fokusie klawiatury */
    .skip-link {
      position: absolute;
      top: -100px;
      left: 0;
      background: var(--ink);
      color: #fff;
      padding: 12px 18px;
      text-decoration: none;
      font-weight: 600;
      font-size: 14px;
      z-index: 9999;
      border-radius: 0 0 8px 0;
      transition: top 0.2s;
    }
.skip-link:focus {
      top: 0;
      outline: 2px solid var(--yellow);
      outline-offset: 2px;
    }
/* === Karty PLA (Google Shopping) w sekcji 02 Duplikaty === */
    .pla-sponsored {
      font-size: 12px;
      color: rgba(0,0,0,.5);
      margin-bottom: 12px;
      font-family: arial, ui-sans-serif, system-ui, sans-serif;
    }
.pla-grid-prod {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
.pla-card-prod {
      background: #fff;
      border: 1px solid rgba(0,0,0,.12);
      border-radius: 10px;
      padding: 10px;
      font-family: arial, ui-sans-serif, system-ui, sans-serif;
    }
.pla-photo-prod {
      background: #f3f4f6;
      border-radius: 6px;
      aspect-ratio: 146/120;
      overflow: hidden;
      margin-bottom: 12px;
    }
.pla-photo-prod img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
.pla-title-callout {
      position: relative;
      background: #fbd84a;
      border-radius: 7px;
      padding: 12px 10px 9px;
      margin: 4px 0 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,.06);
      border: 1px solid rgba(0,0,0,.05);
    }
.pla-variant-badge {
      position: absolute;
      top: -8px;
      left: 10px;
      background: #1d1d1b;
      color: #fff;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.12em;
      padding: 3px 7px;
      border-radius: 3px;
      font-weight: 700;
    }
.pla-phrase {
      font-size: 12px;
      font-weight: 600;
      color: #1d1d1b;
      line-height: 1.3;
    }
.pla-price {
      font-size: 15px;
      font-weight: 700;
      color: #1d1d1b;
      margin: 0 0 2px;
    }
.pla-shop-name {
      font-size: 12px;
      color: rgba(0,0,0,.7);
      margin: 0 0 2px;
    }
.pla-shipping {
      font-size: 11px;
      color: rgba(0,0,0,.55);
      margin: 0 0 4px;
    }
.pla-stars {
      font-size: 11px;
      color: #fbbf24;
      margin: 0 0 3px;
      line-height: 1;
    }
.pla-star-half {
      background: linear-gradient(90deg, #fbbf24 50%, rgba(0,0,0,.15) 50%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
.pla-rev-count {
      font-size: 10px;
      color: rgba(0,0,0,.55);
      margin-left: 4px;
      -webkit-text-fill-color: rgba(0,0,0,.55);
    }
.pla-via {
      font-size: 11px;
      color: #1a73e8;
      margin: 3px 0 0;
      cursor: pointer;
    }
.pla-via:hover { text-decoration: underline; }
@media (max-width: 900px) {
      .pla-grid-prod {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 320px;
        margin: 0 auto;
      }
      .approach-item {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 36px 0 !important;
      }
    }
/* 02-uslugi.css */
.pillar-card h3 {
      font-size: 26px;
      margin-bottom: 14px;
      min-height: calc(26px * 1.2 * 2);
    }
/* ===== Stats bar ===== */
    .stats-bar {
      padding: 32px var(--pad-x);
      background: var(--ink);
      color: #fff;
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }
.stats-bar .num {
      font-size: 56px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -.04em;
      color: #fff;
    }
.form-col .body-txt { color: rgba(255,255,255,.85); margin-top: 24px; margin-bottom: 24px; }
/* 1a) STAGGER REVEAL — dzieci sekcji animują się kaskadowo */
    [data-stagger] > *,
    [data-stagger] .grid-2 > *,
    [data-stagger] .grid-3 > *,
    [data-stagger] .check > *,
    [data-stagger] .step,
    [data-stagger] .ref-card,
    [data-stagger] .case-card,
    [data-stagger] .pillar-card,
    [data-stagger] .model-shared-item,
    [data-stagger] .partner-cell,
    [data-stagger] .stats-bar > *,
    [data-stagger] .channels-grid > *,
    [data-stagger] .extras-row > * {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
      transition-delay: calc(var(--i, 0) * 90ms);
      will-change: opacity, transform;
    }
[data-stagger].is-visible > *,
    [data-stagger].is-visible .grid-2 > *,
    [data-stagger].is-visible .grid-3 > *,
    [data-stagger].is-visible .check > *,
    [data-stagger].is-visible .step,
    [data-stagger].is-visible .ref-card,
    [data-stagger].is-visible .case-card,
    [data-stagger].is-visible .pillar-card,
    [data-stagger].is-visible .model-shared-item,
    [data-stagger].is-visible .partner-cell,
    [data-stagger].is-visible .stats-bar > *,
    [data-stagger].is-visible .channels-grid > *,
    [data-stagger].is-visible .extras-row > * {
      opacity: 1;
      transform: translateY(0);
    }
/* ===== Override dla kart modeli na podstronie Współpraca ===== */
    /* Karty są tu większe (więcej treści) → lekko jaśniejsze tło dla czytelności */
    #modele .model-card {
      background: #15171a;
      border-color: #15171a;
    }
#modele .model-fit {
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.1);
    }
/* ===== Hero podstrony (styl referencji) ===== */
    .ref-hero {
      position: relative;
      background: linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
      padding: 80px var(--pad-x) 88px;
      overflow: hidden;
    }
.ref-hero-sub-2 {
      margin-top: 8px;
    }
.ref-hero-stats {
      display: flex;
      gap: 36px;
      margin-top: 32px;
      flex-wrap: wrap;
    }
.ref-stat {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
.ref-stat-num {
      font-size: 28px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1;
    }
/* Wariant z dłuższą frazą zamiast liczby */
    .ref-stat-num.is-text {
      font-size: 17px;
      letter-spacing: -0.01em;
    }
.ref-stat-lab {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
/* ===== Sekcja 3 kanałów głównych ===== */
    .channels-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
.channel-card:hover {
      border-color: var(--indigo);
      transform: translateY(-2px);
    }
.channel-card-num {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 14px;
    }
.channel-card h3 {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: 0 0 10px;
    }
.channel-card-tag {
      display: inline-block;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--indigo);
      background: rgba(57, 9, 243, 0.08);
      padding: 4px 10px;
      border-radius: 999px;
      margin-bottom: 18px;
      align-self: flex-start;
    }
.channel-card p {
      font-size: 14px;
      line-height: 1.6;
      color: var(--muted);
      margin: 0 0 22px;
      flex-grow: 1;
    }
.channel-card-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      color: var(--indigo);
      text-decoration: none;
      align-self: flex-start;
      transition: gap 0.2s ease;
    }
.channel-card-link:hover { gap: 10px; }
.channel-card-link .arrow { transition: transform 0.2s ease; }
.channel-card:hover .channel-card-link .arrow { transform: translateX(2px); }
.channel-card-list {
      list-style: none;
      padding: 0;
      margin: 0 0 22px;
      flex-grow: 1;
    }
.channel-card-list li {
      font-size: 13px;
      line-height: 1.5;
      color: var(--ink);
      padding: 8px 0;
      border-top: 1px solid var(--line);
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
.channel-card-list li::before {
      content: "→";
      color: var(--indigo);
      font-weight: 700;
      flex-shrink: 0;
    }
.channel-card-foot {
      border-top: 1px solid var(--line);
      padding-top: 16px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
    }
/* ===== Sekcja pozostałe usługi ===== */
    .extras-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 24px;
    }
.extra-item {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 22px 20px;
      transition: border-color 0.2s ease;
    }
.extra-item:hover {
      border-color: var(--indigo);
    }
.extra-item h4 {
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      margin: 0 0 6px;
    }
.extra-item p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
      margin: 0;
    }
/* ===== Mobile - hero/kanaly/extras ===== */
    @media (max-width: 980px) {
      .ref-hero {
        padding: 36px 18px 44px;
      }
      .ref-hero-h1 {
        font-size: 40px;
      }
      .channels-grid {
        grid-template-columns: 1fr;
      }
      .extras-row {
        grid-template-columns: 1fr;
      }
    }
.pill-check {
      position: relative;
    }
.ref-card {
      background: #fff;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      min-height: 280px;
    }
.channel-card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      transition: border-color 0.2s ease, transform 0.2s ease;
    }
/* Stopka sekcji kanałów - wzmianka o pozostałych usługach */
    .channels-foot {
      margin-top: 48px;
      padding-top: 32px;
      border-top: 1px solid var(--line);
      font-size: 16px;
      line-height: 1.6;
      color: var(--ink);
    }
.channels-foot-label {
      display: inline-block;
      width: 28px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 50%;
      font-family: var(--mono);
      font-weight: 700;
      font-size: 16px;
      color: var(--indigo);
      margin-right: 12px;
      vertical-align: middle;
    }
/* hCaptcha widget styling */
    .h-captcha {
      transform: scale(0.95);
      transform-origin: 0 0;
    }
.pill-check-group {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
@media (max-width: 560px) {
      .pill-check-group { grid-template-columns: repeat(2, 1fr); }
    }
.pill-check-label {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 12px 16px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
      text-align: center;
    }
/* =========================================================
       USLUGI V2 — hero tiles, proof bar, channel color variants,
       process timeline
       ========================================================= */

    /* Hero z mini-kafelkami po prawej */
    .ref-hero--with-tiles {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 56px;
      align-items: start;
    }
.ref-hero--with-tiles .ref-hero-inner { max-width: none; }
.ref-hero-tiles {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-self: stretch;
    }
.hero-tile {
      display: grid;
      grid-template-columns: auto 1fr auto;
      grid-template-rows: auto auto;
      grid-template-areas:
        "num name kpi"
        "num meta kpi";
      align-items: center;
      gap: 4px 18px;
      padding: 22px 24px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: #fff;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
.hero-tile:hover { transform: translateX(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.06); }
.hero-tile-num {
      grid-area: num;
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      opacity: .55;
      align-self: start;
      padding-top: 2px;
    }
.hero-tile-name {
      grid-area: name;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
.hero-tile-meta {
      grid-area: meta;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      opacity: .65;
    }
.hero-tile-kpi {
      grid-area: kpi;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      text-align: right;
      gap: 2px;
    }
.hero-tile-kpi-num {
      font-size: 26px;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1;
    }
.hero-tile-kpi-lab {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      opacity: .6;
      max-width: 140px;
      line-height: 1.3;
    }
/* Neutralne kafelki z kolorowym lewym akcentem (zamiast pełnych tła) */
    .hero-tile { border-left: 3px solid var(--line); }
.hero-tile--yellow { border-left-color: var(--yellow); }
.hero-tile--indigo { border-left-color: var(--indigo); }
.hero-tile--ink { border-left-color: var(--ink); }
.hero-tile--yellow .hero-tile-kpi-num { color: #b08a00; }
.hero-tile--indigo .hero-tile-kpi-num { color: var(--indigo); }
.hero-tile--ink .hero-tile-kpi-num { color: var(--ink); }
/* Proof bar — cienki ciemny pas pod hero */
    .services-proof {
      background: var(--ink);
      color: #fff;
      padding: 26px var(--pad-x);
    }
.services-proof-inner {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
      align-items: center;
    }
.services-proof-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      border-left: 1px solid rgba(255,255,255,.12);
      padding-left: 20px;
    }
.services-proof-item:first-child { border-left: 0; padding-left: 0; }
.sp-num {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1;
    }
.sp-num.accent-yellow { color: var(--yellow); }
.sp-lab {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,.6);
      line-height: 1.4;
    }
/* Hero specjalizacje — logotypy w linii */
    .ref-hero-channels {
      margin-top: 36px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
.ref-hero-channels-lab {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
    }
.ref-hero-channels-list {
      display: flex;
      flex-wrap: wrap;
      gap: 22px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
.ref-hero-channels-list li {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -0.005em;
    }
.ref-hero-channel-logo svg { display: block; }
.channel-card-head {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 14px;
      margin-bottom: 14px;
    }
.channel-card-head h3 {
      margin: 0;
    }
.channel-card-head .channel-card-num { margin-bottom: 0; }
.channel-card-logo { display: flex; align-items: center; }
.channel-card-logo svg { display: block; }
/* (usunięto kolorowe warianty kart kanałów — zastąpione logotypami) */

    /* Process timeline */
    .process-timeline {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-top: 24px;
      counter-reset: pt;
    }
.process-step {
      padding: 28px 24px 28px 28px;
      border: 1px solid var(--line);
      border-right: 0;
      background: var(--paper);
      position: relative;
      counter-increment: pt;
    }
.process-step:last-child { border-right: 1px solid var(--line); }
.process-step::before {
      content: counter(pt, decimal-leading-zero);
      position: absolute;
      top: 16px;
      right: 18px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      color: var(--muted);
      opacity: .7;
    }
.process-step-when {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--indigo);
      margin-bottom: 14px;
    }
.process-step h4 {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.25;
      margin: 0 0 10px;
    }
.process-step p {
      font-size: 13px;
      line-height: 1.55;
      color: var(--muted);
      margin: 0;
    }
.process-step--accent {
      background: var(--yellow);
      border-color: var(--yellow);
    }
.process-step--accent .process-step-when { color: var(--ink); opacity: .8; }
.process-step--accent::before { color: var(--ink); }
.process-step--accent p { color: var(--ink); opacity: .85; }
/* Mobile pass dla nowych elementów */
    @media (max-width: 980px) {
      .ref-hero--with-tiles {
        grid-template-columns: 1fr;
        gap: 28px;
      }
      .services-proof-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 24px;
      }
      .services-proof-item:nth-child(odd) { border-left: 0; padding-left: 0; }
      .process-timeline {
        grid-template-columns: 1fr;
      }
      .process-step {
        border-right: 1px solid var(--line);
        border-bottom: 0;
      }
      .process-step:last-child { border-bottom: 1px solid var(--line); }
    }
@media (max-width: 720px) {
      .hero-tile {
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "num kpi"
          "name kpi"
          "meta kpi";
        gap: 2px 16px;
      }
      .hero-tile-kpi-num { font-size: 22px; }
      .hero-tile-kpi-lab { max-width: 100px; font-size: 9px; }
      .sp-num { font-size: 22px; }
    }
/* Funnel responsive: stack on mobile */
    @media (max-width: 768px) {
      .funnel-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
      }
      .funnel-grid > div:last-child {
        padding-left: 28px !important;
        min-height: auto !important;
      }
    }
/* === Lejek: scroll-linked parallax === */
    #hub-funnel .fnl-tier {
      will-change: transform;
      transition: transform 0.1s linear;
    }
/* Szanuj preferencje użytkownika - bez animacji jeśli wyłączono */
    @media (prefers-reduced-motion: reduce) {
      #hub-funnel .fnl-tier { transition: none !important; transform: none !important; }
    }
/* === Sekcja "Co odróżnia naszą pracę" — bloki narracyjne === */
    .approach-stack {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }
.approach-block {
      display: grid;
      grid-template-columns: minmax(220px, 280px) 1fr;
      gap: 48px;
      align-items: flex-start;
      padding: 32px 36px;
      background: #fff;
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 16px;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
.approach-block:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(0,0,0,.06);
      border-color: rgba(57,9,243,.25);
    }
.approach-fact {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding-right: 36px;
      border-right: 1px solid rgba(0,0,0,.08);
      min-height: 100%;
    }
.approach-fact-label {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(0,0,0,.55);
    }
.approach-fact-num {
      font-family: var(--font, system-ui, sans-serif);
      font-size: clamp(22px, 2.4vw, 28px);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -.01em;
      color: #1d1d1b;
      margin-top: 4px;
      background: linear-gradient(135deg, #1d1d1b 0%, #3909f3 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
.approach-fact-sub {
      font-size: 13px;
      line-height: 1.55;
      color: rgba(0,0,0,.6);
      margin-top: 8px;
      max-width: 240px;
    }
.approach-body h3 {
      margin: 0 0 14px;
    }
.approach-body .body-txt {
      margin: 0;
    }
@media (max-width: 768px) {
      .approach-block {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px;
      }
      .approach-fact {
        padding-right: 0;
        padding-bottom: 20px;
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,.08);
      }
      .approach-fact-sub {
        max-width: none;
      }
    }
/* 02-wspolpraca.css */
body {
      font-family: var(--font);
      color: var(--ink);
      font-size: 14px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }
.form-col .body-txt { color: rgba(255,255,255,.85); margin-top: 24px; margin-bottom: 24px; }
/* 1a) STAGGER REVEAL — dzieci sekcji animują się kaskadowo */
    [data-stagger] > *,
    [data-stagger] .grid-2 > *,
    [data-stagger] .grid-3 > *,
    [data-stagger] .check > *,
    [data-stagger] .step,
    [data-stagger] .ref-card,
    [data-stagger] .case-card,
    [data-stagger] .pillar-card,
    [data-stagger] .model-shared-item,
    [data-stagger] .partner-cell,
    [data-stagger] .stats-bar > *,
    [data-stagger] .channels-grid > *,
    [data-stagger] .extras-row > * {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
      transition-delay: calc(var(--i, 0) * 90ms);
      will-change: opacity, transform;
    }
[data-stagger].is-visible > *,
    [data-stagger].is-visible .grid-2 > *,
    [data-stagger].is-visible .grid-3 > *,
    [data-stagger].is-visible .check > *,
    [data-stagger].is-visible .step,
    [data-stagger].is-visible .ref-card,
    [data-stagger].is-visible .case-card,
    [data-stagger].is-visible .pillar-card,
    [data-stagger].is-visible .model-shared-item,
    [data-stagger].is-visible .partner-cell,
    [data-stagger].is-visible .stats-bar > *,
    [data-stagger].is-visible .channels-grid > *,
    [data-stagger].is-visible .extras-row > * {
      opacity: 1;
      transform: translateY(0);
    }
/* ===== Hero podstrony (styl referencji) ===== */
    .ref-hero {
      position: relative;
      background: linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
      padding: 80px var(--pad-x) 88px;
      overflow: hidden;
    }
.ref-hero-stats {
      display: flex;
      gap: 36px;
      margin-top: 32px;
      flex-wrap: wrap;
    }
.ref-stat {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
.ref-stat-num {
      font-size: 28px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1;
    }
/* Wariant z dłuższą frazą zamiast liczby */
    .ref-stat-num.is-text {
      font-size: 17px;
      letter-spacing: -0.01em;
    }
.ref-stat-lab {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
.channel-card-list li {
      font-size: 13px;
      line-height: 1.5;
      color: var(--ink);
      padding: 8px 0;
      border-top: 1px solid var(--line);
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
.channel-card-list li::before {
      content: "→";
      color: var(--indigo);
      font-weight: 700;
      flex-shrink: 0;
    }
.channel-card-foot {
      border-top: 1px solid var(--line);
      padding-top: 16px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
    }
.nav-burger span {
      display: block;
      width: 20px; height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: transform .25s ease, opacity .2s ease;
    }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-drawer {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 999;
      background: rgba(11, 11, 12, 0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
    }
.nav-drawer.is-open { opacity: 1; pointer-events: auto; }
.nav-drawer-inner {
      position: absolute;
      top: 64px; left: 12px; right: 12px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      transform: translateY(-12px);
      transition: transform .3s cubic-bezier(.2,.7,.2,1);
      box-shadow: 0 24px 60px rgba(0,0,0,.18);
    }
.nav-drawer.is-open .nav-drawer-inner { transform: translateY(0); }
.nav-drawer-inner a {
      display: block;
      padding: 14px 16px;
      font-size: 16px;
      font-weight: 500;
      color: var(--ink);
      border-radius: 10px;
      transition: background .15s ease;
    }
.nav-drawer-inner a:hover,
    .nav-drawer-inner a:focus { background: rgba(0,0,0,.04); }
.nav-drawer-inner .nav-drawer-cta {
      margin-top: 8px;
      background: var(--ink);
      color: var(--paper);
      text-align: center;
      border-radius: 999px;
      padding: 14px 18px;
    }
.nav-drawer-inner .nav-drawer-cta:hover { background: var(--indigo); }
body.no-scroll { overflow: hidden; }
@media (max-width: 1080px) {
      .nav-burger { display: flex; }
      .nav .cta { display: none; }
    }
@media (max-width: 600px) {
      .pill-check-group {
        grid-template-columns: repeat(2, 1fr);
      }
    }
/* ===== Logo stripe ===== */
    /* ===== Pillars ===== */
    .row-between {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 40px;
    }
/* ===== Stats bar ===== */
    /* ===== Diagnosis ===== */
    .diag { position: relative; overflow: hidden; }
/* ===== Cases ===== */
    .case-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 18px;
    }
/* ===== Process ===== */
    /* ===== Models ===== */
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; }
/* ===== Responsive ===== */
    @media (max-width: 1080px) {
      .h1 { font-size: 52px; }
      .h2 { font-size: 36px; }
      .nav-items { display: none; }
      .hero-grid,
      .grid-3,
      .grid-2,
      .trust-grid,
      .hero-grid > :nth-child(2) { justify-self: stretch; max-width: none; }
    }
@media (max-width: 720px) {
      :root { --pad-x: 24px; }
      .h1 { font-size: 40px; }
      .h2 { font-size: 30px; }
      .section { padding: 56px var(--pad-x); }
      .hero-grid,
      .grid-3,
      .grid-2,
      .trust-grid,
      .row-between { align-items: flex-start; }
      /* Inline max-width helpers - reflow do 100% na mobile */
      .h2[style*="max-width"] { max-width: 100% !important; }
      .body-txt[style*="max-width"] { max-width: 100% !important; }
      .section-head[style*="max-width"] { max-width: 100% !important; }
    }
/* 2) HOVER MICRO na kartach */
    .card,
    /* Wyjątek: model-shared-item nie unosi się — to nie jest karta */
    /* 3) ANIMOWANE GLOW w hero / diag — slow pulse */
    @keyframes glowPulse {
      0%, 100% { opacity: 0.55; transform: translate(0, 0) scale(1); }
      50%       { opacity: 0.85; transform: translate(8px, -6px) scale(1.05); }
    }
/* ===== Model card - sekcja "Dla kogo" ===== */
    .model-fit {
      margin-top: 24px;
      padding: 20px 22px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 8px;
    }
/* ===== Override dla kart modeli na podstronie Współpraca ===== */
    /* Karty są tu większe (więcej treści) → lekko jaśniejsze tło dla czytelności */
    #modele .model-card {
      background: #15171a;
      border-color: #15171a;
      display: flex;
      flex-direction: column;
    }
#modele .model-fit {
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.1);
      flex: 1;
      display: flex;
      flex-direction: column;
    }
.ref-hero-sub-3 {
      margin-top: 8px;
    }
/* ===== Sekcja 3 kanałów głównych ===== */
    .channel-card-list {
      list-style: none;
      padding: 0;
      margin: 0 0 22px;
      flex-grow: 1;
    }
/* ===== Sekcja pozostałe usługi ===== */
    /* ===== Mobile - hero/kanaly/extras ===== */
    @media (max-width: 980px) {
      .ref-hero {
        padding: 36px 18px 44px;
      }
      .ref-hero-h1 {
        font-size: 40px;
      }
    }
/* ===== Channel brand marks (kolorowe SVG na kartach kanałów) ===== */
    /* ===== Model rozliczeń - ciemne karty z badge ===== */
    .model-card {
      padding: 28px;
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
      position: relative;
      overflow: visible;
    }
.model-card-featured {
      border-color: var(--yellow);
      box-shadow: 0 0 0 1px var(--yellow);
    }
.model-recommend-badge {
      position: absolute;
      top: -14px;
      right: 24px;
      background: var(--yellow);
      color: var(--ink);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 6px 12px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      z-index: 2;
    }
.model-recommend-badge::before {
      content: '★';
      font-size: 12px;
      line-height: 1;
    }
.model-fit {
      margin-top: 24px;
      padding: 20px 22px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 8px;
    }
.model-fit-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
.model-fit-list li {
      font-size: 14px;
      line-height: 1.5;
      color: rgba(255,255,255,.85);
      padding-left: 18px;
      position: relative;
    }
.model-fit-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 8px;
      width: 8px;
      height: 8px;
      background: var(--yellow);
      border-radius: 2px;
    }
/* ===== Zasady - rules-grid z dużymi numerami ===== */
    .rules-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin-top: 40px;
      align-items: stretch;
    }
.rule-cell {
      position: relative;
      padding: 28px 32px 32px;
      overflow: hidden;
      border-left: 1px solid rgba(255,255,255,.06);
    }
.rule-cell:first-child { border-left: none; padding-left: 0; }
.rule-cell:last-child { padding-right: 0; }
.rule-cell::before {
      content: attr(data-bignum);
      position: absolute;
      top: -36px;
      right: -10px;
      font-family: var(--font);
      font-weight: 900;
      font-size: 220px;
      line-height: 0.85;
      letter-spacing: -0.06em;
      color: var(--yellow);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
      pointer-events: none;
      z-index: 0;
    }
.rule-cell.is-active::before {
      opacity: 0.12;
      transform: translateY(0);
    }
.rule-cell h3,
    .rule-cell p { position: relative; z-index: 1; }
@media (max-width: 760px) {
      .rules-grid { grid-template-columns: 1fr; gap: 32px; }
      .rule-cell { border-left: none; padding: 24px 0; }
      .rule-cell::before { font-size: 140px; top: -20px; right: 0; }
    }
/* ===== Timeline - oś czasu w procesie ===== */
    /* ===== Mobile nav: burger + drawer ===== */
    .nav-burger {
      display: none;
      width: 44px; height: 44px;
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 0;
      cursor: pointer;
      position: relative;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
    }
/* ===== Nota o pozostałych usługach pod modelami ===== */
    .model-extras-note {
      margin-top: 28px;
      padding: 14px 18px;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 10px;
      font-size: 13.5px;
      color: var(--muted);
      max-width: 720px;
    }
.model-extras-note b { color: var(--ink); font-weight: 600; }
/* ===== 90-day timeline (4 kafelki) ===== */
    .ninety-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-top: 40px;
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      background: var(--paper);
    }
.ninety-cell {
      position: relative;
      padding: 28px 26px 30px;
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: var(--paper);
    }
.ninety-cell:last-child { border-right: none; }
.ninety-cell.is-accent {
      background: var(--yellow);
      color: var(--ink);
    }
.ninety-cell .ninety-num {
      position: absolute;
      top: 14px;
      right: 18px;
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      color: var(--muted);
    }
.ninety-cell.is-accent .ninety-num { color: rgba(0,0,0,.55); }
.ninety-cell .ninety-tag {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--indigo);
    }
.ninety-cell.is-accent .ninety-tag { color: var(--ink); }
.ninety-cell .ninety-title {
      font-weight: 700;
      font-size: 18px;
      line-height: 1.25;
      letter-spacing: -0.01em;
      margin: 2px 0 4px;
    }
.ninety-cell .ninety-desc {
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--muted);
    }
.ninety-cell.is-accent .ninety-desc { color: var(--ink); opacity: 0.85; }
@media (max-width: 1080px) {
      .ninety-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .ninety-cell:nth-child(2) { border-right: none; }
      .ninety-cell:nth-child(1),
      .ninety-cell:nth-child(2) { border-bottom: 1px solid var(--line); }
    }
@media (max-width: 640px) {
      .ninety-grid { grid-template-columns: 1fr; }
      .ninety-cell {
        border-right: none;
        border-bottom: 1px solid var(--line);
      }
      .ninety-cell:last-child { border-bottom: none; }
    }
/* ===== Footer pod siatką 90 dni ===== */
    .ninety-footer {
      margin-top: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }
.ninety-footer-note {
      font-size: 14px;
      color: var(--muted);
      margin: 0;
      max-width: 480px;
    }
.ninety-footer-note b { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
      .ninety-footer { flex-direction: column; align-items: flex-start; }
    }
/* 03-nav-active.css */
/* Active navigation state — applied to desktop nav links and mobile drawer
 * links with class="is-active". Uses --accent (brand primary) for the
 * underline so it visually pops against the dark/light backgrounds the
 * original layout uses for the top bar.
 */

.nav-items a.is-active {
    color: var(--ink);
    font-weight: 700;
    border-bottom: 3px solid var(--yellow, #f5c313);
    padding-bottom: 4px;
}

.nav-drawer-inner a.is-active {
    color: var(--ink);
    font-weight: 700;
    border-left: 3px solid var(--yellow, #f5c313);
    padding-left: 12px;
}