/* Quadro Extreme — Hero + видео-фон */

/* ─── HERO (video bg) ─── */
.hero {
  position: relative; width: 100%; height: 820px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* VideoBackground component */
.hero-video-wrap { position: absolute; inset: 0; z-index: 0; }
.hero-video-wrap video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block;
  opacity: 0; transition: opacity 0.6s ease;
}
.hero-video-wrap video.is-playing {
  opacity: 1;
}
.hero-video-wrap img.hero-fallback {
  width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(8,8,8,0.38) 0%, rgba(8,8,8,0.52) 40%, rgba(8,8,8,0.80) 100%);
}
.hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 48px; width: 100%; max-width: 1340px; margin-top: -88px; }
/* Рейтинг Яндекса над текстом */
.hero-rating { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; }
.hero-rating__label { font-family: "Barlow Condensed", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
.hero-rating__badge { display: inline-flex; min-height: 50px; align-items: center; }
.hero-rating__badge iframe { display: block; border: 0; }

/* Надзаголовок — слоган (было заголовком), без чёрточек по бокам */
.hero-eyebrow { font-family: "Barlow Condensed", sans-serif; font-size: 26px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; text-shadow: 0 0 40px rgba(107,255,42,0.25); }
/* Заголовок — SEO H1 (было подзаголовком) */
.hero-title { font-family: "Barlow Condensed", sans-serif; font-size: clamp(30px, 4.5vw, 55px); font-weight: 900; line-height: 1.04; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; margin-bottom: 14px; text-shadow: 0 2px 24px rgba(0,0,0,0.55); max-width: 900px; }
.hero-title .accent { color: var(--green); text-shadow: 0 0 50px rgba(107,255,42,0.3); }
.title-break { display: none; }
.hero-subtitle { font-size: 19px; font-weight: 500; color: #dcdcdc; line-height: 1.5; margin-top: 4px; margin-bottom: 34px; max-width: 620px; letter-spacing: 0.005em; }
.hero-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; width: 100%; margin-bottom: 32px; }
.hcard { background: rgba(8,8,8,0.48); border: 1px solid var(--border); border-radius: 16px; backdrop-filter: blur(20px); padding: 22px 24px; text-align: left; transition: border-color 0.25s, background 0.25s, transform 0.2s; }
.hcard:hover { border-color: rgba(107,255,42,0.32); background: rgba(8,8,8,0.65); transform: translateY(-2px); }
.hcard-title { font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 600; color: rgba(240,240,240,0.95); line-height: 1.5; }
.hero-actions { display: flex; align-items: center; gap: 14px; }
.btn-primary { font-family: "Barlow Condensed", sans-serif; font-size: 16px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--black); background: var(--green); border: none; padding: 15px 42px; cursor: pointer; clip-path: polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%); transition: all 0.2s; text-decoration: none; display: inline-block; }
.btn-primary:hover { background: #85ff3a; box-shadow: 0 6px 24px rgba(107,255,42,0.3); }
.btn-ghost { font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.7); text-decoration: none; display: flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 14px 24px; backdrop-filter: blur(8px); transition: all 0.2s; }
.btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-outline { font-family: "Barlow Condensed", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); text-decoration: none; display: inline-block; border: 1px solid var(--green); padding: 12px 28px; transition: all 0.2s; }
.btn-outline:hover { background: rgba(107,255,42,0.1); }