/* Dark field from competepos.netlify.app — glass.png under a navy veil. */

html.void,
html.void body {
  background: #152033;
  color: #e8eef6;
  color-scheme: dark;
}

.void-mesh,
.fx-glass,
.fx-grid,
.void-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.fx-glass {
  inset: -18%;
  z-index: 0;
  background: url("../assets/glass.png") center / cover no-repeat;
  filter: blur(48px) saturate(1.15);
  opacity: 0.55;
}

.void-mesh {
  z-index: 1;
  background: rgba(15, 23, 42, 0.72);
}

.fx-grid {
  z-index: 1;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(125, 211, 252, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.16) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 8%, transparent 72%);
}

.void-grain {
  z-index: 1;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

html.void .draft-banner,
html.void .site-header,
html.void main,
html.void .site-footer {
  position: relative;
  z-index: 2;
}

html.void .draft-banner {
  background: #05070c;
  color: #94a3b8;
}

html.void .site-header {
  background: rgba(15, 23, 42, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(125, 211, 252, 0.16);
}

html.void .site-footer {
  background: rgba(5, 7, 12, 0.88);
}

html.void #top,
html.void #speed,
html.void #features,
html.void #catalogs,
html.void #yard,
html.void #system,
html.void #about,
html.void #pricing,
html.void #customers,
html.void #demo {
  background: transparent !important;
  color: #e8eef6;
}

html.void main :is(h1, h2, h3, p, li, label, figcaption, address, strong) {
  color: #e8eef6 !important;
}

html.void main :is(h1, h2) {
  color: #ffffff !important;
}

html.void main a {
  color: #bfdbfe;
}

html.void main a:hover,
html.void main a:focus-visible {
  color: #ffffff;
}

html.void #speed .speed-band,
html.void #features article,
html.void #system .scales li,
html.void #system .card,
html.void #pricing .pricing-card,
html.void #customers .card,
html.void #demo .demo-card,
html.void #about .about-people li,
html.void #catalogs .catalogs-houses li,
html.void #top .chips li {
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px solid rgba(125, 211, 252, 0.18) !important;
  color: #e8eef6;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

html.void .brand {
  background: transparent;
  padding: 0;
}

html.void #top .card {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  min-height: 0;
  padding: 0;
}

html.void #top .kicker,
html.void #speed .speed-kicker,
html.void #pricing .pricing-label,
html.void #system .range {
  color: #7dd3fc !important;
}

html.void #top .secondary {
  background: transparent !important;
  color: #e8eef6 !important;
  border-color: rgba(125, 211, 252, 0.35) !important;
}

html.void #top .primary,
html.void #pricing .pricing-demo,
html.void #demo button,
html.void .nav-demo {
  color: #ffffff !important;
}

html.void #speed .speed-track {
  background: rgba(15, 23, 42, 0.85) !important;
}

html.void #features .features-soon {
  background: rgba(15, 23, 42, 0.9) !important;
  color: #94a3b8 !important;
}

html.void #demo input,
html.void #demo select,
html.void #demo textarea {
  background: rgba(5, 7, 12, 0.85) !important;
  color: #f8fafc !important;
  border-color: rgba(125, 211, 252, 0.28) !important;
}

html.void #demo option {
  background: #0f172a;
  color: #f8fafc;
}

/* Section CSS still paints spans and some links in navy. Those disappear on the dark field. */
html.void main :is(span, small, em, time) {
  color: #e8eef6 !important;
}

html.void main a {
  color: #bfdbfe !important;
}

html.void main a:hover,
html.void main a:focus-visible,
html.void #top .secondary:hover {
  color: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
  .fx-glass {
    inset: 0;
    filter: blur(40px) saturate(1.1);
  }

  .fx-grid {
    display: none;
  }
}

html.void .page-stop a {
  color: #7dd3fc !important;
}