/* ==========================================================================
   HARDWARE52 — Главная страница (светлая тема)
   Использует design-system.css + header.css
   ========================================================================== */

body.page-dark { background: #ffffff; }

/* ---- HERO (фото-баннер, тёмный оверлей для читаемости текста — не зависит от темы страницы) ---- */
.hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0F172A;
}
.hero__bg {
  position: absolute; inset: 0;
  background: url('../img/aurora-source/resurs5000-banner.jpg') center/cover no-repeat;
  filter: brightness(.72) saturate(1.05) contrast(1.05);
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,12,15,.94) 0%, rgba(10,12,15,.8) 32%, rgba(10,12,15,.35) 62%, rgba(10,12,15,.6) 100%);
}
.hero__photo-note { display: none; }
.hero__inner { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; width: 100%; gap: var(--space-6); }
.hero__copy { max-width: 620px; }
.hero__eyebrow { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: var(--space-3); }
.hero__title { font-size: 2.75rem; line-height: 1.15; font-weight: var(--fw-bold); color: #fff; margin-bottom: var(--space-4); }
.hero__title em { font-style: normal; color: var(--color-brand-yellow); }
.hero__subtitle { font-size: var(--fs-body-lg); color: rgba(255,255,255,.7); max-width: 480px; margin-bottom: var(--space-6); }
.hero__features { display: flex; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
.hero__feature { display: flex; align-items: center; gap: var(--space-2); }
.hero__feature-icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-sm); }
.hero__feature-text { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: #fff; line-height: 1.3; }
.hero__actions { display: flex; gap: var(--space-3); }
.hero__actions .btn--outline { border-color: rgba(255,255,255,.4); color: #fff; }
.hero__actions .btn--outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.hero__brands { display: flex; flex-direction: column; gap: var(--space-3); flex: 0 0 160px; }
.hero__brands-label { font-size: 0.625rem; font-weight: var(--fw-semibold); letter-spacing: .05em; color: rgba(255,255,255,.55); text-transform: uppercase; margin-bottom: var(--space-1); }
.hero__brand { font-size: 1.125rem; font-weight: var(--fw-bold); color: #fff; }
.hero__brand-more { font-size: var(--fs-body-sm); color: rgba(255,255,255,.6); font-weight: var(--fw-medium); margin-top: var(--space-1); }
.hero__dots { position: absolute; left: var(--container-pad); bottom: var(--space-5); z-index: 3; display: flex; gap: var(--space-2); }
.hero__dot { width: 24px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); }
.hero__dot--active { background: var(--color-brand-yellow); }
.hero__arrows { position: absolute; right: var(--container-pad); bottom: var(--space-5); z-index: 3; display: flex; gap: var(--space-2); }
.hero__arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; }

/* ---- Общий заголовок секции ---- */
.section-head, .cat-section__head, .prod-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-5); }
.section-head__title, .cat-section__title, .prod-section__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--color-graphite-900); margin: 0; }
.section-head__link, .cat-section__link, .prod-section__link { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--color-graphite-500); }

