/* ==========================================================================
   MARTA — Partner Kupującego | Design system
   Paleta: czerń / biel / beż + złote akcenty, delikatne gradienty, glassmorphism
   ========================================================================== */

:root{
  --black:        #0E0D0B;
  --black-2:      #161511;
  --ink:          #211E19;
  --white:        #FFFFFF;
  --ivory:        #FAF7F1;
  --beige:        #F2EBDE;
  --beige-2:      #E9DFCC;
  --gold:         #C2A055;
  --gold-light:   #E3C98A;
  --gold-dark:    #9A7B3C;
  --gold-grad:    linear-gradient(135deg,#DCC084 0%, #C2A055 45%, #A3813F 100%);
  --text-dark:    #211E19;
  --text-light:   #F4EFE6;
  --muted-dark:   rgba(33,30,25,.64);
  --muted-light:  rgba(244,239,230,.68);
  --hair-dark:    rgba(33,30,25,.10);
  --hair-light:   rgba(255,255,255,.14);
  --radius:       20px;
  --font-serif:   'Playfair Display', 'Georgia', serif;
  --font-sans:    'Manrope', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --shadow-soft:  0 24px 60px rgba(33,30,25,.10);
  --shadow-deep:  0 30px 70px rgba(0,0,0,.45);
  --container:    1200px;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

/* Atrybut hidden ma zawsze pierwszeństwo przed regułami display (np. .btn, .popup-form) */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  color:var(--text-dark);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea{ font-family:inherit; }

::selection{ background:rgba(194,160,85,.35); color:var(--black); }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

.container{ width:min(var(--container), 100% - 48px); margin-inline:auto; }

.ic{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Typografia ---------- */
h1,h2,h3{ font-family:var(--font-serif); font-weight:600; line-height:1.15; }

h1 em, h2 em{
  font-style:italic;
  font-weight:500;
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.eyebrow{
  font-size:11px; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-dark); margin-bottom:18px;
}
.eyebrow--gold{ color:var(--gold-dark); }
.hero .eyebrow, .section--black .eyebrow, .section--photo .eyebrow{ color:var(--gold-light); }

h2{ font-size:clamp(1.9rem, 3.4vw, 2.85rem); letter-spacing:-.01em; }

.section-lead{
  max-width:660px; margin-top:18px;
  font-size:17px; color:var(--muted-dark);
}
.section-lead--light{ color:var(--muted-light); }

.microcopy{
  margin-top:26px; font-family:var(--font-serif); font-style:italic;
  font-size:15.5px; color:var(--muted-dark);
}
.microcopy--light{ color:var(--muted-light); }

/* ---------- Przyciski ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; font-size:15px; letter-spacing:.02em;
  border-radius:999px; border:0; padding:.9em 1.8em;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.98); }

.btn--gold{
  background:var(--gold-grad); color:#171307;
  box-shadow:0 14px 34px rgba(194,160,85,.32);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 20px 44px rgba(194,160,85,.42); }

.btn--ghost{
  background:rgba(255,255,255,.06); color:var(--text-light);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn--ghost:hover{ border-color:var(--gold-light); color:var(--gold-light); transform:translateY(-2px); }

.btn--dark{
  background:var(--ink); color:var(--text-light);
}
.btn--dark:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(33,30,25,.35); }

.btn--lg{ padding:1em 2.1em; }
.btn--sm{ font-size:13.5px; padding:.7em 1.4em; }
.btn--full{ width:100%; }

.btn--lg{ flex-direction:column; gap:2px; }
.btn-top{ line-height:1.2; }
.btn-note{
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.72;
}

/* ---------- Glassmorphism ---------- */
.glass{
  background:linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  box-shadow:var(--shadow-deep), inset 0 1px 0 rgba(255,255,255,.22);
}

.glass-dark{
  background:linear-gradient(160deg, rgba(22,20,15,.58), rgba(22,20,15,.36));
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(227,201,138,.22);
  border-radius:18px;
  box-shadow:0 24px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
}

@supports not (backdrop-filter: blur(1px)){
  .glass{ background:rgba(30,27,21,.82); }
  .glass-dark{ background:rgba(22,20,15,.88); }
}

/* ---------- Nagłówek strony ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:18px 0;
  transition:padding .35s ease, background .35s ease, box-shadow .35s ease;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.site-header.scrolled{
  padding:10px 0;
  background:rgba(14,13,11,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}

/* Nagłówek podstron (np. polityka prywatności) — zawsze ciemny */
.site-header.always-dark{
  background:rgba(14,13,11,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:44px; height:44px; display:grid; place-items:center;
  font-family:var(--font-serif); font-size:22px; font-weight:600; color:#171307;
  background:var(--gold-grad); border-radius:50%;
  box-shadow:0 8px 22px rgba(194,160,85,.4);
}
.brand-text{
  display:flex; flex-direction:column; line-height:1.15;
  font-weight:800; letter-spacing:.3em; font-size:15px; color:var(--text-light);
}
.brand-sub{
  font-size:9.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-light);
}

.nav{ display:flex; align-items:center; gap:30px; }
.nav a{
  font-size:14px; font-weight:600; color:rgba(244,239,230,.82);
  transition:color .25s ease; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1.5px;
  background:var(--gold-grad); transition:width .3s ease;
}
.nav a:hover{ color:var(--gold-light); }
.nav a:hover::after{ width:100%; }
.nav-cta-mobile{ display:none; }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-cta{ display:inline-flex; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; padding:8px;
}
.nav-toggle span{
  width:24px; height:2px; background:var(--text-light); border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Sekcje ---------- */
.section{ position:relative; padding:112px 0; }

.section--white{ background:linear-gradient(180deg, #FFFFFF 0%, #FBF8F2 100%); }
.section--ivory{ background:linear-gradient(180deg, #FBF8F2 0%, #F5EEE2 100%); }
.section--beige{ background:linear-gradient(180deg, #F3ECDF 0%, #E9DFCB 100%); }
.section--black{
  background:linear-gradient(180deg, #161511 0%, #0B0A08 100%);
  color:var(--text-light);
}
.section--black h2{ color:var(--text-light); }
.section--photo{ background:var(--black); color:var(--text-light); }
.section--photo h2{ color:var(--text-light); }
.section--black .section-lead, .section--photo .section-lead{ color:var(--muted-light); }

.section h2{ margin-bottom:6px; }

/* ---------- Tła zdjęciowe (placeholdery) ---------- */
.photo-bg{ position:absolute; inset:0; overflow:hidden; }

.hero-bg{
  background:
    radial-gradient(90% 70% at 78% 6%, rgba(216,188,126,.30), transparent 55%),
    radial-gradient(70% 60% at 10% 92%, rgba(154,123,60,.26), transparent 60%),
    linear-gradient(165deg, #1C1A13 0%, #0F0E0B 55%, #080706 100%);
}
.proces-bg{
  background:
    radial-gradient(80% 60% at 86% 12%, rgba(216,188,126,.22), transparent 55%),
    radial-gradient(90% 70% at 8% 100%, rgba(96,80,50,.35), transparent 65%),
    linear-gradient(170deg, #15140F 0%, #0B0A08 60%, #060505 100%);
}
.kontakt-bg{
  background:
    radial-gradient(85% 65% at 18% 8%, rgba(216,188,126,.24), transparent 55%),
    radial-gradient(70% 60% at 90% 90%, rgba(120,98,58,.22), transparent 60%),
    linear-gradient(200deg, #1A1812 0%, #0D0C0A 60%, #070606 100%);
}

.hero-overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,6,4,.55) 0%, rgba(7,6,4,.12) 32%, rgba(7,6,4,.22) 68%, rgba(7,6,4,.62) 100%);
}
.section-photo-overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,5,4,.72) 0%, rgba(6,5,4,.42) 42%, rgba(6,5,4,.78) 100%);
}
.section-photo-overlay--contact{
  background:linear-gradient(180deg, rgba(6,5,4,.78) 0%, rgba(6,5,4,.5) 45%, rgba(6,5,4,.84) 100%);
}

/* Etykieta placeholdera zdjęcia */
.photo-slot-label{
  position:absolute; z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  max-width:min(420px, 86%);
  padding:10px 16px; border-radius:14px;
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  line-height:1.5; color:rgba(244,239,230,.9); text-align:left;
  background:rgba(18,16,12,.55);
  border:1px solid rgba(227,201,138,.28);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.photo-slot-label .ic{ width:15px; height:15px; color:var(--gold-light); flex:none; }
.photo-slot-label--corner{ left:24px; bottom:24px; }

/* ---------- Sloty zdjęć (inline) ---------- */
.photo-slot{
  position:relative; overflow:hidden; border-radius:14px;
  background:
    radial-gradient(120% 90% at 72% 12%, rgba(227,201,138,.38), transparent 55%),
    radial-gradient(120% 100% at 18% 100%, rgba(74,60,38,.6), transparent 62%),
    linear-gradient(160deg, #3B352A 0%, #232017 55%, #16130D 100%);
}
.photo-slot--portrait{ aspect-ratio:4/5; border-radius:12px; }
.photo-slot--case{ aspect-ratio:16/9; border-radius:0; }

.photo-slot .photo-slot-label{
  left:50%; top:50%; transform:translate(-50%,-50%);
  max-width:88%;
}

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:150px 0 56px;
}

.hero-grid{
  position:relative; z-index:3;
  display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:center;
}

.hero-title{
  font-size:clamp(2.5rem, 5vw, 4.15rem);
  font-weight:600; letter-spacing:-.015em;
  color:var(--text-light);
  margin-bottom:18px;
}
.hero-sub{
  max-width:640px; font-size:17px; color:var(--muted-light); margin-bottom:26px;
}
.hero-ctas{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }

.trust-badges{
  margin-top:28px; display:flex; flex-wrap:wrap; gap:10px;
}
.trust-badges li{
  display:inline-flex; align-items:center; gap:8px;
  padding:.55em 1.15em; border-radius:999px;
  font-size:12.5px; font-weight:700; letter-spacing:.05em; color:rgba(244,239,230,.92);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.trust-badges li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--gold-grad); flex:none;
}

.hero-card{ padding:14px; }
.hero-card-cap{
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-light); margin:4px 6px 12px;
}

.hero-stats{ position:relative; z-index:3; margin-top:36px; }
.stats-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:30px 40px;
}
.stat{ display:flex; flex-direction:column; gap:6px; padding:0 34px; }
.stat:first-child{ padding-left:0; }
.stat + .stat{ border-left:1px solid rgba(255,255,255,.14); }
.stat-num{
  font-family:var(--font-serif); font-size:clamp(2rem, 3vw, 2.7rem); font-weight:600;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1.05;
}
.stat-label{ font-size:13px; color:var(--muted-light); line-height:1.45; }

/* ---------- KONTRAST (tabela) ---------- */
.compare{
  margin-top:48px;
  background:#FFFFFF;
  border:1px solid var(--hair-dark);
  border-radius:24px;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.compare-head, .compare-row{
  display:grid; grid-template-columns:1.05fr 1.18fr 1.18fr; gap:0;
}
.compare-head{ background:rgba(33,30,25,.03); border-bottom:1px solid var(--hair-dark); }
.compare-head > span{
  padding:20px 28px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-dark);
}
.compare-col--partner{ display:inline-flex; align-items:center; gap:9px; color:var(--gold-dark) !important; }
.compare-col--partner .ic{ width:17px; height:17px; }

.compare-row{ border-bottom:1px solid var(--hair-dark); transition:background .25s ease; }
.compare-row:last-child{ border-bottom:0; }
.compare-row:hover{ background:rgba(194,160,85,.045); }

.compare-crit{
  padding:22px 28px; font-size:14.5px; font-weight:700; color:var(--text-dark);
  display:flex; align-items:center;
}
.compare-cell{
  padding:22px 28px; font-size:14.5px; color:var(--muted-dark);
  display:flex; align-items:center; border-left:1px solid var(--hair-dark);
}
.compare-cell.partner{
  font-weight:700; color:var(--text-dark);
  border-left:1px solid rgba(194,160,85,.5);
}

/* ---------- VALUE EQUATION ---------- */
.value-grid{
  margin-top:52px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.value-card{
  background:#FFFFFF; border:1px solid var(--hair-dark); border-radius:22px;
  padding:32px 28px; box-shadow:var(--shadow-soft);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  display:flex; flex-direction:column;
}
.value-card:hover{ transform:translateY(-6px); border-color:rgba(194,160,85,.4); box-shadow:0 30px 70px rgba(33,30,25,.14); }
.value-num{
  font-family:var(--font-serif); font-size:34px; font-weight:500; font-style:italic;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-bottom:14px; margin-bottom:16px; position:relative;
}
.value-num::after{
  content:""; position:absolute; left:0; bottom:0; width:38px; height:2px; background:var(--gold-grad);
}
.value-card h3{ font-size:20px; margin-bottom:4px; }
.value-en{
  display:block; font-family:var(--font-sans); font-size:10.5px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dark); margin:6px 0 16px;
}
.value-card ul{ display:flex; flex-direction:column; gap:10px; }
.value-card li{
  font-size:14px; color:var(--muted-dark); line-height:1.55; padding-left:18px; position:relative;
}
.value-card li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:2px;
  background:var(--gold-grad);
}

/* ==========================================================================
   SYSTEM KAFLE — bento wg inspiracji „Marta 3” (czarne / białe / złoty kafel + nawiasy)
   ========================================================================== */
.tile{
  position:relative;
  background:#FFFFFF;
  border:1px solid var(--hair-dark);
  border-radius:22px;
  box-shadow:var(--shadow-soft);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.tile:hover,
.tile.in-view:hover{
  transform:translateY(-5px);
  border-color:rgba(194,160,85,.4);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.tile.tile--black{
  background:linear-gradient(165deg, #221F18 0%, #14110B 55%, #0D0B08 100%);
  border-color:rgba(227,201,138,.26);
  box-shadow:0 26px 60px rgba(33,30,25,.16);
}
.tile.tile--black:hover,
.tile.tile--black.in-view:hover{
  border-color:rgba(227,201,138,.55);
  box-shadow:0 34px 70px rgba(33,30,25,.24);
}

/* Nawiasy — delikatne narożniki na czarnych i złotych kafach */
.tile--black::before, .tile--black::after,
.service--cta::before, .service--cta::after{
  content:""; position:absolute; width:20px; height:20px; pointer-events:none;
}
.tile--black::before{ top:12px; left:12px; border:1.5px solid rgba(227,201,138,.5); border-right:0; border-bottom:0; }
.tile--black::after{ bottom:12px; right:12px; border:1.5px solid rgba(227,201,138,.5); border-left:0; border-top:0; }
.service--cta::before{ top:12px; left:12px; border:1.5px solid rgba(23,19,7,.45); border-right:0; border-bottom:0; }
.service--cta::after{ bottom:12px; right:12px; border:1.5px solid rgba(23,19,7,.45); border-left:0; border-top:0; }

/* Złoty kafel CTA */
.service--cta{
  background:var(--gold-grad); border:1px solid transparent;
  justify-content:space-between; gap:20px;
  box-shadow:0 18px 44px rgba(194,160,85,.32);
}
.service--cta:hover, .service--cta.in-view:hover{
  border-color:transparent;
  box-shadow:0 26px 54px rgba(194,160,85,.42);
}
.service--cta p{ font-family:var(--font-serif); font-style:italic; font-size:17.5px; line-height:1.45; color:#211B0D; }

/* Tekst w czarnych kafach */
.tile.tile--black h3{ color:var(--text-light); }
.tile.tile--black p{ color:var(--muted-light); }
.tile.tile--black li{ color:var(--muted-light); }
.tile.tile--black strong{ color:var(--text-light); }
.tile.tile--black .value-en{ color:var(--gold-light); }
.tile.tile--black .microcopy{ color:var(--muted-light); }
.tile.tile--black .fit-x{ color:var(--gold-light); border-color:rgba(227,201,138,.5); }
.tile.tile--black .ps-problem{ color:var(--gold-light); }
.tile.tile--black .ps-solution{ color:var(--text-light); }
.tile.tile--black .ps-arrow{ background:linear-gradient(90deg, rgba(227,201,138,.4), var(--gold-light)); }
.tile.tile--black .ps-arrow::after{ border-left-color:var(--gold-light); }
.tile.tile--black .service-ic{ color:var(--gold-light); }
.tile.tile--black .btn--ghost{ color:var(--text-light); }

/* ---------- PROBLEM → SOLUTION (kafle bento) ---------- */
.ps-bento{
  margin-top:48px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.ps-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  padding:32px 28px;
}
.ps-problem{
  font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-dark);
}
.ps-arrow{
  position:relative; width:46px; height:2px;
  background:linear-gradient(90deg, rgba(154,123,60,.35), var(--gold));
}
.ps-arrow::after{
  content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%);
  border-left:9px solid var(--gold);
  border-top:5.5px solid transparent; border-bottom:5.5px solid transparent;
}
.ps-solution{ font-size:15px; color:var(--text-dark); font-weight:500; line-height:1.6; }

/* ---------- PROCES (zdjęcie + glass) ---------- */
.proces-inner{ position:relative; z-index:3; }
.steps-grid{
  margin-top:52px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.step-card{
  padding:28px 24px;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.step-card:hover{ transform:translateY(-6px); border-color:rgba(227,201,138,.5); box-shadow:0 30px 60px rgba(0,0,0,.5); }
.step-num{
  display:block; font-family:var(--font-serif); font-style:italic; font-size:40px; font-weight:500;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1; margin-bottom:16px;
}
.step-card h3{ font-family:var(--font-sans); font-size:15.5px; font-weight:800; color:var(--text-light); margin-bottom:8px; }
.step-time{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-light); border:1px solid rgba(227,201,138,.35); border-radius:999px;
  padding:.35em 1em; margin-bottom:12px;
}
.step-card p{ font-size:13.5px; color:var(--muted-light); line-height:1.6; }

/* ---------- DODATKOWE WSPARCIE (kafle bento) ---------- */
.services-grid{
  margin-top:48px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.service{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:28px 24px;
}
.service-ic{
  width:34px; height:34px; flex:none; color:var(--gold-dark);
  margin-top:2px;
}
.service h3{ font-family:var(--font-sans); font-size:16px; font-weight:800; color:var(--text-dark); margin-bottom:6px; }
.service p{ font-size:13.5px; color:var(--muted-dark); line-height:1.6; }

/* ---------- CASE STUDIES ---------- */
.cases-grid{
  margin-top:52px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.case-card{
  background:#FFFFFF; border:1px solid var(--hair-dark); border-radius:22px;
  overflow:hidden; box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column;
  transition:transform .35s ease, box-shadow .35s ease;
}
.case-card:hover{ transform:translateY(-6px); box-shadow:0 34px 70px rgba(33,30,25,.16); }
.case-card-body{ padding:26px; display:flex; flex-direction:column; flex:1; }
.case-tag{
  align-self:flex-start;
  font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-dark); border:1px solid rgba(154,123,60,.4); border-radius:999px;
  padding:.4em 1.1em; margin:22px 0 0; 
}
.case-card h3{ font-size:20px; margin:14px 0 16px; padding:0 26px 0; }
.case-card dl{ padding:0 26px; margin-bottom:20px; }
.case-card dt{
  font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-dark); margin-top:12px;
}
.case-card dd{ font-size:14px; color:var(--muted-dark); line-height:1.55; margin-top:3px; }
.case-link{
  margin:auto 26px 26px;
  font-size:14px; font-weight:800; color:var(--gold-dark);
  border-bottom:1.5px solid rgba(154,123,60,.4); padding-bottom:2px;
  align-self:flex-start; transition:border-color .25s ease, color .25s ease;
}
.case-link:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------- NEWSLETTER ---------- */
.newsletter-band{
  background:linear-gradient(180deg, #0C0B09 0%, #161511 100%);
  padding:76px 0;
}
.newsletter-inner{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.newsletter-text{ font-size:16.5px; color:var(--muted-light); max-width:520px; }
.newsletter-text strong{ color:var(--gold-light); font-weight:700; }
.newsletter-form{ display:flex; gap:12px; flex:1; max-width:460px; min-width:300px; }
.newsletter-form input{
  flex:1; padding:.85em 1.3em; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22);
  color:var(--text-light); font-size:14px;
}
.newsletter-form input::placeholder{ color:rgba(244,239,230,.45); }
.newsletter-form input:focus{ outline:none; border-color:var(--gold); }

/* ---------- TEST GOTOWOŚCI (dwa poziomy) ---------- */
.fit-stack{
  margin-top:52px;
  display:flex; flex-direction:column; gap:24px;
}
.fit-panel{ padding:40px 44px; }
.fit-panel h3{ font-size:24px; margin-bottom:22px; }

.fit-list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px 28px;
}
.fit-list li{ display:flex; gap:14px; align-items:flex-start; font-size:15px; color:var(--muted-dark); line-height:1.6; }
.fit-list strong{ color:var(--text-dark); }
.fit-x{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  font-size:15px; font-weight:600; color:var(--gold-dark);
  border:1px solid rgba(154,123,60,.45); margin-top:1px;
}

.fit-note{ font-size:14.5px; color:var(--muted-dark); margin:-8px 0 16px; }

/* Pozytywna strona — „Z kim pracuję” (lustrzane odbicie pytań testu) */
.fit-yes{ margin-top:30px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); }
.fit-yes-title{
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:14px;
}
.fit-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.fit-chips li{
  display:inline-flex; align-items:center; gap:9px;
  padding:.6em 1.15em; border-radius:999px;
  font-size:13px; font-weight:700; color:rgba(244,239,230,.92);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(227,201,138,.3);
}
.fit-chips li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--gold-grad); flex:none;
}

.quiz{ border-top:1px solid var(--hair-dark); }
.quiz-q{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:20px 0; border-bottom:1px solid var(--hair-dark);
}
.quiz-q p{ flex:1; font-size:16px; font-weight:600; color:var(--text-dark); }
.quiz-q p span{
  font-family:var(--font-serif); font-style:italic; color:var(--gold-dark); margin-right:6px;
}
.quiz-opts{ display:flex; gap:10px; flex:none; }
.quiz-btn{
  padding:.55em 1.7em; border-radius:999px; font-size:14px; font-weight:700;
  background:#FFFFFF; color:var(--text-dark);
  border:1px solid rgba(33,30,25,.22);
  transition:all .25s ease;
}
.quiz-btn:hover{ border-color:var(--gold); color:var(--gold-dark); transform:translateY(-1px); }
.quiz-btn.picked-yes{
  background:var(--gold-grad); border-color:transparent; color:#171307;
  box-shadow:0 10px 24px rgba(194,160,85,.3);
}
.quiz-btn.picked-no{
  background:var(--ink); border-color:var(--ink); color:var(--text-light);
}
.quiz-btn:disabled{ cursor:default; }

.quiz-result{
  margin-top:24px; padding:24px; border-radius:18px;
  background:linear-gradient(160deg, #FBF6EC, #F3EBDA);
  border:1px solid rgba(194,160,85,.4);
}
.quiz-result-title{ font-family:var(--font-serif); font-size:20px; font-weight:600; margin-bottom:8px; }
.quiz-result-text{ font-size:14.5px; color:var(--muted-dark); margin-bottom:16px; }
.quiz-result-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:14px; }
.quiz-result-actions .case-link{ margin:0; }
.quiz-reset{
  background:none; border:0; font-size:13px; font-weight:700; color:var(--muted-dark);
  text-decoration:underline; text-underline-offset:3px; padding:0;
}
.quiz-reset:hover{ color:var(--gold-dark); }

/* ---------- PROWIZJA ---------- */
.pricing-grid{
  margin-top:52px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  align-items:stretch;
}
.price-card{
  background:rgba(255,255,255,.035);
  border:1px solid var(--hair-light);
  border-radius:22px; padding:34px 30px;
  transition:border-color .35s ease, transform .35s ease;
}
.price-card:hover{ border-color:rgba(227,201,138,.45); transform:translateY(-4px); }
.price-card h3{
  font-family:var(--font-sans); font-size:12.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-light); margin-bottom:20px;
}
.price-note{ text-transform:none; letter-spacing:.02em; color:var(--muted-light); font-weight:600; }
.price-big{
  font-family:var(--font-serif); font-size:44px; font-weight:600; color:var(--text-light); line-height:1;
  margin-bottom:20px;
}
.price-big span{
  display:block; font-family:var(--font-sans); font-size:13px; font-weight:600;
  color:var(--muted-light); margin-top:8px; letter-spacing:.02em;
}
.price-card ul{ display:flex; flex-direction:column; gap:11px; }
.price-card li{
  font-size:14px; color:var(--muted-light); line-height:1.55; padding-left:18px; position:relative;
}
.price-card li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:2px; background:var(--gold-grad);
}
.price-costs li{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding-left:0; padding-bottom:10px; border-bottom:1px dashed rgba(255,255,255,.15);
}
.price-costs li::before{ display:none; }
.price-costs span{ color:var(--muted-light); font-size:14px; }
.price-costs strong{ color:var(--text-light); font-size:15px; white-space:nowrap; }
.price-footnote{ margin-top:16px; font-size:12.5px; font-style:italic; color:var(--muted-light); }

/* ---------- KONTAKT ---------- */
.section--contact{ padding:130px 0 120px; }
.contact-grid{
  position:relative; z-index:3;
  display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start;
}
.contact-copy h2{ color:var(--text-light); }

.contact-list{ margin-top:34px; display:flex; flex-direction:column; gap:16px; }
.contact-list li{ display:flex; align-items:center; gap:14px; font-size:15px; color:rgba(244,239,230,.9); }
.contact-list .ic{
  width:38px; height:38px; padding:10px; flex:none;
  border-radius:50%; border:1px solid rgba(227,201,138,.35);
  color:var(--gold-light); background:rgba(255,255,255,.05);
}

.tools{ margin-top:44px; }
.tools-title{
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:16px;
}
.tools-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.tool-chip{
  font-size:13px; font-weight:600; color:rgba(244,239,230,.92);
  padding:.6em 1.2em; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .25s ease, color .25s ease, transform .25s ease;
}
.tool-chip:hover{ border-color:var(--gold-light); color:var(--gold-light); transform:translateY(-2px); }

.contact-form{
  padding:38px 36px; border-radius:26px;
  background:linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border:1px solid rgba(227,201,138,.3);
}
.form-title{
  font-family:var(--font-serif); font-size:22px; font-weight:600; color:var(--text-light);
  margin-bottom:22px;
}
.contact-form label{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.contact-form label span{
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,239,230,.75);
}
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%; min-width:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px; padding:13px 16px;
  color:var(--text-light); font-size:14.5px; resize:vertical;
  transition:border-color .25s ease, background .25s ease;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:rgba(244,239,230,.4); }
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--gold-light); background:rgba(255,255,255,.12);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-consent{
  flex-direction:row !important; align-items:flex-start; gap:10px !important;
  margin:4px 0 20px;
}
.form-consent input{
  margin-top:3px; width:16px; height:16px; accent-color:var(--gold); flex:none;
}
.form-consent span{ text-transform:none !important; letter-spacing:0 !important; font-size:12.5px !important; font-weight:500 !important; color:var(--muted-light) !important; line-height:1.5; }
.form-success{
  margin-top:18px; padding:14px 18px; border-radius:12px;
  background:rgba(194,160,85,.16); border:1px solid rgba(227,201,138,.5);
  font-size:14px; font-weight:600; color:var(--gold-light);
}

/* ---------- FOOTER ---------- */
.site-footer{
  background:#080807; color:var(--text-light);
  padding:74px 0 30px;
}
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:56px;
  padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand p{
  margin-top:20px; font-size:14px; color:var(--muted-light); max-width:320px; line-height:1.65;
}
.brand--footer .brand-text{ color:var(--text-light); }
.footer-head{
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:18px;
}
.footer-nav a, .footer-contact a{
  display:block; font-size:14.5px; color:var(--muted-light); margin-bottom:11px;
  transition:color .25s ease;
}
.footer-nav a:hover, .footer-contact a:hover{ color:var(--gold-light); }
.footer-contact p{ font-size:14.5px; color:var(--muted-light); margin-bottom:11px; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:800; letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.2); color:rgba(244,239,230,.8);
  margin-bottom:0;
}
.footer-social a:hover{ border-color:var(--gold-light); color:var(--gold-light); }
.footer-bottom{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-top:26px; font-size:12.5px; color:rgba(244,239,230,.45);
}

