/* ============================================================
   PEER CYCLES — design system
   Black silicon · monochrome + brass gold · glass enclave
   ============================================================ */

:root {
  /* surfaces */
  --bg:        #050506;
  --bg-2:      #08080a;
  --surface:   #0c0c0f;
  --surface-2: #111116;
  --line:      rgba(255, 255, 255, 0.08);
  --line-2:    rgba(255, 255, 255, 0.14);

  /* ink */
  --ink:       #f4f3ef;
  --ink-2:     #bdbcb6;
  --ink-3:     #8d8c85;
  --ink-4:     #6c6b65;

  /* brass gold (sampled from the PCIe cables) */
  --gold:      #e6b54c;
  --gold-2:    #f3d27e;
  --gold-deep: #b8862c;
  --gold-glow: rgba(230, 181, 76, 0.16);

  /* cool counter accent (enclave glass) */
  --cool:      #8fb6d6;

  --radius:    16px;
  --radius-sm: 10px;
  --maxw:      1180px;
  --gut:       clamp(20px, 5vw, 64px);

  /* pixel font everywhere — JetBrains Mono is the per-glyph fallback for any missing chars */
  --font-display: "Silkscreen", "JetBrains Mono", ui-monospace, monospace;
  --font-body:    "Silkscreen", "JetBrains Mono", ui-monospace, monospace;
  --font-mono:    "Silkscreen", "JetBrains Mono", ui-monospace, monospace;
  --font-pixel:   "Silkscreen", "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.85;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* pixel font reads small & wide — give prose room to breathe */
p { line-height: 1.9; }

::selection { background: var(--gold); color: #000; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
strong { color: var(--ink); font-weight: 600; }
em { font-style: normal; color: var(--gold-2); }

/* keyboard focus — visible on every interactive element */
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 5px; }
.btn:focus-visible { outline-offset: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* ─────────── ambient background ─────────── */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); }
/* falling-pattern (ported from a React/Tailwind component to vanilla CSS, brass-gold) */
.bg-fall {
  --fc: rgba(230, 181, 76, 0.85);
  position: absolute; inset: 0; opacity: 0.6;
  background-color: var(--bg);
  background-image:
    radial-gradient(4px 100px at 0px 235px, var(--fc), transparent),
    radial-gradient(4px 100px at 300px 235px, var(--fc), transparent),
    radial-gradient(1.5px 1.5px at 150px 117.5px, var(--fc) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 252px, var(--fc), transparent),
    radial-gradient(4px 100px at 300px 252px, var(--fc), transparent),
    radial-gradient(1.5px 1.5px at 150px 126px, var(--fc) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 150px, var(--fc), transparent),
    radial-gradient(4px 100px at 300px 150px, var(--fc), transparent),
    radial-gradient(1.5px 1.5px at 150px 75px, var(--fc) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 253px, var(--fc), transparent),
    radial-gradient(4px 100px at 300px 253px, var(--fc), transparent),
    radial-gradient(1.5px 1.5px at 150px 126.5px, var(--fc) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 204px, var(--fc), transparent),
    radial-gradient(4px 100px at 300px 204px, var(--fc), transparent),
    radial-gradient(1.5px 1.5px at 150px 102px, var(--fc) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 134px, var(--fc), transparent),
    radial-gradient(4px 100px at 300px 134px, var(--fc), transparent),
    radial-gradient(1.5px 1.5px at 150px 67px, var(--fc) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 179px, var(--fc), transparent),
    radial-gradient(4px 100px at 300px 179px, var(--fc), transparent),
    radial-gradient(1.5px 1.5px at 150px 89.5px, var(--fc) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 299px, var(--fc), transparent),
    radial-gradient(4px 100px at 300px 299px, var(--fc), transparent),
    radial-gradient(1.5px 1.5px at 150px 149.5px, var(--fc) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 215px, var(--fc), transparent),
    radial-gradient(4px 100px at 300px 215px, var(--fc), transparent),
    radial-gradient(1.5px 1.5px at 150px 107.5px, var(--fc) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 281px, var(--fc), transparent),
    radial-gradient(4px 100px at 300px 281px, var(--fc), transparent),
    radial-gradient(1.5px 1.5px at 150px 140.5px, var(--fc) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 158px, var(--fc), transparent),
    radial-gradient(4px 100px at 300px 158px, var(--fc), transparent),
    radial-gradient(1.5px 1.5px at 150px 79px, var(--fc) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 210px, var(--fc), transparent),
    radial-gradient(4px 100px at 300px 210px, var(--fc), transparent),
    radial-gradient(1.5px 1.5px at 150px 105px, var(--fc) 100%, transparent 150%);
  background-size:
    300px 235px, 300px 235px, 300px 235px, 300px 252px, 300px 252px, 300px 252px,
    300px 150px, 300px 150px, 300px 150px, 300px 253px, 300px 253px, 300px 253px,
    300px 204px, 300px 204px, 300px 204px, 300px 134px, 300px 134px, 300px 134px,
    300px 179px, 300px 179px, 300px 179px, 300px 299px, 300px 299px, 300px 299px,
    300px 215px, 300px 215px, 300px 215px, 300px 281px, 300px 281px, 300px 281px,
    300px 158px, 300px 158px, 300px 158px, 300px 210px, 300px 210px, 300px 210px;
  background-position:
    0px 220px, 3px 220px, 151.5px 337.5px, 25px 24px, 28px 24px, 176.5px 150px,
    50px 16px, 53px 16px, 201.5px 91px, 75px 224px, 78px 224px, 226.5px 230.5px,
    100px 19px, 103px 19px, 251.5px 121px, 125px 120px, 128px 120px, 276.5px 187px,
    150px 31px, 153px 31px, 301.5px 120.5px, 175px 235px, 178px 235px, 326.5px 384.5px,
    200px 121px, 203px 121px, 351.5px 228.5px, 225px 224px, 228px 224px, 376.5px 364.5px,
    250px 26px, 253px 26px, 401.5px 105px, 275px 75px, 278px 75px, 426.5px 180px;
  animation: bgFall 150s linear infinite;
}
@keyframes bgFall {
  from {
    background-position:
      0px 220px, 3px 220px, 151.5px 337.5px, 25px 24px, 28px 24px, 176.5px 150px,
      50px 16px, 53px 16px, 201.5px 91px, 75px 224px, 78px 224px, 226.5px 230.5px,
      100px 19px, 103px 19px, 251.5px 121px, 125px 120px, 128px 120px, 276.5px 187px,
      150px 31px, 153px 31px, 301.5px 120.5px, 175px 235px, 178px 235px, 326.5px 384.5px,
      200px 121px, 203px 121px, 351.5px 228.5px, 225px 224px, 228px 224px, 376.5px 364.5px,
      250px 26px, 253px 26px, 401.5px 105px, 275px 75px, 278px 75px, 426.5px 180px;
  }
  to {
    background-position:
      0px 6800px, 3px 6800px, 151.5px 6917.5px, 25px 13632px, 28px 13632px, 176.5px 13758px,
      50px 5416px, 53px 5416px, 201.5px 5491px, 75px 17175px, 78px 17175px, 226.5px 17301.5px,
      100px 5119px, 103px 5119px, 251.5px 5221px, 125px 8428px, 128px 8428px, 276.5px 8495px,
      150px 9876px, 153px 9876px, 301.5px 9965.5px, 175px 13391px, 178px 13391px, 326.5px 13540.5px,
      200px 14741px, 203px 14741px, 351.5px 14848.5px, 225px 18770px, 228px 18770px, 376.5px 18910.5px,
      250px 5082px, 253px 5082px, 401.5px 5161px, 275px 6375px, 278px 6375px, 426.5px 6480px;
  }
}
/* dot-screen overlay: blurs the streaks through a fine grid of holes (the signature look) */
.bg-fall__mask {
  position: absolute; inset: 0;
  -webkit-backdrop-filter: blur(1em); backdrop-filter: blur(1em);
  background-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 2px, var(--bg) 2px);
  background-size: 8px 8px;
}
.bg-glow { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.bg-glow--gold {
  width: 60vw; height: 60vw; top: -18vw; left: 46%; opacity: 0.85;
  background: radial-gradient(circle, rgba(243,210,126,0.50), rgba(230,181,76,0.16) 45%, transparent 70%);
  animation: blobA 26s ease-in-out infinite;
}
.bg-glow--cool {
  width: 52vw; height: 52vw; bottom: -10vw; right: -10vw; opacity: 0.72;
  background: radial-gradient(circle, rgba(96,170,224,0.34), rgba(96,170,224,0.08) 55%, transparent 72%);
  animation: blobB 32s ease-in-out infinite;
}
.bg-glow--violet {
  width: 46vw; height: 46vw; top: 18vh; left: -8vw; opacity: 0.72;
  background: radial-gradient(circle, rgba(160,118,232,0.36), rgba(160,118,232,0.08) 55%, transparent 72%);
  animation: blobC 30s ease-in-out infinite;
}
@keyframes blobA { 0%,100%{ transform: translate(-50%,0) scale(1); } 50%{ transform: translate(-46%,4vh) scale(1.14); } }
@keyframes blobB { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-5vw,-3vh) scale(1.16); } }
@keyframes blobC { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(6vw,-4vh) scale(1.12); } }
.bg-noise {
  position: absolute; inset: 0; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─────────── scroll progress ─────────── */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; background: transparent; }
