/*
 * WOW reference product layout
 *
 * The supplied product screenshots use a compact, card-first information
 * hierarchy.  This layer keeps the existing behaviours and APIs intact while
 * bringing the public pages into that hierarchy.  The homepage globe is the
 * one intentionally retained large visual; decorative coins, avatars and
 * stickers are removed from the information path.
 */

:root {
  --ref-bg: #06101d;
  --ref-bg-soft: #0a1728;
  --ref-card: rgba(12, 31, 53, .88);
  --ref-card-strong: rgba(15, 42, 69, .95);
  --ref-line: rgba(130, 218, 255, .18);
  --ref-copy: #eaf7fc;
  --ref-muted: #8faaba;
  --ref-cyan: #5de8ff;
  --ref-mint: #8cffca;
  --ref-lime: #b5ff68;
  --ref-purple: #a184ff;
  --ref-radius: 20px;
}

/* Shared shell and typography */
.reference-layout {
  color-scheme: dark;
  color: var(--ref-copy);
  background:
    radial-gradient(circle at 82% 0%, rgba(74, 215, 255, .12), transparent 30rem),
    linear-gradient(180deg, #040b16 0%, var(--ref-bg) 45%, #040c17 100%);
}

.reference-layout .site-shell {
  background: linear-gradient(180deg, rgba(5, 17, 31, .93), rgba(4, 13, 24, .98));
  border-inline-color: rgba(126, 218, 255, .11);
}

.reference-layout .topbar {
  min-height: 72px;
  padding-block: 12px;
  border-bottom-color: rgba(126, 218, 255, .16);
  background: rgba(4, 13, 25, .9);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

.reference-layout .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  animation: none;
}

.reference-layout .brand-copy strong {
  font-size: clamp(22px, 2vw, 30px);
  text-shadow: none;
}

.reference-layout .brand-copy small {
  color: #9bb7c6;
  font-size: 10px;
}

.reference-layout .nav-links {
  gap: clamp(8px, 1.1vw, 16px);
}

.reference-layout .nav-links a {
  padding-block: 8px;
  color: #b8d0db;
  font-size: 13px;
  font-weight: 800;
}

.reference-layout .nav-links a.active,
.reference-layout .nav-links a:hover {
  color: #f4fdff;
}

.reference-layout .language,
.reference-layout .join-btn,
.reference-layout .wallet-btn,
.reference-layout .portal-wallet-button,
.reference-layout .portal-header-button {
  min-height: 38px;
  border-radius: 11px;
  font-size: 12px;
}

.reference-layout .join-btn,
.reference-layout .primary-btn,
.reference-layout .wide-action {
  box-shadow: 0 10px 24px rgba(83, 224, 201, .16);
}

/* Homepage: compact dashboard layout, with only the globe retained as the
   dominant visual. */
.home-page main {
  padding-bottom: 24px;
}

.home-page .hero {
  min-height: 610px;
  grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr);
  gap: clamp(20px, 4vw, 58px);
  padding: 56px clamp(20px, 5vw, 72px) 28px;
  background:
    radial-gradient(circle at 78% 44%, rgba(34, 190, 255, .12), transparent 28rem),
    linear-gradient(135deg, rgba(8, 27, 47, .62), rgba(4, 15, 28, .2));
}

.home-page .hero-copy {
  max-width: 650px;
  align-self: center;
}

.home-page .hero h1 {
  max-width: 620px;
  margin-top: 12px;
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: .99;
  letter-spacing: -.06em;
  text-transform: none;
}

.home-page .hero h1 span:first-child {
  color: #f1fbff;
}

.home-page .hero h1 span:last-child {
  color: var(--ref-mint);
}

.home-page .hero-quote {
  max-width: 570px;
  margin-top: 18px;
  color: #d5eaf2;
  font-size: 17px;
  line-height: 1.7;
}

.home-page .hero-subline {
  max-width: 600px;
  color: #91aebd;
  font-size: 13px;
  line-height: 1.7;
}

.home-page .launch-notice {
  max-width: 560px;
  margin-top: 18px;
  border-radius: 13px;
  background: rgba(91, 228, 255, .08);
}

