:root {
  --bg: #060812;
  --bg-soft: #0a0d1a;
  --panel: rgba(15, 20, 38, 0.72);
  --panel-strong: #10162a;
  --line: rgba(134, 183, 255, 0.16);
  --line-bright: rgba(70, 226, 255, 0.38);
  --text: #f5f7ff;
  --muted: #8991ab;
  --cyan: #16e0ff;
  --cyan-2: #00a8ff;
  --violet: #975cff;
  --pink: #ff5bc8;
  --green: #50ffad;
  --orange: #ff9e64;
  --radius: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --header-h: 78px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 8%, rgba(91, 54, 184, .14), transparent 25%),
    radial-gradient(circle at 20% 22%, rgba(0, 205, 255, .08), transparent 22%),
    var(--bg);
  font-family: Inter, "Microsoft YaHei UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  cursor: none;
}

a, button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button, a, input[type="range"] { cursor: none; }
img { display: block; max-width: 100%; }
::selection { color: #031018; background: var(--cyan); }

.noise {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: .036;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

#particleCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .58;
}

.ambient-effects { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: .58; }
.aurora { position: absolute; width: 46vw; height: 46vw; border-radius: 48% 52% 63% 37% / 38% 42% 58% 62%; filter: blur(95px); mix-blend-mode: screen; will-change: transform; }
.aurora-cyan { left: -20vw; top: 8vh; background: rgba(0, 190, 255, .09); animation: auroraCyan 17s ease-in-out infinite alternate; }
.aurora-violet { right: -19vw; top: 20vh; background: rgba(126, 66, 255, .105); animation: auroraViolet 20s ease-in-out infinite alternate; }
.aurora-pink { left: 30vw; bottom: -32vw; background: rgba(255, 70, 190, .055); animation: auroraPink 23s ease-in-out infinite alternate; }
@keyframes auroraCyan { to { transform: translate(16vw, 12vh) rotate(35deg) scale(1.16); } }
@keyframes auroraViolet { to { transform: translate(-18vw, -9vh) rotate(-42deg) scale(.86); } }
@keyframes auroraPink { to { transform: translate(13vw, -16vh) rotate(55deg) scale(1.2); } }

.cyber-depth-grid { position: fixed; z-index: 0; left: -15vw; right: -15vw; bottom: -34vh; height: 75vh; pointer-events: none; opacity: .22; background: linear-gradient(rgba(29,205,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(29,205,255,.12) 1px,transparent 1px); background-size: 72px 52px; transform: perspective(440px) rotateX(61deg); transform-origin: center bottom; mask-image: linear-gradient(to top,black,transparent 75%); animation: depthGridMove 9s linear infinite; }
@keyframes depthGridMove { to { background-position: 0 52px,72px 0; } }
.pointer-field { --pointer-x: 50vw; --pointer-y: 50vh; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background: radial-gradient(420px circle at var(--pointer-x) var(--pointer-y),rgba(24,218,255,.065),rgba(116,66,255,.025) 36%,transparent 70%); mix-blend-mode: screen; }
.viewport-hud { position: fixed; z-index: 998; inset: 83px 20px 20px; pointer-events: none; opacity: .34; }
.hud-corner { position: absolute; width: 38px; height: 38px; color: var(--cyan); filter: drop-shadow(0 0 6px rgba(22,224,255,.45)); }
.hud-corner::before,.hud-corner::after { content:""; position:absolute; background:currentColor; }
.hud-corner::before { width:38px;height:1px; }.hud-corner::after { width:1px;height:38px; }
.hud-tl{left:0;top:0}.hud-tr{right:0;top:0;transform:rotate(90deg)}.hud-br{right:0;bottom:0;transform:rotate(180deg)}.hud-bl{left:0;bottom:0;transform:rotate(-90deg)}
.hud-readout { position:absolute;color:#4e8298;font-family:Consolas,monospace;font-size:6px;letter-spacing:.18em;writing-mode:vertical-rl; }
.hud-left{left:-1px;top:50%;transform:translateY(-50%) rotate(180deg)}.hud-right{right:-1px;top:50%;transform:translateY(-50%)}
.trail-particle { position:fixed;z-index:9999;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;pointer-events:none;background:var(--trail-color,var(--cyan));box-shadow:0 0 8px var(--trail-color,var(--cyan)),0 0 18px var(--trail-color,var(--cyan));animation:trailFade .72s ease-out forwards; }
@keyframes trailFade { to { opacity:0; transform:translate(var(--trail-x),var(--trail-y)) scale(.05); } }

.cursor-dot,
.cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor-dot { width: 5px; height: 5px; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(100, 226, 255, .58); transition: width .22s, height .22s, border-color .22s, background .22s; }
.cursor-ring.is-hover { width: 52px; height: 52px; border-color: rgba(151, 92, 255, .72); background: rgba(151, 92, 255, .08); }

.scroll-progress {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,.03);
}
.scroll-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink)); box-shadow: 0 0 16px var(--cyan); }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-h);
  padding: 0 clamp(24px, 4vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition: height .35s var(--ease), background .35s, border-color .35s, backdrop-filter .35s;
}
.site-header.scrolled {
  height: 66px;
  background: rgba(5, 8, 18, .76);
  border-color: rgba(78, 151, 210, .16);
  backdrop-filter: blur(18px) saturate(1.2);
}
.site-header::after { content:""; position:absolute; left:0; bottom:-1px; width:150px; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,var(--cyan),#a66cff,transparent); box-shadow:0 0 9px var(--cyan); animation:headerCircuit 5s linear infinite; }
@keyframes headerCircuit { from{transform:translateX(-160px)} to{transform:translateX(calc(100vw + 160px))} }

.brand { display: flex; align-items: center; gap: 11px; position: relative; z-index: 2; }
.brand-mark {
  position: relative;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  color: var(--cyan);
  background: linear-gradient(145deg, rgba(25, 222, 255, .12), rgba(151, 92, 255, .12));
  border: 1px solid rgba(85, 217, 255, .26);
  clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
}
.brand-mark svg { width: 31px; height: 31px; filter: drop-shadow(0 0 8px rgba(22, 224, 255, .4)); }
.brand-mark::after { content:"";position:absolute;inset:-5px;border:1px solid rgba(22,224,255,.26);clip-path:inherit;animation:brandSignal 2.4s ease-out infinite; }
@keyframes brandSignal { 0%{opacity:.8;transform:scale(.82)} 80%,100%{opacity:0;transform:scale(1.28)} }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-size: 14px; letter-spacing: .12em; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-size: 8px; letter-spacing: .21em; }

.main-nav { display: flex; align-items: center; gap: clamp(22px, 2.7vw, 48px); counter-reset:nav-item; }
.main-nav a { position: relative; padding: 27px 0; color: #aeb4c8; font-size: 13px; transition: color .25s; }
.main-nav a::before { counter-increment:nav-item; content:"0" counter(nav-item); position:absolute; left:-11px; top:20px; color:rgba(22,224,255,.28); font-family:Consolas,monospace; font-size:5px; transform:translateY(-50%); }
.main-nav a::after { content: ""; position: absolute; left: 50%; bottom: 18px; width: 0; height: 2px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); transition: width .3s var(--ease), left .3s var(--ease); }
.main-nav a:hover, .main-nav a.active { color: white; }
.main-nav a.active::after { left: 0; width: 100%; }