.scroll-progress span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); box-shadow: 0 0 12px var(--gold-glow); }

/* ─────────── nav ─────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 28px;
  padding: 16px var(--gut);
  background: linear-gradient(to bottom, rgba(5,5,6,0.85), rgba(5,5,6,0));
  transition: background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(7,7,9,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
  padding-top: 12px; padding-bottom: 12px;
}
.nav__brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.nav__logo { width: 32px; height: 32px; filter: drop-shadow(0 0 6px rgba(255,255,255,0.18)) drop-shadow(0 0 10px rgba(230,181,76,0.28)); }
.nav__name { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; line-height: 1; }
.nav__name-sub { display: block; font-family: var(--font-pixel); font-size: 7.5px; letter-spacing: 0.18em; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.nav__links { display: flex; gap: 26px; font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.02em; text-transform: uppercase; }
.nav__links a { color: var(--ink-2); position: relative; transition: color .25s; font-weight: 400; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 1px; width: 0; background: var(--gold); transition: width .3s var(--ease); }
.nav__links a:hover, .nav__links a:focus-visible, .nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after, .nav__links a:hover::after, .nav__links a:focus-visible::after { width: 100%; }
.nav__cta { font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.02em; }
.nav__burger { display: none; background: none; border: 0; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
.nav__burger span { width: 22px; height: 2px; background: var(--ink); transition: transform .3s, opacity .3s; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ─────────── buttons ─────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 100px;
  font-weight: 600; font-size: 14.5px; letter-spacing: 0.01em;
  border: 1px solid var(--line-2); cursor: pointer;
  transition: transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s, color .25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--gold {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #1a1206; border-color: transparent;
  box-shadow: 0 8px 30px -8px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn--gold:hover { box-shadow: 0 14px 40px -10px rgba(230,181,76,0.5), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn--ghost { background: rgba(255,255,255,0.02); color: var(--ink); }
.btn--ghost:hover { background: rgba(255,255,255,0.06); border-color: var(--line-2); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: pulse 2.4s var(--ease) infinite; }
.dot--cool { background: var(--cool); box-shadow: 0 0 10px var(--cool); }
.tick { width: 6px; height: 6px; border-radius: 1.5px; background: var(--gold-deep); transform: rotate(45deg); }

/* ─────────── wallet connect ─────────── */
.wallet-wrap { position: relative; }
.nav__wallet { font-family: var(--font-pixel); font-size: 9.5px; letter-spacing: 0.02em; text-transform: uppercase; padding: 10px 16px; gap: 8px; }
.nav__wallet .w-dot { width: 7px; height: 7px; border-radius: 50%; background: #38d39a; box-shadow: 0 0 8px #38d39a; }
.nav__wallet.is-connected { background: rgba(255,255,255,0.035); color: var(--ink); border-color: var(--line-2); box-shadow: none; }
.nav__wallet.is-connected:hover { border-color: rgba(230,181,76,0.4); }

.w-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(2,2,3,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.w-overlay.is-open { opacity: 1; pointer-events: auto; }
.w-panel { width: min(380px, 100%); background: linear-gradient(180deg, #0d0d10, #08080a); border: 1px solid var(--line-2); border-radius: 18px; padding: 22px; box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.05); transform: translateY(10px) scale(0.98); transition: transform .28s var(--ease); }
.w-overlay.is-open .w-panel { transform: none; }
.w-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.w-panel__title { font-family: var(--font-pixel); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.w-panel__x { background: none; border: 0; color: var(--ink-3); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.w-panel__x:hover { color: var(--ink); }
.w-list { display: flex; flex-direction: column; gap: 8px; }
.w-item { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 15px; border-radius: 12px; cursor: pointer; text-align: left; background: rgba(255,255,255,0.02); border: 1px solid var(--line); color: var(--ink); font-family: var(--font-body); font-size: 14px; font-weight: 500; transition: background .2s, border-color .2s, transform .2s; }
.w-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(230,181,76,0.35); transform: translateY(-1px); }
.w-item img, .w-item .w-ic { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex: none; }
.w-ic { display: grid; place-items: center; background: var(--gold-glow); color: var(--gold-2); font-size: 15px; border: 1px solid rgba(230,181,76,0.3); }
.w-item small { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 3px; font-weight: 400; }
.w-note { margin: 16px 2px 0; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.55; color: var(--ink-3); }
.w-err { margin-top: 12px; color: #ff7a7a; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; }

.w-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 200; width: 264px; background: linear-gradient(180deg, #0d0d10, #08080a); border: 1px solid var(--line-2); border-radius: 14px; padding: 16px; box-shadow: 0 30px 80px -24px rgba(0,0,0,0.9); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s, transform .2s; }
.w-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.w-menu__addr { font-family: var(--font-mono); font-size: 16px; color: var(--ink); letter-spacing: 0.01em; }
.w-menu__row { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 7px; }
.w-menu__chain-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 7px var(--gold-glow); }
.w-menu__actions { display: flex; gap: 7px; margin-top: 15px; }
.w-menu__btn { flex: 1; padding: 9px 6px; border-radius: 9px; cursor: pointer; background: rgba(255,255,255,0.03); border: 1px solid var(--line); color: var(--ink-2); font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.03em; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s; }
.w-menu__btn:hover { background: rgba(255,255,255,0.06); color: var(--ink); }
.w-menu__btn--danger:hover { border-color: rgba(255,122,122,0.5); color: #ff9a9a; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ─────────── hero ─────────── */
.hero { position: relative; padding: clamp(140px, 20vh, 220px) var(--gut) 70px; max-width: var(--maxw); margin: 0 auto; }
.hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 70px); align-items: center; }

.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 26px; }
.eyebrow__line { width: 34px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }

.hero__title { font-family: var(--font-display); font-weight: 700; line-height: 1.0; letter-spacing: 0; margin-bottom: 28px; }
.hero__title-line { display: block; font-size: clamp(40px, 8vw, 88px); }
.hero__title-line:last-child {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--gold-deep);
  background: linear-gradient(180deg, rgba(243,210,126,0.30), rgba(230,181,76,0.04) 65%, transparent);
  -webkit-background-clip: text; background-clip: text;
}
/* fallback where background-clip:text is unsupported — keep the word legible */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title-line:last-child { color: var(--gold-deep); -webkit-text-fill-color: currentColor; }
}

.hero__lede { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 2vw, 20px); line-height: 1.5; margin-bottom: 20px; letter-spacing: 0; }
.muted { color: var(--ink-3); }
.hero__sub { color: var(--ink-2); font-size: clamp(12px, 1.4vw, 14px); line-height: 1.85; max-width: 54ch; margin-bottom: 34px; }

.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 46px; }

