/* v2: targets the actual signal-* production components shown in Creato/AIMCODE screenshots. */
.signal-page {
  overflow-x: clip !important;
}
.signal-status {
  position: relative;
  z-index: 3;
  width: min(1440px, calc(100% - 64px)) !important;
  min-height: 112px !important;
  margin: -1px auto 0 !important;
  border: 1px solid rgba(179, 145, 255, .28) !important;
  border-radius: 20px !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 0%, rgba(121, 81, 255, .19), transparent 30%),
    linear-gradient(115deg, rgba(19, 13, 37, .98), rgba(10, 9, 22, .98)) !important;
  box-shadow: 0 22px 74px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.07);
}
.signal-status > div {
  min-width: 0;
  border-color: rgba(191, 159, 255, .16) !important;
  transition: background .25s ease, color .25s ease;
}
.signal-status > div:hover {
  background: rgba(145, 105, 255, .1);
}
.signal-status b { color: #f7f2ff; }
.signal-status i.online {
  box-shadow: 0 0 0 5px rgba(82, 226, 176, .12), 0 0 22px rgba(82, 226, 176, .76) !important;
}
.signal-models {
  padding-top: 112px !important;
}
.signal-model-grid {
  gap: 16px !important;
  margin-top: 58px !important;
}
.signal-model-card {
  min-height: 350px !important;
  border-radius: 18px !important;
  border-color: color-mix(in srgb, var(--model-color) 30%, rgba(255,255,255,.13)) !important;
  background:
    radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--model-color) 18%, transparent), transparent 35%),
    linear-gradient(145deg, color-mix(in srgb, var(--model-color) 10%, #171125), #0d0b16 72%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055);
  transition: transform .32s cubic-bezier(.16,1,.3,1), border-color .32s, box-shadow .32s, background .32s !important;
}
.signal-model-card::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
  background: color-mix(in srgb, var(--model-color) 28%, transparent);
  filter: blur(40px);
  opacity: .24;
  transition: opacity .32s, transform .32s;
}
.signal-model-card:hover {
  transform: translateY(-9px) !important;
  border-color: color-mix(in srgb, var(--model-color) 70%, white 10%) !important;
  box-shadow: 0 24px 62px rgba(0,0,0,.32), 0 0 38px color-mix(in srgb, var(--model-color) 15%, transparent);
}
.signal-model-card:hover::after {
  opacity: .68;
  transform: scale(1.25);
}
.signal-model-card dl {
  border-color: color-mix(in srgb, var(--model-color) 27%, rgba(255,255,255,.12)) !important;
  background: rgba(5,4,10,.35) !important;
}
.signal-model-card dl > div {
  background: rgba(12, 10, 20, .65) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.signal-final {
  min-height: 590px !important;
  padding-top: 92px !important;
}
.signal-final h2 {
  max-width: 720px;
  font-size: clamp(54px, 7vw, 84px) !important;
}
.signal-final footer {
  left: max(24px, 50% - 690px) !important;
  right: max(24px, 50% - 690px) !important;
}

@media (max-width: 900px) {
  .signal-status { width: calc(100% - 32px) !important; }
  .signal-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  .signal-status {
    width: calc(100% - 24px) !important;
    min-height: 0 !important;
    border-radius: 16px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .signal-status > div {
    min-height: 84px;
    padding: 15px 14px !important;
  }
  .signal-status > div:nth-child(2n) { border-right: 0 !important; }
  .signal-status > div:last-child { grid-column: 1 / -1; }
  .signal-status b { font-size: 15px !important; }
  .signal-models { padding: 76px 18px 88px !important; }
  .signal-model-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 38px !important; }
  .signal-model-card { min-height: 300px !important; padding: 20px !important; }
  .signal-model-card > div:nth-of-type(2) { margin-top: 52px !important; }
  .signal-final { min-height: 540px !important; padding: 78px 18px 0 !important; }
  .signal-final h2 { font-size: clamp(46px, 13vw, 64px) !important; }
  .signal-final footer {
    left: 18px !important;
    right: 18px !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 18px 0;
  }
  .signal-final footer nav { justify-content: flex-start !important; }
  .signal-final footer > span:last-child { justify-self: start !important; }
}
@media (prefers-reduced-motion: reduce) {
  .signal-model-card, .signal-model-card::after, .signal-status > div { transition: none !important; }
}