/*
 * Component: Hero
 * Depends on: tokens.css
 * Style this when you provide the screenshot for the hero design.
 */

.hero-section {
  background: var(--color-bg);
  padding: var(--space-16) var(--space-6);
  overflow: hidden;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.hero-content { flex: 1; }

.hero-tagline {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-primary);
  background: var(--color-primary-muted);
  border: 1px solid rgba(232,11,19,0.2);
  padding: 5px 16px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.hero-title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-dark);
  margin: 0 0 var(--space-4);
}

.hero-title-brand { color: var(--color-primary); }

.hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0 0 var(--space-4);
}

.hero-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-loose);
  max-width: 540px;
  margin: 0 0 var(--space-6);
}

.hero-buttons { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-8); }

.hero-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: all var(--transition-base);
}

.hero-btn-primary { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-primary); }
.hero-btn-primary:hover { background: var(--color-primary-dark); color: #fff; transform: translateY(-2px); }

.hero-btn-outline {
  background: transparent; color: var(--color-dark);
  border: 2px solid var(--color-border-strong);
}
.hero-btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

.hero-stats { display: flex; gap: var(--space-8); flex-wrap: wrap; }

.hero-stat-item { display: flex; flex-direction: column; gap: 2px; }
.hero-stat-item a { text-decoration: none; color: inherit; }
.hero-stat-num { font-size: var(--font-size-2xl); font-weight: var(--font-weight-extrabold); color: var(--color-primary); }
.hero-stat-label { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); }

.hero-image-wrap { flex-shrink: 0; position: relative; width: 400px; }
.hero-img { width: 100%; border-radius: var(--radius-2xl); object-fit: cover; }

.hero-badge {
  position: absolute;
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: var(--radius-full);
  background: #fff; box-shadow: var(--shadow-md);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  color: var(--color-dark); text-decoration: none;
  white-space: nowrap;
  transition: transform var(--transition-fast);
}

.hero-badge:nth-child(2)  { top: 10%;  left: -10%; }
.hero-badge:nth-child(3)  { top: 30%;  right: -8%; }
.hero-badge:nth-child(4)  { bottom: 30%; left: -12%; }
.hero-badge:nth-child(5)  { bottom: 10%; right: -5%; }
.hero-badge:nth-child(6)  { top: 55%;  left: -8%; }
.hero-badge:hover { transform: scale(1.05); }

@media (max-width: 900px) {
  .hero-inner { flex-direction: column; }
  .hero-image-wrap { width: 100%; }
}

@media (max-width: 600px) {
  .hero-section { padding: var(--space-10) var(--space-4); }
  .hero-stats { gap: var(--space-5); }
}