/* ============================================================
   Change Up V6 — design system (Premium Aesthetic)
   Tone: clean, intuitive, calm B2B. Mobile-first.
   ============================================================ */

/* Self-hosted Plus Jakarta Sans (latin + latin-ext, variable 400-800) */
@import url('fonts/fonts.css');

:root {
  /* Colors — CANON brand board (CHANGEUP_BRAND_FROZEN) exact tokens */
  --c-primary:        #086972; /* ChangeUp Teal — primary */
  --c-primary-deep:   #007F8A; /* Deep Teal — secondary */
  --c-primary-d:      #054E55; /* darker teal for hovers/panels */
  --c-primary-l:      #86d5db;
  --c-teal-light:     #C8E4E6; /* Light Teal — tints, triangles */
  --c-teal-soft:      #E7F3F4; /* Soft Teal — section backgrounds */
  --c-charcoal:       #0F1720; /* Charcoal — primary dark / text */
  --c-amber:          #F2A64A; /* Warm Amber — single accent */
  --c-coral:          #FF7A59; /* Brand Book accent — coral */
  --c-teal-deep:      #054E55; /* Brand Book Deep Teal */
  --c-teal-mid:       #86D5DB; /* Brand Book Mid Teal */
  --c-bg:             #ffffff;
  --c-bg-soft:        #F9FAFB; /* gray-50 */
  --c-bg-brand:       #E7F3F4; /* soft teal (board) */
  --c-bg-card:        #ffffff;
  --c-text:           #0F1720; /* Charcoal (board) */
  --c-text-soft:      #4b5563; /* gray-600 */
  --c-muted:          #6b7280; /* gray-500 — WCAG AA: ~5.0:1 na białym (było #9ca3af = 2.9:1 FAIL) */
  --c-border:         #f3f4f6; /* gray-100 */
  --c-border-strong:  #e5e7eb; /* gray-200 */
  --c-warn:           #f5c842;
  --c-danger:         #c84a31;
  --c-success:        #2a8c2a;

  /* Persona accents */
  --p-firma:          #086972;   /* teal — strategiczne, B2B */
  --p-lider:          #054E55;   /* brand: deep teal (bylo burnt orange) */
  --p-hr:             #b5482f;   /* brand: ciemny koral (bylo purple) */

  /* Spacing */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-8:  48px;
  --s-10: 56px;
  --s-12: 64px;
  --s-16: 80px;
  --s-20: 100px;

  /* Typography */
  --f-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-size-xs: 13px;
  --f-size-sm: 15px;
  --f-size-base: 17px;
  --f-size-lg: 20px;
  --f-size-xl: 24px;
  --f-size-2xl: 32px;
  --f-size-3xl: 40px;
  --f-size-4xl: 52px;
  --f-size-5xl: 68px;

  /* Other */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px; /* rounded-2xl */
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow:    0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 25px -5px rgba(8, 105, 114, 0.15);
  --container: 1152px; /* max-w-6xl */
}

/* ============= Reset + base ============= */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

body {
  font-family: var(--f-sans);
  font-size: var(--f-size-base);
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
}

img, svg { max-width: 100%; display: block; height: auto; }

a {
  color: var(--c-primary);
  text-decoration: none;
  transition: all .2s ease;
}
a:hover { color: var(--c-primary-d); }

h1, h2, h3, h4 { 
  font-weight: 800; 
  color: var(--c-text); 
  line-height: 1.15; 
  text-wrap: pretty; 
}
h1 { font-size: var(--f-size-4xl); letter-spacing: -0.02em; }
h2 { font-size: var(--f-size-3xl); letter-spacing: -0.015em; }
h3 { font-size: var(--f-size-xl); }
h4 { font-size: var(--f-size-lg); }

p { 
  color: var(--c-text-soft); 
  text-wrap: pretty;
}

ul { list-style: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }


/* ============= Layout ============= */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

section { padding: var(--s-12) 0; }
section.compact { padding: var(--s-10) 0; }
section.tight   { padding: var(--s-8) 0; }

@media (max-width: 768px) {
  section { padding: var(--s-8) 0; }
  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  .container { padding: 0 var(--s-4); }

  /* Redukcja pustej przestrzeni mobile */
  .cu-essence { padding: var(--s-6) 0; }
  .v8-proof { padding: var(--s-6) 0; }
  .v8-proof-stats { gap: var(--s-4); margin-bottom: var(--s-5); }
  .cu-essence-inner { gap: var(--s-4); }
}


/* ============= Nav ============= */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-border-strong);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-3) var(--s-5);
  max-width: var(--container);
  margin: 0 auto;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 800;
  font-size: var(--f-size-xl);
  color: var(--c-primary);
}

.nav-brand .brand-symbol {
  height: 24px;
  width: auto;
  flex-shrink: 0;
}

.nav-brand b { color: var(--c-text); font-weight: 800; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.nav-link {
  font-size: var(--f-size-sm);
  font-weight: 600;
  color: var(--c-text-soft);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav-link:hover { color: var(--c-primary); }
.nav-link.active { color: var(--c-primary); background: var(--c-bg-brand); }

.nav-cta { margin-left: var(--s-3); }

.nav-burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--c-text);
}
.nav-burger:hover { background: var(--c-bg-soft); }
.nav-burger svg { width: 24px; height: 24px; }

@media (max-width: 860px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: white;
    flex-direction: column;
    align-items: stretch;
    padding: var(--s-4);
    gap: 0;
    border-bottom: 1px solid var(--c-border-strong);
    box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-link { padding: var(--s-3) var(--s-4); border-radius: 0; border-bottom: 1px solid var(--c-border); }
  .nav-link:last-of-type { border-bottom: none; }
  .nav-cta { margin: var(--s-4) 0 0; }
  .nav-burger { display: flex; }
}


/* ============= Buttons ============= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--f-size-base);
  font-weight: 800;
  padding: 14px 28px;
  border-radius: var(--radius);
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
}

.btn-sm { font-size: var(--f-size-sm); padding: 10px 20px; }
.btn-lg { font-size: var(--f-size-lg); padding: 16px 36px; }

.btn-primary {
  background: var(--c-primary);
  color: white;
}
.btn-primary:hover { 
  background: var(--c-primary-d);
  color: white; 
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.btn-secondary:hover { background: var(--c-bg-brand); color: var(--c-primary-d); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--c-primary);
  padding: 0;
}
.btn-ghost:hover { color: var(--c-primary-d); text-decoration: underline; }

.btn-block { width: 100%; }


/* ============= Hero ============= */

.hero {
  padding: var(--s-16) 0 var(--s-12);
  position: relative;
  overflow: hidden;
  background: transparent;
}

.hero h1 {
  font-size: clamp(36px, 6vw, 60px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--s-5);
  color: var(--c-text);
}

.hero h1 b { color: var(--c-text); font-weight: 800; }

