/* ============================================================================
   Dicentra Protocol — landing page styles

   1  Design tokens          11  Problem
   2  Reset / base           12  Protocol
   3  Typography             13  How it works
   4  Global layout          14  Architecture
   5  Placeholders           15  Network
   6  Buttons                16  Advantages
   7  Boot sequence          17  Ecosystem
   8  Stage (WebGL)          18  Developers
   9  Navigation             19  Final CTA / footer
   10 Hero                   20  Responsive + reduced motion

   Every colour below was sampled from assets/logo.png rather than chosen by eye.
   ========================================================================= */

/* == 1. Design tokens ==================================================== */

:root {
    /* Environment — black is the dominant colour and stays that way. */
    --black: #000;
    --bg: #030303;
    --surface: #0a0a0a;
    --surface-2: #101012;
    --graphite: #17171a;
    --gunmetal: #242427;

    /* Metallic foreground, from the neutral luma percentiles of the logo. */
    --metal-dark: #3a3a3e;
    --metal-mid: #808080;
    --metal-light: #dedede;
    --metal-hi: #fafafa;
    --chrome-spec: #fff;

    /* Signal red, from the median of the logo's red pixels. */
    --red: #e80e15;
    --red-hi: #fa2434;
    --red-spec: #ff5b69;
    --crimson: #ba0f0f;
    --red-deep: #640504;

    --text: #f2f2f3;
    --text-2: #a9a9ad;
    --text-3: #6d6d73;

    --hair: rgba(255, 255, 255, .09);
    --hair-strong: rgba(255, 255, 255, .17);

    /* The logo's chrome is hard-banded, not a smooth gradient. These stops
       reproduce that horizon banding. The dark band stays narrow and the
       overall value stays high, so display type reads as bright metal against
       black rather than as mid-grey. */
    --chrome: linear-gradient(178deg,
            #fbfbfc 0%, #fff 26%, #c8c8ce 40%, #8a8a92 47%, #4e4e56 50.5%,
            #cdcdd4 55%, #fff 70%, #ededf1 84%, #b4b4bc 94%, #e2e2e8 100%);
    --chrome-line: linear-gradient(90deg,
            transparent, rgba(255, 255, 255, .06) 12%, rgba(255, 255, 255, .34) 50%,
            rgba(255, 255, 255, .06) 88%, transparent);

    --font-display: 'Archivo Var', 'Archivo', system-ui, sans-serif;
    --font-body: 'Inter Var', 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Consolas', monospace;

    --gutter: clamp(1.25rem, 4vw, 4.5rem);
    --maxw: 76rem;

    /* Mechanical easing. Nothing here overshoots or bounces. */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-lock: cubic-bezier(.16, .84, .3, 1);
    --beat-scale: 1;
}

@font-face {
    font-family: 'Archivo Var';
    src: url('fonts/archivo-latin-var.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Var';
    src: url('fonts/inter-latin-var.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}

/* == 2. Reset / base ===================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    background: var(--black);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--black);
    color: var(--text);
    font-family: var(--font-body);
    font-optical-sizing: auto;
    font-size: clamp(.95rem, .35vw + .86rem, 1.05rem);
    line-height: 1.65;
    /* `clip` rather than `hidden`: hidden turns body into a scroll container,
       which silently breaks `position: sticky` on the scenes. */
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

body.is-booting { overflow: hidden; }
body.is-menu-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }

a { color: inherit; text-decoration: none; }

:focus-visible {
    outline: 2px solid var(--red-hi);
    outline-offset: 3px;
}

.sr {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.skip {
    position: fixed; top: .75rem; left: .75rem; z-index: 200;
    padding: .7rem 1.1rem; transform: translateY(-160%);
    background: var(--surface); border: 1px solid var(--red);
    font: 600 .75rem/1 var(--font-display);
    text-transform: uppercase; letter-spacing: .12em;
    transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

/* == 3. Typography ======================================================= */

.h1, .h2, .h3 {
    margin: 0;
    font-family: var(--font-display);
    font-stretch: 112%;
    font-weight: 700;
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: -.005em;
}

.h1 { font-size: clamp(2.2rem, 5.4vw, 4.8rem); }
.h2 { font-size: clamp(1.9rem, 4.4vw, 3.6rem); }

.eyebrow {
    display: flex; align-items: center; gap: .8rem;
    margin-bottom: 1.4rem;
    font-family: var(--font-display);
    font-size: .72rem; font-weight: 600; font-stretch: 118%;
    text-transform: uppercase; letter-spacing: .3em;
    color: var(--text-3);
}
.eyebrow em {
    font-style: normal; color: var(--red);
    padding-right: .8rem;
    border-right: 1px solid var(--hair-strong);
}

.lede {
    max-width: 34ch;
    margin-top: 1.5rem;
    font-size: clamp(1.02rem, .6vw + .9rem, 1.28rem);
    line-height: 1.55;
    color: var(--text-2);
}
.lede--center { margin-inline: auto; max-width: 46ch; text-align: center; }

.body { max-width: 42ch; margin-top: 1.1rem; color: var(--text-3); }
.body--tight { max-width: 34ch; font-size: .92rem; }

.micro {
    margin-top: 1.4rem;
    font-family: var(--font-mono);
    font-size: .68rem; line-height: 1.6;
    letter-spacing: .04em;
    color: var(--text-3);
}
.micro--center { margin-inline: auto; max-width: 56ch; text-align: center; }
.micro--warn { color: var(--red-hi); }

/* Chrome text. Used sparingly — cinematic moments only, never body copy. */
.chrome {
    background: var(--chrome);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@supports not (background-clip: text) {
    .chrome { color: var(--metal-light); }
}

.statement { position: relative; }

/* == 4. Global layout ==================================================== */

/* Each scene is a tall scroll track with a sticky viewport-height stage.
   Sticky rather than a JS pin: no pin-spacers, no refresh jumps. */
.scene {
    position: relative;
    height: calc(var(--beats, 1) * 100svh * var(--beat-scale));
}

.scene__inner {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.wrap--wide { max-width: 88rem; }
.wrap--center { text-align: center; }

.wrap--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}
.wrap--top { align-items: start; }

/* Copy sits over a live WebGL scene, so it gets its own soft falloff for
   contrast instead of a glass card. */
.col { position: relative; }
.col::before {
    content: '';
    position: absolute;
    inset: -16% -20%;
    z-index: -1;
    background: radial-gradient(66% 58% at 50% 50%, rgba(0, 0, 0, .88), rgba(0, 0, 0, .5) 62%, transparent 78%);
    pointer-events: none;
}
.wrap--center::before {
    content: '';
    position: absolute;
    inset: -18% -10%;
    z-index: -1;
    background: radial-gradient(60% 52% at 50% 50%, rgba(0, 0, 0, .92), rgba(0, 0, 0, .58) 58%, transparent 80%);
    pointer-events: none;
}
.wrap--center { position: relative; }

/* == 5. Placeholders ===================================================== */

/* Deliberately conspicuous: nothing unverified should reach production unnoticed.
   The type properties are all reset rather than inherited, so a placeholder
   dropped inside a heading still renders as a small annotation instead of
   shouting in display type. */
.ph {
    display: inline;
    padding: .1em .45em;
    border-left: 2px solid var(--crimson);
    background: rgba(186, 15, 15, .07);
    font-family: var(--font-mono);
    font-size: .82em;
    font-weight: 400;
    font-stretch: 100%;
    text-transform: none;
    letter-spacing: .01em;
    line-height: 1.6;
    color: #e5a3a5;
}
.ph--data { border-left-color: var(--metal-mid); background: rgba(255, 255, 255, .04); color: var(--text-2); }

.is-unavailable { cursor: not-allowed; opacity: .72; }
.is-unavailable em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--crimson);
}

/* == 6. Buttons ========================================================== */

.btn {
    position: relative;
    display: inline-flex; align-items: center; gap: .7rem;
    padding: 1rem 1.7rem;
    font-family: var(--font-display);
    font-size: .76rem; font-weight: 700; font-stretch: 116%;
    text-transform: uppercase; letter-spacing: .16em;
    white-space: nowrap;
    isolation: isolate;
    /* Engineered notch rather than a generic pill. */
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
    transition: color .3s var(--ease), background-color .3s var(--ease);
}
.btn > span { position: relative; z-index: 2; }

/* Metallic light sweep. */
.btn::after {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(104deg, transparent 42%, rgba(255, 255, 255, .26) 50%, transparent 58%);
    transform: translateX(-130%);
    transition: transform .62s var(--ease);
    pointer-events: none;
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(130%); }

.btn--primary {
    background: linear-gradient(180deg, #2a0508, #140203);
    box-shadow: inset 0 0 0 1px var(--red), inset 0 1px 0 rgba(255, 91, 105, .4), 0 0 0 rgba(232, 14, 21, 0);
    color: #fff;
}
.btn--primary:hover, .btn--primary:focus-visible {
    background: linear-gradient(180deg, #3d070c, #1c0304);
    box-shadow: inset 0 0 0 1px var(--red-hi), inset 0 1px 0 rgba(255, 91, 105, .55), 0 0 26px -6px rgba(232, 14, 21, .6);
}

.btn--ghost {
    box-shadow: inset 0 0 0 1px var(--hair-strong);
    color: var(--text-2);
}
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--text); box-shadow: inset 0 0 0 1px var(--metal-mid); }
.btn--ghost.is-unavailable:hover { color: var(--text-2); box-shadow: inset 0 0 0 1px var(--hair-strong); }

.btn--ghost em { margin-left: .1rem; }

/* == 7. Boot sequence ==================================================== */

.boot {
    position: fixed; inset: 0; z-index: 150;
    display: grid; place-items: center;
    background: var(--black);
    transition: opacity .7s var(--ease), visibility .7s;
}
.boot.is-done { opacity: 0; visibility: hidden; }

.boot__frame { display: grid; place-items: center; gap: 1.8rem; }
.boot__core { position: relative; line-height: 0; }
.boot__ring { width: clamp(124px, 22vw, 196px); height: auto; overflow: visible; }

/* The brand mark sits inside the assembling ring, at the centre the ring and
   the red trace share. Sized against the blade ring, not the viewBox. */
.boot__mark {
    position: absolute;
    left: 50%; top: 50%;
    width: 28%; height: auto;
    transform: translate(-50%, -50%);
    animation: mark-wake 2.4s var(--ease) .9s infinite alternate;
}
@keyframes mark-wake {
    from { opacity: .78; filter: drop-shadow(0 0 2px rgba(232, 14, 21, .25)); }
    to   { opacity: 1; filter: drop-shadow(0 0 11px rgba(232, 14, 21, .6)); }
}

.boot__seg {
    fill: none;
    stroke: var(--metal-mid);
    stroke-width: 7;
    stroke-linecap: butt;
    opacity: 0;
    /* No transform-box or transform-origin here: each segment carries a
       rotate(deg 100 100) attribute, and overriding the origin would move the
       ring off the viewBox centre. */
    animation: seg-lock .5s var(--ease-lock) forwards;
    animation-delay: calc(var(--i) * 62ms);
}
@keyframes seg-lock {
    from { opacity: 0; stroke: var(--metal-dark); stroke-width: 3; }
    to   { opacity: 1; stroke: var(--metal-light); stroke-width: 7; }
}

/* Dash lengths are in user units, so they track the r=76 circumference (478). */
.boot__trace {
    fill: none;
    stroke: var(--red);
    stroke-width: 2.3;
    stroke-dasharray: 48 430;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(232, 14, 21, .85));
    animation: trace 1.5s linear .7s infinite;
    opacity: 0;
}
@keyframes trace {
    0%   { stroke-dashoffset: 478; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

.boot__label {
    display: flex; align-items: baseline; gap: .55rem;
    font-family: var(--font-mono);
    font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--text-3);
}
.boot__pct { color: var(--metal-light); font-variant-numeric: tabular-nums; }
.boot__unit { color: var(--red); margin-left: -.4rem; }

/* == 8. Stage (WebGL) ==================================================== */

.stage {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
    background: var(--black);
}
.stage__canvas { display: block; width: 100%; height: 100%; }

/* Shown when WebGL is unavailable. Still unmistakably Dicentra: a chrome
   horizon band over a crimson core, built entirely in CSS. */
.stage__fallback {
    position: absolute; inset: 0;
    display: none;
    background:
        radial-gradient(38% 30% at 50% 46%, rgba(232, 14, 21, .2), transparent 70%),
        radial-gradient(70% 54% at 50% 52%, rgba(100, 5, 4, .5), transparent 76%),
        conic-gradient(from 210deg at 50% 46%,
            transparent 0deg, rgba(255, 255, 255, .07) 34deg, transparent 66deg,
            transparent 180deg, rgba(255, 255, 255, .05) 214deg, transparent 250deg),
        var(--black);
}
.stage__fallback::after {
    content: '';
    position: absolute;
    left: 50%; top: 46%;
    width: min(46vw, 46vh); aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: inset 0 0 60px -20px rgba(255, 255, 255, .18), 0 0 90px -40px rgba(232, 14, 21, .55);
}
.no-webgl .stage__fallback { display: block; }

/* Without a scene to travel through, the long scroll tracks are dead space. */
html.no-webgl { --beat-scale: .5; }

/* Film grain, breaking up gradient banding on large dark areas. */
.stage__grain {
    position: absolute; inset: 0;
    opacity: .04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

main { position: relative; z-index: 1; }

/* == 9. Navigation ======================================================= */

.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.6rem);
    padding: 1.1rem var(--gutter);
    transition: background-color .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s var(--ease);
    border-bottom: 1px solid transparent;
}
.nav.is-solid {
    background: rgba(3, 3, 3, .74);
    backdrop-filter: blur(14px) saturate(120%);
    border-bottom-color: var(--hair);
}

.nav__brand { flex: none; }
.nav__brand img { width: auto; height: 40px; }

.nav__links {
    display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem);
    margin-left: auto;
    font-family: var(--font-display);
    font-size: .74rem; font-weight: 600; font-stretch: 112%;
    text-transform: uppercase; letter-spacing: .16em;
}
.nav__links a { position: relative; padding: .45rem 0; color: var(--text-2); transition: color .28s var(--ease); }
.nav__links a::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--red);
    transform: scaleX(0); transform-origin: left;
    transition: transform .38s var(--ease);
}
.nav__links a:hover, .nav__links a.is-current { color: var(--text); }
.nav__links a:hover::after, .nav__links a.is-current::after { transform: scaleX(1); }

