/* Zenith landing — cinematic monochrome product surface */

:root {
  --landing-display: "Avenir Next", "SF Pro Display", ui-sans-serif, system-ui, sans-serif;
  --landing-edge: hsl(var(--foreground) / 0.12);
}

.landing-body {
  overflow-x: clip;
  background-image:
    radial-gradient(circle at 50% -12%, hsl(var(--foreground) / 0.055), transparent 32rem),
    linear-gradient(180deg, hsl(var(--background)), hsl(var(--background)));
}

.landing-skip {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 110;
  padding: 0.55rem 0.8rem;
  border-radius: 0.5rem;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  font-size: 0.875rem;
  font-weight: 600;
  transform: translateY(calc(-100% - 1rem));
  transition: transform 140ms ease;
}

.landing-skip:focus {
  transform: translateY(0);
}

/* Page-wide request contrail (pointer-events none; under nav) */
.gateway-comet {
  position: fixed;
  inset: 0;
  z-index: 40;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.72;
}

.dark .gateway-comet {
  opacity: 0.65;
}

.landing-display,
.hero-brand,
.hero-title,
.landing-section h2,
.landing-surface-title,
.landing-pricing-card h3 {
  font-family: var(--landing-display);
}

.landing-body::before {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  content: "";
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
}

.landing-nav {
  border-bottom: 1px solid transparent;
  transition: border-color 280ms ease, background-color 280ms ease, box-shadow 280ms ease;
}

.landing-nav-inner { transition: height 280ms ease; }

.landing-nav-inner {
  width: 100%;
  min-width: 0;
}

.landing-nav-actions {
  min-width: 0;
  flex: 0 0 auto;
}

.landing-nav-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: color-mix(in oklab, var(--background) 70%, transparent);
}

.landing-nav.is-scrolled {
  border-color: hsl(var(--border) / 0.72);
  background: hsl(var(--background) / 0.78);
  box-shadow: 0 12px 36px hsl(var(--foreground) / 0.035);
  backdrop-filter: blur(20px) saturate(130%);
}

.landing-nav.is-scrolled .landing-nav-inner { height: 3.65rem; }

.zenith-mark {
  position: relative;
  overflow: hidden;
}

.zenith-mark::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, transparent 35%, hsl(var(--background) / 0.28), transparent 65%);
  transform: translateX(-110%);
  transition: transform 600ms ease;
}

.group:hover .zenith-mark::after { transform: translateX(110%); }

.landing-hero {
  min-height: 100svh;
  isolation: isolate;
  background: hsl(var(--background));
}

.hero-content {
  width: 100%;
  min-width: 0;
  max-width: 72rem;
}

.hero-grid {
  opacity: 0.48;
  background-image:
    linear-gradient(hsl(var(--foreground) / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 72% 64% at 50% 42%, black 8%, transparent 72%);
  animation: grid-drift 24s linear infinite;
}

.hero-grid::after {
  position: absolute;
  inset: 0;
  content: "";
  background-image: radial-gradient(circle, hsl(var(--foreground) / 0.14) 1px, transparent 1.5px);
  background-size: 18px 18px;
  mask-image: radial-gradient(ellipse 45% 40% at 50% 43%, black, transparent 75%);
}

.hero-glow {
  width: min(76vw, 68rem);
  aspect-ratio: 1.8;
  border-radius: 50%;
  background: hsl(var(--foreground) / 0.07);
  filter: blur(100px);
  transform: translate(-50%, -50%);
  animation: glow-breathe 8s ease-in-out infinite;
}

.hero-orbit {
  left: 50%;
  top: 46%;
  width: min(72vw, 66rem);
  aspect-ratio: 2.2;
  border: 1px solid hsl(var(--foreground) / 0.075);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-7deg);
}

.hero-orbit-b {
  width: min(56vw, 49rem);
  transform: translate(-50%, -50%) rotate(11deg);
  opacity: 0.7;
}

