/* ---- Hero ---- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-height) + var(--space-3xl));
  padding-bottom: var(--space-3xl);
  text-align: center;
  overflow: hidden;
}

/* CRT grid + ember backdrop */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgb(255, 59, 48, 0.08), transparent 50%),
    linear-gradient(rgb(255, 92, 84, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255, 92, 84, 0.035) 1px, transparent 1px);
  background-size:
    100% 100%,
    48px 48px,
    48px 48px;
  mask-image: linear-gradient(to bottom, #000 35%, transparent);
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: clamp(1.6rem, 5vw, 2.75rem);
  margin-bottom: var(--space-lg);
  letter-spacing: 0.01em;
  animation: flicker 4.5s infinite steps(1);
}

.hero h1 .accent {
  color: var(--green);
  text-shadow: var(--glow-green);
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 {
    animation: none;
  }
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green);
  margin-bottom: var(--space-md);
}

.hero .subtitle {
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto var(--space-xl);
  color: var(--text-secondary);
}

.agent-support {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: center;
  max-width: 640px;
  margin: 0 auto var(--space-xl);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.agent-support span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-primary);
  transition:
    color var(--transition),
    border-color var(--transition);
}

.agent-support span:hover {
  border-color: var(--text-secondary);
}

.agent-logo {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: currentColor;
}

.agent-support .agent-support-any {
  border-style: dashed;
  color: var(--cyan);
}

.hero-ctas {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.hero-badges {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-bottom: var(--space-2xl);
}

.hero-demo {
  max-width: 1100px;
  margin: 0 auto;
}

.hero-demo .terminal-frame {
  box-shadow: 0 20px 60px rgb(0, 0, 0, 0.6);
}

.hero-demo video {
  display: block;
  width: 100%;
}

/* ---- Feature walkthrough ---- */
.video-card {
  margin: 0;
}

.video-card video {
  display: block;
  width: 100%;
}

.video-card figcaption {
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ---- Feature showcase (alternating media + text) ---- */
.feature-showcase {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  max-width: 1040px;
  margin: 0 auto;
}

.feature-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.feature-row-text,
.feature-row-media {
  flex: 1 1 0;
  min-width: 0;
}

.feature-row-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--green);
  margin-bottom: var(--space-sm);
}

.feature-row-text h3 {
  margin-bottom: var(--space-sm);
}

.feature-row-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.feature-row-media .terminal-frame {
  box-shadow: 0 16px 44px rgb(0, 0, 0, 0.5);
}

.feature-row-media video {
  display: block;
  width: 100%;
}

@media (min-width: 768px) {
  .feature-row {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
  }

  .feature-row:nth-child(even) {
    flex-direction: row-reverse;
  }

  .feature-row-media {
    flex: 1.15 1 0;
  }
}

/* ---- Features grid ---- */
.features {
  background: var(--bg-secondary);
}

.feature-link {
  display: block;
  text-decoration: none;
}

.feature-link .card {
  height: 100%;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.feature-link .card h3 {
  color: var(--text-primary);
  transition: color var(--transition);
}

.feature-link:hover .card {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow:
    0 8px 24px rgb(0, 0, 0, 0.45),
    0 0 0 1px rgb(110, 255, 110, 0.15);
}

.feature-link:hover .card h3 {
  color: var(--green);
  text-shadow: var(--glow-green);
}

.features .card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-sm);
  font-size: 1.25rem;
  background: var(--bg-code);
  border: 1px solid var(--border);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.feature-link:hover .card-icon {
  border-color: var(--green);
  box-shadow: var(--glow-green);
}

/* ---- How it works ---- */
.how-it-works-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 800px;
  margin: 0 auto;
}

.step {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}

.step-content {
  flex: 1;

  /* A flex item's default min-width:auto refuses to shrink below its content,
     so the ASCII .tui-demo inside pushed this past the viewport (the step
     number + gap offset it by 80px). min-width:0 lets it shrink and the
     .terminal-body's own overflow-x handle the wide ASCII art. */
  min-width: 0;
}

.step-content h3 {
  margin-bottom: var(--space-sm);
}

.step-content p {
  margin-bottom: var(--space-md);
}

.step .terminal-frame {
  box-shadow: none;
}

/* ---- Install section ---- */
.install {
  background: var(--bg-secondary);
}

.install-main {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.install-main .terminal-frame {
  margin-bottom: var(--space-lg);
  text-align: left;
}

/* ---- Install method tabs ---- */
.install-tabs {
  max-width: 780px;
  margin: 0 auto var(--space-xl);
  text-align: left;
}

.install-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-lg);
}

.install-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.65rem 1.1rem;
  margin-bottom: -1px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition);
}

.install-tab:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.install-tab[aria-selected='true'] {
  color: var(--green);
  background: var(--bg-card);
  border-color: var(--border);
  border-bottom-color: var(--bg-card);
  text-shadow: var(--glow-green);
}

.install-tab .badge {
  padding: 0.1rem 0.5rem;
  font-size: 0.65rem;
}

.install-panel > p {
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}

.install-panel .terminal-frame {
  box-shadow: none;
}

@keyframes install-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .install-panel:not([hidden]) {
    animation: install-fade 200ms ease;
  }
}

.install-alt {
  display: flex;
  gap: var(--space-xl);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}

.install-alt-item h4 {
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.install-alt-item p {
  font-size: 0.9rem;
}

/* ---- Prerequisites ---- */
.prereqs {
  margin-top: var(--space-xl);
  text-align: left;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.prereqs h3 {
  text-align: center;
  margin-bottom: var(--space-md);
}

.prereqs ul {
  list-style: none;
  padding: 0;
}

.prereqs li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.9rem;
}

.prereqs li strong {
  color: var(--text-primary);
}

.prereqs li .optional {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* ---- Back to top ---- */
.back-to-top {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: var(--bg-nav);
  color: var(--cyan);
  border: 1px solid var(--border);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  backdrop-filter: blur(12px);
  transition:
    opacity var(--transition),
    visibility var(--transition),
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
  z-index: 90;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  color: var(--text-primary);
  border-color: var(--cyan);
  box-shadow: var(--glow-red);
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity var(--transition);
    transform: none;
  }
}

/* Phones: the two hero CTAs are 180px and 157px wide, so they no longer fit on
   one row and wrapped into two ragged centred pills of different widths. Stack
   them as full-width bars instead — tidier, and a much larger tap target. */
@media (max-width: 639px) {
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .hero-ctas .btn {
    width: 100%;
  }
}