:root{
 --nx-bg:#020711;
 --nx-panel:rgba(7,15,28,.82);
 --nx-cyan:#00f5ff;
 --nx-purple:#9c4dff;
 --nx-text:#edf7ff;
 --nx-muted:#9fb1c5;
 --nx-border:rgba(0,245,255,.15);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
 margin:0;
 background:
 radial-gradient(circle at 12% 8%,rgba(0,245,255,.08),transparent 27%),
 radial-gradient(circle at 87% 28%,rgba(156,77,255,.08),transparent 30%),
 linear-gradient(180deg,#020711,#030914 55%,#020711);
 color:var(--nx-text);
 font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 overflow-x:hidden;
}

body:before{
 content:"";
 position:fixed;
 inset:0;
 pointer-events:none;
 z-index:-5;
 background:
 linear-gradient(rgba(0,245,255,.022) 1px,transparent 1px),
 linear-gradient(90deg,rgba(0,245,255,.022) 1px,transparent 1px);
 background-size:58px 58px;
 mask-image:linear-gradient(to bottom,black,transparent 90%);
}

.nx-wrap{
 width:min(1220px,94%);
 margin:auto;
}

/* HEADER */
.nx-header{
 position:sticky;
 top:0;
 z-index:9999;
 border-bottom:1px solid rgba(0,245,255,.12);
 background:rgba(2,7,17,.82);
 backdrop-filter:blur(22px);
}

.nx-nav{
 min-height:74px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:18px;
}

.nx-brand{
 text-decoration:none;
 font-size:21px;
 font-weight:950;
 letter-spacing:.055em;
 white-space:nowrap;
 background:linear-gradient(90deg,#fff,#00f5ff,#fff,#a94dff,#00f5ff);
 background-size:350% 100%;
 -webkit-background-clip:text;
 background-clip:text;
 color:transparent;
 animation:nxBrand 7s linear infinite;
 filter:drop-shadow(0 0 10px rgba(0,245,255,.2));
}

.nx-menu{
 display:flex;
 align-items:center;
 gap:8px;
 flex-wrap:wrap;
}

.nx-menu>a,
.nx-menu summary,
.nx-lang{
 color:#dceaf7;
 text-decoration:none;
 border:1px solid rgba(255,255,255,.10);
 background:rgba(255,255,255,.025);
 border-radius:10px;
 padding:9px 12px;
 cursor:pointer;
 font-size:14px;
 list-style:none;
}

.nx-menu>a:hover,
.nx-menu summary:hover,
.nx-lang:hover{
 color:#00f5ff;
 border-color:rgba(0,245,255,.38);
 background:rgba(0,245,255,.055);
}

.nx-menu details{position:relative}
.nx-menu summary::-webkit-details-marker{display:none}

.nx-drop{
 position:absolute;
 top:46px;
 right:0;
 width:270px;
 padding:9px;
 border-radius:15px;
 background:rgba(3,10,21,.985);
 border:1px solid rgba(0,245,255,.18);
 box-shadow:0 20px 70px rgba(0,0,0,.55);
}

.nx-drop a{
 display:block;
 text-decoration:none;
 color:#cfe0ef;
 padding:11px 12px;
 border-radius:9px;
}

.nx-drop a:hover{
 color:#00f5ff;
 background:rgba(0,245,255,.065);
}

.nx-lang.active{
 color:#00f5ff;
 border-color:#00f5ff;
}

/* HERO VISUAL */
.nx-auto-visual{
 width:min(1180px,92%);
 margin:25px auto 55px;
 position:relative;
 min-height:330px;
 border:1px solid rgba(0,245,255,.16);
 border-radius:26px;
 overflow:hidden;
 background:
 radial-gradient(circle at 70% 25%,rgba(0,245,255,.10),transparent 28%),
 radial-gradient(circle at 25% 78%,rgba(156,77,255,.10),transparent 30%),
 rgba(3,9,19,.82);
 box-shadow:
 inset 0 0 60px rgba(0,245,255,.035),
 0 25px 90px rgba(0,0,0,.30);
}

.nx-auto-visual svg{
 width:100%;
 height:330px;
 display:block;
}

.nx-grid-line{
 stroke:rgba(255,255,255,.055);
 stroke-width:1;
}

.nx-neon-line{
 fill:none;
 stroke:url(#nxGradient);
 stroke-width:4;
 stroke-dasharray:1400;
 filter:drop-shadow(0 0 8px rgba(0,245,255,.7));
 animation:nxDraw 7s linear infinite;
}

.nx-node{
 fill:#00f5ff;
 filter:drop-shadow(0 0 9px #00f5ff);
 animation:nxPulse 1.8s ease-in-out infinite alternate;
}

.nx-wave{
 fill:none;
 stroke:url(#nxGradient);
 stroke-width:4;
 filter:drop-shadow(0 0 7px rgba(0,245,255,.65));
 animation:nxWave 3s ease-in-out infinite alternate;
}

.nx-candle-up{
 stroke:#00f5ff;
 fill:rgba(0,245,255,.16);
 filter:drop-shadow(0 0 7px rgba(0,245,255,.55));
}

.nx-candle-down{
 stroke:#ff477e;
 fill:rgba(255,71,126,.14);
 filter:drop-shadow(0 0 7px rgba(255,71,126,.5));
}

.nx-orbit{
 fill:none;
 stroke:rgba(0,245,255,.22);
 stroke-width:2;
 stroke-dasharray:9 12;
 transform-origin:center;
 animation:nxRotate 18s linear infinite;
}

/* HOME ECOSYSTEM */
.nx-ecosystem{
 padding:70px 0;
}

.nx-section-title{
 font-size:clamp(30px,4vw,48px);
 margin:8px 0 16px;
}

.nx-kicker{
 color:#00f5ff;
 font-size:13px;
 font-weight:850;
 letter-spacing:.12em;
}

.nx-eco-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:18px;
 margin-top:28px;
}

.nx-eco-card{
 padding:24px;
 border:1px solid var(--nx-border);
 border-radius:20px;
 background:linear-gradient(145deg,rgba(8,18,32,.83),rgba(3,8,17,.85));
 text-decoration:none;
 color:inherit;
 transition:.35s;
 position:relative;
 overflow:hidden;
}

.nx-eco-card:before{
 content:"";
 position:absolute;
 inset:-100%;
 background:linear-gradient(120deg,transparent 40%,rgba(0,245,255,.09),transparent 60%);
 transform:translateX(-40%);
 transition:.7s;
}

.nx-eco-card:hover{
 transform:translateY(-8px);
 border-color:rgba(0,245,255,.47);
 box-shadow:0 0 40px rgba(0,245,255,.10);
}

.nx-eco-card:hover:before{
 transform:translateX(40%);
}

.nx-eco-card h3{margin:7px 0}
.nx-eco-card p{color:#98aabe;line-height:1.65}

/* GENERIC SERVICE PAGES */
.nx-service-hero{
 padding:100px 0 45px;
}

.nx-service-hero h1{
 font-size:clamp(42px,7vw,76px);
 line-height:1.03;
 margin:14px 0;
 background:linear-gradient(90deg,#fff,#00f5ff,#fff,#a94dff);
 background-size:300%;
 -webkit-background-clip:text;
 color:transparent;
 animation:nxBrand 7s linear infinite;
}

.nx-service-hero p{
 max-width:820px;
 color:#9fb1c5;
 line-height:1.75;
 font-size:17px;
}

.nx-card-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:18px;
 margin:30px 0;
}

.nx-detail-card{
 padding:23px;
 border:1px solid rgba(0,245,255,.14);
 border-radius:18px;
 background:rgba(6,14,26,.82);
 transition:.3s;
}

.nx-detail-card:hover{
 transform:translateY(-6px);
 border-color:rgba(0,245,255,.4);
 box-shadow:0 0 30px rgba(0,245,255,.08);
}

.nx-detail-card h3{margin:8px 0}
.nx-detail-card p{color:#94a7ba;line-height:1.65}

.nx-btn{
 display:inline-block;
 text-decoration:none;
 color:white;
 font-weight:800;
 padding:13px 18px;
 border-radius:12px;
 margin:8px 8px 8px 0;
 background:linear-gradient(90deg,#00cfe8,#6d56ff);
 box-shadow:0 0 25px rgba(0,245,255,.12);
}

.nx-btn.alt{
 background:transparent;
 border:1px solid rgba(0,245,255,.34);
 color:#00f5ff;
}

/* FOOTER */
.nx-footer{
 margin-top:70px;
 border-top:1px solid rgba(255,255,255,.08);
 background:rgba(2,6,14,.8);
}

.nx-footer-grid{
 padding:55px 0 35px;
 display:grid;
 grid-template-columns:1.25fr 1fr 1fr 1fr;
 gap:28px;
}

.nx-footer h4{
 color:#fff;
 margin:0 0 13px;
}

.nx-footer a{
 display:block;
 color:#8fa3b9;
 text-decoration:none;
 margin:8px 0;
}

.nx-footer a:hover{color:#00f5ff}
.nx-footer p{color:#7f93aa;line-height:1.7}

.nx-footer-bottom{
 border-top:1px solid rgba(255,255,255,.07);
 padding:20px 0 30px;
 color:#657a91;
 font-size:13px;
}

/* REVEAL */
.nx-reveal{
 opacity:0;
 transform:translateY(24px);
 filter:blur(5px);
 transition:.75s cubic-bezier(.2,.8,.2,1);
}

.nx-reveal.show{
 opacity:1;
 transform:none;
 filter:none;
}

@keyframes nxBrand{
 to{background-position:350% 0}
}

@keyframes nxDraw{
 0%{stroke-dashoffset:1400}
 55%,100%{stroke-dashoffset:0}
}

@keyframes nxPulse{
 to{transform:scale(1.35);opacity:.65}
}

@keyframes nxWave{
 from{transform:translateY(-6px)}
 to{transform:translateY(6px)}
}

@keyframes nxRotate{
 to{transform:rotate(360deg)}
}

@media(max-width:900px){
 .nx-eco-grid,.nx-card-grid,.nx-footer-grid{
  grid-template-columns:1fr;
 }
 .nx-menu{
  justify-content:flex-end;
 }
 .nx-menu>a.hide-mobile{
  display:none;
 }
 .nx-drop{
  position:fixed;
  left:4%;
  right:4%;
  top:75px;
  width:auto;
 }
}