/*
Theme Name: MK-TECH Professional IT
Theme URI: https://mk-tech.kuc.org.pl
Author: MK-TECH
Author URI: https://mk-tech.kuc.org.pl
Description: Professional WordPress theme for business IT support, administration, infrastructure, monitoring, networks, servers, virtualization and cybersecurity in Poland.
Version: 2.5.4
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mk-tech
Tags: business, services, one-column, custom-logo, custom-menu, responsive-layout
*/

:root {
  --mk-navy: #0B1F3A;
  --mk-blue: #0D6EFD;
  --mk-green: #20C997;
  --mk-dark: #111827;
  --mk-text: #1F2937;
  --mk-muted: #64748B;
  --mk-border: #E5E7EB;
  --mk-bg: #FFFFFF;
  --mk-bg-soft: #F5F7FA;
  --mk-bg-soft-2: #F8FAFC;
  --mk-shadow: 0 22px 60px rgba(11, 31, 58, 0.14);
  --mk-radius: 20px;
  --mk-container: 1200px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--mk-bg);
  color: var(--mk-text);
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

a {
  color: var(--mk-blue);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--mk-navy);
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 18px;
  color: var(--mk-navy);
  font-weight: 800;
  line-height: 1.15;
}

h1 {
  font-size: clamp(30px, 3vw, 40px);
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(28px, 2.8vw, 40px);
  letter-spacing: -0.025em;
}

h3 {
  font-size: 22px;
}

p {
  margin: 0 0 18px;
}

ul {
  margin-top: 0;
}

.mk-container {
  width: min(var(--mk-container), calc(100% - 40px));
  margin: 0 auto;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mk-topbar {
  background: var(--mk-navy);
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
}

.mk-topbar-inner {
  width: min(var(--mk-container), calc(100% - 40px));
  min-height: 42px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.mk-topbar a {
  color: #FFFFFF;
}

.mk-topbar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
}

.mk-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--mk-border);
  backdrop-filter: blur(12px);
}

.mk-header-inner {
  width: min(var(--mk-container), calc(100% - 40px));
  min-height: 104px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.mk-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 178px;
}

.mk-brand-logo {
  display: block;
  width: 150px;
  max-height: 92px;
  object-fit: contain;
}

.mk-primary-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
}

.mk-primary-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}

.mk-primary-nav li {
  position: relative;
}

.mk-primary-nav a {
  display: block;
  padding: 12px 11px;
  color: var(--mk-navy);
  font-size: 16.5px;
  font-weight: 800;
  border-radius: 14px;
  white-space: nowrap;
}

.mk-primary-nav a:hover,
.mk-primary-nav .current-menu-item > a {
  color: var(--mk-blue);
  background: rgba(13, 110, 253, 0.08);
}


.mk-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--mk-border);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--mk-navy);
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.mk-menu-toggle-bars {
  width: 20px;
  height: 14px;
  position: relative;
  display: inline-block;
}

.mk-menu-toggle-bars::before,
.mk-menu-toggle-bars::after,
.mk-menu-toggle-bars span {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 99px;
  background: var(--mk-navy);
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.mk-menu-toggle-bars::before {
  top: 0;
}

.mk-menu-toggle-bars span {
  top: 6px;
}

.mk-menu-toggle-bars::after {
  top: 12px;
}

body.mk-menu-open .mk-menu-toggle-bars::before {
  top: 6px;
  transform: rotate(45deg);
}

body.mk-menu-open .mk-menu-toggle-bars span {
  opacity: 0;
}

body.mk-menu-open .mk-menu-toggle-bars::after {
  top: 6px;
  transform: rotate(-45deg);
}

.mk-button,
.wp-block-button__link,
button,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--mk-blue);
  color: #FFFFFF !important;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(13, 110, 253, 0.22);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.mk-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  background: var(--mk-navy);
  color: #FFFFFF !important;
  box-shadow: 0 18px 38px rgba(11, 31, 58, 0.22);
}

.mk-button-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: none;
}

.mk-main {
  min-height: 60vh;
}

.mk-hero {
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
  background:
    radial-gradient(circle at 16% 18%, rgba(32, 201, 151, 0.26), transparent 26%),
    radial-gradient(circle at 82% 14%, rgba(13, 110, 253, 0.34), transparent 30%),
    radial-gradient(circle at 70% 82%, rgba(124, 58, 237, 0.18), transparent 34%),
    linear-gradient(135deg, #061221 0%, #0B1F3A 48%, #123763 100%);
}

.mk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent 82%);
}

.mk-hero-inner {
  position: relative;
  z-index: 1;
  width: min(var(--mk-container), calc(100% - 40px));
  min-height: 730px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: center;
  gap: 56px;
  padding: 86px 0;
}

.mk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 800;
}

.mk-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mk-green);
  box-shadow: 0 0 0 6px rgba(32, 201, 151, 0.16);
}

.mk-hero h1 {
  color: #FFFFFF;
  max-width: 720px;
  font-size: clamp(30px, 3.1vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.025em;
}

.mk-hero-lead {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(17px, 1.55vw, 20px);
}

.mk-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.mk-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

.mk-proof-item {
  min-width: 150px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
}

.mk-proof-item strong {
  display: block;
  color: #FFFFFF;
  font-size: 28px;
  line-height: 1;
  margin-bottom: 8px;
}

.mk-proof-item span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
}

.mk-hero-card {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
}

.mk-hero-logo {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto 22px;
}

.mk-hero-card h3 {
  color: #FFFFFF;
}

.mk-system-list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.mk-system-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.82);
}

.mk-check {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(32, 201, 151, 0.14);
  color: var(--mk-green);
  font-weight: 900;
}

.mk-section {
  padding: 92px 0;
}

.mk-section-soft {
  background: var(--mk-bg-soft);
}

.mk-section-dark {
  color: #FFFFFF;
  background: var(--mk-navy);
}

.mk-section-dark h2,
.mk-section-dark h3 {
  color: #FFFFFF;
}

.mk-section-dark p {
  color: rgba(255, 255, 255, 0.78);
}

.mk-section-header {
  max-width: 790px;
  margin-bottom: 44px;
}

.mk-section-header.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.mk-section-kicker {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--mk-blue);
  font-size: 13px;
  font-weight: 900;
}

.mk-section-header p {
  color: var(--mk-muted);
  font-size: 18px;
}

.mk-grid {
  display: grid;
  gap: 24px;
}

.mk-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mk-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mk-card {
  padding: 30px;
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mk-card:hover {
  transform: translateY(-4px);
  border-color: rgba(13, 110, 253, 0.28);
  box-shadow: var(--mk-shadow);
}

.mk-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 110, 253, 0.09);
  color: var(--mk-blue);
  font-weight: 900;
}

.mk-card p {
  color: var(--mk-muted);
}

.mk-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
  gap: 56px;
  align-items: center;
}

.mk-panel {
  padding: 34px;
  border: 1px solid var(--mk-border);
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: var(--mk-shadow);
}

.mk-list-clean {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.mk-list-clean li {
  position: relative;
  padding-left: 22px;
  color: var(--mk-text);
}

.mk-list-clean li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mk-green);
}

.mk-tech-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mk-chip {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--mk-border);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--mk-navy);
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.mk-numbered {
  counter-reset: step;
}

.mk-step {
  position: relative;
  padding: 30px;
  border-radius: var(--mk-radius);
  background: #FFFFFF;
  border: 1px solid var(--mk-border);
}

.mk-step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--mk-blue);
  font-weight: 900;
}

.mk-contact-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 46px;
  align-items: center;
}

.mk-contact-card {
  padding: 30px;
  border-radius: 24px;
  background: #FFFFFF;
  color: var(--mk-text);
  box-shadow: 0 22px 65px rgba(0, 0, 0, 0.18);
}

.mk-contact-card h3 {
  color: var(--mk-navy);
}

.mk-contact-card p {
  color: var(--mk-muted);
}

.mk-contact-link {
  display: block;
  margin-top: 10px;
  color: var(--mk-blue);
  font-size: 20px;
  font-weight: 900;
}

.mk-site-footer {
  background: #071629;
  color: rgba(255, 255, 255, 0.78);
}

.mk-footer-main {
  width: min(var(--mk-container), calc(100% - 40px));
  margin: 0 auto;
  padding: 58px 0;
  display: grid;
  grid-template-columns: 1.25fr 0.85fr 0.85fr;
  gap: 42px;
}

.mk-footer-logo {
  display: block;
  width: 170px;
  max-height: 90px;
  object-fit: contain;
  margin-bottom: 16px;
}

.mk-site-footer h3,
.mk-site-footer h4 {
  color: #FFFFFF;
}

.mk-site-footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.mk-site-footer a {
  color: rgba(255, 255, 255, 0.82);
}

.mk-site-footer a:hover {
  color: var(--mk-green);
}

.mk-footer-bottom {
  width: min(var(--mk-container), calc(100% - 40px));
  margin: 0 auto;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 14px;
}

