/* One continuous animated surface behind the navigation and hero. */
nav[aria-label="Primary navigation"] {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
    transition: background-color .2s, border-color .2s;
}
nav[aria-label="Primary navigation"].is-scrolled,
nav[aria-label="Primary navigation"]:has(.nav-links.is-open) {
    background: #0a0a0b;
    border-bottom-color: var(--border);
}
nav .nav-links a { color: #d6dfed; }
nav .nav-links a:hover { color: #fff; }
.hero {
    min-height: min(820px, 100svh);
    padding: 140px 0 88px;
    overflow: hidden;
    isolation: isolate;
    background: #0a0a0b;
}
.hero > .container { position: relative; z-index: 2; }
.hero h1 { line-height: 1.1; text-wrap: balance; letter-spacing: -0.045em; }
.hero p { line-height: 1.65; text-wrap: pretty; color: #bdc7d6; }
.hero .badge { color: #a4cbff; background: rgba(10,10,11,.35); }
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 55% 58% at 50% 43%, rgba(10,10,11,.55), transparent),
        linear-gradient(transparent 72%, #0a0a0b);
}
.hero-ambient {
    position: absolute;
    inset: 0;
    display: flex;
    pointer-events: none;
    user-select: none;
    background: linear-gradient(#214d8f, #0a0a0b 90%);
}
.hero-stream {
    flex: 1;
    height: 100%;
    --wave-color: #214d8f;
    background: linear-gradient(to bottom, var(--wave-color) 0%,
        var(--wave-color) var(--fade-start, 25%), #0a0a0b var(--fade-end, 75%));
}
.hero-stream:nth-of-type(3n) { --wave-color: #195366; }
.latency-compare {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 660px;
    margin: 52px auto 0;
}
.latency-value { font-size: clamp(1.375rem, 3vw, 2.75rem); line-height: 1.3; }
.latency-label { font-size: .9375rem; margin-top: 10px; }
.latency-desc { font-size: .8125rem; opacity: 1; color: #8997aa; }
.section-header h2 { line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.section-header p { text-wrap: pretty; }
.architecture-figure figcaption { text-align: center; }
.feature-icon { color: #75a9f8; border: 1px solid rgba(96,165,250,.12); }
.feature-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero[data-motion="offscreen"] .badge::before,
.hero[data-motion="static"] .badge::before { animation-play-state: paused; }
@media (max-width: 768px) {
    .hero { min-height: auto; padding: 112px 0 86px; }
    .hero h1 { font-size: clamp(1.875rem, 8.5vw, 2.75rem); line-height: 1.15; }
    .hero p { font-size: 1.0625rem; }
    .latency-compare { gap: 12px; margin-top: 40px; }
    .latency-value { font-size: clamp(1.125rem, 5.4vw, 1.625rem); }
    .latency-label { font-size: .75rem; }
    .latency-desc { font-size: .6875rem; }
    .section { padding-top: 72px; padding-bottom: 72px; }
    .section-header { margin-bottom: 36px; }
    .section-header h2 { font-size: 1.875rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .hero-stream, .badge::before { animation: none !important; }
    .feature-card { transition: none; }
    .feature-card:hover { transform: none; }
}