/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
    /* Colors — 5 greys, not 10 */
    --bg:          #0a0c10;
    --bg-raised:   #0d0f14;
    --border:      #1e2230;

    --text-primary:   #ffffff;
    --text-secondary: #ffffff;
    --text-tertiary:  #c0c0c0;
    --text-muted:     #a0a0a0;

    --nav-bg: rgba(10, 12, 16, 0.92);

    /* Type scale — 1.25 ratio (Major Third) */
    --text-xs:  0.694rem;   /* 11.1px — nav links */
    --text-sm:  0.833rem;   /* 13.3px — labels, spec rows */
    --text-base: 1rem;      /* 16px   — body text */
    --text-md:  1.125rem;   /* 18px   — subtitles, value prop */
    --text-lg:  1.25rem;    /* 20px   — section headings */
    --text-xl:  1.563rem;   /* 25px   — product page h1 */
    --text-2xl: 2.441rem;   /* 39px   — index hero */

    /* Spacing — 8px base */
    --space-1:  0.25rem;    /* 4px  */
    --space-2:  0.5rem;     /* 8px  */
    --space-3:  0.75rem;    /* 12px */
    --space-4:  1rem;       /* 16px */
    --space-5:  1.5rem;     /* 24px */
    --space-6:  2rem;       /* 32px */
    --space-7:  3rem;       /* 48px */
    --space-8:  4rem;       /* 64px */
    --space-9:  6rem;       /* 96px */

    /* Layout */
    --max-w-narrow: 680px;
    --max-w-wide:   860px;
    --gutter: var(--space-5);

    /* Misc */
    --radius: 2px;
    --transition: 0.2s ease;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background: var(--bg);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
/* Reserve nav height before JS renders it — prevents layout shift */
body::before {
    content: '';
    display: block;
    height: 69px; /* nav height: padding + logo + border */
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border);
}
/* Remove spacer once nav is injected */
body:has(.nav)::before { display: none; }

a {
    color: var(--text-tertiary);
    text-decoration: underline;
    text-decoration-color: #606060;
    text-underline-offset: 3px;
    transition: color var(--transition), text-decoration-color var(--transition);
}
a:hover {
    color: var(--text-primary);
    text-decoration-color: var(--text-primary);
}
/* No underline for nav, CTA, breadcrumbs */
.nav a,
.product-cta a,
.breadcrumb a {
    text-decoration: none;
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--space-4) var(--space-6);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-bottom: 1px solid var(--border);
}
.nav-home {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
    letter-spacing: 0.2em;
    color: var(--text-primary);
    font-weight: 600;
    justify-self: start;
}
.nav-home:hover { color: var(--text-primary); }
.nav-logo {
    height: 80px;
    width: auto;
    filter: invert(1);
    margin: -22px 0;
}
.nav-center {
    display: flex;
    gap: var(--space-8);
    align-items: center;
    justify-self: center;
}
.nav-right {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    justify-self: end;
}
.nav-mobile {
    display: none;
}
.nav-link,
.nav-trigger {
    font-family: inherit;
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 400;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color var(--transition);
}
.nav-link:hover,
.nav-trigger:hover { color: var(--text-primary); }
.nav-link.active,
.nav-trigger.active { color: var(--text-secondary); }
.nav-dropdown {
    position: relative;
}
.nav-panel {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-3));
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3) 0;
    min-width: 140px;
    z-index: 200;
}
.nav-panel.open { display: block; }
.nav-panel a {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 400;
    white-space: nowrap;
}
.nav-panel a:hover { color: var(--text-primary); background: var(--bg); }
.nav-panel a.active { color: var(--text-secondary); }

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.breadcrumb {
    max-width: var(--max-w-narrow);
    margin: var(--space-5) auto 0;
    padding: 0 var(--gutter);
    text-align: center;
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.breadcrumb a { color: var(--text-tertiary); }
.breadcrumb a:hover { color: var(--text-primary); }
.breadcrumb .sep { color: var(--text-tertiary); margin: 0 0.3rem; }

/* ==========================================================================
   Product Hero
   ========================================================================== */
.page-hero-wrap {
    position: relative;
    overflow: hidden;
}
.page-hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
}
.page-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 12, 16, 0.8);
    z-index: -1;
}
.page-hero-wrap .product-hero {
    position: relative;
    z-index: 2;
    margin-top: var(--space-9);
    padding-bottom: var(--space-7);
}
.page-hero-wrap .product-diagram {
    position: relative;
    z-index: 2;
    padding-bottom: var(--space-8);
}
.use-case-bar {
    background: var(--bg-raised);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-top: var(--space-7);
    padding: var(--space-4) var(--gutter);
    text-align: center;
}
.use-case-label {
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: var(--space-3);
}
.use-case-links {
    display: flex;
    justify-content: center;
    gap: var(--space-7);
}
.use-case-links a {
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-primary);
    font-weight: 500;
    text-decoration: none;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--transition);
}
.use-case-links a:hover {
    border-color: #505060;
}
.product-hero {
    max-width: var(--max-w-narrow);
    margin: var(--space-7) auto 0;
    padding: 0 var(--gutter);
    text-align: center;
}
.product-hero h1 {
    font-size: var(--text-xl);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: var(--space-4);
}
.product-hero .subtitle {
    font-size: var(--text-md);
    line-height: 1.7;
    color: var(--text-secondary);
    font-weight: 400;
}

