/* INDUSTRY BASE CSS - Color variables loaded from css/themes/theme-*.css */


/* =========================================================================
   ASI LABS — LIQUID GLASS DESIGN SYSTEM v2
   Full-Width · Rich Blue Palette · Crazy Dark Glassmorphism
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Syncopate:wght@700&display=swap');

/* ===================== CSS VARIABLES ===================== */
:root {
  /* Backgrounds — Premium light silvers */
  --bg-body: #f4f5f9;
  --bg-white: #ffffff;
  --bg-warm: #f9fafb;
  --bg-section-alt: #eef0f6;
  --bg-hero-gradient: linear-gradient(135deg,
      #e4e9f4 0%,
      #f4f5f9 35%,
      #e8ecf8 65%,
      #f0f2f8 100%);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-border: 1px solid rgba(255, 255, 255, 0.7);
  --glass-border-subtle: 1px solid rgba(0, 0, 0, 0.06);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  --glass-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.1);
  --backdrop-blur: blur(20px);
  --backdrop-blur-heavy: blur(40px);

  /* Text — Deep carbon, never pure black */
  --text-heading: #0c0f1a;
  --text-body: #3a3f54;
  --text-muted: #727891;
  --text-white: #ffffff;

  /* ===== THE BLUE SPECTRUM — 5 shades from midnight to sky ===== */
  --blue-midnight: #0f1b3d;
  /* Deepest navy — headings, dark accents */
  --blue-deep: #1a3a7a;
  /* Deep royal — strong emphasis */
  --accent-violet: var(--blue-core);
  /* Core cobalt — primary buttons & links */
  --blue-bright: var(--blue-core);
  /* Bright blue — secondary elements */
  --blue-sky: var(--accent-primary);
  /* Sky blue — highlights, tags, badges */

  /* Primary uses core cobalt by default */
  --accent-primary: var(--accent-violet);
  --accent-primary-soft: rgba(var(--blue-deep-rgb), 0.08);
  --accent-primary-glow: rgba(var(--blue-deep-rgb), 0.25);

  /* Secondary: Electric Purple (complements the blue family) */
  --accent-secondary: var(--blue-core);
  --accent-secondary-soft: rgba(var(--blue-core-rgb), 0.08);

  /* Tertiary: Deep Teal (the cool counterpoint) */
  --accent-tertiary: var(--blue-core);
  --accent-tertiary-soft: rgba(13, 148, 136, 0.08);

  /* Warm accent for urgency/CTAs */
  --accent-warm: #f97316;
  --accent-warm-soft: rgba(249, 115, 22, 0.08);

  /* P3 Palette (Competencies) */
  --p3-accent-blue: var(--accent-primary);
  --p3-accent-purple: var(--accent-primary);

  /* Gradients — built from the blue spectrum */
  --accent-gradient: linear-gradient(135deg,
      var(--blue-deep) 0%,
      var(--accent-violet) 40%,
      var(--blue-bright) 100%);
  --accent-gradient-vivid: linear-gradient(135deg,
      var(--blue-deep) 0%,
      var(--accent-mid) 50%,
      var(--accent-secondary) 100%);
  --accent-gradient-cool: linear-gradient(135deg,
      var(--blue-core) 0%,
      var(--blue-core) 50%,
      var(--blue-core) 100%);
  --accent-gradient-warm: linear-gradient(135deg, #f97316 0%, #fb923c 100%);

  /* Multi-accent palette for card/section variety */
  --accent-teal: var(--blue-core);
  --accent-teal-soft: rgba(13, 148, 136, 0.08);
  --accent-emerald: var(--accent-primary);
  --accent-emerald-soft: rgba(var(--accent-primary-rgb), 0.08);
  --accent-rose: #e11d48;
  --accent-rose-soft: rgba(225, 29, 72, 0.08);
  --accent-amber: #d97706;
  --accent-amber-soft: rgba(217, 119, 6, 0.08);
  --accent-violet: var(--blue-core);
  --accent-violet-soft: rgba(var(--blue-core-rgb), 0.08);
  --accent-indigo: var(--accent-deep);
  --accent-indigo-soft: rgba(var(--accent-deep-rgb), 0.08);

  /* Mesh gradient blobs — subtle on light */
  --mesh-blue: rgba(var(--blue-deep-rgb), 0.08);
  --mesh-purple: rgba(var(--blue-core-rgb), 0.06);
  --mesh-teal: rgba(13, 148, 136, 0.04);
  --mesh-orange: rgba(249, 115, 22, 0.03);

  /* Layout — EXPANSIVE CINEMATIC with 1600px max width */
  --page-max-width: 1600px;
  --page-padding: 2.5rem;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Typography */
  --font-sans: "Inter", sans-serif;
  --font-display: "Outfit", sans-serif;
  --font-headline: "Outfit", sans-serif;
  --font-mono: "Roboto Mono", monospace;
}

/* =========================================================================
   DARK MODE — "THE ABSOLUTE MAXIMUM" (Concept 10 Aesthetic)
   Pure Black backgrounds, extreme contrast, ultra-thin borders
   ========================================================================= */
[data-theme="dark"] {
  /* ===== PURE BLACK — No violet, no blue, no tint ===== */
  --bg-body: #000000;
  --bg-white: #000000;
  --bg-warm: #000000;
  --bg-section-alt: #000000;
  --bg-hero-gradient: linear-gradient(135deg, #000 0%, #000 100%);

  /* True Glass — on pure black */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-bg-strong: rgba(0, 0, 0, 0.95);
  --glass-border: 1px solid rgba(255, 255, 255, 0.1);
  --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.05);
  --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  --glass-shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.9);

  /* Text — Pure white hierarchy (Concept 10) */
  --text-heading: #ffffff;
  --text-body: rgba(255, 255, 255, 0.8);
  --text-muted: rgba(255, 255, 255, 0.45);

  /* Accents — Concept 10 Cyan only */
  --accent-primary: var(--accent-primary);
  --accent-primary-soft: rgba(var(--accent-primary-rgb), 0.1);
  --accent-primary-glow: rgba(var(--accent-primary-rgb), 0.3);
  --accent-secondary: var(--accent-primary);
  --accent-secondary-soft: rgba(var(--accent-primary-rgb), 0.1);
  --accent-tertiary: var(--accent-primary);
  --accent-tertiary-soft: rgba(var(--accent-primary-rgb), 0.1);

  /* Gradients — Monochrome or Cyan-focused only */
  --accent-gradient: linear-gradient(135deg, var(--accent-deep) 0%, var(--blue-core) 40%, var(--accent-tertiary-vivid) 100%);
  --accent-gradient-vivid: linear-gradient(135deg, var(--blue-deep) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%);

  /* Mesh Blobs — DEAD. */
  --mesh-blue: rgba(var(--blue-deep-rgb), 0.08);
  --mesh-purple: rgba(var(--blue-core-rgb), 0.06);
  --mesh-teal: rgba(13, 148, 136, 0.04);
}

[data-theme="dark"] body {
  background: #000000;
  background-attachment: scroll;
}

/* Ensure the glowing meshes are absolute faint in dark mode per Concept 10 */
[data-theme="dark"] .mesh-bg::before {
  filter: blur(150px);
}

[data-theme="dark"] .mesh-bg::after {
  filter: blur(150px);
}

[data-theme="dark"] img {
  filter: brightness(0.9) contrast(1.1);
  /* Slightly cinematic grades for images */
}

[data-theme="light"] body {
  background: var(--bg-body);
}

/* ===================== GLOBAL RESET ===================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg-body);
  background-attachment: scroll;
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-headline);
  color: var(--text-heading);
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 800;
}

h1 {
  font-size: clamp(3.5rem, 6vw, 5.5rem);
}

h2 {
  font-size: clamp(2.5rem, 4.5vw, 4rem);
}

h3 {
  font-size: clamp(1.5rem, 2.2vw, 1.8rem);
}

h4 {
  font-size: 1.2rem;
}

p {
  max-width: 680px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 1rem;
}

/* ===================== LAYOUT — Full Width ===================== */
.container {
  width: 100%;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

.container-wide {
  width: 100%;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

.section {
  position: relative;
  padding: 8rem 0;
  background: var(--bg-body);
}

.section-alt {
  background: var(--bg-section-alt);
}

[data-theme="dark"] .section-alt {
  background: #000000;
}

/* Premium Card — Theme Aware */
.premium-card {
  padding: 4rem;
  background: var(--glass-bg-strong);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .premium-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.section-header {
  max-width: 680px;
  margin-bottom: 4rem;
}

.section-header.centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-header p {
  color: var(--text-muted);
  font-size: 1.15rem;
  margin-top: 1rem;
}

/* ===================== ANIMATED MESH BACKGROUND ===================== */
.mesh-bg {
  position: relative;
  overflow: hidden;
}

.mesh-bg::before {
  content: "";
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: var(--mesh-blue);
  filter: blur(120px);
  top: -200px;
  right: -100px;
  animation: floatBlob 18s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.mesh-bg::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: var(--mesh-purple);
  filter: blur(100px);
  bottom: -100px;
  left: -50px;
  animation: floatBlob 14s ease-in-out infinite alternate-reverse;
  pointer-events: none;
  z-index: 0;
}

@keyframes floatBlob {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(40px, -30px) scale(1.05);
  }

  100% {
    transform: translate(-20px, 20px) scale(0.95);
  }
}

/* ===================== HERO SECTION ===================== */
.hero {
  padding: 10rem 0 6rem;
  background: var(--bg-body);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .hero {
  background: #000000;
}

.hero-headline {
  margin-bottom: 2rem;
  z-index: 2;
  position: relative;
}

.hero-sub {
  font-size: 1.25rem;
  color: var(--text-muted);
  max-width: 600px;
  line-height: 1.6;
  margin-bottom: 3rem;
  z-index: 2;
  position: relative;
}

.highlight {
  color: var(--accent-primary);
  position: relative;
  display: inline-block;
}


/* =========================================================================
   SCROLL-REVEAL ANIMATION SYSTEM (Concept 10 Aesthetic)
   Elements start hidden and glide up smoothly as they enter the viewport.
   JS in script.js adds `.visible` via IntersectionObserver.
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

.reveal-delay-3 {
  transition-delay: 0.3s;
}

.reveal-delay-4 {
  transition-delay: 0.4s;
}

.reveal-delay-5 {
  transition-delay: 0.5s;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ═══ NAVIGATION/MEGA-DROPDOWN/DROPDOWN-CONTENT REMOVED ═══ */
/* These styles are now managed globally by style.css */

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1.6rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--accent-gradient);
  color: var(--text-white);
  box-shadow: 0 4px 15px var(--accent-primary-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--accent-primary-glow);
  color: var(--text-white);
}

.btn-secondary {
  background: var(--bg-white);
  color: var(--text-heading);
  border: var(--glass-border-subtle);
  box-shadow: var(--glass-shadow);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow-hover);
  color: var(--text-heading);
}

.btn-ghost {
  background: transparent;
  color: var(--accent-primary);
  padding: 0.5rem 0;
}

.btn-ghost:hover {
  color: var(--accent-secondary);
}

.btn-lg {
  padding: 1rem 2.2rem;
  font-size: 1rem;
  border-radius: var(--radius-md);
}

.btn-icon {
  font-size: 0.85em;
  transition: transform 0.3s;
}

.btn:hover .btn-icon {
  transform: translateX(3px);
}

/* =========================================================================
   THEME UX — Tooltips & Hints
   ========================================================================= */

/* Onboarding Hint Bubble */
.theme-hint {
  position: absolute;
  top: calc(100% + 15px);
  right: 0;
  background: var(--accent-primary);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 2001;
}

.theme-hint.active {
  opacity: 1;
  transform: translateY(0);
}

.theme-hint::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 20px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--accent-primary);
}

/* Glassmorphic Tooltip */
.theme-toggle-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.theme-tooltip {
  position: absolute;
  top: auto !important;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--glass-border);
  color: var(--text-heading);
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  box-shadow: var(--glass-shadow);
  pointer-events: none;
}

.theme-toggle:hover + .theme-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

[data-theme="dark"] .theme-tooltip {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* =========================================================================
   HERO SECTION — The Liquid Glass Gateway
   ========================================================================= */
.hero {\r\n  position: relative;\r\n  padding-top: 80px;\r\n  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--bg-hero-gradient);
  overflow: hidden;
}

/* Animated mesh blobs behind hero */
.hero .mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.hero .mesh-blob-1 {
  width: 700px;
  height: 700px;
  background: var(--mesh-blue);
  top: -15%;
  right: -5%;
  animation: floatBlob 16s ease-in-out infinite alternate;
}

.hero .mesh-blob-2 {
  width: 500px;
  height: 500px;
  background: var(--mesh-purple);
  bottom: -10%;
  left: 5%;
  animation: floatBlob 12s ease-in-out infinite alternate-reverse;
}

.hero .mesh-blob-3 {
  width: 400px;
  height: 400px;
  background: var(--mesh-orange);
  top: 30%;
  left: 40%;
  animation: floatBlob 20s ease-in-out infinite alternate;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1.2rem;
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: var(--glass-border);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent-primary);
  margin-bottom: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.hero-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 var(--accent-primary-glow);
  }

  50% {
    opacity: 0.7;
    box-shadow: 0 0 0 6px transparent;
  }
}

.hero-headline {
  margin-bottom: 1.5rem;
}

.hero-headline .highlight {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

[data-theme="dark"] .hero-headline .highlight {
  background: linear-gradient(135deg, var(--c1), var(--c2)); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent;

}

.hero-sub {
  font-size: 1.2rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

/* Hero Metrics */
.hero-metrics {
  display: flex;
  gap: 3rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 2.5rem;
}

.metric {
  text-align: left;
}

.metric-value {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1;
}

.metric-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
}

/* Hero Visual: Floating Glass Card */
.hero-visual {
  position: relative;
}

.hero-glass-card {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--backdrop-blur-heavy);
  -webkit-backdrop-filter: var(--backdrop-blur-heavy);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow:
    var(--glass-shadow),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  position: relative;
  overflow: hidden;
}

.hero-glass-card .terminal-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.terminal-dot.red {
  background: #ff5f56;
}

.terminal-dot.yellow {
  background: #ffbd2e;
}

.terminal-dot.green {
  background: #27c93f;
}

.terminal-title {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.terminal-lines {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 2;
  color: var(--text-body);
}

.terminal-lines .cmd {
  color: var(--accent-primary);
}

.terminal-lines .result {
  color: var(--accent-secondary);
  font-weight: 600;
}

/* Scanning line across card */
.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
      transparent,
      var(--accent-primary),
      transparent);
  animation: scanAcross 4s linear infinite;
  opacity: 0.5;
}

@keyframes scanAcross {
  0% {
    top: 0%;
  }

  100% {
    top: 100%;
  }
}

/* =========================================================================
   GLASS CARD SYSTEM — The Frosted Panels
   ========================================================================= */
.glass-card {
  background: linear-gradient(145deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.5) 100%);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: var(--glass-border);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 1),
    0 8px 32px rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-md);
  padding: 2.5rem;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.glass-card:hover {
  transform: translateY(-6px);
  background: linear-gradient(145deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.7) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 1),
    0 16px 48px rgba(var(--blue-deep-rgb), 0.08);
  border-color: rgba(var(--blue-deep-rgb), 0.2);
}

/* Spotlight glow on hover */
.glass-card::before {
  content: "";
  position: absolute;
  top: var(--mouse-y, 50%);
  left: var(--mouse-x, 50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle,
      var(--accent-primary-glow) 0%,
      transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 0;
}

.glass-card:hover::before {
  opacity: 0.3;
}

.glass-card>* {
  position: relative;
  z-index: 1;
}

.card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-primary-soft);
  border-radius: var(--radius-sm);
  color: var(--accent-primary);
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
}

