/* ============================================================
   J.Dauman Logistics — Główny arkusz stylów
   Kolory marki: fiolet #3B1F72 | róż #997574 | koral #CC5652 | biel #ffffff
   ============================================================ */

/* ── Zmienne ──────────────────────────────────────────────── */
:root {
  --navy:        #3B1F72;
  --navy-dark:   #1F0D45;
  --navy-light:  #4E2C96;
  --gold:        #997574;
  --gold-light:  #b09090;
  --gold-dark:   #7d5e5d;
  --coral:       #CC5652;
  --coral-light: #e07572;
  --coral-dark:  #a83f3c;
  --white:       #ffffff;
  --purple-bg:   #F7F3FF;
  --gray-50:     #f8f9fa;
  --gray-100:    #f1f3f5;
  --gray-200:    #e9ecef;
  --gray-400:    #adb5bd;
  --gray-600:    #6c757d;
  --gray-800:    #343a40;
  --text-primary: #3B1F72;
  --text-secondary: #4a5568;
  --text-light:  #718096;

  --font-head:   'Inter', 'Segoe UI', sans-serif;
  --font-body:   'Inter', 'Segoe UI', sans-serif;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;

  --shadow-sm:   0 1px 3px rgba(59,31,114,.08), 0 1px 2px rgba(59,31,114,.06);
  --shadow-md:   0 4px 16px rgba(59,31,114,.10);
  --shadow-lg:   0 8px 32px rgba(59,31,114,.16);

  --transition:  220ms ease;
  --max-w:       1200px;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

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

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── Utility ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 24px;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(153,117,116,.12);
  border: 1px solid rgba(153,117,116,.25);
  border-radius: 100px;
  padding: 4px 12px;
  margin-bottom: 14px;
}

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}

.section-subtitle {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 640px;
}

.text-center { text-align: center; }
.text-center .section-subtitle { margin-inline: auto; }

/* ── Skip link (accessibility) ────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 8px 16px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 600;
  border-radius: var(--radius-sm);
  z-index: 9999;
}
.skip-link:focus { top: 16px; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  font-size: .9375rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
  white-space: nowrap;
  min-height: 48px;
}
.btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.btn-primary {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(153,117,116,.35);
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.5);
}
.btn-outline:hover {
  border-color: var(--white);
  background: rgba(255,255,255,.08);
}
.btn-outline-navy {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline-navy:hover {
  background: var(--navy);
  color: var(--white);
}

/* ── Navigation ───────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition);
}
.navbar.scrolled {
  background: var(--white);
  box-shadow: 0 2px 16px rgba(59,31,114,.12);
}
.navbar.scrolled .nav-links a:not(.btn) {
  color: var(--navy);
}
.navbar.scrolled .nav-links a:not(.btn):hover,
.navbar.scrolled .nav-links a.active {
  color: var(--gold);
}
.navbar.scrolled .logo-img {
  filter: none;
}
.navbar.scrolled .hamburger span {
  background: var(--navy);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.nav-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.nav-logo-main {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.01em;
}
.nav-logo-sub {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-size: .9375rem;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  transition: color var(--transition);
}
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--gold); }
.nav-links a:focus-visible { outline: 2px solid var(--gold); border-radius: 2px; }
.nav-cta { margin-left: 8px; }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .hamburger { display: flex; }
  .nav-links {
    position: fixed;
    inset: 72px 0 0;
    background: var(--navy-dark);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 24px;
    transform: translateX(100%);
    transition: transform var(--transition);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { padding: 14px 0; width: 100%; border-bottom: 1px solid rgba(59,31,114,.1); }
  .navbar.scrolled .nav-links { background: var(--white); }
  .navbar.scrolled .nav-links a { border-bottom-color: var(--gray-200); }
  .nav-cta { margin-left: 0; margin-top: 16px; }
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 72px;
  background: var(--navy-dark);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 75% 50%, rgba(153,117,116,.08) 0%, transparent 60%),
    linear-gradient(115deg, rgba(31,13,69,.38) 0%, rgba(59,31,114,.24) 42%, rgba(107,61,94,.08) 100%);
}
.hero-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(153,117,116,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153,117,116,.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  padding-block: 80px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(153,117,116,.15);
  border: 1px solid rgba(153,117,116,.3);
  border-radius: 100px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
  cursor: pointer;
}
a.hero-badge:hover {
  background: rgba(153,117,116,.28);
  border-color: rgba(153,117,116,.55);
}
.hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 3px rgba(204,86,82,.25);
}
.hero h1 {
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 24px;
}
.hero h1 em {
  font-style: normal;
  color: var(--coral-light);
}
.hero-lead {
  font-size: clamp(1rem, 2vw, 1.1875rem);
  line-height: 1.7;
  color: rgba(255,255,255,.75);
  margin-bottom: 40px;
  max-width: 560px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-stats {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
}
.stat-card {
  background: rgba(153,117,116,.18);
  border: 1px solid rgba(153,117,116,.4);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  text-align: center;
  backdrop-filter: blur(8px);
  min-width: 180px;
}
.stat-number {
  display: block;
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--coral-light);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-label {
  font-size: .8125rem;
  color: rgba(255,255,255,.65);
  font-weight: 500;
}
.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.5);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  animation: bounce 2s ease-in-out infinite;
}
.hero-scroll svg { animation: none; }

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

@media (max-width: 1100px) {
  .hero-stats { display: none; }
}
@media (max-width: 640px) {
  .hero-content { padding-block: 60px 40px; }
}

/* ── Services ─────────────────────────────────────────────── */
.services {
  padding-block: 100px;
  background: var(--purple-bg);
}
.services-header { margin-bottom: 60px; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  border: 1px solid var(--gray-200);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--coral) 0%, var(--gold) 100%);
  transform: scaleX(.25);
  transform-origin: left;
  transition: transform var(--transition);
}
.service-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: transparent;
}
.service-card:hover::before { transform: scaleX(1); }

