:root {
            --primary: #3a2e19;
            --secondary: #c8a46a;
            --dark: #111;
            --white: #fff;
        }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; background-color: #000; color: var(--white); }
        header { background-color: var(--primary); padding: 10px 0; text-align: center; }
        .logo-box { padding: 20px; }
        .logo-box img { max-width: 200px; border-radius: 8px; }
        nav { background: var(--dark); padding: 15px; overflow-x: auto; white-space: nowrap; border-top: 1px solid var(--secondary); border-bottom: 1px solid var(--secondary); }
        nav a { color: var(--secondary); text-decoration: none; padding: 0 15px; font-size: 14px; text-transform: uppercase; }
        .hero { position: relative; height: 300px; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/assets/image-1.jpg') center/cover; display: flex; align-items: center; justify-content: center; text-align: center; }
        .container { max-width: 1000px; margin: 20px auto; padding: 20px; }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
        .card { background: #1a1a1a; padding: 15px; border-radius: 8px; border: 1px solid #333; }
        .card img { width: 100%; border-radius: 4px; margin-bottom: 10px; }
        footer { text-align: center; padding: 40px; background: #0a0a0a; border-top: 2px solid var(--secondary); margin-top: 40px; }
        .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 20px; }
        .footer-nav a { color: #888; text-decoration: none; font-size: 12px; }
        @media (max-width: 768px) { .hero { height: 200px; } }