.hero-vignette {
  background:
    linear-gradient(180deg, hsl(var(--background) / 0.3), transparent 18%, transparent 76%, hsl(var(--background))),
    radial-gradient(ellipse at center, transparent 40%, hsl(var(--background) / 0.74) 100%);
}

.hero-brand {
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.hero-brand-mark {
  position: relative;
  overflow: hidden;
  border: 1px solid hsl(var(--foreground) / 0.18);
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  box-shadow: 0 0 0 1px hsl(var(--background) / 0.35) inset;
}

.hero-brand-mark::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, transparent 35%, hsl(var(--background) / 0.28), transparent 65%);
  transform: translateX(-110%);
  animation: brand-sheen 7s ease-in-out infinite;
}

.hero-title {
  width: 100%;
  max-width: 58rem;
  padding-inline: 0.25rem;
  padding-block: 0.12em;
  font-size: clamp(2.65rem, 5.8vw, 5rem);
  line-height: 1.15;
  letter-spacing: -0.055em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.hero-title-accent {
  color: hsl(var(--muted-foreground));
  padding-bottom: 0.08em;
  background: linear-gradient(100deg, hsl(var(--foreground)), hsl(var(--muted-foreground)) 52%, hsl(var(--foreground)) 96%);
  background-size: 180% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: title-sheen 9s ease-in-out infinite;
}

.hero-copy { letter-spacing: -0.012em; max-width: 34rem; }

.hero-console-wrap {
  width: 100%;
  min-width: 0;
  max-width: 56rem;
  perspective: 1000px;
}

.hero-console {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-shadow:
    0 42px 90px -35px hsl(var(--foreground) / 0.24),
    0 1px 0 hsl(var(--foreground) / 0.09) inset,
    0 0 0 1px hsl(var(--background) / 0.45) inset;
  transform: rotateX(1.5deg);
  transform-origin: center bottom;
}

.hero-console-log {
  min-width: 0;
  overflow: hidden;
  background-image: linear-gradient(90deg, transparent, hsl(var(--foreground) / 0.018), transparent);
}

.hero-console-log > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-console-grid { display: grid; }
.hero-runtime-panel { display: none; }

.hero-route-line {
  width: fit-content;
  border-radius: 0.45rem;
  background: hsl(var(--foreground) / 0.055);
  padding: 0.05rem 0.5rem;
}

.route-pulse {
  display: inline-block;
  width: 0.38rem;
  height: 0.38rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: hsl(var(--foreground));
  box-shadow: 0 0 0 0 hsl(var(--foreground) / 0.28);
  animation: signal-pulse 2.2s ease-out infinite;
}

.hero-metric-fill {
  transform-origin: left;
  animation: metric-scan 4.5s ease-in-out infinite;
}

/* Dual surface: Cloud vs Gateway */
.landing-dual-section {
  background-image: radial-gradient(circle at 50% 0%, hsl(var(--foreground) / 0.04), transparent 28rem);
}

.landing-surface-card {
  min-height: 100%;
  border: 1px solid hsl(var(--foreground) / 0.12);
  border-radius: 1.35rem;
  background: hsl(var(--card) / 0.55);
  padding: 1.75rem 1.6rem;
  box-shadow: 0 24px 70px -45px hsl(var(--foreground) / 0.22);
  transition: border-color 280ms ease, transform 280ms ease;
}

.landing-surface-card:hover {
  border-color: hsl(var(--foreground) / 0.22);
  transform: translateY(-3px);
}

.landing-surface-card-gateway {
  border-color: hsl(var(--foreground) / 0.2);
  background: hsl(var(--foreground) / 0.04);
}

.landing-surface-kicker {
  font-family: var(--landing-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.landing-surface-title {
  margin-top: 0.65rem;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.landing-surface-list {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.7rem;
}

.landing-surface-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
}

.landing-surface-list li span:first-child {
  margin-top: 0.35rem;
  width: 0.4rem;
  height: 0.4rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: hsl(var(--foreground));
}

.landing-capability-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid hsl(var(--border) / 0.7);
}

.landing-capability-row:last-child { border-bottom: 0; padding-bottom: 0; }
.landing-capability-row:first-child { padding-top: 0; }

.landing-capability-label {
  font-size: 0.9rem;
  font-weight: 550;
  color: hsl(var(--foreground));
}

.landing-capability-value {
  max-width: 14rem;
  text-align: right;
  font-size: 0.85rem;
  line-height: 1.35;
  color: hsl(var(--muted-foreground));
}

.landing-capability-value-strong {
  color: hsl(var(--foreground));
  font-weight: 550;
}

.landing-install-command {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #f5f5f7;
}

.landing-install-command code {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  color: #f5f5f7;
}

/* Control path — signature architecture diagram */
.landing-control-path {
  position: relative;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .landing-control-path {
    grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1.15fr) 2.5rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: stretch;
    gap: 0.85rem 0.5rem;
  }

  .landing-path-meta {
    grid-column: 3;
    margin-top: 0.35rem;
  }
}

.landing-path-node,
.landing-path-meta {
  border: 1px solid hsl(var(--foreground) / 0.12);
  border-radius: 1.15rem;
  background: hsl(var(--card) / 0.62);
  padding: 1.25rem 1.2rem;
  box-shadow: 0 20px 50px -40px hsl(var(--foreground) / 0.28);
  transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease;
}

.landing-path-node-emphasis {
  border-color: hsl(var(--foreground) / 0.22);
  background: hsl(var(--foreground) / 0.045);
}

.landing-path-node.is-active,
.landing-path-meta.is-active {
  border-color: hsl(var(--foreground) / 0.32);
  box-shadow: 0 24px 60px -38px hsl(var(--foreground) / 0.4);
  transform: translateY(-2px);
}

.landing-path-kicker {
  font-family: var(--landing-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.landing-path-title {
  margin-top: 0.55rem;
  font-family: var(--landing-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.landing-path-copy {
  margin-top: 0.55rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
}

.landing-path-edge {
  display: none;
}

@media (min-width: 1024px) {
  .landing-path-edge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }

  .landing-path-edge span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, hsl(var(--foreground) / 0.08), hsl(var(--foreground) / 0.35), hsl(var(--foreground) / 0.08));
    position: relative;
    overflow: hidden;
  }

  .landing-path-edge span::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 28%;
    background: hsl(var(--foreground));
    opacity: 0;
    transform: translateX(-120%);
  }

  .landing-control-path.is-animating .landing-path-edge span::after {
    opacity: 0.7;
    animation: path-pulse 2.8s ease-in-out infinite;
  }
}

@keyframes path-pulse {
  0% { transform: translateX(-120%); opacity: 0; }
  20% { opacity: 0.75; }
  55% { transform: translateX(260%); opacity: 0.35; }
  100% { transform: translateX(260%); opacity: 0; }
}

.landing-proof-card {
  border: 1px solid hsl(var(--foreground) / 0.1);
  border-radius: 1.1rem;
  background: hsl(var(--card) / 0.5);
  padding: 1.2rem 1.15rem;
  min-height: 100%;
}

.landing-proof-title {
  font-family: var(--landing-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.landing-proof-copy {
  margin-top: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
}

.landing-enterprise-card {
  border: 1px solid hsl(var(--foreground) / 0.18);
  border-radius: 1.5rem;
  background: hsl(var(--card) / 0.7);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 30px 80px -48px hsl(var(--foreground) / 0.32);
}

@media (min-width: 640px) {
  .landing-enterprise-card {
    padding: 2rem 1.85rem;
  }
}

.landing-setup-steps {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-setup-steps li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border: 1px solid hsl(var(--foreground) / 0.1);
  border-radius: 1.1rem;
  background: hsl(var(--card) / 0.45);
  padding: 1.15rem 1.2rem;
}

.landing-setup-index {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  font-family: var(--landing-display);
  font-size: 0.85rem;
  font-weight: 600;
}

.landing-setup-title {
  font-family: var(--landing-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.landing-setup-copy {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
}

.hero-scroll-line {
  width: 2.6rem;
  height: 1px;
  overflow: hidden;
  background: hsl(var(--border));
}

.hero-scroll-line::after {
  display: block;
  width: 55%;
  height: 100%;
  content: "";
  background: hsl(var(--foreground));
  animation: scroll-line 2.6s ease-in-out infinite;
}

.landing-signal-strip,
.landing-demo-section,
.landing-calculator-section,
.landing-footer {
  background-color: hsl(var(--muted) / 0.18);
  background-image: radial-gradient(circle at 50% 0%, hsl(var(--foreground) / 0.035), transparent 30rem);
}

.landing-footer {
  padding-block: 4.5rem 3.5rem;
}

.landing-footer__inner {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 640px) {
  .landing-footer__inner {
    padding-inline: 1.5rem;
  }
}

.landing-footer__grid {
  display: grid;
  gap: 2.5rem 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .landing-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .landing-footer__grid {
    grid-template-columns: minmax(14rem, 1.35fr) minmax(8rem, 0.85fr) minmax(11rem, 1.15fr) minmax(7rem, 0.7fr);
    gap: 2.75rem 2.5rem;
    align-items: start;
  }

  .landing-footer__brand {
    grid-column: auto;
  }
}

.landing-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--border) / 0.5);
}

@media (min-width: 1024px) {
  .landing-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 3.5rem;
    padding-top: 2.25rem;
  }
}

.landing-section::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background-image: radial-gradient(circle, hsl(var(--foreground) / 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(90deg, transparent, black 48%, transparent);
  opacity: 0.3;
}

.landing-section-why > div,
.landing-demo-section > div {
  width: 100%;
  max-width: 72rem;
}

.landing-cta-section > div {
  width: 100%;
  max-width: 56rem;
}

.landing-feature-card,
.landing-pricing-card,
.landing-calculator-card,
.landing-faq-item,
.landing-install-terminal {
  box-shadow: 0 24px 70px -45px hsl(var(--foreground) / 0.24);
}

.landing-feature-card {
  min-height: 100%;
  border-radius: 1.5rem !important;
  transition: transform 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}

.landing-feature-card:hover { transform: translateY(-4px); border-color: hsl(var(--foreground) / 0.2); }
.landing-feature-card-active { box-shadow: 0 30px 80px -48px hsl(var(--foreground) / 0.36); }

.landing-demo-frame { box-shadow: 0 40px 100px -55px hsl(var(--foreground) / 0.3); }
.agent-demo-panel { border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }

.landing-pricing-card:hover { transform: translateY(-6px); box-shadow: 0 30px 80px -45px hsl(var(--foreground) / 0.28); }
.landing-pricing-card-featured .text-muted-foreground { color: hsl(var(--background) / 0.64) !important; }
.landing-pricing-card-featured .text-primary { color: hsl(var(--background)) !important; }
.landing-pricing-card-featured .border-primary\/50 { border-color: hsl(var(--background) / 0.3) !important; }

.landing-faq-item:hover { border-color: hsl(var(--foreground) / 0.2); background: hsl(var(--card) / 0.72); }

.landing-cta-section::after {
  position: absolute;
  left: 50%;
  bottom: -12rem;
  width: min(90vw, 70rem);
  aspect-ratio: 2;
  border: 1px solid hsl(var(--foreground) / 0.08);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
}

@keyframes grid-drift { to { background-position: 54px 54px; } }
@keyframes glow-breathe { 0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.92); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes title-sheen { 0%, 20% { background-position: 100% 50%; } 65%, 100% { background-position: 0% 50%; } }
@keyframes brand-sheen { 0%, 70% { transform: translateX(-110%); } 85%, 100% { transform: translateX(110%); } }
@keyframes signal-pulse { 0% { box-shadow: 0 0 0 0 hsl(var(--foreground) / 0.24); } 65%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes metric-scan { 0%, 100% { transform: scaleX(0.72); opacity: 0.55; } 50% { transform: scaleX(1); opacity: 1; } }
@keyframes scroll-line { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(190%); } }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

/* Typing effect for terminal */
.typing-effect {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid currentColor;
  animation: typing 2s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: currentColor }
}

/* Gradient text shimmer */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shimmer-text {
  background: linear-gradient(90deg, currentColor 0%, currentColor 40%, rgba(255,255,255,0.5) 50%, currentColor 60%, currentColor 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* ============================================================
   AGENT DEMO TERMINAL STYLES
   ============================================================ */

.agent-demo-panel {
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  backdrop-filter: blur(8px);
}

.agent-log-area {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.agent-log-area::-webkit-scrollbar {
  width: 4px;
}

.agent-log-area::-webkit-scrollbar-track {
  background: transparent;
}

.agent-log-area::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
}

/* Prompt block */
.agent-prompt-block {
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  border-left: 2px solid hsl(var(--primary));
  background: rgba(255,255,255,0.03);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 8px;
}

/* Log line */
.agent-log-line {
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.agent-log-prefix {
  font-weight: 600;
  flex-shrink: 0;
}

.agent-log-text {
  word-break: break-word;
}

/* Typewriter cursor in agent demo */
.agent-typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background-color: currentColor;
  margin-left: 1px;
  animation: blink-cursor 0.8s step-end infinite;
  vertical-align: text-bottom;
}

@keyframes blink-cursor {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}

/* Badge */
.agent-badge-wrapper {
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  margin-bottom: 6px;
}

.agent-badge {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Spinner */
.agent-spinner {
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  padding-left: 20px;
}

/* Result line */
.agent-result-line {
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  margin-top: 12px;
  margin-bottom: 8px;
}

/* Input bar cursor */
.agent-input-cursor {
  animation: blink-cursor 1s step-end infinite;
}

/* Section reveal animations */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }

/* Mobile agent demo adjustments */
@media (max-width: 1024px) {
	.hero-title { letter-spacing: -0.06em; }
	.hero-console { transform: none; }
  .agent-demo-panel {
    height: 440px !important;
  }
}

@media (min-width: 768px) {
	.hero-console-grid { grid-template-columns: minmax(0, 1fr) 220px; }
	.hero-runtime-panel { display: block !important; }
}

@media (max-width: 640px) {
	.legal-header-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
		gap: 0.85rem;
	}
	.legal-brand { width: fit-content; min-height: 2.75rem; }
	.legal-nav {
		width: calc(100% + 2rem);
		margin-inline: -1rem;
		padding: 0 1rem 0.2rem;
		flex-wrap: nowrap;
		gap: 0.8rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.legal-nav::-webkit-scrollbar { display: none; }
	.legal-nav > * {
		display: inline-flex;
		min-height: 2.75rem;
		flex: 0 0 auto;
		align-items: center;
	}
}

@media (max-width: 767px) {
	.landing-nav-inner > a { min-height: 2.75rem; }
	.landing-nav-actions { gap: 0.5rem; }
	.landing-nav-cta,
	.landing-nav-signin { display: none !important; }
	.landing-nav-links { display: none !important; }
	.landing-nav-menu-toggle {
		display: inline-flex !important;
		width: 2.75rem;
		height: 2.75rem;
	}
	.landing-nav.is-open {
		border-color: hsl(var(--border) / 0.72);
		background: hsl(var(--background) / 0.96);
		box-shadow: 0 18px 44px hsl(var(--foreground) / 0.1);
		backdrop-filter: blur(20px) saturate(130%);
	}
	.landing-nav-mobile {
		display: none;
		max-height: calc(100svh - 4rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
		background: color-mix(in oklab, var(--background) 92%, transparent);
		backdrop-filter: blur(16px);
		padding: 0.65rem 1rem max(1rem, env(safe-area-inset-bottom));
	}
	.landing-nav.is-open .landing-nav-mobile { display: grid; gap: 0.35rem; }
	.landing-nav-mobile > a {
		display: block;
		border-radius: 0.75rem;
		min-height: 2.75rem;
		padding: 0.72rem 0.85rem;
		font-size: 0.9rem;
		font-weight: 500;
		color: var(--muted-foreground);
	}
	.landing-nav-mobile > a:hover { background: color-mix(in oklab, var(--muted) 55%, transparent); color: var(--foreground); }
	.landing-nav-mobile-actions {
		display: grid;
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: 0.6rem;
		margin-top: 0.45rem;
		padding-top: 0.8rem;
		border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
	}
	.landing-nav-mobile-account {
		display: inline-flex;
		min-height: 2.75rem;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--border);
		border-radius: 0.65rem;
		padding: 0.55rem 0.8rem;
		font-size: 0.82rem;
		font-weight: 600;
	}
	.landing-nav-mobile-cta { min-height: 2.75rem; white-space: normal; text-align: center; }
}

@media (max-width: 640px) {
	.agent-demo-header {
		flex-direction: column;
		align-items: flex-start;
	}
	.agent-demo-meta {
		width: 100%;
	}
	.landing-hero { min-height: 100svh; }
	.hero-content { max-width: 100vw; overflow-x: clip; overflow-y: visible; }
	.hero-grid { background-size: 34px 34px; opacity: 0.32; }
	.hero-title { width: 100%; max-width: 100%; overflow-wrap: anywhere; font-size: clamp(2.35rem, 10.5vw, 3.1rem); line-height: 1.15; letter-spacing: -0.045em; }
	.hero-copy { width: 100%; max-width: 100%; font-size: 0.95rem; }
	.hero-eyebrow { margin-bottom: 1rem; font-size: 0.67rem; }
	.hero-brand { font-size: 1.05rem; }
	.hero-actions { width: 100%; flex-direction: column; }
	.hero-actions > a { width: min(100%, 15rem); }
	.hero-console-wrap { width: calc(100vw - 2rem); max-width: calc(100vw - 2rem); margin-top: 1.6rem; }
	.hero-console-log { min-height: 8.75rem; font-size: 0.625rem; }
	.landing-install-command code { white-space: normal; word-break: break-all; }
	.landing-capability-row { flex-direction: column; gap: 0.25rem; }
	.landing-capability-value { max-width: none; text-align: left; }
	.landing-section { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
  .agent-demo-panel {
    height: 400px !important;
  }
  .agent-log-area {
    font-size: 11px !important;
  }
  .agent-badge {
    font-size: 10px !important;
  }
}

@media (max-width: 370px) {
	.landing-nav-actions { gap: 0.35rem; }
	.landing-nav-mobile-actions { grid-template-columns: 1fr; }
}

@media (max-height: 720px) and (min-width: 768px) {
	.hero-title { font-size: clamp(3.2rem, 7vw, 5.5rem); }
	.hero-copy { margin-top: 0.8rem; font-size: 0.95rem; }
	.hero-console-wrap { margin-top: 1.25rem; }
	.hero-scroll { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}
	.animate-fade-in-up,
	[data-reveal] { opacity: 1 !important; transform: none !important; }
	.typing-effect { width: auto; border-right: 0; white-space: normal; }
	.gateway-comet { display: none !important; }
	.landing-control-path.is-animating .landing-path-edge span::after { animation: none !important; opacity: 0 !important; }
}

@media (max-width: 767px) {
	.gateway-comet { display: none !important; }
}