.hero { position: relative; padding: 60px 0 80px; background: #0A1628; color: #FFFFFF; overflow: hidden; }
.hero .hero-bg { position: absolute; inset: 0; background-image: url("../images/hero.jpg"); background-size: cover; background-position: center; opacity: 0.3; }
.hero .hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 22, 40, 0.95) 0%, rgba(10, 22, 40, 0.7) 50%, rgba(41, 98, 255, 0.4) 100%); }
.hero .hero-stripe { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #00C853 0%, #00C853 50%, #2962FF 50%, #2962FF 100%); z-index: 2; }
.hero .hero-inner { position: relative; z-index: 3; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.hero .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(0, 200, 83, 0.15); border: 1px solid rgba(0, 200, 83, 0.4); border-radius: 100px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: #00E866; margin-bottom: 24px; }
.hero .hero-eyebrow .eyebrow-dot { width: 8px; height: 8px; background: #00E866; border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
.hero .hero-title { font-size: 30px; font-weight: 900; line-height: 1.1; letter-spacing: -1px; margin-bottom: 20px; max-width: 800px; color: #FFFFFF; }
.hero .hero-title .title-accent { color: #FFFFFF; display: inline-block; position: relative; }
.hero .hero-title .title-blue { color: #FFFFFF; }
.hero .hero-lead { font-size: 18px; line-height: 1.5; color: #FFFFFF; max-width: 620px; margin-bottom: 32px; }
.hero .hero-lead strong { color: #FFFFFF; }
.hero .hero-eyebrow, .hero .hero-actions, .hero .hero-stats { color: #FFFFFF; }
.hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; }
.hero .hero-actions .cta-button.cta-secondary { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.3); }
.hero .hero-actions .cta-button.cta-secondary:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.6); box-shadow: none; }

.hero .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.hero .hero-stats .hero-stat .stat-value { font-size: 28px; font-weight: 900; color: #00E866; line-height: 1; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.hero .hero-stats .hero-stat .stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.6); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

.subhero { background: #F7F9FC; padding: 20px 0 20px; border-bottom: 1px solid #E1E8F0; position: relative; overflow: hidden; }
.subhero .subhero-stripe { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #00C853 0%, #00C853 50%, #2962FF 50%, #2962FF 100%); }
.subhero .subhero-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.subhero .subhero-breadcrumb { font-size: 13px; color: #5A6A7E; margin-bottom: 16px; font-weight: 600; }
.subhero .subhero-breadcrumb .breadcrumb-link { color: #2962FF; }
.subhero .subhero-breadcrumb .breadcrumb-sep { margin: 0 8px; color: #B0BCC9; }
.subhero .subhero-title { font-size: 26px; font-weight: 900; line-height: 1.15; letter-spacing: -0.5px; color: #0A1628; margin-bottom: 12px; }
.subhero .subhero-title .title-accent { color: inherit; }
.subhero .subhero-lead { font-size: 17px; color: #5A6A7E; max-width: 720px; line-height: 1.5; }

@media (min-width: 768px) {
  .hero { padding: 100px 0 120px; }
  .hero .hero-title { font-size: 46px; letter-spacing: -1.5px; }
  .hero .hero-lead { font-size: 20px; }
  .hero .hero-stats { gap: 32px; }
  .hero .hero-stats .hero-stat .stat-value { font-size: 40px; }
  .subhero { padding: 28px 0 28px; }
  .subhero .subhero-title { font-size: 36px; letter-spacing: -1px; }
}

@media (min-width: 1024px) {
  .hero { padding: 140px 0 160px; }
  .hero .hero-title { font-size: 56px; }
}