/* style.css - modern artistic background and responsive tweaks */

:root{
  --accent: #ff4081;
  --dark: #0b0f14;
  --muted: #9aa7b2;
}

body{font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial; background:#0b0f14;color:#fff;}
.hero{
  background-image: radial-gradient(circle at 10% 20%, rgba(255,64,129,0.06), transparent 30%),
                    radial-gradient(circle at 90% 80%, rgba(255,255,255,0.02), transparent 25%),
                    url('assets/images/slider/slide1.png');
  background-size: cover;
  background-position: center;
  min-height: 280px;
  padding: 50px 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12)); border: none; color:#fff; }
.thumb { cursor: pointer; transition: transform .2s ease; }
.thumb:hover{ transform: scale(1.03); }
.alphabet a{ margin: 2px; display:inline-block; padding:6px 8px; background:rgba(255,255,255,0.03); color:#fff; border-radius:4px; text-decoration:none; }
.alphabet a.active{ background: var(--accent); color:#000; font-weight:700; }

@media (max-width: 360px){
  .hero{ padding: 30px 10px; }
  .display-4{ font-size: 1.6rem; }
}