:root {
    --bg: #07080a;
    --surface: #0c0d10;
    --surface-2: #111319;
    --border: rgba(243, 242, 237, 0.1);
    --border-hover: rgba(243, 242, 237, 0.22);
    --text: #f3f2ed;
    --text-2: #989ba4;
    /* was #5f626b, which measured 3.29:1 against --bg and failed WCAG AA
       (4.5:1). Used for eyebrows, dates, spec labels and the footer, which
       are also the smallest type on the site. This measures 5.04:1. */
    --text-3: #7c7f8a;
    --accent: #9377ff;
    --accent-light: #b6a6ff;
    --accent-cyan: #53d7ed;
    --accent-glow: rgba(147, 119, 255, 0.14);
    --radius: 0;
}

/* Keyboard users had no way past the nav into the content. Off-screen until
   focused, then pinned top-left. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 3000;
    padding: .75rem 1.15rem;
    background: var(--text);
    color: var(--bg);
    font: 500 .7rem/1 "DM Mono", monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
}
.skip-link:focus { left: 0; }

body {
    font-family: "Manrope", system-ui, sans-serif;
    background: var(--bg);
    /* Marketing surfaces read as an app rather than a document: no drag
       highlighting, no I-beam, no caret, no iOS long-press callout. This file
       is loaded only by index.html and blog/index.html - the docs use
       docs/doc-template.css and stay selectable so readers can copy commands. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    caret-color: transparent;
    cursor: default;
}

/* Form controls must stay fully usable - the blog search needs a real caret,
   selectable text and an I-beam. */
input,
textarea,
select {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
    caret-color: auto;
    cursor: text;
}

