:root{
  --bg:#05070a;
  --fg:#eaf2fb;
  --muted:#a7b6c8;
  --line:#141b23;
  --brand:#9cc7ff;
  --brand-strong:#6ea5ff;
  --frost:rgba(255,255,255,0.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{width:min(1120px,92%);margin:0 auto}
.section{padding:72px 0}

.site-header{position:sticky;top:0;z-index:30}
.site-header::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 80% 0%,rgba(156,199,255,0.15),transparent 50%),linear-gradient(180deg,rgba(5,7,10,0.85),rgba(5,7,10,0.5) 60%,rgba(5,7,10,0));backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line);pointer-events:none}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{font-weight:800;letter-spacing:0.08em;position:relative}
.logo::after{content:"";position:absolute;left:-10px;right:-10px;bottom:-6px;height:1px;background:linear-gradient(90deg,transparent,rgba(156,199,255,.55),transparent);opacity:.0;transition:.35s ease}
.logo:hover::after{opacity:1}
.nav-links{display:flex;gap:18px}
.nav-links a{opacity:.9;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:linear-gradient(90deg,transparent,rgba(156,199,255,.6),transparent);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.nav-links a:hover{opacity:1;color:var(--fg)}
.nav-links a:hover::after{transform:scaleX(1)}

.hero-full{position:relative;isolation:isolate}
.hero-bg{position:relative;width:100%;aspect-ratio:16/9;background-position:center 20%;background-size:cover;filter:saturate(92%) contrast(104%);transform:translateZ(0)}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(1000px 500px at 80% 0%,rgba(110,165,255,0.22),transparent 50%),linear-gradient(180deg,rgba(5,7,10,0.1),rgba(5,7,10,0.6) 60%,rgba(5,7,10,0.9));display:grid;place-items:center}
.hero-inner{padding:18vh 0 14vh;text-align:center}
.hero-title{font-family:'Space Grotesk',Inter,system-ui;letter-spacing:0.04em;font-size:clamp(64px,12vw,160px);line-height:.9;margin:0 0 18px;text-shadow:0 6px 30px rgba(0,0,0,.45)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border:1px solid var(--line);border-radius:12px;transition:.25s ease;background:transparent;color:var(--fg)}
.btn.primary{background:linear-gradient(180deg,var(--brand),var(--brand-strong));color:#0b0f14;border-color:transparent}
.btn.large{padding:14px 20px;font-size:1.05rem}
.btn.ghost:hover{border-color:#2a3948;background:var(--frost)}
.btn.small{padding:10px 14px;font-size:.95rem}

.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px;position:relative}
.section-head::after{content:"← Scroll →";position:absolute;right:0;bottom:-32px;font-size:0.8rem;color:var(--muted);opacity:0.6;letter-spacing:0.05em}
.section-head h2{margin:0;font-size:clamp(24px,4vw,34px)}
.section-sub{margin:0;color:var(--muted)}

.grid{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.grid::-webkit-scrollbar{height:8px}
.grid::-webkit-scrollbar-track{background:transparent}
.grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.grid::-webkit-scrollbar-thumb:hover{background:#2a3948}
.card{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0));transition:transform .3s ease, border-color .3s ease;flex:0 0 280px;scroll-snap-align:start}
.card:hover{transform:translateY(-4px);border-color:#2a3948}
.thumb{aspect-ratio:1/1;width:100%;object-fit:cover;filter:grayscale(100%) contrast(95%);transition:filter .35s ease}
.card:hover .thumb{filter:grayscale(0%) contrast(102%)}
.meta{padding:10px 12px 12px}
.title{margin:0 0 4px;font-weight:600}
.caption{margin:0;color:var(--muted);font-size:.95rem}

.contact{padding-top:16px}
.contact-card{border:1px solid var(--line);border-radius:14px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0));max-width:720px}
.mailto{color:var(--brand)}

