/* ═══════════════════════════════════════════════
   VINJEY — Design System & Styles
   Color Distribution (60-30-10 Rule):
   - 60% Black / Dark Neutrals: Backgrounds, Deep Surfaces, Slate text
   - 30% Blue: Structural accents, Headers, Badges, Borders, Glows, Tech Elements
   - 10% Vibrant Orange: CTAs, Primary buttons, Key Highlights, Focus Points
   ═══════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────── */
:root {
  /* 60% Black & Dark Neutrals */
  --clr-bg:             #080a0f;           /* Deep obsidian neutral */
  --clr-surface:        #0d121c;           /* Primary dark slate surface */
  --clr-surface-2:      #121824;           /* Card / container surface */
  --clr-surface-3:      #192233;           /* Raised interactive elements */
  --clr-about-bg:       #0b0f18;           /* About section dark backdrop */
  --clr-text:           #f1f5f9;           /* Crisp light slate */
  --clr-text-muted:     #94a3b8;           /* Muted cool grey */
  --clr-text-subtle:    #64748b;           /* Slate metadata / hints */

  /* 30% Blue Brand Structure */
  --clr-blue-deep:      #0a192f;           /* Deep structural navy */
  --clr-blue-dark:      #1d4ed8;           /* Rich cobalt blue */
  --clr-blue:           #2563eb;           /* Vibrant tech blue */
  --clr-blue-light:     #38bdf8;           /* Electric sky blue */
  --clr-blue-dim:       #1e40af;           /* Muted royal blue */
  --clr-blue-subtle:    rgba(56, 189, 248, 0.08);
  --clr-blue-glow:      0 0 20px rgba(56, 189, 248, 0.25);
  --clr-border:         rgba(56, 189, 248, 0.16);
  --clr-border-bright:  rgba(56, 189, 248, 0.42);
  --clr-border-blue:    rgba(37, 99, 235, 0.35);

  /* 10% Vibrant Orange (High Impact Focal Points & CTAs) */
  --clr-orange:         #ff6a00;           /* Radiant electric orange */
  --clr-orange-light:   #ff8533;           /* Hover orange */
  --clr-orange-dim:     #d95700;           /* Deep amber orange */
  --clr-orange-subtle:  rgba(255, 106, 0, 0.12);
  --clr-orange-glow:    0 0 25px rgba(255, 106, 0, 0.45);
  --clr-whatsapp:       #25D366;           /* Official WhatsApp brand green */
  --clr-whatsapp-glow:  0 0 20px rgba(37, 211, 102, 0.35);

  /* Standardized Fluid Typography Scale (Modern Sans-Serif Stack) */
  --font-display:       'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-sans:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-telegraf:      'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:          'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
  
  --text-hero:          clamp(2.8rem, 5.5vw, 4.6rem);
  --text-h1:            clamp(2.0rem, 3.8vw, 3.2rem);
  --text-h2:            clamp(1.4rem, 2.6vw, 2.2rem);
  --text-h3:            clamp(1.15rem, 1.8vw, 1.5rem);
  --text-body:          clamp(0.95rem, 1.15vw, 1.08rem);
  --text-meta:          clamp(0.75rem, 0.9vw, 0.88rem);
  --leading-body:       1.75;

  --nav-h:              80px;
  --rad-sm:             6px;
  --rad-md:             12px;
  --rad-lg:             20px;
  --rad-xl:             32px;
  --transition:         0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-blue:        0 8px 32px rgba(10, 25, 47, 0.6);
  --shadow-card:        0 12px 40px rgba(0, 0, 0, 0.7);

  /* Semantic surfaces (theme-aware) */
  --clr-nav-bg:             rgba(8, 10, 15, 0.85);
  --clr-nav-bg-scrolled:    rgba(8, 10, 15, 0.98);
  --clr-nav-mobile-bg:      rgba(8, 10, 15, 0.98);
  --clr-nav-shadow:         0 4px 30px rgba(0, 0, 0, 0.7);
  --clr-footer-bg:          #06080c;
  --clr-heading-strong:     #ffffff;
  --clr-page-hero-start:    rgba(13, 18, 28, 0.98);
  --clr-page-hero-end:      rgba(8, 10, 15, 1);
  --clr-modal-overlay:      rgba(0, 0, 0, 0.82);
  --clr-slider-arrow-bg:    rgba(8, 10, 15, 0.65);
  --clr-slider-dot:         rgba(255, 255, 255, 0.25);
  --clr-card-bg:            var(--clr-surface-2);
  --clr-input-bg:           var(--clr-surface-3);
  --clr-inline-panel-bg:    rgba(10, 16, 26, 0.7);
  --clr-inline-text:        #ffffff;
}

/* ── Light Theme ───────────────────────────── */
html[data-theme="light"] {
  --clr-bg:             #f4f7fb;
  --clr-surface:        #ffffff;
  --clr-surface-2:      #eef2f8;
  --clr-surface-3:      #e2e8f2;
  --clr-about-bg:       #eef2f8;
  --clr-text:           #0f172a;
  --clr-text-muted:     #475569;
  --clr-text-subtle:    #64748b;
  --clr-blue-deep:      #dbeafe;
  --clr-blue-subtle:    rgba(37, 99, 235, 0.08);
  --clr-border:         rgba(37, 99, 235, 0.14);
  --clr-border-bright:  rgba(37, 99, 235, 0.28);
  --clr-border-blue:    rgba(37, 99, 235, 0.22);
  --shadow-blue:        0 8px 32px rgba(15, 23, 42, 0.08);
  --shadow-card:        0 12px 40px rgba(15, 23, 42, 0.1);
  --clr-nav-bg:             rgba(255, 255, 255, 0.88);
  --clr-nav-bg-scrolled:    rgba(255, 255, 255, 0.96);
  --clr-nav-mobile-bg:      rgba(255, 255, 255, 0.98);
  --clr-nav-shadow:         0 4px 30px rgba(15, 23, 42, 0.08);
  --clr-footer-bg:          #eef2f8;
  --clr-heading-strong:     #0f172a;
  --clr-page-hero-start:    rgba(255, 255, 255, 0.98);
  --clr-page-hero-end:      rgba(244, 247, 251, 1);
  --clr-modal-overlay:      rgba(15, 23, 42, 0.45);
  --clr-slider-arrow-bg:    rgba(255, 255, 255, 0.9);
  --clr-slider-dot:         rgba(15, 23, 42, 0.22);
  --clr-card-bg:            #ffffff;
  --clr-input-bg:           #ffffff;
  --clr-inline-panel-bg:    var(--clr-surface);
  --clr-inline-text:        var(--clr-heading-strong);
}

/* ── Reset & Base ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  color-scheme: dark;
  overflow-x: hidden;
}
html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="light"] body {
  background-color: #f2f5fb;
  background-image:
    /* 6. Subtle SVG noise sparkle (peach particles) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='%23ffb27a'><circle cx='18' cy='42' r='1' opacity='0.55'/><circle cx='160' cy='28' r='1.2' opacity='0.5'/><circle cx='95' cy='110' r='0.9' opacity='0.4'/><circle cx='48' cy='182' r='1.1' opacity='0.55'/><circle cx='202' cy='158' r='1' opacity='0.5'/><circle cx='130' cy='195' r='0.8' opacity='0.4'/></g><g fill='%23ff8f3f'><circle cx='75' cy='16' r='0.7' opacity='0.6'/><circle cx='188' cy='92' r='0.8' opacity='0.55'/><circle cx='10' cy='105' r='0.6' opacity='0.5'/></g></svg>"),
    /* 5. Very subtle warm vignette */
    radial-gradient(ellipse 65% 45% at 50% 120%, rgba(255, 205, 175, 0.35) 0%, transparent 70%),
    /* 4. Bottom-right warm cyan-peach blob */
    radial-gradient(circle 520px at 85% 85%, rgba(173, 216, 255, 0.35) 0%, transparent 65%),
    /* 3. Top-right soft orange/peach glow */
    radial-gradient(circle 460px at 88% 12%, rgba(255, 181, 130, 0.42) 0%, rgba(255, 210, 175, 0.18) 40%, transparent 72%),
    /* 2. Top-left light pink/salmon blob */
    radial-gradient(circle 500px at 8% 10%, rgba(255, 178, 178, 0.32) 0%, rgba(255, 210, 210, 0.12) 42%, transparent 72%),
    /* 1. Center bright cool-white highlight */
    radial-gradient(ellipse 55% 45% at 50% 45%, rgba(255, 255, 255, 0.92) 0%, rgba(238, 245, 255, 0.55) 38%, transparent 72%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 220px 220px, auto, auto, auto, auto, auto;
  background-attachment: fixed;
}

body {
  font-family: var(--font-body);
  background: var(--clr-bg);
  color: var(--clr-text);
  line-height: var(--leading-body);
  font-size: var(--text-body);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
.product-cat-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-blue-light);
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.08);
}
.product-cat-tag.tag-ready {
  color: var(--clr-blue-light);
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.35);
}
.product-cat-tag.tag-dev {
  color: var(--clr-orange);
  background: rgba(255, 106, 0, 0.1);
  border-color: rgba(255, 106, 0, 0.35);
}
.product-cat-tag.tag-roadmap {
  color: var(--clr-orange);
  background: rgba(255, 106, 0, 0.1);
  border-color: rgba(255, 106, 0, 0.35);
}

/* ── Utility ─────────────────────────────── */
.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--clr-text);
  margin-bottom: 24px;
}
.section-title.centered { text-align: center; }

.section-subtitle {
  text-align: center;
  color: var(--clr-text-muted);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto 48px;
}

/* ── Buttons (10% Vibrant Orange CTAs + 30% Blue Outlines) ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--rad-sm);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all var(--transition);
  cursor: pointer;
}

/* Primary CTA = 10% Vibrant Orange */
.btn-primary {
  background: var(--clr-orange);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(255, 106, 0, 0.35);
}
.btn-primary:hover {
  background: var(--clr-orange-light);
  transform: translateY(-2px);
  box-shadow: var(--clr-orange-glow);
}

/* Secondary Button = 30% Blue Outline */
.btn-outline {
  background: transparent;
  color: var(--clr-blue-light);
  border: 1.5px solid var(--clr-border-bright);
}
.btn-outline:hover {
  border-color: var(--clr-orange);
  color: var(--clr-orange);
  background: var(--clr-orange-subtle);
  transform: translateY(-2px);
}
.btn-full { width: 100%; justify-content: center; }

/* ═══════════════════════════════════════════
   NAVBAR (60% Dark Neutral + 30% Blue Structure + 10% Orange Active)
   ═══════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  background: var(--clr-nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--clr-border);
  transition: background var(--transition), box-shadow var(--transition);
}
.navbar.scrolled {
  background: var(--clr-nav-bg-scrolled);
  box-shadow: var(--clr-nav-shadow);
  border-bottom-color: var(--clr-border-bright);
}

.navbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ── VINJEY Logo in Navbar (Unified 2-part Lockup) ─────────────── */
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  transition: opacity var(--transition), transform var(--transition);
  text-decoration: none;
}
.navbar-logo:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

.logo-img-wrap {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #0088FF;
  background: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(0, 136, 255, 0.35), inset 0 0 8px rgba(0, 136, 255, 0.2);
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.logo-text-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  line-height: 1;
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--clr-heading-strong);
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.15);
}
html[data-theme="light"] .logo-text {
  text-shadow: none;
}

.logo-tagline {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FF6B00;
  line-height: 1.2;
  margin-top: 4px;
  display: block;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(255, 107, 0, 0.4);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
}

.nav-link {
  padding: 8px 14px;
  border-radius: var(--rad-sm);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--clr-text-muted);
  transition: all var(--transition);
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 14px; right: 14px;
  height: 2px;
  background: var(--clr-blue-light);
  transform: scaleX(0);
  transition: transform var(--transition), background-color var(--transition);
  border-radius: 2px;
}
.nav-link:hover {
  color: var(--clr-blue-light);
}
.nav-link:hover::after {
  background: var(--clr-blue-light);
  transform: scaleX(1);
}
.nav-link.active {
  color: var(--clr-orange) !important;
  font-weight: 600;
}
.nav-link.active::after {
  background: var(--clr-orange) !important;
  transform: scaleX(1) !important;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

/* In header, hide redundant social icons that overflow and hide theme toggle. Full social links remain in the footer */
.nav-actions .social-icon:not(.whatsapp) {
  display: none !important;
}

.social-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-text-muted);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-2);
  transition: all var(--transition);
  flex-shrink: 0;
}
.social-icon:hover {
  color: var(--clr-blue-light);
  border-color: var(--clr-blue-light);
  background: var(--clr-blue-subtle);
  transform: translateY(-2px);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  padding: 4px;
  border-radius: var(--rad-sm);
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--clr-text);
  border-radius: 2px;
  transition: all var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Audio Vector Sine Wave & Anti-Gravity Animation Canvas - Bottom Docked */
.wave-bg-canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48%;
  z-index: 4;
  pointer-events: none;
  opacity: 0.88;
  vertical-align: bottom;
}

/* ═══════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════ */
.hero,
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 680px;
  max-height: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--clr-bg);
  z-index: 1;
}

.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
  z-index: 1;
}

.hero-slide.active {
  opacity: 1;
  pointer-events: none;
  z-index: 2;
}

.hero-slide.active .hero-cta a,
.hero-slide.active .hero-cta button {
  pointer-events: auto;
}

.hero-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 7s ease;
  filter: brightness(0.55) contrast(1.15);
}
.hero-slide.active .hero-slide-bg {
  transform: scale(1);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(8, 10, 15, 0.4) 0%, rgba(8, 10, 15, 0.82) 70%, rgba(8, 10, 15, 0.95) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 900px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-orange);
  background: var(--clr-orange-subtle);
  border: 1px solid rgba(255, 106, 0, 0.5);
  padding: 6px 20px;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(255, 106, 0, 0.15);
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: #ffffff;
  margin-bottom: 20px;
}
.hero-title em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 50%, #93c5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
}

.hero-subtitle {
  font-size: var(--text-body);
  color: var(--clr-text-muted);
  max-width: 680px;
  margin-bottom: 36px;
  line-height: 1.7;
}

.hero-cta {
  display: flex;
  gap: 16px;
  align-items: center;
  z-index: 5;
}
.hero-cta .btn {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.88rem;
  padding: 13px 28px;
}

/* Slider Controls & Navigation Arrows */
.slider-controls {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 24px;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
}

.slider-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(8, 10, 15, 0.65);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: all var(--transition);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.slider-arrow:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: var(--clr-blue-light);
  color: var(--clr-blue-light);
  transform: scale(1.08);
}

/* Slider Indicators Dots */
.slider-dots {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
  pointer-events: auto;
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}
.slider-dot.active {
  background: var(--clr-orange);
  width: 38px;
  border-radius: 5px;
  box-shadow: 0 0 14px rgba(255, 106, 0, 0.65);
}

/* Scroll Indicator Hint */
.scroll-hint {
  position: absolute;
  bottom: 24px;
  right: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--clr-text-subtle);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 10;
  pointer-events: none;
}
.scroll-hint .scroll-arrow {
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom, var(--clr-orange), transparent);
  animation: scrollPulse 2s infinite ease-in-out;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.4); opacity: 0.3; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ═══════════════════════════════════════════
   BRANDED CUSTOM BULLET POINTS (3-Bar SVG Waveform)
   ═══════════════════════════════════════════ */
.list-custom-bullet,
ul.custom-bullets {
  list-style: none !important;
  padding-left: 0 !important;
}

.list-custom-bullet li,
ul.custom-bullets li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.list-custom-bullet li::before,
ul.custom-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* Stylized 3-Bar Audio Waveform Vector */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='8' width='3.5' height='8' rx='1.75' fill='%2338bdf8'/%3E%3Crect x='10.25' y='3' width='3.5' height='18' rx='1.75' fill='%23ff6a00'/%3E%3Crect x='17.5' y='6' width='3.5' height='12' rx='1.75' fill='%2338bdf8'/%3E%3C/svg%3E");
}

.list-custom-bullet.orange li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='8' width='3.5' height='8' rx='1.75' fill='%23ff8533'/%3E%3Crect x='10.25' y='3' width='3.5' height='18' rx='1.75' fill='%23ff6a00'/%3E%3Crect x='17.5' y='6' width='3.5' height='12' rx='1.75' fill='%23ff8533'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════
   AUDIO EQUALIZER INTERACTIVE CURSOR
   ═══════════════════════════════════════════ */
#audio-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clr-orange);
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: transform 0.08s ease-out, opacity 0.3s;
  box-shadow: 0 0 10px rgba(255, 106, 0, 0.8);
  opacity: 0;
}
#audio-cursor-dot.active-cursor {
  opacity: 1;
}

#audio-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(56, 189, 248, 0.5);
  background: rgba(8, 10, 15, 0.2);
  backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, border-color 0.2s, opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  opacity: 0;
}
#audio-cursor-ring.active-cursor {
  opacity: 1;
}

#audio-cursor-ring .eq-bar {
  width: 2px;
  height: 8px;
  border-radius: 1px;
  background: var(--clr-blue-light);
  transform-origin: center;
  transition: height 0.1s ease;
}

#audio-cursor-ring .eq-bar:nth-child(3) {
  background: var(--clr-orange);
  height: 12px;
}

/* Disable custom cursor on article & reading pages */
.articles-portal-page,
.reading-mode,
body.disable-custom-cursor,
body.disable-custom-cursor * {
  cursor: auto !important;
}
.articles-portal-page #audio-cursor-dot,
.articles-portal-page #audio-cursor-ring,
.corporate-page #audio-cursor-dot,
.corporate-page #audio-cursor-ring,
.careers-page #audio-cursor-dot,
.careers-page #audio-cursor-ring,
body.disable-custom-cursor #audio-cursor-dot,
body.disable-custom-cursor #audio-cursor-ring {
  display: none !important;
}

/* ═══════════════════════════════════════════
   ABOUT US: 2-COLUMN RADIAL VENN VALUE PROPOSITION
   ═══════════════════════════════════════════ */
.about-section {
  background: var(--clr-about-bg);
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}

.about-2col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

/* LEFT COLUMN: Radial Venn Diagram */
.about-venn-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}

/* ═══════════════════════════════════════════
   ABOUT US: 2-COLUMN INTERACTIVE ECOSYSTEM
   ═══════════════════════════════════════════ */
.about-section {
  background: var(--clr-about-bg);
  position: relative;
  padding: 100px 0 110px;
  overflow: hidden;
  z-index: 10;
}

/* ═══════════════════════════════════════════════════════════════════
   UNIFIED CIRCLE / ORBIT DIAGRAM SYSTEM (5-NODE & 6-NODE CONSTELLATIONS)
   ═══════════════════════════════════════════════════════════════════ */

/* 2-Column Split: Diagram Left, Content Right */
.about-split-layout {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.venn-diagram-container,
.codex-constellation-container {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.venn-svg-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.venn-orbit-circle {
  fill: none;
  stroke: rgba(56, 189, 248, 0.22);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
  animation: rotateOrbit 60s linear infinite;
  transform-origin: center;
}

@keyframes rotateOrbit {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.venn-pulse-glow {
  opacity: 0.22;
  animation: coreGlowPulse 4s ease-in-out infinite alternate;
  transform-origin: center;
}

@keyframes coreGlowPulse {
  0%   { transform: scale(0.92); opacity: 0.15; }
  100% { transform: scale(1.08); opacity: 0.35; }
}

/* Central VINJEY Logo Core */
.venn-center-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #080a0f;
  border: 2px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

.venn-hub-logo-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: contain;
  object-position: center center;
  display: block;
  padding: 0;
  box-sizing: border-box;
  margin: 0 auto;
}

.venn-center-hub:hover {
  transform: translate(-50%, -50%) scale(1.06);
  border-color: var(--clr-orange);
  box-shadow: 0 0 32px rgba(255, 106, 0, 0.5);
}

/* Satellite Circular Nodes — Base Style */
.venn-node {
  position: absolute;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, #080a0f 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 6px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  z-index: 6;
  user-select: none;
  overflow: hidden;
  box-sizing: border-box;
}

/* Unified Active Circular Element Glow (Symmetric 360-degree halo, zero artifacts) */
.active-circular-glow,
.venn-node:hover,
.venn-node.active-node {
  border: 1.5px solid var(--clr-orange) !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(25, 34, 51, 0.98) 0%, rgba(255, 106, 0, 0.22) 100%);
  box-shadow: 0 0 24px 6px rgba(255, 106, 0, 0.55) !important;
  z-index: 15;
}

.venn-node-icon {
  margin-bottom: 4px;
  color: var(--clr-blue-light);
  transition: color 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.venn-node-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.venn-node:hover .venn-node-icon,
.venn-node.active-node .venn-node-icon {
  color: var(--clr-orange);
}

.venn-node-label {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.18;
  color: var(--clr-text);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color 0.25s ease;
  display: block;
  max-width: 90px;
}

.venn-node:hover .venn-node-label,
.venn-node.active-node .venn-node-label {
  color: #ffffff;
}

/* ═══════════════════════════════════════════════════════
   5-NODE PENTAGON POSITIONS (About VINJEY & AVAS pages)
   Radius = 36.5% of container
   ═══════════════════════════════════════════════════════ */
.venn-node-1 { top: 13.5%; left: 50%;   transform: translate(-50%, -50%); } /* 0° Top */
.venn-node-2 { top: 38.7%; left: 84.7%; transform: translate(-50%, -50%); } /* 72° Top-Right */
.venn-node-3 { top: 79.5%; left: 71.4%; transform: translate(-50%, -50%); } /* 144° Bottom-Right */
.venn-node-4 { top: 79.5%; left: 28.6%; transform: translate(-50%, -50%); } /* 216° Bottom-Left */
.venn-node-5 { top: 38.7%; left: 15.3%; transform: translate(-50%, -50%); } /* 288° Top-Left */

.venn-node-1:hover, .venn-node-1.active-node,
.venn-node-2:hover, .venn-node-2.active-node,
.venn-node-3:hover, .venn-node-3.active-node,
.venn-node-4:hover, .venn-node-4.active-node,
.venn-node-5:hover, .venn-node-5.active-node {
  transform: translate(-50%, -50%) scale(1.12);
}

/* ═══════════════════════════════════════════════════════
   8-NODE OCTAGON POSITIONS (Audio Codex Pillars page)
   Radius = 36.5% of container, 45° increments
   ═══════════════════════════════════════════════════════ */
.venn-node-oct-1 { top: 13.5%;  left: 50%;    transform: translate(-50%, -50%); } /* 0° Top */
.venn-node-oct-2 { top: 24.2%;  left: 75.8%;  transform: translate(-50%, -50%); } /* 45° Top-Right */
.venn-node-oct-3 { top: 50%;    left: 86.5%;  transform: translate(-50%, -50%); } /* 90° Right */
.venn-node-oct-4 { top: 75.8%;  left: 75.8%;  transform: translate(-50%, -50%); } /* 135° Bottom-Right */
.venn-node-oct-5 { top: 86.5%;  left: 50%;    transform: translate(-50%, -50%); } /* 180° Bottom */
.venn-node-oct-6 { top: 75.8%;  left: 24.2%;  transform: translate(-50%, -50%); } /* 225° Bottom-Left */
.venn-node-oct-7 { top: 50%;    left: 13.5%;  transform: translate(-50%, -50%); } /* 270° Left */
.venn-node-oct-8 { top: 24.2%;  left: 24.2%;  transform: translate(-50%, -50%); } /* 315° Top-Left */

.venn-node-oct-1:hover, .venn-node-oct-1.active-node,
.venn-node-oct-2:hover, .venn-node-oct-2.active-node,
.venn-node-oct-3:hover, .venn-node-oct-3.active-node,
.venn-node-oct-4:hover, .venn-node-oct-4.active-node,
.venn-node-oct-5:hover, .venn-node-oct-5.active-node,
.venn-node-oct-6:hover, .venn-node-oct-6.active-node,
.venn-node-oct-7:hover, .venn-node-oct-7.active-node,
.venn-node-oct-8:hover, .venn-node-oct-8.active-node {
  transform: translate(-50%, -50%) scale(1.12);
}

/* ── Right-Column Proposition Panel ──────────────────────── */
.proposition-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: auto;
  min-height: 420px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(8, 10, 15, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: var(--rad-lg);
  padding: 44px 40px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(56, 189, 248, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: visible;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.proposition-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2.5px;
  background: linear-gradient(90deg, var(--clr-blue-light) 0%, var(--clr-orange) 50%, var(--clr-blue-light) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.proposition-panel.has-content {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 32px rgba(255, 106, 0, 0.08), inset 0 0 40px rgba(56, 189, 248, 0.05);
}

.proposition-panel.has-content::before {
  opacity: 1;
}

/* Empty state */
.prop-empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 16px;
  color: var(--clr-text-muted);
}

.prop-empty-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(56, 189, 248, 0.5);
  animation: softPulse 3s ease-in-out infinite;
}

@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
  50% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0.06); }
}

.prop-empty-state p {
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Active content */
.prop-active-content {
  width: 100%;
  text-align: left;
  animation: panelFadeIn 0.3s ease;
}

/* ═══════════════════════════════════════════
   ABOUT US — Proposition Panel Restyle (Fix #2)
   Matches Audio Codecs page proposition-panel
   ═══════════════════════════════════════════ */
.cs-prop-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: 14px;
}
.cs-prop-eyebrow-rule {
  width: 20px;
  height: 2px;
  background: var(--clr-orange);
  border-radius: 2px;
  flex-shrink: 0;
}

.cs-prop-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.cs-prop-client-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs-prop-client-icon {
  display: none !important;
}
.cs-prop-client-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--clr-text);
}
.cs-prop-outcome-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-orange);
  background: rgba(255, 106, 0, 0.1);
  border: 1px solid rgba(255, 106, 0, 0.35);
  border-radius: 999px;
  padding: 4px 12px;
}

.cs-prop-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
  align-items: stretch;
}
.cs-prop-card {
  background: rgba(15, 23, 32, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px 14px;
  text-align: center;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cs-prop-card:hover {
  border-color: var(--clr-orange);
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(255, 106, 0, 0.15);
}
.cs-prop-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 106, 0, 0.1);
  border: 1px solid rgba(255, 106, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-orange);
}
.cs-prop-card-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.cs-prop-card-sub {
  font-size: 0.64rem;
  color: var(--clr-text-muted);
  line-height: 1.4;
}

.cs-prop-caption {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  text-align: center;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: auto;
}

/* Light theme overrides for About Us proposition panel */
[data-theme="light"] .cs-prop-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .cs-prop-card:hover {
  border-color: var(--clr-orange);
}
[data-theme="light"] .cs-prop-card-title {
  color: #0f172a;
}
[data-theme="light"] .cs-prop-card-sub {
  color: #475569;
}
[data-theme="light"] .cs-prop-client-name {
  color: #0f172a;
}
[data-theme="light"] .cs-prop-caption {
  color: #475569;
  border-top-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .cs-prop-eyebrow {
  color: #475569;
}

@media (max-width: 520px) {
  .cs-prop-cards-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cs-prop-card {
    min-height: auto;
    padding: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   UNIFIED CASE-STUDY CARD HOVER EFFECTS (ROM Worthy + Performance)
   Ensures cs-rom-card, cs-benefit-card, cs-flow-step, cs-robust-card
   all get identical orange border + lift + box-shadow hover affordances.
   Extended: perf-metric-box, mhz-bar-col, stack-layer, feat-algo-item
   Also fixes cs-bar-group pointer-events and translateX(3px) hover.
   ═══════════════════════════════════════════════════════════════════ */

.feat-algo-item {
  background: rgba(10, 16, 26, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.1);
  border-radius: 12px;
  padding: 20px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  pointer-events: auto;
}

.cs-flow-step {
  background: rgba(15, 23, 38, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  pointer-events: auto;
}
.cs-flow-step:hover,
.cs-benefit-card:hover,
.cs-rom-card:hover,
.cs-robust-card:hover,
.perf-metric-box:hover,
.mhz-bar-col:hover,
.stack-layer:hover,
.feat-algo-item:hover {
  border-color: var(--clr-orange) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 18px rgba(255, 106, 0, 0.15) !important;
}

.cs-benefit-card {
  background: rgba(15, 23, 38, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 13px 9px;
  text-align: center;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  pointer-events: auto;
}

.cs-rom-card {
  background: rgba(15, 23, 38, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 11px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  pointer-events: auto;
}

.cs-robust-card {
  background: rgba(15, 23, 38, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 11px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  pointer-events: auto;
}

.cs-mhz-visual {
  background: rgba(10, 16, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 12px;
}
.cs-bar-group {
  margin-bottom: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
}
.cs-bar-group:hover {
  border-color: rgba(255, 106, 0, 0.35) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  transform: translateX(3px) !important;
}

/* Light-theme unified case-study card backgrounds */
html[data-theme="light"] .cs-flow-step,
html[data-theme="light"] .cs-benefit-card,
html[data-theme="light"] .cs-rom-card,
html[data-theme="light"] .cs-robust-card,
html[data-theme="light"] .cs-mhz-visual {
  background: var(--clr-surface);
  border-color: var(--clr-border);
}

.prop-panel-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 106, 0, 0.1);
  border: 1.5px solid rgba(255, 106, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-orange);
  margin: 0 auto 24px;
  box-shadow: 0 0 24px rgba(255, 106, 0, 0.15);
}

@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.prop-panel-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 24px;
  line-height: 1.25;
  position: relative;
  padding-bottom: 16px;
}

.prop-panel-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 40px; height: 2px;
  background: var(--clr-orange);
  border-radius: 2px;
}

.prop-panel-bullets {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: left;
}

.prop-panel-bullets li {
  font-size: 0.96rem;
  color: var(--clr-text);
  line-height: 1.6;
  margin-bottom: 14px;
  padding-left: 24px;
  font-weight: 500;
  position: relative;
}

.prop-panel-bullets li:last-child {
  margin-bottom: 0;
}

/* Responsive: stack on small screens */
@media (max-width: 960px) {
  .about-split-layout,
  .codex-split-layout {
    grid-template-columns: 1fr;
    gap: 36px;
    justify-items: center;
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }
  .about-venn-col {
    min-height: auto;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    padding: 6px 0;
  }
  .venn-diagram-container,
  .codex-constellation-container {
    max-width: 390px;
    width: 100%;
    overflow: visible;
  }
  .venn-node {
    width: 84px;
    height: 84px;
    padding: 6px 4px;
  }
  .venn-node-icon svg {
    width: 16px;
    height: 16px;
  }
  .venn-node-label {
    font-size: 0.56rem;
    line-height: 1.15;
    max-width: 74px;
  }
  .venn-center-hub {
    width: 126px;
    height: 126px;
  }
  .codex-constellation-container .venn-node {
    width: 68px;
    height: 68px;
    padding: 4px 2px;
  }
  .codex-constellation-container .venn-node-label {
    font-size: 0.48rem;
    max-width: 62px;
  }
  .codex-constellation-container .venn-center-hub {
    width: 118px;
    height: 118px;
  }
  .venn-hub-logo-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 50%;
    object-fit: contain;
    object-position: center center;
    display: block;
    padding: 0;
    box-sizing: border-box;
  }
  .proposition-panel {
    width: 100%;
    max-width: 480px;
    min-height: 380px;
    height: auto;
    padding: 32px 28px;
  }
}

@media (max-width: 640px) {
  .about-split-layout,
  .codex-split-layout {
    gap: 28px;
  }
  .venn-diagram-container,
  .codex-constellation-container {
    max-width: 330px;
  }
  .venn-node {
    width: 72px;
    height: 72px;
    padding: 4px 2px;
  }
  .venn-node-icon {
    margin-bottom: 2px;
  }
  .venn-node-icon svg {
    width: 14px;
    height: 14px;
  }
  .venn-node-label {
    font-size: 0.48rem;
    line-height: 1.1;
    max-width: 64px;
  }
  .venn-center-hub {
    width: 108px;
    height: 108px;
  }
  .codex-constellation-container .venn-node {
    width: 58px;
    height: 58px;
    padding: 3px 2px;
  }
  .codex-constellation-container .venn-node-label {
    font-size: 0.42rem;
    max-width: 52px;
  }
  .codex-constellation-container .venn-center-hub {
    width: 100px;
    height: 100px;
  }
  .proposition-panel {
    padding: 26px 22px;
    min-height: auto;
  }
}

@media (max-width: 480px) {
  .about-split-layout,
  .codex-split-layout {
    gap: 24px;
  }
  .about-venn-col {
    padding: 4px 0;
  }
  .venn-diagram-container {
    max-width: 300px;
    width: 100%;
    overflow: visible;
  }
  .codex-constellation-container {
    max-width: 295px;
    width: 100%;
    overflow: visible;
  }
  .venn-node {
    width: 64px;
    height: 64px;
    padding: 3px 2px;
  }
  .venn-node-icon {
    margin-bottom: 1px;
  }
  .venn-node-icon svg {
    width: 13px;
    height: 13px;
  }
  .venn-node-label {
    font-size: 0.43rem;
    line-height: 1.08;
    max-width: 56px;
  }
  .venn-center-hub {
    width: 96px;
    height: 96px;
  }
  .codex-constellation-container .venn-node {
    width: 50px;
    height: 50px;
    padding: 2px 1px;
  }
  .codex-constellation-container .venn-node-icon svg {
    width: 11px;
    height: 11px;
  }
  .codex-constellation-container .venn-node-label {
    font-size: 0.36rem;
    line-height: 1.04;
    max-width: 44px;
  }
  .codex-constellation-container .venn-center-hub {
    width: 88px;
    height: 88px;
  }
  .proposition-panel {
    padding: 22px 18px;
  }
  .prop-panel-title {
    font-size: 1.25rem;
  }
  .prop-panel-bullets li {
    font-size: 0.86rem;
  }
}

@media (max-width: 360px) {
  .venn-diagram-container {
    max-width: 265px;
  }
  .codex-constellation-container {
    max-width: 260px;
  }
  .venn-node {
    width: 56px;
    height: 56px;
    padding: 2px 1px;
  }
  .venn-node-icon svg {
    width: 11px;
    height: 11px;
  }
  .venn-node-label {
    font-size: 0.38rem;
    line-height: 1.04;
    max-width: 50px;
  }
  .venn-center-hub {
    width: 84px;
    height: 84px;
  }
  .codex-constellation-container .venn-node {
    width: 44px;
    height: 44px;
    padding: 2px 1px;
  }
  .codex-constellation-container .venn-node-icon svg {
    width: 9px;
    height: 9px;
  }
  .codex-constellation-container .venn-node-label {
    font-size: 0.32rem;
    line-height: 1.02;
    max-width: 40px;
  }
  .codex-constellation-container .venn-center-hub {
    width: 76px;
    height: 76px;
  }
}

/* ═══════════════════════════════════════════════
   CASE STUDY / VALUE PROPOSITION IMAGE HOVER BOXES
   ══════════════════════════════════════════════ */
.cs-panel {
  padding: 0 !important;
  overflow: hidden;
}
.cs-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--clr-orange), var(--clr-blue-light), var(--clr-orange));
  background-size: 200% 100%;
  animation: shimmerBar 3s ease-in-out infinite;
  z-index: 3;
}
@keyframes shimmerBar { 0%,100%{background-position:0%} 50%{background-position:100%} }