/* ==========================================================================
   Product Diagram
   ========================================================================== */
.product-diagram {
    max-width: var(--max-w-wide);
    margin: var(--space-7) auto 0;
    padding: 0 var(--gutter);
    overflow-x: auto;
}
.product-diagram svg {
    display: block;
    width: 100%;
    min-width: 500px;
    height: auto;
    margin: 0 auto;
}

/* ==========================================================================
   Capability Grid
   ========================================================================== */
.cap-grid {
    max-width: var(--max-w-wide);
    margin: var(--space-8) auto 0;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7) var(--space-8);
}
.section-heading + .cap-grid { margin-top: 0; }
.cap {
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.cap h3 {
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: var(--space-2);
}
.cap p {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--text-secondary);
    font-weight: 400;
}

/* ==========================================================================
   Section Alternation
   ========================================================================== */
.section-subtle {
    background: var(--bg-raised);
    padding: var(--space-8) 0;
    margin-top: var(--space-8);
}

/* ==========================================================================
   Specs Table
   ========================================================================== */
.specs {
    max-width: var(--max-w-narrow);
    margin: var(--space-8) auto 0;
    padding: 0 var(--gutter);
}
.section-subtle > .specs { margin-top: 0; }
.specs h2 {
    font-size: var(--text-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-primary);
    font-weight: 500;
    text-align: center;
    margin-bottom: var(--space-6);
}
.spec-row {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: var(--space-5);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
}
.spec-row:last-child { border-bottom: none; }
.spec-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 400;
}
.spec-value {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: 400;
}

/* ==========================================================================
   Narrative
   ========================================================================== */
.narrative {
    max-width: var(--max-w-narrow);
    margin: var(--space-8) auto 0;
    padding: 0 var(--gutter);
}
.narrative h2 {
    font-size: var(--text-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-primary);
    font-weight: 500;
    text-align: center;
    margin-bottom: var(--space-6);
}
.narrative p {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--text-secondary);
    font-weight: 400;
    margin-bottom: var(--space-5);
}
.narrative p:last-child { margin-bottom: 0; }
.narrative .highlight { color: var(--text-primary); }
.narrative .scenario-context {
    color: var(--text-tertiary);
    font-style: italic;
    border-left: 2px solid var(--border);
    padding-left: var(--space-4);
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   CTA
   ========================================================================== */
.product-cta {
    text-align: center;
    padding: var(--space-8) var(--gutter) var(--space-9);
}
.product-cta .label {
    font-size: var(--text-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}
.product-cta a {
    font-size: var(--text-base);
    letter-spacing: 0.03em;
}

.section-subtle > .narrative { margin-top: 0; }
.section-subtle.first { margin-top: var(--space-7); }
.hero-wrap .architecture {
    position: relative;
    z-index: 2;
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}
.hero-wrap + .section-subtle { margin-top: 0; }
.specs.spaced { padding-top: var(--space-7); }
.section-subtle > .specs + .narrative { margin-top: var(--space-7); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    border-top: 1px solid var(--border);
    margin-top: var(--space-8);
    padding: var(--space-8) var(--gutter) var(--space-5);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.footer-inner {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-7);
}
.footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.footer-heading {
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-bottom: var(--space-2);
}
.footer-col a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color var(--transition);
}
.footer-col a:hover {
    color: var(--text-primary);
}
.footer-bottom {
    max-width: var(--max-w-wide);
    margin: var(--space-7) auto 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

/* ==========================================================================
   Index Page
   ========================================================================== */
.hero-wrap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: -1;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 12, 16, 0.8);
    z-index: -1;
}
.hero {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    padding: var(--space-9) var(--gutter) var(--space-8);
}
.hero-logo {
    display: block;
    width: min(280px, 60vw);
    height: auto;
    margin: 0 auto var(--space-7);
}
.hero-headline {
    font-size: var(--text-2xl);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.25;
}
.hero-tagline {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 400;
}
.hero-sub {
    margin: var(--space-5) auto 0;
    max-width: 620px;
    font-size: var(--text-md);
    line-height: 1.75;
    color: var(--text-secondary);
    font-weight: 400;
}
.hero-audience {
    margin-top: var(--space-5);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--text-tertiary);
    font-weight: 400;
}
.hero-label {
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.capabilities {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7) var(--space-8);
}
a.capability {
    text-decoration: none;
    display: block;
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--transition);
}
a.capability:hover { border-color: #404050; }
.capability h3 {
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: var(--space-2);
}
.capability p {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--text-secondary);
    font-weight: 400;
}

