/* ==========================================================================
   Hero Section
   Block: .hero / .hero-section
   --------------------------------------------------------------------------
   The dark opening band. It owns its own vertical rhythm rather than using
   .section, because an opening band sits taller than the bands below it.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem) clamp(3.5rem, 2rem + 6vw, 6.5rem);
  background-image: var(--gradient-ink);
}

.hero-section--soft {
  background-image: none;
  background-color: var(--color-background-sunken);
}

.hero-section--default {
  background-image: none;
  background-color: var(--color-background);
}

.hero-section--compact {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}

.hero-section--spacious {
  padding-block: clamp(4.5rem, 3rem + 6vw, 8rem);
}

/* Two soft light sources, sized in viewport units so they scale with the
   layout instead of overflowing on small screens. reveal.css drifts them. */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.hero__glow--blue {
  inset-block-start: -18vw;
  inset-inline-end: -10vw;
  width: min(34rem, 60vw);
  height: min(34rem, 60vw);
  background: radial-gradient(circle, var(--color-brand-blue), transparent 68%);
  opacity: 0.5;
}

.hero__glow--violet {
  inset-block-end: -22vw;
  inset-inline-start: -12vw;
  width: min(30rem, 55vw);
  height: min(30rem, 55vw);
  background: radial-gradient(circle, var(--color-brand-violet), transparent 68%);
  opacity: 0.42;
}

.hero__inner {
  position: relative;
  z-index: var(--z-index-base);
  display: grid;
  gap: var(--space-x-large);
  align-items: center;
}

/* Asymmetric split: the copy takes the larger share, the mockup the smaller.
   Below this width the layout collapses to a single column. */
@media (width >= 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-2x-large);
  }
}

.hero__content > * + * {
  margin-block-start: var(--space-medium);
}

.hero__title {
  font-size: var(--font-size-heading-1);
  letter-spacing: var(--letter-spacing-tight);
}

/* The brand accent on the headline. The gradient is set on a span rather than
   the heading, so only the picked-out phrase carries it. */
.hero__title-accent {
  background: var(--gradient-brand-on-dark);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* The light background variants put the accent on a pale ground, where the
   dark-mode gradient would fall below the contrast floor. */
.hero-section--default .hero__title-accent,
.hero-section--soft .hero__title-accent {
  background: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
}

.hero__lead {
  max-width: 40ch;
  font-size: var(--font-size-body-large);
  color: var(--color-text-muted);
}

.hero__actions {
  padding-block-start: var(--space-2x-small);
}

.hero__note {
  font-size: var(--font-size-small);
  color: var(--color-text-subtle);
}

/* ------------------------------------------------------------ Hero mockup */

.hero__visual {
  position: relative;
}

.browser-frame {
  overflow: hidden;
  background-color: var(--color-surface-dark-raised);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--radius-x-large);
  box-shadow: 0 30px 70px rgb(3 6 20 / 55%);
}

.browser-frame__bar {
  display: flex;
  gap: var(--space-2x-small);
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: rgb(255 255 255 / 4%);
  border-block-end: 1px solid rgb(255 255 255 / 8%);
}

.browser-frame__dots {
  display: flex;
  gap: 0.375rem;
}

.browser-frame__dots i {
  width: 0.625rem;
  height: 0.625rem;
  background-color: rgb(255 255 255 / 22%);
  border-radius: 50%;
}

.browser-frame__address {
  flex: 1;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-family-monospace);
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  background-color: rgb(255 255 255 / 5%);
  border-radius: var(--radius-pill);
}

.browser-frame__viewport {
  display: block;
  width: 100%;
  height: auto;
}

/* Floating figure overlapping the mockup — the asymmetry that keeps the
   composition from reading as a plain two-column split. */
.performance-card {
  position: absolute;
  inset-block-end: -1.25rem;
  inset-inline-start: -0.75rem;
  display: grid;
  gap: 0.125rem;
  padding: var(--space-x-small) var(--space-small);
  background-color: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-large);
}

.performance-card__label {
  font-size: var(--font-size-overline);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-slate-400);
}

.performance-card__value {
  font-family: var(--font-family-display);
  font-size: 1.375rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-900);
}

.performance-card__unit {
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-success);
}

/* On a narrow screen the overlap eats the mockup, so the card drops below it. */
@media (width < 30rem) {
  .performance-card {
    position: static;
    justify-items: start;
    margin-block-start: var(--space-small);
  }
}

/* ------------------------------------------------------------ Trust strip */

.trust-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-medium);
  margin-block-start: var(--space-large);
  padding-block-start: var(--space-medium);
  border-block-start: 1px solid var(--color-border-subtle);
}

@media (width >= 48rem) {
  .trust-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.trust-strip__value {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-strong);
}

.trust-strip__label {
  font-size: var(--font-size-small);
  color: var(--color-text-subtle);
}

/* ==========================================================================
   Capability rail
   --------------------------------------------------------------------------
   A scrolling row of capability labels closing the hero. It only ever exists
   when the editor has added labels, so there is no empty state to style.

   The motion is an enhancement: the list is readable standing still, it stops
   on hover and on keyboard focus, it carries a pause control the script
   reveals, and it does not move at all under reduced motion.
   ========================================================================== */

.hero__rail {
  margin-block-start: clamp(2rem, 1rem + 4vw, 3.5rem);
  padding-block: var(--space-medium);
  border-block-start: 1px solid var(--color-border-subtle);
}

.capability-rail__inner {
  display: flex;
  align-items: center;
  gap: var(--space-medium);
  min-width: 0;
}

.capability-rail__viewport {
  position: relative;
  flex: 1;
  display: flex;
  min-width: 0;
  overflow: hidden;
  /* Softens both ends so labels enter and leave rather than being cut. */
  mask-image: linear-gradient(90deg, transparent, currentColor 3%, currentColor 97%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, currentColor 3%, currentColor 97%, transparent);
}

.capability-rail__track {
  display: flex;
  flex: none;
  gap: var(--space-x-large);
  padding-inline-end: var(--space-x-large);
  margin: 0;
  list-style: none;
}

.capability-rail__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2x-small);
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.capability-rail__item::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: var(--radius-pill);
  background-image: var(--gradient-rule);
}

.capability-rail__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--minimum-target-size);
  height: var(--minimum-target-size);
  padding: 0;
  color: var(--color-text-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--duration-fast) var(--easing-out),
    border-color var(--duration-fast) var(--easing-out);
}

.capability-rail__toggle:hover {
  color: var(--color-text-strong);
  border-color: var(--color-border-strong);
}

.capability-rail__icon {
  width: 0.9rem;
  height: 0.9rem;
}

.capability-rail__icon--play {
  display: none;
}

.capability-rail__toggle[aria-pressed="true"] .capability-rail__icon--play {
  display: block;
}

.capability-rail__toggle[aria-pressed="true"] .capability-rail__icon--pause {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .capability-rail__track {
    animation: capability-rail-scroll 38s linear infinite;
  }

  .capability-rail__viewport:hover .capability-rail__track,
  .capability-rail__viewport:focus-within .capability-rail__track,
  .capability-rail.is-paused .capability-rail__track {
    animation-play-state: paused;
  }

  @keyframes capability-rail-scroll {
    to {
      transform: translateX(-100%);
    }
  }
}