/* ---------- STICKY CTA ---------- */
.sticky-cta{
  position:fixed; right:26px; bottom:26px; z-index:90;
  display:inline-flex; align-items:center; gap:10px;
  padding:.95em 1.5em; border-radius:999px;
  font-size:14px; font-weight:800; color:#171307;
  background:var(--gold-grad);
  box-shadow:0 18px 44px rgba(194,160,85,.45);
  opacity:0; transform:translateY(24px); pointer-events:none;
  transition:opacity .4s ease, transform .4s ease;
}
.sticky-cta .ic{ width:17px; height:17px; }
.sticky-cta.visible{ opacity:1; transform:none; pointer-events:auto; }
.sticky-cta:hover{ transform:translateY(-3px); }

/* ---------- POPUP ---------- */
.popup{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:24px; }
.popup[hidden]{ display:none; }
.popup-overlay{
  position:absolute; inset:0;
  background:rgba(8,7,5,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.popup-card{
  position:relative; width:min(460px, 100%);
  padding:44px 40px 36px; border-radius:26px;
  background:linear-gradient(165deg, rgba(34,30,22,.92), rgba(20,18,13,.94));
  border:1px solid rgba(227,201,138,.35);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  text-align:left;
}
.popup-close{
  position:absolute; top:14px; right:18px;
  background:none; border:0; font-size:30px; line-height:1;
  color:rgba(244,239,230,.6); transition:color .25s ease;
}
.popup-close:hover{ color:var(--gold-light); }
.popup-card h3{ font-size:27px; color:var(--text-light); margin-bottom:12px; }
.popup-card > p{ font-size:14.5px; color:var(--muted-light); margin-bottom:18px; }
.popup-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
.popup-list li{
  display:flex; align-items:center; gap:11px;
  font-size:14.5px; font-weight:600; color:rgba(244,239,230,.92);
}
.popup-list li::before{
  content:""; flex:none; width:18px; height:18px; border-radius:50%;
  background:var(--gold-grad);
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12l5 5 9-10" fill="none" stroke="black" stroke-width="3"/></svg>') center/12px no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12l5 5 9-10" fill="none" stroke="black" stroke-width="3"/></svg>') center/12px no-repeat;
}
.popup-note{ margin-top:14px; font-size:12px; color:rgba(244,239,230,.45); text-align:center; }

/* ---------- Animacje reveal (aktywne tylko gdy JS działa) ---------- */
html.js .reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--reveal-delay, 0s);
  will-change:opacity, transform;
}
html.js .reveal.in-view{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  html.js .reveal{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   RESPONSYWNOŚĆ
   ========================================================================== */
@media (max-width: 1100px){
  .hero-grid{ gap:44px; }
  .steps-grid{ grid-template-columns:repeat(2,1fr); }
  .value-grid{ grid-template-columns:repeat(2,1fr); }
  .cases-grid{ grid-template-columns:repeat(2,1fr); }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .pricing-grid{ grid-template-columns:1fr; max-width:640px; }
  .fit-panel{ padding:36px 32px; }
}

@media (max-width: 940px){
  .nav{
    position:fixed; top:0; right:0; height:100dvh; width:min(340px, 84vw);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:110px 36px 40px; gap:26px;
    background:rgba(12,11,9,.92);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border-left:1px solid rgba(255,255,255,.1);
    transform:translateX(100%); transition:transform .45s cubic-bezier(.16,1,.3,1);
  }
  .nav.open{ transform:none; }
  .nav a{ font-size:19px; }
  .nav-cta-mobile{
    display:inline-flex; margin-top:10px;
    background:var(--gold-grad); color:#171307 !important;
    padding:.8em 1.6em; border-radius:999px; font-weight:800;
  }
  .nav-toggle{ display:flex; z-index:110; }
  .header-cta{ display:none; }

  .hero{ padding-top:140px; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-card{ max-width:440px; }

  .stats-strip{ grid-template-columns:repeat(2,1fr); gap:28px 0; padding:30px 32px; }
  .stat{ padding:0 26px !important; }
  .stat:nth-child(odd){ border-left:0 !important; padding-left:0 !important; }

  .contact-grid{ grid-template-columns:1fr; gap:52px; }
  .fit-panel{ padding:32px 28px; }
  .fit-list{ grid-template-columns:1fr; gap:16px; }
  .quiz-q{ flex-direction:column; align-items:flex-start; gap:14px; }
  .ps-bento{ grid-template-columns:repeat(2,1fr); }
  .compare-head, .compare-row{ grid-template-columns:1fr; }
  .compare-head{ display:none; }
  .compare-row{
    border:1px solid var(--hair-dark); border-radius:18px; margin:0 0 14px; overflow:hidden;
  }
  .compare-row:hover{ background:transparent; }
  .compare-crit{ padding:16px 22px 6px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-dark); }
  .compare-cell{ border-left:0; padding:12px 22px 16px; align-items:flex-start; }
  .compare-cell::before{
    content:"Tradycyjny agent";
    display:block; width:100%;
    font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted-dark); margin-bottom:4px;
  }
  .compare-cell.partner::before{ content:"Partner Kupującego (Marta)"; color:var(--gold-dark); }

  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 640px){
  .section{ padding:84px 0; }
  .hero{ padding:128px 0 52px; }

  .steps-grid{ grid-template-columns:1fr; }
  .value-grid{ grid-template-columns:1fr; }
  .cases-grid{ grid-template-columns:1fr; }
  .ps-bento{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr; }
  .fit-stack{ gap:18px; }
  .fit-panel{ padding:28px 22px; }
  .fit-chips{ gap:8px; }
  .form-row{ grid-template-columns:1fr; }

  .stats-strip{ grid-template-columns:1fr; gap:22px; }
  .stat{ padding:0 !important; border-left:0 !important; }

  .hero-ctas .btn{ width:100%; }
  .btn--full{ width:100%; }

  .photo-slot-label--corner{ left:16px; bottom:16px; right:16px; max-width:none; }
  .photo-slot-label{ font-size:9.5px; padding:8px 12px; }

  .sticky-cta{
    right:16px; bottom:16px; font-size:12.5px; padding:.85em 1.25em;
  }
  .footer-grid{ grid-template-columns:1fr; gap:38px; }
  .footer-bottom{ flex-direction:column; }
  .popup-card{ padding:38px 26px 30px; }
  .newsletter-inner{ flex-direction:column; align-items:flex-start; }
  .newsletter-form{ width:100%; max-width:none; }
}

/* ==========================================================================
   DODATKI — WERSJA POPRAWIONA (nowe komponenty)
   ========================================================================== */

/* ---------- Obrazy placeholderów w slotach ----------
   Jeśli obraz z placeholdera się załaduje — wypełnia slot, a etykieta znika.
   Jeśli plik jest niedostępny — JS usuwa <img> i zostaje stylizowany slot z etykietą. */
.photo-slot img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s ease;
}
.photo-slot.has-img img{ opacity:1; }
.photo-slot.has-img .photo-slot-label{
  opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility 0s .4s;
}