#prop-active-content {
  padding: 22px 24px;
  min-height: 420px;
  height: auto;
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs-image-slot {
  position: relative;
  min-height: 200px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 12px;
  box-sizing: border-box;
}
.cs-image-slot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cs-image-caption {
  display: block;
  margin: 12px auto 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: color 0.25s ease;
}
.cs-image-slot:hover ~ .cs-image-caption,
.cs-image-slot:focus-within ~ .cs-image-caption {
  color: var(--clr-orange);
}

@media (max-width: 960px) {
  #prop-active-content {
    min-height: 380px;
    height: auto;
    padding: 18px 20px;
  }
  .cs-image-slot {
    min-height: 180px;
    height: auto;
    padding: 10px;
  }
  .cs-image-caption {
    font-size: 0.56rem;
  }
}

@media (max-width: 480px) {
  #prop-active-content {
    min-height: 340px;
    padding: 16px 16px;
  }
  .cs-image-slot {
    height: 200px;
    padding: 8px;
  }
  .cs-image-caption {
    font-size: 0.52rem;
  }
}


.about-pillar-card {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  padding: 20px 24px;
  transition: all var(--transition);
}

.about-pillar-card:hover {
  border-color: var(--clr-border-bright);
  background: var(--clr-surface-3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.about-pillar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.about-pillar-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: var(--clr-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-pillar-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}

.about-pillar-desc {
  font-size: 0.9rem;
  color: var(--clr-text-muted);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════
   VISION (60% Neutral + 30% Blue Structure + 10% Orange VU Peaks)
   ═══════════════════════════════════════════ */
.vision-section { background: var(--clr-surface); padding: 100px 0; overflow: hidden; }

.vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.vision-statement {
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.8;
  color: rgba(241, 245, 249, 0.88);
  margin-bottom: 40px;
  font-style: italic;
}

.vision-pillars { display: flex; flex-direction: column; gap: 16px; }
.pillar {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: var(--rad-md);
  border: 1px solid transparent;
  transition: all var(--transition);
  cursor: default;
}
.pillar:hover {
  border-color: var(--clr-border);
  background: var(--clr-surface-2);
}
.pillar-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pillar-icon svg {
  stroke: var(--clr-blue-light) !important;
}
.pillar:hover .pillar-icon {
  border-color: var(--clr-orange);
  background: var(--clr-orange-subtle);
}
.pillar:hover .pillar-icon svg {
  stroke: var(--clr-orange) !important;
}
.pillar-text h4 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; color: var(--clr-text); }
.pillar-text p { font-size: 0.85rem; color: var(--clr-text-muted); }

.vision-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.vu-meter {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 80px;
  padding: 0 4px;
  margin-bottom: 8px;
}
.vu-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  animation: vuPulse 1.8s ease-in-out infinite;
  animation-delay: var(--delay);
  height: var(--h);
  background: linear-gradient(to top, var(--clr-blue-dark), var(--clr-blue-light), var(--clr-orange));
}
@keyframes vuPulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.35); }
}
.vision-image {
  width: 100%;
  border-radius: var(--rad-lg);
  object-fit: cover;
  height: 280px;
  border: 1px solid var(--clr-border);
}

/* ═══════════════════════════════════════════
   MISSION
   ═══════════════════════════════════════════ */
.mission-section { background: var(--clr-bg); padding: 100px 0; }

.mission-statement {
  text-align: center;
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.8;
  color: rgba(241, 245, 249, 0.85);
  max-width: 780px;
  margin: 0 auto 60px;
  font-style: italic;
}

.mission-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mission-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  padding: 36px 28px;
  transition: all var(--transition);
  cursor: default;
}
.mission-card:hover {
  border-color: var(--clr-blue-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow-blue);
}
.mission-card.featured {
  border-color: var(--clr-blue);
  background: var(--clr-surface-2);
}
.mission-card.featured:hover {
  border-color: var(--clr-orange);
  box-shadow: 0 8px 32px rgba(255, 106, 0, 0.2);
}
.mission-card-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--clr-blue-dim);
  margin-bottom: 16px;
}
.mission-card.featured .mission-card-num { color: var(--clr-orange); }
.mission-card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 12px; }
.mission-card.featured h3 { color: var(--clr-blue-light); }
.mission-card p { font-size: 0.88rem; color: var(--clr-text-muted); line-height: 1.7; }

/* ═══════════════════════════════════════════
   PRODUCTS
   ═══════════════════════════════════════════ */
.section-badge {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0 auto 20px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-orange);
  background: var(--clr-orange-subtle);
  border: 1px solid rgba(255, 106, 0, 0.35);
  padding: 6px 18px;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(255, 106, 0, 0.15);
}

.products-section { background: var(--clr-surface); padding: 100px 0; }

.product-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

/* Home-page inline search bar */
.hp-search-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  border-radius: 40px;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  cursor: text;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.hp-search-wrap:focus-within {
  border-color: var(--clr-blue-light);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
  color: var(--clr-blue-light);
}
.hp-search-input {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--clr-text);
  width: 160px;
}
.hp-search-input::placeholder { color: var(--clr-text-muted); }
.hp-search-input::-webkit-search-cancel-button { opacity: 0.5; cursor: pointer; }
.filter-btn {
  padding: 12px 24px;
  border-radius: 40px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-2);
  transition: all var(--transition);
  cursor: pointer;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.filter-btn:hover {
  color: var(--clr-blue-light);
  border-color: var(--clr-blue-light);
}
.filter-btn.active {
  background: var(--clr-orange);
  color: #ffffff;
  border-color: var(--clr-orange);
  box-shadow: 0 0 16px rgba(255, 106, 0, 0.4);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.product-card {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  overflow: hidden;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-card:hover {
  border-color: var(--clr-blue-light);
  transform: translateY(-5px);
  box-shadow: var(--shadow-blue);
}
.product-card.hidden { display: none; }

.product-img-wrap {
  position: relative;
  overflow: hidden;
  height: 240px;
  background: #080f1e;
}
.product-img-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  transition: opacity 0.4s ease;
}
.product-card:hover .product-img-wrap img { opacity: 0.92; }
.product-info {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-cat-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-blue-light);
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.08);
  width: fit-content;
}
.product-cat-tag.tag-ready {
  color: var(--clr-blue-light);
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.35);
}
.product-cat-tag.tag-dev {
  color: var(--clr-orange);
  background: rgba(255, 106, 0, 0.1);
  border-color: rgba(255, 106, 0, 0.35);
}
.product-cat-tag.tag-roadmap {
  color: var(--clr-orange);
  background: rgba(255, 106, 0, 0.1);
  border-color: rgba(255, 106, 0, 0.35);
}
.product-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 10px;
  min-height: 2.8rem;
  display: flex;
  align-items: flex-start;
}
.product-tagline {
  font-size: 0.84rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--clr-border);
  margin-top: auto;
}
.product-price { font-size: 0.85rem; font-weight: 700; color: var(--clr-orange); }
.btn-details { font-size: 0.8rem; font-weight: 600; color: var(--clr-blue-light); letter-spacing: 0.04em; transition: color var(--transition); }
.btn-details:hover { color: var(--clr-orange); }

.products-cta-wrap {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
.btn-know-more {
  padding: 14px 36px;
  font-size: 0.95rem;
  border-radius: 40px;
  background: var(--clr-orange);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(255, 106, 0, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all var(--transition);
}
.btn-know-more:hover {
  background: var(--clr-orange-light);
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--clr-orange-glow);
}

/* ═══════════════════════════════════════════
   CATALOG PAGE (products.html)
   ═══════════════════════════════════════════ */
.catalog-page {
  padding-top: var(--nav-h);
}

.catalog-hero {
  position: relative;
  padding: 80px 0 60px;
  background: linear-gradient(180deg, var(--clr-page-hero-start) 0%, var(--clr-page-hero-end) 100%);
  border-bottom: 1px solid var(--clr-border);
  overflow: hidden;
}
.catalog-hero::before {
  content: '';
  position: absolute;
  top: -50%; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 500px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, transparent 70%);
  pointer-events: none;
}
.catalog-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.catalog-pretitle {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-orange);
  margin-bottom: 16px;
  display: block;
}
.catalog-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
}
.catalog-hero p {
  color: var(--clr-text-muted);
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto 36px;
}

/* Catalog Stats Bar */
.catalog-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.stat-card {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  padding: 16px 20px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--clr-orange);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}

/* Search & Filter Controls */
.catalog-controls {
  padding: 32px 0;
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  position: sticky;
  top: var(--nav-h);
  z-index: 900;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.catalog-controls-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.catalog-controls .product-filters {
  margin-bottom: 0;
}
.catalog-search-box {
  position: relative;
  width: 280px;
  max-width: 100%;
  display: flex;
  align-items: center;
}
.catalog-search-box svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-text-muted);
  pointer-events: none;
  z-index: 2;
}
.catalog-search-input,
.products-search-input {
  width: 100%;
  height: 46px;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: 40px;
  padding: 0 20px 0 46px;
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  outline: none;
  transition: all var(--transition);
  box-sizing: border-box;
}
.catalog-search-input:focus,
.products-search-input:focus {
  border-color: var(--clr-blue-light);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

/* Category Sections */
.catalog-main { padding: 60px 0 100px; }
.category-group { margin-bottom: 80px; }
.category-group:last-child { margin-bottom: 0; }
.category-group.hidden { display: none; }

/* Category Header Card */
.category-header-card {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  padding: 24px 28px;
  margin-bottom: 32px;
  transition: all var(--transition);
}
.category-header-card:hover {
  border-color: rgba(56, 189, 248, 0.3);
}
.category-header-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.category-header-card .card-header h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--clr-text);
  margin: 0;
}
.category-header-card .corner-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-blue-light);
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.1);
}
.category-header-card .corner-tag.tag-dev {
  color: var(--clr-orange);
  background: rgba(255, 106, 0, 0.1);
  border-color: rgba(255, 106, 0, 0.35);
  box-shadow: 0 0 12px rgba(255, 106, 0, 0.1);
}
.category-header-card .corner-tag.tag-roadmap {
  color: var(--clr-orange);
  background: rgba(255, 106, 0, 0.1);
  border-color: rgba(255, 106, 0, 0.35);
  box-shadow: 0 0 12px rgba(255, 106, 0, 0.1);
}
.category-header-card .card-description {
  font-size: 0.92rem;
  color: var(--clr-text-muted);
  line-height: 1.65;
  margin: 0;
}

.cat-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid var(--clr-border);
  padding-bottom: 16px;
  margin-bottom: 32px;
  gap: 16px;
  flex-wrap: wrap;
}
.cat-group-title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cat-group-title h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--clr-text);
}
.cat-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cat-badge.badge-ready {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: var(--clr-blue-light);
}
.cat-badge.badge-dev {
  background: rgba(255, 106, 0, 0.12);
  border: 1px solid rgba(255, 106, 0, 0.4);
  color: var(--clr-orange);
}
.cat-badge.badge-soon {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: var(--clr-blue-light);
}
.cat-group-desc {
  color: var(--clr-text-muted);
  font-size: 0.9rem;
}

/* Expanded Catalog Card */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.catalog-card {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition);
  position: relative;
}
.catalog-card:hover {
  border-color: var(--clr-blue-light);
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}
.catalog-card.hidden { display: none; }

/* Catalog card link wrapper */
.catalog-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.catalog-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,136,255,0.7) 0%, rgba(255,106,0,0.6) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 0;
}
.catalog-card-img-overlay span {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
}
.catalog-card:hover .catalog-card-img-overlay { opacity: 1; }

.catalog-card-img-wrap {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: #080f1e;
}
.catalog-card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  transition: opacity 0.4s ease;
}
.catalog-card:hover .catalog-card-img-wrap img { opacity: 0.92; }
.catalog-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.catalog-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.catalog-card-head h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
}
.catalog-card-desc {
  font-size: 0.9rem;
  color: var(--clr-text-muted);
  line-height: 1.65;
  margin-bottom: 20px;
}
.catalog-specs-list {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  padding: 14px 18px;
  margin-bottom: 24px;
}
.catalog-specs-list h4 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: 10px;
}
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  font-size: 0.83rem;
}
.spec-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(56, 189, 248, 0.08);
  padding-bottom: 4px;
  gap: 12px;
  align-items: flex-start;
}
.spec-item span:first-child { color: var(--clr-text-muted); flex-shrink: 0; min-width: 90px; }
.spec-item span:last-child {
  font-weight: 600;
  color: var(--clr-text);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ── Salient Features list (shared: products.html catalog + home cards) ── */
.salient-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.salient-features-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--clr-text);
  line-height: 1.4;
}
.salient-features-list li::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Crect x='1' y='5' width='2' height='6' rx='1' fill='%2338bdf8'/%3E%3Crect x='4.5' y='3' width='2' height='10' rx='1' fill='%2338bdf8'/%3E%3Crect x='8' y='1' width='2.2' height='14' rx='1.1' fill='%23ff6a00'/%3E%3Crect x='11.5' y='4' width='2' height='8' rx='1' fill='%2338bdf8'/%3E%3Crect x='15' y='6' width='1.5' height='4' rx='0.75' fill='%2338bdf8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

/* ── Salient Features panel on home-page product cards ── */
.product-salient-panel {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  padding: 12px 16px;
  margin-bottom: 20px;
  flex: 1;
}
.product-salient-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: 10px;
}


.catalog-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--clr-border);
}
.catalog-price-badge {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--clr-orange);
}

/* Custom Engineering CTA Banner */
.custom-eng-banner {
  margin-top: 80px;
  background: linear-gradient(135deg, rgba(18, 24, 36, 0.95) 0%, rgba(10, 25, 47, 0.95) 100%);
  border: 1.5px solid var(--clr-border-bright);
  border-radius: var(--rad-xl);
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.custom-eng-banner::after {
  content: '';
  position: absolute;
  right: -50px; top: -50px;
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(255, 106, 0, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.custom-eng-text h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 10px;
}
.custom-eng-text p {
  color: var(--clr-text-muted);
  font-size: 0.95rem;
  max-width: 600px;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-stats { grid-template-columns: repeat(2, 1fr); }
  .custom-eng-banner { flex-direction: column; text-align: center; }
}

/* ═══════════════════════════════════════════
   ARTICLES
   ═══════════════════════════════════════════ */
.articles-section { background: var(--clr-bg); padding: 100px 0; }

.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.article-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
}
.article-card:hover {
  border-color: var(--clr-blue-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow-blue);
}
.article-card.featured {
  border-color: var(--clr-orange);
}
.article-card.featured:hover {
  box-shadow: 0 8px 30px rgba(255, 106, 0, 0.3);
}
.article-img-wrap { position: relative; height: 190px; overflow: hidden; }
.article-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.article-card:hover .article-img-wrap img { transform: scale(1.05); }
.article-tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(8, 10, 15, 0.85);
  color: var(--clr-blue-light);
  border: 1px solid var(--clr-border-bright);
}
.featured-tag {
  background: var(--clr-orange) !important;
  color: #ffffff !important;
  border-color: var(--clr-orange) !important;
}
.article-body { padding: 20px; }
.article-date { font-size: 0.75rem; color: var(--clr-text-subtle); margin-bottom: 8px; }
.article-body h3 { font-size: 1rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; }
.article-body p { font-size: 0.83rem; color: var(--clr-text-muted); line-height: 1.6; margin-bottom: 16px; }
.article-read-more { font-size: 0.8rem; font-weight: 600; color: var(--clr-orange); letter-spacing: 0.04em; transition: letter-spacing var(--transition); }
.article-card:hover .article-read-more { letter-spacing: 0.08em; }

/* ═══════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════ */
.contact-section { background: var(--clr-surface); padding: 100px 0; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }

.contact-form-wrap {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-form { display: flex; flex-direction: column; gap: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }

/* Required-field indicator + notice (16.1 / 17.1) — distinct from body copy */
.req-asterisk {
  color: var(--clr-orange);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1em;
  line-height: 1;
  margin-left: 3px;
  vertical-align: text-top;
}
.form-required-notice {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin: -8px 0 0;
}
.form-required-notice .req-asterisk {
  font-size: 1em;
}

/* Careers subject radio group (17.4) — always-expanded selector */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--rad-sm);
  border: 1.5px solid var(--clr-border);
  background: var(--clr-surface-3);
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}
.radio-option:has(input:checked) {
  border-color: var(--clr-orange);
  background: rgba(255, 106, 0, 0.12);
  color: var(--clr-heading-strong);
  font-weight: 600;
}
.radio-option:has(input:focus-visible) {
  outline: 2px solid var(--clr-orange);
  outline-offset: 2px;
}
.radio-option input {
  accent-color: var(--clr-orange);
  width: 16px;
  height: 16px;
}

/* Native select dropdown option readability (16.2) */
.form-group select {
  position: relative;
  z-index: 2;
}
.form-group select option {
  background: var(--clr-surface-2);
  color: var(--clr-text);
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 6px 10px;
}
.form-group label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--clr-text-muted);
  text-transform: uppercase;
}
.form-group input,
.form-group textarea,
.form-group select {
  background: var(--clr-surface-3);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--rad-sm);
  padding: 13px 16px;
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: 0.94rem;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
  resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--clr-orange);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.2);
  outline: none;
}
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
  line-height: 1.4;
}
.form-group select option {
  background: var(--clr-surface-2);
  color: var(--clr-text);
}
.form-group input.error,
.form-group select.error,
.form-group textarea.error { border-color: #ef4444; }
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--clr-text-subtle);
  opacity: 0.85;
}
.form-error { font-size: 0.76rem; color: #f87171; min-height: 1em; }

.form-error-banner {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.1);
  border-radius: var(--rad-md);
  color: #fca5a5;
  font-size: 0.9rem;
  line-height: 1.5;
}

.form-error-banner.form-notice {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.1);
  color: #bae6fd;
}

#contact-submit { position: relative; overflow: hidden; }
#careers-submit { position: relative; overflow: hidden; }
.btn-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  display: none;
  animation: spin 0.8s linear infinite;
}
.btn-text { transition: opacity var(--transition); }
#contact-submit.loading .btn-text { opacity: 0; }
#contact-submit.loading .btn-spinner { display: block; position: absolute; }
#careers-submit.loading .btn-text { opacity: 0; }
#careers-submit.loading .btn-spinner { display: block; position: absolute; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Form Success Confirmation Card ─── */
.form-success-card {
  background: linear-gradient(145deg, rgba(18, 24, 36, 0.95) 0%, rgba(13, 18, 28, 0.98) 100%);
  border: 1px solid rgba(255, 106, 0, 0.4);
  border-radius: var(--rad-lg);
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 106, 0, 0.15);
  animation: fadeInSuccess 0.4s ease forwards;
}

@keyframes fadeInSuccess {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.success-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 106, 0, 0.12);
  border: 2px solid rgba(255, 106, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 0 20px rgba(255, 106, 0, 0.3);
}

.form-success-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: #ffffff;
  margin-bottom: 10px;
}

.success-intro {
  font-size: 0.9rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

.success-details-box {
  background: rgba(8, 10, 15, 0.65);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: var(--rad-md);
  padding: 16px 20px;
  margin-bottom: 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.success-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  gap: 12px;
}

.success-detail-item .lbl {
  color: var(--clr-text-subtle);
  font-weight: 500;
}

.success-detail-item .val {
  color: #ffffff;
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

.success-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.contact-info-card {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  overflow: hidden;
}
.contact-info-card h3 { padding: 20px 24px 0; font-size: 1rem; font-weight: 600; }
.location-map {
  position: relative;
  height: 200px;
  margin: 16px 24px;
  border-radius: var(--rad-md);
  overflow: hidden;
  border: 1px solid var(--clr-border);
  display: block;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  contain: layout paint;
}
.location-map iframe {
  opacity: 0;
  transition: opacity 0.4s ease;
  width: 100%;
  height: 100%;
  display: block;
}
.location-map iframe.loaded {
  opacity: 1;
}
.map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--clr-surface-3);
  z-index: 3;
  color: var(--clr-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: opacity 0.3s ease;
}
.map-loading span {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}
.map-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--clr-border);
  border-top-color: var(--clr-orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.map-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--clr-surface-3);
  z-index: 3;
  color: var(--clr-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  padding: 16px;
}
.map-fallback svg {
  color: var(--clr-orange);
}
.map-fallback a {
  color: var(--clr-blue-light);
  text-decoration: underline;
  font-size: 0.78rem;
  margin-top: 4px;
}
.map-fallback a:hover {
  color: var(--clr-orange);
}
.location-map-link {
  display: block;
}
.location-map:hover {
  border-color: var(--clr-orange);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 106, 0, 0.25);
  transform: translateY(-2px);
}
.location-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.6) brightness(0.75);
  transition: transform 0.4s ease, filter var(--transition);
}
.location-map:hover img {
  transform: scale(1.06);
  filter: saturate(0.9) brightness(0.9);
}
.map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 2;
  transition: transform var(--transition);
}
.location-map:hover .map-pin {
  transform: translate(-50%, -120%) scale(1.15);
}
.map-pin svg { fill: var(--clr-orange) !important; }

.map-overlay-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(8, 10, 15, 0.85);
  backdrop-filter: blur(8px);
  color: #ffffff;
  border: 1px solid rgba(255, 106, 0, 0.5);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all var(--transition);
  z-index: 2;
}
.location-map:hover .map-overlay-badge {
  background: var(--clr-orange);
  color: #ffffff;
  border-color: var(--clr-orange);
  box-shadow: 0 4px 16px rgba(255, 106, 0, 0.5);
}
.map-overlay-badge.mini {
  bottom: 6px;
  right: 6px;
  font-size: 0.65rem;
  padding: 2px 8px;
}

.contact-details { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.contact-detail-row {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.87rem; color: var(--clr-text-muted); line-height: 1.5;
}
.contact-detail-row svg { stroke: var(--clr-blue-light) !important; }
.map-addr-link:hover { color: var(--clr-orange) !important; }

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.footer {
  background: var(--clr-footer-bg);
  border-top: 1px solid var(--clr-border);
  margin-top: 48px;
  padding: 24px 0 0;
}
.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 48px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  align-items: start;
}

.footer-brand-col {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: contain;
}
.brand-text {
  display: flex;
  flex-direction: column;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}
.brand-sub {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clr-orange);
  margin-top: 4px;
}
.footer-brand-col p {
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  max-width: 320px;
}

.footer-nav-wrapper {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-nav-header {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-blue-light);
  margin: 0 0 20px 0;
  padding: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
}
.footer-nav-columns-2 {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  row-gap: 12px;
  justify-content: start;
  text-align: left;
  padding: 0;
  margin: 0 auto;
}

.footer-socials-col {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
}
.footer-socials-header {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-blue-light);
  margin-bottom: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-socials-col .footer-socials-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: fit-content;
}
.footer-socials-col .footer-social {
  width: 44px;
  height: 44px;
  border-radius: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
  transition: all var(--transition);
}
.footer-socials-col .footer-social:hover {
  border-color: var(--clr-blue-light);
  color: var(--clr-blue-light);
  transform: translateY(-2px);
}

.footer-socials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  width: fit-content;
}

.footer-social {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
  transition: all var(--transition);
}

.footer-social:hover {
  border-color: rgba(249, 115, 22, 0.5);
  color: var(--clr-orange);
  transform: translateY(-2px);
}

.footer-socials-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-links-group ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links-group h4 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.footer-link {
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  text-decoration: none;
  transition: color var(--transition);
  text-align: left;
  display: block;
}
.footer-link:hover {
  color: var(--clr-blue-light);
}
.footer-link.active {
  color: var(--clr-orange);
  font-weight: 600;
}

.footer-links-group {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
}
.footer-links-group h4 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.footer-socials-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-social {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
  transition: all var(--transition);
}
.footer-social:hover {
  background: var(--clr-blue);
  border-color: var(--clr-blue);
  color: #ffffff;
  transform: translateY(-2px);
}

.footer-bottom {
  border-top: 1px solid var(--clr-border);
  padding: 24px 0;
  margin-top: 48px;
}
.footer-bottom-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-copyright {
  font-size: 0.82rem;
  color: var(--clr-text-muted);
  text-align: left;
  margin: 0;
}
.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-legal-link {
  font-size: 0.82rem;
  color: var(--clr-text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-legal-link:hover {
  color: var(--clr-blue-light);
}
.footer-legal-sep {
  color: var(--clr-text-subtle);
  font-size: 0.75rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand-col { grid-column: span 1; }
  .footer-nav-wrapper { grid-column: span 2; }
  .footer-socials-col { grid-column: span 1; }
  .footer-links-group { grid-column: span 1; }
}

@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-brand-col { grid-column: span 1; }
  .footer-nav-wrapper { grid-column: span 1; }
  .footer-socials-col { grid-column: span 1; }
  .footer-links-group { grid-column: span 1; }
  .footer-nav-columns {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ═══════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--clr-modal-overlay);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal-overlay[hidden] {
  display: none !important;
}
.modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  display: flex !important;
}

.modal-box {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border-bright);
  border-radius: var(--rad-xl);
  padding: 40px;
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(24px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  scrollbar-width: thin;
  scrollbar-color: var(--clr-border) transparent;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.8);
}
.modal-overlay.visible .modal-box { transform: translateY(0) scale(1); }
.modal-box-wide { max-width: 800px; }
.modal-box-sm { max-width: 480px; }

.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--clr-border);
  transition: all var(--transition);
  cursor: pointer;
}
.modal-close:hover { color: var(--clr-text); border-color: var(--clr-orange); }

/* Product Modal */
.pmodal-img { width: 100%; height: 240px; object-fit: cover; border-radius: var(--rad-md); margin-bottom: 24px; border: 1px solid var(--clr-border); }
.pmodal-cat { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-blue-light); margin-bottom: 8px; }
.pmodal-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin-bottom: 14px; }
.pmodal-desc { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.7; margin-bottom: 24px; }
.pmodal-specs { border-top: 1px solid var(--clr-border); padding-top: 20px; }
.pmodal-specs h4 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-blue-light); margin-bottom: 12px; }
.pmodal-spec-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(56, 189, 248, 0.08);
  font-size: 0.85rem;
  gap: 12px;
  align-items: flex-start;
}
.pmodal-spec-row span:first-child { color: var(--clr-text-muted); flex-shrink: 0; min-width: 110px; }
.pmodal-spec-row span:last-child {
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.pmodal-video-box {
  margin: 20px 0;
  border-radius: var(--rad-md);
  overflow: hidden;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  position: relative;
}

.pmodal-video-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(30, 58, 138, 0.6) 0%, rgba(8, 10, 15, 0.95) 100%);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}

.pmodal-play-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #ff0000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.5);
  transition: transform var(--transition), box-shadow var(--transition);
  margin-bottom: 10px;
}

.pmodal-video-preview:hover .pmodal-play-btn {
  transform: scale(1.1);
  box-shadow: 0 0 35px rgba(255, 0, 0, 0.75);
}

.pmodal-video-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #f1f5f9;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.pmodal-video-note {
  font-size: 0.72rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pmodal-video-note svg {
  color: #ff0000;
}

.pmodal-price { font-size: 1.1rem; font-weight: 700; color: var(--clr-orange); margin: 16px 0 4px; }
.pmodal-actions { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

/* Article Modal */
.amodal-img { width: 100%; height: 260px; object-fit: cover; border-radius: var(--rad-md); margin-bottom: 28px; border: 1px solid var(--clr-border); }
.amodal-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-blue-light); margin-bottom: 8px; }
.amodal-date { font-size: 0.78rem; color: var(--clr-text-subtle); margin-bottom: 12px; }
#article-modal-title { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 20px; line-height: 1.3; }
.amodal-body { font-size: 0.92rem; color: rgba(241, 245, 249, 0.85); line-height: 1.85; }
.amodal-body p { margin-bottom: 16px; }

/* Milestone Modal */
.mmodal-year { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--clr-orange); margin-bottom: 12px; }
.mmodal-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 16px; }
.mmodal-desc { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.7; }

/* ═══════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════ */
.toast-container {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--rad-md);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border-bright);
  font-size: 0.88rem;
  color: var(--clr-text);
  min-width: 280px; max-width: 400px;
  box-shadow: var(--shadow-card);
  animation: toastIn 0.35s ease;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: auto;
}
.toast.toast-success { border-color: rgba(56, 189, 248, 0.6); }
.toast.toast-error { border-color: rgba(239, 68, 68, 0.6); }
.toast-icon { font-size: 1.1rem; flex-shrink: 0; color: var(--clr-orange); }
.toast-msg { flex: 1; }
.toast.removing { opacity: 0; transform: translateX(20px); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.revealed { 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; }

/* ═══════════════════════════════════════════
   INNER PAGE HERO (statutory.html, corporate.html, careers.html)
   ═══════════════════════════════════════════ */
.page-hero-section {
  position: relative;
  padding: calc(var(--nav-h) + 60px) 0 60px;
  background: linear-gradient(180deg, rgba(13, 18, 28, 0.98) 0%, rgba(8, 10, 15, 1) 100%);
  border-bottom: 1px solid var(--clr-border);
  text-align: center;
  overflow: hidden;
}
.page-hero-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 400px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.15;
}
.page-hero-subtitle {
  font-size: var(--text-body);
  color: var(--clr-text-muted);
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════
   ARTICLES PORTAL & READER SYSTEM (articles.html)
   ═══════════════════════════════════════════ */
.articles-portal-page { padding-top: var(--nav-h); }

.article-portal-hero {
  padding: 70px 0 50px;
  background: linear-gradient(180deg, rgba(13, 18, 28, 0.98) 0%, rgba(8, 10, 15, 1) 100%);
  border-bottom: 1px solid var(--clr-border);
  text-align: center;
}
.article-portal-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  margin-bottom: 16px;
}
.article-portal-hero p {
  color: var(--clr-text-muted);
  font-size: 1.05rem;
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Document Type Badges */
.doc-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge-vg {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: var(--clr-blue-light);
}
.badge-van {
  background: rgba(37, 99, 235, 0.2);
  border: 1px solid rgba(37, 99, 235, 0.5);
  color: #93c5fd;
}
.badge-vee {
  background: rgba(255, 106, 0, 0.18);
  border: 1px solid rgba(255, 106, 0, 0.55);
  color: var(--clr-orange);
}

/* Document Metadata Bar */
.doc-meta-banner {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  padding: 24px 28px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.doc-meta-details {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.85rem;
}
.doc-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.doc-meta-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-text-muted);
}
.doc-meta-val {
  font-weight: 600;
  color: var(--clr-text);
}
.doc-meta-val.code {
  font-family: monospace;
  color: var(--clr-orange);
}

.articles-selector-bar {
  padding: 28px 0;
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  position: relative;
  z-index: 10;
}
.articles-selector-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Article Reader Viewport */
.article-reader-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
  padding: 40px 0 100px;
}
.article-reader-layout section[id],
.article-reader-layout div[id],
.article-reader-layout h2,
.article-reader-layout h3 {
  scroll-margin-top: 90px;
}

/* Sticky Table of Contents (TOC) */
.toc-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  padding: 24px 20px;
  max-height: calc(100vh - var(--nav-h) - 40px);
  overflow-y: auto;
  z-index: 50;
  box-shadow: var(--shadow-card);
}
.toc-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-blue-light);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.toc-item { font-size: 0.85rem; }
.toc-item.nested { padding-left: 14px; font-size: 0.8rem; }
.toc-link {
  color: var(--clr-text-muted);
  display: block;
  padding: 6px 10px;
  border-radius: var(--rad-sm);
  transition: all var(--transition);
  border-left: 2px solid transparent;
}
.toc-link:hover {
  color: var(--clr-text);
  background: rgba(56, 189, 248, 0.08);
}
.toc-link.active {
  color: var(--clr-orange);
  border-left-color: var(--clr-orange);
  background: var(--clr-orange-subtle);
  font-weight: 600;
}