.nav__unavailable {
    display: inline-flex; align-items: baseline; gap: .4rem;
    color: var(--text-3); cursor: not-allowed;
}
.nav__unavailable em {
    font-family: var(--font-mono); font-style: normal;
    font-size: .55rem; letter-spacing: .1em; color: var(--crimson);
}

.nav__cta { padding: .78rem 1.25rem; font-size: .7rem; }
.nav__toggle { display: none; }

/* Mobile menu */
.menu {
    position: fixed; inset: 0; z-index: 99;
    display: flex; flex-direction: column; justify-content: center;
    gap: 2rem; padding: 0 var(--gutter);
    background: rgba(3, 3, 3, .96);
    backdrop-filter: blur(18px);
    opacity: 0; visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__links { display: grid; gap: .3rem; }
.menu__links a {
    display: flex; align-items: baseline; gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--hair);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 8vw, 2.4rem); font-weight: 700; font-stretch: 112%;
    text-transform: uppercase;
    opacity: 0; transform: translateY(14px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
    transition-delay: calc(var(--i) * 45ms);
}
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu__links em {
    font-size: .62rem; font-style: normal; letter-spacing: .18em;
    color: var(--red); font-family: var(--font-mono);
}
.menu__note { font-family: var(--font-mono); font-size: .7rem; color: var(--text-3); }

