/* ANOX WEB 0.1 — local assets, native layout, no framework. */
:root {
  color-scheme:dark;
  --bg:#080b12;
  --surface:#101622;
  --raised:#151d2b;
  --text:#f4f7fb;
  --muted:#98a6ba;
  --cyan:#38c6f4;
  --violet:#a18bf9;
  --mint:#35d5a0;
  --border:rgba(158,182,216,.14);
  --font:Inter,"Segoe UI",Arial,sans-serif;
  --mono:"Cascadia Code",Consolas,"Courier New",monospace;
  --radius:14px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}

body,button,a {
  -webkit-tap-highlight-color:transparent
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

button,a {
  touch-action:manipulation
}

button:not(:disabled),a {
  cursor:pointer
}

button:disabled {
  cursor:not-allowed
}

img,svg {
  max-width:100%;
  vertical-align:middle
}

svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}

svg use {
  pointer-events:none
}

button[hidden],[hidden] {
  display:none!important
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  line-height:1.12;
  letter-spacing:-.045em;
  font-weight:650
}

h2 {
  font-size:clamp(2.25rem,4.5vw,3.5rem)
}

h3 {
  letter-spacing:-.025em
}

p {
  color:var(--muted)
}

:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:5px;
  border-radius:3px
}

::selection {
  background:#205366;
  color:#fff
}

.container {
  width:min(1160px,calc(100% - 64px));
  margin-inline:auto
}

.section {
  padding-block:112px
}

.eyebrow {
  font:11px/1.6 var(--mono);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--cyan);
  display:flex;
  align-items:center;
  gap:10px
}

.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--mint);
  border-radius:50%;
  flex-shrink:0
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--cyan);
  color:var(--bg);
  padding:12px 18px;
  z-index:100
}

.skip-link:focus {
  top:12px
}

.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(8,11,18,.97);
  border-bottom:1px solid transparent;
  transition:border-color .25s,background .25s
}

.site-header.scrolled {
  border-bottom-color:var(--border);
  background:#0b1019
}

.header-inner {
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand {
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  min-height:44px
}

.brand img {
  width:130px;
  height:32px
}

#primary-nav {
  display:flex;
  align-items:center;
  gap:31px;
  font-size:13px;
  font-weight:500
}

#primary-nav a {
  color:#b5bfce;
  min-height:44px;
  display:flex;
  align-items:center;
  transition:color .2s
}

#primary-nav a:hover {
  color:#fff
}

#primary-nav .nav-download {
  padding:0 17px;
  gap:20px;
  border:1px solid #354251;
  background:rgba(255,255,255,.025);
  border-radius:6px;
  color:var(--text)
}

.nav-download span {
  color:var(--cyan)
}

.menu-toggle {
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:6px;
  padding:8px 13px;
  min-height:44px;
  align-items:center;
  gap:14px;
  font-size:13px
}

.menu-lines {
  width:16px;
  height:10px;
  border-block:1px solid currentColor
}

.hero {
  position:relative;
  overflow:hidden;
  padding-top:77px
}

.hero-grid {
  position:absolute;
  inset:0 0 auto;
  height:740px;
  z-index:-1;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:80px 80px;
  opacity:.2;
  mask-image:radial-gradient(ellipse at 50% 30%,black,transparent 65%)
}

.hero:before {
  content:"";
  position:absolute;
  left:30%;
  right:30%;
  top:480px;
  height:150px;
  background:linear-gradient(100deg,#38c6f4,#8c73f6);
  opacity:.07;
  filter:blur(60px);
  pointer-events:none;
  z-index:-1
}

.hero-copy {
  text-align:center
}

.hero .eyebrow {
  justify-content:center;
  margin-bottom:24px
}

.hero h1 {
  font-size:clamp(3.1rem,6.6vw,5.6rem);
  line-height:1.05;
  letter-spacing:-.055em
}

.hero h1 span {
  background:linear-gradient(105deg,#e6f9ff 15%,#63d4f7 55%,#a995ed 95%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent
}

.hero-description {
  max-width:590px;
  margin:24px auto 0;
  font-size:17px;
  line-height:1.7
}

.hero-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:31px
}

.button {
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:12px 22px;
  font-size:13px;
  font-weight:600;
  border-radius:6px;
  transition:transform .2s,background .2s,border-color .2s;
  border:1px solid transparent;
  line-height:1.4
}

.button svg {
  width:19px;
  height:19px
}

.button:hover {
  transform:translateY(-2px)
}

.primary {
  color:#061019;
  background:#66d5f7;
  border-color:#85e0fc
}

.primary:hover {
  background:#9ae5fc
}

.secondary {
  background:#121923;
  color:#e4eaf2;
  border-color:#303b4c
}

.secondary:hover {
  border-color:#65788e;
  background:#192331
}

.hero-footnote {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  font:10px/1.5 var(--mono);
  letter-spacing:.025em;
  color:var(--muted);
  margin-top:22px
}

.tiny-cross {
  color:#526073
}

.preview-wrap {
  margin-top:70px
}

.preview-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font:10px/1.6 var(--mono);
  letter-spacing:.025em;
  color:var(--muted);
  padding:0 2px 14px;
  gap:12px
}

