/*
  vMLX Modern Pass — hard-edged runtime aesthetic.
  Loaded after legacy inline CSS to remove the rounded/glassy SaaS look.
*/

:root {
  --bg: #050506 !important;
  --surface: #0b0c0e !important;
  --surface-solid: #101114 !important;
  --surface-hover: #14161a !important;
  --border: rgba(230, 236, 255, 0.14) !important;
  --border-hover: rgba(230, 236, 255, 0.28) !important;
  --text: rgba(248, 250, 252, 0.96) !important;
  --text-secondary: rgba(218, 226, 239, 0.66) !important;
  --text-tertiary: rgba(218, 226, 239, 0.42) !important;
  --blue: #8ab4ff !important;
  --blue-bright: #d8ff5f !important;
  --blue-glow: rgba(216, 255, 95, 0.12) !important;
  --green: #d8ff5f !important;
  --amber: #ffcf5a !important;
  --red: #ff5f5f !important;
  --purple: #9da9ff !important;
}

* {
  box-shadow: none !important;
}

html {
  background: #050506 !important;
  text-rendering: geometricPrecision;
}

body {
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #050506 0%, #08090b 42%, #050506 100%) !important;
  background-size: 44px 44px, 44px 44px, auto !important;
  color: var(--text) !important;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif !important;
  letter-spacing: -0.018em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(216, 255, 95, 0.06) 50%, transparent 100%),
    radial-gradient(circle at 82% 12%, rgba(138, 180, 255, 0.08), transparent 34rem);
}

a {
  text-underline-offset: 0.18em;
}

nav,
.nav,
.navbar,
header,
.site-header {
  position: relative !important;
  z-index: 1000 !important;
  border-bottom: 1px solid var(--border) !important;
  background: rgba(5, 5, 6, 0.92) !important;
  backdrop-filter: blur(14px) !important;
}

a,
button,
[role="button"],
.btn,
.button,
.nav-download,
.nav-links a,
.logo,
.lang-btn,
.lang-menu,
.lang-menu a,
.faq-item,
summary {
  position: relative !important;
  z-index: 30 !important;
  pointer-events: auto !important;
}

