/* VIZO·DYNAMICS shared component layer.
   Vizo Node is now the reference system: black/cyan restraint, lightweight
   editorial typography, quiet glass depth, product-story spacing, and exact
   VIZO·DYNAMICS brand usage. Selectors are preserved so existing markup keeps
   working across about, contact, careers, press-kit, and legal pages. */
:root {
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  --card: 0 0% 4%;
  --card-foreground: 0 0% 100%;
  --primary: 0 0% 100%;
  --primary-foreground: 0 0% 0%;
  --secondary: 0 0% 12%;
  --secondary-foreground: 0 0% 100%;
  --muted: 0 0% 10%;
  --muted-foreground: 0 0% 66%;
  --accent: 0 0% 14%;
  --accent-foreground: 0 0% 100%;
  --border: 0 0% 100%;
  --input: 0 0% 100%;
  --ring: 0 0% 100%;
  --radius: 1rem;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --vizo-cyan: #3FD8FF;
}

body {
  background:
    radial-gradient(ellipse at 72% -8%, rgba(63, 216, 255, .09), transparent 34rem),
    radial-gradient(ellipse at 20% 15%, rgba(255, 255, 255, .035), transparent 24rem),
    #000004;
  color: hsl(var(--foreground));
  letter-spacing: -.01em;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', 'Geist', sans-serif;
  font-weight: 300;
}

/* Quiet Vizo Node-style atmosphere: a soft signal glow, not a noisy pattern. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 4, 0), rgba(0, 0, 4, .68)),
    linear-gradient(112deg, rgba(63, 216, 255, .035), transparent 30%, transparent 72%, rgba(83, 255, 204, .024)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 92px);
}
main, nav, footer { position: relative; z-index: 1; }

nav {
  background: rgba(0, 0, 0, .58) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .34);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.nav-logo span { text-transform: uppercase; letter-spacing: .08em; font-weight: 720; }
.nav-logo img { border-radius: 10px !important; box-shadow: none !important; }
.nav-links a:not(.nav-cta) {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem !important;
  font-weight: 780 !important;
}

.nav-logo,
.nav-links a,
footer a { outline-offset: 3px; }

/* ---- Buttons: rectangular action baseline; site-nav.css is the final authority ---- */
.nav-cta,
.btn,
.btn-primary,
.btn-secondary,
.copy-btn,
.try-api-btn,
a.nav-cta,
a.btn,
button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 0 20px;
  border-radius: 0 !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  font-weight: 850;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}

.nav-cta,
.btn-primary,
.try-api-btn {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
  box-shadow: 0 20px 60px rgba(255, 255, 255, .12);
}

.btn-secondary,
.btn:not(.btn-primary):not(.nav-cta),
.copy-btn {
  background: rgba(255, 255, 255, .04) !important;
  color: #fff !important;
}

.nav-cta:hover,
.btn-primary:hover,
.try-api-btn:hover {
  background: transparent !important;
  color: #fff !important;
  transform: none;
  box-shadow: none;
}
.btn-secondary:hover,
.btn:not(.btn-primary):not(.nav-cta):hover,
.copy-btn:hover {
  transform: none;
  border-color: #fff !important;
  background: #fff !important;
  color: #000 !important;
}

/* ---- Small monospace-style labels / badges ---- */
.hero-badge,
.section-label,
.nav-chip,
.translator-tagline,
.location,
.role-card .location {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: .4rem;
  border: 1px solid rgba(255, 255, 255, .20) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .06) !important;
  color: rgba(255, 255, 255, .82) !important;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---- Cards: restrained Apple-style glass, consistent radius/alignment ---- */
.audience-card,
.proof-card,
.quote-card,
.role-card,
.contact-card,
.download-card,
.fact-box,
.timeline-content,
.dubai-stat,
.stat,
.api-sandbox,
.manifesto,
.dcr-media,
.dcr-diagram,
.founder-content,
.legal-card,
.card {
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: var(--radius) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03)) !important;
  color: #fff !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

/* ---- Typography hierarchy ---- */
.stat-number,
.dubai-stat-number,
.hero h1,
h1, h2, h3 {
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: -.05em;
  line-height: .98;
}
h1 { font-weight: 950 !important; letter-spacing: -.06em; }
h2 { font-weight: 920 !important; }
h3 { font-weight: 850 !important; letter-spacing: -.04em; }
.lead, .hero-subtitle { letter-spacing: -.01em; }

