/* =========================================================================
   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&family=JetBrains+Mono:wght@400;500;600;700;800&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 */
  --blue-core: #0a58ca;
  /* Core cobalt - primary buttons & links */
  --blue-bright: #3b82f6;
  /* Bright blue - secondary elements */
  --blue-sky: #60a5fa;
  /* Sky blue - highlights, tags, badges */

  /* Primary uses core cobalt blue */
  --accent-primary: var(--blue-core);
  --accent-primary-soft: rgba(10, 88, 202, 0.08);
  --accent-primary-glow: rgba(10, 88, 202, 0.25);

  /* Secondary: Electric Purple (complements the blue family) */
  --accent-secondary: #7c3aed;
  --accent-secondary-soft: rgba(124, 58, 237, 0.08);

  /* Tertiary: Deep Teal (the cool counterpoint) */
  --accent-tertiary: #0d9488;
  --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: #38bdf8;
  --p3-accent-purple: #a78bfa;

  /* Gradients - built from the blue spectrum */
  --accent-gradient: linear-gradient(135deg,
      var(--blue-deep) 0%,
      var(--blue-core) 40%,
      var(--blue-bright) 100%);
  --accent-gradient-vivid: linear-gradient(135deg,
      #0a58ca 0%,
      #6366f1 50%,
      #a855f7 100%);
  --accent-gradient-cool: linear-gradient(135deg,
      #0d9488 0%,
      #3b82f6 50%,
      #7c3aed 100%);
  --accent-gradient-warm: linear-gradient(135deg, #f97316 0%, #fb923c 100%);

  /* Multi-accent palette for card/section variety */
  --accent-teal: #0d9488;
  --accent-teal-soft: rgba(13, 148, 136, 0.08);
  --accent-emerald: #059669;
  --accent-emerald-soft: rgba(5, 150, 105, 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: #7c3aed;
  --accent-violet-soft: rgba(124, 58, 237, 0.08);
  --accent-indigo: #4f46e5;
  --accent-indigo-soft: rgba(79, 70, 229, 0.08);

  /* Mesh gradient blobs - subtle on light */
  --mesh-blue: rgba(10, 88, 202, 0.08);
  --mesh-purple: rgba(124, 58, 237, 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: clamp(2.5rem, 5vw, 7rem);
  --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: "JetBrains Mono", monospace;

  /* Apple-native timing functions */
  --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --ease-apple-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-apple-spring: cubic-bezier(0.22, 1, 0.36, 1);

  /* Color scheme - tells browser chrome to match */
  color-scheme: light dark;
}

/* =========================================================================
   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: #000000;
  --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 - Blue/Cyan focus */
  --accent-primary: #38bdf8;
  --accent-primary-soft: rgba(56, 189, 248, 0.1);
  --accent-primary-glow: rgba(56, 189, 248, 0.3);
  --accent-secondary: #38bdf8;
  --accent-secondary-soft: rgba(56, 189, 248, 0.1);
  --accent-tertiary: #10b981;
  --accent-tertiary-soft: rgba(16, 185, 129, 0.1);

  /* Gradients - Monochrome or Cyan-focused only */
  --accent-gradient: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
  --accent-gradient-vivid: linear-gradient(135deg, #0ea5e9 0%, #34d399 100%);

  /* Mesh Blobs - DEAD. */
  --mesh-blue: rgba(0, 0, 0, 0);
  --mesh-purple: rgba(0, 0, 0, 0);
  --mesh-teal: rgba(0, 0, 0, 0);

  /* Color scheme - tells Safari/macOS to render dark chrome */
  color-scheme: dark;
}

[data-theme="light"] {
  color-scheme: light;
}

/* ===================== BRAND LOCKUP TYPOGRAPHY ===================== */
/* Divider colors per theme */
[data-theme="dark"] .brand-divider {
  background-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .brand-subtext .line-1 {
  color: #ffffff;
}

[data-theme="light"] .brand-divider {
  background-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .brand-subtext .line-1 {
  color: #0f172a;
}

/* Dark mode logo: Full Invert for maximum contrast on #000 black */
[data-theme="dark"] .brand-logo {
  filter: invert(1) hue-rotate(180deg) brightness(1.15);
}

/* No hover effects on brand - should feel like a static PNG */
.brand:hover .brand-logo {
  filter: none; /* light mode: no effect */
}
[data-theme="dark"] .brand:hover .brand-logo {
  filter: invert(1) hue-rotate(180deg) brightness(1.15); /* same as resting */
}
.brand {
  cursor: pointer;
}

/* Footer logo inherits the same dark-mode filter */
[data-theme="dark"] .footer-brand-logo .brand-logo {
  filter: invert(1) hue-rotate(180deg) brightness(1.15);
}


[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);
}

/* ===================== PREMIUM MICRO-DETAILS ===================== */

/* Custom Scrollbar - macOS-style: ultra-thin, floats over content */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 100px;
  border: 3px solid transparent;  /* Creates inner padding - thumb floats */
  background-clip: padding-box;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border: 3px solid transparent;
  background-clip: padding-box;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid transparent;
  background-clip: padding-box;
}
/* Firefox - thin scrollbar */
html { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.12) transparent; }
[data-theme="dark"] { scrollbar-color: rgba(255, 255, 255, 0.08) transparent; }

/* Custom Text Selection - Brand blue instead of default */
::selection { background: rgba(10, 88, 202, 0.2); color: var(--text-heading); }
[data-theme="dark"] ::selection { background: rgba(56, 189, 248, 0.25); color: #ffffff; }




/* Network-Aware - On slow connections, hide autoplay videos */
.asi-slow-network video[data-autoplay] { display: none; }
.asi-slow-network img { image-rendering: auto; }

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

html, body {
  /* 'clip' hides horizontal overflow WITHOUT creating a scroll container.
     'hidden' creates one, which breaks position:sticky on ALL descendants. */
  overflow-x: clip;
  width: 100%;
}

img, video, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
}

p, h1, h2, h3, h4, h5, h6, a, span {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===================== SMOOTH THEME TRANSITION ===================== */
/* Uses the View Transitions API for a GPU-accelerated crossfade.
   The browser captures a screenshot of the old state, switches the theme
   instantly underneath, then dissolves the screenshot away. Zero jank. */

::view-transition-old(root) {
  animation: theme-fade-out 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
  animation: theme-fade-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes theme-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes theme-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fallback overlay for browsers without View Transitions API */
.theme-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-transition-overlay.active {
  opacity: 1;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* Offset for fixed header - anchors don't hide behind nav */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Reduced Motion - Respect user accessibility preferences ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Premium Focus Rings - Clean, branded, keyboard-only ── */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) {
  outline: none; /* Hide focus ring on mouse click */
}

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: clip; /* clip, not hidden - hidden creates a scroll container that breaks position:sticky */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; /* Better kerning & ligatures on macOS */
  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(3rem, 5vw, 4.5rem);
}

h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
}

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

h4 {
  font-size: 1.05rem;
}

/* Heading visual-override utilities - when the HTML tag changes for
   accessibility but the visual size must stay the same */
.h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem) !important; }
.h5 { font-size: 0.95rem !important; font-weight: 700 !important; }

/* Footer column headings - semantic divs styled like the old h4 tags */
.footer-heading {
  color: var(--text-white);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
}
.tscc-heading {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heading);
}
[data-theme="dark"] .footer-heading { color: rgba(255, 255, 255, 0.9); }
[data-theme="light"] .footer-heading { color: var(--text-heading); }

/* ── Mobile & Tablet font-size floor & overflow safeguards ── */

/* Tablet + Mobile: Hard 10px floor for ALL text on touch devices.
   Targets only leaf-text elements (no children) to avoid cascading issues.
   Uses a script-injected [data-mobile-floor] attribute OR media query. */

@media (max-width: 1024px) {
  /* Sub-nav links: ensure readability on smaller screens */
  .sub-nav-link { font-size: max(0.7rem, 11px) !important; }
  .eyebrow { font-size: max(0.75rem, 11px) !important; }
}

@media (max-width: 768px) {
  .sub-nav-link { font-size: max(0.65rem, 10.5px) !important; }
  .eyebrow { font-size: max(0.7rem, 11px) !important; }
  .mf-cin,
  .footer-bottom span[style*="font-size"] { font-size: max(0.7rem, 10.5px) !important; }
}

/* Phone breakpoint (≤ 480px) */
@media (max-width: 480px) {
  body { font-size: max(1rem, 14px); }
  .footer-heading { font-size: max(0.8rem, 11px); }
  .sub-nav-link { font-size: max(0.6rem, 10px) !important; letter-spacing: 0 !important; }
  .eyebrow { font-size: max(0.65rem, 10px) !important; }
  .mf-cin,
  .footer-bottom span[style*="font-size"] { font-size: max(0.65rem, 10px) !important; }
  section, main, .container, .container-hook { overflow-x: clip; }
}

p {
  max-width: 680px;
}

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

/* ===================== LAYOUT - STANDARDIZED CONTAINER SYSTEM ===================== */

/* .container - Padded & centered. Used for all regular content sections.
   Content is limited to 1600px max and centered on large screens. */
.container {
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding, var(--page-padding));
  padding-right: var(--container-padding, var(--page-padding));
}

/* .container-hook - Full-width with padding. Used for hero sections,
   client marquees, and sticky navs that stretch edge-to-edge. */
.container-hook {
  width: 100%;
  max-width: none;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

/* .container-full - True full-bleed, zero padding.
   Used for background videos, full-width images, etc. */
.container-full {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Legacy alias - maps to container-hook */
.container-wide {
  width: 100%;
  max-width: none;
  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: 1rem;
  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.1rem;
  color: var(--text-muted);
  max-width: 600px;
  line-height: 1.6;
  margin-bottom: 3rem;
  z-index: 2;
  position: relative;
}

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

[data-theme="dark"] .highlight {
  color: var(--blue-sky);
}


/* =========================================================================
   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(20px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.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 - Frosted Glass Floating Bar
   ========================================================================= */
.vault-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 0.8rem 0;
  transition: all 0.4s ease;
  overflow: visible;
  /* allow full-width dropdown to escape */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.vault-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  transition: all 0.4s ease;
  pointer-events: none;
  transform: translateZ(0);
  will-change: backdrop-filter, background;
}

.vault-nav.scrolled::before,
.vault-nav:hover::before,
.vault-nav:focus-within::before {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.78) 100%);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}

.vault-nav:has(.nav-dropdown.active)::before {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.78) 100%);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.vault-nav.scrolled {
  padding: 0;
}

.vault-nav.scrolled .nav-inner {
  height: 72px;
}

.vault-nav.scrolled .brand-logo {
  height: 44px !important;
}

.nav-inner {
  width: 100%; /* Extreme edge-to-edge alignment */
  margin: 0;
  padding: 0 4rem; /* Safe but generous side gutter */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 96px;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-left {
  display: flex;
  justify-content: flex-start;
}

.nav-center {
  display: flex;
  justify-content: center;
}

.nav-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5rem;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  text-decoration: none;
}

