:root {
  --el-ink: #17191d;
  --el-muted: #59616b;
  --el-line: #e4e6e9;
  --el-soft: #f5f5f3;
  --el-accent: #ef8f00;
  --el-accent-dark: #bc6700;
  --el-white: #ffffff;
  --el-radius: 20px;
  --el-shadow: 0 18px 45px rgba(21, 24, 28, .11);
}

.el-redesign-active #content-wrap,
.el-redesign-active .content-area,
.el-redesign-active .site-main,
.el-redesign-active article,
.el-redesign-active .entry-content {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  border: 0;
}

.el-redesign-active .widget-area,
.el-redesign-active .page-header { display: none !important; }

/* Na stronie projektu chowamy stare plywajace widgety, zeby nie zaslanialy projektu. */
.el-redesign-active .social_slider_pro,
.el-redesign-active .chaty,
.el-redesign-active .fb_dialog,
.el-redesign-active .fb-customerchat { display: none !important; }

/* Lekkie uporzadkowanie obecnego naglowka OceanWP tylko w podgladzie projektu. */
.el-redesign-active #site-header { border-bottom: 1px solid #ededed; box-shadow: none; }
.el-redesign-active #site-navigation-wrap .dropdown-menu > li > a,
.el-redesign-active #site-navigation-wrap .dropdown-menu > li > span { font-style: normal !important; font-weight: 650; }

