:root{
  --bg:#04101d;
  --bg2:#071626;
  --bg3:#0a1f35;
  --panel:rgba(7, 24, 40, .82);
  --panel-2:rgba(10, 31, 53, .84);
  --line:rgba(111, 198, 255, .16);
  --line-strong:rgba(111, 198, 255, .34);
  --cyan:#6af2ff;
  --blue:#63a6ff;
  --green:#63f2b1;
  --violet:#857cff;
  --gold:#ffca68;
  --red:#ff6d88;
  --text:#e9f4ff;
  --muted:#90a8c8;
  --shell:min(1480px, calc(100% - 28px));
  --radius:18px;
  --shadow:0 24px 64px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 20%, rgba(99,166,255,.10), transparent 18%),
    radial-gradient(circle at 85% 20%, rgba(106,242,255,.08), transparent 20%),
    linear-gradient(180deg, #030914 0%, #04101d 42%, #020812 100%);
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
button{font:inherit}
.shell{width:var(--shell);margin:0 auto}
.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}
#stars{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-4;
}
.vignette{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:radial-gradient(circle at center, transparent 35%, rgba(0,0,0,.18) 100%);
}
.noise{
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.05;
  background-image:radial-gradient(rgba(255,255,255,.9) .5px, transparent .5px);
  background-size:3px 3px;
}
.topbar{
  position:sticky; top:0; z-index:30;
  border-bottom:1px solid rgba(111,198,255,.08);
  backdrop-filter:blur(18px);
  background:linear-gradient(180deg, rgba(2,8,18,.92), rgba(2,8,18,.72));
}
.topbar-inner{
  min-height:72px; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{
  width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center; font-weight:800; font-size:13px;
  background:linear-gradient(180deg, rgba(12,38,63,.94), rgba(7,22,37,.94));
  border:1px solid var(--line-strong);
  box-shadow: inset 0 0 24px rgba(106,242,255,.06);
}
.brand-copy{display:flex; flex-direction:column; gap:4px; line-height:1}
.brand-copy strong{font-size:22px; letter-spacing:-.04em}
.brand-copy small{font-size:9px; color:var(--muted)}
.nav{display:flex; justify-content:center; gap:24px; flex-wrap:wrap}
.nav a{font-size:12px; color:var(--muted); position:relative}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:linear-gradient(90deg, var(--cyan), transparent);
  transition:.24s ease;
}
.nav a:hover{color:var(--text)}
.nav a:hover::after{width:100%}
.topbar-actions{display:flex; align-items:center; gap:10px}
.hud-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px; padding:0 14px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.02); color:var(--text); cursor:pointer; transition:.24s ease;
}
.hud-btn:hover{transform:translateY(-2px); border-color:var(--line-strong)}
.hud-btn.slim{font-size:12px}
.hud-btn.solid{
  background:linear-gradient(90deg, rgba(99,166,255,.22), rgba(106,242,255,.14));
  border-color:rgba(106,242,255,.28);
  box-shadow:0 10px 26px rgba(5,22,38,.26), inset 0 0 18px rgba(106,242,255,.05);
}
.hud-btn.ghost{
  background:transparent;
}
.menu-btn{
  display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.02); cursor:pointer;
}
.menu-btn span{
  display:block; width:18px; height:2px; background:var(--text); margin:4px auto;
}
.hero{padding:24px 0 0}
.dashboard-frame{
  border:1px solid var(--line);
  border-radius:24px;
  padding:14px;
  background:linear-gradient(180deg, rgba(6,19,33,.76), rgba(4,14,25,.72));
  box-shadow:var(--shadow);
}
.frame-top{
  display:grid; grid-template-columns:1.3fr .9fr; gap:14px; margin-bottom:14px;
}
.status-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.frame-chip,.sub-card,.strip-box,.micro-card,.wave-card,.bar-monitor,.product-card,.solution-card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  box-shadow: inset 0 0 22px rgba(111,198,255,.02);
}
.frame-chip{
  min-height:74px; border-radius:14px; padding:14px;
}
.frame-chip span{display:block; font-size:9px; color:var(--muted); margin-bottom:9px}
.frame-chip strong{font-size:24px; letter-spacing:-.03em}
.priority-bars{
  display:grid; gap:10px; padding:12px 14px; border-radius:14px;
  border:1px solid var(--line); background:rgba(255,255,255,.02);
}
.priority-track{display:grid; grid-template-columns:132px 1fr; gap:12px; align-items:center}
.priority-track span{font-size:9px; color:var(--muted)}
.track{
  height:10px; border-radius:999px; background:rgba(255,255,255,.04); overflow:hidden;
  border:1px solid rgba(111,198,255,.08);
}
.track i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow:0 0 18px rgba(106,242,255,.25);
}
.hero-grid{
  display:grid; grid-template-columns:.92fr 1.15fr .82fr; gap:14px;
}
.hud-panel{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(7,23,39,.90), rgba(6,17,30,.82));
  overflow:hidden;
}
.panel-head{
  min-height:48px; padding:12px 14px; border-bottom:1px solid rgba(111,198,255,.10);
  display:flex; justify-content:space-between; align-items:center;
}
.panel-head span{font-size:10px; color:var(--muted)}
.panel-code{font-size:10px; color:var(--cyan)}
.side-panel{padding-bottom:14px}
.brand-summary{padding:16px 16px 0}
.brand-summary small{font-size:10px; color:var(--cyan)}
h1,h2,h3,p{margin-top:0}
h1{
  font-size:clamp(38px, 4.6vw, 74px);
  line-height:.94; letter-spacing:-.055em; margin:16px 0 16px;
}
.brand-summary p{
  color:var(--muted); line-height:1.78; font-size:15px;
}
.cta-row{display:flex; gap:10px; flex-wrap:wrap; padding:22px 16px 0}
.stat-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:16px;
}
.micro-card{border-radius:14px; padding:14px}
.micro-card span{display:block; font-size:9px; color:var(--muted)}
.micro-card strong{display:block; font-size:24px; margin:8px 0 6px}
.micro-card em{font-style:normal; color:var(--muted); font-size:11px}
.tiny-table{
  margin:0 16px; border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.tiny-row{
  display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;
  padding:10px 12px; border-bottom:1px solid rgba(111,198,255,.08); font-size:11px;
}
.tiny-row:last-child{border-bottom:0}
.tiny-row.head{font-size:9px; color:var(--muted); background:rgba(255,255,255,.015)}
.ok,.warn{
  font-size:9px; padding:5px 7px; border-radius:999px; font-weight:700;
}
.ok{background:rgba(99,242,177,.10); color:#8bf3c7}
.warn{background:rgba(255,202,104,.12); color:#ffd67e}
.core-panel{display:grid; grid-template-rows:auto 1fr auto}
.core-scene{
  position:relative; min-height:620px; overflow:hidden;
  background:
    linear-gradient(rgba(111,198,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,198,255,.05) 1px, transparent 1px);
  background-size:36px 36px;
}
.radial{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%; border:1px solid rgba(106,242,255,.13);
}
.radial-1{width:180px; height:180px}
.radial-2{width:300px; height:300px}
.radial-3{width:430px; height:430px}
.radial-4{width:560px; height:560px}
.crosshair-v,.crosshair-h{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(106,242,255,.10);
}
.crosshair-v{width:1px; height:560px}
.crosshair-h{height:1px; width:560px}
.radar-sweep{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:560px; height:560px; border-radius:50%;
  background:conic-gradient(rgba(106,242,255,.18), transparent 16%, transparent 100%);
  animation:spin 10s linear infinite;
  opacity:.78;
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.core-hub{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:160px; height:160px; display:grid; place-items:center;
}
.core-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(99,166,255,.46);
  box-shadow:0 0 0 15px rgba(99,166,255,.08), 0 0 0 34px rgba(99,166,255,.04), inset 0 0 42px rgba(106,242,255,.12);
}
.core-center{
  position:relative; z-index:1;
  width:96px; height:96px; border-radius:50%;
  display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle, rgba(18,57,94,.88), rgba(7,25,40,.92) 68%);
  border:1px solid rgba(106,242,255,.26);
}
.core-center span{display:block; font-size:11px; color:var(--cyan)}
.core-center strong{display:block; font-size:30px; letter-spacing:-.04em}
.map-node{
  position:absolute; width:126px; min-height:92px; border-radius:16px;
  border:1px solid var(--line); background:rgba(5,18,30,.95);
  padding:12px; display:flex; flex-direction:column; gap:4px;
  box-shadow:0 12px 28px rgba(0,0,0,.24);
  transition:.22s ease;
}
.map-node:hover{transform:translateY(-4px); border-color:var(--line-strong)}
.map-node b{font-size:13px}
.map-node small{font-size:10px; color:var(--muted)}
.dot{
  width:9px; height:9px; border-radius:50%;
  display:block; margin-bottom:8px; box-shadow:0 0 14px currentColor;
}
.gold{background:var(--gold); color:var(--gold)}
.blue{background:var(--blue); color:var(--blue)}
.green{background:var(--green); color:var(--green)}
.violet{background:var(--violet); color:var(--violet)}
.cyan{background:var(--cyan); color:var(--cyan)}
.star{left:8%; top:11%}
.auto{right:8%; top:12%}
.garage{left:9%; bottom:12%}
.rivaly{left:50%; top:12%; transform:translateX(-50%); width:138px}
.flow{right:10%; bottom:13%}
.watch{left:50%; bottom:10%; transform:translateX(-50%)}
.sub-panels{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:14px;
}
.sub-card{border-radius:14px; padding:14px}
.sub-card span{display:block; font-size:9px; color:var(--muted); margin-bottom:8px}
.sub-card b{font-size:13px}
.wave-stack{display:grid; gap:12px; padding:14px}
.wave-card,.bar-monitor{border-radius:14px; padding:12px}
.wave-top,.bar-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;
}
.wave-top span,.bar-head span{font-size:9px; color:var(--muted)}
.wave-top b{font-size:16px}
.wave{
  height:108px; border-radius:10px; position:relative; overflow:hidden;
  background:
    linear-gradient(rgba(111,198,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,198,255,.06) 1px, transparent 1px);
  background-size:22px 22px;
}
.wave::before{
  content:""; position:absolute; inset:14px 10px;
  background:
    radial-gradient(circle at 10% 55%, rgba(106,242,255,.0) 0 10px, transparent 10px),
    linear-gradient(180deg, rgba(106,242,255,.12), rgba(99,166,255,.02));
  border-radius:8px;
  mask-repeat:no-repeat;
}
.graph-a::after,.graph-b::after,.graph-c::after{
  content:""; position:absolute; inset:0;
  background-position:center;
  background-size:100% 100%;
  opacity:.95;
}
.graph-a::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 160'%3E%3Cpath d='M0 88 C60 30, 110 120, 170 80 S290 38, 350 82 450 120, 500 60' fill='none' stroke='%236af2ff' stroke-width='4'/%3E%3Cpath d='M0 98 C60 40, 110 130, 170 90 S290 48, 350 92 450 130, 500 70' fill='none' stroke='rgba(255,255,255,.32)' stroke-width='2'/%3E%3C/svg%3E");
}
.graph-b::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 160'%3E%3Cpath d='M0 94 C40 54, 90 40, 130 76 S230 124, 285 86 380 28, 500 72' fill='none' stroke='%2363a6ff' stroke-width='4'/%3E%3Cpath d='M0 106 C40 66, 90 52, 130 88 S230 136, 285 98 380 40, 500 84' fill='none' stroke='rgba(255,255,255,.26)' stroke-width='2'/%3E%3C/svg%3E");
}
.graph-c::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 160'%3E%3Cpath d='M0 82 C80 82, 110 58, 150 58 S240 104, 310 104 390 58, 500 58' fill='none' stroke='%2363f2b1' stroke-width='4'/%3E%3Cpath d='M0 94 C80 94, 110 70, 150 70 S240 116, 310 116 390 70, 500 70' fill='none' stroke='rgba(255,255,255,.24)' stroke-width='2'/%3E%3C/svg%3E");
}
.load-bars{
  height:124px; display:grid; grid-template-columns:repeat(8,1fr); gap:7px; align-items:end;
}
.load-bars i{
  display:block; border-radius:8px 8px 2px 2px;
  background:linear-gradient(180deg, var(--cyan), var(--blue));
  box-shadow:0 0 14px rgba(106,242,255,.18);
}
.dashboard-bottom{margin-top:14px}
.info-strip{
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px;
}
.strip-box{min-height:74px; border-radius:14px; padding:12px}
.strip-box span{display:block; font-size:9px; color:var(--muted); margin-bottom:9px}
.strip-box b{font-size:12px; line-height:1.45}
.section{padding:94px 0}
.section-header{
  display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:end; margin-bottom:24px;
}
.section-kicker{font-size:10px; color:var(--cyan)}
.section-header h2,.console-copy h2,.about-block h2,.contact-block h2{
  font-size:clamp(34px, 4.2vw, 62px); letter-spacing:-.055em; line-height:.98; margin:10px 0 0;
}
.section-header p,.console-copy p,.about-block p{
  margin:0; color:var(--muted); line-height:1.8;
}
.product-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.product-card{
  border-radius:16px; padding:18px; min-height:226px;
}
.product-card.featured{
  background:linear-gradient(180deg, rgba(10,34,54,.92), rgba(7,23,39,.90));
  border-color:rgba(106,242,255,.28);
}
.card-head{
  display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:16px;
}
.card-head span{font-size:10px; color:var(--muted)}
.tag{
  font-size:9px; padding:5px 7px; border-radius:999px;
  background:rgba(99,242,177,.10); color:#97f7ce; border:1px solid rgba(99,242,177,.12);
}
.tag.hot{
  background:rgba(106,242,255,.10); color:var(--cyan); border-color:rgba(106,242,255,.20);
}
.product-card h3{font-size:30px; letter-spacing:-.04em; margin:0 0 12px}
.product-card p{font-size:14px; color:var(--muted); line-height:1.75; margin-bottom:18px}
.product-card a{color:var(--cyan); font-weight:700; font-size:13px}
.rivaly-console{
  border:1px solid var(--line); border-radius:20px; padding:14px;
  display:grid; grid-template-columns:.84fr 1.16fr; gap:14px;
  background:linear-gradient(180deg, rgba(7,24,40,.80), rgba(5,16,28,.84));
  box-shadow:var(--shadow);
}
.console-copy{
  border:1px solid var(--line); border-radius:16px; padding:22px;
  background:rgba(255,255,255,.02);
}
.console-points{display:grid; gap:10px; margin:24px 0}
.console-points div{
  display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:center;
  padding:12px 0; border-top:1px solid rgba(111,198,255,.10);
}
.console-points div:last-child{border-bottom:1px solid rgba(111,198,255,.10)}
.console-points span{font-size:10px; color:var(--cyan)}
.console-points b{font-size:14px}
.console-screen{
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.02);
}
.screen-head{
  min-height:54px; padding:12px 14px; border-bottom:1px solid rgba(111,198,255,.10);
  display:flex; justify-content:space-between; align-items:center;
}
.screen-head span{font-size:10px; color:var(--muted)}
.live-pill{
  display:inline-flex; align-items:center; gap:7px; font-size:10px; color:#a6ffdc;
}
.live-pill i{
  width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 12px rgba(99,242,177,.5);
}
.screen-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:14px;
}
.screen-stats div{
  border:1px solid var(--line); border-radius:14px; padding:14px; background:rgba(255,255,255,.02);
}
.screen-stats span{display:block; font-size:9px; color:var(--muted)}
.screen-stats strong{display:block; margin-top:9px; font-size:28px}
.screen-chart{
  height:196px; margin:0 14px 14px; border:1px solid var(--line); border-radius:14px;
  background:
    linear-gradient(rgba(111,198,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,198,255,.06) 1px, transparent 1px);
  background-size:26px 26px;
  position:relative; overflow:hidden;
}
.screen-chart svg{position:absolute; inset:18px; width:calc(100% - 36px); height:calc(100% - 36px)}
.event-table{
  margin:0 14px 14px; border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.event-row{
  display:grid; grid-template-columns:1fr 1.2fr .5fr; gap:12px; align-items:center;
  padding:12px 14px; border-bottom:1px solid rgba(111,198,255,.08); font-size:12px;
}
.event-row:last-child{border-bottom:0}
.event-row.head{font-size:9px; color:var(--muted); background:rgba(255,255,255,.015)}
.event-row b{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; border-radius:999px; padding:5px 7px;
}
.high{background:rgba(255,109,136,.12); color:#ffb0c0}
.mid{background:rgba(255,202,104,.12); color:#ffd992}
.low{background:rgba(99,242,177,.10); color:#9ef3cc}
.solution-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.solution-card{
  border-radius:16px; padding:18px; min-height:210px;
}
.solution-card span{font-size:10px; color:var(--cyan)}
.solution-card h3{font-size:26px; letter-spacing:-.04em; margin:24px 0 10px}
.solution-card p{font-size:14px; color:var(--muted); line-height:1.75}
.about-block{
  border:1px solid var(--line); border-radius:20px; padding:22px;
  background:linear-gradient(180deg, rgba(7,24,40,.76), rgba(5,16,28,.82));
  display:grid; grid-template-columns:.9fr 1.1fr; gap:18px;
}
.about-metrics{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px;
}
.about-metrics div{
  border:1px solid var(--line); border-radius:14px; padding:14px; background:rgba(255,255,255,.02);
}
.about-metrics span{display:block; font-size:9px; color:var(--muted)}
.about-metrics strong{display:block; margin-top:9px; font-size:24px}
.contact-block{
  border-top:1px solid rgba(111,198,255,.10); padding-top:24px;
  display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end;
}
.footer{
  padding:26px 0 40px; border-top:1px solid rgba(111,198,255,.08);
}
.footer-inner{
  display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:start;
}
.footer-brand .brand-copy strong{font-size:20px}
.footer-links{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.footer-links a{font-size:12px; color:var(--muted)}
.footer-links a:hover{color:var(--text)}
.footer-meta{
  display:flex; flex-direction:column; gap:12px; align-items:flex-end; font-size:12px; color:var(--muted);
}
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .78s ease, transform .78s ease;
}
.reveal.visible{opacity:1; transform:none}

@media (max-width: 1220px){
  .topbar-inner{grid-template-columns:auto auto auto}
  .nav{display:none}
  .nav.open{
    display:flex; position:fixed; left:14px; right:14px; top:82px; z-index:45;
    flex-direction:column; align-items:flex-start; gap:18px; padding:18px;
    border:1px solid var(--line); border-radius:16px;
    background:rgba(3,11,20,.98); box-shadow:var(--shadow);
  }
  .menu-btn{display:inline-block}
  .frame-top,.hero-grid,.rivaly-console,.about-block,.section-header,.contact-block,.footer-inner{grid-template-columns:1fr}
  .status-row,.info-strip,.product-grid,.solution-grid,.about-metrics{grid-template-columns:repeat(2,1fr)}
  .priority-track{grid-template-columns:132px 1fr}
}

@media (max-width: 760px){
  :root{--shell:min(100% - 18px, 1480px)}
  .topbar-actions .hud-btn.solid{display:none}
  .status-row,.info-strip,.product-grid,.solution-grid,.about-metrics,.screen-stats,.sub-panels,.stat-grid{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .priority-track{grid-template-columns:1fr}
  .core-scene{min-height:500px}
  .radial-4,.crosshair-v,.crosshair-h,.radar-sweep{width:420px; height:420px}
  .map-node{width:96px; min-height:78px; padding:10px}
  .map-node b{font-size:11px}
  .map-node small{display:none}
  .rivaly{width:110px}
  .event-row{grid-template-columns:1fr; gap:6px}
  .contact-block{grid-template-columns:1fr}
  .footer-links{grid-template-columns:repeat(2,1fr)}
  .footer-meta{align-items:flex-start}
}