:root {
  --bg:#f9fafb;
  --accent1:#f59e0b;
  --accent2:#3b82f6;
  --text:#111827;
  --muted:#6b7280;
  --blur-bg:rgba(255,255,255,0.35);
}
body{margin:0;font-family:'Inter',system-ui;background:var(--bg);color:var(--text);overflow-x:hidden}
.header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,0.8);backdrop-filter:blur(8px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;position:relative}
.header-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.5}
.logo{width:48px;height:48px;margin-right:10px}
.title h1{margin:0;font-size:1.5rem;font-weight:800}
.badge{font-size:.8rem;color:#fff;background:linear-gradient(90deg,var(--accent1),var(--accent2));padding:3px 8px;border-radius:8px;margin-left:6px}
.nav{display:flex;gap:12px}
.nav a{color:var(--text);text-decoration:none;font-weight:600}
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem}
@media(max-width:768px){
  .nav{display:none}
  .menu-toggle{display:block}
}
.hero{min-height:90vh;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,#ffffff 0%,#e0f2fe 100%);padding:40px 20px}
.hero-content h2{font-size:2.2rem;margin-bottom:10px;font-weight:800}
.hero-content p{font-size:1.1rem;max-width:600px;margin:0 auto 25px;color:var(--muted)}
.btn.primary{background:linear-gradient(135deg,var(--accent2),var(--accent1));border:none;border-radius:12px;padding:14px 22px;color:#fff;font-weight:700;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,0.15);transition:transform .2s}
.btn.primary:hover{transform:scale(1.05)}
.footer{text-align:center;padding:20px;background:#f3f4f6;color:#6b7280;font-size:.9rem}
.play-btn{position:fixed;bottom:25px;right:25px;width:65px;height:65px;border-radius:25px 25px 25px 10px;background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,0.25);cursor:pointer;animation:fadeIn 1s ease forwards;opacity:0;animation-delay:1.5s}
@keyframes fadeIn{to{opacity:1}}
.fadein{opacity:0;animation:fadeIn 1.4s ease forwards}
.now-playing{position:fixed;bottom:0;left:0;width:100%;height:60px;background:var(--blur-bg);backdrop-filter:blur(12px) saturate(150%);display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:#fff;border-top:1px solid rgba(255,255,255,0.2);transition:transform .3s ease;transform:translateY(100%);border-radius:10px 10px 0 0}
.now-playing.show{transform:translateY(0)}
.now-playing button{background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer}
#progress{position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent1),var(--accent2));width:0%;transition:width .5s}
.hidden{display:none}
.nav.active {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 65px;
  right: 15px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  padding: 10px 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  animation: fadeIn 0.3s ease forwards;
}
.nav.active a {
  color: #111827;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.nav.active a:last-child { border-bottom: none; }