.el-home {
  color: var(--el-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-style: normal;
  line-height: 1.62;
  overflow: hidden;
}

.el-home *,
.el-home *::before,
.el-home *::after { box-sizing: border-box; }
.el-home h1,
.el-home h2,
.el-home h3,
.el-home p,
.el-home li,
.el-home a,
.el-home summary,
.el-home span { font-style: normal !important; }
.el-home a { text-decoration-thickness: .08em; text-underline-offset: .18em; }

.el-container {
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.el-hero {
  background: linear-gradient(135deg, #fafafa 0%, #f2f1ed 100%);
  padding: clamp(58px, 6vw, 82px) 0;
  position: relative;
}

.el-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: rgba(239,143,0,.075);
  transform: translate(34%, -36%);
  pointer-events: none;
}

.el-hero__grid { gap: clamp(34px, 4.5vw, 56px) !important; position: relative; z-index: 1; }

.el-eyebrow,
.el-kicker {
  margin: 0 0 12px !important;
  color: var(--el-accent-dark);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.el-hero__title,
.el-section-title {
  color: var(--el-ink);
  font-weight: 800;
  letter-spacing: -.035em;
}

.el-hero__title {
  max-width: 690px;
  margin: 0 0 10px !important;
  font-size: clamp(42px, 4.2vw, 54px);
  line-height: 1.04;
}
.el-hero__title-line { display: block; }

.el-hero__name {
  margin: 0 0 18px !important;
  color: #30343a;
  font-size: 20px;
  font-weight: 700;
}

.el-hero__lead {
  max-width: 680px;
  margin: 0 0 28px !important;
  color: var(--el-muted);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.55;
}

.el-actions { gap: 12px !important; margin: 0 0 24px !important; }
.el-btn .wp-block-button__link {
  border-radius: 999px !important;
  padding: 14px 22px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-decoration: none !important;
}
.el-btn .wp-block-button__link:hover { transform: translateY(-1px); }
.el-btn--primary .wp-block-button__link {
  background: var(--el-accent) !important;
  color: #171717 !important;
  box-shadow: 0 10px 24px rgba(239,143,0,.22);
}
.el-btn--primary .wp-block-button__link:hover { background: #ff9d08 !important; }
.el-btn--secondary .wp-block-button__link {
  background: transparent !important;
  color: var(--el-ink) !important;
  border: 1px solid #c8c9cc !important;
}

.el-proof { gap: 9px !important; }
.el-proof p {
  margin: 0 !important;
  padding: 8px 11px;
  border: 1px solid #d6d8db;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 750;
}

.el-hero__image { margin: 0 !important; }
.el-hero__image img {
  width: min(100%, 410px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  margin-left: auto;
  transform: translateY(10px);
  border-radius: 26px;
  box-shadow: var(--el-shadow);
}

.el-section { padding: clamp(68px, 7vw, 96px) 0; background: var(--el-white); }
.el-section--light { background: var(--el-soft); }
.el-section--dark { background: #17191d; color: #eef0f2; }
.el-section--dark .el-section-title { color: white; }
.el-section--dark .el-kicker { color: #ffab2e; }

.el-section-title {
  margin: 0 0 18px !important;
  max-width: 800px;
  font-size: clamp(32px, 3.7vw, 50px);
  line-height: 1.08;
}
.el-section-lead { max-width: 730px; margin: 0 0 38px !important; color: var(--el-muted); font-size: 18px; }

.el-cards { gap: 18px !important; margin: 0 0 18px !important; }
.el-card {
  min-height: 224px;
  padding: 26px 28px 28px;
  background: white;
  border: 1px solid var(--el-line);
  border-radius: var(--el-radius);
  box-shadow: 0 8px 28px rgba(23,25,29,.045);
}
.el-card__num { display: inline-block; margin-bottom: 24px; color: var(--el-accent-dark); font-size: 13px; font-weight: 850; letter-spacing: .08em; }
.el-card h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.25; color: var(--el-ink); font-weight: 700; }
.el-card p { margin: 0 !important; color: var(--el-muted); font-size: 16px; }

.el-split { gap: clamp(40px, 7vw, 84px) !important; }
.el-photo { margin: 0 !important; }
.el-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--el-radius); box-shadow: var(--el-shadow); }
.el-split__copy > p:not(.el-kicker):not(.el-note):not(.el-verify) { color: var(--el-muted); }

.el-checklist { margin: 24px 0 22px !important; padding: 0 !important; list-style: none !important; }
.el-checklist li { position: relative; margin: 0 0 11px; padding-left: 30px; }
.el-checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--el-accent-dark); font-weight: 900; }
.el-note { margin: 22px 0 0 !important; padding: 15px 17px; border-left: 3px solid var(--el-accent); background: #faf5ec; color: #5b4a30; font-size: 15px; }

.el-process { padding-top: clamp(62px, 6vw, 82px); padding-bottom: clamp(62px, 6vw, 82px); }
.el-process .el-section-title { max-width: 720px; }
.el-steps { gap: 16px !important; margin-top: 32px !important; }
.el-step { padding: 23px 20px 20px; border-top: 1px solid rgba(255,255,255,.18); }
.el-step > span { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 20px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #ffad31; font-weight: 900; }
.el-step h3 { margin: 0 0 8px; color: white; font-size: 20px; font-weight: 700; }
.el-step p { margin: 0 !important; color: #c6cbd1; font-size: 15px; line-height: 1.58; }

.el-verify { margin: 24px 0 0 !important; color: #333940; font-size: 15px; font-weight: 650; }
.el-links { gap: 14px !important; margin-top: 10px !important; }
.el-text-link .wp-block-button__link {
  padding: 0 !important;
  background: transparent !important;
  color: var(--el-accent-dark) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
}

.el-faq-section .el-container { max-width: 1040px !important; }
.el-faq { max-width: none; width: 100%; margin: 0 !important; border-top: 1px solid #d8dadd; padding: 20px 0; }
.el-faq:last-child { border-bottom: 1px solid #d8dadd; }
.el-faq summary {
  position: relative;
  padding-right: 48px;
  cursor: pointer;
  color: var(--el-ink);
  font-size: 18px;
  font-weight: 750;
  list-style: none;
}
.el-faq summary::-webkit-details-marker { display: none; }
.el-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--el-accent-dark);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}
.el-faq[open] summary::after { content: "−"; }
.el-faq p { max-width: 840px; margin: 14px 0 0 !important; color: var(--el-muted); }

.el-cta { padding: clamp(58px, 6vw, 78px) 0; background: #f2a027; color: #181818; }
.el-cta .el-section-title { color: #181818; max-width: 720px; }
.el-cta .el-kicker { color: #6d4100; }
.el-cta a { color: #181818; }
.el-cta__grid { gap: 52px !important; }
.el-cta__lead { max-width: 650px; margin: 0 0 18px !important; color: #5b3b0c; font-size: 17px; }
.el-address { margin: 0 !important; font-weight: 650; }
.el-cta__actions { display: flex; flex-direction: column; align-items: flex-start; }
.el-cta__buttons { gap: 10px !important; }
.el-cta__small { max-width: 360px; margin: 14px 0 0 !important; font-size: 14px; color: #5b3b0c; font-weight: 650; }
.el-cta .el-btn--primary .wp-block-button__link { background: #181818 !important; color: white !important; box-shadow: none; }
.el-cta .el-btn--primary .wp-block-button__link:hover { background: #2b2b2b !important; }
.el-btn--dark-outline .wp-block-button__link { background: transparent !important; color: #181818 !important; border: 1px solid rgba(24,24,24,.55) !important; }

@media (max-width: 900px) {
  .el-container { width: min(100% - 32px, 1180px) !important; }
  .el-hero__grid, .el-split, .el-cta__grid { flex-direction: column !important; }
  .el-hero__copy, .el-hero__media, .el-split > .wp-block-column, .el-cta__grid > .wp-block-column { flex-basis: 100% !important; width: 100% !important; }
  .el-hero__image img { aspect-ratio: 16 / 10; max-height: 520px; }
  .el-cards { flex-wrap: wrap !important; }
  .el-cards > .wp-block-column { flex-basis: calc(50% - 10px) !important; }
  .el-steps { flex-wrap: wrap !important; }
  .el-steps > .wp-block-column { flex-basis: calc(50% - 10px) !important; }
  .el-cta__actions { align-items: flex-start; }
}

@media (max-width: 620px) {
  .el-home { font-size: 16px; }
  .el-container { width: min(100% - 24px, 1180px) !important; }
  .el-hero { padding: 42px 0 52px; }
  .el-hero::before { width: 250px; height: 250px; }
  .el-hero__title { font-size: clamp(36px, 10.5vw, 46px); }
  .el-hero__name { font-size: 18px; }
  .el-actions, .el-cta__buttons { flex-direction: column; align-items: stretch !important; width: 100%; }
  .el-actions .wp-block-button, .el-cta__buttons .wp-block-button { width: 100%; }
  .el-actions .wp-block-button__link, .el-cta__buttons .wp-block-button__link { width: 100%; text-align: center; }
  .el-cards, .el-steps { display: block !important; }
  .el-cards > .wp-block-column, .el-steps > .wp-block-column { margin-bottom: 14px !important; }
  .el-section { padding: 58px 0; }
  .el-card { min-height: 0; }
  .el-faq summary { font-size: 17px; }
}


/* V3: proporcje pierwszego ekranu i docelowe menu w podgladzie. */
@media (min-width: 901px) {
  .el-hero__copy { flex-basis: 60% !important; }
  .el-hero__media { flex-basis: 40% !important; }
}
.el-redesign-active #site-navigation-wrap .dropdown-menu > li > a {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.el-redesign-active #site-navigation-wrap .dropdown-menu > li > a[href^="#"] {
  transition: color .18s ease;
}
.el-redesign-active #site-navigation-wrap .dropdown-menu > li > a[href^="#"]:hover {
  color: var(--el-accent-dark) !important;
}
@media (max-width: 900px) {
  .el-hero__title-line { display: inline; }
  .el-hero__title-line + .el-hero__title-line::before { content: " "; }
  .el-hero__image img { width: 100%; margin: 0; transform: none; }
}

/* V4: dopracowanie telefonu na podstawie testu na prawdziwym urzadzeniu. */
.el-redesign-active .social_mobile_pro,
.el-redesign-active .social_mobile_pro .top-left {
  display: none !important;
}

@media only screen and (max-width: 959px) {
  /* OceanWP: zwarty naglowek zamiast bardzo wysokiego logo i ramki Menu. */
  .el-redesign-active #site-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 86px !important;
    padding: 8px 16px !important;
  }

  .el-redesign-active #site-logo {
    float: none !important;
    display: block !important;
    width: auto !important;
    max-width: calc(100% - 76px) !important;
    height: auto !important;
  }

  .el-redesign-active #site-logo #site-logo-inner {
    display: flex !important;
    align-items: center !important;
    height: 70px !important;
  }

  .el-redesign-active #site-logo #site-logo-inner a,
  .el-redesign-active #site-logo #site-logo-inner picture {
    display: block !important;
    width: 100% !important;
  }

  .el-redesign-active #site-logo #site-logo-inner a img {
    display: block !important;
    width: auto !important;
    max-width: min(250px, 100%) !important;
    max-height: 62px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .el-redesign-active .oceanwp-mobile-menu-icon {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 0 0 10px !important;
    height: auto !important;
  }

  .el-redesign-active .oceanwp-mobile-menu-icon a.mobile-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-width: 54px !important;
    min-height: 44px !important;
    height: auto !important;
    line-height: 1 !important;
    padding: 9px 7px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #24272b !important;
    font-size: 15px !important;
  }

  .el-redesign-active .oceanwp-mobile-menu-icon a.mobile-menu .oceanwp-text,
  .el-redesign-active .oceanwp-mobile-menu-icon a.mobile-menu .oceanwp-close-text {
    margin: 0 !important;
    font-size: 15px !important;
    font-style: normal !important;
    line-height: 1 !important;
  }

  .el-redesign-active .oceanwp-mobile-menu-icon a.mobile-menu i,
  .el-redesign-active .oceanwp-mobile-menu-icon a.mobile-menu .hamburger {
    margin: 0 !important;
  }
}

@media (max-width: 620px) {
  .el-hero {
    padding: 34px 0 44px !important;
  }

  .el-eyebrow {
    margin-bottom: 10px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    letter-spacing: .095em !important;
  }

  .el-hero__title {
    margin-bottom: 12px !important;
    font-size: clamp(35px, 10vw, 42px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.042em !important;
  }

  .el-hero__name {
    margin-bottom: 16px !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .el-hero__lead {
    margin-bottom: 22px !important;
    font-size: 16px !important;
    line-height: 1.52 !important;
  }

  .el-actions {
    margin-bottom: 18px !important;
  }

  .el-btn .wp-block-button__link {
    padding: 13px 16px !important;
    font-size: 15px !important;
  }

  .el-proof {
    gap: 7px !important;
  }

  .el-proof p {
    padding: 7px 9px !important;
    font-size: 11.5px !important;
  }

  .el-hero__media {
    margin-top: 10px !important;
  }
}

@media (max-width: 390px) {
  .el-redesign-active #site-header-inner {
    min-height: 80px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .el-redesign-active #site-logo #site-logo-inner {
    height: 64px !important;
  }

  .el-redesign-active #site-logo #site-logo-inner a img {
    max-width: 220px !important;
    max-height: 56px !important;
  }

  .el-redesign-active .oceanwp-mobile-menu-icon a.mobile-menu .oceanwp-text {
    display: none !important;
  }

  .el-redesign-active .oceanwp-mobile-menu-icon a.mobile-menu {
    min-width: 44px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}


/* V5: finalne dopracowanie telefonu po tescie na rzeczywistym urzadzeniu. */
@media (max-width: 620px) {
  .el-hero {
    padding: 30px 0 38px !important;
  }

  .el-hero__title {
    font-size: clamp(34px, 9.35vw, 39px) !important;
    line-height: 1.03 !important;
  }

  .el-hero__lead {
    font-size: 15.5px !important;
    line-height: 1.5 !important;
  }

  .el-btn .wp-block-button__link {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Na telefonie tresc i CTA sa wazniejsze niz dekoracyjne zdjecie hero.
     Zdjecia nadal wystepuja w dalszych sekcjach strony. */
  .el-hero__media {
    display: none !important;
  }
}


/* V6: wersja przygotowana do publikacji. */
.el-eyebrow__mobile { display: none; }

/* Kotwice menu nie chowaja tytulow pod naglowkiem. */
#el-start,
#uslugi,
#o-mnie,
#faq,
#kontakt { scroll-margin-top: 96px; }

@media (max-width: 620px) {
  .el-eyebrow__desktop { display: none; }
  .el-eyebrow__mobile { display: inline; }

  .el-redesign-active #site-header-inner {
    min-height: 78px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  .el-redesign-active #site-logo #site-logo-inner {
    height: 62px !important;
  }

  .el-redesign-active #site-logo #site-logo-inner a img {
    max-height: 54px !important;
  }

  #el-start,
  #uslugi,
  #o-mnie,
  #faq,
  #kontakt { scroll-margin-top: 78px; }
}