.service-icon {
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59,31,114,.07);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  color: var(--navy);
}
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.service-card p {
  font-size: .9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.card-ext-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 16px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--navy-light);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.card-ext-link:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}

.service-tag {
  display: inline-block;
  margin-top: 16px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* ── About ────────────────────────────────────────────────── */
.about {
  padding-block: 100px;
  background: var(--white);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-image-block {
  position: relative;
}
.about-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.25);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.about-badge-float {
  position: absolute;
  bottom: -20px; right: -20px;
  background: var(--gold);
  color: var(--navy);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.about-badge-float strong {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}
.about-badge-float span {
  font-size: .8125rem;
  font-weight: 600;
}
.about-content .section-subtitle { margin-bottom: 24px; }
.about-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
}
.about-list-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.about-list-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  color: var(--gold);
  margin-top: 2px;
}
.about-list-text {
  font-size: .9375rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.about-list-text strong { color: var(--navy); }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-badge-float { right: 0; }
}

/* ── Why Us ───────────────────────────────────────────────── */
.why-us {
  padding-block: 100px;
  background: var(--gray-50);
  position: relative;
  overflow: hidden;
}
.why-us-bg { display: none; }
.why-us .container { position: relative; z-index: 1; }
.why-us .section-title { color: var(--navy); }
.why-us .section-subtitle { color: var(--text-secondary); }
.why-us-header { margin-bottom: 60px; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.why-item {
  padding: 36px 28px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--coral);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition), transform var(--transition);
}
.why-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.why-number {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--coral);
  opacity: .25;
  line-height: 1;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.why-item h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.why-item p {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ── Testimonial / Zaufanie ───────────────────────────────── */
.trust {
  padding-block: 80px;
  background: var(--purple-bg);
  border-top: 1px solid rgba(59,31,114,.08);
}
.trust-header { margin-bottom: 48px; }
.trust-logos {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.trust-logo-item {
  width: 160px;
  height: 80px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.trust-logo-item:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--gray-400);
}
.trust-logo-item img {
  max-width: 100%;
  max-height: 46px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(100%) opacity(.65);
  transition: filter var(--transition);
}
.trust-logo-item:hover img {
  filter: grayscale(0%) opacity(1);
}

/* ── Contact ──────────────────────────────────────────────── */
.contact {
  padding-block: 100px;
  background: var(--white);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.contact-info { padding-top: 8px; }
.contact-info .section-subtitle { margin-bottom: 40px; }
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-detail {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.contact-detail-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(153,117,116,.12);
  border-radius: var(--radius-md);
  color: var(--gold-dark);
}
.contact-detail-text strong {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}
.contact-detail-text span {
  font-size: .9375rem;
  color: var(--text-secondary);
}
.contact-form {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: 40px;
  border: 1px solid var(--gray-200);
}
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}
.form-group label .required { color: var(--gold-dark); margin-left: 2px; }
.form-control {
  width: 100%;
  padding: 12px 16px;
  font-size: .9375rem;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition);
  min-height: 48px;
}
.form-control:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(59,31,114,.1);
}
.form-control.error { border-color: #e53e3e; }
.form-error {
  font-size: .8125rem;
  color: #c53030;
  margin-top: 4px;
  display: none;
}
.form-error.visible { display: block; }
textarea.form-control { resize: vertical; min-height: 120px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
}
.form-checkbox input {
  width: 18px; height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--navy);
}
.form-checkbox label {
  font-size: .8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
  cursor: pointer;
}
.form-submit { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .contact-form { padding: 24px; }
}

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  background: var(--navy-dark);
  color: rgba(255,255,255,.65);
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--coral) 0%, var(--gold) 100%) 1;
}
.footer-main {
  padding-block: 64px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-brand .nav-logo { margin-bottom: 16px; }
.footer-brand p {
  font-size: .875rem;
  line-height: 1.7;
  max-width: 280px;
}
.footer-col h4 {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a {
  font-size: .875rem;
  transition: color var(--transition);
}
.footer-col ul li a:hover { color: var(--gold); }
.footer-bottom {
  padding-block: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom p { font-size: .8125rem; }
.footer-bottom a { color: var(--gold); }
.footer-links {
  display: flex;
  gap: 24px;
}
.footer-links a { font-size: .8125rem; transition: color var(--transition); }
.footer-links a:hover { color: var(--gold); }

@media (max-width: 900px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .footer-main { grid-template-columns: 1fr; }
}

/* ── Team section ─────────────────────────────────────────── */
.team {
  padding-block: 96px;
  background: var(--gray-50);
}
.team-header { margin-bottom: 56px; }
.team-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: start;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.team-photo-wrap {
  position: relative;
  height: 100%;
  min-height: 360px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  position: absolute;
  inset: 0;
}
.team-photo-placeholder {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255,255,255,.35);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.team-photo-placeholder svg { opacity: .3; }
.team-info { padding: 40px 40px 40px 0; }
.team-name {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}
.team-role {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 20px;
  letter-spacing: .02em;
}
.team-tagline {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy);
  font-style: italic;
  border-left: 3px solid var(--gold);
  padding-left: 16px;
  margin-bottom: 20px;
  line-height: 1.5;
}
.team-bio {
  font-size: .9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 24px;
}
.team-competences {
  margin-bottom: 28px;
}
.team-competences h4 {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
}
.team-competences ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.team-competences li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.team-competences li::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 7px;
}
.team-location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  color: var(--text-light);
  font-weight: 500;
}
.team-location svg { color: var(--gold); flex-shrink: 0; }
.team-linkedin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 9px 18px;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  color: var(--navy);
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.team-linkedin-btn:hover {
  background: var(--purple-bg);
  border-color: var(--navy-light);
  box-shadow: var(--shadow-sm);
}
.team-linkedin-btn svg { color: #0a66c2; }

@media (max-width: 860px) {
  .team-card { grid-template-columns: 1fr; }
  .team-photo-wrap { min-height: 280px; }
  .team-info { padding: 32px; }
}

/* ── Service card expandable sections ────────────────────────── */
.service-expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.service-card.expanded .service-expand {
  max-height: 700px;
}
.service-expand-inner {
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
  margin-top: 16px;
}
.service-expand-inner p {
  font-size: .875rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 8px;
}
.service-expand-inner ul {
  list-style: none;
  margin: 10px 0 14px;
}
.service-expand-inner ul li {
  font-size: .875rem;
  color: var(--text-secondary);
  padding: 4px 0 4px 20px;
  position: relative;
  line-height: 1.55;
}
.service-expand-inner ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--coral);
  font-weight: 700;
}
.service-expand-inner .expand-note {
  font-size: .8125rem;
  color: var(--text-light);
  font-style: italic;
  margin-top: 10px;
}
.service-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  background: none;
  border: none;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 0;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color var(--transition);
}
.service-toggle-btn svg {
  transition: transform .28s ease;
  flex-shrink: 0;
}
.service-card.expanded .service-toggle-btn svg {
  transform: rotate(180deg);
}
.service-toggle-btn:hover { color: var(--coral); }

