/* ============================================================================
   ARISTOS ATLAS — 2030 EDITORIAL DESIGN SYSTEM
   Official April 2026 Rebrand · Jacarta / Lavender / Cyberiada / Open Sans
   Cinematic scale · Kinetic typography · Asymmetric grid · Ghost watermarks
   Orbital brand · Scroll narrative · Noise-textured · Magnetic interaction
   ============================================================================ */

/* ============================================================================
   1. FONTS
   ============================================================================ */
@font-face {
    font-family: 'Cyberiada Medium';
    src: url('../fonts/cyberiada_medium.woff2') format('woff2'),
         url('../fonts/cyberiada_medium.woff')  format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============================================================================
   2. ANIMATED CUSTOM PROPERTIES (@property)
   Makes gradient/position values animatable and inherit-aware
   ============================================================================ */
@property --mesh-x {
    syntax: '<percentage>';
    initial-value: 30%;
    inherits: false;
}
@property --mesh-y {
    syntax: '<percentage>';
    initial-value: 20%;
    inherits: false;
}
@property --glow-a {
    syntax: '<number>';
    initial-value: 0.35;
    inherits: false;
}
@property --orbit-rot {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ============================================================================
   3. DESIGN TOKENS
   ============================================================================ */
:root {
    /* Core Brand (April 2026 Aristos) */
    --jacarta:          #2D2769;
    --jacarta-d:        #1E1A4A;
    --jacarta-dd:       #15123A;
    --jacarta-ddd:      #0A0820;
    --jacarta-l:        #3D3580;
    --jacarta-ll:       #4A3B8F;
    --jacarta-80:       rgba(45, 39, 105, 0.80);
    --jacarta-20:       rgba(45, 39, 105, 0.20);
    --jacarta-08:       rgba(45, 39, 105, 0.08);

    --lavender:         #9889C0;
    --lavender-l:       #B5A9D3;
    --lavender-ll:      #D4CDE5;
    --lavender-lll:     #EDE9F4;
    --lavender-d:       #7B6EA8;
    --lavender-dd:      #6A5E98;
    --lavender-20:      rgba(152, 137, 192, 0.20);
    --lavender-10:      rgba(152, 137, 192, 0.10);
    --lavender-08:      rgba(152, 137, 192, 0.08);

    /* 2030 Accent — a whisper of magenta-violet for glow moments */
    --iris:             #C49CE0;
    --iris-soft:        rgba(196, 156, 224, 0.55);
    --iris-glow:        rgba(196, 156, 224, 0.18);
    --horizon:          #7BB0FF;
    --horizon-soft:     rgba(123, 176, 255, 0.25);

    --white:            #FFFFFF;
    --ice:              #F8F6FD;
    --off-white:        #FAFAFC;
    --athens:           #E5E7EB;
    --athens-l:         #F2F3F6;
    --steel:            #241E31;
    --steel-d:          #15111F;

    --ink:              #1A1530;
    --ink-2:            #4A4368;
    --ink-3:            #8B86A8;
    --ink-4:            #B8B4CC;

    /* --- Gradient System --- */
    --mesh-hero: 
        radial-gradient(at var(--mesh-x, 30%) var(--mesh-y, 20%), rgba(152, 137, 192, 0.40) 0px, transparent 50%),
        radial-gradient(at 75% 80%, rgba(196, 156, 224, 0.28) 0px, transparent 55%),
        radial-gradient(at 10% 95%, rgba(123, 176, 255, 0.18) 0px, transparent 45%),
        radial-gradient(at 95% 10%, rgba(45, 39, 105, 0.90) 0px, transparent 60%),
        linear-gradient(160deg, #0A0820 0%, #15123A 45%, #2D2769 100%);

    --mesh-dark:
        radial-gradient(at 85% 15%, rgba(152, 137, 192, 0.16) 0px, transparent 50%),
        radial-gradient(at 15% 85%, rgba(196, 156, 224, 0.10) 0px, transparent 55%),
        linear-gradient(165deg, #0A0820 0%, #15123A 40%, #1E1A4A 100%);

    --mesh-light:
        radial-gradient(at 85% 15%, rgba(152, 137, 192, 0.09) 0px, transparent 55%),
        radial-gradient(at 15% 85%, rgba(196, 156, 224, 0.06) 0px, transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F8F6FD 100%);

    --grad-accent:      linear-gradient(90deg, #2D2769 0%, #9889C0 50%, #C49CE0 100%);
    --grad-accent-v:    linear-gradient(180deg, #2D2769 0%, #9889C0 100%);
    --grad-text:        linear-gradient(92deg, #2D2769 0%, #7B6EA8 40%, #C49CE0 100%);
    --grad-text-light:  linear-gradient(92deg, #FFFFFF 0%, #D4CDE5 45%, #C49CE0 100%);

    /* --- Shadows (layered for depth) --- */
    --shadow-sm:        0 1px 2px rgba(45,39,105,0.04), 0 2px 8px rgba(45,39,105,0.05);
    --shadow:           0 4px 12px rgba(45,39,105,0.06), 0 12px 36px rgba(45,39,105,0.10);
    --shadow-lg:        0 8px 24px rgba(45,39,105,0.10), 0 28px 64px rgba(45,39,105,0.16);
    --shadow-xl:        0 16px 40px rgba(45,39,105,0.12), 0 48px 96px rgba(45,39,105,0.20);
    --shadow-glow:      0 0 80px rgba(196, 156, 224, 0.25), 0 0 40px rgba(152, 137, 192, 0.3);
    --shadow-rim:       inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.12);

    /* --- Typography --- */
    --ff-display:       'Cyberiada Medium', 'Inter', sans-serif;
    --ff-tag:           'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --ff-heading:       'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --ff-body:          'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --ff-mono:          'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;

    /* --- Spacing System (modular) --- */
    --s-1:   0.25rem;
    --s-2:   0.5rem;
    --s-3:   0.75rem;
    --s-4:   1rem;
    --s-5:   1.5rem;
    --s-6:   2rem;
    --s-7:   3rem;
    --s-8:   4rem;
    --s-9:   6rem;
    --s-10:  8rem;
    --s-11:  12rem;
    --s-12:  16rem;

    /* --- Layout --- */
    --rail-w:           88px;
    --rail-w-mobile:    0px;
    --container:        1200px;
    --container-narrow: 840px;
    --container-wide:   1440px;
    --pad-x:            2.5rem;
    --pad-x-mobile:     1.25rem;

    /* --- Radii --- */
    --r-sm:   6px;
    --r:      14px;
    --r-lg:   24px;
    --r-xl:   40px;
    --r-pill: 999px;

    /* --- Motion --- */
    --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:     cubic-bezier(0.45, 0, 0.55, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    --t-fast:      160ms;
    --t:           320ms;
    --t-slow:      600ms;
    --t-reveal:    1000ms;
    --t-cine:      1400ms;

    /* Scroll-driven progress (set by JS) */
    --scroll: 0;
    --mouse-x: 50%;
    --mouse-y: 50%;
}

/* ============================================================================
   4. RESET & BASE
   ============================================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--ff-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern', 'liga', 'calt', 'ss01';
    text-rendering: optimizeLegibility;
}

img, svg, video {
    max-width: 100%;
    display: block;
    height: auto;
}

a {
    color: var(--jacarta);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}

a:hover {
    color: var(--lavender);
}

::selection {
    background: var(--iris);
    color: var(--white);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--lavender-d);
    border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--jacarta); }

:focus-visible {
    outline: 2px solid var(--iris);
    outline-offset: 3px;
    border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

/* ============================================================================
   5. NOISE GRAIN OVERLAY — subtle, film-like, elevates everything
   ============================================================================ */
.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.15 0 0 0 0 0.41 0 0 0 0.95 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================================
   6. TYPOGRAPHY
   ============================================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-heading);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--jacarta);
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.75rem, 6.5vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.035em;
    font-weight: 800;
}

h2 {
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
}

h3 {
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h4 {
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

h5 {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
}

p {
    color: var(--ink);
    margin-bottom: 1.25em;
    text-wrap: pretty;
    max-width: 68ch;
}

p:last-child { margin-bottom: 0; }

.lead {
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    line-height: 1.5;
    color: var(--ink-2);
    font-weight: 400;
    letter-spacing: -0.015em;
    margin-bottom: 2rem;
    max-width: 32ch;
    text-wrap: balance;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--ff-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--lavender-d);
}

.eyebrow::before {
    content: '';
    width: 32px;
    height: 1px;
    background: currentColor;
}

.display {
    font-family: var(--ff-display);
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 0.95;
}

.tagline {
    font-family: var(--ff-tag);
    font-weight: 500;
    letter-spacing: -0.02em;
}

.gradient-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.dark .gradient-text,
.section-dark .gradient-text {
    background: var(--grad-text-light);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

blockquote, .quote {
    font-family: var(--ff-body);
    font-weight: 600;
    font-style: italic;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    line-height: 1.35;
    color: var(--jacarta);
    padding: 1rem 0 1rem 2rem;
    margin: 3rem 0;
    position: relative;
    text-wrap: balance;
    border-left: 2px solid var(--iris);
}

.quote-attr {
    display: block;
    font-style: normal;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--lavender-d);
    margin-top: 1rem;
}

strong, b { font-weight: 700; color: var(--jacarta); }
em, i { font-style: italic; }

code, kbd {
    font-family: var(--ff-mono);
    font-size: 0.88em;
    background: var(--lavender-10);
    padding: 0.1em 0.45em;
    border-radius: 4px;
    color: var(--jacarta-l);
    border: 1px solid var(--lavender-20);
}

/* ============================================================================
   7. SCROLL PROGRESS RAIL (top edge)
   ============================================================================ */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    z-index: 110;
    pointer-events: none;
}

.scroll-progress-bar {
    height: 100%;
    width: 100%;
    background: var(--grad-accent);
    transform-origin: 0 50%;
    transform: scaleX(calc(var(--scroll, 0) * 1));
    box-shadow: 0 0 20px rgba(196, 156, 224, 0.55);
}

/* ============================================================================
   8. LEFT RAIL — the signature brand anchor
   Vertical spine with the Aristos mark, rotated wordmark, and chapter dots
   ============================================================================ */
.rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--rail-w);
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0 1.75rem;
    mix-blend-mode: normal;
    pointer-events: auto;
    background: transparent;
    border-right: 1px solid transparent;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}

/* rail gets a subtle glass panel once you scroll past hero */
.scrolled .rail {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-right-color: var(--athens);
}

.rail-mark {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-image: url('../img/favicon.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform var(--t) var(--ease-spring), filter var(--t) var(--ease);
    position: relative;
}

.rail-mark::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: border-color var(--t) var(--ease);
}

.rail-mark:hover {
    transform: rotate(-8deg) scale(1.06);
}

.rail-mark:hover::after {
    border-color: var(--lavender);
}

.rail-wordmark {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--lavender-d);
    white-space: nowrap;
    line-height: 1;
    padding: 1rem 0;
}

.rail-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    list-style: none;
    padding: 0;
}

.rail-dot {
    position: relative;
    width: 10px;
    height: 10px;
    display: block;
    cursor: pointer;
}

.rail-dot::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--lavender);
    opacity: 0.35;
    transition: all var(--t) var(--ease-out);
}

