:root{
  --emerald:#6ee7b7;
  --lemon:#fde68a;
  --ember:#f97316;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';}
.font-chakra{font-family:"Chakra Petch",sans-serif}
.font-inter{font-family:"Inter",sans-serif}

.bg-grid:before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(60vmax 60vmax at 120% -10%, rgba(110,231,183,.16), transparent 60%),
    radial-gradient(60vmax 60vmax at -20% 110%, rgba(249,115,22,.12), transparent 60%),
    linear-gradient(transparent 0, rgba(0,0,0,.35));
  pointer-events:none;
  z-index:-1;
}
.bg-grid:after{
  content:"";
  position:fixed; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, black, transparent 70%);
  pointer-events:none;
  z-index:-1;
}

.grad-text{
  background: linear-gradient(135deg, #34d399, #fde68a 40%, #f97316 85%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.btn-grad{
  background: linear-gradient(135deg, #34d399, #fde68a 40%, #f97316 85%);
  color:#111827; font-weight:700;
  transition: transform .15s ease, filter .2s ease;
}
.btn-grad:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn-outline{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.15);
  color: white; transition: background .2s ease,border-color .2s ease, transform .15s ease;
}
.btn-outline:hover{ background: rgba(255,255,255,.05); transform: translateY(-1px); }
.link{ color: rgba(255,255,255,.9); }
.link:hover{ color: white; }

.mc-card,.feature-card,.mode-card,.event-card,.social-card{
  border-radius: 1rem;
  background: rgba(17,24,39,.6);
  border: 1px solid rgba(255,255,255,.12);
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.feature-title,.mode-title,.event-title{ font-weight:800; font-size:1.25rem }
.feature-text,.mode-text,.event-text{ color: rgba(228,228,231,.9) }
.badge{
  display:inline-block; margin-top:.5rem; padding:.25rem .5rem;
  font-size:.75rem; font-weight:700; border-radius:.5rem;
  background: linear-gradient(135deg, #34d399, #fde68a 60%, #f97316 110%);
  color:#111827;
}
.nav-link{ color: rgba(255,255,255,.85); }
.nav-link:hover{ color:white; }
.stat-card{ text-align:center }
.product-card p{ color: rgba(228,228,231,.9) }
#cartModal{ display:flex }
#cartModal.hidden{ display:none }