/* ── Team — smaller member cards ─────────────────────────────── */
.team-members-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.team-member-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  padding: 32px 20px 28px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.team-member-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.team-member-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--purple-bg);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.02em;
  border: 2px solid var(--gray-200);
}
.team-member-card.placeholder .team-member-avatar {
  background: var(--gray-100);
  color: var(--gray-400);
  font-size: 1.25rem;
}
.team-member-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.team-member-role {
  font-size: .8125rem;
  color: var(--text-light);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .team-members-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ── Toast / Form feedback ────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  padding: 14px 20px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: .9375rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9000;
  transform: translateY(100px);
  opacity: 0;
  transition: transform 260ms ease, opacity 260ms ease;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast svg { color: var(--gold); flex-shrink: 0; }

/* ── Active nav link ──────────────────────────────────────── */
.nav-links a.active { color: var(--coral) !important; }

/* ── Navbar brand accent line ─────────────────────────────── */
.navbar.scrolled::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--coral) 0%, var(--gold) 100%);
}

/* ── Logo image in navbar ─────────────────────────────────── */
.nav-logo-img { display: flex; align-items: center; }
.logo-img {
  height: 52px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition: opacity var(--transition);
}
.nav-logo-img:hover .logo-img { opacity: .85; }

/* ── About: real photo ────────────────────────────────────── */
.about-real-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg);
  display: block;
}

