*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: auto;
  background: var(--background-deep);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Manrope', sans-serif;
  color: var(--text-primary);
  background:
    radial-gradient(circle at 10% 14%, rgba(var(--ambient-green-rgb), 0.085) 0%, rgba(var(--ambient-green-rgb), 0.026) 15%, transparent 32%),
    radial-gradient(circle at 82% 20%, rgba(var(--ambient-cyan-rgb), 0.06) 0%, rgba(var(--ambient-cyan-rgb), 0.018) 13%, transparent 30%),
    radial-gradient(circle at 58% 92%, rgba(var(--ambient-green-rgb), 0.055) 0%, rgba(var(--ambient-green-rgb), 0.016) 15%, transparent 30%),
    linear-gradient(180deg, var(--backdrop-start) 0%, var(--backdrop-mid) 52%, var(--backdrop-end) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
}

body>*:not(.ambient-layer):not(.scroll-progress) {
  position: relative;
  z-index: 1;
}

body::before,
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

body::before {
  inset: -4%;
  opacity: 0.56;
  background-image:
    linear-gradient(var(--ambient-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--ambient-grid-major) 1px, transparent 1px),
    linear-gradient(var(--ambient-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ambient-grid-line) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.86) 22%, rgba(0, 0, 0, 0.68) 64%, rgba(0, 0, 0, 0.24) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.86) 22%, rgba(0, 0, 0, 0.68) 64%, rgba(0, 0, 0, 0.24) 100%);
}

body::after {
  inset: -16% -14% -10%;
  background:
    radial-gradient(circle at 18% 8%, rgba(var(--ambient-green-rgb), 0.12) 0%, rgba(var(--ambient-green-rgb), 0.03) 16%, transparent 34%),
    radial-gradient(circle at 88% 34%, rgba(var(--ambient-cyan-rgb), 0.1) 0%, rgba(var(--ambient-cyan-rgb), 0.024) 15%, transparent 33%),
    radial-gradient(circle at 44% 88%, rgba(var(--ambient-green-rgb), 0.092) 0%, rgba(var(--ambient-green-rgb), 0.02) 14%, transparent 30%);
  opacity: 0.34;
}
::selection {
  color: #041008;
  background: rgba(111, 229, 255, 0.9);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

@media (max-width: 720px) {
  body {
    background-attachment: scroll !important; /* Fix dynamic viewport scaling and gradient disappearance on mobile browsers */
  }

  body::before {
    inset: -3%;
    background-size: 160px 160px, 160px 160px, 44px 44px, 44px 44px;
    opacity: 0.96 !important; /* Boosted grid layer opacity for mobile visibility */
    background-image:
      linear-gradient(rgba(220, 255, 232, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(220, 255, 232, 0.06) 1px, transparent 1px),
      linear-gradient(rgba(220, 255, 232, 0.032) 1px, transparent 1px),
      linear-gradient(90deg, rgba(220, 255, 232, 0.032) 1px, transparent 1px);
  }

  body::after {
    inset: -12% -8% -6%;
    opacity: 0.38; /* Boosted ambient visibility on mobile screens */
    background:
      radial-gradient(circle at 18% 8%, rgba(var(--ambient-green-rgb), 0.16) 0%, rgba(var(--ambient-green-rgb), 0.045) 16%, transparent 34%),
      radial-gradient(circle at 88% 34%, rgba(var(--ambient-cyan-rgb), 0.14) 0%, rgba(var(--ambient-cyan-rgb), 0.035) 15%, transparent 33%),
      radial-gradient(circle at 44% 88%, rgba(var(--ambient-green-rgb), 0.13) 0%, rgba(var(--ambient-green-rgb), 0.035) 10%, transparent 30%);
  }

}

@supports (content-visibility: auto) {
  .section-block,
  .docs-card,
  .faq-board,
  .scanner-shell,
  .profile-grid,
  .profile-auth-grid,
  .changelog-entry {
    content-visibility: auto;
    contain-intrinsic-size: 1px 760px;
  }
}

body.performance-lite::before {
  opacity: 0.22;
}

body.performance-lite::after {
  display: none;
}

body.performance-lite .ambient-layer {
  display: none;
}

body.performance-lite .navbar,
body.performance-lite .screen-badge,
body.performance-lite .mobile-header,
body.performance-lite .overlay,
body.performance-lite .scanner-select-menu {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.performance-lite .exchange-chip,
body.performance-lite .screen-badge,
body.performance-lite .value-card::after,
body.performance-lite .update-card::after,
body.performance-lite .hero-window::after,
body.performance-lite .hero-exchange-cloud::after {
  animation: none !important;
}

body.performance-lite [data-reveal],
body.performance-lite [data-reveal] > * {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}