.preview-caption>span:first-child {
  display:flex;
  gap:9px;
  align-items:center
}

.preview-caption>span:last-child {
  color:#bbc4d1
}

.dashboard {
  display:grid;
  grid-template-columns:170px 1fr;
  border:1px solid #2b394c;
  border-radius:10px;
  overflow:hidden;
  background:#0c111b;
  box-shadow:0 30px 100px #0005;
  position:relative;
  text-align:left
}

.dashboard:after {
  content:"";
  position:absolute;
  top:0;
  left:10%;
  right:10%;
  height:1px;
  background:linear-gradient(90deg,transparent,#73cce588,transparent)
}

.dashboard-top {
  height:42px;
  grid-column:1/-1;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 17px;
  background:#131a25;
  font:10px var(--font)
}

.dashboard-title {
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  letter-spacing:.1em
}

.dashboard-title>span {
  font-weight:400;
  letter-spacing:0;
  color:#95a2b4;
  border-left:1px solid #354050;
  padding-left:12px;
  margin-left:5px;
  font-size:9px
}

.window-controls {
  font-size:15px;
  color:#7c899b
}

.dashboard-sidebar {
  border-right:1px solid var(--border);
  padding:23px 12px;
  position:relative;
  background:#0e141f
}

.sidebar-label {
  font:9px/1.6 var(--mono);
  letter-spacing:.1em;
  color:#99a7bb;
  margin-bottom:13px
}

.dashboard-sidebar>.sidebar-label {
  padding-left:9px
}

.dashboard-sidebar>div {
  font-size:10px;
  color:#a7b3c4;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  margin-bottom:5px;
  border-radius:4px
}

.dashboard-sidebar svg {
  width:15px;
  height:15px
}

.dashboard-sidebar .sidebar-active {
  background:#172d3d;
  color:#6ad5f8
}

.sidebar-bottom {
  position:absolute;
  bottom:20px;
  left:21px;
  font:8px/1.9 var(--mono);
  color:#bec8d6
}

.sidebar-bottom .status-dot {
  width:4px;
  height:4px;
  margin-right:5px
}

.sidebar-bottom>span:last-child {
  color:#8594a8
}

.dashboard-content {
  padding:25px 28px 22px;
  min-width:0
}

.dashboard-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:24px
}

.dashboard-heading .sidebar-label {
  font-size:8px;
  margin-bottom:7px
}

.dashboard-heading h2 {
  font-size:21px;
  letter-spacing:-.035em;
  font-weight:500
}

.demo-tag {
  border:1px solid #384256;
  border-radius:4px;
  color:#b7c2d4;
  font:8px/1.4 var(--mono);
  letter-spacing:.08em;
  padding:4px 7px;
  white-space:nowrap
}

.metrics {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
  margin-bottom:18px
}

.metrics>div {
  border:1px solid var(--border);
  background:#101824;
  border-radius:5px;
  padding:13px 15px;
  position:relative
}

.metrics p {
  font-size:9px;
  margin-bottom:9px
}

.metrics strong {
  font-size:26px;
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1
}

.metrics small {
  font-size:9px;
  letter-spacing:0;
  color:#a5b3c5;
  margin-left:3px;
  font-weight:400
}