.rail-dot:hover::before {
    opacity: 1;
    inset: 1px;
}

.rail-dot.active::before {
    opacity: 1;
    inset: 0;
    background: var(--iris);
    box-shadow: 0 0 16px rgba(196, 156, 224, 0.8);
}

.rail-dot-label {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    margin-left: 0.75rem;
    font-family: var(--ff-heading);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--jacarta);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all var(--t) var(--ease-out);
    background: var(--white);
    padding: 0.35rem 0.7rem;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-sm);
}

.rail-dot:hover .rail-dot-label,
.rail-dot.active .rail-dot-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.rail-foot {
    font-family: var(--ff-heading);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
    line-height: 1;
}

/* Hero state: rail text is white */
.hero-in-view .rail-wordmark,
.hero-in-view .rail-foot {
    color: var(--lavender-ll);
}
.hero-in-view .rail-dot::before {
    background: var(--lavender-ll);
}

/* On dark sections, adapt rail colors */
body.on-dark:not(.hero-in-view) .rail {
    background: rgba(10, 8, 32, 0.56);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-right-color: rgba(152, 137, 192, 0.14);
}
body.on-dark .rail-wordmark,
body.on-dark .rail-foot {
    color: var(--lavender-l);
}
body.on-dark .rail-dot::before {
    background: var(--lavender-l);
}
body.on-dark .rail-dot-label {
    background: var(--jacarta-dd);
    color: var(--lavender-ll);
}

@media (max-width: 900px) {
    .rail {
        width: 100%;
        height: 56px;
        bottom: auto;
        flex-direction: row;
        padding: 0 1rem;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: saturate(160%) blur(18px);
        -webkit-backdrop-filter: saturate(160%) blur(18px);
        border-right: none;
        border-bottom: 1px solid var(--athens);
    }
    .rail-wordmark, .rail-foot {
        writing-mode: horizontal-tb;
        transform: none;
        padding: 0;
    }
    .rail-dots {
        flex-direction: row;
        gap: 0.55rem;
    }
    .rail-dot-label {
        display: none;
    }
    body.hero-in-view .rail {
        background: transparent;
        backdrop-filter: none;
        border-bottom-color: transparent;
    }
    :root { --rail-w: 0px; }
    body { padding-top: 56px; }
}

