/* Unified card language: cooperation-card proportions with bright, cool stock imagery. */
:root {
  --ipm-card-radius: 1.5rem;
  --ipm-card-border: rgba(148, 163, 184, 0.24);
  --ipm-card-border-hover: rgba(56, 189, 248, 0.42);
  --ipm-card-shadow: 0 18px 48px -30px rgba(15, 23, 42, 0.32),
    0 8px 24px -20px rgba(14, 116, 144, 0.2);
  --ipm-card-shadow-hover: 0 24px 56px -30px rgba(15, 23, 42, 0.38),
    0 14px 30px -22px rgba(14, 165, 233, 0.3);
  --ipm-photo-border: rgba(14, 165, 233, 0.3);
  --ipm-photo-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 12px 24px -16px rgba(2, 132, 199, 0.5);
}

/* Light cards */
#dla-kogo .grid.gap-5 > div,
#uslugi article,
#wspolpraca article,
#wdrozenia article,
#wiedza .mx-auto.mt-12 > a {
  border: 1px solid var(--ipm-card-border);
  border-radius: var(--ipm-card-radius);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.82));
  box-shadow: var(--ipm-card-shadow);
  isolation: isolate;
  position: relative;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease,
    background-color 220ms ease;
}

#dla-kogo .grid.gap-5 > div::before,
#uslugi article::before,
#wspolpraca article::before,
#wdrozenia article::before,
#wiedza .mx-auto.mt-12 > a::before {
  background: linear-gradient(90deg, #0284c7, #22d3ee 58%, rgba(34, 211, 238, 0));
  border-radius: var(--ipm-card-radius) var(--ipm-card-radius) 0 0;
  content: "";
  height: 3px;
  inset: 0 0 auto;
  opacity: 0.78;
  position: absolute;
  z-index: 2;
}

/* Existing cooperation cards remain the visual DNA, with a calmer digital accent. */
#wspolpraca article:nth-child(2) {
  background: linear-gradient(145deg, rgba(240, 249, 255, 0.96), rgba(255, 255, 255, 0.9));
}

#wspolpraca article > div.absolute {
  background: radial-gradient(circle at 68% 32%, rgba(34, 211, 238, 0.14), transparent 62%);
  opacity: 1;
}

/* Bright photo thumbnails replace the former dark SVG pictograms. */
#dla-kogo .grid.gap-5 > div > div:nth-child(2),
#uslugi article > div:nth-child(2) > div:first-child,
#wspolpraca article > div.relative > div:first-child,
#wiedza .mx-auto.mt-12 > a > div:first-child > svg {
  background-color: #e0f2fe;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--ipm-photo-border);
  border-radius: 1rem;
  box-shadow: var(--ipm-photo-shadow);
  color: transparent;
  filter: brightness(1.1) contrast(0.94) saturate(0.72);
  transform: none;
  transition: border-color 220ms ease, box-shadow 220ms ease, filter 220ms ease,
    transform 220ms ease;
}

#dla-kogo .grid.gap-5 > div > div:nth-child(2) {
  height: 3.5rem;
  width: 5.25rem;
}

#uslugi article > div:nth-child(2) > div:first-child,
#wspolpraca article > div.relative > div:first-child {
  height: 4rem;
  width: 6rem;
}

#wiedza .mx-auto.mt-12 > a > div:first-child > svg {
  box-sizing: border-box;
  flex: 0 0 auto;
  height: 3.5rem;
  padding: 0;
  width: 5.25rem;
}

#dla-kogo .grid.gap-5 > div > div:nth-child(2) > svg,
#uslugi article > div:nth-child(2) > div:first-child > svg,
#wspolpraca article > div.relative > div:first-child > svg {
  opacity: 0;
}

#dla-kogo .grid.gap-5 > div:nth-child(1) > div:nth-child(2) {
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(186, 230, 253, 0.1)),
    url("./card-images/audience-strategy.webp");
}