.brand-logo {
  height: 56px !important;
  width: auto !important;
  display: block !important;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-divider {
  display: block;
  width: 1px;
  height: 38px;
  transition: background-color 0.4s;
}

.brand-subtext {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}

.brand-subtext .line-1 {
  font-family: var(--font-headline);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: color 0.3s;
}

.brand-subtext .line-2 {
  font-family: var(--font-headline);
  font-size: 0.9rem;
  font-weight: 800;
  color: #00e5ff; /* Exact Electric Marine Cyan from Image 2 */
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Nav Menu */
.menu-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.menu-links .nav-link {
  padding: 0.65rem 1.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.menu-links .nav-link:hover,
.menu-links .nav-link.active {
  color: var(--accent-primary);
  background: rgba(0, 0, 0, 0.03);
  transform: translateY(-1px);
}

[data-theme="dark"] .menu-links .nav-link:hover,
[data-theme="dark"] .menu-links .nav-link.active {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

/* Nav CTA */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

/* =========================================================================
   MEGA DROPDOWN - Refined v2 (Logo-Centric & Dense)
   ========================================================================= */

/* The nav-dropdown wrapper */
.nav-dropdown {
  position: static;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Active indicator DOT (Center-aligned) */
.nav-dropdown:hover .nav-link::after,
.nav-dropdown.active .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0px; 
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: var(--accent-primary);
  border-radius: 50%;
  opacity: 1;
  box-shadow: 0 0 12px var(--accent-primary-glow);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: var(--accent-primary);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Chevron */
.nav-chevron {
  font-size: 0.6em;
  margin-left: 4px;
  transition: transform 0.3s ease;
  opacity: 0.5;
}

.nav-dropdown:hover .nav-chevron,
.nav-dropdown.active .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--accent-primary);
}

/* =====================================================================
   THE PANEL - Full viewport width, anchored below the vault-nav bar
   ===================================================================== */
.mega-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100vw;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
  transition: opacity 0.15s ease-out;
}

.nav-dropdown.active .mega-dropdown,
.nav-dropdown:focus-within .mega-dropdown {
  opacity: 1;
  pointer-events: auto;
}

.mega-dropdown-inner {
  width: 100%;
  padding: 2.5rem 5rem;
  /* Perfect gradient continuation from light mode header */
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.68) 100%);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-top: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.04);
  clip-path: inset(0px -200px -200px -200px); /* Prevents shadow bleeding upwards into the header */
  position: relative;
}

[data-theme="dark"] .mega-dropdown-inner {
  /* Perfect gradient continuation from dark mode header */
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.00) 100%);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border-top: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.7),
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .vault-nav.scrolled::before,
[data-theme="dark"] .vault-nav:hover::before,
[data-theme="dark"] .vault-nav:focus-within::before {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 4px 40px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .vault-nav:has(.nav-dropdown.active)::before {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* SMART TV & LEGACY BROWSER FALLBACKS */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vault-nav.scrolled::before,
  .vault-nav:hover::before,
  .vault-nav:focus-within::before {
    background: rgba(255, 255, 255, 0.98) !important;
  }
  .vault-nav:has(.nav-dropdown.active)::before {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid transparent !important;
  }
  .mega-dropdown-inner {
    background: rgba(255, 255, 255, 0.98) !important;
  }
  [data-theme="dark"] .vault-nav.scrolled::before,
  [data-theme="dark"] .vault-nav:hover::before,
  [data-theme="dark"] .vault-nav:focus-within::before {
    background: rgba(10, 15, 26, 0.95) !important;
  }
  [data-theme="dark"] .vault-nav:has(.nav-dropdown.active)::before {
    background: rgba(10, 15, 26, 0.95) !important;
    border-bottom: 1px solid transparent !important;
  }
  [data-theme="dark"] .mega-dropdown-inner {
    background: rgba(10, 15, 26, 0.98) !important;
  }
}

/* =========================================================================
   HOMEPAGE HERO - Dark-mode header override for light mode
   =========================================================================
   Activated by JS class .hero-dark-header on homepage hero section only.
   Mirrors dark-mode header styling exactly.
   Logo (.brand-logo) and brand text (.brand-subtext) are NOT touched.
   ========================================================================= */

/* -- Prevent dark-mode logo invert flash on homepage in light mode (CSS-only, instant) -- */
:root:not([data-theme="dark"]) body:has(.hp-hero) .brand-logo,
:root:not([data-theme="dark"]) body:has(.hp-hero) .m-brand-logo {
  filter: none !important;
}

/* -- Force original logo (no dark-mode invert filter) -- */
.vault-nav.hero-dark-header .brand-logo {
  filter: none !important;
}

/* -- Dark mode: original logo in hero section (homepage only) -- */
.vault-nav.hero-original-logo .brand-logo,
.mobile-nav.hero-original-logo .m-brand-logo {
  filter: none !important;
}


/* -- Override CSS variables to dark-mode values on the nav -- */
.vault-nav.hero-dark-header {
  --accent-primary: #38bdf8;
  --accent-primary-soft: rgba(56, 189, 248, 0.1);
  --accent-primary-glow: rgba(56, 189, 248, 0.3);
  --accent-secondary: #38bdf8;
  --accent-secondary-soft: rgba(56, 189, 248, 0.1);
  --text-heading: #ffffff;
  --text-body: rgba(255, 255, 255, 0.8);
  --text-muted: rgba(255, 255, 255, 0.45);
  --accent-gradient: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
  --blue-core: #38bdf8;
}

/* -- Nav bar glass (hover / scrolled / focus-within) -- */
.vault-nav.hero-dark-header.scrolled::before,
.vault-nav.hero-dark-header:hover::before,
.vault-nav.hero-dark-header:focus-within::before {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.03) 100%) !important;
  backdrop-filter: blur(40px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 4px 40px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02) !important;
}
.vault-nav.hero-dark-header:has(.nav-dropdown.active)::before {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.03) 100%) !important;
  backdrop-filter: blur(40px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  border-bottom: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* -- Nav link text -- */
.vault-nav.hero-dark-header .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
}
.vault-nav.hero-dark-header .nav-link:hover {
  color: #ffffff !important;
}
.vault-nav.hero-dark-header .nav-chevron {
  color: rgba(255, 255, 255, 0.4) !important;
}
.vault-nav.hero-dark-header .nav-dropdown.active .nav-link::after {
  background: var(--accent-primary) !important;
}

/* -- CTA button (dark-mode gradient + glow) -- */
.vault-nav.hero-dark-header .btn-primary {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
  color: #fff !important;
  box-shadow:
    0 4px 20px rgba(77, 159, 255, 0.25),
    0 0 0 1px rgba(77, 159, 255, 0.1) inset !important;
}
.vault-nav.hero-dark-header .btn-primary:hover {
  box-shadow:
    0 8px 30px rgba(77, 159, 255, 0.35),
    0 0 0 1px rgba(77, 159, 255, 0.15) inset !important;
}

/* -- Theme toggle -- */
.vault-nav.hero-dark-header .theme-toggle {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.vault-nav.hero-dark-header .theme-slide-bg {
  background: rgba(255, 255, 255, 0.06) !important;
}
.vault-nav.hero-dark-header .theme-seg.sun {
  color: rgba(255, 255, 255, 0.5) !important;
}
.vault-nav.hero-dark-header .theme-seg.moon {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* -- Mega dropdown panel -- */
.vault-nav.hero-dark-header .mega-dropdown-inner {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.00) 100%) !important;
  backdrop-filter: blur(40px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.7),
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02) !important;
  position: relative;
}
.vault-nav.hero-dark-header .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;
}

/* -- Dropdown text & items -- */
.vault-nav.hero-dark-header .mega-col-title {
  color: rgba(255, 255, 255, 0.4) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
.vault-nav.hero-dark-header .mega-item-name {
  color: rgba(255, 255, 255, 0.9) !important;
}
.vault-nav.hero-dark-header .mega-item-desc {
  color: rgba(255, 255, 255, 0.4) !important;
}
.vault-nav.hero-dark-header .mega-item:hover {
  background: rgba(77, 159, 255, 0.08) !important;
}
.vault-nav.hero-dark-header .mega-item-icon {
  background: rgba(77, 159, 255, 0.1) !important;
  color: var(--accent-primary) !important;
}
.vault-nav.hero-dark-header .mega-item:hover .mega-item-icon {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(77, 159, 255, 0.3) !important;
}
.vault-nav.hero-dark-header .mega-col-highlight {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* -- Brand text (COST ENGINEERING) - white for readability on dark glass -- */
.vault-nav.hero-dark-header .brand-subtext .line-1 {
  color: #ffffff !important;
}
.vault-nav.hero-dark-header .brand-divider {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* -- Industries dropdown (actual classes: .i-title, .i-subtitle, .i-icon-box) -- */
.vault-nav.hero-dark-header .i-title {
  color: rgba(255, 255, 255, 0.9) !important;
}
.vault-nav.hero-dark-header .i-subtitle {
  color: rgba(255, 255, 255, 0.4) !important;
}
.vault-nav.hero-dark-header .i-icon-box {
  color: rgba(255, 255, 255, 0.7) !important;
}
.vault-nav.hero-dark-header .industry-item:hover .i-icon-box {
  color: var(--accent-primary) !important;
}

/* -- About Us dropdown (actual classes: .e-title, .e-desc, .e-icon) -- */
.vault-nav.hero-dark-header .e-title {
  color: rgba(255, 255, 255, 0.9) !important;
}
.vault-nav.hero-dark-header .e-desc {
  color: rgba(255, 255, 255, 0.5) !important;
}
.vault-nav.hero-dark-header .e-icon {
  color: rgba(255, 255, 255, 0.7) !important;
}
.vault-nav.hero-dark-header .elegant-item::before {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* -- Technology dropdown (actual classes: .p-title, .p-desc, .product-logo) -- */
.vault-nav.hero-dark-header .p-desc {
  color: rgba(255, 255, 255, 0.5) !important;
}
.vault-nav.hero-dark-header .product-logo {
  filter: invert(1) hue-rotate(180deg) brightness(1.2) !important;
  opacity: 0.8 !important;
}
.vault-nav.hero-dark-header .product-card:hover .product-logo {
  opacity: 1 !important;
  filter: invert(1) hue-rotate(180deg) brightness(1.5) drop-shadow(0 0 15px rgba(255,255,255,0.2)) !important;
}
.vault-nav.hero-dark-header .tech-col:not(:last-child)::after {
  background: rgba(255, 255, 255, 0.06) !important;
}
.vault-nav.hero-dark-header .shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
}

/* -- Mobile nav -- */
.mobile-nav.hero-dark-header {
  --accent-primary: #38bdf8;
  --accent-primary-soft: rgba(56, 189, 248, 0.1);
  --accent-primary-glow: rgba(56, 189, 248, 0.3);
  --text-heading: #ffffff;
  --text-body: rgba(255, 255, 255, 0.8);
  --text-muted: rgba(255, 255, 255, 0.45);
  background: rgba(10, 15, 26, 0.85) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
.mobile-nav.hero-dark-header.scrolled {
  background: rgba(10, 15, 26, 0.92) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
/* -- Logo: show original (no invert) -- */
.mobile-nav.hero-dark-header .m-brand-logo {
  filter: none !important;
}
/* -- Brand text: white for readability on dark glass -- */
.mobile-nav.hero-dark-header .m-brand-line1 {
  color: #ffffff !important;
}
.mobile-nav.hero-dark-header .m-brand-line2 {
  color: #00e5ff !important;
}
.mobile-nav.hero-dark-header .m-brand-divider {
  background: rgba(255, 255, 255, 0.15) !important;
}
/* -- Theme toggle + hamburger -- */
.mobile-nav.hero-dark-header .m-theme-toggle {
  color: rgba(255, 255, 255, 0.7) !important;
}
.mobile-nav.hero-dark-header .m-theme-icon-sun,
.mobile-nav.hero-dark-header .m-theme-icon-moon {
  color: rgba(255, 255, 255, 0.8) !important;
}
.mobile-nav.hero-dark-header .m-menu-toggle span {
  background: #ffffff !important;
}

/* ===================== TECHNOLOGY (LOGO-CENTRIC) ===================== */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1400px;
  margin: 0 auto;
}

.tech-col {
  padding: 0 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.tech-col:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.05), transparent);
}

[data-theme="dark"] .tech-col:not(:last-child)::after {
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.1), transparent);
}

.product-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover { transform: translateY(-8px); }

.logo-box {
  height: 48px; /* Reduced for height optimization (from 60px in v2) */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.product-logo {
  max-width: 130px; 
  max-height: 48px; 
  width: auto;
  height: auto;
  display: block;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.85;
}

/* Light Mode: Keep original colors, add subtle depth on hover */
[data-theme="light"] .product-logo {
  filter: none;
}

[data-theme="light"] .product-card:hover .product-logo {
  opacity: 1;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.12));
}

/* Dark Mode: Invert black text to white, then rotate hue to restore brand blues */
[data-theme="dark"] .product-logo {
  filter: invert(1) hue-rotate(180deg) brightness(1.2);
  opacity: 0.8;
}