/* Content remains readable if observation is delayed or unavailable. */
.reveal,
.reveal.visible {
    opacity: 1;
    transform: none;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2000;
    opacity: 0.12;
    pointer-events: none;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

.ambient { display: none; }
.grid-overlay {
    opacity: 0.55;
    background-size: 96px 96px;
    mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

nav { height: 76px; }
nav.scrolled { background: rgba(7, 8, 10, 0.84); }
.nav-inner { position: relative; max-width: 1240px; height: 76px; padding: 0 2rem; }
.nav-brand { font-size: 1.1rem; }
/* The contact button used to balance the space-between layout; with it gone
   the links drifted to the right edge, so they are centred on the bar
   itself and taken out of flow. */
.nav-links { position: absolute; left: 50%; transform: translateX(-50%); gap: 1.65rem; padding: 0; border: 0; border-radius: 0; background: transparent; }
.nav-links a {
    padding: 0;
    border-radius: 0;
    color: var(--text-2);
    font: 400 0.65rem/1 "DM Mono", monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); background: transparent; }
.nav-cta {
    min-height: 40px;
    padding: 0.7rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font: 500 0.65rem/1 "DM Mono", monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.nav-cta:hover { color: var(--bg); background: var(--text); border-color: var(--text); box-shadow: none; }

.hero {
    min-height: max(760px, 100svh);
    display: block;
    padding: 0;
    text-align: left;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background-image:
        linear-gradient(rgba(243,242,237,.045) 1px, transparent 1px),
        /* The vertical column rules (tiled every 25%) sat brighter than the
           rest of the hero furniture; halved so they read as structure. */
        linear-gradient(90deg, rgba(243,242,237,.022) 1px, transparent 1px);
    background-size: 100% 100%, 25% 100%;
    background-position: 0 0, 12.5vw 0;
}
.hero::before {
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
    background: linear-gradient(90deg, var(--bg), transparent 35%, transparent 73%, var(--bg));
}
.hero-inner {
    position: relative;
    z-index: 2;
    width: min(100%, 1368px);
    min-height: max(760px, 100svh);
    margin: 0 auto;
    padding: 110px 4rem 70px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(390px, 0.85fr);
    align-items: center;
    gap: 1.5rem;
}
.hero-copy { position: relative; z-index: 3; }
.hero h1 {
    max-width: 790px;
    margin-top: 2rem;
    font-size: clamp(4.5rem, 7.4vw, 7.35rem);
    font-weight: 500;
    line-height: 0.89;
    letter-spacing: -0.077em;
    background: none;
    color: var(--text);
    -webkit-text-fill-color: #f3f2ed;
    opacity: 1;
    animation: none;
}
.hero h1 span {
    display: block;
    color: transparent;
    background: linear-gradient(90deg, #9377ff 0%, #d264de 53%, #53d7ed 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero .tagline {
    max-width: 590px;
    margin: 2.2rem 0 0;
    color: #b6b8be;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.72;
    opacity: 1;
    animation: none;
}
.hero-actions { justify-content: flex-start; margin-top: 2.25rem; opacity: 1; animation: none; }
.btn {
    min-height: 50px;
    padding: 0.9rem 1.3rem;
    border-radius: 0;
    font: 500 0.69rem/1 "DM Mono", monospace;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.btn-primary { color: var(--bg); background: var(--text); border-color: var(--text); }
.btn-primary:hover { color: var(--bg); background: var(--accent-cyan); border-color: var(--accent-cyan); box-shadow: none; }
.btn-ghost { border-color: var(--border); }
.btn-ghost:hover { color: var(--accent); background: transparent; border-color: var(--accent); }
.hero-actions .btn span { margin-left: 1.8rem; font-size: 0.9rem; }
.hero-visual { position: static; align-self: stretch; min-height: 560px; display: grid; place-items: center; }
.orbit-stage {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 0;
    width: 100vw;
    height: 100%;
    pointer-events: none;
    transform: translateX(-50%);
}
#particle-field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    filter: saturate(1.14) contrast(1.08);
}

.divider { display: none; }
section:not(.hero):not(.cta-section) { padding: clamp(6rem, 10vw, 9rem) 0; border-bottom: 1px solid var(--border); }
.container { max-width: 1240px; padding-inline: 2rem; }
.section-header.center { text-align: left; }
.section-header { max-width: 960px; margin: 0 0 4.5rem; }
.section-header::before { display: block; margin-bottom: 1.5rem; color: var(--accent); font: 400 .62rem/1 "DM Mono", monospace; letter-spacing: .14em; }
#mission .section-header::before { content: "02 / MISSION"; }
#approach .section-header::before { content: "03 / FULL-STACK INDEPENDENCE"; }
#products .section-header::before { content: "04 / PRODUCTS + TECHNOLOGY"; }
#team .section-header::before { content: "05 / HUMAN + MACHINE"; }
#news .section-header::before { content: "06 / FIELD NOTES"; }
.section-eyebrow { display: none; }
.section-title {
    font-size: clamp(2.8rem, 5.2vw, 5.1rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.06em;
}
.section-desc { max-width: 650px; margin: 1.7rem 0 0 auto; font-size: 1.05rem; line-height: 1.75; }

.values-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}
.value-item {
    min-height: 275px;
    padding: 1.6rem;
    border: 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: linear-gradient(145deg, rgba(255,255,255,.018), transparent 58%);
}
.value-item:hover { transform: none; border-color: var(--border); background: rgba(147,119,255,.055); box-shadow: none; }
.value-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 3rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--accent-cyan);
}
.value-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.value-item:nth-child(2n) .value-icon { color: var(--accent); }
.value-item:nth-child(3n) .value-icon { color: #b9ef89; }
.value-item h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.03em; }
.value-item p { font-size: .87rem; }

#approach { background: #090a0d; }
.stack-visual { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--border); }
.stack-item {
    min-height: 145px;
    display: grid;
    grid-template-columns: 70px 80px .75fr 1.25fr;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    text-align: left;
    overflow: hidden;
}
.stack-item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(147,119,255,.1), rgba(83,215,237,.03), transparent 72%); transform: translateX(-102%); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.stack-item:hover { transform: none; border-color: var(--border); box-shadow: none; }
.stack-item:hover::before { transform: translateX(0); }
.stack-num { position: static; }
.stack-item .icon { width: 42px; height: 42px; display: grid; place-items: center; margin: 0; border: 1px solid var(--border); border-radius: 50%; color: var(--accent-cyan); font: 400 .7rem/1 "DM Mono", monospace; }
.stack-item h4 { font-size: clamp(1.35rem, 2.4vw, 2.1rem); font-weight: 500; letter-spacing: -.04em; }
.stack-item p { max-width: 520px; font-size: .95rem; }
/* Rows that link out (Ember) keep the row styling but gain a link affordance. */
a.stack-item { color: inherit; text-decoration: none; }
a.stack-item::after {
    content: "\2197";
    position: absolute;
    top: 1.5rem;
    right: 0;
    color: var(--text-3);
    font-size: .85rem;
    transition: color .25s, transform .25s;
}
a.stack-item:hover::after { color: var(--accent); transform: translate(2px, -2px); }
a.stack-item:hover h4 { color: var(--accent-light); }

/* Product and value cards that lead into the docs. Anchors need an explicit
   display, and the arrow marks them apart from their unlinked siblings. */
a.product-card,
a.value-item {
    display: block;
    position: relative;
    color: inherit;
    text-decoration: none;
}
a.product-card::after,
a.value-item::after {
    content: "\2197";
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: var(--text-3);
    font-size: .85rem;
    transition: color .25s, transform .25s;
}
a.product-card:hover::after,
a.value-item:hover::after { color: var(--accent); transform: translate(2px, -2px); }
a.product-card:hover h3,
a.value-item:hover h3 { color: var(--accent-light); }

