/* =====================================================================
   PODBIJ MAPĘ — VISUAL REDESIGN 2026
   Warstwa wyłącznie prezentacyjna. Nie zmienia treści, SEO, routingu,
   nagłówków ani logiki aplikacji.
   ===================================================================== */

:root {
  --bg: #f8fafd;
  --surface: #ffffff;
  --surface-2: #f6f9fe;
  --surface-3: #eef4ff;
  --fg: #0f1728;
  --muted: #58657a;
  --faint: #8792a5;
  --line: #e4e9f1;
  --line-strong: #d6dce7;
  --blue: #1a73e8;
  --blue-dark: #1558b0;
  --blue-soft: #eaf2ff;
  --green: #34a853;
  --green-soft: #eaf7ee;
  --red: #ea4335;
  --red-soft: #fff0ee;
  --yellow: #fbbc04;
  --yellow-soft: #fff8df;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow-sm: 0 8px 24px rgba(45, 59, 84, .07);
  --shadow-md: 0 20px 50px rgba(36, 50, 75, .10);
  --shadow-lg: 0 34px 90px rgba(28, 43, 70, .14);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 8% 0%, rgba(66,133,244,.08), transparent 28rem),
    radial-gradient(circle at 92% 8%, rgba(52,168,83,.055), transparent 26rem),
    var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(26,115,232,.16); }

/* ---------- wspólne elementy ---------- */
.wrap { width: min(100% - 40px, 1200px); padding-left: 0; padding-right: 0; }
a { text-underline-offset: 3px; }
h1, h2, h3 { color: var(--fg); }
h1 { letter-spacing: -.045em !important; }
h2 { letter-spacing: -.035em !important; }
h3 { letter-spacing: -.02em !important; }

