@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ================================================================
   Quality AboveAll — Main Stylesheet
   Brand system, design tokens, components, animations
================================================================ */

/* ----------------------------------------------------------------
   DESIGN TOKENS
---------------------------------------------------------------- */
:root {
  --bg:              #000000;
  --surface:         #090019;
  --surface-2:       #0D0020;
  --surface-card:    #0A0A14;
  --surface-btn:     #191919;
  --brand:           #723CAB;
  --brand-light:     #9B5FD9;
  --brand-dim:       rgba(114, 60, 171, 0.18);
  --brand-glow:      rgba(114, 60, 171, 0.45);
  --text-1:          #FFFFFF;
  --text-2:          rgba(255, 255, 255, 0.65);
  --text-3:          rgba(255, 255, 255, 0.35);
  --border:          rgba(255, 255, 255, 0.07);
  --border-brand:    rgba(114, 60, 171, 0.28);
  --border-hover:    rgba(255, 255, 255, 0.18);

  --font-display:    'Syne', sans-serif;
  --font-sub:        'Space Grotesk', sans-serif;
  --font-body:       'DM Sans', sans-serif;
  --font-mono:       'JetBrains Mono', monospace;

  --radius-sm:       6px;
  --radius:          12px;
  --radius-lg:       20px;

  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] {
  --bg:              #F4F3F8;
  --surface:         #FFFFFF;
  --surface-2:       #EDE8F5;
  --surface-card:    #FAFAFA;
  --surface-btn:     #EFEFEF;
  --brand:           #723CAB;
  --brand-light:     #6B2FAA;
  --brand-dim:       rgba(114, 60, 171, 0.1);
  --brand-glow:      rgba(114, 60, 171, 0.25);
  /* Boosted text contrast for light mode */
  --text-1:          #0A0012;
  --text-2:          rgba(10, 0, 18, 0.72);
  --text-3:          rgba(10, 0, 18, 0.52);
  --border:          rgba(10, 0, 18, 0.1);
  --border-brand:    rgba(114, 60, 171, 0.28);
  --border-hover:    rgba(10, 0, 18, 0.22);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
}

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
  transition: background 0.35s ease, color 0.35s ease;
}

::selection { background: var(--brand-dim); color: var(--text-1); }

a { color: inherit; text-decoration: none; }
img, svg { display: block; }

/* ----------------------------------------------------------------
   TYPOGRAPHY
---------------------------------------------------------------- */
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.display-md {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.display-sm {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.body-lg  { font-size: 1.125rem; line-height: 1.7; color: var(--text-2); font-family: var(--font-body); }
.body-md  { font-size: 1rem;     line-height: 1.65; color: var(--text-2); font-family: var(--font-body); }
.body-sm  { font-size: 0.875rem; line-height: 1.6;  color: var(--text-2); font-family: var(--font-body); }
.body-xs  { font-size: 0.78rem;  line-height: 1.55; color: var(--text-2); font-family: var(--font-body); }
.label    { font-size: 0.75rem;  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--text-2); font-family: var(--font-sub); }
.sublabel { font-size: 0.8rem;   letter-spacing: 0.05em; font-weight: 600; color: var(--text-2); font-family: var(--font-sub); }
.mono     { font-family: var(--font-mono); font-size: 0.875rem; color: var(--text-2); }
/* Sub-headline — used for card titles, section sub-labels */
.sub-headline {
  font-family: var(--font-sub);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-1);
}
/* Improve small text contrast */
.text-muted { color: var(--text-2) !important; }

.text-brand  { color: var(--brand-light); }
.text-1      { color: var(--text-1); }
.text-2      { color: var(--text-2); }
.text-3      { color: var(--text-3); }

