/* ═══════════════════════════════════════════════════════════
   Masix Smart Automation — Global Design System
   Light theme · White / Grey · Red / Black brand
═══════════════════════════════════════════════════════════ */

:root {
  /* Brand — black + red logo */
  --brand-red: #C8102E;
  --brand-red-dark: #9B0C24;
  --brand-black: #111111;

  /* Surfaces — white + grey + black shade bands */
  --navy: #111111;
  --teal: #C8102E;
  --ink: #ffffff;
  --ink2: #f4f4f5;
  --ink3: #e8e8ea;
  --ink4: #111111;
  --black-band: #111111;
  --glass: rgba(17,17,17,.04);
  --glass2: rgba(17,17,17,.06);
  --edge: rgba(17,17,17,.1);
  --edge2: rgba(17,17,17,.16);

  /* Brand accents */
  --elec: #C8102E;
  --volt: #111111;
  --spark: #C8102E;
  --green: #059669;
  --rose: #C8102E;

  /* Text — dark on light (readable body copy) */
  --t1: #111111;
  --t2: #1a1a1a;
  --t3: #2e2e2e;
  --t4: #4a4a4a;

  /* Fonts */
  --fd: 'Roboto', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --fm: 'JetBrains Mono', monospace;

  /* Geometry */
  --r: 12px;
  --r2: 16px;
  --r3: 24px;
  --nav: 76px;

  /* Domain tokens — brand-aligned red / black */
  --d-prime:  #C8102E;
  --d-prime2: #111111;
  --d-glow:   rgba(200,16,46,.12);
  --d-bd:     rgba(200,16,46,.28);
  --d-bg:     rgba(200,16,46,.08);
  --d-card-top: linear-gradient(90deg,#111111,#C8102E);
  --d-btn-shadow: rgba(200,16,46,.28);
  --d-pill-bg: rgba(200,16,46,.08);
  --d-pill-bd: rgba(200,16,46,.25);
  --d-metric: var(--brand-red);
  --edge3: rgba(17,17,17,.18);
  --glass3: rgba(17,17,17,.08);
  --d-glow2: rgba(200,16,46,.06);
}

/* Domain token overrides — keep product identity within brand palette */
.domain-crusher  { --d-prime:#C8102E; --d-prime2:#111111; --d-glow:rgba(200,16,46,.12); --d-bd:rgba(200,16,46,.28); --d-bg:rgba(200,16,46,.07); --d-card-top:linear-gradient(90deg,#111111,#C8102E); --d-btn-shadow:rgba(200,16,46,.3); --d-pill-bg:rgba(200,16,46,.08); --d-pill-bd:rgba(200,16,46,.25); --d-metric:#C8102E; }
.domain-building { --d-prime:#C8102E; --d-prime2:#1a1a1a; --d-glow:rgba(200,16,46,.12); --d-bd:rgba(200,16,46,.25); --d-bg:rgba(200,16,46,.06); --d-card-top:linear-gradient(90deg,#1a1a1a,#C8102E); --d-btn-shadow:rgba(200,16,46,.28); --d-pill-bg:rgba(200,16,46,.07); --d-pill-bd:rgba(200,16,46,.22); --d-metric:#C8102E; }
.domain-parking  { --d-prime:#C8102E; --d-prime2:#111111; --d-glow:rgba(200,16,46,.12); --d-bd:rgba(200,16,46,.28); --d-bg:rgba(200,16,46,.07); --d-card-top:linear-gradient(90deg,#111111,#C8102E); --d-btn-shadow:rgba(200,16,46,.3); --d-pill-bg:rgba(200,16,46,.08); --d-pill-bd:rgba(200,16,46,.25); --d-metric:#C8102E; }

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--fb);
  background: var(--ink);
  color: var(--t1);
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  font-family: var(--fb);
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--elec);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--ink);
}

::-webkit-scrollbar-thumb {
  background: rgba(200,16,46,.45);
  border-radius: 2px;
}

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.sh1, .sh2, .sh3,
.ct-h1, .vx-logo-name,
[class*="__title"], [class*="-title"] {
  font-family: var(--fd);
  font-weight: 800;
  line-height: 1.15;
  color: var(--brand-black);
}

h1 em, h2 em, .home-h1 em, .home-h2 em,
.cr-h1 em, .cr-h2 em, .bd-h1 em, .bd-h2 em,
.pk-h1 em, .pk-h2 em, .ab-h1 em, .ab-h2 em,
.ct-h1 em, .ca-h1 em, .in-h1 em {
  color: var(--brand-red);
  font-style: normal;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.65rem); }

p {
  color: #1a1a1a;
}

.home-lead,
.ab-lead,
.cr-lead,
.bd-lead,
.pk-lead,
.ct-lead,
.ca-lead,
.in-lead,
.home-suite-card p,
.ab-team-card p,
.ab-value-card p,
.home-testi blockquote,
.home-step p,
.pk-system-card p,
.pk-bento-card p,
.bd-bento-card p,
.cr-pain-card p,
.in-card p,
.ca-perk p,
.ct-info__value,
.footer-meta,
.footer-link,
.footer-ext-link,
.footer-contact-link,
.footer-copy,
.footer-tagline,
.vx-logo-tag,
.nav-link,
.mob-link,
.mm-card p {
  color: #1a1a1a;
}

em.elec { color: var(--elec); font-style: normal; }
em.prime { color: var(--d-prime); font-style: normal; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--fm);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--d-prime);
  margin-bottom: 1rem;
}

.eyebrow.center {
  justify-content: center;
  width: 100%;
}

.mono {
  font-family: var(--fm);
}

/* ── Layout utilities ──────────────────────────────────────── */
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 5vw, 1.75rem);
}

.wrap-md {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 5vw, 1.75rem);
}

.section {
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.section-sm {
  padding: clamp(2rem, 5vw, 4rem) 0;
}

.section-alt2 {
  background: var(--ink3);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}

.black-band {
  background: var(--black-band);
  color: #ffffff;
  border-top: 3px solid var(--brand-red);
  border-bottom: 3px solid var(--brand-red);
}

.black-band h2,
.black-band .home-h2,
.black-band p,
.black-band .home-lead {
  color: #ffffff;
}

.black-band .home-h2 em,
.black-band h2 em {
  color: var(--brand-red);
}

.black-band .btn-ghost {
  color: #ffffff;
  border-color: rgba(255,255,255,.35);
}

.black-band .btn-ghost:hover {
  background: rgba(255,255,255,.08);
  border-color: #ffffff;
}

/* Keep dashboard module copy light on dark shells */
.module-shell,
.module-shell p,
.module-shell .mod-subtitle,
.module-shell .zdp-label,
.module-shell .shc-lbl {
  color: rgba(255,255,255,.88);
}

.module-shell .mod-title,
.module-shell .zdp-value,
.module-shell .shc-num {
  color: #ffffff;
}

#app {
  min-height: calc(100vh - var(--nav));
  padding-top: var(--nav);
}

.page {
  display: none;
  min-height: calc(100vh - var(--nav));
}

.page.active {
  display: block;
}

#theme-veil {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

#theme-veil.flash {
  opacity: .35;
}

#nav.domain-crusher,
#nav.domain-building,
#nav.domain-parking {
  --d-prime:#C8102E;
  --d-prime2:#111111;
  --d-glow:rgba(200,16,46,.12);
  --d-bd:rgba(200,16,46,.28);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}