:root{ --bg:#05080f; --panel:rgba(255,255,255,0.06); --glass:rgba(255,255,255,0.08); --text:#e6f7ff; --muted:#8fb9c9; --accent1:#00ffd5; --accent2:#00b3ff; --accent3:#a04bff; }
*{box-sizing:border-box} html,body{height:100%}
body.nr-body{margin:0;background:radial-gradient(1000px 600px at 15% 10%,#0a1b2e 0%, var(--bg) 60%); color:var(--text); font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; overflow-x:hidden;}

/* Fixed header, slim */
.nr-header{position:fixed; top:0; left:0; right:0; z-index:9999; backdrop-filter:blur(10px); background:linear-gradient(180deg, rgba(5,8,15,0.95), rgba(5,8,15,0.60)); border-bottom:1px solid rgba(255,255,255,0.08)}
.nav-wrap{display:flex; align-items:center; gap:12px; justify-content:space-between; padding:6px 0}
.brand{display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-weight:700}
.brand-logo{height:64px; width:auto; object-fit:contain; filter:drop-shadow(0 0 6px rgba(0,255,213,.25))}
.brand-text{display:none}
.nr-nav .nr-menu{list-style:none; display:flex; gap:20px; padding:0; margin:0}
.nr-nav .nr-menu a{color:var(--muted); text-decoration:none; font-weight:500}
.nr-nav .nr-menu a:hover{color:var(--text)}

/* Mobile nav */
.navtoggle{display:none}
.burger{display:none; cursor:pointer}
.burger span{display:block; width:26px; height:2px; background:#cde; margin:5px 0}

/* Canvas never blocks clicks */
#nr-particles{position:fixed; inset:0; z-index:0; pointer-events:none}

/* Layout */
.container{width:min(1200px,92%); margin:0 auto}
.section{padding:80px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.0))}

/* Hero */
.hero{position:relative; z-index:1; padding:120px 0 80px}
.hero-inner{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center}
.hero-copy h1{font-size:clamp(30px,4vw,54px); margin:0 0 10px; line-height:1.08}
.hero-copy p{color:var(--muted); font-size:clamp(16px,2vw,18px)}
.btn-row{display:flex; gap:12px; margin:18px 0}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.badge{background:var(--glass); padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.1); color:#d1f8ff; font-size:13px}

/* Neural */
.neural{width:100%; height:340px; position:relative; border-radius:16px; background:radial-gradient(500px 260px at 70% 30%, rgba(0,179,255,0.12), rgba(0,255,213,0.06) 40%, transparent 70%); border:1px solid rgba(255,255,255,0.08); overflow:hidden}
.neural .node{position:absolute; width:10px; height:10px; border-radius:50%; background:#00ffd5; box-shadow:0 0 18px #00ffd5; animation:pulse 2.8s ease-in-out infinite}
.neural .n1{left:12%; top:75%; animation-delay:.2s}.n2{left:48%; top:55%; animation-delay:.7s}.n3{left:74%; top:26%; animation-delay:.4s}
.neural .n4{left:27%; top:38%; animation-delay:.9s}.n5{left:88%; top:70%; animation-delay:.6s}.n6{left:6%; top:20%; animation-delay:1.2s}
.neural .links{position:absolute; inset:0; stroke:rgba(0,255,213,0.35); stroke-width:1.5}
@keyframes pulse{0%,100%{transform:scale(.9); opacity:.7} 50%{transform:scale(1.2); opacity:1}}

/* Grids and cards */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:20px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start}
.card{background:var(--panel); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:22px; box-shadow:0 10px 35px rgba(0,0,0,0.25)}
.card h3{margin-top:0}
.list{padding-left:18px; color:var(--muted)} .list li{margin-bottom:6px}

/* Table */
.table-wrap{overflow:auto; background:var(--panel); border-radius:16px; border:1px solid rgba(255,255,255,0.08)}
.table{width:100%; border-collapse:collapse; min-width:620px}
.table th,.table td{padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.07); text-align:left}
.table thead th{background:rgba(255,255,255,0.04); color:#dff8ff; position:sticky; top:0}

/* Buttons and form */
.btn{display:inline-block; background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3)); color:#031321; padding:12px 18px; border:none; border-radius:14px; font-weight:700; text-decoration:none; cursor:pointer; transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,0.2)}
.form .row{margin-bottom:12px}
.form input,.form textarea{width:100%; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); color:var(--text); outline:none}
.form input::placeholder,.form textarea::placeholder{color:#a2d5e6}
.form-note{color:var(--muted); font-size:12px}
.form-status{margin-top:8px; font-weight:600}

/* Footer */
.nr-footer{padding:50px 0 20px; border-top:1px solid rgba(255,255,255,0.06); background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.25))}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:22px}
.footer-logo{width:180px; opacity:.95}
.footer-menu{list-style:none; padding:0} .footer-menu a{color:var(--muted); text-decoration:none}
.copy{text-align:center; color:var(--muted); margin:10px 0 0; font-size:13px}

/* WhatsApp pill */
.wa-pill{position:fixed; bottom:16px; right:16px; z-index:2147483646; display:inline-flex; align-items:center; justify-content:center; min-width:160px; padding:14px 20px; border-radius:999px; background:#25D366; color:#fff; font-weight:800; letter-spacing:.2px; text-decoration:none; pointer-events:auto; box-shadow:0 12px 26px rgba(37,211,102,0.35)}
.wa-pill:hover{transform:translateY(-2px)} .wa-pill:active{transform:scale(0.98)}

/* Typed caret */
.typed{border-right:2px solid var(--accent2); padding-right:4px; white-space:nowrap; overflow:hidden; animation:blink .9s step-end infinite}
@keyframes blink{from,to{border-color:transparent}50%{border-color:var(--accent2)}}

/* Responsive */
@media(max-width:1024px){ .brand-logo{height:58px} .nr-nav .nr-menu{gap:14px; flex-wrap:wrap} }
@media(max-width:900px){
  .burger{display:block}
  .nr-nav{position:absolute; top:100%; right:0; background:rgba(5,8,15,0.98); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:10px; display:none}
  .nr-nav .nr-menu{flex-direction:column; gap:10px}
  .navtoggle:checked ~ .nr-nav{display:block}
}
@media(max-width:768px){
  .brand-logo{height:52px}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .hero{padding-top:140px}
}