.products-grid { grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.product-card {
    min-height: 340px;
    padding: 2rem;
    border: 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
}
/* Core keeps the flagship highlight, but not the double-height cell: spanning
   two rows left it ~680px tall for three lines of copy. */
.product-card:first-child { background: radial-gradient(circle at 75% 75%, rgba(147,119,255,.15), transparent 48%), var(--surface); }
.product-card:hover { transform: none; border-color: var(--border); box-shadow: none; background-color: #12141a; }
.product-tag { border-radius: 0; background: transparent; padding: 0; font-family: "DM Mono", monospace; letter-spacing: .14em; }
.product-card h3 { margin-top: 5rem; font-size: clamp(2rem, 3.5vw, 3.8rem); font-weight: 500; letter-spacing: -.055em; }
.product-card p { max-width: 520px; font-size: .92rem; line-height: 1.7; }

.team-row { justify-content: stretch; gap: 0; border-top: 1px solid var(--border); }
.team-member {
    flex: 1;
    min-width: 0;
    text-align: left;
    padding: 2rem 1.25rem;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.team-member:first-child { border-left: 1px solid var(--border); }
.team-avatar { width: 92px; height: 92px; margin: 0 0 3rem; border: 1px solid var(--border); border-radius: 50%; filter: grayscale(1); transition: filter .3s, border-color .3s; }
.team-member:hover .team-avatar { filter: grayscale(0); border-color: var(--accent); }
.team-avatar.ai { display: grid; place-items: center; background: var(--surface); filter: none; }
.team-avatar.ai svg { width: 52px; height: 52px; display: block; }
.team-member h3 { font-size: 1rem; }
.team-member .role { font-family: "DM Mono", monospace; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.team-member > p:last-child { color: var(--text-2); font-size: .78rem; }

.news-grid { gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.news-card { min-height: 440px; border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; background: var(--surface); }
.news-card:hover { transform: none; border-color: var(--border); box-shadow: none; background: #12141a; }
.news-card img { aspect-ratio: 16/9; filter: grayscale(.5) contrast(1.05); transition: filter .3s, transform .5s; }
.news-card:hover img { filter: grayscale(0); transform: scale(1.02); }
.news-body { padding: 1.5rem; }
.news-date { color: var(--accent-cyan); font-family: "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.news-title { font-size: 1.2rem; font-weight: 500; letter-spacing: -.03em; }
.news-more { font-family: "DM Mono", monospace; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }

.cta-section { padding: clamp(5.5rem, 10vw, 9rem) 0; }
.cta-box { padding: 0; border: 0; border-radius: 0; background: transparent; text-align: left; }
.cta-box::before { display: none; }
.cta-box h2 { max-width: 850px; font-size: clamp(3.4rem, 7vw, 7rem); font-weight: 500; line-height: .93; letter-spacing: -.07em; }
.cta-box p { max-width: 550px; margin: 1.7rem 0 0 auto; }
.cta-actions { justify-content: flex-start; margin-top: 2.5rem; }

footer { border-color: var(--border); }
.footer-links a, .footer-copy { font-family: "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 1024px) {
    .hero-inner { grid-template-columns: 1fr .72fr; padding-inline: 2rem; }
    .hero h1 { font-size: clamp(4rem, 8vw, 6.2rem); }
    .orbit-stage { width: 100vw; }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .principle { min-height: 230px; }
    .products-grid { grid-template-columns: 1fr 1fr; }
    .nav-links { gap: 1.1rem; }
}

@media (max-width: 800px) {
    .hero { background-image: none; }
    .nav-inner { padding-inline: 1.25rem; }
    .nav-toggle { display: block; font-size: 0; }
    .nav-toggle::before, .nav-toggle::after { content: ""; display: block; width: 18px; height: 1px; margin: 5px auto; background: currentColor; }
    .nav-links.open { top: 68px; left: 1.25rem; right: 1.25rem; transform: none; gap: 0; padding: .5rem; border-radius: 0; background: rgba(12,13,16,.98); }
    .nav-links.open a { padding: .9rem; }
    .hero-inner { min-height: auto; display: flex; flex-direction: column; align-items: stretch; padding: 105px 1.25rem 5rem; }
    .hero-copy { order: 2; }
    .hero-visual { order: 1; min-height: 410px; margin: -1rem 0 -3.5rem; pointer-events: none; }
    .orbit-stage { width: 100vw; }
    /* Sized so the longest word ("intelligence.") still fits the column when
       the Manrope webfont has not loaded and the wider system-ui fallback is
       used; at 16vw it clipped the final glyph at 390px. */
    .hero h1 { font-size: clamp(2.9rem, 13.4vw, 5rem); }
    section:not(.hero):not(.cta-section) { padding-block: 5rem; }
    .container { padding-inline: 1.25rem; }
    .values-grid { grid-template-columns: 1fr; }
    .value-item { min-height: 220px; }
    .stack-item { grid-template-columns: 45px 45px 1fr; gap: 1rem; }
    .stack-item p { grid-column: 3; }
    .products-grid { grid-template-columns: 1fr; }
    .team-row { flex-direction: column; }
    .team-member { display: grid; grid-template-columns: 90px 1fr; gap: .25rem 1.25rem; width: 100%; border-left: 1px solid var(--border); }
    .team-avatar { grid-row: span 3; margin: 0; }
    .news-grid { grid-template-columns: 1fr; }
    .news-card { min-height: 0; }
}

@media (max-width: 520px) {
    .hero-visual { min-height: 340px; margin-bottom: -1rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; }
    .section-title { font-size: 2.65rem; }
    .stack-item { grid-template-columns: 40px 1fr; }
    .stack-item .icon { display: none; }
    .stack-item p { grid-column: 2; }
    .product-card { min-height: 300px; }
    .product-card:first-child { min-height: 400px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-copy > * { animation: none !important; opacity: 1 !important; }
}