@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;
  font-family: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --card-surface: linear-gradient(160deg, rgba(24, 20, 16, 0.75), rgba(14, 12, 10, 0.7));
  --card-border: rgba(255, 255, 255, 0.06);
  --card-highlight: rgba(255, 255, 255, 0.12);
  --panel-surface: linear-gradient(180deg, rgba(32, 27, 22, 0.95), rgba(17, 14, 12, 0.9));
  --panel-border: rgba(255, 255, 255, 0.08);
  --panel-highlight: rgba(255, 255, 255, 0.14);
  --text-primary: #faf5eb;
  --text-muted: rgba(250, 245, 235, 0.56);
  --accent: #f5c33b;
  --accent-dark: #c69216;
  --danger: #ff6a55;
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.65);
  --card-max-size: 437px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

body {
  min-height: 100vh;
  /* Use the small dynamic viewport unit where supported so mobile browsers
     (incl. Google's in-app webview) don't compute viewport against the
     URL bar height and cut content off. Falls back to 100vh above. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 1.8vw, 1.1rem);
  padding: clamp(0.85rem, 2.4vw, 1.4rem) clamp(1.2rem, 3.2vw, 2.4rem);
  background:
    linear-gradient(rgba(0, 0, 0, 0.795), rgba(0, 0, 0, 0.836)), /* 25% black overlay */
    url("../assets/banner.png") center/cover no-repeat;
  /* Lock the banner to the viewport on desktop. We deliberately do NOT use
     `background-attachment: fixed` on mobile because the Google Search
     in-app browser (and most mobile webviews) either ignore it or render
     it incorrectly, which makes pages with content taller than the
     viewport (whitepaper) look frozen / unscrollable. */
  background-attachment: scroll, scroll;
  color: var(--text-primary);
  /* Only clip horizontally. Vertical clipping was the root cause of the
     whitepaper "logo huge, can't scroll" bug in the Google in-app browser:
     the longhand `overflow-y: auto` override on `body.page--docs` is
     unreliable in that webview against the shorthand `overflow: hidden`,
     so we just stop hiding the y-axis at the source. */
  overflow-x: hidden;
}

/* Bring back the parallax/fixed banner on viewports wide enough to be a
   desktop, where `background-attachment: fixed` is reliable. */
@media (min-width: 1024px) and (hover: hover) {
  body {
    background-attachment: scroll, fixed;
  }
}


body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top center, rgba(245, 195, 59, 0.11), transparent 60%);
  pointer-events: none;
}

@media (max-width: 768px) {
  body::before {
    background: radial-gradient(
      circle at top center,
      rgba(245, 195, 59, 0.13),
      transparent 60%
    );
  }
}

.layout {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--card-max-size);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}

.layout > * {
  width: 100%;
  max-height: 100%;
}

.layout--wide {
  max-width: min(100%, 760px);
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: clamp(1.8rem, 4vw, 2.6rem);
  padding-block: clamp(0.8rem, 3vw, 1.4rem);
}

.layout--wide > * {
  max-height: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 2vw, 1.2rem);
  width: min(100%, var(--card-max-size));
  flex-shrink: 0;
}

.site-logo {
  /* Hard cap as a safety net: the Google Search in-app browser has been
     observed to mis-resolve `clamp()` during initial layout, falling
     back to the image's natural dimensions. A plain `max-width` ceiling
     keeps the brand mark in check even when that happens. */
  max-width: 169px;
  width: clamp(123px, 13.8vw, 169px);
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.35));
}

.site-nav {
  width: 100%;
}

.site-nav__list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: clamp(1.2rem, 4vw, 2rem);
  padding: clamp(0.25rem, 1.5vw, 0.5rem) 0;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.2rem;
  font-size: clamp(0.78rem, 2.4vw, 0.92rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--text-primary);
}

.site-nav__link:focus-visible {
  outline: none;
}

.site-nav__link--active {
  color: var(--text-primary);
}

.site-nav__link--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3rem;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.site-footer {
  width: min(100%, var(--card-max-size));
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.024em;
  flex-shrink: 0;
}

.site-footer__social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

.site-footer__social:hover {
  opacity: 0.85;
}

.site-footer__social-link {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
  opacity: 0.55;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  color: var(--accent);
  opacity: 1;
  transform: translateY(-1px);
  outline: none;
}

.site-footer__social-icon {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.site-footer__social-icon path,
.site-footer__social-icon rect,
.site-footer__social-icon circle,
.site-footer__social-icon line {
  fill: currentColor;
  stroke: none;
}

.site-footer__social-icon [fill="none"] {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.site-footer__link {
  color: var(--accent);
  text-decoration: none;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  text-decoration: underline;
  outline: none;
}

.swap-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.08rem, 3.2vw, 1.4rem);
  border-radius: 13px;
  border: 1px solid var(--card-border);
  background: var(--card-surface);
  box-shadow: var(--shadow-xl);
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
}

.mobile-warning {
  position: fixed;
  top: max(env(safe-area-inset-top, 0px), 8px);
  left: 50%;
  width: min(calc(100% - 1.2rem), var(--card-max-size));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 2.25rem 0.55rem 0.85rem;
  background: #e4aa27;
  color: #1a1203;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  border-radius: 10px;
  flex-shrink: 0;
  z-index: 1000;
  /*
    Start the warning translated above the viewport and fully transparent.
    JS removes the [hidden] attribute and (after a 1s delay) adds
    `.is-visible` to slide it into place — the eased transform reads as a
    smooth drop-down instead of the previous abrupt show/hide.
  */
  opacity: 0;
  transform: translate(-50%, calc(-100% - 24px));
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease;
  will-change: transform, opacity;
  pointer-events: none;
}

.mobile-warning[hidden] {
  display: none;
}

.mobile-warning.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.mobile-warning__text {
  text-align: center;
}

.mobile-warning__link {
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
}

.mobile-warning__link:hover,
.mobile-warning__link:focus-visible {
  text-decoration: none;
  outline: none;
}

.mobile-warning__close {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #1a1203;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
  opacity: 0.8;
}

.mobile-warning__close:hover,
.mobile-warning__close:focus-visible {
  opacity: 1;
  background: rgba(26, 18, 3, 0.15);
  outline: none;
}

.presale-card {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: clamp(1.2rem, 3.5vw, 1.6rem);
  border-radius: 13px;
  border: 1px solid var(--card-border);
  background: var(--card-surface);
  box-shadow: var(--shadow-xl);
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
}

.info-card,
.leaderboard-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.1rem, 3.2vw, 1.5rem);
  border-radius: 13px;
  border: 1px solid var(--card-border);
  background: var(--card-surface);
  box-shadow: var(--shadow-xl);
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.info-card {
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
}

.info-card__title,
.leaderboard-card__title {
  font-size: clamp(1.25rem, 4vw, 1.55rem);
  font-weight: 600;
}

