:root {
            --black: #000000;
            --white: #FFFFFF;
            --gray-body: #b0b0b0;
            --gray-muted: #666666;
            --bk-blue: #01A8E8;
            --pillar-play: #3F4CCF;
            --pillar-heal: #92D050;
            --pillar-grow: #F5A623;
            --pillar-connect: #F57D8A;
            --font-display: 'Helvetica Neue', 'Arial', sans-serif;
            --font-body: 'Roboto Flex', 'Arial', sans-serif;
            --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
            --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        }

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

        html, body {
            height: 100%;
            overflow: hidden;
        }

        body {
            font-family: var(--font-body);
            background: var(--black);
            color: var(--white);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* ===========================================
           ENTRANCE & EXIT KEYFRAMES
           =========================================== */
        @keyframes fadeSlideUp {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }

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

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

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

        @keyframes fadeSlideOutUp {
            from { opacity: 1; transform: translateY(0); }
            to   { opacity: 0; transform: translateY(-60px); }
        }

        @keyframes fadeSlideOutDown {
            from { opacity: 1; transform: translateY(0); }
            to   { opacity: 0; transform: translateY(60px); }
        }

        /* ===========================================
           LEFT SECTION NAVIGATION
           =========================================== */
        .section-nav {
            position: fixed;
            left: clamp(1.5rem, 3vw, 2.5rem);
            top: clamp(5rem, 9vw, 7rem);
            z-index: 50;
            display: flex;
            flex-direction: column;
            gap: clamp(0.5rem, 1vw, 0.8rem);
        }
        .section-nav-item {
            font-family: var(--font-mono);
            font-size: clamp(0.75rem, 1.2vw, 0.9rem);
            letter-spacing: 0.05em;
            text-decoration: none;
            cursor: pointer;
            opacity: 0;
            transform: translateY(6px);
            transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), color 0.4s ease;
            pointer-events: none;
            color: var(--bk-blue);
            white-space: nowrap;
        }
        .section-nav-item.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .section-nav-item.active {
            opacity: 1;
            color: var(--bk-blue);
        }
        .section-nav-item.visible.pillar-play  { color: var(--pillar-play); }
        .section-nav-item.visible.pillar-heal  { color: var(--pillar-heal); }
        .section-nav-item.visible.pillar-grow  { color: var(--pillar-grow); }
        .section-nav-item.visible.pillar-connect { color: var(--pillar-connect); }
        .section-nav-item:hover {
            opacity: 0.75;
            color: var(--white);
        }
        



        /* ===========================================
           SOFT WORD REVEAL
           =========================================== */
        .word-reveal {
            font-family: var(--font-body);
            font-weight: 400;
            font-size: clamp(0.9rem, min(2.2vw, 3vh), 1.7rem);
            line-height: 1.5;
            color: var(--white);
            text-align: center;
        }
        .word-reveal .word {
            display: inline-block;
            opacity: 0;
            transform: translateY(6px);
            transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
        }
        .word-reveal .word.visible {
            opacity: 1;
            transform: translateY(0);
        }
        /* ===========================================
           INVERSION SLIDE — phased scroll
           =========================================== */
        #inversionSection {
            justify-content: flex-start;
        }
        .inversion-heading {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            text-align: center;
            margin: 0;
            font-size: clamp(1.41rem, min(3.43vw, 4.68vh), 2.66rem);
            letter-spacing: 0.08em;
            font-weight: 700;
        }
        .inversion-heading .word-reveal {
            font-size: inherit;
        }
        .inversion-heading.visible {
            max-height: 120px;
            opacity: 1;
            margin-bottom: clamp(0.5rem, 1.5vh, 1.5rem);
        }
        .inversion-intro {
            text-align: center;
            max-width: 65ch;
            margin: 0 auto;
            width: 100%;
            overflow: hidden;
        }
        .inversion-diagram {
            display: none;
            justify-content: center;
            margin: 0;
        }
        .inversion-diagram .inv-layer { opacity: 0; }
        .inversion-conclusion {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            text-align: center;
            transition: max-height 2s var(--ease-out), opacity 1.6s var(--ease-out), margin 1.6s var(--ease-out);
            margin: 0;
        }
        .inversion-conclusion.revealed {
            max-height: 250px;
            opacity: 1;
            margin-top: clamp(0.5rem, 1.5vh, 1rem);
        }
        .inversion-pivot {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            text-align: center;
            transition: max-height 2s var(--ease-out), opacity 1.6s var(--ease-out), margin 1.6s var(--ease-out);
            margin: 0;
        }
        .inversion-pivot.revealed {
            max-height: 120px;
            opacity: 1;
            margin-top: clamp(0.3rem, 1vh, 0.8rem);
        }
        /* ===========================================
           SHIFT SECTION — phased reveal containers
           =========================================== */
        #shiftSection {
            justify-content: flex-start;
        }
        .shift-pivot-wrap {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 2s var(--ease-out), opacity 1.6s var(--ease-out), margin 1.6s var(--ease-out);
            margin: 0;
        }
        .shift-pivot-wrap.revealed {
            max-height: 120px;
            opacity: 1;
            margin: calc(clamp(1.5rem, 4vw, 3rem) - 12px) 0;
        }
        .shift-pivot-wrap .pivot-line {
            margin: 0;
        }
        .shift-prose2-wrap {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 2s var(--ease-out), opacity 1.6s var(--ease-out), margin 1.6s var(--ease-out);
            margin: 0;
        }
        .shift-prose2-wrap.revealed {
            max-height: 600px;
            opacity: 1;
            margin-top: 0;
            overflow: visible;
        }

        /* ===========================================
           SHIFT CHART heading + layout
           =========================================== */
        .shift-chart-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
        .shift-chart-title {
            font-family: var(--font-mono);
            font-size: clamp(0.78rem, 1.2vw, 0.96rem);
            color: var(--bk-blue);
            letter-spacing: 0.05em;
            margin-bottom: 0;
            opacity: 0.7;
        }

        /* ===========================================
           SHIFT CHART — TWO-PHASE REVEAL
           =========================================== */
        .shift-chart-wrap {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 1.2s var(--ease-out), opacity 0.9s var(--ease-out), margin-top 1s var(--ease-out);
            display: flex;
            justify-content: center;
            margin-top: 0;
        }
        .shift-chart-wrap.revealed {
            max-height: 400px;
            opacity: 1;
            margin-top: clamp(1.05rem, 2.1vw, 1.75rem);
        }

        /* ===========================================
           NEW PARADIGM — phased reveal containers
           =========================================== */
        #paradigmSection {
            justify-content: flex-start;
        }
        .paradigm-prose1-wrap,
        .paradigm-question-wrap,
        .paradigm-prose2-wrap,
        .paradigm-final-wrap {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 2s var(--ease-out), opacity 1.6s var(--ease-out), margin 1.6s var(--ease-out);
            margin: 0;
        }
        #paradigmSection > .pivot-line {
            opacity: 0;
            margin-bottom: calc(clamp(1.2rem, 3vw, 2.2rem) - 8px);
        }
        #paradigmSection.active > .pivot-line {
            animation: fadeSlideUp 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
        }
        .paradigm-prose1-wrap.revealed {
            max-height: 260px;
            opacity: 1;
            margin-top: 0;
        }
        .paradigm-question-wrap.revealed {
            max-height: 140px;
            opacity: 1;
            margin: calc(clamp(1.2rem, 3vw, 2.2rem) - 8px) 0;
        }
        .paradigm-question-wrap .pivot-line,
        .paradigm-final-wrap .pivot-line {
            margin: 0;
        }
        .paradigm-prose2-wrap.revealed {
            max-height: 760px;
            opacity: 1;
            margin-top: 0;
            overflow: visible;
            position: relative;
            z-index: 3;
        }
        .paradigm-final-wrap.revealed {
            max-height: 150px;
            opacity: 1;
            margin-top: clamp(1rem, 2.2vw, 1.8rem);
        }
        .paradigm-final .pixel-word {
            display: inline-block;
            white-space: nowrap;
        }
        .paradigm-final .pixel-char {
            display: inline-block;
            opacity: 0;
            transform: translateY(1px) scale(1.06);
            filter: blur(4.2px) contrast(175%) brightness(1.24);
            transition: opacity 1183ms cubic-bezier(0.16, 1, 0.3, 1), transform 1183ms steps(10, end), filter 1183ms cubic-bezier(0.16, 1, 0.3, 1);
        }
        .paradigm-final .pixel-char.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0) contrast(100%) brightness(1);
        }
        /* ===========================================
           PROGRESS BAR
           =========================================== */
        .progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 2px;
            background: var(--bk-blue);
            z-index: 100;
            transition: width 0.3s ease;
            box-shadow: 0 0 8px rgba(1, 168, 232, 0.4);
        }

        /* ===========================================
           LOGO — BITKRAFT signet only (top-left)
           =========================================== */
        .bk-logo {
            position: fixed;
            top: clamp(1.5rem, 3vw, 2.5rem);
            left: clamp(1.5rem, 3vw, 2.5rem);
            z-index: 50;
        }
        .bk-logo img {
            width: clamp(28px, 3vw, 42px);
            height: auto;
        }

        /* ===========================================
           SECTIONS — Fullpage scroll
           =========================================== */
        .section {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            height: 100dvh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            box-sizing: border-box;
            padding: clamp(2.5rem, min(8vw, 6vh), 6rem) max(calc((100vw - 65ch) / 2), 1.5rem) clamp(2rem, min(6vw, 5vh), 5rem);
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
        }

        .section.active {
            opacity: 1;
            pointer-events: auto;
            z-index: 2;
        }

        .section.exiting-up {
            animation: fadeSlideOutUp 0.6s var(--ease-out) forwards;
            z-index: 1;
        }

        .section.exiting-down {
            animation: fadeSlideOutDown 0.6s var(--ease-out) forwards;
            z-index: 1;
        }

        .section--hero {
            padding-top: 0;
            padding-bottom: 0;
        }

        .section--wide {
            padding-left: max(calc((100vw - 75rem) / 2), 1.5rem);
            padding-right: max(calc((100vw - 75rem) / 2), 1.5rem);
        }

        /* ===========================================
           TYPOGRAPHY
           =========================================== */
        .hero-title {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 7vw, 5.5rem);
            font-weight: 700;
            line-height: 1.05;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .hero-subtitle {
            font-family: var(--font-body);
            font-weight: 300;
            font-size: clamp(1rem, 2vw, 1.4rem);
            color: var(--gray-body);
            margin-top: clamp(1.5rem, 3vw, 2.5rem);
            letter-spacing: 0.02em;
        }

        .section-marker {
            font-family: var(--font-mono);
            font-size: clamp(0.75rem, 1.2vw, 0.9rem);
            color: var(--bk-blue);
            letter-spacing: 0.05em;
            margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
        }

        .section-heading {
            font-family: var(--font-display);
            font-size: clamp(1.8rem, 4.5vw, 3.5rem);
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }

        .prose {
            font-family: var(--font-body);
            font-weight: 300;
            font-size: clamp(0.85rem, min(1.4vw, 1.8vh), 1.15rem);
            line-height: 1.7;
            color: var(--gray-body);
        }

        .prose p { margin-bottom: 1.4em; }
        .prose p:last-child { margin-bottom: 0; }

        .section .prose {
            overflow: hidden;
        }

        .pivot-line {
            font-family: var(--font-body);
            font-weight: 400;
            font-size: clamp(1rem, min(2.2vw, 2.8vh), 1.7rem);
            line-height: 1.5;
            color: var(--white);
            margin: clamp(1rem, min(4vw, 3vh), 3rem) 0;
        }

        .section > .pivot-line:first-child,
        .thesis-phase .pivot-line {
            margin-top: 0;
        }

        .thesis-statement {
            font-family: var(--font-display);
            font-size: clamp(1.6rem, 4vw, 3.2rem);
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            text-align: center;
        }

        .thesis-statement .feels {
            text-transform: none;
            font-family: var(--font-body);
            font-style: italic;
            font-weight: 400;
            color: var(--bk-blue);
            text-shadow: 0 0 30px rgba(1, 168, 232, 0.3), 0 0 60px rgba(1, 168, 232, 0.1);
        }
        .thesis-future-word {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 5.5ch;
            text-align: center;
            transform-origin: 50% 50%;
            backface-visibility: hidden;
            will-change: transform, opacity, filter;
        }
        .thesis-future-word.flip-out {
            animation: thesisWordFlipOut 360ms cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
        }
        .thesis-future-word.flip-in {
            animation: thesisWordFlipIn 460ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
        }
        @keyframes thesisWordFlipOut {
            from { opacity: 1; transform: perspective(800px) rotateX(0deg) scale(1); filter: blur(0); }
            to { opacity: 0; transform: perspective(800px) rotateX(92deg) scale(0.96); filter: blur(2px); }
        }
        @keyframes thesisWordFlipIn {
            from { opacity: 0; transform: perspective(800px) rotateX(-92deg) scale(0.96); filter: blur(2px); }
            to { opacity: 1; transform: perspective(800px) rotateX(0deg) scale(1); filter: blur(0); }
        }

        .thesis-sub {
            font-family: var(--font-body);
            font-weight: 300;
            font-size: clamp(1rem, 1.6vw, 1.2rem);
            color: var(--gray-body);
            text-align: center;
            margin-top: clamp(1.5rem, 3vw, 2.5rem);
        }
        #thesisSection {
            justify-content: flex-start;
        }
        #thesisSection.thesis-focus {
            justify-content: center;
        }
        .thesis-phase {
            width: 100%;
        }
        .thesis-phase-a {
            position: relative;
        }
        .thesis-phase-a.dissolving {
            pointer-events: none;
        }
        .thesis-phase-a.hidden {
            display: none;
        }
        .thesis-attention-line.pivot-line {
            font-family: var(--font-display);
            font-size: clamp(1.45rem, 3.2vw, 2.5rem);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            text-align: center;
            margin-top: clamp(1.2rem, 2.5vw, 2rem);
            margin-bottom: 0;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 2.24s var(--ease-out), transform 2.24s var(--ease-out);
        }
        .thesis-attention-line.revealed {
            opacity: 1;
            transform: translateY(0);
        }
        .thesis-prose-wrap {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 2s var(--ease-out), opacity 1.6s var(--ease-out), margin 1.6s var(--ease-out);
            margin: 0;
        }
        .thesis-prose-wrap.revealed {
            max-height: 600px;
            opacity: 1;
            margin-top: 0;
        }
        .thesis-phase-b {
            display: none;
            flex-direction: column;
            align-items: center;
            position: relative;
            pointer-events: none;
            transform: translateY(0);
            transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .thesis-phase-b.revealed {
            display: flex;
            pointer-events: auto;
        }
        .thesis-phase-b .thesis-statement {
            opacity: 0;
            transform: translateY(36px);
            transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
        }
        .thesis-phase-b.revealed .thesis-statement {
            opacity: 1;
            transform: translateY(0);
        }
        .thesis-below {
            position: absolute;
            left: 0;
            right: 0;
            top: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        #thesisSection.thesis-invest-shifted .thesis-phase-b.revealed {
            transform: translateY(calc(-1 * clamp(72px, 10vh, 120px)));
        }
        .thesis-step {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            pointer-events: none;
            transform: translateY(16px);
            transition: max-height 0.8s var(--ease-out), opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), margin-top 0.8s var(--ease-out);
        }
        .thesis-step.revealed {
            max-height: 240px;
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }
        #thesisSeparator.thesis-step {
            margin: 0 auto;
        }
        #thesisSeparator.thesis-step.revealed {
            max-height: 3px;
            margin-top: clamp(1.2rem, 2.6vw, 2.1rem);
        }
        .thesis-cards {
            display: flex;
            justify-content: center;
            gap: clamp(0.6rem, 1.5vw, 1.2rem);
            margin-top: 0;
            flex-wrap: nowrap;
            width: 100%;
            transition: margin-top 0.8s var(--ease-out);
            perspective: 1200px;
        }
        .thesis-cards.has-cards {
            margin-top: clamp(1.5rem, 3vw, 2.5rem);
        }
        .thesis-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 10px;
            padding: clamp(0.8rem, 1.5vw, 1.2rem) clamp(0.8rem, 1.5vw, 1.2rem);
            text-align: center;
            visibility: hidden;
            opacity: 0;
            transform: perspective(1200px) rotateX(78deg) translateY(20px) scale(0.95);
            transform-origin: 50% 100%;
            backface-visibility: hidden;
            filter: saturate(0.72) brightness(0.84);
            flex: 1 1 0;
            min-width: 0;
            will-change: transform, opacity, filter;
        }
        .thesis-card[data-pillar="play"]   { border-color: rgba(63, 76, 207, 0.3); }
        .thesis-card[data-pillar="heal"]   { border-color: rgba(146, 208, 80, 0.3); }
        .thesis-card[data-pillar="grow"]   { border-color: rgba(245, 166, 35, 0.3); }
        .thesis-card[data-pillar="connect"]{ border-color: rgba(245, 125, 138, 0.3); }
        .thesis-card.revealed {
            visibility: visible;
            animation: thesisCardSlideInTop 0.9s cubic-bezier(0.19, 1, 0.22, 1) forwards;
        }
        @keyframes thesisCardSlideInTop {
            0% {
                opacity: 0;
                transform: translateY(-30px) scale(0.97);
                filter: saturate(0.68) brightness(0.8);
            }
            62% {
                opacity: 1;
                transform: translateY(3px) scale(1.005);
                filter: saturate(1.06) brightness(1.04);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: saturate(1) brightness(1);
            }
        }
        .thesis-card-num {
            font-family: var(--font-display);
            font-size: clamp(0.65rem, 0.9vw, 0.8rem);
            letter-spacing: 0.1em;
            display: block;
            margin-bottom: 0.25rem;
        }
        .thesis-card[data-pillar="play"]    .thesis-card-num { color: var(--pillar-play); }
        .thesis-card[data-pillar="heal"]    .thesis-card-num { color: var(--pillar-heal); }
        .thesis-card[data-pillar="grow"]    .thesis-card-num { color: var(--pillar-grow); }
        .thesis-card[data-pillar="connect"] .thesis-card-num { color: var(--pillar-connect); }
        .thesis-card-name {
            font-family: var(--font-display);
            font-size: clamp(0.9rem, 1.4vw, 1.15rem);
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            display: block;
        }
        .thesis-card[data-pillar="play"]    .thesis-card-name { color: var(--pillar-play); }
        .thesis-card[data-pillar="heal"]    .thesis-card-name { color: var(--pillar-heal); }
        .thesis-card[data-pillar="grow"]    .thesis-card-name { color: var(--pillar-grow); }
        .thesis-card[data-pillar="connect"] .thesis-card-name { color: var(--pillar-connect); }
        .thesis-card-sub {
            display: block;
            font-family: var(--font-body);
            font-weight: 300;
            font-size: clamp(0.55rem, 0.8vw, 0.7rem);
            color: var(--gray-muted);
            margin-top: 0.3rem;
            font-style: italic;
        }
        #thesisSection .wind-token {
            display: inline-block;
            will-change: opacity;
            transition-property: opacity;
            transition-duration: var(--wind-dur, 1200ms);
            transition-delay: var(--wind-delay, 0ms);
            transition-timing-function: linear;
        }
        .thesis-phase-a.dissolving .wind-token.wind-out {
            opacity: 0;
        }

        /* ===========================================
           BLOCKQUOTE
           =========================================== */
        blockquote {
            border-left: 2px solid var(--bk-blue);
            padding-left: clamp(1rem, 2vw, 1.75rem);
            margin: clamp(1.5rem, 3vw, 2.5rem) 0;
        }
        blockquote p {
            font-family: var(--font-body);
            font-weight: 300;
            font-style: italic;
            font-size: clamp(1rem, 1.5vw, 1.2rem);
            line-height: 1.6;
            color: var(--white);
            margin-bottom: 0.75rem;
        }
        blockquote cite {
            font-family: var(--font-body);
            font-style: normal;
            font-size: clamp(0.75rem, 1vw, 0.85rem);
            color: var(--bk-blue);
        }

        /* ===========================================
           VENN DIAGRAM
           =========================================== */
        .venn-diagram { display: flex; justify-content: center; }
        .venn-diagram svg { width: clamp(280px, 40vw, 440px); height: auto; }
        .venn-circle { opacity: 0; transform-origin: center; transform: scale(0.85); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
        .venn-label { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0; transition: opacity 0.8s var(--ease-out); }
        #vennSection.venn-revealed .venn-circle { opacity: 1; transform: scale(1); }
        #vennSection.venn-revealed .venn-label { opacity: 1; }

        /* ===========================================
           PILLAR SECTIONS
           =========================================== */
        .pillar-header {
            display: flex;
            align-items: baseline;
            gap: clamp(0.75rem, 1.5vw, 1.25rem);
            margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
        }
        .pillar-number {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
            line-height: 1;
        }
        .pillar-title {
            font-family: var(--font-display);
            font-size: clamp(1.2rem, 2.5vw, 2rem);
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .pillar-rule {
            display: block;
            width: 100%;
            min-height: 3px;
            height: 3px;
            flex: 0 0 auto;
            border: 0;
            margin: 0;
            margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
        }
        .section--pillar {
            justify-content: flex-start;
            overflow: hidden;
        }
        .section--pillar .prose {
            overflow: hidden;
        }
        .pillar-subtitle {
            font-family: var(--font-body);
            font-weight: 300;
            font-style: italic;
            font-size: clamp(0.85rem, 1.2vw, 1rem);
            color: var(--bk-blue);
            margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
        }

        /* ===========================================
           PILLAR OVERVIEW STRIP
           =========================================== */
        .pillar-strip {
            display: flex;
            justify-content: center;
            gap: clamp(1.5rem, 4vw, 4rem);
            margin-top: clamp(3rem, 6vw, 5rem);
            flex-wrap: wrap;
        }
        .pillar-strip-item { text-align: center; }
        .pillar-strip-num {
            font-family: var(--font-display);
            font-size: clamp(0.7rem, 1vw, 0.85rem);
            letter-spacing: 0.1em;
            display: block;
            margin-bottom: 0.25rem;
        }
        .pillar-strip-name {
            font-family: var(--font-display);
            font-size: clamp(0.85rem, 1.3vw, 1.1rem);
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .pillar-strip-sub {
            display: block;
            font-family: var(--font-body);
            font-weight: 300;
            font-size: clamp(0.6rem, 0.9vw, 0.75rem);
            color: var(--gray-muted);
            margin-top: 0.25rem;
            font-style: italic;
        }

        /* ===========================================
           QUOTE CARD
           =========================================== */
        .quote-card {
            background: #0a0f1a;
            border-radius: 8px;
            padding: clamp(1.5rem, 3vw, 2.5rem);
            text-align: center;
            margin: clamp(1.5rem, 3vw, 2.5rem) 0;
        }
        .quote-card-rule { width: 40px; height: 2px; background: var(--bk-blue); margin: 0 auto clamp(1rem, 2vw, 1.5rem); }
        .quote-card p { font-family: var(--font-body); font-style: italic; font-weight: 300; font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--white); margin-bottom: clamp(0.75rem, 1.5vw, 1rem); }
        .quote-card cite { font-family: var(--font-display); font-style: normal; font-size: clamp(0.7rem, 1vw, 0.8rem); color: var(--bk-blue); letter-spacing: 0.1em; text-transform: uppercase; }

        /* ===========================================
           CLOSING
           =========================================== */
        .closing-pillars {
            list-style: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(0.4rem, 1vh, 0.8rem);
            margin-top: clamp(2rem, 4vw, 3rem);
        }
        .closing-pillars li {
            font-family: var(--font-display);
            font-size: clamp(1.1rem, 2.5vw, 1.8rem);
            font-weight: 700;
            letter-spacing: 0.02em;
            opacity: 0;
            transform: translateY(12px);
            transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
        }
        .section.active .closing-pillars li { opacity: 1; transform: translateY(0); }
        .section.active .closing-pillars li:nth-child(1) { transition-delay: 0.2s; }
        .section.active .closing-pillars li:nth-child(2) { transition-delay: 0.35s; }
        .section.active .closing-pillars li:nth-child(3) { transition-delay: 0.5s; }
        .section.active .closing-pillars li:nth-child(4) { transition-delay: 0.65s; }

        /* ===========================================
           BRAND FOOTER (last slide)
           =========================================== */
        .brand-slide {
            text-align: center;
            position: relative;
        }
        .brand-slide-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
        }
        .brand-slide-logo img {
            height: clamp(32px, 5vw, 60px);
            width: auto;
            opacity: 0.9;
        }
        .brand-slide-copy {
            position: absolute;
            bottom: clamp(1.5rem, 3vw, 2.5rem);
            left: 0;
            right: 0;
            font-family: var(--font-body);
            font-size: clamp(0.6rem, 0.9vw, 0.75rem);
            color: var(--bk-blue);
        }

        /* ===========================================
           REVEAL ANIMATIONS (triggered by .active)
           =========================================== */
        .reveal {
            opacity: 0;
            transform: translateY(20px);
        }
        .section.active .reveal {
            animation: fadeSlideUp 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }
        .section.active .reveal:nth-child(1) { animation-delay: 0.05s; }
        .section.active .reveal:nth-child(2) { animation-delay: 0.15s; }
        .section.active .reveal:nth-child(3) { animation-delay: 0.25s; }
        .section.active .reveal:nth-child(4) { animation-delay: 0.35s; }
        .section.active .reveal:nth-child(5) { animation-delay: 0.45s; }
        .section.active .reveal:nth-child(6) { animation-delay: 0.55s; }
        .section.active .reveal:nth-child(7) { animation-delay: 0.65s; }

        .section--hero .reveal {
            transform: none;
        }
        .section--hero.active .hero-title.reveal {
            animation: heroTitleFadeIn 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }
        .section--hero .hero-subtitle.reveal {
            opacity: 1;
        }
        .section--hero.active .hero-subtitle.reveal {
            animation: none;
        }
        .hero-subtitle .word {
            display: inline-block;
            opacity: 0;
            transform: translateY(6px);
            transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
        }
        .hero-subtitle .word.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ===========================================
           REFERENCES / ANNOTATIONS
           =========================================== */
        .ref {
            position: relative;
            display: inline;
        }
        .ref-num {
            font-family: var(--font-mono);
            font-size: 0.65em;
            color: var(--bk-blue);
            text-decoration: none;
            margin-left: 1px;
            cursor: pointer;
        }
        .ref-num:hover { color: var(--white); }
        .ref-pop {
            position: fixed;
            display: none;
            background: #111111;
            border: 1px solid rgba(1, 168, 232, 0.25);
            border-radius: 6px;
            padding: clamp(10px, 1.5vw, 14px) clamp(12px, 2vw, 18px);
            width: max-content;
            max-width: 380px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
            z-index: 1000;
            white-space: normal;
        }
        .ref-pop-img {
            width: 100%;
            border-radius: 4px;
            background: #f5f5f5;
            padding: 6px;
            margin-bottom: 8px;
        }
        .ref-pop.show {
            display: block;
            opacity: 1;
            pointer-events: auto;
        }
        .ref-pop-title {
            font-family: var(--font-body);
            font-weight: 700;
            font-size: clamp(0.7rem, 1vw, 0.8rem);
            color: var(--white);
            line-height: 1.4;
            margin-bottom: 4px;
        }
        .ref-pop-desc {
            font-family: var(--font-body);
            font-weight: 300;
            font-size: clamp(0.65rem, 0.9vw, 0.75rem);
            color: var(--gray-body);
            line-height: 1.5;
            margin-bottom: 6px;
        }
        .ref-pop-link {
            font-family: var(--font-body);
            font-size: clamp(0.6rem, 0.85vw, 0.7rem);
            color: #959494;
            text-decoration: underline;
        }
        .ref-pop-link:hover { color: var(--bk-blue); }

        /* ===========================================
           SEPARATOR
           =========================================== */
        .separator { width: 40px; height: 2px; background: var(--bk-blue); margin: clamp(1.5rem, 3vw, 2.5rem) auto; }

        /* Word sweep spans */
        .sw { display: inline; opacity: 0; }

        /* ===========================================
           RESPONSIVE
           =========================================== */
        @media (max-width: 640px) {
            .pillar-strip { gap: clamp(1rem, 3vw, 2rem); }
        }
        /* Reduced motion: respect preference but keep gentle transitions */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                transition-duration: 1s !important;
                transition-delay: 0s !important;
            }
            /* Keep pillar card entry readable/intentional in thesis sequence. */
            #thesisCards .thesis-card.revealed {
                animation-duration: 0.9s !important;
            }
        }

        /* ===========================================
           SOUND TOGGLE
           =========================================== */
        .sound-toggle {
            position: fixed;
            top: clamp(1.2rem, 2.5vw, 2rem);
            right: clamp(1.2rem, 2.5vw, 2rem);
            z-index: 100;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.4rem 0.6rem;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.6s ease;
        }
        .sound-toggle.visible {
            opacity: 1;
            pointer-events: auto;
        }
        .sound-toggle:hover { opacity: 0.8; }
        .sound-toggle svg {
            width: 17px;
            height: 12px;
            overflow: visible;
        }
        .sound-toggle svg path {
            stroke: var(--bk-blue);
            stroke-width: 1.8;
            stroke-linecap: round;
            transform-origin: center;
            transition: transform 0.4s var(--ease-out);
        }
        .sound-toggle.muted svg path {
            transform: scaleY(0.15);
        }
        .sound-toggle-label {
            font-family: var(--font-mono);
            font-size: 0.65rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--bk-blue);
            white-space: nowrap;
        }
        .audio-unlock-hint {
            position: fixed;
            top: clamp(3.35rem, 6.5vw, 4.25rem);
            right: clamp(1.2rem, 2.5vw, 2rem);
            z-index: 101;
            border: 1px solid rgba(1, 168, 232, 0.45);
            background: rgba(1, 168, 232, 0.12);
            color: #dff6ff;
            border-radius: 6px;
            padding: 0.3rem 0.5rem;
            font-family: var(--font-mono);
            font-size: 0.55rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            cursor: pointer;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-4px);
            transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
        }
        .audio-unlock-hint.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }
        .audio-unlock-hint:hover {
            background: rgba(1, 168, 232, 0.22);
        }

        /* ===========================================
           AUDIO DEBUG PANEL (Shift+V)
           =========================================== */
        .audio-debug-panel {
            position: fixed;
            right: clamp(1rem, 2vw, 1.5rem);
            bottom: clamp(1rem, 2vw, 1.5rem);
            width: min(92vw, 360px);
            max-height: 72vh;
            z-index: 110;
            padding: 0.8rem;
            border: 1px solid rgba(1, 168, 232, 0.35);
            background: rgba(0, 0, 0, 0.82);
            backdrop-filter: blur(6px);
            border-radius: 10px;
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
            opacity: 0;
            pointer-events: none;
            transform: translateY(12px);
            transition: opacity 0.2s ease, transform 0.2s ease;
            overflow: hidden;
        }
        .audio-debug-panel.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }
        .audio-debug-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.7rem;
            gap: 0.6rem;
        }
        .audio-debug-actions {
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .audio-debug-title {
            font-family: var(--font-mono);
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--bk-blue);
            white-space: nowrap;
        }
        .audio-debug-copy {
            border: 1px solid rgba(1, 168, 232, 0.45);
            background: rgba(1, 168, 232, 0.15);
            color: #dff6ff;
            font-family: var(--font-mono);
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            border-radius: 6px;
            padding: 0.3rem 0.5rem;
            cursor: pointer;
            white-space: nowrap;
        }
        .audio-debug-copy:hover {
            background: rgba(1, 168, 232, 0.28);
        }
        .audio-debug-status {
            margin-bottom: 0.55rem;
            font-family: var(--font-mono);
            font-size: 0.54rem;
            letter-spacing: 0.05em;
            color: rgba(255, 255, 255, 0.72);
            white-space: normal;
            line-height: 1.35;
        }
        .audio-debug-body {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.45rem;
            max-height: calc(72vh - 76px);
            overflow: auto;
            padding-right: 0.12rem;
        }
        .audio-debug-row {
            display: grid;
            grid-template-columns: 96px 1fr 62px;
            align-items: center;
            gap: 0.45rem;
        }
        .audio-debug-row-label {
            font-family: var(--font-mono);
            font-size: 0.56rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.2;
        }
        .audio-debug-row input[type="range"] {
            width: 100%;
            accent-color: var(--bk-blue);
            cursor: pointer;
            margin: 0;
        }
        .audio-debug-row input[type="number"] {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid rgba(255, 255, 255, 0.22);
            background: rgba(255, 255, 255, 0.06);
            color: #ffffff;
            border-radius: 5px;
            padding: 0.2rem 0.3rem;
            font-family: var(--font-mono);
            font-size: 0.58rem;
        }
        .audio-debug-row input[type="number"]:focus {
            outline: none;
            border-color: rgba(1, 168, 232, 0.8);
        }
        .audio-debug-hint {
            margin-top: 0.65rem;
            font-family: var(--font-mono);
            font-size: 0.52rem;
            letter-spacing: 0.06em;
            color: rgba(255, 255, 255, 0.58);
            text-transform: uppercase;
            text-align: right;
        }
        .prose{
            overflow: auto;
        }
    
        @media (max-width: 900px) {
            .section-nav {
                display: none;
            }
            .section--pillar{
                margin-top: 20px;
            }
            .entering-section{
                margin-top: 100px;
            }
            .thesis-cards{
                display: grid;
                grid-template-columns: repeat(2, 1fr);
            }
            .sound-toggle {
                top: clamp(1rem, 2vw, 1.5rem);
                right: clamp(1rem, 2vw, 1.5rem);
                padding: 0.3rem;
            }
            .sound-toggle-label {
                display: none;
            }
            .audio-unlock-hint {
                display: none;
            }
            .pivot-line{
                margin-top: 80px;
            }
            .prose {
                overflow: auto;
            }
        }
        /* ===========================================
           NAV ARROWS — section navigation chevrons
           =========================================== */
        .nav-arrow {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            z-index: 100;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.6s ease;
            cursor: pointer;
            padding: 2rem 1.25rem;
            background: none;
            border: none;
            outline: none;
            -webkit-tap-highlight-color: transparent;
        }
        .nav-arrow.visible {
            pointer-events: auto;
            opacity: 0.25;
            transition: opacity 1.2s ease;
        }
        .nav-arrow:hover {
            opacity: 0.6;
            transition: opacity 0.2s ease;
        }
        .nav-arrow--next {
            right: clamp(0.5rem, 2vw, 1.5rem);
        }
        .nav-arrow svg {
            width: clamp(24px, 3.5vw, 36px);
            height: clamp(80px, 12vw, 120px);
        }

        /* Downward-pointing bracket (90° rotated) — inline scroll cue */
        .proceed-bracket-down {
            display: flex;
            justify-content: center;
            margin-top: clamp(0.5rem, 1vw, 1rem);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.8s ease;
        }
        .proceed-bracket-down.visible {
            opacity: 0.25;
            pointer-events: auto;
            transition: opacity 1.2s ease;
        }
        .proceed-bracket-down:hover {
            opacity: 0.6;
            transition: opacity 0.2s ease;
        }
        .proceed-bracket-down svg {
            width: clamp(80px, 12vw, 120px);
            height: clamp(24px, 3.5vw, 36px);
        }

        /* Short viewports — scale down to prevent content squeeze */
        @media (max-height: 1200px) {
            .prose {
                font-size: clamp(0.85rem, 1.3vw, 1.05rem);
                line-height: 1.65;
            }
            .prose p { margin-bottom: 1.2em; }
            .pivot-line {
                font-size: clamp(1.05rem, 2vw, 1.45rem);
            }
            .section {
                padding-top: clamp(2.5rem, 5vw, 4rem);
                padding-bottom: clamp(2rem, 4vw, 3rem);
            }
        }
        @media (max-height: 900px) {
            .prose {
                font-size: clamp(0.78rem, 1.2vw, 0.95rem);
                line-height: 1.55;
            }
            .prose p { margin-bottom: 1em; }
            .pivot-line {
                font-size: clamp(0.95rem, 1.8vw, 1.3rem);
            }
            .section {
                padding-top: clamp(1.5rem, 3vw, 2.5rem);
                padding-bottom: clamp(1rem, 2vw, 2rem);
            }
            .pillar-number {
                font-size: clamp(2rem, 5vw, 3rem);
            }
            .pillar-title {
                font-size: clamp(1.2rem, 2.5vw, 2rem);
            }
        }

        @media (max-width: 500px) {
            p{
                font-size: 14px;
            }
            .prose {
                overflow: auto;
            }
            .paradigm-final-wrap{
                overflow: auto;
            }
        }