/* Article Main Content */
.article-prose {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-xl);
  padding: 48px;
}
.article-prose h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
}
.article-prose h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 40px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--clr-border);
  color: var(--clr-blue-light);
}
.article-prose h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 28px 0 12px;
}
.article-prose p {
  font-size: 0.96rem;
  color: var(--clr-text-muted);
  line-height: 1.85;
  margin-bottom: 20px;
}

/* Video Companion Box */
.video-companion-banner {
  background: linear-gradient(135deg, rgba(18, 24, 36, 0.95) 0%, rgba(10, 25, 47, 0.95) 100%);
  border: 1.5px solid var(--clr-border-bright);
  border-radius: var(--rad-lg);
  padding: 24px 28px;
  margin: 32px 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.video-companion-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.video-icon-box {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--clr-orange);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(255, 106, 0, 0.4);
}
.video-companion-text h4 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.video-companion-text p { font-size: 0.83rem; color: var(--clr-text-muted); margin-bottom: 0; }

/* Explorable Interactive Widget (VEE) */
.explorable-sandbox {
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border-bright);
  border-radius: var(--rad-xl);
  padding: 32px;
  margin: 36px 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.explorable-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.explorable-header h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--clr-blue-light);
}
.explorable-canvas-wrap {
  position: relative;
  background: #040608;
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  height: 220px;
  overflow: hidden;
  margin-bottom: 24px;
}
.explorable-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.explorable-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
.control-slider-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.control-slider-group label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  display: flex;
  justify-content: space-between;
}
.control-slider-group span.val {
  color: var(--clr-orange);
  font-family: monospace;
  font-weight: 700;
}
.control-slider-group input[type="range"] {
  accent-color: var(--clr-orange);
  cursor: pointer;
}
.explorable-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--clr-border);
  padding-top: 20px;
}
.filter-type-toggles { display: flex; gap: 8px; }
.filter-toggle-btn {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--clr-border);
  background: transparent;
  color: var(--clr-text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.filter-toggle-btn.active {
  background: var(--clr-blue);
  color: #ffffff;
  border-color: var(--clr-blue-light);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

/* Code Snippets */
.code-box {
  background: #040608;
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  margin: 24px 0;
  overflow: hidden;
}
.code-box-header {
  background: var(--clr-surface-2);
  border-bottom: 1px solid var(--clr-border);
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--clr-blue-light);
  font-family: monospace;
}
.code-box pre {
  padding: 18px 20px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.86rem;
  color: #f1f5f9;
  line-height: 1.6;
  overflow-x: auto;
}

/* Revision History Section */
.revision-history-section {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1.5px solid var(--clr-border);
}
.revision-history-section h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--clr-blue-light);
  margin-bottom: 20px;
}
.revision-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.revision-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--clr-surface-2);
  border-bottom: 1.5px solid var(--clr-border);
  color: var(--clr-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.revision-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(56, 189, 248, 0.08);
  vertical-align: middle;
}
.revision-table tr:hover td {
  background: rgba(56, 189, 248, 0.04);
}
.rev-badge-current {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(255, 106, 0, 0.15);
  color: var(--clr-orange);
  border: 1px solid rgba(255, 106, 0, 0.4);
  margin-left: 6px;
}
.btn-dl-pdf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--rad-sm);
  border: 1px solid var(--clr-border);
  font-size: 0.78rem;
  color: var(--clr-blue-light);
  transition: all var(--transition);
  cursor: pointer;
}
.btn-dl-pdf:hover {
  background: var(--clr-orange);
  color: #ffffff;
  border-color: var(--clr-orange);
}

/* ═══════════════════════════════════════════
   CLIENTS / PARTNERS CONTINUOUS MARQUEE
   ═══════════════════════════════════════════ */
.clients-section {
  padding: 72px 0 80px;
  background: linear-gradient(180deg, rgba(8, 10, 15, 0.95) 0%, rgba(13, 18, 28, 0.98) 50%, rgba(8, 10, 15, 0.95) 100%);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(56, 189, 248, 0.12);
  border-bottom: 1px solid rgba(56, 189, 248, 0.12);
}

.clients-header {
  text-align: center;
  margin-bottom: 12px;
}

.clients-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--clr-blue-light);
  padding: 4px 16px;
  border-radius: 20px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  margin-bottom: 14px;
}

.marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 24px 40px 10px;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.marquee-track {
  display: flex;
  gap: 36px;
  width: max-content;
  animation: continuous-marquee 68s linear infinite;
  will-change: transform;
}

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

.marquee-item {
  flex: 0 0 auto;
  height: 80px;
  min-width: 190px;
  padding: 12px 32px;
  border-radius: var(--rad-md);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  user-select: none;
}

.marquee-item:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6), 0 0 28px rgba(255, 106, 0, 0.35);
  border-color: var(--clr-orange);
}

.marquee-item img {
  max-height: 48px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ═══════════════════════════════════════════
   MARQUEE OUTER (positions arrows)
   ═══════════════════════════════════════════ */
.marquee-outer {
  position: relative;
  width: 100%;
  overflow: visible;
}

/* ═══════════════════════════════════════════
   MARQUEE MANUAL NAV ARROWS (Item 3 fix)
   ═══════════════════════════════════════════ */
.marquee-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--clr-orange);
  background: var(--clr-surface);
  color: var(--clr-orange);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 4px var(--clr-surface);
  outline: none;
}
.marquee-arrow:hover {
  background: var(--clr-orange);
  color: #fff;
  border-color: var(--clr-orange);
  box-shadow: 0 6px 24px rgba(255, 106, 0, 0.4), 0 0 0 4px var(--clr-surface);
  transform: translateY(-50%) scale(1.08);
}
.marquee-arrow:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
}
.marquee-arrow:active {
  transform: translateY(-50%) scale(0.92);
  box-shadow: 0 2px 8px rgba(255, 106, 0, 0.3), 0 0 0 3px var(--clr-surface);
}
.marquee-arrow.prev { left: -12px; }
.marquee-arrow.next { right: -12px; }
html[data-theme="light"] .marquee-arrow {
  background: #fff;
  border-color: var(--clr-orange);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 0 0 4px #fff;
}
html[data-theme="light"] .marquee-arrow:hover {
  background: var(--clr-orange);
  color: #fff;
  box-shadow: 0 6px 24px rgba(255, 106, 0, 0.25), 0 0 0 4px #fff;
}
@media (max-width: 640px) {
  .marquee-arrow {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25), 0 0 0 3px var(--clr-surface);
  }
  .marquee-arrow.prev { left: -8px; }
  .marquee-arrow.next { right: -8px; }
}

/* Touch / drag scroll */
.marquee-track {
  cursor: grab;
  -webkit-user-drag: none;
}
.marquee-track:active {
  cursor: grabbing;
}
.marquee-track.dragging {
  animation-play-state: paused;
  transition: none;
}

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

/* ═══════════════════════════════════════════
   OUR JOURNEY / TIMELINE GRADIENT (Item 4 fix)
   Smooth blue-to-black transition on large screens
   ═══════════════════════════════════════════ */
.timeline-section {
  background:
    linear-gradient(180deg,
      var(--clr-bg) 0%,
      var(--clr-bg) 40%,
      rgba(30, 58, 95, 0.6) 65%,
      rgba(15, 23, 42, 0.9) 85%,
      #0a101a 100%
    );
}
html[data-theme="light"] .timeline-section {
  background:
    linear-gradient(180deg,
      var(--clr-bg) 0%,
      var(--clr-bg) 40%,
      rgba(148, 163, 184, 0.3) 65%,
      rgba(203, 213, 225, 0.6) 85%,
      #e2e8f0 100%
    );
}

/* ═══════════════════════════════════════════
   FOOTER NAVIGATION ALIGNMENT
   Center "NAVIGATION" heading, left-align links
   ═══════════════════════════════════════════ */
.footer-nav-header {
  margin: 0 0 20px 0;
  padding: 0;
  text-align: center;
  width: 100%;
}
.footer-nav-columns-2 {
  padding: 0;
  margin: 0 auto;
  width: max-content;
  max-width: 100%;
  text-align: left;
  justify-content: start;
}

/* ═══════════════════════════════════════════
   PRODUCTS PAGE HERO TEXT LEGIBILITY (Item 6 fix)
   Add text-shadow + backdrop so copy reads clearly
   ═══════════════════════════════════════════ */
.catalog-hero-inner {
  position: relative;
  z-index: 5;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.5);
}
.catalog-hero-inner::before {
  content: '';
  position: absolute;
  inset: -20px -28px;
  background: rgba(8, 12, 20, 0.55);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  z-index: -1;
}
html[data-theme="light"] .catalog-hero-inner::before {
  background: rgba(255, 255, 255, 0.6);
}
.catalog-hero-inner h1,
.catalog-hero-inner p {
  position: relative;
  z-index: 2;
}

/* ═══════════════════════════════════════════
   INDUSTRY RECOGNITION & AWARDS
   ═══════════════════════════════════════════ */
.awards-section {
  padding: 96px 0 108px;
  position: relative;
  overflow: hidden;
  background-color: var(--clr-bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='%2338bdf8'><circle cx='18' cy='42' r='1' opacity='0.3'/><circle cx='160' cy='28' r='1.2' opacity='0.25'/><circle cx='95' cy='110' r='0.9' opacity='0.2'/><circle cx='48' cy='182' r='1.1' opacity='0.3'/><circle cx='202' cy='158' r='1' opacity='0.25'/><circle cx='130' cy='195' r='0.8' opacity='0.2'/></g><g fill='%23ff6a00'><circle cx='75' cy='16' r='0.7' opacity='0.4'/><circle cx='188' cy='92' r='0.8' opacity='0.35'/><circle cx='10' cy='105' r='0.6' opacity='0.3'/></g></svg>"),
    radial-gradient(ellipse 65% 50% at 50% 110%, rgba(255, 106, 0, 0.18) 0%, transparent 70%),
    radial-gradient(circle 500px at 12% 18%, rgba(56, 189, 248, 0.15) 0%, transparent 65%),
    radial-gradient(circle 460px at 88% 22%, rgba(255, 106, 0, 0.18) 0%, rgba(255, 181, 130, 0.08) 40%, transparent 72%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(30, 58, 138, 0.22) 0%, rgba(8, 10, 15, 0.98) 75%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 220px 220px, auto, auto, auto, auto;
  border-bottom: 1px solid rgba(56, 189, 248, 0.12);
  border-top: 1px solid rgba(255, 106, 0, 0.08);
}

.awards-header {
  text-align: center;
  margin-bottom: 16px;
}

.awards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.award-card {
  background: linear-gradient(145deg, rgba(18, 24, 36, 0.85) 0%, rgba(13, 18, 28, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: var(--rad-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  backdrop-filter: blur(12px);
}

.award-card:hover {
  transform: translateY(-8px);
  border-color: var(--clr-orange);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 30px rgba(255, 106, 0, 0.22);
}

.award-card-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
  pointer-events: none;
  transition: background var(--transition);
}

.award-card:hover .award-card-glow {
  background: radial-gradient(circle, rgba(255, 106, 0, 0.22) 0%, transparent 70%);
}

.award-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 4px;
}

.award-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition);
}

.award-card:hover .award-icon-box {
  transform: scale(1.08);
}

.award-icon-box.gold {
  background: rgba(255, 184, 0, 0.12);
  border: 1px solid rgba(255, 184, 0, 0.35);
  color: #ffb800;
  box-shadow: 0 0 16px rgba(255, 184, 0, 0.2);
}

.award-icon-box.orange {
  background: rgba(255, 106, 0, 0.12);
  border: 1px solid rgba(255, 106, 0, 0.35);
  color: var(--clr-orange);
  box-shadow: 0 0 16px rgba(255, 106, 0, 0.2);
}

.award-icon-box.blue {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: var(--clr-blue-light);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.2);
}

/* Award Content Wrapper - Horizontal Layout */
.award-content-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

/* Award Logo Container - Fixed Size */
.award-logo-container {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--rad-md);
  padding: 12px;
  border: 1px solid rgba(56, 189, 248, 0.1);
}

.award-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Award Text Content */
.award-text-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.award-year-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cbd5e1;
  padding: 4px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.award-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0;
  line-height: 1.35;
}

.award-desc {
  font-size: 0.88rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
  flex: 1;
}

.award-footer {
  border-top: 1px solid rgba(56, 189, 248, 0.12);
  padding-top: 16px;
}

.award-highlight {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--clr-blue-light);
  display: flex;
  align-items: center;
  gap: 6px;
}

.award-highlight::before {
  content: '✦';
  color: var(--clr-orange);
  font-size: 0.8rem;
}

/* ═══════════════════════════════════════════
   WHATSAPP & SOCIAL MEDIA STYLES
   ═══════════════════════════════════════════ */
.social-icon.whatsapp,
.footer-social.whatsapp {
  color: var(--clr-whatsapp);
}
.social-icon.whatsapp:hover,
.footer-social.whatsapp:hover {
  color: #ffffff;
  background: var(--clr-whatsapp);
  border-color: var(--clr-whatsapp);
  box-shadow: var(--clr-whatsapp-glow);
}

/* ── Sound Toggle in Navbar ───────────────── */
.sound-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid var(--clr-border);
  color: var(--clr-blue-light);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  margin-right: 6px;
}
.sound-toggle-btn:hover {
  background: var(--clr-orange-subtle);
  border-color: var(--clr-orange);
  color: var(--clr-orange);
}
.sound-toggle-btn.muted {
  opacity: 0.6;
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--clr-text-muted);
}
.sound-toggle-btn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* ═══════════════════════════════════════════
   BLOG & ARTICLE IMAGE-FIRST GRID (Ittiam Style)
   ═══════════════════════════════════════════ */
.blog-grid-section {
  padding: 40px 0 60px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 36px;
}

.blog-card {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition);
  cursor: pointer;
}

.blog-card:hover {
  border-color: var(--clr-orange);
  transform: translateY(-4px);
  box-shadow: var(--clr-orange-glow), 0 16px 36px rgba(0, 0, 0, 0.7);
}

.blog-card-thumb-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  background: #000;
}

.blog-card-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover .blog-card-thumb-wrap img {
  transform: scale(1.08);
}

.blog-card-badge {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 14px;
  background: rgba(8, 10, 15, 0.85);
  border: 1px solid var(--clr-blue-light);
  color: var(--clr-blue-light);
  backdrop-filter: blur(6px);
}

.blog-card-badge.orange {
  border-color: var(--clr-orange);
  color: var(--clr-orange);
}

.blog-card-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-date {
  font-size: 0.75rem;
  color: var(--clr-text-subtle);
  margin-bottom: 8px;
  display: block;
}

.blog-card-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--clr-heading-strong);
  margin-bottom: 10px;
  line-height: 1.35;
}

.blog-card-excerpt {
  font-size: 0.86rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(56, 189, 248, 0.1);
  padding-top: 14px;
}

.blog-read-more {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--clr-orange);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}

.blog-card:hover .blog-read-more {
  gap: 10px;
}

/* ═══════════════════════════════════════════
   DYNAMIC TABLE OF CONTENTS (TOC) SIDEBAR
   ═══════════════════════════════════════════ */
.toc-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  max-height: calc(100vh - var(--nav-h) - 48px);
  overflow-y: auto;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  padding: 20px;
  scrollbar-width: thin;
}

.toc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--clr-blue-light);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--clr-border);
}

.toc-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toc-item {
  position: relative;
}

.toc-link {
  display: block;
  font-size: 0.82rem;
  color: var(--clr-text-muted);
  padding: 6px 10px;
  border-radius: 4px;
  border-left: 2px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  line-height: 1.4;
}

.toc-link:hover {
  color: #ffffff;
  background: rgba(56, 189, 248, 0.08);
}

.toc-link.active {
  color: var(--clr-orange);
  background: var(--clr-orange-subtle);
  border-left-color: var(--clr-orange);
  font-weight: 600;
}

.toc-item.nested .toc-link {
  padding-left: 20px;
  font-size: 0.78rem;
  color: var(--clr-text-subtle);
}
.toc-item.nested .toc-link.active {
  color: var(--clr-orange);
}

/* ═══════════════════════════════════════════
   CODE SYNTAX HIGHLIGHTING & COPY BUTTON
   ═══════════════════════════════════════════ */
.code-box {
  position: relative;
  background: #05080e !important;
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  margin: 24px 0;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.code-box-header {
  background: #0b111e;
  border-bottom: 1px solid var(--clr-border);
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--clr-blue-light);
  font-family: var(--font-mono);
}

.code-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--clr-text-muted);
  font-size: 0.72rem;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.code-copy-btn:hover {
  background: var(--clr-orange);
  color: #ffffff;
  border-color: var(--clr-orange);
  box-shadow: 0 0 10px rgba(255, 106, 0, 0.4);
}

.code-copy-btn.copied {
  background: var(--clr-blue-light) !important;
  color: #080a0f !important;
  border-color: var(--clr-blue-light) !important;
}

.code-box pre {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.65;
  background: transparent !important;
}

/* Prism.js Dark Engineering Theme Overrides */
code[class*="language-"],
pre[class*="language-"] {
  color: #e2e8f0;
  text-shadow: none;
  font-family: var(--font-mono);
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #64748b;
  font-style: italic;
}

.token.punctuation {
  color: #94a3b8;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
  color: var(--clr-blue-light);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
  color: var(--clr-blue-light);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: var(--clr-orange-light);
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: var(--clr-orange);
}

.token.function,
.token.class-name {
  color: #ffffff;
}

.token.regex,
.token.important,
.token.variable {
  color: var(--clr-orange-light);
}

/* ═══════════════════════════════════════════
   TEAM PAGE STYLES
   ═══════════════════════════════════════════ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}

.team-card {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  overflow: hidden;
  transition: all var(--transition);
}

.team-card:hover {
  border-color: var(--clr-blue-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow-blue);
}

.team-img-wrap {
  width: 100%;
  height: 280px;
  overflow: hidden;
  position: relative;
  background: #0a111e;
}

.team-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s ease;
}

.team-card:hover .team-img-wrap img {
  transform: scale(1.05);
}

.team-role-tag {
  position: absolute;
  bottom: 12px; left: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 16px;
  background: rgba(8, 10, 15, 0.85);
  border: 1px solid var(--clr-orange);
  color: var(--clr-orange);
  backdrop-filter: blur(6px);
}

.team-card-body {
  padding: 24px;
}

.team-card-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.team-card-title {
  font-size: 0.85rem;
  color: var(--clr-blue-light);
  margin-bottom: 12px;
  display: block;
}

.team-card-bio {
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.team-card-socials {
  display: flex;
  gap: 10px;
}

/* ═══════════════════════════════════════════
   CORPORATE PAGE STYLES
   ═══════════════════════════════════════════ */
.corporate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 48px 0;
}

.corp-card {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  padding: 28px;
  transition: all var(--transition);
}

.corp-card:hover {
  border-color: var(--clr-orange);
  transform: translateY(-2px);
}

.corp-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: #ffffff;
  margin-bottom: 12px;
}

.corp-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 40px 0;
}

.corp-stat-card {
  background: var(--clr-surface-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  padding: 24px;
  text-align: center;
}

.corp-stat-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--clr-orange);
  display: block;
}

.corp-stat-lbl {
  font-size: 0.8rem;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════════
   CAREERS PAGE STYLES
   ═══════════════════════════════════════════ */
.careers-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 40px 0;
}

.career-item {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  overflow: hidden;
  transition: border-color var(--transition);
}

.career-item.open {
  border-color: var(--clr-orange);
}

.career-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.career-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 12px;
}

.career-meta-tags {
  display: flex;
  gap: 8px;
}

.career-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.1);
  color: var(--clr-blue-light);
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.career-toggle-icon {
  color: var(--clr-orange);
  transition: transform 0.3s;
}
.career-item.open .career-toggle-icon {
  transform: rotate(180deg);
}

.career-body {
  padding: 0 24px 24px;
  display: none;
  border-top: 1px solid rgba(56, 189, 248, 0.1);
  margin-top: 10px;
  padding-top: 16px;
}
.career-item.open .career-body {
  display: block;
}

/* Modal for Career Application */
.career-apply-modal {
  max-width: 560px !important;
}

/* ═══════════════════════════════════════════
   RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .awards-grid { grid-template-columns: 1fr; gap: 20px; }
  .award-content-wrapper { flex-direction: column; align-items: center; text-align: center; }
  .award-logo-container { width: 100px; height: 100px; margin-bottom: 12px; }
  .award-top { justify-content: center; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .corporate-grid { grid-template-columns: 1fr 1fr; }
  .corp-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .mission-cards { grid-template-columns: 1fr 1fr; }
  .footer-container { grid-template-columns: 1fr 1fr; }
  .footer-nav-columns { grid-template-columns: 1fr; }
  .vision-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-2col-grid { grid-template-columns: 1fr; gap: 40px; }
  .article-reader-layout { grid-template-columns: 1fr; }
  .toc-sidebar { position: relative; top: 0; max-height: none; }
}

@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    background: var(--clr-nav-mobile-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 16px 16px 24px;
    gap: 8px 16px;
    border-bottom: 1px solid var(--clr-border);
    transform: translateY(-16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
    z-index: 999;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav-links::before {
    content: "NAVIGATION";
    grid-column: 1 / -1;
    justify-self: center;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-blue-light);
    padding: 6px 18px;
    margin-bottom: 8px;
    border-radius: 20px;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.25);
  }
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-link { padding: 12px 16px; font-size: 1rem; }

  @media (max-width: 420px) {
    .nav-links {
      grid-template-columns: 1fr;
    }
  }
  .social-icon { display: none; }
  .hamburger { display: flex; }
  .logo-tagline { display: none; }

  .hero-content { padding: calc(var(--nav-h) + 40px) 24px 60px; }
  .hero-title { font-size: clamp(1.8rem, 6vw, 3rem); }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; text-align: center; justify-content: center; }
  
  .about-2col-grid { grid-template-columns: 1fr; }
  .award-content-wrapper { flex-direction: column; align-items: center; text-align: center; }
  .award-logo-container { width: 90px; height: 90px; margin-bottom: 10px; }
  .award-top { justify-content: center; }

  .timeline-v-item { width: 100% !important; left: 0 !important; padding: 0 0 0 36px !important; }
  .timeline-vertical-line { left: 10px; }
  .timeline-v-dot { left: 0px !important; }

  .blog-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .corporate-grid { grid-template-columns: 1fr; }
  .corp-stat-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .articles-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-container { grid-template-columns: 1fr; gap: 32px; }
  .footer-nav-columns { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: left; align-items: flex-start; }
  .modal-box { padding: 24px; }
  .article-prose { padding: 24px; }
}

/* ═══════════════════════════════════════════
   PRODUCT DETAIL PAGES
   ═══════════════════════════════════════════ */
.product-detail-page { padding-top: var(--nav-h); }

.product-detail-hero {
  position: relative;
  padding: 80px 0 70px;
  background: linear-gradient(180deg, var(--clr-page-hero-start) 0%, var(--clr-page-hero-end) 100%);
  border-bottom: 1px solid var(--clr-border);
  overflow: hidden;
}
.product-detail-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,136,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.product-detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-size: 0.8rem;
  color: var(--clr-text-subtle);
}
.product-detail-breadcrumb a {
  color: var(--clr-text-muted);
  transition: color var(--transition);
}
.product-detail-breadcrumb a:hover { color: var(--clr-blue-light); }
.product-detail-breadcrumb span { color: var(--clr-text-subtle); }

.product-detail-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.product-detail-pretag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.product-detail-hero-text h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #fff 30%, var(--clr-blue-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.product-detail-hero-text p {
  font-size: 1.05rem;
  color: var(--clr-text-muted);
  line-height: 1.75;
  margin-bottom: 32px;
}
.product-detail-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.product-detail-hero-img {
  position: relative;
  border-radius: var(--rad-xl);
  overflow: hidden;
  aspect-ratio: 16/10;
  background: #0e1626;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--clr-border);
}
.product-detail-hero-img img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.product-detail-hero-img-badge {
  position: absolute;
  top: 16px; right: 16px;
}

/* Key Highlights Strip */
.product-highlights-strip {
  background: var(--clr-surface-2);
  border-bottom: 1px solid var(--clr-border);
  padding: 40px 0;
}
.product-highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.product-highlight-item {
  text-align: center;
  padding: 20px;
}
.product-highlight-icon {
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  background: rgba(0, 136, 255, 0.1);
  border: 1px solid rgba(0, 136, 255, 0.25);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-blue-light);
}
.product-highlight-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-text-subtle);
  margin-bottom: 6px;
}
.product-highlight-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--clr-text);
}

/* Specs Table Section */
.product-specs-section {
  padding: 80px 0;
}
.product-specs-section .section-title {
  margin-bottom: 48px;
}
.product-specs-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: start;
}
.product-specs-table {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-xl);
  overflow: hidden;
}
.product-specs-table-header {
  padding: 20px 28px;
  background: rgba(0, 136, 255, 0.06);
  border-bottom: 1px solid var(--clr-border);
}
.product-specs-table-header h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clr-blue-light);
}
.product-specs-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--clr-border);
  transition: background var(--transition);
}
.product-specs-row:last-child { border-bottom: none; }
.product-specs-row:hover { background: rgba(255,255,255,0.02); }
.product-specs-key {
  flex: 0 0 160px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--clr-text-muted);
  text-transform: uppercase;
}
.product-specs-val {
  font-size: 0.9rem;
  color: var(--clr-text);
  line-height: 1.5;
}

/* Use Cases Panel (Clean Bullet Spacing) */
.product-use-cases {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-xl);
  padding: 30px 28px;
}
.product-use-cases h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-blue-light);
  margin-bottom: 20px;
}
.product-use-case-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: none;
  font-size: 0.88rem;
  color: var(--clr-text);
  line-height: 1.5;
}
.product-use-case-item:last-child { border-bottom: none; }
.product-use-case-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clr-orange);
  flex-shrink: 0;
}

/* Product Enquiry CTA */
.product-cta-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--clr-surface-2) 0%, rgba(8,10,15,1) 100%);
  border-top: 1px solid var(--clr-border);
}
.product-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.product-cta-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 16px;
}
.product-cta-inner p {
  font-size: 1.05rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
  margin-bottom: 36px;
}
.product-cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Product — Coming Soon placeholder pages */
.product-coming-soon {
  position: relative;
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px 0;
}
.product-coming-soon-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 640px;
}
.product-coming-soon-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-blue-light);
  margin: 32px 0 20px;
}
.product-coming-soon-heading {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #ffffff;
  margin: 0 0 40px;
  text-shadow: 0 0 60px rgba(255, 106, 0, 0.25);
}
.product-coming-soon .product-detail-breadcrumb {
  justify-content: center;
}

@media (max-width: 1024px) {
  .product-detail-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .product-highlights-grid { grid-template-columns: repeat(2, 1fr); }
  .product-specs-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .product-highlights-grid { grid-template-columns: repeat(2, 1fr); }
  .product-specs-key { flex: 0 0 120px; }
  .catalog-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   AUDIO CODEX ECOSYSTEM SECTION
   ═══════════════════════════════════════════ */

.codex-ecosystem-section {
  padding: 60px 0 90px;
  background: radial-gradient(ellipse 70% 60% at 50% 20%, rgba(15, 23, 42, 0.95) 0%, rgba(8, 10, 15, 1) 100%);
  border-bottom: 1px solid var(--clr-border);
  position: relative;
  overflow: hidden;
}

.codex-split-layout {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 40px;
}

/* Constellation 6-node Container */
.codex-constellation-container {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 auto;
}

.codex-constellation-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.codex-orbit-line {
  fill: none;
  stroke: rgba(56, 189, 248, 0.2);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  animation: rotateOrbit 70s linear infinite;
  transform-origin: 250px 250px;
}

.codex-inner-orbit {
  fill: none;
  stroke: rgba(255, 106, 0, 0.25);
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
  animation: rotateOrbit 45s linear infinite reverse;
  transform-origin: 250px 250px;
}

.codex-hexagon-wire {
  fill: none;
  stroke: rgba(56, 189, 248, 0.16);
  stroke-width: 1.2;
  stroke-dasharray: 6 6;
}

/* Center Hub */
.codex-center-hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 174px; height: 174px;
  border-radius: 50%;
  background: radial-gradient(circle, #1a2333 0%, #0a1424 100%);
  border: 2px solid var(--clr-orange);
  box-shadow: 0 0 28px rgba(255, 106, 0, 0.45), 0 0 50px rgba(56, 189, 248, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  text-align: center;
  pointer-events: none;
}
.codex-hub-tag {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: var(--clr-blue-light);
  text-transform: uppercase;
  font-weight: 700;
}
.codex-hub-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #ffffff;
  line-height: 1.2;
  margin-top: 2px;
}

/* Orange bubble styles removed as requested */

/* ── Micro Animation Keyframes for Bubble Icons ── */
@keyframes barBounce1 { 0%, 100% { height: 4px; } 50% { height: 16px; } }
@keyframes barBounce2 { 0%, 100% { height: 16px; } 50% { height: 6px; } }
@keyframes barBounce3 { 0%, 100% { height: 8px; } 50% { height: 20px; } }
@keyframes barBounce4 { 0%, 100% { height: 18px; } 50% { height: 8px; } }

.anim-bar-1 { animation: barBounce1 1.2s ease-in-out infinite; }
.anim-bar-2 { animation: barBounce2 1.1s ease-in-out infinite 0.15s; }
.anim-bar-3 { animation: barBounce3 1.3s ease-in-out infinite 0.3s; }
.anim-bar-4 { animation: barBounce4 1.0s ease-in-out infinite 0.45s; }

@keyframes batteryPulse {
  0%   { width: 3px; }
  50%  { width: 14px; }
  100% { width: 3px; }
}
.anim-battery-fill { animation: batteryPulse 2s ease-in-out infinite; }

@keyframes radarSweep {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.anim-radar { transform-origin: 12px 12px; animation: radarSweep 4s linear infinite; }

@keyframes chipGlow {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}
.anim-chip-dot { animation: chipGlow 1.8s ease-in-out infinite; }

@keyframes gaugeOscillate {
  0%   { transform: rotate(-35deg); }
  50%  { transform: rotate(40deg); }
  100% { transform: rotate(-35deg); }
}
.anim-gauge-needle { transform-origin: 12px 14px; animation: gaugeOscillate 2.5s ease-in-out infinite; }

@keyframes shieldPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.12); opacity: 1; }
}
.anim-shield { transform-origin: 12px 12px; animation: shieldPulse 2.2s ease-in-out infinite; }

/* ── Right Column Codex Panel ────────────────────────── */
.codex-detail-panel {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(8, 12, 20, 0.96) 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--rad-xl);
  padding: 36px 40px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(56, 189, 248, 0.04);
  backdrop-filter: blur(12px);
  min-height: 520px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.codex-detail-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--clr-blue-light) 0%, var(--clr-orange) 50%, var(--clr-blue-light) 100%);
}

.codex-panel-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.codex-panel-subhead {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-orange);
  margin-bottom: 6px;
  display: block;
}
.codex-panel-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
}

/* Interactive Slide/Diagram Views */
.codex-diagram-view {
  animation: panelFadeIn 0.35s ease;
}

/* 1. CHOSEN QUALITY DIAGRAMS */
.codex-quality-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.quality-box {
  background: rgba(10, 16, 26, 0.8);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  padding: 16px;
}
.quality-box-head {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}
.quality-box-head span { color: var(--clr-text-muted); font-weight: 400; font-size: 0.75rem; }
.quality-box-desc { font-size: 0.78rem; color: var(--clr-text-muted); margin-bottom: 12px; }

.pipeline-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.pipe-block {
  padding: 6px 14px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: monospace;
  color: var(--clr-blue-light);
}
.pipe-nodes {
  display: flex;
  gap: 16px;
  align-items: center;
}
.p-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.p-dot.active-red {
  background: var(--clr-orange);
  box-shadow: 0 0 10px rgba(255, 106, 0, 0.6);
}

/* 2D Coordinate Plot */
.codex-coord-plot {
  background: rgba(8, 12, 18, 0.85);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  padding: 18px 20px;
  position: relative;
}
.coord-plot-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: 12px;
}
.coord-axes-wrap {
  position: relative;
  height: 160px;
  margin: 10px 30px 24px 40px;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.axis-label-y-high { position: absolute; top: -10px; left: -36px; font-size: 0.7rem; color: var(--clr-text-muted); }
.axis-label-y-low  { position: absolute; bottom: -8px; left: -32px; font-size: 0.7rem; color: var(--clr-text-muted); }
.axis-label-x-large { position: absolute; bottom: -20px; left: 0; font-size: 0.7rem; color: var(--clr-text-muted); }
.axis-label-x-small { position: absolute; bottom: -20px; right: 0; font-size: 0.7rem; color: var(--clr-text-muted); }
.axis-title-y { position: absolute; top: 45%; left: -68px; transform: rotate(-90deg); font-size: 0.72rem; color: var(--clr-text-muted); }
.axis-title-x { position: absolute; bottom: -32px; left: 35%; font-size: 0.72rem; color: var(--clr-text-muted); }

.plot-point {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
}
.plot-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}
.plot-label {
  font-size: 0.72rem;
  color: var(--clr-text-muted);
  white-space: nowrap;
}
.plot-point.point-ours .plot-dot {
  width: 14px; height: 14px;
  background: var(--clr-orange);
  box-shadow: 0 0 14px rgba(255, 106, 0, 0.6);
}
.plot-point.point-ours .plot-label {
  color: #ffffff;
  font-weight: 700;
}