/* ---------- HERO: podnagłówek (3 atuty) ---------- */
.hero-kicker{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  margin:14px 0 18px;
  font-size:13.5px; font-weight:700; letter-spacing:.04em;
  color:rgba(244,239,230,.88);
}
.hero-kicker li{ display:inline-flex; align-items:center; gap:10px; }
.hero-kicker li::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--gold-grad); flex:none;
}

.hero-card .photo-slot--portrait{ border-radius:10px; }

/* ---------- RÓŻNICA: trzy punkty pod tekstem ---------- */
.diff-points{
  margin-top:34px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.diff-points li{
  position:relative; padding:4px 0 4px 22px;
  font-size:15px; font-weight:600; color:var(--text-dark); line-height:1.6;
}
.diff-points li::before{
  content:""; position:absolute; left:0; top:.68em; width:12px; height:2px; background:var(--gold-grad);
}

/* ---------- PROBLEM → ROZWIĄZANIE: etykiety i dowód ---------- */
.ps-label{
  font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-dark); margin-bottom:-10px;
}
.ps-problem{
  font-family:var(--font-serif); font-size:18px; font-weight:600; line-height:1.35;
  text-transform:none; letter-spacing:normal;
  color:var(--text-dark);
}
.ps-solution{ font-size:15px; color:var(--text-dark); font-weight:700; line-height:1.55; text-transform:none; }
.ps-proof{ font-size:13.5px; color:var(--muted-dark); line-height:1.62; }
.ps-link{
  color:var(--gold-dark); font-weight:700;
  border-bottom:1.5px solid rgba(154,123,60,.4); padding-bottom:1px;
  transition:color .25s ease, border-color .25s ease;
}
.ps-link:hover{ color:var(--gold); border-color:var(--gold); }
.tile--black .ps-label{ color:var(--gold-light); }
.tile--black .ps-proof{ color:var(--muted-light); }
.tile--black .ps-link{ color:var(--gold-light); border-color:rgba(227,201,138,.45); }
.tile--black .ps-link:hover{ color:#fff; border-color:var(--gold-light); }

/* ---------- Sekcyjne CTA (wyśrodkowany przycisk) ---------- */
.section-cta{ margin-top:44px; text-align:center; }

/* ---------- OPINIE: nota nad kartami ---------- */
.case-note{
  margin-top:30px;
  padding:14px 20px; max-width:660px;
  border-left:2px solid var(--gold);
  background:rgba(194,160,85,.08);
  border-radius:0 12px 12px 0;
  font-size:13.5px; font-style:italic; color:var(--muted-dark); line-height:1.6;
}
.case-card-body{ padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
.case-card .photo-slot .photo-slot-label{ max-width:80%; }

/* ---------- NEWSLETTER (rozbudowany pas) ---------- */
.newsletter-grid{
  display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center;
}
.newsletter-band h2{ color:var(--text-light); }
.newsletter-band .eyebrow{ color:var(--gold-light); }
.newsletter-band .section-lead{ margin-top:14px; }
.newsletter-form{
  display:flex; gap:12px; flex-wrap:wrap;
}
.newsletter-form input{
  flex:1; min-width:220px; padding:.9em 1.3em; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22);
  color:var(--text-light); font-size:14px;
}
.newsletter-form input::placeholder{ color:rgba(244,239,230,.45); }
.newsletter-form input:focus{ outline:none; border-color:var(--gold); }
.newsletter-form .form-success{ width:100%; margin-top:2px; }
.newsletter-micro{ margin-top:14px; font-size:12.5px; color:rgba(244,239,230,.5); }
.newsletter-micro a{ color:rgba(244,239,230,.72); text-decoration:underline; text-underline-offset:3px; }
.newsletter-micro a:hover{ color:var(--gold-light); }

/* Zawartość kalkulatora — lista na czarnym pasie */
.calc-list{ margin-top:28px; max-width:600px; }

/* ---------- PROWIZJA: karta ze stawką ---------- */
.rate-card{
  margin-top:48px;
  display:grid; grid-template-columns:auto 1fr; gap:20px 56px; align-items:center;
  background:rgba(255,255,255,.035);
  border:1px solid var(--hair-light);
  border-radius:24px; padding:44px 48px;
  transition:border-color .35s ease;
}
.rate-card:hover{ border-color:rgba(227,201,138,.4); }
.rate-head{ display:flex; flex-direction:column; gap:10px; }
.rate-big{
  font-family:var(--font-serif); font-size:clamp(3.6rem, 6vw, 5rem); font-weight:600; line-height:1;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rate-cap{
  font-family:var(--font-sans); font-size:14px; font-weight:700; letter-spacing:.02em;
  color:var(--text-light); max-width:230px; line-height:1.5;
}
.rate-body p{ font-size:15px; color:var(--muted-light); line-height:1.7; }
.rate-body p + p{ margin-top:14px; }
.rate-example{
  padding:16px 20px; border-radius:14px;
  background:rgba(194,160,85,.1);
  border:1px solid rgba(227,201,138,.3);
  font-size:14px !important;
}
.rate-example strong{ color:var(--gold-light); }

/* ---------- PROWIZJA: blok tekstowy o kosztach ---------- */
.costs-block{ margin-top:64px; max-width:780px; }
.costs-block h3{
  font-family:var(--font-serif); font-size:clamp(1.35rem, 2.2vw, 1.7rem); font-weight:600;
  color:var(--text-light); margin-bottom:20px; line-height:1.3;
}
.costs-block p{ font-size:15.5px; color:var(--muted-light); line-height:1.75; }
.costs-block p + p{ margin-top:16px; }
.costs-cta{ margin-top:30px; letter-spacing:.08em; font-size:13.5px; }

/* ---------- Panel (gwarancje) na czarnym tle ---------- */
.panel-card{
  margin-top:64px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--hair-light);
  border-radius:24px; padding:42px 44px;
  transition:border-color .35s ease;
}
.panel-card:hover{ border-color:rgba(227,201,138,.4); }
.panel-card h3{
  font-family:var(--font-serif); font-size:clamp(1.35rem, 2.2vw, 1.7rem); font-weight:600;
  color:var(--text-light); margin-bottom:22px; line-height:1.3;
}

.check-list{
  display:grid; grid-template-columns:1fr 1fr; gap:16px 32px;
}
.check-list li{
  position:relative; padding-left:32px;
  font-size:14.5px; color:var(--muted-light); line-height:1.6;
}
.check-list li::before{
  content:""; position:absolute; left:0; top:.14em;
  width:19px; height:19px; border-radius:50%;
  background:var(--gold-grad);
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12l5 5 9-10" fill="none" stroke="black" stroke-width="3"/></svg>') center/12px no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12l5 5 9-10" fill="none" stroke="black" stroke-width="3"/></svg>') center/12px no-repeat;
}
.guarantee-card .microcopy{ margin-top:24px; }

/* ---------- FAQ (accordion) ---------- */
.faq-block{ margin-top:64px; }
.faq-block h3{
  font-family:var(--font-serif); font-size:clamp(1.35rem, 2.2vw, 1.7rem); font-weight:600;
  color:var(--text-light); margin-bottom:24px; line-height:1.3;
}
.faq{ display:flex; flex-direction:column; gap:14px; max-width:860px; }
.faq details{
  background:rgba(255,255,255,.035);
  border:1px solid var(--hair-light);
  border-radius:18px;
  transition:border-color .3s ease, background .3s ease;
}
.faq details:hover{ border-color:rgba(227,201,138,.35); }
.faq details[open]{ border-color:rgba(227,201,138,.5); background:rgba(255,255,255,.05); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 26px;
  font-size:16px; font-weight:700; color:var(--text-light); line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; flex:none; width:9px; height:9px; margin:3px 3px 6px;
  border-right:2px solid var(--gold-light); border-bottom:2px solid var(--gold-light);
  transform:rotate(45deg);
  transition:transform .3s ease;
}
.faq details[open] summary::after{ transform:rotate(225deg); }
.faq-a{
  padding:0 26px 22px;
  font-size:14.5px; color:var(--muted-light); line-height:1.7; max-width:760px;
}

/* ---------- KONTAKT: lista „Co się wydarzy” ---------- */
.events{ margin-top:34px; }
.events-title{
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:14px;
}
.events ul{ display:flex; flex-direction:column; gap:12px; }
.events li{
  position:relative; padding-left:30px;
  font-size:15px; color:rgba(244,239,230,.88); line-height:1.6;
}
.events li::before{
  content:""; position:absolute; left:0; top:.16em;
  width:19px; height:19px; border-radius:50%;
  background:var(--gold-grad);
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12l5 5 9-10" fill="none" stroke="black" stroke-width="3"/></svg>') center/12px no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12l5 5 9-10" fill="none" stroke="black" stroke-width="3"/></svg>') center/12px no-repeat;
}
.contact-list strong{ color:var(--text-light); font-weight:700; }

.form-opt-mark, .opt-mark{
  font-style:normal; text-transform:none; letter-spacing:.02em; font-weight:600; opacity:.6;
}

/* ---------- POPUP: formularz kalkulatora ---------- */
.popup-form{ display:flex; flex-direction:column; gap:12px; margin-bottom:6px; }
.popup-form input{
  width:100%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px; padding:13px 16px;
  color:var(--text-light); font-size:14.5px;
  transition:border-color .25s ease, background .25s ease;
}
.popup-form input::placeholder{ color:rgba(244,239,230,.4); }
.popup-form input:focus{ outline:none; border-color:var(--gold-light); background:rgba(255,255,255,.12); }
.popup-success{
  display:flex; align-items:flex-start; gap:12px;
  margin:4px 0 8px; padding:16px 18px; border-radius:14px;
  background:rgba(194,160,85,.14);
  border:1px solid rgba(227,201,138,.5);
  font-size:14.5px; font-weight:600; color:var(--gold-light); line-height:1.55;
}
.popup-success[hidden]{ display:none; }
.popup-success .ic{ width:21px; height:21px; flex:none; margin-top:1px; }
.popup-close-link{
  display:block; width:100%; margin-top:14px;
  background:none; border:0; cursor:pointer;
  font-size:13.5px; font-weight:600; color:rgba(244,239,230,.55);
  text-decoration:underline; text-underline-offset:3px;
  transition:color .25s ease;
}
.popup-close-link:hover{ color:var(--gold-light); }
.popup-micro{ margin-top:12px; font-size:11.5px; color:rgba(244,239,230,.45); text-align:center; }
.popup-micro a{ color:rgba(244,239,230,.65); text-decoration:underline; text-underline-offset:2px; }
.popup-micro a:hover{ color:var(--gold-light); }
.popup-card .popup-lead{ font-size:14.5px; color:var(--muted-light); margin-bottom:20px; }

/* ---------- Wynik quizu: przycisk tekstowy ---------- */
.quiz-result-actions button.case-link{
  background:none; border:0; border-bottom:1.5px solid rgba(154,123,60,.4); border-radius:0;
  padding:0 0 2px; margin:0;
  font-size:14px; font-weight:800; font-family:var(--font-sans); color:var(--gold-dark);
  cursor:pointer; align-self:center;
  transition:color .25s ease, border-color .25s ease;
}
.quiz-result-actions button.case-link:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------- FORMULARZ KONTAKTOWY: mikrotekst ---------- */
.form-micro{ margin-top:12px; font-size:12px; color:rgba(244,239,230,.5); text-align:center; }
.contact-form .form-success + .form-micro{ margin-top:10px; }

/* ---------- STOPKA: kontakt awaryjny + polityka ---------- */
.footer-urgent{ margin-top:14px; font-size:13.5px; color:var(--muted-light); }
.footer-urgent a{ color:var(--gold-light); font-weight:700; border-bottom:1px solid rgba(227,201,138,.4); }
.footer-urgent a:hover{ border-color:var(--gold-light); }
.footer-policy{
  display:inline-block; margin-top:18px;
  font-size:13.5px; color:var(--muted-light);
  border-bottom:1px solid rgba(255,255,255,.2);
  transition:color .25s ease;
}
.footer-policy:hover{ color:var(--gold-light); }

/* ---------- Podstrona: polityka prywatności ---------- */
.legal-page{ padding:170px 0 100px; }
.legal-page h1{ font-size:clamp(2rem, 4vw, 2.9rem); margin-bottom:18px; }
.legal-note{
  margin-top:26px; padding:20px 24px; max-width:720px;
  border-left:2px solid var(--gold);
  background:rgba(194,160,85,.08);
  border-radius:0 14px 14px 0;
  font-size:15px; color:var(--muted-dark); line-height:1.7;
}
.legal-back{
  display:inline-flex; align-items:center; gap:8px; margin-top:34px;
  font-size:14px; font-weight:800; color:var(--gold-dark);
  border-bottom:1.5px solid rgba(154,123,60,.4); padding-bottom:2px;
}
.legal-back:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------- RESPONSYWNOŚĆ DODATKÓW ---------- */
@media (max-width: 1100px){
  .rate-card{ grid-template-columns:1fr; gap:24px; padding:36px 32px; }
  .rate-cap{ max-width:none; }
  .newsletter-grid{ gap:40px; }
}

@media (max-width: 940px){
  .diff-points{ grid-template-columns:1fr; gap:14px; }
  .newsletter-grid{ grid-template-columns:1fr; gap:32px; }
  .check-list{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .hero-kicker{ gap:8px 18px; font-size:12.5px; }
  .rate-card{ padding:30px 24px; margin-top:40px; }
  .panel-card{ padding:30px 24px; margin-top:48px; }
  .costs-block, .faq-block{ margin-top:48px; }
  .costs-cta{ width:100%; }
  .faq summary{ padding:16px 18px; font-size:15px; }
  .faq-a{ padding:0 18px 18px; }
  .section-cta .btn{ width:100%; }
  .case-note{ margin-top:24px; }
}

/* ==========================================================================
   DODATKI 2 — AKTUALNE OFERTY (kafelki mieszkań + złota mapa Warszawy w tle)
   ========================================================================== */

.section--offers{ overflow:hidden; }
.section--offers .container{ position:relative; z-index:3; }

/* Złota mapa Warszawy — akcent sekcji (plik w tym samym folderze co index.html) */
.offers-map{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(180deg, rgba(11,10,8,.9) 0%, rgba(11,10,8,.58) 42%, rgba(11,10,8,.94) 100%),
    url("mapa%20warszawy%20gold.png");
  background-size:cover, cover;
  background-position:center, center 30%;
  background-repeat:no-repeat;
}

/* Nota nad kafelkami — wariant na ciemnym tle */
.case-note--light{
  border-left-color:var(--gold-light);
  background:rgba(194,160,85,.12);
  color:var(--muted-light);
}
.section--offers .case-note{ margin-top:34px; }

/* ---------- Siatka kafelków ofert ---------- */
.offers-grid{
  margin-top:44px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}

.offer-card{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, #FFFDF8 0%, #F7F1E5 100%);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-deep);
}
.offer-card:hover{ transform:translateY(-6px); box-shadow:0 36px 72px rgba(0,0,0,.55); }

.photo-slot--offer{ aspect-ratio:16/10; border-radius:0; }

/* Złota plakietka na zdjęciu (np. „Oferta niepubliczna”) */
.offer-badge{
  position:absolute; z-index:4; top:14px; left:14px;
  padding:.5em 1.05em; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#171307; background:var(--gold-grad);
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}

/* ---------- Treść kafelka: cena → lokalizacja → parametry ---------- */
.offer-body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }

.offer-price{
  font-family:var(--font-serif); font-size:24px; font-weight:600;
  letter-spacing:-.01em; line-height:1.2; color:var(--text-dark);
}
.offer-loc{ margin-top:7px; font-size:14px; font-weight:600; color:var(--muted-dark); }

.offer-meta{
  margin-top:auto; padding-top:14px;
  border-top:1px solid var(--hair-dark);
  display:flex; flex-direction:column; gap:4px;
}
.offer-card .offer-loc{ margin-bottom:18px; }
.offer-meta strong{ font-size:14px; font-weight:800; color:var(--text-dark); line-height:1.45; }
.offer-meta span{
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-dark);
}

