:root {
  color-scheme: light;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --paper: #fdfdfd;
  --ink: #363739;
  --muted: #696b70;
  --line: #dddfe4;
  --blue: #247af9;
  --band: #3886f6;
  --menu: #fff;
  --wrap: 75rem;
}
:root:has(#theme:checked) {
  color-scheme: dark;
  --paper: #191b20;
  --ink: #f4f5f8;
  --muted: #bbbfc8;
  --line: #3c414d;
  --menu: #252833;
  --band: #235fbf;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid #267af9; outline-offset: 4px; }
.wrap { width: min(var(--wrap), calc(100% - 3.5rem)); margin-inline: auto; }
.skip-link { position: absolute; z-index: 5; inset: .5rem auto auto 1rem; padding: .75rem; background: var(--paper); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.topbar { position: relative; z-index: 2; background: var(--paper); }
.topbar .wrap, .desktop-nav, .top-controls, .actions { display: flex; align-items: center; }
.topbar .wrap { min-height: 3.75rem; gap: 2rem; }
.brand { display: block; flex: none; width: 10.3rem; }
.dark-image { display: none; }
:root:has(#theme:checked) .light-image { display: none; }
:root:has(#theme:checked) .dark-image { display: block; }
.desktop-nav { flex: 1; gap: clamp(.8rem, 2.1vw, 1.85rem); }
.desktop-nav details, .language { position: relative; }
.desktop-nav summary, .desktop-nav > a, .language summary { display: flex; align-items: center; gap: .45rem; min-height: 2.75rem; white-space: nowrap; font-size: .94rem; }
.desktop-nav summary::after { content: ""; width: .38rem; height: .38rem; border-right: 1.5px solid; border-bottom: 1.5px solid; rotate: 45deg; translate: 0 -.12rem; }
.desktop-nav details[open] summary::after { rotate: 225deg; translate: 0 .08rem; }
.nav-panel { position: absolute; inset: 100% auto auto -.75rem; z-index: 2; display: grid; min-width: max-content; padding: .35rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--menu); box-shadow: 0 .5rem 1.5rem #12182918; }
.nav-panel a { display: flex; align-items: center; min-height: 2.75rem; border-radius: .35rem; padding: .55rem .8rem; font-size: .91rem; }
.nav-panel a:hover, .nav-panel a[aria-current="true"] { background: #2877ec18; }
.desktop-nav .nav-panel { min-width: 0; width: 18rem; }
.desktop-nav details:last-child .nav-panel { inset-inline: auto 0; }
.desktop-nav .nav-panel a { display: grid; align-content: center; gap: .25rem; }
.desktop-nav .nav-panel small { color: var(--muted); line-height: 1.4; }
.nav-item-label { display: flex; align-items: center; gap: .5rem; }
.nav-item-icon { flex: none; }
.top-controls { margin-inline-start: auto; gap: .9rem; }
.theme-control { display: grid; position: relative; place-items: center; width: 2.75rem; min-height: 2.75rem; cursor: pointer; }
.theme-control input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.theme-control input:focus-visible + img { outline: 2px solid var(--blue); outline-offset: 4px; }
.language .nav-panel { inset: 100% 0 auto auto; }
.language-icon { flex: none; }
.mobile-menu { display: none; }
.mobile-menu > summary { display: grid; place-items: center; width: 2.75rem; min-height: 2.75rem; }
.mobile-group > summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; padding: .55rem .8rem; }
.mobile-group > summary::after { content: ""; width: .4rem; height: .4rem; border-right: 1.5px solid; border-bottom: 1.5px solid; rotate: 45deg; }
.mobile-group[open] > summary::after { rotate: 225deg; }
.mobile-group > a { padding-inline-start: 1.5rem; }
:root:has(#theme:checked) :is(.language-icon, .menu-icon) { filter: brightness(0) invert(1); }

.hero { background: url("assets/hero-background.png") center top / cover no-repeat; }
.hero .wrap { min-height: 38rem; display: grid; grid-template-columns: 1.28fr 1fr; align-items: center; gap: 1rem; padding-block: 2.5rem; }
h1 { font-size: clamp(2.3rem, 3.9vw, 3.5rem); font-weight: 750; line-height: 1.2; letter-spacing: -.025em; }
h2 { font-size: clamp(1.55rem, 2.55vw, 2.25rem); font-weight: 750; line-height: 1.2; letter-spacing: -.025em; }
.hero-copy > p, .feature-copy > p { margin-block-start: 1.45rem; color: var(--muted); font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.45; }
.actions { flex-wrap: wrap; gap: 1.2rem; margin-block-start: 3.45rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .85rem; min-height: 3.75rem; min-width: 11rem; padding: .65rem 1.3rem; border: 1px solid #81838a; border-radius: 999px; font-size: 1rem; font-weight: 600; transition: filter 150ms, transform 150ms; }
.button:hover { filter: brightness(.94); transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--blue); border-color: var(--blue); }
.button-light { color: #1e6fdc; background: #fff; border-color: #fff; }
.button-icon { flex: none; width: 1.625rem; height: 1.625rem; }
.keypal-hover { display: none; }
.button-keypal:hover { color: #fff; border-color: var(--blue); background: var(--blue); }
.button-keypal:hover .keypal-normal, :root:has(#theme:checked) .keypal-normal { display: none; }
.button-keypal:hover .keypal-hover, :root:has(#theme:checked) .keypal-hover { display: block; }
.wallet-art { width: min(100%, 31rem); justify-self: center; }
.wallet-art img { width: 100%; }

.blue-band { background-color: var(--band); color: #fff; }
.overview { padding-block: clamp(3.5rem, 6vw, 5rem); text-align: center; }
.overview .intro { max-width: 52rem; margin: 1.4rem auto 3rem; color: #f0f6ff; font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.45; }
.overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; }
.stat { display: grid; justify-items: center; align-content: center; min-height: 12rem; gap: .6rem; padding: 1.2rem; border: 1px solid #ffffff55; border-radius: .8rem; }
.stat-icon { width: 3rem; height: 3rem; border-radius: .5rem; }
.stat strong { font-size: clamp(1.75rem, 3vw, 2.4rem); }
.stat-label { color: #e9f2ff; font-size: 1rem; }

.feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); min-height: 35rem; padding-block: 3rem; }
.feature > img { justify-self: center; width: min(100%, 31rem); }
.feature-reverse > img { grid-column: 2; grid-row: 1; }
.feature-reverse .feature-copy { grid-column: 1; grid-row: 1; }
.feature-copy > p + p { margin-block-start: .8rem; }
.feature-copy .actions { margin-block-start: 1.9rem; }
.feature-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; padding: 0; margin: 1.5rem 0 0; }
.feature-links li { display: grid; align-content: center; min-height: 4.5rem; border: 1px solid var(--line); border-radius: .65rem; padding: .65rem; text-align: center; font-weight: 600; font-size: .9rem; list-style: none; }
.feature-links small { display: flex; align-items: center; justify-content: center; gap: .2rem; margin-block-start: .3rem; color: var(--muted); font-weight: 400; }
.trade-mobile { display: none; }
.card-arrow { flex: none; }
#apps .feature-copy > p { margin-block-start: 2rem; font-size: 1.125rem; }
#apps .feature-copy > p + p { margin-block-start: 1rem; }
.dapp-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 4.875rem;
  max-width: 31.25rem;
  margin: 2.5rem 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 1rem;
  list-style: none;
}
.dapp-status li { position: relative; display: grid; place-content: center; gap: .5rem; text-align: center; font-size: 1.125rem; font-weight: 500; line-height: 1.25rem; }
.dapp-status li + li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 50% auto; translate: 0 -50%; width: 1px; height: 3rem; background: var(--line); }
.dapp-status small { display: flex; align-items: center; justify-content: center; gap: .125rem; padding-inline: .2rem; color: var(--muted); font-size: .75rem; line-height: .875rem; }

.closing { overflow: hidden; }
.closing .wrap { min-height: 12rem; display: grid; grid-template-columns: 1fr minmax(0, 20rem); align-items: center; gap: 2rem; padding-block-start: 1.5rem; }
.closing-copy { padding-block-end: 1.5rem; }
.closing h2 { font-size: clamp(1.4rem, 2.3vw, 1.8rem); }
.closing p { margin: .75rem 0 1rem; color: #eef5ff; line-height: 1.5; }
.closing .button { min-height: 2.75rem; min-width: 9.5rem; }
.closing img { align-self: end; }
footer { padding-block: 4.75rem; background: #1c1c1d; color: #f7f8fc; }
footer .wrap { display: grid; grid-template-columns: 1.65fr repeat(5, 1fr); gap: 1.6rem; }
footer h2 { margin-block-end: 1rem; color: #a7a9b0; font-size: .9rem; font-weight: 400; letter-spacing: 0; }
footer nav h2:not(:first-child) { margin-block-start: .8rem; }
footer nav { display: grid; align-content: start; }
footer nav a { min-height: 2rem; padding-block: .3rem; font-size: .88rem; }
footer a:hover { text-decoration: underline; }
.footer-social { display: flex; gap: .625rem; margin-block-start: 2rem; }
.footer-email .email-hover { display: none; }
.footer-email:hover .email-normal, .footer-email:focus-visible .email-normal { display: none; }
.footer-email:hover .email-hover, .footer-email:focus-visible .email-hover { display: block; }
footer .site-note { margin-block-start: .75rem; color: #a7a9b0; font-size: .78rem; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-copy, .wallet-art { animation: arrive 470ms ease-out both; }
  @keyframes arrive {
    from { opacity: 0; translate: 0 .45rem; }
    to { opacity: 1; translate: 0 0; }
  }
}

@media (max-width: 69rem) {
  .desktop-nav { display: none; }
  .mobile-menu { display: block; }
  .mobile-menu .nav-panel { inset: 100% 0 auto; min-width: 0; max-height: calc(100dvh - 3.75rem); overflow-y: auto; padding-inline: 1.5rem; border-radius: 0; }
}

@media (max-width: 768px) {
  .trade-desktop { display: none; }
  .trade-mobile { display: grid; grid-template-columns: 1fr; }
  .feature-links.trade-mobile li { min-height: 0; padding: 0; }
  .trade-mobile a { display: flex; justify-content: space-between; align-items: center; min-height: 2.75rem; gap: .6rem; padding: .6rem; text-align: start; }
  .trade-mobile small { margin: 0; text-align: end; }
  #apps .feature-copy > p { margin-block-start: .375rem; font-size: 1rem; }
  .dapp-status { min-height: 4.25rem; margin: 2rem auto 0; }
  .dapp-status li { gap: .25rem; font-size: 1rem; font-weight: 700; }
}

@media (max-width: 45rem) {
  .topbar .wrap { gap: .5rem; }
  .brand { width: 7.6rem; }
  .top-controls { gap: .2rem; }
  .theme-control { display: none; }
  .language summary { font-size: .82rem; }
  .language-icon { width: 1rem; height: 1rem; }
  .hero { background-image: none; }
  .hero .wrap { min-height: 0; grid-template-columns: 1fr; gap: 1.6rem; padding-block: 2.95rem 2.75rem; text-align: center; }
  h1 { font-size: clamp(1.65rem, 8.4vw, 2.3rem); }
  .hero-copy > p { margin-block-start: .9rem; }
  .actions { justify-content: center; gap: .65rem; margin-block-start: 1.85rem; }
  .button { min-height: 2.75rem; min-width: min(8.9rem, 46%); padding-inline: .75rem; font-size: .875rem; gap: .45rem; }
  .button-icon { width: 1.125rem; height: 1.125rem; }
  .wallet-art { width: min(100%, 18.25rem); }
  .overview-grid { gap: .65rem; }
  .stat { min-height: 8rem; padding: .65rem; }
  .stat-label { font-size: .85rem; }
  .stat-icon { width: 2rem; height: 2rem; }
  .feature { grid-template-columns: 1fr; min-height: 0; gap: 1.45rem; padding-block: 2.75rem; }
  .feature .feature-copy { grid-area: 1 / 1; }
  .feature > img { grid-area: 2 / 1; width: min(100%, 18rem); }
  .feature-links { gap: .45rem; }
  .feature-links li { padding: .45rem; font-size: .8rem; }
  .closing .wrap { grid-template-columns: 1fr; gap: .5rem; }
  .closing-copy { padding-block-end: 0; }
  .closing img { width: min(75%, 17rem); justify-self: end; }
  footer .wrap { grid-template-columns: 1fr 1fr; }
  footer .footer-brand { grid-column: 1 / -1; }
}