/* ============================================
   GerSite — Hero Section Styles
   ============================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--navbar-height) + var(--space-16)) 0 var(--space-16);
  overflow: hidden;
}

/* Background layers */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-gradient {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
}

.hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(249, 115, 22, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249, 115, 22, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.hero__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  animation: float 8s ease-in-out infinite;
}

.hero__bg-orb--1 {
  width: 400px;
  height: 400px;
  background: var(--color-orange-600);
  top: -100px;
  right: 10%;
  animation-delay: 0s;
}

.hero__bg-orb--2 {
  width: 300px;
  height: 300px;
  background: var(--color-orange-700);
  bottom: -50px;
  left: 5%;
  animation-delay: -3s;
}

.hero__bg-orb--3 {
  width: 200px;
  height: 200px;
  background: var(--color-amber-500);
  top: 30%;
  left: 50%;
  animation-delay: -5s;
  opacity: 0.15;
}

/* Photo background: server corridor */
.hero__server {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

/* The photo lives on its own ::before layer so its hue-rotate filter does
   NOT bleed onto the orange light dots layered above it */
.hero__server--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* WebP for browsers that support it (smaller, same quality), JPEG fallback */
  background-image: url("../assets/servidoresweb.jpg");
  background-image: image-set(
    url("../assets/servidoresweb.webp") type("image/webp"),
    url("../assets/servidoresweb.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center;
  /* Shift the source photo's blue neon to brand orange (~205deg -> ~25deg hue) */
  filter: hue-rotate(178deg) saturate(1.5) brightness(0.9) contrast(1.05);
  opacity: 0.6;
}

/* Scrim: darkens only the middle band where the text sits, so the
   top and bottom of the photo stay bright and visible */
.hero__server::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(10, 10, 10, 0.35) 0%,
    rgba(10, 10, 10, 0.20) 18%,
    rgba(10, 10, 10, 0.62) 34%,
    rgba(10, 10, 10, 0.68) 50%,
    rgba(10, 10, 10, 0.62) 66%,
    rgba(10, 10, 10, 0.20) 82%,
    rgba(10, 10, 10, 0.4) 100%);
}

/* Rising particles/sparks drifting up through the corridor */
.hero__server-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero__particle {
  position: absolute;
  left: var(--x);
  bottom: -5%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 214, 170, 1);
  box-shadow: 0 0 10px 3px rgba(249, 115, 22, 0.8);
  animation: heroParticleRise var(--dur, 8s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes heroParticleRise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-115vh) translateX(20px); opacity: 0; }
}

/* Green server-status LEDs blinking on the racks */
.hero__server-leds {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__led {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--sz, 7px);
  height: var(--sz, 7px);
  margin: calc(var(--sz, 7px) / -2) 0 0 calc(var(--sz, 7px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(134, 239, 172, 1) 0%, rgba(34, 197, 94, 0.9) 45%, transparent 75%);
  box-shadow: 0 0 calc(var(--sz, 7px) * 1.4) calc(var(--sz, 7px) * 0.4) rgba(34, 197, 94, 0.85);
  animation: heroLedBlink 1.6s steps(1, end) infinite;
  animation-delay: var(--delay, 0s);
}

/* Deeper racks: smaller LEDs for a sense of distance */
.hero__led--mid { --sz: 5px; }
.hero__led--far { --sz: 3px; }

@keyframes heroLedBlink {
  0%, 55% { opacity: 1; }
  60%, 100% { opacity: 0.12; }
}


/* Content */
.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  text-shadow: 0 2px 24px rgba(10, 10, 10, 0.6);
}

.hero__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-mono);
  text-transform: uppercase;
  color: var(--color-orange-400);
  margin-bottom: var(--space-8);
  animation: fadeInDown 0.6s ease 0.2s both;
}

.hero__label-dot {
  width: 6px;
  height: 6px;
  background: var(--color-green-500);
  border-radius: var(--radius-full);
  box-shadow: 0 0 8px var(--color-green-500);
}

.hero__title {
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
  animation: fadeInUp 0.6s ease 0.3s both;
}

.hero__title .highlight {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__subtitle {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: 0 auto var(--space-10);
  line-height: var(--line-height-relaxed);
  animation: fadeInUp 0.6s ease 0.4s both;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
  animation: fadeInUp 0.6s ease 0.5s both;
}

.hero__stats {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  animation: fadeInUp 0.6s ease 0.6s both;
}

.hero__stat {
  text-align: center;
}

.hero__stat-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-primary);
}

.hero__stat-value .accent {
  color: var(--color-orange-400);
}

.hero__stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Responsive */
@media (max-width: 1024px) {
  .hero__title {
    font-size: var(--font-size-5xl);
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: calc(var(--navbar-height) + var(--space-12)) 0 var(--space-12);
  }
  .hero__title {
    font-size: var(--font-size-4xl);
  }
  .hero__subtitle {
    font-size: var(--font-size-lg);
  }
  .hero__actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .hero__stats {
    gap: var(--space-8);
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: var(--font-size-3xl);
  }
  .hero__stats {
    flex-direction: column;
    gap: var(--space-4);
  }
}

/* ========== CTA Section ========== */
.cta-section {
  position: relative;
  padding: var(--space-24) 0;
  text-align: center;
  overflow: hidden;
}

.cta-section__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(249, 115, 22, 0.08) 0%, transparent 70%);
}

.cta-section__content {
  position: relative;
  z-index: 1;
}

.cta-section__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--space-4);
}

.cta-section__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 500px;
  margin: 0 auto var(--space-8);
}

@media (max-width: 768px) {
  .cta-section__title {
    font-size: var(--font-size-3xl);
  }
}