:root {
    --navy: #0F2A4A;
    --navy-dark: #0A1F38;
    --navy-mid: #12365E;
    --gold: #C79A45;
    --gold-light: #E3C27A;
    --gold-dark: #B8863A;
    --white: #FFFFFF;
    --cream: #FAF8F4;
    --gray-text: #5A5F66;
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', system-ui, sans-serif;
    --radius: 16px;
    --transition: 0.3s ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--navy);
    line-height: 1.6;
    overflow-x: hidden;
    margin: 0;
}

/* ─── Reveal animations (usado em todas as seções) ─── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }

.reveal-delay-0 {
    transition-delay: 0s;
}

.reveal-delay-1 {
    transition-delay: .15s;
}

.reveal-delay-2 {
    transition-delay: .3s;
}

.reveal-delay-3 {
    transition-delay: .45s;
}

.reveal-delay-4 {
    transition-delay: .6s;
}

/* ─── Layout utilities ─── */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.text-center {
    text-align: center;
}

/* ─── Section headings (compartilhado entre todas as seções) ─── */
.gold-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

    .gold-divider span.line {
        width: 40px;
        height: 1px;
        background: var(--gold);
    }

    .gold-divider span.dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--gold);
    }

.section-heading {
    font-family: var(--font-serif);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--navy);
}

.section-heading--on-dark {
    color: var(--white);
}

.section-subheading {
    font-size: 17px;
    color: var(--gray-text);
    margin-top: 12px;
    max-width: 620px;
}

/* ─── Primary CTA button (compartilhado entre todas as seções) ─── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--navy);
    font-weight: 700;
    font-size: 16px;
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: 0 4px 20px rgba(199,154,69,0.25);
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(199,154,69,0.35);
    }

    .btn-primary svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }