@charset "UTF-8";
/* ================================================
   MINIMAL — "Soft Round Playground"

   Характер: дружелюбный, мягкий, learning-product.
   Шрифт — Plus Jakarta Sans (округлые формы, friendly).
   Размеры умеренные, мягкие тени с цветом, pill только
   на главных CTA. Карточки явно "приподняты" над gray-blue
   холстом.
   ================================================ */

:root {
  /* --- Шрифт --- */
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* --- Базовая палитра --- */
  --accent:        #2563EB;
  --accent-dark:   #1D4ED8;
  --accent-soft:   #EAF1FF;
  --accent-glow:   rgba(37, 99, 235, 0.20);
  --bg:            #F6F8FC;
  --bg-2:          #EEF3FA;
  --bg-3:          #FFFFFF;
  --white:         #ffffff;
  --off-white:     #F6F8FC;
  --text:          #0F172A;
  --text-muted:    #64748B;
  --dark-text:     #0F172A;
  --dark-muted:    #94A3B8;
  --border:        #E2E8F0;
  --border-dark:   rgba(15, 23, 42, 0.08);
  --radius:        8px;
  --radius-lg:     14px;
  --shadow:        rgba(15, 23, 42, 0.08) 0px 4px 16px 0px;
  --shadow-lg:     rgba(15, 23, 42, 0.12) 0px 14px 36px -6px;
  --container:     1140px;

  /* --- Семантические токены --- */
  --heading-fg:    var(--text);
  --logo-fg:       var(--text);
  --logo-accent-fg: var(--accent);
  --step-num-bg:   var(--accent);
  --step-num-fg:   var(--white);

  /* --- RGB-фрагменты --- */
  --accent-rgb:        37, 99, 235;
  --on-dark-rgb:       15, 23, 42;
  --surface-dark-rgb:  246, 248, 252;

  /* --- Декоративные градиенты — спокойный бело-голубой --- */
  --hero-bg:            linear-gradient(180deg, var(--white) 0%, var(--bg) 100%);
  --hero-decor-1:       radial-gradient(circle at 78% 35%, rgba(37, 99, 235, 0.10) 0%, transparent 60%);
  --hero-decor-2:       radial-gradient(ellipse at 18% 85%, rgba(37, 99, 235, 0.06) 0%, transparent 55%);
  --hero-image-bg:      var(--bg-2);
  --hero-image-overlay: none;
  --cta-form-bg:        var(--bg-2);
  --cta-form-decor:     radial-gradient(ellipse, rgba(37, 99, 235, 0.07) 0%, transparent 65%);

  /* --- Поверхности --- */
  --footer-bg:                 #282e3e;
  --header-overlay-bg:         rgba(255, 255, 255, 0.95);
  --mobile-menu-bg:            rgba(255, 255, 255, 0.99);
  --float-card-bg:             var(--white);
  --modal-overlay-bg:          rgba(40, 46, 62, 0.50);

  /* --- Видео-плеер --- */
  --video-frame-bg:        var(--bg-2);
  --video-placeholder-bg:  var(--bg-2);

  /* --- Placeholder фото товара --- */
  --product-img-placeholder-bg:        linear-gradient(135deg, #EAF1FF 0%, #D7E5FB 100%);
  --product-img-placeholder-nophoto-bg: linear-gradient(135deg, #EEF3FA 0%, #DCE5F1 100%);
  --product-img-placeholder-fg:         #94A3B8;

  /* --- Аватар отзыва --- */
  --avatar-accent-grad-end:    #60A5FA;

  /* --- Hover у cat-chip --- */
  --cat-chip-hover-bg:         rgba(37, 99, 235, 0.06);
}

/* ================================================
   ТИПОГРАФИКА — friendly Plus Jakarta Sans
   Меньше веса (semibold вместо bold), круглые формы
   ================================================ */

/* Все display/heading — Plus Jakarta Sans */
.hero__title,
.section__title,
.cta-form__title,
.page-hero__title,
.page-header__title,
.catalog-header__title,
.product-info__title,
.article__title,
.modal__title,
.contact-info__title,
.contacts-form-left__title,
.cta-review__title {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.5px;
}

.hero__title { font-size: 60px; line-height: 1.1; letter-spacing: -1.5px; font-weight: 800; margin-bottom: 24px; }
.section__title { font-size: 36px; font-weight: 700; letter-spacing: -0.8px; }
.cta-form__title { font-size: 38px; letter-spacing: -0.8px; }
.page-hero__title,
.catalog-header__title { font-size: 40px; letter-spacing: -0.8px; }
.article__title { font-size: 36px; letter-spacing: -0.6px; }
.product-info__title { font-size: 26px; }

.hero__subtitle,
.section__subtitle,
.cta-form__text { font-size: 17px; font-weight: 400; line-height: 1.6; }

/* Кнопки — semibold (не bold), чище */
.btn-primary,
.btn-hero,
.btn-card,
.btn-checkout,
.btn-product-main,
.btn-product-ghost,
.form__submit { font-weight: 700; letter-spacing: -0.1px; }

/* Labels — обычные, не uppercase (friendly tone) */
.section__tag {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 13px;
}
.hero__badge { font-weight: 600; }

/* ================================================
   ЛЕЙАУТ — воздушный, мягкий
   ================================================ */

.section { padding: 88px 0; }
.section--compact { padding: 56px 0; }
.section__header { margin-bottom: 56px; }

.hero { min-height: auto; }
.hero__inner { padding: 64px 0 72px; gap: 56px; align-items: center; }

.page-hero { padding: 64px 0 36px; }
.catalog-header { padding: 56px 0 32px; }

/* Карточки — мягкие тени, заметная elevation на hover */
.benefit-card {
  padding: 32px 28px;
  border: 1px solid transparent;
  background: var(--white);
  transition: box-shadow .25s, transform .2s;
}
.benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--border);
}
.benefit-card__title { font-weight: 700; font-size: 19px; }

