.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-inline: var(--padding-lg);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
    white-space: nowrap;
    cursor: pointer;
}

.btn-primary {
    background: var(--color-black);
    color: var(--color-white);
}

.btn-primary:hover {
    background: var(--color-gray-700);
    opacity: 1;
}

.btn-light {
    background: var(--color-white);
    color: var(--color-black);
}

.btn-light:hover {
    background: var(--color-gray-100);
    opacity: 1;
}

.btn-outline {
    background: transparent;
    color: var(--color-black);
    border: 1px solid var(--color-gray-300);
}

.btn-outline:hover {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
    opacity: 1;
}

.btn-arrow::after {
    content: '↗';
    font-size: 14px;
}

.divider {
    border: none;
    border-top: 1px solid var(--color-gray-300);
    margin: 0;
}

.section-spacing {
    padding: 120px 0;
}

.section-dark {
    background: #0a0a0a;
    color: var(--color-white);
    position: relative;
}

.section-cream {
    background: var(--color-cream);
}

.text-center {
    text-align: center;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.status-progress {
    background: rgba(89, 100, 91, 0.15);
    color: var(--color-green);
}

.status-start {
    background: rgba(200, 160, 60, 0.15);
    color: #8a7020;
}

.status-finish {
    background: rgba(60, 120, 180, 0.15);
    color: #3070a0;
}

.status-done {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}