.hero__stats { display: flex; gap: clamp(20px, 4vw, 44px); border-top: 1px solid var(--line); padding-top: 26px; flex-wrap: wrap; }
.hero__stats dt { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.hero__stats dd { font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 1.5vw, 16px); }

/* enclave hero visual */
.hero__visual { position: relative; display: grid; place-items: center; min-height: 460px; }
.enclave { position: relative; width: min(470px, 94%); aspect-ratio: 1; display: grid; place-items: center; will-change: transform; }

/* vivid liquid colour halo behind everything */
.enclave__halo {
  content: ""; position: absolute; inset: -8%; z-index: 0; border-radius: 50%;
  background:
    radial-gradient(38% 38% at 36% 32%, rgba(243,210,126,0.58), transparent 70%),
    radial-gradient(46% 46% at 72% 68%, rgba(160,118,232,0.46), transparent 72%),
    radial-gradient(52% 52% at 52% 52%, rgba(96,170,224,0.30), transparent 70%);
  filter: blur(34px); opacity: 1;
  animation: haloPulse 9s ease-in-out infinite;
}
@keyframes haloPulse { 0%,100%{ transform: scale(1); opacity: .82; } 50%{ transform: scale(1.09); opacity: 1; } }

/* grounding contact shadow */
.enclave::after {
  content: ""; position: absolute; z-index: 0; bottom: 3%; left: 50%; transform: translateX(-50%);
  width: 56%; height: 32px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.7), transparent 72%);
  filter: blur(11px);
}

