.html,
html,
body,
.jarvis-core {
  background: #03070d !important;
}

.jarvis-core main > section:first-child > .grid > div:first-child > h1 {
  max-width: 34rem !important;
  font-size: 0 !important;
}

.jarvis-core main > section:first-child > .grid > div:first-child > h1::before {
  content: "AI-сотрудник для заявок, продаж и CRM";
  display: block;
  color: #f7f3ef;
  font-size: clamp(2.35rem, 7vw, 3.85rem);
  line-height: 0.98;
}

.jarvis-core main > section:first-child > .grid > div:first-child > p {
  max-width: 34.5rem !important;
  font-size: 0 !important;
}

.jarvis-core main > section:first-child > .grid > div:first-child > p::before {
  content: "Он отвечает клиентам в Telegram и на сайте, собирает данные, обновляет CRM и передает сложные диалоги менеджеру с контекстом.";
  display: block;
  color: #c5c9d2;
  font-size: 1.02rem;
  line-height: 1.78;
}

.hero-system-scene .hero-capsule-wrap {
  width: 26rem !important;
  height: 40rem !important;
  top: -1.85rem !important;
  transform: translateX(-50%) !important;
}

.hero-system-scene .hero-capsule-wrap::before {
  content: "";
  position: absolute;
  inset: -2.35rem -3.35rem -1.25rem;
  z-index: 0;
  background: url("/hero/jarvis-core-v2-alpha.png") center / contain no-repeat;
  filter:
    brightness(1.14)
    drop-shadow(0 0 48px rgba(88, 155, 255, 0.24))
    drop-shadow(0 34px 86px rgba(0, 0, 0, 0.46));
  opacity: 0.98;
  pointer-events: none;
}

.hero-system-scene .hero-capsule-crown,
.hero-system-scene .hero-capsule-ring,
.hero-system-scene .hero-neural-orb,
.hero-system-scene .hero-capsule-data-stack,
.hero-system-scene .hero-capsule-floor {
  display: none !important;
}

