.value {
  background:
    radial-gradient(ellipse at 14% 72%, rgba(67,96,205,.13), transparent 38rem),
    linear-gradient(180deg, rgba(8,13,22,.18), rgba(7,11,18,.42));
}

.value .value-card {
  background:
    linear-gradient(90deg, rgba(73,101,204,.045), transparent 38%),
    linear-gradient(145deg, #151f2d, #0c131d 82%) !important;
}

.method .architecture-label {
  color: #ff6c72;
}

@media (max-width: 860px) {
  .hero .hero-lab {
    min-height: 448px;
    overflow: visible;
  }

  html body .hero .mobile-dashboard {
    position: relative;
    z-index: 8;
    width: calc(100% - clamp(54px, 10vw, 88px));
    margin: 18px 0 8px 4px;
  }

  
  html body .hero .phone-ui {
    display: block !important;
    position: absolute;
    z-index: 34;
    right: 1px;
    bottom: 19px;
    width: clamp(118px, 18vw, 154px);
    min-height: clamp(258px, 36vw, 304px);
    padding: 21px 10px 10px;
    border-radius: 27px;
    transform: rotate(3.2deg) !important;
    transform-origin: 50% 82%;
    will-change: auto !important;
  }

  html body .hero .phone-ui > .device-glass {
    inset: 4px;
    border-radius: 22px;
  }

  .hero .phone-notch {
    top: 6px;
    width: 48%;
    height: 12px;
  }

  .hero .phone-head {
    margin-top: 4px;
    font-size: .43rem;
  }

  .hero .phone-head i {
    width: 5px;
    height: 5px;
  }

  .hero .phone-score {
    margin-top: 13px;
    padding: 9px;
    border-radius: 11px;
  }

  .hero .phone-score small,
  .hero .phone-score span {
    font-size: .36rem;
  }

  .hero .phone-score strong {
    margin: 4px 0;
    font-size: .95rem;
  }

  .hero .phone-chart {
    gap: 3px;
    height: 55px;
    margin: 10px 0;
    padding: 8px;
    border-radius: 10px;
  }

  .hero .phone-chart i {
    box-shadow: none;
  }

  .hero .phone-row {
    gap: 5px;
    padding: 6px 1px;
    font-size: .34rem;
  }

  .hero .phone-row + .phone-row {
    display: none;
  }

  .hero .phone-action {
    margin-top: 9px;
    padding: 8px;
    border-radius: 8px;
    font-size: .38rem;
  }

  .hero .phone-side-button {
    right: -7px;
    top: 76px;
    height: 41px;
  }
}

@media (max-width: 560px) {
  .hero .hero-lab {
    min-height: 438px;
  }

  html body .hero .mobile-dashboard {
    width: calc(100% - 54px);
    margin-left: 3px;
  }

  html body .hero .phone-ui {
    right: -1px;
    bottom: 17px;
    width: 118px;
    min-height: 258px;
  }

  .hero .mobile-kpis,
  .hero .mobile-chart-card,
  .hero .mobile-status-row {
    margin-right: 45px;
  }

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

  .hero .mobile-kpis article:nth-child(3) {
    display: none;
  }
}

@media (max-width: 360px) {
  .hero .hero-lab {
    min-height: 423px;
  }

  html body .hero .mobile-dashboard {
    width: calc(100% - 42px);
    padding: 11px;
  }

  html body .hero .phone-ui {
    right: -3px;
    width: 104px;
    min-height: 244px;
    padding-inline: 8px;
  }

  .hero .mobile-kpis,
  .hero .mobile-chart-card,
  .hero .mobile-status-row {
    margin-right: 39px;
  }

  .hero .mobile-dash-heading strong {
    font-size: 1.08rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .hero .phone-ui {
    transform: rotate(3.2deg) !important;
  }
}