/* ---------- RESPONSYWNOŚĆ: oferty ---------- */
@media (max-width: 1100px){
  .offers-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 640px){
  .offers-grid{ grid-template-columns:1fr; gap:18px; }
  .offer-body{ padding:20px 20px 22px; }
  .offer-price{ font-size:22px; }
  .offer-card .offer-loc{ margin-bottom:14px; }
}

/* ==========================================================================
   DODATKI 3 — BLOG: STRONA WPISU (konwencja WordPress, bez paska bocznego)
   Plik: blog-wpis.html
   ========================================================================== */

/* ---------- Nagłówek wpisu (ciemny, jak hero) ---------- */
.post-hero{
  position:relative; overflow:hidden;
  padding:168px 0 210px;   /* większy dołtek — przestrzeń, w którą „wchodzi” obraz główny */
}
.post-hero-inner{ position:relative; z-index:3; max-width:880px; }

.post-breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:12.5px; font-weight:600; color:rgba(244,239,230,.55);
  margin-bottom:26px;
}
.post-breadcrumb a{ color:rgba(244,239,230,.72); transition:color .25s ease; }
.post-breadcrumb a:hover{ color:var(--gold-light); }
.post-breadcrumb em{ font-style:normal; color:var(--gold-light); }

.post-cat{
  font-size:11px; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:18px;
}
.post-title{
  font-family:var(--font-serif); font-weight:600; letter-spacing:-.015em;
  font-size:clamp(2.1rem, 4.2vw, 3.4rem);
  line-height:1.14; color:var(--text-light);
  margin-bottom:20px;
}
.post-excerpt{
  max-width:660px; font-size:17.5px; line-height:1.7; color:var(--muted-light);
  margin-bottom:30px;
}