.metric-track {
  display:block;
  height:2px;
  background:linear-gradient(90deg,#38c6f4 45%,#38c6f412 45%);
  margin-top:16px
}

.metric-track.violet {
  background:linear-gradient(90deg,#a18bf9 25%,#a18bf912 25%)
}

.metric-track.mint {
  background:linear-gradient(90deg,#35d5a0 65%,#35d5a012 65%)
}

.traffic-panel,.application-panel {
  border:1px solid var(--border);
  border-radius:5px;
  background:#0f1621
}

.panel-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  padding:13px 15px;
  color:#d3dce9;
  gap:12px
}

.panel-label>span:last-child {
  font-size:8px;
  color:#9aa9bd
}

.panel-label i {
  width:4px;
  height:4px;
  display:inline-block;
  margin:0 3px 1px 8px;
  border-radius:50%
}

.legend-cyan {
  background:var(--cyan)
}

.legend-violet {
  background:var(--violet)
}

.chart {
  padding:16px 16px 8px;
  position:relative
}

.chart-unit {
  font:7px var(--mono);
  color:#8c9cb1;
  position:absolute;
  top:1px;
  left:16px
}

.chart>svg {
  width:100%;
  height:129px;
  overflow:visible
}

.chart-grid {
  stroke:#ffffff09;
  stroke-width:1
}

.download-line {
  stroke:#54c8f4;
  stroke-width:1.7
}

.upload-line {
  stroke:#a18bf9;
  stroke-width:1.5
}

.chart-times {
  display:flex;
  justify-content:space-between;
  font:7px var(--mono);
  color:#8c9cb1;
  padding-top:6px
}

.application-panel {
  margin-top:16px
}

.app-row {
  display:grid;
  grid-template-columns:26px 1fr 23% 80px;
  align-items:center;
  gap:10px;
  margin:0 15px;
  padding:8px 0;
  border-top:1px solid #a5b5ce0c;
  font-size:9px;
  color:#d3dce9
}

.app-row:last-child {
  padding-bottom:13px
}

.app-row>span:last-child {
  text-align:right;
  font-family:var(--mono);
  font-size:8px
}

.app-icon {
  width:24px;
  height:24px;
  border-radius:5px;
  background:#183445;
  color:#67d7fc;
  display:grid;
  place-items:center;
  font-size:11px
}

.terminal-icon {
  background:#28243b;
  color:#b49bff
}

.sync-icon {
  background:#15352e;
  color:#66dab6
}

.system-icon {
  background:#26303c;
  color:#a1b2cb
}

.app-sub {
  display:block;
  color:#8e9eb3;
  font-size:7px;
  margin-top:2px
}

.app-meter {
  height:3px;
  background:#1f2c3c;
  border-radius:3px
}

.meter-1 {
  background:linear-gradient(90deg,#4abbe5 80%,#1f2c3c 80%)
}

.meter-2 {
  background:linear-gradient(90deg,#a18bf9 40%,#1f2c3c 40%)
}

.meter-3 {
  background:linear-gradient(90deg,#35d5a0 24%,#1f2c3c 24%)
}

.meter-4 {
  background:linear-gradient(90deg,#879cb7 10%,#1f2c3c 10%)
}

.preview-note {
  font:10px/1.7 var(--mono);
  color:#94a2b7;
  text-align:center;
  margin-top:16px
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:45px;
  margin-bottom:34px
}

.section-heading .eyebrow,.about-section .eyebrow {
  margin-bottom:20px
}

.section-heading>p {
  max-width:375px;
  font-size:14px;
  line-height:1.85;
  padding-bottom:3px
}

.development-note {
  display:flex;
  align-items:center;
  gap:9px;
  font:10px var(--mono);
  margin-bottom:24px
}

.development-note .status-dot {
  background:var(--cyan);
  width:5px;
  height:5px
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}

.feature-card {
  padding:30px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(140deg,#11192388,#0b101866);
  position:relative;
  transition:transform .25s,border-color .25s
}

.feature-card:hover {
  transform:translateY(-4px);
  border-color:#3c5b70
}

.feature-icon {
  width:25px;
  height:25px;
  color:#7cd8f5;
  margin-bottom:38px
}

.card-index {
  position:absolute;
  top:32px;
  right:28px;
  font:10px var(--mono);
  color:#8a99ae
}

.feature-card h3 {
  font-size:17px;
  letter-spacing:-.025em;
  margin-bottom:12px
}

.feature-card p {
  font-size:13px;
  line-height:1.8;
  max-width:440px
}

.wide-card {
  grid-column:span 2;
  background:linear-gradient(105deg,#121b2888,#0c1019)
}

.card-detail {
  position:absolute;
  right:30px;
  top:39px;
  font:10px var(--mono);
  color:#a7b6ca
}

.card-detail span {
  color:var(--cyan);
  margin-left:10px
}

.wide-card .card-index {
  display:none
}

.network-section {
  border-block:1px solid var(--border);
  background:#0b1019;
  padding-block:96px
}

.network-shell {
  border:1px solid #28364a;
  border-radius:var(--radius);
  overflow:hidden;
  background:#0c121d
}

.network-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:17px 23px;
  border-bottom:1px solid var(--border);
  gap:15px
}

.network-toolbar>span {
  font:11px var(--mono);
  display:flex;
  align-items:center;
  gap:10px;
  color:#c1cddd
}

.network-toolbar .demo-tag {
  margin-left:8px;
  font-size:8px
}

.motion-toggle {
  color:#b5c4d8;
  background:transparent;
  border:1px solid #354157;
  border-radius:5px;
  padding:8px 11px;
  min-height:44px;
  font:10px var(--mono)
}

.motion-toggle:hover {
  background:#172333
}

.network-layout {
  display:grid;
  grid-template-columns:1fr 300px
}

.topology {
  position:relative;
  min-height:360px;
  background-image:radial-gradient(#7186a126 1px,transparent 1px);
  background-size:18px 18px;
  margin:12px
}

.network-lines {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}

.network-lines path {
  stroke:#354b62;
  stroke-width:1.3;
  transition:stroke .2s,opacity .2s
}

.network-lines path.active {
  stroke:var(--cyan);
  stroke-dasharray:6 9;
  animation:traffic 4s linear infinite
}

.topology.is-inspecting .network-lines path:not(.active) {
  opacity:.35
}

.network-node {
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  width:108px;
  min-height:98px;
  padding:12px 5px;
  border-radius:10px;
  background:#111b29;
  border:1px solid #35445a;
  color:#b7c9dc;
  transition:border-color .2s,background .2s,box-shadow .2s;
  text-align:center;
  font-size:11px;
  line-height:1.4
}

.network-node>svg {
  width:23px;
  height:23px
}

.network-node small {
  display:block;
  color:#94a5bc;
  font:8px/1.8 var(--mono);
  margin-top:3px
}

.node-browser {
  left:17.86%;
  top:23.61%
}

.node-terminal {
  left:17.86%;
  top:76.39%
}

.node-workstation {
  left:50%;
  top:50%;
  width:126px;
  min-height:120px
}

.node-gateway {
  left:82.14%;
  top:23.61%
}

.node-remote {
  left:82.14%;
  top:76.39%
}

.network-node:hover,.network-node:focus-visible,.network-node.is-selected {
  border-color:#4db9db;
  background:#142737;
  color:#ddf7ff;
  box-shadow:0 0 30px #38c6f40a
}

.node-details {
  padding:30px 25px;
  border-left:1px solid var(--border);
  background:#101825
}

.node-details .eyebrow {
  font-size:9px;
  margin-bottom:13px
}

.node-details h3 {
  font-size:24px;
  margin-bottom:12px
}

.node-details>p:not(.eyebrow) {
  font-size:12px;
  line-height:1.8
}

.node-details dl {
  margin:24px 0
}

.node-details dl>div {
  display:flex;
  flex-direction:column;
  gap:3px;
  border-top:1px solid var(--border);
  padding:10px 0
}

.node-details dt {
  font-size:10px;
  color:#94a6bd
}

.node-details dd {
  margin:0;
  font:11px/1.8 var(--mono);
  color:#d9e7f8
}

.node-details .node-hint {
  font-size:10px!important;
  color:#9aabc2
}

.product-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:17px
}

.product-card {
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  background:#101722;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:transform .25s,border-color .25s
}

.product-card:hover {
  transform:translateY(-4px);
  border-color:#48647a
}

.product-card:before {
  content:"";
  position:absolute;
  top:0;
  left:20px;
  right:20px;
  height:1px;
  background:linear-gradient(90deg,transparent,#38c6f4aa,transparent)
}

.product-ssh:before {
  background:linear-gradient(90deg,transparent,#a18bf9aa,transparent)
}

.product-eye:before {
  background:linear-gradient(90deg,transparent,#35d5a0aa,transparent)
}

.product-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:40px
}

.product-icon {
  width:39px;
  height:39px;
  color:var(--violet)
}

.product-eye .product-icon {
  color:#69d7b1
}

.product-status {
  font:9px var(--mono);
  border:1px solid #39465b;
  border-radius:20px;
  padding:6px 10px;
  color:#b5c2d4;
  white-space:nowrap
}

.product-category {
  font:9px var(--mono);
  letter-spacing:.12em;
  margin-bottom:14px
}

.product-card h3 {
  font-size:31px;
  margin-bottom:20px;
  letter-spacing:-.045em
}

.product-card h3>span {
  font-weight:400;
  color:var(--violet)
}

.product-eye h3>span {
  color:#69d7b1
}

.product-card>p:not(.product-category) {
  font-size:13px;
  line-height:1.8
}

.product-card>a,.product-card .product-future {
  margin-top:auto;
  padding-top:30px;
  font-size:11px
}

.product-card>a {
  display:flex;
  justify-content:space-between;
  color:#bfeeff
}

.product-card>a span {
  color:var(--cyan)
}

.product-future {
  color:#a7b5c8;
  font-size:10px!important
}

.download-section {
  padding-top:16px;
  padding-bottom:100px
}

.download-card {
  position:relative;
  text-align:center;
  border:1px solid #2d3e53;
  border-radius:18px;
  padding:52px 24px 42px;
  background:linear-gradient(140deg,#121e2c,#101521 60%,#151625);
  overflow:hidden
}

.download-card:before,.download-card:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  left:12%;
  background:linear-gradient(transparent,#5a8aa320,transparent);
  pointer-events:none
}

.download-card:after {
  left:auto;
  right:12%
}

.download-emblem {
  margin-bottom:16px;
  opacity:.9
}

.download-card .eyebrow {
  justify-content:center;
  margin-bottom:22px
}

.download-card h2 {
  font-size:clamp(2.7rem,5.5vw,4.5rem);
  line-height:1.08
}

.download-card h2 span {
  color:#9adff4
}

.download-card>p:not(.eyebrow) {
  margin-top:22px;
  font-size:14px;
  line-height:1.8
}

#release-actions {
  margin-top:28px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap
}

.unavailable {
  background:#1b2838;
  color:#aebdd1;
  border-color:#34465b;
  min-height:50px
}

.unavailable:hover {
  transform:none
}

.download-card .availability {
  font-size:12px!important;
  color:#b0c1d5;
  margin-top:13px!important
}

.download-card .download-small {
  font:10px var(--mono);
  color:#9babc2;
  margin-top:26px!important
}

.release-details {
  font:11px/1.8 var(--mono);
  margin-top:15px;
  overflow-wrap:anywhere
}

.release-details a {
  color:var(--cyan);
  text-decoration:underline
}

.release-checksum {
  display:block;
  max-width:650px;
  margin:12px auto 0;
  font:10px/1.7 var(--mono);
  color:#b9c7d9;
  overflow-wrap:anywhere
}

.about-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  border-top:1px solid var(--border);
  padding-top:85px;
  padding-bottom:100px
}

.about-copy .about-lead {
  font-size:21px;
  line-height:1.65;
  color:#dae3ef;
  letter-spacing:-.02em
}

.about-copy>p+p {
  font-size:14px;
  margin-top:22px;
  line-height:1.9
}

.principles {
  display:flex;
  gap:28px;
  font:10px var(--mono);
  color:#bac8da;
  letter-spacing:.05em;
  margin-top:30px
}

.principles>span {
  border-left:2px solid #43788b;
  padding-left:10px
}

.site-footer {
  background:#0b1018;
  border-top:1px solid var(--border);
  padding-top:56px
}

.footer-main {
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:45px;
  padding-bottom:50px
}

.footer-main p {
  font-size:11px;
  margin-top:9px
}

.footer-main .footer-tagline {
  color:#788ba4;
  font-size:10px
}

.footer-main nav {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-content:start;
  gap:4px 30px;
  font-size:12px;
  color:#b6c2d2
}

.footer-main nav a {
  display:flex;
  align-items:center;
  min-height:44px
}

.site-footer a:hover {
  color:var(--cyan)
}

.contact-state {
  padding-top:8px
}

.contact-state .eyebrow {
  font-size:9px;
  color:#b7c6d9
}

.contact-state p {
  line-height:1.8;
  color:#8ea0b7
}

.footer-bottom {
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-block:23px;
  font-size:10px;
  color:#91a1b9
}

.footer-version {
  font:9px var(--mono);
  letter-spacing:.07em;
  display:flex;
  gap:16px;
  align-items:center
}

.back-link {
  font-size:12px;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:12px
}

.privacy-content {
  max-width:800px;
  padding-block:80px 100px
}

.privacy-content>h1 {
  font-size:clamp(2.5rem,6vw,4rem);
  margin-block:24px
}

.privacy-content>h2 {
  font-size:25px;
  margin-top:40px;
  margin-bottom:15px
}

.privacy-content>p {
  margin-top:16px;
  font-size:15px;
  line-height:1.9
}

.privacy-content>.about-lead {
  font-size:20px;
  color:#d7e5f4
}

.privacy-content>.button {
  margin-top:35px
}

.privacy-content>img {
  margin-bottom:35px
}

.reveal {
  animation:reveal .7s ease-out both
}

.hero h1.reveal {
  animation-delay:.07s
}

.hero-description.reveal {
  animation-delay:.14s
}

.hero-actions.reveal {
  animation-delay:.21s
}

@keyframes reveal {
  from {
    opacity:0;
    transform:translateY(12px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@keyframes traffic {
  to {
    stroke-dashoffset:-60
  }
}

.motion-paused *,.motion-paused *:before,.motion-paused *:after {
  animation-play-state:paused!important
}

@media(min-width:1600px) {
  .container {
    width:min(1240px,calc(100% - 96px))
  }
  .hero {
    padding-top:100px
  }
  .hero h1 {
    font-size:96px
  }
  .preview-wrap {
    margin-top:85px
  }
  .dashboard-content {
    padding:30px
  }
  .chart>svg {
    height:160px
  }
}

@media(max-width:1000px) {
  .container {
    width:calc(100% - 48px)
  }
  .section {
    padding-block:80px
  }
  .hero {
    padding-top:65px
  }
  .hero h1 {
    font-size:clamp(3rem,7.6vw,5rem)
  }
  .dashboard {
    grid-template-columns:135px 1fr
  }
  .dashboard-sidebar {
    padding-inline:8px
  }
  .dashboard-sidebar>div {
    gap:7px;
    font-size:9px;
    padding:8px
  }
  .sidebar-bottom {
    left:13px;
    font-size:7px
  }
  .dashboard-content {
    padding:20px
  }
  .dashboard-heading h2 {
    font-size:18px
  }
  .feature-card {
    padding:25px
  }
  .feature-card h3 {
    font-size:16px
  }
  .network-layout {
    grid-template-columns:1fr 255px
  }
  .network-node {
    width:90px;
    min-height:90px
  }
  .node-workstation {
    width:105px;
    min-height:110px
  }
  .node-details {
    padding:25px 20px
  }
  .product-card {
    padding:23px
  }
  .product-card-top {
    gap:5px
  }
  .product-status {
    font-size:8px;
    padding:5px 7px
  }
  .product-card h3 {
    font-size:28px
  }
  .about-section {
    gap:40px
  }
  .card-detail {
    right:25px;
    font-size:9px
  }
  .section-heading>p {
    max-width:320px
  }
  .network-toolbar {
    padding:12px 18px
  }
}

@media(max-width:760px) {
  html {
    scroll-padding-top:90px
  }
  .header-inner {
    min-height:76px;
    gap:15px;
    flex-wrap:wrap
  }
  .brand img {
    width:115px;
    height:29px
  }
  .menu-toggle:not([hidden]) {
    display:flex
  }
  #primary-nav {
    gap:6px;
    justify-content:space-between;
    width:100%;
    padding-block:0 17px;
    font-size:12px
  }
  #primary-nav a {
    padding-inline:6px
  }
  #primary-nav .nav-download {
    padding-inline:12px;
    gap:10px
  }
  .js-nav #primary-nav {
    display:none
  }
  .js-nav #primary-nav.is-open {
    display:flex
  }
  .hero {
    padding-top:50px
  }
  .hero .eyebrow {
    font-size:10px;
    letter-spacing:.11em
  }
  .hero h1 {
    font-size:clamp(2.6rem,7.4vw,3.6rem);
    line-height:1.1
  }
  .hero-description {
    font-size:15px;
    max-width:490px;
    margin-top:21px
  }
  .preview-wrap {
    margin-top:50px
  }
  .preview-caption {
    font-size:8px
  }
  .caption-extra {
    display:none
  }
  .dashboard {
    grid-template-columns:1fr
  }
  .dashboard-sidebar {
    display:none
  }
  .dashboard-top {
    height:36px
  }
  .dashboard-content {
    padding:18px
  }
  .dashboard-heading {
    margin-bottom:17px
  }
  .metrics {
    gap:9px
  }
  .metrics>div {
    padding:12px 10px
  }
  .metrics strong {
    font-size:23px
  }
  .metrics small {
    font-size:8px
  }
  .metrics p {
    font-size:8px
  }
  .section-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:22px
  }
  .section-heading>p {
    max-width:520px
  }
  .section-heading .eyebrow {
    margin-bottom:15px
  }
  .feature-grid {
    grid-template-columns:1fr 1fr
  }
  .feature-card {
    padding:25px
  }
  .wide-card {
    grid-column:span 2
  }
  .feature-icon {
    margin-bottom:28px
  }
  .network-layout {
    grid-template-columns:1fr
  }
  .topology {
    min-height:340px
  }
  .network-node {
    width:100px
  }
  .node-workstation {
    width:118px
  }
  .node-details {
    border-left:0;
    border-top:1px solid var(--border);
    padding:24px
  }
  .node-details dl {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin:20px 0
  }
  .node-details h3 {
    font-size:22px
  }
  .node-details>p:not(.eyebrow) {
    max-width:540px
  }
  .node-details .eyebrow {
    margin-bottom:8px
  }
  .network-toolbar>span {
    font-size:10px;
    gap:7px
  }
  .network-toolbar .demo-tag {
    margin-left:1px;
    font-size:7px
  }
  .product-grid {
    grid-template-columns:1fr
  }
  .product-card {
    padding:30px
  }
  .product-card-top {
    margin-bottom:25px
  }
  .product-status {
    font-size:10px;
    padding:6px 10px
  }
  .product-card>p {
    max-width:500px
  }
  .product-card>a {
    max-width:100%;
    padding-top:24px
  }
  .product-card h3 {
    font-size:32px;
    margin-bottom:15px
  }
  .product-card .product-future {
    padding-top:24px
  }
  .download-section {
    padding-top:0
  }
  .download-card {
    padding-block:40px
  }
  .about-section {
    grid-template-columns:1fr;
    gap:30px
  }
  .about-copy .about-lead {
    font-size:20px
  }
  .footer-main {
    grid-template-columns:1fr 1fr;
    gap:35px
  }
  .contact-state {
    grid-column:1/-1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:0
  }
  .contact-state p {
    margin:0
  }
  .footer-version {
    font-size:8px;
    gap:10px
  }
  .privacy-content {
    padding-block:50px 80px
  }
}

@media(max-width:440px) {
  .container {
    width:calc(100% - 32px)
  }
  .section {
    padding-block:64px
  }
  .hero {
    padding-top:37px
  }
  .hero h1 {
    font-size:clamp(2.18rem,7.8vw,3rem);
    letter-spacing:-.052em
  }
  .hero .eyebrow {
    font-size:8px;
    gap:7px
  }
  .hero-description {
    font-size:14px;
    line-height:1.8
  }
  .hero-actions {
    gap:9px
  }
  .button {
    padding:12px 15px;
    gap:13px;
    font-size:12px
  }
  .hero-footnote {
    font-size:8px;
    gap:13px
  }
  .preview-wrap {
    margin-top:38px
  }
  .preview-caption {
    font-size:7px;
    gap:5px
  }
  .preview-caption>span:first-child {
    gap:5px
  }
  .preview-caption .status-dot {
    width:4px;
    height:4px
  }
  .dashboard-content {
    padding:14px 10px
  }
  .dashboard-title>span {
    font-size:8px
  }
  .dashboard-heading h2 {
    font-size:16px
  }
  .dashboard-heading .demo-tag {
    font-size:6px
  }
  .metrics {
    gap:6px;
    margin-bottom:12px
  }
  .metrics>div {
    padding:10px 7px
  }
  .metrics p {
    font-size:7px;
    margin-bottom:8px
  }
  .metrics strong {
    font-size:21px
  }
  .metrics small {
    display:block;
    font-size:7px;
    margin-top:5px;
    margin-left:0
  }
  .metric-track {
    margin-top:10px
  }
  .panel-label {
    padding:10px;
    font-size:8px;
    gap:5px
  }
  .panel-label>span:last-child {
    font-size:6px
  }
  .panel-label i {
    margin-left:4px
  }
  .chart {
    padding:16px 10px 8px
  }
  .chart>svg {
    height:90px
  }
  .app-row {
    grid-template-columns:23px 1fr 55px;
    gap:8px;
    margin-inline:10px;
    font-size:8px
  }
  .app-meter {
    display:none
  }
  .app-row>span:last-child {
    font-size:7px
  }
  .app-sub {
    font-size:6px
  }
  .preview-note {
    font-size:8px
  }
  .feature-grid {
    grid-template-columns:1fr
  }
  .wide-card {
    grid-column:auto
  }
  .feature-card {
    padding:26px
  }
  .feature-card h3 {
    font-size:18px
  }
  .card-detail {
    position:static;
    display:block;
    margin-top:20px;
    font-size:9px
  }
  .section-heading h2,.about-section h2 {
    font-size:34px
  }
  .eyebrow {
    font-size:9px
  }
  .network-toolbar {
    padding:10px 12px;
    gap:6px
  }
  .network-toolbar>span {
    font-size:9px;
    flex-wrap:wrap;
    gap:5px;
    max-width:170px
  }
  .network-toolbar .demo-tag {
    font-size:6px
  }
  .motion-toggle {
    font-size:9px;
    white-space:nowrap;
    padding:7px 9px
  }
  .topology {
    min-height:300px;
    margin:6px
  }
  .network-node {
    width:76px;
    min-height:84px;
    font-size:9px;
    gap:6px;
    border-radius:7px
  }
  .network-node small {
    font-size:6px
  }
  .network-node>svg {
    width:20px;
    height:20px
  }
  .node-workstation {
    width:86px;
    min-height:103px
  }
  .node-workstation>img {
    width:29px;
    height:29px
  }
  .node-details {
    padding:22px 18px
  }
  .node-details dl {
    grid-template-columns:1fr;
    gap:0
  }
  .node-details dl>div {
    flex-direction:row;
    justify-content:space-between;
    gap:12px;
    align-items:center
  }
  .node-details dd {
    font-size:10px
  }
  .node-details dt {
    font-size:9px
  }
  .product-card {
    padding:26px
  }
  .download-section {
    padding-top:0
  }
  .download-card {
    padding:32px 17px
  }
  .download-card .eyebrow {
    font-size:8px;
    letter-spacing:.1em
  }
  .download-card h2 {
    font-size:40px
  }
  .download-card>p:not(.eyebrow) {
    font-size:12px
  }
  .download-card .download-small {
    font-size:8px
  }
  .desktop-break {
    display:none
  }
  .about-copy .about-lead {
    font-size:18px
  }
  .principles {
    gap:20px;
    font-size:9px
  }
  .footer-main {
    gap:26px 16px
  }
  .footer-main nav {
    gap:2px 14px;
    font-size:11px
  }
  .contact-state p {
    font-size:10px
  }
  .footer-bottom {
    flex-direction:column;
    gap:14px
  }
  .footer-version {
    font-size:8px
  }
  .privacy-content>h1 {
    font-size:37px
  }
  .privacy-content>p {
    font-size:14px
  }
  .privacy-content>h2 {
    font-size:23px
  }
}

.menu-toggle {
  display:none
}

.metric-track.cyan {
  animation:signal 4s ease-in-out both
}

@keyframes signal {
  from {
    opacity:.6;
    transform:scaleX(.92);
    transform-origin:left
  }
  to {
    opacity:1;
    transform:scaleX(1);
    transform-origin:left
  }
}

@media(max-width:760px) {
  #primary-nav {
    flex-direction:column;
    align-items:stretch;
    gap:2px
  }
  #primary-nav a {
    padding-inline:14px
  }
  #primary-nav .nav-download {
    justify-content:space-between;
    margin-top:5px
  }
  .js-nav #primary-nav.is-open {
    display:flex
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .button:hover,.feature-card:hover,.product-card:hover {
    transform:none
  }
}