/* Start custom CSS for html, class: .elementor-element-b326b97 *//* ========= WEBMIAMI80 • PESTASHOP LANDING — CSS ONLY PATCH ========= */
/* Niczego w HTML nie zmieniam. Ten plik TYLKO koryguje wygląd.        */

/* --- Zmienne (z fallbackiem, żeby trzymać Twoją kolorystykę) --- */
:root{
  --wm-accent: var(--accent, #ff3e2f);
  --wm-accent-2: var(--accent-2, #ff7a66);
  --wm-text: var(--text, #e9e9ef);
  --wm-muted: var(--muted, #bdbdcc);
  --wm-bg: var(--bg, #0e0e11);
  --wm-bg-2: var(--bg-2, #131318);
  --wm-card: var(--card, #17171d);
  --wm-ok: var(--ok, #28c76f);
  --wm-danger: var(--danger, #ff5b57);
  --wm-radius: var(--radius, 14px);
  --wm-shadow: 0 10px 30px rgba(0,0,0,.35);
  --wm-max: 1180px;
  --wm-ff: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,system-ui,"Helvetica Neue",sans-serif;
  --wm-fs-h1: clamp(28px,5.6vw,40px);
  --wm-fs-h2: clamp(22px,4.6vw,30px);
  --wm-fs-h3: clamp(18px,4vw,22px);
}

/* --- Core / layout (bez naruszania headera) --- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{font-family:var(--wm-ff);color:var(--wm-text);background:var(--wm-bg)}
a{color:var(--wm-text);text-decoration:none}
img{max-width:100%;height:auto}

.wm-wrap{max-width:var(--wm-max);margin:0 auto;padding:clamp(16px,2vw,28px)}
.grid{display:grid;gap:22px}
.grid, .grid > *{min-width:0;max-width:100%}  /* <- KLUCZ do końca „pionowych” nagłówków */
.section{padding:clamp(40px,7vw,90px) 0}
.section--dark{background:var(--wm-bg-2)}

/* --- Typografia --- */
h1{font-size:var(--wm-fs-h1);line-height:1.15;font-weight:800;letter-spacing:.2px;margin:.35em 0}
h2{font-size:var(--wm-fs-h2);line-height:1.18;font-weight:800;letter-spacing:.2px;margin:.7em 0 .4em}
h3{font-size:var(--wm-fs-h3);line-height:1.22;font-weight:800;letter-spacing:.15px;margin:.6em 0 .35em}
.hero h1{font-size:clamp(30px,7vw,44px)}
section:not(.hero) h2.h1{font-size:var(--wm-fs-h2)!important}
section:not(.hero) h3.h1{font-size:var(--wm-fs-h3)!important}
.section h2 + .lead{margin-top:.15em}
.lead{color:var(--wm-muted);font-size:clamp(16px,1.5vw,19px)}
.muted{color:var(--wm-muted)}
.eyebrow{color:var(--wm-accent-2);font-weight:700;font-size:.95rem;letter-spacing:.3px;text-transform:uppercase}

/* --- Przyciski (tylko w treści; header nietknięty) --- */
.section .btn,.hero .btn,#kontakt .btn{
  display:inline-block;padding:14px 20px;border-radius:12px;font-weight:700;letter-spacing:.2px;line-height:1;
  background:var(--wm-accent);color:#fff;border:1px solid transparent;transition:.2s
}
.section .btn:hover,.hero .btn:hover,#kontakt .btn:hover{transform:translateY(-1px);filter:saturate(1.1)}
.section .btn--ghost,.hero .btn--ghost,#kontakt .btn--ghost{background:transparent;border-color:var(--wm-accent);color:var(--wm-accent)}

/* --- Karty / feature / proces --- */
.hero{
  background:
    radial-gradient(1200px 700px at 70% -20%,rgba(255,62,47,.12),transparent 55%),
    radial-gradient(900px 500px at -10% 10%,rgba(255,122,102,.1),transparent 60%),var(--wm-bg)
}
.hero__inner{display:grid;align-items:center;gap:30px;grid-template-columns:1.2fr .8fr}
.hero__card{background:linear-gradient(0deg,rgba(255,62,47,.09),rgba(255,62,47,.09)),var(--wm-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--wm-radius);padding:22px;box-shadow:var(--wm-shadow)}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.kpi{background:var(--wm-bg-2);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px}
.kpi strong{display:block;font-size:22px}

.feature,.step,details{
  background:var(--wm-card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--wm-radius);
  padding:18px;
  box-shadow:var(--wm-shadow)
}
.features{grid-template-columns:repeat(3,minmax(0,1fr))}
.feature svg{width:28px;height:28px;margin-bottom:10px}
.feature p{color:var(--wm-muted);font-size:15px}
.process{grid-template-columns:repeat(4,minmax(0,1fr))}

/* --- LISTY: ptaszki w kolorze akcentu (pomarańcz/czerwień) --- */
.list{margin:14px 0 6px;padding:0;list-style:none;display:grid;gap:10px}
.list li{display:grid;grid-template-columns:22px 1fr;align-items:start;gap:10px}
.list .ok{color:var(--wm-accent) !important}  /* <- Twój akcent, nie szary */
.faq{grid-template-columns:1fr}
details+details{margin-top:12px}
summary{cursor:pointer;font-weight:700}

/* --- Ukrycie sidebaru tylko na tej podstronie --- */
body.page-id-13226 aside.col-12.col-lg-4.pl-lg-5.float-right.sidebar,
body.page-id-13226 .sidebar, body.page-id-13226 #secondary{display:none!important}
body.page-id-13226 main.col-12.col-lg-8.p-0.p-default,
body.page-id-13226 .content .col-12.col-lg-8{max-width:100%!important;flex:0 0 100%!important;width:100%!important}
body.page-id-13226 .pl-lg-5{padding-left:0!important}
body.page-id-13226 .row.content{gap:0!important}

/* --- Sticky CTA off (jak wcześniej) --- */
.cta-bar,.cta-bar__inner{display:none!important}

/* --- Fixy Elementor preview (bez efektów) --- */
.elementor-editor-active [data-aos],
.elementor-editor-active .aos-init,
.elementor-editor-active .aos-animate,
.elementor-editor-active [class*="elementor-invisible"]{opacity:1!important;transform:none!important;transition:none!important}
.elementor-editor-active .elementor:before,
.elementor-editor-active .elementor:after,
.elementor-editor-active .elementor-section:before,
.elementor-editor-active .elementor-section:after{content:none!important;display:none!important}

/* =================================================================== */
/*   >>> GŁÓWNY PROBLEM MOBILE: „pionowe” nagłówki i wąskie kolumny   */
/*   Elementor nadał inline grid-template-columns. Wymuszamy 1 kolumnę */
/*   + normalne łamanie tekstu.                                        */
/* =================================================================== */

/* Desktop (powtarzamy 3 kolumny dla spójności, gdyby inline się różnił) */
#porownanie > .wm-wrap > .grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:16px !important}
#integracje > .wm-wrap > .grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:16px !important}
/* „Case” ma 2fr 1fr w desktopie — zostawiamy, a na mobile zbijamy do 1 kol. */
#case > .wm-wrap > .grid{gap:22px !important}

/* reset ewentualnych dziwnych trybów pisania */
#porownanie h3, #integracje h3, #case h3, .feature h3{
  writing-mode: initial !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
}

/* --- RESPONSYWNOŚĆ --- */
@media (max-width:1050px){
  .hero__inner{grid-template-columns:1fr}
}
@media (max-width:900px){
  /* KPI 2-kolumnowo */
  .kpis{grid-template-columns:repeat(2,1fr);gap:12px}

  /* WYMUSZENIE 1 kolumny tam, gdzie był inline style */
  #porownanie > .wm-wrap > .grid,
  #integracje > .wm-wrap > .grid,
  #case > .wm-wrap > .grid,
  #dla-kogo > .wm-wrap > .grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .features{grid-template-columns:1fr;gap:14px}
  .process{grid-template-columns:1fr !important;gap:14px !important}
}
@media (max-width:768px){
  .wm-wrap{padding-inline:16px!important}
  .hero__inner{gap:18px}
  .hero__card{margin-top:6px;padding:16px;border-radius:12px}
  .hero{
    background:
      radial-gradient(800px 400px at 70% -20%,rgba(255,62,47,.10),transparent 55%),
      radial-gradient(600px 320px at -10% 10%,rgba(255,122,102,.08),transparent 60%),var(--wm-bg)
  }
  .list{gap:8px}
  #dlaczego-my .wm-wrap>.grid{grid-template-columns:1fr!important;gap:14px!important}
  #dlaczego-my aside{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
}
@media (max-width:600px){
  #dla-kogo .wm-wrap>.grid{grid-template-columns:1fr!important;gap:12px!important}
}
@media (max-width:480px){
  :root{--wm-radius:12px}
  .hero__card,.feature,.step,details{border-radius:12px}
  #kontakt{padding-bottom:110px!important}
}
/* ========= /PATCH ========= */
/* === FIXY WYŁĄCZNIE DLA TEJ PODSTRONY (po ID sekcji) === */

/* 1) Kolor ptaszków – jak na stronie (czerwono-pomarańczowy) */
#funkcje .list .ok,
#proces .list .ok,
#porownanie .list .ok,
#dlaczego-my .list .ok,
#case .list .ok,
#opis .list .ok,
#faq .list .ok,
#faq-2 .list .ok,
#kontakt .list .ok {
  color:#ff3e2f !important;
  opacity:1 !important;
}

/* 2) Zero pionowych napisów – wymuszamy normalny tekst */
#porownanie h3, #porownanie p,
#integracje h3,  #integracje p,
#case h3,        #case p,
#dlaczego-my h3, #dlaczego-my p {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  transform: none !important;
}

/* 3) Siatki – na mobile 1 kolumna (nadpisuje inline Elementora) */
@media (max-width: 900px){
  #porownanie .grid,
  #integracje  .grid,
  #case        .grid,
  #dlaczego-my .grid,
  #kontakt     .grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* 4) Features / Process też na jedną kolumnę na wąskich */
@media (max-width: 768px){
  .features { grid-template-columns: 1fr !important; gap:14px !important; }
  .process  { grid-template-columns: 1fr !important; gap:14px !important; }
}

/* 5) KPI w 2 kolumny – czytelniej */
@media (max-width: 680px){
  .kpis { grid-template-columns: repeat(2,1fr) !important; gap:12px !important; }
}

/* 6) Listy – stały układ ikona + tekst */
@media (max-width: 768px){
  .list{ gap:10px !important; }
  .list li{ grid-template-columns: 22px 1fr !important; align-items:start !important; }
}

/* 7) Hero: dwie→jedna kolumna na tablet/telefon */
@media (max-width: 1050px){
  .hero__inner { grid-template-columns: 1fr !important; }
}

/* 8) Zapobiegamy „rozpychaniu” kart (min-width:0 w gridzie) */
#porownanie .grid > *,
#integracje  .grid > *,
#case        .grid > *,
#dlaczego-my .grid > *,
#kontakt     .grid > *,
.hero__inner > * {
  min-width: 0 !important;
}

/* 9) Spójne obramowanie kart (bez zmiany kolorystyki strony) */
.feature, .step, details, .hero__card{
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.35) !important;
  border-radius:12px !important;
}/* End custom CSS */