.card-title {
  margin-bottom: 0.8rem;
}

.card-text {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.card-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition:
    gap 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s ease;
}

.card-link:hover {
  gap: 0.8rem;
  color: var(--blue-deep);
}

/* ===================== BENTO GRID ===================== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.bento-large {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-wide {
  grid-column: span 3;
}

.bento-2col {
  grid-column: span 2;
}

/* =========================================================================
   INDUSTRY GRID
   ========================================================================= */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.industry-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 2.5rem;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.industry-card i {
  font-size: 1.8rem;
  color: var(--accent-primary);
  transition: transform 0.3s;
}

.industry-card h3 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-heading);
}

.industry-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-hover);
  border-color: var(--accent-primary-glow);
}

.industry-card:hover i {
  transform: scale(1.1);
}

/* =========================================================================
   SPLIT LAYOUT (Text + Visual)
   ========================================================================= */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.split-grid.reverse {
  direction: rtl;
}

.split-grid.reverse>* {
  direction: ltr;
}

/* =========================================================================
   PROOF / CASE STUDY CARDS
   ========================================================================= */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.proof-card {
  background: var(--bg-white);
  border: var(--glass-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.35s;
}

.proof-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-hover);
}

.proof-card .card-image {
  height: 200px;
  background: var(--bg-section-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.proof-card .card-body {
  padding: 2rem;
}

.proof-card .card-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 100px;
  margin-bottom: 1rem;
}

/* =========================================================================
   TEAM / HUMANS OF ASI
   ========================================================================= */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.team-card {
  text-align: center;
  padding: 2rem;
  background: var(--glass-bg-strong);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  transition: all 0.35s;
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-hover);
}

.team-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--bg-section-alt);
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--accent-primary);
}

/* =========================================================================
   FORM — Commission a Project
   ========================================================================= */
.form-section {
  background: var(--bg-section-alt);
}

.form-container {
  max-width: 720px;
  margin: 0 auto;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 3.5rem;
  box-shadow: var(--glass-shadow);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.input-group {
  margin-bottom: 1.5rem;
}

.input-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 0.5rem;
}

.input-group input,
.input-group textarea,
.input-group select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bg-white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text-heading);
  transition: all 0.2s;
}

.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-primary-soft);
}

.form-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.btn-block {
  width: 100%;
}

/* ═══ FOOTER REMOVED ═══ */
/* Footer styles are now managed globally by style.css */

/* =========================================================================
   PAGE HEADER (For inner pages)
   ========================================================================= */
.page-header {
  padding: 10rem 0 5rem;
  background: var(--bg-hero-gradient);
  position: relative;
  overflow: hidden;
}

.page-header .mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.page-header .mesh-blob-1 {
  width: 500px;
  height: 500px;
  background: var(--mesh-blue);
  top: -20%;
  right: -5%;
}

.page-header .mesh-blob-2 {
  width: 400px;
  height: 400px;
  background: var(--mesh-purple);
  bottom: -30%;
  left: 10%;
}

.page-header .eyebrow {
  margin-bottom: 1rem;
}

.page-header h1 {
  margin-bottom: 1.5rem;
  max-width: 700px;
}

.page-header p {
  font-size: 1.2rem;
  color: var(--text-muted);
  max-width: 600px;
}

/* =========================================================================
   SCROLL REVEAL ANIMATION
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stagger-children .reveal:nth-child(1) {
  transition-delay: 0.05s;
}

.stagger-children .reveal:nth-child(2) {
  transition-delay: 0.1s;
}

.stagger-children .reveal:nth-child(3) {
  transition-delay: 0.15s;
}

.stagger-children .reveal:nth-child(4) {
  transition-delay: 0.2s;
}

.stagger-children .reveal:nth-child(5) {
  transition-delay: 0.25s;
}

.stagger-children .reveal:nth-child(6) {
  transition-delay: 0.3s;
}

/* =========================================================================
   UTILITIES
   ========================================================================= */
.text-center {
  text-align: center;
}

.mt-2 {
  margin-top: 1rem;
}

.mt-4 {
  margin-top: 2rem;
}

.mt-6 {
  margin-top: 3rem;
}

.mb-4 {
  margin-bottom: 2rem;
}

.mb-6 {
  margin-bottom: 3rem;
}

/* Tag Styles */
.tag {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tag-orange {
  background: var(--accent-secondary-soft);
  color: var(--accent-secondary);
}

/* Featured / Flagship Card Accent */
.card-accent-border {
  border: 1px solid var(--accent-primary);
  box-shadow: 0 0 30px var(--accent-primary-soft);
}

/* List with icons */
.feature-list {
  list-style: none;
  margin-top: 2rem;
}

.feature-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
  color: var(--text-body);
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--accent-primary);
  border-radius: 2px;
}

/* Partner / Logo Grid */
.logo-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
  padding: 2rem 0;
}

.logo-grid .logo-item {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.15);
  letter-spacing: 2px;
}

/* News Cards */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.news-card {
  background: var(--bg-white);
  border: var(--glass-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  transition: all 0.35s;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-hover);
}

.news-card .news-img {
  height: 180px;
  background: var(--bg-section-alt);
}

.news-card .news-body {
  padding: 1.5rem;
}

.news-card .news-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

/* CTA Banner */
.cta-banner {
  background: var(--accent-gradient);
  border-radius: var(--radius-lg);
  padding: 4rem;
  text-align: center;
  color: var(--text-white);
}

.cta-banner h2 {
  color: var(--text-white);
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.8);
  margin: 1rem auto 2rem;
}

.cta-banner .btn-white {
  background: var(--text-white);
  color: var(--accent-primary);
  padding: 1rem 2.5rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.cta-banner .btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* THEME TOGGLE REMOVED - managed globally by style.css (segmented toggle) */


/* =========================================================================
   DARK MODE — SUPER LIQUID GLASS & GLASSMORPHISM
   "When the lights go off, the glass comes alive."
   ========================================================================= */
[data-theme="dark"] {
  /* ===== BACKGROUNDS — PURE BLACK (Concept 10 Override) ===== */
  --bg-body: #000000;
  --bg-white: #000000;
  --bg-warm: #000000;
  --bg-section-alt: #000000;
  --bg-hero-gradient: linear-gradient(135deg, #000 0%, #000 100%);

  /* ===== GLASS — On PURE BLACK ===== */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-bg-strong: rgba(0, 0, 0, 0.95);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.05);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --glass-shadow-hover: 0 24px 80px rgba(0, 0, 0, 0.6);
  --backdrop-blur: blur(28px);
  --backdrop-blur-heavy: blur(60px);

  /* ===== TEXT — Concept 10 pure white hierarchy ===== */
  --text-heading: #ffffff;
  --text-body: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.4);
  --text-white: #ffffff;

  /* ===== ACCENTS — Cyan Only ===== */
  --accent-primary: var(--accent-primary);
  --accent-primary-soft: rgba(var(--accent-primary-rgb), 0.1);
  --accent-primary-glow: rgba(var(--accent-primary-rgb), 0.3);
  --accent-secondary: var(--accent-primary);
  --accent-secondary-soft: rgba(var(--accent-primary-rgb), 0.1);
  --accent-tertiary: var(--accent-primary);
  --accent-tertiary-soft: rgba(var(--accent-primary-rgb), 0.1);
  --accent-warm: var(--accent-primary);
  --accent-warm-soft: rgba(var(--accent-primary-rgb), 0.1);

  /* Gradients — Monochrome or Cyan-focused only */
  --accent-gradient: linear-gradient(135deg, var(--accent-deep) 0%, var(--blue-core) 40%, var(--accent-tertiary-vivid) 100%);
  --accent-gradient-vivid: linear-gradient(135deg, var(--blue-deep) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%);
  --accent-gradient-cool: linear-gradient(135deg, var(--blue-core) 0%, var(--accent-primary) 50%, var(--accent-secondary) 100%);
  --accent-gradient-warm: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);

  /* ===== MESH BLOBS — KILLED. Pure black canvas, no glow. ===== */
  --mesh-blue: rgba(var(--blue-deep-rgb), 0.08);
  --mesh-purple: rgba(var(--blue-core-rgb), 0.06);
  --mesh-teal: rgba(13, 148, 136, 0.04);
  --mesh-orange: rgba(249, 115, 22, 0.03);

  /* Multi-accent dark overrides */
  --accent-teal: #2dd4bf;
  --accent-teal-soft: rgba(45, 212, 191, 0.1);
  --accent-emerald: #34d399;
  --accent-emerald-soft: rgba(52, 211, 153, 0.1);
  --accent-rose: #fb7185;
  --accent-rose-soft: rgba(251, 113, 133, 0.1);
  --accent-amber: #fbbf24;
  --accent-amber-soft: rgba(251, 191, 36, 0.1);
  --accent-violet: var(--accent-primary);
  --accent-violet-soft: rgba(var(--accent-primary-rgb), 0.12);
  --accent-indigo: #818cf8;
  --accent-indigo-soft: rgba(129, 140, 248, 0.1);
}

/* ===== BODY & GLOBAL DARK ADJUSTMENTS ===== */
[data-theme="dark"] body {
  background: #000000;
  background-attachment: scroll;
  color: var(--text-body);
}

/* Subtle noise texture overlay for depth */
[data-theme="dark"] body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ DARK-MODE NAV/DROPDOWN OVERRIDES REMOVED ═══ */
/* Nav dark mode styles are now managed globally by style.css */


/* ===== GLASS CARDS — Enhanced glow on dark ===== */
[data-theme="dark"] .glass-card {
  background: linear-gradient(145deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.01) 100%);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .glass-card:hover {
  background: linear-gradient(145deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(var(--accent-primary-rgb), 0.25);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 40px rgba(var(--accent-primary-rgb), 0.06);
}

[data-theme="dark"] .glass-card::before {
  background: radial-gradient(circle,
      rgba(var(--accent-primary-rgb), 0.15) 0%,
      transparent 70%);
}

[data-theme="dark"] .glass-card:hover::before {
  opacity: 0.5;
}

/* ===== HERO — Intensified mesh blobs ===== */
[data-theme="dark"] .hero {
  background: var(--bg-hero-gradient);
}

[data-theme="dark"] .hero .mesh-blob-1 {
  background: rgba(0, 0, 0, 0);
  filter: blur(120px);
}

[data-theme="dark"] .hero .mesh-blob-2 {
  background: rgba(0, 0, 0, 0);
  filter: blur(100px);
}

[data-theme="dark"] .hero .mesh-blob-3 {
  background: rgba(0, 0, 0, 0);
  filter: blur(110px);
}

/* Hero Glass Card — Terminal glow */
[data-theme="dark"] .hero-glass-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 80px rgba(var(--accent-primary-rgb), 0.04);
}

[data-theme="dark"] .hero-glass-card .terminal-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .terminal-lines {
  color: var(--text-body);
}

[data-theme="dark"] .terminal-lines .cmd {
  color: var(--accent-primary);
  text-shadow: 0 0 10px rgba(var(--accent-primary-rgb), 0.3);
}

[data-theme="dark"] .terminal-lines .result {
  color: var(--accent-secondary);
  text-shadow: 0 0 10px rgba(255, 122, 51, 0.3);
}

[data-theme="dark"] .scan-line {
  background: linear-gradient(90deg,
      transparent,
      var(--accent-primary),
      transparent);
  opacity: 0.3;
}

/* Hero badge */
[data-theme="dark"] .hero-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Hero metrics */
[data-theme="dark"] .hero-metrics {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* ===== BUTTONS — Adjusted for dark ===== */
[data-theme="dark"] .btn-primary {
  box-shadow:
    0 4px 20px rgba(var(--accent-primary-rgb), 0.25),
    0 0 0 1px rgba(var(--accent-primary-rgb), 0.1) inset;
}

[data-theme="dark"] .btn-primary:hover {
  box-shadow:
    0 8px 30px rgba(var(--accent-primary-rgb), 0.35),
    0 0 0 1px rgba(var(--accent-primary-rgb), 0.15) inset;
}

[data-theme="dark"] .btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-heading);
}

[data-theme="dark"] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ===== INDUSTRY CARDS — Dark glass ===== */
[data-theme="dark"] .industry-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .industry-card:hover {
  background: rgba(var(--accent-primary-rgb), 0.06);
  border-color: rgba(var(--accent-primary-rgb), 0.15);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(var(--accent-primary-rgb), 0.05);
}

/* ===== PROOF / NEWS CARDS — Dark panels ===== */
[data-theme="dark"] .proof-card,
[data-theme="dark"] .news-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .proof-card:hover,
[data-theme="dark"] .news-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .card-image,
[data-theme="dark"] .news-img {
  background: rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .card-tag {
  background: rgba(var(--accent-primary-rgb), 0.1);
  color: var(--accent-primary);
}

/* ===== PAGE HEADER — Dark mesh backgrounds ===== */
[data-theme="dark"] .page-header {
  background: var(--bg-body);
}

[data-theme="dark"] .mesh-bg::before {
  background: var(--mesh-blue);
}

[data-theme="dark"] .mesh-bg::after {
  background: var(--mesh-purple);
}

/* ===== CTA BANNER — More vibrant on dark ===== */
[data-theme="dark"] .cta-banner {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 0 100px rgba(var(--accent-primary-rgb), 0.08);
}

[data-theme="dark"] .cta-banner .btn-white {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* ═══ DARK-MODE FOOTER REMOVED ═══ */
/* Footer dark mode styles are now managed globally by style.css */


/* ===== FORMS — Dark inputs ===== */
[data-theme="dark"] .form-container {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-heading) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.15) !important;
}

/* ===== TEAM CARDS ===== */
[data-theme="dark"] .team-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .team-avatar {
  background: rgba(var(--accent-primary-rgb), 0.1);
  color: var(--accent-primary);
}

/* ===== FEATURE LIST ===== */
[data-theme="dark"] .feature-list li::before {
  color: var(--accent-primary);
}

/* ===== LOGOs AND TAGS ===== */
[data-theme="dark"] .tag {
  background: rgba(var(--accent-primary-rgb), 0.1);
  color: var(--accent-primary);
}

[data-theme="dark"] .logo-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

/* ===== SCROLLBAR ===== */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-body);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ===== SMOOTH TRANSITION between themes ===== */
body,
body *,
.vault-nav,
.glass-card,
.mega-dropdown-inner,
.hero-glass-card,
.industry-card,
.proof-card,
.news-card,
.site-footer,
.btn {
  transition:
    background-color 0.5s ease,
    color 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease;
}

/* =========================================================================
   APPLE LIQUID GLASS ENHANCEMENTS — Dark Mode
   "Glass that breathes, tints, and glows."
   ========================================================================= */

/* Colored glass card variants — cards tinted by content color */
[data-theme="dark"] .glass-card--teal {
  background: rgba(13, 148, 136, 0.06);
  border-color: rgba(13, 148, 136, 0.12);
}

[data-theme="dark"] .glass-card--teal:hover {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(13, 148, 136, 0.08);
  border-color: rgba(13, 148, 136, 0.25);
}

[data-theme="dark"] .glass-card--violet {
  background: rgba(var(--blue-core-rgb), 0.06);
  border-color: rgba(var(--blue-core-rgb), 0.12);
}

[data-theme="dark"] .glass-card--violet:hover {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(var(--blue-core-rgb), 0.08);
  border-color: rgba(var(--blue-core-rgb), 0.25);
}

