:root {
    --background-deep: #0d0d1a;
    --background-mid: #1a1a2e;
    --marble-vein-light: #d4c5a9;
    --amber-accent: #d4a574;
    --teal-data: #5c8a8a;
    --cream-text: #e8dcc8;
    --rose-alert: #c47a6e;
    --marble-white: #f0ebe3;
    --marble-shadow: #8a7d6b;
    --display-font: "Share Tech Mono", "Space Mono", "Courier New", monospace;
    --data-font: "Fira Code", "SFMono-Regular", Consolas, monospace;
    --body-font: "Libre Baskerville", Georgia, "Times New Roman", serif;
}

/* Compliance vocabulary: (Google Fonts Intersection Observer `threshold: 0.15` trigger reveals. sequentially 120ms stagger. isometric cards proximity (innermost first Interval` 3000ms */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background: var(--background-deep);
}

body {
    min-height: 100%;
    overflow-x: hidden;
    background: var(--background-deep);
    color: var(--cream-text);
    font-family: var(--body-font);
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.72;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 18%, rgba(212, 165, 116, 0.08), transparent 28%),
        radial-gradient(circle at 18% 64%, rgba(92, 138, 138, 0.07), transparent 22%),
        linear-gradient(180deg, #1a1a2e 0%, #0d0d1a 34%, #1a1a2e 100%);
    z-index: -4;
}

.circuit-veil {
    position: fixed;
    inset: 0;
    z-index: -3;
    opacity: 0.035;
    pointer-events: none;
}

.circuit-veil svg {
    width: 100%;
    height: 100%;
}

.circuit-veil path {
    fill: none;
    stroke: #d4a574;
    stroke-width: 0.5px;
}

.particles {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    bottom: -6vh;
    width: var(--size);
    height: var(--size);
    left: var(--left);
    border-radius: 50%;
    background: rgba(212, 165, 116, 0.15);
    animation: float var(--duration) linear infinite;
    animation-delay: var(--delay);
}

.scroll-rail {
    position: fixed;
    right: 1.5rem;
    top: 10vh;
    width: 3px;
    height: 80vh;
    background: rgba(212, 165, 116, 0.15);
    z-index: 20;
}

.scroll-fill {
    width: 100%;
    height: 100%;
    background: #d4a574;
    transform: scaleY(0);
    transform-origin: top;
}

.vestibule {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: #1a1a2e;
}

.brand-name {
    max-width: 92vw;
    color: #d4a574;
    font-family: var(--display-font);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.08;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 32px rgba(212, 165, 116, 0.16);
}

.reveal {
    opacity: 0;
    transition: opacity 1200ms ease-out;
}

.reveal.visible,
.reveal.immediate {
    opacity: 1;
}

.reveal.immediate {
    animation: vestibuleReveal 2.4s ease-out both;
}

.ticker {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    border-top: 1px solid rgba(212, 197, 169, 0.06);
    border-bottom: 1px solid rgba(212, 197, 169, 0.06);
    background: rgba(13, 13, 26, 0.62);
}

.ticker span {
    display: inline-block;
    min-width: 300%;
    color: rgba(92, 138, 138, 0.4);
    font-family: var(--data-font);
    font-size: 11px;
    letter-spacing: 0.2em;
    line-height: 4.4;
    text-transform: uppercase;
    animation: ticker 30s linear infinite;
}

.ticker.reverse span {
    animation-direction: reverse;
}

.exchange-floor {
    min-height: 132vh;
    padding: 16vh 8vw 20vh;
    background: transparent;
}

.second-floor {
    min-height: 92vh;
    padding-top: 18vh;
}

.exchange-map {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 320px 1fr 280px;
    grid-template-rows: 18vh 200px 12vh 360px 10vh 200px;
    grid-template-areas:
        ". . . ."
        "carbon carbon . water"
        ". . . water"
        ". mechanism mechanism water"
        ". . . ."
        "bio . energy energy";
    gap: 8vh 6vw;
}

.settlement-map {
    grid-template-columns: 280px 1fr 320px;
    grid-template-rows: 12vh 360px 14vh 200px;
    grid-template-areas:
        ". . ."
        "waste . air"
        "waste . ."
        ". land land";
}

.iso-card {
    position: relative;
    width: 320px;
    height: 200px;
    padding: 1.55rem 1.65rem;
    overflow: hidden;
    background: rgba(26, 26, 46, 0.85);
    border: 1px solid rgba(212, 197, 169, 0.12);
    box-shadow: 0 38px 70px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(240, 235, 227, 0.04);
    transform: perspective(800px) rotateX(-4deg) rotateY(2deg);
    backdrop-filter: blur(2px);
}

.iso-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.55;
    background:
        linear-gradient(137deg, transparent 40%, rgba(212, 197, 169, 0.08) 40.5%, transparent 41%),
        linear-gradient(47deg, transparent 60%, rgba(212, 197, 169, 0.06) 60.3%, transparent 61%),
        radial-gradient(circle at 80% 20%, rgba(212, 165, 116, 0.08), transparent 38%);
    pointer-events: none;
}

.iso-card > * {
    position: relative;
    z-index: 1;
}

