:root {
            --primary: #0063dc;
            --dark: #000000;
            --light: #ffffff;
            --gray: #8d8d8d;
            --accent: #df2a4a;
            --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        * { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-main); color: #333; line-height: 1.6; }
        a { text-decoration: none; color: inherit; }
        
        .header { background: var(--dark); color: var(--light); padding: 1rem 0; text-align: center; border-bottom: 3px solid var(--accent); }
        .logo-placeholder { font-size: 1.5rem; font-weight: 800; letter-spacing: -1px; display: block; }
        
        nav { background: #1a1a1a; padding: 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
        nav a { color: var(--light); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; }
        
        .container { max-width: 1100px; margin: 2rem auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 300px; gap: 40px; }
        
        .hero-banner { background: #f0f0f0; padding: 4rem 2rem; text-align: center; border-radius: 10px; margin-bottom: 2rem; border: 2px dashed #ccc; }
        
        .post-card { border: 1px solid #eee; border-radius: 10px; overflow: hidden; margin-bottom: 20px; transition: transform 0.2s; }
        .post-card:hover { transform: translateY(-5px); }
        .img-placeholder { width: 100%; height: 200px; background: linear-gradient(45deg, #0063dc, #00a0d2); }
        .post-content { padding: 1.5rem; }
        .post-title { margin: 0 0 1rem 0; font-size: 1.25rem; }
        
        footer { background: var(--dark); color: #878787; padding: 2rem; text-align: center; border-top: 3px solid var(--accent); margin-top: 4rem; }
        
        @media (max-width: 768px) { .container { grid-template-columns: 1fr; } }