:root {
  --bg: #0d1117;
  --panel: #101f14;
  --ink: #f2f5f3;
  --muted: #93a09a;
  --line: rgba(255, 255, 255, .13);
  --green: #00c805;
  --cyan: #00e5ff;
  --magenta: #ff3daf;
  --yellow: #ffd60a;
  --display: "Big Shoulders Display", Impact, sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--mono); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 20; background: var(--green); color: #001d02; padding: .75rem 1rem; font-weight: 700; }
.skip-link:focus { top: 1rem; }

.site-header { height: 78px; padding: 0 clamp(1.25rem, 4vw, 4.5rem); display: flex; align-items: center; gap: 3rem; border-bottom: 1px solid transparent; position: fixed; inset: 0 0 auto; z-index: 8; width: 100%; transition: background-color .3s ease, border-color .3s ease; }
.site-header.is-scrolled { background: #0d1117; border-color: var(--line); }
.brand { display: flex; flex-shrink: 0; white-space: nowrap; align-items: center; gap: .8rem; font-family: var(--display); font-size: 1.45rem; font-weight: 800; letter-spacing: .05em; }
.brand-logo { width: 34px; height: 34px; object-fit: cover; image-rendering: pixelated; border: 1px solid rgba(255, 255, 255, .2); }
nav { display: flex; gap: 2rem; margin-left: auto; }
nav a { position: relative; white-space: nowrap; isolation: isolate; padding: .65rem .15rem; color: var(--muted); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; transition: color .25s ease; }
nav a::after { content: ""; position: absolute; right: 0; bottom: .25rem; left: 0; height: 2px; background: var(--green); box-shadow: 0 0 10px rgba(0, 200, 5, .75); transform: scaleX(0); transform-origin: right; transition: transform .3s ease; }
nav a:hover, nav a:focus-visible, nav a.is-active { color: var(--green); }
nav a:hover::after, nav a:focus-visible::after, nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.network { white-space: nowrap; font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; border-left: 1px solid var(--line); padding-left: 2rem; }
.socials { display: flex; gap: .5rem; }
.social-link { display: grid; place-items: center; padding: .35rem; opacity: .7; transition: opacity .2s; }
.social-link:hover, .social-link:focus-visible { opacity: 1; }
.network-dot { display: inline-block; width: 6px; height: 6px; margin-right: .55rem; background: var(--green); border-radius: 50%; box-shadow: 0 0 10px var(--green); }

.hero { position: relative; min-height: 810px; height: 100svh; overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; padding: 120px clamp(1.25rem, 7vw, 8rem) 65px; }
.hero::after { content: ""; position: absolute; width: 45vw; height: 45vw; min-width: 450px; min-height: 450px; border-radius: 50%; right: -10vw; top: 8%; background: rgba(0, 200, 5, .08); filter: blur(100px); }
.hero-grid { position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to right, #000, transparent 78%); }
.hero-copy { position: relative; z-index: 2; max-width: 790px; }
.eyebrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; color: var(--green); font-size: .64rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; border-top: 1px solid rgba(0, 200, 5, .45); padding-top: .75rem; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 700; line-height: .82; letter-spacing: -.025em; text-transform: uppercase; }
h1 { margin-top: 2.2rem; font-size: clamp(5rem, 9vw, 10rem); }
h1 span, h2 span { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.hero-text { max-width: 610px; color: #b9c3be; font-size: clamp(.82rem, 1.2vw, 1rem); line-height: 1.9; margin: 2.6rem 0 2.25rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.button { min-width: 205px; padding: 1rem 1.2rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; display: flex; justify-content: center; border: 1px solid var(--line); }
.button-primary { color: #001e03; background: var(--green); border-color: var(--green); transition: transform .2s, box-shadow .2s; }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0, 200, 5, .2); }
.button-muted { color: #aab5af; transition: color .2s, border-color .2s; }
.button-muted:hover { color: var(--ink); border-color: rgba(255, 255, 255, .35); }
.button-opensea { align-items: center; gap: .6rem; }
.hero-art { width: min(33vw, 510px); position: relative; z-index: 2; justify-self: end; margin: 0; }
.art-frame { position: relative; padding: clamp(.55rem, 1.2vw, 1rem); border: 1px solid var(--line); background: rgba(13, 17, 23, .6); box-shadow: 0 28px 70px rgba(0, 0, 0, .5); }
.art-frame picture { display: block; }
.art-frame img { width: 100%; aspect-ratio: 1; image-rendering: pixelated; }
.corner { position: absolute; width: 16px; height: 16px; border-color: var(--green); }
.corner-tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }.corner-tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }.corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }.corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.hero-art figcaption { display: flex; justify-content: space-between; color: var(--muted); font-size: .55rem; letter-spacing: .08em; margin-top: .75rem; }
.hero-art figcaption strong { color: var(--ink); }
.hero-index { position: absolute; bottom: 1.8rem; left: clamp(1.25rem, 4vw, 4.5rem); display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .55rem; }
.hero-index i { display: block; width: 110px; height: 1px; background: linear-gradient(90deg, var(--green) 25%, var(--line) 25%); }

.ticker { overflow: hidden; border-block: 1px solid var(--line); background: var(--green); color: #001602; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.ticker-track { width: max-content; display: flex; animation: ticker 28s linear infinite; font-size: .67rem; font-weight: 800; letter-spacing: .08em; }
.ticker-group { min-width: 100vw; display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 3rem; padding: .78rem 3rem; white-space: nowrap; }
.ticker i { flex: 0 0 5px; width: 5px; height: 5px; background: currentColor; transform: rotate(45deg); }
@keyframes ticker { to { transform: translateX(-50%); } }

.section { min-height: calc(100svh - 64px); padding: clamp(6rem, 11vw, 10rem) clamp(1.25rem, 7vw, 8rem); border-bottom: 1px solid var(--line); }
main > section[id] { scroll-margin-top: 78px; }
.system { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(4rem, 10vw, 12rem); align-items: end; align-content: center; }
.section-heading h2, .collection h2, .rare h2 { margin-top: 2rem; font-size: clamp(4.2rem, 8vw, 8.5rem); }
.system-copy > p, .collection-copy > p, .rare-copy > p { color: #aab5af; line-height: 1.9; font-size: .84rem; }
.system-copy dl { margin: 3rem 0 0; border-top: 1px solid var(--line); }
.system-copy dl div { display: flex; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--line); }
dt { color: var(--muted); font-size: .62rem; } dd { margin: 0; font-weight: 700; font-size: .7rem; }

.collection { display: grid; grid-template-columns: minmax(280px, .8fr) 1.2fr; padding-left: 0; gap: clamp(3rem, 8vw, 9rem); align-items: center; background: #0b1210; }
.collection-image { height: 900px; max-height: 86vh; position: relative; overflow: hidden; border-right: 1px solid var(--line); }
.collection-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, transparent 55%, #0b1210), linear-gradient(to top, #0b1210, transparent 20%); }
.collection-image img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; opacity: .85; }
.scanline { position: absolute; z-index: 2; inset: 0; height: 2px; background: rgba(0, 229, 255, .8); box-shadow: 0 0 20px var(--cyan); animation: scan 7s ease-in-out infinite; }
@keyframes scan { 0%, 100% { top: 5%; } 50% { top: 95%; } }
.collection-copy { max-width: 800px; }
.collection-copy > p { max-width: 630px; }
.principles { margin-top: 4rem; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.principles article { padding: 1.5rem 1.4rem 0 0; border-right: 1px solid var(--line); min-height: 180px; }
.principles article + article { padding-left: 1.4rem; }
.principles article:last-child { border: 0; }
.principles span { color: var(--green); font-size: .58rem; }.principles h3 { font-family: var(--display); font-size: 1.6rem; margin: 1.4rem 0 .6rem; }.principles p { color: var(--muted); font-size: .65rem; line-height: 1.7; }

.marketplace { background: #0e1b12; }
.marketplace-heading { max-width: 1050px; scroll-margin-top: 110px; }
.marketplace-heading h2 { margin-top: 2rem; font-size: clamp(4.2rem, 8vw, 8.5rem); }
.marketplace-heading > p:last-child { max-width: 720px; color: #aab5af; line-height: 1.9; font-size: .84rem; }
.marketplace-flow { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 5rem; border-block: 1px solid var(--line); }
.marketplace-flow article { position: relative; min-height: 310px; padding: 1.5rem 2rem 2rem 0; border-right: 1px solid var(--line); }
.marketplace-flow article + article { padding-left: 2rem; }
.marketplace-flow article:last-child { border-right: 0; }
.flow-number { color: var(--green); font-size: .6rem; }
.flow-icon { margin: 4rem 0 2.5rem; color: var(--ink); font-size: .73rem; font-weight: 700; letter-spacing: .08em; }
.flow-icon b { color: var(--green); padding: 0 .55rem; font-size: 1.1rem; }
.marketplace-flow h3 { margin: 0 0 .8rem; font-family: var(--display); font-size: 2rem; }
.marketplace-flow p { max-width: 340px; color: var(--muted); font-size: .68rem; line-height: 1.8; }
.marketplace-status { display: flex; justify-content: space-between; gap: 2rem; padding-top: 1.2rem; color: var(--muted); font-size: .56rem; letter-spacing: .08em; }
.marketplace-status span:first-child { color: var(--green); }
.marketplace-status i { display: inline-block; width: 6px; height: 6px; margin-right: .5rem; background: var(--green); border-radius: 50%; box-shadow: 0 0 10px var(--green); }
.fee-model { display: grid; grid-template-columns: .65fr 1.35fr; gap: 3rem; margin-top: 4rem; padding: 2rem; border: 1px solid var(--line); background: rgba(13, 17, 23, .35); }
.fee-total { display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); }
.fee-total span, .fee-split span { color: var(--muted); font-size: .58rem; letter-spacing: .1em; }
.fee-total strong { margin: .6rem 0; color: var(--ink); font-family: var(--display); font-size: 4.5rem; line-height: 1; }
.fee-total small { color: var(--green); font-size: .52rem; letter-spacing: .08em; }
.fee-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.fee-split article { display: flex; flex-direction: column; justify-content: center; }
.fee-split strong { margin: .6rem 0 1.2rem; font-family: var(--display); font-size: 3rem; line-height: 1; }
.fee-split i { display: block; width: 100%; height: 5px; background: var(--fee-color); box-shadow: 0 0 18px color-mix(in srgb, var(--fee-color) 35%, transparent); }
.fee-model > p { grid-column: 2; margin: -1.5rem 0 0; color: #748079; font-size: .55rem; line-height: 1.6; }

.rare { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(4rem, 10vw, 10rem); align-items: center; background: #12121f; }
.rare-copy > p { max-width: 580px; }
.rare-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.rare-cell { padding: .7rem; border: 1px solid var(--line); color: var(--muted); font-size: .57rem; letter-spacing: .08em; }
.rare-cell i { display: block; width: 100%; aspect-ratio: 1; margin-bottom: .8rem; }
.rare-cell span, .rare-cell small { display: block; }.rare-cell small { margin-top: .35rem; color: #68716d; }.ivory i { background: #fff; }.gold i { background: #ffd700; }.magenta i { background: #ff00ff; }

.closing { min-height: calc(100svh - 64px); position: relative; overflow: hidden; display: grid; place-items: center; text-align: center; }
.closing > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; opacity: .25; filter: saturate(.8); }
.closing::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(13,17,23,.25), var(--bg) 75%); }
.closing-overlay { position: relative; z-index: 2; padding: 6rem 1.25rem; }
.closing h2 { font-size: clamp(5rem, 11vw, 11rem); }
.closing-overlay > p:not(.eyebrow) { color: var(--muted); font-size: .75rem; }
.status { display: inline-flex; align-items: center; gap: .6rem; margin-top: 2rem; border: 1px solid var(--line); padding: .8rem 1.1rem; color: var(--green); font-size: .62rem; }
.status i { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 12px var(--green); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

footer { min-height: 100px; padding: 1.5rem clamp(1.25rem, 4vw, 4.5rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .57rem; letter-spacing: .08em; }
footer p { text-align: center; }
.footer-meta { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: .8rem; }
.footer-meta p { margin: 0; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { display: flex; align-items: center; gap: .5rem; transition: color .2s; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--ink); }

@media (max-width: 1180px) {
  .site-header { gap: 1.5rem; } nav { gap: 1.25rem; } .network { font-size: 0; padding-left: 1.25rem; } .network-dot { margin: 0; }
}

@media (max-width: 900px) {
  .site-header { gap: 1rem; }.site-header nav { display: none; }.network { margin-left: auto; border: 0; padding: 0; }
  .hero { height: auto; min-height: 100svh; grid-template-columns: 1fr; gap: 4rem; padding-top: 140px; }
  .hero-art { width: min(78vw, 500px); justify-self: center; }.hero::after { top: 45%; }
  .section, .closing { min-height: auto; }
  .system, .rare { grid-template-columns: 1fr; gap: 3rem; }.rare-cells { max-width: 560px; }.collection { grid-template-columns: 1fr; padding: 0; gap: 0; }.collection-image { height: 650px; border-right: 0; }.collection-copy { padding: 6rem 1.25rem; }
  .marketplace-flow { grid-template-columns: 1fr; }.marketplace-flow article, .marketplace-flow article + article { min-height: auto; padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--line); }.marketplace-flow article:last-child { border-bottom: 0; }.flow-icon { margin: 2.5rem 0 1.5rem; }.marketplace-status { flex-direction: column; gap: .8rem; }
  .fee-model { grid-template-columns: 1fr; }.fee-total { padding-bottom: 2rem; border-right: 0; border-bottom: 1px solid var(--line); }.fee-model > p { grid-column: 1; margin: 0; }
}

@media (max-height: 700px) and (min-width: 901px) {
  .hero { min-height: 100svh; padding-top: 92px; padding-bottom: 28px; }
  h1 { margin-top: 1.2rem; font-size: min(8vw, 15vh); }
  .hero-text { margin-block: 1.4rem; line-height: 1.65; }
  .hero-art { width: min(27vw, 410px); }
  .hero-index { display: none; }
}

@media (max-width: 600px) {
  .site-header { height: 66px; }.network { font-size: 0; }.network-dot { margin: 0; }
  main > section[id] { scroll-margin-top: 66px; }
  .marketplace-heading { scroll-margin-top: 90px; }
  .ticker-group { gap: 2rem; padding-inline: 2rem; }
  .hero { padding-top: 115px; }.hero-copy .eyebrow span:last-child { display: none; } h1 { font-size: clamp(4.2rem, 22vw, 7rem); }
  .hero-art { width: 100%; }.section { padding-block: 5rem; }.section-heading h2, .collection h2, .marketplace-heading h2, .rare h2 { font-size: 4rem; }
  .principles { grid-template-columns: 1fr; }.principles article, .principles article + article { min-height: auto; padding: 1.3rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .rare-cells { gap: .4rem; }.rare-cell { padding: .35rem; font-size: .5rem; }
  .fee-model { padding: 1.25rem; }.fee-split { gap: 1rem; }.fee-total strong { font-size: 3.8rem; }.fee-split strong { font-size: 2.4rem; }
  .closing { min-height: 530px; }.closing h2 { font-size: 4.3rem; }
  footer { display: flex; flex-direction: column; align-items: flex-start; padding-block: 2rem; } footer p { text-align: left; } .footer-meta { align-items: flex-start; } footer p { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}