:root {
  --blue:#0878f9; --cyan:#16d5ff; --dark:#050b16; --dark2:#0b1424;
  --text:#eef5ff; --muted:#9eacc1; --line:rgba(255,255,255,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--dark);color:var(--text);line-height:1.6}
a{color:inherit;text-decoration:none}
.container{width:min(1160px,92%);margin:auto}
nav{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(5,11,22,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{height:55px;width:auto}
.menu{display:flex;gap:30px;align-items:center;font-size:14px;color:#cbd7e7}
.menu a:hover{color:white}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--cyan));font-weight:700;color:white;box-shadow:0 8px 30px rgba(0,140,255,.22)}
.hero{min-height:780px;padding:170px 0 100px;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 30%,rgba(0,126,255,.20),transparent 30%),radial-gradient(circle at 15% 50%,rgba(0,210,255,.08),transparent 28%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.badge{display:inline-block;padding:7px 12px;border:1px solid rgba(22,213,255,.3);border-radius:999px;color:#77ddff;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px}
h1{font-size:clamp(42px,6vw,72px);line-height:1.02;letter-spacing:-3px;margin-bottom:25px}
.gradient{background:linear-gradient(90deg,#fff,#48bfff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:19px;color:var(--muted);max-width:650px;margin-bottom:32px}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;padding:12px 21px;border-radius:10px;border:1px solid var(--line);color:#dbe7f5;background:rgba(255,255,255,.03)}
.visual{min-height:440px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,rgba(17,34,57,.88),rgba(5,12,23,.92));box-shadow:0 30px 90px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.visual:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(0,149,255,.18);filter:blur(65px)}
.visual img{width:70%;max-width:310px;position:relative;z-index:2;filter:drop-shadow(0 20px 35px rgba(0,160,255,.25))}
.float{position:absolute;padding:14px 17px;border:1px solid var(--line);background:rgba(8,17,30,.85);border-radius:13px;font-size:13px;box-shadow:0 12px 30px rgba(0,0,0,.3);z-index:3}
.f1{top:55px;left:35px} .f2{right:28px;top:150px} .f3{bottom:55px;left:65px}
section{padding:100px 0}
.section-head{max-width:720px;margin-bottom:48px}
.eyebrow{color:#4ecaff;font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
h2{font-size:42px;line-height:1.1;letter-spacing:-1.5px;margin-bottom:15px}
.section-head p{color:var(--muted);font-size:17px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{padding:28px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(15,29,49,.8),rgba(7,14,25,.8));border-radius:18px;transition:.25s}
.card:hover{transform:translateY(-5px);border-color:rgba(22,213,255,.3)}
.icon{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(8,120,249,.22),rgba(22,213,255,.12));font-size:23px;margin-bottom:20px}
.card h3{font-size:21px;margin-bottom:9px}
.card p{font-size:14px;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.panel{padding:36px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,#0c1a2d,#07101d)}
.check{display:flex;gap:12px;margin:17px 0;color:#cdd9e8}
.check b{color:#20d7ff}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{border-top:2px solid #0d8cff;padding-top:22px}
.step span{color:#50caff;font-size:12px;font-weight:800}
.step h3{margin:8px 0}
.step p{color:var(--muted);font-size:14px}
.cta{padding:75px 0;background:radial-gradient(circle at 50% 0,rgba(0,146,255,.20),transparent 45%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-box{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:60px;border:1px solid rgba(22,213,255,.22);border-radius:25px;background:rgba(10,22,38,.75)}
.cta-box p{color:var(--muted);max-width:650px}
footer{padding:35px 0;color:#7f8ea3;font-size:13px}
.footer{display:flex;justify-content:space-between;gap:20px;align-items:center}
@media(max-width:900px){.hero-grid,.split{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}.menu{display:none}.hero{padding-top:130px}}
@media(max-width:560px){.cards,.steps{grid-template-columns:1fr}h2{font-size:34px}h1{letter-spacing:-2px}.cta-box,.footer{flex-direction:column;align-items:flex-start}}

/* Next366 animated hero */
.visual{
  min-height:520px!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 50% 48%,rgba(0,174,255,.17),transparent 22%),
    radial-gradient(circle at 50% 100%,rgba(0,104,255,.16),transparent 45%),
    linear-gradient(145deg,#07182d,#030914 72%)!important;
  position:relative;overflow:hidden;
  perspective:900px;
}
.visual:before{content:"";position:absolute;inset:-30%;background:conic-gradient(from 0deg,transparent 0 55%,rgba(0,186,255,.08) 60%,transparent 68%);animation:spin 12s linear infinite}
.scene-grid{
 position:absolute;inset:55% -15% -25%;opacity:.35;
 background-image:linear-gradient(rgba(27,150,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(27,150,255,.16) 1px,transparent 1px);
 background-size:35px 35px;transform:perspective(300px) rotateX(62deg);
 mask-image:linear-gradient(to bottom,transparent,#000 25%,#000);
}
.core{
 position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 width:185px;height:185px;border-radius:50%;display:flex;flex-direction:column;
 align-items:center;justify-content:center;z-index:5;
 background:radial-gradient(circle,#0b2744 0,#061321 57%,rgba(2,8,16,.7) 70%);
 border:1px solid rgba(39,187,255,.55);
 box-shadow:0 0 30px rgba(0,157,255,.25),inset 0 0 35px rgba(0,154,255,.18);
 animation:coreFloat 4s ease-in-out infinite;
}
.core-pulse{position:absolute;inset:-15px;border:1px solid rgba(21,191,255,.28);border-radius:50%;animation:pulse 2.5s ease-out infinite}
.core-icon{font-size:30px;color:#1edaff;text-shadow:0 0 18px #0bbdff;margin-bottom:3px}
.core strong{font-size:13px;letter-spacing:1.5px;color:#8bcfff}
.core span{font-size:12px;font-weight:800;color:#16d5ff;letter-spacing:1.2px;margin-top:4px;text-align:center}
.scan-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(15,177,255,.28);transform:translate(-50%,-50%) rotateX(62deg)}
.ring-a{width:390px;height:390px;animation:ringSpin 10s linear infinite}
.ring-b{width:290px;height:290px;border-style:dashed;opacity:.7;animation:ringSpin 7s linear infinite reverse}
.orbit{position:absolute;left:50%;top:50%;width:430px;height:430px;transform:translate(-50%,-50%);z-index:7}
.orbit-two{width:340px;height:340px}
.tech-card{
 position:absolute;display:flex;align-items:center;gap:10px;min-width:168px;padding:12px 15px;
 background:linear-gradient(145deg,rgba(13,36,61,.92),rgba(3,12,23,.94));
 border:1px solid rgba(67,182,255,.27);border-radius:14px;
 box-shadow:0 14px 35px rgba(0,0,0,.38),0 0 22px rgba(0,120,255,.08);
 backdrop-filter:blur(10px);transform-style:preserve-3d;
}
.tech-card strong{display:block;font-size:13px;color:#f2f8ff}
.tech-card small{display:block;font-size:8px;letter-spacing:.7px;color:#53caff;margin-top:2px;white-space:nowrap}
.tech-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#0878f9,#15d8ff);color:white;font-size:20px;font-weight:800;box-shadow:0 0 18px rgba(0,178,255,.3)}
.card-assistant{left:-10px;top:40px;animation:cardA 5s ease-in-out infinite}
.card-crm{right:-22px;top:155px;animation:cardB 5.5s ease-in-out infinite}
.card-erp{left:-38px;bottom:62px;animation:cardC 6s ease-in-out infinite}
.card-marketing{right:-32px;bottom:-2px;animation:cardD 5.2s ease-in-out infinite}
.status-pill{
 position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:10;
 display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
 background:rgba(5,16,29,.88);border:1px solid rgba(25,195,125,.3);font-size:9px;letter-spacing:1px;color:#b9c9d9
}
.status-pill span{width:7px;height:7px;border-radius:50%;background:#19c37d;box-shadow:0 0 12px #19c37d;animation:blink 1.5s infinite}
.status-pill em{font-style:normal;color:#19c37d}
.particle{position:absolute;width:4px;height:4px;border-radius:50%;background:#24cfff;box-shadow:0 0 12px #12bfff;opacity:.7}
.p1{left:13%;top:25%;animation:particle1 5s infinite}.p2{left:80%;top:20%;animation:particle2 6s infinite}.p3{left:18%;top:70%;animation:particle3 7s infinite}.p4{left:87%;top:63%;animation:particle2 5s infinite}.p5{left:58%;top:13%;animation:particle1 6s infinite}.p6{left:72%;top:84%;animation:particle3 5s infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes ringSpin{to{transform:translate(-50%,-50%) rotateX(62deg) rotateZ(360deg)}}
@keyframes coreFloat{50%{transform:translate(-50%,-54%) scale(1.025)}}
@keyframes pulse{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.18);opacity:0}}
@keyframes cardA{50%{transform:translate(8px,-10px) rotateY(-5deg)}}@keyframes cardB{50%{transform:translate(-7px,9px) rotateY(5deg)}}@keyframes cardC{50%{transform:translate(8px,7px) rotateY(-4deg)}}@keyframes cardD{50%{transform:translate(-9px,-8px) rotateY(4deg)}}
@keyframes blink{50%{opacity:.35}}@keyframes particle1{50%{transform:translate(35px,20px);opacity:.15}}@keyframes particle2{50%{transform:translate(-25px,35px);opacity:1}}@keyframes particle3{50%{transform:translate(20px,-30px);opacity:.2}}
@media(max-width:900px){.visual{min-height:470px!important}.orbit{transform:translate(-50%,-50%) scale(.84)}.orbit-two{transform:translate(-50%,-50%) scale(.72)}}
@media(max-width:560px){.visual{min-height:420px!important}.orbit{transform:translate(-50%,-50%) scale(.64)}.orbit-two{transform:translate(-50%,-50%) scale(.56)}.core{width:150px;height:150px}.ring-a{width:300px;height:300px}.ring-b{width:220px;height:220px}}


.lang-switch{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.04);
}
.lang-btn{
  appearance:none;
  border:0 !important;
  outline:0;
  background:transparent !important;
  color:#9eacc1 !important;
  padding:7px 12px;
  border-radius:7px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:all .2s ease;
}
.lang-btn:hover{
  color:#fff !important;
  background:rgba(255,255,255,.07) !important;
}
.lang-btn.active{
  background:#19c37d !important;
  color:#06130d !important;
  box-shadow:0 0 16px rgba(25,195,125,.40);
}


.text-logo{
  display:inline-flex;
  align-items:center;
  font-size:25px;
  line-height:1;
  font-weight:800;
  letter-spacing:-1.3px;
  color:#f4f8ff;
  text-decoration:none;
}
.text-logo span{color:#f4f8ff}
.text-logo b{
  color:#16d5ff;
  font-weight:800;
  margin-left:2px;
}
.text-logo:hover{filter:brightness(1.12)}


/* Friendly process section */
.process-section{
  background:linear-gradient(180deg,rgba(7,17,30,.25),rgba(8,20,34,.62));
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.process-head{
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.process-head h2{margin-bottom:14px}
.process-head p{max-width:680px;margin:0 auto;color:#9eacc1}
.process-flow{
  display:grid;
  grid-template-columns:1fr 42px 1fr 42px 1fr;
  align-items:center;
  gap:10px;
}
.process-card{
  min-height:310px;
  padding:28px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(14,31,51,.92),rgba(6,15,27,.95));
  position:relative;
  overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.process-card:before{
  content:"";
  position:absolute;
  width:130px;height:130px;
  right:-65px;top:-65px;
  border-radius:50%;
  background:rgba(15,177,255,.09);
}
.process-card:hover{
  transform:translateY(-7px);
  border-color:rgba(22,213,255,.38);
  box-shadow:0 20px 45px rgba(0,0,0,.24),0 0 25px rgba(0,130,255,.08);
}
.process-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:25px;
}
.process-number{
  font-size:14px;
  font-weight:900;
  letter-spacing:1px;
  color:#16d5ff;
}
.process-icon{
  width:48px;height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:23px;
  font-weight:800;
  color:white;
  background:linear-gradient(135deg,#0878f9,#16d5ff);
  box-shadow:0 8px 24px rgba(0,145,255,.20);
}
.process-label{
  font-size:10px;
  font-weight:900;
  letter-spacing:1.7px;
  color:#6ed5ff;
  margin-bottom:9px;
}
.process-card h3{
  font-size:24px;
  letter-spacing:-.5px;
  margin-bottom:10px;
}
.process-card p{
  color:#9eacc1;
  font-size:14px;
  line-height:1.65;
}
.process-tag{
  display:inline-block;
  margin-top:22px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:#cbd9e8;
  font-size:10px;
  font-weight:700;
}
.process-arrow{
  color:#16d5ff;
  font-size:27px;
  text-align:center;
  opacity:.75;
}
@media(max-width:900px){
  .process-flow{grid-template-columns:1fr;gap:15px}
  .process-arrow{transform:rotate(90deg)}
  .process-card{min-height:auto}
}


/* Prevent lower orbit cards from overlapping */
.orbit-two{
  width:390px!important;
  height:390px!important;
}
.card-erp{z-index:9}
.card-marketing{z-index:8}
.tech-card{white-space:nowrap}


@media(max-width:560px){
  .orbit-two{width:320px!important;height:320px!important}
  .card-erp{left:-20px;bottom:55px}
  .card-marketing{right:-18px;bottom:-4px}
}


nav a {
    color: #fff;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
}

nav a.active {
    opacity: 1;
    color: #4dd0e1;
    font-weight: 600;
}