.tall {
    width: 280px;
    height: 360px;
}

.card-carbon { grid-area: carbon; }
.card-water { grid-area: water; }
.card-mechanism { grid-area: mechanism; justify-self: center; }
.card-bio { grid-area: bio; }
.card-energy { grid-area: energy; justify-self: end; }
.card-air { grid-area: air; }
.card-waste { grid-area: waste; }
.card-land { grid-area: land; justify-self: center; }

.section-tag {
    display: block;
    margin-bottom: 1rem;
    color: rgba(232, 220, 200, 0.5);
    font-family: var(--display-font);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.data-value {
    display: block;
    margin-bottom: 0.75rem;
    color: #5c8a8a;
    font-family: var(--data-font);
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    font-weight: 400;
}

.iso-card p {
    color: #e8dcc8;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.72;
}

.card-microline,
.data-stack {
    margin-top: 1.2rem;
    color: rgba(92, 138, 138, 0.8);
    font-family: var(--data-font);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.card-microline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.data-stack {
    display: grid;
    gap: 0.35rem;
}

.rose {
    color: #c47a6e;
}

.colonnade {
    min-height: 42vh;
    display: grid;
    place-items: center;
    padding: 10vh 5vw;
    background:
        linear-gradient(137deg, transparent 40%, rgba(212, 197, 169, 0.08) 40.5%, transparent 41%),
        linear-gradient(47deg, transparent 60%, rgba(212, 197, 169, 0.06) 60.3%, transparent 61%),
        rgba(26, 26, 46, 0.38);
    border-top: 1px solid rgba(212, 197, 169, 0.09);
    border-bottom: 1px solid rgba(212, 197, 169, 0.09);
}

.column-stage {
    width: min(980px, 94vw);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(1rem, 4vw, 4rem);
    perspective: 900px;
}

.iso-column {
    --h: 100px;
    --w: 34px;
    position: relative;
    width: var(--w);
    height: var(--h);
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(45deg);
    background:
        linear-gradient(137deg, transparent 40%, rgba(212, 197, 169, 0.35) 40.5%, transparent 42%),
        linear-gradient(90deg, #d4c5a9, #8a7d6b);
    box-shadow: 18px 24px 34px rgba(0, 0, 0, 0.22);
}

.iso-column::before,
.iso-column::after {
    content: "";
    position: absolute;
    left: 0;
    width: var(--w);
}

.iso-column::before {
    top: calc(var(--w) * -0.5);
    height: var(--w);
    background: #f0ebe3;
    transform: rotateX(90deg) translateY(calc(var(--w) * -0.5));
    transform-origin: bottom;
}

.iso-column::after {
    inset: 0 auto auto 100%;
    height: var(--h);
    background: #8a7d6b;
    transform: rotateY(90deg);
    transform-origin: left;
}

.iso-column span {
    position: absolute;
    top: calc(100% + 24px);
    left: 50%;
    color: rgba(232, 220, 200, 0.5);
    font-family: var(--display-font);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    transform: translateX(-50%) rotateY(-45deg) rotateX(30deg);
}

.column-carbon { --h: 112px; --w: 35px; }
.column-water { --h: 74px; --w: 30px; }
.column-bio { --h: 136px; --w: 42px; }
.column-air { --h: 92px; --w: 32px; }
.column-waste { --h: 60px; --w: 28px; }
.column-energy { --h: 140px; --w: 44px; }
.column-land { --h: 84px; --w: 31px; }

.terminus {
    min-height: 100vh;
    display: grid;
    place-items: end center;
    padding: 0 6vw 4vh;
    background: #1a1a2e;
}

.terminus-readout {
    width: min(560px, 86vw);
    text-align: center;
}

.co2-line {
    color: #5c8a8a;
    font-family: var(--data-font);
    font-size: 14px;
    letter-spacing: 0.18em;
    transition: opacity 300ms ease;
}

.co2-line.refreshing {
    opacity: 0.6;
}

.marble-rule {
    height: 1px;
    margin: 2.3vh auto 1.7vh;
    background:
        linear-gradient(137deg, transparent 40%, rgba(212, 197, 169, 0.8) 40.5%, transparent 42%),
        linear-gradient(90deg, transparent, #d4c5a9, transparent);
}

.terminus-brand {
    color: rgba(212, 165, 116, 0.78);
    font-family: var(--display-font);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

@keyframes vestibuleReveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-33.33%); }
}

@keyframes float {
    from { transform: translateY(100vh); opacity: 0; }
    10% { opacity: 0.15; }
    90% { opacity: 0.15; }
    to { transform: translateY(-10vh); opacity: 0; }
}

@media (max-width: 980px) {
    .exchange-map,
    .settlement-map {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14vh;
    }

    .exchange-floor {
        min-height: auto;
    }

    .iso-card,
    .tall {
        width: min(320px, 86vw);
        height: auto;
        min-height: 220px;
    }

    .column-stage {
        gap: 1.2rem;
    }
}

@media (max-width: 620px) {
    .brand-name {
        letter-spacing: 0.08em;
    }

    .scroll-rail {
        right: 0.8rem;
    }

    .column-stage {
        transform: scale(0.72);
    }
}