[data-theme="dark"] .glass-card--rose {
  background: rgba(225, 29, 72, 0.05);
  border-color: rgba(225, 29, 72, 0.1);
}

[data-theme="dark"] .glass-card--rose:hover {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(225, 29, 72, 0.06);
  border-color: rgba(225, 29, 72, 0.2);
}

[data-theme="dark"] .glass-card--amber {
  background: rgba(217, 119, 6, 0.05);
  border-color: rgba(217, 119, 6, 0.1);
}

[data-theme="dark"] .glass-card--amber:hover {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(217, 119, 6, 0.06);
  border-color: rgba(217, 119, 6, 0.2);
}

/* Apple-style inner glow border on glass (the double-border trick) */
[data-theme="dark"] .glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.02) 40%,
      rgba(255, 255, 255, 0.05) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* Apple liquid glass on hero card in dark */
[data-theme="dark"] .hero-glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
      rgba(var(--accent-primary-rgb), 0.2) 0%,
      rgba(255, 255, 255, 0.04) 50%,
      rgba(var(--accent-primary-rgb), 0.15) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* Apple-style mega dropdown inner glow */
[data-theme="dark"] .mega-dropdown-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.02) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

[data-theme="dark"] .mega-dropdown-inner {
  position: relative;
}

/* Color icon variants for variety */
.icon-teal {
  color: var(--accent-teal) !important;
}

.icon-emerald {
  color: var(--accent-emerald) !important;
}

.icon-rose {
  color: var(--accent-rose) !important;
}

.icon-amber {
  color: var(--accent-amber) !important;
}

.icon-violet {
  color: var(--accent-violet) !important;
}

.icon-indigo {
  color: var(--accent-indigo) !important;
}

.bg-teal {
  background: var(--accent-teal-soft) !important;
}

.bg-emerald {
  background: var(--accent-emerald-soft) !important;
}

.bg-rose {
  background: var(--accent-rose-soft) !important;
}

.bg-amber {
  background: var(--accent-amber-soft) !important;
}

.bg-violet {
  background: var(--accent-violet-soft) !important;
}

.bg-indigo {
  background: var(--accent-indigo-soft) !important;
}

/* Dark mode multi-accent overrides */
[data-theme="dark"] {
  --accent-teal: #2dd4bf;
  --accent-teal-soft: rgba(45, 212, 191, 0.1);
  --accent-emerald: #34d399;
  --accent-emerald-soft: rgba(52, 211, 153, 0.1);
  --accent-rose: #fb7185;
  --accent-rose-soft: rgba(251, 113, 133, 0.1);
  --accent-amber: #fbbf24;
  --accent-amber-soft: rgba(251, 191, 36, 0.1);
  --accent-violet: var(--accent-primary);
  --accent-violet-soft: rgba(var(--accent-primary-rgb), 0.1);
  --accent-indigo: #818cf8;
  --accent-indigo-soft: rgba(129, 140, 248, 0.1);
}

/* =========================================================================
   RESPONSIVE — Tablet (1024px)
   ========================================================================= */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .split-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-large {
    grid-column: span 2;
    grid-row: span 1;
  }

  .bento-wide {
    grid-column: span 2;
  }

  .industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .proof-grid,
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .section {
    padding: 5rem 0;
  }

  .hero {
    padding: 8rem 0 5rem;
    min-height: auto;
  }

  .page-header {
    padding: 8rem 0 4rem;
  }

  h1 {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
  }

  .cta-banner {
    padding: 3rem;
  }
}

/* =========================================================================
   RESPONSIVE — Mobile Navigation (768px)
   ========================================================================= */
@media (max-width: 768px) {

  /* Hamburger toggle */
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 6px;
    z-index: 1001;
  }

  .menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-heading);
    border-radius: 2px;
    transition: all 0.3s;
  }

  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* Mobile menu panel */
  .menu-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 400px;
    height: 100vh;
    background: var(--glass-bg-strong);
    backdrop-filter: var(--backdrop-blur-heavy);
    -webkit-backdrop-filter: var(--backdrop-blur-heavy);
    flex-direction: column;
    align-items: stretch;
    padding: 5rem 1.5rem 2rem;
    gap: 0;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    z-index: 1000;
    border-left: var(--glass-border-subtle);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
  }

  .menu-links.open {
    right: 0;
  }

  [data-theme="dark"] .menu-links {
    background: rgba(10, 10, 15, 0.92);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: -10px 0 60px rgba(0, 0, 0, 0.4);
  }

  .menu-links .nav-link {
    padding: 0.8rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  }

  [data-theme="dark"] .menu-links .nav-link {
    border-bottom-color: rgba(255, 255, 255, 0.04);
  }

  /* Mobile dropdowns — slide down instead of floating */
  .nav-dropdown {
    position: static;
  }

  .mega-dropdown {
    position: static;
    transform: none;
    min-width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      max-height 0.4s ease,
      padding 0.4s ease;
  }

  .nav-dropdown.active .mega-dropdown {
    max-height: 600px;
    padding: 0.5rem 0;
  }

  .nav-dropdown:hover .mega-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    max-height: 0;
  }

  .nav-dropdown.active .mega-dropdown {
    max-height: 600px;
  }

  .mega-dropdown::before {
    display: none;
  }

  .mega-dropdown-inner {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius-sm);
    box-shadow: none;
    border: var(--glass-border-subtle);
  }

  .mega-industry-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mega-col-highlight {
    display: none;
  }

  /* Mobile overlay when menu is open */
  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 999;
  }

  .menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* Layout adjustments */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero {
    padding: 7rem 0 4rem;
    min-height: auto;
  }

  .hero-metrics {
    gap: 1.5rem;
  }

  .split-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .bento-grid {
    grid-template-columns: 1fr;
  }

  .bento-large,
  .bento-wide,
  .bento-2col {
    grid-column: span 1;
  }

  .industry-grid {
    grid-template-columns: 1fr 1fr;
  }

  .proof-grid,
  .news-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .section {
    padding: 4rem 0;
  }

  .page-header {
    padding: 7rem 0 3rem;
  }

  h1 {
    font-size: clamp(2rem, 6vw, 2.8rem);
  }

  h2 {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
  }

  .cta-banner {
    padding: 2.5rem 1.5rem;
  }

  .hero-ctas {
    flex-direction: column;
  }

  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================================
   RESPONSIVE — Small Mobile (480px)
   ========================================================================= */
@media (max-width: 480px) {
  .container {
    padding-left: 6%;
    padding-right: 6%;
  }

  .nav-inner {
    padding: 0 4%;
  }

  .hero {
    padding: 6rem 0 3rem;
  }

  .hero-metrics {
    flex-direction: column;
    gap: 1rem;
  }

  .metric-value {
    font-size: 1.8rem;
  }

  h1 {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }

  .glass-card {
    padding: 1.5rem;
  }

  .hero-glass-card {
    padding: 1.5rem;
  }

  .terminal-lines {
    font-size: 0.75rem;
    line-height: 1.8;
  }

  .industry-grid {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .mega-industry-grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 3rem 0;
  }

  .cta-banner {
    padding: 2.5rem 1.2rem;
    border-radius: var(--radius-md);
  }

  .btn-lg {
    padding: 0.85rem 1.5rem;
    font-size: 0.9rem;
  }
}

/* =========================================================================
   HAMBURGER DEFAULTS — Hidden on desktop
   ========================================================================= */
.menu-toggle {
  display: none;
}

.menu-overlay {
  display: none;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }

  .menu-overlay {
    display: block;
  }

  .nav-cta .btn {
    display: none;
  }

  .nav-cta {
    gap: 0.5rem;
  }
}

/* =========================================================
   GLOBAL COMPONENTS: THE ULTIMATE SHOWCASE CARDS (Concept 10)
   Full-width 50/50 split cards for massive impact
   ========================================================= */
.showcase {
  display: grid;
  grid-template-columns: 38% 62%;
  gap: 0;
  margin-bottom: 4rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-height: calc(100vh - 6rem);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.showcase:hover {
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-5px);
}

.showcase.reversed {
  direction: rtl;
}

.showcase.reversed>* {
  direction: ltr;
}

/* Visual Left Side */
.sc-visual {
  position: relative;
  min-height: 500px;
  height: 100%;
  overflow: hidden;
}

.sc-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition:
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s;
}

.showcase:hover .sc-visual img {
  transform: scale(1.05);
  opacity: 1;
}

.sc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0.75) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem;
}

.sc-number {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: 800;
  color: var(--glass-border);
  position: absolute;
  top: 2rem;
  left: 3rem;
  line-height: 1;
  z-index: 0;
  pointer-events: none;
}

.sc-project-name {
  font-family: var(--font-headline);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-top: 1rem;
  color: #ffffff;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 0 20px rgba(0,0,0,0.3);
}

.sc-timeline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--accent-primary);
  margin-bottom: 1rem;
  background: var(--accent-primary-soft);
  padding: 0.4rem 1rem;
  border-radius: 20px;
  width: fit-content;
  border: 1px solid var(--accent-primary-glow);
}

/* Content Right Side */
.sc-content {
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8rem;
  background: transparent;
}

.sc-engine {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sc-block-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: var(--glass-border-subtle);
}

.sc-input-list,
.sc-activity-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.sc-input-item {
  font-size: 0.95rem;
  color: var(--text-body);
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.sc-input-item i {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 4px;
}

.sc-activity {
  background: var(--glass-bg);
  border: var(--glass-border-subtle);
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--text-heading);
  transition:
    background 0.3s,
    border 0.3s;
}

.sc-activity:hover {
  background: var(--accent-primary-soft);
  border: 1px solid var(--accent-primary-glow);
}

.sc-activity i {
  color: var(--accent-primary);
}

/* Engine Outcomes Box (Nested Green Highlight) */
.sc-outcomes-box {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.05), transparent);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
}

.sc-outcomes-header {
  padding: 1.2rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.1);
  background: rgba(var(--accent-primary-rgb), 0.03);
}

.sc-outcomes-header h5 {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--accent-primary, var(--accent-primary));
}

.sc-outcomes-header span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.sc-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.sc-outcome-item {
  padding: 0.8rem;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  /* very subtle dark mode divider */
  transition: background 0.3s;
}

[data-theme="light"] .sc-outcome-item {
  border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.sc-outcome-item:last-child {
  border-right: none;
}

.sc-outcome-item:hover {
  background: rgba(var(--accent-primary-rgb), 0.05);
  /* Green tint hover */
}

.soi-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-primary-rgb), 0.1);
  color: var(--accent-primary, var(--accent-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.soi-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-heading);
}

.soi-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* =========================================================
   GLOBAL COMPONENTS: THE IMMERSIVE DIGITAL PANEL
   Massive, full-width glass panel for transformations
   ========================================================= */
.digital-immersive {
  padding: 8rem var(--page-padding);
  position: relative;
  overflow: hidden;
  border-top: var(--glass-border-subtle);
}

.di-container {
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.di-header {
  text-align: center;
  margin-bottom: 5rem;
}

.di-header p {
  font-size: 1.15rem;
  color: var(--text-body);
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6;
}

/* The Massive Full-Width Digital Card */
.di-card {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  box-shadow: var(--glass-shadow);
}

/* Image Banner */
.di-banner {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.di-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 0.5s;
}

.di-card:hover .di-banner img {
  opacity: 1;
}

.di-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 40%, transparent 70%);
  display: flex;
  align-items: flex-end;
  padding: 3rem 4rem;
}

.di-banner-title {
  font-family: var(--font-headline);
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 0 20px rgba(0,0,0,0.3);
}

/* Content Grid */
.di-content {
  padding: 4rem;
}

.di-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 5rem;
  margin-bottom: 4rem;
}

.di-process {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.di-section-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent-secondary);
  /* Purple */
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--accent-secondary-soft);
}

.di-input-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.di-input-item {
  font-size: 0.95rem;
  color: var(--text-body);
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.di-input-item i {
  color: var(--text-muted);
  margin-top: 3px;
}

.di-activities {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.di-act-pill {
  background: var(--glass-bg);
  border: var(--glass-border-subtle);
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.95rem;
  color: var(--text-heading);
  transition: all 0.3s;
}

.di-act-pill:hover {
  background: var(--accent-secondary-soft);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.4);
}

.di-act-pill i {
  color: var(--accent-secondary);
}

/* Right: Nested Outcomes */
.di-outcomes-box {
  background: var(--accent-primary-soft);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.15);
  /* cyan tint */
  border-radius: var(--radius-md);
  overflow: hidden;
}

.di-outcomes-header {
  padding: 1.2rem 2rem;
  border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.1);
  background: var(--accent-primary-soft);
}

.di-outcomes-header h5 {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--accent-primary);
  margin: 0;
}

.di-outcomes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.di-outcome-item {
  padding: 2rem;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.3s;
}

[data-theme="light"] .di-outcome-item {
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.di-outcome-item:nth-child(2n) {
  border-right: none;
}

.di-outcome-item:nth-child(n + 3) {
  border-bottom: none;
}

.di-outcome-item:hover {
  background: var(--accent-primary-soft);
}

.dio-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.dio-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.dio-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* =========================================================
   GLOBAL COMPONENTS: PREMIUM IN/OUT CAPSULES
   ========================================================= */
.is-card,
.os-card {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  flex: 1;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  box-shadow: var(--glass-shadow);
  transition:
    transform 0.4s,
    border 0.4s,
    box-shadow 0.4s;
}

.os-card {
  padding: 2.5rem;
}

.is-card:hover,
.os-card:hover {
  transform: translateY(-5px);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow-hover);
}

.is-card i,
.os-card i {
  font-size: 2rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  display: block;
}

.os-card:first-child i {
  color: var(--accent-primary);
}

.os-card.purple:hover {
  box-shadow: 0 16px 48px rgba(var(--blue-core-rgb), 0.15);
}

.os-card.purple i {
  color: var(--accent-secondary);
}

.is-card h4,
.os-card h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.is-card p,
.os-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   VERTICAL PIPELINE COMPONENT (CONCEPT 10 AESTHETIC)
   ========================================================================== */
.v-pipeline-section {
  padding: 8rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

.vp-header {
  text-align: center;
  margin-bottom: 6rem;
}

.vp-header h2 {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #fff 0%, #a0a0a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .vp-header h2 {
  background: linear-gradient(135deg, #111 0%, #666 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vp-header p {
  font-size: 1.25rem;
  color: var(--text-muted);
  max-width: 700px;
  margin: 0 auto;
}

.vp-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.vp-container::before {
  content: '';
  position: absolute;
  top: 2rem;
  bottom: 2rem;
  left: 50%;
  width: 2px;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(var(--accent-primary-rgb), 0.5) 20%,
      rgba(var(--accent-primary-rgb), 0.5) 80%,
      rgba(255, 255, 255, 0) 100%);
  transform: translateX(-50%);
  z-index: 0;
}

.vp-pulse {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 40px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 20px 5px var(--accent-primary);
  z-index: 1;
  animation: pulse-down 4s ease-in-out infinite;
}

@keyframes pulse-down {
  0% {
    top: 5%;
    opacity: 0;
    box-shadow: 0 0 20px 5px var(--accent-primary);
  }

  10% {
    opacity: 1;
  }

  50% {
    box-shadow: 0 0 20px 5px var(--accent-secondary);
  }

  90% {
    opacity: 1;
  }

  100% {
    top: 95%;
    opacity: 0;
    box-shadow: 0 0 20px 5px var(--accent-tertiary);
  }
}

.vp-stage {
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 2;
  width: 100%;
}

.vp-stage:nth-child(odd) {
  flex-direction: row;
}

.vp-stage:nth-child(even) {
  flex-direction: row-reverse;
}

.vp-content-side,
.vp-visual-side {
  width: 50%;
  padding: 0 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vp-stage:nth-child(odd) .vp-content-side {
  align-items: flex-end;
  text-align: right;
}

.vp-stage:nth-child(even) .vp-content-side {
  align-items: flex-start;
  text-align: left;
}

.vp-node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: var(--bg-surface);
  border: 2px solid var(--accent-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--text-heading);
  box-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.4);
  z-index: 5;
  transition: all 0.3s ease;
}