/* 2. PERFORMANCE BENEFIT CARDS */
.codex-perf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.perf-benefit-card {
  background: rgba(15, 23, 38, 0.85);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  padding: 20px 16px;
  text-align: center;
  transition: transform var(--transition);
}
.perf-benefit-card:hover {
  transform: translateY(-4px);
  border-color: var(--clr-orange);
}
.perf-icon-badge {
  font-size: 2rem;
  color: var(--clr-orange);
  margin-bottom: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
}
.perf-title { font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.perf-desc { font-size: 0.78rem; color: var(--clr-text-muted); line-height: 1.4; }

/* 3. FIELD PROVEN TIMELINE */
.codex-proven-flow {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 16px;
}
.proven-track {
  background: rgba(10, 16, 26, 0.8);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  padding: 16px 20px;
  transition: transform var(--transition), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  cursor: pointer;
}
.proven-track:hover {
  transform: translateY(-2px);
  border-color: var(--clr-orange);
  box-shadow: var(--clr-orange-glow), 0 8px 24px rgba(0, 0, 0, 0.25);
}
.proven-track-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-blue-light);
  margin-bottom: 14px;
}
.proven-steps {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding-top: 8px;
}
.proven-steps::before {
  content: '';
  position: absolute;
  top: 14px; left: 20px; right: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  z-index: 1;
}
.proven-step {
  flex: 1;
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 6px;
}
.step-node-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  margin: 0 auto 10px;
  border: 2px solid rgba(15, 23, 42, 1);
}
.step-node-dot.active-red {
  background: var(--clr-orange);
  box-shadow: 0 0 12px rgba(255, 106, 0, 0.6);
}
.step-node-title { font-size: 0.82rem; font-weight: 700; color: #ffffff; margin-bottom: 4px; }
.step-node-desc { font-size: 0.72rem; color: var(--clr-text-muted); line-height: 1.35; }

/* 4. ROM WORTHY STACK */
.codex-stack-container {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 16px;
}
.stack-layers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stack-layer {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  padding: 12px 16px;
  text-align: center;
  font-size: 0.84rem;
  color: var(--clr-text);
  font-weight: 500;
  transition: transform var(--transition), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  cursor: pointer;
}
.stack-layer:hover {
  transform: translateY(-2px);
  border-color: var(--clr-orange);
  box-shadow: var(--clr-orange-glow), 0 8px 24px rgba(0, 0, 0, 0.25);
  background: rgba(255, 106, 0, 0.04);
}
.stack-layer.highlight-rom {
  background: var(--clr-orange);
  border-color: var(--clr-orange);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(255, 106, 0, 0.4);
}
.stack-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.stack-annotation {
  border-left: 2px solid var(--clr-orange);
  padding-left: 16px;
}
.stack-ann-highlight {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--clr-orange);
  margin-bottom: 6px;
}
.stack-ann-sub {
  font-size: 0.8rem;
  color: var(--clr-text-muted);
}

/* 5. MHZ BUDGET BAR COMPARISON */
.codex-mhz-chart {
  background: rgba(10, 16, 26, 0.8);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  padding: 24px;
  margin-top: 16px;
  position: relative;
}
.mhz-chart-head {
  font-size: 0.82rem;
  color: var(--clr-text-muted);
  margin-bottom: 24px;
}
.mhz-bars-wrap {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 180px;
  position: relative;
  padding-top: 30px;
}
.mhz-limit-line {
  position: absolute;
  top: 60px; left: 0; right: 0;
  border-top: 1.5px dashed rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: flex-end;
  padding-right: 8px;
}
.mhz-limit-tag {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.6);
  transform: translateY(-16px);
}
.mhz-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140px;
  z-index: 2;
  transition: transform var(--transition);
  cursor: pointer;
  padding: 8px 6px;
  border-radius: var(--rad-md);
  border: 1px solid transparent;
}
.mhz-bar-col:hover {
  transform: translateY(-2px);
  border-color: var(--clr-orange);
  background: rgba(255, 106, 0, 0.04);
  box-shadow: var(--clr-orange-glow);
}
.mhz-bar-val {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.mhz-bar-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
}
.mhz-bar-fill.bar-over {
  height: 110px;
  background: #a3a3a3;
  color: #fff;
}
.mhz-bar-fill.bar-win {
  height: 80px;
  background: var(--clr-orange);
  box-shadow: 0 0 20px rgba(255, 106, 0, 0.5);
}
.mhz-bar-lbl {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  margin-top: 10px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.mhz-bar-sub {
  font-size: 0.7rem;
  color: var(--clr-text-muted);
  text-align: center;
}

/* 6. ROBUSTNESS GRID */
.codex-robustness-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.robust-card {
  background: rgba(15, 23, 38, 0.85);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  padding: 16px;
  transition: transform var(--transition), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  cursor: pointer;
}
.robust-card:hover {
  transform: translateY(-2px);
  border-color: var(--clr-orange);
  box-shadow: var(--clr-orange-glow), 0 8px 24px rgba(0, 0, 0, 0.25);
  background: rgba(255, 106, 0, 0.04);
}
.robust-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--clr-blue-light);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.robust-card-desc {
  font-size: 0.78rem;
  color: var(--clr-text-muted);
  line-height: 1.45;
}

@media (max-width: 1024px) {
  .codex-split-layout { grid-template-columns: 1fr; gap: 40px; }
  .codex-constellation-container { max-width: 440px; }
  .codex-stack-container { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .codex-perf-grid { grid-template-columns: 1fr; }
  .codex-robustness-grid { grid-template-columns: 1fr; }
  .codex-quality-split { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   AUDIO CODEX: SALIENT FEATURES & 3-PART CATALOGUE
   ═══════════════════════════════════════════ */

/* Salient Features 9-Grid */
.salient-features-section {
  padding: 70px 0 80px;
  background: var(--clr-surface-2);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}
.salient-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.salient-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  padding: 26px 22px;
  position: relative;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.salient-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--rad-lg) var(--rad-lg) 0 0;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.25), transparent);
  transition: background var(--transition);
}
.salient-card:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}
.salient-card:hover::before {
  background: linear-gradient(90deg, transparent, var(--clr-orange), transparent);
}
.salient-card-num {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--clr-orange);
  font-family: 'Outfit', monospace;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  display: inline-block;
}
.salient-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.35;
}
.salient-card-desc {
  font-size: 0.84rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
}

/* 3-Part Catalogue Section & Tabs */
.codex-catalogue-section {
  padding: 80px 0 90px;
  background: linear-gradient(180deg, rgba(8, 10, 15, 1) 0%, rgba(13, 18, 28, 0.95) 100%);
  position: relative;
}
.catalogue-tab-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 36px auto 40px;
  padding: 6px 8px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--clr-border);
  border-radius: 50px;
  width: fit-content;
  max-width: 100%;
  backdrop-filter: blur(10px);
  box-sizing: border-box;
}
.cat-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: 40px;
  border: none;
  background: transparent;
  color: var(--clr-text-muted);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.cat-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}
.cat-tab-btn.active {
  background: linear-gradient(135deg, var(--clr-orange) 0%, #ff8c33 100%);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(255, 106, 0, 0.35);
}
.cat-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.15);
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.2;
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-tab-btn.active .cat-tab-badge {
  background: rgba(0, 0, 0, 0.25);
  color: #ffffff;
}

@media (max-width: 900px) {
  .catalogue-tab-nav {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    width: 100%;
    padding: 6px;
    gap: 6px;
  }
  .cat-tab-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.80rem;
    gap: 8px;
    white-space: normal;
  }
  .cat-tab-btn svg {
    flex-shrink: 0;
  }
  .cat-tab-btn span:not(.cat-tab-badge) {
    flex: 1;
    text-align: left;
    white-space: normal;
    font-size: 0.80rem;
    line-height: 1.25;
  }
  .cat-tab-badge {
    font-size: 0.62rem;
    padding: 3px 8px;
    border-radius: 12px;
    flex-shrink: 0;
    margin-left: auto;
  }
}

/* Tab Content Wrappers */
.catalogue-tab-pane {
  display: none;
  animation: panelFadeIn 0.35s ease forwards;
}
.catalogue-tab-pane.active {
  display: block;
}

/* Table Controls: Search & Availability Filters */
.cat-table-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

/* CPU Performance Calculator Card (6.1.1 Panels: Equal Width & Height) */
.perf-calc-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.perf-calc-controls {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-xl);
  padding: 32px 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.perf-calc-controls h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}
.perf-calc-controls p {
  font-size: 0.82rem;
  color: var(--clr-text-muted);
  line-height: 1.5;
  margin-bottom: 24px;
}
.calc-field-group {
  margin-bottom: 16px;
}
.calc-field-group:last-child {
  margin-bottom: 0;
}
.calc-field-group label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-blue-light);
  margin-bottom: 8px;
}
.calc-select {
  width: 100%;
  padding: 11px 14px;
  background: #0b1120;
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  color: #ffffff;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color var(--transition);
  box-sizing: border-box;
}
.calc-select:focus {
  outline: none;
  border-color: var(--clr-orange);
}

/* Performance Results Output Panel (Matched Card Visuals) */
.perf-calc-output {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-xl);
  padding: 32px 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.perf-calc-output::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-orange), var(--clr-blue-light), var(--clr-orange));
}
.perf-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--clr-border);
}
.perf-output-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
}
.perf-output-target {
  font-size: 0.75rem;
  color: var(--clr-orange);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 106, 0, 0.1);
  border: 1px solid rgba(255, 106, 0, 0.3);
  padding: 4px 12px;
  border-radius: 12px;
}

.perf-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
  flex: 1;
}
.perf-conditions-banner {
  margin-top: auto;
}

.cat-search-wrap {
  position: relative;
  flex: 1;
  max-width: 380px;
}
.cat-search-wrap svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-text-muted);
  pointer-events: none;
}
.cat-search-input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  color: #ffffff;
  font-size: 0.85rem;
  transition: border-color var(--transition);
}
.cat-search-input:focus {
  outline: none;
  border-color: var(--clr-orange);
}
.cat-filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cat-pill-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--clr-border);
  background: rgba(15, 23, 42, 0.6);
  color: var(--clr-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cat-pill-btn:hover {
  color: #ffffff;
  border-color: rgba(56, 189, 248, 0.4);
}
.cat-pill-btn.active {
  background: rgba(0, 136, 255, 0.15);
  border-color: var(--clr-blue-light);
  color: var(--clr-blue-light);
}

/* Master Catalogue Data Table */
.cat-table-wrap {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-xl);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.cat-table-scroll {
  overflow-x: auto;
}
.cat-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.85rem;
}
.cat-data-table th {
  padding: 16px 20px;
  background: rgba(10, 16, 26, 0.95);
  border-bottom: 1px solid var(--clr-border);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-blue-light);
  white-space: nowrap;
}
.cat-data-table td {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--clr-text);
  vertical-align: middle;
}
.cat-data-table tbody tr {
  transition: background var(--transition);
}
.cat-data-table tbody tr:hover {
  background: rgba(0, 136, 255, 0.04);
}
.cat-data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Table Cells Formatting */
.format-name-lockup {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.format-primary-title {
  font-weight: 700;
  color: var(--clr-heading-strong);
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.format-code-tag {
  font-size: 0.68rem;
  font-family: monospace;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.12);
  color: var(--clr-blue-light);
  border: 1px solid rgba(56, 189, 248, 0.25);
}
.methodology-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}
.format-oneliner {
  font-size: 0.76rem;
  color: var(--clr-text-muted);
  line-height: 1.35;
}
.lineage-badge {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--clr-blue-light);
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 4px;
  padding: 1px 5px;
  margin-top: 3px;
  width: fit-content;
}

.cell-check {
  font-weight: 700;
  color: var(--clr-blue-light);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cell-dash {
  color: var(--clr-text-subtle);
  font-weight: 600;
}

/* Status Badges */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.status-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
}
.status-avail,
.status-available {
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
}
.status-avail::before,
.status-available::before { background: #4ade80; box-shadow: 0 0 6px #4ade80; }

.status-dev,
.status-in-dev {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}
.status-dev::before,
.status-in-dev::before { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }

.status-roadmap {
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}
.status-roadmap::before { background: #cbd5e1; }

/* 7.2.2 — Audio Processing matrix platform availability (Available / Not Available only) */
.dsp-avail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #4ade80;
  white-space: nowrap;
}
.dsp-avail::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
}
.dsp-na {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--clr-text-subtle);
  white-space: nowrap;
}

/* Datasheet Action Button */
.btn-datasheet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--rad-md);
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: rgba(0, 136, 255, 0.08);
  color: var(--clr-blue-light);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-datasheet:hover {
  background: var(--clr-blue-light);
  color: #080a0f;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}
.btn-datasheet.coming-soon {
  cursor: default;
  opacity: 0.85;
  border-style: dashed;
  background: rgba(255, 106, 0, 0.08);
  border-color: rgba(255, 106, 0, 0.35);
  color: var(--clr-orange);
}
.btn-datasheet.coming-soon:hover {
  background: rgba(255, 106, 0, 0.08);
  color: var(--clr-orange);
  box-shadow: none;
  transform: none;
}
.btn-plat-guide.coming-soon {
  cursor: default;
  opacity: 0.85;
  border-style: dashed;
}
.btn-plat-guide.coming-soon:hover {
  transform: none;
  background: rgba(56, 189, 248, 0.06);
  border-color: rgba(56, 189, 248, 0.25);
  color: var(--clr-blue-light);
}

/* Platform Matrix Table */
.matrix-legend-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 16, 26, 0.85);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  padding: 12px 18px;
  margin-bottom: 16px;
  font-size: 0.78rem;
  flex-wrap: wrap;
  gap: 12px;
}
.matrix-legend-items {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.m-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: monospace;
}
.m-de { background: rgba(34, 197, 94, 0.16); border: 1px solid rgba(34, 197, 94, 0.45); color: #4ade80; }
.m-d  { background: rgba(56, 189, 248, 0.16); border: 1px solid rgba(56, 189, 248, 0.45); color: var(--clr-blue-light); }
.m-e  { background: rgba(251, 191, 36, 0.16); border: 1px solid rgba(251, 191, 36, 0.45); color: #fbbf24; }
.m-ed-i { background: rgba(255, 106, 0, 0.16); border: 1px solid rgba(255, 106, 0, 0.45); color: var(--clr-orange); }
.m-dash { color: var(--clr-text-subtle); font-weight: 600; }

.platform-matrix-table th {
  text-align: center;
  padding: 14px 10px;
}
.platform-matrix-table th:first-child {
  text-align: left;
  padding-left: 20px;
  min-width: 220px;
}
.platform-matrix-table td {
  text-align: center;
  padding: 12px 8px;
}
.platform-matrix-table td:first-child {
  text-align: left;
  padding-left: 20px;
}
.platform-row-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.platform-row-cores {
  font-size: 0.72rem;
  color: var(--clr-text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.3;
}


.perf-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.perf-metric-box {
  background: rgba(10, 16, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--rad-md);
  padding: 16px;
  position: relative;
  transition: transform var(--transition);
  overflow: visible;
}
.perf-metric-box:hover {
  transform: translateY(-2px);
  border-color: var(--clr-orange);
  box-shadow: var(--clr-orange-glow), 0 8px 24px rgba(0, 0, 0, 0.25);
  background: rgba(255, 106, 0, 0.04);
}
.perf-metric-box.highlight {
  border-color: rgba(255, 106, 0, 0.4);
  background: rgba(255, 106, 0, 0.06);
}
.metric-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: 6px;
  white-space: normal;
  line-height: 1.3;
  min-height: 2.6em;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: flex;
  align-items: flex-start;
}
.metric-val {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
}
.metric-val.orange { color: var(--clr-orange); }
.metric-val.cyan   { color: var(--clr-blue-light); }
.metric-unit {
  font-size: 0.78rem;
  color: var(--clr-text-muted);
  font-weight: 400;
  margin-left: 3px;
}

.perf-conditions-banner {
  background: rgba(0, 136, 255, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: var(--rad-md);
  padding: 14px 18px;
  font-size: 0.78rem;
  color: var(--clr-text-muted);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.perf-conditions-banner svg {
  color: var(--clr-blue-light);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Trial Version Request Section (Section 5) */
.trial-version-section {
  padding: 80px 0 90px;
  background: var(--clr-surface-2);
  border-top: 1px solid var(--clr-border);
}
.trial-layout-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}
.trial-info-panel h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 16px;
  color: var(--clr-heading-strong);
}
.trial-info-panel p {
  font-size: 0.92rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

/* Mandatory Evaluation Policy Disclaimer Box */
.eval-disclaimer-box {
  background: linear-gradient(135deg, rgba(255, 106, 0, 0.08) 0%, rgba(56, 189, 248, 0.04) 100%);
  border: 1.5px solid rgba(255, 106, 0, 0.35);
  border-radius: var(--rad-lg);
  padding: 22px;
  position: relative;
  margin-bottom: 28px;
}
.eval-disclaimer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-orange);
  margin-bottom: 10px;
}
.eval-disclaimer-header svg {
  flex-shrink: 0;
  display: block;
}
.eval-disclaimer-text {
  font-size: 0.84rem;
  color: var(--clr-text);
  line-height: 1.65;
  font-style: italic;
}

.eval-disclaimer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eval-disclaimer-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--clr-text-muted);
}
.eval-disclaimer-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--clr-orange);
  font-size: 1.15rem;
  line-height: 1.4;
}
.eval-disclaimer-list li strong {
  color: var(--clr-heading-strong);
  font-weight: 600;
}
.corp-scope-legend .eval-disclaimer-box {
  margin-top: 4px;
  margin-bottom: 0;
  width: 100%;
}
html[data-theme="light"] .eval-disclaimer-list li {
  color: #475569;
}
html[data-theme="light"] .eval-disclaimer-list li strong {
  color: #0f172a;
}

.trial-perks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trial-perk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--clr-text);
}
.trial-perk-item svg {
  color: var(--clr-blue-light);
  flex-shrink: 0;
}

/* Trial Form Card */
.trial-form-card {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-xl);
  padding: 36px 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.trial-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.trial-field-full {
  grid-column: 1 / -1;
}
.trial-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trial-field label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.trial-field input,
.trial-field select,
.trial-field textarea {
  padding: 11px 14px;
  background: #0b1120;
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  color: #ffffff;
  font-size: 0.85rem;
  transition: border-color var(--transition);
}
.trial-field input:focus,
.trial-field select:focus,
.trial-field textarea:focus {
  outline: none;
  border-color: var(--clr-orange);
}
.codecs-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.codec-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--clr-text);
  cursor: pointer;
  background: rgba(10, 16, 26, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 6px 10px;
  border-radius: 6px;
  transition: border-color var(--transition);
}
.codec-checkbox-label:hover {
  border-color: rgba(56, 189, 248, 0.4);
}
.codec-checkbox-label input {
  accent-color: var(--clr-orange);
}

/* Compliance & 3P Notes Section (Section 6 & 7) */
.compliance-notes-section {
  padding: 60px 0 70px;
  background: #080a0f;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.compliance-badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f1f5f9;
  margin-bottom: 6px;
}
.compliance-heading {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin-top: 4px;
  margin-bottom: 0;
  letter-spacing: -0.01em;
}
.compliance-updated {
  font-size: 0.78rem;
  color: rgba(148, 163, 184, 0.9);
  font-weight: 500;
}
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.compliance-note-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--rad-lg);
  padding: 20px 22px;
}
.compliance-note-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-blue-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.compliance-note-text {
  font-size: 0.82rem;
  color: #cbd5e1;
  line-height: 1.65;
}

/* Modal Datasheet Layout */
.datasheet-modal-box {
  max-width: 820px;
  width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  background: #0d121c;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: var(--rad-xl);
  padding: 36px 38px;
  position: relative;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8);
}
.datasheet-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 24px;
}
.datasheet-pretitle {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-orange);
  margin-bottom: 4px;
}
.datasheet-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
}
.datasheet-section-block {
  margin-bottom: 24px;
}
.datasheet-sec-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-blue-light);
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(56, 189, 248, 0.15);
}
.datasheet-sec-body {
  font-size: 0.88rem;
  color: rgba(241, 245, 249, 0.85);
  line-height: 1.65;
}
.datasheet-chips-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.datasheet-chip {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  color: #ffffff;
}

@media (max-width: 1024px) {
  .salient-features-grid { grid-template-columns: repeat(2, 1fr); }
  .perf-calc-wrap { grid-template-columns: 1fr; }
  .trial-layout-grid { grid-template-columns: 1fr; }
  .compliance-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .salient-features-grid { grid-template-columns: 1fr; }
  .catalogue-tab-nav { flex-direction: column; border-radius: var(--rad-lg); }
  .cat-tab-btn { width: 100%; }
  .perf-metrics-grid { grid-template-columns: 1fr; }
  .trial-form-grid { grid-template-columns: 1fr; }
  .codecs-checkbox-grid { grid-template-columns: repeat(2, 1fr); }
  .datasheet-modal-box { padding: 24px 20px; }
}

/* ═══════════════════════════════════════════
   INTERACTIVE CODEC & PLATFORM SELECTOR (WIZARD)
   ═══════════════════════════════════════════ */
.catalogue-wizard-card {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 16, 28, 0.98) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-radius: var(--rad-xl);
  padding: 32px 36px;
  margin-bottom: 40px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 35px rgba(56, 189, 248, 0.04);
  position: relative;
  overflow: hidden;
}
.catalogue-wizard-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-orange), var(--clr-blue-light), var(--clr-orange));
  background-size: 200% 100%;
  animation: shimmerBar 3.5s ease-in-out infinite;
}
.wizard-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 12px;
}
.wizard-title-group h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wizard-title-group p {
  font-size: 0.84rem;
  color: var(--clr-text-muted);
  margin-top: 4px;
}
.wizard-quick-reset {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--clr-blue-light);
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 20px;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.wizard-quick-reset:hover {
  background: var(--clr-blue-light);
  color: #080a0f;
}

/* 4 Selector Steps Grid */
.wizard-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
.wizard-step-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wizard-step-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-orange);
}
.wizard-step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--clr-orange);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 900;
}
.wizard-select {
  width: 100%;
  padding: 11px 14px;
  background: #080d1a;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--rad-md);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.wizard-select:focus {
  outline: none;
  border-color: var(--clr-orange);
  box-shadow: 0 0 14px rgba(255, 106, 0, 0.3);
}

/* Instant Match Results Banner */
.wizard-match-banner {
  background: rgba(10, 16, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--rad-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  animation: panelFadeIn 0.3s ease;
}
.wizard-match-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 280px;
}
.match-tagline {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-blue-light);
  display: flex;
  align-items: center;
  gap: 8px;
}
.match-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.match-desc {
  font-size: 0.82rem;
  color: var(--clr-text-muted);
}
.wizard-match-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-wizard-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--rad-md);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.btn-wizard-datasheet {
  background: linear-gradient(135deg, var(--clr-orange) 0%, #ff8c33 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px rgba(255, 106, 0, 0.4);
}
.btn-wizard-datasheet:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 106, 0, 0.6);
}
.btn-wizard-guide {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: var(--clr-blue-light);
}
.btn-wizard-guide:hover {
  background: var(--clr-blue-light);
  color: #080a0f;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.4);
}

/* Print Toolbar in Modal */
.modal-print-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  margin-right: 32px;
}
.btn-print-pdf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: var(--clr-blue-light);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-print-pdf:hover {
  background: var(--clr-blue-light);
  color: #080a0f;
}

/* ═════════════════════════════════════════════════════
   PRINT STYLES: ISOLATED DATASHEET PRINT-TO-PDF
════════════════════════════════════════════════════= */
@media print {
  @page {
    size: A4 portrait;
    margin: 14mm 14mm 14mm 14mm;
  }

  /* Hide all regular page content when printing */
  body > *:not(#datasheet-modal),
  header,
  nav,
  footer,
  .site-header,
  .site-footer,
  .hero-section,
  .codex-catalogue-section,
  .trial-version-section,
  .disclosures-section,
  .noise-overlay,
  .cookie-banner,
  .modal-close,
  .btn-print-pdf,
  .btn-primary,
  button {
    display: none !important;
  }

  html, body {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 9.5pt !important;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Display and isolate the modal cleanly in normal document flow */
  #datasheet-modal,
  #datasheet-modal.visible {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    z-index: 1 !important;
    inset: auto !important;
  }

  .datasheet-modal-box {
    position: static !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
    background: #ffffff !important;
    color: #0f172a !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .datasheet-header-row {
    background: #090e17 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color: #ffffff !important;
    padding: 16px 20px !important;
    border-radius: 6px !important;
    margin-bottom: 16px !important;
    border-bottom: 3px solid #ff6a00 !important;
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
    display: block !important;
  }

  .datasheet-pretitle {
    color: #38bdf8 !important;
    font-size: 8pt !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
  }

  .datasheet-title {
    color: #ffffff !important;
    font-size: 16pt !important;
    font-weight: 800 !important;
    margin-bottom: 4px !important;
  }

  .datasheet-section-block {
    page-break-inside: avoid !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 8px !important;
  }

  .datasheet-sec-title {
    font-size: 10pt !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 5px !important;
  }

  .datasheet-sec-body {
    color: #334155 !important;
    font-size: 9pt !important;
  }

  .datasheet-chips-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .datasheet-chip {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 8.5pt !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
  }

  .custom-bullets li {
    color: #334155 !important;
    font-size: 9pt !important;
  }
}

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

/* ═════════════════════════════════════════════════════
   PLATFORM GUIDES BAR & UNIFIED CATALOGUE TABLE
════════════════════════════════════════════════════= */
.platform-guides-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: rgba(56, 189, 248, 0.04);
  border: 1px solid rgba(56, 189, 248, 0.12);
  border-radius: 10px;
  margin-bottom: 20px;
}
.platform-guides-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 4px;
  white-space: nowrap;
}
.btn-plat-guide {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: rgba(56, 189, 248, 0.06);
  color: var(--clr-blue-light);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn-plat-guide:hover {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.5);
  color: #fff;
  transform: translateY(-1px);
}
.unified-catalogue-table th {
  padding: 13px 10px;
  font-size: 0.72rem;
}
.unified-catalogue-table th:first-child { padding-left: 20px; }
.unified-catalogue-table td { padding: 12px 10px; }
.unified-catalogue-table td:first-child { padding-left: 20px; }

/* Mobile & Tablet Optimizations for Catalogue, Controls & Platform Guides */
@media (max-width: 860px) {
  .platform-guides-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px;
  }
  .platform-guides-label {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    margin-bottom: 2px;
    margin-right: 0;
    text-align: left;
    display: block;
  }
  .btn-plat-guide {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    white-space: normal;
    font-size: 0.72rem;
    padding: 8px 6px;
    line-height: 1.25;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cat-table-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 18px;
  }
  .cat-search-wrap {
    max-width: 100%;
    width: 100%;
  }
  .cat-filter-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    gap: 6px;
    scrollbar-width: thin;
  }
  .cat-pill-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 0.74rem;
  }

  .cat-data-table th {
    padding: 10px 12px;
    font-size: 0.70rem;
    white-space: nowrap;
  }
  .cat-data-table td {
    padding: 10px 12px;
    font-size: 0.76rem;
    white-space: nowrap;
  }
  /* Sticky 1st column on mobile so users never lose context when horizontally scrolling */
  .unified-catalogue-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #090f1a;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5);
    padding-left: 12px;
  }
  .unified-catalogue-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    background: #0c1424;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5);
    padding-left: 12px;
  }
  .unified-catalogue-table tbody tr:hover td:first-child {
    background: #111d33;
  }
  html[data-theme="light"] .unified-catalogue-table th:first-child {
    background: #f1f5f9;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.08);
  }
  html[data-theme="light"] .unified-catalogue-table td:first-child {
    background: #ffffff;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.08);
  }
  html[data-theme="light"] .unified-catalogue-table tbody tr:hover td:first-child {
    background: #f8fafc;
  }
  .format-name-lockup {
    min-width: 140px;
  }
  .format-primary-title {
    font-size: 0.82rem;
  }
}

@media (max-width: 440px) {
  .platform-guides-bar {
    grid-template-columns: 1fr;
  }
}

/* ═════════════════════════════════════════════════════
   AVAS PRODUCT PAGE STYLES
════════════════════════════════════════════════════= */
.avas-hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #020812;
}
.avas-hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.avas-hero-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  filter: saturate(0.9) brightness(0.65);
}
#ev-city-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.avas-hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,8,18,0.65) 0%, rgba(2,8,18,0.25) 50%, rgba(2,8,18,0.9) 100%);
  z-index: 1;
}
.avas-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  padding: 0 24px;
}
.avas-hero-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-orange);
  border: 1px solid rgba(255, 107, 0, 0.3);
  background: rgba(255, 107, 0, 0.08);
  border-radius: 20px;
  padding: 5px 16px;
  margin-bottom: 28px;
}
.avas-hero-headline {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 16px;
}
.avas-hero-subline {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0;
  font-style: italic;
}
.avas-play-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.avas-play-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(255, 107, 0, 0.5);
  background: rgba(255, 107, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  backdrop-filter: blur(8px);
}
.avas-play-btn::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 107, 0, 0.2);
  animation: avas-pulse 2s ease-in-out infinite;
}
.avas-play-btn::after {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 107, 0, 0.1);
  animation: avas-pulse 2s ease-in-out infinite 0.5s;
}
@keyframes avas-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0; }
}
.avas-play-btn:hover {
  background: rgba(255, 107, 0, 0.2);
  border-color: rgba(255, 107, 0, 0.8);
  transform: scale(1.08);
  box-shadow: 0 0 40px rgba(255, 107, 0, 0.35);
}
.avas-play-btn.playing {
  background: rgba(255, 107, 0, 0.22);
  border-color: var(--clr-orange);
  box-shadow: 0 0 30px rgba(255, 107, 0, 0.4);
}
.avas-play-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.avas-waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 30px;
}
.avas-wave-bar {
  width: 3px;
  border-radius: 3px;
  background: var(--clr-orange);
  transform-origin: center;
}
@keyframes wave-dance {
  0% { transform: scaleY(0.15); }
  100% { transform: scaleY(1); }
}
.avas-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: float-bounce 2s ease-in-out infinite;
  cursor: pointer;
}
@keyframes float-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}
.avas-scroll-hint span {
  font-size: 0.66rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.avas-section { padding: 100px 0; }
.avas-section-alt { background: linear-gradient(180deg, transparent, rgba(56,189,248,0.02), transparent); }

.avas-regulation-lead {
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--clr-text-muted);
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}
.avas-fact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 560px;
  margin: 0 auto 64px;
}
@media (max-width: 560px) { .avas-fact-cards { grid-template-columns: 1fr; } }
.avas-fact-card {
  background: linear-gradient(135deg, rgba(14,22,38,0.96), rgba(10,16,26,0.98));
  border: 1px solid rgba(56,189,248,0.18);
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.avas-fact-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.6), transparent);
}
.avas-fact-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--clr-blue-light);
  margin-bottom: 6px;
}
.avas-fact-subtitle { font-size: 0.8rem; color: var(--clr-text-muted); }

.avas-chart-card {
  background: rgba(10,16,26,0.95);
  border: 1px solid rgba(56,189,248,0.14);
  border-radius: 20px;
  padding: 36px;
  max-width: 560px;
  margin: 0 auto;
}

