/* Landing — dark canvas with an amber bloom on the fold.
   Docs/support stay hard-edged NOC in brand.css. This file may glow. */

.shell {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(245, 165, 36, 0.18), transparent 58%),
    radial-gradient(ellipse 45% 40% at 100% 12%, rgba(255, 200, 87, 0.08), transparent 55%),
    radial-gradient(ellipse 40% 35% at 0% 18%, rgba(245, 165, 36, 0.07), transparent 50%),
    linear-gradient(180deg, #100e0a 0%, var(--bg) 42%, var(--bg) 100%);
}

.hero {
  position: relative;
  padding: clamp(2.5rem, 7vw, 4.25rem) 0 3rem;
  text-align: center;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -8% -8% auto -8%;
  height: 120%;
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--accent) 28%, transparent) 1px, transparent 0);
  background-size: 28px 28px;
  opacity: 0.22;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

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

.hero .btn {
  border-radius: 10px;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 auto 1.35rem;
  padding: 0.35rem 0.75rem;
  max-width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev));
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  white-space: normal;
  line-height: 1.35;
  text-align: left;
}

.live-pill .pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 65%, transparent);
  animation: live-ping 2s ease-out infinite;
  flex-shrink: 0;
}

@keyframes live-ping {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent);
  }
  70% {
    box-shadow: 0 0 0 8px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.hero .brand-mark {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}

.hero h1 {
  font-family: var(--font-display);
  /* Lower floor than a straight clamp would suggest: at narrow phone
     widths the 5.5vw term drops below almost any reasonable floor, so
     the floor itself is what has to keep the headline from overflowing
     the wrap. 2.1rem was locked in from ~611px down to phone widths,
     leaving no room to shrink further as the viewport kept narrowing. */
  font-size: clamp(1.65rem, 5.5vw, 3.6rem);
  font-weight: 550;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 0 auto 1rem;
  max-width: none;
  color: var(--ink);
  overflow-wrap: break-word;
}

.hero h1 em {
  font-style: italic;
  color: var(--accent-2);
  font-weight: 500;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  padding-bottom: 0.02em;
}

.hero .lede {
  margin: 0 auto 1rem;
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.12rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 0.5rem;
}

/* Rack console bezel around the product GIF — the GIF is the try-Admin control. */
.hero-visual {
  position: relative;
  display: block;
  width: min(960px, 100%);
  margin: 0 auto 0.5rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow), 0 0 80px -24px color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--bg-elev);
  text-decoration: none;
  color: inherit;
}

.hero-visual:hover {
  border-color: var(--accent);
  color: inherit;
}

.hero-visual .chrome {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-visual .chrome::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--ok);
  box-shadow: 10px 0 0 #3f3f46, 20px 0 0 #3f3f46;
  flex-shrink: 0;
}

.hero-visual .chrome-cta {
  margin-left: auto;
  color: var(--accent-2);
}

.hero-visual img {
  width: 100%;
  height: auto;
  display: block;
}

/* Fold diagram: clients → plane → runners/connectors, particles on the wires. */
.hop {
  --hop-r: 18px;
  position: relative;
  margin: 2.25rem auto 0;
  max-width: 1100px;
  min-height: 28rem;
}

.hop-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hop-path {
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.9;
}

.hop-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(9.5rem, 0.85fr) minmax(16rem, 1.15fr) minmax(11rem, 1fr);
  gap: clamp(1.25rem, 4vw, 3.5rem);
  align-items: center;
  min-height: 28rem;
  padding: 0.5rem 0.25rem;
}

.hop-kicker {
  margin: 0 0 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}

.hop-col {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.hop-col-out {
  gap: 1rem;
}

.hop-node,
.hop-cluster,
.hop-plane {
  border-radius: var(--hop-r);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--bg-elev) 78%, transparent);
  backdrop-filter: blur(10px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 40px -28px rgba(0, 0, 0, 0.8);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Entrance: cards settle in from their own side rather than just
   appearing, so the fold reads as a system assembling itself, not a
   static screenshot. Above the fold already, so this runs on load, not
   on scroll (the .reveal IntersectionObserver is for lower sections). */
.hop-col .hop-node,
.hop-plane,
.hop-col-out .hop-cluster {
  opacity: 0;
  animation: hop-settle 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hop-col .hop-node {
  animation-name: hop-settle-left;
}

.hop-col-out .hop-cluster {
  animation-name: hop-settle-right;
}

.hop-col .hop-node:nth-child(2) {
  animation-delay: 0.55s;
}
.hop-col .hop-node:nth-child(3) {
  animation-delay: 0.7s;
}
.hop-col .hop-node:nth-child(4) {
  animation-delay: 0.85s;
}
/* .hop-plane's own entrance delay (0.3s) is set on its full `animation`
   shorthand below, alongside the idle breathe loop -- a shorthand
   there would otherwise reset a delay set only here. */
.hop-col-out .hop-cluster:nth-child(1) {
  animation-delay: 0.65s;
}
.hop-col-out .hop-cluster:nth-child(2) {
  animation-delay: 0.8s;
}

@keyframes hop-settle-left {
  from {
    opacity: 0;
    translate: -14px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes hop-settle-right {
  from {
    opacity: 0;
    translate: 14px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes hop-settle {
  from {
    opacity: 0;
    translate: 0 10px;
    scale: 0.98;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

.hop-node:hover,
.hop-cluster:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 20px 40px -24px rgba(0, 0, 0, 0.85),
    0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

.hop-node {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  color: var(--ink);
  font-weight: 550;
  text-align: left;
}

.hop-ico {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: #1a1002;
  background: var(--accent);
}

.hop-plane {
  position: relative;
  padding: 1.35rem 1.25rem 1.2rem;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--bg-elev) 88%, transparent));
  animation: hop-settle 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards, hop-breathe 5s ease-in-out 0.9s infinite;
}

/* Slow, low-amplitude glow so the plane card reads as live/on even
   between particle arrivals -- not a pulse anyone should consciously
   notice, just enough that the card never looks switched off. */
@keyframes hop-breathe {
  0%,
  100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
      0 0 70px -12px color-mix(in srgb, var(--accent) 40%, transparent),
      0 24px 50px -30px rgba(0, 0, 0, 0.7);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent),
      0 0 90px -8px color-mix(in srgb, var(--accent) 55%, transparent),
      0 24px 50px -30px rgba(0, 0, 0, 0.7);
  }
}

.hop-plane::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: calc(var(--hop-r) + 10px);
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
  pointer-events: none;
}

.hop-plane-mark {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 550;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.hop-plane-sub {
  margin: 0.15rem 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.hop-cap {
  display: block;
  margin-top: 0.45rem;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--ink-dim);
  font-size: 0.88rem;
  font-weight: 500;
}

.hop-cluster {
  padding: 0.9rem 0.9rem 1rem;
  text-align: left;
}

.hop-cluster .hop-kicker {
  margin-bottom: 0.55rem;
}

.hop-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.hop-tiles span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0.35rem 0.4rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--ink-dim);
  font-size: 0.72rem;
  font-weight: 550;
  text-align: center;
}

@media (max-width: 860px) {
  .hop,
  .hop-stage {
    min-height: 0;
  }
  .hop-wires {
    display: none;
  }
  .hop-stage {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .hop-plane::before {
    display: none;
  }
}

.section {
  padding: clamp(3rem, 7vw, 5rem) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 0.5rem);
}

.section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  font-weight: 550;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
  max-width: none;
  line-height: 1.12;
  overflow-wrap: break-word;
}

