.hero-grid {
  position: relative;
  min-height: 430px;
  padding-bottom: 76px;
}

@media (min-width: 1025px) and (max-width: 1366px) {
  .hero-grid {
    padding-bottom: 50px;
  }
}
@media (min-width: 1025px) and (max-width: 1366px) and (max-height: 820px) {
  .hero-grid {
    min-height: 360px;
    padding-bottom: 38px;
  }

  .hero-cardio {
    left: clamp(360px, 36vw, 470px);
    bottom: -12px;
    opacity: 0.88;
  }

  .cardio-monitor__screen {
    height: 500px;
  }

  .hero-cardio .cardio-monitor__screen {
    mask-image: radial-gradient(ellipse 92% 84% at 56% 50%, rgba(0, 0, 0, 0.98) 40%, rgba(0, 0, 0, 0.82) 58%, rgba(0, 0, 0, 0.38) 76%, rgba(0, 0, 0, 0.1) 90%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 92% 84% at 56% 50%, rgba(0, 0, 0, 0.98) 40%, rgba(0, 0, 0, 0.82) 58%, rgba(0, 0, 0, 0.38) 76%, rgba(0, 0, 0, 0.1) 90%, transparent 100%);
  }
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.hero-cardio {
  position: absolute;
  left: clamp(320px, 34vw, 420px);
  right: 0;
  bottom: -6px;
  width: auto;
  pointer-events: none;
  z-index: 1;
  opacity: 0.95;
}

.cardio-monitor {
  position: relative;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.cardio-monitor__header {
  display: none;
}

.cardio-monitor__screen {
  position: relative;
  overflow: hidden;
  height: 600px;
  background: none;
}

.hero-cardio .cardio-monitor__screen {
  mask-image: radial-gradient(ellipse 94% 88% at 54% 52%, rgba(0, 0, 0, 0.98) 42%, rgba(0, 0, 0, 0.84) 58%, rgba(0, 0, 0, 0.42) 76%, rgba(0, 0, 0, 0.12) 90%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 94% 88% at 54% 52%, rgba(0, 0, 0, 0.98) 42%, rgba(0, 0, 0, 0.84) 58%, rgba(0, 0, 0, 0.42) 76%, rgba(0, 0, 0, 0.12) 90%, transparent 100%);
}

.cardio-monitor__grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(16, 35, 63, 0.04)),
    linear-gradient(90deg, rgba(29, 79, 143, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(29, 79, 143, 0.06) 1px, transparent 1px);
  background-size: 100% 100%, 36px 100%, 100% 36px;
  mask-image: radial-gradient(ellipse 86% 80% at center, rgba(0, 0, 0, 0.96) 52%, rgba(0, 0, 0, 0.72) 68%, rgba(0, 0, 0, 0.22) 84%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 86% 80% at center, rgba(0, 0, 0, 0.96) 52%, rgba(0, 0, 0, 0.72) 68%, rgba(0, 0, 0, 0.22) 84%, transparent 100%);
  filter: blur(1.5px);
  opacity: 0.9;
}

.cardio-monitor__scan {
  position: absolute;
  inset: 0 auto 0 -14%;
  width: 14%;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0), rgba(37, 99, 235, 0.16), rgba(255, 255, 255, 0.08), rgba(37, 99, 235, 0));
  filter: blur(10px);
  animation: cardio-scan 3.2s linear infinite;
  opacity: .4;
  z-index: 1;
}

.cardio-monitor__wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .25;
  z-index: 2;
}

.cardio-monitor__baseline {
  fill: none;
  stroke: rgba(16, 35, 63, 0.12);
  stroke-width: 2;
}

.cardio-monitor__line {
  fill: none;
  stroke: #6e7d924a;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.24));
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  animation: cardio-trace 2.6s ease-in-out infinite;
}

.cardio-monitor__pulse {
  display: none;
}

.cardio-monitor__pulse.is-beating {
  animation: cardio-dot 0.5s ease-out;
}

.cardio-monitor-light {
  opacity: .72;
}

