:root { --bg-base:#020617; --bg-surface:#0f172a; --text-primary:#f8fafc; --text-secondary:#94a3b8; --text-muted:#64748b; --brand-cyan:#0ea5e9; --border-subtle:rgba(255,255,255,0.06); --font-body:'Inter', sans-serif; --transition:all 0.3s ease; }
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; overflow-x:hidden; background:var(--bg-base); color:var(--text-primary); font-family:var(--font-body); line-height:1.6; }
body { padding-top:80px; }
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 1.5rem; }

nav { position:fixed; top:0; left:0; width:100%; z-index:1000; background:rgba(2,6,23,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-subtle); padding:1rem 0; height:70px; }
.nav-inner { display:flex; justify-content:space-between; align-items:center; height:100%; }
.logo { font-weight:700; font-size:1.1rem; color:#fff; text-decoration:none; display:flex; align-items:center; gap:0.5rem; }
.logo-dot { width:8px; height:8px; background:var(--brand-cyan); border-radius:50%; box-shadow:0 0 10px var(--brand-cyan); }
.nav-right { display:flex; align-items:center; }
.nav-links { display:flex; gap:1.5rem; align-items:center; }
.nav-link { font-size:0.85rem; color:var(--text-secondary); text-decoration:none; }
.btn-outline { border:1px solid var(--brand-cyan); color:var(--brand-cyan); padding:0.4rem 1rem; border-radius:4px; font-size:0.85rem; text-decoration:none; }
.mobile-toggle { display:none; background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer; }

.mobile-menu { position:fixed; top:0; right:-100%; width:100%; height:100%; background:var(--bg-base); z-index:2000; padding:2rem; transition:right 0.3s ease; display:none; flex-direction:column; overflow-y:auto; }
.mobile-menu.active { display:flex; right:0; }
.mobile-menu-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; }
.mobile-menu-links { display:flex; flex-direction:column; gap:0.5rem; }
.mobile-menu-links a { color:#fff; text-decoration:none; padding:0.8rem 0; border-bottom:1px solid var(--border-subtle); font-size:1.1rem; }
.menu-divider { height:1px; background:var(--border-subtle); margin:1rem 0; }
.close-menu { background:none; border:none; color:#fff; font-size:1.8rem; }

footer { background:#010410; border-top:1px solid var(--border-subtle); padding:4rem 0 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:3rem; }
.footer-col h4 { color:#fff; font-size:0.8rem; text-transform:uppercase; margin-bottom:1rem; }
.footer-col a { display:block; color:var(--text-secondary); text-decoration:none; margin-bottom:0.5rem; font-size:0.85rem; }
.footer-bottom { border-top:1px solid var(--border-subtle); padding:2rem 0; text-align:center; font-size:0.75rem; color:var(--text-muted); }

.hero { padding:4rem 0; }
.hero h1 { font-size:clamp(2rem, 5vw, 3.5rem); line-height:1.2; margin-bottom:1.5rem; }
.btn-primary { background:#fff; color:#000; padding:0.8rem 1.5rem; border-radius:30px; font-weight:600; text-decoration:none; display:inline-block; }

.grid-6 { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.5rem; }
.product-card { background:var(--bg-surface); padding:2rem; border-radius:8px; border:1px solid var(--border-subtle); }

@media (max-width:768px) {
    body { padding-top:70px; }
    .nav-links { display:none !important; }
    .mobile-toggle { display:block !important; }
    .footer-grid { grid-template-columns:1fr; text-align:center; }
    .footer-info { display:flex; flex-direction:column; align-items:center; }
}