/* ============================================================================
   9. TOP-RIGHT CORNER META (minimal, floating)
   ============================================================================ */
.corner-tr {
    position: fixed;
    top: 1.75rem;
    right: 2rem;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-family: var(--ff-heading);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ink-3);
    pointer-events: none;
}

.corner-tr > * { pointer-events: auto; }

.corner-tr .current-section {
    min-width: 120px;
    text-align: right;
    color: var(--jacarta);
    transition: opacity var(--t) var(--ease);
}

.corner-tr .print-btn {
    color: var(--ink-3);
    transition: color var(--t-fast) var(--ease);
    cursor: pointer;
    border: none;
    background: transparent;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    padding: 0;
}

.corner-tr .print-btn:hover { color: var(--jacarta); }

body.on-dark .corner-tr { color: var(--lavender-l); }
body.on-dark .corner-tr .current-section { color: var(--white); }
body.on-dark .corner-tr .print-btn { color: var(--lavender-l); }
body.on-dark .corner-tr .print-btn:hover { color: var(--white); }
body.hero-in-view .corner-tr { color: var(--lavender-l); }
body.hero-in-view .corner-tr .current-section { color: var(--lavender-ll); }
body.hero-in-view .corner-tr .print-btn { color: var(--lavender-l); }
body.hero-in-view .corner-tr .print-btn:hover { color: var(--white); }

@media (max-width: 900px) {
    .corner-tr { display: none; }
}

/* ============================================================================
   9b. ENTER ATLAS — corner button + cinematic closing CTA
   ============================================================================ */
.enter-atlas-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem 0.5rem 0.7rem;
    font-family: var(--ff-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
    border-radius: var(--r-pill);
    background: linear-gradient(92deg, rgba(45,39,105,0.95), rgba(152,137,192,0.95));
    border: 1px solid rgba(196, 156, 224, 0.45);
    box-shadow: 0 6px 22px rgba(45, 39, 105, 0.32), inset 0 1px 0 rgba(255,255,255,0.12);
    transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease),
                background var(--t) var(--ease), letter-spacing var(--t) var(--ease-out);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.enter-atlas-btn::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, transparent 30%, rgba(196, 156, 224, 0.9) 50%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--t) var(--ease);
    pointer-events: none;
}

.enter-atlas-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(45, 39, 105, 0.42), 0 0 30px rgba(196, 156, 224, 0.35), inset 0 1px 0 rgba(255,255,255,0.14);
    letter-spacing: 0.16em;
    color: var(--white);
}
.enter-atlas-btn:hover::before { opacity: 1; }

.enter-atlas-btn:hover .enter-atlas-arrow { transform: translateX(3px); }

.enter-atlas-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--iris);
    box-shadow: 0 0 10px var(--iris-soft), 0 0 3px var(--iris);
    animation: enter-pulse 2.2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes enter-pulse {
    0%, 100% { transform: scale(1);   box-shadow: 0 0 10px var(--iris-soft), 0 0 3px var(--iris); }
    50%      { transform: scale(1.2); box-shadow: 0 0 18px var(--iris-soft), 0 0 6px var(--iris); }
}

.enter-atlas-arrow {
    width: 14px;
    height: 14px;
    transition: transform var(--t) var(--ease-out);
    flex-shrink: 0;
}

body.on-dark .enter-atlas-btn,
body.hero-in-view .enter-atlas-btn {
    background: linear-gradient(92deg, rgba(45,39,105,0.6), rgba(152,137,192,0.55));
    border-color: rgba(196, 156, 224, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 900px) {
    .enter-atlas-btn { display: none; }
}

/* ---- Cinematic closing CTA ---- */
.closing-cta {
    margin: 3rem auto 2.5rem;
    max-width: 640px;
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.enter-atlas-cta {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1.35rem 1.75rem 1.35rem 2rem;
    width: 100%;
    text-decoration: none;
    color: var(--white);
    background:
        radial-gradient(600px circle at 110% 0%, rgba(196, 156, 224, 0.35), transparent 50%),
        radial-gradient(500px circle at -10% 120%, rgba(152, 137, 192, 0.25), transparent 55%),
        linear-gradient(92deg, #15123A 0%, #2D2769 55%, #3D3580 100%);
    border: 1px solid rgba(196, 156, 224, 0.32);
    border-radius: var(--r-lg);
    box-shadow: 0 14px 50px rgba(10, 8, 32, 0.55), 0 0 48px rgba(196, 156, 224, 0.18), inset 0 1px 0 rgba(255,255,255,0.08);
    overflow: hidden;
    transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease);
}

.enter-atlas-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(196, 156, 224, 0.14) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform var(--t-cine) var(--ease-out);
    pointer-events: none;
}

.enter-atlas-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 70px rgba(10, 8, 32, 0.65), 0 0 80px rgba(196, 156, 224, 0.35), inset 0 1px 0 rgba(255,255,255,0.12);
}
.enter-atlas-cta:hover::before { transform: translateX(100%); }
.enter-atlas-cta:hover .enter-atlas-cta-arrow { transform: translateX(6px); }

.enter-atlas-cta-label {
    font-family: var(--ff-display);
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--white);
    line-height: 1.1;
    display: block;
    position: relative;
    z-index: 1;
}

.enter-atlas-cta-sub {
    display: block;
    font-family: var(--ff-heading);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--iris);
    margin-top: 0.45rem;
    position: relative;
    z-index: 1;
}