/* ── SPL Vertical Bar Chart (AIS-173 Table 2) ── */
.avas-spl-chart {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 200px;
  margin-bottom: 8px;
}
.avas-spl-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-bottom: 28px; /* leave room for x-labels */
  align-items: flex-end;
  gap: 0;
}
.avas-spl-y-axis span {
  font-size: 0.68rem;
  color: var(--clr-text-muted);
  font-family: monospace;
  line-height: 1;
}
.avas-spl-plot-area {
  flex: 1;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.avas-spl-limit-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px dashed #e53e3e;
  z-index: 2;
  pointer-events: none;
}
.avas-spl-limit-label {
  position: absolute;
  right: 0;
  top: -18px;
  font-size: 0.68rem;
  color: #e53e3e;
  font-weight: 700;
  font-family: monospace;
  white-space: nowrap;
}
.avas-spl-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 28px;
  height: 172px; /* chart area height, leaving 28px for labels */
  padding-bottom: 0;
  position: relative;
  z-index: 1;
}
.avas-spl-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
}
.avas-spl-bar-value {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--clr-text-primary, #e2e8f0);
  font-family: monospace;
  line-height: 1;
}
.avas-spl-bar {
  width: 52px;
  background: linear-gradient(180deg, #4a90e8 0%, #2563eb 100%);
  border-radius: 4px 4px 0 0;
  transition: height 0.9s cubic-bezier(0.4,0,0.2,1);
  min-height: 4px;
}
.avas-spl-bar-label {
  font-size: 0.72rem;
  color: var(--clr-text-muted);
  font-family: monospace;
  white-space: nowrap;
  margin-top: 6px;
}
.avas-chart-header {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-blue-light);
  margin-bottom: 24px;
}
.avas-bar-chart { display: flex; flex-direction: column; gap: 16px; }
.avas-bar-row { display: flex; align-items: center; gap: 14px; }
.avas-bar-label {
  font-size: 0.76rem;
  color: var(--clr-text-muted);
  min-width: 85px;
  font-family: monospace;
}
.avas-bar-track {
  flex: 1;
  height: 30px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  position: relative;
  overflow: visible;
}
.avas-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(56,189,248,0.45), rgba(56,189,248,0.85));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  transition: width 1s ease;
}
.avas-bar-val { font-size: 0.76rem; font-weight: 700; color: #fff; font-family: monospace; }
.avas-limit-line-wrap {
  position: absolute;
  top: -4px;
  bottom: -4px;
  right: 0;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
  transform: translateX(50%);
}
.avas-limit-line-inner {
  width: 2px;
  height: 100%;
  background: rgba(255,106,0,0.6);
  border-left: 2px dashed rgba(255,106,0,0.6);
}
.avas-limit-label {
  font-size: 0.63rem;
  color: var(--clr-orange);
  white-space: nowrap;
  padding: 1px 5px;
  background: rgba(255,106,0,0.1);
  border-radius: 3px;
  margin-left: 4px;
  margin-top: -2px;
}
.avas-chart-footnote {
  margin-top: 20px;
  font-size: 0.71rem;
  color: var(--clr-text-muted);
  font-style: italic;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 14px;
}

/* AVAS — AIS-173 Frequency Content Visualization */
.avas-freq-chart-card {
  background: rgba(10, 16, 26, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.14);
  border-radius: 20px;
  padding: 36px;
  max-width: 560px;
  margin: 28px auto 0;
}
body.avas-page[data-avas-theme="light"] .avas-freq-chart-card {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.avas-freq-diagram {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.avas-freq-split-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.avas-freq-band-card {
  border-radius: 12px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 110px;
}

.avas-freq-band-left {
  background: rgba(255, 106, 0, 0.06);
  border: 1.5px solid rgba(255, 106, 0, 0.3);
}
body.avas-page[data-avas-theme="light"] .avas-freq-band-left {
  background: rgba(217, 87, 0, 0.06);
  border-color: rgba(217, 87, 0, 0.25);
}

.avas-freq-band-right {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
}
body.avas-page[data-avas-theme="light"] .avas-freq-band-right {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.12);
}

.avas-freq-band-header h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.avas-freq-band-left .avas-freq-band-header h4 {
  color: var(--clr-orange);
}
body.avas-page[data-avas-theme="light"] .avas-freq-band-left .avas-freq-band-header h4 {
  color: var(--clr-orange-dim);
}

.avas-freq-band-right .avas-freq-band-header h4 {
  color: #cbd5e1;
}
body.avas-page[data-avas-theme="light"] .avas-freq-band-right .avas-freq-band-header h4 {
  color: #475569;
}

.avas-freq-band-sub {
  font-size: 0.76rem;
  color: var(--clr-text-muted);
}

.avas-freq-plot-area {
  flex: 1;
  position: relative;
  margin-top: 14px;
  min-height: 38px;
}

.avas-freq-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.avas-marker-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.avas-freq-band-left .avas-marker-dot {
  background: var(--clr-orange);
  box-shadow: 0 0 10px rgba(255, 106, 0, 0.6);
}
body.avas-page[data-avas-theme="light"] .avas-freq-band-left .avas-marker-dot {
  background: var(--clr-orange-dim);
  box-shadow: 0 0 8px rgba(217, 87, 0, 0.4);
}

.avas-freq-band-right .avas-marker-dot {
  background: var(--clr-blue-light);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.avas-marker-label {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}
body.avas-page[data-avas-theme="light"] .avas-marker-label {
  color: #0f172a;
}

.avas-freq-axis {
  position: relative;
  padding-top: 10px;
}

.avas-freq-axis-line {
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 106, 0, 0.6) 0%, rgba(255, 106, 0, 0.6) 50%, rgba(56, 189, 248, 0.6) 50%, rgba(56, 189, 248, 0.6) 100%);
  width: 100%;
}

.avas-freq-axis-ticks {
  position: relative;
  height: 20px;
  margin-top: 6px;
}

.avas-freq-tick {
  position: absolute;
  top: 0;
  font-family: monospace;
  font-size: 0.72rem;
  color: var(--clr-text-muted);
}
.avas-freq-tick.split-tick {
  transform: translateX(-50%);
  color: var(--clr-orange);
  font-weight: 700;
}

.avas-hear-bad-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 32px;
  border-radius: 12px;
  border: 1.5px solid rgba(255,106,0,0.4);
  background: rgba(255,106,0,0.07);
  color: var(--clr-orange);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
  margin-bottom: 28px;
}
.avas-hear-bad-btn:hover {
  background: rgba(255,106,0,0.14);
  border-color: rgba(255,106,0,0.7);
  color: var(--clr-orange-light);
  transform: scale(1.03);
  box-shadow: 0 0 28px rgba(255,106,0,0.2);
}
.avas-hear-bad-btn.playing {
  background: rgba(255,106,0,0.18);
  border-color: var(--clr-orange);
  animation: orange-pulse 1.5s ease-in-out infinite;
}
@keyframes orange-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(255,106,0,0.2); }
  50% { box-shadow: 0 0 36px rgba(255,106,0,0.45); }
}
.avas-problem-quote { font-size: 1rem; line-height: 1.75; color: var(--clr-text-muted); font-style: italic; }
.avas-complaints-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
@media (max-width: 860px) { .avas-complaints-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .avas-complaints-grid { grid-template-columns: 1fr; } }
.avas-complaint-card {
  background: rgba(14,22,38,0.9);
  border: 1px solid rgba(255,106,0,0.12);
  border-radius: 14px;
  padding: 20px 18px;
  transition: border-color 0.25s, transform 0.25s;
}
.avas-complaint-card:hover {
  border-color: rgba(255,106,0,0.3);
  transform: translateY(-3px);
}
.avas-complaint-source {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-orange);
  margin-bottom: 10px;
  opacity: 0.8;
}
.avas-complaint-text { font-size: 0.84rem; color: var(--clr-text-muted); line-height: 1.6; font-style: italic; }
.avas-complaint-author { margin-top: 12px; font-size: 0.7rem; color: rgba(255,255,255,0.28); }

.avas-simulator-wrap {
  background: rgba(10,16,26,0.97);
  border: 1px solid rgba(56,189,248,0.14);
  border-radius: 24px;
  padding: 40px;
  margin-top: 48px;
}
@media (max-width: 768px) { .avas-simulator-wrap { padding: 24px 18px; } }
.avas-sim-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 860px) { .avas-sim-top-row { grid-template-columns: 1fr; } }
.avas-preset-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-text-muted);
  margin-bottom: 12px;
}
.avas-preset-row { display: flex; gap: 10px; flex-wrap: wrap; }
.avas-preset-btn {
  padding: 9px 20px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,107,0,0.3);
  background: rgba(255,107,0,0.06);
  color: #ff9a4d;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.avas-preset-btn:hover, .avas-preset-btn.active {
  background: rgba(255,107,0,0.14);
  border-color: rgba(255,107,0,0.65);
  color: var(--clr-orange);
  box-shadow: 0 0 18px rgba(255,107,0,0.18);
}
.avas-speedo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.avas-speedo-display { display: flex; align-items: baseline; gap: 6px; }
.avas-speedo-val {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  color: var(--clr-orange);
  line-height: 1;
  transition: color 0.3s;
  min-width: 80px;
  text-align: right;
}
.avas-speedo-unit { font-size: 0.9rem; color: var(--clr-text-muted); }
.avas-speed-slider { width: 100%; max-width: 320px; accent-color: var(--clr-orange); cursor: pointer; }
.avas-speed-range-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 320px;
  font-size: 0.68rem;
  color: var(--clr-text-muted);
  font-family: monospace;
}

/* ── Speedometer gauge ── */
.avas-gauge {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.avas-gauge-svg {
  display: block;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}
.avas-gauge-track { stroke: var(--clr-surface-3); stroke-width: 14; stroke-linecap: round; }
.avas-gauge-active {
  stroke: var(--clr-orange);
  stroke-width: 14;
  stroke-linecap: round;
}
.avas-gauge-tick { stroke: var(--clr-text-subtle); stroke-width: 1.5; opacity: 0.55; }
.avas-gauge-label { fill: var(--clr-text-muted); }
/* AVAS — Community Complaints Grid */
.avas-badge-count {
  font-size: 0.7rem;
  color: var(--clr-orange);
  background: rgba(255, 106, 0, 0.1);
  border: 1px solid rgba(255, 106, 0, 0.25);
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.avas-page[data-avas-theme="light"] .avas-badge-count {
  background: rgba(255, 106, 0, 0.08);
  border-color: rgba(255, 106, 0, 0.2);
  color: var(--clr-orange-dim);
}

.avas-complaints-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.avas-quote-card {
  background: rgba(13, 18, 28, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
body.avas-page[data-avas-theme="light"] .avas-quote-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.avas-quote-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 106, 0, 0.35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 106, 0, 0.08);
}
body.avas-page[data-avas-theme="light"] .avas-quote-card:hover {
  border-color: rgba(255, 106, 0, 0.3);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.avas-quote-card-highlight {
  grid-column: span 2;
  border-color: rgba(255, 106, 0, 0.25);
  background: linear-gradient(145deg, rgba(18, 24, 38, 0.95) 0%, rgba(13, 18, 28, 0.9) 100%);
}
body.avas-page[data-avas-theme="light"] .avas-quote-card-highlight {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border-color: rgba(255, 106, 0, 0.3);
}

.avas-quote-card-highlight:hover {
  border-color: var(--clr-orange);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 106, 0, 0.12);
}

.avas-quote-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.avas-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--clr-blue-light);
  flex-shrink: 0;
}
body.avas-page[data-avas-theme="light"] .avas-user-avatar {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0284c7;
}

.avas-user-avatar.reddit {
  background: rgba(255, 69, 0, 0.15);
  border-color: rgba(255, 69, 0, 0.4);
  color: #ff4500;
}

.avas-user-info {
  flex: 1;
  min-width: 0;
}

.avas-username {
  font-size: 0.85rem;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.avas-page[data-avas-theme="light"] .avas-username {
  color: #0f172a;
}

.avas-user-meta {
  font-size: 0.72rem;
  color: var(--clr-text-muted);
}

.avas-quote-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(255, 106, 0, 0.1);
  border: 1px solid rgba(255, 106, 0, 0.25);
  color: var(--clr-orange);
  white-space: nowrap;
  flex-shrink: 0;
}
body.avas-page[data-avas-theme="light"] .avas-quote-tag {
  background: rgba(255, 106, 0, 0.08);
  border-color: rgba(255, 106, 0, 0.2);
  color: var(--clr-orange-dim);
}

.avas-quote-text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(241, 245, 249, 0.85);
  font-style: italic;
  flex: 1;
}
body.avas-page[data-avas-theme="light"] .avas-quote-text {
  color: #334155;
}

@media (max-width: 992px) {
  .avas-complaints-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .avas-quote-card-highlight {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .avas-complaints-grid {
    grid-template-columns: 1fr;
  }
  .avas-quote-card-highlight {
    grid-column: span 1;
  }
  .avas-collage-wrap {
    padding: 18px;
  }
}
.avas-gauge-needle-line { stroke: var(--clr-orange); stroke-width: 4; stroke-linecap: round; }
.avas-gauge-needle-tip { fill: var(--clr-orange); }
.avas-gauge-hub {
  fill: var(--clr-surface-2);
  stroke: var(--clr-orange);
  stroke-width: 3;
}
.avas-gauge .avas-speedo-display {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  align-items: baseline;
  gap: 4px;
}
.avas-gauge .avas-speedo-val {
  min-width: 0;
  text-align: center;
  font-size: 2.3rem;
}
.avas-zone-tag.active { color: var(--clr-orange); font-weight: 700; }
.avas-sim-status {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  transition: all 0.3s;
}
.avas-sim-status.active {
  background: rgba(56, 189, 248, 0.12);
  color: var(--clr-blue-light);
  border: 1px solid rgba(56, 189, 248, 0.35);
}
.avas-sim-status.cutoff {
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(100, 116, 139, 0.3);
}
.avas-spectrum-wrap {
  border-radius: 14px;
  overflow: hidden;
  background: rgba(5,12,24,0.85);
  border: 1px solid rgba(56,189,248,0.1);
}
.avas-spectrum-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.avas-spectrum-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
.avas-ais-band-label { font-size: 0.68rem; color: rgba(255,106,0,0.75); font-family: monospace; }
#avas-spectrum-canvas { width: 100%; height: 200px; display: block; }

.avas-vp-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 48px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.avas-vp-card {
  background: linear-gradient(135deg, rgba(14,22,38,0.96), rgba(10,16,26,0.98));
  border: 1px solid rgba(56,189,248,0.12);
  border-radius: 18px;
  padding: 28px 32px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.avas-vp-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, transparent, rgba(56,189,248,0.6), transparent);
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.3s;
}
.avas-vp-card:hover { border-color: rgba(56,189,248,0.3); transform: translateX(6px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.avas-vp-card:hover::before { opacity: 1; }
.avas-vp-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(56,189,248,0.18);
  color: var(--clr-blue-light);
}
.avas-vp-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: #ffffff; margin-bottom: 8px; }
.avas-vp-desc { font-size: 0.88rem; color: var(--clr-text-muted); line-height: 1.65; }
@media (max-width: 540px) { .avas-vp-card { flex-direction: column; gap: 16px; padding: 22px; } }

/* AVAS — Theme Toggle */
.avas-theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(56,189,248,0.2);
  background: rgba(56,189,248,0.06);
  color: var(--clr-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s;
}
.avas-theme-toggle:hover {
  background: rgba(56,189,248,0.12);
  border-color: rgba(56,189,248,0.4);
}

/* AVAS — Light Theme Accents */
body.avas-page[data-avas-theme="light"] {
  --clr-bg: #f4f6fa;
  --clr-surface: #ffffff;
  --clr-surface-2: #eef1f7;
  --clr-text: #0f172a;
  --clr-text-muted: #475569;
  --clr-border: rgba(37,99,235,0.14);
}
body.avas-page[data-avas-theme="light"] .navbar { background: rgba(255,255,255,0.92); border-bottom-color: rgba(37,99,235,0.1); }
body.avas-page[data-avas-theme="light"] .avas-section-alt { background: linear-gradient(180deg, transparent, rgba(37,99,235,0.04), transparent); }
body.avas-page[data-avas-theme="light"] .avas-fact-card,
body.avas-page[data-avas-theme="light"] .avas-chart-card,
body.avas-page[data-avas-theme="light"] .avas-simulator-wrap,
body.avas-page[data-avas-theme="light"] .avas-vp-card {
  background: #ffffff;
  border-color: rgba(37,99,235,0.12);
  box-shadow: 0 4px 24px rgba(15,23,42,0.06);
}
body.avas-page[data-avas-theme="light"] .avas-hero-headline { color: #fff; }
body.avas-page[data-avas-theme="light"] .section-title { color: #0f172a; }
body.avas-page[data-avas-theme="light"] .avas-vp-title { color: #0f172a; }

/* AVAS — Chart bar variants */
.avas-bar-fill-mid { background: linear-gradient(90deg, rgba(56,189,248,0.5), rgba(56,189,248,0.9)) !important; }
.avas-bar-fill-high { background: linear-gradient(90deg, rgba(56,189,248,0.55), rgba(99,210,255,0.95)) !important; }

/* AVAS — Problem section */
.avas-badge-warn { background: rgba(255,106,0,0.1) !important; border-color: rgba(255,106,0,0.3) !important; color: var(--clr-orange) !important; }
.avas-problem-trigger { text-align: center; margin-top: 32px; }
.avas-problem-quote { max-width: 680px; margin: 0 auto; }

/* AVAS — Screenshot Complaint Collage */
.avas-collage-wrap {
  margin-top: 56px;
  background: rgba(10,16,26,0.6);
  border: 1px solid rgba(255,106,0,0.12);
  border-radius: 20px;
  padding: 28px;
  overflow: hidden;
}
body.avas-page[data-avas-theme="light"] .avas-collage-wrap { background: rgba(255,255,255,0.9); }
.avas-collage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
.avas-collage-hint { color: rgba(255,255,255,0.25); font-weight: 500; }
body.avas-page[data-avas-theme="light"] .avas-collage-hint { color: #94a3b8; }

.avas-collage-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body.avas-page[data-avas-theme="light"] .avas-collage-sources {
  border-top-color: rgba(15, 23, 42, 0.08);
}
.avas-collage-sources-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
body.avas-page[data-avas-theme="light"] .avas-collage-sources-label { color: #94a3b8; }
.avas-collage-source-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #93c5fd;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(147, 197, 253, 0.25);
  background: rgba(59, 130, 246, 0.08);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.avas-collage-source-link:hover {
  color: #bfdbfe;
  border-color: rgba(147, 197, 253, 0.45);
  background: rgba(59, 130, 246, 0.14);
}
body.avas-page[data-avas-theme="light"] .avas-collage-source-link {
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.2);
  background: rgba(37, 99, 235, 0.06);
}
body.avas-page[data-avas-theme="light"] .avas-collage-source-link:hover {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.1);
}
@media (max-width: 560px) {
  .avas-screenshot-card, .avas-sc-wide { grid-column: span 12; }
  .avas-collage-wrap { padding: 18px; }
}

/* AVAS — Simulator extras */
.avas-sim-engine-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.avas-sim-play-btn { margin-bottom: 0 !important; padding: 10px 22px !important; font-size: 0.82rem !important; border-color: rgba(255,107,0,0.35) !important; background: rgba(255,107,0,0.08) !important; color: var(--clr-orange) !important; }
.avas-sim-note { margin-top: 16px; font-size: 0.78rem; color: var(--clr-text-muted); line-height: 1.6; }
.avas-sim-note span { color: var(--clr-orange); }

.avas-spectrum-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 0.72rem;
  color: var(--clr-text-muted);
}
.avas-spectrum-legend span { display: flex; align-items: center; gap: 6px; }
.avas-spectrum-legend i {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
}
.leg-orange { background: var(--clr-orange); }
.leg-red { background: rgba(255,106,0,0.6); border-top: 1px dashed rgba(255,106,0,0.7); height: 2px; }
.leg-blue { background: rgba(56,189,248,0.5); }

#avas-spectrum-canvas { width: 100%; height: 220px; display: block; }

#avas-vp .about-split-layout {
  margin-top: 48px;
}

/* AVAS — Expandable VP Cards (legacy, unused) */
.avas-vp-card[data-expandable] {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  cursor: default;
}
.avas-vp-card[data-expandable] .avas-vp-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 32px;
  cursor: pointer;
  width: 100%;
}
.avas-vp-card[data-expandable]:hover { transform: none; }
.avas-vp-card[data-expandable].expanded {
  border-color: rgba(255,107,0,0.35);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.avas-vp-card[data-expandable].expanded::before { opacity: 1; background: linear-gradient(180deg, transparent, rgba(255,107,0,0.5), transparent); }
.avas-vp-chevron {
  margin-left: auto;
  font-size: 1.4rem;
  color: var(--clr-text-muted);
  transition: transform 0.3s;
  flex-shrink: 0;
  line-height: 1;
  padding-top: 4px;
}
.avas-vp-card[data-expandable].expanded .avas-vp-chevron {
  transform: rotate(90deg);
  color: var(--clr-orange);
}
.avas-vp-expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 32px;
}
.avas-vp-card[data-expandable].expanded .avas-vp-expand {
  max-height: 120px;
  padding: 0 32px 24px 104px;
}
.avas-vp-expand p {
  font-size: 0.84rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 16px;
}
@media (max-width: 540px) {
  .avas-vp-card[data-expandable] .avas-vp-header { padding: 22px; flex-wrap: wrap; }
  .avas-vp-card[data-expandable].expanded .avas-vp-expand { padding: 0 22px 20px 20px; }
}

/* ═════════════════════════════════════════════════════
   CORPORATE PAGE — B2B Card Pricing (Dark Theme)
═════════════════════════════════════════════════════ */
.corp-pricing-section {
  background: #141419;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(37, 99, 235, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 80%, rgba(99, 102, 241, 0.06) 0%, transparent 50%);
  padding: 96px 0 100px;
  font-family: 'Inter', var(--font-body);
  color: #f1f5f9;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.corp-pricing-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.corp-pricing-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.corp-pricing-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 20px;
}

.corp-pricing-header h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.85rem, 3.8vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: 16px;
}

.corp-pricing-lead {
  font-size: 1.02rem;
  line-height: 1.75;
  color: #94a3b8;
  margin: 0;
}

/* ── Pricing cards grid ── */
.corp-pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
  align-items: stretch;
}

.corp-pricing-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.04),
    0 20px 48px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  display: flex;
  flex-direction: column;
  color: #0f172a;
}

.corp-pricing-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 8px 12px rgba(0, 0, 0, 0.06),
    0 28px 56px rgba(0, 0, 0, 0.22);
}

.corp-pricing-card--popular {
  border: 2px solid #3b82f6;
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.3),
    0 0 32px rgba(59, 130, 246, 0.22),
    0 0 64px rgba(37, 99, 235, 0.12),
    0 20px 48px rgba(0, 0, 0, 0.22);
  transform: scale(1.03);
  z-index: 2;
}

.corp-pricing-card--popular:hover {
  transform: scale(1.03) translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.4),
    0 0 40px rgba(59, 130, 246, 0.28),
    0 0 80px rgba(37, 99, 235, 0.15),
    0 28px 56px rgba(0, 0, 0, 0.24);
}

.corp-popular-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.45);
  z-index: 3;
}

.corp-pricing-card-body {
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.corp-pricing-card--popular .corp-pricing-card-body {
  padding-top: 44px;
}

.corp-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  margin-bottom: 22px;
}

.corp-card-icon--blue {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(59, 130, 246, 0.08));
  border-color: rgba(59, 130, 246, 0.25);
  color: #2563eb;
}

.corp-tier-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.corp-tier-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 5px 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
  align-self: flex-start;
}

.corp-tier-pill--blue {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
}

.corp-tier-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #64748b;
  margin-bottom: 24px;
}

.corp-tier-features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.corp-tier-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #334155;
  font-weight: 500;
}

.corp-feat-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: #ecfdf5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 12l2.5 2.5L16 9' stroke='%23059669' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  border: 1px solid #a7f3d0;
}

.corp-tier-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-top: auto;
}

.corp-tier-cta--primary {
  background: #1e3a8a;
  color: #ffffff;
  border: 2px solid #1e3a8a;
  box-shadow: 0 4px 16px rgba(30, 58, 138, 0.3);
}

.corp-tier-cta--primary:hover {
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.4);
  color: #ffffff;
}

.corp-tier-cta--outline {
  background: #ffffff;
  color: #1e3a8a;
  border: 2px solid #cbd5e1;
}

.corp-tier-cta--outline:hover {
  border-color: #1e3a8a;
  background: #f8fafc;
  color: #1e3a8a;
}

/* ── Info panels (two-column) ── */
.corp-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}

.corp-info-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 32px 28px;
  backdrop-filter: blur(8px);
}

.corp-info-panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.corp-info-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #93c5fd;
  flex-shrink: 0;
}

.corp-info-panel h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin: 0;
}

.corp-info-panel > p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: #94a3b8;
  margin: 0 0 18px;
}

.corp-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.corp-info-list li {
  font-size: 0.84rem;
  color: #cbd5e1;
  padding-left: 18px;
  position: relative;
  line-height: 1.55;
}

.corp-info-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3b82f6;
}

/* ── Corporate policy pills ── */
.corp-policies {
  text-align: center;
  scroll-margin-top: 96px;
}

.corp-policies-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   CORPORATE PRICING & IP LICENSING PAGE (corporate.html)
   ═══════════════════════════════════════════════════════════════════ */

.corporate-page .page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-style: normal;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.25;
  text-transform: uppercase;
}

.corporate-page .section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.25;
}

.corp-section {
  padding: 70px 0;
  position: relative;
}

.corp-section-alt {
  background: rgba(14, 22, 38, 0.4);
  border-top: 1px solid rgba(56, 189, 248, 0.08);
  border-bottom: 1px solid rgba(56, 189, 248, 0.08);
}

/* ── 1. Licensing Scope: Concentric Circles Centered + Color Coded Details Underneath ── */
.corp-concentric-vertical-layout {
  max-width: 780px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.scope-concentric-center {
  width: 100%;
  max-width: 360px;
  display: flex;
  justify-content: center;
}

.scope-under-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.scope-text-block {
  text-align: left;
  padding: 16px 20px;
  background: rgba(14, 22, 38, 0.4);
  border-radius: 12px;
  border-left: 4px solid var(--block-accent, #ff6a00);
}

.scope-text-block.block-product { --block-accent: #ff6a00; }
.scope-text-block.block-processor { --block-accent: #38bdf8; }
.scope-text-block.block-micro { --block-accent: #ff9a4d; }

.scope-color-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 6px 0;
}

.scope-color-title.title-product {
  color: #ff6a00;
}

.scope-color-title.title-processor {
  color: #38bdf8;
}

.scope-color-title.title-micro {
  color: #ff9a4d;
}

.scope-color-desc {
  font-size: 1rem;
  color: #ffffff;
  line-height: 1.5;
  margin: 0 0 4px 0;
}

.scope-color-avail {
  font-size: 0.95rem;
  color: #ffffff;
  margin: 0;
  opacity: 0.92;
}

/* ── 2. Pricing Matrix Table ── */
.corp-pricing-table-wrapper {
  max-width: 960px;
  margin: 40px auto 0;
  background: linear-gradient(135deg, rgba(14, 22, 38, 0.94) 0%, rgba(8, 10, 15, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  overflow-x: auto;
}

.corp-pricing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.corp-pricing-table th {
  padding: 16px 20px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.7);
  border-bottom: 1.5px solid rgba(56, 189, 248, 0.3);
}

.corp-pricing-table th:first-child { border-top-left-radius: 10px; }
.corp-pricing-table th:last-child  { border-top-right-radius: 10px; }

.corp-pricing-table td {
  padding: 18px 20px;
  font-size: 0.90rem;
  color: var(--clr-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}

.corp-pricing-table tbody tr:last-child td {
  border-bottom: none;
}

.corp-pricing-table tbody tr:hover td {
  background: rgba(56, 189, 248, 0.04);
}

.corp-mult-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 8px;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  background: rgba(56, 189, 248, 0.1);
  color: var(--clr-blue-light);
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.corp-mult-pill.highlight {
  background: rgba(255, 106, 0, 0.12);
  color: var(--clr-orange);
  border-color: rgba(255, 106, 0, 0.3);
}

.corp-mult-pill.highlight-orange {
  background: rgba(255, 106, 0, 0.12);
  color: var(--clr-orange);
  border-color: rgba(255, 106, 0, 0.3);
}

.corp-mult-dash {
  color: var(--clr-text-muted);
  font-weight: 600;
}

.corp-note-card {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(255, 106, 0, 0.06);
  border-left: 3px solid var(--clr-orange);
  border-top: 1px solid rgba(255, 106, 0, 0.15);
  border-right: 1px solid rgba(255, 106, 0, 0.15);
  border-bottom: 1px solid rgba(255, 106, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
}

.corp-note-card p {
  margin: 0;
  font-size: 0.88rem;
  color: #ff9a4d;
  line-height: 1.55;
}

/* ── 3. Combined Delivery, Quality & Support Boxes ── */
.corp-boxes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}

@media (max-width: 900px) {
  .corp-boxes-grid {
    grid-template-columns: 1fr;
  }
}

.corp-content-box {
  background: linear-gradient(135deg, rgba(14, 22, 38, 0.94) 0%, rgba(10, 16, 26, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 16px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

.corp-content-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--box-accent, #38bdf8), transparent);
}

.corp-content-box:hover {
  border-color: var(--box-accent, #38bdf8);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}

.corp-content-box.accent-orange { --box-accent: var(--clr-orange); }
.corp-content-box.accent-blue   { --box-accent: var(--clr-blue-light); }
.corp-content-box.accent-purple { --box-accent: var(--clr-blue-light); }
.corp-content-box.accent-green  { --box-accent: var(--clr-orange); }

.corp-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.corp-box-badge {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.1);
  color: var(--box-accent, var(--clr-blue-light));
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.corp-content-box.accent-orange .corp-box-badge {
  background: rgba(255, 106, 0, 0.1);
  border-color: rgba(255, 106, 0, 0.3);
  color: var(--clr-orange);
}

.corp-content-box.accent-green .corp-box-badge {
  background: rgba(255, 106, 0, 0.1);
  border-color: rgba(255, 106, 0, 0.3);
  color: var(--clr-orange);
}

.corp-content-box.accent-purple .corp-box-badge {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.3);
  color: var(--clr-blue-light);
}

.corp-box-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.corp-box-desc {
  font-size: 0.88rem;
  color: var(--clr-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── 4. Evaluation Box Card ── */
.corp-eval-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(10, 16, 26, 0.98) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.25);
  border-radius: 20px;
  padding: 36px;
  margin-top: 36px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), inset 0 0 32px rgba(56, 189, 248, 0.04);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}

.corp-eval-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-blue-light), var(--clr-orange), var(--clr-blue-light));
}

.corp-eval-card p {
  font-size: 0.95rem;
  color: var(--clr-text);
  line-height: 1.75;
  margin: 0;
}

/* ── 5. Compliance & Governance Horizontal Rows ── */
.corp-policy-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 960px;
  margin: 36px auto 0;
}

.corp-policy-row {
  background: linear-gradient(135deg, rgba(14, 22, 38, 0.94) 0%, rgba(10, 16, 26, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 14px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: all 0.25s ease;
}

.corp-policy-row:hover {
  border-color: rgba(56, 189, 248, 0.35);
  transform: translateX(4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.corp-policy-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.corp-policy-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-blue-light);
  flex-shrink: 0;
}

.corp-policy-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.corp-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.1);
  color: var(--clr-blue-light);
  border: 1px solid rgba(56, 189, 248, 0.25);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.corp-download-btn:hover {
  background: var(--clr-blue-light);
  color: #080a0f;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .corp-policy-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .corp-download-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Corporate Policies & Governance Accordion ─── */
.policies-section {
  padding: 80px 0;
  background: var(--clr-surface);
}

.policies-header {
  margin-bottom: 48px;
}

.policies-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.policy-item {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.policy-item-expanded {
  grid-column: 1 / -1;
}

.policy-item:hover {
  border-color: var(--clr-blue);
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.1);
}

.policy-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-text);
  transition: background var(--transition);
}

.policy-toggle:hover {
  background: rgba(56, 189, 248, 0.05);
}

.policy-toggle:focus-visible {
  outline: 2px solid var(--clr-orange);
  outline-offset: -2px;
}

.policy-name {
  text-align: left;
}

.policy-icon {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--clr-blue-light);
  transition: transform var(--transition);
}

.policy-toggle[aria-expanded="true"] .policy-icon {
  transform: rotate(45deg);
  color: var(--clr-orange);
}

.policy-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.policy-toggle[aria-expanded="true"] + .policy-content {
  max-height: 100px;
  padding: 0 24px 20px;
}

.policy-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--clr-blue-subtle);
  color: var(--clr-blue-light);
  text-decoration: none;
  border-radius: var(--rad-sm);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--transition);
}

.policy-link:hover {
  background: var(--clr-blue);
  color: #ffffff;
  transform: translateY(-2px);
}

.policy-link svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .policies-section {
    padding: 60px 0;
  }
  
  .policies-accordion {
    grid-template-columns: 1fr;
  }
  
  .policy-toggle {
    padding: 16px 20px;
    font-size: 0.95rem;
  }
  
  .policy-toggle[aria-expanded="true"] + .policy-content {
    padding: 0 20px 16px;
    grid-column: 1 / -1;
  }
}

/* ── Vertical Milestone Timeline: Alternating Zig-Zag + Scroll Reveal ─── */
.timeline-section {
  overflow: hidden; /* safety net — positioning is corrected below, never rely on this to hide clipped cards */
}

.vertical-timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 8px 0 0;
}

/* Centered road */
.timeline-progress-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: var(--clr-border);
  border-radius: 2px;
  overflow: hidden;
}

.timeline-progress-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--clr-blue) 0%, var(--clr-orange) 100%);
  transition: height 0.15s linear;
}

/* Each milestone is a 3-col row: left slot | center dot | right slot.
   Cards are told to occupy left or right slot via .is-left / .is-right,
   so they can never cross the center road or spill past the row bounds. */
.timeline-milestone {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  grid-template-areas: 'left dot right';
  gap: 0 24px;
  align-items: start;
  margin-bottom: 48px;
}

.timeline-milestone .timeline-content {
  width: 100%;
  min-width: 0;
}

.timeline-milestone.is-left .timeline-content { grid-area: left; justify-self: end; text-align: left; }
.timeline-milestone.is-right .timeline-content { grid-area: right; justify-self: start; text-align: left; }

/* Inactive state — hidden, collapsible, animated both ways */
.timeline-milestone .timeline-content {
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
  pointer-events: none;
}
.timeline-milestone.is-left .timeline-content { transform: translateX(18px) translateY(24px); }
.timeline-milestone.is-right .timeline-content { transform: translateX(-18px) translateY(24px); }

.timeline-milestone.active .timeline-content {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
  pointer-events: auto;
}

.timeline-dot {
  grid-area: dot;
  justify-self: center;
  width: 27px;
  height: 27px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--clr-surface-2);
  border: 3px solid var(--clr-border);
  transition: all 0.3s ease;
  z-index: 2;
}

.timeline-milestone.active .timeline-dot {
  background: var(--clr-orange);
  border-color: var(--clr-orange);
  box-shadow: 0 0 15px rgba(255, 106, 0, 0.5);
}

.timeline-content {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  padding: 24px 28px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.timeline-milestone.active .timeline-content {
  border-color: var(--clr-blue);
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.15);
}

