/* Cleaned CSS */
/* =========================================================
   HOME HYBRID THEME — B-LIGHT + CIV MAGENTA + ANIMATED BLOBS
   Cleaned, unified, CIV/MIL-style animation system
========================================================= */

.theme-home {
  --vx-accent-aqua: #4fe4ff;
  --vx-accent-orange: #ff6b3d;
  --vx-accent-magenta: #b77aff; /* CIV lavender */
  --vx-accent-blue: #8fcfff;

  --vx-bg-light: #dfeaf5;
  --vx-bg-charcoal-1: #1a2738;
  --vx-bg-charcoal-2: #223245;
  --vx-bg-charcoal-3: #2b3b50;

  color: #f5faff;
}

/* ----------------------------------------------------------
   BODY BACKGROUND
---------------------------------------------------------- */
body.theme-home {
  background:
    radial-gradient(ellipse 45% 40% at 16% 22%, rgba(79,228,255,0.58), rgba(79,228,255,0.22), transparent 70%),
    radial-gradient(ellipse 45% 40% at 85% 25%, rgba(183,122,255,0.35), rgba(183,122,255,0.12), transparent 75%),
    radial-gradient(ellipse 50% 45% at 88% 34%, rgba(255,107,61,0.38), rgba(255,107,61,0.14), transparent 80%),
    linear-gradient(135deg, #24364b, #1a2738 70%);
  color: #f2f7ff;
}

body.theme-home::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  /*background: url("images/noise-4k.png");*/
  mix-blend-mode: soft-light;
  z-index: 0;
}

/* ============================================================
   THEME-HOME — Header & Navigation Colors (Hybrid CIV + MIL)
   ============================================================ */

.theme-home .vx-header {
  background: rgba(20, 32, 48, 0.75);
  backdrop-filter: blur(18px);
}

.theme-home .vx-logo-mark {
  color: var(--vx-accent-aqua); /* hybrid identity */
}

.theme-home .vx-nav a {
  color: #ffffff;
}

.theme-home .vx-nav a:hover {
  color: var(--vx-accent-aqua);
}

.theme-home .vx-nav a::after {
  background: linear-gradient(
    90deg,
    var(--vx-accent-aqua),
    var(--vx-accent-orange)
  );
}

.theme-home .vx-nav a.active {
  color: var(--vx-accent-aqua);
}

.theme-home .vx-nav a.active::after {
  width: 100%;
}

/* CTA button in header */
.theme-home .nav-cta {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(10px);
}

.theme-home .nav-cta:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}


/* ----------------------------------------------------------
   HERO (fix: position + z-index to allow blobs)
---------------------------------------------------------- */
.theme-home .hero {
  position: relative;
  z-index: 0; /* critical fix */
  padding: 140px 0 130px;
  color: #fff;
  background:
    radial-gradient(ellipse 55% 65% at 0% 30%, rgba(79,228,255,0.88), rgba(79,228,255,0.20), transparent 75%),
    radial-gradient(ellipse 45% 65% at 100% 35%, rgba(183,122,255,0.50), rgba(183,122,255,0.15), transparent 80%),
    radial-gradient(ellipse 50% 70% at 70% 60%, rgba(255,107,61,0.32), rgba(255,107,61,0.10), transparent 80%),
    linear-gradient(145deg, #2a3d52, #1a2738);
}

.theme-home .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse 55% 45% at 28% 45%,
    rgba(14,24,38,0.40),
    rgba(14,24,38,0.22),
    transparent 75%
  );
}

.theme-home .hero-inner {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 40px;
}

/* ----------------------------------------------------------
   HERO IMAGE
---------------------------------------------------------- */
.theme-home .hero-media {
  position: relative;
  height: 480px;
  border-radius: 24px;
  overflow: hidden;
  z-index: 4;
  background: rgba(22,32,46,0.48);
  box-shadow:
    0 0 30px rgba(0,0,0,0.35),
    0 0 40px rgba(183,122,255,0.12);
}