.enter-atlas-cta-arrow {
    width: 44px;
    height: 44px;
    padding: 12px;
    border-radius: 50%;
    background: rgba(196, 156, 224, 0.14);
    border: 1px solid rgba(196, 156, 224, 0.35);
    color: var(--iris);
    transition: transform var(--t) var(--ease-out), background var(--t) var(--ease);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.enter-atlas-cta:hover .enter-atlas-cta-arrow {
    background: rgba(196, 156, 224, 0.24);
    color: var(--white);
}

@media (max-width: 560px) {
    .enter-atlas-cta { grid-template-columns: 1fr; text-align: left; }
    .enter-atlas-cta-arrow { justify-self: flex-end; }
}

/* ============================================================================
   10. MAIN — content sits to the right of the rail
   ============================================================================ */
.main {
    padding-left: var(--rail-w);
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .main { padding-left: 0; }
}

/* ============================================================================
   11. SECTION BASE
   ============================================================================ */
section {
    position: relative;
    padding: clamp(5rem, 10vw, 10rem) 0;
    overflow: hidden;
}

.section-dark {
    background: var(--mesh-dark);
    color: var(--lavender-lll);
}

.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5 {
    color: var(--white);
}
.section-dark .eyebrow { color: var(--lavender-l); }
.section-dark p { color: var(--lavender-ll); }
.section-dark strong { color: var(--white); }
.section-dark .lead { color: var(--lavender-ll); }
.section-dark code {
    background: rgba(152, 137, 192, 0.14);
    border-color: rgba(152, 137, 192, 0.24);
    color: var(--lavender-ll);
}

.section-tint {
    background: var(--mesh-light);
}

/* Ghost section number — oversized Cyberiada glyph bleeding off-edge */
.ghost-num {
    position: absolute;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(14rem, 34vw, 32rem);
    line-height: 0.8;
    color: var(--jacarta);
    opacity: 0.035;
    letter-spacing: -0.05em;
    user-select: none;
    pointer-events: none;
    z-index: 0;
}

.ghost-num.tr { top: -4rem; right: -2rem; }
.ghost-num.tl { top: -4rem; left: -2rem; }
.ghost-num.br { bottom: -6rem; right: -4rem; }
.ghost-num.bl { bottom: -6rem; left: -4rem; }

.section-dark .ghost-num {
    color: var(--lavender);
    opacity: 0.06;
}

/* Ghost ATLAS wordmark as section watermark */
.ghost-word {
    position: absolute;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(10rem, 26vw, 22rem);
    line-height: 1;
    color: var(--jacarta);
    opacity: 0.025;
    letter-spacing: 0.08em;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
}

.section-dark .ghost-word {
    color: var(--lavender);
    opacity: 0.05;
}

/* ============================================================================
   12. LAYOUT CONTAINERS
   ============================================================================ */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--pad-x);
    position: relative;
    z-index: 2;
}

.container-narrow {
    width: 100%;
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding-inline: var(--pad-x);
    position: relative;
    z-index: 2;
}

.container-wide {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--pad-x);
    position: relative;
    z-index: 2;
}

/* ============================================================================
   13. HERO — CINEMATIC COVER
   Mesh-gradient background, cursor spotlight, floating orbital A mark,
   kinetic ATLAS wordmark, staggered letter reveal.
   ============================================================================ */
.hero {
    min-height: 100vh;
    background: var(--mesh-hero);
    color: var(--white);
    position: relative;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Cursor spotlight (follows pointer via JS setting --mouse-x, --mouse-y) */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(196, 156, 224, 0.18),
        transparent 45%
    );
    pointer-events: none;
    z-index: 2;
    transition: background 80ms linear;
}

/* Subtle drifting glow layer */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(800px circle at 20% 110%, rgba(123, 176, 255, 0.10), transparent 45%),
        radial-gradient(700px circle at 90% -10%, rgba(196, 156, 224, 0.14), transparent 45%);
    pointer-events: none;
    z-index: 1;
    animation: drift 18s ease-in-out infinite alternate;
}

@keyframes drift {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(-20px, 10px, 0); }
    100% { transform: translate3d(15px, -15px, 0); }
}

/* FLOATING ORBITAL MARK — the signature brand moment */
.hero-orbit {
    position: absolute;
    top: 50%;
    right: clamp(2rem, 12vw, 15rem);
    transform: translateY(-50%);
    width: clamp(340px, 46vw, 640px);
    height: clamp(340px, 46vw, 640px);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    animation: orbit-enter 2s var(--ease-out) 0.6s forwards,
               orbit-drift 14s ease-in-out 2.6s infinite alternate;
}

.hero-orbit img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 40px 120px rgba(196, 156, 224, 0.55))
            drop-shadow(0 0 80px rgba(152, 137, 192, 0.4));
}

/* Orbital glow ring */
.hero-orbit::before {
    content: '';
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    background: conic-gradient(
        from var(--orbit-rot, 0deg),
        transparent 0deg,
        rgba(196, 156, 224, 0.14) 60deg,
        transparent 120deg,
        rgba(152, 137, 192, 0.10) 200deg,
        transparent 260deg,
        rgba(196, 156, 224, 0.16) 320deg,
        transparent 360deg
    );
    animation: orbit-spin 22s linear infinite;
    filter: blur(30px);
    z-index: -1;
}

@keyframes orbit-spin {
    to { --orbit-rot: 360deg; transform: rotate(360deg); }
}

@keyframes orbit-enter {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.85) rotate(-12deg);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1) rotate(0deg);
    }
}

@keyframes orbit-drift {
    0%   { transform: translateY(-50%) translate(0, 0); }
    50%  { transform: translateY(-50%) translate(-20px, 18px); }
    100% { transform: translateY(-50%) translate(14px, -12px); }
}

/* HERO CONTENT */
.hero-inner {
    position: relative;
    z-index: 4;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 7rem 0 5rem;
}

.hero-content {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--pad-x);
    width: 100%;
}

.hero-cluster {
    max-width: 900px;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    border: 1px solid rgba(152, 137, 192, 0.35);
    border-radius: var(--r-pill);
    font-family: var(--ff-heading);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--lavender-ll);
    background: rgba(10, 8, 32, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 2.5rem;
}

.hero-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--iris);
    box-shadow: 0 0 10px var(--iris-soft);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(1.3); }
}

/* The ATLAS wordmark — massive, cinematic, kinetic-entry */
.hero-title {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(5rem, 18vw, 18rem);
    line-height: 0.88;
    letter-spacing: 0.02em;
    color: var(--white);
    margin: 0 0 2rem;
    display: flex;
    gap: 0.02em;
    text-shadow: 0 4px 60px rgba(10, 8, 32, 0.4);
}

.hero-title .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.4em) rotate(6deg);
    animation: char-in 1.4s var(--ease-out) forwards;
    position: relative;
}

.hero-title .char:nth-child(1) { animation-delay: 0.15s; }
.hero-title .char:nth-child(2) { animation-delay: 0.25s; }
.hero-title .char:nth-child(3) { animation-delay: 0.35s; }
.hero-title .char:nth-child(4) { animation-delay: 0.45s; }
.hero-title .char:nth-child(5) { animation-delay: 0.55s; }

@keyframes char-in {
    0% {
        opacity: 0;
        transform: translateY(0.5em) rotate(8deg) scale(0.95);
        filter: blur(12px);
    }
    60% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0) scale(1);
        filter: blur(0);
    }
}

.hero-tagline {
    font-family: var(--ff-tag);
    font-size: clamp(1.5rem, 3.4vw, 2.6rem);
    font-weight: 400;
    font-style: italic;
    color: var(--lavender-ll);
    line-height: 1.25;
    letter-spacing: -0.025em;
    max-width: 720px;
    margin-bottom: 2.5rem;
    opacity: 0;
    transform: translateY(16px);
    animation: fade-up 1.2s var(--ease-out) 1.2s forwards;
}

