/* Homepage only. Loaded by index.html after the shared dashboard theme. */

body:has(.landing-page) {
  background: #08090b !important;
  overflow-x: hidden;
}

html:has(.landing-page) {
  scroll-behavior: smooth;
}

body:has(.landing-page) .rogue-main {
  min-height: 0;
  padding: 0;
}

body:has(.landing-page) .rogue-footer {
  position: relative;
  border-top-color: rgba(255, 255, 255, 0.06);
  background: #08090b;
}

.landing-page {
  --landing-bg: #08090b;
  --landing-bg-soft: #0d0f12;
  --landing-text: #f7f8fa;
  --landing-muted: #9399a6;
  --landing-faint: #5f6570;
  --landing-line: rgba(255, 255, 255, 0.09);
  --landing-line-strong: rgba(255, 255, 255, 0.17);
  --landing-blue: #6574ff;
  --landing-cyan: #1ed8d2;
  --pointer-x: 0;
  --pointer-y: 0;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--landing-bg);
  color: var(--landing-text);
}

.landing-page *,
.landing-page *::before,
.landing-page *::after {
  box-sizing: border-box;
}

.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page p {
  margin-top: 0;
  letter-spacing: 0;
}

.landing-hero {
  position: relative;
  display: flex;
  min-height: max(640px, calc(100svh - 150px));
  isolation: isolate;
  overflow: hidden;
}

.landing-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 9, 11, 0.98) 0%, rgba(8, 9, 11, 0.84) 42%, rgba(8, 9, 11, 0.2) 74%, rgba(8, 9, 11, 0.78) 100%),
    linear-gradient(180deg, transparent 66%, var(--landing-bg) 100%);
}

.landing-texture {
  position: absolute;
  z-index: -4;
  inset: -9%;
  opacity: 0.42;
  transform: translate3d(calc(var(--pointer-x) * -18px), calc(var(--pointer-y) * -18px), 0) scale(1.06);
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
  animation: landingTextureDrift 18s ease-in-out infinite alternate;
}

.landing-texture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.15);
}

.landing-light {
  position: absolute;
  z-index: -3;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.14;
}

.landing-light-one {
  right: 6%;
  top: 3%;
  background: var(--landing-cyan);
  animation: landingLightOne 11s ease-in-out infinite alternate;
}

.landing-light-two {
  right: 29%;
  bottom: -38%;
  background: var(--landing-blue);
  opacity: 0.12;
  animation: landingLightTwo 14s ease-in-out infinite alternate;
}

.landing-hero-inner {
  position: relative;
  width: min(1220px, calc(100% - 48px));
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(26rem, 0.98fr);
  align-items: center;
  gap: 4rem;
  padding: 4.5rem 0 6rem;
}

.landing-copy {
  position: relative;
  z-index: 2;
  max-width: 42rem;
}

.landing-overline,
.landing-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.35rem;
  color: #a6abb5;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

.landing-live-dot {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #45c878;
  box-shadow: 0 0 0 0 rgba(69, 200, 120, 0.45);
  animation: landingLivePulse 2s ease-out infinite;
}

.landing-title {
  margin-bottom: 0.35rem;
  color: var(--landing-text);
  font-family: Rajdhani, Inter, sans-serif;
  font-size: 7.8rem;
  font-weight: 700;
  line-height: 0.83;
  letter-spacing: 0 !important;
}

.landing-statement {
  max-width: 38rem;
  margin-bottom: 1.2rem;
  color: var(--landing-text);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
}

.landing-statement span {
  color: #aeb4c1;
}

.landing-summary {
  max-width: 37rem;
  margin-bottom: 2.1rem;
  color: var(--landing-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.landing-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.landing-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--landing-text);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.landing-button i {
  font-size: 1rem;
}

.landing-button-primary {
  gap: 0.65rem;
  background: var(--landing-blue);
  border-color: var(--landing-blue);
  box-shadow: 0 10px 30px rgba(101, 116, 255, 0.18);
}

.landing-button-primary:hover {
  color: #fff;
  background: #7381ff;
  border-color: #7381ff;
  transform: translateY(-2px);
}

.landing-button-quiet {
  gap: 0.7rem;
  color: #d5d8df;
  border-color: var(--landing-line-strong);
  background: rgba(255, 255, 255, 0.025);
}

.landing-button-quiet:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
}

.landing-button-quiet i {
  font-size: 0.78rem;
  transition: transform 180ms ease;
}

.landing-button-quiet:hover i {
  transform: translateX(3px);
}