#dla-kogo .grid.gap-5 > div:nth-child(2) > div:nth-child(2) {
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(186, 230, 253, 0.1)),
    url("./card-images/audience-ai.webp");
}

#dla-kogo .grid.gap-5 > div:nth-child(3) > div:nth-child(2) {
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(186, 230, 253, 0.1)),
    url("./card-images/audience-product.webp");
}

#dla-kogo .grid.gap-5 > div:nth-child(4) > div:nth-child(2) {
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(186, 230, 253, 0.1)),
    url("./card-images/audience-data.webp");
}

#uslugi article:nth-child(1) > div:nth-child(2) > div:first-child {
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(186, 230, 253, 0.1)),
    url("./card-images/service-strategy.webp");
}

#uslugi article:nth-child(2) > div:nth-child(2) > div:first-child {
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(186, 230, 253, 0.1)),
    url("./card-images/service-digital.webp");
}

#uslugi article:nth-child(3) > div:nth-child(2) > div:first-child {
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(186, 230, 253, 0.1)),
    url("./card-images/service-finance.webp");
}

#uslugi article:nth-child(4) > div:nth-child(2) > div:first-child {
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(186, 230, 253, 0.1)),
    url("./card-images/service-training.webp");
}

#wspolpraca article:nth-child(1) > div.relative > div:first-child {
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(186, 230, 253, 0.1)),
    url("./card-images/cooperation-contract.webp");
}

#wspolpraca article:nth-child(2) > div.relative > div:first-child {
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(186, 230, 253, 0.1)),
    url("./card-images/cooperation-interim.jpg");
}

#wiedza .mx-auto.mt-12 > a > div:first-child > svg {
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(186, 230, 253, 0.1)),
    url("./card-images/knowledge-guide.webp");
}

/* Case studies have no semantic pictogram in the bundle; use a restrained data motif. */
#wdrozenia article {
  overflow: hidden;
}

#wdrozenia article::after {
  background:
    radial-gradient(circle at 8px 8px, rgba(34, 211, 238, 0.75) 0 1.5px, transparent 2px),
    linear-gradient(135deg, transparent 42%, rgba(56, 189, 248, 0.16) 42% 45%, transparent 45%);
  background-size: 16px 16px, 100% 100%;
  content: "";
  height: 5.25rem;
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
  right: -1rem;
  top: -1rem;
  width: 5.25rem;
  z-index: -1;
}

#wdrozenia article > h3 {
  padding-right: 1.5rem;
}

/* Dark process cards: same geometry and cyan signal, preserving their identity. */
#proces .relative > .grid.gap-6 > div {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(14, 116, 144, 0.035));
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: var(--ipm-card-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 20px 44px -32px rgba(34, 211, 238, 0.42);
  overflow: hidden;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease,
    background-color 220ms ease;
}

#proces .relative > .grid.gap-6 > div::before {
  background: linear-gradient(180deg, #38bdf8, rgba(34, 211, 238, 0));
  content: "";
  inset: 0 auto 0 0;
  opacity: 0.66;
  position: absolute;
  width: 2px;
}

#proces .relative > .grid.gap-6 > div > div:first-child > div {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(12, 35, 64, 0.94));
  border: 1px solid rgba(34, 211, 238, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 26px -14px rgba(6, 182, 212, 0.72);
  color: #67e8f9;
  transform: none;
  transition: border-color 220ms ease, box-shadow 220ms ease, color 220ms ease,
    transform 220ms ease;
}

#proces .sticky .mt-10 > div > div {
  background-color: #e0f2fe;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--ipm-photo-border);
  border-radius: 0.75rem;
  box-shadow: var(--ipm-photo-shadow);
  color: transparent;
  filter: brightness(1.12) contrast(0.92) saturate(0.7);
  height: 2.75rem;
  width: 4rem;
}

#proces .sticky .mt-10 > div > div > svg {
  opacity: 0;
}

#proces .sticky .mt-10 > div:nth-child(1) > div {
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(186, 230, 253, 0.1)),
    url("./card-images/process-cycles.webp");
}