.info-card__subtitle {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.info-card__cta {
  margin-top: clamp(0.8rem, 2.5vw, 1.2rem);
}

.info-card__preview {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 45px;
  margin-bottom: clamp(0.4rem, 2vw, 0.75rem);
}

.info-card__image {
  width: min(240px, 70vw);
  aspect-ratio: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.55));
}

.about-hero {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 3vw, 1.8rem);
  padding: clamp(1.4rem, 4vw, 2.2rem);
  border-radius: 18px;
  border: 1px solid transparent;
  box-shadow: 0 32px 60px rgba(0, 0, 0, 0.55);
  align-items: center;
  text-align: center;
}

.about-hero__header {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 2vw, 0.9rem);
  align-items: center;
}

.about-hero__eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 195, 59, 0.86);
}

.about-hero__title {
  font-size: 30px;
  font-weight: 600;
}

.about-hero__subtitle {
  color: var(--text-muted);
  font-size: clamp(0.92rem, 2.8vw, 1.06rem);
  line-height: 1.8;
  max-width: 48ch;
}

.about-hero__highlights {
  list-style: none;
  display: grid;
  gap: clamp(0.75rem, 2.4vw, 1rem);
  padding: 0;
  margin: 0;
  width: min(100%, 520px);
}

.about-hero__highlight {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  justify-content: center;
  color: var(--text-muted);
  font-size: clamp(0.82rem, 2.6vw, 0.96rem);
  line-height: 1.5;
}

.about-hero__emoji {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.about-hero__actions {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 2.2vw, 0.9rem);
  width: min(100%, 360px);
}

.about-hero__action {
  width: 100%;
}

.about-hero__action.outline-action {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
}

.leaderboard-card__description {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.leaderboard-card__link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.leaderboard-card__link:hover,
.leaderboard-card__link:focus-visible {
  text-decoration: underline;
}

.leaderboard-card__header {
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, 1.8vw, 0.75rem);
  align-items: center;
  text-align: center;
}

.leaderboard-card__description {
  max-width: 28rem;
}

.leaderboard-card__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(0.6rem, 2.2vw, 1rem);
}

.leaderboard-card__stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: clamp(0.7rem, 2vw, 0.9rem);
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.leaderboard-card__stat-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 245, 235, 0.65);
}

.leaderboard-card__stat-value {
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 600;
}

.leaderboard-card__stat-value--with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.presale-stat__value-amount,
.presale-stat__value-token {
  display: inline-block;
}

.leaderboard-card__stat-icon {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.leaderboard-card__content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  overflow: hidden;
}

.leaderboard-card__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: clamp(0.2rem, 1vw, 0.35rem);
  scrollbar-gutter: stable;
}

.leaderboard-card__scroll::-webkit-scrollbar {
  width: 6px;
}

.leaderboard-card__scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.reward-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 2vw, 0.8rem);
  margin: 0;
  padding: 0;
}

.reward-list__item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: clamp(0.65rem, 2vw, 0.85rem);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(15, 12, 10, 0.5);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.25);
}

.reward-list__rank {
  font-size: 0.9rem;
  font-weight: 600;
  width: 2rem;
  text-align: center;
  color: rgba(250, 245, 235, 0.72);
}

.reward-list__avatar {
  width: clamp(42px, 10vw, 54px);
  height: clamp(42px, 10vw, 54px);
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  background: rgba(255, 255, 255, 0.08);
}

.reward-list__content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.reward-list__name {
  font-size:  12px;
  font-weight: 600;
}

.reward-list__handle {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.reward-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem clamp(0.65rem, 2vw, 1rem);
}

.reward-list__metric {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.reward-list__metric-label {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 245, 235, 0.6);
}

.reward-list__metric-value {
  font-size: clamp(0.88rem, 2.5vw, 1rem);
  font-weight: 500;
}

.leaderboard-card__status {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
}

.leaderboard-wrapper {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}

.leaderboard-wrapper::-webkit-scrollbar {
  height: 6px;
}

.partner-showcase {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vw, 1.4rem);
}

.partner-showcase__title {
  font-size: clamp(1.05rem, 3.2vw, 1.3rem);
  font-weight: 600;
  text-align: center;
}

.partner-carousel {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: 999px;

  background: rgba(15, 12, 10, 0.349);
  padding: clamp(0.65rem, 2vw, 0.85rem) clamp(1rem, 4vw, 1.8rem);
  mask-image: radial-gradient(ellipse at center, #000 55%, transparent 95%);
}

.partner-carousel__marquee {
  display: flex;
  align-items: center;
  gap: clamp(1.8rem, 5vw, 3.5rem);
  min-width: 100%;
  animation: partner-marquee 26s linear infinite;
}

.partner-carousel__marquee:nth-child(2) {
  animation-delay: -13s;
}

.partner-carousel:hover .partner-carousel__marquee {
  animation-play-state: paused;
}

.partner-carousel__logo {
  display: block;
  width: clamp(84px, 12vw, 112px);
  height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.45));
}

@keyframes partner-marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* NFT collection page */
.nft-card {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: clamp(1.2rem, 3.5vw, 1.6rem);
  border-radius: 13px;
  border: 1px solid var(--card-border);
  background: var(--card-surface);
  box-shadow: var(--shadow-xl);
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  text-align: center;
}

.nft-carousel {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100%;
  border-radius: 10px;
  padding: 0.5rem 0;
  /* Pin the carousel band against the parent .nft-card's flex column so
     it can't get squeezed vertically when the card runs out of space.
     Without this the carousel would shrink and its `overflow: hidden`
     would clip the images, which is why they were rendering as squished
     rectangles instead of 1:1 squares on desktop. */
  flex-shrink: 0;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

.nft-carousel__marquee {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  animation: nft-marquee 80s linear infinite;
  will-change: transform;
}

.nft-carousel:hover .nft-carousel__marquee {
  animation-play-state: paused;
}

.nft-carousel__art {
  display: block;
  /* Smaller carousel thumbs on desktop so the description, liquidity
     notice, and "See collection" button all fit inside the .nft-card
     without an internal scroll. Hard-locked square via min/max so no
     flex math can stretch them back out. */
  width: 100px;
  height: 100px;
  min-width: 100px;
  min-height: 100px;
  max-width: 100px;
  max-height: 100px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: rgba(15, 12, 10, 0.4);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
  flex-grow: 0;
}

@keyframes nft-marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.nft-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.nft-card__eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffb308;
  font-weight: 700;
}

