.hero { position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background-color: #0f0f10; min-height: 500px; }
.hero .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.hero .hero-bg .hero-bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; opacity: 0.70; filter: saturate(0.95) contrast(1.02); }
.hero .hero-bg .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(15, 15, 16, 0.82) 0%, rgba(15, 15, 16, 0.55) 55%, rgba(15, 15, 16, 0.35) 100%); pointer-events: none; }

.hero .hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 48px 20px 56px; width: 100%; box-sizing: border-box; }

.hero .hero-content .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 3px; margin-bottom: 18px; background-color: rgba(15, 15, 16, 0.5); }
.hero .hero-content .hero-eyebrow .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background-color: #c8102e; box-shadow: 0 0 8px rgba(200, 16, 46, 0.6); flex-shrink: 0; }
.hero .hero-content .hero-eyebrow .eyebrow-text { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #d4af37; }

.hero .hero-content .hero-heading { font-size: 32px; font-weight: 900; color: #ffffff; line-height: 38px; margin: 0 0 16px; max-width: 760px; letter-spacing: -0.5px; }
.hero .hero-content .hero-heading .hero-highlight { color: #d4af37; }

.hero .hero-content .hero-subheading { font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, 0.88); max-width: 620px; margin: 0 0 24px; }

.hero .hero-content .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.hero .hero-content .hero-actions .hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; transition: transform 0.2s ease, box-shadow 0.3s ease, color 0.2s ease, border-color 0.2s ease, background-color 0.25s ease; }
.hero .hero-content .hero-actions .hero-cta.cta-primary { color: #ffffff; background: linear-gradient(135deg, #c8102e, #a00d24); padding: 14px 22px; border-radius: 4px; box-shadow: 0 4px 16px rgba(200, 16, 46, 0.25); }
.hero .hero-content .hero-actions .hero-cta.cta-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(200, 16, 46, 0.35); color: #ffffff; }
.hero .hero-content .hero-actions .hero-cta.cta-primary .cta-rank { display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; background-color: rgba(0, 0, 0, 0.24); color: #ffffff; font-size: 11px; font-weight: 900; letter-spacing: 0.5px; border-radius: 3px; }
.hero .hero-content .hero-actions .hero-cta.cta-secondary { color: #ffffff; background-color: rgba(255, 255, 255, 0.04); padding: 13px 22px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.32); }
.hero .hero-content .hero-actions .hero-cta.cta-secondary:hover { color: #ffffff; background-color: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.7); transform: translateY(-1px); }
.hero .hero-content .hero-actions .hero-cta .cta-arrow { width: 16px; height: 16px; transition: transform 0.3s ease; }
.hero .hero-content .hero-actions .hero-cta:hover .cta-arrow { transform: translateX(3px); }

.hero .hero-content .hero-trust { font-size: 12px; line-height: 20px; color: rgba(255, 255, 255, 0.62); margin: 14px 0 0; letter-spacing: 0.2px; }
.hero .hero-content .hero-trust .trust-sep { margin: 0 6px; color: rgba(255, 255, 255, 0.28); }
.hero .hero-content .hero-trust .trust-link { color: #d4af37; text-decoration: none; border-bottom: 1px solid rgba(212, 175, 55, 0.35); padding-bottom: 1px; transition: color 0.25s ease, border-color 0.25s ease; }
.hero .hero-content .hero-trust .trust-link:hover { color: #e8c84a; border-color: rgba(212, 175, 55, 0.7); }
.hero .hero-content .hero-badges { font-size: 10px; line-height: 16px; color: rgba(255, 255, 255, 0.5); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin: 10px 0 0; }
.hero .hero-content .hero-badges .badge-sep { margin: 0 8px; color: rgba(255, 255, 255, 0.22); }

.hero .hero-content .hero-logos { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hero .hero-content .hero-logos .hero-logos-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #d4af37; }
.hero .hero-content .hero-logos .hero-logos-list { display: flex; flex-wrap: wrap; gap: 16px 24px; }
.hero .hero-content .hero-logos .hero-logos-list .hero-logo-name { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.3px; }

@media (min-width: 768px) {
  .hero { min-height: 600px; }
  .hero .hero-content { padding: 88px 40px 96px; }
  .hero .hero-content .hero-eyebrow { padding: 8px 18px; margin-bottom: 22px; }
  .hero .hero-content .hero-eyebrow .eyebrow-text { font-size: 11px; letter-spacing: 2.5px; }
  .hero .hero-content .hero-heading { font-size: 46px; line-height: 54px; letter-spacing: -1.25px; margin-bottom: 18px; max-width: 820px; }
  .hero .hero-content .hero-subheading { font-size: 17px; line-height: 28px; margin-bottom: 28px; }
  .hero .hero-content .hero-actions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px; }
  .hero .hero-content .hero-actions .hero-cta.cta-primary { font-size: 15px; padding: 16px 28px; }
  .hero .hero-content .hero-actions .hero-cta.cta-secondary { font-size: 15px; padding: 15px 27px; }
  .hero .hero-content .hero-trust { font-size: 13px; margin-top: 18px; }
  .hero .hero-content .hero-logos { margin-top: 40px; gap: 14px; }
  .hero .hero-content .hero-logos .hero-logos-label { font-size: 11px; letter-spacing: 2.5px; }
  .hero .hero-content .hero-logos .hero-logos-list { gap: 32px; }
  .hero .hero-content .hero-logos .hero-logos-list .hero-logo-name { font-size: 14px; }
}

@media (min-width: 1024px) {
  .hero { min-height: 640px; }
  .hero .hero-content { padding: 104px 40px 112px; }
  .hero .hero-content .hero-heading { font-size: 52px; line-height: 60px; letter-spacing: -1.5px; }
  .hero .hero-content .hero-subheading { font-size: 18px; line-height: 30px; }
}