/* Readable fallback for browsers without CSS variables or Grid support. */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #07090f;
  color: #f4f7fb;
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

a {
  color: #a9c7ff;
  text-decoration: none;
}

img {
  max-width: 100%;
}

.topbar {
  border-bottom: 1px solid #252d3a;
  background: #07090f;
}

.nav-shell,
.section-shell,
.hero-inner,
.footer-inner,
.footer-bottom {
  width: 92%;
  max-width: 1180px;
  margin: 0 auto;
}

.nav-shell,
.brand,
.nav,
.global-status,
.hero-actions,
.feature-list,
.footer-inner,
.footer-bottom {
  display: flex;
  align-items: center;
}

.nav-shell {
  min-height: 70px;
  justify-content: space-between;
}

.brand,
.global-status,
.hero-actions,
.feature-list {
  gap: 10px;
}

.nav {
  gap: 14px;
}

.brand-icon {
  width: 38px;
  height: 38px;
}

.brand-copy strong,
.brand-copy small {
  display: block;
}

.brand-copy small,
.eyebrow,
.card-meta,
.version-line,
.footer-bottom {
  color: #7f8998;
}

.menu-button {
  display: none;
}

.hero {
  border-bottom: 1px solid #252d3a;
  background: #080b13;
}

.hero-inner {
  padding: 58px 0;
}

.hero-copy {
  max-width: 680px;
}

.device-stage {
  display: none;
}

h1 {
  margin: 12px 0 18px;
  font-size: 46px;
}

h2,
h3,
p {
  margin-top: 0;
}

.hero-description,
.info-card p,
.announcement-item p,
.guide-steps p,
.relay-copy p {
  color: #bec7d5;
  line-height: 1.7;
}

.button,
.quiet-button,
.retry-button,
.checksum-row button {
  display: inline-block;
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid #3a4658;
  border-radius: 6px;
  background: #151b27;
  color: #f4f7fb;
}

.button-primary {
  border-color: #4d8dff;
  background: #4d8dff;
  color: #061020;
}

.overview,
.updates,
.download,
.guide,
.relay {
  padding-top: 54px;
  padding-bottom: 54px;
}

.info-card,
.announcement-item,
.status-panel,
.download-surface,
.guide-steps li,
.relay-flow > div {
  margin-bottom: 12px;
  padding: 18px;
  border: 1px solid #252d3a;
  border-radius: 8px;
  background: #111620;
}

.tag,
.version-chip {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  background: #151b27;
}

.section-band,
.footer {
  border-top: 1px solid #252d3a;
  background: #0b0e16;
}

.service-list,
.guide-steps,
.feature-list {
  padding: 0;
  list-style: none;
}

.service-list li {
  padding: 12px 0;
  border-bottom: 1px solid #252d3a;
}

.requirements div,
.checksum-row {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #252d3a;
}

.requirements dd {
  margin: 4px 0 0;
}

.footer-inner,
.footer-bottom {
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
}

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

@media (max-width: 820px) {
  .nav {
    display: none;
  }

  .nav.is-open {
    display: block;
    position: absolute;
    top: 70px;
    right: 4%;
    left: 4%;
    padding: 10px;
    border: 1px solid #3a4658;
    background: #0c1018;
  }

  .nav.is-open a {
    display: block;
    padding: 12px;
    text-align: center;
  }

  .menu-button {
    display: block;
    width: 42px;
    height: 42px;
  }

  .hero-actions,
  .footer-inner,
  .footer-bottom {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button {
    text-align: center;
  }
}