/* Base decorative utilities (no build step needed) */
body {
  background-image: url('../img/dealoc-1.svg'), radial-gradient(50% 50% at 50% 0%, rgba(99,102,241,0.25) 0%, rgba(0,0,0,0) 60%);
  background-size: 0, cover;
  background-attachment: fixed;
}

.glass { background: rgba(255,255,255,0.04); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); border-radius: 1rem; }
.link { color: rgb(212 212 216); }
.link:hover { color: rgb(196 181 253); }
.icon-btn { padding: .5rem; border-radius: .5rem; background: transparent; color: white; }
.icon-btn:hover { background: rgba(255,255,255,0.08); }

.btn-primary { background: rgb(99 102 241); padding: .75rem 1.25rem; border-radius: .75rem; font-weight: 600; }
.btn-primary:hover { background: rgb(129 140 248); }
.btn-secondary { border: 1px solid rgba(255,255,255,0.2); padding: .75rem 1.25rem; border-radius: .75rem; font-weight: 600; }
.btn-secondary:hover { background: rgba(255,255,255,0.06); }

.blob { position:absolute; right:-5rem; bottom:-5rem; width: 28rem; height: 28rem; background: rgba(99,102,241,0.25); filter: blur(80px); border-radius: 9999px; }

.section-title { @apply text-2xl font-bold mb-4; }
.card { @apply rounded-xl overflow-hidden; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.mini-card { @apply rounded-lg p-4 text-center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.pill { @apply rounded-lg p-3; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }

/* Masonry gallery without JS */
.masonry { column-count: 1; column-gap: 1rem; }
.masonry-item { width: 100%; margin: 0 0 1rem; border-radius: .75rem; display: block; }
@media (min-width: 640px) { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; } }