: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; }

        .dl-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); }
        .dl-title { font-size: 36px; font-weight:800; color:#fff; margin-bottom: 16px; }
        .dl-subtitle { font-size: 16px; color: var(--text-muted); max-width: 650px; margin: 0 auto; }

        .dl-content { max-width: var(--max-width); margin: 0 auto; padding: 60px 20px; }
        .dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 60px; }
        .dl-card { background: var(--bg-card); border:1px solid var(--border-color); border-radius:12px; padding:30px; text-align: center; display:flex; flex-direction:column; align-items:center; transition: all 0.3s; }
        .dl-card:hover { transform: translateY(-4px); border-color: var(--primary-color); }
        .dl-icon { font-size: 40px; margin-bottom: 20px; }
        .dl-card-title { font-size: 20px; font-weight:700; color:#fff; margin-bottom:12px; }
        .dl-card-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; line-height:1.5; }
        .btn-dl { background: linear-gradient(135deg, #1D7BFF, #0052cc); color:#fff; padding:12px 30px; border-radius:6px; font-weight:700; font-size:15px; width: 100%; box-shadow: 0 4px 12px rgba(29, 123, 255, 0.2); }

        .instruction-box { background: rgba(255,255,255,0.02); border: 1px solid var(--border-color); border-radius: 12px; padding: 40px 30px; }
        .instruction-box h2 { font-size: 22px; font-weight:800; color:#fff; margin-bottom: 24px; text-align:center; }
        .step-list { list-style: none; display:grid; grid-template-columns: repeat(3, 1fr); gap:30px; }
        .step-item { display:flex; gap:16px; }
        .step-num { width: 36px; height: 36px; background: var(--primary-color); color:#fff; font-weight:800; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .step-info h3 { font-size:16px; color:#fff; margin-bottom: 6px; }
        .step-info p { font-size:13px; color: var(--text-muted); line-height: 1.5; }

        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: 968px) {
            .dl-grid { grid-template-columns: 1fr; }
            .step-list { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            nav.desktop-nav, .header-actions { display:none; }
            .menu-toggle { display:block; }
            .footer-grid { grid-template-columns: 1fr; gap:30px; }
            .footer-bottom { flex-direction:column; text-align:center; }
        }