.hero-tagline em {
    color: var(--iris);
    font-style: italic;
}

@keyframes fade-up {
    to { opacity: 1; transform: translateY(0); }
}

.hero-subtitle {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: var(--lavender-l);
    max-width: 560px;
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(16px);
    animation: fade-up 1.2s var(--ease-out) 1.4s forwards;
}

.hero-meta {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(152, 137, 192, 0.2);
    font-family: var(--ff-heading);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--lavender-l);
    opacity: 0;
    transform: translateY(16px);
    animation: fade-up 1.2s var(--ease-out) 1.6s forwards;
}

.hero-meta span { position: relative; }
.hero-meta span:not(:last-child)::after {
    content: '/';
    margin-left: 2rem;
    color: var(--lavender-d);
    font-weight: 400;
}

/* Bottom-left lockup — Aristos primary logo as the "signature" */
.hero-sig {
    position: absolute;
    bottom: 2.5rem;
    left: calc(var(--rail-w) + 2.5rem);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    animation: fade-up 1s var(--ease-out) 1.8s forwards;
}

.hero-sig img {
    height: 32px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.hero-sig-text {
    font-family: var(--ff-heading);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--lavender-l);
    padding-left: 0.75rem;
    border-left: 1px solid rgba(152, 137, 192, 0.35);
}

/* Bottom-right scroll indicator */
.hero-scroll {
    position: absolute;
    bottom: 2.5rem;
    right: 2.5rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.8rem;
    font-family: var(--ff-heading);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--lavender-l);
    opacity: 0;
    animation: fade-up 1s var(--ease-out) 2s forwards, hero-bounce 2.5s var(--ease-out) 3s infinite;
}

.hero-scroll-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(180deg, var(--lavender-l) 0%, transparent 100%);
}

@keyframes hero-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

@media (max-width: 900px) {
    .hero-orbit {
        right: -15%;
        width: 80vw;
        height: 80vw;
        top: 58%;
        opacity: 0.35 !important;
    }
    .hero-sig { left: 1.25rem; bottom: 1.5rem; }
    .hero-scroll { right: 1.25rem; bottom: 1.5rem; }
    .hero-inner { padding: 6rem 0 6rem; }
}

/* ============================================================================
   14. EDITORIAL SECTION LAYOUT
   Two-col asymmetric: sticky aside with eyebrow + section number on left,
   flowing content on right. Magazine feel.
   ============================================================================ */
.editorial {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: flex-start;
}

.editorial-aside {
    position: sticky;
    top: 12vh;
    align-self: flex-start;
}

.editorial-aside .section-no {
    font-family: var(--ff-display);
    font-size: 4.5rem;
    line-height: 1;
    color: var(--lavender);
    margin-bottom: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.editorial-aside .section-label {
    font-family: var(--ff-heading);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--jacarta);
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--athens);
}

.editorial-aside .section-hint {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ink-3);
    font-style: italic;
}

.section-dark .editorial-aside .section-label {
    color: var(--lavender-l);
    border-bottom-color: rgba(152, 137, 192, 0.2);
}

.section-dark .editorial-aside .section-hint {
    color: var(--lavender-d);
}

.editorial-main > h2,
.editorial-main > h3 {
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .editorial {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .editorial-aside {
        position: static;
        display: flex;
        align-items: flex-end;
        gap: 1.25rem;
    }
    .editorial-aside .section-no {
        font-size: 3rem;
        margin: 0;
    }
    .editorial-aside .section-label {
        border: none;
        padding: 0;
        margin: 0;
        flex: 1;
    }
    .editorial-aside .section-hint {
        display: none;
    }
}

/* ============================================================================
   15. ACCENT RULE / BAR
   ============================================================================ */
.accent-bar {
    display: block;
    width: 56px;
    height: 2px;
    background: var(--grad-accent);
    margin: 2rem 0 1.5rem;
    border-radius: 2px;
}

.accent-bar-wide { width: 120px; height: 3px; }

hr, .rule {
    border: 0;
    height: 1px;
    background: var(--athens);
    margin: 4rem 0;
}

.section-dark hr, .section-dark .rule {
    background: rgba(152, 137, 192, 0.2);
}

/* ============================================================================
   16. PROBLEM CARDS — asymmetric broken grid
   ============================================================================ */
.problems {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    margin-top: 4rem;
}

.problem-card {
    padding: 2.25rem 2rem;
    background: var(--white);
    border: 1px solid var(--athens);
    border-radius: var(--r-lg);
    position: relative;
    transition: transform var(--t) var(--ease-out),
                box-shadow var(--t) var(--ease-out),
                border-color var(--t) var(--ease);
    overflow: hidden;
}

.problem-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 2px;
    background: var(--grad-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-slow) var(--ease-out);
}

.problem-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--lavender);
}

.problem-card:hover::before { transform: scaleX(1); }

.problem-card .pc-num {
    font-family: var(--ff-display);
    font-size: 1.35rem;
    color: var(--lavender);
    margin-bottom: 1rem;
    display: block;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.problem-card h4 {
    color: var(--jacarta);
    margin-bottom: 0.6rem;
    font-size: 1.15rem;
    letter-spacing: -0.015em;
}

.problem-card p {
    font-size: 0.95rem;
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0;
    max-width: none;
}

/* Broken-grid placements (12-col) */
.problems .pc-1 { grid-column: span 7; }
.problems .pc-2 { grid-column: span 5; }
.problems .pc-3 { grid-column: span 5; }
.problems .pc-4 { grid-column: span 7; }

@media (max-width: 900px) {
    .problems { grid-template-columns: 1fr; }
    .problems > * { grid-column: span 1 !important; }
}

/* ============================================================================
   17. PRINCIPLES (THE 4 INVERSION PRINCIPLES) — editorial cards
   ============================================================================ */
.principles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 3rem;
}

.principle {
    padding: 2.5rem;
    background: var(--white);
    border: 1px solid var(--athens);
    border-radius: var(--r-lg);
    position: relative;
    transition: all var(--t) var(--ease-out);
    overflow: hidden;
}

.principle:hover {
    border-color: var(--lavender);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.principle-num {
    font-family: var(--ff-display);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--iris);
    margin-bottom: 1rem;
}

.principle-title {
    font-family: var(--ff-heading);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--jacarta);
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
}

.principle-sub {
    font-size: 1rem;
    color: var(--iris);
    font-weight: 600;
    font-style: italic;
    margin-bottom: 1.25rem;
    letter-spacing: -0.005em;
}

.principle p {
    font-size: 0.98rem;
    color: var(--ink-2);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 720px) {
    .principles { grid-template-columns: 1fr; }
    .principle { padding: 2rem 1.5rem; }
}

