body { font-family: Arial, sans-serif; margin: 0; background: #f5f5f5; }
header { background: #2c3e50; color: white; padding: 1rem; }
.header-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; }
nav a { color: white; margin-left: 20px; text-decoration: none; }
.hero { background: #3498db; color: white; text-align: center; padding: 3rem 20px; }
.container { max-width: 1200px; margin: 2rem auto; padding: 0 20px; }
.calculator-box { background: white; padding: 2rem; border-radius: 10px; margin-bottom: 2rem; }
.input-group { margin-bottom: 1rem; }
.input-group input { width: 100%; padding: 10px; margin-top: 5px; }
.calculate-btn { background: #2ecc71; color: white; border: none; padding: 12px 24px; width: 100%; cursor: pointer; }
.results-box { background: white; padding: 2rem; border-radius: 10px; display: none; }
.result-item { display: flex; justify-content: space-between; padding: 10px 0; }
.map-section { background: white; padding: 2rem; border-radius: 10px; margin: 2rem 0; }
#map { width: 100%; height: 400px; border: 1px solid #ddd; }
.roads-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 2rem; }
.road-card { background: white; padding: 1.5rem; border-radius: 8px; }
footer { background: #2c3e50; color: white; text-align: center; padding: 2rem; margin-top: 3rem; }