/* ─────────────────────────────────────────────────────────────────
   Reset · typography · focus · container · motion primitives.
   ───────────────────────────────────────────────────────────────── */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--fz-base);
    line-height: var(--lh-base);
    color: var(--text-primary);
    background: var(--bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color var(--t-base), color var(--t-base);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--s-3);
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-tight);
    /* Archivo carries a wider default width than Inter; pulling the
       optical size in is what makes headlines read as machined
       rather than as another SaaS hero. */
    font-stretch: 96%;
}
h1 { font-size: var(--fz-5xl); font-weight: 900; }
h2 { font-size: var(--fz-4xl); font-weight: 800; }
h3 { font-size: var(--fz-2xl); }
h4 { font-size: var(--fz-xl); }
h5 { font-size: var(--fz-lg); }
h6 { font-size: var(--fz-md); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--brand-primary-soft);
    text-decoration: none;
    transition: color var(--t-fast);
}
a:hover { color: var(--text-strong); }

[data-theme="light"] a { color: var(--brand-primary); }
[data-theme="light"] a:hover { color: var(--brand-primary-strong); }

ul, ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
li { margin-bottom: var(--s-2); }

code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

hr {
    border: none;
    height: 1px;
    background: var(--border-subtle);
    margin: var(--s-7) 0;
}

button { font: inherit; cursor: pointer; }

:focus-visible {
    outline: 2px solid var(--brand-primary-soft);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

::selection {
    background: var(--brand-fill);
    color: var(--text-on-brand);
}

/* Container ─────────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

/* Section primitives ────────────────────────────────────────────── */
.section {
    padding-block: clamp(64px, 8vw, 120px);
    position: relative;
}
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--alt { background: var(--bg-canvas); }
.section--inset { background: var(--bg-inset); }
.section--bleed {
    background: var(--gradient-section-fade);
}

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--s-7);
}
.section-header--start { text-align: start; margin-inline: 0; }
.section-header h2 {
    margin-bottom: var(--s-3);
}
.section-header p {
    color: var(--text-secondary);
    font-size: var(--fz-md);
}

.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: var(--tracking-extra);
    font-size: var(--fz-xs);
    font-weight: 700;
    color: var(--brand-primary-soft);
    margin-bottom: var(--s-3);
}
[data-theme="light"] .eyebrow { color: var(--brand-primary); }

.lead {
    font-size: var(--fz-lg);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
    max-width: 60ch;
}

.muted { color: var(--text-muted); }
.strong { color: var(--text-strong); font-weight: 600; }

.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* Reveal-on-scroll utility ──────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
}

/* Visually hidden but accessible to AT */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}