[data-theme="dark"] .product-card:hover .product-logo {
  opacity: 1;
  filter: invert(1) hue-rotate(180deg) brightness(1.5) drop-shadow(0 0 15px rgba(255,255,255,0.2));
}

/* Shimmer Effect */
.shimmer {
  position: absolute;
  top: 0; left: -150%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
}

[data-theme="light"] .shimmer {
  background: linear-gradient(90deg, transparent, rgba(10, 88, 202, 0.1), transparent);
}

.product-card:hover .shimmer {
  left: 150%;
  transition: left 0.8s ease-in-out;
}

.p-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.p-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 220px;
}

/* Industry Grid - Zero Boundaries */
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1200px; margin: 0 auto; }

.industry-item { 
  text-decoration: none; display: flex; align-items: center; gap: 1.2rem; 
  padding: 1.2rem; border-radius: 16px; 
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
  position: relative; overflow: hidden;
}

.industry-item::before {
  content: ''; position: absolute; inset: 0; border-radius: 16px;
  background: var(--accent-primary-soft); opacity: 0;
  transition: opacity 0.4s ease; z-index: 0;
}

.industry-item:hover::before { opacity: 1; }
/* Spotlight Effect Base */
.industry-grid:hover .industry-item {
  opacity: 0.4;
  filter: grayscale(80%);
  transform: scale(0.98);
}

.industry-item:hover { 
  transform: scale(1.02) !important;
  opacity: 1 !important;
  filter: grayscale(0%) !important;
  z-index: 2;
}

.i-icon-box { 
  font-size: 1.8rem; color: var(--blue-core); 
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative; z-index: 1;
}

[data-theme="dark"] .i-icon-box { color: rgba(255, 255, 255, 0.7); }

.industry-item:hover .i-icon-box { 
  transform: scale(1.15) translateY(-2px); 
  color: var(--accent-primary);
  filter: drop-shadow(0 0 12px var(--accent-primary-glow));
}

.i-content { display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; transition: transform 0.4s; }

.i-title { 
  font-size: 1.1rem; font-weight: 700; color: var(--text-heading); 
  display: flex; align-items: center; gap: 0.5rem;
  transition: color 0.4s;
}

/* The Trailing Arrow (Now angled for velocity) */
.i-title::after {
  content: '↗'; opacity: 0; transform: translateX(-10px) translateY(2px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--accent-primary); font-size: 1.1rem;
  font-weight: 900;
}

.industry-item:hover .i-title { color: var(--text-heading); }
.industry-item:hover .i-title::after { opacity: 0.5; transform: translateX(0) translateY(2px); color: var(--i-accent, var(--accent-primary)); }
.industry-item:hover .i-content { transform: translateX(6px); }

/* Per-Industry Accent Colors - subtle: only icon gets color */
.industry-item:hover .i-icon-box { color: var(--i-accent, var(--accent-primary)); filter: drop-shadow(0 0 6px var(--i-glow, var(--accent-primary-glow))); }
.industry-item:hover::before { background: var(--i-soft, var(--accent-primary-soft)); }

.i-subtitle { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;
  transition: color 0.4s; }
.industry-item:hover .i-subtitle { color: var(--text-muted); opacity: 0.8; }

/* Elegant Grid - Zero Boundaries */
.elegant-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; max-width: 1400px; margin: 0 auto; }

.elegant-item { 
  text-decoration: none; display: flex; gap: 1.5rem; padding: 1.5rem; 
  border-radius: 20px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
  position: relative;
}

.elegant-item::before {
  content: ''; position: absolute; inset: 0; border-radius: 20px;
  background: rgba(0,0,0,0.03); opacity: 0;
  transition: opacity 0.4s ease; z-index: 0;
}
[data-theme="dark"] .elegant-item::before { background: rgba(255,255,255,0.03); }

.elegant-item:hover::before { opacity: 1; }
.elegant-grid:hover .elegant-item {
  opacity: 0.4;
  filter: grayscale(80%);
  transform: translateX(-4px);
}

.elegant-item:hover { 
  transform: translateX(12px) !important;
  opacity: 1 !important;
  filter: grayscale(0%) !important;
  z-index: 2;
}

.e-icon { 
  font-size: 1.8rem; color: var(--blue-core); 
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative; z-index: 1; margin-top: 0.2rem;
}

[data-theme="dark"] .e-icon { color: rgba(255,255,255,0.7); }

.elegant-item:hover .e-icon { 
  color: var(--accent-primary); 
  transform: scale(1.15) rotate(5deg) translateY(-2px);
  filter: drop-shadow(0 0 16px var(--accent-primary-glow));
}

.e-content { position: relative; z-index: 1; }

.e-title { 
  font-size: 1.15rem; font-weight: 700; color: var(--text-heading); margin-bottom: 0.3rem; 
  display: flex; align-items: center; gap: 0.5rem;
  transition: color 0.4s;
}

/* The Trailing Arrow */
.e-title::after {
  content: '↗'; opacity: 0; transform: translateX(-10px) translateY(2px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--accent-primary); font-size: 1.2rem;
  font-weight: 900;
}
.elegant-item:hover .e-title { color: var(--accent-primary); }
.elegant-item:hover .e-title::after { opacity: 1; transform: translateX(0) translateY(2px); }

/* Description Reveal on Hover */
.e-desc { 
  font-size: 0.85rem; color: var(--text-muted); line-height: 1.5;
  opacity: 0.5; max-height: 1.5em; overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.elegant-item:hover .e-desc {
  opacity: 1; max-height: 4em;
}

/* ===================== 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 - Glassmorphic */
.theme-hint {
  position: absolute;
  top: calc(100% + 15px);
  right: -8px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  color: rgba(255, 255, 255, 0.95);
  padding: 0.55rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 20px rgba(167, 139, 250, 0.06);
  z-index: 2001;
}

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

/* Arrow pointing up */
.theme-hint::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 20px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(15, 23, 42, 0.88);
}

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

.theme-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
}

/* Show tooltip on hover - but NOT when hint is active */
.theme-toggle:hover + .theme-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Suppress tooltip when hint bubble is showing */
.hint-active .theme-tooltip,
.hint-active .theme-toggle:hover + .theme-tooltip {
  opacity: 0 !important;
  visibility: hidden !important;
}

[data-theme="light"] .theme-tooltip {
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .theme-tooltip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}

/* When hero-dark-header is active (light mode on hero), force tooltip to dark style */
.vault-nav.hero-dark-header .theme-tooltip {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

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

[data-theme="dark"] .theme-hint::after {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* =========================================================================
   HERO SECTION - The Liquid Glass Gateway
   ========================================================================= */
.hero {
  position: relative;
  padding: 10rem 0 7rem;
  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);
  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: linear-gradient(135deg, #38bdf8, #a78bfa);
  /* The "Reality" gradient */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.1em;
  /* Fixes 'g' getting cut off */
  margin-bottom: -0.1em;
}

.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(10, 88, 202, 0.08);
  border-color: rgba(10, 88, 202, 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);
  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);
  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%;
}



/* =========================================================================
   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 BUTTON - SEGMENTED TABS
   Two-button selector with a sliding highlight plate
   ========================================================================= */
.theme-toggle {
  background: rgba(0, 0, 0, 0.04);
  border: none;
  border-radius: 12px;
  padding: 4px;
  display: flex;
  gap: 4px;
  position: relative;
  cursor: pointer;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Individual segment buttons */
.theme-seg {
  width: 36px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.9rem;
  z-index: 2;
  position: relative;
  transition: color 0.4s ease;
  color: #94a3b8 !important; /* Default inactive */
}

/* Force icon visibility in all contexts */
.theme-seg i {
  color: inherit !important;
}

/* The sliding highlight plate */
.theme-slide-bg {
  box-sizing: border-box;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 36px;
  height: 30px;
  border-radius: 8px;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.4s ease,
              box-shadow 0.4s ease;
  /* Light mode: plate on the left (sun) */
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Light mode: sun is active (warm gold) */
.theme-seg.sun {
  color: #f59e0b !important;
}

/* ── DARK MODE ── */
[data-theme="dark"] .theme-toggle {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .theme-toggle:hover {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Dark mode: slide plate to the right (moon) */
[data-theme="dark"] .theme-slide-bg {
  transform: translateX(40px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Dark mode: sun becomes inactive, moon lights up */
[data-theme="dark"] .theme-seg.sun {
  color: #475569 !important;
}

[data-theme="dark"] .theme-seg.moon {
  color: #38bdf8 !important;
}


/* =========================================================================
   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: #38bdf8;
  --accent-primary-soft: rgba(56, 189, 248, 0.1);
  --accent-primary-glow: rgba(56, 189, 248, 0.3);
  --accent-secondary: #38bdf8;
  --accent-secondary-soft: rgba(56, 189, 248, 0.1);
  --accent-tertiary: #10b981;
  --accent-tertiary-soft: rgba(16, 185, 129, 0.1);
  --accent-warm: #38bdf8;
  --accent-warm-soft: rgba(56, 189, 248, 0.1);

  /* Gradients - Monochrome or Cyan-focused only */
  --accent-gradient: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
  --accent-gradient-vivid: linear-gradient(135deg, #0ea5e9 0%, #34d399 100%);
  --accent-gradient-cool: linear-gradient(135deg, #06b6d4 0%, #38bdf8 50%, #0ea5e9 100%);
  --accent-gradient-warm: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);

  /* ===== MESH BLOBS - KILLED. Pure black canvas, no glow. ===== */
  --mesh-blue: rgba(0, 0, 0, 0);
  --mesh-purple: rgba(0, 0, 0, 0);
  --mesh-teal: rgba(0, 0, 0, 0);
  --mesh-orange: rgba(0, 0, 0, 0);

  /* 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: #a78bfa;
  --accent-violet-soft: rgba(167, 139, 250, 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");
}

/* ===== NAVIGATION - Dark frosted glass ===== */
/* Glass applied via ::before only (consistent with light mode, avoids double-blur) */
[data-theme="dark"] .vault-nav.scrolled {
   background: transparent;
}

[data-theme="dark"] .brand-monogram {
  color: var(--text-heading);
}

[data-theme="dark"] .brand-divider {
  background: rgba(255, 255, 255, 0.12);
}

/* Dark dropdown glass - consolidated at line ~766 above */

[data-theme="dark"] .mega-col-title {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .mega-item:hover {
  background: rgba(77, 159, 255, 0.08);
}

[data-theme="dark"] .mega-item-icon {
  background: rgba(77, 159, 255, 0.1);
  color: var(--accent-primary);
}

[data-theme="dark"] .mega-item:hover .mega-item-icon {
  background: var(--accent-primary);
  color: white;
  box-shadow: 0 0 20px rgba(77, 159, 255, 0.3);
}

[data-theme="dark"] .mega-col-highlight {
  background: rgba(255, 255, 255, 0.03);
}



/* ===== 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(77, 159, 255, 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(77, 159, 255, 0.06);
}

[data-theme="dark"] .glass-card::before {
  background: radial-gradient(circle,
      rgba(77, 159, 255, 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(77, 159, 255, 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(77, 159, 255, 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(77, 159, 255, 0.25),
    0 0 0 1px rgba(77, 159, 255, 0.1) inset;
}

[data-theme="dark"] .btn-primary:hover {
  box-shadow:
    0 8px 30px rgba(77, 159, 255, 0.35),
    0 0 0 1px rgba(77, 159, 255, 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(77, 159, 255, 0.06);
  border-color: rgba(77, 159, 255, 0.15);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(77, 159, 255, 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(77, 159, 255, 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(77, 159, 255, 0.08);
}

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

/* ===== FOOTER - Dark glass ===== */
[data-theme="dark"] .site-footer {
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.04);
}

/* ===== 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(77, 159, 255, 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(77, 159, 255, 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(77, 159, 255, 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(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.12);
}

[data-theme="dark"] .glass-card--violet:hover {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 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(77, 159, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.04) 50%,
      rgba(139, 92, 246, 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: #a78bfa;
  --accent-violet-soft: rgba(167, 139, 250, 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;
  }

  /* Header Visibility Switch */
  .vault-nav { display: none !important; }
  .mobile-nav { display: flex !important; }
}

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


  /* Layout adjustments moved to components or refined below */

  /* 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 is now handled by dynamic-padding.js */

  .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;
  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: 0;
  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 40%, var(--bg-white) 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: var(--text-heading);
  z-index: 1;
}

.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);
}

.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.88rem;
  color: var(--text-body);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.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.5rem;
  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, var(--accent-tertiary-soft), transparent);
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.sc-outcomes-header {
  padding: 0.7rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(52, 211, 153, 0.1);
  background: rgba(52, 211, 153, 0.03);
}

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

.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);
  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(16, 185, 129, 0.05);
  /* Green tint hover */
}

