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

/* Main Hero (Homepage) */
.dm-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--dm-bg-primary);
  transition: background-color var(--dm-transition-theme);
}

.dm-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.dm-hero__bg canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dm-hero__gradient {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.15;
  transition: opacity var(--dm-transition-theme);
}

.dm-hero__gradient--1 {
  top: -200px;
  right: -100px;
  background: var(--dm-primary);
}

.dm-hero__gradient--2 {
  bottom: -200px;
  left: -100px;
  background: var(--dm-accent);
  opacity: 0.1;
}

[data-theme="dark"] .dm-hero__gradient {
  opacity: 0.08;
}

/* Grid pattern overlay */
.dm-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--dm-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--dm-border) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.3;
  transition: opacity var(--dm-transition-theme);
}

[data-theme="dark"] .dm-hero__grid {
  opacity: 0.08;
}

.dm-hero__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding-top: var(--dm-space-16);
  padding-bottom: var(--dm-space-16);
}

@media (min-width: 768px) {
  .dm-hero__content {
    padding-top: var(--dm-space-20);
    padding-bottom: var(--dm-space-20);
  }
}

.dm-hero__label {
  display: inline-flex;
  align-items: center;
  gap: var(--dm-space-2);
  padding: var(--dm-space-2) var(--dm-space-4);
  font-size: var(--dm-text-sm);
  font-weight: var(--dm-font-medium);
  color: var(--dm-primary);
  background-color: var(--dm-primary-50);
  border-radius: var(--dm-radius-full);
  margin-bottom: var(--dm-space-6);
  transition: background-color var(--dm-transition-theme);
}

[data-theme="dark"] .dm-hero__label {
  background-color: rgba(37, 128, 187, 0.15);
}

.dm-hero__label svg {
  width: 16px;
  height: 16px;
}

.dm-hero__title {
  margin-bottom: var(--dm-space-5);
}

.dm-hero__title-accent {
  color: var(--dm-primary);
}

.dm-hero__subtitle {
  font-size: var(--dm-text-lg);
  color: var(--dm-text-secondary);
  line-height: var(--dm-leading-relaxed);
  margin-bottom: var(--dm-space-8);
  max-width: 560px;
}

@media (min-width: 768px) {
  .dm-hero__subtitle {
    font-size: var(--dm-text-xl);
  }
}

.dm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dm-space-3);
}

/* Stats bar */
.dm-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dm-space-8);
  margin-top: var(--dm-space-12);
  padding-top: var(--dm-space-8);
  border-top: 1px solid var(--dm-border);
  transition: border-color var(--dm-transition-theme);
}

.dm-hero__stat-value {
  font-size: var(--dm-text-3xl);
  font-weight: var(--dm-font-extrabold);
  color: var(--dm-text-primary);
  line-height: 1;
  margin-bottom: var(--dm-space-1);
}

.dm-hero__stat-label {
  font-size: var(--dm-text-sm);
  color: var(--dm-text-tertiary);
}

/* Page Hero (shorter variant for inner pages) */
.dm-hero--page {
  min-height: auto;
  padding-top: var(--dm-space-16);
  padding-bottom: var(--dm-space-12);
}

@media (min-width: 768px) {
  .dm-hero--page {
    padding-top: var(--dm-space-20);
    padding-bottom: var(--dm-space-16);
  }
}

.dm-hero--page .dm-hero__content {
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.dm-hero--page .dm-hero__subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* Scroll indicator */
.dm-hero__scroll {
  position: absolute;
  bottom: var(--dm-space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dm-space-2);
  color: var(--dm-text-tertiary);
  font-size: var(--dm-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  animation: dm-bounce 2s ease infinite;
}

.dm-hero__scroll svg {
  width: 20px;
  height: 20px;
}

@keyframes dm-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

@media (max-width: 767px) {
  .dm-hero__scroll {
    display: none;
  }
}