:root{
  --bg:#0d0f14;
  --bg2:#12141a;
  --panel:#17181d;
  --ink:#f3dfbe;
  --muted:#a9957e;
  --gold:#e6a63b;
  --gold2:#f0bd59;
  --cream:#f4d9ae;
  --line:rgba(244,217,174,.16);
  --dark:#1d1714;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 76% 24%, rgba(230,166,59,.055), transparent 26%),
    linear-gradient(180deg,var(--bg),#090b0f 100%);
  color:var(--ink);
  font-family:"Courier New",Courier,monospace;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.noise{
  position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.035;
  background-image:radial-gradient(#fff .65px,transparent .65px);
  background-size:8px 8px;
}
.pixels i{
  position:fixed;z-index:5;pointer-events:none;
  width:6px;height:6px;background:var(--gold2);opacity:.65;
  animation:blink 3s steps(2,end) infinite;
}
.pixels i:nth-child(1){left:7%;top:20%}
.pixels i:nth-child(2){left:18%;top:54%;animation-delay:.7s}
.pixels i:nth-child(3){left:37%;top:12%;animation-delay:1.2s}
.pixels i:nth-child(4){left:54%;top:43%;animation-delay:.3s}
.pixels i:nth-child(5){left:69%;top:17%;animation-delay:1.8s}
.pixels i:nth-child(6){left:82%;top:63%;animation-delay:1.1s}
.pixels i:nth-child(7){left:91%;top:28%;animation-delay:.4s}
.pixels i:nth-child(8){left:58%;top:77%;animation-delay:2s}
@keyframes blink{0%,60%{opacity:.18}61%,100%{opacity:.72}}

.topbar{
  position:fixed;z-index:60;top:18px;left:24px;right:24px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:12px 14px 12px 18px;
  border:1px solid rgba(244,217,174,.11);
  background:rgba(13,15,20,.70);
  backdrop-filter:blur(14px);
}
.brand{
  font-size:21px;font-weight:900;letter-spacing:.12em;
  color:var(--cream);
  text-shadow:3px 3px 0 rgba(230,166,59,.13);
}
.topbar nav{
  display:flex;gap:26px;
  font-size:11px;font-weight:700;letter-spacing:.15em;
}
.topbar nav a{color:#c9baa8}
.topbar nav a:hover{color:var(--cream)}
.top-buy{
  justify-self:end;
  padding:11px 18px;
  border:1px solid var(--gold);
  background:var(--gold2);
  color:#1d1714;
  font-size:11px;font-weight:900;letter-spacing:.08em;
  box-shadow:4px 4px 0 #5e451f;
}
.hero{
  position:relative;
  min-height:100svh;
  display:grid;grid-template-columns:1.08fr .92fr;
  align-items:center;
  gap:4vw;
  padding:112px 7vw 52px;
  overflow:hidden;
}
.hero-copy{position:relative;z-index:10;max-width:760px}
.kicker{
  margin:0 0 18px;
  color:#c2ae94;
  font-size:13px;font-weight:700;letter-spacing:.22em;
}
.hero h1{
  margin:0;
  font-size:clamp(78px,12vw,178px);
  line-height:.77;
  letter-spacing:-.085em;
  font-weight:1000;
  color:var(--cream);
  text-shadow:7px 7px 0 #2a2017;
}
.hero h1 span{color:var(--gold2)}
.sub{
  max-width:650px;margin:30px 0 0;
  color:#cdbba4;font-size:17px;line-height:1.75;
}
.actions{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:28px;
}
.btn{
  min-width:118px;
  padding:15px 20px;
  border:1px solid #766552;
  background:#111318;
  color:var(--cream);
  text-align:center;
  font-size:12px;font-weight:900;letter-spacing:.10em;
  transition:.15s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #392c20}
.btn.primary{
  background:var(--gold2);
  border-color:var(--gold2);
  color:#1d1714;
  box-shadow:4px 4px 0 #6a4a1d;
}
.btn.square{min-width:54px}
.is-disabled{opacity:.42;cursor:default}
.ticker-line{
  display:flex;flex-wrap:wrap;align-items:center;gap:11px;
  margin-top:28px;
  color:#8f7e6c;
  font-size:11px;letter-spacing:.12em;
}
.ticker-line strong{color:var(--cream);font-size:13px}
.ticker-line b{color:#5c5146}

.ape-stage{
  position:relative;z-index:8;
  min-height:730px;
  display:flex;align-items:flex-end;justify-content:center;
}
.ape{
  width:min(100%,505px);
  height:auto;
  object-fit:contain;
  image-rendering:pixelated;
  animation:ape-idle 4.6s ease-in-out infinite;
  filter:saturate(.82) contrast(1.03);
}
.ape-shadow{
  position:absolute;bottom:52px;
  width:320px;height:42px;border-radius:50%;
  background:rgba(0,0,0,.46);
  filter:blur(12px);
  animation:shadow-idle 4.6s ease-in-out infinite;
}
@keyframes ape-idle{
  0%,100%{transform:translateY(0) rotate(-.25deg)}
  50%{transform:translateY(-8px) rotate(.35deg)}
}
@keyframes shadow-idle{
  0%,100%{transform:scaleX(1);opacity:.55}
  50%{transform:scaleX(.92);opacity:.38}
}
.float-pixel{
  position:absolute;width:7px;height:7px;background:var(--gold2);
  animation:pixel-float 5s steps(4,end) infinite;
}
.float-pixel.one{left:14%;top:34%}
.float-pixel.two{right:10%;top:48%;animation-delay:1.5s}
.float-pixel.three{left:28%;bottom:21%;animation-delay:2.4s}
@keyframes pixel-float{
  0%,100%{transform:translateY(0);opacity:.2}
  50%{transform:translateY(-16px);opacity:.75}
}
.pixel-horizon{
  position:absolute;left:0;right:0;bottom:0;height:170px;z-index:1;
  display:flex;align-items:flex-end;gap:0;
  opacity:.45;
}
.pixel-horizon i{flex:1;background:#17171b}
.pixel-horizon i:nth-child(1){height:62%}
.pixel-horizon i:nth-child(2){height:38%}
.pixel-horizon i:nth-child(3){height:74%}
.pixel-horizon i:nth-child(4){height:45%}
.pixel-horizon i:nth-child(5){height:84%}
.pixel-horizon i:nth-child(6){height:52%}
.pixel-horizon i:nth-child(7){height:68%}
.pixel-horizon i:nth-child(8){height:33%}

.about{
  display:grid;grid-template-columns:.3fr .9fr 1.15fr;
  gap:34px;align-items:start;
  padding:110px 7vw;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#101217;
}
.about-number{
  font-size:clamp(72px,10vw,150px);
  color:#211b17;
  -webkit-text-stroke:1px #5a4732;
  font-weight:1000;line-height:.75;
}
.label{
  margin:0 0 16px;color:var(--gold2);
  font-size:11px;font-weight:900;letter-spacing:.20em;
}
.about h2{
  margin:0;
  font-size:clamp(40px,5.8vw,86px);
  line-height:.84;letter-spacing:-.05em;
  color:var(--cream);
}
.about-copy{color:#aa9987;font-size:17px;line-height:1.75}
.about-copy p{margin:0 0 18px}

.statement{
  padding:100px 7vw;
  background:#e8c894;
  color:#19140f;
}
.tiny{
  display:block;margin-bottom:30px;
  font-size:11px;font-weight:900;letter-spacing:.22em;
}
.statement-line{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:20px;padding:22px 0;border-top:2px solid rgba(25,20,15,.22);
}
.statement-line:last-child{border-bottom:2px solid rgba(25,20,15,.22)}
.statement-line strong{
  font-size:clamp(32px,5vw,72px);
  line-height:.9;letter-spacing:-.04em;
}
.statement-line em{
  font-style:normal;
  font-size:clamp(32px,5vw,72px);
  color:#7b4e17;font-weight:1000;
}

.contract{
  padding:86px 7vw 72px;
  background:#0b0d11;
}
.contract-head{
  display:flex;justify-content:space-between;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
  color:#867664;font-size:11px;font-weight:900;letter-spacing:.20em;
}
.contract-row{
  display:grid;grid-template-columns:1fr auto;gap:18px;
  align-items:center;padding:30px 0 38px;
  border-bottom:1px solid var(--line);
}
.contract-row code{
  font-family:inherit;
  font-size:clamp(24px,4.2vw,58px);
  font-weight:900;letter-spacing:-.04em;
  color:var(--cream);
  white-space:nowrap;overflow:auto;
}
.contract-row button{
  border:1px solid #715831;
  background:var(--gold2);
  color:#1b150e;
  padding:14px 20px;
  font-weight:900;cursor:pointer;
  box-shadow:4px 4px 0 #3c2b17;
}
.bottom-actions{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;margin-top:28px;
}
.bottom-actions a{
  padding:16px 18px;
  border:1px solid #3c332a;
  color:#cdbba4;
  font-size:12px;font-weight:900;letter-spacing:.08em;
  text-align:center;
}
.bottom-actions a:hover{border-color:var(--gold);color:var(--cream)}

footer{
  display:flex;justify-content:space-between;gap:18px;
  padding:18px 7vw;
  border-top:1px solid #29231d;
  background:#090b0e;
  color:#6f6254;
  font-size:10px;font-weight:900;letter-spacing:.20em;
}

@media(max-width:980px){
  .topbar{left:10px;right:10px;top:10px;grid-template-columns:1fr auto}
  .topbar nav{display:none}
  .hero{grid-template-columns:1fr;padding:118px 22px 30px}
  .hero-copy{max-width:none}
  .ape-stage{min-height:620px}
  .ape{width:min(78vw,490px)}
  .about{grid-template-columns:1fr;padding:82px 22px}
  .about-number{display:none}
  .statement,.contract{padding-left:22px;padding-right:22px}
}
@media(max-width:560px){
  .brand{font-size:16px}
  .top-buy{padding:9px 12px;font-size:9px}
  .hero h1{font-size:68px}
  .kicker{font-size:11px;line-height:1.5}
  .sub{font-size:15px}
  .actions .btn{flex:1 1 calc(50% - 6px);min-width:0}
  .ape-stage{min-height:520px}
  .ape{width:min(92vw,430px)}
  .statement-line strong,.statement-line em{font-size:31px}
  .contract-row{grid-template-columns:1fr}
  .contract-row code{font-size:23px}
  .contract-row button{width:100%}
  .bottom-actions{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ape,.ape-shadow,.float-pixel,.pixels i{animation:none}
}

/* v2: character is transparent, so there is no rectangular image background */
.hero,
.ape-stage {
  background: transparent;
}