/* ----------------------------------------------------------------
   SPRAY-SPOT BACKGROUND TEXTURE
---------------------------------------------------------------- */
.spray-bg {
  position: relative;
  /* NOTE: overflow must NOT be hidden here — body needs to scroll */
}
.spray-bg::before {
  content: '';
  position: fixed; /* fixed so spray stays behind all scrolling content */
  inset: 0;
  background:
    radial-gradient(ellipse 55% 40% at 12% 15%, #090019 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 88% 80%, #090019 0%, transparent 65%),
    radial-gradient(ellipse 30% 30% at 55% 45%, rgba(9,0,25,0.7) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] .spray-bg::before {
  /* Very subtle brand tints — no dark blobs on light background */
  background:
    radial-gradient(ellipse 50% 35% at 10% 12%, rgba(114,60,171,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 45% at 90% 85%, rgba(114,60,171,0.05) 0%, transparent 65%);
}
/* Light mode: ensure all body text is readable on pale backgrounds */
[data-theme="light"] .body-sm  { color: rgba(10,0,18,0.72); }
[data-theme="light"] .body-md  { color: rgba(10,0,18,0.72); }
[data-theme="light"] .body-lg  { color: rgba(10,0,18,0.72); }
[data-theme="light"] .label    { color: rgba(10,0,18,0.6);  }
[data-theme="light"] .mono     { color: rgba(10,0,18,0.65); }
[data-theme="light"] .cred-item { color: rgba(10,0,18,0.55); }
[data-theme="light"] .footer-brand-desc { color: rgba(10,0,18,0.62); }
[data-theme="light"] .footer-legal { color: rgba(10,0,18,0.55); }
[data-theme="light"] .footer-cert-item { color: rgba(10,0,18,0.55); }
[data-theme="light"] .footer-links a { color: rgba(10,0,18,0.68); }
[data-theme="light"] .hero-trust { color: rgba(10,0,18,0.52); }
[data-theme="light"] .mega-link { color: rgba(10,0,18,0.72); }
[data-theme="light"] .nav-link  { color: rgba(10,0,18,0.72); }
[data-theme="light"] .tool-tag  { color: rgba(10,0,18,0.75); background: rgba(114,60,171,0.09); }
.spray-bg > * { position: relative; z-index: 1; }

/* ----------------------------------------------------------------
   LAYOUT
---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: min(1280px, 94vw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.section { padding-block: clamp(4rem, 8vw, 7rem); }
.section-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* ----------------------------------------------------------------
   NAVBAR
---------------------------------------------------------------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1200;
  padding: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.navbar.scrolled {
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 var(--border);
}
[data-theme="light"] .navbar {
  background: rgba(244,243,248,0.75);
  border-bottom-color: rgba(10,0,18,0.08);
}
[data-theme="light"] .navbar.scrolled {
  background: rgba(244,243,248,0.95);
  border-bottom-color: rgba(10,0,18,0.12);
}

.navbar-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 68px;
  max-width: min(1280px, 94vw);
  margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.nav-logo-mark {
  width: 32px; height: 32px;
  flex-shrink: 0;
}
.nav-logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.nav-logo-text span { color: var(--brand-light); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin-left: 1rem;
}
.nav-link-item { position: relative; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-2);
  border-radius: var(--radius-sm);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: var(--font-body);
}
.nav-link:hover, .nav-link.active { color: var(--text-1); background: rgba(255,255,255,0.05); }
[data-theme="light"] .nav-link:hover { background: rgba(0,0,0,0.05); }
.nav-link svg { width: 12px; height: 12px; transition: transform 0.2s; }
.nav-link.open svg { transform: rotate(180deg); }

/* MEGA MENU */
.mega-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 680px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px var(--border-brand);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0.22s;
}
.mega-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.mega-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
}
.mega-col-title {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-light);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-brand);
}
.mega-link {
  display: block;
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
  color: var(--text-2);
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  cursor: pointer;
}
.mega-link:hover { color: var(--text-1); background: var(--brand-dim); }
.mega-cta-box {
  grid-column: 1 / -1;
  margin-top: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--brand-dim);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Industries mega menu (simpler) */
.mega-industries {
  min-width: 360px;
}
.mega-industries .mega-menu-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

.nav-spacer { flex: 1; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.nav-theme-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.nav-theme-btn:hover { border-color: var(--border-hover); color: var(--text-1); background: rgba(255,255,255,0.05); }

/* Mobile nav toggle */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.nav-hamburger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--text-2);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: 68px; left: 0; right: 0; bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--border-brand);
  padding: 1rem 1.25rem 2rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1100;
  flex-direction: column;
  gap: 0.25rem;
  /* Slide in from top */
  animation: none;
}
.mobile-menu.open {
  display: flex;
  animation: mobileMenuIn 0.22s ease-out both;
}
@keyframes mobileMenuIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-menu a, .mobile-menu .mob-link {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-2);
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  width: 100%;
  transition: color 0.15s, background 0.15s;
}
.mobile-menu a:hover, .mobile-menu .mob-link:hover { color: var(--text-1); background: var(--brand-dim); }

/* Override: keep btn-primary styled as a button inside mobile menu */
.mobile-menu .btn-primary {
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  padding: 0.75rem 1.25rem !important;
  margin-top: 0.75rem !important;
}
.mobile-menu .btn-primary:hover { background: var(--brand-light) !important; }

.mob-section-title {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-light);
  font-weight: 700;
  padding: 1rem 1rem 0.25rem;
}
.mob-divider { height: 1px; background: var(--border); margin: 0.75rem 0; }

/* Mobile accordion for service categories */
.mob-accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-body);
  transition: color 0.15s, background 0.15s;
}
.mob-accordion-btn:hover { color: var(--text-1); background: var(--brand-dim); }
.mob-accordion-btn svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  transition: transform 0.22s;
  color: var(--text-3);
}
.mob-accordion-btn.open svg { transform: rotate(180deg); }
.mob-accordion-panel {
  display: none;
  padding-left: 0.75rem;
  border-left: 2px solid var(--border-brand);
  margin: 0 1rem 0.25rem;
}
.mob-accordion-panel.open { display: block; }
.mob-accordion-panel a {
  font-size: 0.875rem !important;
  padding: 0.5rem 0.75rem !important;
  color: var(--text-2) !important;
}

