/*
 * ============================================================
 *  VOXIRE DESIGN SYSTEM — v1.0
 *  Source of truth: VOXIRE_WEBSITE_UI_SYSTEM.md
 *  Import AFTER style.css to override legacy --voxire-* tokens
 * ============================================================
 */

/* ============================================================
   1. ROOT TOKENS — mode-independent
   ============================================================ */
:root {
  /* Brand */
  --vx-teal:   #6FCEEB;
  --vx-blue:   #519AD1;
  --vx-purple: #5A4398;
  --vx-brand-gradient:      linear-gradient(135deg, #6FCEEB 0%, #519AD1 50%, #5A4398 100%);
  --vx-brand-gradient-v:    linear-gradient(180deg,  #6FCEEB 0%, #519AD1 50%, #5A4398 100%);
  --vx-brand-gradient-text: linear-gradient(135deg, #6FCEEB 0%, #7BB8E8 50%, #7B5EC0 100%);

  /* Teal scale */
  --vx-teal-400: #7DD4CD;
  --vx-teal-500: #6FCEEB;
  --vx-teal-600: #45A89F;
  --vx-teal-700: #2E857D;

  /* Blue scale */
  --vx-blue-400: #7BB8E8;
  --vx-blue-500: #519AD1;
  --vx-blue-600: #3A7DB8;

  /* Purple scale */
  --vx-purple-300: #9B7ED4;
  --vx-purple-400: #7B5EC0;
  --vx-purple-500: #5A4398;
  --vx-purple-600: #432E78;

  /* Typography */
  --vx-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --vx-font-body:    'Inter', system-ui, sans-serif;
  --vx-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale */
  --vx-text-xs:   0.75rem;
  --vx-text-sm:   0.875rem;
  --vx-text-base: 1rem;
  --vx-text-lg:   1.125rem;
  --vx-text-xl:   1.25rem;
  --vx-text-2xl:  1.5rem;
  --vx-text-3xl:  1.875rem;
  --vx-text-4xl:  2.25rem;
  --vx-text-5xl:  3rem;
  --vx-text-6xl:  3.75rem;
  --vx-text-7xl:  4.5rem;

  /* Spacing */
  --vx-space-1:  0.25rem;
  --vx-space-2:  0.5rem;
  --vx-space-3:  0.75rem;
  --vx-space-4:  1rem;
  --vx-space-5:  1.25rem;
  --vx-space-6:  1.5rem;
  --vx-space-8:  2rem;
  --vx-space-10: 2.5rem;
  --vx-space-12: 3rem;
  --vx-space-16: 4rem;
  --vx-space-20: 5rem;
  --vx-space-24: 6rem;
  --vx-space-32: 8rem;

  /* Border radius */
  --vx-radius-sm:   4px;
  --vx-radius-md:   8px;
  --vx-radius-lg:   12px;
  --vx-radius-xl:   16px;
  --vx-radius-2xl:  24px;
  --vx-radius-full: 9999px;

  /* Easing */
  --vx-ease-snappy: cubic-bezier(0.76, 0, 0.24, 1);
  --vx-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --vx-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --vx-ease-out:    cubic-bezier(0, 0, 0.2, 1);

  /* Duration */
  --vx-duration-fast:   150ms;
  --vx-duration-base:   250ms;
  --vx-duration-slow:   400ms;
  --vx-duration-slower: 600ms;
}


/* ============================================================
   2. DARK MODE TOKENS (DEFAULT)
   ============================================================ */
:root,
[data-theme="dark"] {
  --vx-bg:          #111118;
  --vx-bg-2:        #1A1A26;
  --vx-bg-3:        #222232;
  --vx-bg-overlay:  rgba(17, 17, 24, 0.85);

  --vx-border:        rgba(255, 255, 255, 0.08);
  --vx-border-strong: rgba(255, 255, 255, 0.16);

  --vx-text-primary:   #F0F0F6;
  --vx-text-secondary: rgba(240, 240, 246, 0.65);
  --vx-text-muted:     rgba(240, 240, 246, 0.35);
  --vx-text-disabled:  rgba(240, 240, 246, 0.20);

  --vx-primary:        #6FCEEB;
  --vx-primary-hover:  #7DD4CD;
  --vx-primary-active: #45A89F;
  --vx-primary-ghost:  rgba(111, 206, 235, 0.10);
  --vx-primary-glow:   rgba(111, 206, 235, 0.25);

  --vx-accent:         #5A4398;
  --vx-accent-hover:   #7B5EC0;
  --vx-accent-active:  #432E78;
  --vx-accent-ghost:   rgba(90, 67, 152, 0.15);

  --vx-success: #3ECFA0;
  --vx-warning: #F0A854;
  --vx-error:   #F05454;
  --vx-info:    #519AD1;

  --vx-shadow-sm:      0 0 0 1px var(--vx-border);
  --vx-shadow-md:      0 4px 24px rgba(0, 0, 0, 0.40);
  --vx-shadow-lg:      0 8px 48px rgba(0, 0, 0, 0.50);
  --vx-shadow-primary: 0 0 32px rgba(111, 206, 235, 0.25);
  --vx-shadow-accent:  0 0 32px rgba(90, 67, 152, 0.20);
}


/* ============================================================
   3. LIGHT MODE TOKENS
   ============================================================ */
[data-theme="light"] {
  --vx-bg:          #F5F5FA;
  --vx-bg-2:        #FFFFFF;
  --vx-bg-3:        #EEEEF5;
  --vx-bg-overlay:  rgba(245, 245, 250, 0.90);

  --vx-border:        rgba(17, 17, 24, 0.08);
  --vx-border-strong: rgba(17, 17, 24, 0.16);

  --vx-text-primary:   #111118;
  --vx-text-secondary: rgba(17, 17, 24, 0.65);
  --vx-text-muted:     rgba(17, 17, 24, 0.38);
  --vx-text-disabled:  rgba(17, 17, 24, 0.20);

  --vx-primary:        #3EA8A0;
  --vx-primary-hover:  #6FCEEB;
  --vx-primary-active: #2E857D;
  --vx-primary-ghost:  rgba(62, 168, 160, 0.08);
  --vx-primary-glow:   rgba(62, 168, 160, 0.18);

  --vx-accent:         #5A4398;
  --vx-accent-hover:   #432E78;
  --vx-accent-ghost:   rgba(90, 67, 152, 0.08);

  --vx-shadow-sm:      0 1px 3px rgba(17, 17, 24, 0.08);
  --vx-shadow-md:      0 4px 16px rgba(17, 17, 24, 0.10);
  --vx-shadow-lg:      0 8px 32px rgba(17, 17, 24, 0.12);
  --vx-shadow-primary: 0 4px 24px rgba(62, 168, 160, 0.20);
}


/* ============================================================
   4. ALIAS LEGACY --voxire-* → --vx-* TOKENS
   All 335 legacy selectors auto-update through these aliases.
   ============================================================ */
body {
  background: var(--vx-bg);
  color: var(--vx-text-secondary);
  font-family: var(--vx-font-body);
  font-size: var(--vx-text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Legacy aliases */
  --voxire-primary-font:    var(--vx-font-display);
  --voxire-secondary-font:  var(--vx-font-body);
  --voxire-primary-color:   var(--vx-primary);
  --voxire-secondary-color: var(--vx-text-primary);
  --voxire-body-color:      var(--vx-text-secondary);
  --voxire-headline-color:  var(--vx-text-primary);
  --voxire-border-color:    var(--vx-border);
  --voxire-dark-color:      var(--vx-bg);
  --voxire-tertiary-color:  var(--vx-bg-2);
  --voxire-primary-rgb:     111, 206, 235;
  --voxire-secondary-rgb:   240, 240, 246;
  --voxire-tertiary-rgb:    26, 26, 38;
}


/* ============================================================
   5. TYPOGRAPHY SYSTEM
   ============================================================ */

/* Headings → Space Grotesk */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-family: var(--vx-font-display);
  color: var(--vx-text-primary);
  font-weight: 600;
  line-height: 1.15;
  transform: translateZ(0);
  will-change: transform;
  -webkit-font-smoothing: antialiased;
}
h1, .h1 {
  font-size: clamp(2.5rem, 5vw, var(--vx-text-7xl));
  letter-spacing: -0.02em;
  font-weight: 700;
}
h2, .h2 {
  font-size: clamp(2rem, 3.5vw, var(--vx-text-5xl));
  letter-spacing: -0.02em;
  font-weight: 700;
}
h3, .h3 {
  font-size: clamp(1.5rem, 2.5vw, var(--vx-text-3xl));
  letter-spacing: -0.01em;
  font-weight: 600;
}
h4, .h4 {
  font-size: var(--vx-text-2xl);
  letter-spacing: -0.01em;
  font-weight: 600;
}
h5, .h5 { font-size: var(--vx-text-xl); font-weight: 500; }
h6, .h6 { font-size: var(--vx-text-lg); font-weight: 500; }

/* Body copy */
p {
  font-family: var(--vx-font-body);
  color: var(--vx-text-secondary);
  line-height: 1.7;
}

/* Links */
a {
  color: var(--vx-text-secondary);
  transition: color var(--vx-duration-base) var(--vx-ease-smooth);
}
a:hover {
  color: var(--vx-primary);
}

/* Gradient text utility */
.text-gradient {
  background: var(--vx-brand-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sub-label (small uppercase tag above section headings) */
.sub-label,
.section-title .sub-title {
  font-family: var(--vx-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vx-primary);
  display: inline-block;
  margin-bottom: 12px;
}
/* Remove the old SVG bullet from sub-title */
.section-title .sub-title:before {
  display: none;
}

/* Mono */
code, pre, .mono {
  font-family: var(--vx-font-mono);
  font-size: 0.9em;
}


/* ============================================================
   6. BUTTON SYSTEM
   ============================================================ */

/* Override legacy .theme-btn to use Voxire tokens */
.theme-btn,
a.theme-btn {
  font-family: var(--vx-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: 12px 28px;
  border-radius: var(--vx-radius-md);
  border: 1.5px solid var(--vx-border-strong);
  background: transparent;
  color: var(--vx-text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--vx-duration-base) var(--vx-ease-smooth),
    color var(--vx-duration-base) var(--vx-ease-smooth),
    border-color var(--vx-duration-base) var(--vx-ease-smooth),
    box-shadow var(--vx-duration-base) var(--vx-ease-smooth);
  position: relative;
  overflow: hidden;
  user-select: none;
}
.theme-btn:hover,
a.theme-btn:hover {
  background: var(--vx-primary);
  border-color: var(--vx-primary);
  color: var(--vx-bg);
  box-shadow: var(--vx-shadow-primary);
}
.theme-btn.style-two,
a.theme-btn.style-two {
  background: var(--vx-primary);
  border-color: var(--vx-primary);
  color: var(--vx-bg);
}
.theme-btn.style-two:hover,
a.theme-btn.style-two:hover {
  background: transparent;
  color: var(--vx-primary);
}

/* Primary button */
.btn-vx-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--vx-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 12px 28px;
  border-radius: var(--vx-radius-md);
  background: var(--vx-primary);
  color: var(--vx-bg);
  border: 2px solid var(--vx-primary);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  position: relative;
  transition:
    background var(--vx-duration-base) var(--vx-ease-snappy),
    color var(--vx-duration-base) var(--vx-ease-snappy),
    box-shadow var(--vx-duration-base) var(--vx-ease-snappy);
}
.btn-vx-primary:hover {
  background: transparent;
  color: var(--vx-primary);
  box-shadow: var(--vx-shadow-primary);
}

/* Gradient CTA button */
.btn-vx-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--vx-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 13px 32px;
  border-radius: var(--vx-radius-md);
  background: var(--vx-brand-gradient);
  color: #fff;
  border: none;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  position: relative;
  transition: opacity var(--vx-duration-base), box-shadow var(--vx-duration-base);
}
.btn-vx-gradient:hover {
  opacity: 0.88;
  box-shadow: 0 0 40px rgba(111, 206, 235, 0.30);
  color: #fff;
}

/* Outline button */
.btn-vx-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--vx-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: var(--vx-radius-md);
  background: transparent;
  color: var(--vx-text-primary);
  border: 1.5px solid var(--vx-border-strong);
  cursor: pointer;
  user-select: none;
  transition:
    border-color var(--vx-duration-fast) var(--vx-ease-smooth),
    color var(--vx-duration-fast) var(--vx-ease-smooth),
    background var(--vx-duration-fast) var(--vx-ease-smooth);
}
.btn-vx-outline:hover {
  border-color: var(--vx-primary);
  color: var(--vx-primary);
  background: var(--vx-primary-ghost);
}


/* ============================================================
   7. RAWLAB LETTER-BY-LETTER BUTTON ANIMATION
   Desktop only (min-width: 992px).
   Wrap button text chars in <span class="letter">
   ============================================================ */
@media (min-width: 992px) {
  .btn-vx-gradient .letter,
  .btn-vx-primary .letter,
  .theme-btn .letter {
    display: inline-block;
    transition: transform var(--vx-duration-base) var(--vx-ease-snappy);
    will-change: transform;
  }

  .btn-vx-gradient:hover .letter,
  .btn-vx-primary:hover .letter,
  .theme-btn:hover .letter {
    transform: translateY(-100%);
  }

  /* Stagger delays — up to 20 chars */
  .btn-vx-gradient .letter:nth-child(1),
  .btn-vx-primary .letter:nth-child(1),
  .theme-btn .letter:nth-child(1)  { transition-delay: 0ms; }
  .btn-vx-gradient .letter:nth-child(2),
  .btn-vx-primary .letter:nth-child(2),
  .theme-btn .letter:nth-child(2)  { transition-delay: 15ms; }
  .btn-vx-gradient .letter:nth-child(3),
  .btn-vx-primary .letter:nth-child(3),
  .theme-btn .letter:nth-child(3)  { transition-delay: 30ms; }
  .btn-vx-gradient .letter:nth-child(4),
  .btn-vx-primary .letter:nth-child(4),
  .theme-btn .letter:nth-child(4)  { transition-delay: 45ms; }
  .btn-vx-gradient .letter:nth-child(5),
  .btn-vx-primary .letter:nth-child(5),
  .theme-btn .letter:nth-child(5)  { transition-delay: 60ms; }
  .btn-vx-gradient .letter:nth-child(6),
  .btn-vx-primary .letter:nth-child(6),
  .theme-btn .letter:nth-child(6)  { transition-delay: 75ms; }
  .btn-vx-gradient .letter:nth-child(7),
  .btn-vx-primary .letter:nth-child(7),
  .theme-btn .letter:nth-child(7)  { transition-delay: 90ms; }
  .btn-vx-gradient .letter:nth-child(8),
  .btn-vx-primary .letter:nth-child(8),
  .theme-btn .letter:nth-child(8)  { transition-delay: 105ms; }
  .btn-vx-gradient .letter:nth-child(9),
  .btn-vx-primary .letter:nth-child(9),
  .theme-btn .letter:nth-child(9)  { transition-delay: 120ms; }
  .btn-vx-gradient .letter:nth-child(10),
  .btn-vx-primary .letter:nth-child(10),
  .theme-btn .letter:nth-child(10) { transition-delay: 135ms; }
  .btn-vx-gradient .letter:nth-child(11),
  .btn-vx-primary .letter:nth-child(11),
  .theme-btn .letter:nth-child(11) { transition-delay: 150ms; }
  .btn-vx-gradient .letter:nth-child(12),
  .btn-vx-primary .letter:nth-child(12),
  .theme-btn .letter:nth-child(12) { transition-delay: 165ms; }
  .btn-vx-gradient .letter:nth-child(13),
  .btn-vx-primary .letter:nth-child(13),
  .theme-btn .letter:nth-child(13) { transition-delay: 180ms; }
  .btn-vx-gradient .letter:nth-child(14),
  .btn-vx-primary .letter:nth-child(14),
  .theme-btn .letter:nth-child(14) { transition-delay: 195ms; }
  .btn-vx-gradient .letter:nth-child(15),
  .btn-vx-primary .letter:nth-child(15),
  .theme-btn .letter:nth-child(15) { transition-delay: 210ms; }
  .btn-vx-gradient .letter:nth-child(16),
  .btn-vx-primary .letter:nth-child(16),
  .theme-btn .letter:nth-child(16) { transition-delay: 225ms; }
  .btn-vx-gradient .letter:nth-child(17),
  .btn-vx-primary .letter:nth-child(17),
  .theme-btn .letter:nth-child(17) { transition-delay: 240ms; }
  .btn-vx-gradient .letter:nth-child(18),
  .btn-vx-primary .letter:nth-child(18),
  .theme-btn .letter:nth-child(18) { transition-delay: 255ms; }
  .btn-vx-gradient .letter:nth-child(19),
  .btn-vx-primary .letter:nth-child(19),
  .theme-btn .letter:nth-child(19) { transition-delay: 270ms; }
  .btn-vx-gradient .letter:nth-child(20),
  .btn-vx-primary .letter:nth-child(20),
  .theme-btn .letter:nth-child(20) { transition-delay: 285ms; }
}


/* ============================================================
   8. FILM GRAIN NOISE OVERLAY (rawlab-inspired)
   Dark mode only. Add <div class="noise-overlay"></div>
   as first child of <body> via Layout.js
   ============================================================ */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url('/assets/images/noise.png');
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.028;
  animation: noise-shift 0.2s steps(2) infinite;
}
@keyframes noise-shift {
  0%   { background-position: 0 0; }
  50%  { background-position: 32px 16px; }
  100% { background-position: 64px 64px; }
}
[data-theme="light"] .noise-overlay {
  display: none;
}
@media (max-width: 991px) {
  .noise-overlay { display: none; }
}


/* ============================================================
   9. SCROLL REVEAL SYSTEM
   Replace WOW.js classes with Intersection Observer-driven reveals.
   JS side in utils.js handles adding .is-visible.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--vx-duration-slow) var(--vx-ease-out),
    transform var(--vx-duration-slow) var(--vx-ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity var(--vx-duration-slow) var(--vx-ease-out),
    transform var(--vx-duration-slow) var(--vx-ease-out);
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity var(--vx-duration-slow) var(--vx-ease-out),
    transform var(--vx-duration-slow) var(--vx-ease-out);
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}
/* Stagger children inside a reveal group */
.reveal-group > *:nth-child(1) { transition-delay: 0ms; }
.reveal-group > *:nth-child(2) { transition-delay: 80ms; }
.reveal-group > *:nth-child(3) { transition-delay: 160ms; }
.reveal-group > *:nth-child(4) { transition-delay: 240ms; }
.reveal-group > *:nth-child(5) { transition-delay: 320ms; }
.reveal-group > *:nth-child(6) { transition-delay: 400ms; }

/* Keep WOW.js classes visible so existing markup doesn't break
   while we progressively migrate to .reveal */
.wow {
  opacity: 1 !important;
  visibility: visible !important;
  animation-name: none !important;
}
@media (min-width: 992px) {
  .wow.fadeInLeft,
  .wow.fadeInRight,
  .wow.fadeInUp,
  .wow.fadeIn {
    animation-name: unset;
  }
}


/* ============================================================
   10. CARD SYSTEM
   ============================================================ */
.card-vx {
  background: var(--vx-bg-2);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-lg);
  padding: var(--vx-space-8);
  transition:
    border-color var(--vx-duration-base) var(--vx-ease-smooth),
    box-shadow var(--vx-duration-base) var(--vx-ease-smooth);
}
.card-vx:hover {
  border-color: var(--vx-border-strong);
  box-shadow: var(--vx-shadow-md);
}
.card-vx-accent {
  border-color: var(--vx-primary);
  box-shadow: var(--vx-shadow-primary);
}


/* ============================================================
   11. FORM INPUTS
   ============================================================ */
.input-vx,
input.form-control,
textarea.form-control,
select.form-control {
  background: var(--vx-bg-3);
  border: 1.5px solid var(--vx-border);
  border-radius: var(--vx-radius-md);
  padding: 14px 18px;
  color: var(--vx-text-primary);
  font-family: var(--vx-font-body);
  font-size: var(--vx-text-base);
  width: 100%;
  transition:
    border-color var(--vx-duration-fast) var(--vx-ease-smooth),
    box-shadow var(--vx-duration-fast) var(--vx-ease-smooth);
}
.input-vx::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--vx-text-muted);
}
.input-vx:focus,
input.form-control:focus,
textarea.form-control:focus {
  border-color: var(--vx-primary);
  box-shadow: 0 0 0 3px var(--vx-primary-ghost);
  outline: none;
}


