:root {
    /* Color */
    --color-primary: #007d3f;
    --color-primary-deep: #055f2f;
    --color-primary-rgb: 0, 125, 63;
    --color-accent: #f5831f;
    --color-accent-rgb: 245, 131, 31;
    --color-success: #4ade80;
    --color-warning: #fb923c;
    --color-danger: #b12424;

    --color-ink: #123224;
    --color-ink-rgb: 18, 50, 36;
    --color-ink-80: rgba(var(--color-ink-rgb), 0.8);
    --color-ink-60: rgba(var(--color-ink-rgb), 0.6);
    --color-ink-45: rgba(var(--color-ink-rgb), 0.45);
    --color-ink-30: rgba(var(--color-ink-rgb), 0.3);
    --color-ink-12: rgba(var(--color-ink-rgb), 0.12);
    --color-white: #ffffff;
    --color-white-90: rgba(255, 255, 255, 0.9);
    --color-white-78: rgba(255, 255, 255, 0.78);
    --color-white-56: rgba(255, 255, 255, 0.56);
    --color-white-30: rgba(255, 255, 255, 0.3);

    --color-bg: #f4f7f2;
    --color-bg-soft: #eef4ee;
    --color-bg-strong: #091a0f;
    --color-surface: #ffffff;
    --color-surface-soft: rgba(255, 255, 255, 0.82);
    --color-surface-glass: rgba(255, 255, 255, 0.92);
    --color-border: rgba(var(--color-primary-rgb), 0.14);
    --color-border-strong: rgba(var(--color-primary-rgb), 0.26);

    /* Typography */
    --font-heading: 'Roboto', sans-serif;
    --font-body: 'Roboto', sans-serif;

    --text-2xs: 0.68rem;
    --text-xs: 0.74rem;
    --text-sm: 0.84rem;
    --text-base: 0.94rem;
    --text-md: 1rem;
    --text-lg: 1.12rem;
    --text-xl: 1.3rem;
    --text-2xl: clamp(1.35rem, 2.45vw, 2.1rem);
    --text-3xl: clamp(1.6rem, 3vw, 2.75rem);
    --text-hero: clamp(1.75rem, 4vw, 3.25rem);

    --section-title-size: var(--text-3xl);
    --section-title-compact: var(--text-2xl);
    --section-lead-size: var(--text-base);

    --eyebrow-size: var(--text-xs);
    --eyebrow-weight: 700;
    --eyebrow-spacing: 0.09em;

    --lh-tight: 1.2;
    --lh-snug: 1.35;
    --lh-base: 1.62;
    --lh-loose: 1.72;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 999px;

    /* Layout */
    --container: 1120px;
    --header-height: 74px;
    --gutter-x: clamp(16px, 2.8vw, 40px);
    --gutter-x-mobile: 16px;
    --panel-pad-top: 104px;
    --panel-pad-bottom: 40px;
    --panel-pad-top-mobile: 88px;
    --panel-pad-bottom-mobile: 28px;
    --scroll-duration-fast: 0.38s;
    --scroll-ease-fast: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html,
body {
    margin: 0;
    height: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--lh-base);
    color: var(--color-ink);
    background: radial-gradient(circle at 5% 0%, #d9efe1 0%, transparent 42%), var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    line-height: var(--lh-tight);
    margin: 0;
}

h1 {
    font-size: var(--text-hero);
    color: var(--color-ink);
}

h2 {
    font-size: var(--section-title-size);
    color: var(--color-ink);
}

h3 {
    font-size: var(--text-lg);
}

h4 {
    font-size: var(--text-md);
}

p {
    margin: 0;
    line-height: var(--lh-base);
}

a {
    color: inherit;
    text-decoration: none;
}

.eyebrow {
    font-size: var(--eyebrow-size);
    font-weight: var(--eyebrow-weight);
    letter-spacing: var(--eyebrow-spacing);
    text-transform: uppercase;
    color: var(--color-primary);
    transition: font-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.eyebrow.is-revealed {
    font-size: calc(var(--eyebrow-size) + 5px);
}

.lead {
    color: var(--color-ink-80);
    font-size: var(--section-lead-size);
    line-height: var(--lh-base);
    max-width: 760px;
}

.panel {
    min-height: 100dvh;
    padding: var(--panel-pad-top) var(--gutter-x) var(--panel-pad-bottom);
    display: flex;
    align-items: center;
}

.content {
    width: min(var(--container), 100%);
    margin: 0 auto;
}

@media (max-width: 840px) {
    .panel {
        padding: var(--panel-pad-top-mobile) var(--gutter-x-mobile) var(--panel-pad-bottom-mobile);
        align-items: flex-start;
    }
}