/* Scroll readout */
.progress {
    position: fixed; right: var(--gutter); bottom: clamp(1.5rem, 5vh, 3rem); z-index: 90;
    display: flex; align-items: center; gap: .7rem;
    opacity: 0; transition: opacity .5s var(--ease);
}
.progress.is-visible { opacity: 1; }
.progress__label {
    font-family: var(--font-mono); font-size: .66rem;
    letter-spacing: .16em; color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.progress__track {
    position: relative; display: block;
    width: clamp(48px, 8vw, 92px); height: 1px;
    background: var(--hair-strong);
}
.progress__fill {
    position: absolute; inset: 0 auto 0 0; width: 0;
    background: var(--red);
    box-shadow: 0 0 8px rgba(232, 14, 21, .9);
}

/* Custom cursor — desktop pointer devices only, enabled from JS. */
.cursor {
    position: fixed; top: 0; left: 0; z-index: 120;
    width: 30px; height: 30px; margin: -15px 0 0 -15px;
    opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease);
}
.cursor.is-on { opacity: 1; }
.cursor__ring {
    display: block; width: 100%; height: 100%;
    border: 1px solid var(--metal-mid);
    border-radius: 50%;
    transition: transform .26s var(--ease), border-color .26s var(--ease), background-color .26s var(--ease);
}
.cursor.is-active .cursor__ring {
    transform: scale(1.55);
    border-color: var(--red);
    background: rgba(232, 14, 21, .12);
}

