/* ============ */
/*  BASE STYLES  */
/* ============ */
:root{
  --ink:#0b0b0b;
  --sky1:#cfe9ff;
  --sky2:#eef8ff;
  --card:#ffffffc9;
  --btn:#f1cf43;
  --btn2:#ffd75a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 50% 20%, var(--sky2), transparent 60%),
    linear-gradient(180deg, var(--sky1), #bfe0ff 55%, #b5dcff);
}

/* soft clouds */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:48px 20px 56px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(closest-side at 20% 20%, #ffffffcc, transparent 70%),
    radial-gradient(closest-side at 70% 15%, #ffffffc8, transparent 72%),
    radial-gradient(closest-side at 85% 35%, #ffffffc3, transparent 75%),
    radial-gradient(closest-side at 30% 55%, #ffffffc6, transparent 74%),
    radial-gradient(closest-side at 75% 70%, #ffffffbf, transparent 76%);
  filter: blur(2px);
  opacity:.85;
  pointer-events:none;
}

/* ============ */
/*     CARD     */
/* ============ */
.card{
  width:min(1140px, 100%);
  border:6px solid var(--ink);
  border-radius:28px;
  background:linear-gradient(180deg, #ffffffb8, #ffffffa6);
  box-shadow:0 10px 0 #00000010;
  position:relative;
  z-index:1;
}
.card__inner{
  padding:44px 54px 30px;
  position:relative;
}

/* top-right little label */
.brand{
  position:absolute;
  top:18px;
  right:28px;
  font-family:"Luckiest Guy", system-ui;
  font-size:34px;
  letter-spacing:1px;
  color:#ffffff;
  -webkit-text-stroke:4px var(--ink);
  text-shadow:0 4px 0 #00000022;
  transform: rotate(-2deg);
}

.grid{
  display:grid;
  grid-template-columns: 1.05fr 1.25fr;
  gap:40px;
  align-items:center;
  padding-top:18px;
}

/* left */
.title{
  margin:0 0 18px;
  font-family:"Luckiest Guy", system-ui;
  font-size:74px;
  line-height:0.95;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#111;
  text-shadow:0 6px 0 #00000018;
}
.title span{display:block}

.sub{
  margin:0 0 24px;
  font-weight:800;
  font-size:12px;
  line-height:1.35;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#151515;
  opacity:.9;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:190px;
  height:56px;
  background:linear-gradient(180deg, var(--btn2), var(--btn));
  border:4px solid var(--ink);
  border-radius:10px;
  text-decoration:none;
  color:var(--ink);
  font-family:Inter, system-ui;
  font-weight:900;
  letter-spacing:.4px;
  box-shadow:0 6px 0 #0000002a;
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:active{
  transform: translateY(4px);
  box-shadow:0 2px 0 #0000002a;
}

/* right */
.right{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:360px;
}
.character{
  width:min(520px, 100%);
  height:auto;
  display:block;
  filter: drop-shadow(0 10px 0 #00000018);
}

/* bottom row in card */
.meta{
  margin-top:12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}

.social{
  display:flex;
  gap:10px;
  align-items:center;
  padding-left:6px;
}
.icon{
  width:46px;
  height:40px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, var(--btn2), var(--btn));
  border:4px solid var(--ink);
  border-radius:8px;
  text-decoration:none;
  color:var(--ink);
  font-weight:900;
  box-shadow:0 6px 0 #00000022;
}
.icon span{
  font-size:18px;
  transform: translateY(-1px);
}

.ca{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.ca__label{
  font-size:14px;
}
.ca__value{
  font-size:18px;
}
.copy{
  width:40px;
  height:36px;
  border:4px solid var(--ink);
  border-radius:10px;
  background:#ffffff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 6px 0 #00000022;
}
.copy:active{
  transform: translateY(4px);
  box-shadow:0 2px 0 #00000022;
}

/* ============ */
/*   SUPPLY     */
/* ============ */
.supply{
  margin-top:34px;
  text-align:center;
  z-index:1;
}
.supply__label{
  font-family:"Luckiest Guy", system-ui;
  letter-spacing:1px;
  font-size:22px;
  color:#111;
  text-shadow:0 4px 0 #00000010;
}
.supply__value{
  margin-top:6px;
  font-family:"Luckiest Guy", system-ui;
  font-size:64px;
  letter-spacing:2px;
  color:#111;
  text-shadow:0 8px 0 #00000018;
}

/* ============ */
/*  RESPONSIVE  */
/* ============ */
@media (max-width: 980px){
  .card__inner{padding:38px 28px 26px}
  .grid{grid-template-columns:1fr; gap:18px}
  .brand{top:14px; right:18px; font-size:30px}
  .title{font-size:64px}
  .right{min-height:260px}
  .meta{flex-direction:column; align-items:flex-start}
}

@media (max-width: 480px){
  .title{font-size:54px}
  .btn{width:170px}
  .supply__value{font-size:52px}
  .icon{width:44px}
}


/* === FIX SOCIAL ICONS === */
.social {
  display: flex;
  gap: 14px;
  align-items: center;
}

.icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0;
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border-radius: 12px;
}

.icon:hover {
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(255,255,255,.25),
              0 0 24px rgba(255,255,255,.15);
}

.icon:focus,
.icon:active {
  outline: none !important;
  box-shadow: none !important;
}

a {
  -webkit-tap-highlight-color: transparent;
}


/* actions row (Mint + Claim) */
.actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.btn--secondary{
  background:linear-gradient(180deg, #ffffff, #f2f2f2);
}
.btn--secondary:hover{filter:brightness(.98)}