/* ============================================================
   12. BADGE / TAG SYSTEM
   ============================================================ */
.badge-vx {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--vx-radius-sm);
  font-size: var(--vx-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-vx-teal    { background: var(--vx-primary-ghost); color: var(--vx-primary); }
.badge-vx-purple  { background: var(--vx-accent-ghost);  color: var(--vx-accent-hover); }
.badge-vx-neutral { background: var(--vx-bg-3);          color: var(--vx-text-secondary); }


/* ============================================================
   13. GRADIENT DIVIDER
   ============================================================ */
.gradient-rule {
  width: 64px;
  height: 3px;
  background: var(--vx-brand-gradient);
  border: none;
  border-radius: 2px;
  display: block;
}


/* ============================================================
   14. NAVIGATION OVERRIDES
   ============================================================ */
.main-header {
  background: transparent;
  transition:
    background var(--vx-duration-base) var(--vx-ease-smooth),
    border-color var(--vx-duration-base) var(--vx-ease-smooth),
    backdrop-filter var(--vx-duration-base) var(--vx-ease-smooth);
}
.main-header.fixed-header {
  background: var(--vx-bg-overlay);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--vx-border);
}

/* Nav links */
.navigation > li > a,
.navigation > li > Link,
.main-menu .navigation > li > a {
  font-family: var(--vx-font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--vx-text-secondary);
  transition: color var(--vx-duration-fast) var(--vx-ease-smooth);
}
.navigation > li > a:hover,
.navigation > li.current > a {
  color: var(--vx-primary);
}


