/* COTYNATO — Biuro Rachunkowe — stylesheet
   Design system: Ink / Cream / Gold / Gold Dark / Ink Soft / Surface White / Border / Label Accent
   Type: Playfair Display (headings) + Inter (UI/body) */

:root {
  --ink: #252525;          /* 01 · text, headings, dark surfaces */
  --cream: #EFEFED;        /* 02 · page background */
  --gold: #F1E0B3;         /* 03 · accents, buttons */
  --gold-dark: #D9BE7A;    /* 04 · icon gradient end, hover accents */
  --ink-soft: #7A7A77;     /* 05 · secondary text */
  --white: #FFFFFF;        /* 06 · card background */
  --border: #E2E1DC;       /* 07 · card borders, dividers */
  --label-accent: #A18545; /* 08 · category labels, button hover state */

  --radius-btn: 10px;
  --radius-card: 16px;
  --radius-lg: 24px;
  --radius-photo: 22px;
  --gold-gradient: linear-gradient(135deg, var(--gold) 5%, var(--gold-dark) 100%);
  --shadow: 0 10px 30px rgba(37, 37, 37, 0.06);
  --max-width: 1414px;

  --fs-h1: 42px;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-body-lg: 18px;
  --fs-caption: 13px;
  --fs-button: 14px;

  --ease-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 44px;
}

h1, h2 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--ink);
}
h3 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--ink);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 16px; color: var(--ink-soft); font-size: var(--fs-body); }
p.lead { font-size: var(--fs-body-lg); }
.caption { font-size: var(--fs-caption); }

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--label-accent);
  margin-bottom: 10px;
}

/* Buttons — radius 10px, padding 14/28px, Inter 500 14px.
   Hover per Figma Components/Button: gold -> label-accent bg, white text
   (Smart Animate "Gentle" in Figma reads ~1s; eased down to ~0.3s here so it
   feels snappy in a real browser instead of Figma's slow preview). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--fs-button);
  cursor: pointer;
  border: 1.5px solid transparent;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0);
  position: relative;
  z-index: 0;
  isolation: isolate;
  transition: color 0.3s var(--ease-hover), border-color 0.3s var(--ease-hover), box-shadow 0.3s var(--ease-hover), transform 0.15s var(--ease-hover);
}
.btn:active { transform: translateY(1px); }

/* A solid color can't smoothly cross-fade into a gradient via `background` transitions —
   the browser just snaps ("перескакує"). Fix: the gradient lives on a full-size ::before
   layer that fades in via opacity (which DOES animate smoothly), sitting behind the label. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  background: var(--gold-gradient);
  transition: opacity 0.3s var(--ease-hover);
}
.btn:hover::before { opacity: 1; }

/* Primary — gold, default flat / hover cross-fades to the diagonal gold gradient + drop shadow. Text stays ink. */
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }

/* Secondary (hero "Nasze usługi") — cream fill + ink border by default,
   border fades out and the gradient overlay fades in + drop shadow on hover (no outline on hover). */