.nav-links a,
.nav-download,
.nav-gh,
.lang-btn,
.lang-toggle {
  border-radius: 2px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero {
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
}

.hero-grid,
.hero-glow,
.glow,
[class*="glow"],
.cursor-glow,
#hero-particles,
.orb,
[class*="orb"],
[class*="grid"]::before,
[class*="grid"]::after,
.hero::before,
.hero::after,
.hero-pill::before,
.btn-primary::after,
.app-preview::before,
.app-preview::after,
.app-frame::before,
.app-frame::after,
.feature-card::before,
.feature-card::after,
.bento-card::before,
.bento-card::after,
.cta::before,
.cta::after {
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero-inner,
.section-inner,
.container,
main > section {
  position: relative;
  z-index: 2;
}

.hero-pill,
.badge,
.pill,
.section-eyebrow,
.eyebrow,
.tag,
.chip,
.badge-8bit,
.badge-mixed {
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
  background: rgba(8, 9, 11, 0.86) !important;
  color: var(--blue-bright) !important;
  font-family: "SF Mono", "Cascadia Code", "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.hero-pill .dot,
.badge-dot,
.dot {
  border-radius: 0 !important;
  background: var(--blue-bright) !important;
}

h1,
.hero h1,
.section-heading,
.section-title,
.cta-title,
.feature-title {
  color: var(--text) !important;
  font-weight: 790 !important;
  letter-spacing: -0.085em !important;
  text-shadow: none !important;
}

.hero h1 {
  max-width: 1120px;
  line-height: 0.88 !important;
}

.grad,
.gradient,
.accent,
h1 span,
.hero h1 span {
  background: none !important;
  color: inherit !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}

.hero-sub,
.section-desc,
.cta-sub,
.feature-desc,
p {
  color: var(--text-secondary) !important;
}

.hero-meta,
.stats,
.metrics,
.github-stats,
.feature-grid,
.bento-grid,
.comparison-grid,
.engine-grid,
.api-grid,
.tool-grid,
.models-grid {
  gap: 1px !important;
}

.hero-meta span,
.github-stat,
.stat-card,
.metric-card,
.feature-card,
.bento-card,
.engine-card,
.api-card,
.tool-card,
.model-card,
.compare-card,
.test-card,
.qa-card,
.card,
.panel,
.glass,
.terminal,
.term,
.code-block,
.command-card,
.endpoint-card,
.capability-card,
.screenshot-card,
.app-frame,
.preview-card,
.download-card,
.faq-item,
.cta,
.lang-menu {
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
  background: rgba(10, 11, 13, 0.88) !important;
  backdrop-filter: none !important;
}

.github-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px !important;
  width: min(760px, 100%);
  margin: 1.2rem auto 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
  overflow: hidden;
  background: var(--border) !important;
}

.github-stat {
  display: grid !important;
  gap: 0.3rem;
  min-height: 74px;
  align-content: center;
  padding: 0.9rem 1rem !important;
  color: var(--text) !important;
  text-decoration: none !important;
}

.github-stat span {
  color: var(--text-tertiary) !important;
  font-family: "SF Mono", "Cascadia Code", "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

.github-stat strong {
  color: var(--text) !important;
  font-size: 0.98rem;
  font-weight: 780;
  letter-spacing: -0.03em;
}

.github-stat[data-primary="true"] strong {
  color: var(--blue-bright) !important;
}

.feature-card:hover,
.bento-card:hover,
.engine-card:hover,
.api-card:hover,
.tool-card:hover,
.model-card:hover,
.compare-card:hover,
.test-card:hover,
.qa-card:hover,
.card:hover {
  border-color: var(--border-hover) !important;
  background: #111319 !important;
  transform: none !important;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.button,
button,
.download-btn,
.cta-button {
  min-height: 46px;
  border: 1px solid var(--border-hover) !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: var(--text) !important;
  font-weight: 760 !important;
  letter-spacing: -0.01em !important;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease !important;
}

.btn-primary,
.nav-download,
.download-btn.primary,
.cta-button.primary {
  border-color: var(--blue-bright) !important;
  background: var(--text) !important;
  color: #050506 !important;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.button:hover,
button:hover,
.download-btn:hover,
.cta-button:hover {
  border-color: var(--blue-bright) !important;
  filter: none !important;
  transform: none !important;
}

code,
pre,
.term-body,
.terminal-body,
.code,
.mono,
.model-id,
.api-path {
  border-radius: 2px !important;
  background: #060708 !important;
  color: rgba(248, 250, 252, 0.9) !important;
  font-family: "SF Mono", "Cascadia Code", "JetBrains Mono", ui-monospace, monospace !important;
}

table,
th,
td {
  border-color: var(--border) !important;
}

table {
  border-collapse: collapse !important;
  background: rgba(8, 9, 11, 0.86) !important;
}

th {
  background: #101114 !important;
  color: var(--text) !important;
}

img,
video,
canvas,
.screenshot,
.app-preview,
.hero-visual {
  border-radius: 4px !important;
}

section {
  border-top: 1px solid rgba(230, 236, 255, 0.08);
}

footer {
  border-top: 1px solid var(--border) !important;
  background: #050506 !important;
}

@media (max-width: 768px) {
  .hero h1 {
    letter-spacing: -0.065em !important;
  }

  .hero-pill,
  .badge,
  .pill {
    font-size: 0.62rem !important;
  }

  .github-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final QA guards: keep runtime visuals sharp without mobile side-scroll or inert overlays. */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

@media (max-width: 820px) {
  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .orb,
  [class*="orb"],
  [class*="glow"],
  .cursor-glow,
  #cursorGlow {
    display: none !important;
  }

  h1, h2, h3, p, li, .eyebrow, .section-eyebrow, .badge, .pill {
    overflow-wrap: anywhere;
  }
}