.home-page .meme-signal-row {
  max-width: 560px;
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid var(--ref-line);
  border-radius: 14px;
  background: rgba(8, 33, 54, .75);
}

.home-page .coin-title {
  margin-top: 20px;
  align-items: baseline;
}

.home-page .coin-title span {
  font-size: clamp(30px, 4vw, 50px);
  letter-spacing: -.06em;
}

.home-page .feature-pills {
  max-width: 560px;
  margin-top: 14px;
}

.home-page .feature-pills span {
  border-color: rgba(137, 228, 255, .2);
  border-radius: 999px;
  color: #b6d8e3;
  background: rgba(255, 255, 255, .04);
}

.home-page .hero-actions {
  margin-top: 22px;
}

.home-page .hero-art {
  min-height: 540px;
}

.home-page .network-globe {
  place-items: end center;
}

.home-page .network-globe::before {
  right: 5%;
  top: 28px;
  width: min(45vw, 620px);
  height: min(45vw, 620px);
  opacity: .68;
}

.home-page .earth,
.home-page .earth-static {
  right: 7%;
  bottom: 22px;
  width: min(42vw, 580px);
  height: min(42vw, 580px);
  min-width: 0;
  min-height: 0;
}

.home-page .network-lines {
  opacity: .28;
}

.home-page .metrics {
  width: min(calc(100% - 72px), 1240px);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 18px auto 24px;
  border: 1px solid var(--ref-line);
  border-radius: 18px;
  background: rgba(9, 30, 50, .82);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .16);
}

.home-page .metric {
  display: block;
  min-height: 105px;
  padding: 16px 15px;
  border-right: 1px solid rgba(130, 218, 255, .12);
}

.home-page .metric-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  font-size: 12px;
  background: linear-gradient(135deg, rgba(93, 232, 255, .38), rgba(140, 255, 202, .22));
  box-shadow: none;
}

.home-page .metric small,
.home-page .metric em {
  display: block;
  font-size: 10px;
}

.home-page .metric strong {
  display: block;
  margin: 6px 0;
  font-size: 23px;
}

.home-page .metric em {
  color: #7899aa;
  font-style: normal;
}

.home-page .section {
  width: min(calc(100% - 72px), 1240px);
  margin: 0 auto 20px;
  padding: 24px;
  border: 1px solid var(--ref-line);
  border-radius: var(--ref-radius);
  background: linear-gradient(145deg, rgba(11, 34, 56, .86), rgba(6, 20, 37, .9));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .12);
}

.home-page .section-head {
  margin-bottom: 14px;
}

.home-page .section h2 {
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -.04em;
}

.home-page .section h2::before {
  width: 28px;
  height: 4px;
  border-radius: 999px;
  box-shadow: none;
}

.home-page .live-operations,
.home-page .product-hub,
.home-page .logo-showcase,
.home-page .waitlist-section {
  padding: 24px;
}

.home-page .live-operations-intro,
.home-page .product-hub-intro,
.home-page .logo-showcase-intro {
  max-width: 820px;
  color: #8eaab8;
  font-size: 13px;
  line-height: 1.7;
}

.home-page .live-operations-statuses {
  gap: 8px;
}