/* ----------------------------------------------------------------
   BUTTONS
---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s var(--ease-out);
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 0 var(--brand-glow);
}
.btn-primary:hover {
  background: var(--brand-light);
  box-shadow: 0 0 32px var(--brand-glow);
  transform: translateY(-1px);
}
.btn-secondary {
  background: var(--surface-btn);
  color: var(--text-1);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  border-color: var(--border-hover);
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
[data-theme="light"] .btn-secondary:hover { background: rgba(0,0,0,0.05); }
.btn-ghost {
  background: transparent;
  color: var(--brand-light);
  padding: 0.5rem 0;
}
.btn-ghost:hover { color: var(--text-1); gap: 0.75rem; }
.btn-ghost svg { transition: transform 0.2s; }
.btn-ghost:hover svg { transform: translateX(4px); }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.8rem; }
.btn-lg { padding: 0.85rem 2rem; font-size: 1rem; }

/* ----------------------------------------------------------------
   CARDS
---------------------------------------------------------------- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease-out);
}
.card:hover {
  border-color: var(--border-brand);
  box-shadow: 0 0 0 1px var(--border-brand), 0 12px 40px rgba(114,60,171,0.12);
  transform: translateY(-2px);
}
.card-sm {
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
}

/* ----------------------------------------------------------------
   SECTION ELEMENTS
---------------------------------------------------------------- */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  background: var(--brand-dim);
  border: 1px solid var(--border-brand);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-light);
  margin-bottom: 1.25rem;
  font-family: var(--font-sub);
}
.section-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-light);
  box-shadow: 0 0 8px var(--brand-glow);
}

.section-header { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-header-center { text-align: center; max-width: 680px; margin-inline: auto; }
.section-header-center .section-eyebrow { margin-inline: auto; }

.section-subheading {
  margin-top: 1rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 600px;
  font-family: var(--font-body);
}

/* ----------------------------------------------------------------
   DIVIDER / STRIP
---------------------------------------------------------------- */
.cred-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
  overflow: hidden;
}
.cred-strip-inner {
  display: flex;
  align-items: center;
  gap: 3rem;
  animation: marquee 30s linear infinite;
  width: max-content;
}
.cred-strip-inner:hover { animation-play-state: paused; }
.cred-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.cred-item svg { color: var(--brand); opacity: 0.8; }

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

/* ----------------------------------------------------------------
   METRIC TILES
---------------------------------------------------------------- */
.metric-tile {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
}
.metric-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
}
.metric-tile:hover { border-color: var(--border-brand); transform: translateY(-2px); }
.metric-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #fff 0%, var(--brand-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
[data-theme="light"] .metric-num {
  background: linear-gradient(135deg, #0A0012 0%, var(--brand) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ----------------------------------------------------------------
   PROCESS STEPS
---------------------------------------------------------------- */
.process-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.process-step:last-child { border-bottom: none; }
.step-num {
  width: 48px; height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border-brand);
  background: var(--brand-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--brand-light);
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   TOOL GRID
---------------------------------------------------------------- */
.tool-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  transition: border-color 0.2s;
}
.tool-row:hover { border-color: var(--border-brand); }
.tool-row-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-light);
  width: 150px;
  flex-shrink: 0;
  font-family: var(--font-sub);
}
.tool-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
}
.tool-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.65rem;
  background: var(--brand-dim);
  border: 1px solid var(--border-brand);
  border-radius: 6px;
  font-size: 0.78rem;
  font-family: var(--font-sub);
  font-weight: 500;
  color: var(--text-1);
  transition: border-color 0.15s, background 0.15s;
}
.tool-tag:hover { border-color: var(--brand-light); background: rgba(114,60,171,0.25); }
.tool-tag svg, .tool-tag img { width: 14px; height: 14px; flex-shrink: 0; }