.stat-label,
.dubai-stat-label,
.lead,
.hero-subtitle,
.last-updated,
li,
p {
  color: hsl(var(--muted-foreground)) !important;
}
blockquote { color: #fff !important; }

/* Editorial blockquote: refine the legacy cyan bar into a premium white
   hairline so the only saturated element on the otherwise mono About page
   matches the black/white system used across the homepage. */
blockquote { border-left-color: rgba(255, 255, 255, .32) !important; }

/* ---- Form controls ---- */
input,
textarea,
select {
  min-height: 46px;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  background: rgba(255, 255, 255, .04) !important;
  color: #fff !important;
}
input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, .42); }

/* ---- Accessible focus: visible high-contrast ring on a black UI ---- */
input:focus,
textarea:focus,
select:focus,
a:focus-visible,
button:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .14) !important;
  border-color: #fff !important;
}

footer {
  background: rgba(0, 0, 0, .72);
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
}
footer a { color: rgba(255, 255, 255, .62) !important; }
footer a:hover { color: #fff !important; }

@media (max-width: 768px) {
  .nav-cta,
  .btn,
  .btn-primary,
  .btn-secondary,
  .copy-btn,
  .try-api-btn,
  button {
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* === Vizo Node editorial refinement =====================================
   The Vizo Node page works because it feels like a calm product story: lighter
   type, more air, fewer forced uppercase blocks, softer cards. Carry that feel
   across the supporting marketing pages; the homepage mirrors this reference
   in its own inline system. */
main {
  max-width: min(980px, calc(100% - 48px)) !important;
  padding-top: clamp(154px, 18vh, 204px) !important;
  padding-bottom: clamp(96px, 13vh, 156px) !important;
}

main > h1:first-child::before {
  content: 'VIZO·DYNAMICS';
  display: block;
  width: fit-content;
  margin-bottom: 24px;
  color: rgba(63,216,255,.88);
  font-family: var(--font-mono, 'SF Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1, h2, h3 {
  text-transform: none !important;
  color: #f5f6f8 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
}

h1 {
  font-weight: 300 !important;
  font-size: clamp(42px, 7.2vw, 92px) !important;
  line-height: 1 !important;
  margin-bottom: 28px !important;
}

h2 {
  font-weight: 300 !important;
  font-size: clamp(30px, 4.7vw, 56px) !important;
  line-height: 1.04 !important;
  margin-top: clamp(72px, 9vw, 116px) !important;
  margin-bottom: 22px !important;
}

h3 {
  font-weight: 380 !important;
}

.lead,
.hero-subtitle {
  max-width: 720px;
  color: rgba(245, 246, 248, .54) !important;
  font-weight: 300 !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  line-height: 1.55 !important;
  margin-bottom: clamp(46px, 6vw, 72px) !important;
}

p,
li,
.roles,
.location,
.last-updated {
  color: rgba(245, 246, 248, .58) !important;
  font-weight: 300 !important;
  line-height: 1.72 !important;
  font-size: 16px;
}

p strong,
li strong {
  color: rgba(245, 246, 248, .72) !important;
  font-weight: 520 !important;
}

blockquote {
  margin: clamp(36px, 5vw, 56px) 0 !important;
  padding-left: 28px !important;
  border-left-width: 1px !important;
  border-left-color: rgba(255,255,255,.26) !important;
  color: rgba(245,246,248,.86) !important;
  font-weight: 300 !important;
  line-height: 1.62 !important;
}

.contact-grid {
  gap: 28px !important;
}

.contact-card,
.role-card,
.download-card,
.fact-box,
.timeline-content,
.dubai-stat,
.stat,
.api-sandbox,
.manifesto,
.dcr-media,
.dcr-diagram,
.founder-content,
.legal-card,
.card {
  border-radius: 26px !important;
  padding: clamp(32px, 3.4vw, 44px) !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(63,216,255,.052), transparent 12rem),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 28px 84px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.contact-card:hover,
.role-card:hover,
.download-card:hover,
.fact-box:hover,
.timeline-content:hover,
.dubai-stat:hover,
.stat:hover,
.legal-card:hover,
.card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255,255,255,.24) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(63,216,255,.08), transparent 10rem),
    linear-gradient(145deg, rgba(255,255,255,.082), rgba(255,255,255,.032)) !important;
}

.contact-card h2,
.role-card h2,
.download-card h2 {
  font-size: clamp(22px, 2vw, 30px) !important;
  font-weight: 340 !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

.fact-box p,
.download-card span,
.download-card p {
  color: rgba(245,246,248,.78) !important;
  font-weight: 340 !important;
}

.fact-box h3 {
  color: rgba(63,216,255,.78) !important;
  font-family: var(--font-mono, 'SF Mono', 'JetBrains Mono', ui-monospace, monospace) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  line-height: 1.2 !important;
  margin: 0 0 14px !important;
  text-transform: uppercase !important;
}

.fact-box p {
  font-size: clamp(18px, 2vw, 24px) !important;
  line-height: 1.36 !important;
}

table {
  max-width: 100% !important;
  border-color: rgba(255,255,255,.12) !important;
}

th,
td {
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(245,246,248,.64) !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
}

th {
  color: rgba(245,246,248,.86) !important;
  font-family: var(--font-mono, 'SF Mono', 'JetBrains Mono', ui-monospace, monospace) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

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

  th,
  td {
    min-width: 148px;
    font-size: 13px !important;
  }
}

.contact-card a,
.role-card a,
main a:not(.nav-cta) {
  color: rgba(245,246,248,.86) !important;
  font-weight: 420 !important;
  text-decoration: none !important;
  text-underline-offset: 4px;
}

.contact-card a:hover,
.role-card a:hover,
main a:not(.nav-cta):hover {
  color: #fff !important;
  text-decoration: underline !important;
}

.location,
.contact-card .roles:first-of-type {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(63,216,255,.78) !important;
}

footer .bd,
.footer-brand,
.nav-logo span {
  letter-spacing: -.025em !important;
}

@media (max-width: 720px) {
  main {
    max-width: min(100% - 34px, 920px) !important;
    padding-top: 124px !important;
  }
  h1 { font-size: clamp(38px, 12vw, 58px) !important; }
  h2 { font-size: clamp(25px, 8vw, 38px) !important; }
  .lead { font-size: 18px !important; }
  .contact-card,
  .role-card { padding: 28px !important; }
}

/* Final shared marketing refinement. Vizo Node remains the reference: black
   canvas, restrained accents, spacious type, and quiet section surfaces. */
html,
body {
  background: #000004 !important;
}

body {
  color: #f5f6f8 !important;
}

main {
  max-width: min(1060px, calc(100% - 56px)) !important;
}

main > h1:first-child {
  max-width: 900px !important;
}

h1,
h2,
h3 {
  text-wrap: balance;
  overflow-wrap: anywhere;
}

p,
li {
  max-width: 76ch;
}

.lead,
.hero-subtitle {
  max-width: 760px !important;
}

.contact-card,
.role-card,
.download-card,
.fact-box,
.timeline-content,
.dubai-stat,
.stat,
.api-sandbox,
.manifesto,
.dcr-media,
.dcr-diagram,
.founder-content,
.legal-card,
.card {
  position: relative;
  overflow: hidden;
  border-radius: 8px !important;
  border-color: rgba(255, 255, 255, .10) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)) !important;
  box-shadow: none !important;
}