.post-meta{ display:flex; align-items:center; gap:16px; }
.post-avatar{ width:48px; height:48px; font-size:23px; flex:none; }
.post-meta-text{ display:flex; flex-direction:column; gap:1px; line-height:1.4; }
.post-meta-text strong{ font-size:15px; font-weight:800; color:var(--text-light); }
.post-meta-text span{ font-size:13px; font-weight:600; color:rgba(244,239,230,.6); }

/* ---------- Treść wpisu (jasna, jedna kolumna bez sidebara) ---------- */
.post-wrap{
  position:relative;
  display:flow-root;       /* BLOKADA margin-collapse: bez tego ujemny margines obrazu
                              „zapada się” przez rodzica, białe tło zakrywa ciemny nagłówek,
                              a cień obrazu maluje na bieli szary pas (bug z przejściem) */
  background:linear-gradient(180deg, #FFFFFF 0%, #FBF8F2 100%);
  padding:0 0 100px;
}

.post-featured{
  position:relative; z-index:5;
  margin:-100px auto 64px;  /* lekko nachodzi na czarne tło nagłówka wpisu */
  max-width:var(--container);
}
.post-featured .photo-slot{
  border-radius:var(--radius);
  /* łagodniejszy cień niż --shadow-deep — głębia bez szarych smug na jasnym tle */
  box-shadow:0 26px 68px rgba(15,12,6,.38), 0 6px 20px rgba(15,12,6,.2);
}
.photo-slot--featured{ aspect-ratio:16/9; }
.post-featured figcaption{
  margin-top:14px; font-size:13px; color:var(--muted-dark); text-align:center;
}

.post-layout{ max-width:760px; margin:0 auto; }

/* ---------- Typografia artykułu ---------- */
.post-content{ font-size:17px; line-height:1.85; color:var(--text-dark); }
.post-content p{ margin:0 0 22px; }
.post-content > *:last-child{ margin-bottom:0; }

.post-lead{
  font-size:19.5px; line-height:1.75; font-weight:500; color:var(--text-dark);
  margin-bottom:34px !important;
}

.post-content h2{
  font-size:clamp(1.55rem, 2.6vw, 2rem);
  margin:46px 0 18px;
}
.post-content h3{ font-size:1.32rem; margin:36px 0 14px; }

.post-content a{
  color:var(--gold-dark); font-weight:700;
  border-bottom:1.5px solid rgba(154,123,60,.4);
  transition:color .25s ease, border-color .25s ease;
}
.post-content a:hover{ color:var(--gold); border-color:var(--gold); }

.post-list{ margin:0 0 24px; display:grid; gap:13px; }
.post-list li{
  position:relative; padding-left:28px; line-height:1.7;
}
.post-list li::before{
  content:""; position:absolute; left:0; top:.58em;
  width:9px; height:9px; border-radius:3px;
  background:var(--gold-grad);
}

/* Cytat wyróżniony */
.post-quote{
  margin:40px 0; padding:10px 0 10px 30px;
  border-left:3px solid var(--gold);
}
.post-quote p{
  font-family:var(--font-serif); font-style:italic; font-weight:500;
  font-size:22px; line-height:1.55; color:var(--text-dark);
  margin:0 0 10px;
}
.post-quote cite{
  font-family:var(--font-sans); font-style:normal;
  font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-dark);
}

/* Zdjęcie w treści */
.post-figure{ margin:40px 0; }
.post-figure figcaption{ margin-top:12px; font-size:13px; color:var(--muted-dark); }

/* Wyniki case study — ciemny kafelek w jasnym artykule */
.post-results{
  margin:44px 0;
  background:linear-gradient(160deg, #1C1A13 0%, #0E0D0B 100%);
  border-radius:var(--radius);
  padding:38px 42px 34px;
  box-shadow:var(--shadow-deep);
}
.post-results h3{
  font-family:var(--font-serif); font-size:20px; font-weight:600;
  color:var(--text-light); margin:0 0 24px;
}
.post-results-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px 22px; }
.pr-item{ display:flex; flex-direction:column; gap:6px; }
.pr-num{
  font-family:var(--font-serif); font-size:clamp(1.7rem, 2.4vw, 2.15rem); font-weight:600; line-height:1.1;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pr-label{ font-size:12.5px; line-height:1.5; color:var(--muted-light); }

/* Nota w treści — reużywa .case-note (jasne tło), tylko marginesy */
.post-content .case-note{ margin:30px 0; max-width:none; }

/* ---------- Udostępnianie ---------- */
.post-share{
  margin-top:48px; padding-top:26px;
  border-top:1px solid var(--hair-dark);
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
}
.post-share-label{
  font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-dark); margin-right:6px;
}
.post-share a{
  padding:.5em 1.1em; border-radius:999px;
  font-size:13px; font-weight:700; color:var(--text-dark);
  border:1px solid rgba(33,30,25,.22);
  transition:all .25s ease;
}
.post-share a:hover{
  border-color:var(--gold); color:var(--gold-dark); transform:translateY(-1px);
}

