* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:#f0f4fa; color:#1e2a3a; overflow-x:hidden; }
.animated-bg { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-2; }
.bg-layer { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-2; transition:opacity 4s ease-in-out; }
.bg-layer-1 { background:radial-gradient(circle at 20% 30%, #0071e4, #b3e0ff); opacity:1; animation:fade1 12s infinite alternate; }
.bg-layer-2 { background:radial-gradient(circle at 80% 70%, #00c2f7, #e6f7ff); opacity:0; animation:fade2 12s infinite alternate; }
@keyframes fade1 { 0%,40% { opacity:1; } 60%,100% { opacity:0; } }
@keyframes fade2 { 0%,40% { opacity:0; } 60%,100% { opacity:1; } }

.site-header { position:fixed; top:0; left:0; width:100%; padding:12px 28px; display:flex; align-items:center; gap:16px; background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); z-index:100; border-bottom:1px solid rgba(0,0,0,0.08); }
.header-logo-wrapper { background:white; border-radius:50%; width:48px; height:48px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.header-logo { width:40px; height:40px; object-fit:contain; border-radius:50%; }
.header-title { font-size:1.4rem; font-weight:700; color:#0071e4; }
.lang-switch { margin-left:auto; display:flex; gap:8px; background:rgba(0,0,0,0.05); padding:4px 12px; border-radius:40px; }
.lang-btn { background:transparent; border:none; color:#1e2a3a; font-weight:600; cursor:pointer; padding:4px 8px; border-radius:30px; transition:0.2s; }
.lang-btn.active { background:#0071e4; color:white; }

.main-content { margin-top:70px; }
section { padding:60px 24px; max-width:1200px; margin:0 auto; }
.hero-section { min-height:calc(100vh - 70px); display:flex; align-items:center; justify-content:center; text-align:center; }
.hero-card { background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); border-radius:56px; padding:48px 32px; max-width:800px; box-shadow:0 20px 40px rgba(0,0,0,0.1); }
.hero-logo { width:120px; margin-bottom:24px; }
.hero-card h1 { font-size:3rem; color:#0071e4; margin-bottom:12px; }
.hero-tagline { font-size:1.3rem; color:#2c6e9e; margin-bottom:20px; }
.hero-description { font-size:1.1rem; color:#2d3748; margin-bottom:32px; }
.hero-buttons { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.btn { padding:12px 32px; border-radius:40px; text-decoration:none; font-weight:600; transition:0.2s; }
.btn-primary { background:#0071e4; color:white; box-shadow:0 4px 12px rgba(0,113,228,0.3); }
.btn-primary:hover { background:#005bb5; transform:translateY(-2px); }
.btn-secondary { background:rgba(0,113,228,0.1); color:#0071e4; border:1px solid #0071e4; }
.btn-secondary:hover { background:rgba(0,113,228,0.2); }

.section-title { font-size:2rem; text-align:center; margin-bottom:48px; color:#0071e4; }
.features-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:32px; }
.feature-card { background:rgba(255,255,255,0.8); backdrop-filter:blur(8px); border-radius:32px; padding:28px 24px; width:280px; text-align:center; transition:0.3s; border:1px solid rgba(0,0,0,0.05); }
.feature-card:hover { transform:translateY(-6px); background:white; box-shadow:0 12px 24px rgba(0,0,0,0.1); }
.feature-icon { font-size:2.5rem; margin-bottom:16px; }
.feature-card h3 { font-size:1.4rem; margin-bottom:12px; color:#0071e4; }
.feature-card p { color:#4a5568; }

.about-content { background:rgba(255,255,255,0.8); backdrop-filter:blur(8px); border-radius:32px; padding:40px; max-width:800px; margin:0 auto; line-height:1.6; color:#2d3748; }
.about-content p { margin-bottom:20px; }

.download-hero { text-align:center; padding:40px 20px; }
.download-hero h1 { font-size:2.5rem; color:#0071e4; margin-bottom:12px; }
.download-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.download-card { background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); border-radius:32px; padding:32px 24px; width:280px; text-align:center; transition:0.3s; border:1px solid rgba(0,0,0,0.05); }
.download-card:hover { transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,0.1); }
.os-icon { font-size:3rem; margin-bottom:16px; }
.download-card h3 { font-size:1.6rem; margin-bottom:8px; color:#0071e4; }
.download-card p { color:#4a5568; margin-bottom:20px; }
.download-btn { display:inline-block; background:#0071e4; color:white; padding:10px 24px; border-radius:40px; text-decoration:none; font-weight:600; transition:0.2s; }
.download-btn:hover { background:#005bb5; }
.download-btn.disabled { background:#ccc; cursor:not-allowed; pointer-events:none; }
.update-info { background:rgba(255,255,255,0.8); border-radius:32px; padding:32px; margin-top:40px; text-align:center; }

footer { background:rgba(0,0,0,0.05); padding:32px 20px; text-align:center; margin-top:40px; }
.footer-content a { color:#0071e4; text-decoration:none; margin:0 8px; }
.footer-content a:hover { text-decoration:underline; }

@media (max-width:680px) {
    .hero-card h1 { font-size:2.2rem; }
    .hero-logo { width:80px; }
    .section-title { font-size:1.6rem; }
    .download-card { width:100%; max-width:280px; }
}