.about-content{display:grid;grid-template-columns:400px 1fr;gap:48px;align-items:center}
.about-image-wrap{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.about-image{width:100%;height:auto;display:block;filter:grayscale(20%) contrast(102%);transition:filter 0.4s ease}
.about-image-wrap:hover .about-image{filter:grayscale(0%) contrast(105%)}
.about-text{max-width:600px}
.about-text h3{margin-top:0}

/* Featured Release Section */
.featured-release{padding:80px 0;background:radial-gradient(800px 400px at 50% 0%,rgba(156,199,255,0.08),transparent 70%)}
.featured-card{border:1px solid var(--line);border-radius:18px;padding:32px;background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));position:relative;overflow:hidden}
.featured-card::before{content:"";position:absolute;top:-50%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(110,165,255,0.15),transparent 60%);pointer-events:none;filter:blur(60px)}
.featured-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid rgba(156,199,255,0.3);border-radius:24px;background:rgba(156,199,255,0.1);font-size:0.85rem;font-weight:600;letter-spacing:0.05em;margin-bottom:24px;color:var(--brand)}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(0.9)}}
.featured-content{display:grid;grid-template-columns:minmax(280px,400px) 1fr;gap:40px;align-items:center}
.featured-artwork-wrap{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;cursor:pointer;transition:transform 0.3s ease}
.featured-artwork-wrap:hover{transform:scale(1.02)}
.featured-artwork{width:100%;height:100%;object-fit:cover;transition:filter 0.4s ease}
.featured-artwork-wrap:hover .featured-artwork{filter:brightness(0.7)}
.featured-hover-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(5,7,10,0.4);opacity:0;transition:opacity 0.3s ease;pointer-events:none}
.featured-artwork-wrap:hover .featured-hover-overlay{opacity:1}
.play-icon{width:64px;height:64px;border-radius:50%;background:rgba(156,199,255,0.25);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;color:var(--brand);transition:transform 0.2s ease}
.featured-artwork-wrap:hover .play-icon{transform:scale(1.1)}
.preview-text{margin:0;font-size:0.9rem;color:var(--fg);opacity:0.9}
.featured-audio{display:none}
.featured-info{display:flex;flex-direction:column;gap:12px}
.featured-title{font-family:'Space Grotesk',Inter,system-ui;font-size:clamp(32px,5vw,56px);font-weight:700;letter-spacing:0.02em;margin:0;line-height:1.1}
.featured-artist{margin:0;font-size:1.1rem;color:var(--muted);font-weight:600}
.featured-desc{margin:0;font-size:1.05rem;line-height:1.6;color:var(--muted);max-width:560px}
.featured-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.meta-tag{padding:6px 14px;border:1px solid var(--line);border-radius:20px;font-size:0.85rem;color:var(--muted);background:rgba(255,255,255,0.02)}

.site-footer{border-top:1px solid var(--line);margin-top:48px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0;color:var(--muted)}
.to-top{color:var(--fg)}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1;transform:none}

/* Smooth scrolling and reduced motion */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

@media (max-width: 880px){
  .card{flex:0 0 240px}
  .featured-content{grid-template-columns:1fr;gap:28px}
  .featured-artwork-wrap{max-width:400px;margin:0 auto}
  .about-content{grid-template-columns:1fr;gap:32px}
  .about-image-wrap{max-width:400px;margin:0 auto}
}
@media (max-width: 560px){
  .nav-links{display:none}
  .card{flex:0 0 220px}
  .cta-row{flex-direction:column;align-items:flex-start}
  .featured-release{padding:48px 0}
  .featured-card{padding:20px}
  .featured-badge{font-size:0.75rem;padding:6px 12px}
  .preview-text{font-size:0.85rem}
  .play-icon{width:56px;height:56px}
  .play-icon svg{width:24px;height:24px}
  .featured-hover-overlay{opacity:1;background:rgba(5,7,10,0.2)}
  .featured-artwork{filter:brightness(0.8)}
  .grid::-webkit-scrollbar{height:6px}
  .section-head::after{display:none}
}