/* General Components & Sections */
/* ===== WHY SECTION ===== */
.why-section {
    background: var(--grad-dark-teal);
}

.why-content {
    position: relative;
}

.why-section h2,
.why-section p {
    color: var(--text);
}

.why-section .line {
    background: rgba(255, 255, 255, 0.5);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--why-card-gap);
    margin-top: var(--space-xl);
}

.why-item {
    padding: var(--why-card-pad);
    background: var(--why-card-bg);
    border: 1px solid var(--teal-border);
    transition: background var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-base);
}

.why-item:hover {
    background: var(--why-card-bg-hover);
    border-color: var(--why-card-border-hover);
    transform: translateY(-4px);
}

.why-number {
    font-size: var(--why-card-number-size);
    font-weight: 800;
    color: var(--why-card-number);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.why-item h3 {
    color: var(--text);
    font-size: var(--why-card-title-size);
    margin-bottom: var(--space-tag-gap);
}

.why-item p {
    font-size: var(--why-card-copy-size);
    opacity: 1;
    color: var(--why-card-text);
    line-height: var(--line-height-copy);
}

@media (max-width: 768px) {
    .why-grid {
        grid-template-columns: 1fr;
    }

    .why-item {
        padding: var(--space-md);
    }
}