/* frosted liquid-glass panel the chip floats on */
.enclave__glass {
  position: absolute; z-index: 1; width: 76%; height: 76%; border-radius: 32%;
  background: linear-gradient(150deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 42%, rgba(230,181,76,0.07));
  -webkit-backdrop-filter: blur(7px) saturate(1.5); backdrop-filter: blur(7px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.5),
    inset 0 -34px 64px -34px rgba(150,110,220,0.4),
    0 30px 80px -28px rgba(0,0,0,0.8),
    0 0 64px rgba(230,181,76,0.20);
  overflow: hidden;
  animation: float 8s ease-in-out infinite;
}
/* specular highlight sweeping across the glass — the "liquid" life */
.enclave__shine {
  position: absolute; top: -60%; width: 52%; height: 220%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: rotate(18deg); filter: blur(7px); mix-blend-mode: screen;
  animation: shineSweep 6.5s ease-in-out infinite;
}
@keyframes shineSweep { 0%{ left: -45%; } 55%,100%{ left: 130%; } }

.enclave__img {
  width: 100%; position: relative; z-index: 2;
  filter: drop-shadow(0 34px 58px rgba(0,0,0,0.8)) drop-shadow(0 0 50px rgba(243,210,126,0.32));
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.enclave__ring {
  position: absolute; inset: 3%; border-radius: 50%; z-index: 1;
  border: 1px solid rgba(255,255,255,0.12);
  mask-image: linear-gradient(140deg, #000, transparent 60%);
  animation: spin 26s linear infinite;
}
.enclave__ring--2 { inset: -12%; border-color: rgba(243,210,126,0.30); animation-duration: 40s; animation-direction: reverse; mask-image: linear-gradient(300deg, #000, transparent 55%); }
@keyframes spin { to { transform: rotate(360deg); } }

.enclave__tag {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-pixel); font-size: 9.5px; letter-spacing: 0.02em; color: var(--ink);
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(12,12,16,0.5));
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.24); border-radius: 100px; padding: 8px 14px;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.4);
  white-space: nowrap;
}
.enclave__tag--1 { top: 12%; right: -8%; animation: float 6s ease-in-out infinite; }
.enclave__tag--2 { bottom: 14%; left: -10%; animation: float 6s ease-in-out infinite 1.2s; }

