.hero {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 120px 20px;
}

.hero-content {
    max-width: 900px;
}

.hero-logo {
    width: 170px;

    margin-bottom: 40px;

    filter: drop-shadow(
        0 0 30px rgba(139, 92, 246, 0.5)
    );
}

.hero h1 {
    font-size: 70px;

    line-height: 1.1;

    margin-bottom: 20px;
}

.hero p {
    font-size: 20px;

    color: var(--muted);

    margin-bottom: 40px;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.primary-btn,
.secondary-btn {
    padding: 16px 28px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 600;

    transition: 0.2s;
}

.primary-btn {
    background: linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color: white;
}

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

.secondary-btn {
    border: 1px solid var(--border);

    color: white;
}