/* ---- CATEGORIES ---- */
.cat-section { background: #ffffff; padding-block: var(--space-7); }
.cat-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-3); }
.cat-tile {
  position: relative; aspect-ratio: 1 / 1.15; border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-bg-subtle);
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-3);
  box-sizing: border-box; border: 1px solid var(--color-border);
}
.cat-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%); }
.cat-tile--photo { background-size: cover; background-position: center; filter: brightness(.8) saturate(1.05); }
.cat-tile__photo-note { position: absolute; top: 6px; left: 6px; right: 6px; z-index: 2; font-size: 9px; color: rgba(255,193,7,.7); text-align: center; line-height: 1.3; }
.cat-tile__icon { position: relative; z-index: 2; width: 32px; height: 32px; border-radius: var(--radius-sm); background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-2); }
.cat-tile__name { position: relative; z-index: 2; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: #fff; line-height: 1.25; }
.cat-tile__count { position: relative; z-index: 2; font-size: 11px; color: rgba(255,255,255,.75); margin-top: 2px; }

/* ---- PRODUCTS ---- */
.prod-section { background: #ffffff; padding-block: var(--space-7); }
.prod-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.prod-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s; }
.prod-card:hover { box-shadow: var(--shadow-md); }
.prod-card__media { position: relative; aspect-ratio: 1 / 0.85; background: var(--color-bg-subtle); display: flex; align-items: center; justify-content: center; }
.prod-card__photo-note { color: var(--color-graphite-300); font-size: 10px; text-align: center; padding: 0 var(--space-3); }
.prod-card__badge { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 2; }
.prod-card__wish { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.prod-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.prod-card__rating { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--color-graphite-500); }
.prod-card__rating .star { color: var(--color-brand-yellow-600); }
.prod-card__name { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--color-graphite-900); line-height: 1.35; min-height: 2.7em; }
.prod-card__specs { display: flex; flex-direction: column; gap: 3px; margin: 2px 0; }
.prod-card__spec { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-graphite-500); }
.prod-card__stock { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--color-success); margin-top: 2px; }
.prod-card__stock-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); }
.prod-card__price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.prod-card__price { font-size: 1.125rem; font-weight: var(--fw-bold); color: var(--color-graphite-900); }
.prod-card__price-old { font-size: var(--fs-body-sm); color: var(--color-graphite-300); text-decoration: line-through; }
.prod-card__cta { margin-top: auto; display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-2); }
.prod-card__btn { flex: 1; background: var(--color-brand-yellow); color: #0F172A; font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); border: 0; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.prod-card__btn:hover { background: var(--color-brand-yellow-600); }

/* ---- FEATURES + CONSULTATION ---- */
.feat-section { background: #ffffff; padding-block: var(--space-7); border-top: 1px solid var(--color-border); }
.feat-section__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: #fff; margin: 0 0 var(--space-5); text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-7); }
.feat-card { position: relative; border-radius: var(--radius-md); overflow: hidden; min-height: 200px; background: #fff; border: 1px solid var(--color-border); padding: var(--space-4); display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; box-shadow: var(--shadow-sm); }
.feat-card__note { position: absolute; top: var(--space-2); left: var(--space-2); font-size: 9px; color: var(--color-graphite-300); }
.feat-card__icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: rgba(255,193,7,.15); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); }
.feat-card__title { font-size: 1.125rem; font-weight: var(--fw-bold); color: var(--color-graphite-900); margin-bottom: 4px; }
.feat-card__text { font-size: var(--fs-body-sm); color: var(--color-graphite-500); line-height: 1.4; }

.consult { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--color-border); display: grid; grid-template-columns: 1fr 1fr; align-items: center; box-shadow: var(--shadow-sm); }
.consult__copy { padding: var(--space-7); }
.consult__eyebrow { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .06em; color: var(--color-brand-yellow-600); margin-bottom: var(--space-2); }
.consult__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--color-graphite-900); margin: 0 0 var(--space-3); max-width: 420px; }
.consult__list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.consult__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); color: var(--color-graphite-700); }
.consult__photo { position: relative; min-height: 320px; height: 100%; background: var(--color-bg-subtle); display: flex; align-items: center; justify-content: center; }
.consult__photo-note { color: var(--color-graphite-300); font-size: var(--fs-body-sm); text-align: center; padding: var(--space-4); }

