/* Home-page-only styles (about/values sections). Shared styles live in site.css + components.css */

.about-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; }
.about-text p { font-size: 14px; color: var(--gray-500); margin-bottom: 14px; line-height: 1.7; }
.sidebar { border: 1px solid var(--gray-200); border-radius: 10px; padding: 24px; background: white; }
.sidebar h4 {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--gray-400); margin-bottom: 16px;
}
.sidebar ul { list-style: none; }
.sidebar li { font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--gray-100); color: var(--gray-500); }
.sidebar li:last-child { border-bottom: none; }
.sidebar li strong { color: var(--navy); font-weight: 600; }

.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value-step {
    padding: 28px 24px; border: 1px solid var(--gray-200);
    border-radius: 10px; background: white; border-top: 3px solid var(--teal-dark);
}
.value-num {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--teal-dark); color: white; font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.value-step h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--navy); }
.value-step p { font-size: 13px; color: var(--gray-500); }

.products-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

@media (max-width: 768px) {
    .about-grid { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: 1fr 1fr; }
    .products-grid { grid-template-columns: 1fr; }
    .hero-btns { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
    .values-grid { grid-template-columns: 1fr; }
}