.cardio-monitor-light .cardio-monitor__grid {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 100% 100%, 34px 100%, 100% 34px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .65) 20%, rgba(0, 0, 0, .95) 52%, rgba(0, 0, 0, .42) 78%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .65) 20%, rgba(0, 0, 0, .95) 52%, rgba(0, 0, 0, .42) 78%, rgba(0, 0, 0, 0) 100%);
  opacity: .44;
}

.cardio-monitor-light .cardio-monitor__scan {
  inset: 0 auto 0 -18%;
  width: 18%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  filter: blur(8px);
  opacity: .3;
  will-change: transform;
}

.cardio-monitor-light .cardio-monitor__wave {
  opacity: .48;
}

.cardio-monitor-light .cardio-monitor__baseline {
  stroke: rgba(255, 255, 255, 0.18);
}

.cardio-monitor-light .cardio-monitor__line {
  stroke: rgba(252, 253, 255, 0.9);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
  will-change: stroke-dashoffset;
}

@keyframes cardio-trace {
  0% {
    stroke-dashoffset: 760;
    opacity: 0.24;
  }
  18% {
    opacity: 1;
  }
  62% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -140;
    opacity: 0.2;
  }
}

@keyframes cardio-scan {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(680%);
  }
}

@keyframes cardio-dot {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(124, 245, 221, 0.45);
  }
  70% {
    transform: scale(1.12);
    box-shadow: 0 0 0 18px rgba(124, 245, 221, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(124, 245, 221, 0);
  }
}

@media (max-width: 1024px) {
  .hero-grid {
    min-height: auto;
    padding-bottom: 0;
  }

  .hero-copy {
    max-width: none;
  }

  .hero-cardio {
    position: absolute;
    inset: 0 calc(50% - 50vw) auto calc(50% - 50vw);
    display: block;
    height: 420px;
    margin-top: 0;
    opacity: 1;
    z-index: 2;
    mix-blend-mode: normal;
    pointer-events: none;
  }

  .cardio-monitor__screen {
    height: 420px;
  }

  .hero-cardio .cardio-monitor__screen {
    mask-image: radial-gradient(ellipse 108% 92% at 50% 46%, rgba(0, 0, 0, 0.98) 36%, rgba(0, 0, 0, 0.82) 56%, rgba(0, 0, 0, 0.38) 76%, rgba(0, 0, 0, 0.1) 92%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 108% 92% at 50% 46%, rgba(0, 0, 0, 0.98) 36%, rgba(0, 0, 0, 0.82) 56%, rgba(0, 0, 0, 0.38) 76%, rgba(0, 0, 0, 0.1) 92%, transparent 100%);
  }

  .cardio-monitor__grid {
    opacity: 0.52;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.48) 46%, rgba(0,0,0,.12) 100%);
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.48) 46%, rgba(0,0,0,.12) 100%);
  }

  .cardio-monitor__wave {
    opacity: .24;
  }
}

@media (max-width: 768px) {
  .hero-grid {
    min-height: auto;
    padding-bottom: 0;
  }

  .hero-copy {
    max-width: none;
  }

  .hero-cardio {
    position: absolute;
    inset: 0 calc(50% - 50vw) auto calc(50% - 50vw);
    display: block;
    height: 356px;
    margin-top: 0;
    opacity: 1;
    z-index: 2;
    mix-blend-mode: normal;
    pointer-events: none;
  }

  .cardio-monitor__screen {
    height: 356px;
  }

  .hero-cardio .cardio-monitor__screen {
    mask-image: radial-gradient(ellipse 118% 96% at 50% 42%, rgba(0, 0, 0, 0.98) 32%, rgba(0, 0, 0, 0.8) 54%, rgba(0, 0, 0, 0.34) 76%, rgba(0, 0, 0, 0.08) 92%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 118% 96% at 50% 42%, rgba(0, 0, 0, 0.98) 32%, rgba(0, 0, 0, 0.8) 54%, rgba(0, 0, 0, 0.34) 76%, rgba(0, 0, 0, 0.08) 92%, transparent 100%);
  }

  .cardio-monitor__grid {
    opacity: 0.52;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.48) 46%, rgba(0,0,0,.12) 100%);
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.48) 46%, rgba(0,0,0,.12) 100%);
  }

  .cardio-monitor__wave {
    opacity: .24;
  }
}