/* Dark theme: black page background, dark-grey alternate sections and subtle primary tints for highlights */
[data-theme="dark"] {
   color-scheme: dark;
   --bg: #000;
   --surface: #161616;
   --surface-2: #1e1e1e;
   --tint: color-mix(in srgb, var(--primary) 12%, #000);
   --ink: #fff;
   --muted: #bdbdbd;
   --line: #333;
   --ptext: color-mix(in srgb, var(--primary) 55%, #fff);
   --sh: 0 18px 44px rgba(0, 0, 0, .75);
   --sh-s: 0 8px 20px rgba(0, 0, 0, .65)
}

[data-theme="dark"] .navbar {
   background: rgba(0, 0, 0, .92)
}

[data-theme="dark"] .logo,
[data-theme="dark"] .footer {
   color: #fff
}

[data-theme="dark"] .footer {
   background: var(--surface)
}

[data-theme="dark"] .footer p,
[data-theme="dark"] .footer-links li,
[data-theme="dark"] .fbar {
   color: rgba(255, 255, 255, .72)
}

[data-theme="dark"] .social a {
   border-color: rgba(255, 255, 255, .25)
}

[data-theme="dark"] .fbar {
   border-color: var(--line)
}

[data-theme="dark"] .stage .b,
[data-theme="dark"] .collage .p,
[data-theme="dark"] .sch .pic {
   border-color: #000
}

[data-theme="dark"] .section.alt {
   background: var(--surface)
}

[data-theme="dark"] .hero {
   background: radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 40%), var(--tint)
}

[data-theme="dark"] .hero2 {
   background: radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 42%), linear-gradient(180deg, var(--tint), var(--bg))
}

[data-theme="dark"] .visit-wrap,
[data-theme="dark"] .founder,
[data-theme="dark"] .callout,
[data-theme="dark"] .vx-finder,
[data-theme="dark"] .vx-res {
   background: var(--tint)
}

[data-theme="dark"] .hero-badge {
   background: var(--surface-2);
   color: #fff
}

[data-theme="dark"] .hero-badge small {
   color: #bbb
}

[data-theme="dark"] .ok {
   background: #0b2a17;
   color: #8be0a8
}

[data-theme="dark"] .ct-cta {
   background: var(--surface-2);
   color: #fff
}

[data-theme="dark"] .ct-cta p {
   color: rgba(255, 255, 255, .74)
}

[data-theme="dark"] .ct-cta .btn-ghost {
   border-color: rgba(255, 255, 255, .45);
   color: #fff
}

[data-theme="dark"] .ct-cta .btn-ghost:hover {
   background: #fff;
   color: #000
}

[data-theme="dark"] .ct-cta-chips span {
   color: rgba(255, 255, 255, .78)
}