/* Explain: Base reset, typography, and background patterns. */
* {
    box-sizing: border-box;
}

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

body {
    overflow-x: hidden;
    color: var(--text-color);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

[x-cloak] {
    display: none !important;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}

::selection {
    background: rgba(20, 51, 92, 0.15);
}

.font-heading {
    font-family: var(--font-heading);
}

/* Subtle technical grid used behind light sections */
.pattern-grid {
    background-image:
        linear-gradient(rgba(20, 51, 92, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 51, 92, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: center;
}

/* Same grid, tuned for dark navy surfaces */
.pattern-grid-light {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: center;
}