.landing-visual {
  position: relative;
  width: min(100%, 34rem);
  aspect-ratio: 1;
  justify-self: end;
  transform: translate3d(calc(var(--pointer-x) * 16px), calc(var(--pointer-y) * 12px), 0);
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}

.landing-visual::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: rgba(16, 20, 25, 0.72);
  filter: blur(18px);
}

.landing-logo {
  position: absolute;
  z-index: 3;
  inset: 11%;
  display: block;
  filter: drop-shadow(0 30px 45px rgba(0, 0, 0, 0.7));
  animation: landingLogoFloat 5.5s ease-in-out infinite;
}

.landing-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.landing-halo {
  position: absolute;
  z-index: 1;
  inset: 8%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.landing-halo-outer {
  inset: 0;
  border-style: dashed;
  border-color: rgba(30, 216, 210, 0.2);
  animation: landingRotate 28s linear infinite;
}

.landing-halo-inner {
  inset: 15%;
  border-color: rgba(101, 116, 255, 0.2);
  animation: landingRotateReverse 17s linear infinite;
}

.landing-halo::before,
.landing-halo::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--landing-cyan);
  box-shadow: 0 0 16px rgba(30, 216, 210, 0.8);
}

.landing-halo::before {
  top: 13%;
  left: 13%;
}

.landing-halo::after {
  right: 2%;
  bottom: 36%;
  width: 5px;
  height: 5px;
  background: var(--landing-blue);
  box-shadow: 0 0 14px rgba(101, 116, 255, 0.8);
}

.landing-scan {
  position: absolute;
  z-index: 2;
  left: 15%;
  right: 15%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30, 216, 210, 0.75), transparent);
  box-shadow: 0 0 18px rgba(30, 216, 210, 0.28);
  animation: landingScan 4s ease-in-out infinite;
}

.landing-scroll {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 1.35rem;
  display: flex;
  width: 28px;
  height: 42px;
  align-items: flex-start;
  justify-content: center;
  padding-top: 7px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  color: transparent;
  font-size: 0;
  text-decoration: none;
  transform: translateX(-50%);
  transition: border-color 180ms ease;
}

.landing-scroll:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.landing-scroll span {
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: #fff;
  animation: landingScrollCue 1.8s ease-in-out infinite;
}

.landing-network {
  position: relative;
  width: min(1220px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.55fr repeat(6, 1fr);
  border-top: 1px solid var(--landing-line);
  border-bottom: 1px solid var(--landing-line);
}

.landing-network-heading,
.landing-stat {
  min-width: 0;
  padding: 1.25rem 1rem;
}

.landing-network-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 0;
}

.landing-network-heading p,
.landing-network-heading span,
.landing-stat strong,
.landing-stat span {
  display: block;
  margin: 0;
}

.landing-network-heading p,
.landing-stat strong {
  overflow: hidden;
  color: #f1f2f5;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-network-heading div > span,
.landing-stat > span {
  margin-top: 0.3rem;
  color: var(--landing-faint);
  font-size: 0.61rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.landing-stat {
  border-left: 1px solid var(--landing-line);
}

.landing-stat small {
  margin-left: 0.2rem;
  color: var(--landing-faint);
  font-size: 0.62rem;
  font-weight: 600;
}

.landing-marquee {
  width: 100%;
  overflow: hidden;
  padding: 4.75rem 0 2.5rem;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.landing-marquee-track {
  display: flex;
  width: max-content;
  animation: landingMarquee 28s linear infinite;
}

.landing-marquee span {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-right: 2rem;
  color: rgba(255, 255, 255, 0.17);
  font-family: Rajdhani, Inter, sans-serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.landing-marquee i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--landing-cyan);
  opacity: 0.7;
}

.landing-features {
  width: min(1220px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.28fr);
  gap: 7rem;
  padding: 7rem 0 8.5rem;
}

.landing-section-intro {
  align-self: start;
  position: sticky;
  top: 8rem;
}

.landing-label {
  color: var(--landing-cyan);
}

.landing-label::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
}

.landing-section-intro h2,
.landing-setup-intro h2,
.landing-final h2 {
  margin-bottom: 1.35rem;
  color: var(--landing-text);
  font-size: 3.4rem;
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: 0 !important;
}

.landing-section-intro > p:last-child {
  max-width: 27rem;
  color: var(--landing-muted);
  font-size: 0.95rem;
  line-height: 1.75;
}

.landing-feature-list {
  border-top: 1px solid var(--landing-line);
}

.landing-feature {
  position: relative;
  display: grid;
  grid-template-columns: 2.1rem 2.5rem minmax(0, 1fr) 2.5rem;
  gap: 1.1rem;
  align-items: start;
  min-height: 10.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--landing-line);
  transition: border-color 220ms ease;
}