.theme-home .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.theme-home .hero-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease-in-out;
}
.theme-home .hero-image.is-active {
  opacity: 1;
}

.theme-home .hero-text p {
  color: rgba(245, 250, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* ----------------------------------------------------------
   TOGGLE BUTTONS
---------------------------------------------------------- */
.theme-home .hero-toggle {
  margin-top: 32px;
  display: flex;
  gap: 12px;
    background: none !important;
  border: none !important;
  padding: 0 !important;
}

.theme-home .hero-toggle-btn {
  padding: 6px 18px;
  border-radius: 40px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 0.78rem;
  transition: all .22s;
}

.theme-home .hero-toggle-btn:hover {
  background: rgba(255,255,255,0.22);
}

.theme-home .hero-toggle-btn.is-active {
  background: linear-gradient(135deg,
    var(--vx-accent-orange),
    var(--vx-accent-aqua)
  );
  color: #0a0e14;
  border-color: transparent;
  box-shadow:
    0 0 14px rgba(79,228,255,0.24),
    0 0 12px rgba(255,107,61,0.16);
}

/* ----------------------------------------------------------
   VALUE STRIP
---------------------------------------------------------- */
.theme-home .value-strip {
  background: rgba(31,45,62,0.68);
  backdrop-filter: blur(14px);
  padding: 30px 0;
  text-align: center;
  color: #eaf4ff;
}

.theme-home .value-strip-main {
  font-weight: 600;
  color: #fff;
}
.theme-home .value-strip-sub { opacity: 0.88; }

/* ----------------------------------------------------------
   SECTIONS
---------------------------------------------------------- */
.theme-home .section {
  background: linear-gradient(135deg,
    rgba(38,56,76,0.90),
    rgba(26,40,58,0.90)
  );
  padding: 96px 0;
  color: #f1f7ff;
}

.theme-home h2 { color: #acd8ff; }

.theme-home .section p,
.theme-home p {
  color: rgba(235, 245, 255, 0.96);
}


/* ----------------------------------------------------------
   INDUSTRY CARDS
---------------------------------------------------------- */
.theme-home .industry-card {
  background: rgba(255,255,255,0.16);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.22);
  padding: 26px;
  transition: all .25s;
}

.theme-home .industry-card:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-4px);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.32),
    0 0 16px rgba(79,228,255,0.14),
    0 0 16px rgba(183,122,255,0.12);
}

.theme-home .industry-card--civ {
  border-top: 3px solid rgba(79,228,255,0.85);
}
.theme-home .industry-card--mil {
  border-top: 3px solid rgba(255,107,61,0.88);
}

