/* hero-screen (v1-heroscreen) - экран входа в страницу */

/* Шапка у темы position:absolute и накрывает первый экран,
   поэтому верхний отступ hero считаем от её высоты. */
html:root { --sa-header-h: 150px; }

/* Шапка темы: 142px до 768px включительно, 90px от ~900px. */
@media (min-width: 900px) {
  html:root { --sa-header-h: 96px; }
}

html body .v1-heroscreen {
  position: relative;
  background:
    radial-gradient(60% 120% at 12% 0%, rgba(45, 224, 28, 0.1) 0%, transparent 60%),
    radial-gradient(50% 100% at 95% 10%, rgba(20, 117, 225, 0.12) 0%, transparent 62%),
    linear-gradient(180deg, var(--sa-bg-deep) 0%, var(--sa-bg) 100%);
  border-bottom: 1px solid var(--sa-line);
  padding-block: calc(var(--sa-header-h) + var(--sa-s-4)) var(--sa-s-5);
  overflow: hidden;
}

/* мягкое свечение за карточкой, без анимации: страница контентная */
html body .v1-heroscreen::after {
  content: '';
  position: absolute;
  inset-inline-start: -10%;
  top: -30%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--sa-accent-glow) 0%, transparent 65%);
  opacity: 0.35;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

html body .v1-heroscreen .container { position: relative; z-index: 1; }

html body .v1-heroscreen__card {
  background: linear-gradient(160deg, rgba(33, 53, 69, 0.92) 0%, rgba(28, 48, 64, 0.88) 100%);
  border: 1px solid var(--sa-line-strong);
  border-radius: var(--sa-r-lg);
  box-shadow: var(--sa-e3);
  padding: clamp(20px, 3vw, 36px);
  max-width: min(880px, 100%);
}

html body .v1-heroscreen__card-title {
  margin: 0 0 var(--sa-s-3);
  color: var(--sa-text);
}

/* тонкая акцентная черта над заголовком вместо декоративной картинки */
html body .v1-heroscreen__card-title::before {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: var(--sa-s-3);
  border-radius: var(--sa-r-pill);
  background: linear-gradient(90deg, var(--sa-accent), rgba(45, 224, 28, 0));
}

html body .v1-heroscreen__card-description {
  color: var(--sa-text-muted);
  font-size: 16px;
}

html body .v1-heroscreen__card-description p { max-width: 68ch; }

html body .v1-heroscreen__card-buttons {
  margin-top: var(--sa-s-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-s-2);
}

/* app-страница: mainscreen с характеристиками */
html body [class*='mainscreen'] {
  background:
    radial-gradient(55% 110% at 88% 0%, rgba(45, 224, 28, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, var(--sa-bg-deep) 0%, var(--sa-bg) 100%);
  border-bottom: 1px solid var(--sa-line);
}

@media (max-width: 767px) {
  html body .v1-heroscreen { padding-block: calc(var(--sa-header-h) + var(--sa-s-2)) var(--sa-s-4); }
  html body .v1-heroscreen__card { padding: var(--sa-s-3); }
  html body .v1-heroscreen__card-buttons > * { width: 100%; }
}