:root {
    --surface: #f9f9f9;
    --surface-container-lowest: #ffffff;
    --surface-container: #eeeeee;
    --surface-variant: #e2e2e2;
    --surface-dim: #dadada;
    --primary: #000000;
    --secondary: #5d5f5f;
    --on-surface: #1a1c1c;
    --on-surface-variant: #4c4546;
    --on-primary: #ffffff;

    --container-max: 128.0rem;
    --margin-desktop: 4.0rem;
    --margin-mobile: 1.6rem;
    --gutter: 2.4rem;
    --space-16-24: clamp(1.6rem, 1.182rem + 0.896vw, 2.4rem);
    --space-32-64: clamp(3.2rem, 1.6rem + 4.0vw, 6.4rem);

    --font-main: 'Inter', sans-serif;
    --font-code: 'JetBrains Mono', monospace;
    --text-body-md: 1.6rem;
    --text-body-lg: clamp(1.8rem, 1.591rem + 0.448vw, 2.2rem);
    --text-headline-md: clamp(2.0rem, 1.6rem + 0.8vw, 2.8rem);
    --text-headline-lg: clamp(2.4rem, 1.8rem + 1.2vw, 3.6rem);
    --text-display: clamp(4.0rem, 3.2rem + 2.0vw, 6.4rem);
    --text-code-size: 1.4rem;
}

.brxe-section { padding: var(--space-32-64) 0; }
.brxe-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--margin-mobile); }
@media (min-width: 768px) { .brxe-container { padding: 0 var(--margin-desktop); } }

.font-display { font-size: var(--text-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; }
.font-headline-lg { font-size: var(--text-headline-lg); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.font-headline-md { font-size: var(--text-headline-md); font-weight: 600; line-height: 1.3; }
.font-body-lg { font-size: var(--text-body-lg); font-weight: 400; line-height: 1.6; }
.font-body-md { font-size: var(--text-body-md); font-weight: 400; line-height: 1.6; }
.font-code { font-family: var(--font-code); font-size: var(--text-code-size); font-weight: 400; line-height: 1.5; }

/* Global Intersection Observer Animation Mechanics */
@media (prefers-reduced-motion: no-preference) {
    .reveal-item { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
    .reveal-item.is-revealed { opacity: 1; transform: translateY(0); }
    .delay-100 { transition-delay: 100ms; }
    .delay-200 { transition-delay: 200ms; }
    .delay-300 { transition-delay: 300ms; }
}




.visual-container { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--surface-container); border: 1px solid var(--primary); display: flex; overflow: hidden; }
.visual-left, .visual-right { width: 50%; height: 100%; padding: var(--space-16-24); display: flex; flex-direction: column; gap: 1.6rem; transition: transform 0.5s; }
.visual-left { background: var(--surface-container-lowest); border-right: 1px dashed var(--primary); }
.visual-right { background: var(--primary); color: var(--on-primary); gap: 0.8rem; }
.visual-container:hover .visual-left, .visual-container:hover .visual-right { transform: scale(1.02); }
.visual-header { display: flex; justify-content: space-between; align-items: center; opacity: 0.5; }
.visual-right .visual-header { opacity: 0.7; }
.visual-mock-bar { border: 1px solid var(--surface-variant); background: rgba(226,226,226,0.3); }
.visual-center-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface); border: 1px solid var(--primary); padding: 0.8rem; display: flex; align-items: center; justify-content: center; z-index: 10; }