/* ==========================================================================
   GRYX SOFTWARE INTELLIGENCE PLATFORM — VAULTSYNC CIRCUIT THEME & SWISS EDITORIAL
   ========================================================================== */

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f7f9fa;
    --bg-tertiary: #eff2f5;
    --bg-dark: #080a0e;
    --bg-card: #ffffff;
    
    --text-primary: #0a0d14;
    --text-secondary: #525966;
    --text-muted: #848c99;
    --text-inverse: #f8fafe;

    --orange-primary: #ea4616;
    --orange-hover: #d23a0d;
    --orange-subtle: rgba(234, 70, 22, 0.08);
    --orange-glow: rgba(234, 70, 22, 0.35);

    --line-light: #e0e5eb;
    --line-dark: rgba(255, 255, 255, 0.12);
    
    --font-sans: 'Plus Jakarta Sans', -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    --font-dot: 'DotGothic16', monospace;
    
    --shadow-sm: 0 6px 16px rgba(10, 13, 20, 0.06);
    --shadow-md: 0 16px 36px rgba(10, 13, 20, 0.1);
    --shadow-lg: 0 28px 64px rgba(10, 13, 20, 0.16);
    --shadow-orange: 0 8px 24px rgba(234, 70, 22, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    overflow-x: hidden;
    line-height: 1.5;
    position: relative;
}

/* ==========================================================================
   GLOBAL THREADS CANVAS & SHADERS
   ========================================================================== */
#threads-canvas, #shader-bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 5;
}
#shader-bg-canvas {
    z-index: 0;
    opacity: 0.5;
}

/* ==========================================================================
   DOT MATRIX TYPOGRAPHY
   ========================================================================== */
.dot-matrix {
    font-family: var(--font-dot);
    letter-spacing: -0.04em;
    display: inline-block;
    color: var(--text-primary);
    text-transform: uppercase;
    background: radial-gradient(circle at center, var(--text-primary) 45%, transparent 50%);
    background-size: 5px 5px;
    -webkit-background-clip: text;
}

/* ==========================================================================
   NAVIGATION BAR
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 72px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    z-index: 1000;
}
.nav-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: crosshair;
}
.gryx-logo {
    width: 172px;
    height: 52px;
    display: block;
    cursor: crosshair;
    overflow: visible;
    transition: filter 0.25s ease, transform 0.25s ease;
}

.gryx-logo:hover {
    transform: scale(1.03);
    filter: drop-shadow(0 0 14px rgba(234, 70, 22, 0.65));
}

.gryx-logo.glitch {
    filter: drop-shadow(3px 0 0 #ea4616) drop-shadow(-3px 0 0 #bd2000);
    transform: translate(2px, -1px);
}

/* ==========================================================================
   FUTURISTIC REAL FIRE EFFECTS & WORDMARK ANIMATIONS (#EA4616 THEME ORANGE)
   ========================================================================== */
.flame-wing-right {
    transform-origin: 290px 420px;
    animation: realFireFlicker 1.5s infinite alternate cubic-bezier(0.4, 0, 0.6, 1);
    filter: drop-shadow(0 -5px 15px rgba(234, 70, 22, 0.85)) drop-shadow(0 0 6px rgba(255, 120, 50, 0.9));
}

.flame-wing-left {
    transform-origin: 239px 420px;
    animation: leftWingBreath 3.2s ease-in-out infinite alternate;
}

/* Actual flame tongues rushing upwards through the crest */
.rising-flame-stream {
    transform-origin: 280px 400px;
    animation: actualFlamesUp 1.4s cubic-bezier(0.3, 0, 0.7, 1) infinite;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 10px rgba(234, 70, 22, 0.9));
}
.stream-2 {
    animation-delay: 0.45s;
    animation-duration: 1.6s;
}
.stream-3 {
    animation-delay: 0.9s;
    animation-duration: 1.3s;
}

.ember-spark {
    animation: emberFloat 2.0s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin: center;
}
.ember-2 { animation-delay: 0.5s; animation-duration: 2.3s; }
.ember-3 { animation-delay: 1.1s; animation-duration: 1.8s; }
.ember-4 { animation-delay: 0.3s; animation-duration: 2.5s; }

.crystal {
    transform-origin: center;
    animation: crystalFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(234, 70, 22, 0.55));
}

.wordmark-shine {
    animation: wordmarkShine 4.5s linear infinite;
}

@keyframes actualFlamesUp {
    0% { transform: translateY(25px) scaleY(0.65) scaleX(0.92); opacity: 0; }
    25% { transform: translateY(8px) scaleY(1.0) scaleX(1.03); opacity: 0.95; }
    75% { transform: translateY(-32px) scaleY(1.3) scaleX(0.88); opacity: 0.75; }
    100% { transform: translateY(-62px) scaleY(1.5) scaleX(0.7); opacity: 0; }
}

@keyframes realFireFlicker {
    0% { transform: scaleX(1) scaleY(1) skewX(0deg); filter: drop-shadow(0 -3px 12px rgba(234, 70, 22, 0.75)); }
    33% { transform: scaleX(0.965) scaleY(1.04) skewX(-2deg); filter: drop-shadow(0 -8px 20px rgba(255, 95, 30, 0.95)); }
    66% { transform: scaleX(1.025) scaleY(0.98) skewX(1.5deg); filter: drop-shadow(0 -4px 14px rgba(220, 50, 10, 0.85)); }
    100% { transform: scaleX(0.97) scaleY(1.05) skewX(-1deg); filter: drop-shadow(0 -10px 25px rgba(255, 130, 45, 1)); }
}

@keyframes leftWingBreath {
    0% { transform: scale(1); filter: brightness(1); }
    100% { transform: scale(1.015); filter: brightness(1.25) drop-shadow(0 0 8px rgba(234, 70, 22, 0.45)); }
}

@keyframes emberFloat {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.95; }
    50% { transform: translateY(-40px) translateX(-12px) scale(0.75); opacity: 0.85; }
    100% { transform: translateY(-82px) translateX(10px) scale(0.1); opacity: 0; }
}

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

@keyframes wordmarkShine {
    from { transform: translateX(-700px) skewX(-18deg); }
    to { transform: translateX(1050px) skewX(-18deg); }
}

@media (prefers-reduced-motion: reduce) {
    .flame-wing-right,
    .flame-wing-left,
    .rising-flame-stream,
    .ember-spark,
    .crystal,
    .wordmark-shine {
        animation: none;
    }
}
.nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
}
.nav-item {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}
.nav-item:hover { color: var(--orange-primary); }
.nav-actions {
    display: flex;
    gap: 20px;
    align-items: center;
}
.btn-login { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); text-decoration: none; }
.btn-orange {
    background: var(--orange-primary);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-orange);
}
.btn-orange:hover {
    background: var(--orange-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(234, 70, 22, 0.45);
}
.btn-outline {
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid var(--line-light);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.btn-outline:hover {
    border-color: var(--orange-primary);
    color: var(--orange-primary);
    background: var(--orange-subtle);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
    position: relative;
    padding: 130px 48px 60px 48px;
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
    min-height: 85vh;
    z-index: 10;
}
.hero-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 10;
}
.kicker-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--orange-primary);
    text-transform: uppercase;
}
.pulse-dot {
    width: 8px; height: 8px;
    background: var(--orange-primary);
    border-radius: 50%;
    animation: pulseGlow 2s infinite ease-in-out;
}
@keyframes pulseGlow {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(234, 70, 22, 0.7); }
    50% { transform: scale(1.3); box-shadow: 0 0 0 8px rgba(234, 70, 22, 0); }
}
.hero-headline {
    font-size: 5.2rem;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    text-transform: uppercase;
}
.hero-headline .next-word {
    font-family: var(--font-dot);
    font-size: 5.8rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    display: inline-block;
    margin-left: 10px;
}
.hero-subcopy {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 540px;
    line-height: 1.6;
    font-weight: 500;
}
.hero-actions { display: flex; gap: 16px; align-items: center; margin-top: 8px; }
.live-signal-bar {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 8px 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--line-light);
    border-radius: 30px;
    font-size: 0.85rem;
    font-family: var(--font-mono);
    margin-top: 16px;
    width: fit-content;
    box-shadow: var(--shadow-sm);
}
.signal-badge { color: #e53e3e; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.severity-tag { color: var(--orange-primary); background: rgba(234, 70, 22, 0.12); padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; }

.hero-right { position: relative; width: 100%; height: 580px; display: flex; align-items: center; justify-content: center; isolation: isolate; }
#hero-3d-canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; }
.hero-code-panel {
    position: absolute; right: 0; bottom: 40px; background: rgba(4, 13, 22, 0.85);
    backdrop-filter: blur(12px); border: 1px solid rgba(93, 211, 255, 0.25); padding: 20px;
    border-radius: 8px; font-family: var(--font-mono); font-size: 0.85rem; box-shadow: var(--shadow-md); z-index: 4;
}

/* ==========================================================================
   FEATURE PILLARS BAR
   ========================================================================== */
.pillar-bar { max-width: 1440px; margin: 40px auto 60px auto; padding: 0 48px; z-index: 10; position: relative; }
.pillar-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg-secondary);
    border: 1px solid var(--line-light); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.pillar-item {
    padding: 24px 30px; display: flex; align-items: center; gap: 16px; border-right: 1px solid var(--line-light); transition: background 0.3s ease;
}
.pillar-item:last-child { border-right: none; }
.pillar-item:hover { background: #ffffff; }
.pillar-icon {
    font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); font-size: 1.3rem;
    min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-light); border-radius: 8px; background: #ffffff;
}
.pillar-text h4 { font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.pillar-text p { font-size: 0.78rem; color: var(--text-secondary); font-weight: 500; }

/* ==========================================================================
   SECTIONS & HANGING CIRCUIT CARDS
   ========================================================================== */
.section-promise, .section-tools {
    max-width: 1440px;
    margin: 60px auto 120px auto;
    padding: 0 48px;
    position: relative;
    z-index: 10;
}
.section-header { margin-bottom: 30px; text-align: left; position: relative; z-index: 10; }
.section-title { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.15em; color: var(--orange-primary); text-transform: uppercase; margin-bottom: 8px; }
.section-subtitle { font-size: 1.05rem; color: var(--text-secondary); font-weight: 500; margin-top: 6px; }

/* Breathable architectural gap for the VaultSync stepped circuit line trees to descend */
.circuit-routing-space {
    width: 100%;
    height: 90px;
    position: relative;
    pointer-events: none;
}

.promise-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
    align-items: start;
    padding-top: 10px;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    padding-top: 10px;
}
@media (max-width: 1100px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .tools-grid { grid-template-columns: 1fr; } }

