/* Hero – VOID Agency */

.hero {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-bg);
}

/* Grid background */
.hero__bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212, 255, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 255, 0, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Gradient vignette */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, var(--color-bg) 90%);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-24);
}

.hero__overline {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  margin-bottom: var(--space-6);
  letter-spacing: 0.1em;
}

.hero__title {
  font-size: clamp(var(--font-size-4xl), 7vw, var(--font-size-7xl));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin-bottom: var(--space-8);
  max-width: 800px;
}

.typewriter-dynamic {
  color: var(--color-accent);
  position: relative;
}

.typewriter-dynamic::after {
  content: '|';
  animation: blink 0.8s step-end infinite;
  color: var(--color-accent);
  margin-left: 2px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.hero__desc {
  font-size: clamp(var(--font-size-base), 2vw, var(--font-size-xl));
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  max-width: 520px;
  margin-bottom: var(--space-10);
}

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

/* ===== MARQUEE ===== */
.hero__marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-4);
  background-color: var(--color-surface);
}

.marquee__track {
  display: flex;
  gap: var(--space-8);
  width: max-content;
  animation: marquee 20s linear infinite;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marquee__track span {
  flex-shrink: 0;
  white-space: nowrap;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hero__marquee:hover .marquee__track {
  animation-play-state: paused;
}