/* Landing — dark rack/ops product surface on brand.css.
   No stars, aurora, or cobalt glow. Terminal-panel hero. */

.shell {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg, var(--bg) 0%, #0c0c0e 40%, var(--bg) 100%);
}

.hero {
  position: relative;
  padding: clamp(2.75rem, 8vw, 4.5rem) 0 2.25rem;
  text-align: center;
  overflow: hidden;
}

/* Faint moving grid — reads as "live console," not a cinematic glow.
   Two layered gradients drift at different speeds so it never repeats
   in an obviously loopy way. */
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 130%;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.05;
  animation: grid-drift 40s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Slow horizontal sweep, like a status scan — amber, low-opacity, never
   a full-bleed glow. */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
  animation: hero-sweep 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

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

@keyframes grid-drift {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 84px 42px, 42px 84px;
  }
}

@keyframes hero-sweep {
  0%,
  100% {
    left: -30%;
  }
  50% {
    left: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .cube,
  .live-pill .pulse {
    animation: none;
  }
}

/* Wireframe cubes: motion like a live console, amber edges, no aurora. */
.hero-cubes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: 1100px;
  overflow: hidden;
  z-index: 0;
}

.cube {
  position: absolute;
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
  animation: cube-spin 32s linear infinite;
}

.cube-a {
  --s: 240px;
  --h: 120px;
  left: 6%;
  top: 14%;
  opacity: 0.48;
}

.cube-b {
  --s: 150px;
  --h: 75px;
  right: 8%;
  top: 22%;
  opacity: 0.28;
  animation-duration: 46s;
  animation-direction: reverse;
}

.cube .face {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 10%, transparent),
    transparent 58%
  );
}

.cube .ft {
  transform: rotateY(0deg) translateZ(var(--h));
}
.cube .bk {
  transform: rotateY(180deg) translateZ(var(--h));
}
.cube .rt {
  transform: rotateY(90deg) translateZ(var(--h));
}
.cube .lt {
  transform: rotateY(-90deg) translateZ(var(--h));
}
.cube .tp {
  transform: rotateX(90deg) translateZ(var(--h));
}
.cube .bm {
  transform: rotateX(-90deg) translateZ(var(--h));
}

@keyframes cube-spin {
  from {
    transform: rotateX(-18deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-18deg) rotateY(360deg);
  }
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 auto 1.35rem;
  padding: 0.35rem 0.75rem;
  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;
}

.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;
  }
}

@media (max-width: 720px) {
  .cube-b {
    display: none;
  }
  .cube-a {
    left: 50%;
    margin-left: calc(var(--s) / -2);
    opacity: 0.32;
  }
  .live-pill {
    max-width: 100%;
    text-align: left;
    white-space: normal;
    line-height: 1.35;
  }
}

.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: 36rem;
  color: var(--muted);
  font-size: 1.12rem;
  min-height: 1.7em;
}

.hero .lede .typed::after {
  content: "";
  display: inline-block;
  width: 0.55ch;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.1em;
  background: var(--accent);
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 2.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;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  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;
}

.section {
  padding: clamp(3rem, 7vw, 5rem) 0;
  border-top: 1px solid var(--line);
}

.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;
}

.section-copy {
  color: var(--muted);
  max-width: 40rem;
  margin: 0 0 2rem;
}

.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: 860px) {
  .split,
  .gov-strip {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero .lede .typed::after {
    animation: none;
  }
  .panel,
  .gov-item,
  .arch-links a,
  .eco-box,
  .eco-col {
    transition: none;
  }
  .panel:hover,
  .gov-item:hover,
  .arch-links a:hover,
  .eco-box:hover,
  .eco-col:hover {
    transform: none;
  }
}

.nowrap-lg {
  max-width: none !important;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .nowrap-lg {
    white-space: normal;
  }
}

.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 {
  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;
}

.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;
}

.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: 860px) {
  .eco-top {
    grid-template-columns: 1fr;
  }
  .eco-arrow {
    transform: rotate(90deg);
    padding: 0.25rem 0;
  }
  .eco-bottom {
    grid-template-columns: 1fr;
  }
}