/* ---- VIDEO ---- */
.vid-section { background: #ffffff; padding-block: var(--space-7); border-top: 1px solid var(--color-border); }
.vid-row { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-5); margin-bottom: var(--space-7); align-items: start; }
.vid-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.svc-side-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.svc-side-card__title { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--color-graphite-900); margin-bottom: 4px; }
.svc-side-card__text { font-size: var(--fs-body-sm); color: var(--color-graphite-500); margin-bottom: var(--space-4); }
.svc-side-card__list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.svc-side-card__item { font-size: 12px; color: var(--color-graphite-700); }
.vid-card { border-radius: var(--radius-md); overflow: hidden; }
.vid-card__thumb { position: relative; aspect-ratio: 16/10; background: var(--color-bg-subtle); display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-bottom: none; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.vid-card__note { position: absolute; top: 6px; left: 6px; font-size: 9px; color: var(--color-graphite-300); }
.vid-card__play { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; color: #fff; }
.vid-card__duration { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; }
.vid-card__body { padding: var(--space-3); background: #fff; border: 1px solid var(--color-border); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); }
.vid-card__title { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--color-graphite-900); line-height: 1.35; }

/* ---- REVIEWS ---- */
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.rev-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.rev-card__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.rev-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--color-brand-yellow); color: #0F172A; font-weight: var(--fw-bold); font-size: var(--fs-body); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rev-card__name { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--color-graphite-900); }
.rev-card__company { font-size: 11px; color: var(--color-graphite-500); }
.rev-card__stars { color: var(--color-brand-yellow-600); font-size: 12px; margin-bottom: var(--space-2); }
.rev-card__text { font-size: var(--fs-body-sm); color: var(--color-graphite-700); line-height: 1.5; }

/* ---- FOOTER ---- */
.site-footer { background: var(--color-bg-subtle); padding-top: var(--space-7); border-top: 1px solid var(--color-border); }
.site-footer__cta { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-7); }
.site-footer__cta-title { font-size: 1.375rem; font-weight: var(--fw-bold); color: var(--color-graphite-900); margin: 0 0 4px; }
.site-footer__cta-text { font-size: var(--fs-body-sm); color: var(--color-graphite-500); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: var(--space-5); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
.footer-brand__logo { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.footer-brand__badge { width: 36px; height: 36px; }
.footer-brand__word { font-size: 1.125rem; font-weight: var(--fw-bold); color: var(--color-graphite-900); }
.footer-brand__word span { color: var(--color-brand-yellow-600); }
.footer-brand__text { font-size: var(--fs-body-sm); color: var(--color-graphite-500); line-height: 1.5; max-width: 240px; margin-bottom: var(--space-4); }
.footer-social { display: flex; gap: var(--space-2); }
.footer-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-graphite-700); font-size: 13px; background: #fff; }
.footer-col__title { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--color-graphite-900); text-transform: uppercase; letter-spacing: .03em; margin-bottom: var(--space-3); }
.footer-col a { display: block; font-size: var(--fs-body-sm); color: var(--color-graphite-500); margin-bottom: var(--space-2); }
.footer-col a:hover { color: var(--color-brand-yellow-600); }
.footer-contacts__item { display: flex; gap: var(--space-2); font-size: var(--fs-body-sm); color: var(--color-graphite-700); margin-bottom: var(--space-2); align-items: flex-start; }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-4); font-size: 12px; color: var(--color-graphite-300); }
.site-footer__bottom a { color: var(--color-graphite-300); margin-left: var(--space-4); }

@media (max-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .consult { grid-template-columns: 1fr; }
  .vid-grid { grid-template-columns: repeat(2, 1fr); }
  .vid-row { grid-template-columns: 1fr; }
  .rev-grid { grid-template-columns: 1fr; }
  .hero__inner { flex-direction: column; align-items: flex-start; }
  .hero__brands { flex-direction: row; flex-wrap: wrap; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Mobile (≤640px) ---- */
@media (max-width: 640px) {
  .hero { min-height: auto; padding-block: var(--space-6) var(--space-8); }
  .hero__photo-note { display: none; }
  .hero__title { font-size: 1.75rem; }
  .hero__subtitle { font-size: var(--fs-body); max-width: 100%; }
  .hero__features { gap: var(--space-3); }
  .hero__feature-text { font-size: 12px; }
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; }
  .hero__brands { display: none; }
  .hero__dots, .hero__arrows { display: none; }

  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .feat-grid { grid-template-columns: 1fr; }
  .consult__copy { padding: var(--space-5); }
  .consult__photo { display: none; }
  .vid-grid { grid-template-columns: 1fr; }
  .vid-row { grid-template-columns: 1fr; }
  .rev-grid { grid-template-columns: 1fr; }

  .site-footer__cta { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .site-footer__bottom span:last-child { margin-left: 0; }
  .site-footer__bottom a { margin-left: 0; margin-right: var(--space-3); }

  .container { padding-inline: var(--space-4); }
}