/* ══════════════════════════════════════════════════════════════
   LANDING PAGE: HERO SECTION
   
   Hero section styling for the landing page:
   - Hero grid layout with content and visual columns
   - Animated title with gradient text
   - Eyebrow text above hero title
   - Subtitle and call-to-action sections
   
   Depends on:
   - design-system.css (CSS custom properties)
   - animations.css (vs-fade-in keyframe)
   ══════════════════════════════════════════════════════════════ */

/* Hero Section */
.vs-hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--vs-space-2xl);
  align-items: center;
  margin-bottom: var(--vs-space-4xl);
  position: relative;
}

.vs-hero__content {
  animation: vs-fade-in 0.8s var(--vs-transition-gentle);
}

.vs-hero__title {
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  margin: 0 0 var(--vs-space-md);
  background: linear-gradient(135deg, var(--vs-text) 0%, var(--vs-text-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vs-hero__subtitle {
  font-size: var(--vs-text-md);
  margin-bottom: var(--vs-space-xl);
  color: var(--vs-text-secondary);
  max-width: 540px;
}

.vs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vs-space-md);
}

.vs-hero__visual {
  position: relative;
  animation: vs-fade-in 1s var(--vs-transition-gentle) 0.2s backwards;
}

.vs-hero__image {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 50px rgba(230, 154, 71, 0.15));
  transition: transform var(--vs-transition-slow);
}

.vs-hero__image:hover {
  transform: scale(1.02) translateY(-4px);
}

.vs-eyebrow {
  font-size: var(--vs-text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vs-accent);
  margin-bottom: var(--vs-space-sm);
  font-weight: 600;
  display: inline-block;
}