:root{
  --bg:#050912;
  --bg2:#060b16;
  --card:#0b1222;
  --card2:#0a1020;
  --grid:rgba(255,255,255,.035);
  --text:#eaf2ff;
  --muted:rgba(234,242,255,.72);
  --muted2:rgba(234,242,255,.55);
  --cyan:#1ee6ff;
  --blue:#3aa0ff;
  --purple:#8a5cff;
  --pink:#ff4fd8;
  --border:rgba(120,170,255,.18);
  --glow:0 0 24px rgba(30,230,255,.22), 0 0 44px rgba(138,92,255,.14);
  --shadow:0 16px 50px rgba(0,0,0,.55);
  --radius:22px;
  --radius2:16px;
  --max:1180px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background: radial-gradient(1200px 600px at 30% 20%, rgba(58,160,255,.20), transparent 55%),
              radial-gradient(900px 600px at 70% 30%, rgba(138,92,255,.16), transparent 55%),
              radial-gradient(900px 600px at 75% 85%, rgba(30,230,255,.14), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.container{width:100%; max-width:var(--max); margin:0 auto; padding:0 18px;}
/* subtle grid overlay */
.grid-overlay{
  position:fixed; inset:0; pointer-events:none; opacity:1;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse at 50% 20%, rgba(0,0,0,1), rgba(0,0,0,.1) 60%, rgba(0,0,0,0) 80%);
}
/* nav */
nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(4,8,16,.55);
  border-bottom:1px solid rgba(120,170,255,.10);
}
.navbar{display:flex; align-items:center; justify-content:space-between; height:74px;
  gap:18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo{
  width:64px; height:40px;
  display:grid; place-items:center;
  flex:0 0 64px;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}
.logo img{
  width:64px; height:40px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 0 12px rgba(120,80,255,0.55)) drop-shadow(0 0 6px rgba(30,180,255,0.4));
}
.brand-name{
  display:flex;
  gap:4px;
  align-items:center;
  font-weight:900;
  letter-spacing:-.3px;
  line-height:1;
  white-space:nowrap;
  font-size:22px;
  padding-left:0;
}
.brand-name .bn-ai{
  background: linear-gradient(90deg, rgba(30,230,255,.98), rgba(79,172,254,.98));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand-name .bn-neo{
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
.brand-name .bn-intel{
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
.menu{display:flex; gap:18px; align-items:center;}
.menu a{
  padding:10px 12px;
  color:var(--muted);
  border-radius:12px;
  transition:.18s ease;
}
.menu a:hover{color:var(--text); background:rgba(255,255,255,.04)}
.menu a.active{color:var(--text)}
.btn{
  display:inline-flex; gap:10px; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(120,170,255,.22);
  background: rgba(255,255,255,.04);
  color:var(--text);
  box-shadow:none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.06); border-color:rgba(30,230,255,.35)}
.btn.primary{
  border:none;
  background: linear-gradient(90deg, rgba(30,230,255,.95), rgba(138,92,255,.95));
  color:#061019;
  font-weight:800;
  box-shadow: var(--glow);
}
.btn.primary:hover{transform:translateY(-1px) scale(1.01)}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(30,230,255,.22);
  background: rgba(30,230,255,.06);
  padding:8px 14px;
  border-radius:999px;
  color:rgba(220,250,255,.92);
  font-weight:600;
  box-shadow: 0 0 24px rgba(30,230,255,.08);
}
.pill svg{opacity:.9}
.hero{padding:70px 0 20px}
.hero-grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:26px; align-items:center;}
h1{
  font-size: clamp(40px, 6vw, 76px);
  line-height: .95;
  margin:18px 0 16px;
  letter-spacing:-.03em;
}
.grad{
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{
  font-size: 18px;
  color: var(--muted);
  line-height:1.65;
  margin:0 0 26px;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero-card{
  border-radius: var(--radius);
  border:1px solid rgba(120,170,255,.14);
  background: linear-gradient(180deg, rgba(11,18,34,.85), rgba(8,14,28,.55));
  box-shadow: var(--shadow);
  padding:22px;
  position:relative;
  overflow:hidden;
}
.hero-card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(700px 260px at 30% 20%, rgba(30,230,255,.16), transparent 55%),
              radial-gradient(700px 260px at 80% 50%, rgba(138,92,255,.13), transparent 60%);
  pointer-events:none;
}
.hero-card > *{position:relative}
.stat{display:flex; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid rgba(120,170,255,.10)}
.stat:last-child{border-bottom:none}
.dot{
  width:40px; height:40px; border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(30,230,255,.18);
  display:grid; place-items:center;
  box-shadow: 0 0 22px rgba(30,230,255,.12);
}
.stat h3{margin:0; font-size:14px; letter-spacing:.02em}
.stat p{margin:2px 0 0; font-size:13px; color:var(--muted2)}
.section{padding:56px 0}
.section-title{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px;}
.section-title h2{margin:0; font-size:38px; letter-spacing:-.02em}
.section-title p{margin:0; color:var(--muted); max-width:520px; line-height:1.6}
.cards{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px;}
.card{
  border-radius: var(--radius);
  border:1px solid rgba(120,170,255,.14);
  background: linear-gradient(180deg, rgba(11,18,34,.80), rgba(8,14,28,.55));
  box-shadow: var(--shadow);
  padding:22px;
  position:relative;
  overflow:hidden;
  min-height: 270px;
}
.card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(680px 260px at 20% 0%, rgba(30,230,255,.14), transparent 55%),
              radial-gradient(680px 260px at 90% 20%, rgba(138,92,255,.10), transparent 60%);
  opacity:.7;
  pointer-events:none;
}
.card > *{position:relative}
.icon{
  width:44px; height:44px; border-radius:16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(30,230,255,.18);
  box-shadow: 0 0 22px rgba(30,230,255,.10);
}
.card h3{margin:14px 0 8px; font-size:22px; letter-spacing:-.01em}
.card p{margin:0 0 16px; color:var(--muted); line-height:1.6}
.price{font-size:42px; font-weight:800; letter-spacing:-.03em; margin:6px 0 6px}
.price small{font-size:14px; color:var(--muted2); font-weight:600; margin-left:8px}
.list{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.list li{color:var(--muted); display:flex; gap:10px; align-items:flex-start}
.check{
  width:18px; height:18px; margin-top:2px; flex:0 0 auto;
  border-radius:6px;
  background: rgba(30,230,255,.14);
  border:1px solid rgba(30,230,255,.32);
  box-shadow: 0 0 18px rgba(30,230,255,.10);
}
.card .cta{margin-top:18px; width:100%}
.tag{
  position:absolute; top:18px; right:18px;
  padding:7px 12px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(30,230,255,.95), rgba(138,92,255,.95));
  color:#061019;
  font-weight:800;
  font-size:12px;
}
.two-col{display:grid; grid-template-columns: 1.2fr .8fr; gap:20px; align-items:center;}
.about-panel{
  border-radius: var(--radius);
  border:1px solid rgba(120,170,255,.14);
  background: linear-gradient(180deg, rgba(11,18,34,.80), rgba(8,14,28,.55));
  box-shadow: var(--shadow);
  padding:26px;
}
.about-panel h3{margin:0 0 10px; font-size:26px}
.about-panel p{margin:0; color:var(--muted); line-height:1.75}
.hub{
  display:grid; place-items:center; text-align:center;
  border-radius: var(--radius);
  border:1px solid rgba(120,170,255,.14);
  background: linear-gradient(180deg, rgba(11,18,34,.80), rgba(8,14,28,.55));
  box-shadow: var(--shadow);
  padding:26px;
  min-height: 280px;
}
.hub .square{
  width:86px; height:86px; border-radius:26px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(30,230,255,.18);
  display:grid; place-items:center;
  box-shadow: var(--glow);
}
.hub h4{margin:16px 0 6px; font-size:26px}
.hub p{margin:0; color:var(--muted2)}
.footer{
  padding:26px 0 44px;
  border-top:1px solid rgba(120,170,255,.10);
  color:var(--muted2);
}
.footer .row{display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; align-items:center}
.badge{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(120,170,255,.16);
  background: rgba(255,255,255,.03);
  color:var(--muted);
}
.small{font-size:13px; line-height:1.6}