.entry-content > *:not(.mk-section):not(.mk-hero) {
  width: min(var(--mk-container), calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}

.page .entry-content {
  padding: 70px 0;
}

.page .entry-content .mk-section-header,
.page .entry-content .mk-grid {
  width: min(var(--mk-container), calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}

.page .entry-content .mk-section-header {
  margin-bottom: 38px;
}

@media (max-width: 1100px) {
  .mk-header-inner {
    gap: 14px;
  }

  .mk-brand {
    max-width: 148px;
  }

  .mk-brand-logo {
    width: 138px;
    max-height: 76px;
  }

  .mk-primary-nav a {
    padding: 10px 8px;
    font-size: 14px;
  }
}

@media (max-width: 980px) {
  .mk-header-inner {
    min-height: 76px;
    padding: 10px 0;
    align-items: center;
    position: relative;
  }

  .mk-brand-logo {
    width: 142px;
    max-height: 74px;
  }

  .mk-menu-toggle {
    display: inline-flex;
  }

  .mk-primary-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    width: 100%;
    display: none;
    padding: 10px;
    border: 1px solid var(--mk-border);
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
  }

  body.mk-menu-open .mk-primary-nav {
    display: block;
  }

  .mk-primary-nav ul {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .mk-primary-nav a {
    padding: 14px 16px;
    border-radius: 14px;
    background: transparent;
    font-size: 16px;
    text-align: left;
  }

  .mk-hero-inner,
  .mk-split,
  .mk-contact-box {
    grid-template-columns: 1fr;
  }

  .mk-hero-inner {
    min-height: auto;
    padding: 70px 0;
  }

  .mk-grid-3,
  .mk-grid-2,
  .mk-footer-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .mk-topbar-inner,
  .mk-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .mk-topbar-inner {
    padding: 10px 0;
  }

  .mk-section {
    padding: 68px 0;
  }

  .mk-hero-proof {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mk-contact-card {
    padding: 24px;
  }
}

.mk-page-header {
  padding: 72px 0;
  background: linear-gradient(135deg, #071629 0%, #0B1F3A 100%);
}

.mk-page-header h1 {
  color: #FFFFFF;
  max-width: 900px;
  font-size: clamp(28px, 2.8vw, 38px);
}

.mk-page-content {
  padding: 72px 0 92px;
}

.mk-page-content .entry-content {
  padding: 0;
}

@media (max-width: 560px) {
  .mk-container,
  .mk-topbar-inner,
  .mk-header-inner,
  .mk-footer-main,
  .mk-footer-bottom,
  .mk-hero-inner {
    width: min(100% - 28px, var(--mk-container));
  }

  .mk-brand {
    max-width: 150px;
  }

  .mk-brand-logo {
    width: 124px;
    max-height: 80px;
  }

  .mk-menu-toggle {
    padding: 9px 13px;
    font-size: 14px;
  }

  .mk-primary-nav {
    top: calc(100% + 8px);
  }

  .mk-primary-nav a {
    font-size: 16px;
    font-weight: 800;
  }

  h1 {
    font-size: clamp(26px, 7.2vw, 32px);
  }

  h2 {
    font-size: clamp(27px, 8vw, 34px);
  }

  .mk-hero-inner {
    padding: 54px 0;
    gap: 34px;
  }

  .mk-hero h1 {
    font-size: clamp(26px, 7.4vw, 32px);
    line-height: 1.18;
  }

  .mk-hero-lead {
    font-size: 16.5px;
  }

  .mk-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mk-button,
  .wp-block-button__link,
  button,
  input[type="submit"] {
    width: 100%;
  }

  .mk-hero-card,
  .mk-panel,
  .mk-card,
  .mk-contact-card {
    padding: 24px;
    border-radius: 20px;
  }

  .mk-mini-dashboard {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .mk-mini-dashboard {
    grid-template-columns: 1fr;
  }
}

.mk-mini-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.mk-mini-dashboard div {
  padding: 14px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.mk-mini-dashboard span {
  display: block;
  color: var(--mk-green);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 6px;
}

.mk-mini-dashboard strong {
  display: block;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  line-height: 1.3;
}

.mk-app-card {
  position: relative;
  overflow: hidden;
}

.mk-app-card::after {
  content: "";
  position: absolute;
  right: -36px;
  top: -36px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 110, 253, 0.14), transparent 68%);
}

.mk-app-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: rgba(13, 110, 253, 0.09);
  color: var(--mk-blue);
  font-weight: 900;
  font-size: 13px;
}

@media (max-width: 560px) {
  .mk-mini-dashboard {
    grid-template-columns: 1fr;
  }
}


/* Contact form and expanded service content */
.mk-contact-box-wide {
  grid-template-columns: minmax(0, 0.8fr) minmax(480px, 1.2fr);
}

.mk-contact-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.mk-contact-inline a {
  display: inline-flex;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #FFFFFF;
  font-weight: 800;
}

.mk-contact-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
  gap: 34px;
  align-items: start;
}

.mk-contact-form-card {
  width: 100%;
}

.mk-contact-form {
  display: grid;
  gap: 18px;
}

.mk-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mk-field {
  display: grid;
  gap: 7px;
}

.mk-field label,
.mk-consent {
  color: var(--mk-navy);
  font-size: 14px;
  font-weight: 800;
}

.mk-field input,
.mk-field select,
.mk-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #CBD5E1;
  border-radius: 13px;
  background: #FFFFFF;
  color: var(--mk-text);
  font: inherit;
  line-height: 1.4;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.mk-field textarea {
  min-height: 150px;
  resize: vertical;
}

.mk-field input:focus,
.mk-field select:focus,
.mk-field textarea:focus {
  border-color: var(--mk-blue);
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.10);
}

.mk-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  line-height: 1.5;
}

.mk-consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.mk-form-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mk-form-footer span {
  color: var(--mk-muted);
  font-size: 13px;
}

.mk-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.mk-form-notice {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 700;
}

.mk-form-success {
  background: rgba(32, 201, 151, 0.12);
  border: 1px solid rgba(32, 201, 151, 0.32);
  color: #0F684F;
}

.mk-form-error {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.22);
  color: #991B1B;
}

.mk-contact-details {
  display: grid;
  gap: 10px;
  margin: 24px 0 30px;
}

.mk-cta-panel {
  margin-top: 34px;
  padding: 28px;
  border: 1px solid var(--mk-border);
  border-radius: 22px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.06);
}

.mk-cta-panel p {
  margin: 5px 0 0;
  color: var(--mk-muted);
}

.mk-panel-spaced {
  margin-top: 30px;
}

.mk-list-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}

.mk-legal-content {
  max-width: 900px;
}

.mk-legal-content h3 {
  margin-top: 30px;
}

@media (max-width: 980px) {
  .mk-contact-box-wide,
  .mk-contact-page-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .mk-form-grid,
  .mk-list-columns {
    grid-template-columns: 1fr;
  }

  .mk-cta-panel,
  .mk-form-footer {
    align-items: stretch;
    flex-direction: column;
  }
}

/* =========================================================
   MK-TECH 2.3.0 — spójny motyw wizualny cyan / purple
   inspirowany identyfikacją marki z banera MK-TECH.
   ========================================================= */
:root {
  --mk-cyan: #1BC6E0;
  --mk-cyan-bright: #00E7FF;
  --mk-purple: #965BFC;
  --mk-purple-deep: #6D28D9;
  --mk-brand-deep: #000916;
  --mk-brand-mid: #07182C;
  --mk-brand-gradient: linear-gradient(100deg, var(--mk-cyan-bright) 0%, #2E9DFF 48%, var(--mk-purple) 100%);
  --mk-brand-glow: 0 0 28px rgba(27, 198, 224, .18), 0 0 42px rgba(150, 91, 252, .12);
}

/* Pasek i nagłówek — ten sam ciemny charakter co grafika marki */
.mk-topbar {
  background:
    linear-gradient(90deg, rgba(0,231,255,.08), transparent 28%, transparent 72%, rgba(150,91,252,.10)),
    linear-gradient(110deg, #000916 0%, #07182C 52%, #0B0920 100%);
  border-bottom: 1px solid rgba(83, 207, 255, .12);
}

.mk-site-header {
  background-color: rgba(0, 9, 22, .965);
  background-image:
    url('assets/brand-circuit-photo.webp'),
    url('assets/brand-network-photo.webp'),
    linear-gradient(110deg, rgba(0,9,22,.985), rgba(7,24,44,.975) 52%, rgba(14,8,35,.985));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left -155px center, right -150px center, center;
  background-size: 360px auto, 345px auto, cover;
  background-blend-mode: screen, screen, normal;
  border-bottom: 1px solid rgba(97, 205, 255, .18);
  box-shadow: 0 12px 34px rgba(0, 9, 22, .18);
}

.mk-site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 3%, rgba(0,231,255,.82) 28%, rgba(46,157,255,.56) 50%, rgba(150,91,252,.80) 72%, transparent 97%);
  opacity: .72;
}

.mk-primary-nav a {
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 12px rgba(0,0,0,.25);
}

.mk-primary-nav a:hover,
.mk-primary-nav .current-menu-item > a {
  color: #FFFFFF;
  background: linear-gradient(110deg, rgba(0,231,255,.14), rgba(150,91,252,.16));
  box-shadow: inset 0 0 0 1px rgba(121, 204, 255, .15);
}

.mk-menu-toggle {
  color: #FFFFFF;
  border-color: rgba(120, 206, 255, .25);
  background: linear-gradient(110deg, rgba(10,31,53,.96), rgba(26,15,58,.96));
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

.mk-menu-toggle-bars::before,
.mk-menu-toggle-bars::after,
.mk-menu-toggle-bars span {
  background: #FFFFFF;
}

/* HERO — układ motywów odpowiada grafice: obwody po lewej, sieć po prawej */
.mk-hero {
  background-color: var(--mk-brand-deep);
  background-image:
    url('assets/brand-circuit-photo.webp'),
    url('assets/brand-network-photo.webp'),
    radial-gradient(circle at 17% 30%, rgba(0, 231, 255, .11), transparent 34%),
    radial-gradient(circle at 86% 31%, rgba(150, 91, 252, .13), transparent 35%),
    linear-gradient(105deg, #000916 0%, #041526 46%, #0B0821 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left -16px center, right -8px center, center, center, center;
  background-size: min(43vw, 610px) auto, min(41vw, 585px) auto, cover, cover, cover;
  background-blend-mode: screen, screen, normal, normal, normal;
}

.mk-hero::before {
  background-image:
    radial-gradient(circle at 22% 16%, rgba(0,231,255,.08), transparent 24%),
    radial-gradient(circle at 78% 18%, rgba(150,91,252,.08), transparent 25%);
  background-size: cover, cover;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 96%);
}

.mk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, rgba(0,9,22,.08) 0%, rgba(0,9,22,.22) 44%, rgba(0,9,22,.48) 100%);
}

