/* NodeXLabs Dark Neon Theme */
:root{
  --bg:#0b0f1a;
  --bg-soft:#0f1424;
  --card:#0f162b;
  --ink:#e6ecff;
  --muted:#9aa6c7;
  --primary:#00e5ff; /* neon cyan */
  --accent:#7c4dff;  /* violet */
  --success:#43ff9e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Subtle animated gradient background */
header{position:relative;overflow:hidden;color:var(--ink);}
.header-anim{
  position:absolute; inset:-20vmax -10vmax auto auto; width:70vmax; height:70vmax; pointer-events:none;
  background: radial-gradient(closest-side, rgba(0,229,255,.25), transparent 60%);
  filter: blur(40px); animation: float 18s ease-in-out infinite alternate;
}
@keyframes float{ 0%{transform:translate3d(-10%, -10%, 0)} 100%{transform:translate3d(6%, 10%, 0)} }

/* Navbar */
.navbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 22px; position:sticky; top:0;
  background: rgba(8,12,24,0.6); backdrop-filter: blur(8px); border-bottom:1px solid rgba(255,255,255,0.06); z-index:20}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand .dot{width:10px;height:10px;border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); box-shadow:0 0 12px var(--primary);}
nav a{padding:10px 12px; border-radius:10px; color:#cfe2ff; opacity:0.92; transition:.2s}
nav a:hover{background:rgba(255,255,255,0.06); opacity:1}
.nav-toggle{display:none; background:none; border:0; color:#cfe2ff; font-size:1.25rem}

/* Hero */
.hero{display:grid; place-items:center; text-align:center; padding:90px 20px 110px; background:linear-gradient(180deg, rgba(124,77,255,0.06), rgba(0,229,255,0.04) 60%, transparent);}
.hero h1{font-size: clamp(2rem, 5vw, 3.5rem); margin:0 0 10px; line-height:1.08}
.hero p{margin:0 auto 22px; max-width:820px; color:#c6d3fb}
.btn{display:inline-block; padding:12px 20px; border-radius:14px; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#0a0f1f; font-weight:700; box-shadow:0 10px 28px rgba(0,229,255,.18); transition: transform .15s ease, box-shadow .15s ease;}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(124,77,255,.25)}

/* Sections */
.section{padding:56px 20px}
.container{max-width:1150px; margin:0 auto}
.section h2{font-size: clamp(1.4rem, 2.6vw, 2.1rem); margin:0 0 10px}
.lead{color:var(--muted); max-width:960px}

/* Cards */
.grid{display:grid; gap:18px; grid-template-columns: repeat(12, 1fr);}
.card{grid-column: span 12; background:var(--card); border:1px solid rgba(255,255,255,0.06); border-radius:18px; padding:18px; position:relative; overflow:hidden; transition: transform .2s ease, box-shadow .2s ease;}
.card:hover{transform:translateY(-3px); box-shadow: 0 18px 48px rgba(0,0,0,.5);}
.card .tag{position:absolute; top:14px; right:14px; font-size:12px; padding:6px 10px; border-radius:999px; color:#06101e; background:linear-gradient(135deg,#b2fff7,#e0d7ff); border:1px solid rgba(255,255,255,0.18)}
.card h3{margin:6px 0 8px; font-size:1.1rem}

/* Responsive grid */
@media (min-width:700px){ .card{grid-column: span 6;} }
@media (min-width:1024px){ .card{grid-column: span 4;} }

/* AutoStack section highlight */
.autostack{display:grid; grid-template-columns: 1.15fr 1fr; gap:22px; align-items:stretch}
.autostack .panel{background:var(--card); border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:18px}
.kpis{display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:12px}
.kpi{background:#0e1a2e; border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:12px; text-align:center}
.kpi .val{font-size:1.25rem; font-weight:800; background:linear-gradient(135deg,var(--primary),var(--success)); -webkit-background-clip:text; -webkit-text-fill-color:transparent}

/* Footer */
footer{margin-top:40px; background:#070b14; color:#a6b6e6;}
footer .container{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:28px 20px;}
.footer-brand{font-weight:800; background:linear-gradient(135deg,var(--primary),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent}

/* Mobile */
@media (max-width: 760px){
  nav{display:none}
  nav.open{display:flex; flex-direction:column; gap:6px; background:rgba(10,14,26,0.9); position:absolute; right:12px; top:60px; padding:10px; border-radius:12px}
  .nav-toggle{display:block}
  .autostack{grid-template-columns:1fr}
}

/* Floating WhatsApp */
.whatsapp{
  position:fixed; right:18px; bottom:18px; z-index:50;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,#25D366,#1ebe57);
  display:grid; place-items:center; color:white; font-weight:900;
  box-shadow:0 12px 26px rgba(37,211,102,.35);
  transition: transform .2s ease;
}
.whatsapp:hover{ transform: translateY(-2px) scale(1.03); }