/*
 * WEB-INFOX v2.5 — section color variants
 * Edit these variables to adjust the colors across the site.
 * Dark sections keep white headings; pale sections keep navy text.
 */
:root {
  --wfx-gradient-process: linear-gradient(125deg, #102443 0%, #064b80 58%, #086078 100%);
  --wfx-gradient-solutions: linear-gradient(120deg, #0b1220 0%, #142d4c 62%, #163d53 100%);
  --wfx-gradient-cta: linear-gradient(115deg, #102443 0%, #0752a0 65%, #086078 100%);
  --wfx-gradient-soft: linear-gradient(125deg, #f0f5ff 0%, #f0fbff 62%, #fff4ee 100%);
  --wfx-on-gradient: #ffffff;
  --wfx-on-gradient-muted: #e0edf8;
}

/* Construction steps — homepage and OpenCart service. */
.process-gradient {
  background: var(--wfx-gradient-process);
  color: var(--wfx-on-gradient);
}

.process-gradient .eyebrow,
.process-gradient .num {
  color: #b9edff;
}

.process-gradient .section-heading > p,
.process-gradient .step p {
  color: var(--wfx-on-gradient-muted);
}

.process-gradient .step {
  padding: 28px;
  border: 1px solid #7499b2;
  border-top: 3px solid #6cd6f4;
  border-radius: 20px;
  background: #0b122033;
}

.process-gradient .step:nth-child(2) {
  border-top-color: #aacbff;
}

.process-gradient .step:nth-child(3) {
  border-top-color: #ffad89;
}

.process-gradient .step:nth-child(4) {
  border-top-color: #ffffff;
}

.process-gradient .num {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #7499b2;
  border-radius: 12px;
  background: #0b122040;
}

/* Service solutions: a deeper blue transition rather than a flat fill. */
.solutions-gradient {
  background: var(--wfx-gradient-solutions);
}

.solutions-gradient .solution-card {
  padding: 28px;
  border: 1px solid #536c83;
  border-radius: 20px;
  background: #ffffff08;
}

/* Light color washes keep longer text comfortable to read. */
.about-tint,
.scope-tint {
  background: var(--wfx-gradient-soft);
}

.scope-tint .card {
  border-color: #c4d7e7;
  box-shadow: 0 12px 32px #10244308;
}

.about-tint .principles article {
  border-bottom-color: #bfd0dd;
}

/* Blog cards keep white reading surfaces against a cool section background. */
.home-insights {
  background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%);
}

.home-insights .blog-card {
  border-top: 3px solid #0868ce;
}

.home-insights .blog-card:nth-child(2) {
  border-top-color: #13b5ea;
}

.home-insights .blog-card:nth-child(3) {
  border-top-color: #ff6b35;
}

/* Final invitation, shared by home and service pages. */
.contact-box,
.cta {
  background: var(--wfx-gradient-cta);
  color: var(--wfx-on-gradient);
}

.contact-box {
  border-top-color: #67d5ed;
}

.contact-box .eyebrow {
  color: #b9edff;
}

.contact-bottom p,
.cta p {
  color: var(--wfx-on-gradient-muted);
}

.contact-email {
  color: #ffffff;
}

.contact-box .btn,
.cta .btn {
  background: #ffffff;
  color: #0b3059;
  border: 1px solid #ffffff;
}

.contact-box .btn:hover,
.cta .btn:hover {
  background: #e4f4ff;
  color: #0b3059;
}

.contact-box a:focus-visible,
.cta a:focus-visible {
  outline-color: #ffffff;
}

@media (max-width: 767px) {
  .process-gradient .step,
  .solutions-gradient .solution-card {
    padding: 24px;
  }
}