@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@500;700;800;900&display=swap');

*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  color:#fff;
  background:#f3ecdf;
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}
.color-bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 12% 17%, rgba(37,173,116,.55), transparent 18%),
    radial-gradient(circle at 31% 13%, rgba(239,70,66,.48), transparent 16%),
    radial-gradient(circle at 50% 10%, rgba(255,193,65,.58), transparent 17%),
    radial-gradient(circle at 68% 16%, rgba(255,145,181,.55), transparent 18%),
    radial-gradient(circle at 88% 14%, rgba(77,93,190,.54), transparent 20%),
    radial-gradient(circle at 23% 78%, rgba(74,169,206,.28), transparent 28%),
    radial-gradient(circle at 78% 82%, rgba(255,210,68,.24), transparent 28%),
    linear-gradient(135deg,#f8f1e7,#eee4d4 48%,#f6eadb);
  z-index:-5;
}
.color-bg:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(20,20,20,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,20,20,.04) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:.55;
}
.color-bg:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.12), transparent 38%),
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 22%, transparent 78%, rgba(0,0,0,.18));
  pointer-events:none;
}
.page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:38px 18px 28px;
}
.hero{
  width:min(850px,100%);
  text-align:center;
}
.supply{
  margin:0 0 8px;
  color:rgba(30,30,30,.58);
  letter-spacing:6px;
  font-size:12px;
  font-weight:1000;
}
h1{
  margin:0;
  font-family:"Archivo Black",Inter,sans-serif;
  font-size:clamp(48px,7vw,78px);
  line-height:.82;
  letter-spacing:-4px;
  color:#fff;
  text-shadow:0 7px 0 #111, 0 18px 40px rgba(0,0,0,.18);
}
.sub{
  margin:20px 0 28px;
  color:rgba(35,35,35,.68);
  font-size:18px;
  font-weight:900;
}
.layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:18px;
  align-items:stretch;
}
.image-card,.mint-card{
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  background:rgba(23,23,23,.74);
  backdrop-filter:blur(16px);
  box-shadow:0 22px 70px rgba(0,0,0,.22);
}
.image-card{
  padding:14px;
  overflow:hidden;
}
.image-card img{
  width:100%;
  aspect-ratio:1/1;
  display:block;
  object-fit:cover;
  border-radius:14px;
}
.card-footer{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 2px 0;
  font-size:14px;
}
.card-footer span{color:#cfcfcf}
.mint-card{
  padding:38px 28px 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.15);
  font-size:18px;
}
.row span{
  color:#c8c8c8;
  font-weight:1000;
  letter-spacing:1px;
}
.row b{
  color:#fff;
  font-size:18px;
}
.counter{
  display:flex;
  justify-content:center;
  gap:12px;
  margin:26px 0 22px;
}
.counter button,.counter input{
  height:50px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
  color:#fff;
  text-align:center;
  font-size:24px;
  font-weight:1000;
}
.counter button{
  width:58px;
  cursor:pointer;
}
.counter input{
  width:100px;
}
.main-btn{
  width:100%;
  height:58px;
  border:0;
  border-radius:16px;
  background:#fff;
  color:#111;
  font-size:14px;
  font-weight:1000;
  letter-spacing:2px;
  cursor:pointer;
}
.hiddenBtn{display:none}
#wallet,#status{
  margin:14px 0 0;
  color:#d5d5d5;
  font-size:12px;
}
.links{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:22px;
}
.links a{
  min-width:120px;
  height:48px;
  display:grid;
  place-items:center;
  color:#fff;
  text-decoration:none;
  font-weight:1000;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  background:rgba(23,23,23,.66);
  backdrop-filter:blur(12px);
  box-shadow:0 12px 35px rgba(0,0,0,.18);
}
.modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.74);
  z-index:60;
}
.hidden{display:none}
.modal-card{
  width:min(390px,92vw);
  background:#242424;
  border:1px solid rgba(255,255,255,.15);
  border-radius:22px;
  padding:24px;
  position:relative;
}
.modal-card h3{margin:0 0 12px}
.modal-card button{
  width:100%;
  height:50px;
  margin-top:10px;
  border:0;
  border-radius:12px;
  background:#fff;
  color:#111;
  font-weight:1000;
  cursor:pointer;
}
.close{
  position:absolute;
  right:12px;
  top:8px;
  width:34px!important;
  height:34px!important;
  background:transparent!important;
  color:#fff!important;
  font-size:24px;
}
@media(max-width:760px){
  .layout{grid-template-columns:1fr}
  .hero{width:min(420px,100%)}
  .page{padding-top:28px}
  h1{letter-spacing:-2px}
}