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

:root {
    --bg: #080808;
    --border: #222222;
    --border-mid: #383838;
    --text: #f0f0f0;
    --text-muted: #a4a4a4;
    --text-dim: #787878;
    --nav-h: 56px;
}

html {
    background: var(--bg);
    scroll-behavior: smooth;
}

body {
    color: var(--text);
    font-family: "IBM Plex Mono", monospace;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.eyebrow {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.eyebrow::before {
    content: "//";
    color: var(--text-dim);
}

h2 {
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text);
}

.section-sub {
    font-size: 13px;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.8;
    max-width: 560px;
}

.section-sub strong {
    color: #b8b8b8;
    font-weight: 500;
}

@keyframes pulse {
    0%,
    85%,
    100% {
        opacity: 1;
    }
    42% {
        opacity: 0.15;
    }
}

@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}