/* package detail page */
.breadcrumb{color:var(--muted2); font-size:14px; margin:18px 0}
.detail{
  border-radius: var(--radius);
  border:1px solid rgba(120,170,255,.14);
  background: linear-gradient(180deg, rgba(11,18,34,.80), rgba(8,14,28,.55));
  box-shadow: var(--shadow);
  padding:26px;
}
.detail h2{margin:0 0 10px; font-size:34px}
.detail .meta{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 18px}
.kv{
  border:1px solid rgba(120,170,255,.16);
  background: rgba(255,255,255,.03);
  border-radius:14px;
  padding:10px 12px;
  color:var(--muted);
  font-size:14px;
}
.note{
  border-left:3px solid rgba(30,230,255,.55);
  background: rgba(30,230,255,.06);
  padding:12px 14px;
  border-radius:14px;
  color:var(--muted);
  margin-top:14px;
}

/* chatbot */
.chat-launch{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:56px; height:56px; border-radius:18px;
  background: linear-gradient(135deg, rgba(30,230,255,.95), rgba(138,92,255,.95));
  box-shadow: var(--glow);
  border:none; cursor:pointer;
  display:grid; place-items:center;
}
.chat-launch svg{filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.chat{
  position:fixed; right:18px; bottom:86px; z-index:60;
  width:min(380px, calc(100vw - 36px));
  height:520px;
  border-radius: 22px;
  border:1px solid rgba(120,170,255,.18);
  background: rgba(6,10,20,.78);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  overflow:hidden;
  transform: translateY(12px);
  opacity:0;
  pointer-events:none;
  transition: .18s ease;
}
.chat.open{opacity:1; pointer-events:auto; transform: translateY(0)}
.chat-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px 14px 14px;
  border-bottom:1px solid rgba(120,170,255,.12);
}
.chat-header .left{display:flex; gap:10px; align-items:center}
.chat-header .avatar{
  width:34px; height:34px; border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(30,230,255,.18);
  display:grid; place-items:center;
  box-shadow: 0 0 18px rgba(30,230,255,.10);
}
.chat-header h5{margin:0; font-size:14px}
.chat-header p{margin:2px 0 0; font-size:12px; color:var(--muted2)}
.icon-btn{
  width:34px; height:34px; border-radius:12px;
  border:1px solid rgba(120,170,255,.14);
  background: rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
}
.chat-body{padding:14px; height: 382px; overflow:auto}
.msg{display:flex; gap:10px; margin:10px 0}
.msg.user{justify-content:flex-end}
.bubble{
  max-width: 80%;
  padding:10px 12px;
  border-radius: 16px;
  border:1px solid rgba(120,170,255,.14);
  background: rgba(255,255,255,.03);
  color:var(--muted);
  line-height:1.5;
  font-size:14px;
}
.msg.user .bubble{
  background: rgba(30,230,255,.12);
  border-color: rgba(30,230,255,.28);
  color: rgba(235,253,255,.92);
}
.chat-footer{
  padding:12px;
  border-top:1px solid rgba(120,170,255,.12);
  display:flex; gap:10px;
}
.input{
  flex:1;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(120,170,255,.16);
  background: rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
}
.input::placeholder{color:rgba(234,242,255,.40)}
.send{padding:12px 14px; border-radius:14px}
.quick{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px
}
.chip{
  padding:8px 10px; border-radius:999px;
  border:1px solid rgba(120,170,255,.16);
  background: rgba(255,255,255,.03);
  color:var(--muted);
  font-size:12px;
  cursor:pointer;
}
.chip:hover{border-color:rgba(30,230,255,.30); color:var(--text)}
/* responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .menu{display:none}
}


/* CTA route highlight */
.btn.cta{font-weight:800}
.btn.cta:hover{box-shadow: var(--glow)}