.nft-card__title {
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.nft-card__description {
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  line-height: 1.5;
  color: var(--text-muted);
  /* Override the centered alignment inherited from .nft-card so the
     paragraph reads naturally as a left-aligned block. */
  text-align: left;
}

/* Inline accent number used for the "1000" count-up in the description. */
.nft-count-highlight {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Tighten the swap-notice when used inside the NFT card so it sits flush
   with the surrounding stack instead of floating with extra margin.
   Force left alignment too — the parent .nft-card centers everything. */
.nft-card__notice {
  margin-top: 0.4rem;
  text-align: left;
}

/* Inline yellow link inside the swap-notice (e.g., "Token Liquidity"). */
.swap-notice__link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.swap-notice__link:hover,
.swap-notice__link:focus-visible {
  color: var(--accent-dark);
  outline: none;
}

.nft-card__actions {
  display: flex;
  justify-content: center;
}

.nft-card__cta {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-inline: clamp(1.5rem, 4vw, 2.4rem);
  text-decoration: none;
}

/* Leave-site confirmation modal */
.leave-modal {
  width: min(100%, 440px);
  text-align: center;
}

.leave-modal__message {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.leave-modal__message strong {
  color: var(--text-primary);
  font-weight: 700;
}

.leave-modal__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.leave-modal__cancel,
.leave-modal__confirm {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}

.leaderboard-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.leaderboard {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.leaderboard thead {
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.leaderboard__header {
  text-align: left;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.leaderboard__body {
  font-size: 0.82rem;
}

.leaderboard__row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.leaderboard__cell {
  padding: 0.55rem 0;
  vertical-align: middle;
}

.leaderboard__cell--rank {
  width: 2.25rem;
  font-weight: 600;
  text-align: center;
}

.leaderboard__cell--wallet {
  font-family: "Space Grotesk", monospace;
  font-size: 0.78rem;
}

.leaderboard__cell--amount,
.leaderboard__cell--rewards {
  text-align: right;
  white-space: nowrap;
}

.leaderboard__status {
  margin-top: 0.85rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
}


.presale-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
}

.presale-card__titlegroup {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.presale-card__token {
  width: clamp(22px, 10vw, 32px);
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.35));
}

.presale-card__title {
  font-size: clamp(1.02rem, 2.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.presale-card__subtitle {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.presale-card__whitepaper-link {
  color: #ffb308;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.presale-card__whitepaper-link:hover,
.presale-card__whitepaper-link:focus-visible {
  color: #ffc844;
  text-decoration: underline;
  text-decoration-color: #ffc844;
  outline: none;
}

.presale-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  position: relative;
  z-index: 1;
}

/* Generic grouped section inside the pre-sale card — used for the
   "Token at a glance" stats block and the "Why NKT" pillars list.
   Sits flush with the surrounding card padding and gets a small
   eyebrow-style title above its content. */
.presale-section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  position: relative;
  z-index: 1;
}

.presale-section__title {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  margin: 0;
}

/* Investor pillar list — each row is a short title + body paragraph,
   visually echoing the .presale-stat card treatment but reading like
   prose so the page feels editorial rather than dashboard-y. */
.presale-pillar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.presale-pillar {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  padding: 0.62rem 0.78rem;
  border-radius: 10px;
  background: var(--panel-surface);
  border: 1px solid var(--panel-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.presale-pillar__title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.presale-pillar__body {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Visual styling for the whitepaper button under the pre-sale CTA.
   The other rule below sets sizing (align-self, padding, etc.). */
.presale-actions__whitepaper {
  text-align: center;
  text-decoration: none;
  /* Soften the outline so it sits visually below the primary CTA. */
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
}

.presale-actions__whitepaper {
  align-self: stretch;
  width: 100%;
  padding-inline: 1.3rem;
  white-space: nowrap;
}

.outline-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.048em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease,
    box-shadow 0.2s ease;
  text-decoration: none;
}

.outline-action:hover,
.outline-action:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.12);
  outline: none;
}

.presale-actions .primary-action {
  width: 100%;
  padding-inline: 1.3rem;
  white-space: nowrap;
}

.presale-actions__cta {
  margin-top: 0;
}

body.is-modal-open {
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
  background: rgba(5, 5, 5, 0.75);
  backdrop-filter: blur(3px);
  z-index: 999;
}

.modal-overlay[hidden] {
  display: none !important;
}

.purchase-modal {
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.2rem, 3.5vw, 1.6rem);
  border-radius: 13px;
  border: none;
  background: var(--card-surface);
  box-shadow: var(--shadow-xl);
  position: relative;
}

.purchase-modal__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 1.8rem;
}

.purchase-modal__title {
  flex: 1;
  text-align: center;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.purchase-modal__close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.purchase-modal__close:hover,
.purchase-modal__close:focus-visible {
  color: var(--text-primary);
  transform: translateY(-50%) scale(1.08);
  outline: none;
}


.purchase-modal__estimate {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  font-size: clamp(1.32rem, 3.2vw, 1.68rem);
  font-weight: 700;
  letter-spacing: 0.032em;
  text-align: left;
}

.purchase-modal__estimate-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

.purchase-modal__bonus {
  font-size: 0.66rem;
  font-weight: 700;
  color: #22c55e;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  line-height: 1;
  white-space: nowrap;
}

.purchase-modal__bonus[hidden] {
  display: none;
}

.purchase-modal__panel {
  margin-top: -0.3rem;
}

.purchase-modal__whitelist-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.confirm-action {
  width: 100%;
  padding: 0.78rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: not-allowed;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.confirm-action:disabled {
  cursor: not-allowed;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.confirm-action:not(:disabled) {
  cursor: pointer;
  background: linear-gradient(180deg, #f6cf5d 0%, #f5c33b 35%, #e1a624 100%);
  color: #2a1a03;
  border-color: transparent;
  box-shadow: 0 0 22px rgba(245, 195, 59, 0.35);
}

.confirm-action:not(:disabled):hover,
.confirm-action:not(:disabled):focus-visible {
  outline: none;
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 0 31px rgba(245, 195, 59, 0.5);
}

.confirm-action:not(:disabled):active {
  transform: translateY(0);
  filter: brightness(0.95);
}

.purchase-modal__confirm {
  margin-top: 0.2rem;
}

.purchase-modal__notice {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  background: rgba(255, 106, 85, 0.15);
  border: 1px solid rgba(255, 106, 85, 0.4);
  color: var(--danger);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.purchase-modal__notice span[aria-hidden="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--danger);
  color: #0c0706;
  font-weight: 700;
  font-size: 0.85rem;
}

.purchase-modal__whitelist.is-connected {
  /* Once the wallet is connected, render the row as a flat status label
     rather than a button — no border, no fill, no shadow — so the
     "Confirm transaction" CTA above is the only thing that reads as a
     clickable element. The user can still click the address to disconnect. */
  border: none;
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
  padding: 0.35rem 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: none;
  min-height: 0;
  cursor: pointer;
}

.purchase-modal__whitelist.is-connected:hover,
.purchase-modal__whitelist.is-connected:focus-visible {
  outline: none;
  /* Stay put on hover — no lift, no glow, no shape shift. The text alone
     changes (to "Disconnect <address>") to reveal the disconnect intent. */
  transform: none;
  background: transparent;
  border: none;
  color: var(--text-primary);
  box-shadow: none;
}

.purchase-modal__submit {
  width: 100%;
  margin-top: 0.2rem;
}

.purchase-modal__whitelist {
  width: 100%;
  margin-top: 0.4rem;
}

.purchase-modal__whitelist.is-authorized {
  border-color: rgba(87, 223, 171, 0.55);
  background: linear-gradient(180deg, rgba(18, 60, 44, 0.92), rgba(10, 40, 28, 0.94));
  color: rgba(209, 255, 240, 0.95);
  box-shadow: 0 0 22px rgba(87, 223, 171, 0.3);
}

.purchase-modal__whitelist.is-authorized:hover,
.purchase-modal__whitelist.is-authorized:focus-visible {
  outline: none;
  background: linear-gradient(180deg, rgba(64, 183, 139, 0.98), rgba(31, 121, 92, 0.98));
  border-color: transparent;
  color: #02150f;
}

.purchase-modal__alert {
  margin-top: 0.6rem;
}

.nft-redirect__message {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
  margin: 0.4rem 0 0.2rem;
}

.nft-redirect__actions {
  display: flex;
  gap: 0.6rem;
  justify-content: stretch;
}

.nft-redirect__actions .outline-action,
.nft-redirect__actions .primary-action {
  flex: 1;
  width: 100%;
  margin: 0;
}

.purchase-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.presale-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  position: relative;
  z-index: 1;
}

.presale-stat {
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
  padding: 0.68rem 0.76rem;
  border-radius: 10px;
  background: var(--panel-surface);
  border: 1px solid var(--panel-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.presale-stat__label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.presale-stat__value {
  font-size: 1rem;
  font-weight: 600;
}

.presale-progress {
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  position: relative;
  z-index: 1;
}

.presale-progress__meta {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0.5rem;
}

.presale-progress__meta .presale-progress__summary {
  margin: 0;
}

.presale-progress__percent {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.presale-progress__track {
  position: relative;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.presale-progress__fill {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, #f6cf5d 0%, #f5c33b 35%, #e1a624 100%);
  box-shadow: 0 0 24px rgba(245, 195, 59, 0.35);
}

.presale-progress__summary {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.presale-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.presale-detail {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.presale-detail__label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.presale-detail__value {
  font-size: 0.86rem;
  font-weight: 600;
}


.swap-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.68rem;
  position: relative;
  z-index: 1;
}

.swap-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.swap-card__titleblock {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.swap-card__title {
  font-size: clamp(0.93rem, 2.24vw, 1.12rem);
  font-weight: 600;
  letter-spacing: 0.016em;
}

.swap-card__network {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.swap-card__wallet {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  cursor: default;
  user-select: text;
}

.wallet-indicator__label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.54rem;
}

.wallet-indicator__address {
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.wallet-indicator__disconnect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 0.16rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.18s ease, color 0.18s ease;
}

.wallet-indicator__disconnect:hover,
.wallet-indicator__disconnect:focus-visible {
  opacity: 1;
  color: #ff6a55;
  outline: none;
}

.wallet-indicator__disconnect-icon {
  width: 14px;
  height: 14px;
  display: block;
}

.network-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.54rem;
}

.network-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  padding: 0;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.016em;
}

.network-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #050505;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.14), inset 0 -3px 6px rgba(0, 0, 0, 0.65);
}

.network-icon__image {
  width: 48%;
  height: 48%;
  object-fit: contain;
}

.network-name {
  font-weight: 600;
}

.swap-stack {
  display: grid;
  gap: 0.6rem;
  position: relative;
  z-index: 1;
}

.swap-panel {
  display: flex;
  flex-direction: column;
  gap: 0.68rem;
  padding: 0.68rem 0.92rem;
  border-radius: 10px;
  background: var(--panel-surface);
  border: 1px solid var(--panel-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.swap-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--text-muted);
}

.swap-panel__label {
  text-transform: uppercase;
  letter-spacing: 0.096em;
  font-weight: 600;
}

.swap-panel__meta {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  cursor: pointer;
}

.swap-panel__meta[role="presentation"] {
  cursor: default;
}

.swap-panel__meta--accent {
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.064em;
}

/* Wallet indicator nested in the "You receive" panel header (replaces the
   static "Balance 0" placeholder when a wallet is connected). */
.swap-panel__wallet {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.68rem;
  color: var(--text-muted);
  user-select: text;
}

.swap-panel__wallet .wallet-indicator__address {
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* When the wallet is shown, hide the placeholder "Balance 0" so they don't
   compete for space inside the panel header. */
.swap-panel__wallet:not([hidden]) ~ .swap-panel__meta {
  display: none;
}

.swap-panel__content {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.6rem;
}

.swap-panel__content > .token-select {
  justify-self: end;
}

.amount-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.amount-field input {
  font: inherit;
  font-size: clamp(1.24rem, 3.2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.032em;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  appearance: textfield;
}

#receive-amount {
  color: #b3b3b3;
}

.amount-field input::-webkit-outer-spin-button,
.amount-field input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.amount-field__hint {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.token-select {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.016em;
  cursor: pointer;
  min-width: 0;
  justify-content: flex-start;
  transition: color 0.2s ease, transform 0.2s ease;
}

.token-select--static {
  cursor: default;
  pointer-events: none;
  color: var(--text-muted);
  transform: none !important;
}

.token-select--static .token-select__label {
  color: var(--text-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.token-select--static:hover,
.token-select--static:focus-visible {
  color: var(--text-muted);
  transform: none;
}

.token-select:hover,
.token-select:focus-visible {
  color: #ffffff;
  transform: translateY(-1px);
  outline: none;
}

.token-select__badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.92rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.18), inset 0 -3px 6px rgba(0, 0, 0, 0.55);
}

.token-select__badge--sol {
  background: #1d1d1d;
  border-color: #1d1d1d;
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.22), inset 0 -3px 6px rgba(47, 12, 94, 0.6);
}

.token-select__badge--usdc {
  background: #2775ca;
  border-color: #2775ca;
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.26), inset 0 -3px 6px rgba(15, 49, 110, 0.6);
}

.token-select__badge--usdt {
  background: #0ecc8d;
  border-color: #0ecc8d;
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.24), inset 0 -3px 6px rgba(6, 57, 45, 0.55);
}

.token-select__badge--btc {
  background: linear-gradient(135deg, #f7931a, #f2a900);
  color: linear-gradient(135deg, #f7931a, #f2a900);
  font-weight: 700;
  font-size: 1rem;
}

.token-select__badge--nktx {
  background: #1d1d1d;
  border-color: #1d1d1d;

}

.token-select__badge--nkt {
  background: #ffb308;
  border: none;
  box-shadow: none;
}

.token-select__image {
  width: 68%;
  height: 68%;
  object-fit: contain;
  display: block;
}

.token-select__badge--accent {
  background: linear-gradient(140deg, rgba(245, 195, 59, 0.35), rgba(245, 195, 59, 0.1));
}

.token-select__label {
  flex: 1;
  text-align: left;
}

.token-select__chevron {
  font-size: 0.72rem;
  opacity: 0.6;
}

.token-select[aria-expanded="true"] {
  color: #ffffff;
}

.token-menu {
  position: absolute;
  min-width: 172px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(18, 16, 13, 0.94);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  padding: 0.32rem;
  display: grid;
  gap: 0.24rem;
  z-index: 20;
}

.token-menu__option {
  display: flex;
  align-items: center;
  gap: 0.52rem;
  width: 100%;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.016em;
  padding: 0.48rem 0.52rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease, transform 0.18s ease;
}

.token-menu__option:hover,
.token-menu__option:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.token-menu__option[disabled],
.token-menu__option[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

.token-menu__option.is-active {
  background: rgba(255, 255, 255, 0.12);
}

.swap-toggle {
  position: relative;
  display: flex;
  justify-content: center;
  margin: -0.92rem auto;
}

.swap-toggle__button {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--panel-highlight);
  background: rgba(0, 0, 0, 0.45);
  color: var(--text-primary);
  display: grid;
  place-items: center;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.swap-toggle__button:hover,
.swap-toggle__button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.24);
  outline: none;
}

.swap-toggle__icon {
  font-size: 1.2rem;
  line-height: 1;
}

.transaction-alert {
  display: flex;
  align-items: center;
  gap: 0.68rem;
  padding: 0.68rem 0.92rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 123, 109, 0.4);
  background: linear-gradient(180deg, rgba(86, 7, 2, 0.88), rgba(53, 3, 0, 0.92));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: rgba(255, 220, 215, 0.92);
  font-size: 0.72rem;
  letter-spacing: 0.016em;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.transaction-alert.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.transaction-alert--success {
  border-color: rgba(87, 223, 171, 0.4);
  background: linear-gradient(180deg, rgba(5, 41, 28, 0.88), rgba(3, 24, 15, 0.92));
  color: rgba(209, 255, 240, 0.95);
}

.transaction-alert--success .transaction-alert__icon {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.18), rgba(87, 223, 171, 0.1));
  box-shadow: 0 0 0 6px rgba(87, 223, 171, 0.18);
}

.transaction-alert--success .transaction-alert__icon::before {
  content: "✓";
  font-size: 0.74rem;
}

.transaction-alert__icon {
  position: relative;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.18), rgba(255, 106, 85, 0.1));
  box-shadow: 0 0 0 6px rgba(255, 106, 85, 0.16);
  color: rgba(255, 220, 215, 0.94);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: lowercase;
}

.transaction-alert__icon::before {
  content: "i";
}

.transaction-alert__icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0.4;
}

.transaction-alert__message {
  flex: 1;
  color: inherit;
}

/* -------------------------------------------------------------------------
   Success modal — shown after a confirmed transaction. Uses the regular
   card palette (no green tint); the check icon sits centered on top.
   ------------------------------------------------------------------------- */
.success-modal-overlay {
  z-index: 1100;
}

.success-modal {
  width: min(100%, 380px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  padding: clamp(1.6rem, 4.5vw, 2rem) clamp(1.4rem, 4vw, 1.8rem) clamp(1.4rem, 4vw, 1.8rem);
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: var(--card-surface);
  box-shadow: var(--shadow-xl);
  position: relative;
  color: var(--text-primary);
  animation: success-modal-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.success-modal::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid var(--card-highlight);
  pointer-events: none;
}

@keyframes success-modal-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.success-modal__icon {
  flex-shrink: 0;
  /* Sized 25% smaller than the previous 64px disc. */
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Solid light-on-dark green disc with no stroke; the keyframe animation
     pulses the disc itself between a brighter and a deeper green. */
  background: #1f6b4a;
  border: none;
  color: #d6f8e6;
  margin-bottom: 0.15rem;
  animation: success-modal-icon-pulse 1.6s ease-in-out infinite;
}

@keyframes success-modal-icon-pulse {
  0%,
  100% {
    background-color: #1f6b4a;
    box-shadow: 0 0 0 0 rgba(87, 223, 171, 0.45);
  }
  50% {
    background-color: #57df9b;
    box-shadow: 0 0 0 10px rgba(87, 223, 171, 0);
  }
}

.success-modal__icon svg {
  /* Check stroke scaled down 25% (was 32px). */
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.success-modal__title {
  margin: 0;
  font-size: clamp(1.05rem, 2.8vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.success-modal__close {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s ease, transform 0.2s ease;
  z-index: 1;
}

.success-modal__close:hover,
.success-modal__close:focus-visible {
  color: var(--text-primary);
  transform: scale(1.08);
  outline: none;
}

.success-modal__message {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 30ch;
}

.success-modal__actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.4rem;
}

.success-modal__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
}

.success-modal__view.is-disabled {
  pointer-events: none;
  opacity: 0.55;
}

.success-modal__dismiss {
  width: 100%;
}

.swap-notice {
  display: flex;
  align-items: center;
  gap: 0.68rem;
  padding: 0.68rem 0.92rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 179, 8, 0.4);
  background: linear-gradient(180deg, rgba(74, 50, 4, 0.78), rgba(48, 32, 2, 0.84));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: rgba(255, 234, 192, 0.95);
  font-size: 0.72rem;
  letter-spacing: 0.016em;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.swap-notice:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
}

/* NKT-coin variant of the swap-notice icon — a yellow circle with the NKT
   coin centered inside (slightly smaller than the circle for a clean
   "badge" look, matching the visual treatment in the swap card). */
.swap-notice__icon--nkt {
  /* Bumped 35% from the original 33px so the coin reads more clearly next
     to the liquidity-routing notice on nft.html. */
  width: 45px;
  height: 45px;
  padding: 0;
  background: var(--accent);
  border: 1px solid rgba(255, 179, 8, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.swap-notice__icon-image {
  width: 78%;
  height: 78%;
  object-fit: contain;
  display: block;
}

.swap-notice__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffb308;
  color: #1a1200;
  font-weight: 700;
  font-size: 0.78rem;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

.swap-notice__message {
  flex: 1;
  color: inherit;
}

/* When NKTx is the active sell token on swap.html the swap is disabled
   (yellow notice tells the user it'll be available soon). Hide the
   Connect Phantom Wallet and Accept transaction CTAs while in that
   state without touching their `hidden` flags so the regular flow
   resumes when the user switches back to SOL/USDC/USDT. */
body.nktx-unavailable .wallet-actions,
body.nktx-unavailable #accept-transaction {
  display: none !important;
}

.accept-action {
  width: 100%;
  padding: 0.68rem 0.92rem;
  border: 1px solid var(--panel-highlight);
  border-radius: 999px;
  background: var(--panel-surface);
  color: var(--text-primary);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.048em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease,
    background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.accept-action:hover,
.accept-action:focus-visible {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #f6cf5d 0%, #f5c33b 35%, #e1a624 100%);
  border-color: transparent;
  box-shadow: 0 0 31px rgba(245, 195, 59, 0.45);
  color: #2a1a03;
  filter: brightness(1.02);
  outline: none;
}

.accept-action--offline,
.accept-action--offline:disabled {
  cursor: not-allowed;
  pointer-events: none;
  border-color: rgba(255, 106, 85, 0.6);
  background: linear-gradient(180deg, rgba(46, 16, 16, 0.96), rgba(28, 10, 10, 0.94));
  color: rgba(255, 218, 213, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.accept-action--offline:hover,
.accept-action--offline:focus-visible,
.accept-action--offline:active {
  transform: none;
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  background: linear-gradient(180deg, rgba(46, 16, 16, 0.96), rgba(28, 10, 10, 0.94));
  color: rgba(255, 218, 213, 0.88);
}

.accept-action:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

.wallet-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wallet-actions .primary-action {
  margin-top: 0;
  flex: 1;
}

.primary-action {
  margin-top: 0.2rem;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 0.92rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #f6cf5d 0%, #f5c33b 35%, #e1a624 100%);
  color: #2a1a03;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.048em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  text-decoration: none;
}

.primary-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: none;
}

.primary-action:disabled:hover,
.primary-action:disabled:focus-visible {
  transform: none;
  box-shadow: none;
  filter: none;
  outline: none;
}

.primary-action.is-connected {
  background: transparent;
  color: var(--text-muted);
  border: none;
  box-shadow: none;
  padding: 0.4rem 0;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: default;
}

.primary-action.is-connected:hover,
.primary-action.is-connected:focus-visible,
.primary-action.is-connected.is-disconnect-state {
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
  transform: none;
  filter: none;
  outline: none;
}

.primary-action.is-connected:active {
  filter: none;
  transform: none;
}

.primary-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 31px rgba(245, 195, 59, 0.45);
  filter: brightness(1.05);
}

.primary-action:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

@media (max-width: 520px) {
  /* Tighten the body's flex gap so the header sits closer to the card area. */
  body {
    gap: clamp(0.3rem, 0.9vw, 0.55rem);
  }

  .layout {
    /* Pull the swap card up toward the header instead of vertically
       centering it in the remaining flex space, but leave breathing
       room between the nav buttons and the card (matches the gap on
       index.html between the header and the "Welcome to the DAO" hero). */
    align-items: flex-start;
    padding-top: clamp(1.2rem, 4vw, 2rem);
  }

  .site-footer {
    /* Lift the footer up off the very bottom of the viewport. */
    margin-bottom: 1.1rem;
  }

  .swap-card {
    padding: 1.2rem;
    gap: 0.88rem;
  }

  .presale-card {
    padding: 1.2rem;
    gap: 1rem;
    /* Drop the 1:1 aspect ratio on phones so the card grows with its
       content. This way the "Join NKT Pre-sale" button at the bottom
       is always visible without an internal scroll on the card. */
    aspect-ratio: auto;
    align-self: stretch;
    height: auto;
    min-height: 100%;
    overflow: visible;
    overflow-y: visible;
  }

  .presale-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .presale-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* On mobile the swap card heading just stacks the title with the
     network indicator below it (the wallet indicator now lives inside
     the "You receive" panel header). */
  .swap-card__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.32rem;
  }

  .swap-card__network {
    white-space: nowrap;
  }

  .token-select {
    justify-content: flex-start;
  }

  .swap-toggle__button {
    width: 35px;
    height: 35px;
  }

  /* ---- NFT collection page · mobile tweaks ----
     1. Drop the 1:1 aspect ratio on the card so it stretches the full
        height of the layout area instead of sitting as a small square
        with a big empty gap above the footer.
     2. Lock the carousel image dimensions so flex/marquee math on
        narrow viewports can't squish them, and soften the edge mask
        so images at the edges don't look cropped or distorted. */
  .nft-card {
    aspect-ratio: auto;
    align-self: stretch;
    height: 100%;
    min-height: 100%;
  }

  .nft-carousel__art {
    width: 132px;
    height: 132px;
    min-width: 132px;
    min-height: 132px;
    /* Reset the desktop max caps (100px) so the mobile thumbs can grow
       back to the larger 132px size — phones don't have the "fit
       above the fold" constraint that drove the desktop shrink. */
    max-width: 132px;
    max-height: 132px;
  }

  .nft-carousel {
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 6%,
      #000 94%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 6%,
      #000 94%,
      transparent 100%
    );
  }

}

/* =========================================================================
   Whitepaper / docs page
   -------------------------------------------------------------------------
   The other pages on this site live inside fixed-aspect cards and the body
   is `overflow: hidden`. The whitepaper is long-form so we relax those
   constraints with `body.page--docs`, then lay out a Mintlify-style two
   column page (sticky TOC sidebar + scrollable article).
   ========================================================================= */
body.page--docs {
  /* Body is no longer y-clipped at the base layer (see top of file), so
     the document can scroll naturally on the whitepaper. We just keep
     smooth-scroll for in-page TOC anchors. */
  align-items: center;
  scroll-behavior: smooth;
}

/* ----- Docs header ------------------------------------------------------- */
/* Minimal top bar: logo + /whitepaper on the left, "Go to website" CTA on
   the right. Replaces the centered logo + nav links the other pages use. */
.docs-header {
  position: sticky;
  top: clamp(0.6rem, 1.8vw, 1.1rem);
  z-index: 100;
  width: min(100%, 1140px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: linear-gradient(
    180deg,
    rgba(24, 20, 16, 0.92),
    rgba(14, 12, 10, 0.88)
  );
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.docs-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--text-primary);
  padding: 0.2rem 0.3rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.docs-header__brand:hover,
.docs-header__brand:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.04);
}

.docs-header__logo {
  height: clamp(28px, 4vw, 36px);
  /* Hard cap on the height as a safety net: if `clamp()` mis-resolves
     in a webview (the Google Search in-app browser was rendering the
     image at its native pixel size on the whitepaper), the logo still
     can't blow up past 36px tall. Width is left to `auto` so the
     image keeps its natural aspect ratio — capping `max-width` here
     was what made the logo look squished on phones. */
  max-height: 36px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}

.docs-header__path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.84rem, 2vw, 0.95rem);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  position: relative;
  padding-left: 0.7rem;
}

.docs-header__path::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.2em;
  background: rgba(255, 255, 255, 0.14);
}

.docs-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease,
    transform 0.18s ease, color 0.18s ease;
}

.docs-header__cta:hover,
.docs-header__cta:focus-visible {
  outline: none;
  background: var(--accent);
  border-color: transparent;
  color: #1a1203;
  transform: translateY(-1px);
}

.docs-header__cta:active {
  transform: translateY(0);
}

.docs-header__cta-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

/* Default: show full label, hide short label. Phone breakpoint flips this. */
.docs-header__cta-label--short {
  display: none;
}

.docs-header__cta:hover .docs-header__cta-icon,
.docs-header__cta:focus-visible .docs-header__cta-icon {
  transform: translateX(2px);
}

@media (max-width: 520px) {
  .docs-header {
    padding: 0.6rem 0.8rem;
  }

  .docs-header__cta {
    padding: 0.45rem 0.7rem;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
  }

  .docs-header__cta-label--full {
    display: none;
  }

  .docs-header__cta-label--short {
    display: inline;
  }

  .docs-header__cta-icon {
    width: 14px;
    height: 14px;
  }
}

.layout--docs {
  max-width: min(100%, 1140px);
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  padding-block: clamp(0.8rem, 3vw, 1.4rem);
  min-height: 0;
}

.layout--docs > * {
  max-height: none;
  width: auto;
}

/* ----- Sidebar / table of contents ----- */
.docs-sidebar {
  flex: 0 0 240px;
  position: sticky;
  /* Sit below the now-sticky docs-header instead of overlapping it. */
  top: clamp(4.4rem, 8vw, 5.2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: var(--card-surface);
  box-shadow: var(--shadow-xl);
}

.docs-sidebar__eyebrow {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.docs-sidebar__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

.docs-toc {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.docs-toc__heading {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.docs-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  counter-reset: toc;
}

.docs-toc__list li {
  counter-increment: toc;
}

.docs-toc__link {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.docs-toc__link::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(245, 195, 59, 0.55);
  width: 1.5rem;
}

.docs-toc__link:hover,
.docs-toc__link:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

/* Active section in the TOC — driven by the scroll-spy at the bottom of
   whitepaper.html. Switches the title to white so the reader can see where
   they are on the page at a glance. */
.docs-toc__link--active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.docs-toc__link--active::before {
  color: var(--accent);
}

/* ----- Main article column ----- */
.docs-content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 3.4vw, 2.4rem);
}

.docs-hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.4rem, 3.6vw, 2rem);
  border-radius: 16px;
  border: 1px solid var(--card-border);
  background: linear-gradient(
    160deg,
    rgba(245, 195, 59, 0.08),
    rgba(24, 20, 16, 0.85) 55%,
    rgba(14, 12, 10, 0.85)
  );
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}

.docs-hero::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid var(--card-highlight);
  pointer-events: none;
}