.about-photos-duo {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 8px;
  height: 420px;
}

.about-duo-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg);
  display: block;
}

.about-duo-side {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about-duo-office {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.about-office-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(31, 13, 69, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  padding: 5px 11px;
  border-radius: 100px;
}

/* ── Office photo strip (o-firmie.html) ───────────────────── */
.office-strip {
  position: relative;
  overflow: hidden;
  height: 340px;
}

.office-strip-img-wrap {
  width: 100%;
  height: 100%;
}

.office-strip-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}

.office-strip-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(31, 13, 69, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 8px 18px;
  border-radius: 100px;
  white-space: nowrap;
}

/* ── Hero background image overlay ───────────────────────── */
.hero-img-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/pierre9x6-london-4395915.jpg');
  background-size: cover;
  background-position: center 35%;
  opacity: 1;
}

/* ── Page hero (sub-pages) ────────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 65%, #6B3D5E 100%);
  padding: 140px 0 64px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--coral) 0%, var(--gold) 100%);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(153,117,116,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153,117,116,.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--white);
  margin-top: 8px;
  margin-bottom: 12px;
  line-height: 1.15;
}
.page-hero p {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.7);
  max-width: 560px;
  line-height: 1.65;
}

/* ── Pain Points — client problems ───────────────────────── */
.pain-section {
  padding-block: 96px;
  background: var(--white);
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 52px;
}

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

.pain-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius-lg);
  padding: 36px 32px 28px;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}

.pain-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.pain-quote-mark {
  position: absolute;
  top: 8px;
  right: 18px;
  font-size: 6rem;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--coral);
  opacity: .08;
  pointer-events: none;
  user-select: none;
}

.pain-headline {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 14px;
  line-height: 1.45;
}

.pain-body {
  font-size: .9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 20px;
}

.pain-solution {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.45;
}

.pain-solution svg {
  flex-shrink: 0;
  color: var(--coral);
  margin-top: 2px;
}

/* ── Home: services overview ──────────────────────────────── */
.home-services {
  padding-block: 96px;
  background: var(--purple-bg);
}
.home-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 900px) { .home-services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .home-services-grid { grid-template-columns: 1fr; } }
.home-service-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.home-service-item:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.home-service-item .service-icon { margin-bottom: 14px; }
.home-service-item h3 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.home-service-item p { font-size: .875rem; color: var(--text-secondary); line-height: 1.6; }

