:root{
  --bg:#0b1220; --card:#0f172a; --text:#e2e8f0; --muted:#94a3b8; --accent:#44E0F5; --accent-2:#44E0F5; --warn:#f59e0b; --bad:#ef4444; --good:#22c55e;
  --link:#44E0F5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial; color:var(--text); background:linear-gradient(180deg,#0b1220 0%, #0b1220 60%, #0b1220 100%);}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px;margin:0 auto;padding:24px}

/* Consistent page wrapper */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .page {
    padding-left: 18px;
    padding-right: 18px;
  }
}

. 
. 
/* NAV */
html{scrollbar-gutter:stable both-edges; overflow-y:scroll}
.nav{background:#0b1220;border-bottom:1px solid #1f2937;position:sticky;top:0;z-index:5}
.nav .wrap{display:flex;align-items:center;gap:16px; padding:14px 24px}

/* Brand mark next to COMND */
.brand { display:flex; align-items:center; font-weight:800; letter-spacing:.5px; }
.brand-mark { height:22px; width:auto; display:block; }

/* Right-side login buttons */
.menu { flex:1 1 auto; }
.menu-actions { margin-left:auto; display:flex; gap:10px; padding-right:8px; }

/* Make the login buttons dark to match body buttons */
.btn.small { padding:6px 10px; font-size:.95rem; }
.btn.outline { background:var(--accent); color:#052e16; border:0; }

/* Mobile breathing room + better hamburger tap area */
@media (max-width: 640px) {
  .container,
  .page {
    padding-left: 18px;
    padding-right: 18px;
  }
  .bubble {
    margin-left: 6px;
    margin-right: 6px;
  }
  .hero-left, .hero-right {
    padding-left: 4px;
    padding-right: 4px;
  }
  .hamburger {
    margin-left: 8px;
    padding: 10px 12px;   /* larger tap target */
    border-radius: 10px;
  }
}

.brand{font-weight:800;letter-spacing:.5px}
.brand span { color:var(--accent); margin-left:0; }
.nav a{color:#cbd5e1}
.nav .spacer{display:none}
.menu a{margin:0 8px;padding:8px 10px;border-radius:10px}
.menu a.active, .menu a:hover{background:#111827}
.hamburger{display:none;cursor:pointer;font-size:24px;color:var(--accent)}

/* HERO */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:start;padding:64px 0}
.hero .right{display:flex;flex-direction:column;gap:16px}
h1{font-size:40px;line-height:1.1;margin:0 0 12px}
h2{font-size:28px;margin:24px 0 12px}
p{color:var(--muted);line-height:1.6}
.cta{display:flex;gap:12px;margin-top:18px}
.btn{background:var(--accent);color:#052e16;border:0;padding:12px 16px;border-radius:12px;font-weight:700;cursor:pointer}
.btn.secondary{background:#1f2937;color:#e5e7eb}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid #1f2937;border-radius:16px;padding:18px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.kpi{background:#0b1220;border:1px dashed #1f2937;border-radius:14px;padding:16px;text-align:center}
.kpi-icon{display:block;margin:0 auto 8px;height:36px;width:auto;color:#fff}
.kpi-icon-img{display:block;margin:0 auto 8px;height:36px;width:auto;filter:brightness(0) invert(1);opacity:0.95}
.table{width:100%;border-collapse:collapse;margin-top:12px}
.table th,.table td{border:1px solid #223047;padding:10px;text-align:center}
.bad{color:var(--bad);font-weight:700}
.good{color:var(--good);font-weight:700}
.footer{border-top:1px solid #1f2937;margin-top:48px;padding:24px 0;color:#94a3b8}
.note{font-size:12px;color:#94a3b8;margin-top:8px}
.tag{display:inline-block;padding:4px 8px;border:1px solid #223047;border-radius:999px;color:#cbd5e1;margin:4px 6px 0 0;font-size:12px}
.hero .badge{display:inline-flex;gap:6px;align-items:center;background:#0b1220;border:1px solid #1f2937;color:#cbd5e1;padding:6px 10px;border-radius:999px;margin-bottom:10px}
.list{margin:0;padding-left:18px}

/* MOBILE */
@media(max-width:768px){
  .hamburger{display:block}
  .menu{display:none;flex-direction:column;background:#0b1220;padding:10px;margin-left:auto;margin-right:0;border:1px solid #1f2937;border-radius:12px;position:absolute;right:16px;top:56px}
  .menu.show{display:flex}
  .hero{grid-template-columns:1fr}
}