.hero__scroll { position: absolute; left: var(--gut); bottom: 26px; display: flex; align-items: center; gap: 10px; font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.hero__scroll i { width: 1px; height: 34px; background: linear-gradient(to bottom, var(--gold), transparent); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; top: -34px; left: 0; width: 1px; height: 34px; background: var(--ink); animation: scrolldown 2s var(--ease) infinite; }
@keyframes scrolldown { to { top: 34px; } }

/* ─────────── marquee ─────────── */
.marquee { border-top: 1px solid rgba(230,181,76,0.16); border-bottom: 1px solid rgba(230,181,76,0.16); padding: 17px 0; overflow: hidden; background: rgba(255,255,255,0.012); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: inline-flex; align-items: center; gap: 34px; white-space: nowrap; animation: marquee 52s linear infinite; }
.marquee__track span { font-family: var(--font-pixel); font-weight: 400; font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); text-transform: uppercase; }
.marquee__track i { color: var(--gold); font-style: normal; font-size: 10px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ─────────── section scaffold ─────────── */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(80px, 12vh, 140px) var(--gut); position: relative; }
/* full-bleed inset ground — gives the long page chapter rhythm (body clips overflow-x) */
.section--alt::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0) 60%);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.section__head { max-width: 760px; margin-bottom: 54px; }
.kicker { display: inline-block; font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.section__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 3vw, 34px); line-height: 1.3; letter-spacing: 0; }
.section__intro { color: var(--ink-2); font-size: clamp(12px, 1.4vw, 14px); line-height: 1.85; margin-top: 22px; max-width: 64ch; }
.section__punch { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 2vw, 21px); line-height: 1.55; margin-top: 48px; max-width: 30ch; letter-spacing: 0; }
.hl { color: var(--gold-2); }

/* ─────────── grids & cards ─────────── */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; position: relative; overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s, background .4s;
}
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, rgba(255,255,255,0.08), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; pointer-events: none; }
.card:hover { transform: translateY(-4px); border-color: rgba(230,181,76,0.26); box-shadow: 0 20px 56px -34px var(--gold-glow); }
.card:hover::before { opacity: 1; }

.card--problem .card__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1.9vw, 17px); line-height: 1.4; margin-bottom: 16px; letter-spacing: 0; }
.card--problem p { color: var(--ink-2); }

.card--mode header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.card--mode h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.card--mode p { color: var(--ink-2); font-size: 15px; }
.card__foot { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-3) !important; font-size: 14px !important; }
.card--mode-premium { border-color: rgba(230,181,76,0.28); background: linear-gradient(180deg, rgba(230,181,76,0.05), var(--bg-2)); }
.card--mode-research { opacity: 0.86; }

.badge { font-family: var(--font-pixel); font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 10px; border-radius: 100px; border: 1px solid var(--line-2); }
.badge--default { color: var(--ink-2); }
.badge--gold { color: var(--gold-2); border-color: rgba(230,181,76,0.4); background: var(--gold-glow); }
.badge--ghost { color: var(--ink-3); }

/* ─────────── primitive ─────────── */
.section--primitive { position: relative; }
.primitive__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.split__item h3 { font-family: var(--font-display); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.split__idx { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--gold-glow); border: 1px solid rgba(230,181,76,0.3); color: var(--gold-2); font-family: var(--font-pixel); font-size: 11px; }
.split__item p { color: var(--ink-2); font-size: 14.5px; }
.primitive__visual { position: relative; display: grid; place-items: center; padding-bottom: 30px; }
.primitive__wire { width: min(420px, 100%); filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6)); opacity: 0.92; }
.primitive__caption { position: absolute; bottom: 0; font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }

/* ─────────── architecture layers ─────────── */
.layers { display: flex; flex-direction: column; gap: 14px; }
.layer {
  display: grid; grid-template-columns: 92px 1fr; align-items: start; gap: 24px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 30px; transition: transform .4s var(--ease), border-color .4s;
}
.layer:hover { transform: translateX(6px); border-color: var(--line-2); }
.layer__id { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink-4); letter-spacing: 0; }
.layer__body h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1.8vw, 17px); line-height: 1.4; margin-bottom: 10px; }
.layer__body > p { color: var(--ink-2); max-width: 70ch; }
.layer--base { background: linear-gradient(180deg, rgba(230,181,76,0.06), var(--bg-2)); border-color: rgba(230,181,76,0.22); }
.layer--base .layer__id { color: var(--gold); }

.workers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.worker { background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; }
.worker__tag { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 12px; margin-bottom: 6px; }
.worker__runs { display: block; font-family: var(--font-pixel); font-size: 8.5px; letter-spacing: 0.01em; color: var(--gold); margin-bottom: 10px; line-height: 1.5; }
.worker p { color: var(--ink-3); font-size: 13.5px; }
.worker--premium { border-color: rgba(230,181,76,0.3); background: rgba(230,181,76,0.04); }
.worker--premium .worker__tag { color: var(--gold-2); }