/* ============================================================
   15. SECTION UTILITY CLASSES
   ============================================================ */
.section-vx {
  padding: 120px 0;
}
@media (max-width: 991px) {
  .section-vx { padding: 72px 0; }
}

/* Section title override */
.section-title h2 i,
.section-title h2 span.text-gradient {
  background: var(--vx-brand-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Big text watermark (background oversized text) */
.big-text {
  color: var(--vx-text-primary);
  opacity: 0.03;
}

/* Page banner background */
.page-banner-area {
  background: var(--vx-bg-2);
}


/* ============================================================
   16. GPU ACCELERATION HELPERS
   ============================================================ */
.gpu {
  transform: translateZ(0);
  will-change: transform;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  transform: translateZ(0);
  will-change: transform;
}


/* ============================================================
   17. DARK MODE THEME TOGGLE
   Stored in localStorage under key "vx-theme"
   Applied as data-theme attr on <html>
   ============================================================ */
html {
  color-scheme: dark;
}
[data-theme="light"] {
  color-scheme: light;
}


/* ============================================================
   18. SCROLLBAR STYLING
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--vx-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--vx-border-strong);
  border-radius: var(--vx-radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--vx-primary);
}


/* ============================================================
   19. SELECTION COLOR
   ============================================================ */
::selection {
  background: var(--vx-primary-ghost);
  color: var(--vx-primary);
}


/* ============================================================
   20. MOBILE ANIMATION POLICY
   Reduce/disable heavy animations on mobile
   ============================================================ */
@media (max-width: 991px) {
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition-duration: 0ms;
  }
  .reveal.is-visible,
  .reveal-left.is-visible,
  .reveal-right.is-visible {
    opacity: 1;
    transform: none;
  }
}


/* ============================================================
   21. HERO SECTION OVERRIDES
   The hero.jpg is a template placeholder image.
   Apply a dark overlay so it reads as dark-themed until
   Voxire replaces it with branded content.
   ============================================================ */
.hero-area {
  background: var(--vx-bg);
  position: relative;
}
/* Darken the hero bottom image (template placeholder photo) */
.hero-bottom-image {
  position: relative;
}
.hero-bottom-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--vx-bg) 0%,
    rgba(17, 17, 24, 0.55) 40%,
    rgba(17, 17, 24, 0.55) 70%,
    var(--vx-bg) 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* Hero bg image — soft opacity */
