:root {
    --lime: #c8ff3d;
    --lime-dark: #a4dc10;
    --black: #111111;
    --text: #222222;
    --muted: #686868;
    --white: #ffffff;
    --soft: #f5f5f1;
    --line: #e8e8e4;
    --container: 1220px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--text);
    background: var(--white);
    font-family: "Manrope", Arial, sans-serif;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.container {
    width: min(calc(100% - 48px), var(--container));
    margin: 0 auto;
}

.section-space {
    padding: 110px 0;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.eyebrow::before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lime);
    content: "";
}

.section-heading h2 {
    max-width: 850px;
    margin: 0;
    font-family: "Unbounded", sans-serif;
    font-size: clamp(32px, 4.2vw, 58px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.06em;
}

.section-heading p {
    max-width: 650px;
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.65;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.button span {
    margin-left: 8px;
    font-size: 18px;
    line-height: 1;
}

.button:hover {
    transform: translateY(-2px);
}

.button-lime {
    color: var(--black);
    background: var(--lime);
}

.button-lime:hover {
    background: var(--lime-dark);
    box-shadow: 0 10px 25px rgba(164, 220, 16, 0.28);
}

.button-dark {
    color: var(--white);
    background: var(--black);
}

.button-dark:hover {
    background: #303030;
}