.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gradient-brand);
  color: var(--color-on-dark-muted);
}

.has-hero-header .hero {
  margin-top: calc(-1 * var(--header-height) - 1px);
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.hero__glow--a {
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  right: -8vw;
  top: -12vw;
  background: color-mix(in srgb, var(--color-secondary) 34%, transparent);
}

.hero__glow--b {
  width: 38vw;
  height: 38vw;
  max-width: 560px;
  max-height: 560px;
  left: -12vw;
  bottom: -18vw;
  background: color-mix(in srgb, var(--color-primary-light) 55%, transparent);
}

.hero__rings {
  position: absolute;
  width: min(1100px, 120vw);
  right: -22%;
  top: 50%;
  transform: translateY(-42%);
  fill: none;
  stroke: rgba(255, 255, 255, .09);
  stroke-width: 1;
}

.hero__backdrop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, rgba(15, 42, 64, .25));
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 6vw, 72px);
  align-items: center;
  padding-top: calc(var(--header-height) + clamp(40px, 6vw, 88px));
  padding-bottom: clamp(64px, 8vw, 112px);
}

.hero .eyebrow {
  color: var(--color-secondary);
}

.hero__eyebrow {
  margin-bottom: 18px;
  letter-spacing: .01em;
}

.hero__title {
  font-size: var(--fs-display);
  line-height: 1.06;
  letter-spacing: -.032em;
  max-width: 13em;
  color: var(--color-on-dark);
  text-wrap: balance;
}

.hero__title-accent {
  background: linear-gradient(90deg, var(--color-secondary) 0%, #8FE9FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-secondary);
}

.hero__lede {
  margin-top: 22px;
  max-width: 36em;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--color-on-dark-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.hero__specs li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--color-on-dark-muted);
}

.hero__specs .icon {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: var(--color-secondary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.hero__specs strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--color-on-dark);
}

.hero__toast {
  position: absolute;
  z-index: 3;
  right: -2%;
  top: -6%;
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 2cqw 2.6cqw 2cqw 2cqw;
  background: var(--color-bg);
  border-radius: 2cqw;
  box-shadow: 0 2cqw 6cqw rgba(15, 42, 64, .35);
  font-size: calc(1.95cqw * var(--k));
  line-height: 1.35;
  color: var(--color-text-muted);
}

.hero__toast strong {
  display: block;
  color: var(--color-heading);
  font-weight: 600;
}

.hero__toast-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 6cqw;
  height: 6cqw;
  border-radius: 1.6cqw;
  background: var(--color-danger);
  color: #fff;
}

.hero__toast-icon .icon {
  width: 3.2cqw;
  height: 3.2cqw;
}

.hero__visual {
  --k: 1;
  position: relative;
  width: 100%;
  max-width: 660px;
  margin-inline: auto;
  padding: 5% 0 6% 7%;
  container-type: inline-size;
}

.app {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 2.2cqw;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 30px 80px rgba(8, 24, 38, .45);
  overflow: hidden;
  font-size: calc(1.95cqw * var(--k));
  color: var(--color-text);
}

.app__bar {
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  height: 6.6cqw;
  padding: 0 2.4cqw;
  border-bottom: 1px solid var(--color-border);
}

.app__dots {
  display: flex;
  gap: .9cqw;
}

.app__dots i {
  width: 1.4cqw;
  height: 1.4cqw;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.app__path {
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app__path b {
  font-weight: 400;
  margin: 0 .6cqw;
  color: var(--color-border-strong);
}

.app__body {
  display: grid;
  grid-template-columns: 25% 1fr;
}

.app__side {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 2.6cqw 1.6cqw;
}

.app__side-title {
  margin: 0 0 .8cqw .8cqw;
  font-weight: 600;
  color: var(--color-heading);
}

.app__side-title:not(:first-child) {
  margin-top: 2.4cqw;
}

.app__side ul {
  list-style: none;
  padding: 0;
}

.app__side li {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  padding: 1cqw .8cqw;
  border-radius: 1cqw;
  white-space: nowrap;
}

.app__side li.is-active {
  background: var(--color-bg);
  color: var(--color-heading);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--color-border);
}

.dot {
  flex: none;
  width: 1.2cqw;
  height: 1.2cqw;
  border-radius: 50%;
}

.dot--ok {
  background: var(--color-success);
}

.dot--warn {
  background: var(--color-warning);
}

.dot--danger {
  background: var(--color-danger);
}

.app__main {
  padding: 3cqw 3.2cqw 3.2cqw;
  min-width: 0;
}

.app__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2cqw;
}

