/* ==========================================================================
   PROCAD – sekcja /ai
   Wszystkie style działają tylko wewnątrz elementów z klasą .pc-ai
   (każda sekcja strony ma tę klasę), więc nie wpływają na resztę serwisu.
   Kolory i odstępy zmienia się w jednym miejscu – w zmiennych poniżej.
   ========================================================================== */

.pc-ai {
  --pc-blue: #0B63C4;
  --pc-blue-dark: #084C96;
  --pc-blue-soft: #EAF3FD;
  --pc-blue-light: #8FC3FF;
  --pc-bg-soft: #F2F7FD;
  --pc-ink: #0E1B2C;
  --pc-text: #2E3F55;
  --pc-muted: #45566B;
  --pc-faint: #5A6B80;
  --pc-line: #DCE5EF;
  --pc-line-strong: #C9D5E3;
  --pc-orange: #C25A0E;
  --pc-orange-text: #9A4A00;
  --pc-orange-soft: #FFF8F2;
  --pc-orange-line: #F2C8A6;
  --pc-green: #1D8A50;
  --pc-green-text: #145C35;
  --pc-green-soft: #E7F6EE;
  --pc-red: #D64545;
  --pc-radius: 12px;
  --pc-wrap: 1200px;
  --pc-sec-pad: 96px;
  --pc-anchor-offset: 110px; /* wysokość przyklejonego nagłówka motywu */

  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--pc-ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.pc-ai *,
.pc-ai *::before,
.pc-ai *::after { box-sizing: border-box; }

/* Reset odstępów dodawanych przez WordPress / motyw – odstępy ustawiamy sami */
.pc-ai .is-layout-flow > *,
.pc-ai .is-layout-constrained > *,
.pc-ai.is-layout-flow > *,
.pc-ai.is-layout-constrained > * { margin-block-start: 0; margin-block-end: 0; }
.pc-ai p,
.pc-ai h1,
.pc-ai h2,
.pc-ai h3,
.pc-ai ol,
.pc-ai ul,
.pc-ai figure,
.pc-ai blockquote { margin: 0; }
.pc-ai h1,
.pc-ai h2,
.pc-ai h3 { font-family: inherit; color: inherit; }
.pc-ai a { color: var(--pc-blue); }
.pc-ai a:hover { color: var(--pc-blue-dark); }
.pc-ai[id],
.pc-ai [id] { scroll-margin-top: var(--pc-anchor-offset); }
/* Motyw klasyczny dodaje wewnątrz grup dodatkowy kontener – robimy go „przezroczystym” dla układu */
.pc-ai .wp-block-group__inner-container,
.pc-ai.wp-block-group > .wp-block-group__inner-container { display: contents; }

/* ---------- Układ ---------- */
.pc-ai.pc-ai-sec { padding: var(--pc-sec-pad) 0; }
.pc-ai.pc-ai-soft { background: var(--pc-bg-soft); }
.pc-ai.pc-ai-white { background: #FFFFFF; }
.pc-ai .pc-ai-wrap { max-width: var(--pc-wrap); margin: 0 auto; padding: 0 24px; }
.pc-ai .pc-ai-stack { display: flex; flex-direction: column; gap: 16px; }
.pc-ai .pc-ai-gap-s { gap: 8px; }
.pc-ai .pc-ai-head { margin-bottom: 40px; }
.pc-ai .pc-ai-head-row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
.pc-ai .pc-ai-head-row > :first-child { flex: 999 1 560px; min-width: 0; }
.pc-ai .pc-ai-g2,
.pc-ai .pc-ai-g3,
.pc-ai .pc-ai-g4 { display: grid; gap: 24px; }
.pc-ai .pc-ai-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc-ai .pc-ai-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc-ai .pc-ai-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pc-ai .pc-ai-mt { margin-top: 24px; }
.pc-ai .pc-ai-mt-l { margin-top: 48px; }

/* Bloki Kolumny (WordPress) – układ niezależny od stylów rdzenia */
.pc-ai .wp-block-columns { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; margin-left: 0; margin-right: 0; }
.pc-ai .wp-block-columns:not(.pc-ai-mt-l) { margin-top: 0; margin-bottom: 0; }
.pc-ai .wp-block-columns.pc-ai-mt-l { margin-top: 48px; margin-bottom: 0; }
.pc-ai .wp-block-column { flex: 1 1 0; min-width: 0; }
.pc-ai .wp-block-column.pc-ai-col-main { flex: 999 1 500px; }
.pc-ai .wp-block-column.pc-ai-col-side { flex: 1 1 420px; }
.pc-ai .pc-ai-cols-top { align-items: flex-start; gap: 40px; }
.pc-ai .wp-block-column.pc-ai-col-checks { flex: 1 1 300px; }
.pc-ai .wp-block-column.pc-ai-col-products { flex: 999 1 600px; }
.pc-ai .wp-block-column.pc-ai-col-text { flex: 1 1 340px; }
.pc-ai .wp-block-column.pc-ai-col-form { flex: 999 1 520px; }

/* ---------- Typografia ---------- */
.pc-ai .pc-ai-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; color: var(--pc-blue); margin-bottom: 14px; }
.pc-ai .pc-ai-eyebrow::before { content: ""; width: 32px; height: 3px; border-radius: 2px; background: currentColor; flex: none; }
.pc-ai .pc-ai-eyebrow.pc-ai-orange { color: var(--pc-orange); }
.pc-ai .pc-ai-eyebrow.pc-ai-on-blue { color: #FFFFFF; }
.pc-ai .pc-ai-h1 { font-size: 64px; line-height: 1.04; font-weight: 900; letter-spacing: -.025em; margin-bottom: 24px; }
.pc-ai .pc-ai-h1 strong { color: var(--pc-blue); font-weight: inherit; }
.pc-ai .pc-ai-h2 { font-size: 42px; line-height: 1.12; font-weight: 900; letter-spacing: -.015em; margin-bottom: 18px; }
.pc-ai .pc-ai-h3 { font-size: 20px; line-height: 1.3; font-weight: 700; }
.pc-ai .pc-ai-h3-l { font-size: 28px; line-height: 1.2; font-weight: 900; letter-spacing: -.01em; margin-bottom: 8px; }
.pc-ai .pc-ai-lead { font-size: 18px; color: var(--pc-muted); max-width: 680px; }
.pc-ai .pc-ai-hero-lead { font-size: 19px; color: var(--pc-muted); max-width: 560px; margin-bottom: 36px; }
.pc-ai .pc-ai-small { font-size: 14px; color: var(--pc-muted); }
.pc-ai .pc-ai-note { font-size: 12px; color: var(--pc-faint); margin-top: 14px; }
.pc-ai .pc-ai-kicker { font-size: 14px; font-weight: 700; color: var(--pc-blue); }
.pc-ai .pc-ai-kicker.pc-ai-orange { color: #B85400; }
.pc-ai .pc-ai-more { font-weight: 500; }
.pc-ai .pc-ai-more a { text-decoration: none; font-weight: 500; }

/* ---------- Przyciski ---------- */
.pc-ai .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.pc-ai .wp-block-button { margin: 0; }
.pc-ai .pc-ai-btn .wp-block-button__link,
.pc-ai .pc-ai-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 6px; border: 1px solid var(--pc-blue);
  background: var(--pc-blue); color: #FFFFFF; font-family: inherit; font-size: 16px; font-weight: 500;
  line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s;
}
.pc-ai .pc-ai-btn .wp-block-button__link:hover,
.pc-ai .pc-ai-button:hover { background: var(--pc-blue-dark); border-color: var(--pc-blue-dark); color: #FFFFFF; }
.pc-ai .pc-ai-btn-line .wp-block-button__link,
.pc-ai .pc-ai-button.pc-ai-button-line { background: #FFFFFF; color: var(--pc-blue); }
.pc-ai .pc-ai-btn-line .wp-block-button__link:hover,
.pc-ai .pc-ai-button.pc-ai-button-line:hover { background: #EEF5FD; color: var(--pc-blue-dark); }
.pc-ai .pc-ai-btn-orange .wp-block-button__link { background: var(--pc-orange); border-color: var(--pc-orange); }
.pc-ai .pc-ai-btn-orange .wp-block-button__link:hover { background: #A44A08; border-color: #A44A08; }
.pc-ai .pc-ai-btn-white .wp-block-button__link { background: #FFFFFF; color: var(--pc-blue); border-color: #FFFFFF; }
.pc-ai :focus-visible { outline: 3px solid var(--pc-blue-light); outline-offset: 2px; }

/* ---------- Karty ---------- */
.pc-ai .pc-ai-card { background: #FFFFFF; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.pc-ai .pc-ai-card.pc-ai-card-s { padding: 18px; gap: 6px; }
.pc-ai .pc-ai-card .pc-ai-push { margin-top: auto; padding-top: 10px; }
.pc-ai .pc-ai-card .pc-ai-meta { margin-top: auto; padding-top: 14px; border-top: 1px solid #E6ECF2; font-size: 14px; color: var(--pc-muted); }
.pc-ai .pc-ai-card .pc-ai-meta strong { color: var(--pc-ink); }
.pc-ai .pc-ai-card-media { padding: 0; overflow: hidden; }
.pc-ai .pc-ai-card-media > :not(.pc-ai-media) { padding-left: 20px; padding-right: 20px; }
.pc-ai .pc-ai-card-media > :last-child { padding-bottom: 20px; }
.pc-ai .pc-ai-media { height: 160px; background: #EEF4FA; border-bottom: 1px solid var(--pc-line); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--pc-faint); margin-bottom: 6px; text-align: center; padding: 0 16px; }
.pc-ai .pc-ai-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-ai .pc-ai-tag { align-self: flex-start; display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--pc-blue-soft); color: #0B4F9C; }
.pc-ai .pc-ai-tag.pc-ai-tag-new { background: #FFF1E6; color: var(--pc-orange-text); }
.pc-ai .pc-ai-tag.pc-ai-tag-green { background: var(--pc-green-soft); color: var(--pc-green-text); }
.pc-ai .pc-ai-banner { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; background: #FFFFFF; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); padding: 18px 24px; font-size: 16px; }
.pc-ai .pc-ai-banner.pc-ai-banner-soft { background: var(--pc-bg-soft); border-color: transparent; }
.pc-ai .pc-ai-banner.pc-ai-banner-orange { background: var(--pc-orange-soft); border-color: var(--pc-orange-line); }
.pc-ai .pc-ai-banner.pc-ai-banner-orange a { color: #B85400; }
.pc-ai .pc-ai-banner p { margin: 0; }

/* ---------- Hero ---------- */
.pc-ai.pc-ai-hero { background: linear-gradient(180deg, #EAF3FD 0%, #FFFFFF 100%); padding: 56px 0 72px; }
.pc-ai .pc-ai-badge { display: inline-flex; flex-wrap: wrap; row-gap: 6px; align-items: center; gap: 10px; background: #FFFFFF; border: 1px solid #CFE0F5; border-radius: 999px; padding: 8px 18px 8px 8px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(11, 99, 196, .08); font-size: 15px; font-weight: 500; }
.pc-ai .pc-ai-badge strong { white-space: nowrap; background: var(--pc-blue); color: #FFFFFF; font-weight: 700; padding: 6px 14px; border-radius: 999px; }
.pc-ai.pc-ai-hero .wp-block-buttons { margin-bottom: 40px; }
.pc-ai .pc-ai-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.pc-ai .pc-ai-stat { font-size: 14px; color: var(--pc-muted); }
.pc-ai .pc-ai-stat strong { display: block; font-size: 24px; color: var(--pc-ink); font-variant-numeric: tabular-nums; }

/* Konsola asystenta (hero) */
.pc-ai .pc-ai-console { background: #FFFFFF; border: 1px solid var(--pc-line); border-radius: 16px; box-shadow: 0 20px 50px rgba(11, 40, 80, .12); overflow: hidden; }
.pc-ai .pc-ai-console-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid #E6ECF2; background: #F7FAFD; font-size: 13px; color: var(--pc-faint); }
.pc-ai .pc-ai-seg { display: flex; gap: 6px; background: #E9F0F8; padding: 4px; border-radius: 999px; }
.pc-ai .pc-ai-seg button { min-height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; color: var(--pc-muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.pc-ai .pc-ai-seg button.is-active { background: #FFFFFF; color: var(--pc-blue); box-shadow: 0 1px 3px rgba(11, 40, 80, .1); }
.pc-ai .pc-ai-console-body { padding: 22px 22px 26px; }
.pc-ai .pc-ai-scenario:not(.is-active) { display: none; }
.pc-ai .pc-ai-prompt { margin: 0 0 20px auto; max-width: 88%; width: fit-content; background: var(--pc-blue); color: #FFFFFF; border-radius: 14px 14px 4px 14px; padding: 12px 16px; font-size: 15px; }
.pc-ai .pc-ai-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; min-height: 196px; counter-reset: pcstep; }
.pc-ai .pc-ai-steps li { display: flex; gap: 12px; align-items: center; font-size: 15px; counter-increment: pcstep; transition: opacity .3s; }
.pc-ai .pc-ai-steps li::before { content: counter(pcstep); width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: #E6ECF2; color: var(--pc-faint); transition: background .3s, color .3s; }
.pc-ai .pc-ai-steps li.is-pending { opacity: .35; }
.pc-ai .pc-ai-steps li.is-active::before { background: var(--pc-blue); color: #FFFFFF; }
.pc-ai .pc-ai-steps li.is-done::before { content: "✓"; background: var(--pc-green); color: #FFFFFF; }
.pc-ai .pc-ai-tool { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--pc-blue-soft); color: #0B4F9C; flex: none; min-width: 78px; text-align: center; }
.pc-ai .pc-ai-status { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.pc-ai .pc-ai-status-work { background: #F4F6F8; color: var(--pc-faint); }
.pc-ai .pc-ai-status-done { background: var(--pc-green-soft); border: 1px solid #B9E3CB; color: var(--pc-green-text); font-weight: 500; }
.pc-ai .pc-ai-scenario .pc-ai-status { display: none; }
.pc-ai .pc-ai-scenario[data-state="work"] .pc-ai-status-work,
.pc-ai .pc-ai-scenario[data-state="done"] .pc-ai-status-done { display: block; }

/* Pasek kotwic */
.pc-ai.pc-ai-anchors { background: #FFFFFF; border-top: 1px solid #E6ECF2; border-bottom: 1px solid #E6ECF2; padding: 8px 0; }
.pc-ai .pc-ai-anchor-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; font-size: 15px; }
.pc-ai .pc-ai-anchor-list strong { color: var(--pc-faint); margin-right: 8px; }
.pc-ai .pc-ai-anchor-list a { color: var(--pc-ink); text-decoration: none; font-weight: 500; padding: 10px 4px; border-bottom: 2px solid transparent; }
.pc-ai .pc-ai-anchor-list a:hover { color: var(--pc-blue); border-bottom-color: var(--pc-blue); }
.pc-ai .pc-ai-anchor-list a:last-child { color: var(--pc-blue); }

/* ---------- Przełączniki (role) ---------- */
.pc-ai .pc-ai-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.pc-ai .pc-ai-chips button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--pc-line-strong); background: #FFFFFF; color: var(--pc-ink); font: inherit; font-size: 15px; cursor: pointer; }
.pc-ai .pc-ai-chips button.is-active { background: var(--pc-blue); border-color: var(--pc-blue); color: #FFFFFF; }
.pc-ai [data-pc-panel]:not(.is-active) { display: none; }
.pc-ai .pc-ai-role { display: flex; flex-wrap: wrap; gap: 24px; }
.pc-ai .pc-ai-role-pains { flex: 999 1 520px; min-width: 0; }
.pc-ai .pc-ai-label { font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--pc-faint); margin-bottom: 16px; }
.pc-ai .pc-ai-pains { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: pcpain; }
.pc-ai .pc-ai-pains li { display: flex; gap: 14px; align-items: baseline; font-size: 18px; counter-increment: pcpain; }
.pc-ai .pc-ai-pains li::before { content: "0" counter(pcpain); color: var(--pc-blue); font-weight: 700; font-size: 15px; }
.pc-ai .pc-ai-role-fix { flex: 1 1 340px; min-width: 0; background: var(--pc-blue); color: #FFFFFF; border-radius: var(--pc-radius); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.pc-ai .pc-ai-role-fix .pc-ai-label { color: #D6E8FB; margin: 0; }
.pc-ai .pc-ai-role-fix p { font-size: 21px; font-weight: 700; line-height: 1.3; }
.pc-ai .pc-ai-role-fix .pc-ai-role-path { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .3); font-size: 15px; font-weight: 400; color: #E8F2FD; }
.pc-ai .pc-ai-role-fix .pc-ai-role-path strong { color: #FFFFFF; }

/* ---------- Kalkulator ---------- */
.pc-ai .pc-ai-calc { display: flex; flex-wrap: wrap; gap: 24px; }
.pc-ai .pc-ai-calc-inputs { flex: 999 1 520px; min-width: 0; display: grid; gap: 28px; }
.pc-ai .pc-ai-calc-row label { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.pc-ai .pc-ai-calc-row output { font-size: 18px; font-weight: 700; color: var(--pc-blue); white-space: nowrap; }
.pc-ai .pc-ai-calc-row input[type="range"] { width: 100%; height: 32px; accent-color: var(--pc-blue); margin: 0; }
.pc-ai .pc-ai-calc-result { flex: 1 1 340px; min-width: 0; background: #FFFFFF; border: 2px solid var(--pc-blue); border-radius: var(--pc-radius); padding: 32px; display: flex; flex-direction: column; gap: 6px; }
.pc-ai .pc-ai-calc-result .pc-ai-label { color: var(--pc-blue); margin: 0; }
.pc-ai .pc-ai-calc-big { font-size: 64px; font-weight: 900; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pc-ai .pc-ai-calc-fte { margin-top: 18px; font-size: 28px; font-weight: 700; color: var(--pc-blue); }
.pc-ai .pc-ai-calc-result .pc-ai-button { margin-top: auto; }

/* ---------- Diagnoza ---------- */
.pc-ai .pc-ai-diag { display: flex; flex-wrap: wrap; gap: 32px; }
.pc-ai .pc-ai-diag-q { flex: 999 1 560px; min-width: 0; display: grid; gap: 32px; }
.pc-ai .pc-ai-diag fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pc-ai .pc-ai-diag legend { font-size: 18px; font-weight: 700; margin-bottom: 14px; padding: 0; }
.pc-ai .pc-ai-opts { display: grid; gap: 10px; }
.pc-ai .pc-ai-opts-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pc-ai .pc-ai-opts button { text-align: left; min-height: 52px; padding: 12px 18px; border-radius: 10px; border: 1px solid var(--pc-line-strong); background: #FFFFFF; color: var(--pc-ink); font: inherit; font-size: 16px; cursor: pointer; }
.pc-ai .pc-ai-opts-row button { min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 15px; text-align: center; }
.pc-ai .pc-ai-opts button[aria-pressed="true"] { background: var(--pc-blue); border-color: var(--pc-blue); color: #FFFFFF; }
.pc-ai .pc-ai-diag-out { flex: 1 1 360px; min-width: 0; background: #FFFFFF; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); padding: 32px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 12px 32px rgba(11, 40, 80, .08); }
.pc-ai .pc-ai-diag-out .pc-ai-label { color: var(--pc-blue); margin: 0; }
.pc-ai .pc-ai-rec:not(.is-active) { display: none; }
.pc-ai .pc-ai-rec h3 { font-size: 26px; font-weight: 900; line-height: 1.2; margin-bottom: 8px; }
.pc-ai .pc-ai-rec p { color: var(--pc-muted); font-size: 16px; }
.pc-ai .pc-ai-local { display: none; padding: 12px 14px; border-radius: 8px; background: var(--pc-blue-soft); font-size: 14px; color: #0B4F9C; }
.pc-ai .pc-ai-diag[data-cloud="nie"] .pc-ai-local { display: block; }
.pc-ai .pc-ai-diag-out .pc-ai-button { margin-top: auto; }

/* ---------- AI Lab ---------- */
.pc-ai .pc-ai-lab-col { background: #F4F6F8; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.pc-ai .pc-ai-lab-title { display: flex; gap: 8px; align-items: center; font-size: 15px; font-weight: 700; }
.pc-ai .pc-ai-lab-title::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #E06F1F; }
.pc-ai .pc-ai-lab-pilot .pc-ai-lab-title::before { background: var(--pc-blue); }
.pc-ai .pc-ai-lab-ready .pc-ai-lab-title::before { background: var(--pc-green); }
.pc-ai .pc-ai-lab-col .pc-ai-card h3 { font-size: 16px; }
.pc-ai .pc-ai-lab-col .pc-ai-card p { font-size: 14px; color: var(--pc-muted); }

/* ---------- AI lokalnie ---------- */
.pc-ai .pc-ai-checks { display: grid; gap: 16px; }
.pc-ai .pc-ai-check { position: relative; padding-left: 42px; font-size: 15px; color: var(--pc-muted); }
.pc-ai .pc-ai-check::before { content: "✓"; position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--pc-blue-soft); color: var(--pc-blue); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.pc-ai .pc-ai-check strong { display: block; font-size: 16px; color: var(--pc-ink); }
.pc-ai .pc-ai-logos { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; border-top: 1px solid #E6ECF2; padding-top: 32px; margin-top: 56px; }
.pc-ai .pc-ai-logos p { min-width: 84px; height: 44px; border: 1px dashed #A9B8C9; border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: 0 12px; font-size: 12px; color: var(--pc-faint); }
.pc-ai .pc-ai-logos img { height: 40px; width: auto; display: block; }

/* ---------- Moduł aktualności / formularz – miejsca na elementy motywu ---------- */
.pc-ai .pc-ai-slot { border: 2px dashed #9DB3CC; border-radius: var(--pc-radius); background: #FFFFFF; padding: 32px; text-align: center; color: var(--pc-faint); font-size: 15px; }
.pc-ai.pc-ai-blue { background: var(--pc-blue); color: #FFFFFF; }
.pc-ai.pc-ai-blue .pc-ai-h2 { color: #FFFFFF; }
.pc-ai .pc-ai-on-blue-text { font-size: 18px; color: #E8F2FD; }
.pc-ai .pc-ai-steps-list { display: grid; gap: 10px; color: #E8F2FD; font-size: 16px; margin-top: 28px; }
.pc-ai .pc-ai-form-box { background: #FFFFFF; color: var(--pc-ink); border-radius: var(--pc-radius); padding: 36px; }
.pc-ai .pc-ai-form-box .pc-ai-slot { border-color: #C9D5E3; }

/* ---------- Animacje: wspólne ---------- */
.pc-ai .pc-ai-anim-block { margin-top: 8px; }
.pc-ai .pc-ai-stage { position: relative; width: 100%; overflow: hidden; }
.pc-ai .pc-ai-stage-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; font-size: 15px; }
.pc-ai .pc-ai-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; font-size: 15px; color: var(--pc-text); margin-top: 24px; }
.pc-ai .pc-ai-legend > div { display: flex; gap: 10px; align-items: flex-start; }
.pc-ai .pc-ai-legend i { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--pc-blue); }
.pc-ai .pc-ai-legend i.g { background: var(--pc-green); }
.pc-ai .pc-ai-legend i.r { background: var(--pc-red); }
.pc-ai .pc-ai-legend i.o { background: #E06F1F; }
.pc-ai .pc-ai-legend i.d { background: transparent; border: 2px dashed #9AA6B4; border-radius: 4px; }
.pc-ai .pc-ai-legend b { flex: none; color: var(--pc-blue); font-weight: 900; }
.pc-ai .pc-ai-node { position: absolute; background: #FFFFFF; border: 1px solid #CFDCEB; border-radius: 12px; display: flex; align-items: center; gap: 12px; padding: 0 16px; font-size: 15px; font-weight: 500; color: var(--pc-ink); box-shadow: 0 4px 14px rgba(11, 40, 80, .06); }
.pc-ai .pc-ai-node svg,
.pc-ai .pc-ai-ico { flex: none; width: 24px; height: 24px; stroke: var(--pc-blue); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-ai .pc-ai-line { position: absolute; height: 2px; background: #CFDCEB; transform-origin: 0 50%; }
.pc-ai .pc-ai-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; opacity: 0; }
.pc-ai .pc-ai-dot.q { background: var(--pc-blue); box-shadow: 0 0 0 4px rgba(11, 99, 196, .18); }
.pc-ai .pc-ai-dot.g { background: var(--pc-green); box-shadow: 0 0 0 4px rgba(29, 138, 80, .2); }
.pc-ai .pc-ai-dot.r { background: var(--pc-red); box-shadow: 0 0 0 4px rgba(214, 69, 69, .2); }

/* Animacje stoją, dopóki sekcja nie pojawi się na ekranie (klasę dodaje pc-ai.js) */
.pc-ai-js .pc-ai .pc-ai-anim:not(.is-visible) * { animation-play-state: paused !important; }

/* ---------- Animacja: Dane zostają w firmie ---------- */
.pc-ai .pc-ai-df-in { animation: pc-ai-df-in 7s infinite ease-in-out; }
.pc-ai .pc-ai-df-ai { animation: pc-ai-df-pulse 7s infinite ease-in-out; }
.pc-ai .pc-ai-df-out { animation: pc-ai-df-out 7s infinite ease-in-out; }
.pc-ai .pc-ai-df-esc { animation: pc-ai-df-esc 7s infinite ease-in-out; }
.pc-ai .pc-ai-df-bubble { opacity: 0; animation: pc-ai-df-bubble 7s infinite ease-in-out; }
.pc-ai .pc-ai-df-flash { opacity: 0; animation: pc-ai-df-flash 7s infinite ease-out; }
.pc-ai .pc-ai-df-lock { opacity: 0; animation: pc-ai-df-lock 7s infinite ease-in-out; }
@keyframes pc-ai-df-in { 0% { transform: translate(0, 0); opacity: 0 } 3% { opacity: 1 } 18% { transform: translate(var(--dx), var(--dy)); opacity: 1 } 21%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0 } }
@keyframes pc-ai-df-pulse { 0%, 20% { box-shadow: 0 8px 24px rgba(11, 99, 196, .25) } 28%, 38% { box-shadow: 0 0 0 10px rgba(11, 99, 196, .18), 0 8px 30px rgba(11, 99, 196, .45) } 46%, 100% { box-shadow: 0 8px 24px rgba(11, 99, 196, .25) } }
@keyframes pc-ai-df-out { 0%, 38% { transform: translate(0, 0); opacity: 0 } 41% { opacity: 1 } 50% { transform: translate(70px, 0); opacity: 1 } 53%, 100% { transform: translate(70px, 0); opacity: 0 } }
@keyframes pc-ai-df-bubble { 0%, 51% { opacity: 0; transform: translateY(8px) } 56%, 90% { opacity: 1; transform: translateY(0) } 95%, 100% { opacity: 0 } }
@keyframes pc-ai-df-esc { 0%, 58% { transform: translate(0, 0); opacity: 0 } 60% { opacity: 1 } 70% { transform: translate(232px, -30px); opacity: 1 } 77% { transform: translate(168px, -20px); opacity: 1 } 81%, 100% { transform: translate(168px, -20px); opacity: 0 } }
@keyframes pc-ai-df-flash { 0%, 69% { opacity: 0 } 71% { opacity: 1 } 82%, 100% { opacity: 0 } }
@keyframes pc-ai-df-lock { 0%, 70% { opacity: 0; transform: translateY(6px) } 74%, 93% { opacity: 1; transform: translateY(0) } 97%, 100% { opacity: 0 } }

/* ---------- Animacja: Serwery MCP ---------- */
.pc-ai .pc-ai-mcp-a { animation: pc-ai-mcp-a 7s infinite ease-in-out; }
.pc-ai .pc-ai-mcp-b { animation: pc-ai-mcp-b 7s infinite ease-in-out; }
.pc-ai .pc-ai-mcp-c { animation: pc-ai-mcp-c 7s infinite ease-in-out; }
.pc-ai .pc-ai-mcp-d { animation: pc-ai-mcp-d 7s infinite ease-in-out; }
.pc-ai .pc-ai-mcp-hit { animation: pc-ai-mcp-hit 7s infinite ease-in-out; }
.pc-ai .pc-ai-mcp-gate { animation: pc-ai-mcp-gate 7s infinite ease-in-out; }
.pc-ai .pc-ai-mcp-ask { opacity: 0; animation: pc-ai-mcp-ask 7s infinite ease-in-out; }
.pc-ai .pc-ai-mcp-ans { opacity: 0; animation: pc-ai-mcp-ans 7s infinite ease-in-out; }
@keyframes pc-ai-mcp-a { 0%, 6% { transform: translate(0, 0); opacity: 0 } 7% { opacity: 1 } 17% { transform: translate(var(--dx), var(--dy)); opacity: 1 } 19%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0 } }
@keyframes pc-ai-mcp-b { 0%, 22% { transform: translate(0, 0); opacity: 0 } 23% { opacity: 1 } 33% { transform: translate(var(--dx), var(--dy)); opacity: 1 } 35%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0 } }
@keyframes pc-ai-mcp-c { 0%, 46% { transform: translate(0, 0); opacity: 0 } 47% { opacity: 1 } 57% { transform: translate(var(--dx), var(--dy)); opacity: 1 } 59%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0 } }
@keyframes pc-ai-mcp-d { 0%, 60% { transform: translate(0, 0); opacity: 0 } 61% { opacity: 1 } 71% { transform: translate(var(--dx), var(--dy)); opacity: 1 } 73%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0 } }
@keyframes pc-ai-mcp-hit { 0%, 33% { background: #FFFFFF; border-color: #CFDCEB } 36%, 46% { background: #EAF3FD; border-color: #0B63C4; box-shadow: 0 0 0 4px rgba(11, 99, 196, .15) } 50%, 100% { background: #FFFFFF; border-color: #CFDCEB } }
@keyframes pc-ai-mcp-gate { 0%, 16%, 26%, 56%, 66%, 100% { box-shadow: 0 8px 24px rgba(11, 99, 196, .25) } 19%, 23%, 59%, 63% { box-shadow: 0 0 0 10px rgba(11, 99, 196, .16), 0 8px 30px rgba(11, 99, 196, .45) } }
@keyframes pc-ai-mcp-ask { 0%, 2% { opacity: 0; transform: translateY(8px) } 5%, 94% { opacity: 1; transform: translateY(0) } 98%, 100% { opacity: 0 } }
@keyframes pc-ai-mcp-ans { 0%, 72% { opacity: 0; transform: translateY(8px) } 76%, 94% { opacity: 1; transform: translateY(0) } 98%, 100% { opacity: 0 } }

/* ---------- Animacja: Przed i po ---------- */
.pc-ai .pc-ai-pp-track { position: absolute; height: 64px; border-radius: 12px; background: #F2F5F8; overflow: hidden; }
.pc-ai .pc-ai-pp-fill { height: 100%; overflow: hidden; border-radius: 12px; }
.pc-ai .pc-ai-pp-seg { height: 100%; display: flex; align-items: center; padding: 0 14px; font-size: 14px; font-weight: 500; white-space: nowrap; border-right: 2px solid #FFFFFF; flex: none; }
.pc-ai .pc-ai-pp-man { width: 0; animation: pc-ai-pp-man 9s infinite ease-in-out; }
.pc-ai .pc-ai-pp-plug { width: 0; animation: pc-ai-pp-plug 9s infinite ease-out; }
.pc-ai .pc-ai-pp-tman { opacity: 0; animation: pc-ai-pp-tman 9s infinite; }
.pc-ai .pc-ai-pp-tplug { opacity: 0; animation: pc-ai-pp-tplug 9s infinite; }
.pc-ai .pc-ai-pp-badge { opacity: 0; animation: pc-ai-pp-badge 9s infinite cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pc-ai-pp-man { 0%, 4% { width: 0; opacity: 1 } 50%, 94% { width: 860px; opacity: 1 } 99% { width: 860px; opacity: 0 } 100% { width: 0; opacity: 0 } }
@keyframes pc-ai-pp-plug { 0%, 55% { width: 0; opacity: 1 } 62%, 94% { width: 100px; opacity: 1 } 99% { width: 100px; opacity: 0 } 100% { width: 0; opacity: 0 } }
@keyframes pc-ai-pp-tman { 0%, 49% { opacity: 0 } 53%, 94% { opacity: 1 } 99%, 100% { opacity: 0 } }
@keyframes pc-ai-pp-tplug { 0%, 61% { opacity: 0 } 65%, 94% { opacity: 1 } 99%, 100% { opacity: 0 } }
@keyframes pc-ai-pp-badge { 0%, 65% { opacity: 0; transform: scale(.8) } 70%, 94% { opacity: 1; transform: scale(1) } 99%, 100% { opacity: 0; transform: scale(1) } }

/* ---------- Animacja: Z modelu do dokumentów (dodatkowa) ---------- */
.pc-ai .pc-ai-md-scan { animation: pc-ai-md-scan 8s infinite linear; }
.pc-ai .pc-ai-md-chip { animation: pc-ai-md-chip 8s infinite ease-in-out; }
.pc-ai .pc-ai-md-doc { position: absolute; width: 200px; height: 240px; background: #FFFFFF; border: 1px solid #CFDCEB; border-radius: 12px; box-shadow: 0 10px 28px rgba(11, 40, 80, .12); overflow: hidden; opacity: 0; animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
.pc-ai .pc-ai-md-d1 { animation-name: pc-ai-md-d1; }
.pc-ai .pc-ai-md-d2 { animation-name: pc-ai-md-d2; }
.pc-ai .pc-ai-md-d3 { animation-name: pc-ai-md-d3; }
.pc-ai .pc-ai-md-bar { height: 8px; border-radius: 4px; background: #E3EAF2; }
@keyframes pc-ai-md-scan { 0%, 2% { transform: translateY(-60px); opacity: 0 } 4% { opacity: 1 } 24% { transform: translateY(340px); opacity: 1 } 26%, 100% { transform: translateY(340px); opacity: 0 } }
@keyframes pc-ai-md-chip { 0%, 24% { box-shadow: 0 6px 18px rgba(11, 99, 196, .25); transform: scale(1) } 28% { box-shadow: 0 0 0 10px rgba(11, 99, 196, .16), 0 8px 26px rgba(11, 99, 196, .45); transform: scale(1.05) } 34%, 100% { box-shadow: 0 6px 18px rgba(11, 99, 196, .25); transform: scale(1) } }
@keyframes pc-ai-md-d1 { 0%, 32% { opacity: 0; transform: translate(-260px, 70px) scale(.2) } 42%, 92% { opacity: 1; transform: translate(0, 0) scale(1) rotate(-6deg) } 97%, 100% { opacity: 0; transform: rotate(-6deg) } }
@keyframes pc-ai-md-d2 { 0%, 40% { opacity: 0; transform: translate(-380px, 30px) scale(.2) } 50%, 92% { opacity: 1; transform: translate(0, 0) scale(1) } 97%, 100% { opacity: 0 } }
@keyframes pc-ai-md-d3 { 0%, 48% { opacity: 0; transform: translate(-500px, -10px) scale(.2) } 58%, 92% { opacity: 1; transform: translate(0, 0) scale(1) rotate(6deg) } 97%, 100% { opacity: 0; transform: rotate(6deg) } }

/* ---------- Animacja: AI Lab – karty w ruchu (dodatkowa) ---------- */
.pc-ai .pc-ai-labx-col { position: absolute; top: 0; width: 352px; height: 420px; background: #F4F6F8; border-radius: 14px; }
.pc-ai .pc-ai-labx-head { position: absolute; left: 20px; top: 20px; font-size: 15px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.pc-ai .pc-ai-labx-head span { width: 10px; height: 10px; border-radius: 50%; }
.pc-ai .pc-ai-labx-card { position: absolute; width: 312px; background: #FFFFFF; border: 1px solid var(--pc-line); border-radius: 12px; padding: 14px 16px; }
.pc-ai .pc-ai-labx-card strong { display: block; font-size: 15px; margin-bottom: 4px; }
.pc-ai .pc-ai-labx-card span.t { display: block; font-size: 13px; color: var(--pc-muted); }
.pc-ai .pc-ai-labx-move { animation: pc-ai-labx-move 9s infinite cubic-bezier(.6, 0, .3, 1); box-shadow: 0 10px 26px rgba(11, 40, 80, .14); border-color: #B9CCE3; padding-right: 96px; }
.pc-ai .pc-ai-labx-new { opacity: 0; animation: pc-ai-labx-new 9s infinite ease-in-out; border-style: dashed; border-color: #E9B48A; background: var(--pc-orange-soft); }
.pc-ai .pc-ai-labx-b { position: absolute; right: 14px; top: 14px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; opacity: 0; }
.pc-ai .pc-ai-labx-b1 { background: #FFF1E6; color: var(--pc-orange-text); animation: pc-ai-labx-b1 9s infinite; }
.pc-ai .pc-ai-labx-b2 { background: var(--pc-blue-soft); color: #0B4F9C; animation: pc-ai-labx-b2 9s infinite; }
.pc-ai .pc-ai-labx-b3 { background: var(--pc-green-soft); color: var(--pc-green-text); animation: pc-ai-labx-b3 9s infinite; }
@keyframes pc-ai-labx-move { 0% { opacity: 0; transform: translate(0, 0) } 4%, 30% { opacity: 1; transform: translate(0, 0) } 40%, 65% { opacity: 1; transform: translate(384px, 0) } 75%, 92% { opacity: 1; transform: translate(768px, 0) } 96%, 100% { opacity: 0; transform: translate(768px, 0) } }
@keyframes pc-ai-labx-new { 0%, 80% { opacity: 0; transform: translateY(8px) } 85%, 93% { opacity: 1; transform: translateY(0) } 97%, 100% { opacity: 0 } }
@keyframes pc-ai-labx-b1 { 0%, 34% { opacity: 1 } 38%, 100% { opacity: 0 } }
@keyframes pc-ai-labx-b2 { 0%, 36% { opacity: 0 } 40%, 69% { opacity: 1 } 73%, 100% { opacity: 0 } }
@keyframes pc-ai-labx-b3 { 0%, 71% { opacity: 0 } 75%, 100% { opacity: 1 } }

/* ---------- Ograniczony ruch: od razu stan końcowy ---------- */
@media (prefers-reduced-motion: reduce) {
  .pc-ai .pc-ai-anim * { animation: none !important; }
  .pc-ai .pc-ai-dot, .pc-ai .pc-ai-md-scan, .pc-ai .pc-ai-df-flash { opacity: 0 !important; }
  .pc-ai .pc-ai-df-bubble, .pc-ai .pc-ai-df-lock, .pc-ai .pc-ai-mcp-ask, .pc-ai .pc-ai-mcp-ans,
  .pc-ai .pc-ai-pp-tman, .pc-ai .pc-ai-pp-tplug, .pc-ai .pc-ai-pp-badge, .pc-ai .pc-ai-labx-new { opacity: 1 !important; }
  .pc-ai .pc-ai-pp-man { width: 860px !important; }
  .pc-ai .pc-ai-pp-plug { width: 100px !important; }
  .pc-ai .pc-ai-md-doc { opacity: 1 !important; }
  .pc-ai .pc-ai-md-d1 { transform: rotate(-6deg) !important; }
  .pc-ai .pc-ai-md-d3 { transform: rotate(6deg) !important; }
  .pc-ai .pc-ai-labx-move { transform: translate(384px, 0) !important; opacity: 1 !important; }
  .pc-ai .pc-ai-labx-b2 { opacity: 1 !important; }
  .pc-ai .pc-ai-steps li { opacity: 1 !important; }
}

/* ---------- Responsywność ---------- */
@media (max-width: 960px) {
  .pc-ai { --pc-sec-pad: 72px; }
  .pc-ai .pc-ai-g3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .pc-ai .pc-ai-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-ai .pc-ai-h1 { font-size: 46px; }
  .pc-ai .pc-ai-h2 { font-size: 34px; }
  .pc-ai .pc-ai-legend { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 600px) {
  .pc-ai { --pc-sec-pad: 56px; }
  .pc-ai .pc-ai-wrap { padding: 0 16px; }
  .pc-ai .pc-ai-g2,
  .pc-ai .pc-ai-g4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .pc-ai .pc-ai-h1 { font-size: 36px; }
  .pc-ai .pc-ai-h2 { font-size: 29px; }
  .pc-ai .pc-ai-calc-big { font-size: 48px; }
  .pc-ai .pc-ai-card,
  .pc-ai .pc-ai-role-fix,
  .pc-ai .pc-ai-calc-result,
  .pc-ai .pc-ai-diag-out,
  .pc-ai .pc-ai-form-box { padding: 22px; }
  .pc-ai .pc-ai-pains li { font-size: 16px; }
  .pc-ai .pc-ai-anchor-list { gap: 0 18px; font-size: 14px; }
}