/* == 10. Hero ============================================================ */

.hero { position: relative; text-align: center; }

/* Falls off to black above and below the core band, keeping the type readable
   over live geometry without resorting to a card. */
.hero::before {
    content: '';
    position: absolute;
    inset: -20% -12%;
    z-index: -1;
    background:
        radial-gradient(58% 30% at 50% 26%, rgba(0, 0, 0, .9), transparent 76%),
        radial-gradient(52% 26% at 50% 76%, rgba(0, 0, 0, .86), transparent 76%);
    pointer-events: none;
}

.hero__title { margin: 0; display: grid; gap: 1.4rem; justify-items: center; }

.hero__void { height: clamp(6rem, 17vh, 11.5rem); }

.hero__eyebrow {
    display: inline-flex; align-items: center; gap: .7rem;
    font-family: var(--font-display);
    font-size: .74rem; font-weight: 600; font-stretch: 118%;
    text-transform: uppercase; letter-spacing: .34em;
    color: var(--text-2);
}
.hero__eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 10px rgba(232, 14, 21, .9);
    animation: pulse 2.8s var(--ease) infinite;
}
@keyframes pulse {
    0%, 100% { opacity: .35; transform: scale(.8); }
    50%      { opacity: 1; transform: scale(1); }
}

/* Sized to hold all three words on one line at desktop widths; wraps to three
   lines on narrow screens. */
