*{box-sizing:border-box}
:root{
  --bg:#080808;
  --bg2:#111;
  --panel:#151515;
  --text:#f6f6f6;
  --muted:#a8a8a8;
  --line:#2a2a2a;
  --white:#fff;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  height:72px;
  padding:0 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(8,8,8,.76);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:50;
}
.brand{font-weight:800;letter-spacing:.08em}
.nav{display:flex;gap:28px;font-size:.82rem;letter-spacing:.12em}
.nav a{color:#d7d7d7}
.nav a:hover{color:#fff}
.menu-toggle{display:none;background:none;border:1px solid var(--line);color:#fff;padding:8px 12px}
.hero{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:120px 6vw 80px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.06),transparent 32%),
    linear-gradient(180deg,#0b0b0b 0%,#080808 100%);
}
.ambient{position:absolute;border-radius:50%;filter:blur(80px);opacity:.2}
.ambient-a{width:460px;height:460px;background:#343434;top:-100px;right:-80px}
.ambient-b{width:360px;height:360px;background:#222;bottom:-120px;left:-90px}
.hero-inner{position:relative;z-index:2;text-align:center;max-width:980px}
.logo-card{
  width:min(520px,80vw);
  margin:0 auto 30px;
  background:#fff;
  padding:24px;
  border-radius:28px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.logo-card img{width:100%;border-radius:18px}
.eyebrow{
  font-size:.75rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#bdbdbd;
  margin:0 0 12px;
}
h1,h2,h3,p{margin-top:0}
h1{
  font-size:clamp(2.4rem,7vw,6.2rem);
  line-height:1.02;
  letter-spacing:-.04em;
  margin-bottom:28px;
}
.hero-copy{font-size:clamp(1rem,2vw,1.25rem);color:#d0d0d0}
.hero-copy.en{font-size:.95rem;color:#888}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.btn{
  display:inline-flex;
  min-width:170px;
  justify-content:center;
  padding:13px 22px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em;
  transition:.2s ease;
}
.btn.primary{background:#fff;color:#080808}
.btn.ghost{border:1px solid #3b3b3b;color:#fff}
.btn:hover{transform:translateY(-2px)}
.section{padding:110px 7vw}
.section-dark{background:#0c0c0c}
.section-head{max-width:760px;margin-bottom:44px}
.section-head h2,.about h2{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.05;letter-spacing:-.04em;margin-bottom:16px}
.section-head p,.about p{color:var(--muted)}
.service-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.service-card{
  min-height:150px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:.2s ease;
}
.service-card:hover{transform:translateY(-4px);border-color:#525252}
.service-card span{font-size:1.05rem}
.service-card strong{font-size:.7rem;letter-spacing:.16em;color:#aaa}
.release-card{
  margin-top:28px;
  border:1px solid var(--line);
  border-radius:28px;
  padding:34px;
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:34px;
  background:linear-gradient(145deg,#151515,#0d0d0d);
}
.release-card h3{font-size:clamp(2rem,5vw,4rem);margin-bottom:6px}
.release-copy{color:#999}
.track-list{margin:0;padding-left:1.3rem;color:#d7d7d7}
.track-list li{padding:8px 0;border-bottom:1px solid #242424}
.genre-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.genre-card{
  min-height:230px;
  padding:24px;
  border-radius:24px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#161616,#101010);
}
.genre-card span{font-size:.7rem;color:#6f6f6f}
.genre-card h3{font-size:1.5rem;margin:70px 0 4px}
.genre-card p{font-size:.82rem;color:#8d8d8d}
.about{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:70px;
  align-items:center;
}
.about-copy{max-width:760px}
.about-copy .en{font-size:.95rem}
.about-quote{
  border-left:1px solid #323232;
  padding-left:36px;
}
.about-quote span{font-size:5rem;line-height:1;color:#555}
.about-quote p{font-size:clamp(2rem,4vw,3.6rem);line-height:1.05;color:#fff}
.social-row{display:flex;flex-wrap:wrap;gap:12px}
.social-row a{
  border:1px solid var(--line);
  border-radius:999px;
  padding:12px 20px;
  background:#151515;
}
.contact{text-align:center}
.contact .section-head{margin:0 auto}
footer{
  padding:50px 7vw;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  color:#777;
  font-size:.82rem;
}
.footer-brand{color:#fff;font-weight:800}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.show{opacity:1;transform:none}

@media (max-width:1000px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .genre-grid{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
}
@media (max-width:760px){
  .site-header{height:64px}
  .menu-toggle{display:block}
  .nav{
    display:none;
    position:absolute;
    top:64px;
    left:0;
    right:0;
    padding:20px 6vw 26px;
    background:#0b0b0b;
    border-bottom:1px solid var(--line);
    flex-direction:column;
    gap:16px;
  }
  .nav.open{display:flex}
  .hero{padding-top:96px}
  .logo-card{padding:14px;border-radius:22px}
  .section{padding:78px 6vw}
  .service-grid,.genre-grid{grid-template-columns:1fr}
  .release-card{grid-template-columns:1fr;padding:26px}
  footer{flex-direction:column}
}