/*================================================
Theme refresh — logo-derived palette (navy / indigo / purple / teal)
Loaded last so these rules take priority over the base template CSS.
================================================*/

/* Retint the existing purple/orange icon accents to purple/teal so icon
   rotation matches the logo gradient instead of the old purple/orange pairing. */
.single-features .icon.bg-c679e3 {
  color: var(--color-accent-purple);
  background: rgba(168, 79, 209, 0.12);
}

.single-features .icon.bg-eb6b3d {
  color: var(--color-accent-teal);
  background: rgba(35, 189, 184, 0.12);
}

.single-features:hover .icon.bg-c679e3 {
  background: var(--color-accent-purple);
  color: #ffffff;
}

.single-features:hover .icon.bg-eb6b3d {
  background: var(--color-accent-teal);
  color: #ffffff;
}

/*================================================
Hero CTA row — primary (indigo) + secondary (navy) side by side
================================================*/
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.hero-cta-row .btn {
  margin: 0;
}

/* Give btn-secondary its own navy identity so it reads distinctly
   from btn-primary now that both used to share the same green. */
.btn.btn-secondary {
  background-color: var(--color-dark);
  box-shadow: 0 5px 15px rgba(14, 49, 76, 0.25);
}

.btn.btn-secondary:hover, .btn.btn-secondary:focus {
  background-color: var(--color-accent-purple);
  box-shadow: 0 5px 15px rgba(168, 79, 209, 0.3);
}

/*================================================
Trust strip — industries served, sits directly under the hero
================================================*/
.trust-strip {
  background: var(--color-dark);
  padding: var(--space-4) 0 var(--space-5);
  text-align: center;
}

.trust-strip .trust-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7c93a8;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--space-4);
  margin-bottom: var(--space-3);
}

.trust-strip .trust-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.trust-strip .trust-chip {
  font-size: 12px;
  color: #c9d8e4;
  border: 1px solid #2e4a63;
  border-radius: 20px;
  padding: 6px 16px;
}

/*================================================
Featured projects — real project screenshots on the homepage
================================================*/
.featured-projects-area {
  background: var(--color-white);
  padding: var(--space-6) 0;
}

.featured-projects-area .project-card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  margin-bottom: var(--space-4);
}

.featured-projects-area .project-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.featured-projects-area .project-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.featured-projects-area .project-body {
  padding: var(--space-3);
}

.featured-projects-area .project-tag {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.featured-projects-area .project-tag.tag-indigo { color: var(--color-primary); }
.featured-projects-area .project-tag.tag-purple { color: var(--color-accent-purple); }
.featured-projects-area .project-tag.tag-teal { color: var(--color-accent-teal); }

.featured-projects-area .project-title {
  color: var(--color-dark);
  font-weight: 500;
  font-size: 16px;
  margin-top: 4px;
}

.featured-projects-area .view-all-link {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
}

/*================================================
CTA band — closing call to action
================================================*/
.cta-band {
  background: var(--color-primary);
  padding: var(--space-5) 0;
  text-align: center;
}

.cta-band h3 {
  color: #ffffff;
  margin-bottom: var(--space-3);
}

.cta-band .btn-white-solid {
  display: inline-block;
  background: #ffffff;
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 14px 32px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}