#hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  background: #000;
}

#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #000;
}

#hero > .absolute.inset-0.z-0:first-child:not(.bg-black) {
  opacity: 0 !important;
  visibility: hidden;
  display: none !important;
}

#hero > .absolute.inset-0.z-0.bg-black:first-child {
  background: #000 !important;
}

#hero .hero-fluid-background {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 38%, rgb(255 160 0 / 0.28), transparent 42%),
    radial-gradient(ellipse at 68% 54%, rgb(255 160 0 / 0.36), transparent 46%),
    radial-gradient(ellipse at 52% 44%, rgb(255 160 0 / 0.18), transparent 38%),
    linear-gradient(135deg, #000 0%, #1d0d00 54%, #000 100%);
}

#hero .hero-fluid-background__canvas {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  filter: saturate(1.25) brightness(1.12);
}

#hero .hero-fluid-background--medium .hero-fluid-background__canvas {
  filter: saturate(1.14) brightness(1.06);
}

#hero .hero-fluid-background--low .hero-fluid-background__canvas,
#hero .hero-fluid-background--static .hero-fluid-background__canvas {
  filter: none;
}

#hero .hero-fluid-background--fallback::before {
  content: "";
  position: absolute;
  inset: -16%;
  background:
    radial-gradient(ellipse at 24% 36%, rgb(255 160 0 / 0.8), transparent 34%),
    radial-gradient(ellipse at 58% 46%, rgb(255 160 0 / 0.62), transparent 38%),
    radial-gradient(ellipse at 64% 44%, rgb(255 160 0 / 0.42), transparent 32%),
    linear-gradient(115deg, #000 0%, #271100 46%, #140800 68%, #000 100%);
  filter: blur(16px);
}

#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.34) 0%, rgb(0 0 0 / 0.12) 38%, rgb(0 0 0 / 0.5) 100%);
}

#hero > .text-center.z-10,
#hero .hero-actions,
#hero .hero-brand-title {
  position: relative;
}

#hero > .text-center.z-10 {
  z-index: 10;
  text-shadow: none;
}

#hero .hero-brand-title {
  filter: none;
}

#hero .text-muted-foreground {
  color: rgb(214 220 218 / 0.68) !important;
}

#hero .hero-actions {
  z-index: 12;
  width: 100%;
  box-sizing: border-box;
  filter: drop-shadow(0 16px 36px rgb(0 0 0 / 0.42));
}

#hero .hero-action-btn {
  isolation: isolate;
  border-color: rgb(255 255 255 / 0.28);
  background: rgb(255 255 255 / 0.08);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 0.24),
    inset 0 -1px rgb(0 0 0 / 0.22),
    0 14px 42px rgb(0 0 0 / 0.48),
    0 0 24px rgb(255 255 255 / 0.06);
}

#hero .hero-action-btn:hover,
#hero .hero-action-btn:focus-visible {
  border-color: rgb(255 185 82 / 0.62);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 0.34),
    inset 0 -1px rgb(0 0 0 / 0.2),
    0 18px 48px rgb(0 0 0 / 0.56),
    0 0 36px rgb(255 116 28 / 0.18);
}

#hero .hero-action-btn--contact,
#hero .magnetic-btn:last-child {
  box-shadow:
    inset 0 1px 3px rgb(255 255 255 / 0.92),
    inset 0 -10px 24px rgb(255 150 34 / 0.2),
    0 0 24px rgb(255 220 148 / 0.44),
    0 0 42px rgb(255 102 0 / 0.2),
    0 14px 38px rgb(0 0 0 / 0.6) !important;
}

@media (hover: hover) and (pointer: fine) {
  #hero {
    cursor: none;
  }
}

@media (hover: none), (pointer: coarse), (max-width: 767px) {
  #hero .hero-brand-title {
    filter: none;
  }

  #hero .hero-actions {
    padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
  }
}

html[data-performance-tier="medium"] .grain-overlay,
html[data-performance-tier="low"] .grain-overlay,
html[data-performance-tier="static"] .grain-overlay {
  opacity: 0;
}

html[data-performance-tier="low"] .liquid-glass,
html[data-performance-tier="static"] .liquid-glass,
html[data-performance-tier="low"] .magnetic-btn,
html[data-performance-tier="static"] .magnetic-btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px rgb(255 255 255 / 0.12), 0 8px 24px rgb(0 0 0 / 0.24) !important;
  transition-duration: 160ms !important;
}

html[data-performance-tier="low"] #hero .hero-action-btn,
html[data-performance-tier="static"] #hero .hero-action-btn {
  box-shadow:
    inset 0 1px rgb(255 255 255 / 0.18),
    0 10px 28px rgb(0 0 0 / 0.42) !important;
}

html[data-performance-tier="low"] .chatbot-card,
html[data-performance-tier="static"] .chatbot-card {
  box-shadow: inset 0 1px hsl(0 0% 100% / 0.08), 0 14px 38px hsl(0 0% 0% / 0.28) !important;
  will-change: auto !important;
}

@media (hover: none), (pointer: coarse) {
  .magnetic-btn,
  .liquid-glass,
  .chatbot-card,
  .group img {
    transition-duration: 180ms !important;
  }

  .magnetic-btn:hover,
  .liquid-glass:hover,
  .chatbot-card:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grain-overlay {
    display: none !important;
  }

  .magnetic-btn,
  .liquid-glass,
  .chatbot-card,
  #hero .hero-action-btn {
    transition: none !important;
    animation: none !important;
  }
}