.home-page .product-status-chip {
  border-color: rgba(130, 218, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
}

.home-page .product-hub-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.home-page .product-hub-card {
  min-height: 170px;
  padding: 15px;
  border-radius: 16px;
  background: rgba(5, 21, 38, .68);
}

.home-page .product-hub-card h3 {
  font-size: 15px;
}

.home-page .product-hub-card p {
  color: #86a4b3;
  font-size: 11px;
}

.home-page .transmission {
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.home-page .transmission-copy h2 {
  max-width: 820px;
  font-size: clamp(28px, 4vw, 48px);
  text-transform: none;
}

.home-page .transmission-copy p:not(.eyebrow) {
  max-width: 820px;
  color: #9ab5c1;
  font-size: 14px;
  font-weight: 500;
}

.home-page .transmission-actions {
  max-width: 820px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
}

.home-page .transmission-actions span {
  min-height: 44px;
  border: 1px solid rgba(130, 218, 255, .18);
  border-radius: 11px;
  color: #d9f6fb;
  background: rgba(255, 255, 255, .04);
  box-shadow: none;
  transform: none;
}

.home-page .transmission-actions span:nth-child(even) {
  transform: none;
}

.home-page .logo-showcase .logo-rail {
  border-color: rgba(130, 218, 255, .16);
  border-radius: 15px;
  background: rgba(4, 18, 34, .65);
}

.home-page .logo-rail-track {
  padding: 13px;
  gap: 10px;
}

.home-page .logo-rail-track > span {
  min-width: 178px;
  min-height: 58px;
  padding: 7px 12px 7px 8px;
  border-color: rgba(130, 218, 255, .14);
  border-radius: 13px;
  background: rgba(255, 255, 255, .045);
}

.home-page .logo-rail-track > span img {
  width: 40px;
  height: 38px;
  flex-basis: 40px;
  padding: 5px;
  border-radius: 10px;
}

.home-page .logo-rail-track > span strong {
  font-size: 11px;
}

/* Make legacy information sections read as compact dashboard cards instead
   of tall campaign canvases. */
.home-page .dashboard,
.home-page .token-allocation-section,
.home-page .transaction-tax-section,
.home-page .partners,
.home-page .about-grid,
.home-page .roadmap,
.home-page .platform-modules,
.home-page .docs-section,
.home-page .risk-section,
.home-page .business-flywheel,
.home-page .connection {
  min-height: 0;
}

.home-page .market-panel,
.home-page .social-panel,
.home-page .video-panel {
  min-height: 260px;
}

.home-page .about-card {
  grid-template-columns: 1fr;
  gap: 14px;
}

.home-page .about-card img {
  display: none;
}

.home-page .roadmap-track {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.home-page .roadmap-track article {
  padding: 16px;
}

/* Portal pages (WOW 乐园 / 发现 / 我的 / 资料) */
.portal-page .portal-main {
  width: min(calc(100% - 36px), 1280px);
  padding: 28px 0 82px;
}

.portal-page .portal-hero {
  min-height: 0;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 16px;
  padding: 30px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 0%, rgba(93, 232, 255, .15), transparent 22rem),
    linear-gradient(135deg, rgba(13, 48, 75, .92), rgba(8, 25, 46, .96));
}

.portal-page .portal-hero::after,
.portal-page .portal-hero-art {
  display: none;
}

.portal-page .portal-hero h1 {
  max-width: 760px;
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -.055em;
}

.portal-page .portal-hero-copy > p:not(.portal-kicker) {
  max-width: 760px;
  margin-top: 14px;
  color: #9fb8c5;
  font-size: 14px;
  line-height: 1.75;
}

.portal-page .portal-hero-actions {
  margin-top: 20px;
}

.portal-page .portal-summary-grid {
  gap: 10px;
  margin-bottom: 16px;
}

.portal-page .portal-summary-card,
.portal-page .portal-section,
.portal-page .portal-card {
  border-color: var(--ref-line);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(14, 40, 64, .88), rgba(7, 23, 42, .92));
  box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
}

.portal-page .portal-summary-card {
  min-height: 112px;
  padding: 16px;
}

.portal-page .portal-summary-card strong {
  margin: 8px 0 4px;
  font-size: clamp(20px, 2.6vw, 28px);
}

.portal-page .portal-section {
  margin-top: 16px;
  padding: 22px;
}

.portal-page .portal-section-head {
  margin-bottom: 16px;
}

.portal-page .portal-section-head h2 {
  font-size: clamp(23px, 3vw, 32px);
}

.portal-page .portal-tabs,
.portal-page .discover-product-tabs {
  gap: 6px;
}

.portal-page .portal-tabs button,
.portal-page .discover-product-tabs button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border-color: rgba(130, 218, 255, .16);
  color: #a8c3cf;
  background: rgba(255, 255, 255, .045);
}

.portal-page .portal-tabs button.is-active,
.portal-page .discover-product-tabs button.is-active {
  color: #061019;
  border-color: transparent;
  background: linear-gradient(90deg, var(--ref-mint), var(--ref-cyan));
}

.quest-page .playground-showcase,
.discover-page .discover-product-switcher {
  margin: 16px 0;
  padding: 22px;
  border-color: var(--ref-line);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(19, 48, 76, .9), rgba(8, 24, 44, .96));
}

