html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


html body .method .system-plane {
  border-color: rgba(225, 234, 253, .18) !important;
  background:
    radial-gradient(ellipse at 8% 0%, rgba(107, 132, 224, .075), transparent 42%),
    radial-gradient(ellipse at 96% 105%, rgba(212, 42, 56, .065), transparent 46%),
    linear-gradient(145deg, #151e2b 0%, #101824 54%, #0b121b 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .095),
    0 8px 0 -5px #060a11,
    0 28px 68px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .065),
    inset 0 0 0 1px rgba(3, 8, 15, .38) !important;
}

html body .method .system-plane::before {
  background:
    radial-gradient(circle 180px at var(--shine-x) var(--shine-y), rgba(255, 255, 255, .09), transparent 65%),
    linear-gradient(118deg, rgba(255, 255, 255, .055), transparent 30% 78%, rgba(105, 131, 218, .025));
}

html body .method .system-plane::after {
  background:
    radial-gradient(circle 170px at var(--shine-x) var(--shine-y), rgba(255, 255, 255, .88), rgba(127, 151, 226, .25) 34%, transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(104, 128, 207, .065) 48%, rgba(205, 55, 67, .10));
}

.method .system-plane small {
  color: rgba(215, 224, 239, .61);
}

.method .system-plane p {
  color: rgba(231, 237, 247, .74);
}

@media (max-width: 860px) {
  .hero .hero-lab {
    min-height: clamp(350px, 62vw, 535px) !important;
    overflow: hidden !important;
  }

  
  html body .hero .mobile-dashboard {
    box-sizing: border-box;
    width: calc(100% - clamp(46px, 11vw, 92px));
    max-width: 680px;
    height: auto;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
    margin: 18px 0 0 8px;
    padding: clamp(10px, 1.8vw, 15px);
    border-radius: clamp(20px, 3vw, 27px);
    overflow: hidden !important;
  }

  
  html body .hero .phone-ui {
    right: 4px;
    bottom: 18px;
    width: clamp(108px, 30vw, 152px);
    height: clamp(234px, 64.8vw, 329px);
    min-height: 0 !important;
    max-height: none;
    padding: clamp(18px, 3vw, 23px) clamp(8px, 1.7vw, 11px) 10px;
    border-radius: clamp(25px, 4vw, 33px);
    overflow: hidden;
    transform: rotate(2.2deg) !important;
  }

  html body .hero .phone-ui > .device-glass {
    border-radius: clamp(20px, 3.4vw, 28px);
  }
}

@media (max-width: 560px) {
  .hero .hero-lab {
    min-height: clamp(335px, 92vw, 365px) !important;
  }

  html body .hero .mobile-dashboard {
    width: calc(100% - 42px);
    margin: 16px 0 0 6px;
    padding: 10px;
    border-radius: 21px;
  }

  .hero .mobile-dash-top {
    grid-template-columns: 38px 1fr auto;
    padding-bottom: 7px;
  }

  .hero .mobile-dash-heading {
    padding: 9px 1px 8px;
  }

  .hero .mobile-dash-heading strong {
    margin-top: 2px;
    font-size: 1rem;
  }

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

  .hero .mobile-kpis {
    gap: 6px;
  }

  .hero .mobile-kpis article {
    padding: 7px;
    border-radius: 10px;
  }

  .hero .mobile-kpis strong {
    margin-block: 3px 1px;
    font-size: .82rem;
  }

  .hero .mobile-chart-card {
    margin-top: 6px;
    padding: 7px;
    border-radius: 10px;
  }

  .hero .mobile-chart-card svg {
    height: 54px;
    margin-top: 4px;
  }

  .hero .mobile-status-row {
    margin-top: 6px;
    padding: 6px 8px;
  }

  html body .hero .phone-ui {
    right: 2px;
    bottom: 17px;
  }

  .hero .phone-score {
    margin-top: 10px;
  }

  .hero .phone-chart {
    height: 48px;
    margin-block: 8px;
  }

  .hero .phone-action {
    margin-top: 7px;
  }

  
  html body .method .system-plane,
  html body .method .system-plane-ui,
  html body .method .system-plane-logic,
  html body .method .system-plane-data,
  html body .method .system-plane-api {
    min-height: 164px;
    padding: 20px;
    border-radius: 17px;
  }

  html body .method .system-plane::before,
  html body .method .system-plane::after {
    border-radius: 16px;
  }
}

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

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

  .hero .mobile-dash-top {
    padding-bottom: 5px;
  }

  .hero .mobile-dash-heading {
    padding-block: 6px;
  }

  .hero .mobile-dash-heading strong {
    font-size: .88rem;
    white-space: nowrap;
  }

  .hero .mobile-kpis article {
    padding: 5px 6px;
  }

  .hero .mobile-chart-card {
    margin-top: 5px;
    padding: 5px 6px;
  }

  .hero .mobile-chart-card svg {
    height: 40px;
    margin-top: 2px;
  }

  html body .hero .phone-ui {
    right: 0;
  }

  .hero .phone-score {
    margin-top: 8px;
    padding: 7px;
  }

  .hero .phone-score strong {
    margin-block: 3px;
    font-size: .82rem;
  }

  .hero .phone-chart {
    height: 42px;
    margin-block: 6px;
    padding: 7px;
  }

  .hero .phone-row {
    padding-block: 4px;
  }

  .hero .phone-action {
    margin-top: 5px;
    padding: 6px 7px;
  }

  .hero .mobile-status-row {
    display: none;
  }
}

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