.timeline-year {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--clr-orange);
  margin-bottom: 12px;
}

.timeline-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 16px;
}

.timeline-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline-bullets li {
  font-size: 0.9rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.timeline-bullets li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--clr-blue-light);
  font-weight: bold;
}

@media (max-width: 768px) {
  .vertical-timeline {
    padding-top: 4px;
  }

  /* Collapse to a left-rail single-column stack so cards fill full width
     and never get clipped on small screens. */
  .timeline-progress-line {
    left: 18px;
    transform: none;
  }

  .timeline-milestone {
    grid-template-columns: 40px 1fr;
    grid-template-areas: 'dot content';
    gap: 0 16px;
    margin-bottom: 36px;
  }

  .timeline-milestone .timeline-content,
  .timeline-milestone.is-left .timeline-content,
  .timeline-milestone.is-right .timeline-content {
    grid-area: content;
    justify-self: stretch;
  }

  /* Neutralise the left/right slide on mobile; keep vertical slide only */
  .timeline-milestone.is-left .timeline-content,
  .timeline-milestone.is-right .timeline-content {
    transform: translateY(24px);
  }

  .timeline-dot {
    grid-area: dot;
    width: 22px;
    height: 22px;
  }

  .timeline-content {
    padding: 20px;
  }

  .timeline-year {
    font-size: 1.2rem;
  }
}

@media (max-width: 960px) {
  .corp-pricing-cards {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
  .corp-pricing-card--popular {
    transform: none;
    order: -1;
  }
  .corp-pricing-card--popular:hover {
    transform: translateY(-6px);
  }
  .corp-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .corp-pricing-section { padding: 64px 0 72px; }
  .corp-pricing-card-body { padding: 28px 22px 24px; }
  .corp-info-panel { padding: 24px 20px; }
  .corp-policy-pills { flex-direction: column; align-items: stretch; }
  .corp-policy-pill { justify-content: center; }
}

/* ═════════════════════════════════════════════════════
   CAREERS PAGE — Philosophy First Layout
═════════════════════════════════════════════════════ */
.careers-page {
  background: var(--clr-bg);
}

/* Section 1 — Mandate hero */
.careers-main-wrapper {
  padding-top: 128px;
  padding-bottom: 80px;
}

.careers-mandate {
  padding: calc(var(--nav-h) + 60px) 0 88px;
  background: var(--clr-bg);
  background-image: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 60%);
  border-bottom: 1px solid var(--clr-border);
}

.careers-mandate-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.careers-pill {
  margin-bottom: 28px;
}

.careers-mandate-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.85rem, 4.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 40px;
}

.careers-callout {
  margin: 0;
  text-align: left;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid #22d3ee;
  border-radius: 0 16px 16px 0;
  padding: 32px 36px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.careers-callout-quote {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.65;
  color: #f1f5f9;
  margin: 0 0 18px;
}

.careers-callout-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #94a3b8;
  margin: 0;
}

/* Shared section headers */
.careers-section-header {
  text-align: center;
  margin-bottom: 48px;
}

.careers-section-header--left {
  text-align: left;
  margin-bottom: 28px;
}

.careers-section-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--clr-heading-strong);
  margin: 0 0 10px;
}

.careers-section-sub {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #64748b;
  margin: 0;
}

/* Section 2 — Comparison grid */
.careers-work {
  padding: 80px 0 100px;
  background: var(--clr-surface-1);
}

.careers-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.careers-compare-col {
  border-radius: var(--rad-lg);
  padding: 32px 28px;
  border: 1px solid var(--clr-border);
  transition: all 0.3s ease;
  cursor: pointer;
}

.careers-compare-col:hover {
  border-color: var(--clr-orange);
  box-shadow: var(--clr-orange-glow), 0 12px 40px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.careers-compare-col--positive {
  background: var(--clr-surface-2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.careers-compare-col--negative {
  background: var(--clr-surface-2);
  border-color: rgba(248, 113, 113, 0.2);
}

.careers-compare-col-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e2e8f0;
  margin: 0 0 28px;
}

.careers-col-icon,
.careers-trait-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.careers-col-icon--yes,
.careers-trait-icon--yes {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' fill='rgba(34,211,238,0.12)' stroke='%2322d3ee' stroke-width='1.5'/%3E%3Cpath d='M8 12l2.5 2.5L16 9' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.careers-col-icon--no,
.careers-trait-icon--no {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' fill='rgba(248,113,113,0.08)' stroke='%23f87171' stroke-width='1.5'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6' stroke='%23f87171' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.careers-trait-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.careers-trait-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.careers-trait-list strong {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 4px;
}

.careers-trait-list span {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #94a3b8;
}

/* Section 3 — Culture */
.careers-culture {
  padding: 80px 0 100px;
  background: var(--clr-bg);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}

.careers-culture-card {
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  padding: 32px 28px;
}

.careers-culture-sub {
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.careers-culture-card > p {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #94a3b8;
  margin: 0;
}

.careers-culture-note {
  margin-top: 24px !important;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.88rem !important;
  color: #64748b !important;
}

.careers-culture-note a {
  color: #38bdf8;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(56, 189, 248, 0.35);
  transition: color 0.2s, border-color 0.2s;
}

.careers-culture-note a:hover {
  color: #7dd3fc;
  border-color: #7dd3fc;
}

/* Section 4 — Openings status */
.careers-openings {
  padding: 80px 0 100px;
  background: var(--clr-surface-1);
}

.careers-status-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  padding: 48px 40px;
  box-sizing: border-box;
  overflow: visible;
}

.careers-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 24px;
}

.careers-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.25);
}

.careers-status-card h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.careers-status-card > p {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #94a3b8;
  margin: 0 0 32px;
}

.careers-email-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.35);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.careers-email-cta:hover {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  box-shadow: 0 6px 28px rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
  color: #ffffff;
}

@media (max-width: 768px) {
  .careers-mandate { padding: calc(var(--nav-h) + 32px) 0 64px; }
  .careers-callout { padding: 24px 22px; }
  .careers-compare-grid { grid-template-columns: 1fr; }
  .careers-work { padding: 48px 0 56px; }
  .careers-culture { padding: 48px 0 56px; }
  .careers-openings { padding: 48px 0 56px; }
  .careers-status-card { padding: 36px 24px; }
}

/* ═══════════════════════════════════════════
   CAREERS GLASSMORPHISM CARDS
   ═══════════════════════════════════════════ */

/* Glassmorphism Card Base */
.glass-card {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 1rem;
  padding: 1.5rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.glass-card:hover {
  border-color: rgba(249, 115, 22, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(249, 115, 22, 0.15);
}

/* Card Grid Layout */
.careers-card-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (min-width: 768px) {
  .careers-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Positive Trait Cards */
.trait-card {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 1rem;
  padding: 1.5rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.trait-card:hover {
  border-color: rgba(34, 211, 238, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(34, 211, 238, 0.15);
}

.trait-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.trait-card-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: rgba(34, 211, 238, 0.1);
  color: #22d3ee;
}

.trait-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}

.trait-card-desc {
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
}

/* Negative/Warning Cards */
.warning-card {
  background: rgba(127, 29, 29, 0.2);
  border: 1px solid rgba(255, 106, 0, 0.4);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.warning-card:hover {
  border-color: rgba(255, 106, 0, 0.6);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(255, 106, 0, 0.15);
}

.warning-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.warning-card-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: rgba(255, 106, 0, 0.1);
  color: var(--clr-orange);
}

.warning-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fecaca;
}

.warning-card-desc {
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
}

/* Bento Style Box */
.bento-box {
  background: linear-gradient(90deg, rgba(15, 23, 42, 1) 0%, rgba(15, 23, 42, 0.8) 50%, rgba(15, 23, 42, 1) 100%);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 1.5rem;
  padding: 2rem;
  text-align: center;
  margin: 3rem 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Pulsing Status Badge */
.status-badge-pulse {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(249, 115, 22, 0.1);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
}

.status-badge-pulse::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #fb923c;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* Form Glassmorphism */
.form-glass-wrapper {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 1.5rem;
  padding: 2rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

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

@media (min-width: 768px) {
  .form-input-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.form-dropzone {
  border: 2px dashed rgba(148, 163, 184, 0.3);
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.form-dropzone:hover {
  border-color: rgba(249, 115, 22, 0.5);
  background: rgba(249, 115, 22, 0.05);
}

.form-submit-btn {
  background: linear-gradient(135deg, #f97316 0%, #d97706 100%);
  color: #ffffff;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  width: 100%;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.form-submit-btn:hover {
  background: linear-gradient(135deg, #ea580c 0%, #b45309 100%);
  transform: scale(1.01);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
}

/* ═══════════════════════════════════════════
   CORPORATE PAGE
   ═══════════════════════════════════════════ */

.corporate-hero-wrapper {
  padding-top: 144px;
  padding-bottom: 96px;
  padding-left: 24px;
  padding-right: 24px;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

.corporate-page {
  background-color: var(--clr-bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='%2338bdf8'><circle cx='18' cy='42' r='1' opacity='0.25'/><circle cx='160' cy='28' r='1.2' opacity='0.2'/><circle cx='95' cy='110' r='0.9' opacity='0.15'/><circle cx='48' cy='182' r='1.1' opacity='0.25'/><circle cx='202' cy='158' r='1' opacity='0.2'/><circle cx='130' cy='195' r='0.8' opacity='0.15'/></g><g fill='%23ff6a00'><circle cx='75' cy='16' r='0.7' opacity='0.3'/><circle cx='188' cy='92' r='0.8' opacity='0.25'/><circle cx='10' cy='105' r='0.6' opacity='0.22'/></g></svg>"),
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(56, 189, 248, 0.12) 0%, transparent 70%),
    radial-gradient(circle 520px at 90% 10%, rgba(255, 106, 0, 0.12) 0%, transparent 60%),
    radial-gradient(circle 480px at 10% 40%, rgba(56, 189, 248, 0.1) 0%, transparent 60%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 220px 220px, auto, auto, auto;
  background-attachment: fixed;
}

@media (min-width: 1024px) {
  .corporate-hero-wrapper {
    padding-left: 32px;
    padding-right: 32px;
  }
}

.corporate-hero {
  margin-bottom: 80px;
  position: relative;
}

.corporate-hero-inner {
  max-width: 1024px;
  margin: 0 auto;
  text-align: center;
}

.corporate-hero-badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-orange-light);
  background: var(--clr-orange-subtle);
  border: 1px solid rgba(255, 106, 0, 0.3);
  border-radius: 999px;
  padding: 8px 20px;
  margin-bottom: 24px;
}

.corporate-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--clr-heading-strong);
  margin: 0 0 24px;
  text-shadow: 0 0 60px var(--clr-orange-subtle);
}

.corporate-hero-subtitle {
  font-size: 1.125rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto;
}

.corporate-main-wrapper {
  padding-top: 144px;
  padding-bottom: 96px;
  padding-left: 16px;
  padding-right: 16px;
  max-width: 1280px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .corporate-main-wrapper {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1024px) {
  .corporate-main-wrapper {
    padding-left: 32px;
    padding-right: 32px;
  }
}

.corporate-section {
  margin-bottom: 80px;
}

.corporate-section-inner {
  max-width: 1024px;
  margin: 0 auto;
}

.corporate-pill {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-blue-light);
  background: var(--clr-blue-subtle);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 999px;
  padding: 7px 18px;
  margin-bottom: 16px;
}

.corporate-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--clr-heading-strong);
  margin: 0 0 24px;
}

.corporate-text {
  font-size: 1rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

/* Deployment Scope Section */
.deployment-scope-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  background: var(--clr-inline-panel-bg);
  border: 1px solid var(--clr-border);
  border-radius: 1.5rem;
  padding: 2rem;
  margin: 3rem 0;
  box-shadow: var(--shadow-card);
}

@media (min-width: 768px) {
  .deployment-scope-container {
    grid-template-columns: repeat(12, 1fr);
    gap: 3rem;
    padding: 3rem;
  }
}

.deployment-diagram {
  grid-column: span 12;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .deployment-diagram {
    grid-column: span 5;
  }
}

.concentric-circles {
  position: relative;
  width: 336px;
  height: 336px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-outer {
  position: absolute;
  width: 336px;
  height: 336px;
  border: 2px solid rgba(255, 106, 0, 0.3);
  background: var(--clr-orange-subtle);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.circle-middle {
  position: absolute;
  width: 224px;
  height: 224px;
  border: 2px solid rgba(255, 106, 0, 0.5);
  background: rgba(255, 106, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.circle-inner {
  position: relative;
  width: 112px;
  height: 112px;
  background: var(--clr-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  box-shadow: var(--clr-orange-glow);
}

.circle-content {
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
}

.circle-label {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--clr-inline-panel-bg);
  color: var(--clr-orange-light);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--clr-border);
}

.deployment-legend {
  grid-column: span 12;
}

@media (min-width: 768px) {
  .deployment-legend {
    grid-column: span 7;
  }
}

.legend-item {
  padding: 1.5rem;
  border-bottom: 1px solid var(--clr-border);
}

.legend-item:last-child {
  border-bottom: none;
}

.legend-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.legend-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.legend-dot-solid {
  background: var(--clr-orange);
}

.legend-dot-medium {
  background: rgba(255, 106, 0, 0.6);
  border: 1px solid var(--clr-orange);
}

.legend-dot-outline {
  border: 2px solid rgba(255, 106, 0, 0.5);
  background: transparent;
}

.legend-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-text);
}

.legend-desc {
  font-size: 1rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.legend-meta {
  font-size: 0.875rem;
  color: var(--clr-text-subtle);
}

/* Pricing Glass Box */
.pricing-glass-box {
  background: var(--clr-inline-panel-bg);
  border: 1px solid var(--clr-border);
  border-radius: 1.5rem;
  padding: 2rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-x: auto;
  box-shadow: var(--shadow-card);
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

.pricing-table th {
  text-align: left;
  padding: 1rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-heading-strong);
  border-bottom: 1px solid var(--clr-border);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pricing-table td {
  padding: 1rem;
  color: var(--clr-text-muted);
  border-bottom: 1px solid var(--clr-border);
}

.pricing-table tr:last-child td {
  border-bottom: none;
}

.pricing-matrix-subtext {
  font-size: 0.875rem;
  color: var(--clr-text-subtle);
  line-height: 1.6;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--clr-blue-subtle);
  border-radius: 0.5rem;
  border-left: 3px solid var(--clr-blue-light);
}

/* Support Cards Grid */
.support-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (min-width: 768px) {
  .support-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .support-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.support-card {
  background: var(--clr-inline-panel-bg);
  border: 1px solid var(--clr-border);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.support-card:hover {
  border-color: rgba(255, 106, 0, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255, 106, 0, 0.15);
}

.support-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.support-card-header svg {
  color: var(--clr-orange);
  flex-shrink: 0;
}

.support-card-header h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-heading-strong);
  line-height: 1.3;
}

.support-card-content {
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
}

/* Trial Container */
.trial-container {
  background: var(--clr-inline-panel-bg);
  border: 1px solid var(--clr-border);
  border-radius: 1.5rem;
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.trial-text {
  font-size: 1rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.trial-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, var(--clr-orange), var(--clr-orange-dim));
  color: #ffffff;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  margin-top: 1.5rem;
  box-shadow: 0 10px 25px rgba(255, 106, 0, 0.2);
  transition: all 0.3s ease;
}

.trial-cta-btn:hover {
  background: linear-gradient(to right, var(--clr-orange-dim), #b45309);
  transform: translateY(-2px);
  box-shadow: var(--clr-orange-glow);
}

/* Policies Grid */
.policies-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (min-width: 768px) {
  .policies-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .policies-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.policy-card {
  background: var(--clr-inline-panel-bg);
  border: 1px solid var(--clr-border);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-card);
}

.policy-card:hover {
  border-color: rgba(255, 106, 0, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255, 106, 0, 0.15);
}

.policy-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.policy-card-header svg {
  color: var(--clr-orange);
  flex-shrink: 0;
}

.policy-card-header h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-heading-strong);
  line-height: 1.3;
}

.policy-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--clr-orange-subtle);
  border: 1px solid rgba(255, 106, 0, 0.3);
  border-radius: 0.5rem;
  color: var(--clr-orange-light);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.policy-download-btn:hover {
  background: rgba(255, 106, 0, 0.2);
  border-color: rgba(255, 106, 0, 0.5);
  transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .concentric-circles {
    width: 280px;
    height: 280px;
  }
  
  .circle-outer {
    width: 280px;
    height: 280px;
  }
  
  .circle-middle {
    width: 186px;
    height: 186px;
  }
  
  .circle-inner {
    width: 93px;
    height: 93px;
  }
  
  .pricing-table {
    font-size: 0.875rem;
  }
  
  .pricing-table th,
  .pricing-table td {
    padding: 0.75rem 0.5rem;
  }
}

/* ═══════════════════════════════════════════
   CAREERS FORM SECTION
   ═══════════════════════════════════════════ */
.careers-form-section {
  padding: 80px 0;
  background: linear-gradient(180deg, transparent, rgba(56, 189, 248, 0.03), transparent);
}

.careers-form-wrap {
  max-width: 700px;
  margin: 0 auto;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Statutory Table Section */
.statutory-section {
  max-width: 1200px;
  margin: 0 auto;
}

.statutory-table-wrapper {
  overflow-x: auto;
  margin: 32px 0;
  border-radius: 12px;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-2);
}

.statutory-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  background: var(--clr-surface-2);
}

.statutory-table thead th {
  padding: 16px;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.76rem;
  color: var(--clr-text-muted);
  background: var(--clr-surface-3);
  border-bottom: 2px solid var(--clr-border);
  border-right: 1px solid var(--clr-border);
  white-space: nowrap;
}

.statutory-table thead th:first-child {
  text-align: left;
}

.statutory-table thead th:last-child {
  border-right: none;
  text-align: left;
  white-space: normal;
}

.statutory-table tbody td {
  padding: 16px;
  border-right: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  vertical-align: middle;
  text-align: center;
  color: var(--clr-text-muted);
}

.statutory-table tbody td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--clr-heading-strong);
  white-space: nowrap;
}

.statutory-table tbody td:last-child {
  border-right: none;
  text-align: left;
}

.statutory-table tbody tr:last-child td {
  border-bottom: none;
}

.statutory-table tbody tr:nth-child(even) td {
  background: var(--clr-surface-3);
}

.statutory-table .stat-doc-link {
  color: var(--clr-orange);
  text-decoration: none;
  font-weight: 600;
}
.statutory-table .stat-doc-link:hover {
  color: var(--clr-orange-light);
}
.statutory-table .stat-muted {
  color: var(--clr-text-subtle);
}

.statutory-table tbody tr:hover td {
  background: rgba(255, 106, 0, 0.06);
}

.statutory-empty {
  color: var(--clr-text-subtle);
}

/* Improve row-divider legibility on light surfaces (the generic
   --clr-border used by the tbody is a faint 14% blue in light mode). */
html[data-theme="light"] .statutory-table tbody td {
  border-color: rgba(37, 99, 235, 0.22);
}
html[data-theme="light"] .statutory-table thead th {
  border-color: rgba(37, 99, 235, 0.28);
}

.statutory-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-3);
  color: var(--clr-blue-light);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: all 0.2s;
}

.statutory-link svg {
  flex-shrink: 0;
}

.statutory-link:hover {
  color: var(--clr-orange);
  border-color: var(--clr-orange);
  background: var(--clr-orange-subtle);
}

.statutory-link:active {
  transform: translateY(1px);
}

.statutory-pending {
  color: var(--clr-text-subtle);
  font-style: italic;
  font-size: 0.85rem;
  text-align: center;
}

.statutory-other {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.statutory-notes {
  margin-top: 32px;
  padding: 24px;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
}

.statutory-notes h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--clr-blue-light);
  margin-bottom: 16px;
}

.statutory-notes ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.statutory-notes li {
  padding: 8px 0;
  color: var(--clr-text-muted);
  line-height: 1.6;
}

.statutory-notes li strong {
  color: var(--clr-text);
}

/* Corporate Page Sections */
.license-diagram-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.license-circles {
  position: relative;
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.license-circle {
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.license-circle-inner {
  width: 100px;
  height: 100px;
  background: rgba(220, 38, 38, 0.9);
  border: 3px solid var(--clr-orange);
  z-index: 3;
}

.license-circle-middle {
  width: 180px;
  height: 180px;
  background: rgba(255, 106, 0, 0.7);
  border: 3px solid rgba(255, 106, 0, 0.9);
  z-index: 2;
}

.license-circle-outer {
  width: 260px;
  height: 260px;
  background: rgba(255, 133, 51, 0.4);
  border: 3px solid rgba(255, 106, 0, 0.6);
  z-index: 1;
}

.license-circle-label {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

.license-circle-inner .license-circle-label {
  font-size: 0.75rem;
}

.license-legend {
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.legend-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.legend-color {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.legend-color-product {
  background: rgba(255, 106, 0, 0.9);
  border: 2px solid var(--clr-orange);
}

.legend-color-processor {
  background: rgba(255, 106, 0, 0.65);
  border: 2px solid rgba(255, 106, 0, 0.8);
}

.legend-color-microarchitecture {
  background: rgba(255, 133, 51, 0.4);
  border: 2px solid rgba(255, 106, 0, 0.55);
}

.legend-content h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-heading-strong);
  margin-bottom: 4px;
}

.legend-content p {
  font-size: 0.9rem;
  color: var(--clr-text-muted);
  line-height: 1.5;
  margin: 0;
}

.corp-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.corp-scope-card {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 32px;
  transition: all 0.3s ease;
}

.corp-scope-card:hover {
  border-color: var(--clr-blue-light);
  transform: translateY(-4px);
  box-shadow: var(--clr-blue-glow);
}

.corp-scope-card--featured {
  border-color: var(--clr-orange);
  box-shadow: var(--clr-orange-glow);
}

.corp-scope-header {
  margin-bottom: 16px;
}

.corp-scope-header h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--clr-text);
  margin-bottom: 8px;
}

.corp-scope-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--clr-surface-3);
  border: 1px solid var(--clr-border);
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--clr-text-muted);
}

.corp-scope-badge--blue {
  background: rgba(37, 99, 235, 0.1);
  border-color: var(--clr-blue);
  color: var(--clr-blue-light);
}

.corp-scope-desc {
  color: var(--clr-text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.corp-scope-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.corp-scope-features li {
  padding: 8px 0;
  color: var(--clr-text-muted);
  line-height: 1.5;
  position: relative;
  padding-left: 20px;
}

.corp-scope-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--clr-blue-light);
  font-weight: bold;
}

.corp-pricing-table-wrapper {
  overflow-x: auto;
  margin: 32px 0;
  border-radius: 12px;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-2);
}

.corp-pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.corp-pricing-table thead {
  background: var(--clr-surface-3);
}

.corp-pricing-table th {
  padding: 16px;
  text-align: left;
  font-weight: 600;
  color: var(--clr-blue-light);
  border-bottom: 2px solid var(--clr-border);
}

.corp-pricing-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
}

.corp-pricing-table tr:hover {
  background: rgba(56, 189, 248, 0.05);
}

.corp-delivery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.corp-delivery-card {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 28px;
}

.corp-delivery-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--clr-blue-light);
  margin-bottom: 12px;
}

.corp-delivery-card p {
  color: var(--clr-text-muted);
  line-height: 1.6;
}

.corp-delivery-options {
  list-style: none;
  margin: 0;
  padding: 0;
}

.corp-delivery-options li {
  font-size: 0.95rem;
  color: var(--clr-text-muted);
  line-height: 1.8;
  margin-bottom: 12px;
  padding-left: 20px;
  position: relative;
}

.corp-delivery-options li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--clr-blue-light);
  font-weight: bold;
}

.corp-takeaways-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 32px;
  margin-top: 32px;
}

.corp-takeaway-card {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 32px;
}

.corp-takeaway-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--clr-text);
  margin-bottom: 16px;
}

.corp-takeaway-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.corp-takeaway-card li {
  padding: 10px 0;
  color: var(--clr-text-muted);
  line-height: 1.5;
  position: relative;
  padding-left: 24px;
}

.corp-takeaway-card li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--clr-orange);
  font-weight: bold;
}

.footer-socials-alt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 200px;
}

.footer-socials-alt .footer-social {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--clr-surface-3);
  border: 1px solid var(--clr-border);
  transition: all 0.2s;
}

.footer-socials-alt .footer-social:hover {
  background: var(--clr-blue-dark);
  border-color: var(--clr-blue-light);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .statutory-table-wrapper {
    font-size: 0.8rem;
  }
  
  .statutory-table th,
  .statutory-table td {
    padding: 10px 8px;
  }
  
  .license-diagram-container {
    flex-direction: column;
    gap: 40px;
  }

  .license-circles {
    width: 280px;
    height: 280px;
  }

  .license-circle-inner {
    width: 90px;
    height: 90px;
  }

  .license-circle-middle {
    width: 160px;
    height: 160px;
  }

  .license-circle-outer {
    width: 230px;
    height: 230px;
  }

  .license-legend {
    max-width: 100%;
  }
  
  .corp-scope-grid {
    grid-template-columns: 1fr;
  }
  
  .corp-delivery-grid {
    grid-template-columns: 1fr;
  }
  
  .corp-takeaways-grid {
    grid-template-columns: 1fr;
  }
  
  .corp-pricing-table {
    font-size: 0.85rem;
  }
  
  .corp-pricing-table th,
  .corp-pricing-table td {
    padding: 10px 8px;
  }
  
  .footer-socials-alt {
    gap: 12px;
  }
  
  .footer-socials-alt .footer-social {
    width: 36px;
    height: 36px;
  }
}

.footer-socials-alt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 200px;
}

.footer-socials-alt .footer-social {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--clr-surface-3);
  border: 1px solid var(--clr-border);
  transition: all 0.2s;
}

.footer-socials-alt .footer-social:hover {
  background: var(--clr-blue-dark);
  border-color: var(--clr-blue-light);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .statutory-table-wrapper {
    font-size: 0.8rem;
  }
  
  .statutory-table th,
  .statutory-table td {
    padding: 10px 8px;
  }
  
  .footer-socials-alt {
    gap: 12px;
  }
  
  .footer-socials-alt .footer-social {
    width: 36px;
    height: 36px;
  }
}

/* ═══════════════════════════════════════════
   LIGHT THEME — Component overrides
   ═══════════════════════════════════════════ */