.architecture {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 0 var(--gutter);
    text-align: center;
    overflow-x: auto;
}
.architecture h2,
.section-heading {
    font-size: var(--text-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    margin-top: var(--space-8);
    margin-bottom: var(--space-6);
}
.diagram {
    display: block;
    width: 100%;
    min-width: 500px;
    margin: 0 auto;
}

.differentiators {
    max-width: var(--max-w-narrow);
    margin: 0 auto;
    padding: 0 var(--gutter);
    text-align: center;
}
.differentiator {
    margin-bottom: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.differentiator:last-child { margin-bottom: 0; }
.differentiator .label {
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
}
.differentiator .desc {
    font-size: var(--text-base);
    color: var(--text-secondary);
    font-weight: 400;
    margin-top: var(--space-1);
    line-height: 1.7;
}

.why-now {
    max-width: var(--max-w-narrow);
    margin: 0 auto;
    padding: var(--space-7) var(--gutter) var(--space-5);
    text-align: center;
}
.why-now-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
}
.why-now p, .why-now-card p {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--text-secondary);
    font-weight: 400;
    margin-bottom: var(--space-4);
}
.why-now p:last-child, .why-now-card p:last-child { margin-bottom: 0; }

.team {
    max-width: var(--max-w-narrow);
    margin: 0 auto;
    padding: var(--space-8) var(--gutter);
    text-align: center;
}
.team p {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--text-secondary);
    font-weight: 400;
}

.cta {
    text-align: center;
    padding: 0 var(--gutter) var(--space-9);
}
.cta .label {
    font-size: var(--text-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}
.cta a {
    font-size: var(--text-md);
    letter-spacing: 0.03em;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Hamburger button — hidden on desktop */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    margin-left: auto;
}
.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-secondary);
    margin: 4px 0;
    transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 768px) {
    :root {
        --text-2xl: 1.8rem;
        --text-xl: 1.3rem;
        --space-8: 3rem;
        --space-9: 4rem;
    }
    .cap-grid, .capabilities {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .spec-row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
    .nav {
        flex-wrap: wrap;
    }
    .nav-toggle {
        display: block;
    }
    .nav-center,
    .nav-right {
        display: none;
    }
    .nav-mobile {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: var(--space-3) 0 var(--space-1);
    }
    .nav-mobile.open {
        display: flex;
    }
    .nav-mobile .nav-link,
    .nav-mobile .nav-trigger {
        padding: var(--space-2) 0;
    }
    .nav-dropdown {
        width: 100%;
    }
    .nav-panel {
        position: static;
        transform: none;
        border: none;
        background: none;
        padding: 0 0 0 var(--space-4);
        min-width: 0;
    }
    .nav-panel a {
        padding: var(--space-2) 0;
    }
    .footer-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}

@media (max-width: 480px) {
    :root {
        --text-2xl: 1.5rem;
        --text-xl: 1.15rem;
        --gutter: var(--space-4);
    }
}