/* ── How it works — 3-step process ───────────────────────── */
.how-it-works {
  padding-block: 100px;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.how-it-works::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(204,86,82,.07) 0%, transparent 60%);
  pointer-events: none;
}
.how-it-works .container { position: relative; z-index: 1; }
.how-it-works .section-title { color: var(--white); }
.how-it-works .section-subtitle { color: rgba(255,255,255,.65); }

.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 60px;
  position: relative;
}
.how-steps::before {
  content: '';
  position: absolute;
  top: 35px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(204,86,82,.4) 20%, rgba(204,86,82,.4) 80%, transparent);
}
.how-step {
  text-align: center;
  padding: 0 32px;
}
.how-step-num {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--coral);
  color: var(--white);
  font-size: 1.375rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 8px rgba(204,86,82,.15);
}
.how-step h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.4;
}
.how-step p {
  font-size: .9rem;
  color: rgba(255,255,255,.6);
  line-height: 1.7;
}
@media (max-width: 768px) {
  .how-steps { grid-template-columns: 1fr; gap: 40px; }
  .how-steps::before { display: none; }
}

/* ── Article pages ────────────────────────────────────────── */
.article-layout {
  padding-block: 72px 96px;
  background: var(--white);
}
.article-container {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 64px;
  align-items: start;
}
@media (max-width: 1024px) { .article-container { grid-template-columns: 1fr; } }

.article-body h2 {
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: 700;
  color: var(--navy);
  margin: 48px 0 16px;
  line-height: 1.3;
}
.article-body h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  margin: 32px 0 10px;
}
.article-body p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 18px;
}
.article-body ul, .article-body ol {
  padding-left: 22px;
  margin-bottom: 18px;
}
.article-body li {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 8px;
}
.article-body strong { color: var(--navy); font-weight: 600; }

.article-tip {
  background: var(--purple-bg);
  border-left: 4px solid var(--navy);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px 24px;
  margin: 28px 0;
}
.article-tip p { margin: 0; color: var(--navy); font-weight: 500; }

.article-warning {
  background: #fff8f0;
  border-left: 4px solid var(--coral);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px 24px;
  margin: 28px 0;
}
.article-warning p { margin: 0; color: #7a3830; font-weight: 500; }

.article-sidebar {
  position: sticky;
  top: 100px;
}
.article-cta-box {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  color: var(--white);
}
.article-cta-box h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.4;
}
.article-cta-box p {
  font-size: .875rem;
  color: rgba(255,255,255,.7);
  line-height: 1.65;
  margin-bottom: 20px;
}
.article-cta-box .btn { width: 100%; justify-content: center; }

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy-light);
  text-decoration: none;
  margin-bottom: 40px;
  transition: color var(--transition);
}
.article-back:hover { color: var(--coral); }

.article-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* ── Home: about teaser ───────────────────────────────────── */
.home-about {
  padding-block: 96px;
  background: var(--white);
}
.home-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
@media (max-width: 860px) { .home-about-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ── CTA section ──────────────────────────────────────────── */
.cta-section {
  background: var(--gold);
  padding-block: 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%);
}
.cta-section .container { position: relative; z-index: 1; }
.cta-section h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 16px;
}
.cta-section p {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.88);
  max-width: 520px;
  margin: 0 auto 36px;
  line-height: 1.65;
}
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-section .btn-primary {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.cta-section .btn-primary:hover {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  box-shadow: 0 6px 20px rgba(31,13,69,.35);
}
.cta-section .btn-outline {
  color: var(--white);
  border-color: rgba(255,255,255,.6);
}
.cta-section .btn-outline:hover {
  background: rgba(255,255,255,.15);
  border-color: var(--white);
}

/* ── Animations ───────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ── Footer social icons ──────────────────────────────────── */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  color: rgba(255,255,255,.7);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  text-decoration: none;
}
.footer-social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

/* ── Articles section ─────────────────────────────────────── */
.articles-section {
  padding-block: 96px;
  background: var(--white);
}
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}
@media (max-width: 900px) { .articles-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .articles-grid { grid-template-columns: 1fr; } }

.article-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
.article-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.article-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.article-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-card-img-icon {
  color: rgba(255,255,255,.18);
}
.article-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.article-category {
  display: inline-flex;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(153,117,116,.12);
  border: 1px solid rgba(153,117,116,.25);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}
