/* ══════════════════════════════════════════════════════════════
   Hero Banner — static/css/components/hero.css
   Gradient hero section with decorative elements.
   Prefix: uc-hero.
   Uses design tokens from root.css.
   ══════════════════════════════════════════════════════════════ */

.uc-hero {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.uc-hero::after {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 250px;
  height: 250px;
  background: rgba(212, 180, 74, .15);
  border-radius: 50%;
  pointer-events: none;
}

.uc-hero::before {
  content: '';
  position: absolute;
  right: 60px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  background: rgba(255, 255, 255, .05);
  border-radius: 50%;
  pointer-events: none;
}

.uc-hero h1 {
  font-size: 32px;
  margin-bottom: 10px;
  position: relative;
}

.uc-hero p {
  font-size: 17px;
  opacity: .85;
  max-width: 500px;
  margin-bottom: 24px;
  position: relative;
}

.uc-hero .btn-uc-primary,
.uc-hero .btn-uc-accent,
.uc-hero .btn-uc-ghost {
  position: relative;
}