.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 14px;
    font-weight: 600;
    font-size: var(--text-16-px);
    border: 1px solid var(--color-surface1);
    background: var(--color-faint);
    color: var(--color-text);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
    font-family: inherit;
}

.btn:hover {
    transform: translateY(-2px);
    background: var(--color-active);
    border-color: var(--color-overlay);
}

.btn.primary {
    background: linear-gradient(110deg, var(--color-accent), var(--color-accent2));
    color: var(--color-crust);
    border-color: transparent;
    box-shadow: 0 10px 40px -10px color-mix(in srgb, var(--color-accent) 70%, transparent);
}

.btn.primary:hover {
    box-shadow: 0 16px 50px -8px color-mix(in srgb, var(--color-accent2) 80%, transparent);
    background: linear-gradient(110deg, var(--color-accent), var(--color-accent2));
}

.cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 34px;
}