.app__title {
  font-size: calc(3.2cqw * var(--k));
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--color-heading);
  line-height: 1.2;
}

.app__sub {
  color: var(--color-text-muted);
}

.app__status {
  flex: none;
  padding: .6cqw 1.6cqw;
  border-radius: 1cqw;
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-weight: 600;
}

.app__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8cqw;
  margin-top: 2.6cqw;
}

.kpi {
  border: 1px solid var(--color-border);
  border-radius: 1.4cqw;
  padding: 1.8cqw 2cqw;
  min-width: 0;
}

.kpi--alert {
  border-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-border));
}

.kpi__label {
  display: block;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi__value {
  display: block;
  margin-top: .4cqw;
  font-size: calc(4.2cqw * var(--k));
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--color-heading);
}

.kpi__value small {
  font-size: .5em;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-left: .3cqw;
}

.kpi--alert .kpi__value {
  color: var(--color-danger);
}

.kpi__note {
  display: block;
  margin-top: .3cqw;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.app__chart {
  margin-top: 2.2cqw;
  border: 1px solid var(--color-border);
  border-radius: 1.4cqw;
  padding: 1.8cqw 2cqw 1cqw;
}

.app__chart-head {
  display: flex;
  justify-content: space-between;
  gap: 2cqw;
  color: var(--color-heading);
  font-weight: 600;
}

.app__legend {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  color: var(--color-text-muted);
  font-weight: 400;
  white-space: nowrap;
}

.lg {
  display: inline-block;
  width: 2.6cqw;
  height: 0;
  border-top: .35cqw solid var(--color-primary);
  margin-left: 1.2cqw;
}

.lg--limit {
  border-top: .3cqw dashed var(--color-danger);
}

.app__chart svg {
  width: 100%;
  height: 20cqw;
  margin-top: 1cqw;
  overflow: visible;
}

.chart-grid line {
  stroke: var(--color-border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-area {
  fill: url(#hero-area);
}

.chart-line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chart-limit {
  stroke: var(--color-danger);
  stroke-width: 1.25;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}

.hero-stop-a {
  stop-color: var(--color-primary);
  stop-opacity: .16;
}

.hero-stop-b {
  stop-color: var(--color-primary);
  stop-opacity: 0;
}

.app__events {
  list-style: none;
  padding: 0;
  margin-top: 2.2cqw;
  border-top: 1px solid var(--color-border);
}

.app__events li {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 1.6cqw;
  padding: 1.5cqw 0;
  border-bottom: 1px solid var(--color-border);
}

.app__events li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.app__time {
  color: var(--color-text-muted);
}

.app__event {
  color: var(--color-heading);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app__meta {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.hero__device {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 23%;
  z-index: 2;
  filter: drop-shadow(0 3cqw 4cqw rgba(8, 24, 38, .45));
}

.device-shadow {
  fill: var(--color-border-strong);
}

.device-screen {
  fill: var(--color-dark);
}

.device-led {
  fill: var(--color-secondary);
}

.device-line {
  fill: var(--color-border-strong);
}

.device-reading {
  font-family: var(--font-body);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  fill: var(--color-on-dark);
}

.device-label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  fill: var(--color-text-muted);
}

.hero-stop-body-a {
  stop-color: var(--color-bg);
}

.hero-stop-body-b {
  stop-color: var(--color-border);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__content {
    animation: hero-in .6s var(--ease) both;
  }

  .hero__visual {
    animation: hero-in .7s .1s var(--ease) both;
  }

  .hero__toast {
    animation: hero-pop .5s .8s var(--ease) both;
  }
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  }

  .hero__visual {
    max-width: none;
  }
}

@media (max-width: 639.98px) {
  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .hero__specs {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hero__toast {
    right: 0;
    top: -8%;
  }

  .hero__visual {
    --k: 1.45;
    padding: 4% 0 10% 9%;
  }

  .app__body {
    grid-template-columns: 1fr;
  }

  .app__side,
  .app__dots,
  .app__legend,
  .kpi:nth-child(3) {
    display: none;
  }

  .app__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app__chart svg {
    height: 24cqw;
  }

  .app__events li:nth-child(n+2) {
    display: none;
  }

  .hero__device {
    width: 26%;
  }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .hero__specs {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}