@media (max-width: 768px) {
    .nav-container { flex-direction: column; gap: 15px; }
    .hero h1 { font-size: 2rem; }
    .compass-dial { width: 250px; height: 250px; }
    .compass-arrow { border-bottom: 100px solid #ef4444; top: 15px; }
    .compass-arrow::after { top: 100px; border-top: 100px solid #f8fafc; }
    .seo-content { padding: 20px; }
}