.landing-feature::before {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  height: 1px;
  background: var(--landing-cyan);
  transition: right 500ms cubic-bezier(.2, .7, .2, 1);
}

.landing-feature:hover::before {
  right: 0;
}

.landing-feature-number {
  padding-top: 0.3rem;
  color: var(--landing-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.65rem;
}

.landing-feature > i {
  width: 2.5rem;
  color: #d8dbe2;
  font-size: 1.2rem;
  text-align: center;
  transition: color 220ms ease, transform 220ms ease;
}

.landing-feature:hover > i {
  color: var(--landing-cyan);
  transform: translateY(-3px);
}

.landing-feature h3 {
  margin-bottom: 0.65rem;
  color: var(--landing-text);
  font-size: 1.25rem;
  font-weight: 650;
}

.landing-feature p {
  max-width: 34rem;
  margin-bottom: 0;
  color: var(--landing-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.landing-feature > a {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--landing-line);
  border-radius: 50%;
  color: var(--landing-muted);
  font-size: 0.72rem;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.landing-feature > a:hover {
  color: #fff;
  border-color: var(--landing-line-strong);
  transform: rotate(8deg);
}

.landing-setup {
  position: relative;
  padding: 8rem max(24px, calc((100% - 1220px) / 2)) 9rem;
  background: #0b0d10;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.landing-setup::before {
  content: "";
  position: absolute;
  width: 36rem;
  height: 36rem;
  right: -12rem;
  top: -22rem;
  border: 1px solid rgba(101, 116, 255, 0.14);
  border-radius: 50%;
  box-shadow: 0 0 0 6rem rgba(101, 116, 255, 0.025), 0 0 0 12rem rgba(255, 255, 255, 0.015);
  animation: landingSetupRing 9s ease-in-out infinite;
}

.landing-setup-intro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 4.5rem;
}

.landing-setup-intro .landing-label {
  align-self: start;
}

.landing-setup-intro h2 {
  max-width: 39rem;
  margin: 0;
}

.landing-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--landing-line);
}

.landing-steps li {
  position: relative;
  min-height: 18rem;
  padding: 2rem 3rem 0 0;
  border-right: 1px solid var(--landing-line);
}

.landing-steps li + li {
  padding-left: 3rem;
}

.landing-steps li:last-child {
  border-right: 0;
}

.landing-steps li > span {
  display: block;
  margin-bottom: 2.8rem;
  color: var(--landing-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.67rem;
}

.landing-step-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.2rem;
  place-items: center;
  border: 1px solid var(--landing-line-strong);
  border-radius: 50%;
  color: var(--landing-cyan);
}

.landing-steps h3 {
  margin-bottom: 0.65rem;
  color: var(--landing-text);
  font-size: 1.15rem;
  font-weight: 650;
}

.landing-steps p {
  max-width: 18rem;
  margin-bottom: 0;
  color: var(--landing-muted);
  font-size: 0.88rem;
  line-height: 1.7;
}

.landing-final {
  position: relative;
  width: min(1220px, calc(100% - 48px));
  min-height: 34rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

.landing-final::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--landing-cyan));
  opacity: 0.4;
}

.landing-final > picture {
  position: absolute;
  right: -2%;
  bottom: -30%;
  width: 34rem;
  aspect-ratio: 1;
  opacity: 0.11;
  filter: grayscale(0.35);
  animation: landingFinalFloat 8s ease-in-out infinite;
}

.landing-final > picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.landing-final .landing-label,
.landing-final h2,
.landing-final > p,
.landing-final > a {
  position: relative;
  z-index: 1;
}

.landing-final h2 {
  max-width: 44rem;
  margin-bottom: 1rem;
}

.landing-final > p:not(.landing-label) {
  max-width: 32rem;
  margin-bottom: 1.8rem;
  color: var(--landing-muted);
  line-height: 1.7;
}

.landing-enter {
  opacity: 0;
  animation: landingEnter 850ms cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: var(--enter-delay, 0s);
}

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.16, 1, .3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.landing-feature:nth-child(2),
.landing-steps li:nth-child(2) {
  transition-delay: 80ms;
}

.landing-feature:nth-child(3),
.landing-steps li:nth-child(3) {
  transition-delay: 160ms;
}

.landing-feature:nth-child(4) {
  transition-delay: 240ms;
}

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

@keyframes landingTextureDrift {
  0% { margin-left: -1.5%; }
  100% { margin-left: 1.5%; }
}