/* Brand logo image - transparent */
.logo img{
  width:64px; height:40px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 0 12px rgba(120,80,255,0.55)) drop-shadow(0 0 6px rgba(30,180,255,0.4));
}

.banner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 18px; border:1px solid rgba(255,255,255,.08); background:rgba(14,20,44,.6); border-radius:18px; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.banner-actions{ display:flex; gap:10px; flex-wrap:wrap; }
@media(max-width:860px){ .banner{ flex-direction:column; align-items:flex-start; } }

.faq{ display:grid; grid-template-columns:1fr; gap:10px; }
.faq details{ border:1px solid rgba(255,255,255,.08); background:rgba(10,15,34,.55); border-radius:14px; padding:12px 14px; }
.faq summary{ cursor:pointer; font-weight:700; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq details p{ margin:10px 0 0; color:rgba(234,242,255,.75); }


/* FAQ page */
.faq-wrap{max-width:980px;margin:0 auto;}
.faq-grid{display:grid;gap:14px;margin-top:18px;}
.faq-item{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(15,22,44,.75), rgba(10,16,32,.75));
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:16px 18px;
  font-weight:700;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .chev{transition:transform .18s ease; opacity:.75;}
.faq-item[open] summary .chev{transform:rotate(180deg);}
.faq-item .answer{
  padding:0 18px 18px;
  color:var(--muted);
  line-height:1.7;
}
.faq-item .answer p{margin:10px 0 0;}
.faq-cta{
  margin-top:22px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(6,11,22,.55);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}