:root{
  --bg:#050912;
  --bg-2:#08111d;
  --panel:rgba(10,20,34,.72);
  --panel-2:rgba(6,15,28,.88);
  --line:rgba(85,227,255,.14);
  --text:#e8f7ff;
  --muted:#90a9bb;
  --accent:#51e5ff;
  --accent-2:#29ffb4;
  --shadow:0 10px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.03);
  --radius:22px;
  --radius-sm:16px;
  --container:min(1180px, calc(100vw - 40px));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 10%, rgba(41,255,180,.11), transparent 24%),
    radial-gradient(circle at 80% 20%, rgba(81,229,255,.14), transparent 28%),
    linear-gradient(180deg, #04070f 0%, #07101b 55%, #04080f 100%);
  min-height:100vh;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
button{font:inherit}
.site-shell{position:relative}
.container{width:var(--container);margin:0 auto;position:relative;z-index:2}

#networkCanvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; opacity:.45; pointer-events:none;
}
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.1));
}
.bg-glow{
  position:fixed; width:42vw; height:42vw; border-radius:50%;
  filter:blur(80px); z-index:0; pointer-events:none;
}
.bg-glow-a{left:-10vw; top:-10vw; background:rgba(81,229,255,.12)}
.bg-glow-b{right:-10vw; top:20vh; background:rgba(41,255,180,.10)}

.header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(18px);
  background:rgba(5,11,21,.66);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.header-inner{
  min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:center; gap:14px}
