:root {
    --ink: #0A0A0A;
    --charcoal: #2B2B2B;
    --ash: #6E6E6E;
    --ash-light: #A6A6A2;
    --hairline: #E3E2DF;
    --paper: #FFFFFF;
    --paper-soft: #F6F5F3;
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 8px;
    --max: 1180px;
    --shadow: 0 10px 26px rgba(10, 10, 10, 0.07);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    jbbackground: var(--paper);
    -webkit-font-smoothing: antialiased;
    background: #fff;
    background-color: #fafafa;
    background-image: linear-gradient(to right, rgba(17, 17, 17, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(17, 17, 17, 0.07) 1px, transparent 1px);
    background-size: 48px 48px;
}

h1,
h2,
h3,
.display {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    line-height: 1.08;
    margin: 0;
    letter-spacing: -0.01em;
}

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

img,
svg {
    max-width: 100%;
    display: block;
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 32px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    border: 1.5px solid var(--ink);
    transition: transform .15s ease, background .15s ease, color .15s ease;
    font-family: 'Inter', sans-serif;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-dark {
    background: var(--ink);
    color: var(--paper);
}

.btn-dark:hover {
    background: var(--charcoal);
}

.btn-outline {
    background: transparent;
    color: var(--ink);
}

.btn-outline:hover {
    background: var(--ink);
    color: var(--paper);
}

@media (max-width: 640px) {
    .wrap {
        padding: 0 20px;
    }

    .btn {
        padding: 12px 22px;
        font-size: 14px;
    }
}