@import url('/themes/root.css');

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--main-background-color);
    color: var(--main-text-color);
    font-family: var(--font-family, system-ui, sans-serif);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 64px;
    padding: 12px clamp(16px, 5vw, 64px);
    border-bottom: 1px solid var(--box-stroke-color);
    background: var(--box-background-color);
}

.navbar-brand {
    color: var(--main-text-color);
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
}

.navbar-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.navbar-links a {
    color: var(--main-text-color);
    text-decoration: none;
}

.homepage-hero,
.homepage-features {
    width: min(100% - 32px, 1080px);
    margin: 0 auto;
}

.homepage-hero {
    padding: clamp(60px, 12vw, 140px) 0 80px;
}

.homepage-eyebrow {
    color: var(--logo-text-color);
    font-weight: 700;
}

.homepage-hero h1 {
    max-width: 820px;
    margin: 12px 0;
    font-size: clamp(2rem, 6vw, 4.5rem);
    line-height: 1.08;
}

.homepage-hero > p:not(.homepage-eyebrow) {
    max-width: 660px;
    color: var(--sub-text-color);
    font-size: 1.15rem;
    line-height: 1.6;
}

.homepage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.homepage-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid var(--box-stroke-color);
    border-radius: 8px;
    color: var(--main-text-color);
    text-decoration: none;
}

.homepage-button.primary {
    border-color: var(--button-blue-color);
    background: var(--button-blue-color);
}

.homepage-button:hover {
    filter: brightness(1.12);
}

.homepage-features {
    padding: 24px 0 80px;
}

.homepage-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 16px;
    margin-top: 20px;
}

.homepage-feature-grid article {
    padding: 20px;
    border: 1px solid var(--box-stroke-color);
    border-radius: 10px;
    background: var(--box-background-color);
}

.homepage-feature-grid p {
    color: var(--sub-text-color);
    line-height: 1.5;
}

footer {
    border-top: 1px solid var(--box-stroke-color);
}

footer .footer {
    width: min(100% - 32px, 1080px);
    margin: 0 auto;
    padding: 18px 0;
    color: var(--sub-text-color);
}

@media (max-width: 520px) {
    .navbar {
        align-items: flex-start;
        flex-direction: column;
    }
}