/* ===== landing-hero-bot.html only — alternate humanoid-orbit hero
   treatment (A/B comparison against the main homepage hero and the
   pulsing-ring variant). Every other section on this page reuses
   style-aqua.css unchanged; this file only overrides the hero: a
   static right-anchored portrait image (no video, no animation on the
   image itself), left-aligned content in the image's clear zone, and
   three floating glassmorphic capability cards around the figure. ===== */

.hero-bot-avatar-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero-bot-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keeps the bot figure anchored to the right edge of frame (as
     generated) regardless of viewport width, so the left clear zone
     for text never gets eaten into by the crop. */
  object-position: right center;
}

/* Cursor-following spotlight -- now spans the FULL hero (not just the
   avatar), sitting between the background layer (image z-index:0, this
   is later in DOM at the same implicit paint level so it stacks above
   the image) and .hero-scrim (z-index:1, still on top of this, which
   is what keeps the effect from washing out the text: the scrim's dark
   left-side gradient suppresses the screen-blend there, so brightening
   is strongest over the clear/figure side and naturally dampened
   behind the text). Below that, .hero-content (z-index:2) with the
   nav/text/pills/cards sits above everything, untouched. 250px radius,
   0.25 alpha -- reads as ambient light sweeping the whole background,
   not a flashlight; --x/--y set in px by
   js/landing-hero-bot-spotlight.js (rAF-throttled mousemove across the
   whole hero), default center so it doesn't jump from a corner on
   first paint. Fades via .is-active (opacity) on mouseleave from the
   hero, easing out rather than snapping away. */
.hero-bot-spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle 250px at var(--x, 50%) var(--y, 50%), rgba(170, 208, 226, 0.25), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-bot-spotlight.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bot-spotlight {
    display: none;
  }
}

/* Left-to-right scrim: the image's left clear zone is a medium/pale
   blue (measured ~ rgb(90-155, 140-200, 175-220), not dark), so plain
   white hero text (the site's standard hero treatment) would have
   inconsistent contrast against it without help -- this darkens the
   left ~60% of frame toward the site's own navy, fading out before it
   reaches the figure, rather than switching to dark text (which would
   read inconsistently against every other hero on the site). */
.hero-scrim-bot {
  background: linear-gradient(
    to right,
    rgba(21, 58, 80, 0.75) 0%,
    rgba(21, 58, 80, 0.55) 30%,
    rgba(21, 58, 80, 0.15) 55%,
    transparent 72%
  );
}

/* Bottom fade -- softens the hard cut between the hero and whatever
   follows it, using #EEEEF2 as given (NOTE: this does NOT match
   .next-section's actual background, which is var(--light-bg) =
   #F5F6FA -- confirmed via style-aqua.css. Flagged rather than
   silently building a fade that ends in a color the next section
   doesn't use; kept as specified per explicit instruction anyway, so
   a faint seam may be visible where the fade meets .next-section). Same
   z-index tier as .hero-scrim (above the background/spotlight layers,
   below .hero-content's nav/text/cards at z-index:2). */
.hero-bot-bottom-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  z-index: 1;
  pointer-events: none;
  /* Eased curve (more, closer-packed stops vs. a flat 2-stop
     transparent->color) so it ramps in gently at the top and settles
     into solid #EEEEF2 gradually at the bottom, instead of visibly
     "becoming solid" partway down -- by 100% it's already been nearly
     opaque for a while, so the seam into the next section's own
     background reads as continuous rather than a hard edge. */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(238, 238, 242, 0.18) 35%,
    rgba(238, 238, 242, 0.5) 60%,
    rgba(238, 238, 242, 0.82) 82%,
    #EEEEF2 100%
  );
}

/* Top-left kicker + caption -- sits just below #nav, well clear of it
   (#nav's own padding/content run ~70-90px tall; 130px top offset
   leaves a comfortable gap at any tested width since this is
   positioned against the hero's own box, not the flex nav column). */
.hero-bot-topleft {
  position: absolute;
  top: 130px;
  /* Match the nav-logo/bottom-heading left edge exactly: .hero-content's
     own base padding (var(--space-3)) plus #nav's extra left padding
     (var(--space-5)) -- calc'd explicitly rather than relying on
     absolute-positioning's padding-box containing-block behavior,
     which wasn't landing at the same pixel as the other two blocks. */
  left: calc(var(--space-3) + var(--space-5));
  z-index: 2;
  max-width: 340px;
}

.hero-bot-kicker {
  display: block;
  margin-bottom: 10px;
  color: #AAD0E2;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Entrance driven by js/landing-hero-bot-entrance.js's GSAP timeline,
     not this CSS keyframe -- opacity:0 is just the resting/initial
     state so there's no flash-of-visible-content before JS runs. */
  opacity: 0;
}

.hero-bot-topleft-caption {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0;
}

/* Main heading block -- bottom-left, large/bold, low in frame. */
.hero-bot-content {
  align-items: flex-start;
  text-align: left;
  max-width: 620px;
  /* #nav has its own var(--space-5) left padding on top of
     .hero-content's base padding, so nav-logo's content starts 64px
     further right than a plain flex child here would -- match it so
     "Your AI Layer." lines up under the "Voxion" wordmark instead of
     sitting flush with .hero-content's own (narrower) inset. */
  padding-top: 0;
  padding-left: var(--space-5);
  padding-bottom: 8vh;
  justify-content: flex-end;
}

.hero-bot-content .hero-headline {
  font-size: clamp(44px, 8.5vw, 80px);
  /* The base .hero-headline rule (style-aqua.css) has its own CSS
     entrance animation on the <h1> itself -- here the two child
     .headline-line spans animate individually instead (see
     js/landing-hero-bot-entrance.js), so the <h1> needs to be visible
     immediately and not double-fade. */
  opacity: 1;
  animation: none;
}

/* Forces the 2-line heading break explicitly rather than relying on
   natural wrapping (same technique as landing-hero-blob.html). */
.headline-line {
  display: block;
  /* "Runs Everything." alone needs more than the block's 620px
     max-width at this heading's large font-size, so it was wrapping
     into a 3rd line inside its own span. Force each line to render on
     exactly one line -- .hero-bot-content has no overflow:hidden of
     its own, so this just extends past its 620px box rather than
     clipping; only the outer .hero section clips, and that's
     full-viewport-wide, well clear at 1440px/1920px. */
  white-space: nowrap;
  /* GSAP entrance resting state -- each line fades/reveals in on its
     own, staggered (see js/landing-hero-bot-entrance.js). */
  opacity: 0;
}

.hero-bot-content .hero-subtext {
  max-width: 480px;
  animation: none;
}

.hero-bot-content .btn-cta {
  animation: none;
}

/* Pill row directly above the heading -- same glass treatment as the
   floating widget cards, just pill-shaped. justify-content:flex-end on
   the wrap (matching .hero-bot-content itself) keeps this hugging the
   heading below it rather than the empty space above; margin-bottom
   is deliberately smaller than the gap above the kicker/caption block
   so it doesn't read as crowding the heading it belongs to. */
.hero-bot-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-2);
}

.hero-bot-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  /* GSAP entrance resting state (fade + scale in). */
  opacity: 0;
}

/* ----- Floating glassmorphic capability cards -- true glass, not flat
   opaque cards: translucent background, blurred backdrop, thin light
   border. Deliberately overlapping the figure now (not avoiding it) in
   a diagonal zigzag: right-offset alternates near-edge -> further in
   -> near-edge again (12% / 26% / 14%) while top climbs steadily
   (8% / 38% / 66%), so each card partially sits over the head/shoulder
   silhouette at a different depth instead of hugging a straight
   vertical line at the edge. Vertical spacing between the three (30%+
   of viewport height apart) is what actually prevents card-to-card
   collision, not the horizontal stagger -- the x-jitter is purely for
   the zigzag look. None of the three is wide/tall enough on its own to
   fully cover the face at any single height band. ----- */

.hero-bot-card {
  position: absolute;
  z-index: 2;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
  padding: 12px 14px;
  color: #ffffff;
  /* GSAP entrance resting state -- fades/scales in after the left-side
     text sequence completes (see js/landing-hero-bot-entrance.js). */
  opacity: 0;
}

.hero-bot-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.hero-bot-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(170, 208, 226, 0.3);
  color: #ffffff;
}

.hero-bot-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero-bot-card-transcript {
  top: 14%;
  right: 20%;
  width: 210px;
}

.hero-bot-card-line {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 4px;
}

.hero-bot-card-line:last-child {
  margin-bottom: 0;
}

.hero-bot-card-line-customer {
  color: rgba(255, 255, 255, 0.7);
}

.hero-bot-card-line-bot {
  color: #ffffff;
  font-weight: 600;
}

.hero-bot-card-automation {
  top: 38%;
  right: 26%;
  width: 210px;
}

.hero-bot-card-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-bot-card-checklist li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.hero-bot-card-checklist svg {
  flex-shrink: 0;
  color: #AAD0E2;
}

.hero-bot-card-crm {
  top: 62%;
  right: 18%;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 210px;
}

.hero-bot-avatar-ring {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-amber);
  padding: 3px;
}

.hero-bot-avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.hero-bot-card-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hero-bot-card-name {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
}

.hero-bot-card-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}

.hero-bot-card-status svg {
  color: #AAD0E2;
}

@media (max-width: 1099px) {
  /* Simpler stacked fallback: the zigzag needs real horizontal room to
     read as diagonal rather than cramped, so below 1100px drop the
     least-essential card (CRM Sync) and pin the remaining two to a
     plain top/bottom edge pair instead of trying to preserve the
     diagonal stagger at a width that can't support it. */
  .hero-bot-card-crm {
    display: none;
  }

  .hero-bot-card-transcript {
    right: 3%;
  }

  .hero-bot-card-automation {
    top: auto;
    bottom: 6%;
    right: 3%;
  }
}

@media (max-width: 768px) {
  /* Scroll-scrub-style hero imagery never fits a narrow viewport
     comfortably (CIPHER-OS MOBILE-FIRST RULES) -- drop the floating
     cards entirely rather than force 3 already-tight glass cards into
     a vertical stack on top of a busy background image; the bot image
     stays as the persistent full-bleed backdrop (not a stacked
     "step") behind both text blocks. Chosen order: kicker/caption
     first, then heading/subtext/CTA below it -- both blocks are
     already in that DOM order, so switching them to normal static
     flow (instead of absolute-positioned) gives that stacking for
     free without any extra markup. Flagging this choice per the
     brief: image-as-stacked-step + cards-included was the other
     option, dropped in favor of the same mobile-simplification
     pattern already used on landing-hero-blob.html. */
  .hero-bot-card {
    display: none;
  }

  .hero-bot-topleft {
    position: static;
    max-width: 100%;
    margin: var(--space-4) var(--space-3) 0;
  }

  .hero-bot-content {
    max-width: 100%;
    padding-bottom: var(--space-4);
    justify-content: flex-start;
  }

  /* Safety valve for small phones: at the heading's min clamp size
     (44px) "Runs Everything." can still exceed narrow viewport widths
     (~375-414px), and .hero's own overflow:hidden would clip it since
     nowrap ignores wrapping regardless of container width. Two-line
     enforcement was requested/tested at 1440px/1920px; below 768px,
     fall back to natural wrapping so nothing gets cut off. */
  .headline-line {
    white-space: normal;
  }
}