/* Mobile-first base styles */
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; line-height: 1.6; }

/* Header */
header { background: #1a1a1a; color: #fff; padding: 1rem 0; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; }
nav li a { color: #fff; text-decoration: none; }

/* Hero Section */
.hero { text-align: center; padding: 2rem; background: #f0f0f0; }
.hero button { padding: 0.5rem 1rem; background: #2ecc71; color: #fff; border: none; border-radius: 5px; cursor: pointer; }

/* Areas Section */
.areas { margin: 2rem; }
.area-tile { background: #fff; border: 1px solid #ddd; padding: 1rem; margin: 0.5rem; cursor: pointer; }
.area-tile:hover { background: #f5f5f5; }

/* Blog Section */
.blog { margin: 2rem; }
.blog-post { background: #f9f9f9; padding: 1rem; margin: 0.5rem 0; border: 1px solid #eee; }

/* Footer */
footer { background: #1a1a1a; color: #fff; text-align: center; padding: 1rem; }

/* Responsive */
@media (min-width: 768px) { /* Tablet styles */
    nav ul { flex-direction: row; }
    .blog-post { display: grid; grid-template-columns: 3fr 1fr; gap: 1rem; }
}

@media (min-width: 1024px) { /* Desktop styles */
    .hero { padding: 4rem; }
    .areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}