/* ============================================================================
   18. PILLAR PANELS (DEEP DIVE) — cinematic full-width alternating
   ============================================================================ */
.pillar-panel {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
    padding: clamp(4rem, 8vw, 6rem) 0;
    border-top: 1px solid var(--athens);
    position: relative;
}

.pillar-panel:first-child { border-top: none; }

.pillar-panel.reverse {
    grid-template-columns: 1.2fr 1fr;
}

.pillar-panel.reverse .pillar-panel-visual {
    order: 2;
}

.pillar-panel-visual {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-xl);
    background: var(--mesh-dark);
    overflow: hidden;
    box-shadow: var(--shadow-lg), var(--shadow-rim);
}

.pillar-panel-visual::before {
    content: attr(data-num);
    position: absolute;
    top: 2rem;
    left: 2rem;
    font-family: var(--ff-display);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--lavender-l);
    z-index: 2;
}

.pillar-panel-visual::after {
    content: attr(data-label);
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
    font-family: var(--ff-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 0.9;
    color: var(--white);
    font-weight: 500;
    letter-spacing: 0.03em;
    z-index: 2;
    text-shadow: 0 2px 30px rgba(10, 8, 32, 0.5);
}

/* Visual motif layers — each pillar has its own signature */
.pillar-visual-capture {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(152, 137, 192, 0.35), transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(196, 156, 224, 0.28), transparent 55%),
        linear-gradient(160deg, #15123A 0%, #2D2769 100%);
}

.pillar-visual-capture .signal-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(152, 137, 192, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(152, 137, 192, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.pillar-visual-memory {
    background:
        radial-gradient(ellipse at 70% 30%, rgba(196, 156, 224, 0.32), transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(152, 137, 192, 0.30), transparent 55%),
        linear-gradient(165deg, #1E1A4A 0%, #2D2769 100%);
}

.pillar-visual-brief {
    background:
        radial-gradient(ellipse at 50% 15%, rgba(196, 156, 224, 0.38), transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(123, 176, 255, 0.15), transparent 50%),
        linear-gradient(180deg, #15123A 0%, #2D2769 100%);
}

.pillar-visual-do {
    background:
        radial-gradient(ellipse at 90% 40%, rgba(196, 156, 224, 0.40), transparent 50%),
        radial-gradient(ellipse at 10% 60%, rgba(152, 137, 192, 0.32), transparent 55%),
        linear-gradient(155deg, #1E1A4A 0%, #15123A 100%);
}

/* Floating particles inside the visual */
.particles {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--iris);
    box-shadow: 0 0 14px var(--iris-soft), 0 0 30px rgba(196, 156, 224, 0.3);
    animation: particle-drift 8s ease-in-out infinite alternate;
}

.particle:nth-child(2) { background: var(--lavender-l); box-shadow: 0 0 14px rgba(181, 169, 211, 0.7); }
.particle:nth-child(3) { background: var(--horizon); box-shadow: 0 0 14px var(--horizon-soft); }

@keyframes particle-drift {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
    50%      { transform: translate(12px, -18px) scale(1.15); opacity: 1; }
}

.pillar-panel-content .pillar-kicker {
    font-family: var(--ff-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--iris);
    margin-bottom: 1rem;
}

.pillar-panel-content h3 {
    font-size: clamp(2rem, 3.8vw, 3rem);
    color: var(--jacarta);
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
    font-weight: 800;
    line-height: 1.05;
}

.pillar-panel-content .pillar-deck {
    font-size: 1.15rem;
    color: var(--ink-2);
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 2rem;
    max-width: 52ch;
    font-style: italic;
}

.pillar-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    margin: 2rem 0 0;
}

.pillar-list li {
    padding-left: 1.75rem;
    position: relative;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ink);
    max-width: none;
}

.pillar-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 10px;
    height: 2px;
    background: var(--iris);
    border-radius: 2px;
}

@media (max-width: 900px) {
    .pillar-panel,
    .pillar-panel.reverse {
        grid-template-columns: 1fr;
    }
    .pillar-panel.reverse .pillar-panel-visual { order: 0; }
    .pillar-panel-visual {
        aspect-ratio: 16 / 10;
        max-height: 380px;
    }
    .pillar-panel-visual::after {
        font-size: 2.5rem;
    }
}

/* ============================================================================
   19. ARCHITECTURE FLOW — vertical progression with connector line
   ============================================================================ */
.flow {
    position: relative;
    margin: 4rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 760px;
}

.flow::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 30px;
    bottom: 30px;
    width: 1px;
    background: linear-gradient(180deg,
        rgba(152, 137, 192, 0) 0%,
        var(--lavender) 10%,
        var(--lavender) 90%,
        rgba(152, 137, 192, 0) 100%
    );
}

.flow-node {
    position: relative;
    padding: 1.5rem 1.75rem 1.5rem 4.5rem;
    background: rgba(152, 137, 192, 0.06);
    border: 1px solid rgba(152, 137, 192, 0.16);
    border-radius: var(--r-lg);
    transition: all var(--t) var(--ease);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.flow-node:hover {
    border-color: var(--iris);
    background: rgba(196, 156, 224, 0.08);
    transform: translateX(4px);
}

.flow-node::before {
    content: attr(data-num);
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--jacarta-dd);
    border: 2px solid var(--iris);
    display: grid;
    place-items: center;
    font-family: var(--ff-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--iris);
    box-shadow: 0 0 0 4px var(--jacarta-ddd), 0 0 20px rgba(196, 156, 224, 0.4);
    z-index: 2;
}

.flow-label {
    font-family: var(--ff-heading);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--iris);
    margin-bottom: 0.35rem;
}

.flow-title {
    font-family: var(--ff-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.3rem;
    letter-spacing: -0.015em;
}

.flow-desc {
    font-size: 0.95rem;
    color: var(--lavender-ll);
    line-height: 1.55;
}

/* Fan-out (four parallel output nodes) */
.flow-fan {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 0;
    padding-left: 4.5rem;
    position: relative;
}

.flow-fan::before {
    content: '';
    position: absolute;
    left: 28px;
    top: -30px;
    width: 1px;
    height: 30px;
    background: var(--lavender);
}

.flow-fan-item {
    padding: 1rem 1rem;
    background: rgba(152, 137, 192, 0.06);
    border: 1px solid rgba(152, 137, 192, 0.16);
    border-radius: var(--r);
    text-align: center;
    transition: all var(--t) var(--ease);
}

.flow-fan-item:hover {
    border-color: var(--iris);
    transform: translateY(-3px);
}

.flow-fan-item .flow-label { margin-bottom: 0.25rem; }
.flow-fan-item .flow-title { font-size: 1rem; }

@media (max-width: 700px) {
    .flow-fan { grid-template-columns: repeat(2, 1fr); padding-left: 0; }
    .flow-fan::before { display: none; }
}

/* ============================================================================
   20. TECH CHIPS / MARQUEE
   ============================================================================ */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 1.5rem 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    background: rgba(152, 137, 192, 0.12);
    border: 1px solid rgba(152, 137, 192, 0.25);
    border-radius: var(--r-pill);
    font-family: var(--ff-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--lavender-ll);
    letter-spacing: 0.02em;
    transition: all var(--t-fast) var(--ease);
    cursor: default;
    position: relative;
}

.chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--iris);
    box-shadow: 0 0 8px var(--iris-soft);
}

.chip:hover {
    background: var(--iris);
    color: var(--jacarta-ddd);
    border-color: var(--iris);
    transform: translateY(-2px);
}

.chip:hover::before { background: var(--jacarta-ddd); box-shadow: none; }

/* Horizontal marquee (infinite loop) */
.marquee {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    padding: 1rem 0;
}

.marquee-track {
    display: flex;
    gap: 2rem;
    animation: marquee 28s linear infinite;
    width: max-content;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.marquee-item {
    font-family: var(--ff-display);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--jacarta);
    opacity: 0.15;
    white-space: nowrap;
    flex-shrink: 0;
}

.marquee-item .dot {
    color: var(--iris);
    margin: 0 1.5rem;
    opacity: 0.6;
}

.section-dark .marquee-item {
    color: var(--lavender);
    opacity: 0.25;
}

/* ============================================================================
   21. SCENARIOS — film-strip storytelling
   ============================================================================ */
.scenarios {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
}

.scenario {
    background: var(--white);
    border: 1px solid var(--athens);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t) var(--ease-out),
                transform var(--t) var(--ease-out),
                border-color var(--t) var(--ease);
    position: relative;
}

.scenario:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--lavender);
}

.scenario-head {
    padding: 2rem 2.5rem;
    border-bottom: 1px solid var(--athens);
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    position: relative;
    background: linear-gradient(90deg, rgba(196, 156, 224, 0.04), rgba(152, 137, 192, 0.02));
}

.scenario-head::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--grad-accent);
}

.scenario-code {
    font-family: var(--ff-display);
    font-size: 2rem;
    font-weight: 500;
    color: var(--iris);
    line-height: 1;
    letter-spacing: 0.04em;
    min-width: 80px;
    padding-top: 0.15rem;
}

.scenario-title-group { flex: 1; }

.scenario-tag {
    font-family: var(--ff-heading);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--lavender-d);
    margin-bottom: 0.5rem;
}

.scenario-title {
    font-family: var(--ff-heading);
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 800;
    color: var(--jacarta);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

.scenario-body {
    padding: 2rem 2.5rem 2.5rem;
}

.scenario-body > p {
    margin-bottom: 2rem;
    color: var(--ink-2);
    font-size: 1.05rem;
}

/* Timeline inside scenario */
.timeline {
    list-style: none;
    position: relative;
    padding-left: 0;
    margin: 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(180deg,
        var(--iris) 0%,
        var(--lavender) 50%,
        var(--lavender-ll) 100%
    );
    border-radius: 2px;
}

.timeline li {
    position: relative;
    padding-left: 3rem;
    padding-block: 0.95rem;
    color: var(--ink-2);
    line-height: 1.55;
    font-size: 1rem;
    max-width: none;
}

.timeline li::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 1.3rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--iris);
    box-shadow: 0 0 0 4px var(--white), 0 0 14px var(--iris-soft);
}

.timeline-time {
    display: inline-block;
    font-family: var(--ff-display);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--jacarta);
    margin-right: 0.85rem;
    min-width: 76px;
}

.section-dark .timeline::before {
    background: linear-gradient(180deg, var(--iris), var(--lavender));
}

.section-dark .timeline li { color: var(--lavender-ll); }
.section-dark .timeline li::before {
    background: var(--jacarta-dd);
    box-shadow: 0 0 0 4px var(--jacarta-dd), 0 0 14px var(--iris-soft);
}
.section-dark .timeline-time { color: var(--white); }

@media (max-width: 720px) {
    .scenario-head {
        padding: 1.5rem 1.5rem 1.5rem 2rem;
        flex-direction: column;
        gap: 1rem;
    }
    .scenario-code { font-size: 1.5rem; min-width: 0; }
    .scenario-body { padding: 1.5rem; }
}

/* ============================================================================
   22. ROADMAP PHASES — horizontal progression timeline
   ============================================================================ */
.phases {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 3rem;
    position: relative;
}

.phases::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 2rem;
    right: 2rem;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--lavender) 20%,
        var(--lavender) 80%,
        transparent
    );
    z-index: 0;
}

.phase {
    padding: 2.25rem 1.5rem;
    background: var(--white);
    border: 1px solid var(--athens);
    border-radius: var(--r-lg);
    position: relative;
    transition: all var(--t) var(--ease-out);
    z-index: 1;
}

.phase:hover {
    transform: translateY(-6px);
    border-color: var(--iris);
    box-shadow: var(--shadow);
}

.phase-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--iris);
    position: absolute;
    top: 31px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 0 3px var(--white), 0 0 18px var(--iris-soft);
}

.phase-num {
    font-family: var(--ff-display);
    font-size: 2.75rem;
    color: var(--lavender);
    line-height: 1;
    margin: 1.5rem 0 1rem;
    display: block;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.phase-when {
    font-family: var(--ff-heading);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--iris);
    margin-bottom: 0.5rem;
}

.phase-title {
    font-family: var(--ff-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--jacarta);
    margin-bottom: 0.75rem;
    letter-spacing: -0.015em;
}

.phase-body {
    font-size: 0.9rem;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 900px) {
    .phases { grid-template-columns: repeat(2, 1fr); }
    .phases::before { display: none; }
    .phase-dot { display: none; }
    .phase-num { margin-top: 0; }
}

@media (max-width: 540px) {
    .phases { grid-template-columns: 1fr; }
}

/* ============================================================================
   23. MARKERS — milestone list
   ============================================================================ */
.markers {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
}

.marker {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2.5rem;
    padding: 2.5rem 0;
    border-top: 1px solid rgba(152, 137, 192, 0.18);
    align-items: baseline;
    transition: padding var(--t) var(--ease);
    position: relative;
}

.marker:last-child { border-bottom: 1px solid rgba(152, 137, 192, 0.18); }

.marker::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 0;
    height: 1px;
    background: var(--grad-accent);
    transition: width var(--t-slow) var(--ease-out);
}

.marker:hover::before { width: 220px; }

.marker-when {
    font-family: var(--ff-display);
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    color: var(--iris);
    letter-spacing: 0.05em;
    line-height: 1;
    font-weight: 500;
}