.btn-outline { background: var(--cream); border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { border-color: transparent; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }

/* Exact Figma button sizes */
.btn-kontakt { width: 104px; height: 43px; padding: 0; justify-content: center; }
.btn-nasze-uslugi { width: 136px; height: 43px; padding: 0; justify-content: center; }

/* Header */
.site-header {
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 24px;
}
.logo {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 2px;
}

nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
}
nav.main-nav a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: var(--radius-btn);
  font-size: var(--fs-button);
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  transition: background-color 0.3s var(--ease-hover), box-shadow 0.3s var(--ease-hover);
}
nav.main-nav a.active {
  background: var(--gold);
}
nav.main-nav a:hover {
  background: var(--gold);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.header-actions { display: flex; align-items: center; gap: 16px; }
.header-phone {
  font-weight: 600;
  font-size: var(--fs-button);
  color: var(--ink);
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
}

/* Hero */
.hero {
  background: var(--white);
  padding: 72px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.hero h1 { max-width: 480px; }
.hero p.lead { max-width: 440px; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-image {
  width: 776px;
  height: 335px;
  max-width: 100%;
  border-radius: var(--radius-photo);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Decorative floating background — pure CSS, no JS.
   Slow-drifting soft arcs behind the hero content, contained + low-opacity so they
   never fight the text. Respects prefers-reduced-motion. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-bg svg {
  position: absolute;
  width: 140%;
  height: 140%;
  top: -20%;
  left: -20%;
}
.hero-bg path {
  fill: none;
  stroke: var(--gold-dark);
  stroke-width: 1;
  opacity: 0.35;
}
.hero-bg .p1 { animation: drift-a 34s ease-in-out infinite; }
.hero-bg .p2 { animation: drift-b 42s ease-in-out infinite; opacity: 0.22; }
.hero-bg .p3 { animation: drift-a 50s ease-in-out infinite reverse; opacity: 0.18; }

@keyframes drift-a {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(1.5%, -1%) rotate(1.2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes drift-b {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-1.2%, 1.4%) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg .p1, .hero-bg .p2, .hero-bg .p3 { animation: none; }
}

/* Sections */
section { padding: 72px 0; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.section-alt { background: var(--white); }
.cta-section { padding-top: 0; }

/* Icon badge — gold gradient square used across "Dlaczego My" and "Oferta" cards */
.icon-badge {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  flex: none;
}

/* Exact-asset icons (Figma-supplied SVG files, used verbatim) */
.icon-img { display: block; flex: none; }
.value-card .icon-img { width: 42px; height: 42px; margin-bottom: 14px; }
.service-card .icon-img { width: 71px; height: 71px; margin: 0 auto 14px; }

/* Why-us grid */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.value-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 26px 22px;
}
.value-card .icon-badge { margin-bottom: 14px; }
.value-card p { margin: 0; font-size: 14px; }

/* Oferta usług cards */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-photo);
  overflow: hidden;
  text-align: center;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.3s var(--ease-hover), transform 0.3s var(--ease-hover);
}
.service-card:hover {
  box-shadow: 0 20px 40px rgba(37, 37, 37, 0.18);
}
/* A fixed min-height (matching the tallest card's text block) keeps all
   three text blocks the same height, so every photo starts at the exact
   same pixel row below it — earlier this used margin-top:auto to push a
   shorter card's photo down instead, but the leftover gap that created
   above the photo was exactly where the stray seam line kept appearing. */
.service-card .service-body { padding: 28px 24px 20px; flex: 0 0 auto; display: flex; flex-direction: column; min-height: 239px; }
.service-card .icon-badge { margin: 0 auto 14px; }
.service-card p { font-size: 14px; margin: 0; }

/* margin-top: auto pushes the photo to the bottom of the card, so photos
   line up at the same height across cards even when one card's text is
   shorter than the others. */
.service-card .service-photo { position: relative; aspect-ratio: 5/4; overflow: hidden; }
.service-card .service-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-card .service-photo::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(to bottom, var(--white), transparent);
  z-index: 1;
  pointer-events: none;
}

/* CTA band — exact Figma spec: 1326x256, top stroke F1E0B3, title 32px, subtitle 16px */
.cta-band {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-lg);
  border-top: 2px solid var(--gold);
  width: 100%;
  max-width: 1326px;
  height: 256px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cta-band h2 { color: #fff; font-size: 32px; margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,0.72); font-size: 16px; max-width: 560px; margin: 0 auto 28px; }

/* Footer */
footer.site-footer {
  background: var(--gold);
  color: var(--ink);
  padding: 48px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
.footer-grid h4 { color: var(--ink); font-size: var(--fs-button); margin-bottom: 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 10px; font-size: var(--fs-caption); }
.footer-grid a { transition: color 0.2s var(--ease-hover); }
.footer-grid a:hover { color: var(--label-accent); }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-logo-icon { width: 49px; height: 49px; flex: none; border-radius: 50%; }
.footer-brand-text { display: flex; align-items: baseline; gap: 12px; }
.footer-brand .logo { margin: 0; }
.footer-sep { width: 1px; height: 18px; background: rgba(37,37,37,0.25); flex: none; align-self: center; }
.footer-tagline { font-family: "Abhaya Libre", serif; font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(37,37,37,0.75); margin: 0; position: relative; top: -3.75px; }
.footer-bottom {
  border-top: 1px solid rgba(37,37,37,0.15);
  padding-top: 20px;
  font-size: var(--fs-caption);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* Page hero (inner pages) */
.page-hero {
  background: var(--ink);
  color: #fff;
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
.page-hero .wrap { position: relative; z-index: 1; text-align: center; }
.page-hero h1 { color: #fff; margin: 8px 0 0; font-size: clamp(1.8rem, 3.4vw, var(--fs-h1)); }
.breadcrumb { font-size: var(--fs-caption); color: rgba(255,255,255,0.55); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .current { color: rgba(255,255,255,0.85); }

.placeholder-note {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 24px;
  text-align: center;
  color: var(--ink-soft);
}

/* Kontakt page */
.contact-section { padding: 55px 0 80px; }
.contact-heading {
  text-align: center;
  margin: 0 0 70px;
}
.contact-grid {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}
.contact-left {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.contact-card {
  width: 560px;
  height: 510px;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 48px;
}
.contact-card h3 { color: #fff; font-family: "Playfair Display", serif; font-weight: 700; font-size: 24px; margin-bottom: 20px; }
.contact-card hr { border: none; border-top: 1px solid rgba(255,255,255,0.15); margin: 0 0 28px; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 26px; }
.contact-list li:last-child { margin-bottom: 0; }
.contact-icon { width: 32px; height: 32px; flex: none; }
.contact-list strong { display: block; font-size: 16px; font-weight: 600; color: var(--gold); margin-bottom: 4px; }
.contact-list span { display: block; font-size: 16px; color: rgba(255,255,255,0.85); }
.contact-list a { color: rgba(255,255,255,0.85); transition: color 0.2s var(--ease-hover); }
.contact-list a:hover { color: var(--gold); }
.contact-image {
  width: 689px;
  height: 510px;
  max-width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.contact-image img { width: 100%; height: 100%; object-fit: cover; }
.contact-channels {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.btn-channel { width: 130px; height: 50px; padding: 0; justify-content: center; background: var(--gold-gradient); }

/* ===== Kadry i Płace ===== */
.kadry-content { background: #EFEFED; padding: 64px 0 64px; }
.kadry-intro {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 1326px;
  margin: 0 0 80px;
}
.kadry-grid-row {
  display: flex;
  gap: 50px;
  align-items: flex-start;
  justify-content: center;
  width: 1334px;
  max-width: 100%;
  margin: 0 auto;
}
.kadry-left-col {
  display: flex;
  flex-direction: column;
  width: 877px;
  height: 374px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.kadry-offer-title {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--ink);
  margin: 0 0 18px;
}
.why-us-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.why-us-card {
  background: var(--white);
  border: 1.3px solid var(--gold);
  border-radius: 16px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.05);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 425px;
  height: 155px;
  box-sizing: border-box;
}
.why-us-icon { width: 36px; height: 36px; }
.why-us-card h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; }
.why-us-card p { font-size: 13px; line-height: 1.4; color: var(--ink); margin: 0; }

.sidebar-card {
  background: #2f2f2f;
  border-radius: 20px;
  width: 417px;
  height: 376px;
  flex-shrink: 0;
  padding: 20px 32px 20px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  box-sizing: border-box;
}
.sidebar-card p { margin: 0; }
.sidebar-card h3 { font-size: 20px; font-weight: 600; color: var(--white); margin: 0; }
.sidebar-card > p { font-size: 16px; line-height: 1.6; color: #f5f5f5; }
.sidebar-contact-info { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.sidebar-contact-info a { color: var(--white); font-weight: 700; text-decoration: none; }
.sidebar-contact-info a:hover { text-decoration: underline; }
.sidebar-contact-info .hours { color: #f5f5f5; }
.sidebar-btn {
  background: var(--gold);
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  border-radius: 10px;
  width: 100%;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s ease;
}
.sidebar-btn:hover { background: var(--gold-dark); }

.cennik-section { background: var(--white); padding: 40px 0 70px; }
.cennik-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 47px; }
.cennik-head h2 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 30px;
  color: var(--ink);
  margin: 0;
}
.cennik-bar { display: block; width: 48px; height: 3px; border-radius: 2px; background: var(--gold-dark); }

.masonry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.masonry-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  flex: 1 0 0;
  min-width: 0;
}
.category-card {
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  overflow: hidden;
}
.cat-header {
  background: #2f2f2f;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}
.cat-icon { width: 30px; height: 30px; flex-shrink: 0; }
.cat-header h3 {
  flex: 1 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  margin: 0;
}
.cat-count {
  background: rgba(255,255,255,0.12);
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 9px;
  flex-shrink: 0;
}
.item-list { list-style: none; margin: 0; padding: 0; }
.item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
}
.item-row:nth-child(even) { background: #f8f8f7; }
.item-row::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-dark);
  flex-shrink: 0;
}
.item-text { flex: 1 0 0; min-width: 0; font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}
.price-row .price {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}
.price-row .unit { font-size: 15px; color: var(--ink-soft); white-space: nowrap; }
/* A couple of prices carry an extra qualifier (e.g. "1 korygowany miesiąc")
   that made the unit text too long to sit on one line next to the price on
   narrow screens. Stacking it as a smaller line in parentheses under
   "125 zł brutto" keeps the main price readable and still fits anywhere. */
.price-row-stacked { flex-direction: column; align-items: flex-end; gap: 2px; white-space: normal; }
.price-line { display: flex; align-items: baseline; gap: 6px; }
.price-extra { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.cennik-back-row { margin-top: 40px; }
.btn-back { background: #F1E0B3; border-color: #252525; flex-shrink: 0; }

/* ===== Księga Przychodów i Rozchodów (KPiR) ===== */
.kpir-content { padding: 64px 0; }
.kpir-grid-row {
  display: flex;
  gap: 50px;
  align-items: flex-start;
  justify-content: center;
  width: 1334px;
  max-width: 100%;
  margin: 0 auto;
}
.kpir-left-col { width: 784px; flex-shrink: 0; }
.kpir-intro { font-size: 18px; line-height: 1.65; color: var(--ink); margin: 0 0 60px; }
.kpir-intro strong { font-weight: 600; }
.kpir-includes-title {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 15px;
}
.checklist { display: flex; gap: 30px; }
.checklist-col { display: flex; flex-direction: column; flex: 1 0 0; min-width: 0; }
.checklist-paired { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; row-gap: 0; align-items: stretch; }
.checklist-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; }
.checklist-col .checklist-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.checklist-paired .checklist-item:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--border); }
/* 7-item variant (4+3 split, odd item dangles alone in the last row): only the first two rows get a divider. */
.checklist-paired-7 .checklist-item { border-bottom: none; }
.checklist-paired-7 .checklist-item:nth-child(-n+4) { border-bottom: 1px solid var(--border); }
.checklist-item .check-badge { width: 24px; height: 24px; flex-shrink: 0; }
.checklist-item p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.kpir-sidebar-card { height: 336px; }

/* Pełna Księgowość / Ryczałt Ewidencjonowany — page-specific overrides */
.page-pelna .kpir-left-col { width: 843px; }

.pricing-section { background: var(--white); padding: 30px 0 70px; }
.pricing-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 35px; text-align: center; }
.pricing-head h2 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 32px;
  color: var(--ink);
  margin: 0;
  max-width: 938px;
}
.pricing-grid { width: 1334px; max-width: 100%; margin: 0 auto; }
.pricing-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 5px;
  box-sizing: border-box;
  width: 1334px;
  max-width: 100%;
}
.pricing-row + .pricing-row { margin-top: 26px; }
.plan-card {
  background: var(--white);
  border: 1.5px solid var(--label-accent);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  width: 425px;
  height: 316px;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.plan-top-accent { background: var(--gold); height: 5px; width: 100%; flex-shrink: 0; }
.plan-band { background: var(--gold); padding: 18px 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.plan-name {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
}
.plan-body { background: var(--white); padding: 22px 22px 50px; display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; }
.plan-price-row { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.plan-price {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 29px;
  color: var(--ink);
}
.plan-unit { font-size: 14.5px; color: var(--ink-soft); }
.plan-divider { background: var(--border); height: 1px; width: 100%; }
.plan-feature { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.plan-check {
  background: var(--gold-dark);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.plan-check-premium { background: var(--gold); }
.plan-feature p { margin: 0; font-size: 16px; line-height: 1.45; color: #595957; }
.plan-card-premium { border-color: var(--label-accent); }
.plan-card-premium .plan-band { padding-top: 18px; padding-bottom: 18px; }

.pricing-note { width: 1334px; max-width: 100%; margin: 30px auto 0; display: flex; flex-direction: column; gap: 24px; }
.note-row { display: flex; align-items: flex-start; gap: 12px; }
.note-star { width: 21px; height: 21px; flex-shrink: 0; margin-top: 1px; }
.note-row p { margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink); }

.addons-section { background: var(--cream); padding: 50px 0 72px; }
.addons-head { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 40px; text-align: center; }
.addons-head h2 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 30px;
  color: var(--ink);
  margin: 0;
}
.addons-hint { font-size: 14px; color: var(--ink-soft); margin: 4px 0 0; }
.addon-categories { display: flex; flex-direction: column; gap: 36px; width: 1334px; max-width: 100%; margin: 0 auto; }
.addon-cat-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--label-accent);
  letter-spacing: 0.03em;
  margin: 0 0 12px;
}
.addon-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; margin-top: 12px; }
.addon-row:first-of-type { margin-top: 0; }
.addon-card {
  width: 100%;
  height: 128px;
  box-sizing: border-box;
  background: var(--white);
  border: 1.3px solid var(--gold);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 0;
  cursor: pointer;
  font: inherit;
  perspective: 1200px;
  position: relative;
  /* Safety net: the front/back faces are absolutely positioned to exactly
     fill the card, but on narrow screens long service names can still wrap
     onto one extra line and run a few pixels taller than the fixed card
     height — clip that overflow instead of letting it spill past the
     rounded corners. */
  overflow: hidden;
}
.addon-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 16px;
  backface-visibility: hidden;
  transition: transform 0.9s ease-in-out;
  transform: rotateY(0deg);
}
.addon-face-front { background: var(--white); text-align: left; font-size: 16px; line-height: 1.35; color: var(--ink); }
.addon-icon { width: 46px; height: 46px; flex-shrink: 0; }
.addon-face-back {
  background: var(--gold);
  justify-content: center;
  transform: rotateY(180deg);
}
.addon-price {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.addon-card:hover .addon-face-front { transform: rotateY(-180deg); }
.addon-card:hover .addon-face-back { transform: rotateY(0deg); }

.note-cta-section { background: var(--cream); padding: 0 0 72px; }
.note-card {
  width: 1334px;
  height: 272px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  background: #2f2f2f;
  border-top: 5px solid var(--gold);
  border-radius: 18px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.note-title-row { display: flex; align-items: center; gap: 14px; }
.note-icon-badge { width: 40px; height: 40px; flex-shrink: 0; display: flex; }
.note-icon-badge img { width: 100%; height: 100%; }
.note-card h2 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--white);
  margin: 0;
}
.note-text { font-size: 18px; line-height: 1.65; color: var(--white); margin: 0; }
.note-text strong { color: var(--gold); font-weight: 700; }

@media (max-width: 1280px) {
  .contact-card, .contact-image { width: 100%; }
  /* .contact-card has a fixed 459px height sized for its desktop 560px
     width. Once the card shrinks to fit a tablet or phone screen, the same
     four list items (Telefon, E-mail, Dane rejestrowe, Godziny pracy) wrap
     onto more lines, so the fixed height is no longer tall enough — the
     card's dark background stopped at 459px while the last item(s) kept
     flowing past it onto the plain page background below, which is why
     "Godziny pracy" and its white text became unreadable on mobile. Letting
     the card grow with its content removes the cutoff entirely. */
  /* Desktop padding was bumped to 48px for more breathing room under
     "Godziny pracy"; keep tablet/mobile exactly as before at 40px. */
  .contact-card { height: auto; min-height: 459px; padding: 40px; }
}

/* Two-column content+sidebar blocks use fixed pixel widths with flex-shrink:0,
   which overflow on laptop-range screens narrower than ~1400px — collapse to
   a single column before that happens. */
@media (max-width: 1400px) {
  .kadry-grid-row, .kpir-grid-row {
    flex-direction: column;
    width: 100%;
  }
  .kadry-left-col, .kpir-left-col, .page-pelna .kpir-left-col {
    width: 100%;
    height: auto;
  }
  .sidebar-card { width: 100%; height: auto; }
}

/* Responsive */
@media (max-width: 880px) {
  nav.main-nav { display: none; }
  .nav-toggle { display: block; }
  .header-phone { display: none; }
  .hero .wrap { grid-template-columns: 1fr; }
  /* A grid item's explicit pixel width (like this fixed 776px photo) is still
     used when the browser works out how wide the "1fr" column needs to be,
     even though max-width:100% later shrinks the photo itself — so the whole
     row (including the text next to it) was forced open to 776px and the
     text overflowed off the right edge of the phone screen. Replacing the
     fixed width with 100%/aspect-ratio here removes that oversized minimum. */
  .hero-image { width: 100%; height: auto; aspect-ratio: 776/335; }
  .value-grid, .service-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand-text { gap: 6px; }
  .footer-brand .logo { font-size: 1rem; }
  .footer-tagline { font-size: 12px; letter-spacing: 0.04em; top: -1.7px; }

  /* Tighten the gap between the dark page header and the intro paragraph
     ("Pełna księgowość jest...") on mobile, on all three service pages
     that share this intro block. Kadry i Płace uses the same gap. */
  .kpir-content, .kadry-content { padding-top: 44px; }

  /* The 70px gap under "Potrzebujesz więcej informacji?" was sized for the
     spacious desktop layout; on a phone it just pushes the "Dane Kontaktowe"
     card further down the screen than it needs to be. Tighten it up. */
  .contact-heading { margin-bottom: 32px; }

  /* The CTA band ("Szczegółowa informacja...") had a fixed height meant for
     a one-line heading; on a narrow phone the heading wraps to 3 lines and
     the box no longer had room, squeezing the text flush against the top
     and bottom edges. Let the box grow with its content and breathe. */
  .cta-band { height: auto; padding: 36px 24px; }
  .cta-band h2 { font-size: 24px; margin-bottom: 10px; }
  .cta-band p { font-size: 15px; margin-bottom: 22px; }

  :root { --fs-h1: 32px; --fs-h2: 24px; }

  .site-header.nav-open nav.main-nav {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--cream);
    padding: 12px 24px 20px;
    box-shadow: 0 12px 20px rgba(0,0,0,0.1);
    border-bottom: 1px solid var(--border);
  }
  .site-header.nav-open nav.main-nav ul {
    flex-direction: column;
  }

  /* --- Fix fixed-width blocks so they stack and fit narrow screens --- */
  .why-us-grid { grid-template-columns: 1fr; }
  .why-us-card { width: 100%; height: auto; }

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

  .checklist, .checklist-paired, .checklist-paired-7 {
    display: flex;
    flex-direction: column;
  }
  .checklist-paired .checklist-item,
  .checklist-paired-7 .checklist-item {
    border-bottom: 1px solid var(--border);
  }
  .checklist-paired .checklist-item:last-child,
  .checklist-paired-7 .checklist-item:last-child {
    border-bottom: none;
  }
  /* On desktop, .checklist lays its .checklist-col columns out side by side,
     so each column only needs a divider between its own rows (the last row
     of a column has none, since there is nothing below it in that column).
     On mobile the columns stack into one single-file list instead, so the
     last row of a non-last column is now followed immediately by the first
     row of the next column — without this rule that junction was the one
     place in the whole list with no line between two items. */
  .checklist .checklist-col:not(:last-child) .checklist-item:last-child {
    border-bottom: 1px solid var(--border);
  }

  .pricing-row { flex-direction: column; width: 100%; }
  .plan-card { width: 100%; height: auto; }

  /* Narrow phones wrap the longest addon names onto one more line than the
     desktop 128px card allows for, which pushed text past the rounded
     border. A touch more height plus a smaller label size gives the
     longest labels (e.g. "Korekta zamkniętego okresu rozliczeniowego...")
     room to wrap without being clipped. */
  .addon-card { height: 148px; }
  .addon-face { padding: 16px; gap: 12px; }
  .addon-face-front { font-size: 14px; line-height: 1.3; }
  .addon-icon { width: 38px; height: 38px; }

  .note-card { width: 100%; height: auto; padding: 24px; }

  .addon-categories { width: 100%; }

  .item-row { flex-wrap: wrap; row-gap: 6px; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 20px; }
  .addon-row { grid-template-columns: 1fr; }
}