/* Final visual polish for the Vue reliability experience. Loaded after base/home CSS. */

.home-reliability-experience {
  padding-top: 78px !important;
  padding-bottom: 88px !important;
  background:
    radial-gradient(circle at 18% 24%, rgba(37, 99, 235, 0.09), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(14, 165, 233, 0.08), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%) !important;
}

.home-reliability-experience .experience-shell {
  max-width: 1120px !important;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 0.95fr) minmax(280px, 0.95fr) !important;
  gap: 34px !important;
}

.home-reliability-experience .experience-copy,
.home-reliability-experience .risk-panel,
.home-reliability-experience .stack-case-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(37, 99, 235, 0.14) !important;
  box-shadow: 0 24px 64px rgba(37, 99, 235, 0.11) !important;
}

.home-reliability-experience .risk-orbit {
  width: min(360px, 31vw) !important;
  background:
    radial-gradient(circle at center, rgba(37, 99, 235, 0.12), rgba(255, 255, 255, 0.82) 46%, rgba(37, 99, 235, 0.05) 68%, transparent 72%) !important;
  filter: none !important;
}

.home-reliability-experience .orbit-ring {
  border-color: rgba(37, 99, 235, 0.18) !important;
  animation-duration: 6s !important;
}

.home-reliability-experience .risk-core {
  inset: 32% !important;
  background: radial-gradient(circle, #ffffff 0%, #eef6ff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 12px 34px rgba(37, 99, 235, 0.11) !important;
}

.home-reliability-experience .risk-core strong {
  color: #0f172a !important;
  font-size: 1rem !important;
}

.home-reliability-experience .risk-core span {
  color: #2563eb !important;
  opacity: 0.88 !important;
}

.home-reliability-experience .risk-node {
  width: 118px !important;
  min-height: 52px !important;
  transform: rotate(var(--angle)) translate(132px) rotate(calc(-1 * var(--angle))) translate(-50%, -50%) !important;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.13) !important;
}

.home-reliability-experience .risk-node span {
  font-size: 0.78rem !important;
}

.home-reliability-experience .risk-panel-grid div,
.home-reliability-experience .stack-signals,
.home-reliability-experience .stack-signal-map {
  background: #f8fbff !important;
}

.home-reliability-experience .stack-explorer {
  max-width: 1120px !important;
  margin-top: 78px !important;
}

.home-reliability-experience .stack-explorer-head {
  margin-bottom: 26px !important;
}

.home-reliability-experience .stack-tabs button {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(37, 99, 235, 0.18) !important;
  color: #1e3a8a !important;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08) !important;
}

.home-reliability-experience .stack-tabs button.active,
.home-reliability-experience .stack-tabs button:hover,
.home-reliability-experience .risk-node.active,
.home-reliability-experience .risk-node:hover {
  background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

@media (max-width: 1080px) {
  .home-reliability-experience .experience-shell {
    grid-template-columns: 1fr !important;
  }

  .home-reliability-experience .risk-orbit {
    width: min(420px, 82vw) !important;
  }
}

@media (max-width: 720px) {
  .home-reliability-experience {
    padding: 52px 18px 64px !important;
  }

  .home-reliability-experience .risk-orbit {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    background: transparent !important;
  }

  .home-reliability-experience .risk-node {
    position: static !important;
    width: 100% !important;
    min-height: 54px !important;
    transform: none !important;
  }

  .home-reliability-experience .orbit-ring,
  .home-reliability-experience .risk-core {
    display: none !important;
  }

  .home-reliability-experience .stack-explorer {
    margin-top: 42px !important;
  }
}