/* ==========================================================================
   Automation Labs — warstwa wizualna "duzy tekst + lista" (wariant paleta-A-1)
   Paleta fioletowa: tlo #faf5ff, karty #fff, tekst #1e1b4b, muted #6b7280,
   akcent #8b5cf6, akcent2 #a78bfa, akcent-hover #7c3aed, akcent-light #f5f3ff,
   obramowania #d8b4fe, CTA pomaranczowy #f97316.
   Dolaczany po styles.css — naklada sie na istniejacy layout.
   ========================================================================== */

:root{
  --a1-bg:#faf5ff;
  --a1-bg-soft:#f5f3ff;
  --a1-card:#ffffff;
  --a1-text:#1e1b4b;
  --a1-muted:#6b7280;
  --a1-accent:#8b5cf6;
  --a1-accent2:#a78bfa;
  --a1-accent-hover:#7c3aed;
  --a1-accent-light:#f5f3ff;
  --a1-border:#d8b4fe;
  --a1-cta:#f97316;
  --a1-cta-hover:#ea580c;
  --a1-radius:16px;
}

html{scroll-behavior:smooth}
body{
  background:var(--a1-bg);
  color:var(--a1-text);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.hero h1,.section-header h2{font-family:'Space Grotesk','DM Sans',sans-serif;font-weight:700;color:var(--a1-text)}
p{color:var(--a1-muted)}
::selection{background:#ddd6fe;color:#1e1b4b}

/* ------------------------------------------------------------------ HERO -- */
.hero{
  position:relative;
  background:linear-gradient(180deg,#faf5ff 0%,#f5f3ff 55%,#ede9fe 100%);
  padding:118px 0 72px;
  overflow:hidden;
}
.hero .container{display:block;max-width:1180px;position:relative;z-index:2}
.hero-grid{display:block;max-width:900px;margin:0 auto;text-align:center}
.hero-content{max-width:900px;margin:0 auto}
.hero-actions{justify-content:center}
.hero-content{max-width:900px;min-width:0}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:7px 15px;border-radius:99px;
  background:#ffffff;color:var(--a1-accent-hover);border:1px solid var(--a1-border);
  margin-bottom:26px;
}
.hero h1,
.hero-content h1{
  font-size:clamp(40px,6.5vw,78px);
  line-height:1.03;
  letter-spacing:-.035em;
  margin:0 0 26px;
}
.hero h1 .accent-text{
  background:linear-gradient(120deg,#8b5cf6,#7c3aed 55%,#6366f1);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero-desc{
  font-size:17px;line-height:1.68;color:var(--a1-muted);
  max-width:640px;margin:0 0 38px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-actions .btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;border-radius:12px;border:1px solid transparent;
  background:linear-gradient(135deg,#8b5cf6,#a78bfa);color:#fff;
  font-weight:600;font-size:15px;text-decoration:none;
  box-shadow:0 10px 26px rgba(139,92,246,.30);
  transition:transform .25s,box-shadow .25s,background .25s;
}
.hero-actions .btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(139,92,246,.38)}
.hero-actions .btn-secondary{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 28px;border-radius:12px;
  background:#fff;color:var(--a1-text);border:1px solid var(--a1-border);
  font-weight:600;font-size:15px;text-decoration:none;
  transition:transform .25s,border-color .25s,color .25s,box-shadow .25s;
}
.hero-actions .btn-secondary:hover{transform:translateY(-3px);border-color:var(--a1-accent);color:var(--a1-accent-hover);box-shadow:0 12px 26px rgba(139,92,246,.14)}

/* ---- zad.3: hero podstron — jednokolumnowy, wysrodkowany ------------------ */
.hero-grid--single{display:block;max-width:900px;margin:0 auto;text-align:center}
.hero-grid--single .hero-content{max-width:900px;margin:0 auto}
.hero-grid--single .hero-actions{justify-content:center}
.hero-grid--single .hero-badge{display:inline-flex}
.hero-grid--single .hero-desc{max-width:760px;margin-left:auto;margin-right:auto}
.hero-grid--single .hero-visual{margin-top:36px}


/* background: orby + siatka */
.hero-visual-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;will-change:transform}
.hero-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.hero-orb.orb-1{width:520px;height:520px;top:-160px;right:-120px;background:radial-gradient(circle,#c4b5fd 0%,rgba(196,181,253,0) 70%)}
.hero-orb.orb-2{width:420px;height:420px;top:180px;left:-140px;background:radial-gradient(circle,#a5b4fc 0%,rgba(165,180,252,0) 70%)}
.hero-orb.orb-3{width:360px;height:360px;bottom:-120px;left:38%;background:radial-gradient(circle,#ddd6fe 0%,rgba(221,214,254,0) 70%)}
.neural-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:1;pointer-events:none;will-change:transform}

/* animowany rotujacy blok pod H1 — duzy, wyrazny */
.typing-banner{
  display:flex;align-items:center;justify-content:center;
  min-height:150px;
  margin:0 0 30px;
  padding:22px 28px;
  border-radius:16px; /* WIZ-06 (etap C): 18 -> 16 */
  background:rgba(255,255,255,.86);
  border:1px solid var(--a1-border);
  border-left:4px solid var(--a1-accent);
  box-shadow:0 14px 34px rgba(139,92,246,.13);
  backdrop-filter:blur(8px);
}
.typing-inner{display:block;width:100%;text-align:left}
.typing-text{
  font-size:clamp(22px,2.7vw,32px);
  line-height:1.24;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--a1-accent-hover);
  font-family:'Space Grotesk','DM Sans',sans-serif;
  white-space:normal;
  display:inline;
  margin:0;
  vertical-align:baseline;
}
.typing-cursor{
  display:inline-block;
  font-size:clamp(22px,2.7vw,32px);
  line-height:1.24;
  font-weight:700;
  color:var(--a1-accent);
  vertical-align:-0.08em;
  margin-left:2px;
  animation:blink .75s steps(1,end) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ------------------------------------------------ PANEL PO PRAWEJ (hero) -- */
/* UWAGA: klasy .hero-panel / .panel-window nie sa obecnie uzywane w zadnym HTML
   ani JS (martwy kod po przebudowie hero). Obrót 3D usuniety 2026-09-17 na
   polecenie milo: zadne kafelki ani panele nie maja sie przekrecac przy hover.
   Zostaje sam cien i ramka - tak samo jak na kartach (.feature-card:hover).
   Nie przywracac tu rotateX/rotateY/perspective. */
.hero-panel{min-width:0}
.panel-window{
  border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(245,243,255,.93));
  border:1px solid var(--a1-border);
  box-shadow:0 26px 60px rgba(30,27,75,.13),0 2px 6px rgba(30,27,75,.05);
  overflow:hidden;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s;
  backdrop-filter:blur(8px);
}
.hero-panel:hover .panel-window{transform:translateY(-6px);box-shadow:0 34px 72px rgba(30,27,75,.18)}
.panel-bar{
  display:flex;align-items:center;gap:8px;
  padding:13px 18px;border-bottom:1px solid rgba(139,92,246,.16);
  background:linear-gradient(90deg,#f5f3ff,#ede9fe);
}
.panel-dot{width:10px;height:10px;border-radius:50%;background:#c4b5fd;display:block;flex:0 0 auto}
.panel-dot:first-child{background:#a78bfa}
.panel-dot:nth-child(2){background:#c4b5fd}
.panel-dot:nth-child(3){background:#ddd6fe}
.panel-title{margin-left:auto;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--a1-accent-hover)}
.panel-body{padding:20px;display:flex;flex-direction:column;gap:16px}
.panel-block{
  display:flex;flex-direction:column;gap:6px;
  padding:14px 16px;border-radius:14px;
  background:#fff;border:1px solid rgba(139,92,246,.14);
}
.panel-block-row{flex-direction:row;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.panel-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--a1-muted)}
.panel-state{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700}
.panel-state-done{color:#059669}
.panel-state-live{color:var(--a1-accent-hover)}
.panel-state-live::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#8b5cf6;margin-right:7px;vertical-align:middle;animation:panelPulse 1.6s ease-in-out infinite}
@keyframes panelPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.panel-chart{display:flex;align-items:flex-end;gap:6px;height:54px;margin-top:6px}
.panel-chart i{
  flex:1;display:block;border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,#a78bfa,#8b5cf6);
  transform-origin:bottom;
  animation:panelBar 1s cubic-bezier(.22,.61,.36,1) both;
}
.panel-chart i:nth-child(2){animation-delay:.07s}
.panel-chart i:nth-child(3){animation-delay:.14s}
.panel-chart i:nth-child(4){animation-delay:.21s}
.panel-chart i:nth-child(5){animation-delay:.28s}
.panel-chart i:nth-child(6){animation-delay:.35s}
.panel-chart i:nth-child(7){animation-delay:.42s}
@keyframes panelBar{from{transform:scaleY(.06);opacity:.35}to{transform:scaleY(1);opacity:1}}
.panel-wave{display:flex;align-items:center;gap:3px;height:34px;margin-top:6px}
.panel-wave i{flex:1;display:block;height:22%;border-radius:3px;background:#c4b5fd;animation:panelWave 1.1s ease-in-out infinite}
.panel-wave i:nth-child(2){animation-delay:.09s}
.panel-wave i:nth-child(3){animation-delay:.18s}
.panel-wave i:nth-child(4){animation-delay:.27s}
.panel-wave i:nth-child(5){animation-delay:.36s}
.panel-wave i:nth-child(6){animation-delay:.45s}
.panel-wave i:nth-child(7){animation-delay:.54s}
.panel-wave i:nth-child(8){animation-delay:.63s}
.panel-wave i:nth-child(9){animation-delay:.72s}
.panel-wave i:nth-child(10){animation-delay:.81s}
.panel-wave i:nth-child(11){animation-delay:.90s}
.panel-wave i:nth-child(12){animation-delay:.99s}
.panel-wave i:nth-child(13){animation-delay:.08s}
.panel-wave i:nth-child(14){animation-delay:.17s}
.panel-wave i:nth-child(15){animation-delay:.26s}
@keyframes panelWave{0%,100%{height:20%;background:#c4b5fd}50%{height:92%;background:#8b5cf6}}
.panel-flow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 16px;border-radius:14px;
  background:linear-gradient(120deg,#f5f3ff,#e0e7ff);
  border:1px dashed var(--a1-border);
}
.panel-node{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;
  padding:6px 13px;border-radius:9px;background:#fff;color:var(--a1-text);
  border:1px solid var(--a1-border);
}
.panel-arrow{color:var(--a1-accent-hover);font-weight:700;font-size:15px}

/* ------------------------------------------- LISTA PROBLEMOW (01-04) ------ */
.problem-list-title{
  margin:56px 0 0;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;line-height:1.2;color:var(--a1-text);
}
.problem-list{margin-top:18px;border-top:1px solid var(--a1-border)}
.problem-row{
  display:flex;gap:34px;align-items:flex-start;
  padding:26px 0;border-bottom:1px solid var(--a1-border);
  transition:padding-left .28s ease,background .28s ease;
}
.problem-row:hover{padding-left:14px;background:linear-gradient(90deg,rgba(139,92,246,.06),rgba(139,92,246,0))}
.problem-row .num{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;
  color:var(--a1-accent-hover);min-width:38px;padding-top:6px;letter-spacing:.06em;
}
.problem-row .p-body{display:flex;gap:32px;flex:1;align-items:baseline;flex-wrap:wrap}
.problem-row h3{
  font-size:24px;line-height:1.2;letter-spacing:-.015em;
  font-weight:700;flex:1 1 300px;margin:0;
}
.problem-row .p-desc{color:var(--a1-muted);font-size:15px;line-height:1.6;flex:1 1 320px;margin:0}

/* ---- zad.6: naglowek listy problemow wyrownany jak reszta sekcji ---------- */
.problem-list-title.section-header{text-align:center;margin-left:auto;margin-right:auto;max-width:900px}

/* -------------------------------------------------------------- METRICS --- */
.metrics{
  background:linear-gradient(135deg,#f5f3ff 0%,#ede9fe 60%,#e0e7ff 100%);
  padding:64px 0;border-top:1px solid var(--a1-border);border-bottom:1px solid var(--a1-border);
}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.metric{
  padding:8px 26px;border-left:1px solid rgba(139,92,246,.22);
  display:flex;flex-direction:column;gap:4px;
}
.metric:first-child{border-left:none;padding-left:0}
.metric-value{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(36px,4.4vw,54px);line-height:1;letter-spacing:-.03em;color:var(--a1-accent-hover);display:inline}
.metric-suffix{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(19px,2.1vw,26px);color:var(--a1-accent-hover);margin-left:3px;display:inline}
.metric .metric-value[data-count="0"]{color:var(--a1-accent2)}
.metric-label{display:block;font-size:13px;color:var(--a1-muted);margin-top:8px;letter-spacing:.01em}

/* ------------------------------------------------------------- SECTIONS --- */
.section-header{max-width:760px;margin-left:auto;margin-right:auto;text-align:center;margin-bottom:44px}
.section-header h2{font-size:clamp(28px,3.8vw,46px);line-height:1.1;letter-spacing:-.025em;margin:0 0 14px}
.section-header p{font-size:17px;line-height:1.65;margin:0}
.section-tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 13px;border-radius:99px;background:#fff;color:var(--a1-accent-hover);
  border:1px solid var(--a1-border);margin-bottom:18px;
}
section{padding:96px 0}

.features{background:var(--a1-bg)}
.solutions{background:linear-gradient(180deg,#f5f3ff 0%,#faf5ff 100%)}
.industries{background:linear-gradient(180deg,#faf5ff 0%,#f0f9ff 100%)}
.pricing{background:linear-gradient(180deg,#ede9fe 0%,#f5f3ff 100%)}
.faq{background:var(--a1-bg)}
.contact{background:linear-gradient(180deg,#f5f3ff 0%,#eef2ff 100%)}

/* ---------------------------------------------------------- FEATURES ------ */
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.feature-card{
  display:block;
  background:var(--a1-card);
  border:1px solid rgba(139,92,246,.16);
  border-radius:var(--a1-radius);
  padding:28px; /* WIZ-08 (etap C): symetryczny */
  text-decoration:none;color:inherit;
  box-shadow:0 1px 3px rgba(30,27,75,.05);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(30,27,75,.10);border-color:var(--a1-border)}
.feature-card h3{font-size:20px;font-weight:700;letter-spacing:-.015em;margin:0 0 10px}
.feature-card p{font-size:15px;line-height:1.62;margin:0}
.feature-icon-wrap{
  width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--a1-accent-light);border:1px solid var(--a1-border);color:var(--a1-accent-hover);
  margin-bottom:20px;
}
.feature-icon-wrap svg{width:22px;height:22px}

/* ---------------------------------------------------- SOLUTIONS — lista --- */
/* Wariant A1 w sekcji rozwiazan: wiersze z numerem, cienkie linie, nie siatka 3x3 */
.solutions-grid{display:block;border-top:1px solid var(--a1-border)}
.solution-card{
  display:grid;grid-template-columns:56px 1.05fr 1.45fr auto;align-items:baseline;gap:26px;
  padding:26px 0;border-bottom:1px solid var(--a1-border);
  background:none;border-radius:0;box-shadow:none;text-decoration:none;color:inherit;
  transition:padding-left .28s ease,background .28s ease;
}
.solution-card:hover{padding-left:14px;background:linear-gradient(90deg,rgba(139,92,246,.06),rgba(139,92,246,0));transform:none;box-shadow:none}
.solution-number{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;
  color:var(--a1-accent-hover);background:none;width:auto;height:auto;border-radius:0;
}
.solution-card h3{font-size:24px;font-weight:700;letter-spacing:-.015em;line-height:1.22;margin:0}
.solution-card p{font-size:15px;line-height:1.62;margin:0;color:var(--a1-muted)}
.solution-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.solution-tags span{
  font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:5px 11px;border-radius:7px;
  background:var(--a1-accent-light);color:var(--a1-accent-hover);border:1px solid var(--a1-border);
}

/* ---------------------------------------------------------- INDUSTRIES ---- */
.industries-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* 6 kart = 3x2 bez dziury w ostatnim wierszu (styles.css daje 3 kolumny,
   tu przypinamy wprost, zeby nizsze warstwy tego nie nadpisaly) */
.capabilities-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* --- strona glowna: sekcja 'Dla kogo?' ma 8 kart => 4 kolumny = 4+4 bez dziury --- */
#industries .industries-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1024px){#industries .industries-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#industries .industries-grid{grid-template-columns:1fr}}

@media(max-width:900px){.capabilities-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.capabilities-grid{grid-template-columns:1fr}}
/* --- ikony w kartach "Możliwości" (strony funkcje/*) ---
   .capability-icon dziedziczyl font-size:40px z ery emoji i nie mial reguly
   na svg: bez width/height SVG rozciagal sie do szerokosci karty (301px).
   Nadajemy kontenerowi staly rozmiar (jak .industry-icon), a ikone
   trzymamy na 24px. */
.capability-icon{
  /* WIZ-09 (etap C): 48 -> 44, zeby ikony kart mialy jeden rozmiar */
  width:44px;height:44px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ede9fe,#e0e7ff);
  color:var(--a1-accent-hover);
  font-size:24px;margin-bottom:14px;
}
.capability-icon svg{width:24px;height:24px;flex:0 0 auto;display:block}
/* wariant poziomy (automatyzacja-procesow: .cap-head) */
.cap-head .capability-icon{margin-bottom:0;flex:0 0 auto}

@media(max-width:900px){.industries-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.industries-grid{grid-template-columns:1fr}}
.industries-grid .industry-card{
  display:block;background:var(--a1-card);
  border:1px solid rgba(139,92,246,.16);border-radius:14px;
  padding:24px 22px 22px;text-decoration:none;color:inherit;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.industries-grid .industry-card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(30,27,75,.10);border-color:var(--a1-border)}
.industries-grid .industry-card h3{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px;font-family:'Space Grotesk',sans-serif}
.industries-grid .industry-card p{font-size:14px;line-height:1.58;margin:0;color:var(--a1-muted);overflow-wrap:anywhere}
.industry-icon{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ede9fe,#e0e7ff);color:var(--a1-accent-hover);margin-bottom:16px;
}
.industry-icon svg{width:20px;height:20px}

/* ------------------------------------------------------------- PRICING ---- */
.pricing-factors{
  background:var(--a1-card);border:1px solid rgba(139,92,246,.16);border-radius:20px;
  padding:38px;margin-bottom:38px;box-shadow:0 1px 3px rgba(30,27,75,.05);
}
.pricing-factors h3{font-size:24px;font-weight:700;letter-spacing:-.015em;margin:0 0 26px}
.factors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(139,92,246,.14);border-radius:14px;overflow:hidden}
.factor{background:#fff;padding:26px 24px;transition:background .25s}
.factor:hover{background:var(--a1-accent-light)}
.factor-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--a1-accent-light);color:var(--a1-accent-hover);margin-bottom:14px}
.factor-icon svg{width:20px;height:20px}
.factor h3,.factor h4{font-size:16px;margin:0 0 8px;letter-spacing:-.01em;font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--a1-text)}
.factor p{font-size:14px;line-height:1.6;margin:0}
.pricing-cta{
  margin-top:38px;padding:34px;border-radius:16px;
  background:linear-gradient(135deg,#ede9fe,#e0e7ff);border:1px solid var(--a1-border);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.pricing-cta p{font-size:16px;line-height:1.6;color:var(--a1-text);margin:0;max-width:640px}
.pricing-cta .btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:12px;
  background:linear-gradient(135deg,#f97316,#fb923c);color:#fff;
  font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 24px rgba(249,115,22,.30);
  transition:transform .25s,box-shadow .25s;
}
.pricing-cta .btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(249,115,22,.36)}

/* ----------------------------------------------------------------- FAQ ---- */
.faq-grid{display:block;border-top:1px solid var(--a1-border)}
.faq-item{background:none;border:none;border-bottom:1px solid var(--a1-border);border-radius:0;margin:0;overflow:visible}
.faq-question{padding:22px 0;gap:20px}
.faq-question h3{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.faq-toggle{background:var(--a1-accent-light);border:1px solid var(--a1-border);border-radius:10px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--a1-accent-hover);flex:0 0 auto}
.faq-answer p{font-size:15px;line-height:1.68;color:var(--a1-muted)}
.faq-item.active .faq-answer{padding-bottom:22px}

/* -------------------------------------------------------------- CONTACT --- */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start}
.contact-info h2{font-size:clamp(27px,3.4vw,40px);line-height:1.12;letter-spacing:-.025em;margin:0 0 14px}
.contact-info>p{font-size:17px;line-height:1.65;margin:0 0 26px}
.contact-methods{display:flex;flex-direction:column;gap:16px;margin-bottom:28px}
.contact-method{display:flex;align-items:center;gap:14px}
.method-icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#fff7ed;border:1px solid #fed7aa;color:#ea580c;flex:0 0 auto}
.method-icon svg{width:19px;height:19px}
.method-label{font-size:12px;color:var(--a1-muted);letter-spacing:.04em;text-transform:uppercase}
.method-value{font-size:16px;font-weight:600;color:var(--a1-text)}
.contact-form{
  background:var(--a1-card);border:1px solid rgba(249,115,22,.20);border-radius:20px;
  padding:32px;box-shadow:0 1px 3px rgba(30,27,75,.05);
}
.contact-form input,.contact-form select,.contact-form textarea{
  border:1.5px solid rgba(249,115,22,.22);border-radius:12px;background:#fff;
  font-size:15px;padding:14px 16px;transition:border-color .2s,box-shadow .2s;
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  border-color:#f97316;box-shadow:0 0 0 4px rgba(249,115,22,.12);
}
.contact-form .btn-primary,
.btn-full{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#f97316,#fb923c);color:#fff;
  font-family:'DM Sans',sans-serif;font-weight:600;font-size:15px;
  box-shadow:0 10px 26px rgba(249,115,22,.28);
  transition:transform .25s,box-shadow .25s;
}
.contact-form .btn-primary:hover,.btn-full:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(249,115,22,.34)}
.form-msg{margin:0;font-size:14px;font-weight:600}
.contact-photo{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--a1-border)}
.contact-photo img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}

/* --------------------------------------------------------------- IMAGES --- */
.section-image{margin:44px 0 0;border-radius:16px;overflow:hidden;border:1px solid var(--a1-border);box-shadow:0 18px 40px rgba(30,27,75,.08)}
.section-image img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover}
.contact .section-image{margin-top:44px}

/* --------------------------------------------------------------- FOOTER --- */
.footer{background:#1e1b4b;color:#e9e6f7;padding:64px 0 28px}
.footer-col h3,.footer-col h4{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;margin:0 0 16px;color:#fff;letter-spacing:-.01em}
.footer .logo-text{color:#fff}
.footer-desc{color:#c4b5fd}
.footer-contact a{color:#ddd6fe}
.footer-contact a:hover{color:#fff}
.footer-col h4{color:#fff}
.footer-col a{color:#c7c2e8}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(216,180,254,.25)}
.footer-bottom p{color:#a99fd0}

/* ------------------------------------------------------- SCROLL REVEAL ---- */
.reveal-hidden:not(.reveal-visible){opacity:0;transform:translateY(24px)}
.reveal-hidden:not(.reveal-visible){transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.problem-row.reveal-hidden:not(.reveal-visible),.solution-card.reveal-hidden:not(.reveal-visible){transform:translateY(18px)}
.industry-card.reveal-hidden:not(.reveal-visible),.feature-card.reveal-hidden:not(.reveal-visible),.faq-item.reveal-hidden:not(.reveal-visible){transform:translateY(22px)}
.reveal-visible{opacity:1!important;transform:none!important}

/* ----------------------------------------------------------- PROCESS FLOW - */
.process-flow{margin-top:64px;padding:34px 0 6px;border-top:1px solid var(--a1-border)}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.process-step{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-decoration:none;color:inherit}
.process-dot{
  width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--a1-border);color:var(--a1-accent-hover);
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.process-num{font-size:15px}
.process-step:hover .process-dot{transform:translateY(-6px);border-color:var(--a1-accent);box-shadow:0 14px 30px rgba(139,92,246,.22)}
.process-label{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;color:var(--a1-text)}
.process-desc{font-size:14px;color:var(--a1-muted);line-height:1.55}
.process-line{position:absolute;top:56px;left:0;width:100%;height:2px;overflow:visible}
/* --- process-flow: naprawa animacji linii --- */
/* SVG dostaje zapas wysokosci na stroke (byl height:2px przy stroke-width:2,
   co przycinalo linie w pionie i dawalo pionowy artefakt). */
.process-line{height:8px!important;overflow:visible}
/* KLUCZOWE: styles.css ustawial stroke-dasharray:480 i stroke-dashoffset:480.
   Wartosc z CSS wygrywa z atrybutem SVG (stroke-dasharray="1000"), wiec wzor
   kreski (480/480) NIE pokrywal sciezki o dlugosci 1000 jednostek — koncowe
   ~40 jednostek rysowalo sie jako "wiszacy" odcinek. Nadpisujemy oba parametry
   deklaracja CSS, zeby wzor objal cala linie i animowal sie z 1000 do 0. */
.process-progress{
  stroke-dasharray:1000!important;
  stroke-dashoffset:1000!important;
  transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1)!important;
}
.process-flow.is-visible .process-progress{stroke-dashoffset:0!important}
/* kropki numerow pojawiaja sie po kolei */
.process-dot{transition:transform .25s,border-color .25s,box-shadow .25s,opacity .45s ease}
.process-step:nth-child(1) .process-dot{transition-delay:.15s}
.process-step:nth-child(2) .process-dot{transition-delay:.55s}
.process-step:nth-child(3) .process-dot{transition-delay:.95s}
.process-step:nth-child(4) .process-dot{transition-delay:1.35s}

.process-arrow{display:none}

/* ------------------------------------------------------------- NAVBAR ----- */
.navbar{background:rgba(250,245,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(139,92,246,.14)}
.navbar.scrolled{background:rgba(250,245,255,.96);box-shadow:0 6px 24px rgba(30,27,75,.07)}
/* menu: zwykły tekst + hover na fiolet, bez wypełnionego tła */
.navbar .nav-link-sm{
  background:transparent!important;
  color:var(--a1-text)!important;
  padding:8px 2px!important;
  border-radius:0!important;
  font-weight:500;
  position:relative;
  opacity:.82;
  transition:color .22s ease,opacity .22s ease;
}
.navbar .nav-link-sm::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--a1-accent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.navbar .nav-link-sm:hover{
  background:transparent!important;color:var(--a1-accent-hover)!important;
  opacity:1;transform:none!important;
}
.navbar .nav-link-sm:hover::after,.navbar .nav-link-sm.active::after{transform:scaleX(1)}
.navbar .nav-link-sm.active{color:var(--a1-accent-hover)!important;opacity:1;font-weight:600}
.navbar .nav-link-sm.inactive{color:var(--a1-muted)!important;opacity:.62}
.navbar .nav-link-sm.inactive:hover{color:var(--a1-accent-hover)!important;opacity:1}
.navbar .logo-text{color:var(--a1-text)}
.navbar.section-footer{background:rgba(30,27,75,.94)}

/* ------------------------------------------------------------ RESPONSIVE -- */
@media(max-width:1024px){
  .hero-grid{max-width:900px}
  .hero-panel{max-width:560px}
  .panel-window{transform:none}
  .hero-panel:hover .panel-window{transform:translateY(-6px)}
  .metrics-grid{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .metric:nth-child(3){border-left:none;padding-left:0}
  .industries-grid{grid-template-columns:repeat(2,1fr)}
  .factors-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .solution-card{grid-template-columns:44px 1fr;grid-template-areas:"num title" "num desc";gap:8px 18px}
  .solution-card .solution-number{grid-area:num}
  .solution-card h3{grid-area:title}
  .solution-card p{grid-area:desc}
  .solution-tags{grid-column:2;justify-content:flex-start;margin-top:10px}
}
@media(max-width:820px){
  .hero{padding:120px 0 72px}
  .hero h1{font-size:clamp(34px,8.6vw,52px)}
  section{padding:72px 0}
  .problem-row{gap:18px}
  /* p-body przechodzi na kolumne (h3 nad opisem). UWAGA: bazowe reguly
     .problem-row h3 i .problem-row .p-desc ustawiaja flex-basis:300px/320px,
     co dziala jako SZEROKOSC w poziomie. Po zmianie na kolumne flex-basis
     staje sie WYSOKOSCIA i boxy rozciagaja sie do 300/320px mimo jednej
     linii tekstu (dziura miedzy tytulem a opisem, wiersz ~681px zamiast ~110px).
     Dlatego jawnie zerujemy flex-basis i blokujemy rozciaganie w osi krzyzowej. */
  .problem-row .p-body{flex-direction:column;gap:10px;align-items:stretch}
  .problem-row h3{flex:0 0 auto;font-size:20px}
  .problem-row .p-desc{flex:0 0 auto}
  .process-steps{grid-template-columns:1fr;gap:20px}
  .process-flow{padding-top:26px}
  .process-line{display:none}
  .process-step{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
  .process-desc{flex-basis:100%;padding-left:58px}
  .features-grid{grid-template-columns:1fr}
  .section-image img{max-height:240px}
}
@media(max-width:560px){
  .typing-text,.typing-cursor{font-size:21px}
  .typing-banner{padding:16px 18px;min-height:150px}
  .hero-panel{max-width:none}
  .panel-body{padding:16px}
  .panel-chart{height:44px}
  .factors-grid{grid-template-columns:1fr!important}
  .metrics-grid{grid-template-columns:1fr;gap:24px}
  .metric{border-left:none;padding:0 0 0 14px;border-left:3px solid rgba(139,92,246,.25)}
  .industries-grid{grid-template-columns:1fr}
  .factors-grid{grid-template-columns:1fr}
  .pricing-factors{padding:24px}
  .contact-form{padding:22px}
  .form-row{grid-template-columns:1fr}
}

/* --------------------------------------------------- PREFERS-REDUCED ----- */
@media(prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal-hidden:not(.reveal-visible){opacity:1;transform:none}
  .hero-bg,.neural-canvas{transform:none!important}
  .panel-window,.hero-panel:hover .panel-window{transform:none!important}
  .panel-chart i,.panel-wave i,.panel-state-live::before{animation:none!important}
  .panel-wave i{height:55%;background:#a78bfa}
  .feature-card:hover,.industry-card:hover,.btn-primary:hover,.btn-full:hover,.hero-actions a:hover{transform:none}
}



/* ------------------------------------------------------------- KONTENER --
   UJEDNOLICENIE 2026-09-16: hero mial 1180px, sekcje 1100px (styles.css).
   Roznica 80px = inne marginesy w hero i nizej (zglaszal milo).
   Teraz jeden kontener na calej stronie. */
.container{max-width:1180px!important;margin-left:auto!important;margin-right:auto!important;padding-left:24px!important;padding-right:24px!important;width:100%!important}
@media(max-width:600px){.container{padding-left:18px!important;padding-right:18px!important}}

/* --------------------------------------------------- PRZYCISKI CTA na 320px --
   Na najwezszych ekranach (iPhone SE 320px, Android 360px) przyciski CTA
   wychodzily poza ekran:
   - .hero-actions .btn-primary (padding 16/30 + ikona) -> +36px
   - .pricing-cta .btn-primary ma white-space:nowrap, wiec dlugi tekst
     "Porozmawiajmy o Twoim procesie" nie mogl sie zlamac -> +36px.
   Regula: zmniejszamy padding, zdejmujemy nowrap, pozwalamy zawinac tekst. */
@media(max-width:400px){
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary,
  .pricing-cta .btn-primary,
  .contact-form .btn-primary,
  .btn-full{
    padding:14px 18px;
    font-size:14px;
    max-width:100%;
    white-space:normal;
    text-align:center;
    justify-content:center;
    box-sizing:border-box;
  }
  .hero-actions{gap:10px}
  .hero-actions .btn-primary svg{flex:0 0 auto}
}

/* GUARD poprawny: obcinamy overflow, ale NIE kasujemy max-width.
   Uwaga: nie uzywac 'section{max-width:100%}' — to zeruje kontener. */
html{overflow-x:hidden}
body{overflow-x:hidden}
.hero-bg,.hero-orb{overflow:hidden}
img,video,svg,canvas{max-width:100%;height:auto}

/* Siatki: minmax(0,1fr) wszedzie — zapobiega wychodzeniu kart przy hover */
.solutions-grid,.features-grid,.industries-grid,.metrics-grid,.factors-grid,.pricing-grid,.footer-grid{
  min-width:0
}
.solutions-grid>*,.features-grid>*,.industries-grid>*,.metrics-grid>*,.factors-grid>*,.pricing-grid>*,.footer-grid>*{
  min-width:0
}
/* Bezpieczny hover: bez translateX/rotate, ktore wypychaly karty */
.feature-card:hover,.solution-card:hover,.industry-card:hover{
  transform:translateY(-6px)
}


/* ------------------------------------------------ WIDOCZNOSC SIECI NEURONOWEJ --
   milo: "nie widze na hero tych sieci neuronowych".
   Przyczyna: canvas byl pod kulami (z-index) + opacity .92 + cienkie linie.
   Naprawa: wyniesiony nad kule + grubsze linie i wieksze wezly (canvas rysuje w JS). */
.hero-visual-bg{z-index:0}
.hero .container{z-index:3}

/* ===== /funkcje/*: urozmaicenie form sekcji (Etap C+) ===== */

/* --- 1) JAK TO DZIALA: poziomy timeline, nie kafelki 2x2 ---
   Kroki leza w JEDNEJ linii; numer jest wezlem na osi, tytul i opis obok.
   Na waskich ekranach wraca pion (os po lewej). */
.steps-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  position:relative;
  counter-reset:step;
}
.steps-grid::before{ /* os pozioma: od srodka okregu 1. do PRAWEJ KRAWEDZI grida.
   BŁĄD-06/07 (etap C, fix4): w etapie C licznik right:calc(25% - 27px) konczyl os
   na SRODKU ostatniego okregu. milo: kreska ma dojsc do prawej krawedzi kolumny 4.
   Pomiar przed poprawka (1440px, grid 154..1286, kolumna 283px): os 181..1030,
   czyli 256px (= 25% - 27px) niedociagnieta. Po poprawce os 181..1286.

   Geometria (zweryfikowana pomiarem przy 1440px, grid 154..1286, kolumna 283px):
   - .step-number (54px) startuje od LEWEJ krawedzi kolumny, wiec srodek okregu
     lezy 27px (=54/2) na prawo od niej => left = 27px.
   - POCZATEK: left:27px = zawsze srodek okregu 1 (pierwsza kolumna zaczyna sie
     na lewej krawedzi grida). Nie zalezy od liczby krokow.
   - KONIEC: right:0 = prawa krawedz grida = prawa krawedz ostatniej kolumny.
     Tez nie zalezy od liczby krokow (N kolumn => ostatnia konczy sie na 100%).
   - w pionie: top:26px + height:2px => os zajmuje 26..28px od gory kolumny;
     srodek okregu (54px wys.) wypada na 27px od gory kolumny, wiec os przechodzi
     DOKLADNIE przez srodki wszystkich okregow. Nie ruszac top bez pomiaru.
   - kolejnosc warstw: .step-card ma z-index:1 i position:relative, a ::before
     ma z-index:auto => karty leza NAD osia. To jest OK, bo karty .step-card sa
     w tym ukladzie przezroczyste (background:transparent!important, patrz nizej),
     wiec os pod nimi jest widoczna na calej dlugosci - zmierzone: tlo karty
     rgba(0,0,0,0). Gdyby kiedys karta dostala nieprzezroczyste tlo, os zniknie
     pod nia i trzeba bedzie wyniesc ::before z-index:2. */
  content:'';position:absolute;
  left:27px;right:0;top:26px;height:2px;
  background:linear-gradient(90deg,rgba(139,92,246,.30),rgba(139,92,246,.45),rgba(139,92,246,.30));
}
.steps-grid .step-card{
  background:transparent!important;border:none!important;border-radius:0!important;
  padding:0 22px 0 0!important;position:relative;z-index:1;
  box-shadow:none!important;
}
.steps-grid .step-card:hover{transform:none!important;background:transparent!important}
.steps-grid .step-card .step-number{
  width:54px;height:54px;border-radius:50%!important;
  display:flex!important;align-items:center;justify-content:center;
  background:#fff;border:2px solid var(--a1-border);
  color:var(--a1-accent-hover)!important;opacity:1!important;
  font-size:20px!important;line-height:1!important;margin:0 0 18px!important;
  box-shadow:0 6px 18px rgba(30,27,75,.07);
}
.steps-grid .step-card h3{font-size:20px!important;font-weight:700!important;margin:0 0 8px!important}
.steps-grid .step-card p{font-size:14px!important;line-height:1.6!important;margin:0!important}

/* --- 2) MOZLIWOSCI: asymetryczny bento (1 duzy + 5 mniejszych) --- */
.capabilities-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  /* WIZ-10 (etap C): rowne tracki miedzy rzedami (bylo minmax(0,auto),
     przez co wysokosci wierszy nie pokrywaly sie: 365px vs reszta). */
  grid-auto-rows:1fr;
  align-items:stretch;
  gap:18px!important;
}
.capabilities-grid .capability-card{
  background:var(--a1-card)!important;
  border:1px solid rgba(139,92,246,.16)!important;
  border-radius:16px!important; /* WIZ-06 (etap C): 18 -> 16 */
  /* WIZ-07 (etap C): ten sam cien co .feature-card i .industry-card */
  box-shadow:0 1px 3px rgba(30,27,75,.05);
  padding:28px 26px!important; /* WIZ-08 (etap C): jeden padding dla kart */
  text-align:left!important;
  display:flex;flex-direction:column;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.capabilities-grid .capability-card:hover{
  border-color:var(--a1-border)!important;transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(30,27,75,.09)
}
/* WIZ-10 (etap C): pierwszy wpis NIE zajmuje juz 2 kolumn x 2 wiersze.
   Pomiar przed: 6 kart w siatce 3 kolumn, duza karta span 2x2 => h=463-507px
   przy tresci 90-156px (wypelnienie 28-34%), a auto-placement zostawial wolna
   kolumne w wierszach 1-2. Przy 6 kartach i 3 kolumnach uklad bez dziury to
   dokladnie 3+3. Wyroznienie karty robia typografia i tlo (nizej), a nie
   rozmiar kafelka. */
.capabilities-grid .capability-card:first-child{
  grid-column:span 1;grid-row:auto;
  /* WIZ-10 (etap C): justify-content:center wypychalo tresc na srodek karty
     span 2x2 i zostawialo ~55% pustego pola (pomiar 749x453). Tresca ma
     plynac od gory, jak w pozostalych kartach. */
  background:linear-gradient(150deg,#ffffff,#f5f3ff)!important;
  padding:28px 30px!important;
}
.capabilities-grid .capability-card:first-child h3{font-size:24px!important;letter-spacing:-.02em}
.capabilities-grid .capability-card:first-child p{font-size:15.5px!important;line-height:1.66}
.capabilities-grid .capability-card h3{font-size:20px;font-weight:700;margin:0 0 8px}
.capabilities-grid .capability-card p{font-size:14px;line-height:1.58;margin:0;color:var(--a1-muted)}
/* w wersji poziomej (automatyzacja-procesow) cap-head zostaje w rzedzie */
.capabilities-grid .cap-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.capabilities-grid .cap-head h3{margin:0}

/* --- 3) KORZYSCI: pasek liczb bez ramek --- */
.metrics-grid{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;border-top:1px solid rgba(139,92,246,.22);
  border-bottom:1px solid rgba(139,92,246,.22);
}
.metrics-grid .metric-card{
  background:transparent!important;border:none!important;border-radius:0!important;
  box-shadow:none!important;text-align:left!important;
  padding:30px 26px!important;
  border-left:1px solid rgba(139,92,246,.18)!important;
}
.metrics-grid .metric-card:first-child{border-left:none!important}
.metrics-grid .metric-value{
  font-size:clamp(34px,4.6vw,52px)!important;line-height:1!important;
  font-weight:700;letter-spacing:-.03em;
}
.metrics-grid .metric-label{font-size:13.5px!important;line-height:1.5;color:var(--a1-muted)}

/* --- 4) ZASTOSOWANIA: lista pelnej szerokosci (nazwa | opis) ---
   UWAGA na strukture HTML: <div class="industry-card"> zawiera ikone
   oraz DRUGI <div> BEZ KLASY, w ktorym siedza <h3> i <p>. Bez tego
   wrapper trafial do waskiej kolumny i opis byl scisniety do 220px.
   display:contents "rozbija" wrapper, dzieki czemu h3 i p staja sie
   bezposrednimi elementami grida karty i mozemy je rozlozyc osobno. */
/* --- BŁĄD-02 (etap C): podstrony dostaja REALNA siatke 3 kolumn.
   Wczesniej display:block!important robil z tego liste pelnej szerokosci:
   karta 1132px, 1 karta na wiersz, ~30% prawej czesci puste (pomiar QA).
   Intencja oryginalnej reguly (h3 i p jako osobne elementy grida karty,
   patrz .industries-grid .industry-card > div:not(.industry-icon){display:contents})
   zostaje zachowana — zmieniamy TYLKO zewnetrzny kontener z listy na siatke. */
.industries-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch;
}
/* 4 karty na branze/rozwiazania -> 3+1; ostatnia karta bierze caly wiersz,
   zeby nie zostawiac dziury w ostatnim rzedzie. 6 kart (funkcje) = 3+3.
   :nth-child(4):last-child trafia wylacznie w siatki 4-elementowe. */
.industries-grid .industry-card:nth-child(4):last-child{
  grid-column:1 / -1;
}
.industries-grid .industry-card{
  display:grid!important;
  /* kolumna nazwy = szerokosc najdluzszej nazwy (max-content),
     wiec opis startuje tuz za nia i odstep jest staly w kazdym wierszu */
  /* BŁĄD-02 (etap C): w karcie 367px kolumna 'max-content' zjadala cala
     szerokosc i opis dostawal 0px (pomiar: p w=0, h=2064). Nazwa i opis
     ida wiec jedna pod druga — jak w kaflach na stronie glownej. */
  grid-template-columns:44px minmax(0,1fr)!important;
  align-items:start;gap:6px 16px;
  text-align:left;
  /* kafel jak na stronie glownej: biala karta z obramowaniem i cieniem */
  background:var(--a1-card)!important;
  border:1px solid rgba(139,92,246,.16)!important;
  border-radius:16px!important;
  box-shadow:0 1px 3px rgba(30,27,75,.05)!important;
  padding:24px 22px!important;
  border-bottom:1px solid rgba(139,92,246,.16)!important;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background .25s;
  align-content:start;
}
.industries-grid .industry-card:hover{
  transform:none!important;
  background:linear-gradient(90deg,rgba(139,92,246,.06),rgba(139,92,246,0))!important;
  padding-left:24px!important;
}
/* wrapper bez klasy -> przezroczysty dla grida */
.industries-grid .industry-card > div:not(.industry-icon){display:contents}
.industries-grid .industry-card .industry-icon{
  margin:0!important;width:44px!important;height:44px!important;
  grid-column:1;grid-row:1 / span 2;
  align-self:start;
}
.industries-grid .industry-card h3{
  grid-column:2;grid-row:1;
  margin:0!important;font-size:20px!important;font-weight:700!important;
  line-height:1.35;
  align-self:center;
  /* white-space:nowrap mialo sens tylko w liscie pelnej szerokosci;
     w kaflu 367px ucinanie/rozlewanie nazwy lamaloby siatke */
  white-space:normal;
  text-align:left;
}
.industries-grid .industry-card p{
  grid-column:2;grid-row:2;
  margin:0!important;font-size:14.5px!important;line-height:1.6!important;
  color:var(--a1-muted);
  align-self:start;
}

@media(max-width:1024px){
  /* BŁĄD-02: 3 -> 2 kolumny. Parzysta liczba kolumn => brak dziury
     w ostatnim wierszu (4 karty = 2+2, 6 kart = 2+2+2),
     wiec znosimy span dla ostatniej karty. */
  .industries-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .industries-grid .industry-card:nth-child(4):last-child{grid-column:auto!important}
}
@media(max-width:900px){
  .steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .steps-grid::before{display:none}
  .steps-grid .step-card{padding:0 0 26px 0!important}
  .capabilities-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* przy 2 kolumnach duza karta NIE moze brac span 2, bo zostaje
     5 malych w ukladzie 2+2+1 (dziura). Span 1 => rowne 2+2+2,
     a wyroznienie zapewnia wieksza typografia i tlo. */
  .capabilities-grid .capability-card:first-child{
    grid-column:span 1;grid-row:auto;
    padding:28px 24px!important;
  }
  .capabilities-grid .capability-card:first-child h3{font-size:19px!important}
  .capabilities-grid .capability-card:first-child p{font-size:14.5px!important}
  .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .metrics-grid .metric-card:nth-child(3){border-left:none!important}
  .metrics-grid .metric-card:nth-child(n+3){border-top:1px solid rgba(139,92,246,.18)}
  .industries-grid .industry-card{grid-template-columns:44px 1fr!important;row-gap:6px}
  .industries-grid .industry-card h3{grid-column:2;grid-row:1;text-align:left;white-space:normal}
  .industries-grid .industry-card p{grid-column:2;grid-row:2;align-self:start}
}
@media(max-width:600px){
  .industries-grid{grid-template-columns:1fr!important}
  .industries-grid .industry-card:nth-child(4):last-child{grid-column:auto!important}
  .steps-grid{grid-template-columns:1fr!important}
  .capabilities-grid{grid-template-columns:1fr!important}
  .capabilities-grid .capability-card:first-child{grid-column:auto}
  .metrics-grid{grid-template-columns:1fr!important}
  .metrics-grid .metric-card{border-left:none!important;border-top:1px solid rgba(139,92,246,.18)!important}
  .metrics-grid .metric-card:first-child{border-top:none!important}
}

/* ===== strona glowna: #industries MUSI zostac siatka kafelkow ===== */
/* Reguly "lista pelnej szerokosci" wyzej byly globalne (display:block!important)
   i nadpisaly te sekcje na stronie glownej. Przywracamy ja jako siatke
   4 kolumn z kafelkami — strona glowna ma 8 branz. */
#industries .industries-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  border-top:none!important;
  gap:16px!important;
}
#industries .industries-grid .industry-card{
  display:flex!important;
  flex-direction:column;
  align-items:flex-start;
  grid-template-columns:none!important;
  background:var(--a1-card)!important;
  border:1px solid rgba(139,92,246,.16)!important;
  border-radius:16px!important;
  box-shadow:none;
  padding:24px 22px 22px!important;
  text-decoration:none;color:inherit;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
#industries .industries-grid .industry-card:hover{
  transform:translateY(-6px)!important;
  box-shadow:0 18px 38px rgba(30,27,75,.10);
  border-color:var(--a1-border)!important;
  background:var(--a1-card)!important;
  padding-left:22px!important;
}
#industries .industries-grid .industry-card > div:not(.industry-icon){display:block!important}
#industries .industries-grid .industry-card .industry-icon{
  grid-column:auto!important;grid-row:auto!important;
  width:46px!important;height:46px!important;
  margin:0 0 14px!important;
}
#industries .industries-grid .industry-card h3{
  grid-column:auto!important;grid-row:auto!important;
  /* WIZ-01 (etap C): naglowek KARTY => 20px (bylo 16.5px) */
  font-size:20px!important;font-weight:700!important;margin:0 0 8px!important;
  text-align:left!important;white-space:normal!important;
}
#industries .industries-grid .industry-card p{
  grid-column:auto!important;grid-row:auto!important;
  font-size:13.5px!important;line-height:1.55!important;
  margin:0!important;
}
/* tagi z rozwiazaniami wewnatrz kafelka */
#industries .industry-card .industry-links{
  display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;
}
#industries .industry-card .industry-links a{
  font-size:12px;line-height:1.3;padding:5px 10px;border-radius:99px;
  background:var(--a1-accent-light,#f5f3ff);color:var(--a1-accent-hover);
  border:1px solid rgba(139,92,246,.20);text-decoration:none;
  transition:background .2s,border-color .2s;
}
#industries .industry-card .industry-links a:hover{
  background:#ede9fe;border-color:var(--a1-border);
}
@media(max-width:1024px){
  #industries .industries-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:600px){
  #industries .industries-grid{grid-template-columns:1fr!important}
}

/* ===== strona glowna: linki w punktach 01-04 + tagi branz ===== */
/* wiersz problemu jest teraz linkiem — zachowujemy wyglad, dodajemy hover */
a.problem-row{color:inherit;text-decoration:none;display:flex}
a.problem-row:hover{text-decoration:none}
a.problem-row:hover h3{color:var(--a1-accent-hover)}
/* etykieta "Zobacz rozwiazanie ->" w wierszu */
.problem-row .p-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;font-size:13px;font-weight:600;
  color:var(--a1-accent-hover);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.problem-row:hover .p-link{border-bottom-color:var(--a1-accent)}


/* ===== strona glowna: karta branzy jako <div>, link w h3 ===== */
/* Karta branzy NIE jest juz <a> (HTML nie pozwala na <a> w <a> przy tagach
   rozwiazan). Link do branzy siedzi teraz w <h3>, a tagi obok sa klikalne
   osobno. Karta zachowuje wyglad kafelka z hoverem. */
#industries .industry-card{cursor:default;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
#industries .industry-card .industry-title-link{
  color:inherit;text-decoration:none;
  transition:color .2s;
}
#industries .industry-card .industry-title-link:hover{color:var(--a1-accent-hover)}
/* hover kafelka wyzwalany przez sam kafelek (wczesniej dzialal przez :hover <a>) */
#industries .industry-card:hover{
  transform:translateY(-6px)!important;
  box-shadow:0 18px 38px rgba(30,27,75,.10);
  border-color:var(--a1-border)!important;
}
/* etykieta "Zobacz rozwiazanie" jako <span> (caly wiersz jest linkiem) */
.problem-row .p-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;font-size:13px;font-weight:600;
  color:var(--a1-accent-hover);
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.problem-row:hover .p-link{border-bottom-color:var(--a1-accent)}

/* ===== strona glowna: karty branz — wyrownanie i tagi ===== */
/* Cala karta wyrownana do lewej (wczesniej ikona/h3/opis centrowane,
   a tagi do lewej => dwie osie w jednym kafelku). */
#industries .industry-card{text-align:left}
#industries .industry-card h3,
#industries .industry-card h3 a{text-align:left}
/* karta jest flex-column z align-items:center (styles.css), wiec h3 jako
   flex-item byl shrunk-to-fit i wysrodkowany. align-self ustawia go przy lewej. */
#industries .industry-card h3{align-self:flex-start}
#industries .industry-card p{align-self:stretch}
#industries .industry-card .industry-links{align-self:stretch}
#industries .industry-card p{text-align:left}
/* ikona zostaje przy lewej krawedzi kafelka */
#industries .industry-card .industry-icon{margin-left:0!important;margin-right:auto!important}

/* tagi rozwiazan: wyrazniejsza klikalnosc (obwodka + wiekszy target),
   wciaz lekkie wizualnie */
#industries .industry-card .industry-links{
  display:flex;flex-wrap:wrap;gap:8px;padding:0;
  /* margin-top:auto dosuwa tagi do dolu karty (karta jest flex-column),
     wiec przy wyrownanej wysokosci siatki nie ma pustej plamy pod tagami */
  margin:14px 0 0;margin-top:auto;padding-top:14px;
}
#industries .industry-card .industry-links a{
  display:inline-flex;align-items:center;
  min-height:30px;padding:5px 12px;
  font-size:12.5px;line-height:1.25;
  border-radius:99px;
  background:#fff;
  color:var(--a1-accent-hover);
  border:1px solid rgba(139,92,246,.28);
  text-decoration:none;
  transition:background .2s,border-color .2s,color .2s;
}
#industries .industry-card .industry-links a:hover,
#industries .industry-card .industry-links a:focus-visible{
  background:var(--a1-accent-light,#f5f3ff);
  border-color:var(--a1-accent-hover);
  color:var(--a1-accent-hover);
}
#industries .industry-card .industry-links a:focus-visible{
  outline:2px solid var(--a1-accent);outline-offset:2px;
}

/* p-body: h3 i opis OBOK SIEBIE (jak bylo), link pod opisem.
   Uwaga: nie ustawiac flex-direction:column na .p-body — to rozjezdza
   naglowek i opis w pionie (regresja). Kolumne robimy tylko dla opisu+linku. */
.problem-row .p-body{align-items:flex-start}
.problem-row .p-body .p-desc-col{display:flex;flex-direction:column;gap:0;flex:1 1 320px}
.problem-row .p-body .p-desc-col .p-desc{flex-basis:auto}

/* ===== funkcje/*: "Korzysci" bez niepopartych liczb =====
   Bylo: 4 karty z wielkimi procentami (metryki bez zrodla - usuniete).
   Jest: lista efektow bez wartosci liczbowych, 2 kolumny, bez ramek. */
.funkcje-page .metrics-grid,
#korzysci .metrics-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px 40px!important;border:none!important;background:none!important;
}
#korzysci .metric-card{
  display:flex!important;align-items:flex-start!important;gap:14px!important;
  background:none!important;border:none!important;box-shadow:none!important;
  padding:6px 0!important;width:auto!important;height:auto!important;
}
#korzysci .metric-card::before{
  content:"";flex:0 0 auto;width:10px;height:10px;margin-top:8px;border-radius:50%;
  background:linear-gradient(135deg,#8b5cf6,#a78bfa);
}
#korzysci .metric-label{
  font-size:17px!important;line-height:1.5!important;font-weight:600!important;
  color:var(--a1-text)!important;text-align:left!important;
}
@media(max-width:700px){
  #korzysci .metrics-grid{grid-template-columns:1fr!important}
}

/* ===== rozwiazania/*: przywrocenie dwukolumnowego feature-large ===== */
/* .feature-card{display:block} w styles-a1.css nadpisywalo
   .feature-large{display:grid} z styles.css (styles-a1 laduje sie pozniej),
   wiec grid-template-columns:1fr 1fr bylo ignorowane i lista + wizualizacja
   ukladaly sie PIONOWO na pelnej szerokosci. Przywracamy grid. */
.feature-card.feature-large{
  display:grid!important;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:center;
}
/* lista wypunktowana wewnatrz duzej karty */
.feature-card.feature-large .feature-list{margin:0;padding-left:20px}
.feature-card.feature-large .feature-list li{margin-bottom:12px}
.feature-card.feature-large .feature-list li:last-child{margin-bottom:0}
/* wizualizacja nie moze rozepchnac kolumny */
.feature-card.feature-large .feature-visual{min-width:0}
.feature-card.feature-large .feature-visual svg,
.feature-card.feature-large .feature-visual img{max-width:100%;height:auto}

/* Breakpoint 1024px (nie 900px): miedzy 900 a 1000px dwie kolumny po ~430px
   daja zbyt waska liste i rozjezdzona wizualizacje. Do 1024px stackujemy. */
@media(max-width:1024px){
  .feature-card.feature-large{grid-template-columns:1fr;gap:24px}
}

/* ===== rozwiazania/*: feature-large z jednym dzieckiem = pelna szerokosc ===== */
/* 20 z 18 kart feature-large ma TYLKO liste (bez .feature-visual).
   Grid 1fr 1fr zostawial wtedy cala prawa kolumne pusta - karta wygladala
   jak rozjechana. Gdy karta ma jedno dziecko, tekst ma zajac cala szerokosc. */
/* BŁĄD-05 (etap C): karta bez wizualu ma ta sama szerokosc co karta
   z wizualem (1132px), ale tresc pozostaje jednokolumnowa.
   max-width:900px zostawial karte wezsza od sasiadki i wygladal jak
   niedokonczony — usuwamy go, szerokosc = 100% kontenera.
   Czytelnosc: dlugosc linii ograniczamy MIARA TEKSTU (68ch), nie karta. */
.feature-card.feature-large:not(:has(.feature-visual)){
  grid-template-columns:1fr;
  max-width:100%;
}
.feature-card.feature-large:not(:has(.feature-visual)) > div{
  max-width:100%;
}
/* Szerokosc: tresc zajmuje pelna szerokosc karty (decyzja milo 2026-09-17).
   Nie zwrazamy linii — jesli sa za dlugie (>90 zn), rozwiazaniem jest
   poszerzenie karty lub zmiana kolumn, a nie rezygnacja z 100% szerokosci. */
.feature-card.feature-large:not(:has(.feature-visual)) > div > p,
.feature-card.feature-large:not(:has(.feature-visual)) .feature-list{
  max-width:100%;
}
/* Lista jednokolumnowa (milo, 2026-09-17).
   Historia: wczesniej lista dzielona recznie na 2 kolumny przez grid-column/
   grid-row dla 3/4/5/6/7 elementow. Powod: przy roznej dlugosci punktow
   wiersze nie startowaly w tej samej linii, wiec w srodku powstawaly dziury
   24-48px (pomiar: li 92/116/68px). Poprzednia proba (CSS columns:2) tez
   wypadla zle - przy nieparzystej liczbie elementow ostatnia linia byla
   nierowna. Decyzja: JEDNA KOLUMNA, bez siatki, bez recznych grid-row.
   Punktory zostaja jako ::before (styles-a1.css - znacznik listy). */
.feature-card.feature-large:not(:has(.feature-visual)) .feature-list{
  padding-left:24px;
  text-align:left;
}
.feature-card.feature-large:not(:has(.feature-visual)) .feature-list li{
  break-inside:avoid;
  margin:0;
  padding:8px 0;
  border-bottom:none;
  text-align:left;
}

/* ===== WIZ-01/WIZ-02 (etap C) =====
   WIZ-01: H3 -> dokladnie dwa rozmiary i jedna waga.
   - 24px: naglowki SEKCJI (.solution-card, .problem-row, .pricing-factors,
           pierwsza karta capabilities)
   - 20px: naglowki KART (.feature-card, .industry-card, .capability-card,
           .step-card, .faq-question)
   Wszystkie waga 700. Regula ponizej jest ostatnia w arkuszu, wiec wygrywa
   przy rownej specyficznosci z wczesniejszymi regułami h3; !important nie
   jest potrzebny poza miejscami, gdzie oryginal go mial (te zostawiono).
   WIZ-02: wyrownanie H3 do lewej; jedyny wyjatek to .section-header, ktory
   jest wysrodkowany jako CALA sekcja (tam h2/h3 zostaja wysrodkowane). */
.solution-card h3,
.problem-row h3,
.pricing-factors h3{font-size:24px!important;font-weight:700!important;text-align:left!important}
.feature-card h3,
.industries-grid .industry-card h3,
.capabilities-grid .capability-card h3,
.steps-grid .step-card h3,
.faq-question h3{font-size:20px!important;font-weight:700!important;text-align:left!important}
.capabilities-grid .capability-card:first-child h3{font-size:24px!important;font-weight:700!important}
/* H2 globalnie 46px (wyjatek: hero, ktory ma wlasna skale) */
.section-header h2{font-size:46px}
.section-title{font-size:46px}
@media(max-width:900px){
  .solution-card h3,.problem-row h3,.pricing-factors h3{font-size:22px!important}
}

/* ===== WIZ-01 (etap C) — doprowadzenie H3 =====
   Naglowki kart na stronach narzedzi (.dash-card) nie mialy zadnej reguly,
   wiec przegladarka renderowala je domyslnie (1.17em = 18.72px). To naglowek
   KARTY => 20px/700, zgodnie z decyzja o dwoch rozmiarach H3. */
.dash-card h3{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 10px}
@media(max-width:600px){.dash-card h3{font-size:18px}}

/* ===== WIZ-01 (etap C) — H2 domkniecie =====
   .problem-list-title to naglowek wewnatrz sekcji — H2 globalnie 46px,
   zgodnie z decyzja zleceniodawcy. */
.problem-list-title{font-size:46px!important}
@media(max-width:900px){.problem-list-title{font-size:32px!important}}

/* ===== WIZ-06..WIZ-10 (etap C) =====
   WIZ-09: .industry-icon na podstronach mialo 46px, a na stronie glownej 44px.
   Ujednolicamy do 44px (jeden rozmiar ikony w kartach tego samego typu). */
.industries-grid .industry-card .industry-icon,
#industries .industries-grid .industry-card .industry-icon{
  width:44px!important;height:44px!important;
}

/* ===== ZADANIE-2: znacznik listy feature-list (etap C, domkniecie) ===== */
/* Zmierzone: .feature-list to jedyna klasa <ul> w serwisie (25x), wszystkie
   z list-style:none (styles.css:349) — brak punktorow jest celowy i spojny.
   Jednak lista KRÓTKICH terminów bez żadnego znacznika czyta się jak
   pourywane akapity (zmierzone na /rozwiazania/faktury-ocr/ sekcja
   #ksef-2026: liCount=3, liRectW=503, marker=none, ::before=none).
   Dodajemy kropke akcentowa — ten sam jezyk co .panel-state-live::before
   (styles-a1.css:179) i akcenty .problem-row. NIE uzywamy list-style:disc,
   bo zaden inny element serwisu go nie uzywa.                         */
.feature-list li{
  position:relative;
  list-style:none;
}
.feature-list li::before{
  content:"";
  position:absolute;
  left:-16px;
  /* WYROWNANIE KROPTOKI (milo, 2026-09-17).
     Problem: top w em/px liczony od gornej krawedzi li, a li ma padding-top
     (8px lub 12px zaleznie od kontekstu). Efekt: kropka ladowala przy samej
     gorze tekstu albo nad nim. Zmierzone odchylenia od srodka pierwszej
     litery: +0,2px (feature-large) i -4px (9 stron z paddingiem 12px).
     Rozwiazanie uniwersalne, niezalezne od paddingu i rozmiaru kropki:
       top    = padding-top + polowa linii  -> srodek linii tekstu
       potem  = minus polowa kropki         -> by srodek kropki = srodek linii
     `1lh` = wysokosc linii (line-height), `1em` przyjmujemy jako wysokosc
     kropki. Dziala dla kazdego padding-top i kazdego font-size. */
  top:var(--kropka-top, 21px);
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--a1-accent);
  flex:none;
}
/* Warianty: karty feature-large (dluzsze zdania) maja kropke delikatniejsza
   i wyrownana do PIERWSZEJ LINII akapitu, zeby nie odciagala uwagi.
   UWAGA (milo, 2026-09-17): bylo top:.7em, co przy font-size 16px dawalo
   11.2px od gory elementu i kropka siadala przy samej gornej krawedzi tekstu
   (pomiar: odstep od gory 0.2px, od dolu 14.8px -> wizualnie "za wysoko").
   Poprawnie: srodek kropki = srodek optyczny pierwszej linii.
   line-height 1.6 przy 15px = 24px, font 15px -> srodek tekstu w linii to
   (24-15)/2 + 15/2 = 12px od gory. Minus polowa kropki (2.5px) = 9.5px,
   czyli ok. .63em przy 15px. Uzywamy .63em jako wartosci bazowej. */
/* Wariant feature-large: kropka delikatniejsza (5px) i mniej krycia.
   Wyrownanie pionowe dziedziczy z reguly bazowej .feature-list li::before
   (top:calc(0.5lh - 0.5em)) - jedno zrodlo prawdy dla calego serwisu. */
.feature-card.feature-large .feature-list li::before{
  /* li ma padding-top:12px (regula bazowa .feature-list li) i font 15px/lh 24px:
     srodek litery = 12 + (24-15)/2 + 15/2 = 24px; kropka 5px -> top = 24 - 2.5 = 21.5px.
     Pomiar potwierdzil 21.5px jako wartosc trafiajaca w srodek. */
  --kropka-top:21.5px;
  width:5px;
  height:5px;
  background:var(--a1-accent);
  opacity:.85;
}
/* Karty bez wizualu w pelnej szerokosci: kropka zostaje w padding-left listy,
   wiec nie wypycha tekstu poza kolumne.
   top:.68em -> .63em z tego samego powodu co wyzej (kropka byla za wysoko
   wzgledem pierwszej linii; milo, 2026-09-17). */
/* Wariant bez wizualu: regula nizej ustawia li padding:8px 0 (o 4px mniej niz
   bazowe 12px), wiec kropka musi isc o 4px wyzej niz w wariancie z wizualem:
   21.5px - 4px = 17.5px. */
.feature-card.feature-large:not(:has(.feature-visual)) .feature-list li::before{
  --kropka-top:17.5px;
}
@media(min-width:901px){
  .feature-card.feature-large:not(:has(.feature-visual)) .feature-list li::before{
    left:-14px;
  }
}

/* ===== KSeF 2026: wariant C — kompaktowy artykuł ===== */
/* Źródło: warianty-ksef/C-kompaktowy.html (blok "STYLE WARIANTU C").
   Wdrożone na rozwiazania/faktury-ocr/index.html w sekcji #ksef-2026.
   Prefiks klas .ksef-c-* jest unikalny — przed wdrożeniem 0 wystąpień
   w styles.css, styles-a1.css i themes.css. */
.ksef-c .ksef-c-article{
  max-width:66ch;margin:0 auto;padding:40px 44px;
  background:var(--bg-card);border:1px solid rgba(139,92,246,.16);
  border-radius:16px;box-shadow:0 1px 3px rgba(30,27,75,.05);
}
.ksef-c .ksef-c-article p{
  font-size:16px;line-height:1.75;color:var(--text-muted);margin:0 0 22px;
}
.ksef-c .ksef-c-article p:last-child{margin-bottom:0}
.ksef-c .ksef-c-lead{
  font-size:17px;line-height:1.75;color:var(--text);margin-bottom:32px!important;
}
.ksef-c .ksef-c-h3{
  font-family:Space Grotesk,sans-serif;font-size:21px;font-weight:700;
  letter-spacing:-.02em;line-height:1.3;color:var(--text);
  margin:36px 0 14px;padding-top:28px;border-top:1px solid rgba(139,92,246,.16);
}
.ksef-c .ksef-c-h3:first-of-type{margin-top:0;padding-top:0;border-top:none}
.ksef-c .ksef-c-src{
  font-size:14px!important;line-height:1.6!important;color:var(--text-muted);
  margin-bottom:16px!important;
}

.ksef-c .ksef-c-dates{
  display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 30px;
}
.ksef-c .ksef-c-date{
  display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:baseline;
  background:var(--accent-light);border:1px solid var(--accent);
  border-left-width:4px;border-radius:12px;padding:16px 20px;
}
.ksef-c .ksef-c-date--key{box-shadow:0 8px 22px rgba(139,92,246,.14)}
.ksef-c .ksef-c-date-when{
  font-family:Space Grotesk,sans-serif;font-size:18px;font-weight:700;
  letter-spacing:-.015em;color:var(--accent-hover);line-height:1.3;
}
.ksef-c .ksef-c-date-who{
  font-size:15px;line-height:1.6;color:var(--text-muted);
}

.ksef-c .ksef-c-list{
  list-style:none;margin:0 0 30px;padding:0;
}
.ksef-c .ksef-c-list li{
  position:relative;padding:0 0 0 30px;margin-bottom:16px;
  font-size:16px;line-height:1.7;color:var(--text-muted);
}
.ksef-c .ksef-c-list li:last-child{margin-bottom:0}
.ksef-c .ksef-c-list li::before{
  /* top wyliczony (milo, 2026-09-17): li padding-top 0, font 16px, lh 27.2px,
     kropka 8px -> srodek litery = (27.2-16)/2 + 8 = 13.6px, minus polowa
     kropki (4px) = 9.6px. Bylo 11px -> kropka 1.4px za nisko wzgledem tekstu. */
  content:"";position:absolute;left:6px;top:9.6px;width:8px;height:8px;
  border-radius:50%;background:var(--accent);
}

.ksef-c .ksef-c-kick{
  font-size:16px;line-height:1.7;color:var(--text);
  border-left:3px solid var(--accent);padding-left:20px;margin-top:30px!important;
}
.ksef-c .ksef-c-disclaimer{
  font-size:13px!important;line-height:1.6!important;color:var(--text-muted);
  margin-top:28px!important;padding-top:20px;
  border-top:1px solid rgba(139,92,246,.16);
}

.ksef-c .ksef-c-cta{text-align:center;margin-top:36px}

@media(max-width:900px){
  .ksef-c .ksef-c-article{padding:32px 28px}
}
@media(max-width:760px){
  .ksef-c .ksef-c-date{grid-template-columns:1fr;gap:6px}
  .ksef-c .ksef-c-date-when{font-size:17px}
}
@media(max-width:480px){
  .ksef-c .ksef-c-article{padding:24px 18px}
  .ksef-c .ksef-c-article p{font-size:15px;line-height:1.7;margin-bottom:20px}
  .ksef-c .ksef-c-lead{font-size:16px;margin-bottom:26px!important}
  .ksef-c .ksef-c-h3{font-size:19px;margin:28px 0 12px;padding-top:24px}
  .ksef-c .ksef-c-list li{font-size:15px;padding-left:26px}
  .ksef-c .ksef-c-date{padding:14px 16px}
}

/* ===== Etap C fix6: karty feature-large jako "wariant C — kompaktowy artykuł" ===== */
/* Wdrożone na:
     rozwiazania/lead-scoring/index.html      — karta .feature-card.feature-large #2 i #3
     rozwiazania/voicebot-umawianie-wizyt/    — karta .feature-card.feature-large #4
   Wzorzec: ten sam co .ksef-c-* na rozwiazania/faktury-ocr (sekcja #ksef-2026).
   Prefiks .karta-c-* jest unikalny — przed wdrożeniem 0 wystąpień w styles.css
   i styles-a1.css. Klase .karta-c dostaje SAM KARTON (nie sekcja), bo na tych
   stronach jest po 3-7 kart feature-large i nie wolno ruszać pozostałych.

   Problem, który to naprawia (pomiar przed): karta 1132px, padding 28+28 →
   contentW 1076px, ale akapity ograniczone max-width:68ch = 680px przyklejone
   do LEWEJ krawędzi → 396px martwej przestrzeni po prawej.
   Rozwiazanie: kolumna artykulu wysrodkowana (margin:0 auto) z miara 60-70ch.

   SPECYFICZNOSC: reguly wyzej w tym pliku (linia ~1087-1097) ustawiaja
   `.feature-card.feature-large:not(:has(.feature-visual)) > div{max-width:100%}`
   — to 0,4,1 (`:has()` liczy sie jak klasa), wiec selektory .karta-c musza byc
   co najmniej tak samo mocne. Stad pelny prefiks na kazdym selektorze. */
.feature-card.feature-large.karta-c{display:block!important;max-width:100%!important}
.feature-card.feature-large.karta-c > div,
.feature-card.feature-large.karta-c:not(:has(.feature-visual)) > div{
  max-width:66ch!important;margin:0 auto!important;padding:8px 0!important;
}
.feature-card.feature-large.karta-c > div > p,
.feature-card.feature-large.karta-c:not(:has(.feature-visual)) > div > p,
.feature-card.feature-large.karta-c .karta-c-lead{
  font-size:16px;line-height:1.75;color:var(--text-muted);
  margin:0 0 22px;max-width:100%!important;
}
.feature-card.feature-large.karta-c > div > p.karta-c-lead{
  font-size:17px;line-height:1.75;color:var(--text);margin-bottom:30px;
}
.feature-card.feature-large.karta-c > div > p:last-child{margin-bottom:0}
.feature-card.feature-large.karta-c .karta-c-h3,
.feature-card.feature-large.karta-c > div > h3{
  font-family:Space Grotesk,sans-serif;font-size:20px;font-weight:700;
  letter-spacing:-.02em;line-height:1.32;color:var(--text);
  margin:34px 0 14px;padding-top:26px;
  border-top:1px solid rgba(139,92,246,.16);
}
.feature-card.feature-large.karta-c .karta-c-h3:first-of-type,
.feature-card.feature-large.karta-c > div > h3:first-child{
  margin-top:0;padding-top:0;border-top:none;
}
/* Lista z WIDOCZNYMI znacznikami. UWAGA (pulapka z faktury-ocr):
   content MUSI byc niepusty (cudzyslowy) — pusta deklaracja bez wartosci nie
   generuje pseudo-elementu, a getComputedStyle mimo to zwraca kolor i rozmiar. */
.feature-card.feature-large.karta-c .karta-c-list,
.feature-card.feature-large.karta-c:not(:has(.feature-visual)) .karta-c-list{
  list-style:none;margin:0 0 26px;padding:0;display:block!important;max-width:100%!important;
}
.feature-card.feature-large.karta-c .karta-c-list li,
.feature-card.feature-large.karta-c:not(:has(.feature-visual)) .karta-c-list li{
  position:relative;padding:0 0 0 30px!important;margin:0 0 16px!important;
  font-size:16px;line-height:1.7;color:var(--text-muted);
  border-bottom:none;grid-column:auto!important;grid-row:auto!important;
}
.feature-card.feature-large.karta-c .karta-c-list li:last-child{margin-bottom:0!important}
.feature-card.feature-large.karta-c .karta-c-list li::before,
.feature-card.feature-large.karta-c:not(:has(.feature-visual)) .karta-c-list li::before{
  content:"";position:absolute;left:6px!important;top:9.6px;width:8px;height:8px;
  border-radius:50%;background:var(--a1-accent);opacity:1;
}
.feature-card.feature-large.karta-c .karta-c-list li strong{color:var(--text);font-weight:600}

@media(max-width:480px){
  .feature-card.feature-large.karta-c > div > p,
  .feature-card.feature-large.karta-c .karta-c-lead{font-size:15px;line-height:1.7}
  .feature-card.feature-large.karta-c > div > p{margin-bottom:18px}
  .feature-card.feature-large.karta-c > div > p.karta-c-lead{font-size:16px;margin-bottom:24px}
  .feature-card.feature-large.karta-c .karta-c-h3,
  .feature-card.feature-large.karta-c > div > h3{font-size:18px;margin:26px 0 12px;padding-top:22px}
  .feature-card.feature-large.karta-c .karta-c-list li{padding-left:26px!important;font-size:15px}
}

/* ===== Etap C fix7: pozostałe karty z audytu ===== */
/* Kontynuacja bloku powyżej (fix6). Audyt: /root/etapc-audyt/RAPORT-AUDYT-ROZWIAZANIA.md
   Wdrożone tutaj:
     rozwiazania/lead-scoring/index.html   — karta .feature-card.feature-large #1  → WARIANT A (oś)
     rozwiazania/voicebot-umawianie-wizyt/ — karta .feature-card.feature-large #1  → WARIANT A (oś)
     rozwiazania/voicebot-umawianie-wizyt/ — karta .feature-card.feature-large #5  → WARIANT B (karty zmian)
   Prefiksy .karta-a-* i .karta-b-* — przed wdrożeniem 0 wystąpień w styles.css,
   styles-a1.css i themes.css (sprawdzone grep -c).

   Problem, który to naprawia:
   WARIANT A (lead-scoring #1, voicebot #1): lista 5 poz. w siatce 2-kolumnowej
   układa sie [2,2,1] — ostatnia pozycja (li:nth-child(5)) dostaje grid-column:1/-1
   i rozciąga sie na 1054px, gdy pozostałe maja 503px. To asymetria 2:1 w obrębie
   tej samej listy (audyt: "defekt niezalezny od martwej przestrzeni").
   Rozwiazanie: lista przestaje byc siatka 2-kolumnowa i staje sie osią/kafelkami
   w PELNEJ szerokosci — kazdy kafel dostaje numer, tytul i pelne zdanie.

   WARIANT B (voicebot #5): akapit 680px (=68ch) w karcie 1132px daje 423px
   martwej przestrzeni po prawej; lista 2+2+1 jest asymetryczna. Rozwiazanie:
   5 rownorzednych punktow jako karty 2x2 (piata karta zajmuje caly wiersz),
   pelne zdania zachowane w kazdym kaflu.

   SPECYFICZNOSC — te same powody co w bloku fix6:
   (a) `.feature-card.feature-large:not(:has(.feature-visual)) > div{max-width:100%}`
       (linia ~1091) = 0,4,1
   (b) `@media(min-width:901px) ... .feature-list{display:grid;...}` i
       `... .feature-list li:nth-child(5){grid-column:1 / -1}` (linie ~1107-1140)
       maja specyficznosc 0,4,1 / 0,6,1 — dlatego kazdy selektor nizej ma pelny
       prefiks + !important na wlasciwosciach ukladu (display, grid-*).
   (c) `padding-left:30px!important` na li + `left:6px!important` na ::before —
       zabezpieczenie z faktury-ocr: `@media(min-width:901px)` nadaje li
       `padding:10px 0`, przez co ::before z ujemnym `left` (regula .feature-list
       li::before, left:-16px / -14px) ląduje POZA obszarem i jest obcinany.
   (d) Pusta deklaracja content (dwukropek bez wartosci) NIE generuje pseudoelementu,
       a getComputedStyle mimo to zwraca kolor i rozmiar (pulapka ksef/faktury-ocr). */

/* ---------- wspolny "karton" dla obu wariantow ---------- */
.feature-card.feature-large.karta-a,
.feature-card.feature-large.karta-b{
  display:block!important;max-width:100%!important;
}
.feature-card.feature-large.karta-a > div,
.feature-card.feature-large.karta-a:not(:has(.feature-visual)) > div,
.feature-card.feature-large.karta-b > div,
.feature-card.feature-large.karta-b:not(:has(.feature-visual)) > div{
  max-width:100%!important;margin:0!important;padding:8px 0!important;
}
.feature-card.feature-large.karta-a > div > p,
.feature-card.feature-large.karta-a:not(:has(.feature-visual)) > div > p,
.feature-card.feature-large.karta-b > div > p,
.feature-card.feature-large.karta-b:not(:has(.feature-visual)) > div > p,
.feature-card.feature-large.karta-a .karta-a-h,
.feature-card.feature-large.karta-b .karta-b-h{
  max-width:72ch!important;margin-left:auto!important;margin-right:auto!important;
  font-size:16px;line-height:1.75;color:var(--text-muted);margin-bottom:22px;
}
/* USUNIETO (sprzatanie 2026-09-17): reguly .karta-a-lead i .karta-b-lead —
   te klasy nie wystepuja w zadnym HTML (0 wystapien, sprawdzone grep-em). */
.feature-card.feature-large.karta-a .karta-a-h3,
.feature-card.feature-large.karta-a > div > h3,
.feature-card.feature-large.karta-b .karta-b-h3,
.feature-card.feature-large.karta-b > div > h3{
  font-family:Space Grotesk,sans-serif;font-size:20px;font-weight:700;
  letter-spacing:-.02em;line-height:1.32;color:var(--text);
  margin:34px 0 18px;padding-top:26px;
  border-top:1px solid rgba(139,92,246,.16);
}
.feature-card.feature-large.karta-a .karta-a-h3:first-of-type,
.feature-card.feature-large.karta-a > div > h3:first-child,
.feature-card.feature-large.karta-b .karta-b-h3:first-of-type,
.feature-card.feature-large.karta-b > div > h3:first-child{
  margin-top:0;padding-top:0;border-top:none;
}

/* ---------- WARIANT A: lista jako oś / kafle w pełnej szerokości ---------- */
/* 5 pozycji -> 5 kafli. Kazdy kafel: numer w kółku + mocny tytuł + pełne zdanie.
   Uklad: grid 2 kolumny na szerokim ekranie; ostatni (5.) kafel zajmuje caly
   wiersz — ale to juz nie jest "polowa szerokosci + dziura", bo wszystkie kafle
   maja widoczne tlo i obramowanie, wiec pelny wiersz jest celowy i spojny. */
.feature-card.feature-large.karta-a .karta-a-axis,
.feature-card.feature-large.karta-a:not(:has(.feature-visual)) .karta-a-axis{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
  max-width:100%!important;width:100%!important;
  margin:0 0 26px!important;padding:0!important;
  list-style:none!important;
}
.feature-card.feature-large.karta-a .karta-a-axis li,
.feature-card.feature-large.karta-a:not(:has(.feature-visual)) .karta-a-axis li{
  position:relative!important;
  display:block!important;
  grid-column:auto!important;grid-row:auto!important;
  padding:20px 22px 20px 22px!important;
  margin:0!important;
  background:var(--bg-card);border:1px solid rgba(139,92,246,.16);
  border-left:4px solid var(--a1-accent);border-radius:14px;
  font-size:15.5px;line-height:1.7;color:var(--text-muted);
  break-inside:auto;
}
/* Bez kropki listy — kafle maja numer wlasny. Regula .feature-list li::before
   NIE dotyczy .karta-a-axis (inna klasa), ale zerujemy ja jawnie na wypadek
   gdyby ktos kiedys polaczyl klasy. */
.feature-card.feature-large.karta-a .karta-a-axis li::before{
  content:none!important;display:none!important;
}
/* piata pozycja (nieparzysta) — ta sama szerokosc co pozostale kafle (529px),
   NIE pelny wiersz: pelnowierszowy kafel rozciagal tekst do 97,6ch, czyli
   powyzej granicy czytelnosci (pomiar przed poprawka: box=1074px, linia=1025px
   = 93,2ch). Piaty kafel zostaje w kolumnie 1 siatki, wiec wszystkie piec
   kafli ma identyczna szerokosc. */
.feature-card.feature-large.karta-a .karta-a-axis li:nth-child(5){
  grid-column:1!important;
}
/* numer kroku osi */
.feature-card.feature-large.karta-a .karta-a-num,
.feature-card.feature-large.karta-a .karta-a-axis li > strong:first-child{
  display:inline-flex!important;align-items:center;justify-content:center;
  width:28px;height:28px;min-width:28px;flex:none;
  background:var(--a1-accent-light,var(--accent-light));color:var(--a1-accent-hover);
  border:1px solid var(--a1-accent);border-radius:50%;
  font-family:Space Grotesk,sans-serif;font-size:14px;font-weight:700;
  line-height:1;margin:0 10px 0 0!important;padding:0;
  vertical-align:baseline;transform:translateY(-2px);
}
.feature-card.feature-large.karta-a .karta-a-txt{display:block;margin-top:12px;color:var(--text-muted)}
.feature-card.feature-large.karta-a .karta-a-axis li b,
.feature-card.feature-large.karta-a .karta-a-axis li strong{color:var(--text);font-weight:600}
/* tytul kafla jest czescia zdania — kropka po nim nastepuje w tym samym bloku,
   wiec "strong" zostaje inline (bez display:block), zeby nie rozcinac zdania */

/* ---------- WARIANT B: równorzędne karty zmian (2x2) ---------- */
/* 5 rownorzednych punktow -> 5 kafli w siatce 2-kolumnowej, rowny rozmiar,
   pelne wiersze (tryb auto-fit: 4 karty 2x2 + 5. karta pelny wiersz). */
.feature-card.feature-large.karta-b .karta-b-grid,
.feature-card.feature-large.karta-b:not(:has(.feature-visual)) .karta-b-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
  max-width:100%!important;width:100%!important;
  margin:26px 0 0!important;padding:0!important;
}
.feature-card.feature-large.karta-b .karta-b-grid > .karta-b-tile,
.feature-card.feature-large.karta-b:not(:has(.feature-visual)) .karta-b-grid > .karta-b-tile{
  display:flex!important;flex-direction:column;
  padding:22px 24px!important;margin:0!important;
  background:var(--bg-card);border:1px solid rgba(139,92,246,.16);
  border-top:3px solid var(--a1-accent);border-radius:14px;
  font-size:15.5px;line-height:1.7;color:var(--text-muted);
}
.feature-card.feature-large.karta-b .karta-b-tile h4{
  font-family:Space Grotesk,sans-serif;font-size:17px;font-weight:700;
  letter-spacing:-.015em;line-height:1.35;color:var(--text);
  margin:0 0 10px;
}
.feature-card.feature-large.karta-b .karta-b-tile p{
  margin:0!important;font-size:15.5px;line-height:1.7;color:var(--text-muted);
  max-width:100%!important;
}
.feature-card.feature-large.karta-b .karta-b-grid > .karta-b-tile:nth-child(5){
  grid-column:1 / -1!important;
}
/* USUNIETO (sprzatanie 2026-09-17): 4 reguly .karta-b-list —
   klasa nie wystepuje w zadnym HTML (0 wystapien). */

@media(max-width:900px){
  .feature-card.feature-large.karta-a .karta-a-axis,
  .feature-card.feature-large.karta-a:not(:has(.feature-visual)) .karta-a-axis,
  .feature-card.feature-large.karta-b .karta-b-grid,
  .feature-card.feature-large.karta-b:not(:has(.feature-visual)) .karta-b-grid{
    grid-template-columns:1fr!important;
  }
  .feature-card.feature-large.karta-a .karta-a-axis li:nth-child(5),
  .feature-card.feature-large.karta-b .karta-b-grid > .karta-b-tile:nth-child(5){
    grid-column:auto!important;
  }
}
@media(max-width:480px){
  .feature-card.feature-large.karta-a > div > p,
  .feature-card.feature-large.karta-b > div > p{font-size:15px;line-height:1.7;margin-bottom:18px}
  .feature-card.feature-large.karta-a .karta-a-h3,
  .feature-card.feature-large.karta-a > div > h3,
  .feature-card.feature-large.karta-b .karta-b-h3,
  .feature-card.feature-large.karta-b > div > h3{font-size:18px;margin:26px 0 14px;padding-top:22px}
  .feature-card.feature-large.karta-a .karta-a-axis li{padding:16px 18px!important;font-size:15px}
  .feature-card.feature-large.karta-b .karta-b-grid > .karta-b-tile{padding:18px 18px!important}
  .feature-card.feature-large.karta-b .karta-b-tile h4{font-size:16px}
  .feature-card.feature-large.karta-b .karta-b-tile p{font-size:15px}
}


/* ===== NAPRAWA: niepelne siatki zostawialy puste miejsca (2026-09-19) =====
   Problem: 3 karty w features-grid (2 kol) i 2 karty w industries/capabilities-grid
   (3 kol) konczyly sie pusta kolumna. :has() zmienia uklad TYLKO gdy siatka jest
   niepelna - pelne siatki 2/3/4-kolumnowe zostaja bez zmian. */
.features-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))!important}
.industries-grid:has(> :nth-child(2):last-child),
.capabilities-grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}
/* 2 karty w siatkach 3-kolumnowych rozciagamy na pelna szerokosc */
.industries-grid:has(> :nth-child(2):last-child) > *,
.capabilities-grid:has(> :nth-child(2):last-child) > *{width:100%!important}
@media(max-width:900px){
  .features-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .industries-grid:has(> :nth-child(2):last-child),
  .capabilities-grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .features-grid:has(> :nth-child(3):last-child),
  .industries-grid:has(> :nth-child(2):last-child),
  .capabilities-grid:has(> :nth-child(2):last-child){grid-template-columns:1fr}
}


/* ===== LINKI ZEWNETRZNE w tresci (2026-09-19) =====
   Powod: linki do zrodel branzowych mialy kolor identyczny z tekstem
   (rgb(30,27,75)) i text-decoration:none - uzytkownik ich nie widzial.
   Google je widzi, ale czlowiek nie - link musi byc rozpoznawalny. */
.feature-card p a[target="_blank"],
.industry-card p a[target="_blank"],
.capability-card p a[target="_blank"],
.solution-card p a[target="_blank"],
.problem-row p a[target="_blank"] {
    color: #7c3aed;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(124,58,237,.35);
    text-underline-offset: 2px;
}
.feature-card p a[target="_blank"]:hover,
.industry-card p a[target="_blank"]:hover,
.capability-card p a[target="_blank"]:hover,
.solution-card p a[target="_blank"]:hover,
.problem-row p a[target="_blank"]:hover {
    color: #6d28d9;
    text-decoration-color: #6d28d9;
}

/* ===== FIX FAQ (2026-09-21): styles-a1.css nadpisywal max-height z styles.css
   i odpowiedz zostawala ukryta (h=0). Dopisujemy pelna reguly rozwijania. ===== */
.faq-item .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding-bottom .35s ease;
}
.faq-item.active .faq-answer {
    max-height: 600px;
    padding-bottom: 22px;
    overflow: visible;
}
.faq-toggle {
    transition: transform .3s ease;
}
.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}
.faq-question {
    cursor: pointer;
}