/* Hanging storytelling card with heavy solid dampening */
.card-promise, .tool-card {
    background: var(--bg-card);
    border: 1px solid #d0d7de;
    border-radius: 18px;
    position: relative;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: grab;
    transform-origin: 50% -12px;
    will-change: transform;
    user-select: none;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.card-promise { padding: 46px 36px 40px 36px; min-height: 420px; }
.tool-card { padding: 38px 26px 26px 26px; min-height: 260px; }
.card-promise:active, .tool-card:active { cursor: grabbing; }
.card-promise:hover, .tool-card:hover {
    border-color: var(--text-primary);
    box-shadow: 0 24px 50px rgba(10, 13, 20, 0.14), var(--shadow-lg);
}

/* Sleek VaultSync physical eyelet connection port at top center */
.card-eyelet {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #080a0e;
    border: 4px solid var(--orange-primary);
    box-shadow: 0 2px 8px rgba(8, 10, 14, 0.3);
    z-index: 20;
    pointer-events: none;
}
.card-eyelet::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ffffff;
}

.promise-icon-header { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; pointer-events: none; }
.promise-icon-box {
    width: 54px; height: 54px; background: #f3efe6; color: var(--node-color, #111827); border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex; align-items: center; justify-content: center; font-family: var(--font-dot); font-size: 1.5rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(255, 255, 255, 0.8);
}
.promise-title { font-family: var(--font-dot); font-size: 2.6rem; letter-spacing: -0.02em; font-weight: 400; color: var(--text-primary); text-transform: uppercase; }
.promise-lead { font-size: 1.22rem; font-weight: 700; color: var(--text-primary); line-height: 1.35; margin-bottom: 16px; pointer-events: none; }
.promise-desc { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; flex-grow: 1; margin-bottom: 28px; pointer-events: none; }
.promise-arrow { color: var(--orange-primary); font-size: 1.4rem; font-weight: 800; display: flex; align-items: center; transition: transform 0.3s ease; pointer-events: none; }
.card-promise:hover .promise-arrow { transform: translateX(8px); }

