@charset "UTF-8";
/* ================================================
   INDUSTRIAL — "Blueprint Terminal"

   Характер: технический, инженерный, blueprint.
   Заголовки и labels — моноширинный IBM Plex Mono,
   body — IBM Plex Sans. Острые углы, видимые сетки,
   uppercase лейблы с трекингом, никаких "мягких" теней.
   ================================================ */

:root {
  /* --- Шрифты --- */
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', 'Courier New', monospace;

  /* --- Базовая палитра --- */
  --accent:        #3b82f6;
  --accent-dark:   #2563eb;
  --accent-glow:   rgba(59, 130, 246, 0.20);
  --bg:            #0d1117;
  --bg-2:          #161b22;
  --bg-3:          #21262d;
  --white:         #FFFFFF;
  --off-white:     #f6f8fa;
  --text:          #1c2128;
  --text-muted:    #6e7681;
  --dark-text:     rgba(255, 255, 255, 0.92);
  --dark-muted:    #8b949e;
  --border-dark:   rgba(255, 255, 255, 0.06);
  --border:        #cbd5e1;
  --radius:        2px;       /* острые углы — blueprint */
  --radius-lg:     4px;
  --shadow:        none;      /* flat technical */
  --shadow-lg:     none;
  --container:     1280px;    /* шире — больше технического simu */

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

  /* --- RGB-фрагменты --- */
  --accent-rgb:        59, 130, 246;
  --on-dark-rgb:       255, 255, 255;
  --surface-dark-rgb:  13, 17, 23;

  /* --- Декоративные градиенты hero/cta --- */
  --hero-bg:            #0d1117;
  --hero-decor-1:       radial-gradient(circle at 80% 30%, rgba(59, 130, 246, 0.10) 0%, transparent 50%);
  --hero-decor-2:       none;
  --hero-image-bg:      linear-gradient(135deg, #21262d 0%, #161b22 100%);
  --hero-image-overlay: none;
  --cta-form-bg:        #0d1117;
  --cta-form-decor:     none;

  /* --- Поверхности --- */
  --footer-bg:                 #080a0d;
  --header-overlay-bg:         rgba(13, 17, 23, 0.98);
  --mobile-menu-bg:            rgba(13, 17, 23, 0.99);
  --float-card-bg:             rgba(22, 27, 34, 0.95);
  --modal-overlay-bg:          rgba(0, 0, 0, 0.80);

  /* --- Видео-плеер --- */
  --video-frame-bg:        #0a0d12;
  --video-placeholder-bg:  #0a0d12;

  /* --- Placeholder фото товара --- */
  --product-img-placeholder-bg:        #e1e4e8;
  --product-img-placeholder-nophoto-bg: #21262d;
  --product-img-placeholder-fg:         #6e7681;

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

  /* --- Hover у cat-chip --- */
  --cat-chip-hover-bg:         rgba(59, 130, 246, 0.08);
}

/* ================================================
   ТИПОГРАФИКА — blueprint terminal
   Заголовки в монопространстве, labels uppercase
   с большим трекингом
   ================================================ */

body { font-feature-settings: 'ss01', 'cv01'; }

/* Все display/heading — mono */
.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-mono);
  font-weight: 500;
  letter-spacing: -0.5px;
}

.hero__title { font-size: 56px; line-height: 1.05; letter-spacing: -1.5px; }
.section__title { font-size: 34px; font-weight: 500; letter-spacing: -0.8px; }
.cta-form__title { font-size: 34px; letter-spacing: -0.8px; }
.page-hero__title,
.catalog-header__title { font-size: 36px; letter-spacing: -0.8px; }
.article__title { font-size: 32px; }
.product-info__title { font-size: 26px; }

/* Subtitle / body */
.hero__subtitle,
.section__subtitle,
.cta-form__text { font-weight: 400; }
.hero__subtitle { font-size: 16px; }

/* Все labels / tags / категории / column titles — UPPERCASE mono */
.section__tag,
.hero__badge,
.footer__col-title,
.cat-tree__title,
.filter-group__label,
.filter-panel__title,
.product-info__category,
.product-video__label,
.contact-info__label,
.requisites__label,
.form-section-label,
.news-card__date,
.article__date,
.form__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 500;
}

/* Кнопки — sans, но bold не нужен */
.btn-primary,
.btn-hero,
.btn-card,
.btn-checkout,
.btn-product-main,
.btn-product-ghost,
.form__submit { font-weight: 600; letter-spacing: 0.2px; }

/* Цены — mono (численная информация) */
.product-card__price,
.product-price__value,
.hero__stat-num,
.stats-bar__num { font-family: var(--font-mono); font-weight: 600; }

/* ================================================
   ЛЕЙАУТ — компактный технический ритм
   ================================================ */

.section { padding: 72px 0; }
.section--compact { padding: 40px 0; }
.section__header { margin-bottom: 48px; }

.hero { min-height: 78vh; }
/* Декор-свечение само сходит на прозрачность; круглый клип base.css обрезал его
   жёстким краем — убираем клип (как в minimal). */
.hero::before { border-radius: 0; }
.hero__inner { padding: 72px 0; gap: 56px; }
.hero__title { margin-bottom: 20px; }
.hero__subtitle { margin-bottom: 32px; }
.hero__stats { margin-top: 40px; padding-top: 32px; }

.page-hero { padding: 48px 0 24px; }
.catalog-header { padding: 40px 0 24px; }

/* Карточки — компактные, без округлений, видимые borders */
.benefit-card { padding: 28px 24px; border-width: 1px; }
.benefit-card:hover { transform: none; border-color: var(--accent); }

.product-card { border-width: 1px; }
.product-card:hover { transform: none; box-shadow: none; border-color: var(--accent); }

.review-card { padding: 28px 24px; border-width: 1px; }
.review-card:hover { box-shadow: none; border-color: var(--accent); }

.news-card { border-width: 1px; }
.news-card:hover { transform: none; box-shadow: none; }

.cat-chip { border-width: 1px; border-radius: 2px; }

/* Step-num — outlined circle вместо filled */
.step-item__num {
  border: 1.5px solid var(--accent);
  background: transparent !important;
  box-shadow: none;
  color: var(--accent);
}
.steps__line { background: var(--border-dark); }

/* Pill корзины header → square */
.header__cart { border-radius: 2px; }

/* Form — острые поля */
.form__input,
.form__textarea,
.form__select,
.form-input,
.qty-input,
.catalog-search__input { border-radius: 2px; border-width: 1px; }

/* CTA form — flat */
.cta-form::before { display: none; }

/* Hero badge — square chip с mono шрифтом */
.hero__badge { border-radius: 2px; }
.hero__float-card { border-radius: 2px; box-shadow: none; }

/* Стиль-бейдж */
.style-badge { border-radius: 2px; box-shadow: none; }

/* Footer — flat без округлений */
.footer__social-link { border-radius: 2px; }

/* Pagination — square */
.page-btn { border-radius: 2px; }

/* Filter tabs square */
.filter-tab { border-radius: 2px; }
.filter-reset { border-radius: 2px; }

/* Topbar чуть плотнее */
.topbar { padding: 7px 0; }
.topbar__item { font-size: 12px; letter-spacing: 0.3px; }