.article-date {
  font-size: .8125rem;
  color: var(--text-light);
}
.article-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.4;
}
.article-card p {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 20px;
}
.article-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  transition: gap 180ms ease, color 180ms ease;
  margin-top: auto;
}
.article-read-more:hover {
  color: var(--gold-dark);
  gap: 10px;
}

/* Featured article — full-width top card */
.article-card-featured {
  grid-column: 1 / -1;
  flex-direction: row;
}
.article-card-featured .article-card-img {
  aspect-ratio: auto;
  min-height: 260px;
  flex: 0 0 42%;
}
.article-card-featured .article-card-body {
  padding: 36px 40px;
}
.article-card-featured h3 {
  font-size: 1.375rem;
  margin-bottom: 14px;
}
@media (max-width: 700px) {
  .article-card-featured { flex-direction: column; }
  .article-card-featured .article-card-img { min-height: 200px; flex: none; }
  .article-card-featured .article-card-body { padding: 24px; }
}

/* Newsletter / brak artykułów */
.articles-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 24px;
  color: var(--text-light);
}
.articles-empty svg { color: var(--gold); margin-bottom: 16px; opacity: .6; }
.articles-empty p { font-size: 1rem; }

/* ── DECORATIVE SQUARES (brand pattern) ── */
.sq-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  user-select: none;
}
.sq-deco span {
  position: absolute;
  display: block;
  border-radius: 2px;
}
/* Brand square colors — from nakładki palette */
.sqc1 { background: rgba(196,158,154,.55); }   /* muted mauve */
.sqc2 { background: rgba(200,118, 98,.50); }   /* terracotta */
.sqc3 { background: rgba(230,194,180,.65); }   /* light peach */
.sqc4 { background: rgba(172,130,126,.45); }   /* dusty rose */
.sqc5 { background: rgba(134, 96,108,.38); }   /* dark plum */
@media (max-width: 768px) {
  .sq-deco span { opacity: .6; transform: scale(.75); }
}

/* ── FOR-WHO NUMBERED SECTION ── */
.for-who {
  padding: 96px 0;
  background: var(--white);
}
.for-who-list {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
}
.for-who-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: start;
  gap: 12px 32px;
  padding: 36px 0;
  border-bottom: 1px solid var(--gray-200);
}
.for-who-item:first-child { border-top: 1px solid var(--gray-200); }
.for-who-num {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--gray-200);
  line-height: 1;
  padding-top: 4px;
  transition: color 220ms ease;
  font-variant-numeric: tabular-nums;
}
.for-who-item:hover .for-who-num { color: var(--gold); }
.for-who-body h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.35;
}
.for-who-body p {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 560px;
  margin: 0;
}
.for-who-cta {
  font-size: .825rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  padding-top: 6px;
  transition: color 180ms ease;
  opacity: 0;
  transition: opacity 200ms ease, color 180ms ease;
}
.for-who-item:hover .for-who-cta { opacity: 1; }
.for-who-cta:hover { color: var(--gold-dark); }
@media (max-width: 768px) {
  .for-who-item {
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto;
  }
  .for-who-num { font-size: 1.75rem; }
  .for-who-cta { grid-column: 2; opacity: 1; }
}

/* ── TAGLINE BLOCK ── */
.tagline-block {
  background: var(--navy);
  padding: 80px 0;
  text-align: center;
}
.tagline-quote {
  margin: 0 auto;
  max-width: 820px;
  font-size: clamp(1.25rem, 3vw, 1.875rem);
  font-weight: 400;
  color: rgba(255,255,255,.65);
  line-height: 1.55;
  font-style: normal;
}
.tagline-quote strong {
  color: var(--white);
  font-weight: 800;
  display: block;
  margin-top: 6px;
}

/* ── TEAM EVENTS / SPEAKER PHOTOS ── */
.team-events {
  margin-top: 56px;
  padding: 48px 0 0;
  border-top: 1px solid var(--gray-200);
}
.team-events-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.team-event-photo {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--gray-100);
}
.team-event-photo img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 420ms ease;
}
.team-event-photo:hover img {
  transform: scale(1.04);
}
@media (max-width: 900px) {
  .team-events-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .team-events-grid { grid-template-columns: 1fr 1fr; }
}