.btn {
  position: relative;
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
  box-shadow: 0 8px 18px rgba(26,115,232,.16);
}
.btn:hover {
  filter: none !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(26,115,232,.22);
}
.btn:active { transform: translateY(0); }
.btn.ghost {
  background: rgba(255,255,255,.84) !important;
  color: var(--fg) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: none;
}
.btn.ghost:hover { background: var(--surface) !important; border-color: #bdc7d6 !important; box-shadow: var(--shadow-sm); }

/* ---------- nagłówki / nawigacja ---------- */
header.top,
body > header:not(.top) {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(220,226,236,.92) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
header.top {
  position: sticky !important;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(20,35,60,.025);
}
header.top .wrap { min-height: 72px; padding-top: 10px !important; padding-bottom: 10px !important; }
.brand {
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  text-transform: none;
}
.brand .pin,
.brand > svg.pin { width: 25px !important; height: 25px !important; filter: drop-shadow(0 5px 8px rgba(234,67,53,.18)); }
.brand .accent,
.brand b { color: var(--blue) !important; }
.nav-links { gap: 3px !important; }
header.top .nav-links .btn.ghost,
header .nav-links .btn.ghost {
  border-color: transparent !important;
  background: transparent !important;
  color: #25324a !important;
  padding: 10px 14px !important;
}
header.top .nav-links .btn.ghost:hover,
header .nav-links .btn.ghost:hover { background: var(--blue-soft) !important; color: var(--blue) !important; box-shadow: none; }
header.top .nav-links .btn:not(.ghost),
header .nav-links .btn:not(.ghost) { padding: 10px 18px !important; }

/* ---------- strona główna ---------- */
.map-grid {
  position: relative;
  background-color: #fbfcff !important;
  background-image:
    linear-gradient(rgba(30,70,120,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,70,120,.035) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
}
.map-grid::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 480px;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 34%, rgba(66,133,244,.12), transparent 24%),
    radial-gradient(circle at 76% 16%, rgba(234,67,53,.07), transparent 16%),
    radial-gradient(circle at 92% 55%, rgba(52,168,83,.07), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.80), transparent);
}
.hero {
  min-height: 600px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 82px !important;
  padding-bottom: 82px !important;
}
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 62px;
  width: 52px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg,#4285f4 0 25%,#ea4335 25% 50%,#fbbc04 50% 75%,#34a853 75%);
  box-shadow: 0 5px 18px rgba(66,133,244,.18);
}
.hero h1 {
  font-size: clamp(2.6rem, 5.2vw, 4.8rem) !important;
  line-height: .99 !important;
  max-width: 12.6ch !important;
  margin-bottom: 24px !important;
  font-weight: 800 !important;
}
.hero h1 .accent {
  background: linear-gradient(90deg,#1a73e8 0%,#4285f4 48%,#34a853 115%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.hero p.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem) !important; line-height: 1.72; max-width: 52ch !important; margin-bottom: 30px !important; }
.hero .cta { gap: 10px !important; }
.hero .cta .btn { padding: 14px 22px !important; }
.pill-verified {
  width: fit-content;
  background: rgba(255,255,255,.86) !important;
  color: var(--green) !important;
  border: 1px solid #dce8df !important;
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em !important;
}
.hero-map {
  right: 0 !important;
  width: 46% !important;
  height: 78% !important;
  max-height: 500px;
  border-radius: 34px !important;
  border: 1px solid rgba(205,215,230,.92) !important;
  background: #fff;
  box-shadow: 0 30px 80px rgba(35,55,88,.16), 0 3px 12px rgba(35,55,88,.08) !important;
  transform: translateY(-49%) perspective(1200px) rotateY(-3deg) rotateX(1deg) !important;
}
.dots { gap: 5px !important; margin-top: 18px !important; }
.dots span { width: 28px !important; height: 5px !important; }

section { padding: 86px 0 !important; }
section.alt {
  background: rgba(255,255,255,.86) !important;
  border-color: var(--line) !important;
}
.eyebrow {
  color: var(--blue) !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
}
h2 { font-size: clamp(1.95rem, 3vw, 2.75rem) !important; line-height: 1.12; margin-bottom: 13px !important; }
.sub { font-size: 1.03rem; line-height: 1.72; }
.definition {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,#f5f9ff,#fff) !important;
  border: 1px solid #dfe8f6 !important;
  border-left: 4px solid var(--blue) !important;
  border-radius: 0 18px 18px 0 !important;
  padding: 28px 30px !important;
  box-shadow: var(--shadow-sm);
}
.definition::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  right: -45px;
  top: -50px;
  border: 18px solid rgba(66,133,244,.06);
}

.grid { gap: 18px !important; }
.card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 26px !important;
  box-shadow: 0 8px 26px rgba(43,57,82,.045);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  opacity: .86;
}
.grid .card:nth-child(4n+1)::before { background: #4285f4; }
.grid .card:nth-child(4n+2)::before { background: #34a853; }
.grid .card:nth-child(4n+3)::before { background: #fbbc04; }
.grid .card:nth-child(4n)::before { background: #ea4335; }
.card:hover { transform: translateY(-3px); border-color: #d5ddea !important; box-shadow: var(--shadow-md); }
.card h3 { font-size: 1.08rem !important; line-height: 1.35; }
.card p { line-height: 1.65; }
.ico {
  width: 35px !important;
  height: 35px !important;
  padding: 7px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.steps { gap: 18px !important; }
.steps li {
  position: relative;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 27px !important;
  box-shadow: var(--shadow-sm);
}
.steps li::before { width: 38px !important; height: 38px !important; box-shadow: 0 8px 18px rgba(26,115,232,.20); }
.steps li:nth-child(2)::before { background: var(--red) !important; box-shadow: 0 8px 18px rgba(234,67,53,.17); }
.steps li:nth-child(3)::before { background: #e8a800 !important; box-shadow: 0 8px 18px rgba(251,188,4,.20); }
.steps li:nth-child(4)::before { background: var(--green) !important; box-shadow: 0 8px 18px rgba(52,168,83,.18); }

.price-grid { gap: 20px !important; }
.price {
  border-radius: 22px !important;
  padding: 30px 28px !important;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.price:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price.featured {
  border: 1.5px solid var(--blue) !important;
  box-shadow: 0 20px 55px rgba(26,115,232,.14) !important;
  background: linear-gradient(180deg,#fff,#f7faff) !important;
}
.price .tag { top: -13px !important; padding: 5px 13px !important; box-shadow: 0 6px 14px rgba(26,115,232,.2); }
.price .amount { font-size: 2.4rem !important; letter-spacing: -.04em; }
.price ul li { padding-top: 7px !important; padding-bottom: 7px !important; }
.founding-banner { border-radius: 16px !important; padding: 16px 20px !important; }

.faq-list { max-width: 900px !important; }
details {
  border-radius: 16px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 5px 18px rgba(43,57,82,.035);
}
details[open] { border-color: #b9d1f4 !important; box-shadow: 0 12px 28px rgba(26,115,232,.07); }
details summary { padding: 20px 22px !important; font-weight: 700 !important; }
details summary:hover { background: #f7faff !important; }

.seo-copy { max-width: 900px !important; }
.seo-copy h3 { color: #21304a; }

footer {
  position: relative;
  background: #fff !important;
  border-color: var(--line) !important;
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,#4285f4 0 25%,#ea4335 25% 50%,#fbbc04 50% 75%,#34a853 75%);
  opacity: .9;
}
footer .col h4 { color: #23314a !important; }
footer a:hover { color: var(--blue) !important; }

/* ---------- BLOG: lista i artykuł ---------- */
body > header:not(.top) { position: sticky; top: 0; z-index: 100; }
body > header:not(.top) > .top,
body > header:not(.top) > .wrap {
  width: min(100% - 40px, 1180px) !important;
  max-width: 1180px !important;
  min-height: 70px;
  margin-inline: auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body > header:not(.top) .brand { font-size: 20px !important; }
body > main.wrap { max-width: 1180px !important; padding-top: 44px; padding-bottom: 80px; }
body > main.wrap > h1 {
  font-size: clamp(2.2rem,4vw,3.5rem) !important;
  line-height: 1.05;
  max-width: 18ch;
  margin-top: 14px !important;
  margin-bottom: 12px !important;
}
body > main.wrap > .lead { font-size: 1.08rem !important; max-width: 64ch !important; line-height: 1.75; }
.crumbs { color: var(--faint) !important; font-size: .84rem !important; }
.crumbs a { color: #657186 !important; text-decoration: none; }
.crumbs a:hover { color: var(--blue) !important; }

.post-list {
  gap: 22px !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  margin-top: 34px !important;
}
.post-card {
  display: flex !important;
  flex-direction: column;
  min-height: 100%;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  padding: 25px !important;
  box-shadow: 0 8px 28px rgba(43,57,82,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d3dce9 !important; }
.post-card h2 { font-size: 1.32rem !important; line-height: 1.28 !important; margin: 12px 0 10px !important; }
.post-card h2 a { color: var(--fg) !important; text-decoration: none !important; }
.post-card h2 a:hover { color: var(--blue) !important; }
.post-card p { color: var(--muted); line-height: 1.65; }
.post-card .meta { margin-top: auto; padding-top: 14px; }
.cat,
.tag {
  border: 1px solid #dce5f4 !important;
  background: var(--blue-soft) !important;
  color: var(--blue-dark) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
.pager { margin-top: 42px !important; }
.pager a, .pager .cur { border-radius: 11px !important; }

.article {
  max-width: 860px !important;
  margin: 0 auto;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
  padding: clamp(28px,5vw,58px) !important;
  box-shadow: 0 20px 60px rgba(42,55,80,.07);
}
.article > h1 { font-size: clamp(2.25rem,4.6vw,3.8rem) !important; line-height: 1.06 !important; margin: 16px 0 16px !important; }
.article > .meta { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.article > img { border-radius: 18px !important; box-shadow: var(--shadow-sm); }
.prose { color: #243047; font-size: 1.04rem; line-height: 1.82 !important; }
.prose h2 { font-size: 1.75rem !important; margin-top: 2.25em !important; }
.prose h3 { font-size: 1.28rem !important; margin-top: 1.8em !important; }
.prose p, .prose li { color: #39475d; }
.prose a { color: var(--blue) !important; font-weight: 650; }
.prose blockquote {
  margin: 28px 0 !important;
  padding: 20px 24px !important;
  border-left: 4px solid var(--blue) !important;
  background: #f6f9ff !important;
  border-radius: 0 14px 14px 0;
}
.prose code { background: #f1f4f8 !important; border: 1px solid #e4e9ef; border-radius: 6px; padding: .12em .36em; }
.prose table { background: #fff; }
.prose th { background: #f4f7fb !important; }
.prose th, .prose td { border-color: var(--line) !important; }
.tbl { border-radius: 14px; border: 1px solid var(--line); overflow: auto !important; }
.article .cta,
body > main.wrap .cta {
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(52,168,83,.15), transparent 30%),
    linear-gradient(135deg,#155bb7,#1a73e8) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 30px !important;
  box-shadow: 0 20px 45px rgba(26,115,232,.20);
}
.article .cta h2,
.article .cta h3,
body > main.wrap .cta h2,
body > main.wrap .cta h3 { color: #fff !important; }
.article .cta p,
body > main.wrap .cta p { color: rgba(255,255,255,.86) !important; }
.article .cta .btn,
body > main.wrap .cta .btn { background: #fff !important; color: #1558b0 !important; box-shadow: none !important; }
.backlink { display: inline-flex; margin-top: 24px; font-weight: 700; text-decoration: none; }

/* ---------- pSEO ---------- */
body > header .top {
  width: min(100% - 40px, 1100px) !important;
  max-width: 1100px !important;
  min-height: 70px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body > header .top .brand { font-size: 20px; }
body > main.wrap .stats { gap: 15px !important; }
body > main.wrap .stat {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 17px !important;
  padding: 20px 15px !important;
  box-shadow: var(--shadow-sm);
}
body > main.wrap .stat:nth-child(1) b { color: var(--blue); }
body > main.wrap .stat:nth-child(2) b { color: var(--green); }
body > main.wrap .stat:nth-child(3) b { color: #d79a00; }
body > main.wrap .stat:nth-child(4) b { color: var(--red); }
body > main.wrap .prose:not(.article .prose) {
  background: linear-gradient(135deg,#fff,#f7faff) !important;
  border-radius: 17px !important;
  padding: 23px 25px !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
}
.cards { gap: 14px !important; }
.cards .card { min-height: 102px; display: flex !important; flex-direction: column; justify-content: center; }
.chips a {
  background: #fff !important;
  border-color: var(--line) !important;
  padding: 8px 13px !important;
  transition: .18s ease;
}
.chips a:hover { border-color: #aac6ee !important; background: var(--blue-soft) !important; color: var(--blue) !important; }

/* ---------- darmowe narzędzia ---------- */
body > header > .wrap > a:not(.brand) { color: #5b687b; text-decoration: none; font-weight: 650; }
body > main > .wrap { width: min(100% - 40px, 980px) !important; max-width: 980px !important; }
body > main > .wrap > h1 { font-size: clamp(2.15rem,4vw,3.35rem) !important; line-height: 1.08; margin-bottom: 12px !important; }
body > main > .wrap > .lead { font-size: 1.06rem !important; line-height: 1.75; }
body > main > .wrap > .card {
  border-radius: 20px !important;
  padding: clamp(22px,4vw,34px) !important;
  box-shadow: var(--shadow-sm);
}
label { color: #25334b; }
input, select, textarea {
  border-radius: 11px !important;
  border-color: #d8dee8 !important;
  background: #fff !important;
  min-height: 44px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
textarea { min-height: 120px !important; }
input:focus, select:focus, textarea:focus { border-color: #8bb7f0 !important; box-shadow: 0 0 0 4px rgba(26,115,232,.10); }
.score { color: var(--blue); letter-spacing: -.05em; }
.bar { background: #e8edf4 !important; }
.bar > span, .bar > i { background: linear-gradient(90deg,#4285f4,#34a853) !important; }
.result { border-radius: 12px !important; background: #f7f9fc !important; }
.toolnav { gap: 9px !important; }
.toolnav a { background: #fff; border-color: var(--line) !important; transition: .18s ease; }
.toolnav a:hover { background: var(--blue-soft); border-color: #bad0ef !important; }

/* ---------- dokumenty prawne ---------- */
body > main article[style],
body > main article {
  border-color: var(--line) !important;
}
body > main > .wrap > article:not(.article) {
  border-radius: 20px !important;
  box-shadow: var(--shadow-sm);
  padding: clamp(26px,5vw,44px) !important;
  background: #fff !important;
}
.missing { border-radius: 18px !important; background: #fff !important; box-shadow: var(--shadow-sm); }

/* ---------- cookies ---------- */
#pm-cookie-bar .pmc-card { border-radius: 20px !important; box-shadow: var(--shadow-lg) !important; }
#pm-cookie-modal .pmc-sheet { border-radius: 22px !important; }
.pmc-btn { border-radius: 11px !important; }
.pmc-eyebrow { color: var(--blue) !important; }
.pmc-eyebrow::before { background: var(--blue) !important; }

/* ---------- responsywność ---------- */
@media (max-width: 980px) {
  .hero { min-height: 520px !important; }
  .hero-map { opacity: .3; width: 52% !important; right: -10% !important; filter: saturate(.8); }
  .hero h1, .hero p.lead, .hero .cta, .hero .pill-verified, .hero .dots { position: relative; z-index: 2; }
  .post-list { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 760px) {
  .wrap { width: min(100% - 30px, 1200px); }
  header.top .wrap { min-height: 64px; }
  .nav-burger { border-radius: 11px !important; border-color: var(--line) !important; box-shadow: none; }
  .nav-links {
    background: rgba(255,255,255,.97) !important;
    padding: 12px 15px 20px !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 22px 45px rgba(30,45,70,.12) !important;
  }
  header.top .nav-links .btn.ghost,
  header .nav-links .btn.ghost { background: #f7f9fc !important; border: 1px solid var(--line) !important; }
  .hero { min-height: auto !important; padding-top: 68px !important; padding-bottom: 64px !important; }
  .hero::before { top: 38px; width: 44px; }
  .hero-map { display: none !important; }
  .hero h1 { font-size: clamp(2.45rem,12vw,3.5rem) !important; max-width: 11ch !important; }
  .hero .cta { flex-direction: column; align-items: stretch; }
  .hero .cta .btn { text-align: center; width: 100%; }
  section { padding: 64px 0 !important; }
  h2 { font-size: 2rem !important; }
  .grid, .price-grid, .steps { grid-template-columns: 1fr !important; }
  .card, .steps li, .price { padding: 23px !important; }
  .post-list { grid-template-columns: 1fr !important; }
  body > main.wrap { padding-top: 30px; }
  .article { border-radius: 18px !important; padding: 26px 20px !important; }
  .article > h1 { font-size: 2.35rem !important; }
  .prose { font-size: 1rem; }
  body > header:not(.top) > .top,
  body > header:not(.top) > .wrap,
  body > header .top { width: min(100% - 30px, 1180px) !important; }
}

@media (max-width: 520px) {
  .brand { font-size: 18px !important; }
  .hero h1 { font-size: 2.55rem !important; }
  .hero p.lead { font-size: 1rem !important; }
  .pill-verified { font-size: 10px !important; }
  .dots span { width: 21px !important; }
  body > main > .wrap,
  body > main.wrap { width: min(100% - 26px, 1180px) !important; }
  .article { margin-left: -1px; margin-right: -1px; }
  .price .amount { font-size: 2.15rem !important; }
  #pm-cookie-bar { left: 10px !important; right: 10px !important; bottom: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}