/* ─────────── privacy strip ─────────── */
.privacy { margin-top: 30px; background: linear-gradient(180deg, var(--surface-2), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(28px, 4vw, 44px); }
.privacy__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 2.4vw, 24px); line-height: 1.35; margin: 14px 0 28px; letter-spacing: 0; }
.flow { list-style: none; display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; }
.flow > li { flex: 1 1 220px; display: flex; gap: 14px; background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; align-items: flex-start; }
.flow > li:nth-child(even) { flex: 0 0 auto; background: none; border: none; align-items: center; padding: 0 4px; }
.flow__n { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--gold-glow); border: 1px solid rgba(230,181,76,0.3); color: var(--gold-2); font-family: var(--font-pixel); font-size: 12px; font-weight: 400; }
.flow p { color: var(--ink-2); font-size: 14.5px; }
.flow__arrow { color: var(--gold); font-size: 22px; }

/* ─────────── pricing tiers ─────────── */
.pricing { align-items: stretch; }
.tier {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 30px;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.tier:hover { transform: translateY(-5px); border-color: rgba(230,181,76,0.3); box-shadow: 0 26px 64px -38px var(--gold-glow); }
.tier--featured { border-color: rgba(230,181,76,0.4); box-shadow: 0 30px 80px -40px var(--gold-glow); background: linear-gradient(180deg, rgba(230,181,76,0.07), var(--bg-2)); }
.tier__flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.03em; text-transform: uppercase; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1206; padding: 6px 14px; border-radius: 100px; font-weight: 400; white-space: nowrap; }
.tier__head h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.tier__for { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.01em; color: var(--ink-3); margin-top: 6px; }
.tier__price { display: flex; align-items: baseline; gap: 8px; margin: 24px 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.tier__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4vw, 38px); line-height: 1; letter-spacing: 0; }
.tier--featured .tier__num { color: var(--gold-2); }
.tier__unit { font-family: var(--font-pixel); font-size: 10px; color: var(--ink-3); }
.tier__list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.tier__list li { position: relative; padding-left: 24px; color: var(--ink-2); font-size: 14.5px; }
.tier__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 7px; border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(-45deg); }
.tier__list li.off { color: var(--ink-4); }
.tier__list li.off::before { border-color: var(--ink-4); transform: none; top: 9px; width: 12px; height: 1.5px; border-left: 0; }

.splits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.012); text-align: center; }
.split-stat__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 32px); line-height: 1.1; letter-spacing: 0; color: var(--gold-2); }
.split-stat__label { display: block; color: var(--ink-3); font-size: 13.5px; margin-top: 10px; }

/* ─────────── token ─────────── */
.section--token { position: relative; }
.token__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.token__col { background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 3vw, 38px); }
.token__h { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-bottom: 24px; }
.ulist { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.ulist li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 15px; }
.ulist li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 2px; background: var(--gold); }
.ulist--check li::before { width: 11px; height: 6px; border-radius: 0; background: none; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); top: 6px; }
.ulist--risk li::before { background: var(--ink-4); border-radius: 50%; width: 6px; height: 6px; }

.treasury { display: flex; flex-direction: column; gap: 16px; }
.treasury__in { background: var(--gold-glow); border: 1px solid rgba(230,181,76,0.3); border-radius: var(--radius-sm); padding: 16px 20px; text-align: center; }
.treasury__label { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--gold-2); }
.treasury__sub { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.treasury__fork { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; }
.treasury__fork::before { content: ""; position: absolute; top: -16px; left: 50%; width: 1px; height: 16px; background: var(--line-2); }
.treasury__branch { background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; text-align: center; }
.treasury__pct { display: block; font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink); letter-spacing: 0; }
.treasury__branch p { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; }
.treasury__note { font-size: 13.5px; color: var(--ink-3); text-align: center; margin-top: 4px; }

/* ─────────── steps ─────────── */
.steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps li { display: flex; gap: 16px; background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: border-color .35s, transform .35s var(--ease); }
.steps li:hover { border-color: var(--line-2); transform: translateY(-3px); }
.steps__n { flex-shrink: 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--gold); width: 34px; }
.steps li p { color: var(--ink-2); font-size: 14.5px; }

/* ─────────── roadmap ─────────── */
.roadmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.phase { background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; position: relative; transition: transform .4s var(--ease), border-color .4s; }
.phase:hover { transform: translateY(-4px); border-color: var(--line-2); }
.phase__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.phase__id { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.phase__status { font-family: var(--font-pixel); font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 100px; padding: 4px 9px; }
.phase p { color: var(--ink-2); font-size: 14px; }
.phase--done { border-color: rgba(230,181,76,0.3); }
.phase--done .phase__status { color: var(--gold-2); border-color: rgba(230,181,76,0.4); background: var(--gold-glow); }
.phase--research { opacity: 0.78; }

/* ─────────── moat + risks ─────────── */
.section--moat .moat__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(34px, 5vw, 64px); }

