/*
 * Стили публичных лендингов (/hello/buyers и /hello/agents).
 *
 * Отдельный файл, а не lk.css: у лендингов своя сетка и полноэкранные
 * parallax-секции, и они не должны зависеть от разметки личного кабинета.
 * Базовые классы (hero, columns, box, button) даёт локальная Bulma, здесь
 * — только то, чего в ней нет. Цвет бренда приходит из настроек темы
 * через --hello-primary (см. templates/hello/base.html).
 */

:root {
  --hello-heading-font: "Manrope", Arial, sans-serif;
  --bulma-family-primary: var(--hello-font, "Golos UI", Arial, sans-serif);
  --bulma-family-secondary: var(--hello-font, "Golos UI", Arial, sans-serif);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--hello-font, "Golos UI", Arial, sans-serif);
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.title,
.subtitle,
.hello-brand,
.hello-footer-brand {
  font-family: var(--hello-heading-font);
  font-weight: 600;
}

h1, h1.title,
.hello-hero-title,
.hello-cta-title {
  font-weight: 700;
}

.button,
.pagination-link,
.pagination-previous,
.pagination-next,
.pagination-ellipsis {
  font-family: var(--hello-font, "Golos UI", Arial, sans-serif);
  font-weight: 500;
}

.table,
.input,
.textarea,
.select select {
  font-family: var(--hello-font, "Golos UI", Arial, sans-serif);
  font-weight: 400;
}

/* Honeypot-поле формы (см. content/hello_forms.py): за кадром и без
   размера, но не display:none — часть роботов пропускает скрытые через
   CSS поля. */