.mk-hero-inner {
  z-index: 2;
}

.mk-eyebrow {
  border-color: rgba(126, 217, 255, .24);
  background: linear-gradient(110deg, rgba(0,231,255,.07), rgba(150,91,252,.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

.mk-eyebrow::before {
  background: var(--mk-cyan-bright);
  box-shadow: 0 0 0 6px rgba(0,231,255,.10), 0 0 18px rgba(0,231,255,.60);
}

.mk-hero-card {
  border-color: rgba(118, 203, 255, .20);
  background: linear-gradient(145deg, rgba(8,30,50,.82), rgba(27,14,56,.72));
  box-shadow: 0 28px 90px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.025), var(--mk-brand-glow);
}

.mk-proof-item {
  border-color: rgba(113, 204, 255, .19);
  background: linear-gradient(135deg, rgba(0,231,255,.055), rgba(150,91,252,.07));
}

/* Główne akcenty marki */
.mk-button,
.wp-block-button__link,
button,
input[type="submit"] {
  background: var(--mk-brand-gradient);
  box-shadow: 0 14px 32px rgba(34, 161, 233, .20), 0 10px 34px rgba(150,91,252,.13);
}

.mk-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
  background: linear-gradient(100deg, #00CBE8 0%, #267EDC 48%, #7E46E5 100%);
  box-shadow: 0 18px 42px rgba(27,198,224,.20), 0 16px 40px rgba(150,91,252,.16);
}

.mk-button-secondary {
  background: rgba(255,255,255,.065);
  border-color: rgba(153, 217, 255, .30);
  box-shadow: inset 0 0 0 1px rgba(150,91,252,.05);
}

.mk-section-kicker {
  background: var(--mk-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: .085em;
  text-transform: uppercase;
}

/* Subtelny motyw w jasnych sekcjach — bez pogorszenia czytelności */
.mk-section,
.mk-section-soft,
.mk-section-dark {
  position: relative;
  overflow: hidden;
}

.mk-section-soft::before,
.mk-section-soft::after,
.mk-section-dark::before,
.mk-section-dark::after {
  content: "";
  position: absolute;
  width: 470px;
  height: 470px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.mk-section-soft::before {
  left: -260px;
  top: -110px;
  background-image: none;
  opacity: 0;
}

.mk-section-soft::after {
  right: -265px;
  bottom: -130px;
  background-image: none;
  opacity: 0;
}

.mk-section-dark {
  background:
    radial-gradient(circle at 18% 28%, rgba(0,231,255,.08), transparent 28%),
    radial-gradient(circle at 82% 70%, rgba(150,91,252,.10), transparent 32%),
    linear-gradient(110deg, #000D1C 0%, #071C31 52%, #100A28 100%);
}

.mk-section-dark::before {
  left: -150px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url('assets/brand-circuit-photo.webp');
  opacity: .34;
  mix-blend-mode: screen;
}

.mk-section-dark::after {
  right: -145px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url('assets/brand-network-photo.webp');
  opacity: .34;
  mix-blend-mode: screen;
}

.mk-section > .mk-container,
.mk-section > .mk-section-header,
.mk-section > .mk-grid {
  position: relative;
  z-index: 1;
}

/* Karty, panele i technologie — detal cyan/purple zamiast przypadkowych akcentów */
.mk-card,
.mk-panel,
.mk-step {
  position: relative;
  overflow: hidden;
}

.mk-card::before,
.mk-panel::before,
.mk-step::before {
  box-shadow: none;
}

.mk-card::after,
.mk-panel::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, rgba(0,231,255,.82), rgba(46,157,255,.56) 52%, rgba(150,91,252,.82));
  opacity: .70;
}

.mk-card:hover,
.mk-panel:hover {
  border-color: rgba(91, 176, 255, .32);
  box-shadow: 0 22px 62px rgba(11,31,58,.12), 0 12px 34px rgba(150,91,252,.06);
}

.mk-icon {
  color: #075D78;
  background: linear-gradient(135deg, rgba(0,231,255,.14), rgba(150,91,252,.12));
  box-shadow: inset 0 0 0 1px rgba(51, 176, 222, .12);
}

.mk-chip {
  border-color: rgba(63, 151, 214, .18);
  background: linear-gradient(145deg, #FFFFFF, #F9FBFF);
  box-shadow: 0 12px 30px rgba(15,23,42,.05), inset 0 0 0 1px rgba(150,91,252,.025);
}

.mk-chip:hover {
  border-color: rgba(108, 133, 255, .34);
  box-shadow: 0 14px 32px rgba(27,198,224,.08), 0 10px 28px rgba(150,91,252,.07);
}

.mk-list-clean li::before {
  background: linear-gradient(135deg, var(--mk-cyan-bright), var(--mk-purple));
  box-shadow: 0 0 0 4px rgba(27,198,224,.07);
}

/* Pola formularza */
.mk-contact-form input:focus,
.mk-contact-form select:focus,
.mk-contact-form textarea:focus {
  border-color: rgba(53, 165, 235, .72);
  box-shadow: 0 0 0 4px rgba(27,198,224,.09), 0 0 0 6px rgba(150,91,252,.035);
  outline: none;
}

/* Stopka domyka identyfikację wizualną */
.mk-site-footer {
  position: relative;
  overflow: hidden;
  background-color: #000916;
  background-image:
    url('assets/brand-circuit-photo.webp'),
    url('assets/brand-network-photo.webp'),
    linear-gradient(110deg, #000916 0%, #07182C 50%, #100822 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left -145px center, right -135px center, center;
  background-size: 430px auto, 410px auto, cover;
  background-blend-mode: screen, screen, normal;
  border-top: 1px solid rgba(88, 201, 255, .13);
}

.mk-footer-main,
.mk-footer-bottom {
  position: relative;
  z-index: 1;
}

.mk-site-footer a:hover {
  color: var(--mk-cyan-bright);
}

@media (max-width: 980px) {
  .mk-primary-nav {
    border-color: rgba(115, 203, 255, .20);
    background: linear-gradient(145deg, rgba(0,12,28,.985), rgba(17,10,43,.985));
    box-shadow: 0 24px 70px rgba(0,0,0,.36);
  }

  .mk-primary-nav a {
    color: rgba(255,255,255,.92);
  }

  .mk-site-header {
    background-position: left -190px center, right -190px center, center;
  }

  .mk-hero {
    background-position: left -175px center, right -175px center, center, center, center;
    background-size: 500px auto, 475px auto, cover, cover, cover;
  }
}

@media (max-width: 720px) {
  .mk-site-header {
    background-image: linear-gradient(110deg, rgba(0,9,22,.99), rgba(14,8,35,.99));
  }

  .mk-hero {
    background-position: left -315px top 72px, right -315px bottom 20px, center, center, center;
    background-size: 520px auto, 500px auto, cover, cover, cover;
  }

  .mk-section-soft::before,
  .mk-section-soft::after,
  .mk-section-dark::before,
  .mk-section-dark::after {
    width: 330px;
    height: 330px;
  }

  .mk-section-soft::before,
  .mk-section-dark::before { left: -230px; }
  .mk-section-soft::after,
  .mk-section-dark::after { right: -235px; }

  .mk-site-footer {
    background-position: left -275px top 30px, right -270px bottom 20px, center;
    background-size: 470px auto, 455px auto, cover;
  }
}



/* 2.3.1 — motywy bezpośrednio oparte na grafice marki LinkedIn.
   Zdjęciowa poświata i nieregularne linie zastępują zbyt techniczne SVG w ciemnych obszarach. */
.mk-hero, .mk-site-header, .mk-site-footer {
  isolation: isolate;
}
.mk-section-dark::before, .mk-section-dark::after {
  border-radius: 28px;
  filter: saturate(1.08) contrast(1.03);
}
@media (min-width: 1200px) {
  .mk-hero {
    background-size: 610px auto, 585px auto, cover, cover, cover;
  }
}


/* =========================================================
   MK-TECH 2.3.2 — profesjonalne wkomponowanie motywów marki
   Bez prostokątnych "wstawek zdjęć". Oryginalne linie z
   banera zostały wyizolowane na przezroczystym tle i służą
   wyłącznie jako dekoracja krawędzi hero.
   ========================================================= */

/* Nagłówek ma być czysty i premium — bez powtarzanych fotografii. */
.mk-site-header {
  background-color: rgba(0, 9, 22, .97);
  background-image:
    radial-gradient(circle at 14% 50%, rgba(0, 231, 255, .055), transparent 28%),
    radial-gradient(circle at 86% 50%, rgba(150, 91, 252, .065), transparent 30%),
    linear-gradient(110deg, #000916 0%, #07182C 52%, #0B0920 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-blend-mode: normal;
}

/* Hero: motywy są przezroczyste, więc nie mają widocznych ramek ani krawędzi zdjęcia. */
.mk-hero {
  background-color: #000916;
  background-image:
    linear-gradient(90deg, rgba(0,9,22,.42) 0%, rgba(0,9,22,.70) 25%, rgba(3,15,30,.88) 43%, rgba(7,14,31,.90) 61%, rgba(10,8,31,.70) 80%, rgba(10,8,31,.38) 100%),
    url('assets/brand-circuit-overlay.webp'),
    url('assets/brand-network-overlay.webp'),
    radial-gradient(circle at 12% 42%, rgba(0,231,255,.12), transparent 32%),
    radial-gradient(circle at 90% 34%, rgba(150,91,252,.14), transparent 34%),
    linear-gradient(108deg, #000916 0%, #041526 48%, #0B0821 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: center, left -80px center, right -55px center, center, center, center;
  background-size: cover, min(34vw, 565px) auto, min(32vw, 519px) auto, cover, cover, cover;
  background-blend-mode: normal;
}

.mk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0,9,22,.02) 0%, rgba(0,9,22,.08) 46%, rgba(0,9,22,.30) 100%);
  mask-image: none;
}

.mk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.09));
}

/* Wewnętrzne sekcje pozostają eleganckie — bez wklejonych fragmentów banera. */
.mk-section-dark::before,
.mk-section-dark::after {
  background-image: none !important;
  opacity: 0 !important;
}

.mk-section-dark {
  background:
    radial-gradient(circle at 16% 28%, rgba(0,231,255,.065), transparent 30%),
    radial-gradient(circle at 84% 72%, rgba(150,91,252,.075), transparent 32%),
    linear-gradient(110deg, #000D1C 0%, #071C31 52%, #100A28 100%);
}

/* Stopka również bez zdjęciowych boków — branding domyka światło i cienka linia. */
.mk-site-footer {
  background-color: #000916;
  background-image:
    radial-gradient(circle at 16% 0%, rgba(0,231,255,.055), transparent 28%),
    radial-gradient(circle at 84% 0%, rgba(150,91,252,.065), transparent 30%),
    linear-gradient(110deg, #000916 0%, #07182C 50%, #100822 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-blend-mode: normal;
}

/* Delikatniejszy akcent kart: mniej "neonu", więcej porządku. */
.mk-card::after,
.mk-panel::after {
  height: 2px;
  opacity: .52;
}

@media (min-width: 1440px) {
  .mk-hero {
    background-position: center, left -55px center, right -35px center, center, center, center;
    background-size: cover, 565px auto, 519px auto, cover, cover, cover;
  }
}

@media (max-width: 1100px) {
  .mk-hero {
    background-position: center, left -245px center, right -235px center, center, center, center;
    background-size: cover, 565px auto, 519px auto, cover, cover, cover;
  }
}

@media (max-width: 720px) {
  .mk-hero {
    background-image:
      linear-gradient(105deg, rgba(0,9,22,.84), rgba(8,10,31,.86)),
      url('assets/brand-circuit-overlay.webp'),
      url('assets/brand-network-overlay.webp'),
      linear-gradient(108deg, #000916 0%, #041526 48%, #0B0821 100%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: center, left -390px top 72px, right -360px bottom 24px, center;
    background-size: cover, 565px auto, 519px auto, cover;
  }
}


/* =========================================================
   MK-TECH 2.4.0 — pełnowysokościowe motywy hero
   Dwie osobne grafiki wygenerowane specjalnie do strony:
   cyan PCB po lewej i purple network po prawej. Każda
   zajmuje pełną wysokość sekcji, bez prostokątnych wstawek.
   ========================================================= */
.mk-hero {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(3, 17, 34, .96) 0%, rgba(3, 16, 32, .92) 35%, rgba(4, 15, 31, .74) 58%, rgba(3, 11, 25, .40) 100%),
    linear-gradient(105deg, #000916 0%, #041526 48%, #0B0821 100%);
}

/* Lewa grafika: pełna wysokość hero, bez skalowania do małego kafla. */
.mk-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(43vw, 720px);
  height: 100%;
  pointer-events: none;
  background: url('assets/mk-tech-hero-left-full.webp') left center / auto 100% no-repeat;
  opacity: .96;
  filter: saturate(1.05) contrast(1.03);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 72%, rgba(0,0,0,.72) 84%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 72%, rgba(0,0,0,.72) 84%, transparent 100%);
}

/* Prawa grafika: pełna wysokość hero i płynne przejście do środka. */
.mk-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: min(43vw, 720px);
  height: 100%;
  pointer-events: none;
  background: url('assets/mk-tech-hero-right-full.webp') right center / auto 100% no-repeat;
  opacity: .98;
  filter: saturate(1.06) contrast(1.04);
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 72%, rgba(0,0,0,.72) 84%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, #000 72%, rgba(0,0,0,.72) 84%, transparent 100%);
}

.mk-hero-inner {
  position: relative;
  z-index: 2;
}

/* Czytelność treści bez zasłaniania bocznych ilustracji. */
.mk-hero-copy {
  position: relative;
  z-index: 2;
}

.mk-hero-card {
  position: relative;
  z-index: 2;
  background: linear-gradient(145deg, rgba(5, 23, 42, .86), rgba(23, 12, 53, .80));
  border-color: rgba(119, 205, 255, .23);
  box-shadow: 0 30px 90px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.026);
  backdrop-filter: blur(16px);
}