/* ----------------------------------------------------------
   FINAL CTA
---------------------------------------------------------- */
.theme-home .final-cta {
  background:
    radial-gradient(ellipse 40% 40% at 20% 0%, rgba(79,228,255,0.42), transparent 80%),
    radial-gradient(ellipse 45% 40% at 85% 20%, rgba(183,122,255,0.40), transparent 80%),
    linear-gradient(135deg, #24354a, #1b2a3d);
  padding: 100px 0;
}

.theme-home .final-cta h2 {
  color: #eaf8ff;
}

/* ============================================================
   HOME HERO — Premium Fluid Blob Motion (Hybrid CIV + HOME)
   ============================================================ */

/* Container */
.theme-home .hero-fluid-top {
  position: absolute;
  inset: 0;
  z-index: 3; /* above gradients, below text */
  pointer-events: none;
  overflow: visible;
}

/* Base blob style */
.theme-home .hero-blob {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(32px);
  opacity: 0.60;
  mix-blend-mode: lighten;
  pointer-events: none;
}

/* ============================================================
   UNIQUE POSITIONS + COLOR MIX (Home + CIV palette hybrid)
   ============================================================ */

/* AQUA — stronger CIV cyan location */
.theme-home .hero-blob.blob-aqua {
  background: rgba(79, 228, 255, 0.78); /* home aqua */
  top: 28%;
  left: -6%;
  animation: blobFloat1 16s cubic-bezier(.68, -0.55, .27, 1.55) infinite alternate;
}

/* MAGENTA — centralized CIV magenta, wider drift */
.theme-home .hero-blob.blob-magenta {
  background: rgba(183, 122, 255, 0.68); /* home magenta tone */
  top: 42%;
  left: 58%;
  animation: blobFloat2 20s cubic-bezier(.68, -0.55, .27, 1.55) infinite alternate-reverse;
}

/* ORANGE — positioned lower + extended motion range */
.theme-home .hero-blob.blob-orange {
  background: rgba(255, 107, 61, 0.38); /* home orange glow */
  top: 60%;
  left: 32%;
  width: 460px;
  height: 460px;
  opacity: 0.50;
  animation: blobFloat3 22s cubic-bezier(.68, -0.55, .27, 1.55) infinite alternate;
}

/* HYBRID BLOB (optional) — a CIV lavender + aqua mix */
.theme-home .hero-blob.blob-hybrid {
  background: rgba(140, 120, 255, 0.45); /* CIV lavender */
  width: 480px;
  height: 480px;
  top: 18%;
  left: 42%;
  opacity: 0.42;
  animation: blobFloat4 26s cubic-bezier(.68, -0.55, .27, 1.55) infinite alternate;
}

/* ============================================================
   KEYFRAMES — CIV-style premium motion, adapted for HOME
   ============================================================ */

@keyframes blobFloat1 {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(140px, -120px) scale(1.22); }
  100% { transform: translate(-20px, 20px) scale(1.05); }
}

@keyframes blobFloat2 {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-160px, 160px) scale(1.24); }
  100% { transform: translate(20px, -10px) scale(0.98); }
}

@keyframes blobFloat3 {
  0%   { transform: translate(0,0) scale(0.95); }
  50%  { transform: translate(160px, 120px) scale(1.20); }
  100% { transform: translate(-10px, -20px) scale(1.0); }
}

@keyframes blobFloat4 {
  0%   { transform: translate(0,0) scale(1.05); }
  50%  { transform: translate(-120px, -160px) scale(1.15); }
  100% { transform: translate(20px, 30px) scale(1.0); }
}
/* ============================================================
   THEME-HOME — Industry Cards Readability Fix
   ============================================================ */

.theme-home .industry-card {
  background: rgba(255, 255, 255, 0.12); /* slightly stronger surface */
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(240, 245, 255, 0.92);
}

.theme-home .industry-card h3 {
  color: #ffffff;   /* strong & clean */
  font-weight: 600;
}

.theme-home .industry-card p {
  color: rgba(245, 250, 255, 0.92);
}


/* subtle border glows for accents (CIV + MIL fusion) */
.theme-home .industry-card--civ {
  border-top: 3px solid rgba(79, 228, 255, 0.85); /* aqua */
}

.theme-home .industry-card--mil {
  border-top: 3px solid rgba(255, 107, 61, 0.85); /* orange */
}

/* Hover polish — slightly brighter but not overpowering */
.theme-home .industry-card:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-3px);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.32),
    0 0 20px rgba(79, 228, 255, 0.18),
    0 0 20px rgba(255, 107, 61, 0.12);
}
.theme-home a {
  color: rgba(150, 215, 255, 0.95);
}
.theme-home a:hover {
  color: #ffffff;
}
.theme-home .vx-footer a {
  color: rgba(15, 25, 40, 0.85) !important;
}
.theme-home .vx-footer a:hover {
  color: rgba(10, 20, 30, 1) !important;
}
/* ============================================================
   THEME-HOME — FIX SECONDARY BUTTON HOVER (How It Works / Request Demo)
============================================================ */