.vp-stage:nth-child(2) .vp-node {
  border-color: var(--accent-secondary);
  box-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.4);
}

.vp-stage:nth-child(3) .vp-node {
  border-color: var(--accent-primary, var(--accent-primary));
  box-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.4);
}

.vp-stage:hover .vp-node {
  transform: translate(-50%, -50%) scale(1.15);
}

.vp-step-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.vp-stage:nth-child(2) .vp-step-num {
  color: var(--accent-secondary);
}

.vp-stage:nth-child(3) .vp-step-num {
  color: var(--accent-primary, var(--accent-primary));
}

.vp-title {
  font-size: 2.25rem;
  margin-bottom: 1.25rem;
}

.vp-desc {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 450px;
}

.vp-card {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: 1.5rem;
  padding: 2.5rem;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  box-shadow: var(--glass-shadow);
  transition: transform 0.4s, border 0.4s, box-shadow 0.4s;
  position: relative;
  overflow: hidden;
}

.vp-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: var(--glass-shadow-hover);
}

[data-theme="light"] .vp-card:hover {
  border-color: rgba(0, 0, 0, 0.1);
}

.vp-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: var(--glass-border-subtle);
}

.vp-card-header i {
  font-size: 1.5rem;
  color: var(--accent-primary);
}

.vp-stage:nth-child(2) .vp-card-header i {
  color: var(--accent-secondary);
}

.vp-stage:nth-child(3) .vp-card-header i {
  color: var(--accent-primary, var(--accent-primary));
}

.vp-card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.vp-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vp-list-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0.75rem;
  border: 1px solid transparent;
  transition: all 0.3s;
}

[data-theme="light"] .vp-list-item {
  background: rgba(0, 0, 0, 0.02);
}

.vp-list-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .vp-list-item:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.05);
}

.vp-list-item i {
  color: var(--text-muted);
  width: 24px;
  text-align: center;
}

.vp-list-item span {
  font-weight: 500;
}

@media (max-width: 992px) {
  .vp-container::before {
    left: 30px;
  }

  .vp-pulse {
    left: 30px;
  }

  .vp-stage {
    flex-direction: column !important;
    gap: 2rem;
    padding-left: 80px;
  }

  .vp-content-side,
  .vp-visual-side {
    width: 100%;
    padding: 0;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .vp-node {
    left: 30px;
    top: 0;
    transform: translate(-50%, 0);
  }

  .vp-stage:hover .vp-node {
    transform: translate(-50%, 0) scale(1.15);
  }
}
/* =========================================================================
   STRATEGIC PROJECTS — STICKY CARD SYSTEM
   ========================================================================= */
.strategic-grid {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 4rem;
}

.project-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
}

.project-sticky-header {
  position: sticky;
  top: 72px; /* Pin below the scrolled header (72px) */
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Dark theme adjustment for sticky header */
[data-theme="dark"] .project-sticky-header {
  background: rgba(15, 23, 42, 0.9);
}

.project-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.project-id {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.project-sticky-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-heading);
}

