:root {
            --primary-color: #1D7BFF;
            --bg-dark: rgb(32, 33, 36);
            --bg-deep: #0a1128;
            --bg-card: rgba(255, 255, 255, 0.03);
            --border-color: rgba(255, 255, 255, 0.08);
            --text-main: #f3f4f6;
            --text-muted: #9ca3af;
            --text-white: #ffffff;
            --max-width: 1200px;
        }
        * { box-sizing: border-box; margin:0; padding:0; }
        body { background-color: var(--bg-dark); color: var(--text-main); font-family: -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.6; }
        a { color: inherit; text-decoration: none; transition: all 0.3s; }

        header { background: rgba(32, 33, 36, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); position: sticky; top:0; z-index:100; }
        .header-container { max-width: var(--max-width); margin:0 auto; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; }
        .logo { display:inline-flex; align-items:center; gap:12px; }
        .logo img { height:40px; width:auto; max-width:160px; object-fit:contain; }
        .logo span { font-size:20px; font-weight:800; color: var(--text-white); }
        nav.desktop-nav { display:flex; gap:28px; }
        nav.desktop-nav a { font-size:15px; color: var(--text-muted); }
        nav.desktop-nav a:hover { color: var(--primary-color); }
        .btn-download-top { background: linear-gradient(135deg, #1D7BFF, #0052cc); color:#fff; padding:8px 20px; border-radius:6px; font-weight:600; font-size:14px; }
        .menu-toggle { display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; }
        .drawer-backdrop { position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.6); z-index:199; opacity:0; visibility:hidden; transition:all 0.3s; }
        .drawer-backdrop.active { opacity:1; visibility:visible; }
        .mobile-drawer { position:fixed; top:0; left:-320px; width:300px; height:100vh; background:var(--bg-dark); border-right:1px solid var(--border-color); z-index:200; padding:24px; display:flex; flex-direction:column; gap:32px; transition:all 0.3s ease; }
        .mobile-drawer.active { left:0; }
        .drawer-header { display:flex; justify-content:space-between; align-items:center; }
        .drawer-close { background:none; border:none; color:#fff; font-size:28px; }

        .about-hero { background: radial-gradient(circle at 50% 30%, var(--bg-deep) 0%, var(--bg-dark) 100%); padding: 80px 20px; text-align: center; border-bottom: 1px solid var(--border-color); }
        .about-title { font-size: 36px; font-weight: 800; color:#fff; margin-bottom: 16px; }
        .about-p { font-size: 16px; color: var(--text-muted); max-width: 700px; margin: 0 auto; }

        .about-content { max-width: var(--max-width); margin:0 auto; padding: 60px 20px; }
        .section-block { margin-bottom: 60px; }
        .section-block h2 { font-size: 24px; font-weight:800; color:#fff; margin-bottom: 20px; display:flex; align-items:center; gap:10px; }
        .section-block h2::before { content:''; display:inline-block; width:4px; height:24px; background:var(--primary-color); }
        .grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
        .about-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius:12px; padding:30px; }
        .about-card h3 { font-size: 18px; color:#fff; margin-bottom:12px;}
        .about-card p { font-size:14px; color: var(--text-muted); line-height: 1.6; }

        
        .timeline { position: relative; padding-left: 30px; border-left: 2px solid var(--border-color); display:flex; flex-direction:column; gap:30px; }
        .timeline-item { position: relative; }
        .timeline-item::before { content: ''; position: absolute; left: -36px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary-color); border: 2px solid var(--bg-dark); }
        .timeline-year { font-weight: 800; color: var(--primary-color); font-size: 16px; margin-bottom: 6px; }
        .timeline-text { font-size: 14px; color: var(--text-muted); }

        footer { background: #060913; border-top: 1px solid var(--border-color); padding: 60px 20px 30px 20px; }
        .footer-grid { max-width: var(--max-width); margin:0 auto 40px auto; display:grid; grid-template-columns: 2fr repeat(3, 1fr); gap:40px; }
        .footer-brand { display:flex; flex-direction:column; gap:16px; }
        .footer-brand p { font-size:14px; color: var(--text-muted); max-width:320px; }
        .footer-col h4 { font-size:15px; font-weight:700; color:#fff; margin-bottom:16px; }
        .footer-links { list-style:none; display:flex; flex-direction:column; gap:12px; }
        .footer-links a { font-size:13px; color: var(--text-muted); }
        .footer-bottom { max-width: var(--max-width); margin:0 auto; border-top: 1px solid var(--border-color); padding-top: 30px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:12px; color: var(--text-muted); }

        @media (max-width: 768px) {
            nav.desktop-nav, .header-actions { display:none; }
            .menu-toggle { display:block; }
            .grid-2 { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr; gap:30px; }
            .footer-bottom { flex-direction:column; text-align:center; }
        }