/* ============================================================
   THEME — PURPLE (Override)
   Replaces dark-navy family with deep purple shades centered on #8F3CF4
   To revert: remove the <link> reference to this file in each HTML page.
   ============================================================ */

:root {
  /* Replace navy with deep purple shades */
  --navy: #2A0F4A;          /* was #0D2E3F — used as "dark base" everywhere */
  --navy-light: #5A1FAA;    /* was #1A4A65 — used in hero gradient mid */

  /* New purple family */
  --purple: #8F3CF4;        /* vivid base — the requested color */
  --purple-deep: #5A1FAA;   /* mid-dark */
  --purple-darkest: #1F0A38; /* deepest, near black */
  --purple-light: #E8D7FE;  /* tint for soft backgrounds */
  --purple-glow: rgba(143, 60, 244, 0.35);

  /* Re-tint shadows from navy-blue toward purple */
  --shadow-sm: 0 2px 8px rgba(42, 15, 74, 0.07);
  --shadow-md: 0 4px 16px rgba(42, 15, 74, 0.10);
  --shadow-lg: 0 12px 40px rgba(42, 15, 74, 0.16);
  --shadow-teal: 0 12px 32px rgba(26, 110, 142, 0.18);
  --shadow-purple: 0 12px 32px rgba(143, 60, 244, 0.32);
}

/* ===== Hero overlay gradient — re-mapped to purple ===== */
.hero::after {
  background: linear-gradient(95deg,
    rgba(31, 10, 56, 0.92) 0%,
    rgba(42, 15, 74, 0.70) 45%,
    rgba(143, 60, 244, 0.35) 100%);
}

/* Hero base gradient — purple → teal feels like aurora */
.hero,
.page-hero {
  background: linear-gradient(135deg, var(--purple-darkest) 0%, var(--purple-deep) 45%, var(--teal) 100%);
}

.page-hero::before {
  background: radial-gradient(circle at 20% 30%, rgba(229, 114, 42, 0.18) 0%, transparent 50%),
              radial-gradient(circle at 85% 70%, rgba(143, 60, 244, 0.20) 0%, transparent 55%);
}

/* Stats banner now uses multi-color light card design — no override needed */

/* ===== Industry card overlay — purple-tinted dark ===== */
.industry-card::after {
  background: linear-gradient(180deg, transparent 30%, rgba(31, 10, 56, 0.92) 100%);
}

/* ===== Lightbox bg ===== */
#lightbox {
  background: rgba(31, 10, 56, 0.95) !important;
}

/* ===== Footer — keep dark, but accent line gets the vivid purple ===== */
.footer {
  background: var(--purple-darkest);
}

.footer::before {
  /* Originally teal → orange. Now teal → purple → orange — visible vivid stripe */
  background: linear-gradient(90deg, var(--teal) 0%, var(--purple) 50%, var(--orange) 100%);
  height: 4px;
}

.footer__social a {
  background: var(--purple-deep);
}

.footer__social a:hover {
  background: var(--purple);
  box-shadow: 0 6px 20px var(--purple-glow);
}

/* ===== Testimonial avatars — vivid purple ===== */
.testimonial__avatar {
  background: linear-gradient(135deg, var(--teal), var(--purple));
}

/* ===== Process step number — pop with the vivid purple ===== */
.process-step__num {
  background: linear-gradient(135deg, var(--purple-deep), var(--purple-darkest));
  color: var(--orange);
  box-shadow: 0 8px 24px var(--purple-glow);
}

/* ===== Card hover — purple-tinted lift shadow ===== */
.card:hover {
  box-shadow: 0 16px 40px rgba(143, 60, 244, 0.18);
  border-left: 4px solid var(--orange);
}

/* ===== Section heading underline — keep orange, but add purple sparkle on pills ===== */
.pill {
  background: var(--purple-light);
  color: var(--purple-deep);
}

.pill--solid-orange {
  background: var(--orange);
  color: white;
}

/* ===== Form focus — purple glow ===== */
.form__group input:focus,
.form__group select:focus,
.form__group textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-glow);
}

/* ===== Compare table — purple top headers ===== */
.compare-table thead th {
  background: var(--purple-darkest);
}
.compare-table thead th:nth-child(2) {
  background: var(--purple);
}

/* ===== Cert card — purple left accent on hover ===== */
.cert-card:hover {
  border-left-color: var(--purple);
  box-shadow: 0 12px 32px rgba(143, 60, 244, 0.14);
}

/* ===== Top bar — deeper purple than footer for contrast ===== */
.topbar {
  background: var(--purple-darkest);
}

/* ===== Floating call button — match purple feel ===== */
.float-btn--phone {
  background: var(--purple);
}

.float-btn--phone:hover {
  background: var(--purple-deep);
}

/* ===== Scroll-to-top — purple bg ===== */
#scrollTop {
  background: var(--purple-darkest);
}

#scrollTop:hover {
  background: var(--purple);
}

/* ===== Hero stat numbers — keep orange, but stat dividers get purple tint ===== */
.hero__stat:not(:last-child)::after {
  background: rgba(232, 215, 254, 0.30);
}

/* ===== Subtle: scrolled navbar gets a faint purple shadow ===== */
.navbar.scrolled {
  box-shadow: 0 4px 20px rgba(143, 60, 244, 0.12);
}

/* ===== Industry card hover border — purple instead of orange (optional pop) ===== */
.industry-card:hover {
  box-shadow: 0 16px 40px rgba(143, 60, 244, 0.22);
}

/* ===== Image-background service cards — purple-tinted overlay ===== */
.card--bg::after {
  background: linear-gradient(180deg,
    rgba(31, 10, 56, 0.10) 0%,
    rgba(31, 10, 56, 0.65) 45%,
    rgba(31, 10, 56, 0.96) 85%);
}

.card.card--bg:hover {
  box-shadow: 0 24px 50px rgba(143, 60, 244, 0.35);
}