.marker-body h4 {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    color: var(--white);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    font-weight: 800;
}

.marker-body p {
    font-size: 1.05rem;
    color: var(--lavender-ll);
    margin: 0;
    max-width: 70ch;
    line-height: 1.55;
}

@media (max-width: 720px) {
    .marker {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 2rem 0;
    }
    .marker-when { font-size: 1rem; }
}

/* ============================================================================
   24. CLOSING — cinematic title-card finale
   ============================================================================ */
.closing {
    background: var(--mesh-hero);
    color: var(--lavender-lll);
    padding: clamp(6rem, 12vh, 12rem) 0 clamp(3rem, 6vh, 5rem);
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.closing::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(196, 156, 224, 0.22), transparent 50%),
        radial-gradient(ellipse at 50% 0%, rgba(152, 137, 192, 0.14), transparent 60%);
    pointer-events: none;
}

.closing-inner {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    width: 100%;
    padding-inline: var(--pad-x);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.closing-mark {
    width: 88px;
    height: 88px;
    margin-inline: auto;
    margin-bottom: 3rem;
    background-image: url('../img/favicon.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 20px 60px rgba(196, 156, 224, 0.6));
    animation: pulse-mark 4s ease-in-out infinite;
}

@keyframes pulse-mark {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 20px 60px rgba(196, 156, 224, 0.6)); }
    50%      { transform: scale(1.04); filter: drop-shadow(0 30px 80px rgba(196, 156, 224, 0.85)); }
}

.closing-title {
    font-family: var(--ff-display);
    font-size: clamp(4rem, 14vw, 14rem);
    line-height: 0.88;
    letter-spacing: 0.04em;
    color: var(--white);
    margin-bottom: 2.5rem;
    font-weight: 500;
}

.closing-sig {
    font-family: var(--ff-tag);
    font-style: italic;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 400;
    color: var(--lavender-ll);
    margin-bottom: 1rem;
    max-width: 640px;
    margin-inline: auto;
    line-height: 1.5;
}

.closing-foot {
    position: relative;
    z-index: 2;
    max-width: 900px;
    width: 100%;
    padding-inline: var(--pad-x);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(152, 137, 192, 0.2);
    font-family: var(--ff-heading);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--lavender-l);
}

.closing-foot .lockup {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.closing-foot .lockup img {
    height: 24px;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

@media (max-width: 720px) {
    .closing-foot {
        flex-direction: column;
        gap: 1.25rem;
        text-align: center;
    }
}

/* ============================================================================
   25. REVEAL ANIMATIONS (IntersectionObserver-driven)
   ============================================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--t-reveal) var(--ease-out),
                transform var(--t-reveal) var(--ease-out);
    will-change: opacity, transform;
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity var(--t-reveal) var(--ease-out),
                transform var(--t-reveal) var(--ease-out);
}
.reveal-left.visible { opacity: 1; transform: none; }

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity var(--t-reveal) var(--ease-out),
                transform var(--t-reveal) var(--ease-out);
}
.reveal-right.visible { opacity: 1; transform: none; }

.reveal-scale {
    opacity: 0;
    transform: scale(0.94);
    transition: opacity var(--t-cine) var(--ease-out),
                transform var(--t-cine) var(--ease-out);
}
.reveal-scale.visible { opacity: 1; transform: none; }

.reveal-delay-1 { transition-delay: 120ms; }
.reveal-delay-2 { transition-delay: 240ms; }
.reveal-delay-3 { transition-delay: 360ms; }
.reveal-delay-4 { transition-delay: 480ms; }
.reveal-delay-5 { transition-delay: 600ms; }
.reveal-delay-6 { transition-delay: 720ms; }

/* ============================================================================
   26. MAGNETIC HOVER (set by JS)
   ============================================================================ */
.magnetic {
    transition: transform var(--t) var(--ease-spring);
    will-change: transform;
}

/* ============================================================================
   27. UTILITIES
   ============================================================================ */
.text-center { text-align: center; }
.text-muted  { color: var(--ink-3); }
.text-lav    { color: var(--lavender); }
.text-iris   { color: var(--iris); }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 2rem; }
.mt-8 { margin-top: 4rem; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 2rem; }
.mb-8 { margin-bottom: 4rem; }
.max-w-prose { max-width: 68ch; }
.full-bleed { grid-column: 1 / -1; }

/* ============================================================================
   28. REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
    .hero-title .char { opacity: 1; transform: none; }
    .hero-tagline, .hero-subtitle, .hero-meta, .hero-sig, .hero-scroll { opacity: 1; transform: none; }
    .hero-orbit { opacity: 0.9; animation: none; }
    .hero::after { animation: none; }
    .particle, .closing-mark { animation: none; }
    .marquee-track { animation: none; }
}

/* ============================================================================
   29. RESPONSIVE (global)
   ============================================================================ */
@media (max-width: 1100px) {
    :root { --container: 100%; --container-narrow: 100%; }
}

@media (max-width: 900px) {
    :root { --pad-x: 1.5rem; }
    section { padding: 5rem 0; }
    .hero-inner { padding: 6rem 0 4rem; }
}

@media (max-width: 600px) {
    :root { --pad-x: var(--pad-x-mobile); }
    body { font-size: 1rem; }
    section { padding: 4rem 0; }
    .pillar-panel { padding: 3rem 0; }
    .problem-card, .principle { padding: 1.75rem 1.5rem; }
    .scenario-body { padding: 1.5rem; }
    .marker { padding: 1.75rem 0; }
}

/* ============================================================================
   30. PRINT
   ============================================================================ */
@media print {
    .rail, .corner-tr, .scroll-progress, .grain,
    .hero-scroll, .hero-orbit, .hero::before, .hero::after,
    .marquee, .enter-atlas-btn, .closing-cta { display: none !important; }
    :root { --rail-w: 0; --pad-x: 1.5rem; }
    .main { padding-left: 0; }
    body {
        font-size: 10.5pt;
        line-height: 1.45;
        color: #000;
        background: #fff;
    }
    .hero {
        min-height: auto;
        padding: 3rem 0;
        background: #1E1A4A !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        page-break-after: always;
    }
    .hero-title { font-size: 5rem !important; }
    .section-dark, .closing {
        background: #1E1A4A !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    section { padding: 1.5rem 0; page-break-inside: avoid; }
    .problems, .principles, .phases, .markers, .pillar-panel, .scenarios {
        page-break-inside: avoid;
    }
    .reveal, .reveal-left, .reveal-right, .reveal-scale {
        opacity: 1 !important; transform: none !important;
    }
    .hero-title .char { opacity: 1 !important; transform: none !important; }
    h1, h2, h3 { page-break-after: avoid; }
    .ghost-num, .ghost-word { display: none; }
}