.docs-hero__eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.docs-hero__title {
  margin: 0;
  font-size: clamp(2rem, 5.4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--text-primary);
}

.docs-hero__lede {
  margin: 0;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  line-height: 1.6;
  color: rgba(250, 245, 235, 0.78);
  max-width: 62ch;
}

.docs-hero__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-top: 0.6rem;
}

.docs-hero__meta > div {
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.docs-hero__meta dt {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.docs-hero__meta dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

/* ----- Sections ----- */
.docs-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.4rem, 3.4vw, 1.8rem);
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: var(--card-surface);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
  /* Leave room for the sticky docs-header when jumping in via the TOC. */
  scroll-margin-top: clamp(4.6rem, 9vw, 5.6rem);
}

.docs-section__index {
  position: absolute;
  top: clamp(1.1rem, 3vw, 1.4rem);
  right: clamp(1.2rem, 3vw, 1.6rem);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(245, 195, 59, 0.55);
}

.docs-section__title {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

.docs-section__title--callout {
  color: var(--accent);
}

.docs-section--callout {
  border-color: rgba(245, 195, 59, 0.32);
  background: linear-gradient(
    160deg,
    rgba(60, 44, 12, 0.55),
    rgba(20, 16, 10, 0.85)
  );
}

/* ----- Prose ----- */
.docs-prose {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  font-size: 0.96rem;
  line-height: 1.65;
  color: rgba(250, 245, 235, 0.82);
}

.docs-prose strong {
  color: var(--text-primary);
  font-weight: 600;
}

.docs-prose p {
  margin: 0;
}

/* ----- Bullets list (NKT roles) ----- */
.docs-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem;
}