#proces .sticky .mt-10 > div:nth-child(2) > div {
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(186, 230, 253, 0.1)),
    url("./card-images/audience-data.webp");
}

#proces .sticky .mt-10 > div:nth-child(3) > div {
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(186, 230, 253, 0.1)),
    url("./card-images/knowledge-guide.webp");
}

#proces .sticky .mt-10 > div {
  border-color: rgba(125, 211, 252, 0.14);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.045);
}

/* The supporting cooperation panel uses the same radius and border rhythm. */
#wspolpraca .mt-16.rounded-3xl {
  border-color: var(--ipm-card-border);
  border-radius: var(--ipm-card-radius);
}

@media (hover: hover) and (pointer: fine) {
  #dla-kogo .grid.gap-5 > div:hover,
  #uslugi article:hover,
  #wspolpraca article:hover,
  #wdrozenia article:hover,
  #wiedza .mx-auto.mt-12 > a:hover {
    border-color: var(--ipm-card-border-hover);
    box-shadow: var(--ipm-card-shadow-hover);
    transform: translateY(-3px);
  }

  #proces .relative > .grid.gap-6 > div:hover {
    background: rgba(255, 255, 255, 0.085);
    border-color: rgba(34, 211, 238, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 24px 50px -32px rgba(34, 211, 238, 0.58);
    transform: translateY(-2px);
  }

  #dla-kogo .grid.gap-5 > div:hover > div:nth-child(2),
  #uslugi article:hover > div:nth-child(2) > div:first-child,
  #wspolpraca article:hover > div.relative > div:first-child,
  #wiedza .mx-auto.mt-12 > a:hover > div:first-child > svg,
  #proces .relative > .grid.gap-6 > div:hover > div:first-child > div {
    border-color: rgba(103, 232, 249, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 14px 30px -14px rgba(34, 211, 238, 0.82);
    color: #cffafe;
    transform: translateY(-1px) scale(1.035);
  }

  #dla-kogo .grid.gap-5 > div:hover > div:nth-child(2),
  #uslugi article:hover > div:nth-child(2) > div:first-child,
  #wspolpraca article:hover > div.relative > div:first-child,
  #wiedza .mx-auto.mt-12 > a:hover > div:first-child > svg,
  #proces .sticky .mt-10 > div:hover > div {
    filter: brightness(1.14) contrast(0.96) saturate(0.8);
  }
}

#wiedza .mx-auto.mt-12 > a:focus-visible {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22), var(--ipm-card-shadow-hover);
  outline: none;
}

@media (max-width: 639px) {
  #dla-kogo .grid.gap-5 > div,
  #uslugi article,
  #wspolpraca article,
  #wdrozenia article,
  #wiedza .mx-auto.mt-12 > a {
    border-radius: 1.25rem;
  }

  #wspolpraca article {
    padding: 2rem;
  }

  #wdrozenia article > h3 {
    padding-right: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #dla-kogo .grid.gap-5 > div,
  #dla-kogo .grid.gap-5 > div > div:nth-child(2),
  #uslugi article,
  #uslugi article > div:nth-child(2) > div:first-child,
  #wspolpraca article,
  #wspolpraca article > div.relative > div:first-child,
  #wdrozenia article,
  #wiedza .mx-auto.mt-12 > a,
  #wiedza .mx-auto.mt-12 > a > div:first-child > svg,
  #proces .relative > .grid.gap-6 > div,
  #proces .relative > .grid.gap-6 > div > div:first-child > div,
  #proces .sticky .mt-10 > div > div {
    scroll-behavior: auto;
    transition: none !important;
  }

  #dla-kogo .grid.gap-5 > div:hover,
  #uslugi article:hover,
  #wspolpraca article:hover,
  #wdrozenia article:hover,
  #wiedza .mx-auto.mt-12 > a:hover,
  #proces .relative > .grid.gap-6 > div:hover {
    transform: none;
  }
}