.project-outcome {
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.project-content {
  padding: 2.5rem 2rem;
}

.project-desc {
  max-width: 800px;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-body);
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.project-tags .tag {
  background: var(--glass-bg-strong);
  color: var(--text-muted);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  border: 1px solid var(--glass-border);
}

/* Performance optimization for dropdowns */
.mega-dropdown-inner {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* =========================================================================
   ENGINEERING INTELLIGENCE PIPELINE V3 (Hybrid)
   ========================================================================= */
.pipeline-v3 {
            position: relative;
            padding: 8rem 2rem;
            background: radial-gradient(circle at center, rgba(var(--blue-core-rgb), 0.05) 0%, transparent 70%);
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            min-height: 100vh;
            justify-content: center;
        }

        .section-header {
            text-align: center;
            margin-bottom: 5rem;
            position: relative;
            z-index: 10;
        }

        .mega-label {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-family: var(--font-mono);
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 4px;
            color: var(--p3-accent-blue);
            margin-bottom: 1.5rem;
        }

        .section-header h2 {
            font-family: var(--font-headline);
            font-size: 3rem;
            font-weight: 800;
            margin: 0;
            letter-spacing: -1px;
        }

        .section-header p {
            font-size: 1rem;
            color: var(--text-muted);
            max-width: 600px;
            margin: 1.2rem auto 0;
        }

        .pipe-layout-v3 {
            display: flex;
            align-items: stretch;
            justify-content: center;
            width: 100%;
            max-width: 1400px;
            gap: 2rem;
            position: relative;
            z-index: 2;
            height: 500px;
        }

        .p3-highway {
            flex-grow: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .highway-canvas {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
        }

        .p3-inputs, .p3-outputs {
            width: 320px;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            justify-content: center;
        }

        /* --- CARDS: STABLE VERSION BASELINE --- */
        .p3-card {
            background: rgba(15, 20, 35, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            padding: 2rem;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            position: relative;
            /* transform: perspective(1000px) rotateY(10deg); */ /* Removed as per hybrid proposal */
            transition: all 0.5s ease;
        }

        /* .p3-card.output { transform: perspective(1000px) rotateY(-10deg); } */

        .p3-card:hover { 
            transform: translateY(-5px); /* Changed to vertical lift for premium feel */
            border-color: rgba(255, 255, 255, 0.15); 
            z-index: 10; 
        }

        .p3-card-icon { 
            width: 60px; 
            height: 60px; 
            background: rgba(255, 255, 255, 0.05); 
            border-radius: 16px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 1.8rem; 
            margin-bottom: 1.5rem; 
            color: rgba(255, 255, 255, 0.8); 
        }

        .p3-card h3 { 
            font-family: var(--font-headline); 
            font-size: 1.3rem; 
            margin-bottom: 0.5rem; 
            color: #fff; 
        }

        .p3-card p { 
            font-size: 0.85rem; 
            color: var(--text-muted); 
            line-height: 1.5; 
            margin: 0;
        }

        /* --- INLINE TECH DATA: PREMIUM BOX-FREE LIST --- */
        .inline-data {
            display: flex;
            flex-wrap: wrap;
            gap: 0.8rem;
            margin-top: 1.5rem;
            counter-reset: item;
        }

        .data-item {
            font-family: var(--font-mono);
            font-size: 0.65rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.4);
            display: flex;
            align-items: center;
            gap: 6px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
            position: relative;
            padding: 4px 0;
        }

        .data-item::before {
            content: '0' counter(item) '.';
            counter-increment: item;
            color: var(--p3-accent-blue);
            opacity: 0.3;
            transition: all 0.3s;
        }

        .data-item:hover {
            color: #fff;
            transform: translateY(-1px);
        }

        .data-item:hover::before {
            opacity: 1;
            text-shadow: 0 0 8px var(--p3-accent-blue);
        }

        .data-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1px;
            background: linear-gradient(90deg, var(--p3-accent-blue), transparent);
            transition: width 0.3s;
        }

        .data-item:hover::after {
            width: 100%;
        }

        /* Sequential Animation Hooks */
        .p3-card:hover .data-item {
            animation: dataStaggerIn 0.5s both cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes dataStaggerIn {
            from { opacity: 0; transform: translateX(-10px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .data-item:nth-child(1) { animation-delay: 0.1s; }
        .data-item:nth-child(2) { animation-delay: 0.2s; }
        .data-item:nth-child(3) { animation-delay: 0.3s; }
        .data-item:nth-child(4) { animation-delay: 0.4s; }

        /* --- SYNERGY BRIDGE: CORE DATA FLOW --- */
        .synergy-bridge {
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 130px;
            height: 48px;
            z-index: 10;
            pointer-events: none;
        }

        .synergy-bg-line { stroke: rgba(255, 255, 255, 0.05); }
        .synergy-bg-thick { stroke: rgba(255, 255, 255, 0.08); }
        .synergy-core-ring { stroke: rgba(255, 255, 255, 0.3); }
        /* --- ASI CORE: HYBRID (SOOTHING GLOW + HIGHLIGHT) --- */
        .pw-asi-core {
            width: 420px;
            height: 420px;
            background: rgba(10, 15, 30, 0.85);
            border: 2px solid rgba(var(--blue-core-rgb), 0.3);
            border-radius: 50%;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            display: flex;
            flex-direction: column;
            box-shadow: inset 0 0 60px rgba(var(--blue-core-rgb), 0.15), 0 0 80px rgba(0, 0, 0, 0.6);
            position: relative;
            overflow: hidden;
            z-index: 5;
            transition: all 0.5s ease;
        }

        .pw-asi-core::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .core-header { 
            text-align: center; 
            padding: 3.5rem 0 1.5rem; 
            position: relative;
            z-index: 3;
            pointer-events: none;
        }
        .core-header h3 { font-family: var(--font-headline); font-size: 2.8rem; font-weight: 800; color: #fff; margin: 0; letter-spacing: 4px; text-shadow: 0 0 30px rgba(var(--blue-core-rgb), 0.6); }
        .core-header span { font-family: var(--font-mono); font-size: 0.6rem; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 5px; font-weight: 400; display: block; margin-top: 5px; }
        
        .core-body { 
            display: flex; 
            flex-grow: 1; 
            position: relative; 
            z-index: 2;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .cb-half { 
            flex: 1; 
            padding: 2rem; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: flex-start; 
            text-align: center; 
            gap: 0.8rem; 
            position: relative; 
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .cb-half.people { border-right: 1px solid rgba(255, 255, 255, 0.05); }

        /* HYBRID FEATURE: Hover Highlight */
        .cb-half:hover {
            background: rgba(var(--blue-core-rgb), 0.04);
        }
        .cb-half.software:hover {
            background: rgba(var(--accent-primary-rgb), 0.04);
        }

        .cb-icon { 
            font-size: 2.2rem; 
            color: var(--p3-accent-blue); 
            filter: drop-shadow(0 0 10px rgba(var(--blue-core-rgb), 0.5)); 
            transition: all 0.5s ease;
        }
        .cb-half.software .cb-icon { color: var(--p3-accent-purple); filter: drop-shadow(0 0 10px rgba(var(--accent-primary-rgb), 0.5)); }

        .cb-half:hover .cb-icon {
            transform: scale(1.15) translateY(-5px);
            filter: drop-shadow(0 0 15px currentColor);
        }

        .cb-title { font-family: var(--font-headline); font-size: 1.2rem; font-weight: 600; color: #fff; }
        .cb-desc { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; padding: 0 0.5rem; }

        /* SOOTHING GLOWS: From stable version */
        .core-glow-people { position: absolute; left: 0; bottom: 0; width: 50%; height: 100%; background: radial-gradient(circle at bottom left, rgba(6, 182, 212, 0.15) 0%, transparent 70%); pointer-events: none;}
        .core-glow-software { position: absolute; right: 0; bottom: 0; width: 50%; height: 100%; background: radial-gradient(circle at bottom right, rgba(var(--accent-primary-rgb), 0.15) 0%, transparent 70%); pointer-events: none;}

        .pw-asi-core::after {
            content: '';
            position: absolute;
            inset: -4rem;
            border-radius: 50%;
            border: 2px solid rgba(var(--blue-core-rgb), 0.1);
            animation: coreCirclePulse 4s infinite;
            z-index: -1;
            pointer-events: none;
        }

        @keyframes coreCirclePulse {
            0% { transform: scale(0.9); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: scale(1.1); opacity: 0; }
        }

        [data-theme='light'] {
            --bg: #f8fafc;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --p3-accent-blue: var(--blue-deep);
            --p3-accent-purple: var(--accent-primary);
        }
        [data-theme='light'] .pipeline-v3 { background: radial-gradient(circle at center, rgba(var(--blue-deep-rgb), 0.03) 0%, transparent 70%); }
        [data-theme='light'] .p3-card { background: rgba(255, 255, 255, 0.8); border-color: rgba(0, 0, 0, 0.05); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05); }
        [data-theme='light'] .p3-card h3 { color: #0f172a; }
        [data-theme='light'] .p3-card-icon { background: rgba(0, 0, 0, 0.03); color: var(--p3-accent-blue); }
        [data-theme='light'] .p3-card p { color: #334155; }
        [data-theme='light'] .pw-asi-core { background: rgba(255, 255, 255, 0.9); border-color: rgba(var(--blue-deep-rgb), 0.2); box-shadow: 0 20px 80px rgba(0, 0, 0, 0.05); }
        [data-theme='light'] .core-header h3 { color: #0f172a; text-shadow: none; }
        [data-theme='light'] .cb-title { color: #0f172a; }
        [data-theme='light'] .cb-half { border-color: rgba(0, 0, 0, 0.05); }
        [data-theme='light'] .core-body { border-top-color: rgba(0, 0, 0, 0.05); }
        [data-theme='light'] .core-header span { color: rgba(15, 23, 42, 0.5); }
        [data-theme='light'] .data-item { color: #64748b; }
        [data-theme='light'] .data-item:hover { color: #0f172a; }
        [data-theme='light'] .item-main .arrow { color: #64748b; }
        [data-theme='light'] .cb-half:hover { background: rgba(var(--blue-deep-rgb), 0.03); }
        [data-theme='light'] .synergy-bg-line { stroke: rgba(0, 0, 0, 0.05); }
        [data-theme='light'] .synergy-bg-thick { stroke: rgba(0, 0, 0, 0.08); }
        [data-theme='light'] .synergy-core-ring { stroke: rgba(0, 0, 0, 0.2); }
        [data-theme='light'] #infinityPath { stroke: rgba(var(--blue-deep-rgb), 0.1) !important; }
        [data-theme='light'] .synergy-bridge circle[fill="#ffffff"] { fill: #0f172a; }
        [data-theme='light'] .synergy-bridge circle[fill="rgba(255, 255, 255, 0.4)"] { fill: rgba(var(--blue-deep-rgb), 0.3) !important; }

        


/* ====== CLIENTS MARQUEE V1 ====== */
.clients-marquee-v1 {
  padding: 4rem 0;
  background: var(--bg-body);
  border-bottom: var(--glass-border-subtle);
  overflow: hidden;
  position: relative;
}

.clients-marquee-v1 .trust-heading {
  text-align: center;
  font-family: var(--font-headline);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #ffffff;
  margin-bottom: 3.5rem;
  opacity: 1;
}

[data-theme="light"] .clients-marquee-v1 .trust-heading {
  color: #0f172a;
}

.marquee-container-v1 {
  width: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee-track-v1 {
  display: flex;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
  gap: 6rem;
  align-items: center;
}

.marquee-container-v1:hover .marquee-track-v1 {
  animation-play-state: paused;
}

.marquee-logo-v1 {
  height: 42px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  filter: grayscale(100%);
  opacity: 1;
  flex-shrink: 0;
}

[data-theme="dark"] .marquee-logo-v1 {
  filter: grayscale(100%);
  opacity: 0.85;
}

.marquee-logo-v1:hover {
  transform: scale(1.08);
}

.marquee-logo-v1 img {
  max-height: 100%;
  width: auto;
  display: block;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .marquee-track-v1 { gap: 3.5rem; }
  .marquee-logo-v1 { height: 32px; }
}

/* =========================================================================
   REVEAL ANIMATION EXTENSIONS (delays + scale variant)
   ========================================================================= */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}


/* High-Fidelity Mockup CTA Buttons - Scoped to main to protect header CTA */
main .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.85rem 1.8rem !important;
    border-radius: 12px !important;
    border: none !important;
    background: linear-gradient(90deg, var(--c1), var(--c2)) !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    animation: none !important;
}

main .btn-primary:hover {
    transform: translateY(-3px) !important;
    filter: brightness(1.15) !important;
    box-shadow: 0 12px 32px rgba(var(--accent-primary-rgb), 0.4) !important;
}

main .btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.85rem 1.8rem !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: 1px solid var(--c1) !important;
    color: var(--c1) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-secondary:hover {
    background: rgba(var(--accent-primary-rgb), 0.15) !important;
    transform: translateY(-3px) !important;
    border-color: var(--c1) !important;
    color: var(--c1) !important;
}

/* ── Client Logo Violet Hover ── */
.client-logo-item:hover {
    background: rgba(var(--accent-primary-rgb), 0.06) !important;
    border-color: rgba(var(--accent-primary-rgb), 0.2) !important;
    box-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.08);
}
.client-logo-item:hover img {
    filter: brightness(1.15) drop-shadow(0 0 8px rgba(var(--accent-primary-rgb), 0.15));
}


/* ═══════════════════════════════════════════════════════ */
/* EXTRACTED INLINE CSS - Phase 2 Cleanup                */
/* ═══════════════════════════════════════════════════════ */

/* --- Extracted Block 1 (13793 chars) --- */
/* ── BALANCED WIDTH LOGIC ── */
        .container {
            max-width: 1600px;
            margin: 0 auto;
            width: 100%;
            padding-left: var(--page-padding);
            padding-right: var(--page-padding);
        }
        .container-hook {
            width: 100%;
            padding-left: var(--page-padding);
            padding-right: var(--page-padding);
            max-width: none;
        }
        .container-full {
            width: 100%;
            max-width: none;
            padding: 0;
            margin: 0;
        }

        /* ── FULL-WIDTH CTA OVERRIDES ── */
        #sample-reports .container-full {
            padding: 0;
        }
        #sample-reports .premium-card {
            border-radius: 0;
            border-left: none;
            border-right: none;
            width: 100%;
            margin: 0;
        }


        /* ── PAGE-LEVEL SPACING OVERRIDES ── */
        .section {
            padding: 4rem 0; /* Reduced from 5rem */
        }
        .section-alt#outcomes {
            padding: 2rem 0 0; /* Reduced from 3rem */
        }
        .outcomes-mega {
            padding: 0.5rem 0 4rem;
        }
        .digital-immersive {
            padding: 5rem 0;
        }
        .showcase {
            margin-bottom: 5rem;
        }
        .showcase:last-child {
            margin-bottom: 0;
        }

        /* ── FILTER PILL COLOR FIX: Purple → Brand Blue ── */
        .filter-pill.active {
            background: linear-gradient(135deg, rgba(var(--blue-deep-rgb), 0.2), rgba(var(--blue-core-rgb), 0.35)) !important;
            color: #fff !important;
            border-color: rgba(var(--blue-core-rgb), 0.5) !important;
            box-shadow: 0 0 15px rgba(var(--blue-core-rgb), 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
        }
        [data-theme='light'] .filter-pill.active {
            background: #ffffff !important;
            color: var(--accent-violet) !important;
            box-shadow: 0 2px 8px rgba(var(--blue-deep-rgb), 0.1) !important;
            border-color: rgba(var(--blue-deep-rgb), 0.15) !important;
        }
        .study-card:hover {
            border-color: rgba(var(--blue-core-rgb), 0.4) !important;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 25px rgba(var(--blue-core-rgb), 0.12) !important;
        }
        [data-theme='light'] .study-card:hover {
            box-shadow: 0 20px 40px rgba(var(--blue-deep-rgb), 0.08) !important;
            border-color: rgba(var(--blue-deep-rgb), 0.2) !important;
        }

        /* ── INJECTED FROM MOCKUP-10: Scroll Reveal ── */
        /* =========================================================
           SCROLL-REVEAL ANIMATION SYSTEM
           ========================================================= */
        /* MEGA Styles Ported to Global style.css */

        .di-section-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--accent2);
            padding-bottom: 0.8rem;
            border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.2);
        }

        .di-input-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .di-input-item {
            font-size: 0.95rem;
            color: var(--text-2);
            display: flex;
            align-items: flex-start;
            gap: 0.8rem;
        }

        .di-input-item i {
            color: var(--text-3);
            margin-top: 3px;
        }

        .di-activities {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .di-act-pill {
            background: rgba(var(--accent-primary-rgb), 0.05);
            border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
            padding: 1rem 1.2rem;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 0.8rem;
            font-size: 0.95rem;
            color: var(--text-1);
            transition: all 0.3s;
        }

        .di-act-pill:hover {
            background: rgba(var(--accent-primary-rgb), 0.1);
            border-color: rgba(var(--accent-primary-rgb), 0.4);
        }

        .di-act-pill i {
            color: var(--accent2);
        }

        /* Right: Nested Outcomes */
        .di-outcomes-box {
            background: rgba(var(--accent-primary-rgb), 0.03);
            border: 1px solid rgba(var(--accent-primary-rgb), 0.15);
            border-radius: 16px;
            overflow: hidden;
        }

        .di-outcomes-header {
            padding: 1.2rem 2rem;
            border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.1);
            background: rgba(var(--accent-primary-rgb), 0.03);
        }

        .di-outcomes-header h5 {
            font-family: var(--font-display);
            font-size: 1rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            color: var(--accent);
            margin: 0;
        }

        .di-outcomes-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
        }

        .di-outcome-item {
            padding: 2rem;
            border-right: 1px solid rgba(255, 255, 255, 0.05);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            transition: background 0.3s;
        }

        .di-outcome-item:nth-child(2n) {
            border-right: none;
        }

        .di-outcome-item:nth-child(n+3) {
            border-bottom: none;
        }

        .di-outcome-item:hover {
            background: rgba(var(--accent-primary-rgb), 0.05);
        }

        .dio-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: rgba(var(--accent-primary-rgb), 0.1);
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            margin-bottom: 1rem;
        }

        .dio-title {
            font-family: var(--font-display);
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .dio-desc {
            font-size: 0.85rem;
            color: var(--text-body);
            line-height: 1.5;
        }

        /* ── DUAL-LAYOUT VISIBILITY ── */
        .desktop-only { display: flex !important; }
        .mobile-only { display: none !important; }

        /* ── CIRCULAR HYBRID PIPELINE (Desktop) ── */
        .pipeline-v3 {
            --p3-accent-blue: var(--blue-core);
            --p3-accent-purple: var(--accent-primary);
            position: relative;
            padding: 8rem 2rem;
            background: radial-gradient(circle at center, rgba(var(--blue-core-rgb), 0.05) 0%, transparent 70%);
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            min-height: 100vh;
            justify-content: center;
        }
        .pipe-layout-v3 {
            display: flex;
            align-items: stretch;
            justify-content: center;
            width: 100%;
            max-width: 1400px;
            gap: 2rem;
            position: relative;
            z-index: 2;
            height: 500px;
        }
        .p3-highway {
            flex-grow: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .highway-canvas {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
        }
        .p3-inputs, .p3-outputs {
            width: 320px;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            justify-content: center;
        }
        .p3-card {
            background: rgba(15, 20, 35, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            padding: 2rem;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            position: relative;
            transform: perspective(1000px) rotateY(10deg);
            transition: all 0.5s ease;
        }
        .p3-card.output { transform: perspective(1000px) rotateY(-10deg); }
        .p3-card:hover { transform: perspective(1000px) rotateY(0deg) scale(1.05); border-color: rgba(255, 255, 255, 0.15); z-index: 10; }
        .p3-card-icon { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.05); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 1.5rem; color: rgba(255, 255, 255, 0.8); }
        .p3-card h3 { font-family: var(--font-headline); font-size: 1.3rem; margin-bottom: 0.5rem; color: #fff; }
        .p3-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }

        .pw-asi-core {
            width: 420px;
            height: 420px;
            background: rgba(10, 15, 30, 0.85);
            border: 2px solid rgba(var(--blue-core-rgb), 0.3);
            border-radius: 50%;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            display: flex;
            flex-direction: column;
            box-shadow: inset 0 0 60px rgba(var(--blue-core-rgb), 0.15), 0 0 80px rgba(0, 0, 0, 0.6);
            position: relative;
            overflow: hidden;
            z-index: 5;
            transition: all 0.5s ease;
        }
        .pw-asi-core::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
        }
        .core-header { 
            text-align: center; 
            padding: 3.5rem 0 1.5rem; 
            position: relative;
            z-index: 3;
        }
        .core-header h3 { font-family: var(--font-headline); font-size: 2.8rem; font-weight: 800; color: #fff; margin: 0; letter-spacing: 4px; text-shadow: 0 0 30px rgba(var(--blue-core-rgb), 0.6); }
        .core-header span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--p3-accent-blue); text-transform: uppercase; letter-spacing: 3px; }
        .core-body { 
            display: flex; 
            flex-grow: 1; 
            position: relative; 
            z-index: 2;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }
        .cb-half { flex: 1; padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 0.8rem; position: relative; }
        .cb-half.people { border-right: 1px solid rgba(255, 255, 255, 0.05); }
        .cb-icon { font-size: 2.2rem; color: var(--p3-accent-blue); filter: drop-shadow(0 0 10px rgba(var(--blue-core-rgb), 0.5)); }
        .cb-half.software .cb-icon { color: var(--p3-accent-purple); filter: drop-shadow(0 0 10px rgba(var(--accent-primary-rgb), 0.5)); }
        .cb-title { font-family: var(--font-headline); font-size: 1.2rem; font-weight: 600; color: #fff; }
        .cb-desc { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; padding: 0 0.5rem; }
        .core-glow-people { position: absolute; left: 0; bottom: 0; width: 50%; height: 100%; background: radial-gradient(circle at bottom left, rgba(6, 182, 212, 0.15) 0%, transparent 70%); }
        .core-glow-software { position: absolute; right: 0; bottom: 0; width: 50%; height: 100%; background: radial-gradient(circle at bottom right, rgba(var(--accent-primary-rgb), 0.15) 0%, transparent 70%); }
        .pw-asi-core::after {
            content: '';
            position: absolute;
            inset: -4rem;
            border-radius: 50%;
            border: 2px solid rgba(var(--blue-core-rgb), 0.1);
            animation: coreCirclePulse 4s infinite;
            z-index: -1;
            pointer-events: none;
        }
        @keyframes coreCirclePulse {
            0% { transform: scale(0.9); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: scale(1.1); opacity: 0; }
        }

        [data-theme='light'] .pipeline-v3 { background: radial-gradient(circle at center, rgba(var(--blue-deep-rgb), 0.03) 0%, transparent 70%); }
        [data-theme='light'] .p3-card { background: rgba(255, 255, 255, 0.8); border-color: rgba(0, 0, 0, 0.05); }
        [data-theme='light'] .p3-card h3 { color: var(--text-heading); }
        [data-theme='light'] .p3-card-icon { background: rgba(0, 0, 0, 0.03); color: var(--accent-violet); }
        [data-theme='light'] .p3-card p { color: var(--text-body); }
        [data-theme='light'] .pw-asi-core { background: rgba(255, 255, 255, 0.9); border-color: rgba(var(--blue-deep-rgb), 0.2); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05); }
        [data-theme='light'] .core-header h3 { color: var(--text-heading); text-shadow: none; }
        [data-theme='light'] .cb-title { color: var(--text-heading); }
        [data-theme='light'] .cb-half.people { border-right-color: rgba(0, 0, 0, 0.05); }
        [data-theme='light'] .core-body { border-top-color: rgba(0, 0, 0, 0.05); }
        [data-theme='light'] .cb-desc { color: var(--text-body); }

        /* ── SECTION HEADER & NORMALIZATION ── */
        .section-centered {
            justify-content: center;
        }


        .footer-premium-card {
            padding: 4rem;
        }

        .footer-split-grid {
            gap: 4rem;
            align-items: center;
        }

        @media (max-width: 768px) {
            .footer-premium-card {
                padding: 2rem 1.5rem;
            }
            .footer-split-grid {
                gap: 2rem;
            }
        }

/* --- Extracted Block 2 (4179 chars) --- */
.hero-stats-row {
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            gap: 1.5rem;
                            margin: 2.5rem 0 1rem;
                            border-top: 1px solid rgba(255, 255, 255, 0.1);
                            padding-top: 2rem;
                            text-align: left;
                        }

                        [data-theme='light'] .hero-stats-row {
                            border-top: 1px solid rgba(0, 0, 0, 0.1);
                        }

                        .h-stat-col {
                            border-left: 1px solid rgba(255, 255, 255, 0.1);
                            padding-left: 1.5rem;
                            position: relative;
                        }

                        .h-stat-col:first-child {
                            border-left: none;
                            padding-left: 0;
                        }

                        [data-theme='light'] .h-stat-col {
                            border-left-color: rgba(0, 0, 0, 0.1) !important;
                        }

                        .h-stat-val {
                            font-family: var(--font-headline);
                            font-size: 3.2rem;
                            font-weight: 800;
                            line-height: 1;
                            letter-spacing: -2px;
                            margin-bottom: 0.5rem;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }

                        .h-stat-val .count {
                            color: var(--text-heading);
                        }

                        .h-stat-val .h-stat-plus {
                            font-size: 2rem;
                            color: var(--text-heading);
                            font-weight: 600;
                        }

                        .h-stat-label {
                            font-size: 0.95rem;
                            font-weight: 600;
                            color: var(--text-heading);
                            line-height: 1.3;
                            margin-bottom: 0.4rem;
                            padding-right: 1rem;
                        }

                        .h-stat-desc {
                            font-size: 0.8rem;
                            color: var(--text-muted);
                            line-height: 1.5;
                            max-width: 95%;
                        }

                        .hero-ctas {
                            display: flex;
                            gap: 1rem;
                            flex-wrap: wrap;
                            margin-top: 2rem;
                        }

                        .hero-ctas .btn {
                            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
                        }

                        @media(max-width: 600px) {
                            .hero-stats-row {
                                grid-template-columns: 1fr;
                                gap: 2rem;
                            }
                            .h-stat-col {
                                border-left: none;
                                padding-left: 0;
                            }
                        }

/* --- Extracted Block 3 (11056 chars) --- */
/* Cinematic HUD Interface for Video */
                    .auto-hud-wrapper {
                        perspective: 1200px;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .auto-hud-container {
                        position: relative;
                        width: 100%;
                        aspect-ratio: 16/10;
                        border-radius: 1.5rem;
                        overflow: hidden;
                        box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
                        background: #030508;
                        transform: rotateY(-8deg) rotateX(4deg) translateZ(0);
                        transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
                        transform-style: preserve-3d;
                    }

                    [data-theme='light'] .auto-hud-container {
                        background: #f8f9fa;
                        box-shadow: 0 40px 80px -20px rgba(0, 100, 255, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
                    }

                    .hero-visual {
                        perspective: 1000px;
                    }

                    .auto-hud-wrapper:hover .auto-hud-container {
                        transform: rotateY(0deg) rotateX(0deg) translateZ(20px) scale(1.02);
                        box-shadow: 0 50px 100px -20px rgba(0, 195, 255, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
                    }

                    .hud-vignette {
                        position: absolute;
                        inset: 0;
                        background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.4) 120%);
                        pointer-events: none;
                        z-index: 2;
                    }

                    .hud-video {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        opacity: 0.9;
                        filter: contrast(1.1) brightness(1.1);
                        /* lighten removes the dark background of the video, blending it perfectly */
                        mix-blend-mode: lighten;
                    }

                    [data-theme='light'] .hud-video {
                        mix-blend-mode: multiply;
                        /* Inverts the trick for light mode */
                        filter: contrast(1.1) brightness(0.95);
                        opacity: 1;
                    }

                    /* Scanning Laser */
                    .hud-scanner {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 2px;
                        background: var(--accent-blue);
                        box-shadow: 0 0 20px 5px rgba(0, 195, 255, 0.5);
                        animation: scanLine 3.5s ease-in-out infinite;
                        z-index: 10;
                        pointer-events: none;
                    }

                    @keyframes scanLine {
                        0% {
                            top: -10%;
                            opacity: 0;
                        }

                        15% {
                            opacity: 1;
                        }

                        40% {
                            top: 110%;
                            opacity: 1;
                        }

                        50% {
                            top: 110%;
                            opacity: 0;
                        }

                        100% {
                            top: 110%;
                            opacity: 0;
                        }
                    }

                    /* UI Overlays */
                    .hud-element {
                        position: absolute;
                        background: rgba(10, 15, 25, 0.7);
                        backdrop-filter: blur(12px);
                        -webkit-backdrop-filter: blur(12px);
                        border: 1px solid rgba(0, 195, 255, 0.3);
                        color: #fff;
                        font-family: var(--font-mono);
                        font-size: 0.75rem;
                        padding: 0.5rem 0.8rem;
                        border-radius: 6px;
                        z-index: 20;
                        display: flex;
                        flex-direction: column;
                        gap: 4px;
                        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                        pointer-events: none;
                        transform: translateZ(40px);
                        /* Pops out during 3D rotation */
                    }

                    [data-theme='light'] .hud-element {
                        background: rgba(255, 255, 255, 0.85);
                        color: #111;
                        border-color: rgba(0, 100, 255, 0.2);
                        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
                    }

                    .hud-el-header {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        font-weight: 600;
                        color: var(--accent-primary);
                    }

                    .hud-el-header::before {
                        content: '';
                        display: block;
                        width: 6px;
                        height: 6px;
                        background: var(--accent-blue);
                        border-radius: 50%;
                        box-shadow: 0 0 8px var(--accent-blue);
                    }

                    .hud-element.top-left {
                        top: 8%;
                        left: 6%;
                        animation: floatHUD 6s ease-in-out infinite;
                    }

                    .hud-element.bottom-right {
                        bottom: 12%;
                        right: 6%;
                        animation: floatHUD 7s ease-in-out infinite reverse;
                        border-color: rgba(0, 255, 136, 0.3);
                    }

                    [data-theme='light'] .hud-element.bottom-right {
                        border-color: rgba(0, 200, 100, 0.3);
                    }

                    .hud-element.bottom-right .hud-el-header {
                        color: var(--accent-green);
                    }

                    .hud-element.bottom-right .hud-el-header::before {
                        background: var(--accent-green);
                        box-shadow: 0 0 8px var(--accent-green);
                    }

                    .hud-element.center-right {
                        top: 45%;
                        right: 4%;
                        animation: floatHUD 5s ease-in-out infinite 1s;
                    }

                    @keyframes floatHUD {

                        0%,
                        100% {
                            transform: translateY(0) translateZ(40px);
                        }

                        50% {
                            transform: translateY(-8px) translateZ(40px);
                        }
                    }

                    /* Camera target brackets */
                    .hud-brackets {
                        position: absolute;
                        inset: 24px;
                        border: 1px solid rgba(255, 255, 255, 0.05);
                        z-index: 5;
                        pointer-events: none;
                        transform: translateZ(10px);
                    }

                    [data-theme='light'] .hud-brackets {
                        border-color: rgba(0, 0, 0, 0.05);
                    }

                    .hud-br {
                        position: absolute;
                        width: 40px;
                        height: 40px;
                        border: 2px solid rgba(255, 255, 255, 0.4);
                    }

                    [data-theme='light'] .hud-br {
                        border-color: rgba(0, 0, 0, 0.3);
                    }

                    .hud-br.tl {
                        top: -1px;
                        left: -1px;
                        border-right: none;
                        border-bottom: none;
                    }

                    .hud-br.tr {
                        top: -1px;
                        right: -1px;
                        border-left: none;
                        border-bottom: none;
                    }

                    .hud-br.bl {
                        bottom: -1px;
                        left: -1px;
                        border-right: none;
                        border-top: none;
                    }

                    .hud-br.br {
                        bottom: -1px;
                        right: -1px;
                        border-left: none;
                        border-top: none;
                    }

                    .hud-overlay-grid {
                        position: absolute;
                        inset: 0;
                        background-image:
                            linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                            linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
                        background-size: 40px 40px;
                        z-index: 1;
                        pointer-events: none;
                        opacity: 0.5;
                    }

                    [data-theme='light'] .hud-overlay-grid {
                        background-image:
                            linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
                            linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
                    }

                    @media (max-width: 900px) {
                        .auto-hud-container {
                            transform: none;
                            aspect-ratio: 4/3;
                        }

                        .auto-hud-wrapper:hover .auto-hud-container {
                            transform: none;
                        }

                        .hud-element {
                            font-size: 0.65rem;
                            padding: 0.4rem 0.6rem;
                        }
                    }

/* --- Extracted Block 4 (6735 chars) --- */
.sticky-sub-nav {
            position: fixed;
            top: 98px; /* Adjusted to sit below main header (approx 98px) */
            left: 0;
            width: 100%;
            z-index: 900;
            background: var(--glass-bg-strong);
            backdrop-filter: var(--backdrop-blur-heavy);
            -webkit-backdrop-filter: var(--backdrop-blur-heavy);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding: 0.8rem 0;
            transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-20px);
        }

        .sticky-sub-nav.is-visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        [data-theme='dark'] .sticky-sub-nav {
            background: rgba(10, 15, 26, 0.7);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
        }

        .sub-nav-inner {
            display: flex;
            justify-content: center;
            gap: 2.5rem;
            align-items: center;
        }

        .sub-nav-link {
            font-family: var(--font-mono);
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-3);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            text-decoration: none;
            transition: all 0.3s ease;
            padding: 0.5rem;
            opacity: 0.7;
        }

        .sub-nav-link:hover {
            color: var(--accent-primary);
            opacity: 1;
        }

        [data-theme='dark'] .sub-nav-link {
            color: rgba(255, 255, 255, 0.6);
        }

        [data-theme='dark'] .sub-nav-link:hover {
            opacity: 1;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
        }

        .sub-nav-link.active {
            color: var(--accent-primary);
            opacity: 1;
            position: relative;
        }

        .sub-nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 4px;
            background: var(--accent-blue);
            border-radius: 50%;
            box-shadow: 0 0 8px var(--accent-blue);
        }

        [data-theme='light'] .sub-nav-link.active {
            color: var(--accent-violet);
        }

        [data-theme='light'] .sub-nav-link.active::after {
            background: var(--accent-violet);
            box-shadow: 0 0 8px rgba(var(--blue-deep-rgb), 0.4);
        }

        /* Secondary Contextual Sub-Nav (Projects & Digital) */
        .context-sub-nav {
            position: fixed;
            top: 150px; /* Approved breathing room below primary sub-nav */
            left: 0;
            width: 100%;
            z-index: 850;
            background: rgba(10, 15, 26, 0.85);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            padding: 0.6rem 0; /* Slightly more padding */
            transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
        }

        [data-theme='light'] .context-sub-nav {
            background: rgba(255, 255, 255, 0.9);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .context-sub-nav.is-visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .context-nav-inner {
            display: flex;
            justify-content: center;
            gap: 2.5rem; /* Matched to primary sub-nav */
            align-items: center;
        }

        .context-nav-link {
            font-family: var(--font-mono);
            font-size: 0.7rem; /* Improved legibility */
            font-weight: 500;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            letter-spacing: 1.2px;
            text-decoration: none;
            transition: all 0.3s ease;
            padding: 0.4rem 0.8rem;
            border-radius: 6px;
        }

        .context-nav-link:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.08);
        }

        [data-theme='light'] .context-nav-link {
            color: rgba(0, 0, 0, 0.5);
        }

        [data-theme='light'] .context-nav-link:hover {
            color: var(--accent-violet);
            background: rgba(var(--blue-deep-rgb), 0.05);
        }

        .context-nav-link.active {
            color: var(--accent-primary);
            background: transparent;
            opacity: 1;
            box-shadow: none;
            position: relative;
        }

        .context-nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 4px;
            background: var(--accent-blue);
            border-radius: 50%;
            box-shadow: 0 0 8px var(--accent-blue);
        }

        [data-theme='light'] .context-nav-link.active {
            color: var(--accent-violet);
            background: transparent;
        }

        [data-theme='light'] .context-nav-link.active::after {
            background: var(--accent-violet);
            box-shadow: 0 0 8px rgba(var(--blue-deep-rgb), 0.4);
        }

        [data-theme='light'] .context-nav-link {
            color: rgba(0, 0, 0, 0.5);
        }

        .context-nav-link:hover {
            color: var(--accent-primary);
            background: rgba(var(--blue-core-rgb), 0.1);
        }

        [data-theme='dark'] .context-nav-link:hover {
            color: #fff;
        }

        @media (max-width: 768px) {
            .sub-nav-inner {
                gap: 1.5rem;
                overflow-x: auto;
                justify-content: flex-start;
                padding-bottom: 0.5rem;
            }

            .sub-nav-link {
                white-space: nowrap;
            }

            /* Hide scrollbar */
            .sub-nav-inner::-webkit-scrollbar {
                display: none;
            }

            .sub-nav-inner {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }

/* --- Extracted Block 5 (10300 chars) --- */
/* Premium Segmented Control */
                .filters-wrapper {
                    display: flex;
                    justify-content: center;
                    flex-wrap: wrap;
                    background: rgba(255, 255, 255, 0.03);
                    border: 1px solid rgba(255, 255, 255, 0.08);
                    border-radius: 100px;
                    padding: 0.35rem;
                    margin: 0 auto 3.5rem;
                    width: fit-content;
                    max-width: 100%;
                    backdrop-filter: blur(12px);
                    -webkit-backdrop-filter: blur(12px);
                    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
                }

                [data-theme='light'] .filters-wrapper {
                    background: rgba(255, 255, 255, 0.6);
                    border: 1px solid rgba(0, 0, 0, 0.05);
                    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
                }

                .filter-pill {
                    padding: 0.7rem 1.4rem;
                    border-radius: 100px;
                    border: none;
                    background: transparent;
                    color: var(--text-muted);
                    font-size: 0.8rem;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    font-family: var(--font-mono);
                    cursor: pointer;
                    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
                }

                .filter-pill:hover {
                    color: var(--text-base);
                    background: rgba(255, 255, 255, 0.05);
                }

                [data-theme='light'] .filter-pill:hover {
                    background: rgba(0, 0, 0, 0.03);
                }

                .filter-pill.active {
                    background: linear-gradient(135deg, rgba(88, 101, 242, 0.2), rgba(138, 43, 226, 0.3));
                    color: #fff;
                    border-color: rgba(138, 43, 226, 0.5);
                    box-shadow: 0 0 15px rgba(138, 43, 226, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
                }

                [data-theme='light'] .filter-pill.active {
                    background: #ffffff;
                    color: var(--accent-primary);
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                }

                /* Animation classes for filtering */
                .study-card.hide-card {
                    display: none !important;
                }

                .study-card.show-card {
                    animation: scaleIn 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
                }

                @keyframes scaleIn {
                    from {
                        opacity: 0;
                        transform: scale(0.95) translateY(10px);
                    }

                    to {
                        opacity: 1;
                        transform: scale(1) translateY(0);
                    }
                }

                .studies-grid {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 2rem;
                }

                @media (max-width: 1100px) {
                    .studies-grid {
                        grid-template-columns: repeat(2, 1fr);
                    }
                }

                @media (max-width: 768px) {
                    .studies-grid {
                        grid-template-columns: 1fr;
                    }

                    .filters-wrapper {
                        border-radius: 1rem;
                        padding: 1rem;
                    }

                    .filter-pill {
                        width: 100%;
                        margin-bottom: 0.25rem;
                    }
                }

                /* Structured Blog Cards */
                .study-card {
                    display: flex;
                    flex-direction: column;
                    border-radius: var(--radius-lg);
                    background: var(--card-bg);
                    border: var(--glass-border);
                    overflow: hidden;
                    text-decoration: none;
                    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
                    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);
                }

                [data-theme='dark'] .study-card {
                    background: linear-gradient(145deg, rgba(30, 35, 55, 0.5) 0%, rgba(10, 15, 26, 0.8) 100%);
                    border: 1px solid rgba(255, 255, 255, 0.08);
                    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 4px 20px rgba(0, 0, 0, 0.4);
                    backdrop-filter: blur(16px);
                    -webkit-backdrop-filter: blur(16px);
                }

                .study-card:hover {
                    transform: translateY(-8px);
                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(138, 43, 226, 0.15);
                    border-color: rgba(138, 43, 226, 0.4);
                }

                [data-theme='light'] .study-card:hover {
                    box-shadow: 0 20px 40px rgba(var(--blue-deep-rgb), 0.08);
                    border-color: rgba(var(--blue-deep-rgb), 0.2);
                }

                .study-img-wrapper {
                    position: relative;
                    width: 100%;
                    aspect-ratio: 16 / 8;
                    overflow: hidden;
                    background: linear-gradient(145deg, #f0f2f5 0%, #e8eaef 50%, #f0f2f5 100%);
                }

                .study-img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
                    filter: saturate(0.85);
                }

                .study-card:hover .study-img {
                    transform: scale(1.08);
                    filter: saturate(1.1);
                }

                .study-tag {
                    position: absolute;
                    top: 1rem;
                    left: 1rem;
                    background: rgba(10, 15, 26, 0.75);
                    backdrop-filter: blur(12px);
                    -webkit-backdrop-filter: blur(12px);
                    color: #fff;
                    padding: 0.4rem 0.8rem;
                    border-radius: 4px;
                    font-size: 0.65rem;
                    font-family: var(--font-mono);
                    font-weight: 700;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    border: 1px solid rgba(255, 255, 255, 0.15);
                    transition: box-shadow 0.3s ease, border-color 0.3s ease;
                }

                [data-theme='light'] .study-tag {
                    background: rgba(255, 255, 255, 0.85);
                    color: #1a1a2e;
                    border: 1px solid rgba(0, 0, 0, 0.08);
                }

                /* On hover - tag pill gets a subtle glow */
                .study-card:hover .study-tag {
                    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
                    border-color: rgba(255, 255, 255, 0.25);
                }

                .study-content {
                    padding: 1.25rem;
                    display: flex;
                    flex-direction: column;
                    flex-grow: 1;
                }

                .study-title {
                    font-size: 1.25rem;
                    font-weight: 700;
                    line-height: 1.4;
                    color: var(--text-base);
                    margin-bottom: 0.75rem;
                    transition: color 0.3s ease;
                }

                .study-card:hover .study-title {
                    color: var(--accent-primary);
                }

                [data-theme='dark'] .study-title {
                    color: #fff;
                }

                [data-theme='dark'] .study-card:hover .study-title {
                    color: #fff;
                    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
                }

                .study-desc {
                    font-size: 0.95rem;
                    color: var(--text-muted);
                    line-height: 1.6;
                    margin-bottom: 1.25rem;
                    flex-grow: 1;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }

                .study-meta {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-top: 1px solid rgba(255, 255, 255, 0.05);
                    padding-top: 1rem;
                    margin-top: auto;
                }

                [data-theme='light'] .study-meta {
                    border-top: 1px solid rgba(0, 0, 0, 0.06);
                }

                .study-btn {
                    font-size: 0.8rem;
                    font-weight: 700;
                    color: var(--text-base);
                    display: inline-flex;
                    align-items: center;
                    gap: 0.5rem;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                    transition: color 0.3s ease;
                }

                .study-card:hover .study-btn {
                    color: var(--accent-primary);
                }

                [data-theme='dark'] .study-btn {
                    color: #fff;
                }

                [data-theme='dark'] .study-card:hover .study-btn {
                    color: #fff;
                }

                .study-btn i {
                    font-size: 0.8rem;
                    transition: transform 0.3s ease;
                }

                .study-card:hover .study-btn i {
                    transform: translateX(4px);
                }

                .study-date {
                    font-size: 0.8rem;
                    color: var(--text-muted);
                    font-family: var(--font-mono);
                }

/* --- Extracted Block 6 (1296 chars) --- */
/* Case Study Logo Specific Styling */
                .case-study-card .study-img {
                    object-fit: contain;
                    padding: 1.75rem;
                    background: transparent;
                    width: 100%;
                    height: 100%;
                    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
                }

                [data-theme='dark'] .case-study-card .study-img {
                    filter: brightness(1.2) contrast(1.1);
                }

                /* Ensure logo wrapper handles centering and consistency */
                .case-study-card .study-img-wrapper {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #fff;
                    /* High contrast background for logos */
                    overflow: hidden;
                }

                [data-theme='dark'] .case-study-card .study-img-wrapper {
                    background: #1e2337;
                    /* Consistent with dark card theme but slightly lighter for visibility */
                }

                .case-study-card:hover .study-img {
                    transform: scale(1.1);
                }

/* --- Extracted Block 7 (12212 chars) --- */
/* Premium Segmented Control */
                        .filters-wrapper {
                            display: flex;
                            justify-content: center;
                            flex-wrap: wrap;
                            background: rgba(255, 255, 255, 0.03);
                            border: 1px solid rgba(255, 255, 255, 0.08);
                            border-radius: 100px;
                            padding: 0.35rem;
                            margin: 0 auto 3.5rem;
                            width: fit-content;
                            max-width: 100%;
                            backdrop-filter: blur(12px);
                            -webkit-backdrop-filter: blur(12px);
                            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
                        }

                        [data-theme='light'] .filters-wrapper {
                            background: rgba(255, 255, 255, 0.6);
                            border: 1px solid rgba(0, 0, 0, 0.05);
                            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
                        }

                        .filter-pill {
                            padding: 0.7rem 1.4rem;
                            border-radius: 100px;
                            border: none;
                            background: transparent;
                            color: var(--text-muted);
                            font-size: 0.8rem;
                            font-weight: 600;
                            text-transform: uppercase;
                            letter-spacing: 1px;
                            font-family: var(--font-mono);
                            cursor: pointer;
                            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
                        }

                        .filter-pill:hover {
                            color: var(--text-base);
                            background: rgba(255, 255, 255, 0.05);
                        }

                        [data-theme='light'] .filter-pill:hover {
                            background: rgba(0, 0, 0, 0.03);
                        }

                        .filter-pill.active {
                            background: linear-gradient(135deg, rgba(88, 101, 242, 0.2), rgba(138, 43, 226, 0.3));
                            color: #fff;
                            border-color: rgba(138, 43, 226, 0.5);
                            box-shadow: 0 0 15px rgba(138, 43, 226, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
                        }

                        [data-theme='light'] .filter-pill.active {
                            background: #ffffff;
                            color: var(--accent-primary);
                            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                        }

                        /* Animation classes for filtering */
                        .study-card.hide-card {
                            display: none !important;
                        }

                        .study-card.show-card {
                            animation: scaleIn 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
                        }

                        @keyframes scaleIn {
                            from {
                                opacity: 0;
                                transform: scale(0.95) translateY(10px);
                            }

                            to {
                                opacity: 1;
                                transform: scale(1) translateY(0);
                            }
                        }

                        .studies-grid {
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            gap: 2rem;
                        }

                        @media (max-width: 1100px) {
                            .studies-grid {
                                grid-template-columns: repeat(2, 1fr);
                            }
                        }

                        @media (max-width: 768px) {
                            .studies-grid {
                                grid-template-columns: 1fr;
                            }

                            .filters-wrapper {
                                border-radius: 1rem;
                                padding: 1rem;
                            }

                            .filter-pill {
                                width: 100%;
                                margin-bottom: 0.25rem;
                            }
                        }

                        /* Structured Blog Cards */
                        .study-card {
                            display: flex;
                            flex-direction: column;
                            border-radius: var(--radius-lg);
                            background: var(--card-bg);
                            border: var(--glass-border);
                            overflow: hidden;
                            text-decoration: none;
                            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
                            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);
                        }

                        [data-theme='dark'] .study-card {
                            background: linear-gradient(145deg, rgba(30, 35, 55, 0.5) 0%, rgba(10, 15, 26, 0.8) 100%);
                            border: 1px solid rgba(255, 255, 255, 0.08);
                            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 4px 20px rgba(0, 0, 0, 0.4);
                            backdrop-filter: blur(16px);
                            -webkit-backdrop-filter: blur(16px);
                        }

                        .study-card:hover {
                            transform: translateY(-8px);
                            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(138, 43, 226, 0.15);
                            border-color: rgba(138, 43, 226, 0.4);
                        }

                        [data-theme='light'] .study-card:hover {
                            box-shadow: 0 20px 40px rgba(var(--blue-deep-rgb), 0.08);
                            border-color: rgba(var(--blue-deep-rgb), 0.2);
                        }

                        .study-img-wrapper {
                            position: relative;
                            width: 100%;
                            aspect-ratio: 16 / 8;
                            overflow: hidden;
                            background: rgba(0, 0, 0, 0.05);
                        }

                        .study-img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
                            filter: saturate(0.85);
                        }

                        .study-card:hover .study-img {
                            transform: scale(1.08);
                            filter: saturate(1.1);
                        }

                        .study-tag {
                            position: absolute;
                            top: 1rem;
                            left: 1rem;
                            background: rgba(10, 15, 26, 0.7);
                            backdrop-filter: blur(8px);
                            -webkit-backdrop-filter: blur(8px);
                            color: #fff;
                            padding: 0.4rem 0.8rem;
                            border-radius: 4px;
                            font-size: 0.65rem;
                            font-family: var(--font-mono);
                            font-weight: 700;
                            text-transform: uppercase;
                            letter-spacing: 1px;
                            border: 1px solid rgba(255, 255, 255, 0.1);
                        }

                        [data-theme='light'] .study-tag {
                            background: rgba(255, 255, 255, 0.9);
                            color: var(--accent-primary);
                            border: 1px solid rgba(0, 0, 0, 0.05);
                        }

                        .study-content {
                            padding: 1.25rem;
                            display: flex;
                            flex-direction: column;
                            flex-grow: 1;
                        }

                        .study-title {
                            font-size: 1.25rem;
                            font-weight: 700;
                            line-height: 1.4;
                            color: var(--text-base);
                            margin-bottom: 0.75rem;
                            transition: color 0.3s ease;
                        }

                        .study-card:hover .study-title {
                            color: var(--accent-primary);
                        }

                        [data-theme='dark'] .study-title {
                            color: #fff;
                        }

                        [data-theme='dark'] .study-card:hover .study-title {
                            color: #fff;
                            text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
                        }

                        .study-desc {
                            font-size: 0.95rem;
                            color: var(--text-muted);
                            line-height: 1.6;
                            margin-bottom: 1.25rem;
                            flex-grow: 1;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                        }

                        .study-meta {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            border-top: 1px solid rgba(255, 255, 255, 0.05);
                            padding-top: 1rem;
                            margin-top: auto;
                        }

                        [data-theme='light'] .study-meta {
                            border-top: 1px solid rgba(0, 0, 0, 0.06);
                        }

                        .study-btn {
                            font-size: 0.8rem;
                            font-weight: 700;
                            color: var(--text-base);
                            display: inline-flex;
                            align-items: center;
                            gap: 0.5rem;
                            text-transform: uppercase;
                            letter-spacing: 0.5px;
                            transition: color 0.3s ease;
                        }

                        .study-card:hover .study-btn {
                            color: var(--accent-primary);
                        }

                        [data-theme='dark'] .study-btn {
                            color: #fff;
                        }

                        [data-theme='dark'] .study-card:hover .study-btn {
                            color: #fff;
                        }

                        .study-btn i {
                            font-size: 0.8rem;
                            transition: transform 0.3s ease;
                        }

                        .study-card:hover .study-btn i {
                            transform: translateX(4px);
                        }

                        .study-date {
                            font-size: 0.8rem;
                            color: var(--text-muted);
                            font-family: var(--font-mono);
                        }

/* --- Extracted Block 8 (1225 chars) --- */
.alt-video {
                                            width: 100%;
                                            height: 100%;
                                            object-fit: cover;
                                            mix-blend-mode: lighten;
                                            filter: contrast(1.1) brightness(1.1);
                                            opacity: 0.9;
                                        }

                                        [data-theme='light'] .alt-video {
                                            mix-blend-mode: multiply;
                                            filter: contrast(1.1) brightness(0.95);
                                            opacity: 1;
                                        }

                                        [data-theme='light'] .alt-container {
                                            background: #f8f9fa !important;
                                            border-color: rgba(0, 100, 255, 0.15) !important;
                                            box-shadow: 0 30px 60px -15px rgba(0, 100, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05) inset !important;
                                        }

/* Expand Grid Button */
.expand-grid-btn {
    background: transparent;
    border: 1px solid rgba(var(--blue-core-rgb), 0.4);
    color: var(--accent-primary);
    padding: 0.75rem 2rem;
    font-family: var(--font-display);
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}
.expand-grid-btn:hover {
    background: rgba(var(--blue-core-rgb), 0.1);
    border-color: rgba(var(--blue-core-rgb), 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--blue-core-rgb), 0.2);
}
.expand-grid-btn i { transition: transform 0.3s; }
.expand-grid-btn.expanded i { transform: rotate(180deg); }

.center-cta {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (min-width: 901px) {
    .mobile-view-more { display: none !important; }
    .case-studies-grid:not(.expanded) .case-study-card:nth-child(n+7),
    .case-studies-grid:not(.expanded) .study-card:nth-child(n+7),
    .product-studies-grid:not(.expanded) .product-study-card:nth-child(n+7),
    .product-studies-grid:not(.expanded) .study-card:nth-child(n+7) {
        display: none;
    }
}
@media (max-width: 900px) {
    .desktop-only { display: none !important; }
}


.study-card { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; }
.study-card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(var(--blue-core-rgb), 0.15), 0 0 0 1px var(--accent-primary-soft); }

/* =========================================================================
   VIEWPORT-SCALED SHOWCASE & DI GRIDS
   As screen width increases, give more space to content so it fits in viewport
   ========================================================================= */

/* 17"-24" Standard Monitors (1600px - 1919px) */
@media (min-width: 1600px) {
  .showcase {
    grid-template-columns: 32% 68%;
  }
  .di-grid {
    grid-template-columns: 1fr 1.8fr;
  }
}

/* 24"-27" Large Monitors (1920px - 2559px) */
@media (min-width: 1920px) {
  .showcase {
    grid-template-columns: 28% 72%;
  }
  .di-grid {
    grid-template-columns: 1fr 2fr;
  }
}

/* 27"-32"+ Ultrawide & 4K Monitors (>= 2560px) */
@media (min-width: 2560px) {
  .showcase {
    grid-template-columns: 25% 75%;
  }
}
/* ═══ HEADING COLORS — CLEAN & READABLE ═══ */
/* Headings: white in dark, black in light. Violet is ACCENT ONLY. */
/* Keep .highlight spans also gradient */
.section-header h2 .highlight,
h2 .highlight {
    background: linear-gradient(135deg, var(--c1), var(--c2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Light mode headings handled below */

/* ═══ FIX 4: VIOLET HOVER EFFECTS ON STUDY CARDS ═══ */
/* Card title turns gradient on hover */
.study-card:hover .study-title {
    background: linear-gradient(135deg, var(--c1), var(--c2)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
/* Card CTA arrow turns violet */
.study-card:hover .study-btn {
    color: var(--accent-primary) !important;
}
[data-theme='dark'] .study-card:hover .study-btn {
    color: var(--accent-secondary) !important;
}
/* Study tag on hover glows violet */
.study-card:hover .study-tag {
    background: rgba(var(--accent-deep-rgb), 0.85) !important;
    border-color: rgba(var(--accent-primary-rgb), 0.5) !important;
    box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.3) !important;
}
/* Showcase card accent hover - strategic outcomes & digital transformation */
.showcase:hover {
    border-color: rgba(var(--accent-primary-rgb), 0.3) !important;
    box-shadow: 0 16px 48px rgba(var(--accent-deep-rgb), 0.12) !important;
}
[data-theme='dark'] .showcase:hover {
    box-shadow: 0 16px 48px rgba(var(--accent-primary-rgb), 0.08), 0 0 30px rgba(var(--accent-primary-rgb), 0.05) !important;
}
/* Filter pill active state with Nebula gradient */
.filter-pill.active {
    background: linear-gradient(135deg, rgba(var(--accent-deep-rgb), 0.25), rgba(var(--accent-tertiary-vivid-rgb), 0.3)) !important;
    border-color: rgba(var(--accent-primary-rgb), 0.5) !important;
    box-shadow: 0 0 15px rgba(var(--accent-primary-rgb), 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

/* ═══ NEBULA GLOW ON SHOWCASE IMAGE OVERLAYS ═══ */
.sc-overlay::after {
    background: linear-gradient(135deg, rgba(var(--accent-deep-rgb), 0.15), rgba(var(--accent-tertiary-vivid-rgb), 0.1)) !important;
}

/* ═══ PREMIUM EXPAND BUTTON ═══ */
.expand-grid-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 0.8rem 2.4rem !important;
    font-family: var(--font-mono) !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    position: relative !important;
    overflow: hidden !important;
}
.expand-grid-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50px !important;
    background: linear-gradient(135deg, rgba(var(--accent-deep-rgb), 0), rgba(var(--accent-tertiary-vivid-rgb), 0)) !important;
    transition: background 0.4s !important;
}
.expand-grid-btn:hover {
    background: rgba(var(--accent-deep-rgb), 0.08) !important;
    border-color: rgba(var(--accent-primary-rgb), 0.35) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 20px rgba(var(--accent-deep-rgb), 0.15) !important;
}
.expand-grid-btn:hover::before {
    background: linear-gradient(135deg, rgba(var(--accent-deep-rgb), 0.06), rgba(var(--accent-tertiary-vivid-rgb), 0.04)) !important;
}
.expand-grid-btn i {
    font-size: 0.65rem !important;
    transition: transform 0.3s !important;
}
.expand-grid-btn:hover i {
    animation: bounceDown 1s ease infinite !important;
}
@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}
/* Light mode */
[data-theme='light'] .expand-grid-btn {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: rgba(0, 0, 0, 0.6) !important;
}
[data-theme='light'] .expand-grid-btn:hover {
    background: rgba(var(--accent-deep-rgb), 0.06) !important;
    border-color: rgba(var(--accent-deep-rgb), 0.25) !important;
    color: var(--accent-deep) !important;
    box-shadow: 0 4px 20px rgba(var(--accent-deep-rgb), 0.1) !important;
}

/* ═══ CENTER-CTA CONTAINER FIX ═══ */
.center-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
.center-cta .global-page-link {
    margin-top: 0 !important;
}


/* ═══ VIOLET AS 30% ACCENT — NOT DOMINANT ═══ */
/* Rule: Headings = white/black. Violet only on hovers, active states, 
   badges, small accents. Premium = restraint. */

/* Section headings: clean white (dark) / clean black (light) */
.section-header h2 {
    color: #fff !important;
    -webkit-text-fill-color: unset !important;
    background: none !important;
}
[data-theme='light'] .section-header h2 {
    color: #0c0f1a !important;
    -webkit-text-fill-color: unset !important;
    background: none !important;
}

/* ONLY .highlight spans get the gradient (30% accent) */
.section-header h2 .highlight,
h2 .highlight {
    background: linear-gradient(135deg, var(--c1), var(--c2)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
[data-theme='light'] .section-header h2 .highlight,
[data-theme='light'] h2 .highlight {
    background: linear-gradient(135deg, var(--c1), var(--c2)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Outcomes/DT section headings — same rule */
.outcomes-mega h2,
.digital-immersive h2 {
    color: #fff !important;
    -webkit-text-fill-color: unset !important;
    background: none !important;
}
[data-theme='light'] .outcomes-mega h2,
[data-theme='light'] .digital-immersive h2 {
    color: #0c0f1a !important;
    -webkit-text-fill-color: unset !important;
    background: none !important;
}

/* Section eyebrows: muted violet in dark, dark violet in light */
.section-eyebrow,
.cb-label {
    color: rgba(var(--accent-primary-rgb), 0.5) !important;
}
[data-theme='light'] .section-eyebrow,
[data-theme='light'] .cb-label {
    color: rgba(var(--accent-deep-rgb), 0.6) !important;
}

/* Sub-nav active: violet accent */
.sub-nav a.active {
    color: var(--accent-primary, var(--accent-primary)) !important;
    border-bottom-color: var(--accent-primary, var(--accent-primary)) !important;
}
[data-theme='light'] .sub-nav a.active {
    color: var(--blue-deep) !important;
    border-bottom-color: var(--blue-deep) !important;
}

/* ═══ LIGHT MODE READABILITY FIX ═══ */
/* Body text stays dark/readable in light mode */
[data-theme='light'] .section-header p,
[data-theme='light'] .section-desc,
[data-theme='light'] .hero-sub,
[data-theme='light'] .study-desc,
[data-theme='light'] .card-body p {
    color: rgba(0, 0, 0, 0.6) !important;
}
[data-theme='light'] .study-title,
[data-theme='light'] .card-body h3,
[data-theme='light'] h3 {
    color: #0c0f1a !important;
}
/* Study card in light mode */
[data-theme='light'] .study-card {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme='light'] .study-card:hover {
    border-color: rgba(var(--accent-deep-rgb), 0.25) !important;
    box-shadow: 0 16px 40px rgba(var(--accent-deep-rgb), 0.08) !important;
}
/* Study card title on hover: violet only in dark mode */
[data-theme='light'] .study-card:hover .study-title {
    color: var(--accent-deep) !important;
    -webkit-text-fill-color: unset !important;
    background: none !important;
}
/* EXPLORE STUDY link in light mode */
[data-theme='light'] .study-btn {
    color: rgba(0, 0, 0, 0.5) !important;
}
[data-theme='light'] .study-card:hover .study-btn {
    color: var(--blue-deep) !important;
}
/* Filter pills in light mode */
[data-theme='light'] .filter-pill {
    color: rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}
[data-theme='light'] .filter-pill.active {
    background: rgba(var(--accent-deep-rgb), 0.08) !important;
    color: var(--accent-deep) !important;
    border-color: rgba(var(--accent-deep-rgb), 0.2) !important;
    box-shadow: none !important;
}
[data-theme='light'] .filter-pill:hover {
    color: var(--accent-deep) !important;
}
/* Expand button in light mode */
[data-theme='light'] .expand-grid-btn {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(0, 0, 0, 0.55) !important;
}
[data-theme='light'] .expand-grid-btn:hover {
    color: var(--accent-deep) !important;
    border-color: rgba(var(--accent-deep-rgb), 0.3) !important;
    background: rgba(var(--accent-deep-rgb), 0.04) !important;
}
/* Global page link in light mode */
[data-theme='light'] .global-page-link {
    color: rgba(0, 0, 0, 0.45) !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
[data-theme='light'] .global-page-link:hover {
    color: rgba(0, 0, 0, 0.75) !important;
    border-bottom-color: rgba(0, 0, 0, 0.25) !important;
}
/* Showcase card in light mode */
[data-theme='light'] .showcase {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme='light'] .showcase:hover {
    border-color: rgba(var(--accent-deep-rgb), 0.15) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06) !important;
}

/* ═══ GLOBAL CTA LINK — LIGHT MODE FIX ═══ */
[data-theme='light'] .global-page-link {
    color: rgba(0, 0, 0, 0.45) !important;
    border-bottom-color: rgba(0, 0, 0, 0.12) !important;
}
[data-theme='light'] .global-page-link:hover {
    color: rgba(0, 0, 0, 0.7) !important;
    border-bottom-color: rgba(0, 0, 0, 0.25) !important;
}


/* ═══ LIGHT MODE: COMPLETE READABILITY OVERHAUL ═══ */

/* FIX 1: TAG PILLS — solid dark background, white text for max contrast */
[data-theme='light'] .tag,
[data-theme='light'] .study-tag {
    background: var(--accent-deep) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}
/* Dark mode tags \u2014 translucent accent, readable on dark bg */
.tag {
    background: rgba(var(--accent-primary-rgb), 0.15) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(var(--accent-primary-rgb), 0.3) !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

.study-tag {
    background: rgba(10, 15, 26, 0.85) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(var(--accent-primary-rgb), 0.3) !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* FIX 2: SHOWCASE TEXT — white text with dark glow (proven approach from old code) */
/* sc-overlay now uses dark gradient universally — disable light-mode white overlay */
[data-theme='light'] .sc-overlay {
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.7) 100%) !important;
}
[data-theme='light'] .sc-overlay h3.sc-project-name,
[data-theme='light'] h3.sc-project-name,
[data-theme='light'] .sc-project-name {
    color: #ffffff !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.4) !important;
}
[data-theme='light'] .sc-number {
    color: rgba(255, 255, 255, 0.15) !important;
}
/* DI banner title - always white with dark glow */
[data-theme='light'] .di-banner-title {
    color: #ffffff !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.4) !important;
}

/* Tangible Outcomes heading readability */
[data-theme='light'] .sc-outcomes-header h5 {
    color: var(--accent-deep) !important;
}
[data-theme='dark'] .sc-outcomes-header h5 {
    color: var(--accent-primary) !important;
}
/* Outcome item text readability */
[data-theme='light'] .soi-title {
    color: #0c0f1a !important;
}
[data-theme='light'] .soi-desc {
    color: rgba(0, 0, 0, 0.55) !important;
}

/* ═══ IMPROVED CTA BANNER ═══ */
/* Refine the bottom CTA in dark mode */
.cta-banner {
    background: linear-gradient(135deg, var(--accent-darkest) 0%, var(--c1) 40%, var(--blue-deep) 70%, var(--c2) 100%) !important;
    border: 1px solid rgba(var(--accent-primary-rgb), 0.2) !important;
    box-shadow: 0 20px 60px rgba(var(--accent-deep-rgb), 0.2) !important;
}
.cta-banner h2 {
    color: #fff !important;
    -webkit-text-fill-color: unset !important;
    background: none !important;
}
.cta-banner p {
    color: rgba(255, 255, 255, 0.7) !important;
}
.cta-banner .btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}
.cta-banner .btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}
/* Light mode CTA */
[data-theme='light'] .cta-banner {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 30%, #c7d2fe 60%, #ddd6fe 100%) !important;
    border: 1px solid rgba(var(--accent-deep-rgb), 0.15) !important;
    box-shadow: 0 20px 60px rgba(var(--accent-deep-rgb), 0.08) !important;
}
[data-theme='light'] .cta-banner h2 {
    color: var(--accent-darkest) !important;
}
[data-theme='light'] .cta-banner p {
    color: rgba(0, 0, 0, 0.55) !important;
}
[data-theme='light'] .cta-banner .btn {
    background: var(--accent-deep) !important;
    border: none !important;
    color: #fff !important;
}
[data-theme='light'] .cta-banner .btn:hover {
    background: var(--accent-dark) !important;
    box-shadow: 0 8px 25px rgba(var(--accent-deep-rgb), 0.25) !important;
}

/* ═══ DI BANNER TITLE (Digital Transformation) LIGHT MODE ═══ */
[data-theme='light'] .di-banner-overlay {
    background: linear-gradient(0deg, rgba(255,255,255,0.95) 0%, transparent 60%) !important;
}
[data-theme='light'] .di-banner-title {
    color: #0c0f1a !important;
}

/* =========================================================================
   HEADER & FOOTER PROTECTION - GLOBAL BRAND BLAST SHIELD
   Forces the header and footer to always use homepage brand-default values,
   completely immune to any :root overrides from this file or theme files.
   ========================================================================= */
#global-header, #mainNav {
  /* Light mode defaults from style.css */
  --blue-core: #0a58ca !important;
  --blue-core-rgb: 10, 88, 202 !important;
  --blue-deep: #1a3a7a !important;
  --blue-deep-rgb: 26, 58, 122 !important;
  --accent-primary: #0a58ca !important;
  --accent-primary-rgb: 10, 88, 202 !important;
  --accent-primary-soft: rgba(10, 88, 202, 0.08) !important;
  --accent-primary-glow: rgba(10, 88, 202, 0.25) !important;
  --accent-violet: #7c3aed !important;
  --accent-secondary: #0a58ca !important;
  --accent-gradient: linear-gradient(135deg, #1a3a7a 0%, #0a58ca 40%, #0a58ca 100%) !important;
  --text-heading: #0c0f1a !important;
  --text-body: #3a3f54 !important;
  --text-muted: #727891 !important;
  --text-white: #ffffff !important;
  --glass-bg: rgba(255, 255, 255, 0.55) !important;
  --glass-bg-strong: rgba(255, 255, 255, 0.78) !important;
  --glass-border: 1px solid rgba(255, 255, 255, 0.7) !important;
  --glass-border-subtle: 1px solid rgba(0, 0, 0, 0.06) !important;
  --backdrop-blur-heavy: blur(40px) !important;
}

[data-theme="dark"] #global-header, [data-theme="dark"] #mainNav {
  --blue-core: #0a58ca !important;
  --blue-core-rgb: 10, 88, 202 !important;
  --accent-primary: #38bdf8 !important;
  --accent-primary-rgb: 56, 189, 248 !important;
  --accent-primary-soft: rgba(56, 189, 248, 0.08) !important;
  --accent-primary-glow: rgba(56, 189, 248, 0.25) !important;
  --accent-violet: #a78bfa !important;
  --accent-gradient: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
  --text-heading: #ffffff !important;
  --text-body: rgba(255, 255, 255, 0.8) !important;
  --text-muted: rgba(255, 255, 255, 0.45) !important;
  --glass-bg-strong: rgba(0, 0, 0, 0.95) !important;
  --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#global-footer {
  --blue-core: #0a58ca !important;
  --accent-primary: #0a58ca !important;
  --accent-primary-rgb: 10, 88, 202 !important;
  --accent-gradient: linear-gradient(135deg, #1a3a7a 0%, #0a58ca 40%, #0a58ca 100%) !important;
  --text-heading: #0c0f1a !important;
  --text-body: #3a3f54 !important;
  --text-muted: #727891 !important;
  --text-white: #ffffff !important;
}

[data-theme="dark"] #global-footer {
  --accent-primary: #38bdf8 !important;
  --accent-primary-rgb: 56, 189, 248 !important;
  --accent-gradient: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
  --text-heading: #ffffff !important;
  --text-body: rgba(255, 255, 255, 0.8) !important;
  --text-muted: rgba(255, 255, 255, 0.45) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER COMPONENT PROTECTION - CTA Button & Theme Toggle
   Hardcoded styles to guarantee homepage parity on all pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* CTA Button - Light Mode */
#global-header .btn-primary, #mainNav .btn-primary {
  background: linear-gradient(135deg, #1a3a7a 0%, #0a58ca 40%, #0a58ca 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(10, 88, 202, 0.25) !important;
  border: none !important;
  border-radius: 8px !important;
}

#global-header .btn-primary:hover, #mainNav .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(10, 88, 202, 0.35) !important;
  color: #ffffff !important;
}

/* CTA Button - Dark Mode */
[data-theme="dark"] #global-header .btn-primary, [data-theme="dark"] #mainNav .btn-primary {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.25) !important;
}

[data-theme="dark"] #global-header .btn-primary:hover, [data-theme="dark"] #mainNav .btn-primary:hover {
  box-shadow: 0 8px 25px rgba(56, 189, 248, 0.35) !important;
}

/* Theme Toggle - Force Segmented Style */
#global-header .theme-toggle, #mainNav .theme-toggle {
  background: rgba(0, 0, 0, 0.04) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 4px !important;
  display: flex !important;
  gap: 4px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="dark"] #global-header .theme-toggle, [data-theme="dark"] #mainNav .theme-toggle {
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}


/* ---------------------------------------------------------------------------
   STICKY SUB-NAV PROTECTION � Standardized Blue Accent
   Forces the sticky navigation to always use brand-blue regardless of
   industry theme. Prevents theme color leakage in dark mode.
   --------------------------------------------------------------------------- */

/* --- Primary Sticky Sub-Nav --- */
.sub-nav-link:hover { color: #0a58ca !important; }
.sub-nav-link.active { color: #0a58ca !important; }
.sub-nav-link.active::after {
  background: #0a58ca !important;
  box-shadow: 0 0 8px rgba(10, 88, 202, 0.4) !important;
}

[data-theme='light'] .sub-nav-link.active { color: #1a3a7a !important; }
[data-theme='light'] .sub-nav-link.active::after {
  background: #1a3a7a !important;
  box-shadow: 0 0 8px rgba(26, 58, 122, 0.4) !important;
}

[data-theme='dark'] .sub-nav-link:hover { color: #38bdf8 !important; }
[data-theme='dark'] .sub-nav-link.active { color: #38bdf8 !important; }
[data-theme='dark'] .sub-nav-link.active::after {
  background: #38bdf8 !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4) !important;
}

/* --- Secondary Context Sub-Nav --- */
[data-theme='light'] .context-nav-link:hover {
  color: #1a3a7a !important;
  background: rgba(26, 58, 122, 0.05) !important;
}
.context-nav-link.active { color: #0a58ca !important; }
.context-nav-link.active::after {
  background: #0a58ca !important;
  box-shadow: 0 0 8px rgba(10, 88, 202, 0.4) !important;
}
[data-theme='light'] .context-nav-link.active { color: #1a3a7a !important; }
[data-theme='light'] .context-nav-link.active::after {
  background: #1a3a7a !important;
  box-shadow: 0 0 8px rgba(26, 58, 122, 0.4) !important;
}
[data-theme='dark'] .context-nav-link:hover { color: #38bdf8 !important; }
[data-theme='dark'] .context-nav-link.active { color: #38bdf8 !important; }
[data-theme='dark'] .context-nav-link.active::after {
  background: #38bdf8 !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4) !important;
}