.docs-bullets li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(250, 245, 235, 0.78);
}

.docs-bullets li span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ----- Flow / numbered steps ----- */
.docs-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem;
}

.docs-flow li {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
}

.docs-flow__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: rgba(245, 195, 59, 0.16);
  border: 1px solid rgba(245, 195, 59, 0.4);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
}

.docs-flow li p {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(250, 245, 235, 0.82);
}

/* ----- Fee grid (token mechanics) ----- */
.docs-fee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.7rem;
}

.docs-fee {
  padding: 1.1rem 1.1rem 1rem;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(245, 195, 59, 0.08),
    rgba(0, 0, 0, 0.32)
  );
  border: 1px solid rgba(245, 195, 59, 0.22);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.docs-fee__amount {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--accent);
  line-height: 1;
}

.docs-fee__amount span {
  font-size: 0.7em;
  margin-left: 0.1em;
  color: rgba(245, 195, 59, 0.7);
}

.docs-fee__name {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.docs-fee__caption {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ----- Allocation rows (tokenomics) ----- */
.docs-alloc {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.docs-alloc__row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.95rem 1rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.docs-alloc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.docs-alloc__label {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.docs-alloc__pct {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.docs-alloc__tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
}

.docs-alloc__bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.docs-alloc__bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  border-radius: inherit;
  /* Bars animate from 0% to their target width the first time the row
     scrolls into view (handled via JS that flips the inline width). */
  transition: width 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .docs-alloc__bar > span {
    transition: none;
  }
}

.docs-alloc__caption {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ----- Pager (back to top + CTA) ----- */
.docs-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: rgba(0, 0, 0, 0.32);
}

.docs-pager__link {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}

.docs-pager__link:hover,
.docs-pager__link:focus-visible {
  outline: none;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.docs-pager__link--primary {
  color: var(--accent);
}

.docs-pager__link--primary:hover,
.docs-pager__link--primary:focus-visible {
  color: var(--text-primary);
  background: rgba(245, 195, 59, 0.16);
}

/* ----- Figure (whitepaper diagrams/illustrations) ----- */
.docs-figure {
  margin: 0.4rem 0 0;
  display: flex;
  justify-content: center;
}

.docs-figure__image {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
}

/* Yellow inline link used to highlight cross-references in prose. */
.docs-link--accent {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(245, 195, 59, 0.45);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.docs-link--accent:hover,
.docs-link--accent:focus-visible {
  color: #ffd864;
  border-bottom-color: rgba(245, 195, 59, 0.85);
  outline: none;
}

/* ----- Roadmap (whitepaper) -----
   Three sequential phases shown side-by-side, connected by a thin track
   that runs through the centers of the phase cards. The active phase
   pops with the brand accent; upcoming phases are dimmed so they read
   as "next up, but not yet live". On narrow screens the row collapses
   to a vertical stack and the connector flips to a vertical track. */
.docs-roadmap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  position: relative;
}

/* Connector track — sits behind the cards horizontally on desktop. */
.docs-roadmap::before {
  content: "";
  position: absolute;
  top: 1.85rem; /* Align with the quarter pill row. */
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(245, 195, 59, 0.55) 0%,
    rgba(245, 195, 59, 0.35) 33%,
    rgba(255, 255, 255, 0.08) 33%,
    rgba(255, 255, 255, 0.08) 100%
  );
  z-index: 0;
  pointer-events: none;
}

.docs-roadmap__phase {
  position: relative;
  z-index: 1;
  padding: 1.05rem 1.05rem 1rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.docs-roadmap__phase--active {
  background: linear-gradient(
    180deg,
    rgba(245, 195, 59, 0.12),
    rgba(0, 0, 0, 0.4)
  );
  border-color: rgba(245, 195, 59, 0.4);
  box-shadow: 0 0 0 1px rgba(245, 195, 59, 0.18) inset,
    0 6px 24px -16px rgba(245, 195, 59, 0.45);
}

.docs-roadmap__phase--upcoming {
  opacity: 0.55;
  filter: grayscale(0.4);
}

.docs-roadmap__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.docs-roadmap__quarter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.docs-roadmap__phase--active .docs-roadmap__quarter {
  color: var(--accent);
  background: rgba(245, 195, 59, 0.16);
  border-color: rgba(245, 195, 59, 0.5);
}

.docs-roadmap__status {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.docs-roadmap__status--active {
  color: var(--accent);
}

.docs-roadmap__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.docs-roadmap__list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(250, 245, 235, 0.82);
}

.docs-roadmap__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.docs-roadmap__phase--active .docs-roadmap__list li::before {
  background: var(--accent);
}

@media (max-width: 720px) {
  .docs-roadmap {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  /* Vertical connector through the left edge of the cards. */
  .docs-roadmap::before {
    top: 1.5rem;
    bottom: 1.5rem;
    left: 1.2rem;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(
      180deg,
      rgba(245, 195, 59, 0.55) 0%,
      rgba(245, 195, 59, 0.35) 33%,
      rgba(255, 255, 255, 0.08) 33%,
      rgba(255, 255, 255, 0.08) 100%
    );
  }
}

/* ----- "Flat" roadmap variant -----------------------------------------------
   The Q2/Q3/Q4 phase cards used to be boxed-out tiles (dark fill, border,
   rounded corners). Per design feedback the boxes were removed so the
   roadmap reads as plain content with a subtle quarter pill + status,
   stacked vertically. Applied via the `.docs-roadmap--flat` modifier on
   the <ol>. The connector track between cards is also dropped because
   it visually only made sense as glue between the framed phases. */
.docs-roadmap--flat {
  grid-template-columns: 1fr;
  gap: 1.6rem;
}

.docs-roadmap--flat::before {
  display: none;
}

.docs-roadmap--flat .docs-roadmap__phase,
.docs-roadmap--flat .docs-roadmap__phase--active {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Subtle hairline divider between phases instead of the boxed look. */
.docs-roadmap--flat .docs-roadmap__phase + .docs-roadmap__phase {
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Upcoming phases stay slightly muted but no longer get the grayscale
   treatment we used to apply on top of the box background. */
.docs-roadmap--flat .docs-roadmap__phase--upcoming {
  opacity: 0.78;
  filter: none;
}

/* ----- Team grid (whitepaper) ----- */
.docs-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
}

.docs-team__card {
  display: grid;
  /* Image on the left, info block (name + role + socials) on the right,
     bio underneath spanning the full width of the card, left-aligned. */
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "avatar info"
    "bio    bio";
  column-gap: 1rem;
  row-gap: 0.7rem;
  align-items: center;
  justify-items: start;
  text-align: left;
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.docs-team__info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-self: center;
}

.docs-team__card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 195, 59, 0.32);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.docs-team__avatar {
  grid-area: avatar;
  display: block;
  width: 96px;
  height: 96px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(245, 195, 59, 0.32);
  background: linear-gradient(180deg, rgba(246, 207, 93, 0.12), rgba(0, 0, 0, 0.32));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.docs-team__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  line-height: 1.2;
}

.docs-team__role {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.3;
}

.docs-team__socials {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.docs-team__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: rgba(250, 245, 235, 0.55);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.docs-team__social:hover,
.docs-team__social:focus-visible {
  outline: none;
  color: var(--accent);
  background: rgba(245, 195, 59, 0.1);
  border-color: rgba(245, 195, 59, 0.32);
  transform: translateY(-1px);
}

.docs-team__social-icon {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.docs-team__bio {
  grid-area: bio;
  margin: 0;
  width: 100%;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-muted);
  text-align: left;
}

/* ----- Q&A accordion (whitepaper) -----
   <details> + <summary> driven, but with a smooth expand using the
   `[open]` attribute and a max-height transition on the inner answer. */
.docs-faq {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.docs-faq__item {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.docs-faq__item[open] {
  border-color: rgba(245, 195, 59, 0.35);
  background: rgba(245, 195, 59, 0.04);
}

.docs-faq__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.95rem 1.1rem;
  cursor: pointer;
  user-select: none;
  color: var(--text-primary);
  transition: color 0.2s ease, background 0.2s ease;
}

.docs-faq__summary::-webkit-details-marker {
  display: none;
}

.docs-faq__summary:hover {
  background: rgba(255, 255, 255, 0.03);
}

.docs-faq__question {
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.docs-faq__icon {
  flex-shrink: 0;
  position: relative;
  width: 14px;
  height: 14px;
}

.docs-faq__icon::before,
.docs-faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--accent);
  border-radius: 999px;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease;
}

.docs-faq__icon::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.docs-faq__icon::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.docs-faq__item[open] .docs-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.docs-faq__answer {
  padding: 0 1.1rem 1.05rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
  /* Smooth expand: animate via grid-template-rows trick on the parent. */
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.65, 0, 0.35, 1),
    padding 0.32s cubic-bezier(0.65, 0, 0.35, 1);
}

.docs-faq__answer > p {
  margin: 0;
  overflow: hidden;
}

.docs-faq__item[open] .docs-faq__answer {
  grid-template-rows: 1fr;
}

/* ----- Animated number badge (count-up effect) -----
   Used inside team bios and Q&A answers; styled to read as part of the
   surrounding sentence while still drawing the eye. */
.docs-count {
  display: inline-block;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* ----- Mobile / narrow stack ----- */
@media (max-width: 880px) {
  .layout--docs {
    flex-direction: column;
    gap: 1.2rem;
  }

  .docs-sidebar {
    position: static;
    flex: 1 1 auto;
    width: 100%;
  }

  .docs-toc__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.1rem;
  }

  .docs-section__index {
    position: static;
    margin-bottom: -0.4rem;
  }

  .docs-team {
    grid-template-columns: 1fr;
  }

  /* On phone keep the same shape as desktop — image left + role to the
     right, bio underneath spanning the full card width — just slightly
     tighter spacing and a smaller avatar. */
  .docs-team__card {
    column-gap: 0.85rem;
    row-gap: 0.55rem;
    padding: 1rem 1rem 1.05rem;
  }

  .docs-team__avatar {
    width: 88px;
    height: 88px;
    align-self: center;
  }
}