.hero__words {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0 clamp(.5rem, 1.6vw, 1.3rem);
    font-family: var(--font-display);
    /* The cap keeps all three words on one line: the wrap stops growing at
       --maxw, so the type must stop with it. */
    font-size: clamp(2.5rem, 7.2vw, 5.7rem);
    font-weight: 800; font-stretch: 116%;
    text-transform: uppercase;
    line-height: .94;
    letter-spacing: -.015em;
}
.hero__word {
    background: var(--chrome);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero__word b {
    -webkit-text-fill-color: var(--red);
    color: var(--red);
    font-weight: inherit;
}

.hero__sub { max-width: 44ch; margin: 0 auto; color: var(--text-2); }

.hero__actions {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem;
    margin-top: 2rem;
}

.hero__cue {
    display: inline-flex; align-items: center; gap: .7rem;
    margin-top: clamp(2.5rem, 7vh, 5rem);
    font-family: var(--font-mono);
    font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--text-3);
}
.hero__cue i {
    width: 1px; height: 26px;
    background: linear-gradient(180deg, var(--red), transparent);
    animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
    0%, 100% { transform: scaleY(.4); opacity: .4; transform-origin: top; }
    50%      { transform: scaleY(1); opacity: 1; transform-origin: top; }
}

/* == 11. Problem ========================================================= */

.telemetry { display: grid; gap: .1rem; max-width: 22rem; }
.telemetry li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline; gap: .5rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--hair);
}
.telemetry span {
    font-family: var(--font-display);
    font-size: .7rem; font-weight: 600; font-stretch: 114%;
    text-transform: uppercase; letter-spacing: .18em;
    color: var(--text-3);
}
.telemetry b {
    font-family: var(--font-mono);
    font-size: 1.5rem; font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--metal-light);
    transition: color .4s var(--ease);
}
.telemetry i { font-style: normal; font-family: var(--font-mono); font-size: .7rem; color: var(--text-3); }
.telemetry li[data-warn="true"] b { color: var(--red-hi); }