.brand-mark{
  width:46px; height:46px; border-radius:14px; position:relative;
  background:linear-gradient(180deg, rgba(8,24,43,.96), rgba(6,18,32,.9));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow); overflow:hidden;
}
.mark-bar{
  position:absolute; left:10px; top:9px; width:22px; height:6px;
  background:#c7d4df; border-radius:8px;
}
.mark-arc{
  position:absolute; left:10px; top:14px; width:20px; height:20px;
  border-left:6px solid #27dfe0;
  border-top:6px solid #27dfe0;
  border-top-left-radius:20px;
  transform:rotate(-2deg);
}
.mark-core{
  position:absolute; right:8px; bottom:9px; width:8px; height:8px;
  background:#dbe4ee; border-radius:50%;
}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-text strong{
  font-family:"Orbitron",sans-serif; font-size:16px; letter-spacing:.08em;
}
.brand-text small{
  margin-top:6px; color:var(--muted); font-size:11px; letter-spacing:.18em;
}
.nav{display:flex; align-items:center; gap:24px}
.nav a{
  color:#d7ebfa; font-size:14px; opacity:.8; transition:.25s ease;
}
.nav a:hover,.nav a.active{opacity:1;color:var(--accent)}
.header-cta,.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 18px; border-radius:14px; font-weight:700;
  transition:.25s ease; border:1px solid transparent;
}
.header-cta{
  background:linear-gradient(135deg, rgba(81,229,255,.18), rgba(41,255,180,.12));
  color:#ebfbff; border-color:rgba(81,229,255,.25);
  box-shadow:0 8px 28px rgba(81,229,255,.12);
}
.header-cta:hover{transform:translateY(-2px)}
.menu-toggle{display:none; width:46px; height:46px; border:none; background:transparent; padding:0; cursor:pointer}
.menu-toggle span{display:block; width:24px; height:2px; background:#fff; margin:5px auto; border-radius:999px}
.mobile-nav{
  display:none; border-top:1px solid rgba(255,255,255,.05);
  background:rgba(4,9,18,.95); padding:12px 20px 18px;
}
.mobile-nav a{display:block; padding:12px 0; color:#deeffb; opacity:.9}

.section{position:relative; padding:110px 0}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
  color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase;
}
.eyebrow::before{
  content:""; width:28px; height:1px; background:linear-gradient(90deg, var(--accent), transparent);
}
.text-accent{
  background:linear-gradient(90deg, #eafcff 0%, var(--accent) 40%, var(--accent-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.intro{padding:90px 0 80px}
.intro-layout{
  display:grid; grid-template-columns:1.06fr .94fr; gap:36px; align-items:center;
}
.intro-copy h1{
  margin:0; font-size:clamp(38px, 5.6vw, 72px); line-height:1.05;
  letter-spacing:-.04em;
}
.intro-desc{
  max-width:780px; margin:24px 0 0;
  color:#c5d9e7; font-size:17px; line-height:1.8;
}
.intro-actions{display:flex; gap:14px; margin-top:32px}
.btn-primary{
  color:#06111d;
  background:linear-gradient(135deg, var(--accent), #81f0ff 58%, var(--accent-2));
  box-shadow:0 12px 32px rgba(81,229,255,.24);
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{
  border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,.03); color:#edfaff;
}
.btn-ghost:hover{border-color:rgba(81,229,255,.26); color:var(--accent)}
.intro-badges{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;
}
.intro-badges span{
  padding:10px 14px; border-radius:999px; font-size:13px;
  border:1px solid var(--line); color:#dcecf7;
  background:rgba(255,255,255,.03);
}

.panel-card{
  position:relative; border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(10,22,36,.88), rgba(7,16,28,.82));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow);
}
.panel-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(180deg, rgba(81,229,255,.24), rgba(255,255,255,.03), rgba(41,255,180,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.hero-card{padding:22px}
.panel-topline{
  display:flex; align-items:center; gap:10px; color:#c6f6ff; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 18px var(--accent)}
.signal-stack{margin-top:20px; display:grid; gap:12px}
.signal-box{
  padding:18px; border-radius:18px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.signal-box label{display:block; color:var(--muted); font-size:11px; letter-spacing:.16em; margin-bottom:8px}
.signal-box strong{font-size:16px; line-height:1.5}
.signal-box.mid{background:linear-gradient(135deg, rgba(81,229,255,.08), rgba(41,255,180,.06))}
.signal-arrow{
  height:22px; width:2px; margin:0 auto;
  background:linear-gradient(180deg, rgba(81,229,255,.7), rgba(41,255,180,.18));
}
.metric-row{
  margin-top:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.metric{
  padding:16px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
}
.metric small{display:block; color:var(--muted); margin-bottom:8px; letter-spacing:.14em}
.metric strong{font-size:16px}

.section-head{
  max-width:800px; margin-bottom:38px;
}
.section-head h2{
  margin:0; font-size:clamp(28px, 4vw, 50px); line-height:1.12; letter-spacing:-.03em;
}
.section-head p{
  margin-top:16px; color:#bfd2e2; font-size:17px; line-height:1.8;
}

.system-grid{
  display:grid; grid-template-columns:1.25fr .75fr; gap:24px;
}
.card-title{
  padding:24px 24px 0; font-size:14px; font-weight:800; letter-spacing:.14em; color:#d1f7ff; text-transform:uppercase;
}
.pipeline{padding:20px 24px 24px}
.pipe-node{
  position:relative; padding:18px 18px 18px 60px; border-radius:18px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
}
.pipe-node + .pipe-node{margin-top:14px}
.pipe-node span{
  position:absolute; left:18px; top:18px; width:28px; height:28px; border-radius:10px;
  display:grid; place-items:center; font-size:12px; font-weight:800;
  color:#03111b; background:linear-gradient(135deg, var(--accent), var(--accent-2));
}
.pipe-node strong{display:block; font-size:18px}
.pipe-node p{margin:8px 0 0; color:#afc6d8; line-height:1.7}
.pipe-line{
  width:2px; height:22px; margin:0 0 0 33px;
  background:linear-gradient(180deg, rgba(81,229,255,.65), rgba(41,255,180,.12));
}

.tags-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:20px 24px 0;
}
.tags-grid span{
  padding:14px 12px; border-radius:14px; text-align:center;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  color:#def0fb;
}
.mini-note{
  margin:20px 24px 24px; padding:18px; border-radius:18px;
  background:linear-gradient(135deg, rgba(81,229,255,.08), rgba(41,255,180,.06));
  border:1px solid rgba(81,229,255,.16);
}
.mini-note strong{display:block; margin-bottom:8px}
.mini-note p{margin:0; color:#c5d8e5; line-height:1.8}

.feature-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.feature-card{
  padding:24px; border-radius:22px; background:rgba(8,18,31,.8);
  border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow);
}
.feature-card h3{margin:18px 0 10px; font-size:22px}
.feature-card p{margin:0; color:#bad0de; line-height:1.8}
.icon-box{
  width:48px; height:48px; display:grid; place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(81,229,255,.18), rgba(41,255,180,.18));
  color:#dffcff; font-weight:800; border:1px solid rgba(81,229,255,.16);
}

.split-layout{
  display:grid; grid-template-columns:.96fr 1.04fr; gap:30px; align-items:center;
}
.split-copy h2{
  margin:0; font-size:clamp(28px, 3.8vw, 48px); line-height:1.15; letter-spacing:-.03em;
}
.split-copy p{
  margin-top:18px; color:#bfd2e2; font-size:17px; line-height:1.8;
}
.bullet-list{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:12px}
.bullet-list li{
  padding:14px 16px 14px 44px; border-radius:16px; position:relative;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
}
.bullet-list li::before{
  content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle, var(--accent) 0%, rgba(81,229,255,.2) 60%, transparent 61%);
  box-shadow:0 0 20px rgba(81,229,255,.35);
}

.device-panel{display:flex; justify-content:center}
.device-frame{
  width:min(420px,100%); padding:16px; border-radius:34px;
  background:linear-gradient(180deg, rgba(10,22,36,.94), rgba(7,15,27,.84));
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow);
}
.device-screen{
  min-height:560px; border-radius:24px; overflow:hidden;
  background:linear-gradient(180deg, rgba(7,18,31,.96), rgba(7,17,28,.82));
  border:1px solid rgba(255,255,255,.05);
}
.device-header{
  height:68px; display:flex; align-items:center; justify-content:center;
  font-family:"Orbitron",sans-serif; letter-spacing:.18em; color:#dffbff;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(90deg, rgba(81,229,255,.08), rgba(41,255,180,.05));
}
.device-content{
  padding:18px; display:grid; gap:14px;
}
.device-card{
  min-height:94px; border-radius:18px; padding:18px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  color:#d9ecf9; font-weight:700;
}
.device-card.big{
  min-height:140px;
  background:linear-gradient(135deg, rgba(81,229,255,.14), rgba(41,255,180,.1));
}

.platform-grid{
  display:grid; grid-template-columns:1.02fr .98fr; gap:24px; align-items:stretch;
}
.dashboard-mock{
  padding:20px 24px 24px; display:grid; grid-template-columns:180px 1fr; gap:16px;
}
.dash-side{
  padding:16px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  display:grid; gap:10px; align-content:start;
}
.dash-side span{
  display:block; padding:11px 12px; border-radius:12px; color:#c8deee;
}
.dash-side span.active{background:rgba(81,229,255,.14); color:#f0fdff}
.dash-main{
  padding:16px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
}
.dash-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.dash-box{
  padding:16px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05);
}
.dash-box small{display:block; color:var(--muted); margin-bottom:6px}
.dash-box strong{font-size:22px}
.dash-chart{
  margin-top:16px; height:220px; border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:auto, 48px 100%, 100% 40px;
  position:relative; overflow:hidden;
}
.dash-chart::before{
  content:""; position:absolute; left:24px; right:24px; bottom:36px; height:2px;
  background:linear-gradient(90deg, rgba(81,229,255,.5), rgba(41,255,180,.65));
  transform:skewX(-28deg) translateY(-50px);
  box-shadow:
    80px 18px 0 0 rgba(81,229,255,.55),
    180px -10px 0 0 rgba(81,229,255,.55),
    260px -42px 0 0 rgba(81,229,255,.55),
    360px -20px 0 0 rgba(81,229,255,.55);
}
.platform-list{display:grid; gap:14px}
.platform-item{
  padding:22px; border-radius:20px;
  background:rgba(8,18,31,.8); border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow);
}
.platform-item strong{font-size:20px}
.platform-item p{margin:10px 0 0; color:#b8d0df; line-height:1.8}

.contact-box{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:24px;
  padding:28px; border-radius:30px;
  background:linear-gradient(180deg, rgba(8,18,32,.88), rgba(7,16,28,.82));
  border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow);
}
.contact-copy h2{
  margin:0; font-size:clamp(28px, 3.8vw, 44px); line-height:1.12; letter-spacing:-.03em;
}
.contact-copy p{
  margin-top:18px; color:#bdd2e0; line-height:1.85; font-size:17px;
}
.contact-info{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
.info-item{
  padding:18px; border-radius:18px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.info-item.full{grid-column:1 / -1}
.info-item label{
  display:block; color:var(--muted); font-size:12px; letter-spacing:.14em; margin-bottom:8px; text-transform:uppercase;
}
.info-item strong{font-size:16px; line-height:1.6}

.footer{
  padding:28px 0 42px; border-top:1px solid rgba(255,255,255,.05);
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.footer p{margin:6px 0 0; color:var(--muted)}
.to-top{
  display:inline-flex; align-items:center; justify-content:center; height:44px; min-width:80px; padding:0 16px;
  border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);
}

.reveal{
  opacity:0; transform:translateY(24px); transition:opacity .75s ease, transform .75s ease;
}
.reveal.visible{opacity:1; transform:translateY(0)}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.24s}

@media (max-width: 1080px){
  .intro-layout,
  .system-grid,
  .split-layout,
  .platform-grid,
  .contact-box{
    grid-template-columns:1fr;
  }
  .feature-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 860px){
  .nav,.header-cta{display:none}
  .menu-toggle{display:block}
  .mobile-nav.open{display:block}
  .section{padding:84px 0}
  .dashboard-mock{grid-template-columns:1fr}
}

@media (max-width: 640px){
  .intro{padding-top:58px}
  .header-inner{min-height:74px}
  .brand-text small{display:none}
  .intro-actions{flex-direction:column}
  .feature-grid,
  .contact-info,
  .metric-row,
  .tags-grid,
  .dash-row{
    grid-template-columns:1fr;
  }
  .device-screen{min-height:460px}
  .contact-box{padding:20px}
}