:root {
            --font-family: 'Inter', sans-serif;
            --color-black: #000000;
            --color-white: #ffffff;
            --color-accent: #1990c6;
            --container-width: 1200px;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: var(--font-family); color: var(--color-black); line-height: 1.6; }
        a { text-decoration: none; color: inherit; }
        
        /* Header */
        header { padding: 2rem 5%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; }
        .logo { font-weight: 700; font-size: 1.5rem; letter-spacing: 0.1rem; text-transform: uppercase; }
        nav ul { display: flex; list-style: none; gap: 2rem; }
        
        /* Hero Section */
        .hero { 
            height: 70svh; 
            background: linear-gradient(135deg, #1a1a2e 0%, #3d4246 100%); 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center; 
            color: white; 
            text-align: center;
            padding: 0 2rem;
        }
        .hero h1 { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 1rem; }
        
        /* Grid Layout */
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; padding: 4rem 5%; max-width: var(--container-width); margin: 0 auto; }
        .card { border: 1px solid #e2e2e2; padding: 2rem; text-align: center; transition: 0.3s; }
        .card:hover { border-color: var(--color-accent); }
        
        /* Footer */
        footer { background: #121212; color: #fff; padding: 4rem 5%; text-align: center; }
        
        @media (max-width: 768px) {
            nav { display: none; }
            .hero { height: 50svh; }
        }