/* ---------- Pole autora ---------- */
.author-box{
  margin-top:44px;
  display:flex; align-items:flex-start; gap:22px;
  padding:32px 36px;
  background:linear-gradient(180deg, #FFFDF8 0%, #F7F1E5 100%);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.author-avatar{ width:64px; height:64px; font-size:30px; flex:none; }
.author-name{ font-size:16.5px; font-weight:800; color:var(--text-dark); margin-bottom:8px; }
.author-name span{ font-size:12.5px; font-weight:700; color:var(--muted-dark); }
.author-bio p:not(.author-name){ font-size:14.5px; line-height:1.7; color:var(--muted-dark); margin-bottom:12px; }
.author-link{
  display:inline-flex; font-size:14px; font-weight:800; color:var(--gold-dark);
  border-bottom:1.5px solid rgba(154,123,60,.4); padding-bottom:2px;
  transition:color .25s ease, border-color .25s ease;
}
.author-link:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------- Pas CTA pod wpisem ---------- */
.post-cta{
  position:relative; overflow:hidden;
  background:
    radial-gradient(80% 90% at 20% 0%, rgba(216,188,126,.14), transparent 55%),
    linear-gradient(180deg, #0C0B09 0%, #161511 100%);
  padding:84px 0; text-align:center;
}
.post-cta-inner{ max-width:640px; margin-inline:auto; }
.post-cta h2{ color:var(--text-light); }
.post-cta p{ margin-top:16px; font-size:16.5px; line-height:1.7; color:var(--muted-light); }
.post-cta .btn{ margin-top:30px; }

/* ---------- Polecane artykuły ---------- */
.related-grid{
  margin-top:44px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.related-card{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, #FFFDF8 0%, #F7F1E5 100%);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.related-card:hover{ transform:translateY(-6px); box-shadow:0 34px 70px rgba(33,30,25,.16); }
.related-body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; align-items:flex-start; }
.rc-meta{
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-dark);
}
.related-body h3{ font-size:19px; line-height:1.4; margin:12px 0 16px; }
.related-body h3 a{
  color:var(--text-dark); border-bottom:0;
  transition:color .25s ease;
}
.related-body h3 a:hover{ color:var(--gold-dark); }
.rc-link{
  margin-top:auto; font-size:14px; font-weight:800; color:var(--gold-dark);
  border-bottom:1.5px solid rgba(154,123,60,.4); padding-bottom:2px;
  transition:color .25s ease, border-color .25s ease;
}
.rc-link:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------- RESPONSYWNOŚĆ: blog ---------- */
@media (max-width: 940px){
  .post-hero{ padding:150px 0 176px; }
  .post-results-grid{ grid-template-columns:repeat(2,1fr); }
  .related-grid{ grid-template-columns:1fr; }
  .post-featured{ margin:-76px auto 52px; }
}

@media (max-width: 640px){
  .post-hero{ padding:132px 0 148px; }
  .post-title{ font-size:clamp(1.8rem, 8vw, 2.3rem); }
  .post-excerpt{ font-size:16px; }
  .post-wrap{ padding-bottom:76px; }
  .post-featured{ margin:-56px auto 44px; }
  .post-featured figcaption{ text-align:left; }
  .post-content{ font-size:16px; line-height:1.8; }
  .post-lead{ font-size:17.5px; }
  .post-quote p{ font-size:19px; }
  .post-quote{ padding-left:20px; }
  .post-results{ padding:30px 26px 28px; }
  .post-results-grid{ gap:22px 16px; }
  .author-box{ padding:26px 24px; }
  .post-cta{ padding:68px 0; }
}

/* ============ V2 — bloki dodane w wersji 2 ============ */

/* Blok „Co ustalimy w 20 minut” (hero + sekcja kontakt) */
.talk-box{
  margin-top:26px; max-width:620px;
  padding:22px 26px; border-radius:14px;
  border:1px solid rgba(227,201,138,.3);
  background:rgba(255,255,255,.05);
}
.talk-box-title{
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:10px;
}
.talk-box p{ font-size:15px; line-height:1.6; color:rgba(244,239,230,.9); }
.talk-box .btn{ margin-top:18px; }

/* Cytat klientki jako nagłówek kafla „Problem → Rozwiązanie” */
.ps-problem--quote{ font-style:italic; }

/* Dane firmy w sekcji kontakt */
.contact-firm{ margin-top:28px; font-size:14px; color:rgba(244,239,230,.72); }
.contact-firm-title{ font-weight:700; color:var(--text-light); margin-bottom:4px; }

/* Dyskretny link do strony dla sprzedających */
.contact-alt{
  margin-top:26px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.16);
}
.contact-alt p{ font-size:15px; color:rgba(244,239,230,.88); margin-bottom:6px; }
.contact-alt a{ color:var(--gold-light); font-weight:700; text-decoration:none; }
.contact-alt a:hover{ text-decoration:underline; }

/* Lista z punktami na ciemnym tle (strona dla sprzedających) */
.bullet-list{ margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.bullet-list li{
  position:relative; padding-left:30px;
  font-size:15px; line-height:1.6; color:rgba(244,239,230,.9);
}
.bullet-list li::before{
  content:""; position:absolute; left:0; top:.16em;
  width:19px; height:19px; border-radius:50%;
  background:var(--gold-grad);
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12l5 5 9-10" fill="none" stroke="black" stroke-width="3"/></svg>') center/12px no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12l5 5 9-10" fill="none" stroke="black" stroke-width="3"/></svg>') center/12px no-repeat;
}
.bullet-list strong{ color:var(--text-light); font-weight:700; }

/* Numerowana lista kroków na stronie dla sprzedających */
.step-list{ margin-top:44px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.step-item{
  padding:28px 24px; border-radius:20px;
  border:1px solid rgba(227,201,138,.22); background:rgba(255,255,255,.04);
}
.step-item-num{
  font-family:var(--font-serif); font-style:italic; font-size:30px; line-height:1;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  display:block; margin-bottom:12px;
}
.step-item h3{ font-size:19px; color:var(--text-light); margin-bottom:8px; }
.step-item p{ font-size:14.5px; line-height:1.6; color:rgba(244,239,230,.82); }

@media (max-width:980px){
  .step-list{ grid-template-columns:repeat(2,1fr); }
}
/* Elementy siatki kontaktowej muszą się kurczyć (min-width:auto blokuje kolumnę 1fr) */
.contact-grid > *{ min-width:0; }

@media (max-width:620px){
  .step-list{ grid-template-columns:1fr; }
  .talk-box{ padding:20px 18px; }
  .talk-box .btn{ width:100%; white-space:normal; text-align:center; }
  .contact-form .btn, .btn--full{ white-space:normal; }
}

/* ============ V2 — strona „O mnie” (wizytówka) ============ */

/* Aktywna pozycja w menu */
.nav a[aria-current="page"]{ color:var(--gold-light); }
.nav a[aria-current="page"]::after{ width:100%; }

/* Portret z wycięciem — nie przycinamy */
.photo-slot--portrait img{ object-fit:contain; }

/* Layout hero wizytówki */
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }

/* Hub (strona główna): tekst + zdjęcie, pod nimi wybór ścieżki.
   Na mobile kolejność: tekst → wybór → zdjęcie (zdjęcie nie spycha przycisków w dół). */
.hub-hero{
  display:grid; grid-template-columns:1.1fr .9fr; column-gap:56px;
  grid-template-areas:"copy photo" "choice choice";
}
.hub-copy{ grid-area:copy; }
.hub-photo{ grid-area:photo; }
.hub-hero .choice-grid{ grid-area:choice; }
@media (max-width:940px){
  .hub-hero{
    grid-template-columns:1fr;
    grid-template-areas:"copy" "choice" "photo";
  }
}

/* Wybór ścieżki — dwa duże, równorzędne wejścia w hero */
.choice-grid{ margin-top:58px; display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.choice-card{
  display:flex; flex-direction:column;
  padding:38px 36px 34px; border-radius:24px; text-decoration:none;
  background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(227,201,138,.28);
  transition:transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.choice-card:hover{
  transform:translateY(-6px); border-color:rgba(227,201,138,.6);
  background:linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  box-shadow:0 30px 70px rgba(0,0,0,.42);
}
.choice-label{
  align-self:flex-start; margin-bottom:18px;
  padding:.45em 1em; border-radius:999px;
  border:1px solid rgba(227,201,138,.45); background:rgba(227,201,138,.10);
  font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-light);
}
.choice-title{
  font-family:var(--font-serif); font-size:clamp(1.45rem, 2.3vw, 1.95rem);
  font-weight:600; line-height:1.25; color:var(--text-light); margin-bottom:18px;
}
.choice-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.choice-list li{
  position:relative; padding-left:18px;
  font-size:14.5px; line-height:1.55; color:rgba(244,239,230,.84);
}
.choice-list li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:2px; background:var(--gold-grad);
}
.choice-cta{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  padding:.62em 1.15em; border-radius:999px;
  border:1px solid rgba(227,201,138,.45); background:rgba(227,201,138,.10);
  font-size:13.5px; font-weight:800; color:var(--gold-light);
  transition:background .3s ease, color .3s ease, border-color .3s ease, gap .3s ease;
}
.choice-card:hover .choice-cta{
  gap:13px; background:rgba(227,201,138,.22);
  border-color:rgba(227,201,138,.75); color:#fff;
}

/* Metoda */
.method-grid{ margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.method-item{ padding:30px 26px; background:#fff; border:1px solid var(--hair-dark); border-radius:20px; box-shadow:var(--shadow-soft); }
.method-num{
  display:block; font-family:var(--font-serif); font-style:italic; font-size:32px; line-height:1; margin-bottom:14px;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.method-item h3{ font-size:19px; margin-bottom:8px; }
.method-item p{ font-size:14.5px; color:var(--muted-dark); line-height:1.6; }

/* Zasady */
.principles{ margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.principle{ padding:28px 26px; background:#fff; border:1px solid var(--hair-dark); border-radius:20px; box-shadow:var(--shadow-soft); }
.principle h3{ font-size:18px; margin-bottom:8px; }
.principle p{ font-size:14.5px; color:var(--muted-dark); line-height:1.6; }

/* Select w formularzu (wybór roli) */
.contact-form select{
  width:100%; min-width:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px; padding:13px 16px;
  color:var(--text-light); font-size:14.5px; font-family:inherit;
}
.contact-form select option{ background:#1b1916; color:#f4efe6; }

@media (max-width:940px){
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .choice-grid,.method-grid,.principles{ grid-template-columns:1fr; }
}

/* ==========================================================================
   ADAPTACJE WORDPRESS
   Projekt statyczny (powyżej) jest bazą wizualną; poniżej tylko to, czego
   nie da się wyrazić w statycznym HTML: typografia Gutenberga, przyciski
   blokowe, nawigacja, formularz motywu, test gotowości i popup.
   ========================================================================== */

/* ---------- Reset Gutenberga: blok ma być tym, czym był w prototypie ---------- */

.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-image,
.wp-block-buttons,
.wp-block-button {
	box-sizing: border-box;
}

.wp-block-columns {
	gap: 0;
	margin-bottom: 0;
}

.wp-block-column {
	min-width: 0;
}

.wp-block-image {
	margin: 0;
}

.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Typografia: skala zgodna z projektem ---------- */

h1, h2, h3 {
	font-family: var(--wp--preset--font-family--playfair-display, var(--font-serif));
	font-weight: 600;
	line-height: 1.15;
}

h1 {
	font-size: clamp(2.5rem, 1.8rem + 3.2vw, 4.15rem);
	letter-spacing: -.015em;
}

h2 {
	font-size: clamp(1.9rem, 3.4vw, 2.85rem);
	letter-spacing: -.01em;
}

h3 {
	font-size: clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
}

p {
	margin: 0;
}

/* ---------- Przyciski blokowe = .btn z projektu ---------- */

.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--manrope, var(--font-sans));
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	border-radius: 999px;
	border: 0;
	padding: .9em 1.8em;
	background: var(--gold-grad);
	color: #171307;
	text-decoration: none;
	box-shadow: 0 14px 34px rgba(194, 160, 85, .32);
	transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}

.wp-element-button:hover {
	transform: translateY(-2px);
	background: var(--gold-grad);
	color: #171307;
	box-shadow: 0 20px 44px rgba(194, 160, 85, .42);
}

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0;
}

.wp-block-button {
	margin: 0;
}

.wp-block-button__link {
	text-decoration: none;
}

/* ---------- Nawigacja = .nav z projektu ---------- */

.nav .wp-block-navigation__container {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--manrope, var(--font-sans));
	font-size: 14px;
	font-weight: 600;
	color: rgba(244, 239, 230, .82);
	text-decoration: none;
	transition: color .25s ease;
	position: relative;
}

.nav .wp-block-navigation-item__content:hover,
.nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--gold-light);
}

.nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 0;
	height: 1.5px;
	background: var(--gold-grad);
	transition: width .3s ease;
}

.nav .wp-block-navigation-item__content:hover::after,
.nav .wp-block-navigation-item__content[aria-current="page"]::after {
	width: 100%;
}

.nav .wp-block-navigation__responsive-container-open {
	color: var(--text-light);
}

/* ---------- Formularz motywu (odpowiednik .contact-form) ---------- */

.marta-form__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.marta-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: var(--wp--preset--font-family--manrope, var(--font-sans));
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(244, 239, 230, .9);
}

.marta-field input,
.marta-field select,
.marta-field textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--manrope, var(--font-sans));
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--text-light);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 12px;
	padding: 13px 16px;
	transition: border-color .25s ease, background .25s ease;
}

.marta-field input:focus,
.marta-field select:focus,
.marta-field textarea:focus {
	outline: none;
	border-color: var(--gold-light);
	background: rgba(255, 255, 255, .12);
}

.marta-field textarea {
	resize: vertical;
	min-height: 96px;
}

.marta-opt {
	font-style: normal;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	opacity: .7;
}

.marta-consent {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.55;
}

.marta-consent input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	flex: none;
	accent-color: var(--gold);
}

.marta-consent a {
	color: var(--gold-light);
}

.marta-form__success {
	margin: 0;
	padding: 16px 18px;
	border-radius: 14px;
	background: rgba(194, 160, 85, .14);
	border: 1px solid rgba(227, 201, 138, .5);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--gold-light);
	line-height: 1.55;
}

.marta-form__note {
	margin: 0;
	font-size: 11.5px;
	color: rgba(244, 239, 230, .45);
}

.marta-form--newsletter .marta-form__form {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	flex-wrap: wrap;
}

.marta-form--newsletter .marta-field {
	flex: 1 1 220px;
}

/* ---------- Test gotowości ---------- */

.marta-quiz__title {
	font-family: var(--font-serif);
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 8px;
}

.marta-quiz__note {
	font-size: 14px;
	color: var(--muted-dark);
	margin: 0 0 20px;
}

.marta-quiz__q {
	padding: 16px 0;
	border-bottom: 1px solid var(--hair-dark);
}

.marta-quiz__q-text {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
}

.marta-quiz__q-num {
	color: var(--gold-dark);
	font-weight: 800;
}

.marta-quiz__opts {
	display: flex;
	gap: 10px;
}

.marta-quiz__btn {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 700;
	padding: .55rem 1.5rem;
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--text-dark);
	border: 1px solid rgba(33, 30, 25, .22);
	cursor: pointer;
	transition: border-color .25s ease, color .25s ease, background .25s ease;
}

.marta-quiz__btn:hover {
	border-color: var(--gold);
	color: var(--gold-dark);
}

.marta-quiz__btn.is-yes {
	background: var(--gold-grad);
	border-color: transparent;
	color: #171307;
}

.marta-quiz__btn.is-no {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--text-light);
}

.marta-quiz__result {
	margin-top: 22px;
	padding: 22px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .72);
	border: 1px solid var(--hair-dark);
}

.marta-quiz__result-title {
	font-family: var(--font-serif);
	font-size: 1.35rem;
	font-weight: 600;
	margin: 0 0 8px;
}

.marta-quiz__result-text {
	margin: 0 0 16px;
	font-size: 14.5px;
	color: var(--muted-dark);
}

.marta-quiz__result-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.marta-quiz__lead {
	font-size: 14px;
	font-weight: 600;
	color: var(--gold-dark);
}

.marta-quiz__reset {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--font-sans);
	font-size: 13px;
	color: rgba(33, 30, 25, .55);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ---------- Menu w stopce ---------- */

.footer-nav-list .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-nav-list .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--manrope, var(--font-sans));
	font-size: 14.5px;
	font-weight: 500;
	color: var(--muted-light);
	text-decoration: none;
	transition: color .25s ease;
}

.footer-nav-list .wp-block-navigation-item__content:hover {
	color: var(--gold-light);
}

/* ---------- Lista kontaktowa: ikony z projektu (SVG w tle pseudo-elementu) ---------- */

.contact-list li {
	position: relative;
	padding-left: 52px;
	min-height: 38px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.contact-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid rgba(227, 201, 138, .35);
	background-color: rgba(255, 255, 255, .05);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}

.contact-list li:nth-child(1)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3C98A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h4l2 5-2.5 1.5a11 11 0 005 5L16 12l5 2v4a2 2 0 01-2 2A16 16 0 014 5a2 2 0 012-2z'/%3E%3C/svg%3E");
}

.contact-list li:nth-child(2)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3C98A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a1.5 1.5 0 011.5 1.5v8a1.5 1.5 0 01-1.5 1.5h-9l-4.5 4V6.5A1.5 1.5 0 015 5z'/%3E%3C/svg%3E");
}

.contact-list li:nth-child(3)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3C98A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E");
}

.contact-list li:nth-child(4)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3C98A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.3-6.5-10a6.5 6.5 0 0113 0c0 4.7-6.5 10-6.5 10z'/%3E%3Ccircle cx='12' cy='11' r='2.4'/%3E%3C/svg%3E");
}

.contact-list strong {
	color: var(--text-light);
	font-weight: 700;
}

/* ---------- Formularz motywu w układzie .contact-form ---------- */

.marta-form--contact {
	width: 100%;
	min-width: 0;
	border-radius: 26px;
	background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
	border: 1px solid rgba(227, 201, 138, .3);
	padding: 34px;
}

.marta-form__title {
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 600;
	color: var(--text-light);
	margin: 0 0 22px;
}