/* ── HERO ENTRANCE SEQUENCE ───────────────────────────────── */
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-stats-enter {
  from { opacity: 0; transform: translateY(calc(-50% + 28px)); }
  to   { opacity: 1; transform: translateY(-50%); }
}
.hero-badge              { animation: hero-enter .65s cubic-bezier(.22,.8,.36,1) .05s both; }
.hero-content h1         { animation: hero-enter .75s cubic-bezier(.22,.8,.36,1) .18s both; }
.hero-lead               { animation: hero-enter .75s cubic-bezier(.22,.8,.36,1) .34s both; }
.hero-actions            { animation: hero-enter .75s cubic-bezier(.22,.8,.36,1) .52s both; }
.hero-stats              { animation: hero-stats-enter .75s cubic-bezier(.22,.8,.36,1) .72s both; }

/* ── PAGE HERO ENTRANCE (podstrony) ─────────────────────────── */
.page-hero .container > *:nth-child(1) { animation: hero-enter .70s cubic-bezier(.22,.8,.36,1) .06s both; }
.page-hero .container > *:nth-child(2) { animation: hero-enter .70s cubic-bezier(.22,.8,.36,1) .22s both; }
.page-hero .container > *:nth-child(3) { animation: hero-enter .70s cubic-bezier(.22,.8,.36,1) .38s both; }

/* ── DECORATIVE SQUARES FLOAT ─────────────────────────────── */
@keyframes sq-float {
  0%, 100% { transform: translateY(0)   rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(4deg); }
}
.sq-deco span                { animation: sq-float var(--d, 6s) ease-in-out var(--dl, 0s) infinite; }
.sq-deco span:nth-child(1)   { --d: 7.0s; --dl:  0.0s; }
.sq-deco span:nth-child(2)   { --d: 5.5s; --dl: -1.5s; }
.sq-deco span:nth-child(3)   { --d: 8.2s; --dl: -3.0s; }
.sq-deco span:nth-child(4)   { --d: 6.5s; --dl: -2.2s; }
.sq-deco span:nth-child(5)   { --d: 7.8s; --dl: -4.0s; }
.sq-deco span:nth-child(6)   { --d: 5.2s; --dl: -1.0s; }

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-badge, .hero-content h1, .hero-lead, .hero-actions, .hero-stats,
  .page-hero .container > *:nth-child(1),
  .page-hero .container > *:nth-child(2),
  .page-hero .container > *:nth-child(3) { animation: none; opacity: 1; transform: none; }
  .sq-deco span { animation: none; }
}
/* disable float on mobile — preserve static scale(.75) */
@media (max-width: 768px) {
  .sq-deco span { animation: none; }
}

/* ── J.Dauman Group timeline ─────────────────────────────── */
.jdg-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  margin: 48px 0 56px;
}
.jdg-timeline::before {
  content: '';
  position: absolute;
  top: 17px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(153,117,116,.3) 100%);
  z-index: 0;
}
.jdg-tl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 14px;
  position: relative;
  z-index: 1;
}
.jdg-tl-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(59,31,114,.1);
}
.jdg-tl-dot::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
}
.jdg-tl-year {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 10px;
}
.jdg-tl-desc {
  font-size: .8125rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}
.jdg-photos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 52px;
}
.jdg-photo-slot {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  background: var(--gray-100);
  box-shadow: 0 4px 20px rgba(59,31,114,.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.jdg-photo-slot:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(59,31,114,.18); }
.jdg-photo-slot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .4s ease;
}
.jdg-photo-slot:hover img { transform: scale(1.04); }
.jdg-photo-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 14px 12px;
  background: linear-gradient(to top, rgba(31,13,69,.72) 0%, transparent 100%);
  color: #fff;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .01em;
}
@media (max-width: 900px) {
  .jdg-timeline { grid-template-columns: 1fr 1fr; }
  .jdg-timeline::before { display: none; }
  .jdg-photos-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .jdg-timeline { grid-template-columns: 1fr; }
  .jdg-tl-item { flex-direction: row; text-align: left; align-items: flex-start; gap: 16px; }
  .jdg-tl-dot { flex-shrink: 0; margin-bottom: 0; }
  .jdg-photos-grid { grid-template-columns: 1fr 1fr; }
}

