/* --- Homepage Hero --- */
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 7vw, 5rem);
  border: 1px solid var(--border-ghost);
  border-left: 3px solid var(--accent-green);
  background:
    radial-gradient(ellipse at 90% 0%, rgba(0, 255, 255, 0.1), transparent 45%),
    linear-gradient(135deg, rgba(18, 18, 18, 0.94), rgba(9, 9, 11, 0.88));
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.24);
}

.home-hero-eyebrow {
  color: var(--accent-green) !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-hero-eyebrow span {
  color: var(--accent-cyan);
  margin-right: 0.45rem;
}

.home-hero h1.display-5 {
  position: relative;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(2.25rem, 7vw, 5rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
  color: #ffffff !important;
  text-shadow:
    0 0 2px #ffffff,
    0 0 8px var(--accent-cyan);
}

.home-hero h1.display-5::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  color: transparent;
  padding: inherit;
  line-height: inherit;
  text-align: inherit;
  text-shadow:
    0 0 12px var(--accent-cyan),
    0 0 28px var(--accent-cyan);

  opacity: 0;
  will-change: opacity;
  animation: neonPowerSequence 10s infinite;
}

.home-hero-tagline {
  max-width: 45rem;
  line-height: 1.8;
  font-size: 1rem;
}

.home-hero-actions .btn {
  min-width: 9rem;
}

@media (max-width: 575.98px) {
  .home-hero {
    padding: 2rem 1.25rem;
  }
}

/* =========================================================
   IGNITE -> SURGE -> AMBIENT/Flicker
   ========================================================= */
@keyframes neonPowerSequence {
  /* --- Phase 1: Ignition clicks (0s - 1.5s) --- */
  0%, 2%   { opacity: 0.1; }
  3%, 6%   { opacity: 0.9; }
  7%, 9%   { opacity: 0.1; }
  10%, 13% { opacity: 0.9; }
  14%, 18% { opacity: 0.2; }

  /* --- Phase 2: Warm-up & Voltage Surge (1.8s - 2.5s) --- */
  19%, 23% { opacity: 0.4; }
  24%      { opacity: 1.0; }
  25%      { opacity: 0.3; }
  26%      { opacity: 1.0; }

  /* --- Phase 3: Steady Ambient Glow (2.6s - 6.5s) --- */
  27%, 65% { opacity: 0.95; }

  /* --- Phase 4: High-voltage electrical buzz (6.6s - 7.0s) --- */
  66%      { opacity: 0.5; }
  67%      { opacity: 1.0; }
  68%      { opacity: 0.4; }
  69%, 70% { opacity: 0.95; }

  /* --- Phase 5: Subtle relaxation back to cycle end --- */
  85%      { opacity: 0.85; }
  100%     { opacity: 0.95; }
}
/* --- end of homepage hero --- */