@keyframes landingLightOne {
  from { transform: translate3d(-4rem, -2rem, 0) scale(0.85); }
  to { transform: translate3d(3rem, 2rem, 0) scale(1.1); }
}

@keyframes landingLightTwo {
  from { transform: translate3d(2rem, 0, 0); }
  to { transform: translate3d(-5rem, -3rem, 0); }
}

@keyframes landingLogoFloat {
  0%, 100% { transform: translateY(-8px) rotate(-0.6deg); }
  50% { transform: translateY(10px) rotate(0.6deg); }
}

@keyframes landingRotate {
  to { transform: rotate(360deg); }
}

@keyframes landingRotateReverse {
  to { transform: rotate(-360deg); }
}

@keyframes landingScan {
  0%, 100% { transform: translateY(-8rem); opacity: 0; }
  22%, 75% { opacity: 1; }
  50% { transform: translateY(8rem); }
}

@keyframes landingScrollCue {
  0% { transform: translateY(0); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(17px); opacity: 0; }
}

@keyframes landingLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(69, 200, 120, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(69, 200, 120, 0); }
  100% { box-shadow: 0 0 0 0 rgba(69, 200, 120, 0); }
}

@keyframes landingMarquee {
  to { transform: translateX(-50%); }
}

@keyframes landingSetupRing {
  0%, 100% { transform: scale(0.96); opacity: 0.6; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes landingFinalFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-18px) rotate(2deg); }
}

@media (max-width: 1000px) {
  .landing-hero-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(21rem, 0.9fr);
    gap: 1.5rem;
  }

  .landing-title {
    font-size: 6.3rem;
  }

  .landing-statement {
    font-size: 1.65rem;
  }

  
  .landing-network {
    grid-template-columns: repeat(6, 1fr);
  }

  .landing-network-heading {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--landing-line);
  }

  .landing-stat:nth-child(2) {
    border-left: 0;
  }

  .landing-features {
    gap: 3.5rem;
  }

  .landing-section-intro h2,
  .landing-setup-intro h2,
  .landing-final h2 {
    font-size: 2.8rem;
  }
}

@media (max-width: 760px) {
  .landing-hero {
    min-height: 0;
  }

  .landing-hero::before {
    background:
      linear-gradient(180deg, rgba(8, 9, 11, 0.78) 0%, rgba(8, 9, 11, 0.46) 32%, rgba(8, 9, 11, 0.94) 72%, var(--landing-bg) 100%);
  }

  .landing-hero-inner {
    width: min(calc(100% - 32px), 37rem);
    grid-template-columns: 1fr;
    align-content: start;
    gap: 0;
    /* The mark sits top-right rather than centred above the copy, so the
       text starts near the top of the screen instead of below 15rem of
       reserved space. */
    padding: 6.5rem 0 4rem;
  }

  .landing-copy {
    z-index: 4;
    align-self: end;
  }

  .landing-overline {
    /* Keeps the eyebrow clear of the mark now that it is in the corner. */
    max-width: 60%;
    margin-bottom: 1rem;
  }

  .landing-title {
    font-size: 5.2rem;
  }

  .landing-statement {
    max-width: 31rem;
    font-size: 1.45rem;
  }

  .landing-summary {
    max-width: 31rem;
    font-size: 0.92rem;
  }

  .landing-visual {
    position: absolute;
    z-index: 1;
    width: 13.5rem;
    left: auto;
    right: -2.5rem;
    top: -1.5rem;
    opacity: 0.65;
  }

  
  .landing-scroll {
    display: none;
  }

  .landing-network {
    width: calc(100% - 32px);
    grid-template-columns: repeat(3, 1fr);
  }

  .landing-stat:nth-child(5) {
    border-left: 0;
  }

  .landing-stat {
    border-bottom: 1px solid var(--landing-line);
  }

  .landing-stat:nth-last-child(-n + 3) {
    border-bottom: 0;
  }

  .landing-marquee {
    padding-top: 3.5rem;
  }

  .landing-marquee span {
    font-size: 2.3rem;
  }

  .landing-features {
    width: calc(100% - 32px);
    grid-template-columns: 1fr;
    gap: 3.5rem;
    padding: 5.5rem 0 6.5rem;
  }

  .landing-section-intro {
    position: static;
  }

  .landing-section-intro h2,
  .landing-setup-intro h2,
  .landing-final h2 {
    font-size: 2.45rem;
  }

  .landing-setup {
    padding: 6rem 16px 6.5rem;
  }

  .landing-setup-intro {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-bottom: 3rem;
  }

  .landing-steps {
    grid-template-columns: 1fr;
  }

  .landing-steps li,
  .landing-steps li + li {
    min-height: 0;
    padding: 2rem 0 2.5rem 4.5rem;
    border-right: 0;
    border-bottom: 1px solid var(--landing-line);
  }

  .landing-steps li:last-child {
    border-bottom: 0;
  }

  .landing-steps li > span {
    position: absolute;
    left: 0;
    top: 2.2rem;
    margin: 0;
  }

  .landing-step-icon {
    margin-bottom: 1rem;
  }

  .landing-final {
    width: calc(100% - 32px);
    min-height: 31rem;
  }

  .landing-final > picture {
    width: 25rem;
    right: -9rem;
    bottom: -24%;
  }
}