.hero-system-scene .hero-capsule {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

.hero-system-scene .hero-capsule::before,
.hero-system-scene .hero-capsule::after,
.hero-system-scene .hero-capsule-glass::before,
.hero-system-scene .hero-capsule-glass::after {
  display: none !important;
}

.hero-system-scene .hero-capsule-glass {
  position: absolute !important;
  inset: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.hero-system-scene .hero-capsule-title {
  top: 47.2% !important;
  color: #f7fbff !important;
  font-size: 1.26rem !important;
  text-shadow:
    0 0 22px rgba(117, 167, 255, 0.8),
    0 0 42px rgba(67, 231, 255, 0.28) !important;
}

.hero-system-scene .hero-capsule-role {
  top: 55.8% !important;
  color: #c5d6f4 !important;
  font-size: 0.54rem !important;
}

.hero-system-scene .hero-online-badge {
  top: 61.4% !important;
  border-color: rgba(88, 226, 144, 0.3) !important;
  background: rgba(30, 118, 63, 0.44) !important;
  box-shadow: 0 0 24px rgba(75, 215, 116, 0.18) !important;
}

.hero-system-scene .hero-module-row {
  opacity: 0.86;
}

@media (min-width: 1024px) {
  .jarvis-core main > section:first-child {
    min-height: calc(100vh - 5rem) !important;
    padding-top: 4.25rem !important;
    padding-bottom: 4.75rem !important;
  }

  .jarvis-core main > section:first-child > .grid {
    align-items: center !important;
    gap: 3.25rem !important;
    grid-template-columns: minmax(0, 0.78fr) minmax(40rem, 1.12fr) !important;
  }

  .jarvis-core main > section:first-child > .grid > div:first-child {
    max-width: 39.5rem !important;
  }

  .jarvis-core main > section:first-child h1 {
    max-width: 34rem !important;
    font-size: clamp(3.35rem, 3.6vw, 4.15rem) !important;
    line-height: 0.98 !important;
  }

  .jarvis-core main > section:first-child > .grid > div:first-child > h1 {
    font-size: 0 !important;
  }

  .jarvis-core main > section:first-child > .grid > div:first-child > h1::before {
    font-size: clamp(3.15rem, 3.28vw, 3.85rem) !important;
  }

  .jarvis-core main > section:first-child p {
    max-width: 35.5rem !important;
  }

  .jarvis-core main > section:first-child > .grid > div:first-child > p {
    font-size: 0 !important;
  }

  .jarvis-core main > section:first-child > .grid > div:first-child > div:nth-of-type(3),
  .jarvis-core main > section:first-child > .grid > div:first-child > div:nth-of-type(4) {
    display: none !important;
  }

  .hero-system-scene {
    isolation: isolate;
    min-height: 39rem !important;
    transform: translateY(0.15rem);
  }

  .hero-system-scene::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 48%;
    width: 35rem;
    height: 42rem;
    transform: translate(-50%, -50%);
    background:
      radial-gradient(circle at 50% 38%, rgba(82, 145, 255, 0.18), transparent 34%),
      radial-gradient(circle at 50% 58%, rgba(67, 231, 255, 0.08), transparent 42%),
      radial-gradient(ellipse at 50% 88%, rgba(0, 0, 0, 0.6), transparent 56%);
    filter: blur(18px);
    pointer-events: none;
  }

  .hero-system-scene::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 73.5%;
    width: 20rem;
    height: 3.8rem;
    transform: translateX(-50%);
    background:
      radial-gradient(ellipse, rgba(74, 167, 255, 0.22), transparent 34%),
      radial-gradient(ellipse, rgba(0, 0, 0, 0.72), transparent 68%);
    filter: blur(10px);
    pointer-events: none;
  }

  .hero-system-scene .hero-capsule-wrap {
    width: 23.5rem !important;
    height: 37rem !important;
    top: -0.35rem !important;
  }

  .hero-system-scene .hero-capsule-wrap::before {
    inset: -1.8rem -2.45rem -1.05rem !important;
    filter:
      brightness(0.98)
      contrast(0.95)
      saturate(0.92)
      drop-shadow(0 0 38px rgba(87, 151, 255, 0.2))
      drop-shadow(0 28px 74px rgba(0, 0, 0, 0.54)) !important;
    opacity: 0.92 !important;
  }

  .hero-system-scene .hero-capsule-wrap::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 20%;
    right: 20%;
    bottom: 2rem;
    height: 2.4rem;
    border-radius: 999px;
    background: radial-gradient(ellipse, rgba(64, 176, 255, 0.2), rgba(0, 0, 0, 0.08) 58%, transparent 72%);
    filter: blur(8px);
    pointer-events: none;
  }

  .hero-system-scene .hero-capsule-title {
    top: 47.9% !important;
    font-size: 1.14rem !important;
  }

  .hero-system-scene .hero-capsule-role {
    top: 55.9% !important;
    font-size: 0.5rem !important;
  }

  .hero-system-scene .hero-online-badge {
    top: 61.4% !important;
    transform: translateX(-50%) scale(0.92) !important;
  }

  .hero-system-scene .hero-channel-card:nth-child(n + 5) {
    display: none !important;
  }

  .hero-system-scene .hero-module-row,
  .hero-system-scene .hero-status-card {
    display: none !important;
  }

  .hero-system-scene .hero-channel-card,
  .hero-system-scene .hero-work-card {
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.72), rgba(5, 10, 18, 0.66)) !important;
    border-color: rgba(126, 164, 255, 0.18) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
  }

  .hero-system-scene .hero-work-card {
    min-height: 4.25rem !important;
  }
}

@media (max-width: 767px) {
  .jarvis-core main > section:first-child {
    padding-top: 3.25rem !important;
  }

  .jarvis-core main > section:first-child > .grid > div:first-child > h1 {
    max-width: calc(100vw - 3rem) !important;
  }

  .jarvis-core main > section:first-child > .grid > div:first-child > h1::before {
    content: "AI-сотрудник для заявок и CRM";
    font-size: clamp(2rem, 8.7vw, 2.38rem) !important;
    line-height: 1.04 !important;
  }

  .jarvis-core main > section:first-child > .grid > div:first-child > p {
    max-width: min(20.75rem, calc(100vw - 3rem)) !important;
  }

  .jarvis-core main > section:first-child > .grid > div:first-child > p::before {
    content: "Собирает заявки, обновляет CRM и передает сложные диалоги менеджеру.";
    max-width: min(20.75rem, calc(100vw - 3rem));
    font-size: 0.96rem !important;
    line-height: 1.65 !important;
  }

  .jarvis-core main > section:first-child > .grid > div:first-child > div:nth-of-type(3),
  .jarvis-core main > section:first-child > .grid > div:first-child > div:nth-of-type(4) {
    display: none !important;
  }
}