/* ============================================
   Hero Sections
   ============================================ */

.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  background: var(--color-dark);
  overflow: hidden;
  color: var(--color-white);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(196,30,36,0.08) 0%, transparent 50%);
  pointer-events: none;
}

/* Geometric decorative shapes */
.hero::after {
  content: '';
  position: absolute;
  top: -10%;
  right: -5%;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 50%;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-full);
  padding: 8px 20px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-xl);
  backdrop-filter: blur(8px);
}

.hero h1 {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.1;
  margin-bottom: var(--space-lg);
}

.hero h1 span {
  color: var(--color-accent);
}

.hero p {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  opacity: 0.85;
  margin-bottom: var(--space-xl);
  max-width: 560px;
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Floating geometric elements */
.hero-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-shapes .shape {
  position: absolute;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
}

.hero-shapes .shape-1 {
  width: 300px; height: 300px;
  top: 10%; right: 10%;
  transform: rotate(15deg);
  animation: float 8s ease-in-out infinite;
}

.hero-shapes .shape-2 {
  width: 200px; height: 200px;
  bottom: 20%; right: 25%;
  transform: rotate(-10deg);
  animation: float 10s ease-in-out infinite reverse;
}

.hero-shapes .shape-3 {
  width: 150px; height: 150px;
  top: 40%; right: 5%;
  border-radius: 50%;
  animation: float 12s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(15deg); }
  50%      { transform: translateY(-20px) rotate(20deg); }
}

/* ── Sub-page Hero (smaller) ── */
.hero-sub {
  min-height: 45vh;
  padding-top: var(--nav-height);
  padding-bottom: var(--space-4xl);
  display: flex;
  align-items: center;
  background: var(--color-dark);
  position: relative;
  overflow: hidden;
  color: var(--color-white);
}

.hero-sub::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(196,30,36,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.hero-sub .container { position: relative; z-index: 1; }

.hero-sub h1 {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-md);
}

.hero-sub p {
  font-size: var(--font-size-lg);
  opacity: 0.8;
  max-width: 600px;
}

.hero-sub .divider {
  background: var(--color-accent);
  margin-bottom: var(--space-lg);
}