/* css/home.css */
.hero-section { background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); color: #fff; padding: calc(var(--spacing-unit) * 5) 0; text-align: center; }
.hero-section h1 { font-size: 2.8rem; font-weight: 700; margin-bottom: var(--spacing-unit); color: #fff; }
.hero-subtitle { font-size: var(--font-size-lg); margin-bottom: calc(var(--spacing-unit) * 2); opacity: 0.9; max-width: 700px; margin-left: auto; margin-right: auto; }
.hero-section .btn { margin: calc(var(--spacing-unit) * 0.5); min-width: 180px; }
.btn-outline-light { color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.btn-outline-light:hover { color: var(--primary-color); background-color: #fff; border-color: #fff; text-decoration: none; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: calc(var(--spacing-unit) * 2); }
.feature-item { background-color: var(--card-bg-color); padding: calc(var(--spacing-unit) * 1.5); border-radius: var(--border-radius); text-align: center; box-shadow: var(--box-shadow); transition: transform var(--transition-speed) ease-in-out, box-shadow var(--transition-speed) ease-in-out; }
.feature-item:hover { transform: translateY(-5px); box-shadow: var(--box-shadow-hover); }
.feature-icon { font-size: 2.5rem; color: var(--primary-color); margin-bottom: var(--spacing-unit); display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; background-color: rgba(0,123,255,0.1); border-radius: 50%; }
.feature-item h3 { font-size: 1.25rem; margin-bottom: calc(var(--spacing-unit) * 0.5); }
.feature-item p { font-size: var(--font-size-sm); color: var(--text-muted-color); }
.services-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: calc(var(--spacing-unit) * 1.5); }
.service-teaser-card { background-color: var(--card-bg-color); padding: calc(var(--spacing-unit) * 1.5); border-radius: var(--border-radius); text-align: center; box-shadow: var(--box-shadow); transition: transform var(--transition-speed) ease-in-out, box-shadow var(--transition-speed) ease-in-out; text-decoration: none; color: var(--text-color); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.service-teaser-card:hover { transform: translateY(-5px); box-shadow: var(--box-shadow-hover); text-decoration: none; color: var(--primary-color); }
.service-teaser-icon { font-size: 2.2rem; color: var(--accent-color); margin-bottom: var(--spacing-unit); }
.service-teaser-card h4 { font-size: 1.2rem; margin-bottom: calc(var(--spacing-unit) * 0.3); color: var(--text-color); }
.service-teaser-card:hover h4 { color: var(--primary-color); }
.service-teaser-card p { font-size: var(--font-size-sm); color: var(--text-muted-color); }
.cta-section { background-color: var(--primary-color); color: #fff; }
.cta-section h2 { font-size: 2rem; margin-bottom: calc(var(--spacing-unit) * 0.5); color: #fff; }
.cta-subtitle { font-size: var(--font-size-lg); margin-bottom: calc(var(--spacing-unit) * 1.5); opacity: 0.9; }
.cta-section .btn-primary { background-color: #fff; color: var(--primary-color); border-color: #fff; }
.cta-section .btn-primary:hover { background-color: #f0f0f0; color: var(--primary-color-hover); border-color: #f0f0f0; }
@media (max-width: 768px) { .hero-section h1 { font-size: 2.2rem; } .hero-subtitle { font-size: 1rem; } .section-title h2 { font-size: 1.8rem; } .section-title p { font-size: 1rem; } }
@media (max-width: 576px) { .hero-section { padding: calc(var(--spacing-unit) * 3) 0; } .hero-section h1 { font-size: 1.8rem; } .hero-section .btn { display: block; width: 80%; margin-left: auto; margin-right: auto; } .hero-section .btn + .btn { margin-top: var(--spacing-unit); } .features-grid, .services-overview-grid { grid-template-columns: 1fr; } }