/* == 12. Protocol ======================================================== */

.pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: clamp(1.2rem, 3vw, 2.4rem);
    max-width: 58rem;
    margin: clamp(2.4rem, 6vh, 3.6rem) auto 0;
    text-align: left;
}
.pillars li {
    padding-top: 1.1rem;
    border-top: 1px solid var(--hair-strong);
}
.pillars b {
    display: block; margin-bottom: .6rem;
    font-family: var(--font-display);
    font-size: .82rem; font-weight: 700; font-stretch: 116%;
    text-transform: uppercase; letter-spacing: .22em;
    color: var(--red);
}
.pillars span { font-size: .88rem; color: var(--text-3); }

/* == 13. How it works ==================================================== */

/* Stacked panels: only the stage matching the camera's position is shown. */
.steps { position: relative; display: grid; }

.step {
    grid-area: 1 / 1;
    align-self: center;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
    pointer-events: none;
}
.step[data-active="true"] { opacity: 1; transform: none; pointer-events: auto; }

.step__index {
    font-family: var(--font-mono);
    font-size: .7rem; letter-spacing: .2em;
    color: var(--red);
    margin-bottom: .7rem;
}
.step__name {
    margin: 0 0 .8rem;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    font-weight: 700; font-stretch: 112%;
    text-transform: uppercase; line-height: 1;
}
.step__desc { max-width: 32ch; font-size: .92rem; color: var(--text-3); }

/* == 14. Architecture ==================================================== */

.layers { display: grid; gap: .1rem; }

.layer {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.1rem;
    width: 100%;
    padding: 1.1rem 0;
    text-align: left;
    border-top: 1px solid var(--hair);
    cursor: pointer;
    transition: opacity .35s var(--ease);
}
.layers li:last-child .layer { border-bottom: 1px solid var(--hair); }

.layer__index {
    font-family: var(--font-mono);
    font-size: .72rem; letter-spacing: .16em;
    color: var(--text-3);
    padding-top: .2rem;
    transition: color .3s var(--ease);
}
.layer__name {
    display: block;
    font-family: var(--font-display);
    font-size: 1.02rem; font-weight: 600; font-stretch: 112%;
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--text-2);
    transition: color .3s var(--ease);
}
.layer__desc {
    display: block; margin-top: .4rem;
    max-height: 0; overflow: hidden;
    font-size: .85rem; color: var(--text-3);
    opacity: 0;
    transition: max-height .45s var(--ease), opacity .35s var(--ease), margin .45s var(--ease);
}
.layer__rule {
    position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
    background: var(--red);
    box-shadow: 0 0 8px rgba(232, 14, 21, .8);
    transition: width .5s var(--ease);
}

.layer[aria-pressed="true"] .layer__index { color: var(--red); }
.layer[aria-pressed="true"] .layer__name { color: var(--text); }
.layer[aria-pressed="true"] .layer__desc { max-height: 8rem; opacity: 1; }
.layer[aria-pressed="true"] .layer__rule { width: 100%; }
.layer:hover .layer__name { color: var(--text); }

.layers.has-focus .layer:not([aria-pressed="true"]) { opacity: .42; }

/* == 15. Network ========================================================= */
/* Visual content lives in the WebGL stage; copy uses the shared centre layout. */

/* == 16. Advantages ====================================================== */

.advs { position: relative; display: grid; }
.adv {
    grid-area: 1 / 1;
    align-self: center;
    opacity: 0; transform: translateY(18px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
    pointer-events: none;
}
.adv[data-active="true"] { opacity: 1; transform: none; pointer-events: auto; }

.adv__index {
    font-family: var(--font-mono);
    font-size: .7rem; letter-spacing: .2em; color: var(--red);
    margin-bottom: .7rem;
}
.adv__name {
    margin: 0 0 .8rem;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.2vw, 2.2rem);
    font-weight: 700; font-stretch: 112%;
    text-transform: uppercase; line-height: 1.02;
}
.adv__desc { max-width: 32ch; font-size: .92rem; color: var(--text-3); }

/* == 17. Ecosystem ======================================================= */

