/* =============================================================================
   10. SITE — HERO
   ============================================================================= */
/* Depends on: tokens.css, base/utilities.css (.grid-split, .stack, .cluster), base/motion.css (reveal-up, hero-float, trust-scroll keyframes). */
.hero {
  position: relative;
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 640px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent-soft) 0%, transparent 70%);
  filter: blur(10px);
  animation: glow-pulse 8s ease-in-out infinite;
}

.hero__grid {
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .hero__grid > :first-child {
    grid-column: span 5;
  }

  .hero__grid > :last-child {
    grid-column: span 7;
  }
}

.hero__content {
  position: relative;
  --stack-gap: clamp(1.25rem, 2.2vw, 1.9rem);
  animation: reveal-up 0.8s var(--ease-out-expo) both;
}

.hero__heading {
  font-size: var(--text-display);
  line-height: var(--lh-display);
}

.hero__heading-accent {
  color: var(--color-accent-strong);
}

.hero__lead {
  font-size: var(--text-lead-lg);
  line-height: var(--lh-body);
  max-width: 51ch;
}

.hero__actions {
  margin-top: var(--space-2);
}

.hero__visual {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}

/* No border, shadow, or radius: the source image already carries its own
   soft vignette, so wrapping it in a bordered/rounded/shadowed "card" box
   just double-frames it and reads as a placeholder container rather than
   a piece of art floating in the section. aspect-ratio matches the
   source file's actual 3:2 ratio so nothing gets cropped by object-fit. */
.hero__visual-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1.14 / 1;
  isolation: isolate;
}