@media (max-width: 480px) {
  .landing-hero {
    min-height: 0;
  }

  .landing-hero-inner {
    padding-top: 5.5rem;
    padding-bottom: 1.5rem;
  }

  .landing-title {
    font-size: 4.25rem;
  }

  .landing-statement {
    margin-bottom: 0.85rem;
    font-size: 1.25rem;
  }

  .landing-summary {
    margin-bottom: 1.5rem;
  }

  .landing-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 0.55rem;
  }

  .landing-button {
    width: 100%;
  }

  .landing-visual {
    /* Smaller again on a narrow screen, so it reads as a mark in the
       corner rather than competing with the title. */
    width: 11rem;
    left: auto;
    right: -2rem;
    top: -1.25rem;
    opacity: 0.6;
  }

  .landing-network-heading,
  .landing-stat {
    padding: 1rem 0.75rem;
  }

  .landing-network-heading {
    padding-left: 0;
  }

  .landing-stat:nth-child(2),
  .landing-stat:nth-child(5) {
    padding-left: 0;
  }

  .landing-stat strong {
    font-size: 0.78rem;
  }

  .landing-feature {
    grid-template-columns: 1.75rem 2rem minmax(0, 1fr);
    gap: 0.75rem;
  }

  .landing-feature > i {
    width: 2rem;
  }

  .landing-feature > a {
    display: none;
  }

  .landing-section-intro h2,
  .landing-setup-intro h2,
  .landing-final h2 {
    font-size: 2.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.landing-page) {
    scroll-behavior: auto;
  }

  .landing-enter,
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .landing-texture,
  .landing-light,
  .landing-logo,
  .landing-halo,
  .landing-scan,
  .landing-orbit,
  .landing-cap-inner,
  .landing-live-dot,
  .landing-scroll span,
  .landing-marquee-track,
  .landing-setup::before,
  .landing-final > picture {
    animation: none;
  }
}

/* ── Capability orbit ──
   Each label sits at its own angle on one ring. The ring rotates and every
   label counter-rotates by the same amount, so the text travels around the
   mark while staying upright and readable.
   ── */

.landing-orbit {
  position: absolute;
  z-index: 4;
  /* Inset controls how far the labels sit from the mark: the ring is this
     box, and each label rides its edge. */
  inset: 17%;
  pointer-events: none;
  animation: landingOrbit 44s linear infinite;
}

.landing-cap {
  position: absolute;
  inset: 0;
  /* Turn to this label's angle, then push it out to the ring's edge. */
  transform: rotate(var(--angle)) translateX(50%);
}

.landing-cap-inner {
  position: absolute;
  top: 50%;
  left: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(8, 9, 11, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #c6cad2;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  /* Cancel this label's own angle so it starts level, then spin backwards
     at exactly the ring's rate. Both animations share one duration and
     timing function, so the two rotations always sum to zero and the pill
     never tilts. */
  transform: translate(-50%, -50%) rotate(calc(var(--angle) * -1));
  animation: landingOrbitText 44s linear infinite;
}

.landing-cap-inner b {
  color: var(--landing-cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6rem;
  font-weight: 700;
}

@keyframes landingOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Counter-rotation keeps the text level; the opacity shift gives the ring
   some depth as labels pass behind the mark. */
@keyframes landingOrbitText {
  from { transform: translate(-50%, -50%) rotate(calc(var(--angle) * -1)); }
  to   { transform: translate(-50%, -50%) rotate(calc((var(--angle) + 360deg) * -1)); }
}

@media (max-width: 1000px) {
  .landing-cap-inner { font-size: 0.63rem; padding: 0.25rem 0.6rem; }
}

@media (max-width: 760px) {
  /* The orbit needs room the hero no longer has on a phone. */
  .landing-orbit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-orbit,
  .landing-cap-inner { animation: none; }
}