:root {
        --primary: #02b875;
        --dark: #111;
        --light: #fff;
        --gray: #999;
    }
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; line-height: 1.6; color: #333; }
    .container { max-width: 1140px; margin: 0 auto; padding: 0 15px; }
    header { background: #fff; padding: 20px 0; border-bottom: 1px solid #eee; }
    .logoarea img { max-width: 200px; }
    nav ul { list-style: none; display: flex; justify-content: center; padding: 0; gap: 20px; flex-wrap: wrap; }
    nav a { text-decoration: none; color: var(--gray); font-weight: bold; }
    .hero { text-align: center; padding: 60px 20px; background: #f8f9fa; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin: 40px 0; }
    .card { border: 1px solid #eee; padding: 15px; transition: 0.3s; }
    .card:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
    .thumb { width: 100%; height: 200px; background-size: cover; background-position: center; margin-bottom: 15px; background-color: #ddd; }
    footer { text-align: center; padding: 40px; background: #eee; margin-top: 50px; }
    @media (max-width: 768px) { nav ul { flex-direction: column; align-items: center; } }