.eco {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: .1rem;
    margin-top: clamp(2rem, 5vh, 3rem);
    text-align: left;
}
.eco__item {
    position: relative;
    display: grid; gap: .35rem;
    width: 100%;
    padding: 1.15rem 1.2rem;
    /* A flat dark tint, not a frosted panel: keeps labels legible over the
       live node field without turning into glassmorphism. */
    background: rgba(6, 6, 8, .55);
    box-shadow: inset 0 0 0 1px var(--hair);
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.eco__item:hover, .eco__item[aria-pressed="true"] {
    background: rgba(18, 18, 21, .72);
    box-shadow: inset 0 0 0 1px var(--hair-strong);
}
.eco__group {
    font-family: var(--font-mono);
    font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--text-3);
}
.eco__name {
    font-family: var(--font-display);
    font-size: .95rem; font-weight: 600; font-stretch: 112%;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-2);
    transition: color .3s var(--ease);
}
.eco__item:hover .eco__name, .eco__item[aria-pressed="true"] .eco__name { color: var(--text); }
.eco__mark {
    position: absolute; right: 1.1rem; top: 1.25rem;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--metal-dark);
    transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.eco__item[aria-pressed="true"] .eco__mark {
    background: var(--red);
    box-shadow: 0 0 9px rgba(232, 14, 21, .95);
}

/* == 18. Developers ===================================================== */

.access { display: grid; gap: .1rem; margin-top: 1.8rem; max-width: 24rem; }
.access__item {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--hair);
    font-family: var(--font-display);
    font-size: .8rem; font-weight: 600; font-stretch: 112%;
    text-transform: uppercase; letter-spacing: .13em;
    color: var(--text-2);
    transition: color .3s var(--ease);
}
a.access__item:hover { color: var(--text); }
a.access__item em {
    font-style: normal; font-family: var(--font-mono);
    font-size: .6rem; letter-spacing: .1em; color: var(--red);
}

.term {
    background: linear-gradient(180deg, rgba(16, 16, 18, .92), rgba(6, 6, 7, .95));
    box-shadow: inset 0 0 0 1px var(--hair-strong), 0 30px 70px -40px #000;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.term__bar {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--hair);
}
.term__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 8px rgba(232, 14, 21, .9);
}
.term__title {
    font-family: var(--font-mono);
    font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--text-3);
}
.term__body {
    margin: 0; padding: 1.1rem;
    min-height: 9.5rem;
    font-family: var(--font-mono);
    font-size: .76rem; line-height: 1.85;
    color: var(--text-2);
    white-space: pre-wrap;
    word-break: break-word;
}
.term__body .c { color: var(--text-3); }
.term__body .k { color: var(--red-hi); }
.term__caret {
    display: inline-block;
    width: .5em; height: 1em;
    vertical-align: text-bottom;
    background: var(--red);
    animation: caret 1.05s steps(2, start) infinite;
}
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.term__note {
    padding: 0 1.1rem 1.1rem;
    font-family: var(--font-mono);
    font-size: .64rem; color: var(--text-3);
}

/* The control layer reads as a functional surface, so the scene recedes. */
.scene--dev .scene__inner::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(3, 3, 3, .72);
    pointer-events: none;
}
.scene--dev .wrap { position: relative; }

/* == 19. Final CTA / footer ============================================= */

.closer {
    display: flex; align-items: center; justify-content: center; gap: 1.1rem;
    margin-bottom: 1.4rem;
    font-family: var(--font-display);
    font-size: .72rem; font-weight: 600; font-stretch: 118%;
    text-transform: uppercase; letter-spacing: .3em;
    color: var(--red);
}
.closer i { width: clamp(28px, 8vw, 74px); height: 1px; background: linear-gradient(90deg, transparent, var(--crimson)); }
.closer i:last-child { background: linear-gradient(90deg, var(--crimson), transparent); }