.header-cta { display: flex; align-items: center; gap: 9px; min-height: 39px; padding: 0 17px; border: 1px solid rgba(49, 220, 255, .28); border-radius: 999px; color: #dffbff; background: rgba(17, 194, 255, .06); font-size: 12px; transition: border .3s, box-shadow .3s, background .3s; }
.header-cta:hover { border-color: rgba(49, 220, 255, .7); background: rgba(17, 194, 255, .12); box-shadow: 0 0 26px rgba(25, 218, 255, .12); }
.header-cta svg { width: 17px; }
.menu-toggle { display: none; border: 0; background: none; width: 42px; height: 42px; padding: 10px; }
.menu-toggle i { display: block; height: 1px; margin: 6px 0; background: white; transition: transform .3s, opacity .3s; }

.section { position: relative; z-index: 1; padding: 128px clamp(24px, 6vw, 112px); }
.section-sweep { position:absolute;z-index:0;left:0;right:0;top:0;height:1px;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent 4%,rgba(20,224,255,.5),rgba(163,92,255,.32),transparent 96%);box-shadow:0 0 20px rgba(22,224,255,.22); }
.section-sweep.is-running { animation:sectionSweep 2.8s var(--ease) forwards; }
@keyframes sectionSweep { 0%{top:4%;opacity:0} 15%{opacity:.65} 78%{opacity:.22} 100%{top:94%;opacity:0} }
.section-head { max-width: 1440px; margin: 0 auto 58px; display: grid; grid-template-columns: 1.35fr .65fr; gap: 70px; align-items: end; }
.section-head h2 { max-width: 760px; margin: 12px 0 0; font-size: clamp(34px, 4vw, 60px); line-height: 1.1; letter-spacing: -.055em; }
.section-head h2 { transition:text-shadow .35s,filter .35s; }.section-head h2:hover{text-shadow:-2px 0 rgba(22,224,255,.35),2px 0 rgba(171,91,255,.3);filter:brightness(1.08)}
.section-head > p { margin: 0 0 5px; color: #9299ae; font-size: 14px; line-height: 1.9; }
.section-kicker { position:relative;color: var(--cyan); font-family: Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: .19em; }
.section-kicker::after { content:"";position:absolute;left:0;bottom:-7px;width:34px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);box-shadow:0 0 7px var(--cyan);animation:kickerSignal 2.2s ease-in-out infinite alternate; }
@keyframes kickerSignal { to{width:86px;opacity:.35} }
.gradient-text { color: transparent; background: linear-gradient(100deg, #1be3ff 0%, #9781ff 52%, #ff62c8 100%); background-clip: text; -webkit-background-clip: text; filter: drop-shadow(0 0 26px rgba(89, 132, 255, .12)); }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.qa-mode .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.qa-mode *, .qa-mode *::before, .qa-mode *::after { animation-delay: 0s !important; }
.qa-mode { scroll-behavior: auto !important; }

.hero {
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 55px);
  padding-bottom: 88px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(480px, .98fr);
  align-items: center;
  gap: clamp(30px, 5vw, 90px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(67, 132, 190, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 132, 190, .045) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(to bottom, transparent 5%, black 35%, transparent 94%);
}
.hero::after { content: ""; position: absolute; left: 5%; right: 5%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(53, 193, 255, .32), rgba(135, 78, 255, .32), transparent); }
.hero-content { position: relative; z-index: 2; max-width: 790px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 9px 13px; border: 1px solid rgba(74, 204, 255, .2); border-radius: 999px; color: #a8c5db; background: rgba(13, 23, 42, .58); font-family: Consolas, monospace; font-size: 10px; letter-spacing: .16em; }
.live-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.live-dot::before { content: ""; position: absolute; inset: -5px; border: 1px solid var(--green); border-radius: 50%; animation: livePulse 1.8s infinite; }
@keyframes livePulse { 0%{transform:scale(.3);opacity:1} 100%{transform:scale(1.5);opacity:0} }
.hero-title { margin: 27px 0 22px; font-size: clamp(49px, 5.7vw, 92px); line-height: 1.04; letter-spacing: -.075em; }
.hero-title > span { display: block; }
.hero-title > span:first-child { color: #f6f8ff; }
.hero-title > span:last-child { width: max-content; max-width: 100%; }
.hero-lead { margin: 0; color: #9ca5bc; font-size: clamp(14px, 1.25vw, 18px); line-height: 1.9; }
.hero-actions { margin-top: 35px; display: flex; gap: 14px; flex-wrap: wrap; }
.btn { position: relative; min-height: 51px; padding: 0 22px; border: 1px solid transparent; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; overflow: hidden; font-size: 13px; font-weight: 700; letter-spacing: .02em; background: none; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s, background .3s; }
.btn-ripple { position:absolute;z-index:1;width:12px;height:12px;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.58);transform:translate(-50%,-50%) scale(0);animation:rippleBurst .72s ease-out forwards;mix-blend-mode:screen; }
@keyframes rippleBurst { to { opacity:0; transform:translate(-50%,-50%) scale(18); } }
.btn svg { position: relative; z-index: 2; width: 20px; }
.btn > span:not(.btn-glow) { position: relative; z-index: 2; }
.btn-primary { color: #03151b; background: linear-gradient(105deg, #1be2ff, #3fb8ff 55%, #9d6aff); box-shadow: 0 12px 36px rgba(31, 194, 255, .19), inset 0 1px rgba(255,255,255,.45); }
.btn-primary:hover { box-shadow: 0 15px 45px rgba(31, 194, 255, .32), 0 0 0 1px rgba(255,255,255,.2) inset; }
.btn-glow { position: absolute; inset: -1px; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.65) 47%, transparent 68%); transform: translateX(-120%); animation: buttonShine 3.8s infinite 1s; }
@keyframes buttonShine { 0%,62%{transform:translateX(-120%)} 85%,100%{transform:translateX(120%)} }
.btn-ghost { border-color: rgba(167, 185, 224, .2); color: #d8deef; background: rgba(255,255,255,.035); backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: rgba(60, 218, 255, .48); background: rgba(31, 198, 255, .08); }
.play-icon { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(67, 222, 255, .4); border-radius: 50%; }
.play-icon i { width: 0; height: 0; margin-left: 2px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--cyan); }
.hero-metrics { margin-top: 58px; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 700px; }
.metric { padding: 0 23px; border-left: 1px solid rgba(143, 169, 213, .15); }
.metric:first-child { padding-left: 0; border-left: 0; }
.metric strong { font-size: 27px; letter-spacing: -.04em; }
.metric > span { color: var(--cyan); font-size: 12px; }
.metric small { display: block; margin-top: 7px; color: #747d96; font-size: 10px; }

.hero-visual { position: relative; min-height: 680px; perspective: 1200px; transform-style: preserve-3d; }
.hero-visual::after { content: ""; position: absolute; z-index: 0; inset: 10% -8%; pointer-events: none; opacity: .24; background: repeating-linear-gradient(112deg, transparent 0 48px, rgba(49, 217, 255, .12) 49px, transparent 51px 92px); mask-image: radial-gradient(circle, black 0 28%, transparent 69%); animation: speedField 5.5s linear infinite; }
@keyframes speedField { to { background-position: 310px 0; } }
.visual-halo { position: absolute; inset: 15% 8%; border-radius: 50%; background: radial-gradient(circle, rgba(22, 224, 255, .13), rgba(104, 64, 255, .09) 38%, transparent 68%); filter: blur(10px); animation: haloBreath 4s ease-in-out infinite alternate; }
@keyframes haloBreath { to { transform: scale(1.1); opacity: .7; } }
.radar-plane { position: absolute; left: 50%; top: 52%; width: 580px; height: 580px; transform: translate(-50%,-50%) rotateX(67deg); border: 1px solid rgba(33, 209, 255, .16); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 69px, rgba(29, 190, 255, .12) 70px 71px), linear-gradient(90deg, transparent 49.8%, rgba(40, 205, 255,.14) 50%, transparent 50.2%), linear-gradient(transparent 49.8%, rgba(40,205,255,.14) 50%, transparent 50.2%); opacity: .85; }
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 78%, rgba(35, 230, 255, .26) 92%, transparent 100%); animation: radarRotate 5s linear infinite; }
@keyframes radarRotate { to { transform: rotate(360deg); } }
.radar-plane .target { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 15px var(--cyan); animation: pointBlink 1.5s infinite alternate; }
.target-1 { left: 21%; top: 38%; }.target-2 { right: 16%; top: 53%; animation-delay: .6s !important; }.target-3 { left: 45%; bottom: 13%; animation-delay: 1.1s !important; }
@keyframes pointBlink { from{opacity:.25} to{opacity:1} }
.performance-orbit { --orbit-radius: 285px; position: absolute; z-index: 1; left: 50%; top: 50%; width: min(38vw, 570px); aspect-ratio: 1; border: 1px solid rgba(35, 220, 255, .2); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 50px rgba(26,205,255,.05), inset 0 0 45px rgba(131,70,255,.035); animation: orbitBreathe 3.6s ease-in-out infinite alternate; }
.performance-orbit::before { content: ""; position: absolute; inset: -12px; border: 1px dashed rgba(157, 91, 255, .22); border-radius: inherit; animation: telemetrySpin 18s linear infinite; }
.performance-orbit::after { content: ""; position: absolute; inset: 18px; border-radius: inherit; background: conic-gradient(from 0deg, transparent 0 20%, rgba(20,226,255,.28) 21%, transparent 23% 57%, rgba(164,97,255,.25) 58%, transparent 60%); animation: telemetrySpin 8s linear infinite reverse; mask: radial-gradient(transparent 0 72%, black 73% 75%, transparent 76%); }
@keyframes telemetrySpin { to { transform: rotate(360deg); } }
@keyframes orbitBreathe { to { box-shadow: 0 0 75px rgba(26,205,255,.11), inset 0 0 65px rgba(131,70,255,.06); } }
.orbit-stat { position: absolute; z-index: 5; min-width: 106px; padding: 8px 10px; display: grid; grid-template-columns: 1fr auto; align-items: end; border: 1px solid rgba(70,211,255,.2); border-radius: 9px; background: rgba(6,12,25,.82); box-shadow: 0 12px 28px rgba(0,0,0,.28); backdrop-filter: blur(12px); }
.orbit-stat small { grid-column: 1 / -1; margin-bottom: 3px; color: #607089; font-family: Consolas,monospace; font-size: 6px; letter-spacing: .13em; }
.orbit-stat strong { color: #e9fcff; font-family: Consolas,monospace; font-size: 19px; line-height: 1; text-shadow: 0 0 13px rgba(22,224,255,.45); }
.orbit-stat b { margin: 0 0 2px 4px; color: var(--cyan); font-family: Consolas,monospace; font-size: 7px; }
.orbit-fps { left: 22%; top: 4%; animation: statFloat 3.1s ease-in-out infinite; }
.orbit-latency { right: -27px; bottom: 14%; border-color: rgba(164,100,255,.25); animation: statFloat 3.6s ease-in-out infinite reverse; }
.orbit-latency strong { text-shadow: 0 0 13px rgba(151,92,255,.55); }.orbit-latency b { color: #b88dff; }
.orbit-runner { position: absolute; z-index: 4; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan),0 0 20px var(--cyan); }
.runner-a { animation: runnerA 5s linear infinite; }.runner-b { background: #a46aff; box-shadow: 0 0 8px #a46aff,0 0 20px #a46aff; animation: runnerB 7s linear infinite reverse; }
@keyframes runnerA { from{transform:rotate(0deg) translateX(var(--orbit-radius))} to{transform:rotate(360deg) translateX(var(--orbit-radius))} }
@keyframes runnerB { from{transform:rotate(0deg) translateX(calc(var(--orbit-radius) - 13px))} to{transform:rotate(360deg) translateX(calc(var(--orbit-radius) - 13px))} }
@keyframes statFloat { 50% { transform: translateY(-7px); } }
.logo-core { position: absolute; left: 50%; top: 50%; width: min(31vw, 470px); aspect-ratio: 1; transform: translate(-50%, -50%); transform-style: preserve-3d; filter: drop-shadow(0 30px 45px rgba(0,0,0,.55)); }
.logo-core img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.logo-main { position: relative; z-index: 3; }
.logo-echo { position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;mix-blend-mode:screen; }
.echo-cyan { filter:drop-shadow(-8px 0 8px rgba(0,229,255,.7));animation:holoEchoCyan 7s steps(1,end) infinite; }
.echo-violet { filter:drop-shadow(8px 0 8px rgba(161,77,255,.75));animation:holoEchoViolet 7s steps(1,end) infinite .09s; }
@keyframes holoEchoCyan { 0%,89%,100%{opacity:0;clip-path:inset(0)} 90%{opacity:.48;clip-path:inset(8% 0 70% 0);transform:translateX(-7px)} 92%{opacity:.25;clip-path:inset(52% 0 25% 0);transform:translateX(5px)} 94%{opacity:.38;clip-path:inset(78% 0 5% 0);transform:translateX(-4px)} 96%{opacity:0} }
@keyframes holoEchoViolet { 0%,88%,100%{opacity:0;clip-path:inset(0)} 90%{opacity:.35;clip-path:inset(22% 0 60% 0);transform:translateX(8px)} 93%{opacity:.3;clip-path:inset(62% 0 18% 0);transform:translateX(-5px)} 95%{opacity:0} }
.core-pulse { position:absolute;z-index:1;inset:10%;border:1px solid rgba(32,225,255,.35);border-radius:50%;opacity:0;animation:corePulseOut 3s ease-out infinite; }
.core-pulse.pulse-two { border-color:rgba(161,91,255,.4);animation-delay:1.5s; }
@keyframes corePulseOut { 0%{opacity:.75;transform:scale(.72)} 72%,100%{opacity:0;transform:scale(1.28)} }
.core-frame { position: absolute; inset: -5%; z-index: 0; border: 1px solid rgba(43, 230, 255, .23); border-radius: 50%; animation: coreFrameSpin 16s linear infinite; }
.core-frame::before, .core-frame::after { content: ""; position: absolute; inset: 4%; border: 1px dashed rgba(145, 94, 255, .28); border-radius: 50%; }
.core-frame::after { inset: -4%; border-style: solid; border-color: transparent var(--cyan) transparent var(--violet); animation: coreFrameSpin 8s linear infinite reverse; }
@keyframes coreFrameSpin { to { transform: rotate(360deg); } }
.scan-line { position: absolute; z-index: 3; left: 8%; right: 8%; top: 8%; height: 2px; opacity: .7; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 18px var(--cyan), 0 8px 25px rgba(22,224,255,.3); animation: scanVertical 4.5s ease-in-out infinite; }
@keyframes scanVertical { 0%,100%{top:10%;opacity:.1} 50%{top:86%;opacity:.9} }
.telemetry-stream { position:absolute;z-index:3;display:grid;gap:5px;color:#587187;font-family:Consolas,monospace;font-size:6px;letter-spacing:.13em;line-height:1.4;opacity:.72; }
.telemetry-stream span { position:relative;padding-left:12px;white-space:nowrap;animation:telemetryBlink 2.6s steps(2,end) infinite; }
.telemetry-stream span::before { content:"";position:absolute;left:0;top:4px;width:5px;height:1px;background:var(--cyan);box-shadow:0 0 6px var(--cyan); }
.telemetry-stream b { color:#9cefff;font-weight:500; }
.telemetry-a { left:1%;top:41%; }.telemetry-b { right:-1%;top:35%;text-align:right; }
.telemetry-b span { padding:0 12px 0 0; }.telemetry-b span::before { left:auto;right:0;background:#a675ff;box-shadow:0 0 6px #a675ff; }
.telemetry-stream span:nth-child(2){animation-delay:.35s}.telemetry-stream span:nth-child(3){animation-delay:.7s}.telemetry-stream span:nth-child(4){animation-delay:1.05s}
@keyframes telemetryBlink { 50%{opacity:.35} }
.floating-chip { position: absolute; z-index: 4; min-width: 220px; padding: 12px 14px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(87, 187, 237, .2); border-radius: 13px; background: linear-gradient(120deg, rgba(15,25,48,.84), rgba(14,16,34,.64)); box-shadow: 0 15px 40px rgba(0,0,0,.25); backdrop-filter: blur(14px); }
.floating-chip > span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }
.floating-chip small { color: #6e7994; font-family: Consolas, monospace; font-size: 8px; letter-spacing: .15em; }
.floating-chip strong { font-size: 11px; letter-spacing: .04em; }
.chip-dml { left: -1%; top: 26%; animation: chipFloat 4.2s ease-in-out infinite; }
.chip-trt { right: -3%; top: 62%; animation: chipFloat 4.8s ease-in-out infinite reverse; }
.chip-latency { left: 7%; bottom: 7%; min-width: 205px; animation: chipFloat 4.5s ease-in-out infinite 1s; }
@keyframes chipFloat { 0%,100%{margin-top:-5px} 50%{margin-top:7px} }
.chip-icon { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; font-family: Consolas, monospace; font-size: 12px; font-weight: 800; }
.chip-icon.cyan { color: var(--cyan); background: rgba(22,224,255,.1); border: 1px solid rgba(22,224,255,.3); }
.chip-icon.violet { color: #b28cff; background: rgba(151,92,255,.12); border: 1px solid rgba(151,92,255,.3); }
.status-dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.latency-wave { width: 39px; height: 29px; display: flex; align-items: center; justify-content: center; gap: 3px; }
.latency-wave i { width: 2px; height: 30%; border-radius: 3px; background: var(--cyan); animation: wave 1s infinite ease-in-out; }
.latency-wave i:nth-child(2){animation-delay:.1s}.latency-wave i:nth-child(3){animation-delay:.2s}.latency-wave i:nth-child(4){animation-delay:.3s}.latency-wave i:nth-child(5){animation-delay:.4s}
@keyframes wave { 50%{height:90%;background:var(--violet)} }
.corner-label { position: absolute; color: rgba(112, 134, 165, .58); font-family: Consolas, monospace; font-size: 8px; letter-spacing: .16em; writing-mode: vertical-rl; }
.label-a { left: 1%; bottom: 25%; }.label-b { right: 1%; top: 28%; }
.hero-orbit { position: absolute; border: 1px solid rgba(71, 151, 215, .08); border-radius: 50%; pointer-events: none; }
.orbit-a { width: 420px; height: 420px; left: -230px; top: 15%; }.orbit-b { width: 300px; height: 300px; right: -160px; bottom: 4%; }
.scroll-hint { position: absolute; left: clamp(24px,6vw,112px); bottom: 24px; display: flex; align-items: center; gap: 13px; color: #5e6882; font-family: Consolas, monospace; font-size: 8px; letter-spacing: .17em; }
.scroll-hint i { position: relative; width: 38px; height: 1px; overflow: hidden; background: rgba(255,255,255,.12); }
.scroll-hint i::after { content: ""; position: absolute; top: 0; left: -50%; width: 50%; height: 100%; background: var(--cyan); animation: scrollLine 1.7s infinite; }
@keyframes scrollLine { to { left: 120%; } }

.tech-marquee { position: relative; z-index: 2; overflow: hidden; border-top: 1px solid rgba(63, 155, 216, .1); border-bottom: 1px solid rgba(63, 155, 216, .1); background: rgba(7, 11, 23, .68); transform: rotate(-1deg) scale(1.02); }
.marquee-track { width: max-content; padding: 16px 0; display: flex; align-items: center; animation: marquee 26s linear infinite; }
.marquee-track span { color: #6c7791; font-family: Consolas, monospace; font-size: 10px; letter-spacing: .2em; }
.marquee-track i { width: 5px; height: 5px; margin: 0 30px; border: 1px solid var(--cyan); transform: rotate(45deg); }
@keyframes marquee { to { transform: translateX(-50%); } }

.products { padding-top: 150px; }
.product-switch { position: relative; max-width: 760px; margin: 0 auto 54px; padding: 6px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(106, 156, 211, .14); border-radius: 18px; background: rgba(11,15,29,.75); overflow: hidden; }
.product-switch button { position: relative; z-index: 2; min-height: 72px; padding: 0 22px; border: 0; display: flex; align-items: center; gap: 14px; text-align: left; background: transparent; opacity: .55; transition: opacity .35s; }
.product-switch button.active { opacity: 1; }
.product-switch button > span:last-child { display: flex; flex-direction: column; gap: 5px; }
.product-switch strong { font-size: 13px; }.product-switch small { color: #7d879e; font-size: 9px; }
.switch-index { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(65,215,255,.25); border-radius: 8px; color: var(--cyan); font-family: Consolas, monospace; font-size: 9px; }
.switch-slider { position: absolute; z-index: 1; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); border: 1px solid rgba(57, 217, 255, .22); border-radius: 13px; background: linear-gradient(115deg, rgba(21,196,255,.12), rgba(136,74,255,.11)); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 28px rgba(26,195,255,.06); transition: transform .5s var(--ease), border-color .3s; }
.product-switch[data-active="jetson"] .switch-slider { transform: translateX(100%); border-color: rgba(160,96,255,.28); }
.product-stage { position: relative; max-width: 1440px; min-height: 690px; margin: auto; padding: clamp(28px, 4vw, 62px); display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(40px, 5vw, 82px); align-items: center; border: 1px solid rgba(93,146,207,.15); border-radius: 30px; background: linear-gradient(140deg, rgba(15,21,40,.88), rgba(7,10,21,.78)); box-shadow: 0 40px 120px rgba(0,0,0,.24); overflow: hidden; transition: box-shadow .4s, border-color .4s; }
.product-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 74% 45%, rgba(27,212,255,.08), transparent 33%), linear-gradient(115deg, transparent 45%, rgba(255,255,255,.018) 45.2%, transparent 46%); }
.product-stage::after { content: ""; position: absolute; top: -35%; bottom: -35%; left: -22%; width: 14%; pointer-events: none; opacity: .35; background: linear-gradient(90deg, transparent, rgba(45, 223, 255, .1), transparent); transform: rotate(16deg); animation: productBeam 7s linear infinite; }
@keyframes productBeam { to { left: 118%; } }
.product-stage.jetson { border-color: rgba(152, 92, 255, .22); box-shadow: 0 40px 120px rgba(82,42,142,.12); }
.product-stage.jetson::before { background: radial-gradient(circle at 74% 45%, rgba(151,92,255,.1), transparent 33%); }
.product-copy { position: relative; z-index: 2; }
.product-badge { display: inline-flex; align-items: center; gap: 8px; color: #87a3bd; font-family: Consolas, monospace; font-size: 9px; letter-spacing: .14em; }
.product-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.product-copy h3 { margin: 17px 0 14px; font-size: clamp(37px, 4vw, 61px); line-height: 1; letter-spacing: -.06em; }
.product-copy h3 em { color: var(--cyan); font-style: normal; }
.jetson .product-copy h3 em { color: #b48bff; }
.product-desc { margin: 0; color: #949db4; font-size: 13px; line-height: 1.85; }
.deployment-highlight { margin-top:20px;padding:12px 13px;display:grid;grid-template-columns:auto 1fr auto 1fr auto;gap:9px;align-items:center;border:1px solid rgba(40,216,255,.17);border-radius:11px;background:linear-gradient(110deg,rgba(20,211,255,.07),rgba(151,92,255,.035));box-shadow:inset 0 1px rgba(255,255,255,.025); }
.deployment-highlight span { display:flex;flex-direction:column;gap:4px;min-width:0; }.deployment-highlight small{color:#5d6d85;font-family:Consolas,monospace;font-size:6px;letter-spacing:.12em}.deployment-highlight strong{color:#ccecf4;font-family:Consolas,monospace;font-size:8px;white-space:nowrap}.deployment-highlight>i{position:relative;min-width:17px;height:1px;background:rgba(34,218,255,.16);overflow:hidden}.deployment-highlight>i::after{content:"";position:absolute;left:-70%;width:70%;height:100%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);animation:deploymentFlow 1.6s linear infinite}.deployment-highlight>i:nth-of-type(2)::after{animation-delay:.8s}@keyframes deploymentFlow{to{left:130%}}
.jetson .deployment-highlight { border-color:rgba(161,91,255,.26);background:linear-gradient(110deg,rgba(151,92,255,.11),rgba(32,220,255,.035)); }.jetson .deployment-highlight strong{color:#dac8ff}.jetson .deployment-highlight>i::after{background:#aa75ff;box-shadow:0 0 6px #aa75ff}
.product-specs { margin-top: 25px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.product-specs div { min-width: 0; padding: 13px 12px; border: 1px solid rgba(96,149,207,.12); border-radius: 10px; background: rgba(255,255,255,.02); }
.product-specs span, .product-specs strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-specs span { margin-bottom: 6px; color: #68738c; font-size: 8px; }
.product-specs strong { color: #c5cce0; font-family: Consolas, monospace; font-size: 9px; font-weight: 500; }
.product-points { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.product-points li { display: flex; align-items: flex-start; gap: 11px; color: #939cb1; font-size: 12px; line-height: 1.7; }
.product-points li > span { display: flex; flex-wrap: wrap; column-gap: 7px; }
.product-points li i { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; border: 1px solid rgba(37,219,255,.28); border-radius: 5px; background: linear-gradient(145deg, rgba(20,222,255,.12), rgba(151,92,255,.07)); }
.product-points li i::after { content: ""; display: block; width: 5px; height: 3px; margin: 5px; border-left: 1px solid var(--cyan); border-bottom: 1px solid var(--cyan); transform: rotate(-45deg); }
.product-points strong { color: #e4e8f4; font-weight: 700; }
.jetson .product-badge i { background: #b17cff; box-shadow: 0 0 10px #975cff; }
.jetson .product-points li i { border-color: rgba(151,92,255,.38); background: linear-gradient(145deg,rgba(151,92,255,.15),rgba(23,190,255,.05)); }
.jetson .product-points li i::after { border-color: #b790ff; }
.product-foot { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; }
.text-link { color: var(--cyan); font-size: 11px; font-weight: 700; }.text-link span { margin-left: 5px; }
.platform-chip { padding: 7px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; color: #69748d; font-family: Consolas, monospace; font-size: 7px; letter-spacing: .1em; }
.product-screen-wrap { position: relative; z-index: 2; perspective: 1000px; }
.screen-glow { position: absolute; inset: 8% 5%; background: rgba(17,215,255,.12); filter: blur(60px); }
.jetson .screen-glow { background: rgba(151,92,255,.15); }
.product-screen { position: relative; overflow: hidden; border: 1px solid rgba(73,177,227,.24); border-radius: 14px; background: #090c17; box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.025) inset; transform: rotateY(-3deg) rotateX(2deg); }
.product-screen::before { content:"";position:absolute;z-index:9;inset:0;padding:1px;border-radius:inherit;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 62%,rgba(28,225,255,.85) 68%,rgba(166,93,255,.8) 72%,transparent 79%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:screenBorderSpin 7s linear infinite; }
@keyframes screenBorderSpin { to { transform:rotate(360deg) scale(1.45); } }
.product-stage.switching .product-screen { animation: screenGlitch .36s steps(2,end); }
@keyframes screenGlitch { 0%{clip-path:inset(0);filter:hue-rotate(0)} 25%{clip-path:inset(12% 0 61% 0);transform:translateX(5px) rotateY(-3deg)} 48%{clip-path:inset(58% 0 8% 0);transform:translateX(-6px) rotateY(-3deg);filter:hue-rotate(55deg)} 72%{clip-path:inset(25% 0 35% 0)} 100%{clip-path:inset(0);filter:hue-rotate(0)} }
.screen-topbar, .screen-footer { height: 36px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; color: #606b84; background: #0d1221; font-family: Consolas, monospace; font-size: 7px; letter-spacing: .12em; }
.screen-topbar { border-bottom: 1px solid rgba(86,151,205,.13); }
.screen-footer { height: 31px; border-top: 1px solid rgba(86,151,205,.13); }
.screen-footer span { display: flex; align-items: center; gap: 6px; }
.screen-footer i { width: 5px; height: 5px; border-radius: 50%; }.screen-footer i.green { background: var(--green); box-shadow: 0 0 8px var(--green); }
.screen-dots, .screen-signal { display: flex; gap: 5px; }.screen-dots i { width: 6px; height: 6px; border-radius: 50%; background: #323b52; }.screen-dots i:nth-child(1){background:#ff6f91}.screen-dots i:nth-child(2){background:#ffd16a}.screen-dots i:nth-child(3){background:#53e4ad}
.screen-signal { align-items: end; }.screen-signal i { width: 2px; background: var(--cyan); }.screen-signal i:nth-child(1){height:3px}.screen-signal i:nth-child(2){height:6px}.screen-signal i:nth-child(3){height:9px}
.screen-viewport { position: relative; height: 470px; overflow: hidden; background: #080a13; }
.screen-viewport img { width: 100%; min-height: 100%; object-fit: cover; object-position: center top; transition: opacity .35s, transform .7s var(--ease), filter .35s; }
.jetson .screen-viewport img { filter: brightness(1.23) saturate(1.16) contrast(1.04); }
.product-screen:hover .screen-viewport img { transform: scale(1.025); }
.screen-scan { position: absolute; left: 0; right: 0; top: -30%; height: 25%; background: linear-gradient(transparent, rgba(31,220,255,.05), rgba(31,220,255,.1), transparent); animation: screenScan 5s linear infinite; pointer-events: none; }
@keyframes screenScan { to { top: 110%; } }
.screen-hotspot { position: absolute; display: flex; align-items: center; gap: 6px; color: var(--cyan); font-family: Consolas, monospace; font-size: 7px; letter-spacing: .08em; opacity: 0; transform: translateY(5px); transition: opacity .4s, transform .4s; }
.product-screen:hover .screen-hotspot { opacity: 1; transform: translateY(0); }
.screen-hotspot::before { content: ""; width: 8px; height: 8px; border: 1px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 10px var(--cyan); animation: hotPulse 1.4s infinite; }
@keyframes hotPulse { 50%{transform:scale(1.5);opacity:.4} }
.screen-hotspot span { padding: 5px 7px; background: rgba(4,13,22,.85); border: 1px solid rgba(28,220,255,.25); border-radius: 5px; }
.hotspot-one { left: 23%; top: 44%; }.hotspot-two { right: 14%; bottom: 19%; }
.screen-note { position: absolute; padding: 7px 9px; color: #66718a; border-left: 1px solid rgba(47,214,255,.25); background: rgba(7,10,20,.74); font-size: 8px; letter-spacing: .08em; backdrop-filter: blur(8px); }
.screen-note span { margin-right: 7px; color: var(--cyan); font-family: Consolas, monospace; }.note-top { right: -19px; top: 15%; }.note-bottom { left: -23px; bottom: 12%; }

.console-section { padding-top: 150px; background: linear-gradient(180deg, transparent, rgba(11,14,29,.55) 20%, rgba(11,14,29,.55) 80%, transparent); overflow: hidden; }
.console-bg-word { position: absolute; top: 130px; right: -1vw; color: rgba(255,255,255,.017); font-size: 14vw; font-weight: 900; letter-spacing: -.08em; pointer-events: none; }
.demo-console { position:relative; max-width: 1440px; min-height: 760px; margin: auto; display: grid; grid-template-columns: 176px 1fr; border: 1px solid rgba(85,151,207,.18); border-radius: 22px; overflow: hidden; background: rgba(7,10,20,.92); box-shadow: 0 45px 140px rgba(0,0,0,.38); }
.demo-console::after { content:"";position:absolute;z-index:8;inset:0;padding:1px;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--console-angle),transparent 0 74%,var(--cyan) 81%,#a46cff 87%,transparent 94%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:consoleBorder 8s linear infinite; }
@property --console-angle { syntax:"<angle>";initial-value:0deg;inherits:false; }
@keyframes consoleBorder { to { --console-angle:360deg; } }
.console-scan-beam { position:absolute;z-index:7;left:0;right:0;top:-20%;height:18%;pointer-events:none;opacity:.42;background:linear-gradient(transparent,rgba(21,220,255,.055),rgba(21,220,255,.16),transparent);mix-blend-mode:screen;animation:consoleScan 6.5s linear infinite; }
@keyframes consoleScan { to { top:108%; } }
.demo-sidebar { padding: 22px 13px; display: flex; flex-direction: column; border-right: 1px solid rgba(83,140,190,.13); background: linear-gradient(180deg,#0d1324,#090c17); }
.demo-logo { display: flex; align-items: center; gap: 10px; padding: 0 7px 25px; border-bottom: 1px solid rgba(255,255,255,.06); }
.demo-logo > span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(31,220,255,.28); border-radius: 9px; color: var(--cyan); background: rgba(31,220,255,.08); font-family: Consolas, monospace; font-weight: 800; }
.demo-logo div { display: flex; flex-direction: column; gap: 3px; }.demo-logo strong { font-size: 9px; letter-spacing: .08em; }.demo-logo small { color: var(--green); font-family: Consolas, monospace; font-size: 6px; }
.demo-nav { width: 100%; margin-top: 9px; min-height: 42px; padding: 0 12px; display: flex; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 9px; color: #6f7991; background: transparent; text-align: left; font-size: 10px; transition: color .25s, border .25s, background .25s; }
.demo-nav svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.demo-nav.active, .demo-nav:hover { color: #dcfaff; border-color: rgba(24,210,255,.15); background: linear-gradient(90deg,rgba(18,195,255,.11),transparent); }
.demo-nav.active svg { color: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan)); }
.demo-sidebar-status { margin-top: auto; padding: 13px 10px; border: 1px solid rgba(65,193,150,.13); border-radius: 9px; background: rgba(22,126,90,.045); }
.demo-sidebar-status span { display: flex; align-items: center; gap: 7px; color: #b9e7d2; font-family: Consolas, monospace; font-size: 7px; }.demo-sidebar-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); }.demo-sidebar-status small { display: block; margin-top: 6px; color: #4c586e; font-size: 7px; }
.demo-main { min-width: 0; }
.demo-toolbar { min-height: 79px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(83,140,190,.13); background: rgba(12,16,30,.84); }
.demo-toolbar > div:first-child { display: flex; flex-direction: column; gap: 5px; }.demo-toolbar strong { font-size: 17px; }.demo-overline { color: var(--cyan); font-family: Consolas, monospace; font-size: 7px; letter-spacing: .17em; }
.demo-toolbar-actions { display: flex; align-items: center; gap: 9px; }
.demo-device, .runtime-toggle { min-height: 32px; padding: 0 11px; display: flex; align-items: center; gap: 7px; border: 1px solid rgba(99,151,200,.14); border-radius: 8px; color: #8792aa; background: rgba(255,255,255,.025); font-family: Consolas, monospace; font-size: 7px; }
.demo-device i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }
.engine-toggle { position: relative; width: 42px; height: 24px; padding: 0; border: 1px solid rgba(71,218,255,.2); border-radius: 99px; background: rgba(21,201,255,.08); }
.engine-toggle span { position: absolute; top: 4px; left: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(22,224,255,.6); transition: transform .35s var(--ease), background .35s; }
.engine-toggle.jetson span { transform: translateX(18px); background: #a774ff; box-shadow: 0 0 8px rgba(151,92,255,.7); }
.runtime-toggle { border-color: rgba(56,231,166,.17); color: #b5e7d3; }.runtime-toggle i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }.runtime-toggle:not(.active) { color: #8d7580; border-color: rgba(255,90,120,.17); }.runtime-toggle:not(.active) i { background: #ff567f; box-shadow: 0 0 8px #ff567f; }
.demo-grid { min-height: 681px; padding: 16px; display: grid; grid-template-columns: 300px 1fr; grid-template-rows: 1fr 132px; gap: 12px; }
.parameter-panel, .vision-panel, .log-panel { border: 1px solid rgba(82,139,192,.13); border-radius: 13px; background: linear-gradient(145deg,rgba(16,22,41,.88),rgba(10,13,25,.9)); overflow: hidden; }
.parameter-panel { grid-row: span 2; padding: 18px; }
.panel-title { padding-bottom: 16px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid rgba(255,255,255,.06); }
.panel-title > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(40,213,255,.22); border-radius: 8px; color: var(--cyan); font-family: Consolas,monospace; font-size: 8px; }.panel-title div { display: flex; flex-direction: column; gap: 3px; }.panel-title strong { font-size: 11px; }.panel-title small { color: #536079; font-family: Consolas,monospace; font-size: 6px; letter-spacing:.08em; }.panel-status { margin-left: auto; width: 6px; height: 6px; border-radius:50%; background:var(--green); box-shadow:0 0 7px var(--green); }
.control-row { margin-top: 22px; }.control-row label { margin-bottom: 12px; display: flex; justify-content: space-between; color: #9099af; font-size: 9px; }.control-row output { color: var(--cyan); font-family: Consolas,monospace; }
input[type="range"] { width: 100%; height: 3px; margin: 0; appearance: none; border-radius: 4px; outline: none; background: linear-gradient(90deg,var(--cyan) var(--range-progress,50%),#252c41 var(--range-progress,50%)); }
input[type="range"]::-webkit-slider-thumb { width: 13px; height: 13px; appearance: none; border: 2px solid #bdf8ff; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px rgba(22,224,255,.7); }
.control-block { margin-top: 24px; }.control-block > span { display: block; margin-bottom: 10px; color: #9099af; font-size: 9px; }
.segmented { padding: 3px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid rgba(83,143,196,.13); border-radius: 8px; background: rgba(0,0,0,.18); }.segmented button { min-height: 28px; padding: 0 4px; border: 0; border-radius: 6px; color: #566079; background: transparent; font-family: Consolas,monospace; font-size: 6px; }.segmented button.active { color: #dffcff; background: rgba(20,202,255,.12); box-shadow: inset 0 0 0 1px rgba(20,202,255,.14); }
.toggle-list { margin-top: 25px; display: grid; gap: 9px; }.toggle-list label { padding: 11px 10px; display: flex; align-items:center; justify-content:space-between; border:1px solid rgba(83,143,196,.1); border-radius:9px; background:rgba(255,255,255,.015); }.toggle-list label > span { display:flex;flex-direction:column;gap:4px; }.toggle-list b { color:#b9c1d4;font-size:8px; }.toggle-list small { color:#505a70;font-family:Consolas,monospace;font-size:6px; }.toggle-list input { display:none; }.toggle-list label > i { position:relative;width:27px;height:15px;flex:0 0 auto;border-radius:99px;background:#262d40;transition:.3s; }.toggle-list label > i::after { content:"";position:absolute;left:3px;top:3px;width:9px;height:9px;border-radius:50%;background:#657087;transition:.3s; }.toggle-list input:checked + i { background:rgba(20,205,255,.25);box-shadow:inset 0 0 0 1px rgba(20,205,255,.22); }.toggle-list input:checked + i::after { transform:translateX(12px);background:var(--cyan);box-shadow:0 0 7px var(--cyan); }
.vision-panel { min-width:0; display:grid;grid-template-rows:39px 1fr 72px; }.vision-toolbar { padding:0 13px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(83,140,190,.12);color:#647089;font-family:Consolas,monospace;font-size:7px; }.vision-toolbar > span:first-child { display:flex;align-items:center;gap:6px;color:#91a2ba; }.vision-toolbar > span:first-child i { width:5px;height:5px;border-radius:50%;background:#ff5e8f;box-shadow:0 0 7px #ff5e8f;animation:pointBlink 1s infinite alternate; }.vision-toolbar div { display:flex;padding:2px;border:1px solid rgba(83,140,190,.11);border-radius:6px; }.vision-toolbar button { min-height:21px;padding:0 9px;border:0;border-radius:4px;color:#4f5b72;background:transparent;font-family:Consolas,monospace;font-size:6px; }.vision-toolbar button.active { color:#dffcff;background:rgba(21,205,255,.12); }.frame-id b { color:var(--cyan);font-weight:500; }
.vision-scene { position:relative;min-height:420px;overflow:hidden;background:radial-gradient(circle at 50% 52%,rgba(34,80,103,.25),transparent 36%),linear-gradient(180deg,#10172a 0 42%,#111424 42% 100%); }.vision-scene::before { content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(45,205,234,.025) 50%,transparent 70%);animation:sceneLight 5s infinite alternate; }
@keyframes sceneLight { to{transform:translateX(12%)} }
.scene-grid { position:absolute;inset:0;background:linear-gradient(rgba(29,188,219,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(29,188,219,.04) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 88%); }.scene-horizon { position:absolute;left:0;right:0;top:42%;height:1px;background:rgba(86,180,208,.12);box-shadow:0 0 40px rgba(39,191,234,.15); }
.scene-building { position:absolute;bottom:0;border:1px solid rgba(84,125,154,.08);background:linear-gradient(180deg,rgba(33,46,67,.76),rgba(16,20,34,.92));box-shadow:inset 0 1px rgba(255,255,255,.025); }.scene-building::after { content:"";position:absolute;inset:15px 10px;background:repeating-linear-gradient(90deg,rgba(28,196,224,.07) 0 3px,transparent 3px 21px),repeating-linear-gradient(rgba(28,196,224,.04) 0 2px,transparent 2px 25px); }.building-a{left:-2%;width:26%;height:36%;}.building-b{left:30%;width:22%;height:22%;}.building-c{right:-2%;width:31%;height:43%;}
.fov-circle { position:absolute;left:50%;top:50%;width:250px;height:250px;border:1px dashed rgba(33,220,255,.22);border-radius:50%;transform:translate(-50%,-50%);transition:width .25s,height .25s;animation:fovTelemetry 2.2s ease-in-out infinite alternate; }.fov-circle::before,.fov-circle::after{content:"";position:absolute;left:50%;top:50%;background:rgba(33,220,255,.12);transform:translate(-50%,-50%)}.fov-circle::before{width:100%;height:1px}.fov-circle::after{width:1px;height:100%}.fov-circle span{position:absolute;right:12%;top:5%;width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
@keyframes fovTelemetry { to { border-color:rgba(151,92,255,.38);box-shadow:0 0 28px rgba(22,224,255,.07),inset 0 0 28px rgba(151,92,255,.035); } }
.crosshair { position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%); }.crosshair i{position:absolute;background:var(--green);box-shadow:0 0 6px rgba(80,255,173,.7)}.crosshair i:nth-child(1){left:0;top:22px;width:16px;height:1px}.crosshair i:nth-child(2){right:0;top:22px;width:16px;height:1px}.crosshair i:nth-child(3){top:0;left:22px;width:1px;height:16px}.crosshair i:nth-child(4){bottom:0;left:22px;width:1px;height:16px}.crosshair b{position:absolute;left:21px;top:21px;width:3px;height:3px;border-radius:50%;background:var(--green)}
.detected-target { position:absolute;border:1px solid rgba(29,230,255,.72);box-shadow:0 0 18px rgba(29,230,255,.07),inset 0 0 16px rgba(29,230,255,.03);transition:filter .3s,opacity .3s;animation:targetHover 3s ease-in-out infinite;overflow:visible; }.detected-target::before{content:"";position:absolute;z-index:0;left:2px;right:2px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--green),transparent);box-shadow:0 0 7px var(--green);animation:targetScan 1.8s linear infinite}.detected-target > i{position:absolute;width:10px;height:10px;border-color:#e8ffff;border-style:solid}.detected-target .tl{left:-2px;top:-2px;border-width:2px 0 0 2px}.detected-target .tr{right:-2px;top:-2px;border-width:2px 2px 0 0}.detected-target .bl{left:-2px;bottom:-2px;border-width:0 0 2px 2px}.detected-target .br{right:-2px;bottom:-2px;border-width:0 2px 2px 0}.target-a{left:59%;top:27%;width:75px;height:160px}.target-b{left:25%;top:44%;width:52px;height:109px;animation-delay:.8s;opacity:.63}.target-label{position:absolute;z-index:2;left:-1px;top:-17px;padding:3px 5px;color:#052026;background:var(--cyan);font-family:Consolas,monospace;font-size:6px;white-space:nowrap}.target-label b{font-weight:800}.target-skeleton{position:absolute;inset:16px 9px}.target-skeleton i{position:absolute;border:1px solid rgba(77,242,255,.5);border-radius:50%}.target-skeleton i:nth-child(1){left:21px;top:0;width:16px;height:16px}.target-skeleton i:nth-child(2){left:28px;top:17px;width:1px;height:49px;border-radius:0}.target-skeleton i:nth-child(3){left:7px;top:27px;width:42px;height:1px;border-radius:0}.target-skeleton i:nth-child(4){left:14px;top:64px;width:28px;height:49px;border-width:0 1px 0 1px;border-radius:0;transform:skew(-8deg)}.target-skeleton i:nth-child(5){left:3px;top:17px;width:52px;height:88px;border-color:rgba(77,242,255,.12)}
@keyframes targetScan { to { top:calc(100% - 1px); } }
@keyframes targetHover{50%{transform:translateY(-4px)}}
.tracking-line { position:absolute;left:50%;top:50%;width:18%;height:1px;background:linear-gradient(90deg,rgba(80,255,173,.8),transparent);transform-origin:left;transform:rotate(-21deg);box-shadow:0 0 6px rgba(80,255,173,.5); }.tracking-line::after{content:"";position:absolute;left:0;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--green)}
.scene-readout{position:absolute;color:#5d6e87;font-family:Consolas,monospace;font-size:6px;line-height:1.7;letter-spacing:.06em}.scene-readout b{color:#9cb1c9;font-weight:500}.scene-readout.top-left{left:13px;top:12px}.scene-readout.bottom-right{right:13px;bottom:11px;text-align:right}.scene-readout.bottom-right b{color:var(--green)}
.mask-overlay { position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(circle at 62% 48%,rgba(69,255,199,.55),transparent 7%),radial-gradient(circle at 28% 63%,rgba(140,76,255,.5),transparent 6%),linear-gradient(135deg,rgba(255,0,95,.2),rgba(0,217,255,.18));mix-blend-mode:screen;transition:opacity .35s; }.vision-scene.mask-mode .mask-overlay{opacity:.8}.vision-scene.heat-mode .mask-overlay{opacity:.55;background:radial-gradient(circle at 62% 48%,#ffef63,transparent 8%),radial-gradient(circle at 62% 48%,#ff4d00,transparent 17%),radial-gradient(circle at 28% 63%,#ff29a8,transparent 10%),linear-gradient(135deg,rgba(12,0,255,.35),rgba(0,217,255,.12))}.vision-scene.mask-mode .scene-building,.vision-scene.mask-mode .scene-grid{filter:grayscale(1) contrast(1.6);opacity:.45}
.vision-metrics { display:grid;grid-template-columns:repeat(3,105px) 1fr;border-top:1px solid rgba(83,140,190,.11);background:rgba(7,10,19,.7); }.vision-metrics > div{padding:12px;border-right:1px solid rgba(83,140,190,.09);}.vision-metrics span{display:block;color:#566178;font-size:7px}.vision-metrics strong{font-size:18px;letter-spacing:-.04em}.vision-metrics small{margin-left:3px;color:var(--cyan);font-family:Consolas,monospace;font-size:6px}.vision-metrics .chart-cell{display:flex;align-items:center;border-right:0}.chart-cell canvas{width:100%;height:48px}
.vision-metrics .metric-hot { position: relative; overflow: hidden; background: linear-gradient(135deg,rgba(14,217,255,.035),transparent); }
.vision-metrics .metric-hot::after { content:""; position:absolute; left:-45%; bottom:0; width:45%; height:1px; background:linear-gradient(90deg,transparent,var(--cyan)); box-shadow:0 0 8px var(--cyan); animation: metricSweep 2.1s linear infinite; }
.vision-metrics .metric-hot:nth-child(2)::after { animation-delay:.7s; background:linear-gradient(90deg,transparent,#a976ff); box-shadow:0 0 8px #a976ff; }
@keyframes metricSweep { to { left:115%; } }
.log-panel{padding:13px 16px}.log-title{display:flex;align-items:center;justify-content:space-between;color:#65718a;font-family:Consolas,monospace;font-size:7px;letter-spacing:.12em}.log-title i{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green)}.log-lines{margin-top:9px;display:grid;gap:5px;font-family:Consolas,monospace}.log-lines p{margin:0;color:#7c879e;font-size:7px}.log-lines time{margin-right:9px;color:#424d63}.log-lines b{display:inline-block;width:22px;margin-right:7px;font-size:6px}.log-lines .ok{color:var(--green)}.log-lines .info{color:var(--cyan)}.log-lines .violet{color:#a77aff}

.feature-grid { max-width: 1440px; margin: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; perspective: 1000px; }
.feature-card { position:relative;min-height:360px;padding:30px;border:1px solid rgba(91,148,201,.14);border-radius:20px;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(24,205,255,.085),transparent 28%),linear-gradient(145deg,rgba(16,22,41,.83),rgba(9,12,24,.88));overflow:hidden;transform-style:preserve-3d;transition:border-color .35s,box-shadow .35s,transform .2s; }.feature-card:hover{border-color:rgba(47,214,255,.3);box-shadow:0 25px 70px rgba(0,0,0,.28)}.feature-card::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.025),transparent 60%);transform:translateX(-100%);transition:transform .8s}.feature-card:hover::before{transform:translateX(100%)}
.feature-card::after { content:"";position:absolute;z-index:5;inset:0;padding:1px;border-radius:inherit;pointer-events:none;opacity:0;background:conic-gradient(from var(--card-angle),transparent 0 76%,rgba(23,224,255,.9) 82%,rgba(158,91,255,.9) 87%,transparent 94%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .35s;animation:cardBorder 4s linear infinite; }
.feature-card:hover::after { opacity:1; }
@property --card-angle { syntax:"<angle>";initial-value:0deg;inherits:false; }
@keyframes cardBorder { to { --card-angle:360deg; } }
.feature-large { grid-row:span 2; min-height:735px; }.feature-wide { grid-column:span 2; min-height:360px;display:grid;grid-template-columns:.86fr 1.14fr;gap:30px;align-items:center; }
.feature-no{position:absolute;right:20px;top:17px;color:rgba(255,255,255,.08);font-family:Consolas,monospace;font-size:24px;font-weight:800}.feature-icon{width:53px;height:53px;display:grid;place-items:center;border:1px solid rgba(38,213,255,.2);border-radius:14px;color:var(--cyan);background:linear-gradient(145deg,rgba(25,206,255,.1),rgba(151,92,255,.06));box-shadow:inset 0 1px rgba(255,255,255,.04)}.feature-icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.gpu-icon{width:70px;height:70px}.gpu-icon svg{width:43px;height:43px}.feature-tag{display:block;margin-top:27px;color:var(--cyan);font-family:Consolas,monospace;font-size:8px;font-weight:700;letter-spacing:.16em}.feature-card h3{margin:11px 0 13px;font-size:22px;letter-spacing:-.035em}.feature-card p{margin:0;color:#8790a6;font-size:12px;line-height:1.85}.card-shine{position:absolute;right:-80px;bottom:-80px;width:190px;height:190px;border-radius:50%;background:rgba(26,207,255,.07);filter:blur(50px)}
.mini-pipeline{position:absolute;left:30px;right:30px;bottom:40px;display:flex;align-items:center}.mini-pipeline span{padding:9px 8px;border:1px solid rgba(48,206,255,.16);border-radius:7px;color:#77849b;background:rgba(7,12,22,.6);font-family:Consolas,monospace;font-size:7px}.mini-pipeline i{position:relative;flex:1;height:1px;background:rgba(46,205,255,.13);overflow:hidden}.mini-pipeline i::after{content:"";position:absolute;left:-25%;width:25%;height:100%;background:var(--cyan);animation:flowPulse 2s infinite linear}.mini-pipeline i:nth-of-type(2)::after{animation-delay:.5s}.mini-pipeline i:nth-of-type(3)::after{animation-delay:1s}@keyframes flowPulse{to{left:120%}}
.curve-visual{position:absolute;left:28px;right:28px;bottom:30px;height:80px;border-bottom:1px solid rgba(48,206,255,.12)}.curve-visual::before{content:"";position:absolute;left:0;bottom:10px;width:100%;height:55px;border-top:1px solid var(--violet);border-radius:50% 50% 0 0/100% 100% 0 0;transform:rotate(-6deg);filter:drop-shadow(0 0 5px rgba(151,92,255,.5))}.curve-visual i,.curve-visual b,.curve-visual span{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.curve-visual i{left:2%;bottom:9px}.curve-visual b{left:49%;top:11px}.curve-visual span{right:1%;bottom:20px}
.detector-dots{position:absolute;left:30px;right:30px;bottom:34px;height:57px}.detector-dots i{position:absolute;width:7px;height:7px;border:1px solid var(--cyan);box-shadow:0 0 8px rgba(22,224,255,.4);animation:dotDrift 3s infinite alternate}.detector-dots i:nth-child(1){left:5%;top:30%}.detector-dots i:nth-child(2){left:27%;top:5%;animation-delay:.4s}.detector-dots i:nth-child(3){left:52%;top:58%;animation-delay:.8s}.detector-dots i:nth-child(4){left:74%;top:15%;animation-delay:1.2s}.detector-dots i:nth-child(5){right:2%;top:45%;animation-delay:1.6s}@keyframes dotDrift{to{transform:translateY(8px);border-color:var(--violet)}}
.bar-visual{position:absolute;left:30px;right:30px;bottom:28px;height:73px;display:flex;align-items:end;gap:8px}.bar-visual i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--cyan),rgba(24,156,255,.22));animation:barBreathe 2s infinite alternate}.bar-visual i:nth-child(2n){animation-delay:.5s;background:linear-gradient(180deg,var(--violet),rgba(151,92,255,.2))}@keyframes barBreathe{to{height:calc(var(--h) * .72)}}
.terminal-visual{padding:17px;border:1px solid rgba(56,186,151,.12);border-radius:12px;background:#070b13;font-family:Consolas,monospace;box-shadow:inset 0 0 40px rgba(35,165,120,.025)}.terminal-head{margin:-17px -17px 14px;padding:10px 12px;display:flex;align-items:center;gap:5px;border-bottom:1px solid rgba(255,255,255,.05);background:#0c111d}.terminal-head i{width:6px;height:6px;border-radius:50%;background:#384054}.terminal-head i:first-child{background:#ff6886}.terminal-head i:nth-child(2){background:#ffd064}.terminal-head i:nth-child(3){background:#4edfa8}.terminal-head span{margin-left:6px;color:#586379;font-size:7px}.terminal-visual p{margin:7px 0;color:#657287;font-size:8px;line-height:1}.terminal-visual b{color:var(--cyan)}.terminal-visual span{color:#a478ff}.terminal-visual em{color:var(--green);font-style:normal}.terminal-caret{display:inline-block;width:6px;height:10px;background:var(--green);animation:caretBlink 1s step-end infinite}@keyframes caretBlink{50%{opacity:0}}

.workflow { overflow:hidden; }.workflow .section-head{grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}.workflow .section-head h2{max-width:none;font-size:clamp(36px,3.5vw,54px)}.workflow-tabs{justify-self:end;padding:4px;display:flex;border:1px solid rgba(93,151,207,.14);border-radius:10px;background:rgba(10,14,27,.7)}.workflow-tabs button{min-height:35px;padding:0 14px;border:0;border-radius:7px;color:#6d7890;background:transparent;font-size:9px}.workflow-tabs button.active{color:#e7fbff;background:rgba(20,205,255,.11);box-shadow:inset 0 0 0 1px rgba(20,205,255,.15)}
.workflow-board{position:relative;max-width:1440px;margin:auto;padding:65px 42px 45px;display:grid;grid-template-columns:repeat(5,1fr);gap:34px;border:1px solid rgba(91,148,201,.13);border-radius:23px;background:linear-gradient(145deg,rgba(15,21,39,.73),rgba(8,11,21,.75));overflow:hidden}.workflow-board::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(60,138,198,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(60,138,198,.03) 1px,transparent 1px);background-size:35px 35px}.flow-line{position:absolute;z-index:1;left:9%;right:9%;top:122px;height:1px;background:rgba(40,204,255,.16);overflow:hidden}.flow-line i{position:absolute;top:-1px;left:-15%;width:15%;height:3px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 8px var(--cyan);animation:flowAcross 4s linear infinite}@keyframes flowAcross{to{left:115%}}
.flow-node{position:relative;z-index:2;text-align:center}.flow-step{display:block;margin-bottom:15px;color:#52617b;font-family:Consolas,monospace;font-size:8px}.flow-icon{position:relative;width:70px;height:70px;margin:auto;display:grid;place-items:center;border:1px solid rgba(40,204,255,.17);border-radius:18px;color:#7788a3;background:#0c1221;box-shadow:0 0 0 7px rgba(8,11,21,.85);transition:.35s}.flow-node.active .flow-icon,.flow-node:hover .flow-icon{color:var(--cyan);border-color:rgba(40,204,255,.45);box-shadow:0 0 0 7px rgba(8,11,21,.85),0 0 28px rgba(22,224,255,.12)}.flow-icon svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.flow-node strong{display:block;margin-top:23px;font-size:13px}.flow-node small{display:block;min-height:28px;margin-top:7px;color:#657087;font-family:Consolas,monospace;font-size:7px;line-height:1.6}.flow-time{display:inline-block;margin-top:13px;padding:5px 7px;border:1px solid rgba(255,255,255,.07);border-radius:5px;color:#4e5a72;font-family:Consolas,monospace;font-size:7px}

.comparison{padding-top:45px}.comparison-shell{max-width:1440px;margin:auto;padding:50px 55px;display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center;border:1px solid rgba(91,148,201,.13);border-radius:24px;background:linear-gradient(120deg,rgba(18,24,45,.78),rgba(8,11,21,.82))}.comparison-copy h2{margin:15px 0;font-size:clamp(30px,3vw,48px);line-height:1.08;letter-spacing:-.05em}.comparison-copy p{margin:0;color:#8790a6;font-size:12px;line-height:1.85}.compare-legend{margin-top:25px;display:flex;gap:20px;color:#707b92;font-size:9px}.compare-legend span{display:flex;align-items:center;gap:7px}.compare-legend i{width:7px;height:7px;border-radius:50%}.compare-legend i.cyan{background:var(--cyan);box-shadow:0 0 7px var(--cyan)}.compare-legend i.violet{background:var(--violet);box-shadow:0 0 7px var(--violet)}
.comparison-chart{display:grid;gap:18px}.compare-row{display:grid;grid-template-columns:80px 1fr 30px;gap:13px;align-items:center}.compare-row>span{color:#8c96ac;font-size:9px}.compare-row>div{height:7px;border-radius:99px;background:#1a2031;overflow:hidden}.compare-row i{display:block;width:0;height:100%;border-radius:99px;transition:width 1.2s var(--ease)}.compare-row i.dml{background:linear-gradient(90deg,#1698ff,var(--cyan));box-shadow:0 0 10px rgba(22,224,255,.4)}.compare-row i.jetson{background:linear-gradient(90deg,#643fff,var(--violet));box-shadow:0 0 10px rgba(151,92,255,.4)}.compare-row b{color:#667189;font-family:Consolas,monospace;font-size:8px;font-weight:500}

.contact { min-height:590px;display:grid;place-items:center;overflow:hidden;text-align:center;background:linear-gradient(180deg,transparent,rgba(13,17,34,.7))}.contact::before{content:"";position:absolute;left:10%;right:10%;bottom:0;height:75%;background:radial-gradient(ellipse at center bottom,rgba(25,215,255,.1),transparent 58%);pointer-events:none}.contact-inner{position:relative;z-index:2;max-width:870px}.contact h2{margin:18px 0;font-size:clamp(42px,5.7vw,82px);line-height:1.03;letter-spacing:-.07em}.contact p{max-width:680px;margin:0 auto;color:#9099af;font-size:14px;line-height:1.85}.contact-actions{margin-top:32px;display:flex;justify-content:center;gap:13px;flex-wrap:wrap}.contact-system-status{width:min(470px,100%);margin:48px auto 0;padding-top:17px;display:flex;align-items:center;justify-content:center;gap:9px;border-top:1px solid rgba(91,148,201,.12);color:#68748b;font-family:Consolas,monospace;font-size:7px;letter-spacing:.08em}.contact-system-status i{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}.contact-system-status b{margin-left:auto;color:#56627a;font-weight:500}.contact-orb{position:absolute;border-radius:50%;filter:blur(8px);opacity:.24}.orb-left{left:-180px;bottom:-250px;width:500px;height:500px;border:1px solid var(--cyan);box-shadow:inset 0 0 100px rgba(22,224,255,.18)}.orb-right{right:-120px;top:90px;width:330px;height:330px;border:1px solid var(--violet);box-shadow:inset 0 0 100px rgba(151,92,255,.18)}

.site-footer{position:relative;z-index:2;min-height:100px;padding:0 clamp(24px,6vw,112px);display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(91,148,201,.11);color:#4e586f;background:#070912;font-size:8px}.footer-brand{display:flex;align-items:baseline;gap:9px}.footer-brand strong{color:#dbe0ed;font-size:12px;letter-spacing:.12em}.footer-brand span{font-family:Consolas,monospace;letter-spacing:.12em}.site-footer p{font-family:Consolas,monospace;letter-spacing:.15em}.footer-links{display:flex;align-items:center;gap:20px}.footer-links a{color:#8290a8;transition:color .25s}.footer-links a:hover{color:var(--cyan)}

.flow-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}.flow-modal.open{opacity:1;visibility:visible}.modal-backdrop{position:absolute;inset:0;background:rgba(3,5,12,.8);backdrop-filter:blur(15px)}.modal-card{position:relative;width:min(1000px,calc(100% - 40px));padding:45px;border:1px solid rgba(72,208,255,.22);border-radius:23px;background:linear-gradient(145deg,#11182c,#090c18);box-shadow:0 40px 130px rgba(0,0,0,.62);transform:translateY(25px) scale(.97);transition:transform .4s var(--ease)}.flow-modal.open .modal-card{transform:translateY(0) scale(1)}.modal-card h3{margin:12px 0 35px;font-size:36px;letter-spacing:-.045em}.modal-close{position:absolute;right:16px;top:14px;width:36px;height:36px;border:1px solid rgba(255,255,255,.1);border-radius:50%;color:#8c97ad;background:rgba(255,255,255,.03);font-size:20px}.modal-flow{display:flex;align-items:center}.modal-flow>div{width:130px;padding:15px 10px;border:1px solid rgba(55,206,255,.17);border-radius:10px;text-align:center;background:rgba(16,29,47,.65)}.modal-flow>div i,.modal-flow>div strong,.modal-flow>div small{display:block}.modal-flow>div i{color:var(--cyan);font-family:Consolas,monospace;font-size:8px;font-style:normal}.modal-flow>div strong{margin:8px 0;color:#c8d2e5;font-size:9px}.modal-flow>div small{color:#66728a;font-family:Consolas,monospace;font-size:7px}.modal-flow>span{position:relative;flex:1;height:1px;background:rgba(55,206,255,.16);overflow:hidden}.modal-flow>span::after{content:"";position:absolute;left:-50%;width:50%;height:100%;background:var(--cyan);animation:flowPulse 1.7s infinite}.modal-wave{margin-top:25px;height:170px;border:1px solid rgba(91,148,201,.1);border-radius:12px;background:#080b14;overflow:hidden}.modal-wave canvas{width:100%;height:100%}

@media (max-width: 1180px) {
  .performance-orbit{--orbit-radius:230px;width:460px}
  :root{--header-h:70px}.main-nav{gap:22px}.header-cta{display:none}.hero{grid-template-columns:1fr .9fr}.hero-visual{min-height:580px}.floating-chip{min-width:185px}.logo-core{width:min(35vw,420px)}.product-stage{grid-template-columns:1fr}.product-copy{max-width:850px}.product-screen-wrap{max-width:900px;margin:auto;width:100%}.demo-grid{grid-template-columns:270px 1fr}.feature-grid{grid-template-columns:repeat(2,1fr)}.feature-large{grid-row:span 1;min-height:360px}.feature-wide{grid-column:span 2}.workflow-board{gap:15px;padding-left:20px;padding-right:20px}.comparison-shell{gap:45px}
}

@media (max-width: 900px) {
  .performance-orbit{--orbit-radius:205px;width:410px}
  .viewport-hud,.telemetry-stream{display:none}.cyber-depth-grid{opacity:.1}
  body,button,a,input[type="range"]{cursor:auto}.cursor-dot,.cursor-ring{display:none}.section{padding:95px 24px}.section-head{grid-template-columns:1fr;gap:20px;margin-bottom:40px}.section-head>p{max-width:650px}.menu-toggle{display:block;position:relative;z-index:3}.main-nav{position:fixed;top:0;right:0;width:min(330px,85vw);height:100vh;padding:105px 35px;display:flex;align-items:flex-start;flex-direction:column;gap:0;background:rgba(7,10,20,.96);border-left:1px solid rgba(74,176,225,.16);backdrop-filter:blur(20px);transform:translateX(102%);transition:transform .4s var(--ease)}.main-nav.open{transform:translateX(0)}.main-nav a{width:100%;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px}.main-nav a::after{display:none}.menu-toggle.open i:first-child{transform:translateY(7px) rotate(45deg)}.menu-toggle.open i:nth-child(2){opacity:0}.menu-toggle.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.hero{min-height:auto;padding-top:130px;padding-bottom:110px;grid-template-columns:1fr}.hero-content{max-width:760px}.hero-visual{min-height:630px}.logo-core{width:min(66vw,470px)}.radar-plane{width:520px;height:520px}.hero-metrics{max-width:none}.chip-dml{left:6%}.chip-trt{right:4%}.chip-latency{left:13%}.products{padding-top:110px}.product-stage{padding:32px}.demo-console{grid-template-columns:74px}.demo-sidebar{padding:16px 8px}.demo-logo{justify-content:center;padding:0 0 18px}.demo-logo div,.demo-nav span,.demo-sidebar-status small,.demo-sidebar-status span span{display:none}.demo-nav{justify-content:center;padding:0}.demo-sidebar-status{padding:11px;display:flex;justify-content:center}.demo-sidebar-status span{font-size:0}.demo-grid{grid-template-columns:240px 1fr;padding:10px}.vision-metrics{grid-template-columns:repeat(3,82px) 1fr}.feature-grid{grid-template-columns:1fr 1fr}.workflow-board{grid-template-columns:1fr;gap:20px;padding:30px}.flow-line{left:65px;right:auto;top:55px;bottom:55px;width:1px;height:auto}.flow-line i{top:-15%;left:-1px;width:3px;height:15%;animation:flowDown 4s linear infinite}.flow-node{display:grid;grid-template-columns:40px 70px 1fr 55px;align-items:center;text-align:left;gap:15px}.flow-step{margin:0;text-align:right}.flow-icon{margin:0}.flow-node strong{margin:0}.flow-node small{margin:5px 0 0;min-height:0}.flow-node>small{grid-column:3}.flow-time{grid-column:4;grid-row:1;margin:0;text-align:center}@keyframes flowDown{to{top:115%}}.comparison-shell{grid-template-columns:1fr;gap:38px;padding:38px}.modal-flow{display:grid;grid-template-columns:1fr}.modal-flow>div{width:100%}.modal-flow>span{width:1px;height:18px;margin:auto}.modal-card{padding:35px 25px;max-height:90vh;overflow:auto}
}

@media (max-width: 680px) {
  .performance-orbit{display:none}
  .site-header{padding:0 18px}.brand-copy small{display:none}.section{padding:82px 18px}.hero{padding-top:115px;padding-bottom:80px}.hero-title{font-size:48px}.hero-lead br{display:none}.hero-actions{align-items:stretch}.hero-actions .btn{flex:1;min-width:190px}.hero-metrics{grid-template-columns:repeat(2,1fr);gap:25px 0}.metric:nth-child(3){padding-left:0;border-left:0}.hero-visual{min-height:500px;margin-top:-15px}.logo-core{width:min(86vw,410px)}.radar-plane{width:410px;height:410px}.floating-chip{min-width:160px;padding:9px}.floating-chip strong{font-size:8px}.floating-chip small{font-size:6px}.chip-dml{left:0;top:18%}.chip-trt{right:0;top:68%}.chip-latency{display:none}.scroll-hint{display:none}.section-head h2{font-size:37px}.product-switch{grid-template-columns:1fr}.product-switch button{min-height:65px}.switch-slider{width:calc(100% - 12px);height:calc(50% - 6px)}.product-switch[data-active="jetson"] .switch-slider{transform:translateY(100%)}.product-stage{padding:25px 18px;gap:30px;border-radius:20px}.product-copy h3{font-size:42px}.product-specs{grid-template-columns:1fr}.product-points li{font-size:11px}.screen-viewport{height:310px}.screen-note{display:none}.demo-console{display:block}.demo-sidebar{display:none}.demo-toolbar{padding:14px;align-items:flex-start;gap:13px}.demo-toolbar-actions{flex-wrap:wrap;justify-content:flex-end}.demo-device{display:none}.demo-grid{display:block;padding:9px}.parameter-panel{margin-bottom:9px}.vision-panel{min-height:520px}.vision-scene{min-height:350px}.log-panel{margin-top:9px;min-height:120px}.vision-metrics{grid-template-columns:repeat(3,1fr)}.vision-metrics .chart-cell{display:none}.feature-grid{grid-template-columns:1fr}.feature-wide{grid-column:auto;display:block}.terminal-visual{margin-top:30px}.feature-card,.feature-large{min-height:390px}.feature-wide{min-height:auto}.workflow .section-head{display:block}.workflow-tabs{margin-top:25px;justify-self:auto;width:max-content}.workflow-board{padding:24px 14px}.flow-node{grid-template-columns:26px 54px 1fr;gap:10px}.flow-icon{width:54px;height:54px;border-radius:14px}.flow-icon svg{width:29px}.flow-time{display:none}.flow-line{left:67px}.comparison{padding-top:25px}.comparison-shell{padding:28px 20px}.compare-row{grid-template-columns:65px 1fr 24px}.contact{min-height:580px}.contact h2{font-size:45px}.contact-system-status b{display:none}.site-footer{padding:25px 18px;flex-direction:column;justify-content:center;gap:14px;text-align:center}.site-footer p{display:none}.modal-card h3{font-size:28px}.modal-wave{height:120px}
}

@media (max-width:680px){.deployment-highlight{grid-template-columns:1fr;gap:9px}.deployment-highlight>i{display:none}.deployment-highlight span{padding:2px 0}}

@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}
}