.hero-lead {
  font-size: clamp(18px, 2vw, 22px);
  color: var(--c-text-soft);
  max-width: 800px;
  line-height: 1.6;
  margin-bottom: var(--s-8);
  font-weight: 400;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--s-4);
}

.hero-actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .hero { padding: var(--s-10) 0 var(--s-6); }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
}


/* ============= Cards & Grid ============= */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
}

.card, .persona-card, .tool-card {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.card:hover, .persona-card:hover, .tool-card:hover { 
  border-color: var(--c-primary); 
  box-shadow: var(--shadow-lg); 
  transform: translateY(-4px);
}

/* Icon Box inside cards (like changeup.pl) */
.card-icon, .persona-card .icon {
  width: 44px; height: 44px;
  background: var(--c-bg-brand);
  color: var(--c-primary);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-4);
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
}
.card-icon img, .persona-card .icon img { width: 24px; height: 24px; }

.card h3, .persona-card h3, .tool-card h3 {
  font-size: var(--f-size-lg);
  margin-bottom: var(--s-2);
  color: var(--c-text);
  font-weight: 800;
  line-height: 1.3;
}

.card p, .persona-card p, .tool-card p {
  font-size: var(--f-size-sm);
  margin-bottom: var(--s-4);
  color: var(--c-text-soft);
  flex-grow: 1;
}

.card-cta, .persona-card .arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--f-size-sm);
  font-weight: 800;
  color: var(--c-primary);
}


/* ============= Sections & Typography ============= */

.section-title {
  margin-bottom: var(--s-10);
}
.section-title.center {
  text-align: center;
}
.section-title h2 { margin-bottom: var(--s-3); }
.section-title p {
  font-size: var(--f-size-lg);
  color: var(--c-text-soft);
  max-width: 640px;
}
.section-title.center p {
  margin: 0 auto;
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: var(--c-bg-brand);
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: var(--s-4);
}

.bg-soft { background: var(--c-bg-soft); }
.bg-brand { background: var(--c-bg-brand); }
.bg-dark {
  background: var(--c-primary);
  color: white;
}
.bg-dark h2, .bg-dark h3 { color: white; }
.bg-dark p, .bg-dark .muted { color: rgba(255,255,255,.85); }
.bg-dark .eyebrow { background: rgba(255,255,255,.1); color: white; }


/* ============= Trust / Logos ============= */

.trust-bar {
  padding: var(--s-8) 0;
  text-align: center;
  border-top: 1px solid var(--c-border-strong);
  background: white;
}
.trust-bar .trust-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--c-primary);
  margin-bottom: var(--s-6);
  font-weight: 800;
}

.trust-bar .trust-clients-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--s-8);
  row-gap: var(--s-4);
  max-width: 1000px;
  margin: 0 auto;
  font-weight: 700;
  color: var(--c-muted);
  font-size: var(--f-size-sm);
}
.trust-bar .trust-clients-list span {
  white-space: nowrap;
  transition: color .2s;
}
.trust-bar .trust-clients-list span:hover { color: var(--c-text); }

.trust-divider {
  border: none;
  border-top: 1px solid var(--c-border-strong);
  max-width: 920px;
  margin: var(--s-10) auto;
}

.trust-academic-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-10);
}
.trust-academic-logos img {
  height: 48px;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: all .2s;
}
.trust-academic-logos img:hover {
  opacity: 1; filter: grayscale(0%);
}


/* ============= Quote ============= */

.quote {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.quote blockquote {
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 800;
  font-style: italic;
  line-height: 1.4;
  color: var(--c-text);
  margin-bottom: var(--s-5);
}
.quote cite {
  font-style: normal;
  font-size: var(--f-size-sm);
  font-weight: 700;
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Cytat w sekcji social proof na home (v8-proof) */
.v8-proof-quote {
  text-align: center;
  max-width: 800px;
  margin: var(--s-8) auto var(--s-6);
  padding: var(--s-6) var(--s-5);
  border-left: 4px solid var(--c-primary);
  background: var(--c-bg-brand);
  border-radius: var(--radius-lg);
  text-align: left;
}
.v8-proof-quote blockquote {
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  font-style: italic;
  line-height: 1.5;
  color: var(--c-text);
  margin: 0 0 var(--s-3);
}
.v8-proof-quote figcaption {
  font-style: normal;
  font-size: var(--f-size-sm);
  font-weight: 700;
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ============= Forms ============= */

.lead-form {
  background: white;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-xl);
  padding: var(--s-8);
  box-shadow: var(--shadow-sm);
}
.lead-form .row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
}
@media (max-width: 600px) {
  .lead-form .row { grid-template-columns: 1fr; }
}

.field { margin-bottom: var(--s-4); }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--c-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.field.required label::after { content: ' *'; color: var(--c-danger); }

.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  font-size: var(--f-size-sm);
  font-family: inherit;
  color: var(--c-text);
  background: var(--c-bg-soft);
  transition: all .2s;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  background: white;
  box-shadow: 0 0 0 4px rgba(8,105,114,0.1);
}
.field textarea { resize: vertical; min-height: 120px; }

.consent {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--c-text-soft);
  margin-bottom: var(--s-6);
  cursor: pointer;
  line-height: 1.5;
}
.consent input { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; }

.form-msg {
  padding: var(--s-3);
  border-radius: var(--radius-sm);
  margin-top: var(--s-4);
  font-size: var(--f-size-sm);
  display: none;
  font-weight: 600;
}
.form-msg.show { display: block; }
.form-msg.ok { background: #dcfce7; color: #166534; }
.form-msg.err { background: #fde8e3; color: var(--c-danger); }


/* ============= Footer ============= */

.footer {
  background: #111827; /* gray-900 */
  color: rgba(255,255,255,.8);
  padding: var(--s-12) 0 var(--s-6);
  font-size: var(--f-size-sm);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--s-8);
  margin-bottom: var(--s-10);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer h4 {
  color: white;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--s-4);
  font-weight: 800;
}

.footer .col-brand {
  font-weight: 800;
  font-size: var(--f-size-xl);
  color: white;
  margin-bottom: var(--s-4);
}

.footer ul li { margin-bottom: var(--s-3); }
.footer a { color: rgba(255,255,255,.8); font-weight: 500; }
.footer a:hover { color: white; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: var(--s-6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-size: 13px;
  color: rgba(255,255,255,.5);
}


/* ============= Tool catalog / Tags ============= */

.tool-filters {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-8);
}
.chip {
  background: white;
  border: 1px solid var(--c-border-strong);
  border-radius: 30px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text-soft);
  cursor: pointer;
  transition: all .2s;
}
.chip:hover { border-color: var(--c-primary); color: var(--c-text); }
.chip.active { background: var(--c-primary); border-color: var(--c-primary); color: white; }

.tool-card .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--s-4);
}

.tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 20px;
}
.tag-firma     { background: var(--c-bg-brand); color: var(--p-firma); }
.tag-lider     { background: #fff3e0; color: var(--p-lider); }
.tag-hr        { background: #f3e5f5; color: var(--p-hr); }
.tag-pracownik { background: #e8f5e9; color: var(--c-success); }
.tag-soon      { background: #f3f4f6; color: #4b5563; }
.tag-active    { background: #dcfce7; color: #166534; }


/* ============= Utilities ============= */

.text-center { text-align: center; }
.muted       { color: var(--c-muted); }
.small       { font-size: var(--f-size-sm); }
.mt-4        { margin-top: var(--s-4); }
.mt-6        { margin-top: var(--s-6); }
.mt-8        { margin-top: var(--s-8); }
.mb-4        { margin-bottom: var(--s-4); }
.mb-6        { margin-bottom: var(--s-6); }
.mb-8        { margin-bottom: var(--s-8); }
.link-bold   { font-weight: 800; color: var(--c-primary); text-decoration: underline; text-decoration-color: transparent; transition: all .2s; }
.link-bold:hover { text-decoration-color: var(--c-primary); }
.divider     { border: none; border-top: 1px solid var(--c-border-strong); margin: var(--s-8) 0; }

/* HOME V7 blok usunięty — klasy nieużywane w V9 HTML.
   Zachowany blok page-v7 poniżej (używany przez dla-firmy/kontakt/o-nas/dla-hr/dla-lidera). */

/* ============================================================
   V7 shared page skin — align subpages with the clean home design
   ============================================================ */
.page-v7 {
  --cu-ink: #102527;
  --cu-paper: #fbf8f2;
  --cu-line: rgba(16,37,39,.12);
  background: var(--cu-paper);
}
.page-v7 .nav {
  background: rgba(251,248,242,.88);
  border-bottom: 1px solid rgba(16,37,39,.10);
}
.page-v7 .hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 72px;
  background:
    radial-gradient(circle at 78% 18%, rgba(134,213,219,.30), transparent 28%),
    linear-gradient(135deg, #fbf8f2 0%, #f7f1e7 52%, #e6f4f5 100%);
}
.page-v7 .hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(16,37,39,.050) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,37,39,.050) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.56), transparent 84%);
  pointer-events: none;
}
.page-v7 .hero > .container { position: relative; }
.page-v7 .hero-eyebrow,
.page-v7 .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #086972;
  border: 1px solid rgba(8,105,114,.20);
  background: rgba(255,255,255,.58);
  padding: 9px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.page-v7 .hero h1 {
  max-width: 920px;
  font-size: clamp(42px, 5.8vw, 76px);
  line-height: .98;
  letter-spacing: -.052em;
  color: var(--cu-ink);
  margin-bottom: 24px;
}
.page-v7 .hero h1 b { color: inherit; }
.page-v7 .hero-lead {
  max-width: 760px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: rgba(16,37,39,.74);
  margin-bottom: 34px;
}
.page-v7 .btn { border-radius: var(--radius); }
.page-v7 .btn-primary { background: #086972; box-shadow: 0 16px 38px rgba(8,105,114,.20); }
.page-v7 .btn-secondary { background: rgba(255,255,255,.62) !important; border-color: rgba(8,105,114,.35) !important; color: #086972 !important; }
.page-v7 section:not(.hero):not(.bg-dark) { background: #fff; }
.page-v7 section.bg-soft { background: #fbf8f2; }
.page-v7 section.bg-brand { background: #e6f4f5; }
.page-v7 .section-title h2 {
  font-size: clamp(32px, 4.3vw, 54px);
  line-height: 1.04;
  letter-spacing: -.04em;
  color: var(--cu-ink);
}
.page-v7 .section-title p {
  font-size: 18px;
  line-height: 1.62;
  color: rgba(16,37,39,.68);
}
.page-v7 .card,
.page-v7 .tool-card,
.page-v7 .lead-form {
  border: 1px solid rgba(16,37,39,.10);
  border-radius: 28px;
  box-shadow: 0 16px 44px rgba(16,37,39,.06);
  background: rgba(255,255,255,.82);
}
.page-v7 .card:hover,
.page-v7 .tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(16,37,39,.13);
}
.page-v7 .card-icon,
.page-v7 .persona-card .icon {
  border-radius: 14px;
  background: rgba(8,105,114,.10);
}
.page-v7 .quote blockquote {
  font-size: clamp(24px, 3.2vw, 42px);
  line-height: 1.18;
  letter-spacing: -.035em;
}
.page-v7 .bg-dark {
  background: linear-gradient(135deg, #086972 0%, #102527 100%);
}
.page-v7 .bg-dark .btn-secondary { background: transparent !important; border-color: rgba(255,255,255,.72) !important; color: #fff !important; }

/* [home-v7 cu-photo-card usunięty — nieużywane w V9] */

/* ============================================================
   Product cards — offer modules, not text blocks
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 410px;
  padding: 30px;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.82));
  border: 1px solid rgba(16,37,39,.10);
  box-shadow: 0 18px 52px rgba(16,37,39,.08);
  color: #102527;
  overflow: hidden;
}
.product-card:before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 7px;
  background: var(--accent, #086972);
}
.product-card:after {
  content: "";
  position: absolute;
  right: -56px;
  top: -56px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #086972) 14%, transparent);
  pointer-events: none;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 78px rgba(16,37,39,.15);
  color: #102527;
}
.product-card .product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 44px;
}
.product-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent, #086972);
  background: color-mix(in srgb, var(--accent, #086972) 10%, white);
  border: 1px solid color-mix(in srgb, var(--accent, #086972) 22%, transparent);
  border-radius: 999px;
  padding: 8px 11px;
}
.product-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent, #086972) 12%, white);
  color: var(--accent, #086972);
  font-weight: 900;
}
.product-icon img { width: 25px; height: 25px; }
.product-card h3 {
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: 14px;
  color: #102527;
}
.product-card p {
  font-size: 15px;
  line-height: 1.62;
  color: rgba(16,37,39,.68);
  margin-bottom: 22px;
}
.product-points {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(16,37,39,.10);
}
.product-points li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
  color: rgba(16,37,39,.76);
}
.product-points li:before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #086972);
}
.product-card .product-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 22px;
  color: var(--accent, #086972);
  font-weight: 900;
}
.product-firma { --accent: #086972; }
.product-lider { --accent: #054E55; }
.product-hr { --accent: #b5482f; }
.product-neutral { --accent: #102527; }

/* ============================================================
   HOME V8 — single coherent version / product packaging
   ============================================================ */
.home-v8{--ink:#102527;--teal:#086972;--paper:#fbf8f2;--line:rgba(16,37,39,.12);background:var(--paper);color:var(--ink)}
.home-v8 .nav{background:rgba(251,248,242,.9);border-bottom:1px solid rgba(16,37,39,.1)}
.home-v8 .btn{border-radius:var(--radius)}.home-v8 .btn-primary{background:var(--teal);box-shadow:0 16px 38px rgba(8,105,114,.2)}.home-v8 .btn-secondary{background:rgba(255,255,255,.7);border-color:rgba(8,105,114,.35);color:var(--teal)}
/* .v8-hero — stary shorthand V8 home (zachowany dla .v8-grid i mediaqueries) */
.v8-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(16,37,39,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(16,37,39,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.56),transparent 84%)}
.v8-hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(390px,.85fr);gap:clamp(36px,6vw,78px);align-items:center}.v8-kicker,.v8-label{display:inline-flex;align-items:center;font-size:12px;font-weight:900;letter-spacing:.17em;text-transform:uppercase;color:var(--teal);border:1px solid rgba(8,105,114,.2);background:rgba(255,255,255,.58);padding:9px 14px;border-radius:999px;margin-bottom:18px}.v8-label.amber{color:#054E55;border-color:rgba(5,78,85,.28)}.v8-label.purple{color:#b5482f;border-color:rgba(181,72,47,.28)}
.v8-hero h1{max-width:860px;font-size:clamp(44px,6.3vw,84px);line-height:.96;letter-spacing:-.055em;margin:0 0 26px}.v8-hero p{max-width:720px;font-size:clamp(18px,2vw,23px);line-height:1.55;margin:0 0 34px}.v8-actions{display:flex;gap:14px;flex-wrap:wrap}.v8-photo-wrap{border-radius:36px;overflow:hidden;box-shadow:0 34px 80px rgba(16,37,39,.24);background:#e6f4f5}.v8-photo{width:100%;height:620px;object-fit:cover;object-position:center center;display:block}
.v8-section{padding:86px 0;background:#fff}.v8-paper{background:var(--paper)}.v8-two-col{display:grid;grid-template-columns:minmax(0,.75fr) minmax(340px,1fr);gap:60px;align-items:start}.v8-two-col h2,.v8-section-head h2{font-size:clamp(34px,4.8vw,60px);line-height:1.02;letter-spacing:-.045em;color:var(--ink);margin:0}.v8-two-col p,.v8-section-head p{font-size:18px;line-height:1.65;color:rgba(16,37,39,.68);margin:0}.v8-section-head{max-width:820px;margin-bottom:38px}.v8-section-head h2{margin-bottom:16px}
.v8-product-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.v8-two-products{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}.v8-package{position:relative;min-height:470px;display:flex;flex-direction:column;padding:32px;border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.86));border:1px solid rgba(16,37,39,.1);box-shadow:0 18px 52px rgba(16,37,39,.08);overflow:hidden;color:var(--ink)}.v8-package:before{content:"";position:absolute;inset:0 0 auto;height:8px;background:var(--accent,#086972)}.v8-package:after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:color-mix(in srgb,var(--accent,#086972) 13%,transparent)}.v8-package:hover{transform:translateY(-7px);box-shadow:0 34px 82px rgba(16,37,39,.16);color:var(--ink)}.v8-package-main{--accent:#086972}.v8-package-lider{--accent:#054E55}.v8-package-hr{--accent:#b5482f}.v8-package:not(.v8-package-lider):not(.v8-package-hr){--accent:#086972}.v8-package-top{position:relative;z-index:1;display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:54px}.v8-package-type{font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,white);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);border-radius:999px;padding:8px 11px}.v8-package-top img{width:48px;height:48px;padding:10px;border-radius:16px;background:color-mix(in srgb,var(--accent) 12%,white)}.v8-package h3{position:relative;z-index:1;font-size:clamp(27px,2.5vw,36px);line-height:1.04;letter-spacing:-.035em;margin:0 0 16px;color:var(--ink)}.v8-package p{position:relative;z-index:1;font-size:16px;line-height:1.62;color:rgba(16,37,39,.68);margin:0 0 24px}.v8-package-bottom{position:relative;z-index:1;margin-top:auto;padding-top:20px;border-top:1px solid rgba(16,37,39,.1);display:flex;flex-direction:column;gap:10px}.v8-package-bottom span{font-size:14px;font-weight:800;color:rgba(16,37,39,.76)}.v8-package-bottom strong{margin-top:12px;color:var(--accent);font-weight:900}.v8-about{background:#fff}.v8-trust{background:var(--paper);border-top:0}.v8-final{padding:88px 0;background:linear-gradient(135deg,#086972 0%,#102527 100%)}.v8-final-card{text-align:center;max-width:850px;margin:auto;color:#fff}.v8-final-card .v8-label{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}.v8-final-card h2{font-size:clamp(34px,4.8vw,62px);line-height:1.02;letter-spacing:-.045em;margin:0 0 16px;color:#fff}.v8-final-card p{max-width:660px;margin:0 auto 30px;font-size:18px;line-height:1.65;color:rgba(255,255,255,.72)}
@media(max-width:980px){.v8-hero-inner,.v8-two-col{grid-template-columns:1fr}.v8-product-row,.v8-two-products{grid-template-columns:1fr}.v8-photo{height:520px}}@media(max-width:640px){.v8-hero{padding:58px 0}.v8-hero h1{font-size:42px}.v8-actions,.v8-actions .btn{width:100%}.v8-photo{height:390px}.v8-package{min-height:auto;padding:28px}}

/* V9 — katalog programów szkoleniowych (Etap A) */
.v8-prog-group{margin-top:32px}
.v8-prog-group:first-of-type{margin-top:8px}
.v8-prog-label{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#086972;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(16,37,39,.12)}
.v8-prog-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.v8-prog-item{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.86));border:1px solid rgba(16,37,39,.1);border-radius:18px;padding:18px 20px;box-shadow:0 10px 30px rgba(16,37,39,.05);transition:transform .2s,box-shadow .2s}
.v8-prog-item:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(16,37,39,.1)}
.v8-prog-item strong{display:block;font-size:16px;color:var(--ink,#102527);margin-bottom:6px;letter-spacing:-.01em}
.v8-prog-item span{font-size:14px;line-height:1.55;color:rgba(16,37,39,.66)}
@media(max-width:760px){.v8-prog-list{grid-template-columns:1fr}}

/* ============================================================
   V9 SZLIF — OKIENKA INFORMACYJNE (v8-info)
   Używane na PODSTRONACH dla treści "co dostajesz / jak to działa /
   dla kogo / zakres". Spójne z designem, ale NIE produktowe:
   bez paska-akcentu, bez ikony-tagu produktowego, bez CTA-strong.
   ============================================================ */
.v8-info-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:8px}
.v8-info-row.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px;margin-left:auto;margin-right:auto}
.v8-info-row.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.v8-info{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px;border-radius:18px;background:var(--c-bg-soft,#F9FAFB);border:1px solid var(--c-border-strong,#e5e7eb);transition:border-color .2s,background .2s}
.v8-info:hover{border-color:var(--c-primary-l,#86d5db);background:#fff}
.v8-info__num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--c-bg-brand,#E6F4F5);color:var(--c-primary,#086972);font-weight:900;font-size:14px;letter-spacing:.02em}
.v8-info__eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-primary,#086972)}
.v8-info h3{font-size:19px;line-height:1.25;letter-spacing:-.01em;margin:0;color:var(--c-text,#111827)}
.v8-info p{font-size:15px;line-height:1.6;color:var(--c-text-soft,#4b5563);margin:0}
.v8-info p b,.v8-info p strong{color:var(--c-text,#111827);font-weight:700}
.v8-info__meta{margin-top:auto;padding-top:12px;font-size:13px;font-weight:700;color:var(--c-text-soft,#4b5563)}
@media(max-width:900px){.v8-info-row,.v8-info-row.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.v8-info-row,.v8-info-row.cols-2,.v8-info-row.cols-4{grid-template-columns:1fr}}

/* Dwa przyciski w kaflu produktowym (akcja + dowiedz się więcej) — front */
.v8-package-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.v8-package-actions .v8-cta-main{font-weight:900;color:var(--accent,#086972)}
.v8-package-actions .v8-cta-sub{font-weight:700;color:var(--c-text-soft,#4b5563);font-size:14px}
.v8-package-actions a:hover{text-decoration:underline}

/* V9 SZLIF — formularze narzędzi (spójne z designem) */
.v8-form{display:flex;flex-direction:column;gap:16px;background:var(--c-bg-soft,#F9FAFB);border:1px solid var(--c-border-strong,#e5e7eb);border-radius:22px;padding:30px}
.v8-field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700;color:var(--c-text,#111827)}
.v8-field input,.v8-field select{font:inherit;font-weight:500;padding:12px 14px;border:1px solid var(--c-border-strong,#e5e7eb);border-radius:12px;background:#fff;color:var(--c-text,#111827);outline:none;transition:border-color .2s}
.v8-field input:focus,.v8-field select:focus{border-color:var(--c-primary,#086972)}
.v8-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;font-weight:500;color:var(--c-text-soft,#4b5563);line-height:1.5}
.v8-check input{margin-top:3px;flex-shrink:0}
.v8-check a{color:var(--c-primary,#086972)}
.v8-form-msg{font-size:14px;font-weight:700;margin:0;min-height:1px}
.v8-form-msg.err{color:var(--c-danger,#c84a31)}
.v8-form-msg.ok{color:var(--c-success,#2a8c2a)}
.v8-gate{max-width:520px;margin:0 auto}
.v8-gate .v8-field input{text-align:center;letter-spacing:.12em;font-weight:700;text-transform:uppercase}

/* ============================================================
   V9 SZLIF 2 — NEUTRALNY KAFEL TREŚCI (v8-note)
   Dla bloków OPISOWYCH (np. "Z Mapy Potrzeb", "co zawiera raport").
   NIE udaje produktu: brak paska-akcentu, brak ikony-tagu produktowego,
   brak CTA-strong. Lekka ramka, spokojne tło, czytelna lista.
   ============================================================ */
.v8-note{position:relative;padding:28px 30px;border-radius:16px;background:#fff;border:1px solid var(--c-border-strong,#e5e7eb);box-shadow:0 6px 22px rgba(16,37,39,.04)}
.v8-note__label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted,#6b7280);margin-bottom:12px}
.v8-note h3{font-size:21px;line-height:1.2;letter-spacing:-.02em;margin:0 0 14px;color:var(--c-text,#111827)}
.v8-note ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.v8-note li{position:relative;padding-left:22px;font-size:15px;line-height:1.55;color:var(--c-text-soft,#4b5563)}
.v8-note li:before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--c-primary,#086972)}
.v8-note li b,.v8-note li strong{color:var(--c-text,#111827);font-weight:700}
.v8-note p{font-size:15px;line-height:1.6;color:var(--c-text-soft,#4b5563);margin:0}

/* HERO ze zdjęciem (skrócone) — dwie kolumny: copy + foto */
.v8-hero.has-photo .v8-hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.v8-hero-photo{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px rgba(16,37,39,.18);background:var(--c-bg-brand,#E6F4F5)}
.v8-hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;aspect-ratio:2/3}
@media(max-width:900px){.v8-hero.has-photo .v8-hero-inner{grid-template-columns:1fr;gap:28px}.v8-hero-photo{max-width:420px;margin:0 auto}}

/* SPLIT-SEKCJA: nagłówek po lewej, treść po prawej (jak załączniki) */
.v8-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.v8-split .v8-split-head h2{margin:8px 0 0}
.v8-split .v8-split-body{padding-top:8px}
.v8-split .v8-split-body p{font-size:17px;line-height:1.7;color:var(--c-text-soft,#4b5563);margin:0 0 14px}
@media(max-width:820px){.v8-split{grid-template-columns:1fr;gap:18px}}

/* ============================================================

/* ============================================================
   CANON BRAND REDESIGN v2 (2026-05-31) — photo-driven
   Implements CHANGEUP_BRAND_FROZEN with real delivered assets.
   ============================================================ */

/* ---------- HEADER ---------- */
.nav { border-bottom: 1px solid var(--c-teal-light); background:#fff; }
.nav-link { font-weight:500; color:var(--c-charcoal); }
.nav-cta.btn-primary { background:var(--c-primary); color:#fff; border-radius:var(--radius); padding:11px 22px; font-weight:600; }
.nav-cta.btn-primary:hover { background:var(--c-primary-d); }

/* ---------- HERO — wariant ciemny (biały tekst): wszystkie strony page-* z photo-bg ---------- */
/* Warianty: body.light-hero = jasny desktop hero; body.page-* = ciemny photo-hero */
.v8-hero {
  position:relative; overflow:hidden; padding:88px 0 80px; color:#fff;
}
/* ---------- HERO JASNY (overlay z lewej, CIEMNY tekst) — tylko strony .light-hero ---------- */
body.light-hero .v8-hero {
  color:var(--ink);
  background:
    linear-gradient(95deg, rgba(247,244,237,.94) 0%, rgba(247,244,237,.80) 26%, rgba(250,248,242,.42) 48%, rgba(255,255,255,.08) 68%, transparent 82%),
    url("/assets/img/photos/hero_leader_coach.jpg") center/cover no-repeat;
  background-position: right center;
}
.v8-hero::after { content:none; }
.v8-hero.has-photo .v8-hero-inner {
  display:block; max-width:1152px; margin:0 auto;
  padding-top:112px; padding-bottom:120px; position:relative; z-index:2; text-align:left;
}
.v8-hero.has-photo .v8-hero-copy { max-width:600px; }
.v8-hero .v8-hero-photo { display:none; }   /* photo is now the bg */
.v8-hero .v8-kicker { text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:700; color:#fff; opacity:1; margin-bottom:20px; background:rgba(255,255,255,.10); border:1px solid rgba(134,213,219,.45); backdrop-filter:blur(6px); padding:9px 16px; border-radius:999px; }
.v8-hero h1 { font-size:clamp(2.6rem,5.2vw,4.2rem); line-height:1.04; font-weight:800; color:#fff; letter-spacing:-.02em; margin:0; text-shadow:0 2px 30px rgba(0,0,0,.25); }
.v8-hero h1 .hero-accent { color:var(--c-teal-mid); }
.v8-hero .hero-rule { width:64px; height:4px; background:var(--c-coral); border-radius:2px; margin:22px 0 24px; box-shadow:0 0 0 0 transparent; }
.v8-hero p { font-size:1.25rem; line-height:1.6; color:rgba(255,255,255,.92); max-width:44ch; margin:0 0 30px; }
.v8-hero .v8-actions { display:flex; gap:14px; flex-wrap:wrap; }
.v8-hero .btn-secondary { background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.5); color:#fff; }
.v8-hero .btn-secondary:hover { background:rgba(255,255,255,.2); }
.v8-grid { display:none; }

/* mobile hero photo block (hidden on desktop) */
.v8-hero-mobile-photo { display:none; }

/* placeholder (mobile hero overrides przeniesione na koniec pliku dla specyficznosci) */

/* ---------- Section labels + amber rule ---------- */
.v8-label { display:inline-block; text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:700; color:var(--c-primary); margin-bottom:10px; }
.v8-label.amber { color:#054E55; }
.v8-label.purple { color:#b5482f; }
.v8-section-head h2, .v8-two-col h2 { font-size:clamp(1.8rem,3vw,2.5rem); font-weight:800; color:var(--c-charcoal); letter-spacing:-.015em; }
.v8-section-head::after { content:""; display:block; width:48px; height:3px; background:var(--c-coral); border-radius:2px; margin-top:16px; }

/* ---------- soft-teal alternating ---------- */
.v8-paper { background:var(--c-teal-soft); }

/* ---------- 3-step section with photo ---------- */
.v8-steps-row { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:44px; }
.v8-step { background:#fff; border:1px solid var(--c-teal-light); border-radius:var(--radius-lg); padding:28px 24px; transition:transform .2s, box-shadow .2s; }
.v8-step:hover { transform:translateY(-3px); box-shadow:0 16px 40px -16px rgba(8,105,114,.25); }
.v8-step-icon { width:64px; height:58px; display:flex; align-items:center; justify-content:center; position:relative; margin-bottom:16px; }
.v8-step-icon::before { content:""; position:absolute; inset:0; background:url("/assets/ikony/triangle_motif.svg") no-repeat center/contain; opacity:.85; }
.v8-step-icon img { width:26px; height:26px; position:relative; z-index:1; margin-top:8px; }
.v8-step h3 { font-size:1.15rem; font-weight:700; color:var(--c-charcoal); margin-bottom:8px; }
.v8-step p { color:var(--c-text-soft); font-size:.96rem; line-height:1.6; margin:0; }

/* ---------- generic media+text band ---------- */
.v8-band { padding:0; }
.v8-band-inner { display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; }
.v8-band-media { min-height:420px; background-size:cover; background-position:center top; }
.v8-band-copy { padding:64px 56px; display:flex; flex-direction:column; justify-content:center; }
.v8-band-copy h2 { font-size:clamp(1.6rem,2.6vw,2.2rem); font-weight:800; color:var(--c-charcoal); margin:6px 0 14px; letter-spacing:-.015em; }
.v8-band-copy p { color:var(--c-text-soft); font-size:1.05rem; line-height:1.7; margin:0 0 14px; }
.v8-band.reverse .v8-band-media { order:2; }
@media(max-width:860px){ .v8-band-inner{grid-template-columns:1fr} .v8-band-media{min-height:260px} .v8-band-copy{padding:40px 24px} .v8-band.reverse .v8-band-media{order:0} }

/* ---------- Product cards ---------- */
.v8-package { background:#fff; border:1px solid var(--c-teal-light); border-radius:var(--radius-lg); transition:box-shadow .2s, transform .2s, border-color .2s; }
.v8-package:hover { box-shadow:0 16px 40px -16px rgba(8,105,114,.28); transform:translateY(-3px); border-color:var(--c-primary-l); }
.v8-package-main { border-top:3px solid var(--c-primary); }
.v8-package-lider { border-top:3px solid var(--c-amber); }
.v8-package-hr { border-top:3px solid var(--c-primary-deep); }
.v8-package-top img { width:38px; height:38px; }
.v8-cta-main { color:var(--c-primary); font-weight:700; }
.v8-cta-main:hover { color:var(--c-primary-d); }

/* ---------- DARK accent sections (texture bg + white text) ---------- */
.section-dark, .v8-final, .bg-dark {
  position:relative; overflow:hidden; color:#fff;
  background:
    linear-gradient(135deg, rgba(15,23,32,.92), rgba(0,127,138,.78)),
    url("/assets/img/brand/bg_triangles_dark.jpg") center/cover no-repeat;
}
.v8-final .v8-final-card { background:transparent; border:none; text-align:center; max-width:760px; margin:0 auto; position:relative; z-index:2; padding:78px 0; }
.v8-final .v8-label, .bg-dark .v8-label { color:var(--c-amber); }
.v8-final h2, .bg-dark h2, .section-dark h2 { color:#fff; }
.v8-final h2::after, .bg-dark h2::after { content:""; display:block; width:56px; height:4px; background:var(--c-coral); border-radius:2px; margin:18px auto 0; }
.v8-final p, .bg-dark p { color:rgba(255,255,255,.85); }
.v8-final p { margin:18px auto 28px; max-width:56ch; }
.v8-final .btn-primary, .bg-dark .btn-primary { background:#fff; color:var(--c-charcoal); }
.v8-final .btn-primary:hover, .bg-dark .btn-primary:hover { background:var(--c-teal-light); }

/* ---------- Trust bar ---------- */
.v8-trust { background:#fff; border-top:1px solid var(--c-teal-light); border-bottom:1px solid var(--c-teal-light); }
.v8-trust .trust-label { color:var(--c-primary); text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:700; }

/* ---------- Footer — jeden template, koral jako akcent nagłówków kolumn ---------- */
.footer { background:var(--c-charcoal); }
.footer h4 { color:var(--c-coral); }

/* ---------- Subpage hero (photo bg, white text) — alias V7→V8 ----------
   Klasa .hero używana na podstronach (dla-firmy, dla-hr, o-nas, dla-lidera)
   renderuje identycznie z .v8-hero (dark overlay + photo bg + white text).
   Oba systemy są wizualnie spójne — celowa decyzja, nie dług techniczny.
   NIE zmieniać klas w HTML bez pełnego re-testu podstron. */
.hero {
  position:relative; overflow:hidden; color:#fff;
  background:
    linear-gradient(100deg, rgba(15,23,32,.85) 0%, rgba(8,105,114,.5) 60%, rgba(15,23,32,.3) 100%),
    var(--hero-photo, url("/assets/img/photos/team_table.jpg")) center/cover no-repeat;
  padding:96px 0 88px;
}
.hero::before { display:none; }
.hero > .container { position:relative; z-index:1; }
.hero h1 { color:#fff; font-weight:800; text-shadow:0 2px 30px rgba(0,0,0,.25); }
.hero h1::after { content:""; display:block; width:56px; height:4px; background:var(--c-coral); border-radius:2px; margin-top:22px; }
.hero-eyebrow { color:#fff; opacity:.85; }
.hero-lead { color:rgba(255,255,255,.92); }
.hero .btn-secondary { background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.5); color:#fff; }

/* per-page hero photo */
body.page-firma .hero{ --hero-photo:url("/assets/img/photos/pl_zespol_stol.jpg"); }
body.page-lider .hero{ --hero-photo:url("/assets/img/photos/pl_lider_biuro.jpg"); }
body.page-hr .hero{ --hero-photo:url("/assets/img/photos/conversation_group.jpg"); }
body.page-onas .hero{ --hero-photo:url("/assets/img/photos/pl_spotkanie_kawa.jpg"); }

.bg-brand { background:var(--c-teal-soft); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .v8-hero.has-photo .v8-hero-inner{ padding:64px 0 72px; }
  .v8-steps-row{ grid-template-columns:1fr; gap:20px; }
}
@media (max-width:480px){
  .btn-lg{ white-space:normal; text-align:center; line-height:1.3; }
  .v8-hero .v8-actions .btn, .hero-actions .btn{ width:100%; }
}

/* ---------- Product subpage hero photos ---------- */
body.page-diagnoza .v8-hero{ background:linear-gradient(100deg,rgba(15,23,32,.85),rgba(8,105,114,.5) 60%,rgba(15,23,32,.3)),url("/assets/img/photos/pl_zespol_stol.jpg") center/cover no-repeat; }
body.page-prism .v8-hero{ background:linear-gradient(100deg,rgba(15,23,32,.85),rgba(8,105,114,.5) 60%,rgba(15,23,32,.3)),url("/assets/img/photos/pl_lider_biuro.jpg") center/cover no-repeat; }
body.page-coaching .v8-hero{ background:linear-gradient(100deg,rgba(15,23,32,.85),rgba(8,105,114,.5) 60%,rgba(15,23,32,.3)),url("/assets/img/photos/pl_spotkanie_kawa.jpg") center/cover no-repeat; }
body.page-strategia .v8-hero{ background:linear-gradient(100deg,rgba(15,23,32,.85),rgba(8,105,114,.5) 60%,rgba(15,23,32,.3)),url("/assets/img/photos/team_table.jpg") center/cover no-repeat; }
body.page-szkolenia .v8-hero{ background:linear-gradient(100deg,rgba(15,23,32,.85),rgba(8,105,114,.5) 60%,rgba(15,23,32,.3)),url("/assets/img/photos/pl_warsztat.jpg") center/cover no-repeat; }
body.page-puls .v8-hero, body.page-audyt .v8-hero{ background:linear-gradient(100deg,rgba(15,23,32,.85),rgba(8,105,114,.5) 60%,rgba(15,23,32,.3)),url("/assets/img/photos/conversation_group.jpg") center/cover no-repeat; }
/* product hero: text white, constrained */
.v8-hero .v8-hero-copy{ color:#fff; }
.v8-hero h1{ color:#fff; }
.v8-hero .v8-kicker{ color:#fff; opacity:.85; }
.v8-hero p{ color:rgba(255,255,255,.9); }

/* ============================================================
   OVERRIDE page-v7 hero -> photo hero (specificity match, last wins)
   ============================================================ */
.page-v7 .hero {
  padding: 96px 0 88px; color:#fff;
  background:
    linear-gradient(100deg, rgba(15,23,32,.85) 0%, rgba(8,105,114,.5) 60%, rgba(15,23,32,.3) 100%),
    var(--hero-photo, url("/assets/img/photos/team_table.jpg")) center/cover no-repeat;
}
.page-v7 .hero:before { display:none; }
.page-v7 .hero h1 { color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.28); }
.page-v7 .hero-lead { color:rgba(255,255,255,.92); }
.page-v7 .hero-eyebrow, .page-v7 .eyebrow {
  color:#fff; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.14);
}
.page-v7 .hero .btn-secondary { background:rgba(255,255,255,.14) !important; border-color:rgba(255,255,255,.5) !important; color:#fff !important; }
/* hero photos per page (need page-v7 specificity) */
body.page-firma .hero{ --hero-photo:url("/assets/img/photos/pl_zespol_stol.jpg"); }
body.page-lider .hero{ --hero-photo:url("/assets/img/photos/pl_lider_biuro.jpg"); }
body.page-hr .hero{ --hero-photo:url("/assets/img/photos/conversation_group.jpg"); }
body.page-onas .hero{ --hero-photo:url("/assets/img/photos/pl_spotkanie_kawa.jpg"); }

/* ============================================================
   MOBILE HERO (home V9): zdjecie+logo na gorze, opis pod spodem
   Wysoka specyficznosc (body.home-v8) + na koncu pliku = wygrywa.
   ============================================================ */
@media (max-width: 820px) {
  /* MOBILE HERO = BANER ZDJECIA NA GORZE + TEKST POD SPODEM (czysty, bez nachodzenia).
     .v8-hero: ciemne, jednolite tlo; tekst pelna szerokosc, czytelny.
     .v8-hero-mobile-photo: baner ze zdjeciem (obaj wspinacze + szczyt), bez logo (logo jest w belce). */
  body.home-v8.light-hero .v8-hero {
    background: #0e2e33;
    color: #fff;
    padding: 0 0 36px;
    min-height: 0;
    position: relative;
  }
  body.home-v8.light-hero .v8-hero::after { content: none; }

  /* BANER ZDJECIA na gorze */
  body.home-v8.light-hero .v8-hero-mobile-photo {
    display: block;
    width: 100%;
    height: 300px;
    background:
      linear-gradient(180deg, rgba(8,41,46,.10) 0%, rgba(8,41,46,.06) 55%, rgba(14,46,51,.85) 100%),
      url("/assets/img/photos/hero_leader_coach.jpg") center 32%/cover no-repeat;
  }
  /* ukryj dawne logo wewnatrz banera (logo jest w nawigacji) */
  body.home-v8.light-hero .v8-hero-mobile-brand,
  body.home-v8.light-hero .v8-hero-mobile-logo,
  body.home-v8.light-hero .v8-hero-mobile-word { display: none; }

  /* TEKST pod banerem — pelna szerokosc, bez ograniczen, bez nachodzenia */
  body.home-v8.light-hero .v8-hero.has-photo .v8-hero-inner {
    padding: 28px 22px 4px 22px; max-width: none;
    position: relative; z-index: 2;
  }
  body.home-v8.light-hero .v8-hero .v8-hero-copy {
    color: #fff;
    padding: 0;
    max-width: 100%;
  }
  body.home-v8.light-hero .v8-hero h1,
  body.home-v8.light-hero .v8-hero p { max-width: 100%; }
  body.home-v8.light-hero .v8-hero h1 { color:#fff !important; text-shadow:none; font-size: clamp(34px, 9vw, 44px); line-height: 1.08; }
  body.home-v8.light-hero .v8-hero h1 .hero-accent { color: var(--c-teal-light); }
  body.home-v8.light-hero .v8-hero h1 br { display: none; }   /* niech laduje sie naturalnie */
  body.home-v8.light-hero .v8-hero p { color: rgba(255,255,255,.88) !important; text-shadow:none; }
  body.home-v8.light-hero .v8-hero .v8-actions { max-width: 100%; }
  body.home-v8.light-hero .v8-hero .v8-actions .btn { width: 100%; justify-content: center; }
  body.home-v8.light-hero .v8-hero .v8-kicker {
    color: rgba(255,255,255,.85) !important;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.22);
    backdrop-filter: none;
    opacity: 1;
  }
  body.home-v8.light-hero .v8-hero .btn-secondary {
    background: rgba(255,255,255,.1);
    border: 1.5px solid rgba(255,255,255,.3);
    color: #fff;
  }
  body.home-v8.light-hero .v8-hero .btn-secondary:hover {
    background: rgba(255,255,255,.2);
  }

  /* Redukcja pustej przestrzeni mobile */
  .cu-essence { padding: var(--s-5) 0; }
  .v8-section { padding: var(--s-6) 0; }
}

/* ============= Social Proof Section ============= */
.v8-proof-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-8);
  margin-bottom: var(--s-8);
  flex-wrap: wrap;
}

.v8-proof-stat {
  text-align: center;
  min-width: 120px;
}

.v8-proof-number {
  display: block;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  color: var(--c-primary);
  line-height: 1;
  margin-bottom: var(--s-2);
}

.v8-proof-label {
  font-size: var(--f-size-sm);
  color: var(--c-text-soft);
  font-weight: 600;
}

.v8-proof-logos {
  text-align: center;
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border-strong);
}

.v8-proof-logos-label {
  font-size: var(--f-size-xs);
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--s-4);
}

/* NAPRAWA CSS: .v8-proof-logos .trust-clients-list zamiast .trust-bar .trust-clients-list */
.v8-proof-logos .trust-clients-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--s-6);
  row-gap: var(--s-3);
  max-width: 900px;
  margin: 0 auto;
}

.v8-proof-logos .trust-clients-list span {
  font-size: var(--f-size-sm);
  font-weight: 600;
  color: #9aa3a3; /* text-gray-400 equivalent */
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: color .2s;
}

.v8-proof-logos .trust-clients-list span:hover {
  color: #6b7280; /* text-gray-600 equivalent */
}
}

/* ============================================================
   BRAND ESSENCE — jasne tlo, duze logo, pasek 5 ikon (wg benchmarku)
   ============================================================ */
.cu-essence {
  position:relative; overflow:hidden;
  background: linear-gradient(120deg, #f4f7f7 0%, #eaf0f0 100%);
  padding: 64px 0 0;
}
.cu-essence-bg {
  position:absolute; top:-18%; right:0; width:42%; max-width:300px; height:130%;
  background: url("/assets/img/brand/logo_penrose_v3.png") center/contain no-repeat;
  opacity:.07; pointer-events:none;
  transform: rotate(6deg); transform-origin: right center;
}
@media (max-width: 820px) {
  .cu-essence-bg { width:180px; right:0; transform:none; }
}
.cu-essence-inner { position:relative; z-index:1; }
.cu-essence-brand { text-align:center; padding: 8px 0 48px; }
.cu-essence-mark { display:block; margin:0 auto 18px; width:78px; height:auto; }
.cu-essence-word {
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-weight:800; font-size:clamp(34px,5vw,52px); letter-spacing:-.02em;
  color:#16363b; line-height:1;
}
.cu-essence-word span { color:#2f8f86; }   /* "Up" jasniejszy teal */
.cu-essence-tag {
  margin-top:14px; font-size:12px; font-weight:700; letter-spacing:.22em;
  color:#1d4a4a; text-transform:uppercase;
}
/* ciemny pasek 5 ikon */
.cu-essence-bar {
  display:grid; grid-template-columns:repeat(5,1fr);
  background:#1b3d40; border-radius:20px 20px 0 0;
  padding:30px 20px; gap:16px;
}
.cu-essence-item { text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
.cu-essence-item img {
  width:34px; height:34px;
  /* zamiana teal -> bialy */
  filter: brightness(0) invert(1); opacity:.92;
}
.cu-essence-item span {
  font-size:10px; font-weight:700; letter-spacing:.10em; line-height:1.5;
  color:#dfe9e8; text-transform:uppercase;
}
@media (max-width: 700px) {
  .cu-essence-bar { grid-template-columns:repeat(2,1fr); gap:24px 12px; border-radius:18px; }
  .cu-essence-item:last-child { grid-column:1 / -1; }
  .cu-essence-word { font-size:38px; }
}

/* ============================================================
   DESKTOP HERO (home V9) — CIEMNY kontrastowy tekst na jasnym overlayu
   Najwyzszy priorytet: body.home-v8 + koniec pliku. Tylko desktop (>820px).
   ============================================================ */
/* Tylko strony z JASNYM hero (brak klasy page-* z ciemnym overlayem):
   strona glowna + narzedzia bez page-* (mapowanie, barometr, strategiczny-kwestionariusz). */
@media (min-width: 821px) {
  body.home-v8.light-hero .v8-hero { color: var(--ink); }
  body.home-v8.light-hero .v8-hero .v8-hero-copy { color: var(--ink); }
  body.home-v8.light-hero .v8-hero .v8-kicker {
    color: var(--teal); background: rgba(255,255,255,.65);
    border: 1px solid rgba(8,105,114,.30); backdrop-filter: blur(4px); opacity:1;
  }
  body.home-v8.light-hero .v8-hero h1 {
    color: #16363b; text-shadow: none;
  }
  body.home-v8.light-hero .v8-hero h1 .hero-accent { color: var(--teal); }
  body.home-v8.light-hero .v8-hero p { color: rgba(16,37,39,.80); }
  body.home-v8.light-hero .v8-hero .hero-rule { background: var(--c-coral); }
  body.home-v8.light-hero .v8-hero .btn-primary {
    background: var(--teal); color:#fff; border:0;
  }
  body.home-v8.light-hero .v8-hero .btn-secondary {
    background: rgba(255,255,255,.55); border:1.5px solid rgba(8,105,114,.45); color: var(--teal);
  }
  body.home-v8.light-hero .v8-hero .btn-secondary:hover { background: rgba(255,255,255,.8); }
}