html[data-theme="light"] .product-coming-soon-heading {
  color: var(--clr-heading-strong);
  text-shadow: none;
}
html[data-theme="light"] .modal-box {
  box-shadow: 0 16px 50px rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .wave-bg-canvas {
  opacity: 0.55;
}
html[data-theme="light"] .mission-card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .article-card,
html[data-theme="light"] .team-card,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .contact-form-wrap,
html[data-theme="light"] .product-highlight-item,
html[data-theme="light"] .product-specs-table,
html[data-theme="light"] .product-use-cases {
  background: var(--clr-card-bg);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .about-section {
  background: var(--clr-about-bg);
}
html[data-theme="light"] .proposition-panel {
  background: var(--clr-surface);
  border-color: var(--clr-border);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .careers-mandate,
html[data-theme="light"] .careers-work,
html[data-theme="light"] .careers-culture,
html[data-theme="light"] .careers-openings {
  background: var(--clr-bg);
}
html[data-theme="light"] .careers-compare-col,
html[data-theme="light"] .careers-culture-card,
html[data-theme="light"] .careers-status-card {
  background: var(--clr-surface);
  border-color: var(--clr-border);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .careers-mandate-title,
html[data-theme="light"] .careers-section-header h2,
html[data-theme="light"] .careers-callout-quote {
  color: var(--clr-text);
}
html[data-theme="light"] .careers-culture-note {
  border-top-color: var(--clr-border);
}
html[data-theme="light"] .corp-pricing-section {
  background: var(--clr-bg);
}
html[data-theme="light"] .corp-licensing-block,
html[data-theme="light"] .corp-policies-section {
  background: var(--clr-surface);
}
html[data-theme="light"] .avas-fact-card,
html[data-theme="light"] .avas-chart-card,
html[data-theme="light"] .avas-simulator-wrap,
html[data-theme="light"] .avas-vp-card,
html[data-theme="light"] .avas-complaint-card {
  background: var(--clr-surface);
  border-color: var(--clr-border);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .avas-vp-title,
html[data-theme="light"] body.avas-page .section-title {
  color: var(--clr-text);
}
html[data-theme="light"] .avas-section-alt {
  background: linear-gradient(180deg, transparent, rgba(37, 99, 235, 0.04), transparent);
}
/* ── Light Theme: Contact Form & Location Card Panels ── */
html[data-theme="light"] .contact-form-wrap,
html[data-theme="light"] .contact-info-card {
  background: #ffffff;
  border: 1px solid #d8dee9;
  box-shadow: 0 4px 28px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .form-group label {
  color: #0f172a;
  font-weight: 700;
  letter-spacing: 0.06em;
}

html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group textarea,
html[data-theme="light"] .form-group select {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .form-group input::placeholder,
html[data-theme="light"] .form-group textarea::placeholder {
  color: #64748b;
  opacity: 1;
}

html[data-theme="light"] .form-group input:hover:not(:focus),
html[data-theme="light"] .form-group textarea:hover:not(:focus),
html[data-theme="light"] .form-group select:hover:not(:focus) {
  border-color: #94a3b8;
}

html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group textarea:focus,
html[data-theme="light"] .form-group select:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3.5px rgba(249, 115, 22, 0.2), 0 1px 3px rgba(15, 23, 42, 0.08);
  outline: none;
  background: #ffffff;
}

/* Select — styled dropdown with matching borders, fill, and custom chevron */
html[data-theme="light"] .form-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
  line-height: 1.4;
}
html[data-theme="light"] .form-group select option {
  background: #ffffff;
  color: #0f172a;
}
/* Error / notice banners in light theme */
html[data-theme="light"] .form-error-banner {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
  color: #b91c1c;
}
html[data-theme="light"] .form-error-banner.form-notice {
  background: rgba(37, 99, 235, 0.07);
  border-color: rgba(37, 99, 235, 0.3);
  color: #1e40af;
}
html[data-theme="light"] .form-error {
  color: #dc2626;
}
html[data-theme="light"] .brand-name {
  color: var(--clr-heading-strong);
}

/* ── Functional brand-accent text darkened for light-theme contrast (WCAG 4.5:1) ── */
html[data-theme="light"] .logo-tagline { color: #92400e; }

html[data-theme="light"] .nav-link.active { color: #b45309; }
html[data-theme="light"] .nav-link:hover { color: #0369a1; }

html[data-theme="light"] .footer-nav-header,
html[data-theme="light"] .footer-socials-header { color: #0369a1; }
html[data-theme="light"] .footer-link:hover { color: #0369a1; }
html[data-theme="light"] .footer-link.active { color: #b45309; }

html[data-theme="light"] .sound-toggle-btn { color: #0369a1; }
html[data-theme="light"] .sound-toggle-btn:hover { color: #b45309; }

html[data-theme="light"] .stat-doc-link { color: #b45309; }
html[data-theme="light"] .stat-doc-link:hover { color: #9a3412; }

html[data-theme="light"] .blog-read-more { color: #b45309; }

html[data-theme="light"] .product-detail-breadcrumb a { color: #0369a1; }
html[data-theme="light"] .product-detail-breadcrumb a:hover { color: #1e40af; }

html[data-theme="light"] .contact-detail-row a,
html[data-theme="light"] .map-addr-link:hover { color: #b45309; }

html[data-theme="light"] .product-price,
html[data-theme="light"] .catalog-price-badge { color: #b45309; }

html[data-theme="light"] .btn-details { color: #0369a1; }
html[data-theme="light"] .btn-details:hover { color: #b45309; }

/* ═══════════════════════════════════════════
   LIGHT THEME — Comprehensive visibility fixes
   Fixes hardcoded dark panels + white text
   that don't use CSS variables.
   ═══════════════════════════════════════════ */

/* ── 1. Large section backgrounds (dark → light) ── */
html[data-theme="light"] .page-hero-section,
html[data-theme="light"] .article-portal-hero {
  background: linear-gradient(180deg, var(--clr-page-hero-start) 0%, var(--clr-page-hero-end) 100%);
}

html[data-theme="light"] .clients-section {
  background: linear-gradient(180deg, var(--clr-surface) 0%, var(--clr-about-bg) 50%, var(--clr-surface) 100%);
}
html[data-theme="light"] .awards-section {
  background-color: var(--clr-bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='%23ffb27a'><circle cx='18' cy='42' r='1' opacity='0.55'/><circle cx='160' cy='28' r='1.2' opacity='0.5'/><circle cx='95' cy='110' r='0.9' opacity='0.4'/><circle cx='48' cy='182' r='1.1' opacity='0.55'/><circle cx='202' cy='158' r='1' opacity='0.5'/><circle cx='130' cy='195' r='0.8' opacity='0.4'/></g><g fill='%23ff8f3f'><circle cx='75' cy='16' r='0.7' opacity='0.6'/><circle cx='188' cy='92' r='0.8' opacity='0.55'/><circle cx='10' cy='105' r='0.6' opacity='0.5'/></g></svg>"),
    radial-gradient(ellipse 65% 45% at 50% 120%, rgba(255, 205, 175, 0.45) 0%, transparent 70%),
    radial-gradient(circle 520px at 15% 20%, rgba(173, 216, 255, 0.4) 0%, transparent 65%),
    radial-gradient(circle 480px at 85% 25%, rgba(255, 181, 130, 0.45) 0%, rgba(255, 210, 175, 0.2) 40%, transparent 72%),
    radial-gradient(ellipse 55% 55% at 50% 50%, rgba(255, 255, 255, 0.7) 0%, var(--clr-bg) 75%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 220px 220px, auto, auto, auto, auto;
  border-top-color: var(--clr-border);
  border-bottom-color: var(--clr-border);
}
html[data-theme="light"] .codex-ecosystem-section {
  background: radial-gradient(ellipse 70% 60% at 50% 20%, var(--clr-about-bg) 0%, var(--clr-bg) 100%);
}
html[data-theme="light"] .codex-catalogue-section {
  background: linear-gradient(180deg, var(--clr-bg) 0%, var(--clr-surface) 100%);
}
html[data-theme="light"] .careers-work {
  background: var(--clr-surface);
}

/* ── 2. Hero & Page titles (white → dark) ── */
html[data-theme="light"] .page-hero-title,
html[data-theme="light"] .article-portal-hero h1 {
  color: var(--clr-heading-strong);
  text-shadow: none;
}
html[data-theme="light"] .hero-title {
  color: var(--clr-heading-strong);
}
html[data-theme="light"] .hero-title em {
  background: linear-gradient(135deg, #0f172a 30%, var(--clr-blue) 75%, var(--clr-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-theme="light"] .section-title {
  color: var(--clr-heading-strong);
}

/* ── 3. Opaque dark panels & cards (dark surfaces → light) ── */
html[data-theme="light"] .venn-node {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, var(--clr-surface-2) 100%);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), inset 0 0 16px rgba(37, 99, 235, 0.05);
}
html[data-theme="light"] .venn-node-label,
html[data-theme="light"] .venn-hub-logo,
html[data-theme="light"] .venn-center-hub {
  color: var(--clr-heading-strong);
}
html[data-theme="light"] .custom-eng-banner,
html[data-theme="light"] .video-companion-banner {
  background: var(--clr-surface);
  border-color: var(--clr-border);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .custom-eng-text h3,
html[data-theme="light"] .video-companion-title,
html[data-theme="light"] .award-card h3,
html[data-theme="light"] .perf-title,
html[data-theme="light"] .step-node-title,
html[data-theme="light"] .catalogue-wizard-title,
html[data-theme="light"] .catalogue-wizard-head p,
html[data-theme="light"] .catalogue-wizard-step-title,
html[data-theme="light"] .codex-stack-ann-title,
html[data-theme="light"] .perf-output-title,
html[data-theme="light"] .codex-compare-title,
html[data-theme="light"] .catalogue-hub-title,
html[data-theme="light"] .cat-hub-core-title,
html[data-theme="light"] .cat-hub-arch-label,
html[data-theme="light"] .codex-catalogue-title,
html[data-theme="light"] .cat-detail-title,
html[data-theme="light"] .mhz-chart-head strong,
html[data-theme="light"] .wizard-head-title,
html[data-theme="light"] .wizard-head-sub,
html[data-theme="light"] .wizard-step-indicator,
html[data-theme="light"] .wizard-step-label,
html[data-theme="light"] .wizard-q-title,
html[data-theme="light"] .award-num,
html[data-theme="light"] .plot-point.point-ours .plot-label,
html[data-theme="light"] .perf-output-num,
html[data-theme="light"] .perf-output-item strong,
html[data-theme="light"] .wizard-result-title,
html[data-theme="light"] .wizard-result-sub {
  color: var(--clr-text);
}
html[data-theme="light"] .form-success-card {
  background: var(--clr-surface);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .award-card,
html[data-theme="light"] .perf-benefit-card,
html[data-theme="light"] .codex-mhz-chart,
html[data-theme="light"] .catalogue-tab-nav,
html[data-theme="light"] .perf-calc-output,
html[data-theme="light"] .catalogue-wizard-card,
html[data-theme="light"] .pmodal-video-box,
html[data-theme="light"] .pmodal-video-preview {
  background: var(--clr-surface);
  border-color: var(--clr-border);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .product-img-wrap {
  background: var(--clr-surface-3);
}
html[data-theme="light"] .product-detail-hero-text h1 {
  background: linear-gradient(135deg, #0f172a 20%, var(--clr-blue-dim) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-theme="light"] .article-prose h2,
html[data-theme="light"] .article-prose h3,
html[data-theme="light"] .toc-title {
  color: var(--clr-blue-dim);
}
html[data-theme="light"] .toc-link:hover {
  color: var(--clr-text);
  background: rgba(37, 99, 235, 0.07);
}

/* Light theme: darken semantic status accent text so color-coded chips stay
   readable on light surfaces while preserving their meaning. */
html[data-theme="light"] .product-cat-tag,
html[data-theme="light"] .cat-pill-btn.active,
html[data-theme="light"] .m-badge.m-d,
html[data-theme="light"] .cat-badge.badge-ready {
  color: var(--clr-blue-dim);
}
html[data-theme="light"] .product-cat-tag.tag-ready,
html[data-theme="light"] .m-badge.m-de {
  color: #15803d;
}
html[data-theme="light"] .product-cat-tag.tag-dev,
html[data-theme="light"] .m-badge.m-ed-i,
html[data-theme="light"] .cat-badge.badge-dev {
  color: #a16207;
}
html[data-theme="light"] .cat-badge.badge-soon {
  color: #1d4ed8;
}
html[data-theme="light"] .careers-callout {
  background: var(--clr-surface-2);
  border-color: var(--clr-border);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .careers-callout-quote {
  color: var(--clr-text);
}

/* ── Corporate page panels & cards (dark → light surfaces) ── */
html[data-theme="light"] .deployment-scope-container,
html[data-theme="light"] .pricing-glass-box,
html[data-theme="light"] .support-card,
html[data-theme="light"] .trial-container,
html[data-theme="light"] .policy-card,
html[data-theme="light"] .legend-item {
  background: var(--clr-card-bg);
  border-color: var(--clr-border);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .corporate-hero-title {
  text-shadow: none;
}
html[data-theme="light"] .pricing-table th,
html[data-theme="light"] .legend-title,
html[data-theme="light"] .corporate-section-title {
  color: var(--clr-heading-strong);
}
html[data-theme="light"] .pricing-table td,
html[data-theme="light"] .legend-desc,
html[data-theme="light"] .corporate-text {
  color: var(--clr-text);
}
html[data-theme="light"] .pricing-matrix-subtext,
html[data-theme="light"] .legend-meta,
html[data-theme="light"] .support-card-content,
html[data-theme="light"] .trial-text {
  color: var(--clr-text-muted);
}
html[data-theme="light"] .circle-label {
  color: var(--clr-orange-dim);
  background: var(--clr-card-bg);
  border-color: var(--clr-border);
}
html[data-theme="light"] .circle-inner {
  box-shadow: 0 0 24px rgba(255, 106, 0, 0.35);
}
html[data-theme="light"] .corporate-pill {
  background: rgba(37, 99, 235, 0.08);
  color: var(--clr-blue);
  border-color: rgba(37, 99, 235, 0.22);
}
html[data-theme="light"] .policy-download-btn {
  background: rgba(255, 106, 0, 0.08);
  color: var(--clr-orange-dim);
  border-color: rgba(255, 106, 0, 0.25);
}
html[data-theme="light"] .policy-download-btn:hover {
  background: rgba(255, 106, 0, 0.14);
  border-color: rgba(255, 106, 0, 0.4);
}

/* ── 4. Semi-transparent white borders / muted text in dark cards ── */
html[data-theme="light"] .perf-output-header {
  border-bottom-color: var(--clr-border);
}
html[data-theme="light"] .pmodal-spec-row {
  border-bottom-color: var(--clr-border);
}
html[data-theme="light"] .careers-compare-col {
  border-color: var(--clr-border);
}

/* ── 5. Text that's still readable if light-on-light (semi-transparent whites) ── */
html[data-theme="light"] .venn-hub-sub {
  color: var(--clr-blue);
}
html[data-theme="light"] .mission-card p,
html[data-theme="light"] .need-card p,
html[data-theme="light"] .need-card-problem,
html[data-theme="light"] .need-card-solution,
html[data-theme="light"] .feat-list li,
html[data-theme="light"] .prop-panel-bullets li {
  color: var(--clr-text-muted);
}
html[data-theme="light"] .about-pillar-desc,
html[data-theme="light"] .mission-card-num {
  color: var(--clr-text-muted);
}
html[data-theme="light"] .about-pillar-title {
  color: var(--clr-heading-strong);
}
html[data-theme="light"] .mission-card.featured .mission-card-num {
  color: var(--clr-orange);
}
html[data-theme="light"] .custom-eng-text p,
html[data-theme="light"] .video-companion-desc,
html[data-theme="light"] .award-card p,
html[data-theme="light"] .mhz-chart-head,
html[data-theme="light"] .stack-ann-sub {
  color: var(--clr-text-muted);
}
html[data-theme="light"] .award-logo-container {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--clr-border);
}
html[data-theme="light"] .wizard-step-num {
  background: var(--clr-blue-subtle);
  border-color: var(--clr-border-blue);
  color: var(--clr-blue);
}
html[data-theme="light"] .wizard-option-btn {
  background: var(--clr-surface-2);
  border-color: var(--clr-border);
  color: var(--clr-text);
}
html[data-theme="light"] .wizard-option-btn:hover {
  background: var(--clr-surface-3);
  border-color: var(--clr-orange);
}

/* ── 6. Product detail: Audio Codex wizard result card & related ── */
html[data-theme="light"] .wizard-result-card {
  background: var(--clr-surface);
  border-color: var(--clr-border-bright);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .wizard-result-spec span:first-child,
html[data-theme="light"] .perf-output-item span:first-child,
html[data-theme="light"] .codex-stack-layer-label {
  color: var(--clr-text-muted);
}
html[data-theme="light"] .cat-hub-core-desc,
html[data-theme="light"] .cat-detail-desc,
html[data-theme="light"] .cat-tab-arch-note,
html[data-theme="light"] .catalogue-hub-sub {
  color: var(--clr-text-muted);
}
html[data-theme="light"] .cat-hub-layer-name,
html[data-theme="light"] .catalogue-card-title,
html[data-theme="light"] .codex-card-title {
  color: var(--clr-heading-strong);
}

/* ── 7. AVAS page deep panels ── */
html[data-theme="light"] .avas-fact-title,
html[data-theme="light"] .avas-complaint-text,
html[data-theme="light"] .avas-chart-title,
html[data-theme="light"] .avas-sim-title,
html[data-theme="light"] .avas-bar-val {
  color: var(--clr-text);
}
html[data-theme="light"] .avas-complaint-author,
html[data-theme="light"] .avas-collage-hint,
html[data-theme="light"] .avas-sc-platform,
html[data-theme="light"] .avas-section-sub {
  color: var(--clr-text-subtle);
}
html[data-theme="light"] body.avas-page .hero-subtitle {
  color: var(--clr-text-muted);
}

/* ── 8. Careers section deep components ── */
html[data-theme="light"] .careers-mandate-title,
html[data-theme="light"] .careers-section-header h2,
html[data-theme="light"] .careers-compare-title,
html[data-theme="light"] .careers-opening-title,
html[data-theme="light"] .careers-status-card h3,
html[data-theme="light"] .careers-culture-title,
html[data-theme="light"] .careers-section-head {
  color: var(--clr-heading-strong);
}
html[data-theme="light"] .careers-compare-bullets li,
html[data-theme="light"] .careers-opening-desc,
html[data-theme="light"] .careers-status-card p,
html[data-theme="light"] .careers-culture-desc,
html[data-theme="light"] .careers-culture-benefits li {
  color: var(--clr-text-muted);
}

/* ── 9. Corporate page deep panels ── */
html[data-theme="light"] .corp-licensing-title,
html[data-theme="light"] .corp-policies-title,
html[data-theme="light"] .corp-pricing-title,
html[data-theme="light"] .corp-fact-card h3,
html[data-theme="light"] .corp-fact-card .corp-fact-num {
  color: var(--clr-heading-strong);
}
html[data-theme="light"] .corp-licensing-text p,
html[data-theme="light"] .corp-policies-list li,
html[data-theme="light"] .corp-pricing-table td,
html[data-theme="light"] .corp-fact-card p {
  color: var(--clr-text-muted);
}
html[data-theme="light"] .corp-pricing-table {
  border-color: var(--clr-border);
}

/* ── 10. Team cards & modals ── */
html[data-theme="light"] .team-member-name,
html[data-theme="light"] .modal-title,
html[data-theme="light"] .contact-title {
  color: var(--clr-heading-strong);
}
html[data-theme="light"] .team-member-role,
html[data-theme="light"] .modal-close,
html[data-theme="light"] .contact-subtitle,
html[data-theme="light"] .contact-info p {
  color: var(--clr-text-muted);
}

/* ── 11. Articles portal & reader ── */
html[data-theme="light"] .article-title,
html[data-theme="light"] .articles-section-head,
html[data-theme="light"] .reader-title {
  color: var(--clr-heading-strong);
}
html[data-theme="light"] .article-excerpt,
html[data-theme="light"] .article-meta,
html[data-theme="light"] .reader-meta,
html[data-theme="light"] .articles-section-sub,
html[data-theme="light"] .reader-body p {
  color: var(--clr-text-muted);
}
html[data-theme="light"] .article-card,
html[data-theme="light"] .reader-toolbar,
html[data-theme="light"] .articles-filter-bar {
  background: var(--clr-surface);
  border-color: var(--clr-border);
}

/* ── 12. Product detail pages common (inner page hero, spec tables) ── */
html[data-theme="light"] .product-highlight-item h3,
html[data-theme="light"] .product-page-title,
html[data-theme="light"] .product-section-title,
html[data-theme="light"] .spec-table th {
  color: var(--clr-heading-strong);
}
html[data-theme="light"] .product-highlight-item p,
html[data-theme="light"] .product-page-subtitle,
html[data-theme="light"] .product-section-sub,
html[data-theme="light"] .spec-table td {
  color: var(--clr-text-muted);
}
html[data-theme="light"] .spec-table,
html[data-theme="light"] .spec-table th,
html[data-theme="light"] .spec-table td {
  border-color: var(--clr-border);
}

/* ── 13. Deep sections: prop panel + venn node buttons ── */
html[data-theme="light"] .prop-panel-title,
html[data-theme="light"] .logo-text {
  color: var(--clr-heading-strong) !important;
}

html[data-theme="light"] .need-card,
html[data-theme="light"] .feat-card,
html[data-theme="light"] .feat-algo-item,
html[data-theme="light"] .pipeline-diagram-wrap,
html[data-theme="light"] .demo-tabs,
html[data-theme="light"] .vsrc-card,
html[data-theme="light"] .vgeq-card,
html[data-theme="light"] .vspec-side,
html[data-theme="light"] .vspec-card {
  background: var(--clr-surface);
  border-color: var(--clr-border);
}
html[data-theme="light"] .need-card-tag,
html[data-theme="light"] .pipe-node-box,
html[data-theme="light"] .vsrc-stat-val,
html[data-theme="light"] .vspec-cost-badge,
html[data-theme="light"] .feat-algo-name {
  color: var(--clr-heading-strong);
}
html[data-theme="light"] .pipe-node-label,
html[data-theme="light"] .legend-item,
html[data-theme="light"] .legend-click-hint,
html[data-theme="light"] .branch-output,
html[data-theme="light"] .vsrc-stat-label,
html[data-theme="light"] .vgeq-band-label,
html[data-theme="light"] .vgeq-band-val {
  color: var(--clr-text-muted);
}
html[data-theme="light"] .need-card h3,
html[data-theme="light"] .feat-card-title,
html[data-theme="light"] .vspec-side-title {
  color: var(--clr-heading-strong);
}
html[data-theme="light"] .demo-tab-btn:hover:not(.active) {
  background: var(--clr-surface-2);
  color: var(--clr-text);
}

/* ── 14. Case-study / client section (Audio Codex inline styles) ── */
html[data-theme="light"] .cs-client-icon {
  color: #ffffff;
}
html[data-theme="light"] .cs-client-name,
html[data-theme="light"] .cs-benefit-title,
html[data-theme="light"] .cs-tl-title,
html[data-theme="light"] .cs-rom-title {
  color: var(--clr-text);
}
html[data-theme="light"] .cs-flow-step,
html[data-theme="light"] .cs-benefit-card,
html[data-theme="light"] .cs-rom-card,
html[data-theme="light"] .cs-mhz-visual {
  background: var(--clr-surface);
  border-color: var(--clr-border);
}
html[data-theme="light"] .cs-flow-arrow {
  color: rgba(15, 23, 42, 0.25);
}
html[data-theme="light"] .cs-rom-card.hl {
  border-color: rgba(255, 51, 75, 0.35);
  background: rgba(255, 51, 75, 0.04);
}
html[data-theme="light"] .cs-robust-card {
  background: var(--clr-surface);
  border-color: var(--clr-border);
}
html[data-theme="light"] .cs-limit-label {
  color: var(--clr-text-subtle);
}

/* ── 15. Post-processing inline cards & pipeline nodes ── */
html[data-theme="light"] .pipe-node-box.decoder,
html[data-theme="light"] .pipe-node-box.clickable,
html[data-theme="light"] .pipe-node-box.dac {
  background: var(--clr-surface);
}
html[data-theme="light"] .eq-gains-card {
  background: var(--clr-surface-2);
  border-color: var(--clr-border);
}
html[data-theme="light"] .eq-gains-title,
html[data-theme="light"] .eq-fader-hz {
  color: var(--clr-text-muted);
}
html[data-theme="light"] .eq-fader-track {
  background: rgba(100, 116, 139, 0.4);
}
html[data-theme="light"] .spec-output {
  background: var(--clr-surface);
  border-color: var(--clr-border);
}
html[data-theme="light"] .need-card,
html[data-theme="light"] .pipeline-diagram-wrap,
html[data-theme="light"] .feat-card,
html[data-theme="light"] .feat-algo-item,
html[data-theme="light"] .demo-tabs,
html[data-theme="light"] .vsrc-card,
html[data-theme="light"] .vgeq-card,
html[data-theme="light"] .vspec-card {
  box-shadow: var(--shadow-card);
}

/* ── 15a. VSRC/VGEQ/VSPEC demo cards — match the codecs-page calculator card
   family (dark navy + orange in dark; white surface + dark headings in light).
   The inline <style> hardcodes dark backgrounds and blue headings, so remap
   them to the site's card tokens here for a consistent light theme. */
html[data-theme="light"] .vsrc-card,
html[data-theme="light"] .vgeq-card,
html[data-theme="light"] .vspec-card {
  background: var(--clr-surface);
  border-color: var(--clr-border);
}
html[data-theme="light"] .vsrc-card h3,
html[data-theme="light"] .vgeq-card h3,
html[data-theme="light"] .vspec-card h3 {
  color: var(--clr-heading-strong);
}
html[data-theme="light"] .vsrc-preset-btn {
  background: var(--clr-surface-2);
  border-color: var(--clr-border);
  color: var(--clr-heading-strong);
}
html[data-theme="light"] .vsrc-preset-btn.active {
  background: linear-gradient(135deg, var(--clr-orange) 0%, #ff8c33 100%);
  border-color: transparent;
  color: #ffffff;
}
html[data-theme="light"] .vsrc-preset-btn:hover {
  background: var(--clr-surface-3);
  border-color: var(--clr-orange);
  color: var(--clr-heading-strong);
}
html[data-theme="light"] .vsrc-stat {
  background: #f8fafc;
  border-color: #e2e8f0;
}
html[data-theme="light"] .vsrc-stat-val,
html[data-theme="light"] .vsrc-stat-label,
html[data-theme="light"] .vgeq-band-val {
  color: var(--clr-heading-strong);
}
html[data-theme="light"] .vsrc-play-btn {
  color: var(--clr-orange);
}

/* ── 15b. Pipeline diagram: light-theme node fixes ──
   The inline <style> sets .pipe-node-box.source to a dark navy
   background; the generic light override (line ~10516) then flips its
   text to near-black, making it unreadable on light surfaces. Restore
   a readable light node and keep clickable hover affordances visible. */
html[data-theme="light"] .pipe-node-box.source {
  background: var(--clr-surface-3);
  color: var(--clr-heading-strong);
  border-color: rgba(100, 116, 139, 0.5);
}
html[data-theme="light"] .pipe-node-box.clickable:hover {
  transform: scale(1.05);
}
html[data-theme="light"] .pipe-node-box.vsrc:hover {
  background: rgba(56, 189, 248, 0.1);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.18);
}
html[data-theme="light"] .pipe-node-box.vgeq:hover {
  background: rgba(255, 107, 0, 0.1);
  box-shadow: 0 0 20px rgba(255, 107, 0, 0.16);
}
html[data-theme="light"] .pipe-node-box.vspec:hover {
  background: rgba(255, 106, 0, 0.12);
  box-shadow: 0 0 20px rgba(255, 106, 0, 0.2);
}

/* ═══════════════════════════════════════════
   GLOBAL LIGHT THEME OVERRIDES
   All hardcoded dark-theme colors remapped
   for high-contrast, readable light theme
   ═══════════════════════════════════════════ */

/* ── Typography: hardcoded white → dark slate in light ── */
html[data-theme="light"] .hero-title,
html[data-theme="light"] .hero-title em,
html[data-theme="light"] .venn-hub-logo,
html[data-theme="light"] .venn-node-label,
html[data-theme="light"] .venn-node:hover .venn-node-label,
html[data-theme="light"] .venn-node.active-node .venn-node-label,
html[data-theme="light"] .prop-panel-title,
html[data-theme="light"] .about-pillar-title,
html[data-theme="light"] .filter-btn.active,
html[data-theme="light"] .btn-know-more,
html[data-theme="light"] .catalog-card-img-overlay span,
html[data-theme="light"] .featured-tag,
html[data-theme="light"] .form-success-card h3,
html[data-theme="light"] .success-detail-item .val,
html[data-theme="light"] .map-overlay-badge,
html[data-theme="light"] .location-map:hover .map-overlay-badge,
html[data-theme="light"] .footer-logo-title,
html[data-theme="light"] .pmodal-play-btn,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .cs-client-icon,
html[data-theme="light"] .btn-spinner,
html[data-theme="light"] .vision-statement,
html[data-theme="light"] .mission-statement,
html[data-theme="light"] .perf-title,
html[data-theme="light"] .step-node-title,
html[data-theme="light"] .avas-bar-val,
html[data-theme="light"] .avas-vp-title,
html[data-theme="light"] #audio-cursor-ring .eq-bar {
  color: var(--clr-heading-strong);
}

/* ── Override specifically for text that MUST stay white on colored backgrounds in light theme too ── */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-know-more,
html[data-theme="light"] .filter-btn.active,
html[data-theme="light"] .featured-tag,
html[data-theme="light"] .map-overlay-badge,
html[data-theme="light"] .location-map:hover .map-overlay-badge,
html[data-theme="light"] .catalog-card-img-overlay span,
html[data-theme="light"] .pmodal-play-btn,
html[data-theme="light"] .cs-client-icon {
  color: #ffffff;
}

/* Hero overlay light theme: less aggressive darkening */
html[data-theme="light"] .hero-overlay {
  background: radial-gradient(circle at 50% 40%, rgba(244, 247, 251, 0.15), rgba(244, 247, 251, 0.75) 80%);
}

/* Hero slide images in light theme: brighter */
html[data-theme="light"] .hero-slide-bg {
  filter: brightness(0.72) contrast(1.1);
}

/* ── Logo image wrap — light version ── */
html[data-theme="light"] .logo-img-wrap,
html[data-theme="light"] .footer-logo-img-wrap {
  background: #f8fafc;
  border-color: var(--clr-blue);
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.2), inset 0 0 8px rgba(37, 99, 235, 0.08);
}

/* ── Venn diagram center hub ── */
html[data-theme="light"] .venn-center-hub {
  background: radial-gradient(circle, #ffffff 0%, var(--clr-surface-2) 100%);
  border-color: var(--clr-orange);
  box-shadow: 0 0 28px rgba(255, 106, 0, 0.3), 0 0 45px rgba(37, 99, 235, 0.2);
}

html[data-theme="light"] .venn-node {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, var(--clr-surface-2) 100%);
  border-color: var(--clr-border-bright);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08), inset 0 0 12px rgba(37, 99, 235, 0.04);
}

html[data-theme="light"] .active-circular-glow,
html[data-theme="light"] .venn-node:hover,
html[data-theme="light"] .venn-node.active-node {
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 106, 0, 0.1) 100%);
  border: 1.5px solid var(--clr-orange) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 24px 6px rgba(255, 106, 0, 0.45) !important;
}

/* ── Proposition panel ── */
html[data-theme="light"] .proposition-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, var(--clr-surface) 100%);
  border-color: var(--clr-border);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08), inset 0 0 36px rgba(37, 99, 235, 0.02);
}

html[data-theme="light"] .proposition-panel.has-content {
  border-color: var(--clr-border-bright);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.1), 0 0 24px rgba(255, 106, 0, 0.06), inset 0 0 36px rgba(37, 99, 235, 0.03);
}



/* ── Product image wraps light bg ── */
html[data-theme="light"] .product-img-wrap {
  background: var(--clr-surface-2);
}

/* ── Custom engineering banner ── */
html[data-theme="light"] .custom-eng-banner {
  background: linear-gradient(135deg, var(--clr-surface) 0%, var(--clr-surface-2) 100%);
  border-color: var(--clr-border-bright);
}

/* ── Article tag ── */
html[data-theme="light"] .article-tag {
  background: rgba(255, 255, 255, 0.92);
  color: var(--clr-blue);
  border-color: var(--clr-border);
}

/* ── Form success card ── */
html[data-theme="light"] .form-success-card {
  background: linear-gradient(145deg, var(--clr-surface) 0%, #ffffff 100%);
  border-color: rgba(255, 106, 0, 0.35);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08), 0 0 20px rgba(255, 106, 0, 0.1);
}

html[data-theme="light"] .success-details-box {
  background: var(--clr-surface-2);
  border-color: var(--clr-border);
}

html[data-theme="light"] .map-overlay-badge {
  background: rgba(255, 255, 255, 0.95);
  color: var(--clr-text);
  border-color: var(--clr-border);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

/* ── Custom audio cursor ring light variant ── */
html[data-theme="light"] #audio-cursor-ring {
  border-color: rgba(37, 99, 235, 0.45);
  background: rgba(255, 255, 255, 0.25);
}

/* ── Modal box shadow light variant ── */
html[data-theme="light"] .modal-box {
  box-shadow: 0 16px 50px rgba(15, 23, 42, 0.15);
}

html[data-theme="light"] .pmodal-video-box {
  background: linear-gradient(135deg, var(--clr-surface-2) 0%, #e0e7ff 100%);
  border-color: var(--clr-border);
}

html[data-theme="light"] .pmodal-video-preview {
  background: radial-gradient(circle at center, rgba(191, 219, 254, 0.6) 0%, rgba(244, 247, 251, 0.95) 100%);
}

/* ── Product hero overlay gradient text — light variant ── */
html[data-theme="light"] .hero-title em {
  background: linear-gradient(135deg, var(--clr-heading-strong) 30%, var(--clr-blue) 75%, var(--clr-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ═══════════════════════════════════════════
   THEME TOGGLE BUTTON
   Compact sun/moon icon switch with smooth
   transition animation; matches VINJEY style
   ═══════════════════════════════════════════ */

.theme-toggle-btn {
  display: none !important;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-muted);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-2);
  transition: all var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  color: var(--clr-blue-light);
  border-color: var(--clr-blue-light);
  background: var(--clr-blue-subtle);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.18);
}

html[data-theme="light"] .theme-toggle-btn:hover {
  color: var(--clr-orange);
  border-color: var(--clr-orange);
  background: var(--clr-orange-subtle);
  box-shadow: 0 4px 14px rgba(255, 106, 0, 0.18);
}

.theme-toggle-btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  position: absolute;
}

.theme-toggle-btn .icon-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.theme-toggle-btn .icon-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html[data-theme="light"] .theme-toggle-btn .icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html[data-theme="light"] .theme-toggle-btn .icon-moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

/* Smooth theme transition on all color-affected properties */
html {
  transition: background-color 0.4s ease, color 0.4s ease;
}

*, *::before, *::after {
  transition-property: background-color, border-color, color, fill, stroke, box-shadow, filter;
  transition-duration: 0.35s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════
   SHARED PRIMITIVES (Corporate & Careers pages)
   ═══════════════════════════════════════════════════ */

.hero-badge {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0 auto 28px;
  padding: 8px 18px;
  background: var(--clr-orange-subtle);
  border: 1px solid rgba(255, 106, 0, 0.25);
  border-radius: 999px;
  color: var(--clr-orange);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-orange);
  margin-bottom: 14px;
  padding: 6px 14px;
  background: var(--clr-orange-subtle);
  border-radius: 999px;
  border: 1px solid rgba(255, 106, 0, 0.18);
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 600px) {
  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta-group .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════
   CORPORATE PAGE: NEW GRIDS & CARDS
   ═══════════════════════════════════════════════════ */

.corp-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: stretch;
}

.corp-scope-card {
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  position: relative;
}

.corp-scope-card:hover {
  transform: translateY(-4px);
  border-color: var(--clr-orange);
  box-shadow: 0 16px 48px rgba(255, 106, 0, 0.12);
}

.corp-scope-card--featured {
  border-color: var(--clr-orange);
  background: linear-gradient(180deg, rgba(255, 106, 0, 0.06) 0%, var(--clr-card-bg) 60%);
  box-shadow: 0 12px 40px rgba(255, 106, 0, 0.1), var(--shadow-card);
  transform: translateY(-4px);
}

.corp-scope-card--featured:hover {
  box-shadow: 0 20px 56px rgba(255, 106, 0, 0.18);
}

.corp-scope-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.corp-scope-header h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--clr-heading-strong);
  margin: 0;
}

.corp-scope-badge {
  display: inline-flex;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: var(--clr-orange-subtle);
  color: var(--clr-orange);
  border: 1px solid rgba(255, 106, 0, 0.2);
  white-space: nowrap;
}

.corp-scope-badge--blue {
  background: var(--clr-blue-subtle);
  color: var(--clr-blue-light);
  border-color: rgba(56, 189, 248, 0.25);
}

.corp-scope-desc {
  color: var(--clr-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.corp-scope-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.corp-scope-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--clr-text);
  line-height: 1.5;
  padding: 4px 0;
}

.corp-scope-features li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: var(--clr-orange-subtle);
  border-radius: 50%;
  position: relative;
}

.corp-scope-features li::after {
  content: "";
  position: absolute;
  flex-shrink: 0;
  width: 8px;
  height: 4px;
  margin-left: 5px;
  margin-top: 9px;
  border-left: 2px solid var(--clr-orange);
  border-bottom: 2px solid var(--clr-orange);
  transform: rotate(-45deg);
}

/* Pricing Table Wrapper */

.corp-pricing-table-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  padding: 8px;
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}

.corp-pricing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
}

.corp-pricing-table thead th {
  background: var(--clr-surface);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clr-orange);
  padding: 18px 22px;
  text-align: left;
  border-bottom: 2px solid var(--clr-border);
}

.corp-pricing-table thead th:first-child {
  border-top-left-radius: 12px;
}

.corp-pricing-table thead th:last-child {
  border-top-right-radius: 12px;
}

.corp-pricing-table tbody td {
  padding: 18px 22px;
  color: var(--clr-text);
  border-bottom: 1px solid var(--clr-border);
  line-height: 1.5;
}

.corp-pricing-table tbody tr:last-child td {
  border-bottom: none;
}

.corp-pricing-table tbody tr:hover td {
  background: var(--clr-inline-panel-bg);
}

.corp-pricing-table tbody td strong {
  color: var(--clr-heading-strong);
  font-family: var(--font-display);
  font-weight: 600;
}

/* Business Model Card */
.corp-business-model-card {
  background: linear-gradient(135deg, var(--clr-card-bg) 0%, rgba(37, 99, 235, 0.05) 100%);
  border: 1px solid var(--clr-border);
  border-left: 4px solid var(--clr-orange);
  border-radius: var(--rad-lg);
  padding: 36px 40px;
  max-width: 1000px;
  margin: 0 auto;
  box-shadow: var(--shadow-card);
}
.corp-bm-header {
  margin-bottom: 16px;
}
.corp-bm-text {
  color: var(--clr-text);
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0;
}

/* Pricing Models Grid */
.corp-pricing-models-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 1000px;
  margin: 0 auto 48px auto;
}
.corp-pricing-model-card {
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
}
.corp-pricing-model-card:hover {
  transform: translateY(-3px);
  border-color: var(--clr-blue);
  box-shadow: 0 12px 36px rgba(56, 189, 248, 0.1);
}
.corp-pricing-model-card--featured {
  border-color: rgba(255, 106, 0, 0.35);
}
.corp-pricing-model-card--featured:hover {
  border-color: var(--clr-orange);
  box-shadow: 0 12px 36px rgba(255, 106, 0, 0.15);
}
.corp-pm-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.12);
  color: var(--clr-blue-light);
  border: 1px solid rgba(56, 189, 248, 0.25);
  margin-bottom: 16px;
}
.corp-pm-badge--accent {
  background: rgba(255, 106, 0, 0.12);
  color: var(--clr-orange);
  border-color: rgba(255, 106, 0, 0.3);
}
.corp-pm-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--clr-heading-strong);
  margin: 0 0 6px 0;
}
.corp-pm-subtitle {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.corp-pm-desc {
  color: var(--clr-text);
  font-size: 0.96rem;
  line-height: 1.65;
  margin: 0;
}

/* Delivery Grid */

.corp-delivery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}

.corp-delivery-card {
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  padding: 28px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.corp-delivery-card:hover {
  transform: translateY(-3px);
  border-color: var(--clr-blue);
  box-shadow: 0 12px 36px rgba(56, 189, 248, 0.1);
}

.corp-delivery-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--clr-heading-strong);
  margin: 0 0 12px 0;
  padding-left: 14px;
  border-left: 3px solid var(--clr-orange);
}

.corp-delivery-card p {
  color: var(--clr-text-muted);
  font-size: 0.93rem;
  line-height: 1.7;
  margin: 0;
}

/* Takeaways Grid */

.corp-takeaways-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 1000px;
  margin: 0 auto;
}

.corp-takeaway-card {
  background: linear-gradient(145deg, var(--clr-card-bg) 0%, var(--clr-surface-2) 100%);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  padding: 32px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.corp-takeaway-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.corp-takeaway-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--clr-heading-strong);
  margin: 0 0 18px 0;
}

.corp-takeaway-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.corp-takeaway-card ul li {
  position: relative;
  padding-left: 28px;
  color: var(--clr-text);
  font-size: 0.95rem;
  line-height: 1.55;
}

.corp-takeaway-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 18px;
  background: var(--clr-blue-subtle);
  border-radius: 50%;
}

.corp-takeaway-card ul li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 13px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--clr-blue-light);
  border-bottom: 2px solid var(--clr-blue-light);
  transform: rotate(-45deg);
}

/* Responsive: Corporate grids */

@media (max-width: 960px) {
  .corp-scope-grid,
  .corp-delivery-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
  .corp-takeaways-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

@media (max-width: 560px) {
  .corp-pricing-table thead th,
  .corp-pricing-table tbody td {
    padding: 14px 12px;
    font-size: 0.85rem;
  }
}

/* ═══════════════════════════════════════════════════
   POLICIES ACCORDION (vertical override of old grid)
   ═══════════════════════════════════════════════════ */

.policies-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
  grid-template-columns: none !important;
  max-width: 820px;
  margin: 0 auto;
}

.policies-accordion .policy-item {
  grid-column: auto !important;
}

.policies-accordion .policy-toggle[aria-expanded="true"] + .policy-content {
  max-height: 200px;
}

/* ═══════════════════════════════════════════════════
   CORPORATE POLICY DOCUMENT LIST (horizontal boxes)
   ═══════════════════════════════════════════════════ */

.policy-docs-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}

.policy-doc-box {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-md);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
  cursor: pointer;
}

.policy-doc-box:hover {
  border-color: var(--clr-blue-light);
  background: var(--clr-surface-3);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(56, 189, 248, 0.12);
}

.policy-doc-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: var(--clr-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
}

.policy-doc-box:hover .policy-doc-icon {
  background: rgba(255, 106, 0, 0.1);
  border-color: rgba(255, 106, 0, 0.35);
  color: var(--clr-orange);
}

.policy-doc-info {
  flex: 1;
  min-width: 0;
}

.policy-doc-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-text);
  margin: 0 0 2px 0;
  line-height: 1.3;
}