/* ----------------------------------------------------------------
   CAPABILITY TABLE
---------------------------------------------------------------- */
.cap-table { width: 100%; border-collapse: collapse; }
.cap-table-header {
  padding: 0.75rem 1.25rem;
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface-card);
}
.cap-table-header:first-child { border-radius: var(--radius) 0 0 0; }
.cap-table-header:last-child { border-radius: 0 var(--radius) 0 0; }
.cap-table-section {
  padding: 0.6rem 1.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-light);
  background: var(--brand-dim);
  border-bottom: 1px solid var(--border-brand);
}
.cap-table td {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-2);
  vertical-align: top;
}
.cap-table tr:hover td { background: rgba(255,255,255,0.02); }
[data-theme="light"] .cap-table tr:hover td { background: rgba(0,0,0,0.02); }
.cap-table td:first-child { color: var(--text-1); font-weight: 500; }
.cap-link {
  color: var(--brand-light);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.cap-link:hover { text-decoration: underline; }

/* ----------------------------------------------------------------
   FOOTER
---------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border);
  padding-block: 4rem 2rem;
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.footer-brand-desc {
  font-size: 0.875rem;
  color: var(--text-3);
  margin-top: 0.75rem;
  max-width: 260px;
  line-height: 1.6;
}
.footer-col-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1rem;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-links a {
  font-size: 0.875rem;
  color: var(--text-2);
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--text-1); }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-2);
  margin-bottom: 0.5rem;
}
.footer-contact-item svg { margin-top: 2px; flex-shrink: 0; color: var(--brand); }
.footer-cert-strip {
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.footer-cert-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
}
.footer-cert-item {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.footer-cert-item::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-legal {
  font-size: 0.8rem;
  color: var(--text-3);
}
.footer-legal a { transition: color 0.15s; }
.footer-legal a:hover { color: var(--text-2); }

/* ----------------------------------------------------------------
   HERO SECTION
---------------------------------------------------------------- */
.hero {
  padding-top: calc(68px + clamp(4rem, 8vw, 7rem));
  padding-bottom: clamp(4rem, 8vw, 7rem);
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hero-trust {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-3);
  margin-top: 1.5rem;
}
.hero-trust-dot {
  width: 5px; height: 5px;
  background: var(--text-3);
  border-radius: 50%;
}

/* ----------------------------------------------------------------
   ENGAGEMENT TABLE
---------------------------------------------------------------- */
.engagement-table {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.eng-header {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border);
}
.eng-header th {
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-light);
  border-right: 1px solid var(--border);
}
.eng-header th:last-child { border-right: none; }
.eng-row td {
  padding: 1rem 1.5rem;
  font-size: 0.9rem;
  color: var(--text-2);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.eng-row td:first-child { color: var(--text-3); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.eng-row td:last-child { border-right: none; }
.eng-row:last-child td { border-bottom: none; }

/* ----------------------------------------------------------------
   INDUSTRY CHIP
---------------------------------------------------------------- */
.industry-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.industry-chip:hover { border-color: var(--border-brand); color: var(--text-1); background: var(--brand-dim); }
.industry-chip svg { color: var(--brand); }

/* ----------------------------------------------------------------
   FORM
---------------------------------------------------------------- */
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 0.5rem;
}
.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  appearance: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-dim);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-3); }
.form-textarea { min-height: 120px; resize: vertical; }
.radio-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.radio-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-2);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.radio-option:has(input:checked) { border-color: var(--brand); background: var(--brand-dim); color: var(--text-1); }
.radio-option input { accent-color: var(--brand); }

/* ----------------------------------------------------------------
   PAGE HERO (inner pages)
---------------------------------------------------------------- */
.page-hero {
  padding-top: calc(68px + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  position: relative;
}
.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.trust-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: var(--brand-dim);
  border: 1px solid var(--border-brand);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-light);
}