@media (min-width: 1600px) {
  .mk-hero::before,
  .mk-hero::after {
    width: 690px;
  }
}

@media (max-width: 1180px) {
  .mk-hero::before,
  .mk-hero::after {
    width: 52vw;
    opacity: .72;
  }

  .mk-hero {
    background:
      radial-gradient(ellipse at 50% 48%, rgba(3,17,34,.97) 0%, rgba(3,16,32,.93) 43%, rgba(4,15,31,.70) 72%, rgba(3,11,25,.44) 100%),
      linear-gradient(105deg, #000916 0%, #041526 48%, #0B0821 100%);
  }
}

@media (max-width: 720px) {
  .mk-hero::before,
  .mk-hero::after {
    display: block;
    width: 82vw;
    opacity: .34;
    background-size: auto 100%;
  }

  .mk-hero::before {
    left: -34vw;
  }

  .mk-hero::after {
    right: -34vw;
  }

  .mk-hero {
    background: linear-gradient(110deg, #000916 0%, #061426 52%, #0D0925 100%);
  }
}


/* =========================================================
   MK-TECH 2.4.1 — poprawa czytelności lewej części HERO
   Lewa treść otrzymuje panel spójny z kartą "Zakres wsparcia".
   ========================================================= */
@media (min-width: 981px) {
  .mk-hero-inner > div:first-child {
    position: relative;
    z-index: 3;
    padding: 34px 36px 32px;
    border: 1px solid rgba(105, 211, 255, .24);
    border-radius: 28px;
    background:
      linear-gradient(145deg, rgba(3, 22, 40, .90), rgba(7, 18, 38, .86) 62%, rgba(25, 12, 52, .78));
    box-shadow:
      0 30px 90px rgba(0, 0, 0, .40),
      inset 0 1px 0 rgba(255, 255, 255, .04),
      inset 3px 0 0 rgba(0, 209, 255, .22);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    backdrop-filter: blur(18px) saturate(1.08);
  }

  .mk-hero-inner > div:first-child::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
      radial-gradient(circle at 0% 20%, rgba(0, 214, 255, .12), transparent 35%),
      radial-gradient(circle at 100% 90%, rgba(143, 75, 255, .10), transparent 34%);
  }

  .mk-hero-inner > div:first-child > * {
    position: relative;
    z-index: 1;
  }
}

/* Wyraźniejszy tekst na ciemnym szkle. */
.mk-hero .mk-eyebrow {
  color: rgba(255,255,255,.96);
  background: rgba(1, 14, 29, .38);
  border-color: rgba(102, 214, 255, .26);
}

.mk-hero h1 {
  text-shadow: 0 3px 18px rgba(0, 0, 0, .38);
}

.mk-hero-lead {
  color: rgba(244, 249, 255, .94);
  line-height: 1.62;
}

.mk-hero .mk-button-secondary {
  background: rgba(2, 15, 31, .68);
  border-color: rgba(129, 210, 255, .38);
}

.mk-hero-proof {
  gap: 12px;
}

.mk-hero .mk-proof-item {
  flex: 1 1 0;
  min-width: 0;
  padding: 15px 16px;
  background: linear-gradient(145deg, rgba(2, 18, 36, .72), rgba(25, 12, 50, .58));
  border-color: rgba(116, 205, 255, .20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.mk-hero .mk-proof-item strong {
  font-size: 24px;
}

.mk-hero .mk-proof-item span {
  color: rgba(237, 246, 255, .86);
  line-height: 1.35;
}

/* Oba panele mają zbliżoną głębię i obramowanie. */
.mk-hero-card {
  border-color: rgba(149, 120, 255, .25);
  background: linear-gradient(145deg, rgba(5, 23, 42, .90), rgba(26, 12, 55, .84));
}

@media (max-width: 980px) {
  .mk-hero-inner > div:first-child {
    padding: 30px;
    border: 1px solid rgba(105, 211, 255, .22);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(3, 22, 40, .92), rgba(19, 11, 47, .84));
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

@media (max-width: 720px) {
  .mk-hero-inner > div:first-child {
    padding: 24px;
    border-radius: 20px;
  }

  .mk-hero-proof {
    gap: 10px;
  }
}


/* =========================================================
   MK-TECH 2.4.2 — wyrównanie paneli HERO
   Na desktopie oba panele zaczynają się na tej samej wysokości.
   ========================================================= */
@media (min-width: 981px) {
  .mk-hero-inner {
    align-items: start;
  }

  .mk-hero-inner > div:first-child,
  .mk-hero-card {
    align-self: start;
  }
}

/* =========================================================
   MK-TECH 2.5.0 — Dark Brand System
   Jeden spójny język wizualny dla strony głównej i podstron:
   ciemny granat, biel, cyan i purple z identyfikacji MK-TECH.
   ========================================================= */
:root {
  --mk-brand-bg: #020817;
  --mk-brand-bg-2: #041225;
  --mk-brand-surface: rgba(7, 24, 43, .88);
  --mk-brand-surface-2: rgba(10, 29, 52, .82);
  --mk-brand-surface-3: rgba(17, 17, 48, .76);
  --mk-brand-text: #F4F8FF;
  --mk-brand-muted: #B4C3D6;
  --mk-brand-border: rgba(113, 200, 255, .18);
  --mk-brand-border-strong: rgba(118, 207, 255, .30);
  --mk-brand-shadow: 0 24px 70px rgba(0, 0, 0, .30);
  --mk-brand-radius: 22px;
}

html {
  background: var(--mk-brand-bg);
}

body {
  background:
    radial-gradient(circle at 8% 8%, rgba(0, 231, 255, .045), transparent 24%),
    radial-gradient(circle at 92% 12%, rgba(150, 91, 252, .055), transparent 26%),
    var(--mk-brand-bg);
  color: var(--mk-brand-text);
}

::selection {
  background: rgba(0, 231, 255, .28);
  color: #FFFFFF;
}

.mk-main {
  background: var(--mk-brand-bg);
  color: var(--mk-brand-text);
}

.mk-main h1,
.mk-main h2,
.mk-main h3,
.mk-main h4,
.mk-main h5,
.mk-main h6 {
  color: #FFFFFF;
}

.mk-main p,
.mk-main li,
.mk-main .entry-content {
  color: var(--mk-brand-muted);
}

.mk-main strong {
  color: #F8FBFF;
}

.mk-main a:not(.mk-button):not(.wp-block-button__link) {
  color: #50DDF0;
}

.mk-main a:not(.mk-button):not(.wp-block-button__link):hover {
  color: #B28CFF;
}

/* Topbar + navigation: prostsze i bardziej premium, bez zdjęciowych wstawek. */
.mk-topbar {
  background: #010611;
  border-bottom: 1px solid rgba(105, 208, 255, .10);
  color: rgba(228, 239, 252, .78);
}

.mk-topbar a {
  color: rgba(244, 249, 255, .92);
}

.mk-site-header {
  background:
    radial-gradient(circle at 13% 0%, rgba(0, 231, 255, .06), transparent 26%),
    radial-gradient(circle at 88% 0%, rgba(150, 91, 252, .07), transparent 28%),
    rgba(2, 8, 23, .965);
  background-image:
    radial-gradient(circle at 13% 0%, rgba(0, 231, 255, .06), transparent 26%),
    radial-gradient(circle at 88% 0%, rgba(150, 91, 252, .07), transparent 28%);
  border-bottom: 1px solid rgba(112, 202, 255, .14);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .22);
  backdrop-filter: blur(18px);
}

.mk-site-header::after {
  height: 1px;
  opacity: .58;
}

.mk-header-inner {
  min-height: 90px;
}

.mk-brand-logo {
  width: 142px;
  max-height: 80px;
}

.mk-primary-nav a {
  color: rgba(236, 245, 255, .82);
  font-size: 15.5px;
  font-weight: 750;
  letter-spacing: .01em;
}

.mk-primary-nav a:hover,
.mk-primary-nav .current-menu-item > a {
  color: #FFFFFF;
  background: linear-gradient(110deg, rgba(0, 231, 255, .10), rgba(150, 91, 252, .12));
  box-shadow: inset 0 0 0 1px rgba(119, 205, 255, .15);
}

/* HERO: grafika nadal ma pełną wysokość, ale nie konkuruje z treścią. */
.mk-hero {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(5, 24, 44, .97) 0%, rgba(4, 18, 35, .95) 42%, rgba(3, 13, 29, .78) 68%, rgba(2, 8, 23, .54) 100%),
    linear-gradient(110deg, #020817 0%, #05162A 50%, #0C0927 100%);
  border-bottom: 1px solid rgba(113, 200, 255, .10);
}

.mk-hero::before,
.mk-hero::after {
  opacity: .68;
  filter: saturate(.94) contrast(1.02);
}

.mk-hero-inner {
  min-height: 720px;
  gap: 34px;
  padding: 72px 0 78px;
  align-items: stretch;
}

@media (min-width: 981px) {
  .mk-hero-inner > div:first-child,
  .mk-hero-card {
    height: 100%;
    min-height: 570px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    border-radius: 26px;
    border: 1px solid rgba(119, 205, 255, .20);
    background:
      radial-gradient(circle at 0% 0%, rgba(0, 231, 255, .07), transparent 32%),
      radial-gradient(circle at 100% 100%, rgba(150, 91, 252, .08), transparent 34%),
      linear-gradient(145deg, rgba(4, 21, 39, .90), rgba(8, 19, 38, .88) 58%, rgba(24, 13, 51, .82));
    box-shadow: 0 28px 78px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter: blur(18px) saturate(1.04);
  }

  .mk-hero-inner > div:first-child {
    padding: 36px 38px;
  }

  .mk-hero-card {
    padding: 32px;
  }
}

.mk-hero-inner > div:first-child::before {
  opacity: .72;
}

.mk-hero h1 {
  color: #FFFFFF;
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1.12;
  text-wrap: balance;
}

.mk-hero-lead {
  color: rgba(228, 239, 252, .87);
  font-size: clamp(17px, 1.35vw, 19px);
}

.mk-eyebrow {
  color: rgba(244, 249, 255, .90);
  background: rgba(2, 13, 27, .52);
  border-color: rgba(105, 210, 255, .22);
}

.mk-hero-logo {
  max-width: 260px;
  margin-bottom: 18px;
}

.mk-system-list li {
  color: rgba(224, 237, 250, .84);
}

.mk-check {
  color: #35E6F6;
  background: rgba(0, 231, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(0, 231, 255, .12);
}

.mk-mini-dashboard {
  border-top-color: rgba(133, 205, 255, .14);
}

.mk-mini-dashboard div,
.mk-proof-item {
  background: rgba(3, 16, 33, .62);
  border-color: rgba(121, 203, 255, .15);
}

.mk-mini-dashboard span {
  color: #42E4F4;
}

.mk-mini-dashboard strong,
.mk-proof-item span {
  color: rgba(225, 238, 251, .82);
}

/* Sekcje: jedna ciemna rodzina kolorów, z delikatnym rytmem zamiast białych bloków. */
.mk-section,
.mk-section-soft,
.mk-section-dark,
.mk-page-content {
  color: var(--mk-brand-text);
  border: 0;
}

.mk-section {
  background:
    radial-gradient(circle at 8% 10%, rgba(0, 231, 255, .025), transparent 24%),
    linear-gradient(180deg, #020817 0%, #041024 100%);
}

.mk-section-soft {
  background:
    radial-gradient(circle at 92% 18%, rgba(150, 91, 252, .035), transparent 24%),
    linear-gradient(180deg, #051226 0%, #06172B 100%);
}

.mk-section-dark {
  background:
    radial-gradient(circle at 12% 28%, rgba(0, 231, 255, .055), transparent 26%),
    radial-gradient(circle at 88% 70%, rgba(150, 91, 252, .065), transparent 28%),
    linear-gradient(110deg, #020A19 0%, #06182D 52%, #0C0A28 100%);
}

.mk-section + .mk-section,
.mk-section + .mk-section-soft,
.mk-section-soft + .mk-section,
.mk-section-soft + .mk-section-dark,
.mk-section-dark + .mk-section {
  border-top: 1px solid rgba(121, 199, 255, .06);
}

.mk-section-header {
  max-width: 850px;
}

.mk-section-header h2,
.mk-section-dark h2,
.mk-section-dark h3 {
  color: #FFFFFF;
}

.mk-section-header p,
.mk-section-dark p {
  color: var(--mk-brand-muted);
}

.mk-section-kicker {
  background: linear-gradient(95deg, #20DFF3 0%, #58AFFF 50%, #A56CFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}

/* Karty i panele: ten sam materiał na całej stronie. */
.mk-card,
.mk-panel,
.mk-step,
.mk-contact-card,
.mk-cta-panel {
  color: var(--mk-brand-text);
  border: 1px solid var(--mk-brand-border);
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 231, 255, .035), transparent 35%),
    linear-gradient(145deg, rgba(7, 24, 43, .92), rgba(7, 20, 38, .88) 62%, rgba(18, 15, 47, .78));
  box-shadow: var(--mk-brand-shadow), inset 0 1px 0 rgba(255,255,255,.025);
  border-radius: var(--mk-brand-radius);
}

.mk-card::after,
.mk-panel::after {
  height: 2px;
  opacity: .42;
  background: linear-gradient(90deg, rgba(0, 231, 255, .78), rgba(78, 158, 255, .42) 52%, rgba(150, 91, 252, .72));
}

.mk-card:hover,
.mk-panel:hover {
  transform: translateY(-3px);
  border-color: rgba(122, 205, 255, .30);
  box-shadow: 0 28px 74px rgba(0,0,0,.34), 0 0 34px rgba(62, 180, 255, .045);
}

.mk-card h3,
.mk-panel h2,
.mk-panel h3,
.mk-step h3,
.mk-contact-card h2,
.mk-contact-card h3,
.mk-cta-panel strong {
  color: #FFFFFF;
}

.mk-card p,
.mk-panel p,
.mk-step p,
.mk-contact-card p,
.mk-cta-panel p,
.mk-form-footer span {
  color: var(--mk-brand-muted);
}

.mk-list-clean li,
.mk-contact-details,
.mk-consent,
.mk-field label {
  color: #DCE8F6;
}

.mk-list-clean li::before {
  background: linear-gradient(135deg, #22E2F4, #A16BFF);
  box-shadow: 0 0 0 4px rgba(34, 226, 244, .055);
}

.mk-icon {
  color: #7CEBFA;
  background: linear-gradient(135deg, rgba(0, 231, 255, .10), rgba(150, 91, 252, .11));
  border: 1px solid rgba(104, 204, 255, .12);
}

.mk-app-badge {
  color: #7CEBFA;
  background: rgba(0, 231, 255, .08);
  border: 1px solid rgba(0, 231, 255, .11);
}

.mk-chip {
  color: #EAF5FF;
  border-color: rgba(114, 198, 255, .16);
  background: rgba(7, 24, 43, .78);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.mk-chip:hover {
  color: #FFFFFF;
  border-color: rgba(150, 122, 255, .30);
  background: rgba(12, 28, 51, .90);
}

/* Podstrony: nagłówek i treść są częścią tego samego ciemnego systemu. */
.mk-page-header {
  position: relative;
  overflow: hidden;
  padding: 68px 0 62px;
  background:
    radial-gradient(circle at 12% 20%, rgba(0, 231, 255, .085), transparent 26%),
    radial-gradient(circle at 88% 20%, rgba(150, 91, 252, .09), transparent 28%),
    linear-gradient(110deg, #020817 0%, #06172B 52%, #0C0927 100%);
  border-bottom: 1px solid rgba(113, 201, 255, .11);
}

.mk-page-header::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,231,255,.42), rgba(150,91,252,.42), transparent);
}

.mk-page-header h1 {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  font-size: clamp(30px, 3.2vw, 44px);
  letter-spacing: -.025em;
}

.mk-page-content {
  padding: 78px 0 96px;
  background:
    radial-gradient(circle at 6% 4%, rgba(0, 231, 255, .025), transparent 24%),
    radial-gradient(circle at 94% 16%, rgba(150, 91, 252, .03), transparent 25%),
    linear-gradient(180deg, #020817 0%, #041124 100%);
}

.mk-page-content .entry-content {
  color: var(--mk-brand-muted);
}

.mk-page-content .entry-content > .mk-section-header:first-child {
  padding: 30px 32px;
  border: 1px solid rgba(115, 202, 255, .13);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(7,24,43,.72), rgba(15,13,43,.60));
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
}

.mk-legal-content h3 {
  color: #FFFFFF;
}

/* Formularz: ciemny i czytelny, bez białych pól odrywających się od layoutu. */
.mk-contact-form {
  color-scheme: dark;
}

.mk-field input,
.mk-field select,
.mk-field textarea {
  color: #F4F8FF;
  background: rgba(2, 13, 28, .78);
  border-color: rgba(120, 199, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.mk-field input::placeholder,
.mk-field textarea::placeholder {
  color: #7F94AB;
}

.mk-field input:focus,
.mk-field select:focus,
.mk-field textarea:focus {
  border-color: rgba(56, 215, 240, .65);
  box-shadow: 0 0 0 4px rgba(0, 231, 255, .075), 0 0 0 6px rgba(150, 91, 252, .025);
}

.mk-field select option {
  color: #F4F8FF;
  background: #06152A;
}

.mk-form-success {
  color: #A8F6DB;
  background: rgba(32, 201, 151, .09);
  border-color: rgba(32, 201, 151, .25);
}

.mk-form-error {
  color: #FFB7C0;
  background: rgba(239, 68, 68, .09);
  border-color: rgba(239, 68, 68, .24);
}

/* CTA i przyciski — jasne wezwanie do działania, ale bez nadmiernego neonu. */
.mk-button,
.wp-block-button__link,
button,
input[type="submit"] {
  background: linear-gradient(100deg, #12CFE7 0%, #3B91F4 48%, #9357F5 100%);
  box-shadow: 0 12px 28px rgba(25, 162, 226, .15), 0 10px 28px rgba(139, 77, 237, .10);
}

.mk-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
  background: linear-gradient(100deg, #21D7EB 0%, #4A9DFF 48%, #A16AFF 100%);
  box-shadow: 0 16px 34px rgba(25, 162, 226, .19), 0 12px 32px rgba(139, 77, 237, .13);
}

.mk-button-secondary {
  color: #F4F8FF !important;
  background: rgba(3, 16, 33, .72);
  border: 1px solid rgba(120, 205, 255, .26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

/* Stopka: spokojne domknięcie strony, ta sama paleta co reszta. */
.mk-site-footer {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 231, 255, .045), transparent 25%),
    radial-gradient(circle at 88% 0%, rgba(150, 91, 252, .05), transparent 27%),
    #010611;
  border-top: 1px solid rgba(111, 199, 255, .11);
  color: rgba(205, 220, 237, .76);
}

.mk-site-footer p,
.mk-site-footer li {
  color: rgba(205, 220, 237, .74);
}

.mk-site-footer h3,
.mk-site-footer h4 {
  color: #FFFFFF;
}

.mk-site-footer a {
  color: rgba(226, 238, 250, .82);
}

.mk-site-footer a:hover {
  color: #52E1F2;
}

.mk-footer-bottom {
  border-top-color: rgba(255,255,255,.08);
  color: rgba(182, 200, 220, .66);
}

/* WordPress / artykuły / paginacja również bez jasnych wysp. */
.mk-page-content article.mk-card a,
.navigation a,
.nav-links a {
  color: #77E7F6;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  margin: 4px;
  padding: 8px 12px;
  border: 1px solid rgba(119, 202, 255, .16);
  border-radius: 12px;
  background: rgba(7, 24, 43, .72);
  color: #DDEAF7;
}

.page-numbers.current,
.page-numbers:hover {
  border-color: rgba(89, 211, 244, .32);
  background: linear-gradient(110deg, rgba(0,231,255,.12), rgba(150,91,252,.13));
  color: #FFFFFF;
}

@media (max-width: 980px) {
  .mk-header-inner {
    min-height: 78px;
  }

  .mk-primary-nav {
    border-color: rgba(119, 201, 255, .18);
    background: linear-gradient(145deg, rgba(2, 12, 27, .99), rgba(15, 10, 40, .99));
    box-shadow: 0 24px 70px rgba(0,0,0,.42);
  }

  .mk-hero-inner {
    gap: 26px;
  }

  .mk-hero-inner > div:first-child,
  .mk-hero-card {
    background: linear-gradient(145deg, rgba(4,21,39,.92), rgba(20,12,48,.86));
  }
}

@media (max-width: 720px) {
  .mk-topbar-inner {
    gap: 6px;
  }

  .mk-topbar-links {
    justify-content: flex-start;
  }

  .mk-hero::before,
  .mk-hero::after {
    opacity: .22;
  }

  .mk-hero-inner {
    padding: 50px 0 58px;
  }

  .mk-hero-inner > div:first-child,
  .mk-hero-card {
    border-color: rgba(116, 203, 255, .17);
    background: rgba(5, 19, 37, .92);
    box-shadow: 0 18px 52px rgba(0,0,0,.28);
  }

  .mk-page-header {
    padding: 50px 0 46px;
  }

  .mk-page-content {
    padding: 54px 0 70px;
  }

  .mk-page-content .entry-content > .mk-section-header:first-child {
    padding: 24px;
  }
}

/* =========================================================
   MK-TECH 2.5.1 — Balanced Dark
   Jaśniejszy, bardziej czytelny rytm sekcji bez utraty
   technologicznego charakteru marki. HERO pozostaje premium-dark.
   ========================================================= */
:root {
  --mk-brand-bg: #061426;
  --mk-brand-bg-2: #081B31;
  --mk-brand-surface: rgba(14, 43, 70, .94);
  --mk-brand-surface-2: rgba(11, 35, 59, .92);
  --mk-brand-surface-3: rgba(24, 23, 59, .86);
  --mk-brand-text: #F8FBFF;
  --mk-brand-muted: #D5E1EE;
  --mk-brand-border: rgba(128, 206, 255, .21);
  --mk-brand-border-strong: rgba(130, 212, 255, .34);
  --mk-brand-shadow: 0 18px 48px rgba(0, 7, 18, .24);
}

html,
body,
.mk-main {
  background: #061426;
}

body {
  background-image:
    radial-gradient(circle at 7% 5%, rgba(0, 231, 255, .055), transparent 25%),
    radial-gradient(circle at 94% 10%, rgba(150, 91, 252, .060), transparent 27%),
    linear-gradient(180deg, #051225 0%, #071A2D 100%);
}

.mk-main p,
.mk-main li,
.mk-main .entry-content,
.mk-section-header p,
.mk-section-dark p,
.mk-card p,
.mk-panel p,
.mk-step p,
.mk-contact-card p,
.mk-cta-panel p,
.mk-form-footer span {
  color: #D5E1EE;
}

/* HERO pozostaje najmocniejszym i najciemniejszym elementem strony. */
.mk-hero {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(5, 24, 44, .97) 0%, rgba(4, 18, 35, .95) 42%, rgba(3, 13, 29, .78) 68%, rgba(2, 8, 23, .54) 100%),
    linear-gradient(110deg, #020817 0%, #05162A 50%, #0C0927 100%);
}

.mk-hero-lead,
.mk-system-list li,
.mk-proof-item span,
.mk-mini-dashboard strong {
  color: #DCE7F3;
}

/* Czytelny rytm przewijania: ciemny granat -> jaśniejszy granat -> akcent. */
.mk-section {
  background:
    radial-gradient(circle at 8% 10%, rgba(0, 231, 255, .035), transparent 25%),
    linear-gradient(180deg, #071A2D 0%, #081D33 100%);
}

.mk-section-soft {
  background:
    radial-gradient(circle at 92% 18%, rgba(150, 91, 252, .050), transparent 25%),
    linear-gradient(180deg, #0A2037 0%, #0B233C 100%);
}

.mk-section-dark {
  background:
    radial-gradient(circle at 12% 28%, rgba(0, 231, 255, .075), transparent 28%),
    radial-gradient(circle at 88% 70%, rgba(150, 91, 252, .085), transparent 30%),
    linear-gradient(110deg, #06152A 0%, #0A2038 52%, #121331 100%);
}

.mk-section + .mk-section,
.mk-section + .mk-section-soft,
.mk-section-soft + .mk-section,
.mk-section-soft + .mk-section-dark,
.mk-section-dark + .mk-section {
  border-top: 1px solid rgba(149, 213, 255, .09);
}

/* Karty są wyraźnie jaśniejsze od tła sekcji, więc oferta nie zlewa się w jeden blok. */
.mk-card,
.mk-panel,
.mk-step,
.mk-contact-card,
.mk-cta-panel {
  border-color: rgba(133, 205, 255, .22);
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 231, 255, .045), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(150, 91, 252, .035), transparent 38%),
    linear-gradient(145deg, rgba(16, 43, 71, .96), rgba(12, 37, 63, .94) 62%, rgba(24, 22, 58, .90));
  box-shadow: 0 16px 42px rgba(0, 7, 18, .20), inset 0 1px 0 rgba(255,255,255,.035);
}

.mk-card:hover,
.mk-panel:hover {
  border-color: rgba(124, 218, 255, .36);
  box-shadow: 0 22px 52px rgba(0, 7, 18, .24), 0 0 28px rgba(60, 185, 255, .050);
}

.mk-card::after,
.mk-panel::after {
  opacity: .50;
}

.mk-icon {
  color: #8DEEFF;
  background: linear-gradient(135deg, rgba(0, 231, 255, .13), rgba(150, 91, 252, .12));
  border-color: rgba(125, 215, 255, .17);
}

.mk-chip {
  color: #EFF7FF;
  background: rgba(14, 42, 68, .88);
  border-color: rgba(127, 204, 255, .19);
  box-shadow: 0 10px 26px rgba(0, 7, 18, .14);
}

.mk-chip:hover {
  background: rgba(18, 48, 77, .96);
  border-color: rgba(157, 126, 255, .33);
}

/* Podstrony: jaśniejsza powierzchnia robocza i lepsze oddzielenie nagłówka od treści. */
.mk-page-header {
  background:
    radial-gradient(circle at 12% 20%, rgba(0, 231, 255, .095), transparent 28%),
    radial-gradient(circle at 88% 20%, rgba(150, 91, 252, .100), transparent 30%),
    linear-gradient(110deg, #041225 0%, #081C31 52%, #11102E 100%);
}

.mk-page-content {
  background:
    radial-gradient(circle at 6% 4%, rgba(0, 231, 255, .035), transparent 25%),
    radial-gradient(circle at 94% 16%, rgba(150, 91, 252, .040), transparent 26%),
    linear-gradient(180deg, #071A2D 0%, #092038 100%);
}

.mk-page-content .entry-content > .mk-section-header:first-child {
  border-color: rgba(128, 205, 255, .19);
  background:
    radial-gradient(circle at 0% 0%, rgba(0,231,255,.045), transparent 35%),
    linear-gradient(145deg, rgba(15, 43, 70, .94), rgba(22, 23, 58, .90));
  box-shadow: 0 16px 42px rgba(0, 7, 18, .18);
}

/* Formularz: pola są odrobinę jaśniejsze, by zachęcały do interakcji. */
.mk-field input,
.mk-field select,
.mk-field textarea {
  color: #F8FBFF;
  background: rgba(13, 37, 62, .94);
  border-color: rgba(132, 207, 255, .23);
}

.mk-field input::placeholder,
.mk-field textarea::placeholder {
  color: #9EB2C7;
}

.mk-field select option {
  background: #0B223A;
}

/* Kontakt ma być mocnym zakończeniem, ale nie czarną ścianą. */
#kontakt.mk-section-dark {
  background:
    radial-gradient(circle at 10% 24%, rgba(0, 231, 255, .095), transparent 30%),
    radial-gradient(circle at 90% 72%, rgba(150, 91, 252, .105), transparent 32%),
    linear-gradient(110deg, #07182D 0%, #0C2440 52%, #15143A 100%);
}

/* Stopka pozostaje najciemniejszym spokojnym domknięciem. */
.mk-site-footer {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 231, 255, .045), transparent 25%),
    radial-gradient(circle at 88% 0%, rgba(150, 91, 252, .050), transparent 27%),
    #020918;
}

@media (max-width: 980px) {
  .mk-card,
  .mk-panel,
  .mk-step,
  .mk-contact-card,
  .mk-cta-panel {
    background: linear-gradient(145deg, rgba(15, 42, 69, .96), rgba(20, 21, 55, .91));
  }
}

@media (max-width: 720px) {
  .mk-section {
    background: linear-gradient(180deg, #07192C 0%, #081D33 100%);
  }

  .mk-section-soft {
    background: linear-gradient(180deg, #092038 0%, #0B223A 100%);
  }

  .mk-card,
  .mk-panel,
  .mk-step,
  .mk-contact-card,
  .mk-cta-panel {
    border-color: rgba(132, 207, 255, .19);
    background: linear-gradient(145deg, rgba(14, 40, 66, .97), rgba(20, 20, 53, .93));
    box-shadow: 0 12px 34px rgba(0, 7, 18, .18);
  }
}


/* =========================================================
   MK-TECH 2.5.2 — Accent Hierarchy
   Kolor służy do prowadzenia wzroku: nazwy obszarów, ważne
   pogrubienia i obszar działania. Bez nadmiernego neonu.
   ========================================================= */
:root {
  --mk-accent-cyan: #66ECF8;
  --mk-accent-blue: #7DBBFF;
  --mk-accent-purple: #B79BFF;
  --mk-accent-poland: #C7A7FF;
}

/* Kluczowe pogrubienia w treści przejmują barwy marki. */
.mk-section p strong:not(.mk-location):not(.mk-location-group),
.mk-page-content p strong:not(.mk-location):not(.mk-location-group),
.mk-contact-details > div > strong:first-child:not(.mk-location):not(.mk-location-group),
.mk-cta-panel > div > strong:not(.mk-location):not(.mk-location-group) {
  background: linear-gradient(95deg, #6AEAF7 0%, #86C3FF 52%, #B99DFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 850;
}

/* Lokalizacje są specjalnym, łatwo zauważalnym elementem oferty. */
.mk-location,
.mk-location-group {
  font-weight: 900;
  letter-spacing: .005em;
}

.mk-location-cyan { color: var(--mk-accent-cyan) !important; }
.mk-location-blue { color: var(--mk-accent-blue) !important; }
.mk-location-purple { color: var(--mk-accent-purple) !important; }
.mk-location-poland { color: var(--mk-accent-poland) !important; }

.mk-section h2 .mk-location,
.mk-section-header h2 .mk-location {
  text-shadow: 0 0 20px currentColor;
  text-shadow: 0 0 20px color-mix(in srgb, currentColor 18%, transparent);
}

/* Topbar i stopka: lokalizacje widoczne, ale nadal eleganckie. */
.mk-topbar-area .mk-location,
.mk-footer-area .mk-location,
.mk-eyebrow .mk-location {
  font-weight: 900;
  text-shadow: 0 0 16px rgba(89, 218, 246, .10);
}

/* Tytuł każdej podstrony otrzymuje własny akcent. */
.mk-page-title-accent {
  display: inline-block;
  background: linear-gradient(95deg, #62EAF7 0%, #7AB9FF 54%, #B294FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(80, 190, 245, .10));
}

.mk-page-header--oferta .mk-page-title-accent {
  background-image: linear-gradient(95deg, #63ECF7, #79C5FF);
}
.mk-page-header--wdrozenia-it .mk-page-title-accent {
  background-image: linear-gradient(95deg, #78CBFF, #9EA7FF);
}
.mk-page-header--sieci-i-voip .mk-page-title-accent {
  background-image: linear-gradient(95deg, #58EDF7, #72CFFF);
}
.mk-page-header--serwery-i-wirtualizacja .mk-page-title-accent {
  background-image: linear-gradient(95deg, #74C9FF, #9FADFF);
}
.mk-page-header--cyberbezpieczenstwo .mk-page-title-accent {
  background-image: linear-gradient(95deg, #9EA9FF, #C18CFF);
}
.mk-page-header--monitoring-i-automatyzacje .mk-page-title-accent {
  background-image: linear-gradient(95deg, #5EEAF7, #7FC1FF 48%, #B597FF);
}
.mk-page-header--kontakt .mk-page-title-accent {
  background-image: linear-gradient(95deg, #66ECF8, #8ED7FF);
}
.mk-page-header--polityka-prywatnosci .mk-page-title-accent {
  background-image: linear-gradient(95deg, #A9B7C9, #D1D8E3);
}

/* Nazwy kart: subtelny rytm cyan / blue / purple podczas scrollowania. */
.mk-grid > .mk-card:nth-child(3n+1) h3 { color: #75EAF5; }
.mk-grid > .mk-card:nth-child(3n+2) h3 { color: #8BC7FF; }
.mk-grid > .mk-card:nth-child(3n) h3 { color: #B7A0FF; }

/* Monitoring i aplikacje zachowują czytelne własne etykiety. */
.mk-app-card:nth-child(3n+1) .mk-app-badge { color: #75EAF5; border-color: rgba(117,234,245,.18); }
.mk-app-card:nth-child(3n+2) .mk-app-badge { color: #8BC7FF; border-color: rgba(139,199,255,.18); }
.mk-app-card:nth-child(3n) .mk-app-badge { color: #B7A0FF; border-color: rgba(183,160,255,.18); }

/* Nagłówki paneli pozostają białe, żeby nie konkurować z ofertą. */
.mk-panel h3,
.mk-contact-card h2,
.mk-contact-card h3,
.mk-hero-card h3 {
  color: #FFFFFF;
}

@media (max-width: 720px) {
  .mk-topbar-area .mk-location {
    white-space: nowrap;
  }

  .mk-page-title-accent {
    filter: none;
  }
}

/* =========================================================
   MK-TECH 2.5.3 — Premium Navigation
   Czytelne białe menu, większa typografia i subtelny akcent
   marki tylko dla stanu aktywnego / hover. Kontakt = CTA.
   ========================================================= */
.mk-header-inner {
  width: min(1280px, calc(100% - 48px));
  min-height: 96px;
  gap: 28px;
}

.mk-brand {
  max-width: 168px;
}

.mk-brand-logo {
  width: 150px;
  max-height: 84px;
}

.mk-primary-nav ul {
  gap: 5px;
}

.mk-primary-nav a {
  position: relative;
  padding: 14px 10px 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #FFFFFF;
  font-family: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .012em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .18);
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.mk-primary-nav a::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #66ECF8 0%, #7DBBFF 52%, #B79BFF 100%);
  opacity: 0;
  transform: scaleX(.35);
  transform-origin: center;
  transition: opacity .2s ease, transform .2s ease;
}

.mk-primary-nav a:hover,
.mk-primary-nav a:focus-visible {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .035);
  border-color: rgba(145, 213, 255, .08);
  box-shadow: none;
  transform: translateY(-1px);
}

.mk-primary-nav a:hover::after,
.mk-primary-nav a:focus-visible::after,
.mk-primary-nav .current-menu-item > a::after,
.mk-primary-nav .current_page_item > a::after,
.mk-primary-nav .current-menu-ancestor > a::after {
  opacity: .95;
  transform: scaleX(1);
}

.mk-primary-nav .current-menu-item > a,
.mk-primary-nav .current_page_item > a,
.mk-primary-nav .current-menu-ancestor > a {
  color: #FFFFFF;
  background: linear-gradient(110deg, rgba(0, 231, 255, .045), rgba(150, 91, 252, .055));
  border-color: rgba(133, 207, 255, .10);
  box-shadow: none;
}

/* Kontakt jest jedynym przyciskiem CTA w menu — nadal spokojnym i białym. */
.mk-primary-nav li:last-child > a {
  margin-left: 5px;
  padding-left: 17px;
  padding-right: 17px;
  border-color: rgba(121, 211, 255, .28);
  background: linear-gradient(110deg, rgba(0, 231, 255, .075), rgba(150, 91, 252, .09));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 24px rgba(0, 9, 24, .12);
}

.mk-primary-nav li:last-child > a:hover,
.mk-primary-nav li:last-child.current-menu-item > a,
.mk-primary-nav li:last-child.current_page_item > a {
  border-color: rgba(139, 218, 255, .48);
  background: linear-gradient(110deg, rgba(0, 231, 255, .115), rgba(150, 91, 252, .135));
}

.mk-menu-toggle {
  color: #FFFFFF;
  font-family: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: .01em;
}

@media (max-width: 1100px) and (min-width: 981px) {
  .mk-header-inner {
    width: min(100% - 32px, 1100px);
    gap: 12px;
  }

  .mk-brand {
    max-width: 142px;
  }

  .mk-brand-logo {
    width: 132px;
    max-height: 76px;
  }

  .mk-primary-nav ul {
    gap: 1px;
  }

  .mk-primary-nav a {
    padding: 12px 6px 11px;
    font-size: 15.5px;
    letter-spacing: 0;
  }

  .mk-primary-nav a::after {
    left: 7px;
    right: 7px;
    bottom: 5px;
  }

  .mk-primary-nav li:last-child > a {
    margin-left: 2px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 980px) {
  .mk-header-inner {
    width: min(var(--mk-container), calc(100% - 40px));
    min-height: 80px;
    gap: 18px;
  }

  .mk-primary-nav ul {
    gap: 3px;
  }

  .mk-primary-nav a {
    padding: 15px 16px;
    border-radius: 12px;
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .006em;
  }

  .mk-primary-nav a::after {
    left: 16px;
    right: auto;
    bottom: 8px;
    width: 54px;
  }

  .mk-primary-nav li:last-child > a {
    margin: 5px 0 0;
    padding: 15px 16px;
  }
}

@media (max-width: 560px) {
  .mk-header-inner {
    width: min(100% - 28px, var(--mk-container));
  }

  .mk-primary-nav a {
    font-size: 16.5px;
  }
}

/* =========================================================
   MK-TECH 2.5.4 — Mobile Stability + Readability
   Lżejsze renderowanie na telefonach, czytelne fallbacki tekstu,
   stabilne menu i formularze bez zmiany desktopowego brandingu.
   ========================================================= */

/* Bezpieczne łamanie długich nazw technologii, e-maili i adresów. */
.mk-main,
.mk-main * {
  min-width: 0;
}

.mk-card h3,
.mk-card p,
.mk-panel,
.mk-system-list li span,
.mk-contact-inline a,
.mk-contact-details,
.mk-tech-cloud,
.mk-chip,
.mk-site-footer,
.mk-topbar-area {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Fallback: ważne teksty nigdy nie mogą stać się niewidoczne,
   gdy starsza przeglądarka mobilna nie obsługuje background-clip:text. */
.mk-section-kicker,
.mk-page-title-accent,
.mk-section p strong:not(.mk-location):not(.mk-location-group),
.mk-page-content p strong:not(.mk-location):not(.mk-location-group),
.mk-contact-details > div > strong:first-child:not(.mk-location):not(.mk-location-group),
.mk-cta-panel > div > strong:not(.mk-location):not(.mk-location-group) {
  color: #8BDCF6;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mk-section-kicker,
  .mk-page-title-accent,
  .mk-section p strong:not(.mk-location):not(.mk-location-group),
  .mk-page-content p strong:not(.mk-location):not(.mk-location-group),
  .mk-contact-details > div > strong:first-child:not(.mk-location):not(.mk-location-group),
  .mk-cta-panel > div > strong:not(.mk-location):not(.mk-location-group) {
    background-image: linear-gradient(95deg, #66ECF8 0%, #7DBBFF 52%, #B79BFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@media (max-width: 980px) {
  /* Menu może być dłuższe niż ekran — na telefonie/tablecie musi się przewijać. */
  .mk-primary-nav {
    z-index: 120;
    max-height: calc(100vh - 102px);
    max-height: calc(100dvh - 102px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mk-primary-nav ul,
  .mk-primary-nav li,
  .mk-primary-nav a {
    min-width: 0;
  }
}

@media (max-width: 720px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Na mobilnym GPU blur + maski + dwa duże pseudo-elementy potrafią
     powodować niedorysowanie. Używamy jednej zoptymalizowanej grafiki. */
  .mk-site-header,
  .mk-hero-card,
  .mk-hero-inner > div:first-child {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .mk-hero {
    background-image:
      linear-gradient(105deg, rgba(2, 8, 23, .88), rgba(5, 18, 36, .82) 50%, rgba(13, 9, 37, .88)),
      url('assets/mk-tech-hero-full.webp'),
      linear-gradient(110deg, #020817 0%, #06162A 52%, #0D0925 100%) !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-position: center, center, center !important;
    background-size: cover, auto 100%, cover !important;
  }

  .mk-hero::before,
  .mk-hero::after {
    display: none !important;
    content: none !important;
  }

  .mk-hero-inner {
    width: min(100% - 24px, var(--mk-container));
    padding: 38px 0 48px;
    gap: 18px;
  }

  .mk-hero-inner > div:first-child,
  .mk-hero-card {
    padding: 22px;
    border-radius: 20px;
    background: rgba(5, 21, 40, .94) !important;
    box-shadow: 0 14px 38px rgba(0, 5, 16, .24);
  }

  .mk-hero-card {
    background: rgba(11, 20, 47, .94) !important;
  }

  .mk-hero-logo {
    width: min(210px, 72%);
    margin-bottom: 18px;
  }

  .mk-eyebrow {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-radius: 16px;
    line-height: 1.45;
  }

  .mk-hero h1 {
    font-size: clamp(28px, 8.2vw, 36px);
    line-height: 1.12;
  }

  .mk-hero-lead {
    font-size: 16px;
    line-height: 1.58;
  }

  .mk-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 24px;
  }

  .mk-hero-actions .mk-button,
  .mk-form-footer button,
  .mk-cta-panel .mk-button {
    width: 100%;
    min-height: 50px;
  }

  .mk-hero-proof {
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin-top: 24px;
  }

  .mk-hero .mk-proof-item {
    width: 100%;
    padding: 14px 15px;
  }

  .mk-hero .mk-proof-item strong {
    font-size: 21px;
  }

  .mk-container,
  .mk-topbar-inner,
  .mk-header-inner,
  .mk-footer-main,
  .mk-footer-bottom {
    width: min(100% - 24px, var(--mk-container));
  }

  .mk-section {
    padding: 56px 0;
  }

  .mk-section-header {
    margin-bottom: 30px;
  }

  .mk-section-header p {
    font-size: 16.5px;
    line-height: 1.62;
  }

  .mk-grid {
    gap: 16px;
  }

  .mk-card,
  .mk-panel,
  .mk-step,
  .mk-contact-card,
  .mk-cta-panel {
    padding: 22px;
    border-radius: 18px;
  }

  .mk-card:hover,
  .mk-panel:hover,
  .mk-button:hover,
  button:hover {
    transform: none;
  }

  .mk-tech-cloud {
    gap: 9px;
  }

  .mk-chip {
    max-width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    white-space: normal;
    line-height: 1.3;
  }

  .mk-contact-inline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mk-contact-inline a {
    width: 100%;
    justify-content: center;
    text-align: center;
    border-radius: 14px;
  }

  .mk-field input,
  .mk-field select,
  .mk-field textarea {
    font-size: 16px; /* zapobiega automatycznemu zoomowi formularza w iOS */
  }

  .mk-consent {
    font-size: 13.5px;
  }

  .mk-footer-main {
    padding: 44px 0;
    gap: 30px;
  }
}

@media (max-width: 390px) {
  .mk-topbar {
    font-size: 12.5px;
  }

  .mk-topbar-inner {
    width: min(100% - 20px, var(--mk-container));
  }

  .mk-header-inner {
    width: min(100% - 20px, var(--mk-container));
  }

  .mk-brand-logo {
    width: 112px;
  }

  .mk-menu-toggle {
    padding: 9px 11px;
    font-size: 14px;
  }

  .mk-hero-inner {
    width: min(100% - 20px, var(--mk-container));
  }

  .mk-hero-inner > div:first-child,
  .mk-hero-card,
  .mk-card,
  .mk-panel,
  .mk-step,
  .mk-contact-card,
  .mk-cta-panel {
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}