:root {
    --brand-blue: #104060;
    --brand-teal: #20a0a0;
    --brand-ink: #0b1f2a;
    --brand-bg: #f6f8fb;
    --brand-border: #e6ecf2;
}

body {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

.x-cloak {
    display: none !important;
}

.section-title {
    letter-spacing: -0.02em;
}

.hero-scrim {
    background: rgba(16, 64, 96, 0.68);
}

.section-dark {
    background-color: #0b1f2a;
    color: #f6f8fb;
}

.section-muted {
    background-color: #f6f8fb;
}

.section-contrast {
    background-color: #ffffff;
}

.section-slate {
    background-color: #3a4650;
    color: #f6f8fb;
}

.section-divider {
    border-top: 3px solid #20a0a0;
}

.dot-grid {
    background-image: radial-gradient(rgba(16, 64, 96, 0.18) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: 0 0;
}

.bg-brand-blue {
    background-color: #104060;
}

.bg-brand-teal {
    background-color: #20a0a0;
}

.bg-brand-bg {
    background-color: #f6f8fb;
}

.text-brand-blue {
    color: #104060;
}

.text-brand-teal {
    color: #20a0a0;
}

.text-brand-ink {
    color: #0b1f2a;
}

.border-brand-blue {
    border-color: #104060;
}

.border-brand-teal {
    border-color: #20a0a0;
}

.border-brand-border {
    border-color: #e6ecf2;
}

.hover\:text-brand-blue:hover {
    color: #104060;
}

.reveal {\n    opacity: 0;\n    transform: translateY(40px) scale(0.98);\n    filter: blur(6px);\n    transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;\n    will-change: opacity, transform, filter;\n}\n\n.reveal.is-visible {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n    filter: blur(0);\n}