.soi-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: rgba(52, 211, 153, 0.1);
  color: var(--accent-tertiary);
  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: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--text-heading);
}

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

/* =========================================================
   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);
  margin-bottom: 4rem;
}

/* 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, var(--bg-white) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 3rem 4rem;
}

.di-banner-title {
  font-family: var(--font-headline);
  font-size: 2.5rem;
  font-weight: 700;
}

/* 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(167, 139, 250, 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(56, 189, 248, 0.15);
  /* cyan tint */
  border-radius: var(--radius-md);
  overflow: hidden;
}

.di-outcomes-header {
  padding: 1.2rem 2rem;
  border-bottom: 1px solid rgba(56, 189, 248, 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: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
  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-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(124, 58, 237, 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(56, 189, 248, 0.5) 20%,
      rgba(167, 139, 250, 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(56, 189, 248, 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(167, 139, 250, 0.4);
}

.vp-stage:nth-child(3) .vp-node {
  border-color: var(--accent-tertiary);
  box-shadow: 0 0 20px rgba(52, 211, 153, 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-tertiary);
}

.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-tertiary);
}

.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;
  z-index: 10;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(255, 255, 255, 0.72) 100%);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Dark theme adjustment for sticky header */
[data-theme="dark"] .project-sticky-header {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 100%);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 4px 40px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02);
}

.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(59, 130, 246, 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);
            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(59, 130, 246, 0.3);
            border-radius: 24px;
            backdrop-filter: blur(15px);
            display: flex;
            flex-direction: column;
            box-shadow: inset 0 0 60px rgba(59, 130, 246, 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(59, 130, 246, 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(59, 130, 246, 0.04);
        }
        .cb-half.software:hover {
            background: rgba(139, 92, 246, 0.04);
        }

        .cb-icon { 
            font-size: 2.2rem; 
            color: var(--p3-accent-blue); 
            filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5)); 
            transition: all 0.5s ease;
        }
        .cb-half.software .cb-icon { color: var(--p3-accent-purple); filter: drop-shadow(0 0 10px rgba(139, 92, 246, 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(139, 92, 246, 0.15) 0%, transparent 70%); pointer-events: none;}

        .pw-asi-core::after {
            content: '';
            position: absolute;
            inset: -4rem;
            border-radius: 32px;
            border: 2px solid rgba(59, 130, 246, 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: #0a58ca;
            --p3-accent-purple: #6610f2;
        }
        [data-theme='light'] .pipeline-v3 { background: radial-gradient(circle at center, rgba(10, 88, 202, 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(10, 88, 202, 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(10, 88, 202, 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(10, 88, 202, 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(10, 88, 202, 0.3) !important; }

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

        .clients-marquee-v1 .trust-heading {
            text-align: center;
            font-family: var(--font-head);
            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;
            overflow-y: visible;
            position: relative;
            padding: 1rem 0;
            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 15s 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);
        }

        [data-theme="dark"] .marquee-logo-v1:hover {
            transform: scale(1.08);
        }

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

        /* Hover tooltip for logos with extra context (e.g. MKS Vision / Starbucks) */
        .marquee-logo-v1[data-tooltip] {
            position: relative;
        }
        .marquee-logo-v1[data-tooltip]::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            font-family: var(--font-sans);
            font-size: 0.65rem;
            letter-spacing: 0.3px;
            white-space: nowrap;
            padding: 6px 12px;
            border-radius: 6px;
            background: rgba(20, 20, 28, 0.92);
            color: rgba(220, 220, 225, 0.95);
            backdrop-filter: blur(8px);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
            z-index: 10;
        }
        [data-theme="dark"] .marquee-logo-v1[data-tooltip]::after {
            background: rgba(40, 40, 55, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .marquee-logo-v1[data-tooltip]:hover::after {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        @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; }
        }


/* ====== GLOBAL MEGA OUTCOME STYLES ====== */
.reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s 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);
        }

        /* ── INJECTED FROM MOCKUP-10: Strategic Projects ── */
        /* =========================================================
           OUTCOMES: MEGA SHOWCASES - Projects
           ========================================================= */
        .outcomes-mega {
            padding: 8rem 0;
        }

        .mega-header {
            margin-bottom: 6rem;
        }

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

        .mega-label::before {
            content: '';
            width: 30px;
            height: 2px;
            background: var(--accent);
        }

        .mega-title {
            font-family: var(--font-headline);
            font-size: clamp(3rem, 5vw, 5rem);
            font-weight: 800;
            letter-spacing: -2px;
            line-height: 1;
            margin-bottom: 1.5rem;
        }

        .mega-desc {
            font-size: 1.15rem;
            color: var(--text-2);
            max-width: 650px;
            line-height: 1.6;
        }

        /* SHOWCASE CARD */
        .showcase {
            display: grid;
            grid-template-columns: 38% 62%;
            gap: 0;
            margin-bottom: 4rem;
            border-radius: 24px;
            overflow: hidden;
            border: 1px solid var(--border);
            box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6);
        }

        .showcase.reversed {
            direction: rtl;
        }

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

        /* Image Half */
        .sc-visual {
            position: relative;
            min-height: 0;
            overflow: hidden;
        }

        .sc-visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.7;
            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: 0.85;
        }

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

        .sc-overlay .sc-number {
            font-family: var(--font-headline);
            font-size: 8rem;
            font-weight: 800;
            color: rgba(255, 255, 255, 0.1) !important;
            position: absolute;
            top: 2rem;
            left: 3rem;
            line-height: 1;
        }

        .sc-overlay .sc-project-name,
        [data-theme='light'] .sc-overlay .sc-project-name {
            font-family: var(--font-headline);
            font-size: 2.5rem;
            font-weight: 700;
            letter-spacing: -1px;
            line-height: 1.1;
            margin-top: 1rem;
            color: #ffffff !important; /* Force white for dark overlay */
        }
        
        .sc-overlay .sc-timeline,
        [data-theme='light'] .sc-overlay .sc-timeline {
            color: #38bdf8 !important; /* Ensure blue accent is visible */
        }

        .sc-timeline {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.85rem;
            color: var(--accent);
            margin-bottom: 1rem;
            background: rgba(56, 189, 248, 0.1);
            padding: 0.4rem 1rem;
            border-radius: 20px;
            width: fit-content;
            border: 1px solid rgba(56, 189, 248, 0.2);
        }

        /* Content Half */
        .sc-content {
            padding: 1.5rem 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 0.8rem;
            background: var(--surface);
        }

        /* EXACT WHITEBOARD LOGIC STRUCTURE */

        /* Box 1: Client Inputs + ASI Activities (The "Engine" in sketch) */
        .sc-engine {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }

        .sc-block-label {
            font-family: var(--font-body);
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--text-3);
            margin-bottom: 0.4rem;
            padding-bottom: 0.3rem;
            border-bottom: 1px solid var(--border);
        }

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

        .sc-input-item {
            font-size: 0.88rem;
            color: var(--text-2);
            display: flex;
            align-items: flex-start;
            gap: 0.6rem;
        }

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

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

        .sc-activity {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border);
            padding: 0.45rem 0.7rem;
            border-radius: 8px;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-1);
            transition: background 0.3s, border-color 0.3s;
        }

        .sc-activity:hover {
            background: rgba(56, 189, 248, 0.05);
            border-color: rgba(56, 189, 248, 0.3);
        }

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

        /* Box 2: NESTED OUTCOMES (The distinct bottom box from the sketch) */
        .sc-outcomes-box {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            background: linear-gradient(135deg, rgba(52, 211, 153, 0.04), transparent);
            border: 1px solid rgba(52, 211, 153, 0.2);
        }

        .sc-outcomes-header {
            padding: 0.7rem 1.2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(52, 211, 153, 0.1);
            background: rgba(52, 211, 153, 0.03);
        }

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

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

        .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);
            transition: background 0.3s;
        }

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

        .sc-outcome-item:hover {
            background: rgba(52, 211, 153, 0.05);
        }

        .soi-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: rgba(52, 211, 153, 0.1);
            color: var(--green);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            margin-bottom: 1rem;
        }

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

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

        /* ── INJECTED FROM MOCKUP-10: Digital Transformation ── */
        /* =========================================================
           OUTCOMES: DIGITAL TRANSFORMATION - Immersive Showcase
           ========================================================= */
        .digital-immersive {
            padding: 8rem 2rem;
            position: relative;
            overflow: hidden;
            border-top: 1px solid var(--border);
        }

        .di-bg-glow {
            position: absolute;
            top: -200px;
            left: 50%;
            transform: translateX(-50%);
            width: 800px;
            height: 800px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(167, 139, 250, 0.08) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

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

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

        .di-header h2 {
            font-family: var(--font-headline);
            font-size: clamp(3rem, 5vw, 5rem);
            font-weight: 800;
            letter-spacing: -2px;
            margin: 1rem 0;
        }

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

        /* The Massive Full-Width Digital Card */
        .di-card {
            background: var(--surface);
            border: 1px solid rgba(167, 139, 250, 0.15);
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
            margin-bottom: 4rem;
        }

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

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

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

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

        .di-banner-overlay .di-banner-title,
        [data-theme='light'] .di-banner-overlay .di-banner-title {
            font-family: var(--font-headline);
            font-size: 2.5rem;
            font-weight: 700;
            color: #ffffff !important;
            text-shadow: 0 4px 12px 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;
        }

        /* Left: Engine/Process (Strict Hierarchy) */
        .di-process {
            display: flex;
            flex-direction: column;
            gap: 3rem;
        }

/* =========================================================================
   MOBILE GLOBAL NAVIGATION (Premium Glassmorphism V2)
   ========================================================================= */

:root {
  --m-nav-bg: rgba(0, 0, 0, 0.9);
  --m-accent: #38bdf8;
  --m-border: rgba(255, 255, 255, 0.1);
}

[data-theme='light'] :root {
  --m-nav-bg: rgba(248, 250, 252, 0.95);
  --m-accent: #0284c7;
  --m-border: rgba(0, 0, 0, 0.08);
}

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  display: none; /* Controlled by Media Query */
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-padding);
  background: transparent;
  z-index: 2000;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav.scrolled {
  background: var(--m-nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--m-border);
  height: 60px;
}

.m-nav-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =========================================================================
   MOBILE NAVIGATION - PREMIUM GLASS OVERLAY v2
   ========================================================================= */

:root {
  --m-overlay-bg: rgba(255, 255, 255, 0.92);
  --m-overlay-blur: 30px;
  --m-text-primary: #0c0f1a;
  --m-text-secondary: #4a5568;
  --m-text-muted: #718096;
  --m-accent: #3b82f6;
  --m-sub-hover-bg: rgba(59, 130, 246, 0.06);
  --m-sub-border: rgba(59, 130, 246, 0.4);
  --m-border: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
  --m-overlay-bg: rgba(5, 8, 15, 0.92);
  --m-overlay-blur: 40px;
  --m-text-primary: #ffffff;
  --m-text-secondary: rgba(255, 255, 255, 0.6);
  --m-text-muted: rgba(255, 255, 255, 0.4);
  --m-accent: #38bdf8;
  --m-sub-hover-bg: rgba(56, 189, 248, 0.08);
  --m-sub-border: rgba(56, 189, 248, 0.5);
  --m-border: rgba(255, 255, 255, 0.1);
}

