/* ============ BUILDR — Build the Chain ============ */

:root{
  --buildr-yellow:#facc15;
  --buildr-gold:#f0b90b;
  --buildr-amber:#fbbf24;
  --buildr-orange:#ea580c;
  --buildr-ink:#0a0a0a;
  --buildr-steel:#1a1a1a;
  --buildr-iron:#262626;
}

html,body{ background:#0a0a0a; }

::selection{ background:var(--buildr-yellow); color:#000; }

/* Custom scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#0a0a0a; }
::-webkit-scrollbar-thumb{ background:#facc15; border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:#f0b90b; }

/* ============ CAUTION TAPE ============ */
.caution-tape{
  height:32px;
  background: repeating-linear-gradient(
    -45deg,
    #facc15 0 28px,
    #0a0a0a 28px 56px
  );
  overflow:hidden;
  position:relative;
  border-bottom:3px solid #000;
}
.tape-track{
  display:flex;
  white-space:nowrap;
  animation: tape 28s linear infinite;
  height:100%;
  align-items:center;
}
.tape-track > span{
  display:inline-block;
  padding:0 2rem;
  font-weight:900;
  font-size:.75rem;
  letter-spacing:.25em;
  color:#000;
  text-shadow: 0 0 4px rgba(250,204,21,.6);
  background: rgba(250,204,21,.0);
}
@keyframes tape{
  0%{ transform: translateX(0) }
  100%{ transform: translateX(-50%) }
}

/* ============ NAV ============ */
.nav-link{
  position:relative;
  padding:.25rem 0;
  color:#d4d4d8;
  transition:color .2s;
}
.nav-link:hover{ color:#facc15; }
.nav-link::after{
  content:'';
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:2px;
  background:#facc15;
  transition:width .25s;
}
.nav-link:hover::after{ width:100%; }

/* ============ BACKGROUNDS ============ */
.bg-grid{
  background-image:
    linear-gradient(rgba(250,204,21,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,204,21,.08) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.bg-blueprint{
  background-image:
    linear-gradient(rgba(250,204,21,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,204,21,.4) 1px, transparent 1px),
    linear-gradient(rgba(250,204,21,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,204,21,.2) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}

/* ============ DUST PARTICLES ============ */
.dust-field{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
}
.dust-field span{
  position:absolute;
  display:block;
  width:6px; height:6px;
  background:#facc15;
  border-radius:50%;
  opacity:0;
  filter: blur(1px);
  animation: dust 14s linear infinite;
}
.dust-field span:nth-child(1){ left:5%;  animation-delay: 0s;   width:4px; height:4px; }
.dust-field span:nth-child(2){ left:15%; animation-delay: 2s;   width:8px; height:8px; }
.dust-field span:nth-child(3){ left:30%; animation-delay: 4s;   width:5px; height:5px; }
.dust-field span:nth-child(4){ left:45%; animation-delay: 6s;   width:3px; height:3px; }
.dust-field span:nth-child(5){ left:60%; animation-delay: 1s;   width:7px; height:7px; }
.dust-field span:nth-child(6){ left:75%; animation-delay: 8s;   width:5px; height:5px; }
.dust-field span:nth-child(7){ left:85%; animation-delay: 3s;   width:4px; height:4px; }
.dust-field span:nth-child(8){ left:95%; animation-delay: 5s;   width:6px; height:6px; }

@keyframes dust{
  0%   { transform: translateY(110vh) translateX(0); opacity:0; }
  10%  { opacity:.7; }
  50%  { transform: translateY(50vh) translateX(40px); opacity:.5; }
  90%  { opacity:.3; }
  100% { transform: translateY(-10vh) translateX(-20px); opacity:0; }
}

/* ============ SPARKS ============ */
.sparks{ width:80px; height:80px; }
.sparks span{
  position:absolute; top:50%; left:50%;
  width:4px; height:4px;
  background: #fff;
  border-radius:50%;
  box-shadow: 0 0 8px #facc15, 0 0 14px #fff;
  animation: sparks 1.6s ease-out infinite;
}
.sparks span:nth-child(1){ --x: 40px;  --y:-30px; animation-delay: 0s;   }
.sparks span:nth-child(2){ --x:-35px;  --y:-25px; animation-delay: .3s;  }
.sparks span:nth-child(3){ --x: 30px;  --y: 40px; animation-delay: .6s;  }
.sparks span:nth-child(4){ --x:-40px;  --y: 30px; animation-delay: .9s;  }
@keyframes sparks{
  0%{ transform: translate(-50%,-50%) scale(.4); opacity:1; }
  100%{ transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0); opacity:0; }
}

/* ============ HERO (cinematic) ============ */
.hero-stage{
  min-height: 100vh;
  position:relative;
  isolation:isolate;
}

/* Sun glow behind mascot */
.hero-sun{
  position:absolute;
  right:-10%;
  top:18%;
  width: 700px; height: 700px;
  border-radius:50%;
  background: radial-gradient(circle at center,
    rgba(250,204,21,.55) 0%,
    rgba(250,204,21,.25) 30%,
    rgba(250,204,21,0) 70%);
  filter: blur(20px);
  pointer-events:none;
}
@media (max-width: 1024px){
  .hero-sun{ width:520px; height:520px; right:-30%; top:30%; }
}

/* Crane silhouettes on the edges */
.crane{
  position:absolute;
  width: 180px;
  height: 80%;
  top: 0;
  opacity:.55;
  pointer-events:none;
}
.crane-left{ left: -60px; transform: scaleX(-1); }
.crane-right{ right: -40px; }
@media (max-width: 768px){
  .crane{ display:none; }
}

/* Top status bar (ticker style) */
.hero-statbar{
  position:absolute;
  top: 92px;
  left: 0; right: 0;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap: .65rem;
  font-family:'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing:.18em;
  text-transform: uppercase;
  color: #71717a;
  padding: 0 1rem;
  z-index: 2;
}
.hero-statbar b{ color:#facc15; font-weight:800; margin-left:.3rem; }
.hsb-item{ display:inline-flex; align-items:center; gap:.4rem; }
.hsb-sep{ color: #3f3f46; }
@media (max-width: 640px){
  .hero-statbar{ position: static; margin-top:.75rem; }
}

.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot-live{
  background:#22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94, .7);
  animation: ping 1.6s ease-out infinite;
}
@keyframes ping{
  0%{ box-shadow: 0 0 0 0 rgba(34,197,94,.7); }
  70%{ box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Hero badge */
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem .9rem;
  background:#0d0d0d;
  border:1px solid rgba(250,204,21,.3);
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
  color:#fde047;
  margin-bottom: 1.5rem;
  position:relative;
}
.hero-badge::before{
  content:'';
  position:absolute; inset:-1px;
  background: linear-gradient(135deg, #facc15, transparent 60%);
  border-radius:999px;
  z-index:-1;
  opacity:.4;
}
.badge-bolt{ font-size:1rem; }

/* Hero title */
.hero-title{
  font-family:'Bebas Neue', Impact, sans-serif;
  line-height:.86;
  letter-spacing:.01em;
  color:#fff;
  margin-bottom: 1.5rem;
}
.hero-title .line{
  display:block;
  font-size: clamp(3.2rem, 9.5vw, 9rem);
  text-shadow: 0 4px 0 rgba(0,0,0,.4);
}
.hero-title .line-strike{
  position:relative;
  color: #71717a;
}
.hero-title .line-strike::after{
  content:'';
  position:absolute;
  left: -2%; right: -2%;
  top: 52%;
  height: 8px;
  background: #facc15;
  border-radius:2px;
  transform: rotate(-2deg);
  box-shadow: 0 2px 0 rgba(0,0,0,.6);
}

.word-build{
  position:relative;
  display:inline-block;
  color:#0a0a0a;
  background: #facc15;
  padding: 0 .25em .04em .25em;
  margin-left: .12em;
  transform: rotate(-1.5deg);
  box-shadow: 8px 8px 0 0 #000;
  border: 3px solid #000;
}
.word-build::before{
  content:'';
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 18px,
    rgba(0,0,0,.18) 18px 22px
  );
  pointer-events:none;
}
.word-period{ font-style: normal; }

@media (max-width: 640px){
  .word-build{ box-shadow: 5px 5px 0 0 #000; border-width:2px; }
}

/* Hero subtitle */
.hero-sub{
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height:1.55;
  color:#d4d4d8;
  max-width: 32rem;
  margin-bottom: 2rem;
}
@media (max-width: 1024px){ .hero-sub{ margin-left:auto; margin-right:auto; } }

/* CTAs */
.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:flex-start;
  margin-bottom: 2rem;
}
@media (max-width: 1024px){ .hero-cta{ justify-content:center; } }

/* Trust strip */
.hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap: 1rem 1.5rem;
  font-size:.8rem;
  color:#a1a1aa;
  font-weight:600;
  border-top:1px solid #262626;
  padding-top: 1rem;
}
.hero-trust > div{ display:inline-flex; align-items:center; gap:.4rem; }
.hero-trust span{ color:#facc15; font-size:1rem; }
@media (max-width: 1024px){ .hero-trust{ justify-content:center; } }

/* ============ MASCOT STAGE ============ */
.mascot-stage{
  position:relative;
  aspect-ratio: 1 / 1.05;
  max-width: 560px;
  margin: 0 auto;
}
.mascot-disc{
  position:absolute;
  inset: 6% 6% 6% 6%;
  background: radial-gradient(circle at 50% 45%,
    #facc15 0%,
    #f0b90b 40%,
    #f59e0b 70%,
    rgba(245,158,11,0) 100%);
  border-radius:50%;
  filter: blur(2px);
  animation: discBreathe 6s ease-in-out infinite;
  opacity:.92;
}
.mascot-disc::after{
  content:'';
  position:absolute;
  inset: 8%;
  border-radius:50%;
  border: 2px dashed rgba(0,0,0,.25);
  animation: spin 22s linear infinite;
}
@keyframes discBreathe{
  0%,100%{ transform: scale(1); filter: blur(2px) brightness(1); }
  50%{ transform: scale(1.04); filter: blur(2px) brightness(1.08); }
}

.mascot-img{
  position:relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid #0a0a0a;
  box-shadow:
    0 0 0 4px #facc15,
    0 30px 80px -20px rgba(250,204,21,.5),
    0 20px 40px rgba(0,0,0,.6);
  animation: float 6s ease-in-out infinite;
}

@keyframes float{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-12px) rotate(-1deg); }
}
@keyframes bob{
  0%,100%{ transform: translateY(0) rotate(var(--rot, -6deg)); }
  50%{ transform: translateY(-6px) rotate(var(--rot, -6deg)); }
}

/* ============ STICKER CARDS ============ */
.sticker{
  position:absolute;
  background: #0d0d0d;
  border: 2px solid #facc15;
  border-radius:.75rem;
  padding:.65rem .85rem;
  box-shadow: 4px 4px 0 0 #000, 0 8px 24px rgba(0,0,0,.5);
  min-width: 130px;
  z-index: 5;
  backdrop-filter: blur(6px);
  animation: bob 4s ease-in-out infinite;
}
.sticker-1{
  top: 4%;
  left: -8%;
  --rot: -8deg;
  transform: rotate(-8deg);
  animation-delay: .2s;
}
.sticker-2{
  top: 38%;
  right: -10%;
  --rot: 6deg;
  transform: rotate(6deg);
  animation-delay: .9s;
}
.sticker-3{
  bottom: 8%;
  left: -6%;
  --rot: 4deg;
  transform: rotate(4deg);
  animation-delay: 1.5s;
}
@media (max-width: 640px){
  .sticker{ min-width: 110px; padding:.5rem .65rem; }
  .sticker-1{ top: -2%; left: -4%; }
  .sticker-2{ top: 35%; right: -6%; }
  .sticker-3{ bottom: 4%; left: -2%; }
}

/* ON DUTY badge */
.duty-badge{
  position:absolute;
  bottom: -10px;
  right: 10%;
  background: #facc15;
  color:#000;
  padding:.55rem 1rem;
  border-radius:.5rem;
  font-family:'Bebas Neue';
  font-size:1.4rem;
  letter-spacing:.15em;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  box-shadow: 5px 5px 0 0 #000;
  border: 2px solid #000;
  transform: rotate(3deg);
  z-index:6;
}
.duty-light{
  width:10px; height:10px;
  border-radius:50%;
  background:#16a34a;
  box-shadow: 0 0 8px #22c55e;
  animation: ping 1.4s ease-out infinite;
}

/* Bottom hero fade into next section */
.hero-fade{
  position:absolute;
  left:0; right:0; bottom:0;
  height: 90px;
  background: linear-gradient(to bottom, transparent, #0a0a0a);
  pointer-events:none;
  z-index: 1;
}

/* Presale variant of hero badge */
.hero-badge-presale{
  background: linear-gradient(135deg, #f0b90b, #facc15);
  color: #0a0a0a;
  border-color: #000;
  font-weight:800;
  position:relative;
  overflow:hidden;
}
.hero-badge-presale::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg, #facc15, transparent 60%);
  opacity:0;
}
.badge-pulse{
  width:8px; height:8px;
  border-radius:50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,.7);
  animation: ping 1.4s ease-out infinite;
}

/* Nav presale link highlight */
.nav-presale{
  position:relative;
  color: #0a0a0a !important;
  background: #facc15;
  padding: .35rem .75rem !important;
  border-radius: .4rem;
  font-weight:800;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 0 #000;
}
.nav-presale:hover{
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 0 #000;
}
.nav-presale::after{ display:none; }

/* ============ PRESALE SECTION ============ */
.presale-countdown{
  background: #0d0d0d;
  border: 2px solid #facc15;
  border-radius: 1rem;
  padding: 1.5rem;
  max-width: 740px;
  margin: 0 auto;
  box-shadow: 0 0 40px rgba(250,204,21,.18), 6px 6px 0 0 #000;
  position:relative;
}
.presale-countdown::before{
  content:'';
  position:absolute;
  top:-1px; left:-1px; right:-1px;
  height: 4px;
  background: repeating-linear-gradient(
    -45deg,
    #facc15 0 12px,
    #000 12px 24px
  );
  border-radius: 1rem 1rem 0 0;
}

.presale-label{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem;
  letter-spacing:.3em;
  text-transform: uppercase;
  color:#facc15;
}

.cd-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  max-width: 540px;
  margin: 0 auto;
}
.cd-cell{
  background:#0a0a0a;
  border:1px solid rgba(250,204,21,.4);
  border-radius:.75rem;
  padding: .9rem .5rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cd-cell::after{
  content:'';
  position:absolute;
  top: 50%;
  left:0; right:0;
  height: 1px;
  background: rgba(250,204,21,.15);
}
.cd-num{
  font-family:'Bebas Neue', Impact, sans-serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height:1;
  color:#facc15;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 rgba(0,0,0,.7);
}
.cd-lbl{
  font-family:'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing:.25em;
  text-transform: uppercase;
  color: #71717a;
  margin-top: .35rem;
}

/* Main presale panel */
.presale-panel{
  background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
  border: 2px solid rgba(250,204,21,.3);
  border-radius: 1rem;
  padding: 1.75rem;
  position: relative;
}
.presale-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem .7rem;
  background: rgba(34,197,94,.15);
  border:1px solid rgba(34,197,94,.4);
  color:#22c55e;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.18em;
  border-radius:999px;
  text-transform:uppercase;
}

/* Big progress bar */
.ps-progress{
  height: 38px;
  background: #0a0a0a;
  border: 3px solid #facc15;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.ps-progress::after{
  content:'';
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 10px,
    rgba(0,0,0,.18) 10px 20px
  );
  pointer-events:none;
}
.ps-progress-fill{
  height: 100%;
  background: linear-gradient(90deg, #f0b90b 0%, #facc15 50%, #fde047 100%);
  position: relative;
  transition: width 1.6s cubic-bezier(.2,.7,.2,1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: .75rem;
  box-shadow: inset 0 0 12px rgba(0,0,0,.3);
}
.ps-progress-label{
  color: #0a0a0a;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 1.4rem;
  letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
}

/* stat tiles */
.ps-stat{
  background: #0a0a0a;
  border:1px solid rgba(250,204,21,.2);
  border-radius:.6rem;
  padding: .8rem .9rem;
  transition: border-color .2s, transform .2s;
}
.ps-stat:hover{ border-color: rgba(250,204,21,.6); transform: translateY(-2px); }
.ps-stat-lbl{
  font-size:.65rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#71717a;
  font-family:'JetBrains Mono', monospace;
}
.ps-stat-val{
  font-family:'Bebas Neue', Impact, sans-serif;
  font-size: 1.7rem;
  line-height:1;
  color: #facc15;
  margin-top: .35rem;
}
.ps-stat-sub{
  font-size:.7rem;
  color:#a1a1aa;
  margin-top: .2rem;
}

/* Post-listing overlay (locked panels in dApp) */
.post-listing-overlay{
  position:absolute;
  inset:0;
  background: rgba(10,10,10,.86);
  backdrop-filter: blur(3px);
  border-radius: 1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 5;
  border: 2px dashed rgba(250,204,21,.4);
  padding: 1rem;
}

/* ============ BUTTONS ============ */
.btn-primary{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.85rem 1.4rem;
  background:#facc15;
  color:#000;
  font-weight:900;
  border-radius:.6rem;
  box-shadow: 6px 6px 0 0 #000;
  border: 2px solid #000;
  transition: transform .15s, box-shadow .15s, background .2s;
  text-transform: uppercase;
  letter-spacing:.05em;
  font-size: .95rem;
}
.btn-primary:hover{
  transform: translate(-2px,-2px);
  box-shadow: 8px 8px 0 0 #000;
  background:#fde047;
}
.btn-primary:active{
  transform: translate(2px,2px);
  box-shadow: 2px 2px 0 0 #000;
}
.btn-secondary{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.85rem 1.4rem;
  background: transparent;
  color: #facc15;
  font-weight:800;
  border:2px solid #facc15;
  border-radius:.6rem;
  transition: background .2s, color .2s;
  text-transform: uppercase;
  letter-spacing:.05em;
  font-size: .95rem;
}
.btn-secondary:hover{ background:#facc15; color:#000; }
.btn-ghost{
  display:inline-flex; align-items:center;
  padding:.7rem 1rem;
  border:2px dashed #facc15;
  border-radius:.6rem;
  color:#fde047;
  font-weight:700;
  transition: background .2s;
}
.btn-ghost:hover{ background: rgba(250,204,21,.08); }

.btn-mini{
  padding:.45rem .9rem;
  background:#facc15;
  color:#000;
  font-weight:900;
  border-radius:.4rem;
  font-size:.8rem;
  border:2px solid #000;
  transition: transform .15s;
}
.btn-mini:hover{ transform: translateY(-2px); }

/* ============ STAT PILLS ============ */
.stat-pill{
  background:#1a1a1a;
  border:2px solid rgba(250,204,21,.3);
  border-radius:.75rem;
  padding:.75rem;
  text-align:left;
}

/* ============ BUILD PROGRESS BAR ============ */
.build-bar{
  height: 26px;
  background: #1a1a1a;
  border:3px solid #facc15;
  border-radius: 6px;
  overflow:hidden;
  position:relative;
}
.build-bar::after{
  content:'';
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent 0 8px,
      rgba(0,0,0,.18) 8px 16px
    );
  pointer-events:none;
}
.build-fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, #f0b90b 0%, #facc15 50%, #fde047 100%);
  transition: width 1.4s cubic-bezier(.2,.7,.2,1);
  position:relative;
  box-shadow: inset 0 0 8px rgba(0,0,0,.3);
}
.build-fill::after{
  content:'🚧';
  position:absolute;
  right: -10px; top:50%;
  transform: translateY(-50%);
  font-size:22px;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.5));
}

/* ============ MARQUEE ============ */
.marquee{ overflow:hidden; }
.marquee-track{
  display:flex;
  gap:2rem;
  white-space:nowrap;
  animation: marquee 30s linear infinite;
  width: max-content;
}
.marquee-track span{ flex-shrink:0; }
@keyframes marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* ============ SECTION TITLES ============ */
.section-eyebrow{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:.75rem;
  letter-spacing:.3em;
  color:#facc15;
  background: rgba(250,204,21,.08);
  padding:.35rem .7rem;
  border-radius:.25rem;
  border:1px solid rgba(250,204,21,.3);
  margin-bottom:1rem;
  text-transform: uppercase;
}
.section-title{
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height:1;
  color:#fff;
  letter-spacing:.02em;
}
.underline-yellow{
  position:relative;
  display:inline-block;
  color:#facc15;
}
.underline-yellow::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:.05em;
  height:8px;
  background: repeating-linear-gradient(45deg, #facc15 0 4px, #000 4px 8px);
  z-index:-1;
  opacity:.6;
}

/* ============ FEATURE / TOKENOMICS / DAPP CARDS ============ */
.feature-card{
  background:#1a1a1a;
  border:2px solid rgba(250,204,21,.2);
  border-radius:.85rem;
  padding:1.25rem;
  transition: transform .2s, border-color .2s;
}
.feature-card:hover{
  transform: translateY(-4px);
  border-color: rgba(250,204,21,.6);
}

.tokenomics-card{
  background:#0f0f0f;
  border:2px solid rgba(250,204,21,.25);
  border-radius:1rem;
  padding:1.5rem;
  position:relative;
  overflow:hidden;
}
.tokenomics-card::before{
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg, #facc15, transparent);
}
.tokenomics-card:hover{ border-color: rgba(250,204,21,.6); }

/* allocation bars */
.alloc-bar{
  position:relative;
  background:#0a0a0a;
  border:1px solid rgba(255,255,255,.1);
  border-radius:.5rem;
  height: 36px;
  overflow:hidden;
  display:flex; align-items:center;
}
.alloc-bar > span:first-child{
  position:absolute; inset:0;
  width: var(--w, 0%);
  background: var(--c, #facc15);
  opacity:.85;
  border-radius:.5rem 0 0 .5rem;
  animation: allocFill 1.2s ease-out;
}
@keyframes allocFill{
  from{ width:0% }
  to{ width: var(--w); }
}
.alloc-label{
  position:relative;
  z-index:1;
  padding:0 .8rem;
  font-size:.8rem;
  font-weight:600;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  color:#000;
  width:100%;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:.4rem;
}
.alloc-label b{ font-weight:900; }

/* ============ HOW IT WORKS ============ */
.how-card{
  position:relative;
  background:#1a1a1a;
  border:2px solid rgba(250,204,21,.2);
  border-radius:1rem;
  padding:1.5rem;
  overflow:hidden;
  transition: transform .25s, border-color .25s;
}
.how-card:hover{
  transform: translateY(-6px);
  border-color: rgba(250,204,21,.7);
}
.how-num{
  position:absolute;
  top: .5rem; right: 1rem;
  font-family:'Bebas Neue';
  font-size: 5rem;
  color: rgba(250,204,21,.12);
  line-height:1;
}
.how-img{
  width:100%;
  height: 200px;
  object-fit: cover;
  border-radius:.6rem;
  border:2px solid rgba(250,204,21,.4);
}

/* ============ PHASE / ROADMAP ============ */
.phase-card{
  position:relative;
  background:#0f0f0f;
  border:2px solid rgba(250,204,21,.2);
  border-radius:1rem;
  padding:1.5rem 1.25rem;
  padding-top: 2.5rem;
  transition: transform .2s, border-color .2s;
}
.phase-card:hover{
  transform: translateY(-4px);
}
.phase-marker{
  position:absolute;
  top: -1.25rem;
  left: 1.25rem;
  width: 2.5rem; height: 2.5rem;
  border-radius:50%;
  background:#0a0a0a;
  border:3px solid #facc15;
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue';
  font-size:1.5rem;
  color:#facc15;
}
.phase-active .phase-marker{ background:#facc15; color:#000; }
.phase-current .phase-marker{
  animation: pulseRing 1.6s ease-in-out infinite;
  background:#facc15;
  color:#000;
}
@keyframes pulseRing{
  0%,100%{ box-shadow: 0 0 0 0 rgba(250,204,21,.7); }
  50%{ box-shadow: 0 0 0 12px rgba(250,204,21,0); }
}
.phase-status{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:.6rem;
  letter-spacing:.2em;
  padding:.2rem .5rem;
  border-radius:.25rem;
  background:#facc15;
  color:#000;
  font-weight:900;
}
.status-now{ background:#ea580c; color:#fff; }
.status-future{ background:#262626; color:#a1a1aa; }
.phase-active{ border-color:rgba(250,204,21,.7); }
.phase-current{ border-color:#facc15; box-shadow: 0 0 30px rgba(250,204,21,.15); }

/* ============ DAPP CARDS ============ */
.dapp-card{
  background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
  border:2px solid rgba(250,204,21,.25);
  border-radius:1rem;
  padding:1.5rem;
}
.info-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.7rem .9rem;
  background:#0a0a0a;
  border:1px solid rgba(255,255,255,.06);
  border-radius:.5rem;
}
.swap-input{
  background:#0a0a0a;
  border:1px solid rgba(250,204,21,.2);
  border-radius:.7rem;
  padding:.85rem 1rem;
}
.swap-input:focus-within{ border-color:#facc15; }

.lock-btn{
  flex:1;
  padding:.5rem;
  background:#0a0a0a;
  border:2px solid rgba(250,204,21,.2);
  border-radius:.5rem;
  color:#a1a1aa;
  font-weight:700;
  font-size:.8rem;
  font-family:'JetBrains Mono', monospace;
  transition: all .2s;
}
.lock-btn:hover{ border-color: rgba(250,204,21,.5); color:#fff; }
.lock-active{
  background:#facc15;
  color:#000;
  border-color:#facc15;
}

/* ============ CHART ============ */
.chart-wrap{
  background:#0a0a0a;
  border-radius:.7rem;
  padding:1rem;
  border:1px solid rgba(250,204,21,.2);
  overflow:hidden;
}
#priceChart{
  width:100%;
  height: auto;
  display:block;
}

/* ============ NFT CARDS ============ */
.nft-card{
  background:#0f0f0f;
  border:2px solid rgba(250,204,21,.2);
  border-radius:1rem;
  overflow:hidden;
  transition: transform .25s, border-color .25s;
}
.nft-card:hover{
  transform: translateY(-6px);
  border-color: #facc15;
  box-shadow: 0 10px 40px -10px rgba(250,204,21,.4);
}
.nft-img-wrap{
  position:relative;
  aspect-ratio: 1/1;
  overflow:hidden;
}
.nft-img-wrap img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .4s;
}
.nft-card:hover .nft-img-wrap img{ transform: scale(1.06); }
.nft-rarity{
  position:absolute;
  top:.7rem; right:.7rem;
  padding:.25rem .6rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.18em;
  color:#fff;
  border-radius:.25rem;
}

/* ============ COMMUNITY ============ */
.community-card{
  display:block;
  background:#1a1a1a;
  border:2px solid rgba(250,204,21,.2);
  border-radius:1rem;
  padding:2rem;
  text-align:center;
  transition: transform .2s, border-color .2s, background .2s;
}
.community-card:hover{
  transform: translateY(-6px) rotate(-1deg);
  border-color:#facc15;
  background:#1f1f1f;
}

.meme-thumb{
  aspect-ratio: 1/1;
  border-radius:.6rem;
  overflow:hidden;
  border:2px solid rgba(250,204,21,.2);
  transition: transform .2s, border-color .2s;
  cursor:pointer;
}
.meme-thumb:hover{
  transform: scale(1.04);
  border-color:#facc15;
}
.meme-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============ FAQ ============ */
.faq-item{
  background:#0f0f0f;
  border:2px solid rgba(250,204,21,.2);
  border-radius:.7rem;
  padding:1rem 1.25rem;
  transition: border-color .2s;
}
.faq-item:hover{ border-color: rgba(250,204,21,.5); }
.faq-item summary{
  cursor:pointer;
  font-weight:700;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#fff;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+';
  color:#facc15;
  font-size:1.5rem;
  font-weight:900;
  transition: transform .2s;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{
  margin-top:.7rem;
  color:#a1a1aa;
  font-size:.95rem;
  line-height:1.6;
}

/* ============ REVEAL ON SCROLL ============ */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--delay, 0s);
}
.reveal.visible{
  opacity:1;
  transform: translateY(0);
}

/* ============ SHAKE ============ */
.shake{ animation: shake .55s; }
@keyframes shake{
  10%,90%{ transform: translateX(-1px); }
  20%,80%{ transform: translateX(2px); }
  30%,50%,70%{ transform: translateX(-4px); }
  40%,60%{ transform: translateX(4px); }
}

/* ============ EASTER EGG ============ */
#easterEgg{ animation: bobLight 4s ease-in-out infinite; }
@keyframes bobLight{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* ============ RESPONSIVE TWEAKS ============ */
@media (max-width: 640px){
  .caution-tape{ height:24px; }
  .tape-track > span{ font-size:.65rem; padding: 0 1rem; }
  .build-bar{ height: 22px; }
  .build-fill::after{ font-size: 16px; }
  .how-img{ height:180px; }
}

/* Smooth scroll offset for fixed nav */
section{ scroll-margin-top: 110px; }
header#top{ scroll-margin-top: 110px; }