/* ── Hero (Apple-style) ── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 2rem 8vh;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Background images with Ken Burns slow zoom (always running).
   Uses a seamless 0→50→100 keyframe loop (start == end) rather than
   `alternate`, so the motion never has to decelerate-to-zero and reverse
   mid-display. With alternate + bgDurationMs = kenburns/2, each image
   landed on the phase where motion froze and reversed right before the
   crossfade — visible as a momentary "jump". */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  z-index: 0;
  will-change: opacity, transform;
  animation: kenburns 56s ease-in-out infinite;
}

.hero-bg.hero-bg-active {
  opacity: 1;
}

@keyframes kenburns {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50%      { transform: scale(1.08) translate(-1.2%, -1.2%); }
}

/* Bottom-heavy gradient — image breathes at top */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.1) 0%,
    rgba(0,0,0,0.25) 30%,
    rgba(0,0,0,0.7) 70%,
    rgba(0,0,0,0.85) 100%
  );
  z-index: 0;
}

[data-theme="light"] .hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.15) 0%,
    rgba(255,255,255,0.3) 30%,
    rgba(255,255,255,0.75) 70%,
    rgba(255,255,255,0.9) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
}

/* Massive, confident heading */
.hero h1 {
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

[data-theme="light"] .hero h1 {
  color: #1d1d1f;
}

.hero p {
  color: rgba(255,255,255,0.65);
  margin-top: 0.75rem;
  font-size: clamp(1rem, 2vw, 1.3rem);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

[data-theme="light"] .hero p {
  color: rgba(0,0,0,0.5);
}

.hero-intro {
  font-size: clamp(1.15rem, 2.5vw, 1.6rem) !important;
  color: rgba(255,255,255,0.9) !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

[data-theme="light"] .hero-intro {
  color: rgba(0,0,0,0.75) !important;
}

/* Chips — frosted glass */
.hero-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 2.5rem;
}

.context-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.95);
  padding: 0.55rem 1.15rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-theme="light"] .context-pill {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.8);
}

.context-pill:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.35);
  transform: translateY(-1px);
}

[data-theme="light"] .context-pill:hover {
  background: rgba(0,0,0,0.1);
  border-color: rgba(0,0,0,0.2);
}

.context-chip {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.context-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.8;
}

/* Chip info box */
.chip-info-box {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  color: rgba(255,255,255,0.92);
  background: rgba(30,30,40,0.85);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  z-index: 20;
  pointer-events: none;
  white-space: normal;
}

.chip-info-box::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(30,30,40,0.85);
}

[data-theme="light"] .chip-info-box {
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.1);
  color: rgba(0,0,0,0.85);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

[data-theme="light"] .chip-info-box::before {
  border-top-color: rgba(255,255,255,0.92);
}

/* Transition */
.chip-info-enter-active,
.chip-info-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.chip-info-enter-from,
.chip-info-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(-4px);
}

@media (max-width: 480px) {
  .chip-info-box {
    max-width: 200px;
    font-size: 0.92rem;
  }
}

/* ── Hero Chat Demo (non-interactive visualization) ── */
.hero-chat-demo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-chat-panel {
  position: absolute;
  /* Start right below the site header so the bubbles have as much
     vertical room as possible and never need to be clipped. */
  top: clamp(4rem, 8vh, 5.5rem);
  width: min(460px, 44vw);
  /* Grid with a single cell so the ghost stack reserves space while the
     live stack animates on top — prevents height changes during typing
     from pushing surrounding content around. */
  display: grid;
}