@keyframes device-content-rise {
  from { opacity: .001; transform: translate3d(0, 13px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes device-bar-rise {
  from { opacity: .2; transform: scaleY(.08); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes device-glass-pass {
  0% { opacity: 0; transform: translate3d(-180%, 0, 0) skewX(-17deg); }
  18% { opacity: .58; }
  72% { opacity: .34; }
  100% { opacity: 0; transform: translate3d(410%, 0, 0) skewX(-17deg); }
}

.hero .device-glass {
  overflow: hidden;
}

.hero .device-glass::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -12%;
  bottom: -12%;
  left: 0;
  width: 31%;
  border-radius: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .20), rgba(255, 255, 255, .055), transparent);
  opacity: 0;
  transform: translate3d(-180%, 0, 0) skewX(-17deg);
  pointer-events: none;
}

.hero.is-motion-active .dashboard .dash-heading,
.hero.is-motion-active .dashboard .kpi-grid,
.hero.is-motion-active .dashboard .dash-panels,
.hero.is-motion-active .mobile-dashboard .mobile-dash-heading,
.hero.is-motion-active .mobile-dashboard .mobile-kpis,
.hero.is-motion-active .mobile-dashboard .mobile-chart-card,
.hero.is-motion-active .mobile-dashboard .mobile-status-row,
.hero.is-motion-active .phone-ui .phone-head,
.hero.is-motion-active .phone-ui .phone-score,
.hero.is-motion-active .phone-ui .phone-chart,
.hero.is-motion-active .phone-ui .phone-row,
.hero.is-motion-active .phone-ui .phone-action {
  animation: device-content-rise .58s cubic-bezier(.16, 1, .3, 1) both;
}

.hero.is-motion-active .dashboard .kpi-grid,
.hero.is-motion-active .mobile-dashboard .mobile-kpis { animation-delay: .13s; }
.hero.is-motion-active .dashboard .dash-panels,
.hero.is-motion-active .mobile-dashboard .mobile-chart-card { animation-delay: .31s; }
.hero.is-motion-active .mobile-dashboard .mobile-status-row { animation-delay: .39s; }

.hero.is-motion-active .phone-ui .phone-head { animation-delay: .10s; }
.hero.is-motion-active .phone-ui .phone-score { animation-delay: .18s; }
.hero.is-motion-active .phone-ui .phone-chart { animation-delay: .27s; }
.hero.is-motion-active .phone-ui .phone-row { animation-delay: .35s; }
.hero.is-motion-active .phone-ui .phone-action { animation-delay: .43s; }

.hero.is-motion-active .phone-chart i {
  transform-origin: 50% 100%;
  animation: device-bar-rise .52s cubic-bezier(.16, 1, .3, 1) both;
}

.hero.is-motion-active .phone-chart i:nth-child(1) { animation-delay: .33s; }
.hero.is-motion-active .phone-chart i:nth-child(2) { animation-delay: .37s; }
.hero.is-motion-active .phone-chart i:nth-child(3) { animation-delay: .41s; }
.hero.is-motion-active .phone-chart i:nth-child(4) { animation-delay: .45s; }
.hero.is-motion-active .phone-chart i:nth-child(5) { animation-delay: .49s; }
.hero.is-motion-active .phone-chart i:nth-child(6) { animation-delay: .53s; }
.hero.is-motion-active .phone-chart i:nth-child(7) { animation-delay: .57s; }

.hero.is-motion-active .dashboard > .device-glass::before,
.hero.is-motion-active .mobile-dashboard > .device-glass::before,
.hero.is-motion-active .phone-ui > .device-glass::before {
  animation: device-glass-pass 1.12s .24s cubic-bezier(.22, .61, .36, 1) both;
}

.hero.is-motion-active .phone-ui > .device-glass::before {
  animation-delay: .38s;
}

@media (prefers-reduced-motion: reduce) {
  .hero.is-motion-active .dashboard *,
  .hero.is-motion-active .mobile-dashboard *,
  .hero.is-motion-active .phone-ui * {
    animation: none !important;
  }
}