.hello-pot {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Первый экран --- */
.hello-hero {
  background-color: #10182b;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(84, 191, 237, 0.35), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(84, 191, 237, 0.2), transparent 40%),
    linear-gradient(135deg, #0b1120 0%, #16233f 60%, #0b1120 100%);
  color: #fff;
}

.hello-brand {
  color: #fff !important;
  font-weight: 700;
  font-size: 1.15rem;
  gap: 0.6rem;
}

.hello-logo {
  height: 2rem;
  width: auto;
}

.hello-hero-text {
  padding: 3rem 0;
}

.hello-hero-title {
  color: #fff;
  line-height: 1.15;
  text-wrap: balance;
}

.hello-hero-subtitle {
  color: rgba(255, 255, 255, 0.82) !important;
  max-width: 44rem;
}

.hello-hero-actions {
  margin-top: 1.75rem;
}

.hello-cta-button {
  font-weight: 500;
}

.hello-note {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}

.hello-note-dark {
  color: rgba(255, 255, 255, 0.8);
}

.hello-note-dark a {
  color: #fff;
  text-decoration: underline;
}

/* --- Parallax-секции --- */
.hello-parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}

.hello-problem {
  --hello-accent: #ff7f50;
  border-top: 10px solid var(--hello-accent);
  background-image:
    linear-gradient(rgba(11, 17, 32, 0.82), rgba(11, 17, 32, 0.82)),
    linear-gradient(135deg, #16233f 0%, #0b1120 100%);
}

.hello-solution {
  --hello-accent: #ffd400;
  border-top: 10px solid var(--hello-accent);
  background-image:
    linear-gradient(rgba(11, 17, 32, 0.86), rgba(11, 17, 32, 0.86)),
    linear-gradient(225deg, #16233f 0%, #0b1120 100%);
}

.hello-how {
  --hello-accent: #ff69b4;
  border-top: 10px solid var(--hello-accent);
  background-image:
    linear-gradient(rgba(11, 17, 32, 0.84), rgba(11, 17, 32, 0.84)),
    linear-gradient(135deg, #0b1120 0%, #1d2f52 100%);
}

.hello-who {
  --hello-accent: #40e0d0;
  border-top: 10px solid var(--hello-accent);
  background-image:
    linear-gradient(rgba(11, 17, 32, 0.9), rgba(11, 17, 32, 0.9)),
    linear-gradient(315deg, #16233f 0%, #0b1120 100%);
}

.hello-faq {
  --hello-accent: #54bfed;
  border-top: 10px solid var(--hello-accent);
  background-image:
    linear-gradient(rgba(11, 17, 32, 0.94), rgba(11, 17, 32, 0.94)),
    linear-gradient(135deg, #0b1120 0%, #16233f 100%);
}

.hello-automation {
  --hello-accent: #9c6ade;
  border-top: 10px solid var(--hello-accent);
  background-image:
    linear-gradient(rgba(11, 17, 32, 0.9), rgba(11, 17, 32, 0.9)),
    linear-gradient(45deg, #16233f 0%, #0b1120 100%);
}

/* --- Блок «Две схемы работы» --- */
/* Тёмная parallax-секция, как соседние: свой акцент и цветная полоса
   сверху, чтобы не выбивалась из ряда разделителей между блоками. */
.hello-schemes {
  --hello-accent: #54bfed;
  border-top: 10px solid var(--hello-accent);
  background-image:
    linear-gradient(rgba(11, 17, 32, 0.86), rgba(11, 17, 32, 0.86)),
    linear-gradient(160deg, #16233f 0%, #0b1120 100%);
}

.hello-section-title {
  color: #fff;
}

/* Цветная полоска под заголовком секции — как divider в hello-parallax. */
.hello-section-title::after,
.hello-cta-title::after {
  content: "";
  display: block;
  width: 75px;
  height: 5px;
  margin-top: 1rem;
  background: var(--hello-accent, var(--hello-primary, #54bfed));
}

.hello-section-title.is-centered::after {
  margin-left: auto;
  margin-right: auto;
}

.hello-section-subtitle {
  color: rgba(255, 255, 255, 0.78) !important;
  margin-bottom: 2rem;
}

.hello-lead {
  margin-top: 1.5rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

/* --- Блок «заказы создаются сами» со скриншотом --- */
.hello-automation-text {
  margin: 1.25rem 0;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
}

.hello-screenshot {
  margin: 0;
}

.hello-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--bulma-radius, 0.5rem);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* --- Списки --- */
.hello-list {
  list-style: none;
  margin: 0;
}

.hello-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.9rem;
  color: rgba(255, 255, 255, 0.88);
}

.hello-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: var(--hello-primary, #54bfed);
}

/* --- Карточки --- */
/* Карточки светлые на тёмном фоне: цвет фона и текста задаём явно.
   Без этого на мобильных текст внутри .box оставался тёмным на тёмном
   фоне секции (наследовался color секции). */
.hello-features .hello-card,
.hello-audience .hello-card {
  height: 100%;
}

.hello-card {
  background-color: #fff;
  color: #1a1a1a;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hello-card .title,
.hello-card p,
.hello-card li,
.hello-card strong {
  color: #1a1a1a;
}

.hello-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.hello-card-icon {
  color: var(--hello-primary, #54bfed);
  margin-bottom: 0.75rem;
}

.hello-card .title {
  margin-bottom: 0.5rem;
}

.hello-card-cta {
  background-color: var(--hello-primary, #54bfed);
  color: #fff;
}

.hello-card-cta .title {
  color: #fff;
}

.hello-card-cta p {
  color: #fff;
}

.hello-card-cta .button {
  font-weight: 500;
}

.hello-audience .hello-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
}

.hello-audience .hello-card-icon {
  margin-bottom: 0;
  flex: 0 0 auto;
}

/* --- Шаги --- */
.hello-steps {
  counter-reset: hello-step;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.hello-steps li {
  counter-increment: hello-step;
  position: relative;
  padding-left: 3.25rem;
  margin-bottom: 1.1rem;
  min-height: 2.25rem;
  color: rgba(255, 255, 255, 0.9);
}

.hello-steps li::before {
  content: counter(hello-step);
  position: absolute;
  left: 0;
  top: -0.15rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--hello-primary, #54bfed);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- FAQ --- */
.hello-faq-list {
  max-width: 48rem;
  margin: 0 auto;
}

.hello-faq-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--bulma-radius, 0.5rem);
  margin-bottom: 0.75rem;
  padding: 0.9rem 1.25rem;
}

.hello-faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: #fff;
  list-style: none;
}

.hello-faq-item summary::-webkit-details-marker {
  display: none;
}

.hello-faq-item summary::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  float: right;
  font-size: 0.8rem;
  color: var(--hello-primary, #54bfed);
  transition: transform 0.15s ease;
}

.hello-faq-item[open] summary::after {
  transform: rotate(180deg);
}

.hello-faq-item p {
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.82);
}

/* --- Финальный CTA и форма --- */
.hello-cta {
  --hello-accent: #40e0d0;
  border-top: 10px solid var(--hello-accent);
  background-image: linear-gradient(135deg, #10182b 0%, #1d2f52 100%);
  color: #fff;
}

.hello-cta-title {
  color: #fff;
}

.hello-cta-subtitle {
  color: rgba(255, 255, 255, 0.82) !important;
}

.hello-contact-form .label {
  color: #1a1a1a;
}

.hello-contact-done {
  text-align: center;
  color: #1a1a1a;
}

.hello-contact-done .icon {
  margin-bottom: 0.5rem;
}

/* --- Подвал --- */
.hello-footer {
  background-color: #0b1120;
  color: rgba(255, 255, 255, 0.7);
}

.hello-footer a {
  color: var(--hello-primary, #54bfed);
}

.hello-footer-brand {
  font-weight: 700;
  color: #fff;
}

@media screen and (max-width: 768px) {
  /* На мобильных background-attachment: fixed дёргается при скролле —
     отключаем, оставляя статичный фон. */
  .hello-parallax {
    background-attachment: scroll;
  }
}