/* ── ICP — Dla kogo / Z kim pracujemy ───────────────────── */
.icp-section {
  padding-block: 88px;
  background: var(--purple-bg);
}
.icp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.icp-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  transition: box-shadow var(--transition);
}
.icp-card:hover { box-shadow: var(--shadow-md); }
.icp-card.core { border-color: rgba(153,117,116,.5); border-width: 1.5px; }
.icp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.icp-letter {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--navy);
  color: var(--white);
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icp-card.core .icp-letter { background: var(--gold); color: var(--navy); }
.icp-badge {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--gray-100);
  color: var(--text-light);
}
.icp-badge.core { background: rgba(153,117,116,.12); color: var(--gold-dark); }
.icp-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.icp-desc {
  font-size: .875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 16px;
}
.icp-meta-row {
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 16px;
}
.icp-meta-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-light);
  margin-bottom: 3px;
}
.icp-meta-value {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--navy);
}
.icp-pain { border-top: 1px solid var(--gray-200); padding-top: 14px; }
.icp-pain-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-light);
  margin-bottom: 8px;
}
.icp-quote {
  font-size: .8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
  padding: 10px 14px;
  background: var(--gray-50);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0;
}
@media (max-width: 768px) { .icp-grid { grid-template-columns: 1fr; } }

/* ── Pain points banner (uslugi.html) ────────────────────── */
.pain-banner {
  margin-top: 48px;
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  position: relative;
  overflow: hidden;
}
.pain-banner::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(153,117,116,.06);
  pointer-events: none;
}
.pain-banner-head { margin-bottom: 32px; position: relative; z-index: 1; }
.pain-banner-head h3 {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
}
.pain-banner-head p {
  font-size: .9rem;
  color: rgba(255,255,255,.6);
  line-height: 1.65;
  max-width: 560px;
}
.pain-banner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  position: relative;
  z-index: 1;
}
.pain-banner-item {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.pain-banner-quote {
  font-size: .8125rem;
  color: rgba(255,255,255,.82);
  line-height: 1.6;
  font-style: italic;
  margin: 0 0 12px;
}
.pain-banner-fix {
  font-size: .775rem;
  color: var(--gold-light);
  line-height: 1.5;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-style: normal;
  margin: 0;
}
.pain-banner-fix::before { content: '→'; flex-shrink: 0; }
@media (max-width: 900px) {
  .pain-banner-grid { grid-template-columns: 1fr 1fr; }
  .pain-banner { padding: 32px 28px; }
}
@media (max-width: 560px) { .pain-banner-grid { grid-template-columns: 1fr; } }

/* ── Cookie consent banner ───────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(130%);
  width: calc(100% - 32px);
  max-width: 680px;
  background: var(--navy-dark);
  color: var(--white);
  border-radius: 16px;
  padding: 24px 44px 24px 28px;
  box-shadow: 0 16px 48px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.2);
  z-index: 9100;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .48s cubic-bezier(.22,.8,.36,1), opacity .48s ease;
  opacity: 0;
  pointer-events: none;
}
.cookie-banner.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cookie-banner.hiding {
  transform: translateX(-50%) translateY(130%);
  opacity: 0;
  pointer-events: none;
}
.cookie-banner-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}
.cookie-banner-body {
  flex: 1;
}
.cookie-banner-title {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 6px;
}
.cookie-banner-text {
  font-size: .8125rem;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
  margin: 0;
}
.cookie-banner-text a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.cookie-btn-accept {
  padding: 9px 20px;
  background: var(--coral);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.cookie-btn-accept:hover {
  background: var(--coral-dark);
  transform: translateY(-1px);
}
.cookie-btn-necessary {
  padding: 9px 20px;
  background: transparent;
  color: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.cookie-btn-necessary:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.35);
  color: var(--white);
}
.cookie-banner-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: rgba(255,255,255,.35);
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition);
  border-radius: 6px;
  line-height: 1;
}
.cookie-banner-close:hover { color: var(--white); }
@media (max-width: 540px) {
  .cookie-banner {
    bottom: 12px;
    padding: 20px 40px 20px 20px;
    gap: 10px;
  }
  .cookie-banner-icon { display: none; }
  .cookie-banner-actions { gap: 8px; }
  .cookie-btn-accept, .cookie-btn-necessary { font-size: .75rem; padding: 8px 14px; }
}