/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  background-image: linear-gradient(135deg, rgba(8,8,8,0.88) 0%, rgba(139,0,0,0.35) 50%, rgba(8,8,8,0.92) 100%), url('../../images/hero_img/hero_img.png');
  background-size: cover;
  background-position: center;
}
.hero::before {
  content: '';
  position: absolute; top: -30%; right: -8%; width: 55%; height: 180%;
  background: linear-gradient(135deg, transparent 45%, rgba(183,28,28,0.16) 45%, rgba(183,28,28,0.16) 55%, transparent 55%);
  transform: skewX(-12deg);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 55% 45%; align-items: center; gap: var(--space-10); padding-block: var(--space-24) var(--space-16); }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red-300); border: 1px solid var(--color-border-red); background: rgba(183,28,28,0.1);
  padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: var(--space-6);
}
.hero__title {
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: var(--fw-black); text-transform: uppercase; line-height: var(--lh-tight); letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}
.hero__title em { font-style: normal; color: var(--color-accent); text-shadow: 0 0 40px var(--red-glow); }
.hero__sub { font-size: var(--text-lg); color: var(--color-text-secondary); max-width: 520px; margin-bottom: var(--space-8); }
.hero__ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.hero__tg-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 11px 20px; border-radius: var(--radius-pill);
  background: rgba(41,182,246,0.10); color: #29B6F6;
  border: 1px solid rgba(41,182,246,0.35);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: 0.03em;
  margin-bottom: var(--space-8);
  transition: all var(--dur-base) var(--ease-out);
}
.hero__tg-btn:hover { transform: translateY(-2px); background: rgba(41,182,246,0.18); box-shadow: 0 6px 20px rgba(41,182,246,0.3); }
.hero__trust { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.hero__trust span { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.hero__trust svg { color: var(--color-accent); flex-shrink: 0; }

/* .hero__art uses the shared .mockup-float float+glow animation (see main.css) */

.hero__eyebrow, .hero__title, .hero__sub, .hero__ctas, .hero__tg-btn, .hero__trust {
  opacity: 0; transform: translateY(24px);
  animation: fade-up var(--dur-slow) var(--ease-out) forwards;
}
.hero__eyebrow { animation-delay: 0.1s; }
.hero__title  { animation-delay: 0.3s; }
.hero__sub    { animation-delay: 0.5s; }
.hero__ctas   { animation-delay: 0.7s; }
.hero__tg-btn { animation-delay: 0.8s; }
.hero__trust  { animation-delay: 0.9s; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; padding-block: var(--space-16) var(--space-10); }
  .hero__sub { margin-inline: auto; }
  .hero__ctas, .hero__trust { justify-content: center; }
  .hero__tg-btn { margin-inline: auto; }
  .hero__art { order: -1; margin-bottom: var(--space-6); }
  .hero__art img { width: clamp(140px, 38vw, 200px); }
  .hero__art::before { width: 60%; }
}

/* ---------- BONUS CTA BAND (home variant already uses .cta-band from main.css) ---------- */