/* ══════════════════════════════════════════════════════════
   Hero — Dark blueprint hero band (3D and IT sites)
   NOT for sites/main (which uses its own full-page hero layout)
   ══════════════════════════════════════════════════════════ */

.hero-section {
  position: relative;
  background: var(--ink);
  padding: 120px 0 80px;
  margin-top: 56px;
  overflow: hidden;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 20, 35, 0.5) 100%);
  z-index: 1;
}

/* .hero-inner (3D) and .hero-content (IT) share this layout */
.hero-inner,
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(46, 158, 90, 0.7);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.hero-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 2.5s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(46, 158, 90, 0.4);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.5; box-shadow: 0 0 4px rgba(46, 158, 90, 0.2); }
  50% { opacity: 1; box-shadow: 0 0 12px rgba(46, 158, 90, 0.5); }
}

/* Canonical h1 — sites may override font-size */
.hero-section h1,
.hero-inner h1,
.hero-content h1 {
  color: var(--sheet);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-8);
  letter-spacing: -0.01em;
}

.hero-subtitle {
  color: rgba(200, 200, 212, 0.7);
  font-size: var(--font-size-lg);
  line-height: 1.8;
  margin-bottom: var(--space-10);
}

/* IT-specific hero description (not used on 3D) */
.hero-description {
  color: rgba(200, 200, 212, 0.45);
  font-size: var(--font-size-md);
  line-height: 1.7;
  margin-bottom: var(--space-10);
}

.hero-actions {
  display: flex;
  gap: var(--space-7);
  justify-content: center;
  flex-wrap: wrap;
}
.hero-actions .btn--primary {
  background: var(--line);
  color: var(--white);
}
.hero-actions .btn--primary:hover {
  background: var(--line-light);
  box-shadow: 0 4px 20px rgba(59, 130, 196, 0.25);
}
.hero-actions .btn--outline {
  border-color: rgba(106, 173, 223, 0.35);
  color: var(--line-light);
}
.hero-actions .btn--outline:hover {
  background: rgba(106, 173, 223, 0.1);
  border-color: rgba(106, 173, 223, 0.5);
  color: var(--white);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .hero-section { padding: 100px 0 56px; }
}

@media (max-width: 480px) {
  .hero-section { padding: 80px 0 40px; }
  .hero-status { font-size: 9px; }
  .hero-actions .btn--lg { padding: var(--space-5) var(--space-8); font-size: var(--font-size-base); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero-status__dot { animation: none; opacity: 1; }
}

/* ── Print ── */
@media print {
  .hero-section { margin-top: 0; }
}