/* ─────────── closer ─────────── */
.closer { position: relative; text-align: center; padding: clamp(90px, 16vh, 170px) var(--gut); overflow: hidden; }
.closer__enclave { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, 90vw); opacity: 0.16; filter: blur(1px); z-index: 0; }
.closer__title { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 4.6vw, 50px); line-height: 1.22; letter-spacing: 0; }
.closer__sub { position: relative; z-index: 1; color: var(--ink-2); font-size: clamp(12px, 1.5vw, 15px); line-height: 1.8; margin-top: 24px; }
.closer__ticker { position: relative; z-index: 1; display: inline-block; margin-top: 34px; font-family: var(--font-pixel); font-weight: 400; font-size: 14px; letter-spacing: 0.1em; color: var(--gold-2); border: 1px solid rgba(230,181,76,0.4); border-radius: 100px; padding: 13px 30px; background: var(--gold-glow); }

/* ─────────── footer ─────────── */
.footer { border-top: 1px solid var(--line); padding: 40px var(--gut); max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__logo { width: 38px; height: 38px; opacity: 0.9; }
.footer__brand strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.footer__brand span { font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.02em; color: var(--ink-3); margin-top: 3px; display: block; }
.footer__note { color: var(--ink-4); font-size: 12.5px; max-width: 52ch; text-align: right; }

/* ─────────── use the network (API) ─────────── */
.api { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 22px; }
.api__col { display: flex; flex-direction: column; }
.api__label { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-pixel); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; }
.code {
  margin: 0; padding: 20px 22px; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(0,0,0,0.25));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 20px 50px -36px rgba(0,0,0,0.9);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.85; color: var(--ink);
  white-space: pre; overflow-x: auto; tab-size: 2;
}
.code__c { color: var(--ink-3); }                /* comment   */
.code__k { color: var(--gold-2); }               /* json key  */
.code__s { color: #9ad7b0; }                     /* string    */
.code__v { color: var(--gold); font-weight: 600; } /* value/code emphasis */
.api__hint { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }
.api__hint code, .code { font-feature-settings: "liga" 0; }
.api__hint code { font-family: var(--font-mono); font-size: 12px; color: var(--gold); background: var(--gold-glow); border: 1px solid rgba(230,181,76,0.22); border-radius: 5px; padding: 1px 6px; }
.api__foot { margin-top: 26px; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-3); }

/* ─────────── reveal animation ─────────── */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .enclave__img, .enclave__tag, .enclave__ring, .marquee__track, .dot, .hero__scroll i::after, .bg-fall { animation: none !important; }
}

/* ─────────── responsive ─────────── */
@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { order: -1; min-height: 320px; }
  .enclave { width: min(360px, 80%); }
  .enclave__tag--1 { right: 0; }
  .enclave__tag--2 { left: 0; }
  .primitive__grid, .token__grid, .section--moat .moat__grid { grid-template-columns: 1fr; }
  .grid--3, .steps, .roadmap, .workers { grid-template-columns: repeat(2, 1fr); }
  .layer { grid-template-columns: 64px 1fr; gap: 16px; }
  .layer__id { font-size: 30px; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__cta { display: none; }
  .nav__links.is-open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(8,8,10,0.96); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line); padding: 8px var(--gut) 22px;
  }
  .nav__links.is-open a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
}
@media (max-width: 680px) {
  .grid--2, .grid--3, .workers, .steps, .roadmap, .splits, .treasury__fork, .split { grid-template-columns: 1fr; }
  .flow { flex-direction: column; }
  .flow > li:nth-child(even) { display: none; }
  .layer { grid-template-columns: 1fr; gap: 10px; }
  .layer__id { font-size: 28px; }
  .footer { flex-direction: column; align-items: flex-start; }
  .footer__note { text-align: left; }
  .hero__scroll { display: none; }
  .enclave__tag { font-size: 10px; padding: 6px 10px; }
}

/* ============================================================
   LIVE NETWORK CONSOLE
   ============================================================ */
.section--live .kicker { display: inline-flex; align-items: center; gap: 9px; }
.kicker__live {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4fd18b; box-shadow: 0 0 0 0 rgba(79,209,139,0.6);
  animation: livePulse 1.8s var(--ease, ease-out) infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(79,209,139,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(79,209,139,0); }
  100% { box-shadow: 0 0 0 0 rgba(79,209,139,0); }
}

