:root{
  --bg:#fafbff;
  --accent1:#5fd0ff;
  --accent2:#b34dff;
  --card-bg:#fff;
  --muted:#7a7f87;
  --shadow: 0 6px 20px rgba(40,40,80,0.08);
  --radius:14px;
  --gradient: linear-gradient(90deg,var(--accent1),var(--accent2));
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing: border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg,#fbfdff 0%, #fff 60%);
  color:#111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* header */
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 36px;
  background:transparent;
  position:sticky; top:0; z-index:50;
}
.logo{
  font-weight:700; color: #4a4cff; text-decoration:none; font-size:20px;
}
.menu-btn{border:0;background:transparent;font-size:22px;cursor:pointer}

/* hero */
.hero{padding:56px 24px;text-align:center;background:linear-gradient(90deg, rgba(240,247,255,0.6), rgba(255,245,255,0.6)); border-top:1px solid rgba(0,0,0,0.03)}
.small-hero{padding:48px 16px}
.hero h1{font-size:48px;margin:8px 0 12px}
.hero .sub{max-width:860px;margin:0 auto;color:var(--muted);font-size:16px}
.hero-actions{margin-top:26px}
.btn{display:inline-block;padding:14px 28px;border-radius:30px;border:2px solid transparent;font-weight:600;text-decoration:none;cursor:pointer;box-shadow:var(--shadow)}
.btn.primary{background:var(--gradient); color:white; box-shadow: 0 10px 28px rgba(110,60,180,0.12)}

/* controls on generator page */
.controls{margin-top:18px;display:flex;gap:12px;justify-content:center;align-items:center}
select#genreSelect{padding:12px 14px;border-radius:12px;border:2px solid rgba(120,100,200,0.12);min-width:200px}

/* ticker */
.ticker-section{padding:52px 20px 80px}
.section-title{text-align:center;color:var(--muted);margin-bottom:18px;font-weight:600}
.ticker-wrap{overflow:hidden; padding:12px 18px}
.ticker{
  display:flex;
  gap:20px;
  align-items:stretch;
  animation: tickerMove 30s linear infinite;
  padding:14px;
}
@keyframes tickerMove{
  0% {transform: translateX(0)}
  100% {transform: translateX(-50%)}
}

/* card */
.card{
  width:220px;
  min-width:220px;
  height:320px;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--card-bg);
  box-shadow:var(--shadow);
  position:relative;
  cursor:pointer;
  transition: transform .22s ease;
}
.card img{width:100%; height:100%; object-fit:cover; display:block}
.card:hover{transform:translateY(-6px)}

/* overlay shown on hover */
.card .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.75));
  color:white;padding:16px; display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  opacity:0; transform:translateY(6px); transition: .18s ease;
}
.card:hover .overlay{opacity:1; transform:none}
.overlay .title{font-weight:700;font-size:16px}
.overlay .meta{font-size:13px;color:rgba(255,255,255,0.9)}
.overlay .genres{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.genre-pill{background:rgba(255,255,255,0.12);padding:6px 8px;border-radius:999px;font-size:12px}

/* results grid on generator page */
.grid-section{padding:40px 24px 110px; text-align:center}
.status{color:var(--muted); margin-bottom:18px}
.grid{display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:18px; max-width:1100px; margin:0 auto}

/* smaller screens */
@media (max-width:680px){
  .hero h1{font-size:28px}
  .ticker{gap:14px}
  .card{width:160px; min-width:160px; height:240px}
}