.section-copy {
  color: var(--muted);
  max-width: 54rem;
  margin: 0 0 2rem;
  text-wrap: pretty;
}

#architecture .section-copy {
  max-width: none;
}

@media (min-width: 720px) {
  .keep-phrase {
    white-space: nowrap;
  }
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.panel {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.panel:hover {
  transform: translateY(-3px);
}

.panel.bad:hover {
  border-color: color-mix(in srgb, var(--danger) 65%, var(--line));
}

.panel.good:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--accent) 45%, transparent);
}

.panel .label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.panel h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}

.panel p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.95rem;
}

.panel.bad {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
}

.panel.good {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev));
}

.gov-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.gov-item {
  padding: 1.1rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.gov-item:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}

.gov-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.gov-item span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.arch-links {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.55rem;
}

.arch-links a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.arch-links a:hover {
  border-color: var(--accent);
  color: var(--accent-2);
  transform: translateX(3px);
}

.arch-links a span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
}

.cta-band {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}

.cta-band h2 {
  margin-inline: auto;
}

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (max-width: 1040px) {
  .gov-strip {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .gov-strip {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .live-pill .pulse {
    animation: none;
  }
  .hop-wires circle {
    display: none;
  }
  .hop-col .hop-node,
  .hop-plane,
  .hop-col-out .hop-cluster {
    opacity: 1;
    animation: none;
  }
  .panel,
  .gov-item,
  .arch-links a,
  .eco-box,
  .eco-col,
  .hop-node,
  .hop-cluster {
    transition: none;
  }
  .panel:hover,
  .gov-item:hover,
  .arch-links a:hover,
  .eco-box:hover,
  .eco-col:hover,
  .hop-node:hover,
  .hop-cluster:hover {
    transform: none;
  }
}

.try-cta {
  text-align: center;
  padding: 0.5rem 0 0.25rem;
}
.try-cta .section-copy {
  margin-inline: auto;
}
.try-cta .btn {
  margin-top: 0.5rem;
}

.eco {
  margin: 1.75rem 0 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  padding: clamp(1rem, 2.5vw, 1.75rem);
}

.eco-row {
  display: grid;
  gap: 0.75rem;
  align-items: stretch;
}

.eco-top {
  grid-template-columns: 1fr auto 1fr auto 1fr;
}

.eco-bottom {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 0.5rem;
}

.eco-box,
.eco-col {
  min-width: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.eco-box:hover,
.eco-col:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

.eco-box-accent {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.eco-box-title,
.eco-col-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.eco-box-sub,
.eco-col-sub {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 0.3rem;
}

.eco-chip {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--ink-dim);
  font-size: 0.82rem;
  font-weight: 500;
  overflow-wrap: break-word;
}

.eco-chip-ghost {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.eco-chip-tier-supported {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  color: var(--ink);
}

.eco-chip-tier-supported span {
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--accent);
  color: #1a1002;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.eco-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  position: relative;
  min-width: 4.5rem;
}

.eco-arrow::before {
  content: "";
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
  position: absolute;
  top: 50%;
}

.eco-arrow span {
  position: relative;
  background: var(--bg-elev);
  padding: 0.15rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.eco-caption {
  text-align: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 1.25rem 0 0.5rem;
}

@media (max-width: 1040px) {
  .eco-top {
    grid-template-columns: 1fr;
  }
  .eco-arrow {
    min-width: 0;
    min-height: 2.4rem;
    padding: 0.2rem 0;
  }
  .eco-arrow::before {
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
    background: linear-gradient(
      180deg,
      transparent,
      var(--line-strong) 25%,
      var(--line-strong) 75%,
      transparent
    );
  }
}

@media (max-width: 720px) {
  .eco-bottom {
    grid-template-columns: 1fr;
  }
}