:root {
    --color-black: #050505;
    --color-ink: #151515;
    --color-muted: #707070;
    --color-line: #242424;
    --color-gold: #f5a900;
    --color-gold-soft: #ffd36a;
    --color-white: #ffffff;
    --color-cloud: #f6f6f3;
    --color-green: #21c55d;
    --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --container: 1180px;
    --radius: 8px;
    --shadow: 0 18px 55px rgba(0, 0, 0, 0.16);
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-white);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

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

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

a:hover,
a:focus {
    color: var(--color-gold);
}

button,
input,
textarea,
select {
    font: inherit;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 16px;
    line-height: 1.12;
}

h1 {
    font-size: clamp(42px, 6vw, 78px);
}

h2 {
    font-size: clamp(30px, 4vw, 48px);
}

h3 {
    font-size: 22px;
}

p {
    margin: 0 0 18px;
}

ul,
ol {
    margin-top: 0;
}

.container {
    margin: 0 auto;
    max-width: var(--container);
    padding: 0 24px;
    width: 100%;
}

.screen-reader-text,
.skip-link {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}

.skip-link:focus {
    background: var(--color-gold);
    clip: auto;
    clip-path: none;
    color: var(--color-black);
    height: auto;
    left: 16px;
    padding: 10px 14px;
    top: 16px;
    width: auto;
    z-index: 1000;
}