*{box-sizing:border-box}
:root{
  --bg:#090b10;
  --panel:#11151d;
  --text:#f7f1df;
  --muted:#aaa89f;
  --gold:#ffbf3f;
  --orange:#ff6b2c;
  --line:#252a34;
  --shadow:0 28px 80px rgba(0,0,0,.35);
}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 80% 10%, rgba(255,107,44,.12), transparent 24rem),
    radial-gradient(circle at 10% 20%, rgba(255,191,63,.08), transparent 24rem),
    var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(1120px,calc(100% - 40px));margin-inline:auto;position:relative;z-index:2}
.pixel-grid{
  position:fixed;inset:0;pointer-events:none;opacity:.12;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,black,transparent 85%);
}
.nav{height:88px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-weight:800}
.brand-mark{
  font-family:"Press Start 2P",monospace;
  background:var(--gold);color:#1b1305;
  padding:10px 9px;font-size:12px;box-shadow:4px 4px 0 var(--orange)
}
.nav-cta{font-weight:700;border-bottom:2px solid var(--gold);padding-bottom:4px}

.hero{
  min-height:700px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:64px;
  align-items:center;
  padding:50px 0 90px;
}
.eyebrow{
  color:var(--gold);
  font-family:"Press Start 2P",monospace;
  font-size:11px;line-height:1.8;letter-spacing:.02em
}
h1{
  font-family:"Press Start 2P",monospace;
  font-size:clamp(48px,7vw,86px);
  line-height:1.02;margin:20px 0 28px;letter-spacing:-.04em
}
h1 span{color:var(--orange)}
.lead{font-size:19px;line-height:1.7;color:#d5d2c9;max-width:680px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 22px;font-weight:800;border:1px solid var(--line);
  transition:.2s transform,.2s box-shadow,.2s background
}
.btn:hover{transform:translateY(-2px)}
.primary{background:var(--gold);color:#171005;border-color:var(--gold);box-shadow:6px 6px 0 var(--orange)}
.secondary{background:#11151d}
.large{min-height:62px;padding:0 30px}
.small-note{font-size:12px;color:#767a84;margin-top:18px;max-width:560px;line-height:1.6}

.hero-card{
  aspect-ratio:1/1;
  background:linear-gradient(145deg,#202838,#10141c);
  border:1px solid #333a47;box-shadow:var(--shadow);
  position:relative;overflow:hidden;isolation:isolate
}
.hero-card:before,.hero-card:after{
  content:"";position:absolute;background:#fff;opacity:.04
}
.hero-card:before{inset:10% 0 auto 0;height:1px;box-shadow:0 80px #fff,0 160px #fff,0 240px #fff,0 320px #fff}
.hero-card:after{inset:0 auto 0 10%;width:1px;box-shadow:80px 0 #fff,160px 0 #fff,240px 0 #fff,320px 0 #fff}
.sun{position:absolute;width:190px;height:190px;background:var(--gold);border-radius:50%;right:44px;top:42px;filter:saturate(.9)}
.card-label{position:absolute;bottom:22px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:end;border-top:1px solid #ffffff22;padding-top:14px;font-size:11px;color:#c9c6bd}
.card-label strong{font-family:"Press Start 2P";font-size:17px;color:var(--gold)}

.rooster{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:240px;height:260px}
.head{position:absolute;width:82px;height:82px;background:#f1e2b7;left:92px;top:38px;box-shadow:8px 8px 0 #bfa46e}
.eye{position:absolute;width:12px;height:12px;background:#111;right:16px;top:20px;box-shadow:0 0 0 4px #fff}
.beak{position:absolute;width:34px;height:20px;background:var(--gold);right:-28px;top:43px;clip-path:polygon(0 0,100% 50%,0 100%)}
.comb{position:absolute;background:var(--orange);width:28px;height:28px;top:12px;z-index:2}
.c1{left:103px}.c2{left:132px;top:4px}
.body{position:absolute;width:128px;height:116px;background:#e7d8b0;left:62px;top:104px;box-shadow:10px 10px 0 #a98f62}
.wing{position:absolute;width:72px;height:58px;background:#ba8b51;left:84px;top:128px;transform:skew(-8deg)}
.tail{position:absolute;width:76px;height:28px;background:#8d3f2d;left:16px;transform-origin:right center}
.t1{top:118px;transform:rotate(-18deg)}.t2{top:146px;transform:rotate(14deg);background:#c3532e}
.leg{position:absolute;width:9px;height:52px;background:var(--gold);top:216px}.l1{left:98px}.l2{left:146px}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-bottom:110px}
.stats article{background:var(--panel);border:1px solid var(--line);padding:28px;min-height:210px}
.stat-label{font-size:11px;font-weight:800;color:var(--gold);letter-spacing:.12em}
.stats strong{display:block;font-family:"Press Start 2P";font-size:26px;margin:18px 0}
.stats p{color:var(--muted);line-height:1.6;margin:0}

.about{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:110px 0;border-top:1px solid var(--line)}
h2{font-size:clamp(34px,4.6vw,58px);line-height:1.05;margin:14px 0}
.about-text{font-size:18px;line-height:1.8;color:#cbc8c0}
.about-text p:first-child{margin-top:0}

.mint-box{
  margin-bottom:100px;padding:44px;
  border:1px solid var(--line);
  background:linear-gradient(120deg,rgba(255,191,63,.11),rgba(255,107,44,.08));
  display:flex;align-items:center;justify-content:space-between;gap:30px
}
.mint-box p{color:#c7c3ba}
.footer{border-top:1px solid var(--line);padding:30px 0 50px;display:flex;justify-content:space-between;color:#777b85;font-size:13px}

@media (max-width:850px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:30px}
  .hero-card{width:min(520px,100%);margin:auto}
  .stats{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:22px;padding:80px 0}
  .mint-box{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .wrap{width:min(100% - 26px,1120px)}
  .nav{height:74px}
  .brand span:last-child{display:none}
  h1{font-size:42px}
  .lead{font-size:17px}
  .hero{gap:34px;padding-bottom:70px}
  .stats{padding-bottom:70px}
  .mint-box{padding:28px}
  .footer{flex-direction:column;gap:8px}
}


/* Hero NFT preview now uses the user's animated GIF */
.hero-card{
  background:#171a22;
}
.hero-gif{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:pixelated;
  display:block;
}
.hero-card::before,
.hero-card::after,
.hero-card .sun,
.hero-card .rooster{
  display:none !important;
}
.card-label{
  z-index:3;
  background:linear-gradient(to top, rgba(9,11,16,.82), rgba(9,11,16,0));
  left:0;
  right:0;
  bottom:0;
  padding:55px 22px 22px;
  border-top:0;
}


.mint-details{
  padding:0 0 80px;
}
.mint-details-head{
  margin-bottom:24px;
}
.mint-details-head h2{
  margin-bottom:0;
}
.mint-details-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.mint-detail-card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:24px;
  min-height:150px;
}
.mint-detail-card span{
  display:block;
  color:var(--gold);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  margin-bottom:14px;
}
.mint-detail-card strong{
  display:block;
  font-family:"Press Start 2P",monospace;
  font-size:20px;
  line-height:1.4;
}
.mint-detail-card p{
  margin:10px 0 0;
  color:var(--muted);
}
@media (max-width:850px){
  .mint-details-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .mint-details-grid{grid-template-columns:1fr}
}