:root{--blue:#2563eb;--indigo:#1e40af;--text:#0f172a;--muted:#64748b;--bg:#f8fafc}
                *{box-sizing:border-box}
                html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg)}
                a{text-decoration:none;color:inherit}
                .container{max-width:1200px;margin:0 auto;padding:0 20px}
                header.navbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e5e7eb}
                .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
                .brand{font-weight:800;color:var(--blue)}
                .menu{display:flex;gap:18px}
                .menu a{padding:8px 10px;border-radius:10px;color:#1f2937}
                .menu a:hover{background:#f1f5f9}
                
                /* Mobile menu styles */
                .mobile-menu{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e5e7eb;padding:20px 0;z-index:100}
                .mobile-menu-content{display:flex;justify-content:space-around;align-items:center;max-width:100%;padding:0 20px}
                .mobile-menu-item{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--text);padding:12px 8px;border-radius:12px;transition:background 0.2s ease;min-width:60px}
                .mobile-menu-item:hover{background:#f1f5f9}
                .mobile-menu-item.active .mobile-menu-label{color:var(--blue)}
                .mobile-menu-icon{font-size:20px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--text)}
                .mobile-menu-label{font-size:12px;font-weight:500;text-align:center}
                
                /* Responsive breakpoints */
                @media (max-width: 768px) {
                    .menu{display:none}
                    .mobile-menu{display:block}
                    .nav-inner{padding:0 20px}
                    body{padding-bottom:100px}
                    footer.site{margin-bottom:100px}
                }
                .hero{background:linear-gradient(135deg,var(--blue),var(--indigo));color:#fff;padding:80px 0}
                .hero h1{font-size:44px;line-height:1.1;margin:0 0 10px}
                .hero p{opacity:.95;font-size:18px;max-width:760px}
                .grid{display:grid;gap:18px}
                @media(min-width:900px){.grid-cols-3{grid-template-columns:repeat(3,1fr)}}
                .card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px}
                footer.site{margin-top:40px;border-top:1px solid #e5e7eb;background:#fff}
                footer.site .inner{display:flex;align-items:center;justify-content:space-between;padding:20px 0;color:#475569}