.foot {
    position: relative; z-index: 1;
    padding: clamp(3rem, 8vh, 5rem) 0 clamp(2rem, 5vh, 3rem);
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .95) 30%, #000);
    border-top: 1px solid var(--hair);
}
.foot__grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
.foot__brand { display: flex; align-items: center; gap: .9rem; }
.foot__brand img { width: 38px; height: 38px; }
.foot__brand p {
    font-family: var(--font-display);
    font-size: .82rem; font-weight: 700; font-stretch: 114%;
    text-transform: uppercase; letter-spacing: .16em;
    line-height: 1.5;
}
.foot__brand span {
    display: block;
    font-size: .62rem; font-weight: 500; letter-spacing: .26em;
    color: var(--red);
}
.foot__nav {
    display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
    justify-content: center;
    font-family: var(--font-display);
    font-size: .72rem; font-weight: 600; font-stretch: 112%;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--text-3);
}
.foot__nav a:hover { color: var(--text); }
.foot__legal { font-family: var(--font-mono); font-size: .66rem; line-height: 2; color: var(--text-3); text-align: right; }
.foot__legal a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.foot__legal a:hover { color: var(--text); }

/* == 20. Responsive + reduced motion ==================================== */

@media (max-width: 1000px) {
    .nav__links, .nav__cta { display: none; }
    .nav__toggle {
        display: grid; place-items: center;
        margin-left: auto;
        width: 44px; height: 44px;
        cursor: pointer;
    }
    .nav__toggle-box { display: grid; gap: 6px; width: 22px; }
    .nav__toggle-box i {
        display: block; height: 1px; background: var(--metal-light);
        transition: transform .35s var(--ease), opacity .35s var(--ease);
    }
    .nav__toggle[aria-expanded="true"] .nav__toggle-box i:first-child { transform: translateY(3.5px) rotate(45deg); }
    .nav__toggle[aria-expanded="true"] .nav__toggle-box i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}

@media (max-width: 860px) {
    /* Mobile keeps every story beat but scrolls a shorter track for each. */
    :root { --beat-scale: .72; }

    .wrap--split { grid-template-columns: 1fr; gap: 2rem; align-content: center; }
    .col::before { inset: -12% -14%; background: radial-gradient(72% 60% at 50% 50%, rgba(0, 0, 0, .84), transparent 74%); }

    .scene__inner { align-items: center; }
    .scene--how .scene__inner,
    .scene--arch .scene__inner,
    .scene--adv .scene__inner,
    .scene--dev .scene__inner { align-items: flex-start; padding-top: 16svh; }

    /* Top-anchored copy has the whole scene passing behind it on a narrow
       screen, so the upper band gets a scrim the radial falloff can't cover. */
    .scene--how .scene__inner::before,
    .scene--arch .scene__inner::before,
    .scene--adv .scene__inner::before {
        content: '';
        position: absolute;
        inset: 0 0 auto 0;
        height: 68%;
        background: linear-gradient(180deg, rgba(0, 0, 0, .93) 0%, rgba(0, 0, 0, .78) 52%, transparent 100%);
        pointer-events: none;
    }

    .nav__brand img { height: 32px; }

    .hero__words { font-size: clamp(2.6rem, 14vw, 4.4rem); }
    .hero__void { height: clamp(3.5rem, 11vh, 6rem); }
    .hero__cue { display: none; }

    .foot__grid { grid-template-columns: 1fr; }
    .foot__nav { justify-content: flex-start; }
    .foot__legal { text-align: left; }

    .progress { right: auto; left: var(--gutter); }
}

@media (hover: none) {
    .cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    /* No sticky scenes, no camera travel: content simply flows. */
    .scene { height: auto !important; }
    .scene__inner {
        position: static;
        height: auto;
        min-height: 0;
        padding: clamp(4rem, 12vh, 8rem) 0;
        overflow: visible;
    }

    /* Every stacked panel becomes visible instead of state-driven. */
    .step, .adv {
        grid-area: auto;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto;
        padding-bottom: 2rem;
    }
    .steps, .advs { gap: 1.5rem; }

    .layer__desc { max-height: none; opacity: 1; }
    .layers.has-focus .layer:not([aria-pressed="true"]) { opacity: 1; }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    /* The scene holds one calm composition, so it must sit behind the copy
       rather than compete with it as the page flows past. */
    .stage__canvas, .stage__fallback { opacity: .38; }

    .boot { display: none; }
    .hero__cue, .stage__grain { display: none; }
}