/* ═══════════════════════════════════════════════════════════
   Vultronix Industries — Global Design System
   Tokens · Reset · Typography · Base Layout
═══════════════════════════════════════════════════════════ */

:root {
  /* Base palette — Ripples navy + teal */
  --navy: #1F3A7A;
  --teal: #2AA6B7;
  --ink: #050c1a;
  --ink2: #091220;
  --ink3: #0d192d;
  --ink4: #1a2744;
  --glass: rgba(255,255,255,.05);
  --glass2: rgba(255,255,255,.08);
  --edge: rgba(255,255,255,.1);
  --edge2: rgba(255,255,255,.16);

  /* Brand accents */
  --elec: #2AA6B7;
  --volt: #1F3A7A;
  --spark: #3b82f6;
  --green: #10d9a0;
  --rose: #f43f5e;

  /* Text — improved contrast on dark backgrounds */
  --t1: #ffffff;
  --t2: rgba(255,255,255,.84);
  --t3: rgba(255,255,255,.62);
  --t4: rgba(255,255,255,.38);

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

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

  /* Domain tokens — overridden per product page */
  --d-prime:  #2AA6B7;
  --d-prime2: #1F3A7A;
  --d-glow:   rgba(42,166,183,.18);
  --d-bd:     rgba(42,166,183,.28);
  --d-bg:     rgba(42,166,183,.1);
  --d-card-top: linear-gradient(90deg,#1F3A7A,#2AA6B7);
  --d-btn-shadow: rgba(31,58,122,.45);
  --d-pill-bg: rgba(42,166,183,.1);
  --d-pill-bd: rgba(42,166,183,.28);
  --d-metric: var(--teal);
  --edge3: rgba(255,255,255,.2);
  --glass3: rgba(255,255,255,.12);
  --d-glow2: rgba(42,166,183,.08);
}

/* Domain token overrides */
.domain-crusher  { --d-prime:#f59e0b; --d-prime2:#dc2626; --d-glow:rgba(245,158,11,.15); --d-bd:rgba(245,158,11,.25); --d-bg:rgba(245,158,11,.08); --d-card-top:linear-gradient(90deg,#dc2626,#f59e0b); --d-btn-shadow:rgba(245,158,11,.38); --d-pill-bg:rgba(245,158,11,.1); --d-pill-bd:rgba(245,158,11,.28); --d-metric:#f59e0b; }
.domain-home     { --d-prime:#d4a96a; --d-prime2:#7c3aed; --d-glow:rgba(212,169,106,.14); --d-bd:rgba(212,169,106,.25); --d-bg:rgba(212,169,106,.08); --d-card-top:linear-gradient(90deg,#d4a96a,#e2c99a); --d-btn-shadow:rgba(212,169,106,.35); --d-pill-bg:rgba(212,169,106,.1); --d-pill-bd:rgba(212,169,106,.28); --d-metric:#d4a96a; }
.domain-building { --d-prime:#22d3ee; --d-prime2:#1e40af; --d-glow:rgba(34,211,238,.15); --d-bd:rgba(34,211,238,.22); --d-bg:rgba(34,211,238,.07); --d-card-top:linear-gradient(90deg,#1e40af,#22d3ee); --d-btn-shadow:rgba(34,211,238,.35); --d-pill-bg:rgba(34,211,238,.08); --d-pill-bd:rgba(34,211,238,.24); --d-metric:#22d3ee; }
.domain-crop     { --d-prime:#10d9a0; --d-prime2:#b45309; --d-glow:rgba(16,217,160,.14); --d-bd:rgba(16,217,160,.22); --d-bg:rgba(16,217,160,.08); --d-card-top:linear-gradient(90deg,#059669,#10d9a0); --d-btn-shadow:rgba(16,217,160,.35); --d-pill-bg:rgba(16,217,160,.1); --d-pill-bd:rgba(16,217,160,.26); --d-metric:#10d9a0; }

/* ── 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(42,166,183,.5);
  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: 700;
  line-height: 1.15;
  color: var(--t1);
}

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: var(--t2);
}

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

#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  { --d-prime:#f59e0b; --d-prime2:#dc2626; --d-glow:rgba(245,158,11,.15); --d-bd:rgba(245,158,11,.25); }
#nav.domain-home     { --d-prime:#d4a96a; --d-prime2:#7c3aed; --d-glow:rgba(212,169,106,.14); --d-bd:rgba(212,169,106,.25); }
#nav.domain-building { --d-prime:#22d3ee; --d-prime2:#1e40af; --d-glow:rgba(34,211,238,.15); --d-bd:rgba(34,211,238,.22); }
#nav.domain-crop     { --d-prime:#10d9a0; --d-prime2:#b45309; --d-glow:rgba(16,217,160,.14); --d-bd:rgba(16,217,160,.22); }

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