/* === Base === */
:root{
  --bg:#0d1220;
  --panel:#141b2e;
  --ink:#e7efff;
  --muted:#9fb2d0;
  --accent:#5cc8ff;
  --accent-2:#3aa3d6;
  --glow: 0 0 30px rgba(92,200,255,.25);
  --bevel: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.35), 0 12px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1000px 600px at 20% -10%,#172136 0%,#0d1220 60%,#0d1220 100%);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5rem 0}

/* === Header === */
.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:rgba(13,18,32,.7);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:42px;height:42px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.brand-text h1{font-size:1.05rem;letter-spacing:.04em}
.tagline{color:var(--muted);font-size:.85rem}
.site-nav a{margin-left:16px;color:var(--ink);opacity:.8}
.site-nav a:hover{opacity:1}

/* === Hero with skeuomorphic VU === */
.hero{padding:42px 18px}
.hero-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:center;max-width:1100px;margin:0 auto}
.hero-copy h2{font-size:2.4rem;line-height:1.1}
.accent{color:var(--accent)}
.cta-row{display:flex;gap:12px;margin-top:16px}
.btn{border:none;border-radius:14px;padding:12px 16px;font-weight:600;box-shadow:var(--bevel);background:linear-gradient(#2a3656,#1b2540);color:var(--ink);cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn-primary{background:linear-gradient(#5cc8ff,#3aa3d6);color:#072133}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.12);box-shadow:0 6px 16px rgba(0,0,0,.4)}

.vu{display:flex;gap:16px;align-items:center;justify-content:center}
.vu-window{width:280px;height:160px;background:#1a233a;border-radius:18px;box-shadow:var(--bevel),var(--glow);position:relative;border:1px solid rgba(255,255,255,.06);overflow:hidden}
.vu-scale::before{content:"";position:absolute;inset:22px 22px 80px 22px;border-radius:10px;background:linear-gradient(180deg,#e9efef,#d7e2e2);opacity:.9}
.vu-needle{position:absolute;top:70px;left:44px;width:140px;height:2px;background:linear-gradient(90deg,#b61,transparent);transform-origin:0 50%;animation:needle 2.4s ease-in-out infinite}
@keyframes needle{0%,100%{transform:rotate(-35deg)}50%{transform:rotate(20deg)}}
.vu-lamp{width:16px;height:16px;border-radius:50%;background:#69ff9f;box-shadow:0 0 12px #69ff9f, inset 0 -2px 4px rgba(0,0,0,.5)}

/* === Packs === */
.packs{max-width:1100px;margin:0 auto;padding:10px 18px 48px}
.section-head{display:flex;align-items:baseline;gap:12px;margin:12px 0 20px}
.section-head h3{font-size:1.3rem}
.section-sub{color:var(--muted)}

.pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.pack-card{background:linear-gradient(180deg,#1a2238,#0f1527);border-radius:18px;padding:14px;border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 36px rgba(0,0,0,.35);transition:transform .15s ease, box-shadow .15s ease}
.pack-card:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.art{height:160px;border-radius:12px;background:repeating-linear-gradient(45deg,#0f182e,#0f182e 10px,#0c1426 10px,#0c1426 20px);position:relative;display:flex;align-items:flex-end;justify-content:center}
.art .label{position:absolute;bottom:10px;background:rgba(255,255,255,.08);backdrop-filter:blur(2px);padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.14);font-weight:600}
.cassette{box-shadow:inset 0 6px 0 rgba(0,0,0,.5), inset 0 -6px 0 rgba(255,255,255,.04)}
.vinyl{background:radial-gradient(circle at 40% 40%, #0c1426 0%, #0c1426 30%, #0b1324 31%, #0b1324 100%)}
.pack-meta{padding:10px 6px}
.pack-meta h4{margin:6px 0 4px}
.btn-row{display:flex;gap:10px;margin-top:8px}
.btn-secondary{background:linear-gradient(#2c3b63,#1c2746)}
.btn-disabled{opacity:.6;cursor:not-allowed}

/* About & Contact */
.about,.contact{max-width:900px;margin:0 auto;padding:24px 18px;color:var(--ink)}
.bullets{line-height:1.9;color:var(--muted)}

/* Footer */
.site-footer{padding:24px 18px;color:var(--muted);text-align:center;border-top:1px solid rgba(255,255,255,.06)}

/* Modal */
.modal{border:none;border-radius:16px;padding:0;background:transparent}
.modal::backdrop{background:rgba(8,8,14,.6);backdrop-filter:blur(4px)}
.modal-inner{background:linear-gradient(#1a2238,#0f1527);color:var(--ink);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6);width:min(720px,92vw);padding:18px}
.modal-close{float:right;font-size:1.6rem;background:transparent;border:none;color:var(--ink);cursor:pointer}
.modal-content h4{margin-top:0}
.modal-content .meta{color:var(--muted);margin-bottom:12px}
.modal-audio{display:flex;gap:12px;align-items:center;margin-top:8px}
.modal-audio audio{width:100%}

/* Responsive */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:20px}
  .vu-window{width:240px;height:140px}
}