/* ==========================================================================
   Layout — reset, base typography, containers, sections, reveal animations.
   Mobile-first.
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 20px);
    font-size: var(--base-font-size);
    overflow-x: hidden;
}

body {
    font-family: var(--font-primary);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color var(--dur-base) ease, color var(--dur-base) ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    line-height: 1.2;
    font-weight: 700;
}

p { max-width: 70ch; }

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--dur-fast) ease;
}
a:hover { color: var(--accent-color); }

button {
    font-family: inherit;
    cursor: pointer;
}

a, button { touch-action: manipulation; }

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

@media (min-width: 768px) {
    .container { padding-inline: var(--space-8); }
}

.content-section {
    padding-block: var(--space-12);
}

@media (min-width: 768px) {
    .content-section { padding-block: var(--space-16); }
}

.section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    text-align: center;
    margin-bottom: var(--space-8);
    position: relative;
    padding-bottom: var(--space-3);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

/* ── Scroll reveal ────────────────────────────────────────────────────────
   Elements are fully visible by default. JS adds .js-reveal (hidden start)
   only when IntersectionObserver is available and motion is allowed. */
.animate-on-scroll.js-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.animate-on-scroll.js-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .animate-on-scroll.js-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}