/* -- Brand Logo + Text -- */
.m-brand {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.m-brand-logo {
  height: 30px;
  width: auto;
  display: block;
  transition: height 0.3s ease;
}

.mobile-nav.scrolled .m-brand-logo {
  height: 26px;
}

[data-theme="dark"] .m-brand-logo {
  filter: invert(1) hue-rotate(180deg) brightness(1.15);
}

.m-brand-divider {
  display: block;
  width: 1px;
  height: 28px;
  flex-shrink: 0;
  transition: background-color 0.4s;
}

[data-theme="dark"] .m-brand-divider {
  background-color: rgba(255, 255, 255, 0.15);
}

[data-theme="light"] .m-brand-divider {
  background-color: rgba(0, 0, 0, 0.15);
}

.m-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}

.m-brand-line1 {
  font-family: var(--font-headline, 'Outfit', sans-serif);
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: color 0.3s;
}

[data-theme="dark"] .m-brand-line1 {
  color: #ffffff;
}

[data-theme="light"] .m-brand-line1 {
  color: #0f172a;
}

.m-brand-line2 {
  font-family: var(--font-headline, 'Outfit', sans-serif);
  font-size: 0.73rem;
  font-weight: 800;
  color: #00e5ff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* -- Mobile Nav Bar -- */
.mobile-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 64px !important;
  background: var(--glass-bg, rgba(255,255,255,0.85)) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  z-index: 9999 !important;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--m-border) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav.scrolled {
  height: 56px !important;
  background: var(--glass-bg-strong, var(--glass-bg, rgba(255,255,255,0.92))) !important;
  backdrop-filter: blur(25px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .mobile-nav.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.m-nav-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* -- Mobile Theme Toggle -- */
.m-theme-toggle {
  background: transparent;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.m-theme-toggle:hover { background: rgba(0, 0, 0, 0.04); }
.m-theme-toggle:active { transform: scale(0.9); }

.m-theme-icon-sun,
.m-theme-icon-moon {
  position: absolute;
  font-size: 1rem;
  line-height: 1;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.m-theme-icon-sun { color: var(--text-muted) !important; opacity: 1; transform: rotate(0deg) scale(1); }
.m-theme-icon-moon { color: rgba(255,255,255,0.5) !important; opacity: 0; transform: rotate(-90deg) scale(0.5); }
[data-theme="dark"] .m-theme-icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); }
[data-theme="dark"] .m-theme-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="dark"] .m-theme-toggle:hover { background: rgba(255, 255, 255, 0.06); }

/* -- Controls Group -- */
.m-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* -- Hamburger Toggle -- */
.m-menu-toggle {
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  position: relative;
  cursor: pointer;
  z-index: 10001;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: background 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.m-menu-toggle:hover { background: rgba(0, 0, 0, 0.04); }
[data-theme="dark"] .m-menu-toggle:hover { background: rgba(255, 255, 255, 0.06); }

.m-menu-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--text-heading);
  position: absolute;
  border-radius: 2px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.m-menu-toggle span:nth-child(1) { top: 11px; }
.m-menu-toggle span:nth-child(2) { top: 17px; width: 14px; }
.m-menu-toggle span:nth-child(3) { top: 23px; width: 17px; }

.m-menu-toggle.active span:nth-child(1) { transform: rotate(45deg); top: 17px; }
.m-menu-toggle.active span:nth-child(2) { opacity: 0; width: 0; }
.m-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg); top: 17px; width: 20px; }

/* -- Fullscreen Overlay -- */
.m-menu-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  background: var(--m-overlay-bg) !important;
  backdrop-filter: blur(var(--m-overlay-blur)) !important;
  -webkit-backdrop-filter: blur(var(--m-overlay-blur)) !important;
  z-index: 10000 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 80px 24px 30px !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.m-menu-overlay.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 1024px) {
  .vault-nav { display: none !important; }
  .mobile-nav { display: flex !important; }
}

/* -- Stagger Animation -- */
.m-stagger {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--stagger, 0) * 0.07s + 0.1s);
}

.m-menu-overlay.active .m-stagger {
  opacity: 1;
  transform: translateY(0);
}

/* -- Nav List -- */
.m-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.m-nav-item {
  margin-bottom: 0;
  border-bottom: 1px solid var(--m-border);
}

.m-nav-link {
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--m-text-primary) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.15rem 0 !important;
  transition: color 0.2s ease !important;
}

.m-nav-link:active { color: var(--m-accent) !important; }

.m-nav-link i {
  font-size: 0.75rem;
  color: var(--m-text-muted);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.m-nav-link.active i {
  transform: rotate(90deg);
  color: var(--m-accent);
}

/* -- Sub-menus: Smooth Accordion -- */
.m-sub-menu {
  max-height: 0;
  overflow: hidden;
  padding: 0 0 0 0.75rem;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.35s ease;
}

.m-sub-menu.open {
  max-height: 500px;
  padding: 0 0 1rem 0.75rem;
}

.m-sub-menu a {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
  color: var(--m-text-secondary);
  text-decoration: none;
  padding: 0.7rem 0 0.7rem 1rem;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  transition: all 0.25s ease;
  margin-bottom: 2px;
}

.m-sub-menu a:hover,
.m-sub-menu a:active {
  color: var(--m-accent);
  background: var(--m-sub-hover-bg);
  border-left-color: var(--m-sub-border);
  padding-left: 1.25rem;
}

/* -- Menu Footer CTA -- */
.m-menu-footer {
  margin-top: auto;
  padding-top: 2rem;
}

.m-menu-footer .m-cta {
  width: 100%;
  padding: 1.1rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px var(--accent-primary-glow, rgba(59, 130, 246, 0.3));
  transition: all 0.3s ease;
}

.m-menu-footer .m-cta:active {
  transform: scale(0.97);
  box-shadow: 0 4px 12px var(--accent-primary-glow, rgba(59, 130, 246, 0.2));
}

/* -- Hide page-specific sticky navs on mobile -- */
@media (max-width: 1024px) {
  .ab-sticky-nav,
  .fc-sticky-nav,
  .page-sticky-nav,
  .xc-page-nav {
    display: none !important;
  }
}

/* =========================================================================
   GLOBAL FOOTER - Premium Design System
   Extracted from footer_overhaul_v2.html mockup
   ========================================================================= */

/* ── Footer CSS Variables (Dark default) ── */
html[data-theme="dark"] {
  --footer-bg: #030508;
  --footer-surface: rgba(255,255,255,0.03);
  --footer-border: rgba(255,255,255,0.06);
  --footer-text: rgba(255,255,255,0.55);
  --footer-text-hover: #ffffff;
  --footer-heading: #ffffff;
  --footer-muted: rgba(255,255,255,0.3);
  --footer-input-bg: rgba(255,255,255,0.04);
  --footer-input-border: rgba(255,255,255,0.08);
  --footer-glow: rgba(56, 189, 248, 0.08);
}

/* ── Footer CSS Variables (Light) ── */
html[data-theme="light"] {
  --footer-bg: #ffffff;
  --footer-surface: #f1f5f9;
  --footer-border: rgba(0,0,0,0.06);
  --footer-text: #475569;
  --footer-text-hover: #0f172a;
  --footer-heading: #0f172a;
  --footer-muted: #64748b;
  --footer-input-bg: #ffffff;
  --footer-input-border: #e2e8f0;
  --footer-glow: transparent;
}

html[data-theme="light"] .site-footer::before {
  opacity: 0.03;
}

/* Light-mode overrides for TSCC card */
html[data-theme="light"] .tscc-strip {
  background: rgba(10, 102, 194, 0.04);
  border-color: rgba(10, 102, 194, 0.12);
}
html[data-theme="light"] .tscc-strip:hover {
  background: rgba(10, 102, 194, 0.07);
  border-color: rgba(10, 102, 194, 0.25);
  box-shadow: 0 10px 40px rgba(10, 102, 194, 0.1);
}
html[data-theme="light"] .tscc-bg-icon {
  opacity: 0.03;
}
html[data-theme="light"] .tscc-logo {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.06);
}

/* Light-mode overrides for email glow */
html[data-theme="light"] .footer-contact:hover {
  border-color: rgba(10, 102, 194, 0.2);
  box-shadow: 0 0 12px rgba(10, 102, 194, 0.08);
}

/* Light-mode overrides for office address */
html[data-theme="light"] .office-address:hover {
  border-color: rgba(10, 102, 194, 0.2);
}

html[data-theme="light"] .office-address i {
  color: #0284c7;
}

/* ── Footer Base ── */
.site-footer {
  background: var(--footer-bg);
  position: relative;
  overflow: hidden;
}

/* ── Noise/Grain Texture ── */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* ── Floating Ambient Orbs ── */
.footer-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  will-change: transform, translate;
  transition: translate 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-theme="light"] .footer-orb {
  display: none;
}
.footer-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.08), transparent 70%);
  top: -180px; left: 10%;
  animation: orbFloat1 12s ease-in-out infinite;
}
.footer-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.06), transparent 70%);
  bottom: -100px; right: 5%;
  animation: orbFloat2 15s ease-in-out infinite;
}
.footer-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.05), transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: orbFloat3 18s ease-in-out infinite;
}
@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(40px, 20px); }
  66% { transform: translate(-20px, 10px); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-30px, -15px); }
  66% { transform: translate(20px, -25px); }
}
@keyframes orbFloat3 {
  0%, 100% { transform: translate(-50%, -50%); }
  33% { transform: translate(-40%, -55%); }
  66% { transform: translate(-55%, -45%); }
}

/* ── Gradient Divider ── */
.footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--accent-primary), var(--accent-secondary), var(--accent-primary), transparent 95%);
  background-size: 200% 100%;
  animation: dividerBreathe 6s ease-in-out infinite;
  opacity: 0.25;
  margin-bottom: 3.5rem;
}

@keyframes dividerBreathe {
  0%, 100% { background-position: 0% 50%; opacity: 0.15; }
  50% { background-position: 100% 50%; opacity: 0.35; }
}

/* ── Footer Container - Full-width, matching header ── */
.footer-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 4rem;
  position: relative;
  z-index: 1;
}

/* ── Main Grid ── */
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-bottom: 4rem;
  overflow: hidden;
}

/* ── Brand Column ── */
.site-footer .footer-brand {
  grid-row: 1 / span 2;
  position: relative;
  padding-right: 2rem;
}

.footer-brand-logo {
  display: flex; align-items: center; gap: 1.1rem;
  margin-bottom: 2rem;
  text-decoration: none;
}

.site-footer .footer-brand p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--footer-text);
  margin-bottom: 2rem;
  max-width: 300px;
}

/* ── LinkedIn Social Pill ── */
.site-footer .footer-socials {
  display: flex;
  gap: 0.6rem;
}

.footer-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 36px;
  padding: 0 1rem 0 0.8rem;
  border-radius: 100px;
  background: var(--footer-surface);
  border: 1px solid var(--footer-border);
  color: var(--footer-text);
  text-decoration: none;
  font-size: 0.82rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pulse-li {
  0% { box-shadow: 0 0 0 0 rgba(10, 102, 194, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(10, 102, 194, 0); }
  100% { box-shadow: 0 0 0 0 rgba(10, 102, 194, 0); }
}

.footer-linkedin.pulse-active {
  animation: pulse-li 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.footer-linkedin i.fa-linkedin-in {
  font-size: 0.9rem;
}

.footer-linkedin .li-count {
  color: var(--footer-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.footer-linkedin .li-follow {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--footer-muted);
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.footer-linkedin:hover {
  background: #0A66C2;
  border-color: #0A66C2;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(10, 102, 194, 0.35);
}

.footer-linkedin:hover .li-count {
  color: rgba(255,255,255,0.85);
}

.footer-linkedin:hover .li-follow {
  opacity: 1;
  max-width: 90px;
  margin-left: 0.4rem;
  color: rgba(255,255,255,0.7);
}

/* Combiner for Socials & Contact */
.footer-info-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}

.site-footer .footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--footer-muted);
  margin-bottom: 2.2rem;
}

.site-footer .footer-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.site-footer .footer-links a {
  position: relative;
  color: var(--footer-text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.35rem 0;
  padding-left: 0;
  transition: padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.site-footer .footer-links a::before {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  text-align: left;
  opacity: 0;
  color: var(--accent-primary);
  font-size: 0.85rem;
  transform: translateY(-50%) translateX(-10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-footer .footer-links a:hover {
  color: var(--footer-text-hover);
  padding-left: 28px;
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
}

.site-footer .footer-links a:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
}

.site-footer .footer-links a .link-logo {
  height: 14px;
  width: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.site-footer .footer-links a:hover .link-logo {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.3));
}

/* ── Primary CTA Button ── */
.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.8rem;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.25);
  margin-bottom: 2rem;
}

.footer-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(56, 189, 248, 0.4);
}