.quest-page .playground-grid {
  gap: 9px;
  margin-top: 14px;
}

.quest-page .playground-card {
  min-height: 132px;
  padding: 14px;
  border-radius: 15px;
  background: rgba(3, 16, 32, .62);
}

.quest-page .quest-feature-card,
.quest-page .today-reward-card,
.quest-page .task-growth-card,
.quest-page .reward-ledger-preview {
  border-color: rgba(130, 218, 255, .15);
  border-radius: 17px;
  background: rgba(7, 27, 48, .82);
}

.discover-page .portal-search {
  margin-top: 14px;
  border-radius: 14px;
  background: rgba(3, 17, 33, .72);
}

.discover-page .discover-feature-grid,
.discover-page .discover-product-grid,
.discover-page .portal-grid {
  gap: 10px;
}

.discover-page .discover-feature,
.discover-page .discover-product-card {
  border-radius: 16px;
  border-color: rgba(130, 218, 255, .15);
  background: rgba(8, 28, 49, .8);
}

.my-page .profile-card,
.my-page .my-passport,
.my-page .passport-ai-card,
.my-page .passport-growth-card,
.my-page .passport-identity-card,
.my-page .passport-world-card {
  border-color: rgba(130, 218, 255, .16);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(17, 43, 72, .92), rgba(8, 23, 44, .94));
}

.my-page .my-passport {
  padding: 20px;
}

.my-page .passport-holo {
  box-shadow: none;
}

.docs-page .docs-layout {
  gap: 14px;
}

.docs-page .docs-sidebar,
.docs-page .docs-content,
.docs-page .doc-item {
  border-color: rgba(130, 218, 255, .16);
  border-radius: 16px;
  background: rgba(8, 28, 49, .82);
}

/* Academy follows the same library / catalogue hierarchy. */
.academy-page .academy-hero {
  min-height: 0;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 50px clamp(22px, 5vw, 72px) 34px;
  border-bottom: 1px solid rgba(126, 218, 255, .14);
}

.academy-page .academy-hero::before,
.academy-page .academy-hero::after,
.academy-page .academy-hero-grid,
.academy-page .academy-hero-visual,
.academy-page .floating-note {
  display: none;
}

.academy-page .academy-hero h1 {
  max-width: 780px;
  margin-top: 18px;
  font-size: clamp(38px, 5vw, 62px);
}

.academy-page .academy-intro {
  max-width: 760px;
  margin-bottom: 20px;
  color: #9fb8c5;
  font-size: 15px;
}

.academy-page .academy-search {
  max-width: 760px;
  min-height: 54px;
  border-radius: 14px;
  background: rgba(3, 18, 34, .76);
}

.academy-page .academy-section {
  margin: 18px clamp(18px, 5vw, 72px) 0;
  padding: 22px;
  border: 1px solid var(--ref-line);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(11, 34, 56, .88), rgba(6, 20, 37, .92));
}

.academy-page .featured-grid,
.academy-page .article-grid,
.academy-page .learning-path,
.academy-page .security-checks {
  gap: 10px;
}

.academy-page .article-card,
.academy-page .featured-main,
.academy-page .featured-small,
.academy-page .path-step {
  border-color: rgba(130, 218, 255, .15);
  border-radius: 16px;
  background: rgba(7, 27, 48, .82);
}

/* Mobile: follow the reference's fixed tabs / bottom navigation and avoid
   decorative overflow. */