.hero-bg {
  opacity: 0.04 !important;
}
/* Hero heading — use brand gradient on italic/span */
.hero-content h1 i {
  font-style: italic;
  background: var(--vx-brand-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}
.hero-content h1 span {
  color: transparent;
  -webkit-text-stroke: 1px var(--vx-primary);
}


/* ============================================================
   22. HARDCODED GRADIENT COLOR OVERRIDES
   These selectors in style.css use literal #6FCEEB hex values
   that cannot be aliased via CSS custom properties.
   Replacing with Voxire teal #6FCEEB.
   ============================================================ */

/* why-choose icon connector line */
.why-choose-item-two .icon .icon-bottom-shape {
  background: linear-gradient(180deg, #6FCEEB 0%, rgba(111, 206, 235, 0) 100%) !important;
}

/* testimonial style-two divider */
.testimonial-item.style-two hr {
  background: radial-gradient(49.57% 329259.92% at 50.43% 100.01%, #6FCEEB 20%, rgba(111, 206, 235, 0) 100%) !important;
}

/* testimonial five divider */
.testimonial-five-right hr {
  background: linear-gradient(90deg, #6FCEEB 0.86%, rgba(111, 206, 235, 0) 100%) !important;
}


/* ============================================================
   23. SECTION BACKGROUND CONSISTENCY
   Ensure dark sections use --vx-bg or --vx-bg-2 instead of
   hard-coded near-black values (#0A1019, #16161C etc).
   ============================================================ */

/* Service cards, CTA, and alternate dark sections */
.services-area,
.cta-area,
.counter-area,
.testimonials-area,
.client-logo-area,
.work-process-area {
  background: var(--vx-bg);
}

.service-item,
.project-item,
.team-member,
.pricing-plan {
  background: var(--vx-bg-2);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-lg);
  transition:
    border-color var(--vx-duration-base) var(--vx-ease-smooth),
    box-shadow var(--vx-duration-base) var(--vx-ease-smooth);
}
.service-item:hover,
.project-item:hover,
.team-member:hover,
.pricing-plan:hover {
  border-color: var(--vx-border-strong);
  box-shadow: var(--vx-shadow-md);
}

/* Footer */
.main-footer {
  background: var(--vx-bg-2) !important;
  border-top: 1px solid var(--vx-border);
}
.footer-bottom {
  background: var(--vx-bg) !important;
  border-top: 1px solid var(--vx-border);
}

/* Nav sidebar / mobile menu overlay */
.menu-sidebar-content,
.mean-container .mean-nav {
  background: var(--vx-bg-2) !important;
}

/* Preloader */
#preloader,
.preloader {
  background: var(--vx-bg) !important;
}
#preloader .loader,
.preloader .loader {
  border-top-color: var(--vx-primary) !important;
}


/* ============================================================
   24. VOXIRE PRIMARY COLOR — UNIVERSAL ACCENT LOCK
   Ensure no lingering template mint green (#6FCEEB) shows.
   Any element still using the old primary via inline style
   or direct CSS gets clamped here.
   ============================================================ */

/* Override any lingering border/outline using old green */
[style*="55E6A5"],
[style*="55e6a5"] {
  filter: hue-rotate(145deg) saturate(0.8);
}

/* Sub-title dots/shapes that use primary color SVG backgrounds */
.sub-title::before,
.sub-title::after {
  background-color: var(--vx-primary) !important;
  background-image: none;
}

/* Highlight / mark tag */
mark {
  background: var(--vx-primary-ghost);
  color: var(--vx-primary);
  border-radius: 2px;
  padding: 0 2px;
}


/* ============================================================
   25. LINK & READ-MORE STYLE OVERRIDES
   ============================================================ */
.read-more,
a.read-more {
  color: var(--vx-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--vx-duration-fast) var(--vx-ease-smooth), color var(--vx-duration-fast);
}
.read-more:hover,
a.read-more:hover {
  color: var(--vx-primary-hover);
  gap: 10px;
}

/* Arrow icon */
.read-more i,
.read-more .far {
  font-size: 0.85em;
  transition: transform var(--vx-duration-fast) var(--vx-ease-smooth);
}
.read-more:hover i,
.read-more:hover .far {
  transform: translateX(4px);
}


/* ============================================================
   26. CAREERS PAGE SPECIFIC
   Ensures job listing cards match the Voxire design system.
   ============================================================ */
.career-card,
.job-listing-item {
  background: var(--vx-bg-2);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-lg);
  padding: var(--vx-space-8);
  transition:
    border-color var(--vx-duration-base) var(--vx-ease-smooth),
    box-shadow var(--vx-duration-base) var(--vx-ease-smooth);
}
.career-card:hover,
.job-listing-item:hover {
  border-color: var(--vx-primary);
  box-shadow: var(--vx-shadow-primary);
}