/* Decorative layers never intercept the product controls. */
.hero { isolation: isolate; }
.hero-spotlight {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, #00a4ae1c, #00a4ae08 40%, transparent 70%);
  transform: translate3d(calc(var(--spot-x, 0px) - 50%), calc(var(--spot-y, 0px) - 50%), 0);
  opacity: var(--spot-visible, 0);
  transition: opacity 450ms ease;
  pointer-events: none;
}
[data-theme="dark"] .hero-spotlight {
  background: radial-gradient(circle, #25c5cd21, #25c5cd09 40%, transparent 70%);
}
.hero-grid, .platform-strip { position: relative; z-index: 1; }
.hero-visual { perspective: 1200px; }
.hero-depth {
  position: relative;
  z-index: 2;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 220ms ease-out;
}
.hero-preview::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--accent) 50%, transparent 95%);
  opacity: 0;
  pointer-events: none;
}
.signal-paths { opacity: .32; }
.signal-paths > path:not(.flow-path) { opacity: .35; }
.signal-paths > circle { fill: var(--accent); stroke: none; }
.signal-paths .flow-path {
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 8 92;
  stroke-dashoffset: 100;
  opacity: 0;
}
.button-primary { position: relative; overflow: hidden; isolation: isolate; }
.button-primary::after {
  content: "";
  position: absolute;
  inset: -25% -40%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, #ffffff45 50%, transparent 58%);
  transform: translateX(-85%);
  opacity: 0;
}
.hero h1 span { position: relative; display: inline-block; }
.hero h1 span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: .35;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .fx-ready .hero h1 span::after { animation: geo-underline 1.1s .25s both cubic-bezier(.2,.7,.2,1); }
  .fx-ready .hero .flow-path { animation: geo-flow 4.6s linear infinite; }
  .fx-ready .hero .flow-path:nth-of-type(5) { animation-delay: -1.5s; }
  .fx-ready .hero .flow-path:nth-of-type(6) { animation-delay: -3s; }
  .fx-ready .hero .signal-icon { animation: geo-float 6s ease-in-out infinite; }
  .fx-ready .hero .signal-chat { animation-delay: -2s; }
  .fx-ready .hero .signal-link { animation-delay: -4s; }
  .fx-ready .hero .hero-preview::before { animation: geo-scan 7.5s 1s ease-in-out infinite; }
  .fx-ready .hero .flow-path,
  .fx-ready .hero .signal-icon,
  .fx-ready .hero .hero-preview::before { animation-play-state: paused; }
  .fx-ready .hero[data-fx-paused="false"] .flow-path,
  .fx-ready .hero[data-fx-paused="false"] .signal-icon,
  .fx-ready .hero[data-fx-paused="false"] .hero-preview::before { animation-play-state: running; }
  .button-primary:hover::after,
  .button-primary:focus-visible::after { animation: geo-shine .7s ease-out; }
  .source-row, .action-card {
    transition: border-color .2s, background .2s, transform .2s;
  }
  .source-row:hover { transform: translateX(3px); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero[data-fx-paused="false"] .hero-depth { will-change: transform; }
}
@media (max-width: 767px) {
  .hero-spotlight { display: none; }
  .hero-visual { perspective: none; }
  .hero-depth { transform: none; }
  .signal-paths { opacity: .22; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-spotlight { display: none; }
  .hero-depth { transform: none; transition: none; }
  .signal-paths .flow-path, .hero-preview::before { display: none; }
  .hero h1 span::after { transform: scaleX(1); }
}
@keyframes geo-flow {
  0% { stroke-dashoffset: 100; opacity: 0; }
  12%, 82% { opacity: .95; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes geo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes geo-scan {
  0%, 12% { transform: translateY(60px); opacity: 0; }
  18% { opacity: .25; }
  55% { transform: translateY(530px); opacity: 0; }
  100% { transform: translateY(530px); opacity: 0; }
}
@keyframes geo-shine {
  0% { transform: translateX(-85%); opacity: 0; }
  20% { opacity: .7; }
  100% { transform: translateX(85%); opacity: 0; }
}
@keyframes geo-underline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}