/* ---------- Treść wpisu ---------- */

.post-content p {
	margin: 0 0 1.1em;
}

.post-content h2,
.post-content h3 {
	margin: 1.6em 0 .6em;
}

.post-content ul,
.post-content ol {
	margin: 0 0 1.1em 1.4em;
	padding: 0;
	list-style: disc;
}

.post-content blockquote {
	margin: 1.6em 0;
	padding-left: 1.5em;
	border-left: 3px solid var(--gold);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.55;
}

.post-content blockquote cite {
	display: block;
	margin-top: .8em;
	font-family: var(--font-sans);
	font-style: normal;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-dark);
}

.post-content a {
	color: var(--gold-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Blok galerii / obrazu ---------- */

.wp-block-post-featured-image img {
	border-radius: 18px;
}

/* ---------- Zdjęcia w slotach prototypu ----------

   Slot ma własne tło (gradient) i wypełnia go zdjęcie. W protokcipie obraz
   siedzi w <span> i pojawia się dopiero, gdy się wczyta (klasa .has-img).
   W Gutenbergu zdjęcie może być blokiem core/image albo core/post-featured-image
   (inna klasa figury), więc celujemy w dowolny <figure> w slocie i w sam
   <img> — inaczej obraz zostaje niewidoczny (opacity: 0) albo figury zapada
   do zera wysokości. */

.photo-slot > figure {
	position: absolute;
	inset: 0;
	margin: 0;
}

.photo-slot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
}

.photo-slot--portrait img {
	object-fit: contain;
	padding: 10%;
}

/* ---------- Logo witryny zamiast okrągłego "M" ---------- */

.brand-mark {
	width: auto;
	height: auto;
	display: block;
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.brand-mark .wp-block-site-logo,
.brand-mark .wp-block-site-logo__image {
	display: block;
	height: auto;
	max-height: 44px;
	width: auto;
}

.brand--footer .brand-mark .wp-block-site-logo__image {
	max-height: 56px;
}


/* ---------- Kolor nawigacji: WordPress wymusza "color: inherit" ----------

   Reguła rdzenia .wp-block-navigation .wp-block-navigation-item__content
   .wp-block-navigation-item__content { color: inherit } ma wyższą
   specyficzność niż klasy z projektu, więc kolor ustawiamy na kontenerze
   (dziedziczenie), a linkom przypisujemy inherit z mocniejszym selektorem. */

.nav {
	color: rgba(244, 239, 230, .82);
}

.nav a.wp-block-navigation-item__content {
	color: inherit;
}

.nav a.wp-block-navigation-item__content:hover,
.nav a.wp-block-navigation-item__content[aria-current="page"] {
	color: var(--gold-light);
}

.footer-nav-list {
	color: var(--muted-light);
}

.footer-nav-list a.wp-block-navigation-item__content {
	color: inherit;
}

.footer-nav-list a.wp-block-navigation-item__content:hover {
	color: var(--gold-light);
}

/* ---------- Pasek administratora nie może zasłaniać nagłówka ---------- */

body.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

/* ---------- Sticky CTA: zwarty, pulsujący, wiodący do kalendarza ----------

   W projekcie .sticky-cta to pojedynczy pigułkowy link. W Gutenbergu link
   jest blokiem akapitu, więc klasa .btn na akapicie nakładała drugie
   wypełnienie (przycisk wychodził 276×78 px zamiast ~150×42). Tutaj
   .sticky-cta sam odpowiada za wygląd, a akapit z linkiem jest w środku. */

.sticky-cta {
	right: 20px;
	bottom: 20px;
	gap: 8px;
	padding: .58rem 1rem;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .01em;
	box-shadow: 0 8px 22px rgba(194, 160, 85, .32);
	transform: translateY(16px) scale(.97);
}

.sticky-cta p {
	margin: 0;
}

.sticky-cta a {
	color: inherit;
	text-decoration: none;
}

/* Ikona telefonu z projektu (SVG w tle) — bez SVG inline w treści. */
.sticky-cta::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171307' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h4l2 5-2.5 1.5a11 11 0 005 5L16 12l5 2v4a2 2 0 01-2 2A16 16 0 014 5a2 2 0 012-2z'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
}

/* Delikatna poświata — pulsująca obwódka, tylko CSS, bez animacji JS. */
.sticky-cta.visible {
	transform: none;
	animation: marta-cta-glow 3.4s ease-in-out infinite;
}

@keyframes marta-cta-glow {
	0%, 100% {
		box-shadow: 0 8px 22px rgba(194, 160, 85, .32), 0 0 0 0 rgba(194, 160, 85, .40);
	}
	50% {
		box-shadow: 0 8px 22px rgba(194, 160, 85, .32), 0 0 0 9px rgba(194, 160, 85, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sticky-cta.visible {
		animation: none;
	}
}

/* ---------- Miejsce na kalendarz (strona „Umów rozmowę") ---------- */

.marta-calendar-slot {
	padding: 34px;
	text-align: center;
}

.marta-calendar-slot__hint {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 14.5px;
	color: var(--muted-light);
}

/* ---------- FAQ: odpowiedź w bloku core/details ----------

   Blok details trzyma odpowiedź jako treść, więc nie da się dodać do niej
   klasy .faq-a z projektu. Reguła poniżej odtwarza jej wygląd. */

.faq details > p {
	padding: 0 26px 22px;
	font-size: 14.5px;
	color: var(--muted-light);
	line-height: 1.7;
	max-width: 760px;
}

/* ---------- Przycisk w ramce rozmowy ----------

   W projekcie przycisk w .talk-box jest linkiem <a>, więc .talk-box p go nie
   obejmuje. W Gutenbergu jest akapitem, a .talk-box p (specyficzność 0,1,1)
   wygrywa z .btn--gold (0,1,0) i kolor tekstu zostaje jasny. */

.talk-box .btn {
	color: #171307;
}

/* ---------- Karty kroków: efekt hover jak karty w hero ----------

   .choice-card na stronie głównej unosi się i rozświetla przy najechaniu —
   ten sam efekt na kartach procesu. */

.step-item {
	transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

.step-item:hover {
	transform: translateY(-6px);
	border-color: rgba(227, 201, 138, .6);
	background: rgba(255, 255, 255, .08);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
}

/* ---------- Karty z animacją wejścia: wejście i hover bez kolizji ----------

   Animacja wejścia (.reveal) animuje `transform`, a ten sam właściwość
   chciałaby użyć najechanie na kartę (unoszenie). Wejście przenosimy na
   `translate` — to osobna właściwość — a hover zostaje na `transform`.
   Bez tego `.reveal.in-view { transform: none }` wygrywało z `:hover` i karta
   w ogóle się nie unosiła. */

html.js .reveal {
	transform: none;
	translate: 0 22px;
	transition: opacity .8s cubic-bezier(.16, 1, .3, 1), translate .8s cubic-bezier(.16, 1, .3, 1);
}

html.js .reveal.in-view {
	transform: none;
	translate: none;
}

html.js .choice-card.reveal,
html.js .step-item.reveal,
html.js .value-card.reveal {
	transition-property: opacity, translate, transform, border-color, background-color, background-image, box-shadow;
	transition-duration: .8s, .8s, .35s, .35s, .35s, .35s, .35s;
	transition-timing-function: cubic-bezier(.16, 1, .3, 1), cubic-bezier(.16, 1, .3, 1), ease, ease, ease, ease, ease;
}

html.js .choice-card.reveal.in-view:hover,
html.js .step-item.reveal.in-view:hover,
html.js .value-card.reveal.in-view:hover {
	transform: translateY(-6px);
}

/* ==========================================================================
   ADAPTACJE STRONY „KUPUJĄCY"
   Elementy prototypu, których nie da się zbudować blokami Gutenberga
   (ikony SVG, znaczniki w li, strzałka, dt/dd), odtworzone przez CSS.
   ========================================================================== */

/* ---------- Przycisk z drugą linią (etykieta + mikrotekst) ---------- */

.btn--with-note {
	flex-direction: column;
	gap: 2px;
}

.btn--with-note::after {
	content: "20 min · bez zobowiązań";
	display: block;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .72;
	line-height: 1.2;
}

/* ---------- Tarcza w nagłówku tabeli porównawczej ---------- */

.compare-col--partner {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--gold-dark) !important;
}

.compare-col--partner::before {
	content: "";
	flex: none;
	width: 17px;
	height: 17px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 4v5c0 4.4-3 7.4-7 9-4-1.6-7-4.6-7-9V7z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 4v5c0 4.4-3 7.4-7 9-4-1.6-7-4.6-7-9V7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Ikony w kartach „Zespół ekspertów" ---------- */


.services-grid .service:nth-child(1) > .wp-block-heading::before { --marta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E"); }
.services-grid .service:nth-child(2) > .wp-block-heading::before { --marta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3Cpath d='M8.5 11.5l1.8 1.8 3.2-3.8'/%3E%3C/svg%3E"); }
.services-grid .service:nth-child(3) > .wp-block-heading::before { --marta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='17' rx='2'/%3E%3Cpath d='M9 4h6v3H9z'/%3E%3Cpath d='M9.5 13.5l2 2 3.5-4'/%3E%3C/svg%3E"); }
.services-grid .service:nth-child(4) > .wp-block-heading::before { --marta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9 15l6-6'/%3E%3Ccircle cx='9.2' cy='9.2' r='1'/%3E%3Ccircle cx='14.8' cy='14.8' r='1'/%3E%3C/svg%3E"); }
.services-grid .service:nth-child(5) > .wp-block-heading::before { --marta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E"); }
.services-grid .service:nth-child(6) > .wp-block-heading::before { --marta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a1.5 1.5 0 011.5 1.5v8a1.5 1.5 0 01-1.5 1.5h-9l-4.5 4V6.5A1.5 1.5 0 015 5z'/%3E%3Cpath d='M8.5 10h7'/%3E%3C/svg%3E"); }
.services-grid .service:nth-child(7) > .wp-block-heading::before { --marta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6.5 9.5V20h11V9.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); }
.services-grid .service:nth-child(8) > .wp-block-heading::before { --marta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='12' r='3.5'/%3E%3Cpath d='M11.5 12H21'/%3E%3Cpath d='M17.5 12v3.5M20 12v2.5'/%3E%3C/svg%3E"); }

/* ---------- Znacznik „×" na liście „Z kim nie pracuję" ----------

   W prototypie element <strong> leży w divie wewnątrz li. We w Gutenbergu
   tekst jest bezpośrednio w li — a w kontenerze flex każdy element inline
   (w tym <strong>) staje się osobnym elementem flex i rozpycha tekst.
   Dlatego li nie jest flexem: znacznik jest absolutny, a tekst płynie
   w polu o tej samej szerokości co w prototypie. */

.fit-list li {
	display: block;
	position: relative;
	padding-left: 40px;
}

.fit-list li::before {
	content: "×";
	position: absolute;
	left: 0;
	top: 1px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 15px;
	font-weight: 600;
	color: var(--gold-dark);
	border: 1px solid rgba(154, 123, 60, .45);
	line-height: 1;
}


/* ---------- Opis przypadku (dt/dd w prototypie) ---------- */

.case-card .case-dt {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold-dark);
	margin-top: 12px;
}

.case-card .case-dd {
	font-size: 14px;
	color: var(--muted-dark);
	line-height: 1.55;
	margin-top: 3px;
}

/* ---------- Metryki oferty (w prototypie <strong> i <span> wewnątrz .offer-meta) ---------- */

.offer-meta__strong {
	font-size: 14px;
	font-weight: 800;
	color: var(--text-dark);
	line-height: 1.45;
}

.offer-meta__market {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-dark);
}

/* ---------- Tabela porównawcza: nagłówek wiersza ma mniejszy wersaliki ---------- */

.compare-head .compare-crit {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted-dark);
	padding: 20px 28px;
}

/* ---------- Podpis w karcie hero (prototyp: margin 4px 6px 12px) ---------- */

.hero-card-cap {
	margin: 4px 6px 12px;
}

/* ---------- Specyficzność: layout Gutenberga zeruje marginesy dzieci ----------

   `:root :where(.is-layout-flow) > *` ma tę samą specyficzność co klasa
   z projektu, więc marginesy znikają. Dwie reguły poniżej idą wyżej. */

.hero-card .hero-card-cap {
	margin: 4px 6px 12px;
}

/* Numer kroku: .step-card p ma wyższą specyficzność niż .step-num. */

.step-card .step-num {
	display: block;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	margin: 0 0 16px;
	background: var(--gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Marginesy nagłówków kart (layout Gutenberga zeruje marginesy dzieci) ---------- */

.case-card-body > .wp-block-heading {
	margin: 14px 0 16px;
}

.case-card-body > .case-dd:last-of-type {
	margin-bottom: 20px;
}

.costs-block > .wp-block-heading {
	margin-bottom: 20px;
}

/* ---------- Przycisk kalkulatora kosztów: odstęp nad nim ---------- */

.costs-block .costs-cta {
	margin-top: 30px;
}

/* ---------- Zdjęcie w treści wpisu — zaokrąglone narożniki ----------

   W projekcie slot .photo-slot--case jest kwadratowy (border-radius: 0),
   ale w artykule zdjęcie wygląda lepiej z narożnikami jak obraz
   wyróżniający (var(--radius) = 20 px). */

.post-figure .photo-slot {
	border-radius: var(--radius);
}

/* ==========================================================================
   LISTY W TREŚCI WPISU — jedna kropka zamiast dwóch
   ==========================================================================

   WordPress dokłada do każdej listy własny znacznik
   (ul.wp-block-list { list-style-type: disc }), a w projekcie kropkę
   rysuje pseudoelement .post-list li::before. Widać więc dwie.

   Reguła celuje w klasę listy z projektu (.post-list), więc lista wklejona
   przez klientkę w treść wpisu zostaje zwykłą listą WordPressa, z jej
   własnym znacznikiem. Struktura bloków (core/list + core/list-item)
   pozostaje standardowa. */

.post-content ul.post-list {
	list-style-type: none;
}

/* ==========================================================================
   TABELA PORÓWNAWCZA — nagłówek i mobile
   ========================================================================== */

/* W projekcie .compare-head > span dostaje padding 20px 28px — bez niego
   podpisy kolumn przyklejają się do linii kolumny. */

.compare-head > .compare-col {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted-dark);
	padding: 20px 28px;
}

/* Tabela na telefonie: projekt ma już własne wersje mobilne (każde
   kryterium jako osobna karta, podpis kolumny w .compare-cell::before),
   ale .compare-cell zostaje kontenerem flex w poziomie — podpis i odpowiedź
   lądują obok siebie. Na telefonie komórka ma być blokiem, żeby podpis
   stanął nad odpowiedzią. */

@media (max-width: 940px) {
	.compare-cell {
		display: block;
	}

	/* Na telefonie każde kryterium jest osobną kartą, więc tło tabeli
	   (białe, z ramką i cieniem) nie może otaczać całości — między kartami
	   widać byłoby biały pas. Ramka zostaje przy kartach, tło przezroczyste. */

	.compare {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		overflow: visible;
	}

	.compare-row {
		background: #FFFFFF;
	}
}

/* ==========================================================================
   KARTY EKSPERTÓW — ikona: kolor i miejsce jak w projekcie
   ========================================================================== */

.services-grid .service {
	gap: 0;
}

/* Ikona eksperta siedzi na ::before nagłówka — ::before kafla czarnego zajmują
   własne rogi dekoracyjne, a ::before elementu flexowego nie da się ustawić
   w bezpieczny sposób. */

.services-grid .service > .wp-block-heading {
	margin: 0 0 6px;
}

.services-grid .service > .wp-block-heading::before {
	content: "";
	display: block;
	width: 34px;
	height: 34px;
	margin: 2px 0 14px;
	background-color: var(--gold-dark);
	-webkit-mask: var(--marta-icon) center / contain no-repeat;
	mask: var(--marta-icon) center / contain no-repeat;
}

.services-grid .tile--black .service > .wp-block-heading::before {
	background-color: var(--gold-light);
}

/* ==========================================================================
   PRZYCISKI NA TELEFONIE — tekst może się zawijać
   ========================================================================== */

@media (max-width: 600px) {
	.btn {
		white-space: normal;
		line-height: 1.35;
		text-align: center;
	}

	.btn--lg {
		padding: .85em 1.4em;
	}

	.btn--sm {
		padding: .7em 1.2em;
	}
}

/* ==========================================================================
   WPIS BLOGA — adaptacje dla danych z WordPressa
   ========================================================================== */

.post-breadcrumb p {
	margin: 0;
}

.post-breadcrumb__cat {
	font-style: normal;
	color: var(--gold-light);
}

.post-cat {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.post-cat p {
	margin: 0;
}

.post-meta-name {
	font-size: 15px;
	font-weight: 800;
	color: var(--text-light);
}

.post-meta-line {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: rgba(244, 239, 230, .6);
}

.post-meta-date {
	font-size: 13px;
	font-weight: 600;
	color: rgba(244, 239, 230, .6);
}

.post-avatar {
	width: 48px;
	height: 48px;
	flex: none;
	padding: 6px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid rgba(227, 201, 138, .35);
	background: rgba(255, 255, 255, .05);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.post-avatar img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.post-featured-caption {
	margin-top: 14px;
	font-size: 13px;
	color: var(--muted-dark);
	text-align: center;
}

.post-share p {
	margin: 0;
}

.post-share-links {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.post-share-links a {
	display: inline-flex;
	align-items: center;
	padding: .5em 1.1em;
	border-radius: 999px;
	border: 1px solid rgba(33, 30, 25, .22);
	font-size: 13px;
	font-weight: 700;
	color: var(--text-dark);
	text-decoration: none;
}

.post-share-links a:hover {
	border-color: var(--gold);
	color: var(--gold-dark);
}

.author-bio p {
	margin: 0 0 8px;
}

.author-name {
	font-family: var(--font-serif);
	font-size: 19px;
	font-weight: 600;
	color: var(--text-dark);
}

.author-name span {
	font-size: 13px;
	font-weight: 600;
	color: var(--muted-dark);
}

.author-link a {
	font-size: 14px;
	font-weight: 800;
	color: var(--gold-dark);
	text-decoration: none;
	border-bottom: 1.5px solid rgba(154, 123, 60, .4);
}

.post-cta-title {
	color: var(--text-light);
}

.post-cta-text {
	margin: 16px 0 0;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--muted-light);
}

.rc-meta {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

.rc-meta p {
	margin: 0;
}

.rc-time {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold-dark);
}

.related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

.related-card .photo-slot {
	margin: 0;
}

.rc-title {
	font-family: var(--font-serif);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--text-dark);
	margin: 10px 0 14px;
}

.rc-title a {
	color: inherit;
	text-decoration: none;
}

.rc-title a:hover {
	color: var(--gold-dark);
}

@media (max-width: 900px) {
	.related-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Meta wpisu: imię, data i czas czytania w jednej linii ---------- */

.post-meta-line {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.post-meta-line p {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: rgba(244, 239, 230, .6);
}

.post-meta-time {
	font-size: 13px;
	font-weight: 600;
	color: rgba(244, 239, 230, .6);
}

/* ---------- Obraz wyróżniający wchodzi na ciemne tło nagłówka wpisu ----------

   Jak w projekcie: ujemny margines podnosi obraz nad dół sekcji, a
   position + z-index kładą go nad ciemnym tłem. .post-wrap ma position:relative
   i display:flow-root, żeby margines nie zniknął przez margin-collapse. */

/* Selektor musi bije `:root :where(.is-layout-flow) > *` (ta sama specyficzność
   0,1,0), który zeruje marginesy góry — stąd `.post-wrap .post-featured`. */
.post-wrap .post-featured {
	position: relative;
	z-index: 5;
	margin-block-start: -100px;
	margin-inline: auto;
	margin-block-end: 64px;
	max-width: var(--container);
	text-align: center;
}

.post-featured .photo-slot {
	border-radius: var(--radius);
	box-shadow: 0 26px 68px rgba(15, 12, 6, .38), 0 6px 20px rgba(15, 12, 6, .2);
}

/* ---------- Wyniki case study: liczby i podpisy bez marginesu akapitu ----------

   W projekcie to <span>, a w Gutenbergu akapit — .post-content p daje mu
   własny margines dolny, który psuje rytm kafelka. */

.post-results .pr-num,
.post-results .pr-label {
	margin-bottom: 0;
}

.related-empty {
	margin: 44px 0 0;
	font-size: 15px;
	color: var(--muted-dark);
}

/* ---------- Cytat w artykule: motyw ma własne style bloku core/quote ---------- */

.post-quote p {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.55;
	color: var(--text-dark);
	margin: 0 0 10px;
}

.post-quote cite {
	font-family: var(--font-sans);
	font-style: normal;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-dark);
}

/* ---------- Podpis zdjęcia w treści ---------- */

.post-figure .post-figure__caption {
	margin-top: 12px;
	font-size: 13px;
	color: var(--muted-dark);
}

/* ==========================================================================
   SEKCJA „UKRYTE KOSZTY" — kolumna ze zdjęciem
   ==========================================================================

   W projekcie blok kosztów jest wąski (max-width: 780px), więc w kontenerze
   zostaje pusta kolumna po prawej. Zdjęcie ją wypełnia: tekst w lewej
   kolumnie, fotografia w prawej. */

.costs-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	gap: 56px;
	align-items: start;
	max-width: none;
}

@media (max-width: 900px) {
	.costs-block {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ==========================================================================
   PRZYCISKI — WordPress renderuje je jako akapit
   ==========================================================================

   W projekcie .btn jest <button> albo <a>, więc reguły typograficzne
   kontenerów (.costs-block p, .post-cta p) go nie obejmują. W WordPressie
   przycisk to akapit i te reguły biją .btn — przycisk rośnie, bo padding
   jest liczony w em. Podwójna klasa podnosi specyficzność ponad regułę
   typograficzną kontenera. */

.btn.btn {
	font-size: 15px;
	line-height: normal;
}

/* Kolor: tak samo — .costs-block p / .post-cta p ustawiają kolor akapitu
   (jasny) i przycisk na złotym tle staje się nieczytelny. */

.btn.btn--gold {
	color: #171307;
}

.btn.btn--ghost,
.btn.btn--dark {
	color: var(--text-light);
}

.btn.btn--sm,
.btn.costs-cta {
	font-size: 13.5px;
}

.btn.btn-top {
	line-height: 1.2;
}

/* ==========================================================================
   DODATKI 4 — STRONA BLOGA: lista wpisów, filtr kategorii, paginacja
   Szablony: home.html (posts page), archive.html (archiwa kategorii)
   ========================================================================== */

/* Hero strony listującej — jak .post-hero wpisu, bez dużego dołka
   (dołek .post-hero jest miejscem, w które wchodzi obraz wpisu — tutaj go nie ma) */
.blog-hero { padding-bottom: 104px; }

/* Filtr kategorii ([marta_blog_nav]) */
.blog-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 44px;
}

.blog-cats a {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	padding: .72em 1.35em;
	border: 1px solid var(--hair-dark);
	border-radius: 999px;
	color: var(--muted-dark);
	transition: color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.blog-cats a:hover {
	color: var(--gold-dark);
	border-color: var(--gold);
	transform: translateY(-2px);
}

.blog-cats a.is-active {
	background: var(--gold-grad);
	border-color: transparent;
	color: #171307;
	box-shadow: 0 12px 26px rgba(194, 160, 85, .35);
}

.blog-cats a.is-active:hover {
	color: #171307;
	transform: translateY(-2px);
}

/* Siatka kart wpisów (.post-card = post-template w szablonie);
   tylko w sekcji listingu — index/search mają własny, prosty układ */
.blog-listing .post-card {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-listing .post-card > li { margin: 0; }

.blog-listing .post-card .related-card { height: 100%; }

/* .rc-title ma marginalny styl — w karcie siedzi h2 w .section,
   a .section h2 (0,1,1) wygrywałby z .rc-title (0,1,0) */
.blog-listing .rc-title { margin: 10px 0 14px; }

.blog-listing .post-card .rc-meta a { color: inherit; text-decoration: none; }

.rc-excerpt p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--muted-dark);
}

.rc-date {
	margin-top: auto;
	padding-top: 16px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted-dark);
}

.rc-date::before {
	content: "";
	display: block;
	width: 34px;
	height: 1px;
	background: rgba(154, 123, 60, .5);
	margin-bottom: 12px;
}

/* Paginacja */
.marta-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 52px;
}

.marta-pagination a,
.marta-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 800;
	border: 1px solid var(--hair-dark);
	border-radius: 14px;
	color: var(--text-dark);
	background: #fff;
	transition: color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.marta-pagination a:hover {
	border-color: var(--gold);
	color: var(--gold-dark);
	transform: translateY(-2px);
}

.marta-pagination .page-numbers.current {
	background: var(--gold-grad);
	border-color: transparent;
	color: #171307;
	box-shadow: 0 12px 26px rgba(194, 160, 85, .35);
}

.marta-pagination .page-numbers.dots {
	border: 0;
	background: none;
	box-shadow: none;
	min-width: 0;
	padding: 0;
}

@media (max-width: 940px) {
	.blog-listing .post-card { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.blog-listing .post-card { grid-template-columns: 1fr; }
	.blog-hero { padding-bottom: 80px; }
	.blog-cats { margin-bottom: 32px; }
	.marta-pagination { margin-top: 40px; }
}