.hero-chat-ghost-stack,
.hero-chat-live-stack {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.hero-chat-ghost-stack {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

/* Whole-panel ghost used only to reserve grid-cell height across areas
   (see mobile layout). Always invisible; on desktop it's absolutely
   positioned so it doesn't affect layout at all. */
.hero-chat-panel-ghost {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.hero-chat-panel-industry,
.hero-chat-panel-safety {
  right: 2.5rem;
}

.hero-chat-panel-government {
  left: 2.5rem;
}

.hero-chat-bubble {
  max-width: 92%;
  padding: 0.7rem 0.95rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #fff;
  text-align: left;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero-chat-bubble p { margin: 0; }

/* User bubble — slightly right, neutral dark */
.hero-chat-bubble-user {
  align-self: flex-end;
  background: rgba(20, 20, 24, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px 14px 4px 14px;
}

/* Bot bubble — slightly left, brand purple */
.hero-chat-bubble-bot {
  align-self: flex-start;
  background: rgba(130, 30, 118, 0.88);
  border: 1px solid rgba(200, 80, 180, 0.35);
  border-radius: 14px 14px 14px 4px;
}

/* Explicit <p> color overrides .hero p (which would otherwise bleed in) */
.hero-chat-bubble-user p,
.hero-chat-bubble-bot p { color: #fff; }

.hero-chat-author {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.2rem;
}

/* Light theme — keep bubbles solid and readable on bright backgrounds */
[data-theme="light"] .hero-chat-bubble-user {
  background: rgba(250, 250, 252, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .hero-chat-bubble-user p { color: #1d1d1f; }

[data-theme="light"] .hero-chat-bubble-user .hero-chat-author {
  color: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .hero-chat-bubble-bot {
  background: rgba(140, 32, 128, 0.94);
  border-color: rgba(140, 32, 128, 0.5);
}

/* Bot bubble in light mode: keep body text AND author label white for contrast */
[data-theme="light"] .hero-chat-bubble-bot p,
[data-theme="light"] .hero-chat-bubble-bot .hero-chat-author { color: #fff; }

/* Fade transition in sync with background cycle */
.chat-demo-enter-active,
.chat-demo-leave-active {
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.chat-demo-enter-from {
  opacity: 0;
  transform: translateY(-8px);
}
.chat-demo-leave-to {
  opacity: 0;
  transform: translateY(8px);
}

/* Bot bubble appears after the "thinking" delay, with a soft lift-in.
   Kept short so it doesn't compete with the outer chat-demo transition
   when an area swap happens mid-sequence. */
.bot-bubble-enter-active { transition: opacity 0.25s ease, transform 0.25s ease; }
.bot-bubble-enter-from   { opacity: 0; transform: translateY(6px); }

/* "Thinking" indicator — three dots that bob in sequence. */
.hero-chat-thinking {
  display: inline-flex;
  gap: 4px;
  align-items: flex-end;
  min-height: 1.2em;
  padding: 2px 0;
}
.hero-chat-thinking .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  animation: chat-thinking-bounce 1.2s infinite ease-in-out;
}
.hero-chat-thinking .dot:nth-child(2) { animation-delay: 0.15s; }
.hero-chat-thinking .dot:nth-child(3) { animation-delay: 0.30s; }

@keyframes chat-thinking-bounce {
  0%, 80%, 100% { transform: translateY(0);   opacity: 0.35; }
  40%           { transform: translateY(-4px); opacity: 1;   }
}

/* Blinking caret trailing the typewriter text. */
.hero-chat-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.12em;
  animation: chat-caret-blink 0.9s steps(2, start) infinite;
}
@keyframes chat-caret-blink {
  to { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-chat-thinking .dot,
  .hero-chat-caret { animation: none; }
}

/* Manual area switcher dots — in flow under the context chips */
.hero-dots {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  position: relative;
  z-index: 2;
}

.hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.hero-dot:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.15);
}

.hero-dot:focus-visible {
  outline: 2px solid rgba(200, 80, 180, 0.9);
  outline-offset: 3px;
}

.hero-dot-active {
  background: #fff;
  border-color: #fff;
  transform: scale(1.2);
}

[data-theme="light"] .hero-dot {
  border-color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .hero-dot:hover {
  background: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .hero-dot-active {
  background: #1d1d1f;
  border-color: #1d1d1f;
}

/* Pull the chat panel into normal flow above the hero content whenever
   the viewport is too narrow OR too short to host the absolutely
   positioned panel next to the centered headline without collision.
   Previously this kicked in only at max-width 900px, leaving landscape
   laptops (wide but short) and narrow desktops as collision zones.
   At height ≤ 839 the panel + padded bottom content can't fit without
   overlap, so trigger in-flow there too. */
@media (max-width: 1199px), (max-height: 839px) {
  .hero {
    justify-content: space-between;
    padding-top: 6rem;
    gap: 2rem;
  }
  .hero-chat-demo {
    position: relative;
    inset: auto;
    width: 100%;
    overflow: visible;
    flex-shrink: 0;
    /* Grid with a single cell lets outgoing and incoming panels overlap
       during the area crossfade so the container height doesn't collapse
       between panels and push content around. */
    display: grid;
    grid-template-columns: 1fr;
  }
  .hero-chat-panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    grid-column: 1;
    grid-row: 1;
  }
  .hero-chat-panel-industry,
  .hero-chat-panel-safety,
  .hero-chat-panel-government {
    left: auto;
    right: auto;
  }
  .hero-chat-bubble {
    font-size: 0.9rem;
    padding: 0.65rem 0.85rem;
    max-width: 88%;
  }
}

@media (max-width: 480px) {
  .hero {
    padding-top: 5rem;
    gap: 1.5rem;
  }
  .hero-chat-demo {
    min-height: 8rem;
  }
  .hero-chat-panel {
    gap: 0.4rem;
  }
  .hero-chat-bubble {
    font-size: 0.82rem;
    padding: 0.55rem 0.75rem;
    line-height: 1.4;
    max-width: 92%;
  }
  .hero-chat-author {
    font-size: 0.62rem;
  }
}