@media (max-width: 1100px) {
  .home-page .hero {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  }

  .home-page .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-page .product-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .roadmap-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .reference-layout .topbar {
    min-height: 64px;
    padding-inline: 14px;
  }

  .reference-layout .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .reference-layout .brand-copy strong {
    font-size: 21px;
  }

  .reference-layout .brand-copy small {
    display: none;
  }

  .home-page .hero {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 34px 18px 18px;
  }

  .home-page .hero-art {
    order: -1;
    min-height: min(100vw, 520px);
    margin-inline: -4px;
  }

  .home-page .earth,
  .home-page .earth-static {
    left: 50%;
    right: auto;
    top: 24px;
    bottom: auto;
    width: min(92vw, 480px);
    height: min(92vw, 480px);
    --earth-shift: translateX(-50%);
    transform: var(--earth-shift);
  }

  .home-page .network-globe::before {
    left: 50%;
    right: auto;
    top: 10px;
    width: min(96vw, 500px);
    height: min(96vw, 500px);
    transform: translateX(-50%);
  }

  .home-page .metrics {
    width: min(calc(100% - 28px), 1240px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
  }

  .home-page .metric {
    min-height: 98px;
    padding: 13px;
  }

  .home-page .metric:nth-child(odd) {
    border-right: 1px solid rgba(130, 218, 255, .12);
  }

  .home-page .metric:nth-child(even) {
    border-right: 0;
  }

  .home-page .section {
    width: min(calc(100% - 28px), 1240px);
    margin-bottom: 14px;
    padding: 18px;
    border-radius: 17px;
  }

  .home-page .product-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .product-hub-card {
    min-height: 150px;
  }

  .home-page .transmission-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .roadmap-track {
    display: flex;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none;
  }

  .home-page .roadmap-track article {
    flex: 0 0 78vw;
  }

  .portal-page .portal-main {
    width: min(calc(100% - 28px), 1280px);
    padding-top: 18px;
  }

  .portal-page .portal-hero {
    padding: 22px;
  }

  .portal-page .portal-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-page .portal-section {
    padding: 18px;
  }

  .quest-page .playground-showcase,
  .discover-page .discover-product-switcher {
    padding: 18px;
  }

  .academy-page .academy-hero {
    padding: 34px 18px 24px;
  }

  .academy-page .academy-section {
    margin-inline: 14px;
    padding: 18px;
  }
}

@media (max-width: 460px) {
  .home-page .hero h1 {
    font-size: 40px;
  }

  .home-page .hero-quote {
    font-size: 15px;
  }

  .home-page .product-hub-grid {
    grid-template-columns: 1fr;
  }

  .home-page .product-hub-card {
    min-height: 128px;
  }

  .home-page .transmission-actions {
    grid-template-columns: 1fr;
  }

  .portal-page .portal-summary-grid {
    gap: 8px;
  }

  .portal-page .portal-summary-card {
    padding: 13px;
  }
}

/* IDO: use a clear command-centre hierarchy and keep the functional forms
   prominent.  The old AI orb is not an information-bearing control, so the
   reference layout uses the step tracker instead. */
.presale-page {
  background:
    radial-gradient(circle at 86% 0%, rgba(90, 190, 255, .12), transparent 28rem),
    linear-gradient(180deg, #040b16, #071526 48%, #040c17);
}

.presale-page .presale-shell {
  max-width: 1320px;
  padding-inline: clamp(14px, 3vw, 30px);
  background: linear-gradient(180deg, rgba(5, 17, 31, .93), rgba(4, 13, 24, .98));
}

.presale-page .presale-topbar {
  min-height: 72px;
  padding-block: 12px;
  background: rgba(4, 13, 25, .92);
}

.presale-page .presale-brand strong {
  font-size: 26px;
  text-shadow: none;
}

.presale-page .presale-tabs {
  top: 72px;
  padding-block: 8px;
  background: rgba(4, 13, 25, .92);
}

.presale-page .presale-tab {
  min-height: 42px;
  border-radius: 11px;
  background: rgba(11, 32, 52, .86);
}

.presale-page .tab-hero {
  max-width: 860px;
  padding: 38px 0 22px;
}

.presale-page .presale-hero {
  grid-template-columns: 1fr;
  padding: 42px 0 24px;
}

.presale-page .presale-hero h1 {
  max-width: 860px;
  font-size: clamp(38px, 5vw, 64px);
}

.presale-page .hero-lede {
  max-width: 820px;
  margin-top: 16px;
  color: #9fb8c5;
  font-size: 15px;
}

.presale-page .hero-orb {
  display: none;
}

.presale-page .panel,
.presale-page .risk-box {
  border-color: var(--ref-line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(13, 38, 62, .92), rgba(6, 19, 36, .95));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .12);
}

.presale-page .ido-command-center {
  padding: 20px;
  background: linear-gradient(135deg, rgba(15, 54, 77, .92), rgba(8, 27, 49, .96));
}

.presale-page .presale-grid {
  gap: 14px;
}

.presale-page .purchase-panel,
.presale-page .position-panel,
.presale-page .reservation-form,
.presale-page .reservation-points,
.presale-page .digital-human-overview,
.presale-page .nft-position-card,
.presale-page .delivery-card,
.presale-page .schedule-panel {
  padding: 22px;
}

.presale-page .phase-card,
.presale-page .order-details span,
.presale-page .position-meta span,
.presale-page .schedule-grid span {
  border-color: rgba(130, 218, 255, .14);
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
}

.presale-page .text-input,
.presale-page .amount-input {
  border-color: rgba(130, 218, 255, .2);
  border-radius: 11px;
  background: rgba(2, 14, 28, .74);
}

.presale-page .nft-card {
  min-height: 220px;
  margin: 18px 0;
  border-radius: 16px;
}

.presale-page .steps-section {
  padding: 28px 0 18px;
}

.presale-page .steps-grid {
  gap: 10px;
}

.presale-page .steps-grid article {
  min-height: 144px;
  border-color: rgba(130, 218, 255, .14);
  border-radius: 15px;
  background: rgba(8, 28, 49, .78);
}

@media (max-width: 760px) {
  .presale-page .presale-shell {
    padding-inline: 14px;
  }

  .presale-page .presale-hero {
    padding-top: 28px;
  }

  .presale-page .tab-hero {
    padding-top: 26px;
  }
}

/* Do not let the layout layer mask functional hidden states. */
.reference-layout [hidden] {
  display: none !important;
}

/* Keep the functional IDO state readable after the reference skin loads. */
.presale-page .presale-tab.is-active {
  color: #061019;
  border-color: transparent;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  box-shadow: 0 10px 28px rgba(91, 228, 255, .16);
}

/* Grid items must be allowed to shrink on narrow screens.  Without an
   explicit min-width: 0, long wallet/order labels expand the whole IDO shell
   and the browser hides the resulting overflow. */
.presale-page .presale-shell,
.presale-page .presale-grid,
.presale-page .presale-grid > *,
.presale-page .panel,
.presale-page .panel-heading,
.presale-page .panel-heading > *,
.presale-page .presale-hero,
.presale-page .presale-hero > *,
.presale-page .tab-hero,
.presale-page .phase-card,
.presale-page .phase-card > * {
  min-width: 0;
}

@media (max-width: 760px) {
  .home-page .earth,
  .home-page .earth-static {
    left: 50%;
    right: auto;
    --earth-shift: translateX(-50%);
    transform: var(--earth-shift);
  }
}

@media (max-width: 560px) {
  .presale-page .presale-shell {
    width: 100%;
    padding-inline: 12px;
  }

  .presale-page .panel-heading {
    flex-wrap: wrap;
  }

  .presale-page .panel-heading h2 {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: clamp(22px, 7vw, 29px);
  }

  .presale-page .panel-heading .draft-tag,
  .presale-page .panel-heading .nft-chip {
    flex: 0 0 auto;
  }

  .presale-page .checkin-days,
  .presale-page .position-meta,
  .presale-page .order-details,
  .presale-page .schedule-grid,
  .presale-page .form-grid {
    min-width: 0;
  }
}

/* Defer rendering of the very long lower half of the homepage until it is
   close to the viewport. The globe and first product panels remain immediate. */
@supports (content-visibility: auto) {
  .home-page main > section:nth-of-type(n + 4) {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
  }
}

/* The reference screens are information-dense dashboards.  Keep their
   content visible even when a page is opened at a deep scroll position or
   captured for QA; the previous reveal observer otherwise left large empty
   panels until each individual card crossed the viewport. */
.reference-layout .reveal-item,
.reference-layout .reveal-card,
.reference-layout .reveal-row,
.reference-layout .academy-reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
  .reference-layout .logo-rail-track,
  .reference-layout .partner-logo-track,
  .reference-layout .reveal-item,
  .reference-layout .reveal-card,
  .reference-layout .reveal-row {
    animation: none !important;
    transition: none !important;
  }
}