.term {
  max-width: 980px; margin: 8px auto 0;
  border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
  background: #07080a;
  box-shadow: 0 40px 90px -50px rgba(0,0,0,0.9), 0 0 0 1px rgba(230,181,76,0.06),
              inset 0 1px 0 rgba(255,255,255,0.04);
}
.term__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}
.term__dots { display: inline-flex; gap: 7px; }
.term__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
.term__dots i:nth-child(1) { background: #e0644f; }
.term__dots i:nth-child(2) { background: #e3b14b; }
.term__dots i:nth-child(3) { background: #4fd18b; }
.term__title {
  flex: 1; text-align: center; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.04em; color: var(--ink-3);
}
.term__run {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.03em;
  color: var(--gold-2); background: var(--gold-glow);
  border: 1px solid rgba(230,181,76,0.4); border-radius: 100px;
  padding: 7px 14px; cursor: pointer; transition: all 0.18s var(--ease, ease);
  white-space: nowrap;
}
.term__run:hover { background: rgba(230,181,76,0.22); border-color: var(--gold); color: var(--ink); }
.term__run:disabled { opacity: 0.6; cursor: default; }
.term__run.is-running { color: var(--ink-3); }

.term__body {
  height: clamp(360px, 56vh, 560px); overflow-y: auto;
  padding: 18px 20px 26px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.85;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(230,181,76,0.05), transparent 60%),
    #07080a;
  scrollbar-width: thin; scrollbar-color: rgba(230,181,76,0.3) transparent;
}
.term__body::-webkit-scrollbar { width: 9px; }
.term__body::-webkit-scrollbar-thumb { background: rgba(230,181,76,0.28); border-radius: 10px; }
.term__body::-webkit-scrollbar-track { background: transparent; }

.pc-ln { white-space: pre-wrap; word-break: break-word; color: var(--ink-2); }
.pc-k {
  display: inline-block; min-width: 200px; padding-right: 10px;
  color: var(--ink-3); vertical-align: top;
}
.pc-banner { color: var(--gold-2); font-weight: 700; letter-spacing: 0.02em; }
.pc-sp { margin-top: 16px; color: var(--ink); }
.pc-step { color: var(--gold); font-weight: 700; }
.pc-rule { border-top: 1px dashed var(--line-2); height: 0; margin: 6px 0 9px; opacity: 0.7; }
.pc-note { color: var(--ink-3); opacity: 0.85; }
.pc-tok { color: var(--gold-2); }
.pc-done { color: var(--gold-2); font-weight: 700; margin-top: 4px; }

.pc-ok  { color: #4fd18b; font-weight: 700; }
.pc-ok2 { color: #4fd18b; }
.pc-bad { color: #e8705a; font-weight: 700; }
.pc-red { color: #e8705a; }
.pc-cy  { color: #86cdd4; }
.pc-g   { color: var(--gold-2); }
.pc-dim { color: var(--ink-3); }

@media (max-width: 640px) {
  .term__body { font-size: 11px; line-height: 1.8; padding: 14px 14px 20px; }
  .pc-k { min-width: 0; display: block; padding-right: 0; margin-top: 4px; }
  .term__title { display: none; }
}

/* ───────────── LIVE CHAT (real inference) ───────────── */
.chat {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  overflow: hidden;
}
.chat__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.chat__tier { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); }
.chat__tier span { font-family: var(--font-pixel, monospace); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.chat__tier select {
  background: var(--bg); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer;
}
.chat__status { font-size: 12.5px; color: var(--ink-3); text-align: right; min-height: 16px; }
.chat__out {
  min-height: 120px; max-height: 360px; overflow-y: auto;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  font-size: 14.5px; line-height: 1.55;
}
.pc-msg { padding: 10px 13px; border-radius: 10px; max-width: 86%; white-space: pre-wrap; word-break: break-word; }
.pc-msg.pc-u { align-self: flex-end; background: rgba(230,181,76,.10); border: 1px solid rgba(230,181,76,.22); color: var(--ink); }
.pc-msg.pc-a { align-self: flex-start; background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--ink-2); }
.pc-msg.pc-err { align-self: flex-start; background: rgba(255,90,90,.08); border: 1px solid rgba(255,90,90,.25); color: #ff9b9b; font-size: 13px; }
.chat__topup {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--line); background: rgba(255,255,255,.015); font-size: 13px; color: var(--ink-3);
}
.chat__pay {
  background: var(--bg); color: var(--gold-2); border: 1px solid rgba(230,181,76,.3);
  border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; transition: .2s;
}
.chat__pay:hover { border-color: var(--gold); background: rgba(230,181,76,.08); }
.chat__pay:disabled { opacity: .5; cursor: default; }
.chat__bar { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); }
.chat__input {
  flex: 1; resize: none; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 14px; line-height: 1.5;
}
.chat__input:focus { outline: none; border-color: rgba(230,181,76,.45); }
.chat__send { white-space: nowrap; align-self: stretch; }
.chat__note { padding: 0 16px 14px; margin: 0; font-size: 12px; color: var(--ink-4); }
@media (max-width: 620px) {
  .chat__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .chat__status { text-align: left; }
}

/* ───────────── FOOTER LINKS ───────────── */
.footer__links { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 2px; }
.footer__links a {
  font-family: var(--font-pixel, monospace); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-2); border: 1px solid rgba(230,181,76,.28);
  padding: 6px 12px; border-radius: 8px; transition: .2s; white-space: nowrap;
}
.footer__links a:hover { border-color: var(--gold); background: rgba(230,181,76,.08); color: var(--gold); }