.product-card {
  border: 1px solid var(--border);
  box-shadow: rgba(40, 46, 62, 0.04) 0px 2px 8px 0px;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

.review-card {
  padding: 28px;
  border: 1px solid var(--border);
  background: var(--white);
}
.review-card:hover { box-shadow: var(--shadow); }

.news-card { border: 1px solid var(--border); }
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* Step-num — мягкий filled круг */
.step-item__num {
  box-shadow: rgba(37, 99, 235, 0.22) 0px 6px 16px -4px;
}

/* Topbar — компактный, светлый */
.topbar { padding: 8px 0; font-size: 12.5px; }

/* CTA form — воздушный */
.cta-form__inner { gap: 72px; }
.cta-form::before { opacity: 0.6; }

/* Hero badge — pill, мягкий */
.hero__badge { border-radius: 9999px; }
.cat-chip { border-radius: 9999px; }

/* ================================================
   Light-theme overrides (header/nav/footer)
   ================================================ */

.header__nav-list li a,
.header__nav-more-list li a,
.header__nav-more-btn {
  color: rgba(40, 46, 62, 0.60);
  font-weight: 600;
}
.header__nav-list li a:hover,
.header__nav-more-list li a:hover,
.header__nav-more:focus-within .header__nav-more-btn { color: var(--text); }
.header--open .header__nav-list li a { color: rgba(40, 46, 62, 0.85); }
.header__logo { color: var(--text); font-weight: 800; letter-spacing: -0.8px; }
.header__logo span { color: var(--accent); }
.header__cart { color: var(--text); }
.btn-all { color: var(--text); border-color: var(--border); }
.news-card__img { background: var(--bg-2); }

/* Деловые скругления кнопок — не «таблетка» */
.btn-primary,
.btn-hero,
.btn-hero-ghost,
.btn-card,
.btn-checkout,
.btn-product-main,
.btn-product-ghost,
.btn-all,
.form__submit { border-radius: 12px; }
.btn-card { padding: 10px 20px; border-radius: 10px; }

/* Заметная синяя primary-кнопка с мягкой тенью акцента (как в макете) */
.btn-hero,
.btn-checkout,
.btn-product-main,
.form__submit {
  box-shadow: rgba(37, 99, 235, 0.22) 0px 8px 20px -6px;
}
.btn-hero:hover,
.btn-checkout:hover,
.btn-product-main:hover,
.form__submit:hover {
  box-shadow: rgba(37, 99, 235, 0.30) 0px 10px 24px -6px;
}

/* Footer — тёмный Stormcloud Ink, белый текст */
.footer .footer__logo { color: var(--white); font-weight: 800; }
.footer .footer__logo span { color: var(--accent); }
.footer .footer__tagline { color: rgba(255, 255, 255, 0.55); }
.footer .footer__col-title { color: rgba(255, 255, 255, 0.45); font-weight: 700; }
.footer .footer__col ul li a { color: rgba(255, 255, 255, 0.65); }
.footer .footer__col ul li a:hover { color: var(--white); }
.footer .footer__copy,
.footer .footer__links a { color: rgba(255, 255, 255, 0.30); }
.footer .footer__links a:hover { color: rgba(255, 255, 255, 0.65); }
.footer .footer__made { color: rgba(255, 255, 255, 0.20); }
.footer .footer__made a { color: rgba(66, 85, 255, 0.70); }
.footer .footer__social-link { color: rgba(255, 255, 255, 0.50); border-color: rgba(255, 255, 255, 0.12); }
.footer .footer__social-link:hover { color: var(--accent); border-color: var(--accent); }
/* Тёмный футер: бордеры-разделители должны быть светлыми (var(--border-dark)
   у этой темы тёмный, для светлых поверхностей — на тёмном футере не виден). */
.footer .footer__main { border-bottom-color: rgba(255, 255, 255, 0.10); }
.footer .footer__bottom { border-top-color: rgba(255, 255, 255, 0.10); }

/* ================================================
   АДАПТИВ — тема переопределяет размеры заголовков
   без media-query, поэтому возвращаем мобильный ритм
   (иначе крупный hero/section title переполняет вьюпорт)
   ================================================ */
@media (max-width: 768px) {
  .hero__title { font-size: 40px; letter-spacing: -1px; }
  .section__title { font-size: 30px; }
  .cta-form__title { font-size: 30px; }
  .page-hero__title,
  .catalog-header__title { font-size: 30px; }
  .article__title { font-size: 28px; }
}
@media (max-width: 480px) {
  .hero__title { font-size: 30px; letter-spacing: -0.6px; }
  .section__title { font-size: 25px; }
  .cta-form__title { font-size: 25px; }
  .page-hero__title,
  .catalog-header__title { font-size: 26px; }
  .article__title { font-size: 24px; }
}