:root {
    --container-max: 1440px;
    --page-gutter: 32px;
    --page-gutter-mobile: 20px;

    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 96px;
    --space-9: 128px;

    --section-space: clamp(104px, 8.5vw, 152px);
    --section-space-compact: clamp(76px, 6vw, 112px);
    --section-space-mobile: 76px;
    --content-gap: clamp(40px, 5vw, 72px);

    --color-bg: #ffffff;
    --color-surface: #f3f4f2;
    --color-text: #111a19;
    --color-muted: #66706e;
    --color-border: rgba(17, 26, 25, 0.14);
    --color-brand: #063b39;
    --color-brand-deep: #032e2c;
    --color-brand-soft: #d9e2df;
    --color-accent: #c7aa70;

    --font-heading: "Manrope", Arial, sans-serif;
    --font-body: "Manrope", Arial, sans-serif;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;

    --shadow-sm: 0 12px 30px rgba(3, 46, 44, 0.08);
    --shadow-lg: 0 30px 80px rgba(3, 46, 44, 0.16);

    --transition: 220ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--color-text);
    background: var(--color-bg);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9999;
    transform: translateY(-160%);
    padding: 12px 18px;
    background: #fff;
    color: var(--color-brand);
    border-radius: var(--radius-sm);
}
.skip-link:focus { transform: translateY(0); }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.08; letter-spacing: -0.045em; }

/* Section anchors: keep headings visible below the sticky header. */
#ofirmie,
#kontakt {
    scroll-margin-top: 118px;
}

@media (max-width: 991px) {
    #ofirmie,
    #kontakt {
        scroll-margin-top: 92px;
    }
}