/* Hero strip — public showcase home. Centered: glass badge (with glowing dot),
 * gradient headline, lede, two CTAs. Dark. */

.kw-hero {
  padding: 4.5rem var(--kw-space-8) 3.5rem;
  text-align: center;
}
.kw-hero__inner {
  max-width: var(--kw-width-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.kw-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  background: rgba(147, 156, 229, 0.13);
  color: var(--kw-muted-lavender);
  font-family: var(--kw-font-mono);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--kw-radius-pill);
  margin-bottom: 1.625rem;
}
.kw-hero__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--kw-electric-indigo);
  box-shadow: 0 0 10px var(--kw-electric-indigo);
}
.kw-hero__title {
  font-size: clamp(2.75rem, 6vw, 4.875rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  max-width: 920px;
  font-family: var(--kw-font-headline);
  background: linear-gradient(180deg, #fff, var(--kw-muted-lavender));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kw-hero__lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--kw-fg-muted);
  max-width: 620px;
  margin: 1.5rem auto 2.125rem;
}
.kw-hero__ctas {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
/* Hero CTAs are auto-width + a touch larger than the default block button. */
.kw-hero__ctas .kw-btn-primary,
.kw-hero__ctas .kw-btn-secondary {
  width: auto;
  min-width: 0;
  font-size: 1rem;
  padding: 0.875rem 1.375rem;
}

/* ============================================================
   Synced hero (.kw-shero) — "Secure AI agents that <clause>" where the
   clause rotates in LOCKSTEP with the live demo console on the right
   (handoff-home-hero). The reel (agent_demo.js) is the single clock; it
   fires `demoreel:show` and hero_combo.js swaps the clause + outcome strip.

   NO-LAYOUT-SHIFT contract: the clause line's width is owned by the GRID
   COLUMN (minmax), never by the text; items are absolutely stacked
   (active = relative), white-space NORMAL, and .kw-rotline reserves two
   lines of height — a longer clause wraps instead of widening/clipping.
   ============================================================ */
.kw-shero {
  text-align: start;
  padding-block: 3.375rem 4rem;
}
.kw-shero__inner {
  display: grid;
  grid-template-columns: minmax(380px, 1fr) minmax(0, 1.05fr);
  gap: 3rem;
  align-items: center;
  max-width: var(--kw-width-content);
  margin: 0 auto;
}
.kw-shero__copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.kw-shero__title {
  font-size: clamp(34px, 3.5vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  font-family: var(--kw-font-headline);
  color: var(--kw-fg);
}
.kw-shero .kw-hero__lede {
  margin: 1.25rem 0 0;
  max-width: 33rem;
  text-align: start;
}

/* The synced clause line: block, full column width, reserves ~2 lines. */
.kw-rotline {
  position: relative;
  display: block;
  min-height: 2.34em;
  margin-top: 4px;
}
.kw-rotline__item {
  display: block;
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  white-space: normal; /* a longer clause WRAPS into the reserved height — never nowrap */
  opacity: 0;
  /* gradient clause text, on the item itself so the fly-in transform can't
     detach it from an ancestor background-clip */
  background: linear-gradient(180deg, #fff, var(--kw-muted-lavender));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kw-rotline__item.is-in { position: relative; opacity: 1; }
/* Fly-in: rise + scale + de-blur, ease-out — motion-gated (reduced motion =
   the server-rendered first clause, static). */
@media (prefers-reduced-motion: no-preference) {
  .kw-rotline__item {
    transform: translateY(48px) scale(0.965);
    filter: blur(10px);
    transition: opacity 0.5s ease, transform 0.66s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
  }
  .kw-rotline__item.is-in { opacity: 1; transform: none; filter: none; }
  .kw-rotline__item.is-out {
    opacity: 0;
    transform: translateY(-36px) scale(0.98);
    filter: blur(8px);
    transition-duration: 0.42s;
  }
}

/* Synced "Just delivered · {agent} · {metric}" strip. */
.kw-shero__out {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.625rem;
  padding: 0.75rem 1rem;
  border-radius: var(--kw-radius-md);
  background: rgba(77, 96, 251, 0.08);
  border: 1px solid rgba(77, 96, 251, 0.24);
  max-width: 100%;
}
.kw-shero__live {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #36C588;
  box-shadow: 0 0 9px #36C588;
}
.kw-shero__out-lbl { font-family: var(--kw-font-mono); font-size: 11px; color: var(--kw-muted-lavender); white-space: nowrap; }
.kw-shero__out-name { color: var(--kw-fg); font-weight: 600; font-size: 13px; }
.kw-shero__out-val { font-family: var(--kw-font-mono-num); color: var(--kw-signal-gold); font-size: 15px; }
.kw-shero__out-vlabel { font-family: var(--kw-font-mono); font-size: 11px; color: var(--kw-fg-subtle); text-transform: lowercase; }

.kw-shero .kw-hero__ctas { margin-top: 1.625rem; justify-content: flex-start; }

/* The live demo console on the right. */
.kw-shero__demo { min-width: 0; }
.kw-shero__demo .kw-demo { margin: 0; }

@media (max-width: 920px) {
  .kw-shero { padding-block: 2.25rem 2.75rem; }
  .kw-shero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .kw-shero__title { font-size: clamp(30px, 7vw, 40px); }
  .kw-rotline { min-height: 2.5em; }
  /* (the stage min-height drop lives in agent_demo.css — it must come AFTER
     the base .kw-demo--hero rule in the cascade) */
}