/* Apex Theme – foundation for future visual upgrades */

/* ---------- Color Palette Variables ---------- */
:root {
  --apex-navy:   #004080;   /* deep header/footer background */
  --apex-blue:   #003A70;   /* solutions header/footer */
  --apex-cyan:   #00BFFF;   /* accent / highlight */
  --apex-orange: #FF8800;   /* call‑to‑action accent */
  --apex-gray:   #F2F2F2;   /* neutral backgrounds, footers */
  --apex-light:  #F9FAFC;   /* light page background (solutions) */
}

/* ---------- Typography ---------- */
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: #2A2A2A;
}

/* ---------- Reusable Classes ---------- */
.apex-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--apex-orange);
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

.apex-card {
 background: #fff;
 border: 1px solid var(--apex-gray);
 border-radius: 8px;
 padding: 1.5rem;
 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Feature block – highlighted section */
.apex-feature {
 background: var(--apex-navy);
 color: #fff;
 padding: 1rem;
 border-radius: 6px;
 margin-bottom: 1rem;
}

/* Grid layout for responsive cards */
.apex-grid {
 display: grid;
 gap: 1.5rem;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Statistic component – centered numbers */
.apex-stat {
 display: flex;
 flex-direction: column;
 align-items: center;
 background: var(--apex-light);
 padding: 1rem;
 border-radius: 6px;
}

/* Highlight text utility */
.apex-highlight {
 background: var(--apex-cyan);
 color: #000;
 padding: 0.25rem 0.5rem;
 border-radius: 4px;
 font-weight: 600;
}

.apex-section {
  padding: 2rem 1rem;
  margin: 0 auto;
  max-width: 1200px;
}

.apex-hero {
  background: var(--apex-navy);
  color: #fff;
  padding: 4rem 1rem;
  text-align: center;
}

.apex-fade {
  opacity: 0;
  animation: apexFadeIn 0.8s forwards;
}

@keyframes apexFadeIn {
  to { opacity: 1; }
}

.apex-hover-lift {
  transition: transform 0.3s ease;
}
.apex-hover-lift:hover {
  transform: translateY(-4px);
}

/* Icon alignment */
.apex-icon { fill: var(--apex-cyan); vertical-align: middle; margin-right: 0.5rem; }

/* Hover effects */
.apex-btn:hover,
.cta-button:hover,
.btn-primary:hover {
  transition: all 0.3s ease;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Hero animation */
.hero,
.apex-hero {
  opacity: 0;
  animation: apexHeroFadeUp 0.7s ease forwards;
}
@keyframes apexHeroFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Section animation */
.apex-section {
  opacity: 0;
  animation: apexSectionFade 0.7s ease forwards;
}
@keyframes apexSectionFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Card hover lift */
.apex-card,
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.apex-card:hover,
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Respect prefers‑reduced‑motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}