/* ----------------------------------------------------------------
   STANDARDS TABLE
---------------------------------------------------------------- */
.standards-table { width: 100%; border-collapse: collapse; }
.standards-table th {
  padding: 0.75rem 1.25rem;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface-card);
}
.standards-table td {
  padding: 0.875rem 1.25rem;
  font-size: 0.875rem;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.standards-table td:first-child { color: var(--brand-light); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.standards-table tr:last-child td { border-bottom: none; }

/* ----------------------------------------------------------------
   HOLOGRAPHIC BLOB DECORATIVE ELEMENTS
---------------------------------------------------------------- */
.holo-blob {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  filter: blur(0);
}
.holo-blob svg {
  display: block;
  overflow: visible;
}
.blob-morph {
  animation: blobMorph 14s ease-in-out infinite;
}
.blob-morph-2 {
  animation: blobMorph2 18s ease-in-out infinite;
  animation-delay: -5s;
}
.blob-morph-3 {
  animation: blobMorph3 22s ease-in-out infinite;
  animation-delay: -9s;
}
@keyframes blobMorph {
  0%,100% { transform: scale(1) rotate(0deg); }
  25%      { transform: scale(1.08) rotate(8deg) translateX(6px); }
  50%      { transform: scale(0.95) rotate(-5deg) translateY(8px); }
  75%      { transform: scale(1.06) rotate(12deg) translateX(-4px); }
}
@keyframes blobMorph2 {
  0%,100% { transform: scale(1) rotate(0deg) translateY(0); }
  30%      { transform: scale(1.1) rotate(-10deg) translateY(-12px); }
  60%      { transform: scale(0.92) rotate(6deg) translateY(8px); }
}
@keyframes blobMorph3 {
  0%,100% { transform: scale(1) rotate(0deg); }
  40%      { transform: scale(1.12) rotate(15deg) translateX(10px); }
  70%      { transform: scale(0.88) rotate(-8deg) translateX(-6px); }
}

/* Gradient text */
.grad-text {
  background: linear-gradient(135deg, #ff3cac, #a855f7, #38bdf8);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradMove 5s ease infinite;
}
@keyframes gradMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Float bobble for badge elements */
@keyframes floatBobble {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes floatUp {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 20px var(--brand-glow); }
  50%      { box-shadow: 0 0 48px var(--brand-glow), 0 0 80px rgba(255,60,172,0.2); }
}
@keyframes pulse {
  0%,100% { opacity:0.35; transform:scale(1); }
  50%      { opacity:1;    transform:scale(1.35); }
}

/* Floating metric badge */
.metric-float {
  background: var(--surface-card);
  border: 1px solid var(--border-brand);
  border-radius: 12px;
  padding: 0.75rem 1.1rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: floatBobble 4s ease-in-out infinite;
}
.metric-float .mf-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  background: linear-gradient(135deg, #fff, var(--brand-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .metric-float .mf-num {
  background: linear-gradient(135deg, #0A0012, var(--brand));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.metric-float .mf-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 2px;
}

/* Code snippet card */
.code-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.8;
  position: relative;
  overflow: hidden;
}
.code-card-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 0.75rem;
}
.code-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.code-filename { font-size: 0.65rem; letter-spacing: 0.1em; color: var(--text-3); margin-left: 8px; }
.code-line { display: flex; gap: 8px; }
.code-lnum { color: var(--text-3); user-select: none; min-width: 14px; }
.code-cursor {
  display: inline-block;
  width: 7px; height: 13px;
  background: var(--brand-light);
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.code-glow-edge {
  position: absolute; top:0; right:0; width:40px; height:100%;
  background: linear-gradient(270deg, var(--surface-card), transparent);
  pointer-events: none;
}

/* Bug hunter / shield section */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.why-point {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}
.why-point-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.why-point-dot svg { display:block; }

/* Stats dashboard */
.stats-dash {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dash-bar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-family: var(--font-mono);
}
.dash-bar-week { color: var(--text-3); width: 20px; flex-shrink:0; }
.dash-bar-track-outer { flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.dash-bar-inner { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--brand),var(--brand-light)); }
.dash-trend-dot { width:6px; height:6px; border-radius:50%; background:#ff3cac; flex-shrink:0; animation: pulse 2s ease-in-out infinite; }

/* ----------------------------------------------------------------
   SCROLL REVEAL ANIMATION
---------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ----------------------------------------------------------------
   CTA BAND
---------------------------------------------------------------- */
.cta-band {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 120%, var(--brand-dim) 0%, transparent 70%);
  pointer-events: none;
}
.cta-band-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------
   UTILITY
---------------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.gap-1  { gap: 0.5rem; }
.gap-2  { gap: 1rem; }
.gap-3  { gap: 1.5rem; }
.flex   { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 2.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.text-center { text-align: center; }
.max-680 { max-width: 680px; }
.mx-auto { margin-inline: auto; }
.hidden { display: none !important; }

/* ----------------------------------------------------------------
   ADDITIONAL ANIMATIONS
---------------------------------------------------------------- */

/* ── Staggered reveal for grid children ── */
.grid-2 > *, .grid-3 > *, .grid-4 > * { --stagger: 0; }
.grid-2.reveal.visible > *:nth-child(1),
.grid-3.reveal.visible > *:nth-child(1),
.grid-4.reveal.visible > *:nth-child(1) { animation: fadeSlideUp 0.55s 0.05s var(--ease-out) both; }
.grid-2.reveal.visible > *:nth-child(2),
.grid-3.reveal.visible > *:nth-child(2),
.grid-4.reveal.visible > *:nth-child(2) { animation: fadeSlideUp 0.55s 0.15s var(--ease-out) both; }
.grid-2.reveal.visible > *:nth-child(3),
.grid-3.reveal.visible > *:nth-child(3),
.grid-4.reveal.visible > *:nth-child(3) { animation: fadeSlideUp 0.55s 0.25s var(--ease-out) both; }
.grid-2.reveal.visible > *:nth-child(4),
.grid-3.reveal.visible > *:nth-child(4),
.grid-4.reveal.visible > *:nth-child(4) { animation: fadeSlideUp 0.55s 0.35s var(--ease-out) both; }
.grid-3.reveal.visible > *:nth-child(5) { animation: fadeSlideUp 0.55s 0.43s var(--ease-out) both; }
.grid-3.reveal.visible > *:nth-child(6) { animation: fadeSlideUp 0.55s 0.5s var(--ease-out) both; }
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Section eyebrow pulse dot ── */
.section-eyebrow::before {
  animation: eyebrowPulse 2.5s ease-in-out infinite;
}
@keyframes eyebrowPulse {
  0%,100% { box-shadow: 0 0 0 0 var(--brand-glow); opacity: 1; }
  50%     { box-shadow: 0 0 0 5px transparent; opacity: 0.7; }
}

/* ── CTA band sweep glow ── */
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(168,85,247,0.06) 50%, transparent 70%);
  background-size: 200% 200%;
  animation: ctaSweep 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaSweep {
  0%,100% { background-position: 200% 0%; }
  50%     { background-position: 0% 200%; }
}

/* ── Tool tag shimmer on hover ── */
.tool-tag {
  position: relative;
  overflow: hidden;
}
.tool-tag::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0s;
}
.tool-tag:hover::after {
  transform: translateX(200%);
  transition: transform 0.4s ease;
}

/* ── Card border glow on reveal ── */
.card.reveal.visible {
  animation: cardReveal 0.6s var(--ease-out) both;
}
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Metric number highlight flash on count ── */
.metric-num span[data-counted="1"] {
  animation: numFlash 0.4s var(--ease-out);
}
@keyframes numFlash {
  0%  { filter: brightness(1.5) drop-shadow(0 0 8px var(--brand-glow)); }
  100%{ filter: brightness(1) drop-shadow(0 0 0 transparent); }
}

/* ── Smooth entrance for process wf-step items ── */
.wf-step {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
/* nth-child(2) through (7) because child(1) is the .wf-travel-dot */
.wf-steps.visible .wf-step:nth-child(2) { opacity:1; transform:translateX(0); transition-delay:0.3s; }
.wf-steps.visible .wf-step:nth-child(3) { opacity:1; transform:translateX(0); transition-delay:0.5s; }
.wf-steps.visible .wf-step:nth-child(4) { opacity:1; transform:translateX(0); transition-delay:0.7s; }
.wf-steps.visible .wf-step:nth-child(5) { opacity:1; transform:translateX(0); transition-delay:0.9s; }
.wf-steps.visible .wf-step:nth-child(6) { opacity:1; transform:translateX(0); transition-delay:1.1s; }
.wf-steps.visible .wf-step:nth-child(7) { opacity:1; transform:translateX(0); transition-delay:1.3s; }

/* ── Gradient text animation for hero span.text-brand ── */
.display-xl .text-brand,
.display-lg .text-brand {
  background: linear-gradient(135deg, #ff3cac, #a855f7, #38bdf8, #a855f7, #ff3cac);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: brandFlow 7s ease infinite;
}
@keyframes brandFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Reporting rhythm cards — icon pulse ── */
.reporting-rhythm-card svg circle,
.reporting-rhythm-card svg path {
  transition: stroke 0.3s;
}
.reporting-rhythm-card:hover svg circle { stroke: #ff3cac; }
.reporting-rhythm-card:hover svg path  { stroke: #ff3cac; }

/* ----------------------------------------------------------------
   PROCESS TIMELINE ITEM (used in service sub-pages)
---------------------------------------------------------------- */
.process-tl-item {
  background: var(--surface-card);
  padding: 1.5rem;
  position: relative;
  transition: background 0.2s;
}
.process-tl-item:hover { background: var(--brand-dim); }
.process-tl-num {
  font-family: var(--font-sub);
  font-size: 0.65rem;
  color: var(--brand-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.process-tl-title {
  font-family: var(--font-sub);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 0.375rem;
}

/* ----------------------------------------------------------------
   LIGHT MODE OVERRIDES — Improve readability
---------------------------------------------------------------- */
[data-theme="light"] .cred-item { color: var(--text-2); }
[data-theme="light"] .tool-tag { color: var(--text-1); }
[data-theme="light"] .mega-link { color: var(--text-2); }
[data-theme="light"] .mega-link:hover { color: var(--text-1); }
[data-theme="light"] .nav-link { color: var(--text-2); }
[data-theme="light"] .nav-link:hover { color: var(--text-1); }
[data-theme="light"] .footer-links a { color: var(--text-2); }
[data-theme="light"] .footer-links a:hover { color: var(--text-1); }
[data-theme="light"] .footer-brand-desc { color: var(--text-2); }
[data-theme="light"] .footer-legal { color: var(--text-2); }
[data-theme="light"] .body-sm { color: var(--text-2); }
[data-theme="light"] .card { background: var(--surface); border-color: rgba(10,0,18,0.08); }
[data-theme="light"] .metric-tile { background: var(--surface); }
[data-theme="light"] .section-eyebrow { border-color: rgba(114,60,171,0.3); }
[data-theme="light"] .process-tl-item { background: var(--surface); border: 1px solid var(--border); }

/* ----------------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------------- */
/* ================================================================
   RESPONSIVE — TABLET  (≤ 1024px)
================================================================ */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-grid > *:first-child { grid-column: 1 / -1; }
  .hero-grid { gap: 2.5rem; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .navbar-inner { gap: 1.25rem; }
  /* Collapse inline grids set via style attribute */
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"] { grid-template-columns: 1fr !important; gap: 2rem !important; }
}

/* ================================================================
   RESPONSIVE — MOBILE  (≤ 768px)
================================================================ */
@media (max-width: 768px) {
  /* ── Navbar ── */
  .nav-links, .nav-actions .btn { display: none; }
  .nav-hamburger { display: flex; }
  .nav-spacer { display: none; }
  .navbar-inner { padding-inline: 1rem; gap: 0.75rem; }
  .nav-logo-text { font-size: 0.95rem; }
  .mega-menu { display: none !important; }

  /* ── Typography — prevent overflow ── */
  .display-xl { font-size: clamp(2rem, 9vw, 3rem); word-break: break-word; }
  .display-lg { font-size: clamp(1.6rem, 7vw, 2.5rem); word-break: break-word; }
  .display-md { font-size: clamp(1.25rem, 5vw, 1.75rem); }
  .display-sm { font-size: clamp(1rem, 4vw, 1.375rem); }
  .body-lg    { font-size: 1rem; }
  h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; }

  /* ── Hero sections ── */
  .hero { padding-top: calc(68px + 2.5rem); padding-bottom: 2.5rem; }
  .hero-grid  { grid-template-columns: 1fr; gap: 2rem; }
  /* Show hero graphics stacked below content rather than hiding them */
  .hero-grid > *:last-child { display: block; }
  .page-hero  { padding-top: calc(68px + 2rem); padding-bottom: 2rem; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  /* ── All multi-column grids → single column ── */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* ── Inline style grid overrides (used heavily in industry/service pages) ── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* ── Service hero layout ── */
  .svc-hero-layout { grid-template-columns: 1fr !important; }
  .svc-hero-graphic { display: none; }

  /* ── Focus grid (industry pages) ── */
  .focus-grid { grid-template-columns: 1fr !important; }

  /* ── Section spacing ── */
  .section { padding-block: 3rem; }
  .section-header { margin-bottom: 1.5rem; }
  .container { padding-inline: 1.25rem; }

  /* ── CTA band ── */
  .cta-band { padding: 2.5rem 1.25rem; text-align: center; }
  .cta-band-actions { flex-direction: column; align-items: center; gap: 0.75rem; }
  .cta-band-actions .btn { width: 100%; justify-content: center; max-width: 320px; }

  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer-grid > *:first-child { grid-column: 1 / -1; }
  .footer-cert-strip { overflow-x: auto; }

  /* ── Tables — make scrollable ── */
  .engagement-table, .cap-table-wrap, .standards-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Tool rows ── */
  .tool-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .tool-row-label { width: auto; }
  .tool-tags { flex-wrap: wrap; }

  /* ── Trust line & badges ── */
  .trust-line { flex-wrap: wrap; gap: 0.375rem; }
  .trust-badge { font-size: 0.65rem; }
  .hero-trust  { flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; }

  /* ── Purely decorative blobs — hide to save space ── */
  .holo-blob { display: none; }
  /* metric-float and code-card: shown, but scaled down */
  .metric-float { transform: scale(0.85); transform-origin: top left; }
  .code-card { font-size: 0.65rem; }

  /* ── Buttons — prevent overflow ── */
  .btn { white-space: normal; text-align: center; }
  .flex.gap-2 { flex-wrap: wrap; gap: 0.75rem !important; }
  .flex.gap-2 .btn { flex: 1 1 auto; min-width: 140px; justify-content: center; }

  /* ── Nav actions — keep theme toggle ── */
  .nav-actions { gap: 0.5rem; }
  .nav-theme-btn { display: flex; }

  /* ── Cap table (services page) ── */
  .cap-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cap-table { min-width: 500px; }

  /* ── Engagement table ── */
  .eng-header, .eng-row { min-width: 480px; }

  /* ── Dashboard mock (homepage) ── */
  .dashboard-mock { overflow-x: hidden; }

  /* ── Hero right column: show stacked, but cap the height ── */
  .hero-grid > *:last-child [style*="min-height:420px"],
  .hero-grid > *:last-child [style*="min-height: 420px"] { min-height: 0 !important; }

  /* ── Page hero grid right column: show stacked ── */
  .page-hero-grid > *:last-child { display: block; }

  /* ── Purely decorative SVG diagrams — still hidden ── */
  .circuit-hero, .tenant-diagram, .holo-blob { display: none; }

  /* ── Process steps ── */
  .ind-workflow .ind-step { grid-template-columns: 36px 1fr; }

  /* ── Service page class-based 3-column metric grids ── */
  .game-metrics-top,
  .load-kpis,
  .cwv-grid,
  .scale-metrics { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; }

  /* ── Accessibility / 2-col class grids ── */
  .wcag-grid { grid-template-columns: 1fr !important; }

  /* ── About page commitment card (48px icon col) ── */
  .commitment-card { grid-template-columns: 40px 1fr !important; gap: 1rem !important; }

  /* ── Industries: focus-grid already overridden, but belt-and-braces ── */
  .focus-grid { grid-template-columns: 1fr !important; }

  /* ── process.html wf-step (56px icon col) ── */
  .wf-step { grid-template-columns: 44px 1fr !important; gap: 1rem !important; }
  .wf-step-num { width: 44px !important; height: 44px !important; font-size: 0.9rem !important; }

  /* ── contact.html contact-grid ── */
  .contact-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
}

/* ================================================================
   RESPONSIVE — SMALL PHONES  (≤ 480px)
================================================================ */
@media (max-width: 480px) {
  .navbar-inner { padding-inline: 0.875rem; }
  .nav-logo-text { font-size: 0.875rem; }

  .display-xl { font-size: clamp(1.75rem, 10vw, 2.5rem); }
  .display-lg { font-size: clamp(1.4rem, 8vw, 2rem); }

  .container { padding-inline: 1rem; }
  .section { padding-block: 2.5rem; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > *:first-child { grid-column: 1; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .footer-bottom .footer-legal:last-child { justify-content: center; }

  .cta-band-actions .btn { max-width: 100%; }

  /* ── Mobile menu font size ── */
  .mobile-menu a { font-size: 0.95rem; padding: 0.625rem 0.875rem; }
  .mob-section-title { font-size: 0.65rem; }

  /* ── Hero buttons stack ── */
  .hero .flex.gap-2 { flex-direction: column; }
  .hero .flex.gap-2 .btn { width: 100%; max-width: 100%; }
  .page-hero .flex.gap-2 { flex-direction: column; }
  .page-hero .flex.gap-2 .btn { width: 100%; }

  /* ── Section eyebrow ── */
  .section-eyebrow { font-size: 0.7rem; }

  /* ── Detail grid (service pages) ── */
  .detail-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   RESPONSIVE — GLOBAL OVERFLOW SAFETY NET
   Catches inline styles, dynamic content, and edge cases
================================================================ */

/* Prevent any element from causing horizontal scroll */
html, body { max-width: 100%; overflow-x: hidden; }

/* All images always responsive */
img { max-width: 100%; height: auto; }

@media (max-width: 768px) {
  /* Override inline max-width on paragraphs/divs */
  p[style*="max-width"],
  div[style*="max-width:5"],
  div[style*="max-width:6"],
  div[style*="max-width:7"] {
    max-width: 100% !important;
  }

  /* SVGs in hero areas */
  svg { max-width: 100%; }

  /* Any inline-set width that could overflow */
  [style*="width:500px"], [style*="width:520px"],
  [style*="width:560px"], [style*="width:580px"],
  [style*="width:700px"], [style*="width:760px"],
  [style*="width:768px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Comprehensive inline display:grid overrides ──────────── */
  /* Covers: 1fr 1fr, 1fr 2fr, 1fr 1.2fr, 1fr 1.4fr, 1fr 1.5fr, 1fr 1.6fr,
             1.2fr 1fr, 1fr 1fr 1fr, repeat(2…), repeat(3…), repeat(4…),
             repeat(5…), 90px repeat(…) and other multi-col patterns.
     Uses a broad "any grid that isn't a tiny icon grid" approach.        */
  [style*="display:grid"],
  [style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Exception: small icon-column grids (44 / 48 / 56 px lead col) */
  [style*="grid-template-columns:44px"],
  [style*="grid-template-columns: 44px"],
  [style*="grid-template-columns:44px 1fr"],
  [style*="grid-template-columns: 44px 1fr"] {
    grid-template-columns: 36px 1fr !important;
    gap: 0.75rem !important;
  }
  [style*="grid-template-columns:48px"],
  [style*="grid-template-columns: 48px"],
  [style*="grid-template-columns:48px 1fr"],
  [style*="grid-template-columns: 48px 1fr"] {
    grid-template-columns: 40px 1fr !important;
    gap: 0.75rem !important;
  }
  [style*="grid-template-columns:56px"],
  [style*="grid-template-columns: 56px"],
  [style*="grid-template-columns:56px 1fr"],
  [style*="grid-template-columns: 56px 1fr"] {
    grid-template-columns: 44px 1fr !important;
    gap: 0.75rem !important;
  }

  /* ── CSS-class-based multi-column grids ───────────────────── */
  /* process-timeline (3-col) defined as a class in index.html  */
  .process-timeline {
    grid-template-columns: 1fr !important;
  }

  /* Flex rows that should wrap */
  [style*="display:flex"][style*="gap"],
  [style*="display: flex"][style*="gap"] {
    flex-wrap: wrap;
  }

  /* Remove hard margins that push content off-screen */
  [style*="margin-left:auto"][style*="margin-right:auto"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Table scroll wrapper */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }

  /* Contact form two-column grid */
  #contact-form [style*="grid-template-columns:1fr 1fr"],
  #contact-form [style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Section gap reduction */
  [style*="gap:4rem"] { gap: 2rem !important; }
  [style*="gap:3rem"] { gap: 1.5rem !important; }

  /* Margin-top overrides */
  [style*="margin-top:4rem"] { margin-top: 2rem !important; }
  [style*="margin-top:3rem"] { margin-top: 1.5rem !important; }

  /* Buttons in hero — always full-width on small screens */
  .page-hero .btn, .hero .btn { min-width: unset; }

  /* Industry page focus grid */
  .focus-grid { grid-template-columns: 1fr !important; }

  /* Footer cert strip — scroll horizontally */
  .footer-cert-inner { flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; }
  .footer-cert-item { font-size: 0.65rem; }

  /* Engagement table on services page */
  .cap-table { min-width: 480px; }
  .cap-table-wrap { overflow-x: auto; }

  /* ── Prevent any text from being clipped ─────────────────── */
  * { overflow-wrap: break-word; word-wrap: break-word; }
  pre, code { white-space: pre-wrap; }

  /* Nav logo text hide on very narrow */
  @media (max-width: 360px) {
    .nav-logo-text { display: none; }
  }
}