/* Layered, CSS-built enterprise intelligence visualization. */
.hero__visual-aura { position: absolute; z-index: -2; inset: 12% 10%; border-radius: 50%; background: radial-gradient(circle, var(--color-accent-soft), color-mix(in oklch, var(--color-glow-soft), transparent 35%) 36%, transparent 72%); filter: blur(18px); opacity: .92; animation: glow-pulse 7s ease-in-out infinite; }
.hero__visual-orbit { position: absolute; z-index: -1; left: 50%; top: 50%; border: 1px solid var(--color-accent-border); border-radius: 50%; transform: translate(-50%, -50%); }
.hero__visual-orbit--outer { width: 72%; aspect-ratio: 1; border-style: dashed; opacity: .62; animation: hero-orbit 26s linear infinite; }
.hero__visual-orbit--inner { width: 44%; aspect-ratio: 1; border-color: color-mix(in oklch, var(--color-glow), transparent 45%); opacity: .75; animation: hero-orbit 17s linear reverse infinite; }
.hero__connections { position: absolute; inset: 5% 2% 3%; width: 96%; height: 92%; overflow: visible; }
.hero__connections path { stroke: var(--color-accent-border); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero__connections .hero__connection-pulse { stroke: var(--color-glow-strong); stroke-width: 2.5; stroke-dasharray: 12 240; filter: drop-shadow(0 0 4px var(--color-glow)); animation: hero-data-flow 4.4s linear infinite; }
.hero__connections .hero__connection-pulse--two { animation-delay: -1.1s; }.hero__connections .hero__connection-pulse--three { animation-delay: -2.2s; }.hero__connections .hero__connection-pulse--four { animation-delay: -3.3s; }
.hero__core-node { position: absolute; left: 50%; top: 50%; width: 82px; aspect-ratio: 1; border: 1px solid var(--color-accent-border); border-radius: 50%; background: color-mix(in oklch, var(--color-glass-strong), var(--color-accent-soft) 13%); box-shadow: 0 0 0 12px oklch(58% .2 278 / .05), 0 0 40px oklch(58% .2 278 / .28), var(--shadow-node); transform: translate(-50%, -50%); display: grid; place-items: center; backdrop-filter: blur(16px); }
.hero__core-node-ring { position: absolute; inset: 9px; border: 1px solid var(--color-accent); border-radius: inherit; animation: hero-spin 9s linear infinite; }.hero__core-node-label { position: relative; font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--color-accent-strong); letter-spacing: -.08em; }
.hero__dashboard { position: absolute; border: 1px solid color-mix(in oklch, var(--color-border), transparent 5%); border-radius: 18px; background: color-mix(in oklch, var(--color-glass-strong), transparent 10%); box-shadow: var(--shadow-panel), 0 1px 0 oklch(100% 0 0 / .45) inset; backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); }
.hero__dashboard--main { width: 56%; right: 2%; top: 8%; padding: 1rem; animation: hero-card-float 8s ease-in-out infinite; }.hero__dashboard--signal { width: 35%; left: 3%; top: 17%; padding: .75rem; animation: hero-card-float 9s -2.5s ease-in-out infinite; }.hero__dashboard--insights { width: 36%; left: 2%; bottom: 8%; padding: .75rem; animation: hero-card-float 9.5s -5.4s ease-in-out infinite; }.hero__dashboard--models { width: 31%; right: 4%; bottom: 9%; padding: .9rem; animation: hero-card-float 8.5s -4s ease-in-out infinite; }
.hero__dashboard-header { display: flex; justify-content: space-between; align-items: center; color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: .56rem; letter-spacing: var(--ls-label-lg); text-transform: uppercase; }.hero__dashboard-header i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-highlight); box-shadow: 0 0 8px var(--color-highlight); }
.hero__dashboard-mainline { height: 58px; margin: .85rem 0; border-bottom: 1px solid var(--color-border); background: linear-gradient(180deg, transparent, var(--color-accent-soft)); clip-path: polygon(0 76%, 18% 50%, 34% 68%, 53% 22%, 70% 48%, 100% 4%, 100% 100%, 0 100%); }.hero__dashboard-metrics { display: flex; justify-content: space-between; gap: .45rem; font-family: var(--font-mono); font-size: .5rem; color: var(--color-text-tertiary); }.hero__dashboard-metrics b { display: block; margin-bottom: .2rem; font-family: var(--font-heading); font-size: .86rem; color: var(--color-text-primary); }
.hero__signal-bars { height: 46px; display: flex; align-items: end; gap: 7%; margin-top: .65rem; }.hero__signal-bars span { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(to top, var(--color-accent), var(--color-glow)); opacity: .82; }.hero__signal-bars span:nth-child(1) { height: 36%; }.hero__signal-bars span:nth-child(2) { height: 62%; }.hero__signal-bars span:nth-child(3) { height: 46%; }.hero__signal-bars span:nth-child(4) { height: 88%; }.hero__signal-bars span:nth-child(5) { height: 58%; }.hero__signal-bars span:nth-child(6) { height: 74%; }
.hero__insights-chart { display: block; width: 100%; height: 39px; margin: .6rem 0 .45rem; overflow: visible; }.hero__insights-chart-area { fill: url(#hero-insights-fill); opacity: .32; }.hero__insights-chart-line { stroke: var(--color-glow-strong); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px var(--color-glow)); stroke-dasharray: 180; animation: hero-insight-draw 5s ease-in-out infinite; }
.hero__dashboard-kicker, .hero__dashboard-status { display: block; font-family: var(--font-mono); font-size: .52rem; color: var(--color-text-tertiary); letter-spacing: var(--ls-label-sm); text-transform: uppercase; }.hero__dashboard--models strong { display: block; margin: .3rem 0; font-family: var(--font-heading); font-size: 1.7rem; letter-spacing: -.08em; }.hero__dashboard-status { color: var(--color-highlight); }
.hero__data-node { position: absolute; width: 10px; aspect-ratio: 1; border: 2px solid var(--color-glass-strong); border-radius: 50%; background: var(--color-glow); box-shadow: 0 0 14px var(--color-glow); animation: glow-pulse 2.8s ease-in-out infinite; }.hero__data-node--one { left: 16%; top: 21%; }.hero__data-node--two { right: 12%; top: 19%; animation-delay: -.7s; }.hero__data-node--three { left: 17%; bottom: 19%; animation-delay: -1.4s; }.hero__data-node--four { right: 15%; bottom: 17%; animation-delay: -2.1s; }
@keyframes hero-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes hero-spin { to { transform: rotate(360deg); } } @keyframes hero-data-flow { to { stroke-dashoffset: -252; } } @keyframes hero-insight-draw { 0%, 100% { stroke-dashoffset: 180; opacity: .55; } 45%, 65% { stroke-dashoffset: 0; opacity: 1; } } @keyframes hero-card-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 520px) { .hero__visual-stage { aspect-ratio: 1.05 / 1; }.hero__core-node { width: 64px; }.hero__dashboard--main { width: 59%; padding: .75rem; }.hero__dashboard--signal { width: 37%; padding: .6rem; }.hero__dashboard--insights { width: 38%; left: 1%; bottom: 7%; padding: .6rem; }.hero__dashboard--models { width: 34%; padding: .7rem; }.hero__dashboard-mainline { height: 42px; margin: .65rem 0; }.hero__insights-chart { height: 30px; margin: .45rem 0 .35rem; }.hero__dashboard-metrics b { font-size: .68rem; } }

/* Trust indicator strip: fills the whitespace beneath the hero CTAs.
   The industry list scrolls right-to-left; the item set is duplicated in
   the markup so translating the track by -50% loops seamlessly. */
.hero__trust {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__trust-heading {
  text-transform: uppercase;
  letter-spacing: var(--ls-label-lg);
}

.hero__trust-marquee {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.hero__trust-track {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: max-content;
  animation: trust-scroll 16s linear infinite;
}

.hero__trust:hover .hero__trust-track {
  animation-play-state: paused;
}

.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-label-md);
  letter-spacing: var(--ls-label-lg);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.hero__trust-item svg {
  flex-shrink: 0;
}

/* Dark-mode hero treatment: all color work stays inside the existing hero so
   the light theme, responsive layout and animation system remain untouched. */
:root[data-theme="dark"] .hero {
  background:
    radial-gradient(ellipse 56% 72% at 8% 18%, oklch(56% 0.18 292 / 0.15), transparent 72%),
    radial-gradient(ellipse 48% 64% at 92% 38%, oklch(68% 0.17 215 / 0.11), transparent 74%),
    linear-gradient(140deg, oklch(13% 0.03 264 / 0.96), oklch(11% 0.025 264 / 0.9));
}

:root[data-theme="dark"] .hero::before {
  background-image:
    linear-gradient(var(--color-bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-bg-grid) 1px, transparent 1px);
  background-size: 68px 68px;
  opacity: 0.58;
}

:root[data-theme="dark"] .hero__glow {
  background: radial-gradient(circle, oklch(60% 0.18 292 / 0.2), oklch(68% 0.17 215 / 0.075) 42%, transparent 72%);
  filter: blur(24px);
}

:root[data-theme="dark"] .hero__heading {
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .hero__heading-accent {
  background-image: linear-gradient(100deg, var(--color-accent-strong), var(--color-glow));
}

:root[data-theme="dark"] .hero__lead {
  color: var(--color-text-secondary);
}

:root[data-theme="dark"] .hero .badge {
  background: color-mix(in oklch, var(--color-accent-soft), var(--color-glass-medium) 36%);
  border: 1px solid color-mix(in oklch, var(--color-accent), transparent 52%);
  color: var(--color-text-primary);
  box-shadow: 0 6px 18px oklch(2% 0.018 264 / 0.24), 0 1px 0 oklch(100% 0 0 / 0.07) inset;
}

:root[data-theme="dark"] .hero .badge__dot {
  background: var(--color-glow);
  box-shadow: 0 0 8px oklch(68% 0.18 215 / 0.6);
}

:root[data-theme="dark"] .hero .btn--primary {
  color: var(--color-text-on-accent);
  background-image: linear-gradient(135deg, oklch(57% 0.2 278), oklch(64% 0.2 278) 52%, oklch(66% 0.17 215));
  border-color: color-mix(in oklch, var(--color-glow), white 14%);
  box-shadow: 0 12px 28px oklch(56% 0.19 278 / 0.28), 0 0 18px oklch(68% 0.18 215 / 0.1),
    0 1px 0 oklch(100% 0 0 / 0.3) inset;
}

:root[data-theme="dark"] .hero .btn--primary:hover,
:root[data-theme="dark"] .hero .btn--primary:focus-visible {
  box-shadow: 0 16px 34px oklch(56% 0.19 278 / 0.36), 0 0 24px oklch(68% 0.18 215 / 0.16),
    0 1px 0 oklch(100% 0 0 / 0.36) inset;
}

:root[data-theme="dark"] .hero .btn--secondary {
  background-image: linear-gradient(135deg, oklch(22% 0.034 264 / 0.82), oklch(18% 0.034 264 / 0.72));
  border-color: color-mix(in oklch, var(--color-glow), transparent 68%);
  color: var(--color-text-primary);
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.07) inset;
}

:root[data-theme="dark"] .hero .btn--secondary:hover,
:root[data-theme="dark"] .hero .btn--secondary:focus-visible {
  border-color: var(--color-glow-border);
  color: var(--color-text-primary);
  box-shadow: 0 10px 24px oklch(2% 0.018 264 / 0.32), 0 0 16px oklch(68% 0.18 215 / 0.08);
}

:root[data-theme="dark"] .hero .btn:focus-visible {
  outline-color: var(--color-glow);
}

:root[data-theme="dark"] .hero__trust {
  border-top-color: color-mix(in oklch, var(--color-glow), transparent 82%);
}

:root[data-theme="dark"] .hero__trust-heading,
:root[data-theme="dark"] .hero__trust-item {
  color: var(--color-text-secondary);
}

/* Dark-mode orchestration illustration: retain the existing geometry and
   animations while moving every surface onto a restrained violet/cyan glass
   system. */
:root[data-theme="dark"] .hero__dashboard {
  background: linear-gradient(145deg, oklch(25% 0.044 264 / 0.78), oklch(18% 0.036 264 / 0.7));
  border-color: color-mix(in oklch, var(--color-glow), var(--color-accent) 38%);
  box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.045) inset, 0 14px 30px oklch(57% 0.19 278 / 0.1),
    0 0 22px oklch(68% 0.18 215 / 0.075);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}

:root[data-theme="dark"] .hero__dashboard-header,
:root[data-theme="dark"] .hero__dashboard-metrics,
:root[data-theme="dark"] .hero__dashboard-kicker {
  color: var(--color-text-secondary);
}

:root[data-theme="dark"] .hero__dashboard-metrics b,
:root[data-theme="dark"] .hero__dashboard--models strong {
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .hero__dashboard-status {
  color: var(--color-highlight);
}

:root[data-theme="dark"] .hero__dashboard-header i {
  background: var(--color-glow);
  box-shadow: 0 0 9px oklch(68% 0.18 215 / 0.6);
}

:root[data-theme="dark"] .hero__dashboard-mainline {
  border-bottom-color: color-mix(in oklch, var(--color-glow), transparent 72%);
  background: linear-gradient(180deg, transparent, oklch(60% 0.18 278 / 0.2));
}

:root[data-theme="dark"] .hero__signal-bars span {
  background: linear-gradient(to top, var(--color-accent-strong), var(--color-glow));
  box-shadow: 0 0 7px oklch(68% 0.18 215 / 0.16);
  opacity: 0.9;
}

:root[data-theme="dark"] .hero__insights-chart-line {
  stroke: var(--color-glow);
  filter: drop-shadow(0 0 3px oklch(68% 0.18 215 / 0.5));
}

:root[data-theme="dark"] .hero__insights-chart-area {
  opacity: 0.4;
}

:root[data-theme="dark"] .hero__core-node {
  background: radial-gradient(circle at 35% 28%, oklch(33% 0.09 278 / 0.92), oklch(20% 0.05 264 / 0.88) 68%);
  border-color: color-mix(in oklch, var(--color-glow), var(--color-accent) 45%);
  box-shadow: 0 0 0 12px oklch(61% 0.19 278 / 0.07), 0 0 34px oklch(60% 0.19 278 / 0.24),
    0 0 22px oklch(68% 0.18 215 / 0.14), 0 1px 0 oklch(100% 0 0 / 0.12) inset;
}

:root[data-theme="dark"] .hero__core-node-ring {
  border-color: var(--color-glow);
  box-shadow: 0 0 10px oklch(68% 0.18 215 / 0.24);
}

:root[data-theme="dark"] .hero__core-node-label {
  color: var(--color-text-primary);
  text-shadow: 0 0 12px oklch(68% 0.18 215 / 0.35);
}

:root[data-theme="dark"] .hero__connections path {
  stroke: color-mix(in oklch, var(--color-glow), var(--color-accent) 38%);
  opacity: 0.58;
}

:root[data-theme="dark"] .hero__connections .hero__connection-pulse {
  stroke: var(--color-glow);
  filter: drop-shadow(0 0 4px oklch(68% 0.18 215 / 0.46));
  opacity: 0.88;
}

:root[data-theme="dark"] .hero__data-node {
  border-color: oklch(89% 0.02 264 / 0.78);
  background: var(--color-glow);
  box-shadow: 0 0 12px oklch(68% 0.18 215 / 0.48);
}

/* Responsive orchestration geometry ------------------------------------------------
   .hero__visual owns scroll parallax, .hero__visual-stage owns pointer tilt,
   and each dashboard owns its float transform. Keeping those concerns on
   separate nested elements means breakpoint positioning never fights motion. */
.hero__visual {
  min-width: 0;
  max-width: min(100%, 620px);
}

.hero__visual-stage {
  max-width: 100%;
}

/* The hero grid is already single-column below 900px. Cap and center the
   entire stage there so it stays separate from the copy while its SVG viewBox
   and percentage-positioned cards scale as one coordinated system. */
@media (max-width: 899px) {
  .hero .hero__visual {
    width: min(100%, 560px);
    margin-inline: auto;
  }
}

@media (max-width: 599px) {
  .hero .hero__visual {
    width: min(100%, 460px);
  }

  .hero__dashboard--main {
    width: 56%;
    right: 2%;
    top: 7%;
    padding: clamp(0.55rem, 2vw, 0.72rem);
  }

  .hero__dashboard--signal {
    width: 35%;
    left: 3%;
    top: 18%;
    padding: clamp(0.5rem, 1.8vw, 0.64rem);
  }

  .hero__dashboard--insights {
    width: 35%;
    left: 2%;
    bottom: 7%;
    padding: clamp(0.5rem, 1.8vw, 0.64rem);
  }

  .hero__dashboard--models {
    width: 30%;
    right: 3%;
    bottom: 8%;
    padding: clamp(0.52rem, 1.8vw, 0.68rem);
  }

  .hero .hero__dashboard {
    border-radius: clamp(12px, 3.6vw, 18px);
  }

  .hero__dashboard-header,
  .hero__dashboard-kicker,
  .hero__dashboard-status,
  .hero__dashboard-metrics {
    font-size: clamp(0.42rem, 1.55vw, 0.52rem);
  }

  .hero__dashboard-metrics b {
    font-size: clamp(0.62rem, 2.3vw, 0.8rem);
  }

  .hero__dashboard--models strong {
    font-size: clamp(1.12rem, 5vw, 1.45rem);
  }

  .hero__dashboard-mainline {
    height: clamp(34px, 10vw, 46px);
    margin-block: clamp(0.48rem, 1.8vw, 0.62rem);
  }

  .hero__signal-bars {
    height: clamp(30px, 9vw, 38px);
    margin-top: clamp(0.42rem, 1.6vw, 0.58rem);
  }

  .hero__insights-chart {
    height: clamp(24px, 7vw, 32px);
    margin-block: clamp(0.42rem, 1.6vw, 0.56rem) clamp(0.32rem, 1.2vw, 0.42rem);
  }

  .hero__dashboard--main,
  .hero__dashboard--signal,
  .hero__dashboard--insights,
  .hero__dashboard--models {
    animation-name: hero-card-float-compact;
  }
}

@media (max-width: 420px) {
  /* Preserve all four cards around the core while reducing only decorative
     density. The stage aspect ratio is deliberately unchanged. */
  .hero__visual-aura {
    inset: 17% 14%;
    filter: blur(14px);
  }

  .hero__visual-orbit--outer {
    width: 68%;
    opacity: 0.42;
  }

  .hero__visual-orbit--inner {
    width: 42%;
    opacity: 0.58;
  }

  .hero__data-node {
    width: 7px;
    border-width: 1px;
  }

  .hero__data-node--two,
  .hero__data-node--three {
    display: none;
  }
}

@keyframes hero-card-float-compact {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}