:root {
  --dc-plasma-accent: #d36bff;
  --dc-frame-blue: rgba(143, 211, 255, .28);
  --dc-frame-blue-strong: rgba(143, 211, 255, .42);
  --dc-plasma-edge: rgba(211, 107, 255, .58);
  --dc-plasma-near: rgba(211, 107, 255, .15);
  --dc-plasma-active: rgba(211, 107, 255, .2);
}

/* The resting state stays blue. Pink is reserved for proximity and interaction. */
.hero-section {
  box-shadow:
    inset 0 -1px 0 rgba(143, 211, 255, .24),
    0 22px 64px rgba(94, 139, 255, .045);
}

.hero-content h1,
#pakiety h2,
#projekty h2,
.site-footer .footer-brand {
  text-shadow: 0 0 30px rgba(94, 139, 255, .11);
}

.hero-content__signals span {
  border-color: rgba(143, 211, 255, .28);
  background:
    radial-gradient(circle at 18% 0%, rgba(143, 211, 255, .08), transparent 58%),
    rgba(5, 7, 10, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color .24s ease, background .24s ease, box-shadow .24s ease;
}

.hero-content__signals span:hover,
.hero-content__signals span:focus-visible {
  border-color: var(--dc-plasma-edge);
  background:
    radial-gradient(circle at 18% 0%, rgba(211, 107, 255, .15), transparent 60%),
    rgba(8, 6, 12, .48);
  box-shadow:
    0 0 26px rgba(211, 107, 255, .15),
    inset 0 0 24px rgba(211, 107, 255, .05);
}

#pakiety::before,
#projekty::before {
  content: none;
}

.section--workflow::before {
  opacity: 0;
}

#pakiety .pricing-card,
#projekty .case-card,
#zakres .service-grid,
#proces .workflow-rail {
  border-color: var(--dc-frame-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .065);
  transition:
    border-color .24s ease,
    box-shadow .24s ease,
    background-color .24s ease;
}

/* Pointer is outside the window, but no farther than 28 px from it. */
#pakiety .pricing-card.dc-plasma-near,
#projekty .case-card.dc-plasma-near,
#zakres .service-grid.dc-plasma-near,
#proces .workflow-rail.dc-plasma-near {
  border-color: var(--dc-frame-blue-strong);
  box-shadow:
    0 0 38px var(--dc-plasma-near),
    0 0 1px rgba(211, 107, 255, .34),
    inset 0 1px 0 rgba(255, 255, 255, .075);
}

/* Once the pointer enters, both the frame and the inside turn plasma pink. */
#pakiety .pricing-card:hover,
#pakiety .pricing-card:focus-within,
#projekty .case-card:hover,
#projekty .case-card:focus-within,
#zakres .service-grid:hover,
#zakres .service-grid:focus-within,
#proces .workflow-rail:hover,
#proces .workflow-rail:focus-within {
  border-color: var(--dc-plasma-edge);
  box-shadow:
    0 0 56px var(--dc-plasma-active),
    0 0 1px rgba(211, 107, 255, .62),
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 0 48px rgba(211, 107, 255, .075);
}

#pakiety .pricing-card--featured,
#pakiety .pricing-card--contact {
  border-color: var(--dc-frame-blue-strong);
}

#pakiety .pricing-card--featured:hover,
#pakiety .pricing-card--featured:focus-within,
#pakiety .pricing-card--contact:hover,
#pakiety .pricing-card--contact:focus-within {
  border-color: var(--dc-plasma-edge);
}

#pakiety .contact-form input,
#pakiety .contact-form select,
#pakiety .contact-form textarea {
  border-color: rgba(143, 211, 255, .24);
  box-shadow: inset 0 0 18px rgba(94, 139, 255, .018);
}

#pakiety .contact-form input:focus,
#pakiety .contact-form select:focus,
#pakiety .contact-form textarea:focus {
  border-color: var(--dc-plasma-edge);
  box-shadow:
    0 0 0 3px rgba(211, 107, 255, .1),
    0 0 24px rgba(211, 107, 255, .12);
}

#projekty .case-card__media {
  box-shadow:
    inset -1px 0 0 rgba(143, 211, 255, .2),
    inset 0 0 34px rgba(94, 139, 255, .018);
  transition: box-shadow .24s ease;
}

#projekty .case-card:hover .case-card__media,
#projekty .case-card:focus-within .case-card__media {
  box-shadow:
    inset -1px 0 0 rgba(211, 107, 255, .34),
    inset 0 0 38px rgba(211, 107, 255, .055);
}

#projekty .case-card__footer-link {
  border-top-color: rgba(143, 211, 255, .22);
  background: rgba(143, 211, 255, .045);
}

#projekty .case-card:hover .case-card__footer-link,
#projekty .case-card:focus-within .case-card__footer-link {
  border-top-color: rgba(211, 107, 255, .3);
  background:
    linear-gradient(90deg, rgba(211, 107, 255, .07), transparent 58%),
    rgba(143, 211, 255, .035);
}

#projekty .case-card__title-mark {
  filter: drop-shadow(0 0 8px rgba(94, 139, 255, .32));
  transition: filter .24s ease;
}

#projekty .case-card:hover .case-card__title-mark,
#projekty .case-card:focus-within .case-card__title-mark {
  filter:
    drop-shadow(0 0 8px rgba(122, 95, 255, .48))
    drop-shadow(0 0 16px rgba(211, 107, 255, .28));
}

.site-footer {
  border-top-color: rgba(143, 211, 255, .24);
  box-shadow:
    0 -24px 64px rgba(94, 139, 255, .04),
    inset 0 1px 0 rgba(255, 255, 255, .035);
}

.site-footer .footer-columns h3 {
  color: var(--dc-sky);
  text-shadow: none;
}

.site-footer .footer-columns a:hover,
.site-footer .footer-columns a:focus-visible {
  color: #dba0ff;
  text-shadow: 0 0 18px rgba(211, 107, 255, .24);
}

@media (max-width: 980px) {
  #projekty .case-card__media {
    box-shadow:
      inset 0 -1px 0 rgba(143, 211, 255, .2),
      inset 0 0 28px rgba(94, 139, 255, .018);
  }

  #projekty .case-card:hover .case-card__media,
  #projekty .case-card:focus-within .case-card__media {
    box-shadow:
      inset 0 -1px 0 rgba(211, 107, 255, .34),
      inset 0 0 32px rgba(211, 107, 255, .055);
  }
}

@media (hover: none), (pointer: coarse) {
  #pakiety .pricing-card:hover,
  #projekty .case-card:hover,
  #zakres .service-grid:hover,
  #proces .workflow-rail:hover {
    border-color: var(--dc-frame-blue);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .065);
  }

  #pakiety .pricing-card--featured:hover,
  #pakiety .pricing-card--contact:hover {
    border-color: var(--dc-frame-blue-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-content__signals span,
  #pakiety .pricing-card,
  #projekty .case-card,
  #zakres .service-grid,
  #proces .workflow-rail,
  #projekty .case-card__media,
  #projekty .case-card__title-mark {
    transition: none;
  }
}