.contact-card::before,
.role-card::before,
.download-card::before,
.fact-box::before,
.timeline-content::before,
.dubai-stat::before,
.stat::before,
.api-sandbox::before,
.manifesto::before,
.dcr-media::before,
.dcr-diagram::before,
.founder-content::before,
.legal-card::before,
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(245, 246, 248, .42), rgba(63, 216, 255, .32), transparent);
  opacity: .62;
}

.contact-card:hover,
.role-card:hover,
.download-card:hover,
.fact-box:hover,
.timeline-content:hover,
.dubai-stat:hover,
.stat:hover,
.legal-card:hover,
.card:hover {
  transform: none !important;
  border-color: rgba(255, 255, 255, .20) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)) !important;
}

.contact-grid,
.roles-grid,
.download-grid,
.timeline,
.stats-grid {
  gap: clamp(18px, 2.4vw, 30px) !important;
}

table {
  border-radius: 8px !important;
  overflow: hidden;
}

main::after {
  content: '';
  display: block;
  width: min(220px, 52vw);
  height: 1px;
  margin-top: clamp(64px, 9vw, 112px);
  background: linear-gradient(90deg, rgba(63, 216, 255, 0), rgba(63, 216, 255, .58), rgba(83, 255, 204, .42), rgba(63, 216, 255, 0));
  opacity: .58;
}

nav .nav-links a.nav-cta,
nav .nav-links a.nav-cta[aria-current="page"] {
  border-radius: 0 !important;
}

@media (max-width: 720px) {
  main {
    max-width: min(100% - 34px, 980px) !important;
    padding-top: 122px !important;
    padding-bottom: 88px !important;
  }

  p,
  li {
    font-size: 15.5px !important;
  }

  h1 {
    font-size: clamp(36px, 10.8vw, 52px) !important;
  }

  .contact-card,
  .role-card,
  .download-card,
  .fact-box,
  .timeline-content,
  .legal-card,
  .card {
    padding: 26px !important;
  }

  .download-card {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: stretch !important;
    gap: 18px;
  }

  .download-card a {
    width: 100% !important;
    min-width: 0;
    white-space: normal !important;
  }
}