:root{--primary:#0c1324;--accent:#0ea5e9;--accent2:#14b8a6;--bg:#f7f9fc}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;color:var(--primary);background:#fff;line-height:1.65}
h1,h2,h3{font-family:'Manrope', 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
a{color:var(--accent);text-decoration:none} a:hover{color:#0369a1}
.container{max-width:1140px;margin:0 auto;padding:0 20px}

/* NAV + mega menu */
nav{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:70}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.brand img{height:34px}
.menu{display:flex;gap:22px;align-items:center}
.menu a{font-weight:700}
.has-mega{position:relative}
.mega{display:none;position:absolute;left:0;top:40px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.08);padding:18px;min-width:560px}
.mega .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mega .col h4{margin:0 0 8px 0;font-size:1rem}
.mega .item{display:block;padding:10px;border-radius:10px;color:#0b1220}
.mega .item:hover{background:#f1f5f9}
.has-mega:hover .mega, .has-mega:focus-within .mega{display:block}
.menu-toggle{display:none;border:1px solid #e5e7eb;padding:8px 10px;border-radius:10px;background:#fff}

/* HERO with canvas constellation animation */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#ffffff, var(--bg));padding:96px 0 66px;border-bottom:1px solid #e5e7eb}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .layer{position:relative;z-index:1}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr 0.9fr;gap:34px;align-items:center}
.badge{display:inline-block;padding:6px 10px;background:#dbeafe;color:#075985;border-radius:999px;font-weight:800;margin-bottom:12px}
h1{font-size:2.8rem;margin:0 0 12px;line-height:1.1}
.lead{color:#334155;font-size:1.14rem}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:800;color:#fff;background:var(--accent2)}
.btn:hover{background:#0f766e}
.btn.secondary{background:transparent;color:#0ea5e9}

/* Sections */
.section{padding:66px 0} .section.muted{background:var(--bg)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:20px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.card h3{margin-top:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.tools{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.tool{background:#f1f5f9;border-radius:12px;padding:14px;text-align:center;font-weight:700;border:1px solid #e5e7eb}

footer.footer{padding:36px 0;border-top:1px solid #e5e7eb;color:#475569;font-size:.95rem}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .tools{grid-template-columns:repeat(2,1fr)}
  .menu{display:none;position:absolute;top:62px;right:16px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;flex-direction:column;gap:8px;min-width:280px}
  .menu.open{display:flex}
  .mega{position:static;display:none;border:none;box-shadow:none;border-radius:0;padding:0;min-width:0}
  .has-mega.open .mega{display:block}
  .menu-toggle{display:inline-block}
}