:root{--primary:#1e88e5;--secondary:#673ab7;--accent:#00bcd4;--bg:#0f172a;--card:#111827;--text:#e5e7eb;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0b1020;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:#a5d8ff;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:20px}
.header{position:sticky;top:0;z-index:50;background:rgba(10,14,28,.8);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:800;font-size:22px;color:#fff;letter-spacing:.3px}
.menu{display:flex;gap:18px}
.menu a{padding:10px 12px;border-radius:10px}
.menu a:hover{background:rgba(255,255,255,.06)}
.btn{display:inline-block;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;border:0;cursor:pointer}
.hero{padding:60px 0;background:radial-gradient(600px 200px at 20% -10%,rgba(30,136,229,0.3),transparent), radial-gradient(600px 200px at 80% -10%,rgba(103,58,183,0.3),transparent)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);padding:18px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.card h3{margin-top:0}
.footer{color:#9ca3af;font-size:14px;padding:30px 0;border-top:1px solid rgba(255,255,255,.06);margin-top:40px}

/* Mobile menu overlay (like screenshot: single-column) */
.mobile-toggle{display:none}
@media (max-width:768px){
  .menu{display:none}
  .mobile-toggle{display:block;font-size:26px}
  .grid{grid-template-columns:1fr}
}
#mobileMenu{position:fixed;inset:0;background:#18181b;display:none;flex-direction:column;padding:30px;z-index:60;overflow-y:auto}
#mobileMenu a{display:block;font-size:28px;color:#e5e7eb;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06)}
#mobileMenu .close{position:absolute;right:20px;top:10px;font-size:34px}

/* Anti-copy */
.noselect{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.watermark{position:fixed;left:0;right:0;bottom:20px;text-align:center;opacity:.15;font-weight:700;pointer-events:none}