.footer-cta i {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-cta:hover i {
  transform: translateX(5px);
}

/* ── Contact Details ── */
.site-footer .footer-contact {
  display: inline-flex;
  align-items: center;
  height: 36px;
  border-radius: 100px;
  background: var(--footer-surface);
  border: 1px solid var(--footer-border);
  overflow: visible;
  transition: all 0.3s ease;
  position: relative;
}

.site-footer .footer-contact:hover {
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.15);
}

.site-footer .footer-contact .email-display {
  color: var(--footer-muted);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.6rem 0 0.8rem;
  user-select: all;
  cursor: text;
}

.site-footer .footer-contact .email-display i {
  font-size: 0.75rem;
  color: var(--footer-muted);
}

.site-footer .footer-contact .copy-btn {
  background: transparent;
  border: none;
  border-left: 1px solid var(--footer-border);
  color: var(--footer-muted);
  width: 36px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.8rem;
}

.site-footer .footer-contact .copy-btn:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}


/* ── Office Address ── */
.office-address {
  margin-top: 1rem;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  border-radius: 12px;
  background: var(--footer-surface);
  border: 1px solid var(--footer-border);
  color: var(--footer-muted);
  font-size: 0.8rem;
  text-decoration: none;
  transition: all 0.3s ease;
  line-height: 1.45;
}

.office-address .addr-lines {
  display: flex;
  flex-direction: column;
}

.office-address .addr-line1 {
  font-weight: 600;
  color: var(--footer-text);
  font-size: 0.8rem;
}

.office-address .addr-line2 {
  font-size: 0.75rem;
  color: var(--footer-muted);
  margin-top: 0.1rem;
}

.office-address:hover {
  border-color: rgba(255,255,255,0.12);
  color: var(--footer-text-hover);
}

.office-address i {
  font-size: 0.85rem;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.office-address .maps-icon {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--footer-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.3s ease;
}

.office-address:hover .maps-icon {
  opacity: 1;
  transform: translateX(0);
}

/* ── TSCC Community Strip ── */
.tscc-strip {
  grid-column: 2 / -1;
  align-self: end;
  margin-top: 1rem;
  padding: 1.8rem 2.2rem;
  border-radius: 16px;
  background: rgba(10, 102, 194, 0.03);
  border: 1px solid rgba(10, 102, 194, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tscc-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10, 102, 194, 0.08), transparent 50%);
  pointer-events: none;
}

.tscc-bg-icon {
  position: absolute;
  right: -20px;
  bottom: -35px;
  font-size: 14rem;
  color: #0A66C2;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-15deg);
}

.tscc-strip:hover {
  border-color: rgba(10, 102, 194, 0.35);
  background: rgba(10, 102, 194, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.tscc-strip-left {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  z-index: 1;
}

.tscc-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  margin-top: 0.1rem;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tscc-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tscc-info h5 {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--footer-heading);
  margin-bottom: 0.4rem;
}

.tscc-info p {
  font-size: 0.85rem;
  color: var(--footer-text);
  line-height: 1.55;
  max-width: 540px;
}

.tscc-join-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.4rem;
  border-radius: 100px;
  background: #0A66C2;
  border: 1px solid #0A66C2;
  color: #ffffff !important;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  flex-shrink: 0;
}

.tscc-join-btn:hover {
  background: #004182;
  border-color: #004182;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10, 102, 194, 0.3);
}

.tscc-join-btn i {
  transition: transform 0.3s ease;
  font-size: 0.75rem;
}

.tscc-join-btn:hover i {
  transform: translateX(3px);
}

html[data-theme="light"] .tscc-strip {
  background: rgba(0, 0, 0, 0.02);
}