.theme-home .btn-secondary {
  background: rgba(255,255,255,0.85);
  color: rgba(20, 30, 40, 0.95); /* readable navy */
  border: 1px solid rgba(255,255,255,0.35);
  transition: all .25s ease;
}

.theme-home .btn-secondary:hover {
  background: rgba(255,255,255,0.92); /* keep readable */
  color: rgba(10, 20, 30, 1);          /* dark text, not white */
  box-shadow:
    0 6px 18px rgba(79,228,255,0.28),
    0 6px 20px rgba(255,107,61,0.22);
  border-color: rgba(255,255,255,0.55);
}
/* ============================================================
   HOME THEME — WHY CARDS (match industry/capability style)
============================================================ */

.theme-home .why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.theme-home .why-card {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px);
  border-radius: 18px;
  padding: 24px 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: transform .25s ease, box-shadow .25s ease;
  color: #f2f7ff;
}

.theme-home .why-card h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.theme-home .why-card p {
  margin: 0;
  font-size: 14px;
  color: rgba(235, 245, 255, 0.92);
}

.theme-home .why-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.32),
    0 0 16px rgba(79,228,255,0.18),
    0 0 16px rgba(183,122,255,0.14);
}
/* ============================================================
   HOME THEME — FIX HOW-CARD OVERRIDE ISSUE
   Force override of theme-core defaults
============================================================ */

.theme-home .how-card {
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(16px) !important;
  border-radius: 18px !important;
  padding: 22px 22px 26px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #f2f7ff !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,0.35),
    0 0 14px rgba(130,180,255,0.12) !important;
}

.theme-home .how-card h3 {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.theme-home .how-card p {
  color: rgba(235, 245, 255, 0.92) !important;
}

.theme-home .how-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 20px !important;
}

.theme-home .how-card:hover {
  transform: translateY(-4px) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.45),
    0 0 18px rgba(110,210,255,0.18),
    0 0 18px rgba(183,122,255,0.14) !important;
}
/* No underline for CTA button in CIV theme */
.theme-home .vx-nav .nav-cta::after {
  display: none !important;
}
.vx-footer {
  background: rgba(20, 32, 48, 0.75) !important;
  backdrop-filter: blur(18px) !important;
  color: #eaf4ff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.vx-footer .footer-inner nav a {
  color: #ffffff !important;
}

.vx-footer .footer-inner nav a:hover {
  color: #e4f6ff !important;
}
/* Technology page prototype disclaimer */
.tech-prototype-disclaimer {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.60);
  margin: 18px auto 40px;
  max-width: 720px;
  line-height: 1.45;
}

/* Light-theme override (if ever needed) */
.theme-civ .tech-prototype-disclaimer {
  color: rgba(15, 25, 40, 0.55);
}
/* HYBRID — Fix hero mobile stacking (make it behave like CIV) */
@media (max-width: 900px) {
  .theme-home .hero-inner {
    grid-template-columns: 1fr !important;
  }

  .theme-home .hero-media {
    order: -1; /* same as CIV */
    height: auto;
    min-height: 360px; /* optional, for nice visual */
  }

  .theme-home .hero-media img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
/* HYBRID — Restore hero images on mobile */

.theme-home .hero-media {
  position: relative !important;
  z-index: 5 !important;   /* ABOVE the hero::before overlay */
}

.theme-home .hero-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease-in-out;
  z-index: 6 !important;   /* force above overlays */
}

.theme-home .hero-image.is-active {
  opacity: 1 !important;
  z-index: 7 !important;
}

/* Ensure the image isn't collapsed */
.theme-home .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* HYBRID — Restore hero images on mobile */

.theme-home .hero-media {
  position: relative !important;
  z-index: 5 !important;   /* ABOVE the hero::before overlay */
}

.theme-home .hero-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease-in-out;
  z-index: 6 !important;   /* force above overlays */
}

.theme-home .hero-image.is-active {
  opacity: 1 !important;
  z-index: 7 !important;
}

/* Ensure the image isn't collapsed */
.theme-home .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}