.tool-badge {
    position: absolute; top: 18px; right: 18px;
    background: rgba(234, 70, 22, 0.12); color: var(--orange-primary);
    border: 1px solid var(--orange-primary); font-size: 0.68rem; font-weight: 800; padding: 2px 8px; border-radius: 4px;
}
.tool-icon-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; pointer-events: none; }
.tool-icon { width: 36px; height: 36px; background: var(--bg-secondary); border: 1px solid var(--line-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.tool-card h4 { font-size: 1.15rem; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; pointer-events: none; }
.tool-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 24px; pointer-events: none; }
.tool-link { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 6px; text-decoration: none; transition: color 0.2s; pointer-events: none; }
.tool-link span { color: var(--orange-primary); }

/* ==========================================================================
   PRODUCT SPOTLIGHT — SIM-1 EXPLODED 3D INTERACTIVE SIMULATION
   ========================================================================== */
.section-spotlight { max-width: 1440px; margin: 80px auto; padding: 0 48px; position: relative; z-index: 10; }
.spotlight-container {
    background: #ffffff; border: 1px solid var(--line-light); border-radius: 20px; padding: 48px;
    box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 50px; position: relative; overflow: hidden;
}
.spotlight-left { display: flex; flex-direction: column; justify-content: space-between; }
.spotlight-title { font-family: var(--font-dot); font-size: 4.8rem; line-height: 1; font-weight: 400; color: var(--text-primary); margin: 12px 0; }
.spotlight-lead { font-size: 1.6rem; font-weight: 800; color: var(--text-primary); line-height: 1.3; margin-bottom: 16px; }
.spotlight-desc { font-size: 0.98rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 32px; }
.spotlight-right { background: var(--bg-secondary); border: 1px solid var(--line-light); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 20px; position: relative; min-height: 520px; }

.sim-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line-light); padding-bottom: 14px; }
.sim-tabs { display: flex; gap: 8px; }
.sim-tab-btn {
    padding: 6px 16px; border-radius: 6px; font-size: 0.82rem; font-weight: 700;
    background: transparent; border: none; color: var(--text-secondary); cursor: pointer; transition: all 0.2s;
}
.sim-tab-btn.active { background: rgba(234, 70, 22, 0.12); color: var(--orange-primary); }
.sim-content-grid { display: grid; grid-template-columns: 1fr 1fr 220px; gap: 20px; flex-grow: 1; position: relative; align-items: center; }
.sim-code-box {
    font-family: var(--font-mono); font-size: 0.82rem; background: #ffffff; border: 1px solid var(--line-light);
    border-radius: 12px; padding: 18px; line-height: 1.7; color: var(--text-primary); box-shadow: var(--shadow-sm); max-height: 380px; overflow-y: auto;
}
.sim-code-box .ln { color: #b0b7c3; margin-right: 12px; display: inline-block; width: 18px; text-align: right; }
.sim-code-box .kw { color: #7c3aed; font-weight: 600; }
.sim-code-box .fn { color: #2563eb; }
.sim-code-box .str { color: #16a34a; }
.sim-code-box .highlight-row { background: var(--orange-subtle); display: block; border-left: 3px solid var(--orange-primary); margin: 0 -18px; padding: 0 18px; }

.sim-visual-container { width: 100%; height: 360px; position: relative; border-radius: 12px; background: #0d121c; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 30px rgba(0,0,0,0.5); }
#sim-exploded-canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: pointer; }
.sim-visual-hint { position: absolute; bottom: 12px; left: 12px; font-size: 0.72rem; color: rgba(255,255,255,0.6); background: rgba(0,0,0,0.6); padding: 4px 10px; border-radius: 20px; pointer-events: none; font-family: var(--font-mono); border: 1px solid rgba(255,255,255,0.15); }

.sim-metrics-col { display: flex; flex-direction: column; gap: 28px; border-left: 1px solid var(--line-light); padding-left: 20px; }
.metric-block label { font-size: 0.72rem; font-weight: 800; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.metric-block .val-huge { font-size: 3.4rem; font-weight: 800; color: var(--text-primary); line-height: 1; margin-bottom: 4px; }
.metric-block p { font-size: 0.82rem; color: var(--text-secondary); font-weight: 600; }

.sim-footer { display: flex; align-items: center; gap: 20px; padding-top: 14px; border-top: 1px solid var(--line-light); font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); }
.sim-progress-wrapper { flex-grow: 1; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; position: relative; }
.sim-progress-fill { position: absolute; top: 0; left: 0; bottom: 0; width: 82%; background: var(--orange-primary); border-radius: 4px; animation: simPulse 2s infinite ease-in-out; }
@keyframes simPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); box-shadow: 0 0 12px var(--orange-primary); } }

/* ==========================================================================
   TRUSTED BY — 3-STATE ROTATING CONTENT SECTION
   ========================================================================== */
.section-trust {
    max-width: 1440px;
    margin: 60px auto;
    padding: 0 48px;
    text-align: center;
    position: relative;
    z-index: 10;
}

.trust-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 36px;
}

.trust-label {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.28s ease-out,
                transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-trust.is-exiting .trust-label {
    opacity: 0;
    transform: translateY(-6px);
}

.section-trust.is-entering .trust-label {
    opacity: 0;
    transform: translateY(7px);
    transition: none;
}

.trust-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 12px 0;
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

.trust-track {
    display: flex;
    width: max-content;
    gap: 0;
    animation: scrollMarquee 32s linear infinite;
    will-change: transform;
}

.trust-track:hover,
.section-trust.is-paused .trust-track {
    animation-play-state: paused !important;
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 80px;
    padding-right: 80px;
    flex-shrink: 0;
}

.logo-item {
    --trust-stagger: 0ms;
    font-family: var(--font-sans);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    opacity: 0.75;
    transform: translateY(0);
    transition: opacity 0.26s ease-out var(--trust-stagger),
                transform 0.36s cubic-bezier(0.16, 1, 0.3, 1) var(--trust-stagger),
                color 0.3s ease;
    cursor: pointer;
}

.section-trust .logo-item:nth-child(2) { --trust-stagger: 16ms; }
.section-trust .logo-item:nth-child(3) { --trust-stagger: 32ms; }
.section-trust .logo-item:nth-child(4) { --trust-stagger: 48ms; }
.section-trust .logo-item:nth-child(5) { --trust-stagger: 64ms; }
.section-trust .logo-item:nth-child(6) { --trust-stagger: 80ms; }
.section-trust .logo-item:nth-child(7) { --trust-stagger: 96ms; }

.section-trust.is-exiting .logo-item {
    opacity: 0;
    transform: translateY(-6px);
}

.section-trust.is-entering .logo-item {
    opacity: 0;
    transform: translateY(7px);
    transition: none;
}

.logo-item:hover {
    opacity: 1;
    transform: scale(1.06);
    color: var(--orange-primary);
    transition-delay: 0ms;
}

@keyframes scrollMarquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-25%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .trust-label,
    .trust-track,
    .logo-item {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   WHY TEAMS CHOOSE GRYX — TECHNICAL DOTTED LAYER & DITHERED ART SHOWCASE
   ========================================================================== */
.section-why-dithered {
    max-width: 1440px;
    margin: 20px auto 140px auto;
    padding: 0 48px;
    position: relative;
    z-index: 10;
}

/* Technical Dotted Graph Background Banner from reference image */
.addon-banner {
    position: relative;
    width: 100%;
    background-color: #f8fafc;
    background-image: radial-gradient(#94a3b8 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    padding: 54px 24px;
    border-radius: 20px;
    border: 1px solid var(--line-light);
    margin-bottom: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.8), var(--shadow-sm);
    overflow: hidden;
}
.addon-text {
    font-family: var(--font-mono);
    font-size: 1.42rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 14px 28px;
    border-radius: 12px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.muted-dots { color: #94a3b8; letter-spacing: 0.2em; font-weight: 600; }
.chevron { color: #64748b; font-weight: 700; margin: 0 4px; }
.tag-blue, .title-blue, .arrow { color: #1b5afb; font-weight: 800; text-shadow: 0 0 20px rgba(27, 90, 251, 0.2); }
.pixel-block {
    font-family: var(--font-dot);
    font-size: 1.6rem;
    color: var(--text-primary);
    margin: 0 4px;
}

.why-header-row {
    margin-bottom: 40px;
    max-width: 850px;
}

/* Dithered Art Gallery & Feature Cards */
.dithered-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.dither-card {
    background: var(--bg-card);
    border: 1px solid var(--line-light);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.dither-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--text-primary);
}

.dither-art-box {
    background: #080a0e;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    padding: 16px;
    transition: all 0.35s ease;
}
.dither-card:hover .dither-art-box {
    background: #040609;
}

.ascii-dither {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.14;
    letter-spacing: 0;
    white-space: pre;
    text-align: center;
    font-weight: 700;
    transition: all 0.4s ease;
    user-select: none;
    filter: drop-shadow(0 0 4px currentColor);
}
.dither-card:hover .ascii-dither {
    transform: scale(1.04);
    filter: drop-shadow(0 0 10px currentColor);
}

.dither-badge {
    position: absolute;
    bottom: 12px;
    right: 14px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(8, 10, 14, 0.85);
    backdrop-filter: blur(4px);
    text-transform: uppercase;
}

.dither-content {
    padding: 30px 26px 28px 26px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.dither-num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--orange-primary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.dither-content h4 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.35;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}
.dither-content p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ==========================================================================
   FEATURED BLUE DITHERED DISTRIBUTED COMPUTE ART
   ========================================================================== */

.dither-card--compute {
    --compute-blue: #2f7cff;
    --compute-blue-bright: #86b9ff;
    --compute-blue-dark: #07162f;

    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(310px, 0.65fr);
    min-height: 430px;
    background: #f8fbff;
    border-color: rgba(47, 124, 255, 0.28);
    box-shadow:
        0 28px 70px rgba(12, 32, 68, 0.12),
        0 0 0 1px rgba(47, 124, 255, 0.04);
}

.dither-card--compute:hover {
    border-color: rgba(47, 124, 255, 0.58);
    box-shadow:
        0 34px 84px rgba(12, 32, 68, 0.17),
        0 0 0 1px rgba(47, 124, 255, 0.08);
}

.dither-compute-art {
    width: 100%;
    height: auto;
    min-height: 430px;
    padding: 0;
    position: relative;
    align-items: stretch;
    justify-content: stretch;
    background:
        radial-gradient(
            circle at 62% 48%,
            rgba(24, 73, 154, 0.28),
            transparent 46%
        ),
        #01040d;
    isolation: isolate;
}

/* Precise internal border similar to a technical display frame. */
.dither-compute-art::before {
    content: "";
    position: absolute;
    inset: 15px;
    z-index: 3;
    pointer-events: none;
    border: 1px solid rgba(134, 185, 255, 0.16);
    clip-path: polygon(
        0 12px,
        12px 12px,
        12px 0,
        calc(100% - 12px) 0,
        calc(100% - 12px) 12px,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        12px calc(100% - 12px),
        0 calc(100% - 12px)
    );
}

/* Restrained CRT scan-line surface. */
.dither-compute-art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 3px,
            rgba(0, 0, 0, 0.09) 3px,
            rgba(0, 0, 0, 0.09) 4px
        );
    mix-blend-mode: multiply;
    opacity: 0.72;
}

#blue-compute-dither {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter:
        saturate(1.08)
        contrast(1.04)
        drop-shadow(0 0 9px rgba(47, 124, 255, 0.18));
}

.dither-compute-hud {
    position: absolute;
    top: 27px;
    left: 30px;
    right: 30px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: rgba(134, 185, 255, 0.72);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    pointer-events: none;
}

.dither-hud-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dither-hud-status i {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    background: var(--compute-blue-bright);
    box-shadow: 0 0 10px rgba(134, 185, 255, 0.9);
    animation: computeStatusPulse 2.4s ease-in-out infinite;
}

@keyframes computeStatusPulse {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

.dither-compute-caption {
    position: absolute;
    left: 31px;
    bottom: 27px;
    z-index: 5;
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: #f3f7ff;
    font-family: var(--font-sans);
    text-transform: uppercase;
    pointer-events: none;
}

.dither-compute-caption span {
    color: rgba(225, 236, 255, 0.72);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.13em;
}

.dither-compute-caption strong {
    font-size: clamp(1.1rem, 2vw, 1.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

.dither-badge--blue {
    right: 28px;
    bottom: 25px;
    z-index: 5;
    color: var(--compute-blue-bright);
    background: rgba(1, 7, 19, 0.82);
    border-color: rgba(134, 185, 255, 0.42);
    box-shadow:
        inset 0 0 18px rgba(47, 124, 255, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.22);
}

.dither-content--compute {
    padding: 44px 36px 36px;
    position: relative;
    justify-content: flex-end;
    background:
        linear-gradient(
            135deg,
            rgba(47, 124, 255, 0.055),
            transparent 48%
        ),
        #fbfdff;
    border-left: 1px solid rgba(47, 124, 255, 0.16);
}

.dither-content--compute::before {
    content: "DC-01";
    position: absolute;
    top: 27px;
    right: 29px;
    color: rgba(47, 124, 255, 0.18);
    font-family: var(--font-mono);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.08em;
}

.dither-content--compute .dither-num {
    color: var(--compute-blue);
}

.dither-content--compute h4 {
    max-width: 330px;
    margin-bottom: 16px;
    font-size: clamp(1.45rem, 2vw, 2rem);
    line-height: 1.14;
    letter-spacing: -0.045em;
}

.dither-content--compute p {
    max-width: 390px;
    margin-bottom: 30px;
}

.compute-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(47, 124, 255, 0.16);
}

.compute-metrics > div {
    padding: 20px 12px 0 0;
    min-width: 0;
}

.compute-metrics > div:not(:last-child) {
    border-right: 1px solid rgba(47, 124, 255, 0.13);
    margin-right: 12px;
}

.compute-metrics strong {
    display: block;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
}

.compute-metrics span {
    display: block;
    margin-top: 7px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.07em;
}

@media (max-width: 1000px) {
    .dither-card--compute {
        grid-template-columns: 1fr;
    }

    .dither-compute-art,
    #blue-compute-dither {
        min-height: 410px;
    }

    .dither-content--compute {
        border-top: 1px solid rgba(47, 124, 255, 0.16);
        border-left: 0;
    }
}

@media (max-width: 680px) {
    .dither-card--compute {
        min-height: 0;
    }

    .dither-compute-art,
    #blue-compute-dither {
        min-height: 300px;
    }

    .dither-compute-hud {
        top: 20px;
        left: 20px;
        right: 20px;
        font-size: 0.52rem;
    }

    .dither-hud-status {
        display: none;
    }

    .dither-compute-caption {
        left: 20px;
        bottom: 19px;
        flex-direction: column;
        gap: 3px;
    }

    .dither-badge--blue {
        right: 18px;
        bottom: 18px;
        max-width: 145px;
        text-align: right;
        font-size: 0.52rem;
    }

    .dither-content--compute {
        padding: 34px 24px 28px;
    }

    .compute-metrics {
        grid-template-columns: 1fr;
    }

    .compute-metrics > div {
        padding: 14px 0;
    }

    .compute-metrics > div:not(:last-child) {
        margin-right: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(47, 124, 255, 0.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dither-hud-status i {
        animation: none;
    }
}

/* ==========================================================================
   FUTURISTIC VERTICAL SLIT FOOTER (DARK GRYX ARCHITECTURE)
   ========================================================================== */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.footer-dark.footer-slit {
    --slit-orange: #ea4616;
    --slit-black: #ffffff;
    --slit-bg-card: rgba(12, 16, 24, 0.75);
    --slit-line: rgba(255, 255, 255, 0.12);

    --slit-a-x: 0px;
    --slit-a-y: 0px;
    --slit-a-rotate: 0deg;

    --slit-b-x: 0px;
    --slit-b-y: 0px;
    --slit-b-rotate: 0deg;

    position: relative;
    z-index: 10;
    overflow: hidden;
    color: var(--text-inverse);
    background: #01040d;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* ==========================================================================
   STATIC MERGED VERTICAL SLITS & TYPOGRAPHY ARCHITECTURE
   ========================================================================== */

.footer-slits-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(ellipse 90% 80% at 80% 50%, #3a0300 0%, #170101 55%, #01040d 100%);
}

/* Deep Ambient Crimson Bloom & Vignette for Warm Contrast */
.slits-ambient-bloom {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: 
        radial-gradient(circle at 72% 50%, rgba(255, 30, 0, 0.75) 0%, rgba(234, 70, 22, 0.45) 35%, rgba(120, 5, 0, 0.2) 65%, transparent 88%),
        linear-gradient(90deg, rgba(1, 4, 13, 0.95) 0%, rgba(1, 4, 13, 0.4) 40%, rgba(1, 4, 13, 0.05) 75%, rgba(1, 4, 13, 0.3) 100%);
    pointer-events: none;
}

.slits-vignette {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: 
        linear-gradient(180deg, rgba(1, 4, 13, 0.9) 0%, transparent 18%, transparent 82%, rgba(1, 4, 13, 0.95) 100%),
        radial-gradient(circle at 10% 50%, rgba(1, 4, 13, 0.75) 0%, transparent 75%);
    pointer-events: none;
}

/* ==========================================================================
   STATIONARY 3D TILTED GLASSMORPHISM LOUVER SLITS
   ========================================================================== */

.glass-slits-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    pointer-events: none;
    overflow: hidden;
}

.glass-slit {
    position: relative;
    height: 100%;
    width: 100%;
    /* 3D Tilted architectural slat shading: dark shadowed left edge fading into glassmorphic right edge */
    background: linear-gradient(
        90deg,
        rgba(1, 4, 13, 0.96) 0%,
        rgba(1, 4, 13, 0.78) 25%,
        rgba(1, 4, 13, 0.35) 60%,
        rgba(255, 255, 255, 0.03) 88%,
        rgba(255, 255, 255, 0.14) 100%
    );
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 
        inset 14px 0 22px rgba(0, 0, 0, 0.88),
        inset -2px 0 6px rgba(255, 100, 30, 0.22);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

/* ==========================================================================
   LEFT SLIT TYPOGRAPHY STAGE - FULL SOLID LETTERS OVER GLASS
   ========================================================================== */

.footer-slit-visual {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    isolation: isolate;
    z-index: 10;
}

.slit-title {
    position: relative;
    z-index: 10;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: clamp(2.8rem, 4.3vw, 4.4rem);
    font-weight: 900;
    line-height: 0.94;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--text-inverse);
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.9));
}

.slit-title > span {
    display: block;
    white-space: nowrap;
}

.slit-title .slit-final {
    margin-top: 0.16em;
    font-family: var(--font-dot);
    font-size: 0.68em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.015em;
    color: var(--orange-primary);
}

/* ==========================================================================
   BUTTONS AND ACTIONS
   ========================================================================== */

.footer-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-dark-outline {
    padding: 11px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-dark-outline:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* ==========================================================================
   STATUS AND LEGAL AREA
   ========================================================================== */

.footer-status-bar {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}

.status-pill {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dot-green {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
}

.status-pill strong {
    color: #10b981;
}

.footer-insight strong {
    color: #ffffff;
}

.footer-docs-link, .footer-doc-link {
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-docs-link:hover, .footer-doc-link:hover {
    color: var(--slit-orange);
}

.footer-legal {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    color: rgba(255, 255, 255, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 0.8rem;
}

.legal-links,
.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.legal-links a,
.social-icons a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
}

.legal-links a:hover,
.social-icons a:hover {
    color: var(--slit-orange);
}

/* ==========================================================================
   ENTRANCE STATES & ANIMATIONS
   ========================================================================== */

.footer-slit-topline,
.slit-architecture-note,
.slit-coordinate-row,
.footer-left-cta-panel {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-slit.is-visible .footer-slit-topline {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.08s;
}
.footer-slit.is-visible .slit-architecture-note {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
}
.footer-slit.is-visible .slit-coordinate-row {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.45s;
}
.footer-slit.is-visible .footer-left-cta-panel {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.20s;
}

@keyframes footerSignalPulse {
    0%, 100% { opacity: 0.45; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

@media (max-width: 1200px) {
    .dithered-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-section, .spotlight-container { grid-template-columns: 1fr; }
    .pillar-grid { grid-template-columns: repeat(2, 1fr); }
    .promise-cards { grid-template-columns: 1fr; }
    .sim-content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .navbar { padding: 0 20px; }
    .nav-links { display: none; }
    .hero-section { padding: 100px 20px 40px 20px; }
    .hero-headline { font-size: 2.8rem; }
    .pillar-grid, .dithered-grid, .tools-grid { grid-template-columns: 1fr; }
    .section-trust, .section-why-dithered { padding: 0 20px; }
    .addon-text { font-size: 1.1rem; padding: 12px; }
    .logo-group { gap: 48px; padding-right: 48px; }
    .logo-item { font-size: 1.2rem; }
    .slit-title { font-size: clamp(2.2rem, 11vw, 3rem); }
}

/* ==========================================================================
   2026 CINEMATIC INTERFACE UPGRADE
   Two-rail card network, liquid cards, procedural 3D earth globe network, exploded structure,
   one-bit footer, responsive quality modes, and reduced-motion fallbacks.
   ========================================================================== */

:root {
    --rail-color: rgba(10, 13, 20, 0.46);
    --rail-muted: rgba(10, 13, 20, 0.20);
    --surface-glass: rgba(255, 255, 255, 0.84);
    --cinematic-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
    scroll-padding-top: 88px;
    background: #fff;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 50%, transparent 92%);
}

::selection {
    color: #fff;
    background: var(--orange-primary);
}

button,
a,
.interactive-3d {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
.interactive-3d:focus-visible {
    outline: 2px solid var(--orange-primary);
    outline-offset: 4px;
}

#shader-bg-canvas {
    opacity: .72;
    z-index: 0;
}

#threads-canvas {
    z-index: 6;
}

.navbar {
    top: 14px;
    left: 50%;
    right: auto;
    width: min(1180px, calc(100% - 40px));
    height: 58px;
    transform: translateX(-50%);
    padding: 0 18px 0 22px;
    border: 1px solid rgba(10, 13, 20, .10);
    border-radius: 15px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 14px 38px rgba(10,13,20,.08);
}

.navbar::before {
    content: '';
    position: absolute;
    inset: 7px auto 7px 7px;
    width: 4px;
    border-radius: 999px;
    background: var(--orange-primary);
}

.nav-brand {
    letter-spacing: -0.065em;
}

.btn-orange {
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(234, 70, 22, .22);
}

.btn-orange:hover {
    box-shadow: 0 10px 24px rgba(234, 70, 22, .30);
}

.hero-section {
    min-height: 100svh;
    padding-top: 112px;
    padding-bottom: 84px;
    grid-template-columns: minmax(0, 1.02fr) minmax(480px, .98fr);
    gap: clamp(30px, 5vw, 84px);
}

.hero-section::before,
.hero-section::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.hero-section::before {
    left: 48px;
    right: 48px;
    top: 96px;
    bottom: 38px;
    border: 1px solid rgba(10,13,20,.05);
    border-radius: 34px;
    background:
        radial-gradient(circle at 72% 42%, rgba(234,70,22,.07), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.2), rgba(239,244,248,.46));
    z-index: -1;
}

.hero-section::after {
    left: calc(50% - 1px);
    top: 132px;
    bottom: 80px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(10,13,20,.12), transparent);
}

.hero-left {
    padding-left: clamp(0px, 2vw, 28px);
}

.hero-headline {
    font-size: clamp(4.2rem, 7vw, 7.4rem);
    line-height: .86;
    letter-spacing: -.075em;
    max-width: 760px;
}

.hero-headline .next-word {
    font-size: 1.04em;
    margin-left: 0;
    letter-spacing: -.045em;
}

.hero-subcopy {
    max-width: 590px;
    font-size: clamp(1rem, 1.35vw, 1.22rem);
}

.live-signal-bar {
    border-radius: 9px;
    box-shadow: none;
    background: rgba(255,255,255,.66);
    backdrop-filter: blur(12px);
}

.hero-right {
    height: min(720px, 76vh);
    min-height: 560px;
    isolation: isolate;
    position: relative;
}

/* Ambient glowing observatory backdrop removed per user request to remove background black card */
.hero-right::before,
.hero-right::after {
    display: none !important;
}

.globe-ambient-backdrop {
    position: absolute;
    top: 50%;
    left: 51%;
    z-index: 1;
    width: min(72vmin, 660px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(93, 211, 255, 0.16) 0%, rgba(234, 70, 22, 0.06) 52%, transparent 72%);
    filter: blur(24px);
    pointer-events: none;
}

.globe-ambient-grid {
    position: absolute;
    inset: 4% 0 3% 2%;
    z-index: 1;
    border-radius: 32px;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(93, 211, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93, 211, 255, 0.055) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at 50% 50%, black 12%, rgba(0, 0, 0, 0.65) 58%, transparent 92%);
}

.globe-reticle {
    position: absolute;
    top: 50%;
    left: 51%;
    z-index: 2;
    width: min(60vmin, 520px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(93, 211, 255, 0.15);
    border-radius: 50%;
    box-shadow:
        0 0 0 20px rgba(93, 211, 255, 0.018),
        0 0 60px rgba(93, 211, 255, 0.08),
        inset 0 0 40px rgba(234, 70, 22, 0.06);
    pointer-events: none;
    transition: all 500ms ease;
}

.globe-reticle::before,
.globe-reticle::after {
    content: "";
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(93, 211, 255, 0.24), transparent);
    pointer-events: none;
}

.globe-reticle::before {
    top: 50%;
    left: -8%;
    width: 116%;
    height: 1px;
}

.globe-reticle::after {
    top: -8%;
    left: 50%;
    width: 1px;
    height: 116%;
    background: linear-gradient(180deg, transparent, rgba(93, 211, 255, 0.22), transparent);
}

.globe-reticle span {
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.globe-reticle span:nth-child(1) {
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 2px solid var(--orange-primary);
}

.globe-reticle span:nth-child(2) {
    top: 50%;
    right: -1px;
    transform: translateY(-50%);
    border-right: 2px solid #5dd3ff;
}

.globe-reticle span:nth-child(3) {
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 2px solid var(--orange-primary);
}

.globe-reticle span:nth-child(4) {
    top: 50%;
    left: -1px;
    transform: translateY(-50%);
    border-left: 2px solid #5dd3ff;
}

#hero-3d-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    cursor: grab;
    border-radius: 32px;
    overflow: hidden;
    touch-action: pan-y;
}

#hero-3d-canvas:active {
    cursor: grabbing;
}

#hero-3d-canvas canvas,
#sim-exploded-canvas canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.hero-scene-meta {
    position: absolute;
    left: clamp(26px, 4vw, 42px);
    right: clamp(24px, 4vw, 36px);
    top: clamp(34px, 5vw, 46px);
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.4;
    letter-spacing: 0.1em;
    color: #e9f8ff;
    text-transform: uppercase;
    pointer-events: none;
}

.hero-scene-meta::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 1px;
    background: linear-gradient(90deg, var(--orange-primary) 0%, #5dd3ff 60%, transparent 95%);
    box-shadow: 0 0 8px rgba(93, 211, 255, 0.5);
}

.hero-scene-meta .meta-left,
.hero-scene-meta .meta-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-scene-meta .meta-right {
    text-align: right;
}

.hero-scene-meta .meta-tag {
    color: var(--orange-primary);
    font-weight: 700;
    letter-spacing: 0.14em;
    font-size: 0.68rem;
    text-shadow: 0 0 10px rgba(234, 70, 22, 0.6);
}

.hero-scene-meta .meta-title {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.hero-scene-meta .meta-sub {
    color: #8be0ff;
    font-size: 0.64rem;
    opacity: 0.85;
}

.hero-code-panel.hud-telemetry-panel {
    position: absolute;
    right: clamp(20px, 3vw, 34px);
    bottom: clamp(28px, 4vw, 38px);
    z-index: 5;
    width: min(350px, 86%);
    background: rgba(4, 13, 22, 0.84);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(93, 211, 255, 0.28);
    border-left: 3px solid var(--orange-primary);
    padding: 18px 22px;
    border-radius: 12px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    box-shadow:
        0 16px 42px rgba(0, 0, 0, 0.6),
        0 0 32px rgba(93, 211, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    pointer-events: none;
    transition: all 0.3s ease;
}

.hud-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed rgba(93, 211, 255, 0.24);
    padding-bottom: 8px;
    margin-bottom: 12px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.hud-indicator {
    color: #10b981;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.hud-coord {
    color: #8be0ff;
    opacity: 0.85;
}

.hud-telemetry-data {
    line-height: 1.6;
    color: #e9f8ff;
}

.hud-circuit-line {
    margin-top: 12px;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, #5dd3ff 0%, var(--orange-primary) 70%, transparent 100%);
    opacity: 0.85;
    box-shadow: 0 0 10px rgba(93, 211, 255, 0.7);
}

.pillar-grid {
    border-radius: 0;
    box-shadow: none;
    background: rgba(255,255,255,.64);
    backdrop-filter: blur(10px);
}

.pillar-item,
.pillar-icon {
    border-radius: 0;
}

.section-promise,
.section-tools {
    margin-top: 120px;
    margin-bottom: 180px;
}

.section-header {
    max-width: 920px;
}

.section-header h2,
.why-header-row h2 {
    letter-spacing: -.04em;
}

.circuit-routing-space {
    height: 170px;
    position: relative;
    width: 100%;
    pointer-events: none;
    overflow: visible;
    margin-top: 10px;
}

.stepped-circuit-svg {
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
}

.stepped-circuit-svg .circuit-backbone,
.stepped-circuit-svg .circuit-branch,
.stepped-circuit-svg .circuit-companion,
.stepped-circuit-svg .circuit-flow-marks path {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stepped-circuit-svg .circuit-backbone {
    stroke: #c8d4e3;
    stroke-width: 1.25;
}

.stepped-circuit-svg .circuit-backbone--secondary {
    stroke: #d5dfeb;
    stroke-width: .9;
    stroke-dasharray: 2 7;
    opacity: .72;
}

.stepped-circuit-svg .circuit-terminal {
    fill: #fff;
    stroke: #c8d4e3;
    stroke-width: 1.15;
    vector-effect: non-scaling-stroke;
}

.stepped-circuit-svg .circuit-port {
    fill: #fff;
    stroke: #bac8da;
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

.stepped-circuit-svg .circuit-port--fix { stroke: #ea4616; }
.stepped-circuit-svg .circuit-port--learn { stroke: #2563eb; }
.stepped-circuit-svg .circuit-port--prevent { stroke: #0f8f83; }

.stepped-circuit-svg .circuit-core-halo {
    fill: url(#circuit-core-halo);
}

.stepped-circuit-svg .circuit-core-ring {
    fill: rgba(255,255,255,.78);
    stroke: #c3cfdf;
    stroke-width: 1.15;
    vector-effect: non-scaling-stroke;
}

.stepped-circuit-svg .circuit-core-ring--outer {
    fill: none;
    stroke: #dae2ed;
    opacity: .9;
}

.stepped-circuit-svg .circuit-core-face {
    fill: #fff;
    stroke: #9eacc0;
    stroke-width: 1.35;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 5px 12px rgba(41, 56, 78, .08));
}

.stepped-circuit-svg .circuit-core-cell {
    fill: #fff;
    stroke: #8798af;
    stroke-width: 1.15;
    vector-effect: non-scaling-stroke;
}

.stepped-circuit-svg .circuit-inference-core {
    transform-box: fill-box;
    transform-origin: center;
    animation: promiseCoreBreathe 4.8s ease-in-out infinite;
}

.stepped-circuit-svg .circuit-branch {
    stroke-width: 1.5;
    opacity: .88;
    filter: url(#circuit-signal-glow);
}

.stepped-circuit-svg .circuit-branch--fix { stroke: #ea4616; }
.stepped-circuit-svg .circuit-branch--learn {
    stroke: #1769ff;
    stroke-width: 2.15;
    opacity: 1;
}
.stepped-circuit-svg .circuit-branch--prevent { stroke: #0f8f83; }

.stepped-circuit-svg .circuit-route-underlay {
    fill: none;
    stroke: rgba(23, 105, 255, .16);
    stroke-width: 8;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.stepped-circuit-svg .circuit-companion {
    display: none;
}

.stepped-circuit-svg .circuit-junction {
    fill: #fff;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.stepped-circuit-svg .circuit-junction--fix { stroke: #ea4616; }
.stepped-circuit-svg .circuit-junction--prevent { stroke: #0f8f83; }

.stepped-circuit-svg .circuit-resistor {
    fill: #fff;
    stroke-width: 1.65;
    vector-effect: non-scaling-stroke;
}

.stepped-circuit-svg .circuit-resistor--fix { stroke: #ea4616; }
.stepped-circuit-svg .circuit-resistor--learn { stroke: #2563eb; }
.stepped-circuit-svg .circuit-resistor--prevent { stroke: #0f8f83; }

.stepped-circuit-svg .circuit-packet-sequence--fix,
.stepped-circuit-svg .circuit-bus-packet--fix { fill: #ea4616; }

.stepped-circuit-svg .circuit-packet-sequence--learn,
.stepped-circuit-svg .circuit-bus-packet--learn { fill: #2563eb; }

.stepped-circuit-svg .circuit-packet-sequence--prevent,
.stepped-circuit-svg .circuit-bus-packet--prevent { fill: #0f8f83; }

.stepped-circuit-svg .circuit-flow-marks path {
    stroke: #93a3b8;
    stroke-width: 1.15;
    opacity: .8;
}

.stepped-circuit-svg .circuit-flow-marks,
.stepped-circuit-svg .circuit-packet-sequence,
.stepped-circuit-svg .circuit-bus-packet {
    opacity: .72;
}

.stepped-circuit-svg .circuit-live-node .node-core {
    filter: url(#circuit-signal-glow);
}

.stepped-circuit-svg #circuit-node-1 .node-core {
    fill: #1769ff;
    stroke: #ffffff;
    stroke-width: .9;
}

.stepped-circuit-svg #circuit-node-1 .node-pulse {
    stroke: #1769ff;
    stroke-width: 1.55;
}

.stepped-circuit-svg .circuit-live-node .node-pulse {
    animation: promiseRouteGlow 1.8s ease-in-out infinite;
}

@keyframes promiseCoreBreathe {
    0%, 100% { opacity: .84; transform: scale(.985); }
    50% { opacity: 1; transform: scale(1.018); }
}

@keyframes promiseSignalPulse {
    0%, 100% { opacity: .34; transform: scale(.8); }
    50% { opacity: .92; transform: scale(1.16); }
}

@keyframes promiseRouteGlow {
    0%, 100% { opacity: .24; }
    50% { opacity: .58; }
}

.promise-cards,
.tools-grid {
    gap: clamp(24px, 3vw, 42px);
}

.card-promise,
.tool-card {
    --node-color: #ea4616;
    --liquid-x: 50%;
    --liquid-y: 45%;
    overflow: visible;
    isolation: isolate;
    border: 1px solid #e3dec3;
    border-radius: 18px;
    background-color: #fcfbf8;
    background-image:
        radial-gradient(#ebe5d8 0.8px, transparent 0.8px),
        radial-gradient(#ede7da 0.8px, #fcfbf8 0.8px);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    box-shadow:
        0 14px 38px -6px rgba(20, 25, 35, 0.08),
        0 4px 14px -2px rgba(20, 25, 35, 0.04),
        inset 0 1px 0 #ffffff,
        inset 0 -3px 0 rgba(215, 208, 192, 0.6);
    transform-origin: 50% -18px;
    transition:
        border-color .4s var(--cinematic-ease),
        box-shadow .4s var(--cinematic-ease),
        transform .4s var(--cinematic-ease);
}

.card-promise::before,
.tool-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(circle at var(--liquid-x) var(--liquid-y), color-mix(in srgb, var(--node-color) 8%, transparent), transparent 45%);
    opacity: 0.85;
}

.card-promise::after,
.tool-card::after {
    content: '';
    position: absolute;
    inset: 10px;
    z-index: 1;
    border: 1px solid rgba(185, 178, 160, 0.28);
    border-radius: 12px;
    pointer-events: none;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

.card-promise > :not(.card-ripple-canvas),
.tool-card > :not(.card-ripple-canvas) {
    position: relative;
    z-index: 3;
}

.card-ripple-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: inherit;
    clip-path: inset(0 round 18px);
    pointer-events: none;
    opacity: 0.95;
}

.card-promise:hover,
.tool-card:hover {
    border-color: color-mix(in srgb, var(--node-color) 45%, #c8c0aa);
    box-shadow:
        0 24px 55px -8px rgba(20, 25, 35, 0.13),
        0 8px 24px -4px rgba(20, 25, 35, 0.06),
        0 0 0 1px color-mix(in srgb, var(--node-color) 18%, transparent),
        inset 0 1px 0 #ffffff,
        inset 0 -3px 0 var(--node-color);
}

.tool-card-featured {
    background: linear-gradient(155deg, #fff, color-mix(in srgb, var(--node-color) 7%, #fff));
}

.card-eyelet {
    top: -15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid color-mix(in srgb, var(--node-color, #ea4616) 28%, #eae8e1);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--node-color, #ea4616) 10%, #ffffff),
        0 4px 12px rgba(10, 15, 25, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.card-eyelet::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--node-color, #ea4616);
    background: #ffffff;
    transform: none;
    left: auto;
    top: auto;
}

.card-eyelet::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #0b0f16;
    left: auto;
    top: auto;
    transform: none;
}

.promise-icon-box {
    width: 54px;
    height: 54px;
    background: #f3efe6;
    color: var(--node-color, #111827);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(255, 255, 255, 0.8);
}

.promise-arrow,
.tool-link span,
.section-title {
    color: var(--node-color, var(--orange-primary));
}

.section-spotlight {
    margin-top: 100px;
    margin-bottom: 150px;
}

.spotlight-container {
    border-radius: 30px;
    padding: clamp(30px, 4vw, 58px);
    background:
        linear-gradient(130deg, rgba(255,255,255,.98), rgba(240,244,247,.91));
    box-shadow: 0 36px 90px rgba(10,13,20,.12);
}

.spotlight-container::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(10,13,20,.035) 1px, transparent 1px),
        linear-gradient(rgba(10,13,20,.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, transparent, #000 45%, #000);
}

.spotlight-left,
.spotlight-right {
    position: relative;
    z-index: 1;
}

.spotlight-right {
    border-radius: 20px;
    background: rgba(247,249,250,.85);
    backdrop-filter: blur(14px);
}

.sim-visual-container {
    height: 390px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 45%, #323b47 0%, #141921 43%, #080b10 100%);
    box-shadow:
        inset 0 0 80px rgba(0,0,0,.55),
        0 20px 45px rgba(10,13,20,.16);
}

#sim-exploded-canvas {
    cursor: grab;
    touch-action: pan-y;
}

#sim-exploded-canvas:active {
    cursor: grabbing;
}

.sim-visual-hint {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    border-radius: 5px;
    letter-spacing: .06em;
}

.addon-banner {
    border-radius: 0;
    background-color: rgba(248,250,252,.82);
    background-image:
        linear-gradient(rgba(100,116,139,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100,116,139,.10) 1px, transparent 1px);
    background-size: 24px 24px;
    box-shadow: none;
}

.addon-text {
    border-radius: 7px;
    box-shadow: 0 14px 42px rgba(15,23,42,.08);
}

.dither-card {
    border-radius: 0;
    box-shadow: none;
}

.dither-art-box {
    background: #0a0d14;
}



.webgl-fallback::after {
    content: '3D preview unavailable';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 700 .75rem var(--font-mono);
    letter-spacing: .12em;
    color: var(--text-muted);
}

@media (max-width: 1200px) {
    .hero-section {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero-section::after {
        display: none;
    }

    .hero-left {
        padding: 30px 2vw 0;
    }

    .hero-right {
        height: 650px;
    }

    .promise-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .spotlight-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .navbar {
        width: calc(100% - 24px);
    }

    .nav-actions .btn-login {
        display: none;
    }

    .hero-section::before {
        left: 20px;
        right: 20px;
    }

    .hero-headline {
        font-size: clamp(3.6rem, 12vw, 6rem);
    }

    .hero-right {
        min-height: 500px;
        height: 62vh;
    }

    .promise-cards,
    .tools-grid {
        grid-template-columns: 1fr 1fr;
    }

    .circuit-routing-space {
        height: 110px;
    }
}

@media (max-width: 680px) {
    .navbar {
        top: 8px;
        height: 54px;
        padding-left: 18px;
    }

    .nav-actions .btn-orange {
        padding: 9px 13px;
        font-size: .76rem;
    }

    .hero-section {
        padding: 88px 14px 42px;
    }

    .hero-section::before {
        inset: 72px 10px 20px;
        border-radius: 22px;
    }

    .hero-left {
        padding: 18px 12px 0;
    }

    .hero-headline {
        font-size: clamp(3.05rem, 15.7vw, 4.9rem);
        line-height: .90;
    }

    .hero-actions,
    .live-signal-bar {
        flex-wrap: wrap;
    }

    .live-signal-bar {
        border-radius: 10px;
    }

    .hero-right {
        height: 540px;
        min-height: 540px;
    }

    .globe-ambient-grid,
    #hero-3d-canvas {
        inset: 2% 4px 3%;
        border-radius: 22px;
    }

    .globe-reticle {
        width: min(80vw, 360px);
    }

    .hero-scene-meta {
        left: 18px;
        right: 18px;
        top: 22px;
        font-size: 0.6rem;
        gap: 10px;
    }

    .hero-scene-meta .meta-right {
        display: none;
    }

    .hero-code-panel.hud-telemetry-panel {
        right: 14px;
        bottom: 22px;
        padding: 14px 16px;
        font-size: 0.74rem;
        width: calc(100% - 28px);
    }

    .pillar-bar,
    .section-promise,
    .section-tools,
    .section-spotlight,
    .section-trust,
    .section-why-dithered {
        padding-left: 18px;
        padding-right: 18px;
    }

    .section-promise,
    .section-tools {
        margin-top: 90px;
        margin-bottom: 130px;
    }

    .promise-cards,
    .tools-grid {
        grid-template-columns: 1fr;
    }

    .circuit-routing-space {
        height: 90px;
    }

    .card-promise {
        min-height: 360px;
        padding: 42px 28px 32px;
    }

    .spotlight-container {
        padding: 22px;
        border-radius: 20px;
    }

    .spotlight-right {
        padding: 14px;
    }

    .sim-tabs {
        overflow-x: auto;
        max-width: 100%;
    }

    .sim-tab-btn {
        white-space: nowrap;
    }

    .sim-visual-container {
        height: 330px;
    }

    .footer-dark {
        min-height: 700px;
        padding: 90px 20px 30px;
    }

    .footer-content,
    .footer-status-bar,
    .footer-legal {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-left h2 {
        font-size: clamp(3rem, 15vw, 5rem);
    }

    .footer-btns,
    .legal-links {
        flex-wrap: wrap;
    }
}

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

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

    #threads-canvas {
        opacity: .72;
    }

    .trust-track {
        animation: none !important;
        transform: none !important;
    }

    .card-promise,
    .tool-card {
        transform: none !important;
    }
}

/* Card physics and node-arrival state are driven through custom properties so
   GSAP reveal motion and pointer rotation never overwrite one another. */
.card-promise,
.tool-card {
    --card-lift: 0px;
    --card-angle: 0deg;
    transform: translate3d(0, var(--card-lift), 0) rotate(var(--card-angle));
}

.node-arrived .card-eyelet {
    animation: nodeEyeletArrival 720ms cubic-bezier(.16, 1, .3, 1);
}

@keyframes nodeEyeletArrival {
    0% {
        transform: translateX(-50%);
        box-shadow:
            0 0 0 4px color-mix(in srgb, var(--node-color) 10%, #ffffff),
            0 0 0 4px color-mix(in srgb, var(--node-color) 32%, transparent),
            0 0 0 4px transparent,
            0 4px 12px rgba(10, 15, 25, .08);
    }
    46% {
        transform: translateX(-50%);
        box-shadow:
            0 0 0 4px color-mix(in srgb, var(--node-color) 10%, #ffffff),
            0 0 0 12px transparent,
            0 0 0 4px color-mix(in srgb, var(--node-color) 22%, transparent),
            0 4px 12px rgba(10, 15, 25, .08);
    }
    100% {
        transform: translateX(-50%);
        box-shadow:
            0 0 0 4px color-mix(in srgb, var(--node-color) 10%, #ffffff),
            0 0 0 18px transparent,
            0 0 0 12px transparent,
            0 4px 12px rgba(10, 15, 25, .08);
    }
}

/* ========================================================================== 
   GRYX ASCII RECONSTRUCTION HERO
   ========================================================================== */
.hero-ascii-section,
.hero-ascii-section * {
    letter-spacing: 0;
}

.hero-ascii-section {
    --ascii-cyan: #6adcf5;
    --ascii-coral: #ff5b3d;
    --ascii-white: #f4f7f8;
    --ascii-muted: #8f9aa1;
    width: 100%;
    max-width: none;
    min-height: calc(100svh - 28px);
    margin: 0;
    padding: clamp(112px, 13vh, 148px) clamp(22px, 4vw, 72px) 24px;
    grid-template-columns: minmax(0, 0.92fr) minmax(560px, 1.08fr);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: clamp(18px, 2vw, 36px);
    row-gap: 22px;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    color: var(--ascii-white);
    background: #050709;
}

.hero-ascii-section::before {
    display: block;
    inset: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    z-index: 0;
}

.hero-ascii-section::after {
    display: none;
}

.hero-ascii-section .hero-left,
.hero-ascii-section .hero-right,
.hero-system-footer {
    position: relative;
    z-index: 2;
}

.hero-ascii-section .hero-left {
    align-self: center;
    gap: clamp(17px, 2.3vh, 25px);
    margin-left: max(-38px, -2vw);
    padding: 0;
}

.hero-ascii-section .kicker-tag {
    color: var(--ascii-coral);
    font-family: var(--font-mono);
    font-size: 0.69rem;
    font-weight: 600;
    text-transform: uppercase;
}

.hero-ascii-section .pulse-dot {
    width: 6px;
    height: 6px;
    background: var(--ascii-coral);
}

.hero-ascii-section .hero-headline {
    max-width: 680px;
    margin: 0;
    color: var(--ascii-white);
    font-size: clamp(3.35rem, 4.35vw, 5.35rem);
    font-weight: 700;
    line-height: 0.94;
    text-transform: uppercase;
}

.hero-ascii-section .hero-headline .next-word {
    display: block;
    margin: 0;
    color: var(--ascii-white);
    font-family: var(--font-sans);
    font-size: 1em;
    font-weight: 700;
}

.hero-ascii-section .hero-subcopy {
    max-width: 520px;
    color: #aeb7bc;
    font-size: clamp(0.98rem, 1.15vw, 1.13rem);
    font-weight: 400;
    line-height: 1.65;
}

.hero-ascii-section .hero-actions {
    gap: 28px;
    margin-top: 4px;
}

.hero-ascii-section .hero-actions .btn-orange,
.hero-ascii-section .hero-actions .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 174px;
    padding: 0 0 9px;
    border: 0;
    border-bottom: 1px solid rgba(106, 220, 245, 0.75);
    border-radius: 0;
    color: var(--ascii-white);
    background: transparent;
    box-shadow: none;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
}

.hero-ascii-section .hero-actions .btn-outline {
    min-width: 158px;
    border-bottom-color: rgba(255, 255, 255, 0.22);
    color: #aab4ba;
}

.hero-ascii-section .hero-actions .btn-orange:hover,
.hero-ascii-section .hero-actions .btn-outline:hover {
    color: var(--ascii-cyan);
    border-bottom-color: var(--ascii-cyan);
    background: transparent;
    box-shadow: none;
    transform: translateX(3px);
}

.hero-inline-status {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin-top: 8px;
    color: #7f8a91;
    font-family: var(--font-mono);
    font-size: 0.67rem;
    text-transform: uppercase;
}

.hero-inline-status strong {
    color: #bdc7cc;
    font-weight: 500;
}

.status-beacon,
.system-dot,
.hud-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ascii-cyan);
    box-shadow: 0 0 10px rgba(106, 220, 245, 0.78);
}

.status-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.18);
}

.hero-ascii-section .hero-right {
    width: 100%;
    height: min(760px, 74vh);
    min-height: 610px;
    align-self: center;
    isolation: isolate;
}

.hero-visual-shell {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
    isolation: isolate;
}

.hero-video-backdrop {
    position: absolute;
    inset: 3% -4%;
    z-index: 1;
    overflow: hidden;
    border-radius: 50%;
    background: #050709;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 68% 66% at 52% 50%, #000 0%, rgba(0, 0, 0, 0.98) 60%, rgba(0, 0, 0, 0.48) 76%, transparent 100%);
    mask-image: radial-gradient(ellipse 68% 66% at 52% 50%, #000 0%, rgba(0, 0, 0, 0.98) 60%, rgba(0, 0, 0, 0.48) 76%, transparent 100%);
}

.hero-video-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(circle at 50% 48%, transparent 0 34%, rgba(5, 7, 9, 0.12) 58%, rgba(5, 7, 9, 0.78) 100%),
        linear-gradient(90deg, rgba(5, 7, 9, 0.62), transparent 34%, transparent 68%, rgba(5, 7, 9, 0.48));
}

.hero-background-video {
    position: absolute;
    inset: -4%;
    z-index: 1;
    display: block;
    width: 108%;
    height: 108%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    filter: brightness(0.54) contrast(1.18) saturate(0.82);
    transform: scale(1.035);
    animation: heroVideoCrossfade 24s linear infinite;
    will-change: opacity, transform;
}

.hero-background-video:nth-child(2) {
    animation-delay: -16s;
}

.hero-background-video:nth-child(3) {
    animation-delay: -8s;
}

@keyframes heroVideoCrossfade {
    0%, 27% {
        opacity: 0.72;
        transform: scale(1.035);
    }
    34%, 93% {
        opacity: 0;
        transform: scale(1.075);
    }
    100% {
        opacity: 0.72;
        transform: scale(1.035);
    }
}

.hero-visual-axis {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: min(78%, 620px);
    aspect-ratio: 1;
    border: 1px solid rgba(106, 220, 245, 0.08);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hero-visual-axis::before,
.hero-visual-axis::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(106, 220, 245, 0.08);
    transform: translate(-50%, -50%);
}

.hero-visual-axis::before {
    width: 130%;
    height: 1px;
}

.hero-visual-axis::after {
    width: 1px;
    height: 130%;
}

#hero-ascii-earth-webgl {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: visible;
    border-radius: 0;
    cursor: crosshair;
    touch-action: pan-y;
}

#hero-ascii-earth-webgl canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.hero-ascii-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#hero-ascii-back {
    z-index: 2;
    opacity: 0.82;
}

#hero-ascii-front {
    z-index: 4;
}

.hero-ascii-section .hero-scene-meta {
    top: 4.5%;
    left: 5%;
    right: 4%;
    z-index: 7;
    color: var(--ascii-white);
    font-size: 0.61rem;
    line-height: 1.5;
}

.hero-ascii-section .hero-scene-meta::after {
    left: 0;
    right: 0;
    bottom: -10px;
    background: rgba(106, 220, 245, 0.18);
    box-shadow: none;
}

.hero-ascii-section .hero-scene-meta .meta-tag {
    color: var(--ascii-coral);
    font-size: 0.62rem;
    text-shadow: none;
}

.hero-ascii-section .hero-scene-meta .meta-title {
    color: var(--ascii-white);
    font-weight: 500;
}

.hero-ascii-section .hero-scene-meta .meta-sub {
    color: var(--ascii-cyan);
    font-size: 0.58rem;
    opacity: 0.65;
}

.hero-coordinate {
    position: absolute;
    z-index: 6;
    display: grid;
    gap: 1px;
    color: rgba(207, 221, 226, 0.7);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    line-height: 1.35;
    pointer-events: none;
}

.hero-coordinate::before {
    content: '';
    position: absolute;
    top: 4px;
    width: 5px;
    height: 5px;
    border: 1px solid var(--ascii-cyan);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(106, 220, 245, 0.6);
}

.hero-coordinate::after {
    content: '';
    position: absolute;
    top: 6px;
    width: 48px;
    height: 1px;
    background: rgba(106, 220, 245, 0.25);
}

.hero-coordinate-nw { top: 23%; left: 3%; text-align: right; }
.hero-coordinate-nw::before { right: -14px; }
.hero-coordinate-nw::after { right: -60px; transform: rotate(42deg); transform-origin: left; }
.hero-coordinate-ne { top: 20%; right: 1%; }
.hero-coordinate-ne::before { left: -14px; }
.hero-coordinate-ne::after { left: -59px; transform: rotate(-37deg); transform-origin: right; }
.hero-coordinate-sw { bottom: 21%; left: 1%; text-align: right; }
.hero-coordinate-sw::before { right: -14px; }
.hero-coordinate-sw::after { right: -58px; transform: rotate(-34deg); transform-origin: left; }
.hero-coordinate-se { right: 8%; bottom: 8%; }
.hero-coordinate-se::before { left: -14px; }
.hero-coordinate-se::after { left: -59px; transform: rotate(39deg); transform-origin: right; }

.hero-ascii-section .hero-code-panel.hud-telemetry-panel {
    right: 0;
    bottom: 12%;
    z-index: 7;
    width: 224px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #dce5e8;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-family: var(--font-mono);
    font-size: 0.59rem;
    text-transform: uppercase;
}

.hero-ascii-section .hud-panel-header {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    font-size: 0.59rem;
}

.hero-ascii-section .hud-indicator {
    gap: 7px;
    color: var(--ascii-coral);
    font-weight: 600;
    text-shadow: none;
}

.hero-ascii-section .hud-live-dot {
    background: var(--ascii-coral);
    box-shadow: 0 0 8px rgba(255, 91, 61, 0.7);
}

.hero-ascii-section .hud-telemetry-data {
    display: grid;
    gap: 5px;
    color: inherit;
    line-height: 1.35;
}

.hero-ascii-section .hud-telemetry-data > div,
.hud-status-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.hero-ascii-section .hud-telemetry-data span,
.hud-status-line span {
    color: #77838a;
}

.hero-ascii-section .hud-telemetry-data strong,
.hud-status-line strong {
    color: #dce5e8;
    font-weight: 500;
    text-align: right;
}

.hud-status-line {
    justify-content: flex-start;
    margin-top: 12px;
    padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hud-status-line i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ascii-coral);
    box-shadow: 0 0 8px rgba(255, 91, 61, 0.8);
}

.hero-system-footer {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    padding-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    color: #778289;
    font-family: var(--font-mono);
    font-size: 0.61rem;
    text-transform: uppercase;
}

.hero-system-footer span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-system-footer span:first-child {
    padding-left: 0;
}

.hero-system-footer span:last-child {
    border-right: 0;
}

@media (max-width: 1180px) {
    .hero-ascii-section {
        grid-template-columns: minmax(420px, 0.9fr) minmax(500px, 1.1fr);
        padding-right: 22px;
        padding-left: 22px;
    }

    .hero-ascii-section .hero-headline {
        font-size: clamp(3.15rem, 4.75vw, 4rem);
    }

    .hero-ascii-section .hero-left {
        margin-left: 0;
    }
}

@media (max-width: 1020px) {
    .hero-ascii-section {
        min-height: auto;
        padding: 112px 28px 24px;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        row-gap: 12px;
    }

    .hero-ascii-section .hero-left {
        max-width: 760px;
        padding-top: 24px;
    }

    .hero-ascii-section .hero-headline {
        font-size: clamp(3.7rem, 8.8vw, 5.7rem);
    }

    .hero-ascii-section .hero-right {
        height: 660px;
        min-height: 660px;
    }

    .hero-system-footer {
        margin-top: 8px;
    }
}

@media (max-width: 680px) {
    .hero-ascii-section {
        padding: 88px 16px 20px;
        row-gap: 4px;
    }

    .hero-ascii-section .hero-left {
        gap: 16px;
        padding: 22px 4px 0;
    }

    .hero-ascii-section .hero-headline {
        font-size: clamp(2.55rem, 11.8vw, 3.9rem);
        line-height: 0.96;
    }

    .hero-ascii-section .hero-subcopy {
        max-width: 94%;
        font-size: 0.96rem;
    }

    .hero-ascii-section .hero-actions {
        align-items: flex-start;
        gap: 18px;
    }

    .hero-ascii-section .hero-actions .btn-orange,
    .hero-ascii-section .hero-actions .btn-outline {
        min-width: 152px;
        font-size: 0.67rem;
    }

    .hero-inline-status {
        flex-wrap: wrap;
        font-size: 0.59rem;
    }

    .hero-ascii-section .hero-right {
        height: min(128vw, 560px);
        min-height: 470px;
    }

    .hero-video-backdrop {
        inset: 7% -9%;
    }

    .hero-ascii-section .hero-scene-meta {
        top: 3%;
        left: 3%;
        right: 3%;
    }

    .hero-ascii-section .hero-scene-meta .meta-right,
    .hero-coordinate-nw,
    .hero-coordinate-sw {
        display: none;
    }

    .hero-coordinate-ne {
        top: 18%;
        right: 2%;
    }

    .hero-coordinate-se {
        right: 5%;
        bottom: 4%;
    }

    .hero-ascii-section .hero-code-panel.hud-telemetry-panel {
        right: 2%;
        bottom: 12%;
        width: 190px;
        font-size: 0.53rem;
    }

    .hero-system-footer {
        flex-wrap: wrap;
        gap: 10px 0;
        padding-top: 14px;
        font-size: 0.55rem;
    }

    .hero-system-footer span {
        padding: 0 10px;
    }

    .hero-system-footer span:first-child {
        padding-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-background-video {
        animation: none;
        opacity: 0;
        transform: scale(1.035);
    }

    .hero-background-video:first-child {
        opacity: 0.62;
    }

    .hero-ascii-section .pulse-dot,
    .status-beacon,
    .system-dot,
    .hud-live-dot {
        animation: none !important;
    }
}

/* ========================================================================== 
   SINGLE GLOBAL PAGE SCROLLER
   ========================================================================== */

html,
body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.page-scroller {
    --page-scroll-progress: 0;
    --page-scroll-position: 8px;
    position: fixed;
    right: 0;
    top: 50%;
    bottom: auto;
    z-index: 1200;
    display: grid;
    width: 32px;
    height: 50vh;
    padding: 3px 2px;
    grid-template-rows: 24px minmax(0, 1fr) auto 24px;
    place-items: center;
    gap: 4px;
    color: #fff;
    background: rgba(8, 10, 14, .88);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px 0 0 10px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .24), 0 0 0 1px rgba(234, 70, 22, .08) inset;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translateY(-50%);
    transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.page-scroller:hover,
.page-scroller.is-dragging {
    border-color: rgba(234, 70, 22, .72);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .3), 0 0 20px rgba(234, 70, 22, .14);
}

.page-scroller[hidden] {
    display: none;
}

.page-scroller__button {
    display: grid;
    width: 28px;
    height: 24px;
    padding: 0;
    place-items: center;
    color: rgba(255, 255, 255, .68);
    font: 600 .8rem/1 var(--font-mono);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.page-scroller__button:hover {
    color: #fff;
    background: rgba(234, 70, 22, .2);
    transform: scale(1.06);
}

.page-scroller__rail {
    position: relative;
    width: 28px;
    height: 100%;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
}

.page-scroller__track,
.page-scroller__fill {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    border-radius: 999px;
}

.page-scroller__track {
    background: rgba(255, 255, 255, .2);
}

.page-scroller__fill {
    background: linear-gradient(to bottom, #ff8158, var(--orange-primary));
    box-shadow: 0 0 10px rgba(234, 70, 22, .65);
    transform: translateX(-50%) scaleY(var(--page-scroll-progress));
    transform-origin: top;
}

.page-scroller__thumb {
    position: absolute;
    top: var(--page-scroll-position);
    left: 50%;
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    transform: translate(-50%, -50%);
}

.page-scroller__thumb i {
    display: block;
    width: 9px;
    height: 9px;
    background: var(--orange-primary);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 0 12px rgba(234, 70, 22, .82);
    transform: rotate(45deg);
    transition: width .18s ease, height .18s ease;
}

.page-scroller__rail:hover .page-scroller__thumb i,
.page-scroller.is-dragging .page-scroller__thumb i {
    width: 12px;
    height: 12px;
}

.page-scroller__rail:focus-visible,
.page-scroller__button:focus-visible {
    outline: 2px solid var(--orange-primary);
    outline-offset: 2px;
}

.page-scroller__value {
    min-width: 28px;
    color: rgba(255, 255, 255, .62);
    font: 600 .48rem/1 var(--font-mono);
    letter-spacing: .08em;
    text-align: center;
}

@media (max-width: 680px) {
    .page-scroller {
        right: 0;
        width: 30px;
        height: 50vh;
    }

    .page-scroller__rail {
        height: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-scroller,
    .page-scroller__button,
    .page-scroller__thumb i {
        transition: none;
    }
}