/* ── Bottom Bar ── */
.site-footer .footer-bottom {
  border-top: 1px solid var(--footer-border);
  padding: 2rem 0 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Copyright Shine Sweep ── */
.footer-bottom-left {
  font-size: 0.8rem;
  color: var(--footer-muted);
}

.footer-bottom-left strong {
  font-weight: 600;
  background: linear-gradient(90deg, var(--footer-text) 0%, var(--footer-text) 40%, var(--accent-primary) 50%, var(--footer-text) 60%, var(--footer-text) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shineSweep 4s ease-in-out infinite;
}

@keyframes shineSweep {
  0%, 100% { background-position: 200% center; }
  50% { background-position: -200% center; }
}

.site-footer .footer-legal {
  display: flex;
  gap: 2rem;
}

.site-footer .footer-legal a {
  font-size: 0.78rem;
  color: var(--footer-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.site-footer .footer-legal a:hover {
  color: var(--footer-text-hover);
}

/* ── Back to Top w/ Scroll Progress ── */
.back-to-top-wrap {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 48px; height: 48px;
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.back-to-top-wrap.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top-wrap::before {
  content: 'Back to top';
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: var(--footer-surface);
  border: 1px solid var(--footer-border);
  color: var(--footer-text);
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.back-to-top-wrap:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.scroll-progress-ring {
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 48px;
  transform: rotate(-90deg);
  pointer-events: none;
}

.scroll-progress-ring circle {
  fill: none;
  stroke-width: 2.5;
}

.scroll-progress-track {
  stroke: var(--footer-border);
}

.scroll-progress-bar {
  stroke: var(--accent-primary);
  stroke-linecap: round;
  stroke-dasharray: 138.23;
  stroke-dashoffset: 138.23;
  transition: stroke-dashoffset 0.1s ease-out;
}

.back-to-top {
  position: absolute;
  top: 3px; left: 3px;
  width: 42px; height: 42px;
  margin: 0; padding: 0;
  border-radius: 50%;
  background: var(--footer-surface);
  border: 1px solid var(--footer-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--footer-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 0.85rem;
}

.back-to-top:hover {
  background: var(--accent-primary);
  color: #000;
  transform: scale(1.08);
  box-shadow: 0 0 20px var(--accent-primary-glow);
  border-color: var(--accent-primary);
}

/* ── Cascade Animations ── */
.site-footer .footer-grid .footer-col,
.site-footer .footer-grid .footer-brand,
.site-footer .footer-grid .tscc-strip {
  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);
}

.footer-grid.in-view .footer-brand { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-col:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-col:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-col:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-col:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .tscc-strip { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }

.site-footer .footer-links a {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), padding-left 0.3s ease, color 0.3s ease;
}

.footer-grid.in-view .footer-links a:nth-child(1) { transition-delay: 0.20s, 0.20s, 0s, 0s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-links a:nth-child(2) { transition-delay: 0.28s, 0.28s, 0s, 0s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-links a:nth-child(3) { transition-delay: 0.36s, 0.36s, 0s, 0s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-links a:nth-child(4) { transition-delay: 0.44s, 0.44s, 0s, 0s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-links a:nth-child(5) { transition-delay: 0.52s, 0.52s, 0s, 0s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-links a:nth-child(6) { transition-delay: 0.60s, 0.60s, 0s, 0s; opacity: 1; transform: translateY(0); }

/* Reset delays after cascade so hover effects are instant */
.footer-grid.cascade-done .footer-links a,
.footer-grid.cascade-done .footer-col,
.footer-grid.cascade-done .footer-brand {
  transition-delay: 0s !important;
}

/* =========================================================
   LARGE DESKTOP RESPONSIVENESS (CARDS)
   ========================================================= */
/* 15"-16" Standard Laptops & Small Monitors (1366px - 1599px) */
@media (min-width: 1366px) {
}

/* 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%;
  }
}

/* =========================================================================
   GLOBAL HEADER OVERRIDES & FIXES
   Ensuring theme toggle and CTA buttons never overlap
   ========================================================================= */
.nav-cta {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

.theme-toggle-wrapper {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  margin: 0 !important;
  transform: none !important;
}

/* theme-toggle gap override removed - was breaking dark mode slider alignment */

.site-footer .footer-legal a {
  font-size: 0.78rem;
  color: var(--footer-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.site-footer .footer-legal a:hover {
  color: var(--footer-text-hover);
}

/* ── Back to Top w/ Scroll Progress ── */
.back-to-top-wrap {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 48px; height: 48px;
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.back-to-top-wrap.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top-wrap::before {
  content: 'Back to top';
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: var(--footer-surface);
  border: 1px solid var(--footer-border);
  color: var(--footer-text);
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.back-to-top-wrap:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.scroll-progress-ring {
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 48px;
  transform: rotate(-90deg);
  pointer-events: none;
}

.scroll-progress-ring circle {
  fill: none;
  stroke-width: 2.5;
}

.scroll-progress-track {
  stroke: var(--footer-border);
}

.scroll-progress-bar {
  stroke: var(--accent-primary);
  stroke-linecap: round;
  stroke-dasharray: 138.23;
  stroke-dashoffset: 138.23;
  transition: stroke-dashoffset 0.1s ease-out;
}

.back-to-top {
  position: absolute;
  top: 3px; left: 3px;
  width: 42px; height: 42px;
  margin: 0; padding: 0;
  border-radius: 50%;
  background: var(--footer-surface);
  border: 1px solid var(--footer-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--footer-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 0.85rem;
}

.back-to-top:hover {
  background: var(--accent-primary);
  color: #000;
  transform: scale(1.08);
  box-shadow: 0 0 20px var(--accent-primary-glow);
  border-color: var(--accent-primary);
}

/* ── Cascade Animations ── */
.site-footer .footer-grid .footer-col,
.site-footer .footer-grid .footer-brand,
.site-footer .footer-grid .tscc-strip {
  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);
}

.footer-grid.in-view .footer-brand { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-col:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-col:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-col:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-col:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .tscc-strip { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }

.site-footer .footer-links a {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), padding-left 0.3s ease, color 0.3s ease;
}

.footer-grid.in-view .footer-links a:nth-child(1) { transition-delay: 0.20s, 0.20s, 0s, 0s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-links a:nth-child(2) { transition-delay: 0.28s, 0.28s, 0s, 0s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-links a:nth-child(3) { transition-delay: 0.36s, 0.36s, 0s, 0s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-links a:nth-child(4) { transition-delay: 0.44s, 0.44s, 0s, 0s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-links a:nth-child(5) { transition-delay: 0.52s, 0.52s, 0s, 0s; opacity: 1; transform: translateY(0); }
.footer-grid.in-view .footer-links a:nth-child(6) { transition-delay: 0.60s, 0.60s, 0s, 0s; opacity: 1; transform: translateY(0); }

/* Reset delays after cascade so hover effects are instant */
.footer-grid.cascade-done .footer-links a,
.footer-grid.cascade-done .footer-col,
.footer-grid.cascade-done .footer-brand {
  transition-delay: 0s !important;
}

/* =========================================================
   LARGE DESKTOP RESPONSIVENESS (CARDS)
   ========================================================= */
/* 15"-16" Standard Laptops & Small Monitors (1366px - 1599px) */
@media (min-width: 1366px) {
}

/* 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%;
  }
}

/* =========================================================================
   GLOBAL HEADER OVERRIDES & FIXES
   Ensuring theme toggle and CTA buttons never overlap
   ========================================================================= */
.nav-cta {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

.theme-toggle-wrapper {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  margin: 0 !important;
  transform: none !important;
}

.theme-toggle {
  position: relative !important;
  right: auto !important;
  top: auto !important;
}

.nav-cta .btn {
  margin: 0 !important;
  position: relative !important;
}

/* ===== PRODUCT PORTFOLIO CARDS (GLOBAL) ===== */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.portfolio-card {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none !important;
    color: var(--text-1) !important;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    /* Ensure content stacks properly with mix-blend modes */
    isolation: isolate; 
}
.portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--glass-shadow-hover);
    border-color: var(--accent-primary-glow);
    color: var(--text-1) !important;
}
.portfolio-card:visited,
.portfolio-card:active,
.portfolio-card:focus {
    color: var(--text-1) !important;
    text-decoration: none !important;
}
/* Force all child text within portfolio cards to follow theme, not link color */
.portfolio-card .card-title {
    color: var(--text-1) !important;
}
.portfolio-card .card-content p {
    color: var(--text-2) !important;
}
.portfolio-card .card-footer-metrics,
.portfolio-card .card-footer-metrics div,
.portfolio-card .card-footer-metrics i {
    color: var(--text-3) !important;
}

.card-img-wrap {
    height: 220px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    transition: background 0.4s ease;
}

/* Dark mode bg - matching industry pages' white radial approach */
[data-theme="dark"] .card-img-wrap,
:root:not([data-theme="light"]) .card-img-wrap {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.95) 0%, rgba(220, 225, 240, 0.8) 100%);
}

/* Neutral light bg for all product images in light mode */
[data-theme="light"] .card-img-wrap {
    background: linear-gradient(145deg, #f0f2f5 0%, #e8eaef 50%, #f0f2f5 100%);
}

.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    z-index: 1;
}
.portfolio-card:hover .card-img-wrap img {
    transform: scale(1.08);
}

/* On hover - title brightens */
.portfolio-card:hover .card-title {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
}
[data-theme="light"] .portfolio-card:hover .card-title {
    color: #0a0a0a !important;
    text-shadow: none;
}

/* On hover - badge pill gets a subtle glow */
.portfolio-card:hover .card-badge {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}
.card-img-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg, transparent 0%, var(--bg-1) 100%);
    z-index: 2;
    pointer-events: none;
}

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

/* Light mode: white frosted glass with dark text */
[data-theme="light"] .card-badge {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #1a1a2e;
}

/* Industry accent tint - subtle border-left color */
.card-badge.automotive { border-left: 2px solid rgba(167, 139, 250, 0.8); }
.card-badge.off-highway { border-left: 2px solid rgba(245, 158, 11, 0.8); }
.card-badge.consumer,
.card-badge.consumer-electronics { border-left: 2px solid rgba(250, 204, 21, 0.8); }
.card-badge.appliances,
.card-badge.home-appliances { border-left: 2px solid rgba(236, 72, 153, 0.8); }
.card-badge.medical-devices { border-left: 2px solid rgba(251, 113, 133, 0.8); }
.card-badge.industrial-equipment { border-left: 2px solid rgba(34, 211, 238, 0.8); }

.card-content {
    padding: 1.2rem 1.5rem 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.card-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 0.5rem;
    line-height: 1.3;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.card-content p {
    color: var(--text-2);
    font-size: 0.85rem;
    line-height: 1.6;
    flex-grow: 1;
    margin: 0 0 1rem 0;
}
.card-footer-metrics {
    display: flex;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-3);
    text-transform: uppercase;
    flex-wrap: wrap;
}
.card-footer-metrics i { color: var(--text-3); margin-right: 4px; }

.card-open-icon {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 28px;
    height: 28px;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.65rem;
    z-index: 3;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.3s ease;
}
.portfolio-card:hover .card-open-icon {
    opacity: 1;
    transform: translateY(0);
}

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


/* Mobile Swipeable Grids */
@media (max-width: 768px) {
    .portfolio-grid#dynamic-product-studies-container,
    .portfolio-grid#dynamic-case-studies-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 1.5rem;
        gap: 1.2rem;
        -webkit-overflow-scrolling: touch;
    }
    .dynamic-ps-card, .dynamic-cs-card {
        flex: 0 0 85%;
        scroll-snap-align: center;
    }
}


/* Guarantee Case Study Card Image Colors */
.cs-card-img {
    color: #ffffff !important;
}
.cs-card-img * {
    color: #ffffff !important;
}
.cs-card-badges {
    color: #ffffff !important;
}

/* =========================================================================
   MOBILE FOOTER - Dedicated Styles
   ========================================================================= */
.mobile-footer .footer-container {
  padding: 0 1.25rem;
}

.mobile-footer .footer-divider {
  margin-bottom: 2rem;
}

/* ── Brand Section ── */
.mf-brand {
  text-align: center;
  margin-bottom: 1.5rem;
}

.mobile-footer .footer-brand-logo {
  justify-content: center;
  margin-bottom: 1rem;
}

.mobile-footer .footer-brand-logo img {
  height: 36px !important;
}

.mf-tagline {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--footer-text);
  max-width: 340px;
  margin: 0 auto 1.2rem;
  opacity: 0.8;
}

.mobile-footer .footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.6rem;
  border-radius: 100px;
  background: var(--accent-primary);
  color: #000 !important;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.mobile-footer .footer-cta:active {
  transform: scale(0.96);
}

/* ── Contact Bar ── */
.mf-contact-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.mf-contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: var(--footer-surface);
  border: 1px solid var(--footer-border);
  font-size: 0.8rem;
  color: var(--footer-text);
  text-decoration: none;
  transition: all 0.2s ease;
}

.mf-contact-item i:first-child {
  font-size: 0.85rem;
  color: var(--accent-primary);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.mf-contact-item .copy-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--footer-muted);
  padding: 0.3rem;
  cursor: pointer;
  font-size: 0.8rem;
  border-radius: 6px;
  transition: all 0.2s;
}

.mf-contact-item .copy-btn:active {
  color: var(--accent-primary);
  transform: scale(0.9);
}

.mf-linkedin {
  color: var(--footer-text) !important;
}

.mf-follow-tag {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  color: #0A66C2;
  background: rgba(10, 102, 194, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 100px;
  letter-spacing: 0.03em;
}

/* ── Links Grid ── */
.mf-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.mf-link-group h4 {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--footer-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}

.mf-link-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mf-link-list a {
  font-size: 0.78rem;
  color: var(--footer-text);
  text-decoration: none;
  padding: 0.15rem 0;
  transition: color 0.2s;
  display: block;
}

.mf-link-list a:active {
  color: var(--accent-primary);
}

/* ── TSCC Strip ── */
.mf-tscc {
  margin-bottom: 1rem;
  padding: 1rem 1rem;
  border-radius: 12px;
  background: rgba(10, 102, 194, 0.04);
  border: 1px solid rgba(10, 102, 194, 0.12);
}

.mf-tscc-top {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.mf-tscc-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}

.mf-tscc h5 {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--footer-heading);
  margin-bottom: 0.15rem;
}

.mf-tscc p {
  font-size: 0.72rem;
  color: var(--footer-muted);
  line-height: 1.4;
}

.mf-tscc .tscc-join-btn {
  width: 100%;
  justify-content: center;
  padding: 0.55rem 1rem;
  font-size: 0.78rem;
  border-radius: 8px;
}

/* ── Address ── */
.mf-address {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: var(--footer-surface);
  border: 1px solid var(--footer-border);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: border-color 0.2s;
}

.mf-address > i:first-child {
  font-size: 0.8rem;
  color: var(--accent-primary);
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.mf-addr-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--footer-text);
  letter-spacing: 0.03em;
}

.mf-addr-text {
  display: block;
  font-size: 0.72rem;
  color: var(--footer-muted);
  line-height: 1.4;
  margin-top: 0.1rem;
}

.mf-addr-arrow {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--footer-muted);
  margin-top: 0.3rem;
  flex-shrink: 0;
}

/* ── Bottom Bar ── */
.mf-bottom {
  border-top: 1px solid var(--footer-border);
  padding: 1.2rem 0 1.5rem;
  text-align: center;
}

.mf-legal-links {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 0.6rem;
}

.mf-legal-links a {
  font-size: 0.7rem;
  color: var(--footer-muted);
  text-decoration: none;
}

.mf-legal-links a:active {
  color: var(--footer-text);
}

.mf-copyright {
  font-size: 0.68rem;
  color: var(--footer-muted);
  opacity: 0.7;
}

.mf-cin {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.6rem;
  opacity: 0.5;
}

/* Light mode tweaks */
html[data-theme="light"] .mf-tscc {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .mobile-footer .footer-cta {
  color: #fff !important;
}

/* =========================================================================
   COOKIE CONSENT BANNER
   Compact bottom-right card - doesn't obscure hero content.
   ========================================================================= */
.asi-cookie-banner {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.asi-cookie-banner.asi-cookie-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.asi-cookie-banner.asi-cookie-dismissed {
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.asi-cookie-inner {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1),
              0 2px 6px rgba(0, 0, 0, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Dark mode - true glassmorphism */
[data-theme="dark"] .asi-cookie-inner,
.asi-cookie-dark .asi-cookie-inner {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4),
              0 2px 6px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
}

.asi-cookie-headline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.asi-cookie-shield {
  flex-shrink: 0;
  color: var(--accent-primary);
  opacity: 0.65;
  transition: color 0.4s ease;
}

[data-theme="dark"] .asi-cookie-shield,
.asi-cookie-dark .asi-cookie-shield {
  color: #38bdf8;
}

.asi-cookie-title {
  font-family: var(--font-headline);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.3;
  transition: color 0.4s ease;
}

.asi-cookie-dark .asi-cookie-title {
  color: #ffffff;
}

.asi-cookie-desc {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: none;
  margin: 0;
  transition: color 0.4s ease;
}

.asi-cookie-dark .asi-cookie-desc {
  color: rgba(255, 255, 255, 0.5);
}

.asi-cookie-actions {
  display: flex;
  gap: 0.45rem;
}

.asi-cookie-btn {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  white-space: nowrap;
  text-align: center;
  letter-spacing: 0.01em;
}

.asi-cookie-reject {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

[data-theme="dark"] .asi-cookie-reject,
.asi-cookie-dark .asi-cookie-reject {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.04);
}

.asi-cookie-reject:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-body);
  border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .asi-cookie-reject:hover,
.asi-cookie-dark .asi-cookie-reject:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.18);
}

.asi-cookie-accept {
  background: #1d6ec0;
  color: #ffffff;
  transition: all 0.3s ease;
}

.asi-cookie-dark .asi-cookie-accept {
  background: #38bdf8;
  color: #000;
}

.asi-cookie-accept:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px var(--accent-primary-glow);
}

.asi-cookie-dark .asi-cookie-accept:hover {
  box-shadow: 0 3px 16px rgba(56, 189, 248, 0.35);
}

/* ── Mobile: Slightly narrower, edge-to-edge at bottom ── */
@media (max-width: 480px) {
  .asi-cookie-banner {
    bottom: 0.75rem;
    right: 0.75rem;
    left: 0.75rem;
  }

  .asi-cookie-inner {
    width: auto;
  }
}

/* =========================================================================
   APPLE / MAC OPTIMIZATION LAYER
   Targeted enhancements for Retina displays, OLED panels, Safari,
   and the Apple ecosystem. All blocks use progressive enhancement -
   they are invisible on non-Apple hardware.
   ========================================================================= */

/* ── Display P3 Wide-Gamut Colors ──
   Apple displays since 2016 support 25% more color range than sRGB.
   These subtle 5-10% enhancements add a "pop" on MacBook Pro, iMac,
   iPad Pro, and iPhone screens. Graceful fallback on sRGB monitors. */
@supports (color: color(display-p3 0 0 1)) {
  :root {
    --accent-blue-p3: color(display-p3 0.24 0.53 0.97);
    --accent-cyan-p3: color(display-p3 0.04 0.73 0.85);
  }

  [data-theme="dark"] {
    --accent-primary: color(display-p3 0.24 0.76 0.98);
    --accent-gradient: linear-gradient(
      135deg,
      color(display-p3 0.24 0.76 0.98) 0%,
      color(display-p3 0.06 0.66 0.93) 100%
    );
    --accent-gradient-vivid: linear-gradient(
      135deg,
      color(display-p3 0.06 0.66 0.93) 0%,
      color(display-p3 0.22 0.84 0.62) 100%
    );
  }

  .gradient-text {
    background: linear-gradient(
      135deg,
      color(display-p3 0.24 0.53 0.97) 0%,
      color(display-p3 0.04 0.73 0.85) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* ── OLED True Black (HDR Panels) ──
   On MacBook Pro, iPhone, and iPad Pro OLED/XDR screens, #000000
   pixels are physically turned OFF - infinite contrast and zero
   power draw. Fix leaks where glass-bg-strong was rgba(0,0,0,0.95). */
@media (dynamic-range: high) {
  [data-theme="dark"] {
    --glass-bg-strong: #000000;
  }

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

/* ── Safe Area Insets (iPhone Notch / Dynamic Island) ──
   With viewport-fit=cover, content extends behind the notch.
   These insets ensure interactive elements stay clear. */
@supports (padding: env(safe-area-inset-top)) {
  .vault-nav .nav-inner {
    padding-left: max(4rem, env(safe-area-inset-left));
    padding-right: max(4rem, env(safe-area-inset-right));
  }

  .site-footer .footer-container {
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
  }

  .mobile-nav .m-nav-container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* ── Momentum Scrolling (iOS / iPadOS) ──
   Enable native-feeling momentum scroll in overflow containers. */
.marquee-container-v1,
.m-menu-overlay,
.mega-dropdown,
.mf-links-grid {
  -webkit-overflow-scrolling: touch;
}

/* ── Safari Pinned Tab Color ──
   When a user pins the site in Safari, the favicon gets this color. */
:root {
  --safari-pinned-tab-color: #0a58ca;
}
[data-theme="dark"] {
  --safari-pinned-tab-color: #38bdf8;
}

/* ── Pointer Precision (MacBook Trackpad / Magic Mouse) ──
   MacBook users have fine-precision pointers. Optimize hover targets
   and transitions for smooth trackpad interaction. */
@media (pointer: fine) {
  .btn, .nav-link, .explore-card, .ind-card, .hp-tech-nav-card,
  .hp-outcome-card, .p3-card, .cs-card, .ps-card {
    transition-timing-function: var(--ease-apple);
  }
}

/* ── High Refresh Rate (ProMotion 120Hz) ──
   MacBook Pro and iPad Pro support 120Hz. Use will-change sparingly
   to hint the compositor about animated elements, ensuring 120fps. */
@media (min-resolution: 2dppx) {
  .reveal {
    will-change: opacity, transform;
  }

  .vault-nav::before {
    will-change: backdrop-filter, background;
  }
}

/* ── Scroll-Snap for Mobile Horizontal Containers ──
   Adds magnetic snapping when swiping through horizontal scroll areas
   on mobile. Works with trackpad two-finger swipe on MacBook too. */
.sub-nav-inner,
.mf-links-grid {
  scroll-snap-type: x mandatory;
}

.sub-nav-link,
.mf-link-card {
  scroll-snap-align: start;
}

/* ── Reduced Transparency (macOS Accessibility) ──
   When a user enables System Preferences → Accessibility → Display →
   Reduce Transparency, disable blur effects and use solid backgrounds.
   Only affects users with this setting enabled. */
@media (prefers-reduced-transparency) {
  .vault-nav::before,
  .vault-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg-body) !important;
  }

  .p3-card, .ind-card, .hp-tech-nav-card,
  .hp-outcome-card, .explore-card, .cs-card,
  .ps-card, .glass-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--glass-bg-strong) !important;
  }

  .mega-dropdown {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ── Reduced Motion (macOS/iOS Accessibility) ──
   When a user enables "Reduce Motion" in accessibility settings,
   disable all scroll-reveal, parallax, and CSS animations.
   Content is shown immediately without any motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .hp-hero-video-bg {
    animation: none !important;
  }

  .footer-orb {
    animation: none !important;
  }

  .marquee-track-v1 {
    animation: none !important;
  }

  .axis-line, .axis-line::before, .axis-line::after,
  .axis-arrow {
    animation: none !important;
  }
}

/* ── High Contrast (macOS Accessibility) ──
   When a user enables "Increase Contrast", boost subtle borders,
   muted text, and glassmorphism opacity for better readability.
   Only affects users with this accessibility setting. */
@media (prefers-contrast: high) {
  :root {
    --glass-border: 1px solid rgba(0, 0, 0, 0.25);
    --glass-border-subtle: 1px solid rgba(0, 0, 0, 0.2);
    --text-muted: #4a5568;
  }

  [data-theme="dark"] {
    --glass-border: 1px solid rgba(255, 255, 255, 0.25);
    --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.15);
    --text-muted: rgba(255, 255, 255, 0.65);
    --glass-bg: rgba(255, 255, 255, 0.06);
  }
}

/* ── XDR Brightness Boost (HDR OLED Displays) ──
   MacBook Pro XDR can hit 1600 nits peak. In dark mode, make key
   accent elements subtly "glow" brighter than standard white -
   a true HDR effect impossible on standard screens. */
@media (dynamic-range: high) {
  [data-theme="dark"] .gradient-text,
  [data-theme="dark"] .text-gradient,
  [data-theme="dark"] .highlight {
    filter: brightness(1.12);
  }

  [data-theme="dark"] .btn-primary {
    filter: brightness(1.08);
  }

  [data-theme="dark"] .accent-glow,
  [data-theme="dark"] .node-title {
    filter: brightness(1.05);
  }
}

/* ── Text Size Adjust (Safari iOS) ──
   Prevents Safari from auto-inflating text in landscape mode,
   which can break layouts. Does NOT block user accessibility settings
   (pinch-to-zoom, Dynamic Type) - only blocks Safari's automatic
   unwanted inflation. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Accent Color (Native Form Elements) ──
   Makes any native browser form controls (checkboxes, radio buttons,
   range sliders) use the ASI brand color instead of default blue. */
:root {
  accent-color: var(--accent-primary);
}

/* ── Branded Focus Ring (Keyboard Navigation) ──
   Replaces the default ugly blue focus outline with a subtle
   branded glow. Only shows for keyboard nav (focus-visible),
   never on mouse click. */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

[data-theme="dark"] :focus-visible {
  outline-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15);
}

/* Remove focus ring on mouse click - only keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Touch-Action Manipulation (iOS Tap Speed) ──
   Removes the 300ms tap delay on mobile Safari and disables
   double-tap-to-zoom. Site responds to taps instantly. */
a, button, [role="button"], .btn, .nav-link, .explore-card,
.ind-card, .hp-tech-nav-card, .hp-outcome-card, .p3-card,
.cs-card, .ps-card, .theme-toggle-wrapper, .accordion-header,
.menu-toggle {
  touch-action: manipulation;
}

/* ── Overscroll Behavior ──
   Prevents scroll chaining (when you scroll past the bottom of a
   modal, the page behind it scrolls). Also ensures the rubber-band
   bounce on Safari shows the correct background color. */
html {
  overscroll-behavior-y: none;
}

.m-menu-overlay,
.mega-dropdown {
  overscroll-behavior: contain;
}

/* ── Scrollbar Gutter (Layout Stability) ──
   Reserves space for the scrollbar so content doesn't shift when
   navigating between short and long pages. On macOS with overlay
   scrollbars this has no visual effect - but fixes Windows. */
html {
  scrollbar-gutter: stable;
}

/* ── Retina Image Rendering ──
   Forces the browser to use high-quality image scaling on Retina
   displays. Prevents soft/blurry downscaled images. */
@media (min-resolution: 2dppx) {
  img {
    image-rendering: high-quality;
  }

  .brand-logo {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ── Backface Visibility (Flicker-Free Transforms) ──
   Prevents GPU rendering artifacts during CSS 3D transforms.
   Eliminates the brief "flicker" on card hover animations. */
.explore-card, .ind-card, .hp-tech-nav-card,
.hp-outcome-card, .p3-card, .cs-card, .ps-card,
.glass-card, .btn {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   WINDOWS-SPECIFIC OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════ */

/* ── Windows High Contrast Mode (forced-colors) ──
   When a Windows user enables High Contrast in Accessibility settings,
   all colors are overridden to system-level colors. This ensures our
   glassmorphism and subtle borders degrade gracefully so nothing
   becomes invisible. Only activates for users with this setting. */
@media (forced-colors: active) {
  /* Ensure all glass cards have a visible border */
  .p3-card, .ind-card, .hp-tech-nav-card,
  .hp-outcome-card, .explore-card, .cs-card,
  .ps-card, .glass-card {
    border: 2px solid ButtonText !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Ensure buttons remain visible and clickable */
  .btn, .btn-primary, .btn-ghost {
    border: 2px solid ButtonText !important;
    forced-color-adjust: none;
  }

  /* Ensure nav is visible */
  .vault-nav {
    border-bottom: 1px solid ButtonText !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Preserve gradient text as regular text */
  .gradient-text, .text-gradient {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: LinkText !important;
  }

  /* Ensure links are visible */
  a {
    color: LinkText !important;
  }

  /* Ensure focus rings are visible */
  :focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px;
  }
}

/* ── Windows ClearType Font Rendering ──
   On Windows, text renders with ClearType subpixel antialiasing.
   font-smooth and text-rendering hints help the browser produce
   the crispest possible glyphs on LCD panels. */
@supports (-ms-accelerator: true) or (-ms-ime-align: auto) {
  body {
    font-smooth: always;
  }
}

/* Optimized letter-spacing for Windows - text can appear slightly
   tighter on Windows than macOS at the same font-size. This subtle
   adjustment maintains visual consistency across platforms. */
@media not all and (min-resolution: 2dppx) {
  h1, h2, h3, .hp-hero-title, .section-heading {
    letter-spacing: -0.01em;
  }

  body {
    letter-spacing: 0.005em;
  }
}

/* ── PWA Window Controls Overlay (Windows 11 / Edge) ──
   When the site is installed as a PWA, the nav bar extends
   into the title bar area. CSS env() variables mark the safe zone
   around the system window controls (minimize/maximize/close). */
@media (display-mode: window-controls-overlay) {
  .vault-nav {
    padding-top: env(titlebar-area-y, 0);
    padding-left: env(titlebar-area-x, 0);
    height: calc(var(--nav-height, 64px) + env(titlebar-area-height, 0px));
  }

  /* Make the nav bar a drag handle for the window */
  .vault-nav-inner {
    -webkit-app-region: drag;
    app-region: drag;
  }

  /* Buttons/links inside nav should NOT be drag handles */
  .vault-nav a,
  .vault-nav button,
  .vault-nav .theme-toggle-wrapper,
  .vault-nav .menu-toggle {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SMOOTH PAGE TRANSITIONS (View Transition API)
   When clicking an internal link, the old page crossfades into
   the new one. GPU-accelerated, no JavaScript animation needed.
   Only applies in browsers that support ::view-transition.
   ═══════════════════════════════════════════════════════════════ */

/* Cross-document navigation transitions (Chrome 126+) */
@view-transition {
  navigation: auto;
}

/* The departing page - fades out */
::view-transition-old(root) {
  animation: asi-page-fade-out 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* The arriving page - fades in */
::view-transition-new(root) {
  animation: asi-page-fade-in 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes asi-page-fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.98); }
}

@keyframes asi-page-fade-in {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

/* Respect reduced motion - instant switch, no animation */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ═══ Responsive Visibility Utilities ═══ */
/* Desktop: hide mobile-only elements */
.mobile-only {
  display: none !important;
}
/* Desktop: show desktop-only elements (default visible) */
.desktop-only {
  display: block;
}
/* Mobile: hide desktop-only, show mobile-only */
@media (max-width: 900px) {
  .desktop-only {
    display: none !important;
  }
}