html,
body,
body.page-overview,
#main.main,
.main {
  background: #000 !important;
  color: #f5f5f7 !important;
}

body.page-overview {
  background-image:
    radial-gradient(circle at top center, rgba(58, 58, 61, 0.35), transparent 32%),
    linear-gradient(180deg, #000 0%, #050505 40%, #000 100%) !important;
}

html:not([data-language="en"]) .localized-copy[data-lang="en"] {
  display: none !important;
}

html[data-language="en"] .localized-copy[data-lang="zh"] {
  display: none !important;
}

#globalheader,
#globalheader .globalnav,
#ac-localnav,
#ac-localnav .ac-ln-background,
#ac-globalfooter,
#ac-globalfooter .ac-gf-content {
  background: rgba(0, 0, 0, 0.88) !important;
  color: #f5f5f7 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#globalheader a,
#globalheader button,
#ac-localnav a,
#ac-localnav button,
#ac-globalfooter,
#ac-globalfooter a,
#ac-globalfooter button,
#ac-globalfooter small {
  color: #f5f5f7 !important;
}

#ac-localnav .ac-ln-button,
.section-hero .hero-button {
  background: #2997ff !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

.page-overview .section,
.page-overview .section-content,
.page-overview .hero-top,
.page-overview .hero-content-container {
  background: transparent !important;
}

.section-hero {
  background:
    radial-gradient(circle at 50% 5%, rgba(120, 120, 130, 0.18), transparent 34%),
    linear-gradient(180deg, #000 0%, #080808 100%) !important;
}

.section-hero .hero-content-container {
  position: relative;
}

.hero-language-toggle {
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 3;
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(22, 22, 24, 0.78);
  backdrop-filter: blur(18px);
}

.language-toggle-button {
  min-width: 48px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #a1a1a6;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.language-toggle-button.is-active {
  background: #f5f5f7;
  color: #000;
}

.hero-app-content {
  margin-bottom: 22px !important;
}

.threply-logo {
  display: block;
  width: min(420px, 62vw);
  max-width: 100%;
  height: auto;
  --target-icon-size: 168px;
}

.threply-app-name {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  font-family: "Special Gothic Expanded One", "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 32px !important;
  line-height: 1.05 !important;
  letter-spacing: 0.02em !important;
  text-transform: none;
  color: #f5f5f7 !important;
}

.hero-copy-container {
  max-width: 900px;
}

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

.section-library,
.section-devices,
.section-faq {
  background: #000 !important;
}

.section-tiles,
.section-router {
  background: #080808 !important;
}

.section-library .gallery-item,
.section-tiles .tile,
.section-faq .accordion-item,
.section-router .router-wrapper,
.section-devices .devices-container,
.section-library .tabnav-link,
.section-library .play-pause-button {
  background: #1d1d1f !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.section-tiles .tile,
.section-faq .accordion-item,
.section-router .router-wrapper {
  border-radius: 28px !important;
}

.section-library .tabnav-link {
  color: #a1a1a6 !important;
}

.section-library .tabnav-link.current,
.section-library .tabnav-link:hover,
.section-library .tabnav-link:focus {
  color: #f5f5f7 !important;
  background: #2a2a2d !important;
}

.section-headline,
.hero-title,
.hero-headline,
.tile-headline,
.router-headline,
.accordion-title-text,
.devices-item-label,
.reco-item-name,
.recos-label,
.section .typography-section-headline,
.section .typography-router-headline,
.section .typography-eyebrow-reduced,
.section .typography-body-tight,
.section h1,
.section h2,
.section h3 {
  color: #f5f5f7 !important;
}

.hero-copy,
.section-copy,
.tile-copy,
.router-copy,
.accordion-content p,
.accordion-content li,
.reco-item-author,
.tabnav-link span,
.devices-item-label,
.page-overview p {
  color: #a1a1a6 !important;
}

.section a,
.accordion-content a,
.router-wrapper a,
.ac-gf-directory-column-section-link,
.ac-gf-footer a {
  color: #2997ff !important;
}

.section .icon-copy,
.section .button,
.section .hero-button .icon-copy {
  color: inherit !important;
}

.launch-status-button {
  background: #2a2a2d !important;
  color: #f5f5f7 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  cursor: default !important;
  pointer-events: none !important;
  opacity: 0.96;
}

.section-devices .devices-item {
  background: #111 !important;
  border-radius: 24px !important;
  padding: 24px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.section-devices .devices-item-icon img {
  filter: brightness(1.04) contrast(1.02);
}

.section-faq .accordion-button {
  background: transparent !important;
  color: #f5f5f7 !important;
}

.section-faq .accordion-item {
  margin-bottom: 16px !important;
}

.section-faq .accordion-icon::before,
.section-faq .accordion-icon::after {
  background-color: #f5f5f7 !important;
}

.section-router .books-logo {
  filter: saturate(0.9) brightness(0.95);
}


@media only screen and (max-width: 734px) {
  .hero-language-toggle {
    top: 12px;
    right: 10px;
    transform: scale(0.94);
    transform-origin: top right;
  }

  .threply-logo {
    width: min(280px, 74vw);
    --target-icon-size: 100px;
  }

  .threply-app-name {
    margin-top: 12px !important;
    font-size: 24px !important;
  }

  .section-tiles .tile,
  .section-faq .accordion-item,
  .section-router .router-wrapper,
  .section-devices .devices-item {
    border-radius: 22px !important;
  }
}