/* Alternating section backgrounds, based on the supplied blue / violet / pink reference. */
.nx-tint,
.nx-contact {
  --glow-sky-x: 100%;
  --glow-blue-x: 36%;
  --glow-violet-x: 76%;
  --glow-pink-x: 106%;
  --glow-white-x: 26%;
  background-color: #edf3ff !important;
  background-image:
    radial-gradient(ellipse 72% 82% at var(--glow-white-x) 10%, rgba(255,255,255,.94) 0%, rgba(246,249,255,.62) 40%, rgba(246,249,255,0) 78%),
    radial-gradient(ellipse 43% 75% at var(--glow-sky-x) -8%, rgba(64,165,251,.49) 0%, rgba(101,185,255,.14) 50%, rgba(101,185,255,0) 80%),
    radial-gradient(ellipse 42% 58% at var(--glow-blue-x) 116%, rgba(20,141,249,.57) 0%, rgba(62,153,250,.25) 46%, rgba(62,153,250,0) 82%),
    radial-gradient(ellipse 35% 57% at var(--glow-violet-x) 113%, rgba(143,102,246,.45) 0%, rgba(172,145,249,.16) 55%, rgba(172,145,249,0) 85%),
    radial-gradient(ellipse 42% 72% at var(--glow-pink-x) 108%, rgba(255,182,207,.78) 0%, rgba(255,210,224,.3) 48%, rgba(255,210,224,0) 85%) !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Vary the light direction without changing the white / colour section rhythm. */
.nx-home #architecture {
  --glow-sky-x: 3%;
  --glow-white-x: 16%;
  --glow-blue-x: 79%;
  --glow-violet-x: 49%;
  --glow-pink-x: -8%;
}
.nx-home #news,
.nx-page .nx-tint:nth-of-type(4n + 1) {
  --glow-sky-x: 97%;
  --glow-white-x: 34%;
  --glow-blue-x: 12%;
  --glow-violet-x: 64%;
  --glow-pink-x: 104%;
}
.nx-contact {
  --glow-white-x: 20%;
  --glow-blue-x: 58%;
  --glow-violet-x: 88%;
  --glow-pink-x: 112%;
}

/* Opaque reading surfaces keep long copy clear above the coloured light. */
.nx-tint .nx-feature,
.nx-tint .nx-news-card,
.nx-tint .nx-solution-card,
.nx-tint .nx-partner-models article,
.nx-tint .nx-architecture,
.nx-contact form {
  border-color: rgba(255,255,255,.85);
  box-shadow: 0 12px 35px rgba(40,76,133,.035);
}
.nx-tint .nx-steps li>span {
  color: #6e83aa;
  border-color: rgba(105,134,179,.23);
  background: rgba(255,255,255,.4);
}
.nx-tint .nx-industry-bottom>span { color: #53677f; }
.nx-contact .contact-address { color: #53677f; }

@media (max-width: 600px) {
  .nx-tint,
  .nx-contact {
    background-size: 160% 100%;
    background-position: center;
  }
}
@media print {
  .nx-tint,
  .nx-contact {
    background: #f5f7fb !important;
  }
}