.policy-doc-meta {
  font-size: 0.78rem;
  color: var(--clr-text-subtle);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.policy-doc-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--rad-sm);
  background: var(--clr-blue-subtle);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: var(--clr-blue-light);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: all var(--transition);
}

.policy-doc-box:hover .policy-doc-action {
  background: var(--clr-orange);
  border-color: var(--clr-orange);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(255, 106, 0, 0.35);
}

@media (max-width: 640px) {
  .policy-doc-box {
    padding: 16px;
    gap: 14px;
    flex-wrap: wrap;
  }
  .policy-doc-action {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
  }
  .policy-doc-title {
    font-size: 0.95rem;
  }
}

/* ═══════════════════════════════════════════════════
   CAREERS PAGE: Compare Grid, Cards, Form
   ═══════════════════════════════════════════════════ */

.careers-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 12px;
}

.careers-compare-col {
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 28px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  cursor: pointer;
}

.careers-compare-col--positive {
  border-top: 3px solid var(--clr-orange);
}

.careers-compare-col--positive:hover {
  border-color: var(--clr-orange);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(255, 106, 0, 0.12);
}

.careers-compare-col--negative {
  border-top: 3px solid var(--clr-blue-light);
}

.careers-compare-col--negative:hover {
  border-color: var(--clr-blue-light);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(56, 189, 248, 0.12);
}

.careers-compare-col-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--clr-heading-strong);
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.careers-col-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.careers-col-icon--yes {
  background: var(--clr-orange-subtle);
}

.careers-col-icon--yes::after {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--clr-orange);
  border-bottom: 2px solid var(--clr-orange);
  transform: rotate(-45deg) translate(1px, -1px);
}

.careers-col-icon--no {
  background: var(--clr-blue-subtle);
}

.careers-col-icon--no::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  background: var(--clr-blue-light);
  transform: rotate(45deg);
}

.careers-col-icon--no::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  background: var(--clr-blue-light);
  transform: rotate(-45deg);
}

.careers-trait-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.careers-trait-list li > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  position: relative;
}

.careers-trait-list li > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-border);
}

.careers-compare-col--positive .careers-trait-list li > div::before {
  background: var(--clr-orange);
}

.careers-compare-col--negative .careers-trait-list li > div::before {
  background: var(--clr-blue-light);
}

.careers-trait-list li strong {
  color: var(--clr-heading-strong);
  font-size: 0.95rem;
  font-weight: 600;
}

.careers-trait-list li span {
  color: var(--clr-text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

@media (max-width: 820px) {
  .careers-compare-grid {
    grid-template-columns: 1fr;
  }
}

/* Culture Card */

.careers-culture-card {
  background: linear-gradient(135deg, var(--clr-card-bg) 0%, var(--clr-surface-2) 100%);
  border: 1px solid var(--clr-border);
  border-left: 4px solid var(--clr-orange);
  border-radius: var(--rad-lg);
  padding: 28px;
  margin-top: 12px;
  box-shadow: var(--shadow-card);
}

.careers-culture-sub {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--clr-orange);
  margin: 0 0 16px 0;
}

.careers-culture-card p {
  color: var(--clr-text);
  line-height: 1.75;
  margin: 0 0 16px 0;
}

.careers-culture-note {
  margin-top: 20px !important;
  padding-top: 18px;
  border-top: 1px dashed var(--clr-border);
  color: var(--clr-text-muted) !important;
  font-size: 0.9rem;
}

.careers-culture-note a {
  color: var(--clr-orange);
  text-decoration: none;
  font-weight: 500;
  margin-left: 4px;
  transition: opacity var(--transition);
}

.careers-culture-note a:hover {
  opacity: 0.85;
  text-decoration: underline;
}

/* Status Card */

.careers-status-card {
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  padding: 40px 36px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: var(--shadow-card);
}

.careers-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: rgba(255, 106, 0, 0.1);
  border: 1px solid rgba(255, 106, 0, 0.25);
  color: var(--clr-orange);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}

.careers-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-orange);
  box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.6);
  animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(255, 106, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0); }
}

.careers-status-card h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--clr-heading-strong);
  margin: 0 0 14px 0;
}

.careers-status-card p {
  color: var(--clr-text-muted);
  line-height: 1.7;
  margin: 0 auto 28px auto;
  max-width: 560px;
  font-size: 0.95rem;
}

.careers-email-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: var(--clr-orange);
  color: #fff;
  border-radius: var(--rad-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all var(--transition);
  box-shadow: 0 4px 16px rgba(255, 106, 0, 0.25);
}

.careers-email-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 106, 0, 0.35);
  background: #ff7a1f;
}

/* Careers Form Wrap */

.careers-form-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--rad-lg);
  padding: 36px;
  box-shadow: var(--shadow-card);
  position: relative;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  .careers-form-wrap {
    padding: 24px 20px;
  }
  .careers-status-card {
    padding: 32px 24px;
  }
}

.btn-full {
  width: 100%;
  justify-content: center;
  position: relative;
  min-height: 48px;
}

.btn-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  display: none;
  animation: btn-spin 0.75s linear infinite;
  margin-left: 0;
}

.btn-full.loading .btn-text {
  opacity: 0.6;
}

.btn-full.loading .btn-spinner {
  opacity: 1;
  display: inline-block;
  margin-left: 10px;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════
   LIGHT THEME OVERRIDES (new classes only)
   ═══════════════════════════════════════════════════ */

html[data-theme="light"] .corp-scope-card {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .corp-scope-card--featured {
  background: linear-gradient(180deg, rgba(255, 106, 0, 0.04) 0%, #ffffff 60%);
}

html[data-theme="light"] .corp-business-model-card {
  background: linear-gradient(135deg, #ffffff 0%, rgba(37, 99, 235, 0.03) 100%);
  border-color: rgba(37, 99, 235, 0.18);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .corp-delivery-card,
html[data-theme="light"] .corp-pricing-model-card,
html[data-theme="light"] .corp-pricing-table-wrapper,
html[data-theme="light"] .careers-culture-card,
html[data-theme="light"] .careers-status-card,
html[data-theme="light"] .careers-form-wrap,
html[data-theme="light"] .careers-compare-col,
html[data-theme="light"] .policy-item {
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .corp-takeaway-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
}

html[data-theme="light"] .corp-pricing-table tbody tr:hover td {
  background: #f8fafc;
}

html[data-theme="light"] .corp-pricing-table thead th {
  background: #f8fafc;
}

html[data-theme="light"] .corp-delivery-card h3 {
  color: var(--clr-heading-strong);
}

html[data-theme="light"] .footer-social {
  background: #ffffff;
}

html[data-theme="light"] .hero-badge,
html[data-theme="light"] .section-eyebrow {
  background: rgba(255, 106, 0, 0.08);
  color: #ea580c;
}

html[data-theme="light"] .policy-link {
  background: rgba(56, 189, 248, 0.08);
  color: #0284c7;
}

html[data-theme="light"] .policy-link:hover {
  background: var(--clr-blue-light);
  color: #080a0f;
}

html[data-theme="light"] .careers-compare-col-title,
html[data-theme="light"] .careers-trait-list li strong,
html[data-theme="light"] .corp-pricing-table tbody td strong,
html[data-theme="light"] .corp-scope-header h3 {
  color: #0f172a;
}

html[data-theme="light"] .careers-status-badge {
  background: rgba(255, 106, 0, 0.08);
  color: var(--clr-orange);
  border-color: rgba(255, 106, 0, 0.2);
}

/* ── Light Theme: Trial Version Request Section (Left Panel) ── */
html[data-theme="light"] .trial-version-section {
  background: var(--clr-surface-2);
  border-top-color: var(--clr-border);
}
html[data-theme="light"] .trial-info-panel h3 {
  color: #0f172a;
}
html[data-theme="light"] .trial-info-panel p {
  color: #475569;
}
html[data-theme="light"] .eval-disclaimer-box {
  background: rgba(255, 106, 0, 0.05);
  border: 1.5px solid rgba(255, 106, 0, 0.35);
  box-shadow: 0 2px 12px rgba(255, 106, 0, 0.04);
}
html[data-theme="light"] .eval-disclaimer-header {
  color: #c2410c;
}
html[data-theme="light"] .eval-disclaimer-text {
  color: #334155;
}
html[data-theme="light"] .trial-perk-item {
  color: #1e293b;
}
html[data-theme="light"] .trial-perk-item svg {
  color: #0284c7;
}

/* ═════════════════════════════════════════════════════
   LIGHT THEME: PRODUCT CATALOGUE & PLATFORM MATRIX TABLE
═════════════════════════════════════════════════════ */
html[data-theme="light"] .cat-table-wrap {
  background: #ffffff;
  border: 1px solid #d8dee9;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .cat-data-table th {
  background: #f1f5f9;
  color: #0f172a;
  border-bottom: 2px solid #cbd5e1;
  font-weight: 800;
}

html[data-theme="light"] .cat-data-table td {
  border-bottom: 1px solid #e2e8f0;
  color: #1e293b;
}

html[data-theme="light"] .cat-data-table tbody tr:hover td {
  background: #f8fafc;
}

html[data-theme="light"] .format-primary-title,
html[data-theme="light"] .format-primary-title span {
  color: #0f172a !important;
  font-weight: 700;
}

html[data-theme="light"] .format-code-tag {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #7dd3fc;
  font-weight: 800;
}

html[data-theme="light"] .methodology-badge {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  font-weight: 700;
}

/* Status badging (Production Ready / In Dev / Early Dev) */
html[data-theme="light"] .status-avail,
html[data-theme="light"] .status-available {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
}
html[data-theme="light"] .status-avail::before,
html[data-theme="light"] .status-available::before {
  background: #16a34a;
  box-shadow: none;
}

html[data-theme="light"] .status-dev,
html[data-theme="light"] .status-in-dev {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fcd34d !important;
}
html[data-theme="light"] .status-dev::before,
html[data-theme="light"] .status-in-dev::before {
  background: #d97706;
  box-shadow: none;
}

html[data-theme="light"] .status-roadmap {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .status-roadmap::before {
  background: #64748b;
}

/* Silicon Platform Matrix badges: DE, D, E, DE(I), E(I) */
html[data-theme="light"] .m-badge.m-de {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

html[data-theme="light"] .m-badge.m-d {
  background: #e0f2fe;
  color: #075985;
  border: 1px solid #7dd3fc;
}

html[data-theme="light"] .m-badge.m-e {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

html[data-theme="light"] .m-badge.m-ed-i {
  background: #ffedd5;
  color: #9a3412;
  border: 1px solid #fdba74;
}

html[data-theme="light"] .m-dash {
  color: #94a3b8;
}

/* Action: Datasheet PDF link button */
html[data-theme="light"] .btn-datasheet {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0369a1;
  font-weight: 700;
}
html[data-theme="light"] .btn-datasheet:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.25);
}

/* Table Controls & Filter Bar */
html[data-theme="light"] .cat-search-input {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  color: #0f172a;
}
html[data-theme="light"] .cat-search-input::placeholder {
  color: #64748b;
}
html[data-theme="light"] .cat-search-wrap svg {
  color: #64748b;
}

html[data-theme="light"] .cat-pill-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
}
html[data-theme="light"] .cat-pill-btn:hover {
  border-color: #94a3b8;
  color: #0f172a;
}
html[data-theme="light"] .cat-pill-btn.active {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}

/* Platform Guides Bar */
html[data-theme="light"] .platform-guides-bar {
  background: #f8fafc;
  border: 1px solid #d8dee9;
}
html[data-theme="light"] .platform-guides-label {
  color: #0f172a;
  font-weight: 700;
}
html[data-theme="light"] .btn-plat-guide {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0369a1;
}
html[data-theme="light"] .btn-plat-guide:hover {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}

/* Matrix Legend Bar (bottom) */
html[data-theme="light"] .matrix-legend-bar {
  background: #f8fafc;
  border: 1px solid #d8dee9;
  color: #334155;
}

/* Tab Switcher Buttons (hero area) */
html[data-theme="light"] .cat-tabs-nav,
html[data-theme="light"] .catalogue-tab-nav {
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
}
html[data-theme="light"] .cat-tab-btn {
  color: #475569;
}
html[data-theme="light"] .cat-tab-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .cat-tab-badge {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.2);
  color: #0284c7;
}

/* CPU Resource Footprint Calculator Cards */
html[data-theme="light"] .perf-calc-controls,
html[data-theme="light"] .perf-calc-output {
  background: #ffffff;
  border: 1px solid #d8dee9;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] .perf-calc-controls h3,
html[data-theme="light"] .perf-output-title {
  color: #0f172a;
}
html[data-theme="light"] .perf-calc-controls p {
  color: #475569;
}
html[data-theme="light"] .calc-field-group label {
  color: #0f172a;
  font-weight: 700;
}
html[data-theme="light"] .calc-select {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  color: #0f172a;
}
html[data-theme="light"] .calc-select option {
  background: #ffffff;
  color: #0f172a;
}
html[data-theme="light"] .perf-metric-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
html[data-theme="light"] .metric-label {
  color: #475569;
}
html[data-theme="light"] .metric-val {
  color: #0f172a;
}

/* ═══════════════════════════════════════════
   CORPORATE — CONCENTRIC SCOPE DIAGRAM
   ═══════════════════════════════════════════ */
.corp-scope-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1fr);
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.corp-scope-diagram {
  --corp-rust: #c0392b;
  --corp-rust-2: #d35400;
  --corp-rust-glow: rgba(192, 57, 43, 0.35);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin: 0 auto;
}

.corp-circle {
  position: relative;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.corp-circle--outer {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%,
    rgba(192, 57, 43, 0.18) 0%,
    rgba(192, 57, 43, 0.10) 55%,
    rgba(192, 57, 43, 0.05) 100%);
  border: 1.5px solid rgba(192, 57, 43, 0.55);
  box-shadow: 0 0 40px rgba(192, 57, 43, 0.15),
              inset 0 0 30px rgba(192, 57, 43, 0.08);
}

.corp-circle--outer:hover {
  box-shadow: 0 0 55px rgba(192, 57, 43, 0.28),
              inset 0 0 30px rgba(192, 57, 43, 0.12);
}

.corp-circle--middle {
  width: 70%;
  height: 70%;
  background: radial-gradient(circle at 50% 50%,
    rgba(211, 84, 0, 0.26) 0%,
    rgba(211, 84, 0, 0.15) 60%,
    rgba(211, 84, 0, 0.08) 100%);
  border: 1.5px solid rgba(211, 84, 0, 0.65);
  box-shadow: 0 0 25px rgba(211, 84, 0, 0.2),
              inset 0 0 20px rgba(211, 84, 0, 0.10);
}

.corp-circle--middle:hover {
  box-shadow: 0 0 40px rgba(211, 84, 0, 0.35),
              inset 0 0 20px rgba(211, 84, 0, 0.15);
}

.corp-circle--inner {
  width: 52%;
  height: 52%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 106, 0, 0.48) 0%,
    rgba(217, 87, 0, 0.32) 60%,
    rgba(192, 57, 43, 0.18) 100%);
  border: 2px solid #ff6a00;
  box-shadow: 0 0 20px rgba(255, 106, 0, 0.5),
              inset 0 0 15px rgba(255, 106, 0, 0.3);
}

.corp-circle--inner:hover {
  transform: scale(1.04);
  box-shadow: 0 0 35px rgba(255, 106, 0, 0.72),
              inset 0 0 15px rgba(255, 106, 0, 0.45);
}

.corp-circle-label {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}

.corp-circle-label--outer {
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.78rem;
  color: #e8b4a8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.88;
}

.corp-circle-label--middle {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.78rem;
  color: #ffcfa3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.92;
}

.corp-circle-label--inner {
  position: static;
  transform: none;
  font-size: 1rem;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
  padding: 0 8px;
}

/* ────── LEGEND ────── */
.corp-scope-legend {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.corp-legend-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border-subtle);
  border-radius: var(--radius-card);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.corp-legend-item:hover {
  border-color: rgba(255, 106, 0, 0.4);
  transform: translateY(-2px);
  background: var(--clr-surface-1);
}

.corp-legend-dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: 4px;
  border: 2px solid rgba(255,255,255,0.15);
}

.corp-legend-dot--inner {
  background: radial-gradient(circle at 40% 40%, #ff8533, #ff6a00 60%, #d95700);
  box-shadow: 0 0 10px rgba(255, 106, 0, 0.6);
}

.corp-legend-dot--middle {
  background: radial-gradient(circle at 40% 40%, #e67e22, #d35400 60%, #a04000);
  box-shadow: 0 0 10px rgba(211, 84, 0, 0.5);
}

.corp-legend-dot--outer {
  background: radial-gradient(circle at 40% 40%, #e74c3c, #c0392b 60%, #922b21);
  box-shadow: 0 0 10px rgba(192, 57, 43, 0.5);
}

.corp-legend-body { flex: 1; min-width: 0; }

.corp-legend-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clr-heading-strong);
  margin: 0 0 6px;
}

.corp-legend-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clr-text-muted);
  margin: 0 0 10px;
}

/* ═══════════════════════════════════════════
   CORPORATE — TIERS PRICING MATRIX
   ═══════════════════════════════════════════ */
.corp-pricing-table-wrapper--tiers {
  max-width: 1080px;
  margin: 0 auto 24px;
  overflow-x: auto;
  border-radius: var(--radius-card);
}

.corp-pricing-table--tiers {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.corp-pricing-table--tiers thead th {
  padding: 18px 16px;
  background: linear-gradient(180deg, rgba(255,106,0,0.12) 0%, rgba(255,106,0,0.04) 100%);
  border-bottom: 1px solid var(--clr-border-subtle);
  border-right: 1px solid var(--clr-border-subtle);
  text-align: center;
  font-weight: 600;
  color: var(--clr-heading-strong);
}

.corp-pricing-table--tiers thead th:first-child {
  text-align: left;
  width: 160px;
  background: transparent;
  border-top-left-radius: 0;
}

.corp-pricing-table--tiers thead th:last-child {
  border-right: none;
  border-top-right-radius: 0;
}

.corp-tier-col-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-orange);
  margin-bottom: 4px;
}

.corp-tier-col-sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--clr-text-muted);
  letter-spacing: 0.01em;
}

.corp-pricing-table--tiers tbody td {
  padding: 18px 16px;
  border-right: 1px solid var(--clr-border-subtle);
  border-bottom: 1px solid var(--clr-border-subtle);
  vertical-align: middle;
  text-align: center;
}

.corp-pricing-table--tiers tbody td:last-child {
  border-right: none;
}

.corp-pricing-table--tiers tbody tr:last-child td {
  border-bottom: none;
}

.corp-pricing-table--tiers tbody tr:hover td {
  background: rgba(255, 106, 0, 0.04);
}

.corp-tier-row-label {
  text-align: left !important;
  background: var(--clr-surface-1);
  font-size: 0.95rem;
  color: var(--clr-heading-strong);
}

.corp-price-chip {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(255, 106, 0, 0.08);
  border: 1px solid rgba(255, 106, 0, 0.25);
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--clr-orange);
  font-size: 0.92rem;
  white-space: nowrap;
}

.corp-price-chip small {
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--clr-text-muted);
  margin-left: 4px;
}

.corp-price-chip--featured {
  background: linear-gradient(135deg, rgba(255,106,0,0.18), rgba(192,57,43,0.12));
  border-color: rgba(255, 106, 0, 0.5);
  box-shadow: 0 0 14px rgba(255, 106, 0, 0.15);
}

.corp-price-dash {
  font-size: 1.2rem;
  color: var(--clr-text-muted);
  opacity: 0.6;
  font-weight: 300;
}

.corp-pricing-footnote {
  max-width: 820px;
  margin: 0 auto;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--clr-text-muted);
  text-align: center;
  padding: 0 16px;
}

/* ═══════════════════════════════════════════
   CORPORATE SCOPE — RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
  .corp-scope-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .corp-scope-diagram {
    max-width: 360px;
  }
}

@media (max-width: 600px) {
  .corp-scope-diagram {
    max-width: 270px;
    width: 100%;
  }

  .corp-circle-label--outer {
    font-size: 0.65rem;
    bottom: 7px;
  }

  .corp-circle-label--middle {
    font-size: 0.65rem;
    top: 5px;
  }

  .corp-circle-label--inner {
    font-size: 0.82rem;
  }

  .corp-legend-item {
    padding: 14px 16px;
    gap: 12px;
  }

  .corp-pricing-table--tiers thead th,
  .corp-pricing-table--tiers tbody td {
    padding: 14px 10px;
  }

  .corp-tier-row-label {
    width: 120px;
  }

  .corp-price-chip {
    font-size: 0.82rem;
    padding: 6px 12px;
  }

  .corp-tier-col-sub {
    font-size: 0.7rem;
  }
}

@media (max-width: 380px) {
  .corp-scope-diagram {
    max-width: 235px;
  }

  .corp-circle-label--outer {
    font-size: 0.56rem;
    bottom: 5px;
  }

  .corp-circle-label--middle {
    font-size: 0.56rem;
    top: 4px;
  }

  .corp-circle-label--inner {
    font-size: 0.74rem;
  }
}

/* ═══════════════════════════════════════════
   CORPORATE — LIGHT THEME OVERRIDES
   ═══════════════════════════════════════════ */
html[data-theme="light"] .corp-legend-item {
  background: #ffffff;
  border-color: #e2e8f0;
}

html[data-theme="light"] .corp-legend-item:hover {
  border-color: rgba(255, 106, 0, 0.5);
  background: #fffaf5;
}

html[data-theme="light"] .corp-legend-title {
  color: #0f172a;
}

html[data-theme="light"] .corp-legend-desc {
  color: #64748b;
}

html[data-theme="light"] .corp-circle-label--outer {
  color: #922b21;
  opacity: 0.85;
}

html[data-theme="light"] .corp-circle-label--middle {
  color: #a04000;
  opacity: 0.88;
}

html[data-theme="light"] .corp-circle--outer {
  background: radial-gradient(circle at 50% 50%,
    rgba(192, 57, 43, 0.10) 0%,
    rgba(192, 57, 43, 0.05) 55%,
    rgba(192, 57, 43, 0.02) 100%);
  border-color: rgba(192, 57, 43, 0.4);
  box-shadow: 0 0 30px rgba(192, 57, 43, 0.1),
              inset 0 0 20px rgba(192, 57, 43, 0.04);
}

html[data-theme="light"] .corp-circle--middle {
  background: radial-gradient(circle at 50% 50%,
    rgba(211, 84, 0, 0.16) 0%,
    rgba(211, 84, 0, 0.08) 60%,
    rgba(211, 84, 0, 0.04) 100%);
  border-color: rgba(211, 84, 0, 0.5);
}

html[data-theme="light"] .corp-circle--inner {
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 106, 0, 0.4) 0%,
    rgba(217, 87, 0, 0.28) 60%,
    rgba(192, 57, 43, 0.15) 100%);
  border-color: #ff6a00;
}

html[data-theme="light"] .corp-pricing-table--tiers {
  background: #ffffff;
  border-color: #e2e8f0;
}

html[data-theme="light"] .corp-pricing-table--tiers thead th {
  background: linear-gradient(180deg, rgba(255,106,0,0.08) 0%, rgba(255,106,0,0.02) 100%);
  border-color: #e2e8f0;
  color: #0f172a;
}

html[data-theme="light"] .corp-pricing-table--tiers tbody td {
  border-color: #e2e8f0;
}

html[data-theme="light"] .corp-tier-row-label {
  background: #f8fafc;
  color: #0f172a;
}

html[data-theme="light"] .corp-pricing-table--tiers tbody tr:hover td {
  background: #fffaf5;
}

html[data-theme="light"] .corp-pricing-footnote {
  color: #64748b;
}

/* ═══════════════════════════════════════════════════════════
   9.6 About Us — 4-Panel Scrollable Hero Header
   ═══════════════════════════════════════════════════════════ */
.about-hero-scroll {
  position: relative;
  margin-top: 48px;
  overflow: hidden;
  border-radius: 16px;
}
.about-hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.about-hero-track::-webkit-scrollbar { display: none; }
.about-hero-panel {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  position: relative;
}
.about-hero-panel-inner {
  text-align: center;
  max-width: 720px;
}
.about-hero-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  margin: 20px 0 28px;
  line-height: 1.2;
}
.about-hero-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 16px 0 20px;
}
.about-hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}
.about-hero-dot.active {
  background: var(--clr-orange);
  border-color: var(--clr-orange);
  transform: scale(1.2);
}
.about-hero-dot:hover { border-color: var(--clr-orange); }

html[data-theme="light"] .about-hero-title { color: #0f172a; }
html[data-theme="light"] .about-hero-dot { border-color: rgba(15, 23, 42, 0.3); }
html[data-theme="light"] .about-hero-dot.active { border-color: var(--clr-orange); }

@media (max-width: 768px) {
  .about-hero-panel { min-height: 320px; padding: 40px 20px; }
  .about-hero-title { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════
   MOBILE OVERFLOW FIXES (15.1 / 15.6)
   Prevent horizontal page overflow at 320-414px
   ═══════════════════════════════════════════ */

/* Code blocks scroll internally instead of forcing min-content width */
pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre code {
  white-space: pre;
}

/* Articles reader: grid items must be allowed to shrink below content size */
.article-reader-layout {
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
}
@media (max-width: 900px) {
  .article-reader-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Article tables (revision tables etc.) scroll internally on mobile */
.article-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Code copy button (15.5) */
.code-block-wrap {
  position: relative;
}
.code-copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: rgba(10, 16, 26, 0.88);
  color: var(--clr-blue-light);
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
}
.code-copy-btn:hover {
  border-color: var(--clr-orange);
  color: var(--clr-orange);
}
html[data-theme="light"] .code-copy-btn {
  background: rgba(255, 255, 255, 0.94);
}
.article-prose .code-block-wrap pre {
  margin: 0;
}

/* Long rendered equations scroll horizontally instead of overflowing (15.3) */
mjx-container[jax="CHTML"][display="true"],
.MathJax_Display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
mjx-container:not([display="true"]) {
  display: inline-block !important;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: middle;
}
/* Video companion banner stacks on mobile */
@media (max-width: 640px) {
  .video-companion-banner {
    flex-wrap: wrap;
  }
  .video-companion-banner .btn {
    width: 100%;
  }
}

/* Codecs page selection tabs: let label + badge wrap on narrow screens */
@media (max-width: 560px) {
  .cat-tab-btn {
    white-space: normal;
    flex-wrap: wrap;
    height: auto;
    row-gap: 6px;
  }
  .cat-tab-badge {
    white-space: normal;
    flex-shrink: 1;
    max-width: 100%;
  }
}

/* Audio Processing demo tabs: wrap to two rows on narrow screens */
@media (max-width: 640px) {
  .demo-tabs {
    flex-wrap: wrap;
  }
  .demo-tab-btn {
    flex: 1 1 40%;
    min-width: 140px;
    white-space: normal;
  }
}

/* Data tables inside scroll wrappers already scroll; guard other tables */
.table-scroll-safe {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
  .cat-data-table th,
  .cat-data-table td {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Compact navbar at phone widths so the hamburger stays inside the viewport */
@media (max-width: 560px) {
  .navbar-inner { padding: 0 12px; }
  .navbar-logo { gap: 8px; }
  .logo-img-wrap { width: 40px; height: 40px; }
  .logo-text { font-size: 1.15rem; letter-spacing: 0.1em; }
  .nav-actions { gap: 6px; }
  .sound-toggle-btn { padding: 8px 10px; gap: 0; }
  .sound-toggle-btn span { display: none; }   /* icon-only sound toggle */
  .theme-toggle-btn { padding: 8px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   UNIFIED MOBILE RESPONSIVE BREAKPOINTS (860px / 640px / 480px)
   Ensures catalog, about-split, proposition, venn, perf-calc,
   feat-algo-grid, and demo-tabs behave consistently on mobile.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .about-split-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    justify-items: center;
  }
  .proposition-panel {
    width: 100%;
    max-width: 100%;
  }
  .perf-calc-wrap { grid-template-columns: 1fr; }
  .feat-algo-grid { grid-template-columns: 1fr; }
  .demo-tabs { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .catalog-grid { grid-template-columns: 1fr; gap: 20px; }
  .about-split-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .proposition-panel {
    width: 100%;
    padding: 28px 24px;
    min-height: auto;
  }
  .perf-calc-wrap { grid-template-columns: 1fr; gap: 16px; }
  .feat-algo-grid { grid-template-columns: 1fr; gap: 14px; }
  .demo-tabs {
    flex-wrap: wrap;
    gap: 6px;
  }
  .demo-tab-btn {
    flex: 1 1 45%;
    min-width: 130px;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .catalog-grid { grid-template-columns: 1fr; gap: 16px; }
  .about-split-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .proposition-panel {
    width: 100%;
    padding: 24px 20px;
    min-height: auto;
  }
  .perf-calc-wrap {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .perf-calc-controls,
  .perf-calc-output {
    padding: 24px 20px;
  }
  .feat-algo-grid { grid-template-columns: 1fr; gap: 12px; }
  .demo-tabs {
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
  }
  .demo-tab-btn {
    flex: 1 1 100%;
    min-width: 0;
    white-space: normal;
    width: 100%;
  }
  .perf-metrics-grid { grid-template-columns: 1fr; gap: 12px; }
  .cat-data-table-wrapper,
  .corp-pricing-table-wrapper,
  .pipeline-grid {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pipeline-grid {
    grid-template-columns: 1fr;
  }
  .footer {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: left;
  }
  .footer-brand,
  .footer-nav-group,
  .footer-contact {
    align-items: flex-start;
    text-align: left;
  }
  .footer-nav-wrapper {
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .footer-nav-header {
    text-align: center;
    width: 100%;
  }
  .footer-nav-columns-2 {
    margin: 0 auto;
    justify-content: start;
    text-align: left;
  }
  .footer-nav-links {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .corp-delivery-grid {
    grid-template-columns: 1fr;
  }
  .product-detail-hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .product-detail-hero-img {
    order: -1;
  }
  .section-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .cs-rom-grid,
  .cs-robust-grid,
  .cs-benefit-grid,
  .stack-2col {
    grid-template-columns: 1fr;
  }
  .cs-flow {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cs-flow-arrow {
    transform: rotate(90deg);
    text-align: center;
    margin: 0;
    padding: 2px 0;
  }
  .mhz-bars-row {
    flex-wrap: wrap;
    justify-content: center;
  }
  .mhz-bar-col {
    width: 44%;
    min-width: 0;
  }
}