*{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%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(circle at 30% 35%,rgba(111,74,255,.18),transparent 24%),
    radial-gradient(circle at 70% 62%,rgba(0,183,255,.12),transparent 23%),
    conic-gradient(from 180deg at 50% 50%,transparent,rgba(255,255,255,.035),transparent 24%);
  animation:hero-orbit 18s linear infinite;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.055) 49%,transparent 62%);
  transform:translateX(-120%);
  animation:hero-sweep 7s ease-in-out 1.4s infinite;
  pointer-events:none;
}
.ambient{position:absolute;border-radius:50%;filter:blur(80px);opacity:.24;will-change:transform}
.ambient-a{width:460px;height:460px;background:#5538a6;top:-100px;right:-80px;animation:ambient-a 10s ease-in-out infinite alternate}
.ambient-b{width:360px;height:360px;background:#075c78;bottom:-120px;left:-90px;animation:ambient-b 12s ease-in-out infinite alternate}
.hero-inner{position:relative;z-index:2;text-align:center;max-width:980px}
.logo-card{
  position:relative;
  overflow:hidden;
  width:min(520px,80vw);
  margin:0 auto 30px;
  background:#fff;
  padding:24px;
  border-radius:28px;
  box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 60px rgba(96,70,255,.1);
}
.logo-card::after{
  content:"";
  position:absolute;
  inset:-30% auto -30% -55%;
  width:30%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);
  transform:skewX(-18deg);
  animation:logo-shine 5.8s ease-in-out 1.2s infinite;
}
.logo-card img{display:block;width:100%;border-radius:18px;animation:logo-breathe 4.5s ease-in-out 1s infinite alternate}
.hero-equalizer{
  height:28px;
  margin:-8px auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  opacity:.75;
}
.hero-equalizer i{
  display:block;
  width:3px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(180deg,#c8baff,#59d8ff);
  transform-origin:center;
  animation:eq-pulse 1.05s ease-in-out infinite alternate;
}
.hero-equalizer i:nth-child(2),.hero-equalizer i:nth-child(10){animation-delay:-.8s}
.hero-equalizer i:nth-child(3),.hero-equalizer i:nth-child(9){animation-delay:-.25s}
.hero-equalizer i:nth-child(4),.hero-equalizer i:nth-child(8){animation-delay:-.65s}
.hero-equalizer i:nth-child(5),.hero-equalizer i:nth-child(7){animation-delay:-.4s}
.hero-equalizer i:nth-child(6){animation-delay:-.95s}
.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;
  color:transparent;
  background:linear-gradient(100deg,#fff 10%,#c9c0ff 42%,#72dfff 55%,#fff 88%);
  background-size:210% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  animation:title-light 7s ease-in-out infinite;
}
.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}
.music-player,.genre-player{display:grid;gap:14px;align-content:center}
.music-player label,.genre-player label{font-size:.82rem;color:#bdbdbd;letter-spacing:.04em}
.genre-player{margin-top:24px;padding-top:22px;border-top:1px solid #292929}
.genre-track-title{margin:0!important;color:#fff!important;font-size:1.25rem!important;font-weight:700;line-height:1.35!important}
.track-picker{position:relative}
.track-picker:not(.wheel-ready)::after{content:"⌄";position:absolute;right:18px;top:50%;transform:translateY(-56%);pointer-events:none;color:#aaa;font-size:1.1rem}
.track-picker select{
  width:100%;
  appearance:none;
  border:1px solid #3b3b3b;
  border-radius:14px;
  background:#0a0a0a;
  color:#fff;
  font:inherit;
  font-weight:700;
  padding:14px 48px 14px 16px;
  cursor:pointer;
  outline:none;
}
.track-picker select:focus{border-color:#777;box-shadow:0 0 0 3px rgba(255,255,255,.07)}
.track-wheel{display:none}
.track-picker.wheel-ready select{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.track-picker.wheel-ready .track-wheel{
  --wheel-row:48px;
  display:block;
  position:relative;
  height:144px;
  overflow-y:auto;
  padding:48px 0;
  border:1px solid #343434;
  border-radius:20px;
  background:linear-gradient(180deg,#090909,#111 50%,#090909);
  scroll-snap-type:y mandatory;
  overscroll-behavior:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  outline:none;
  mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 76%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 76%,transparent 100%);
}
.track-wheel::-webkit-scrollbar{display:none}
.track-picker.wheel-ready::before,
.track-picker.wheel-ready::after{
  content:"";
  position:absolute;
  z-index:2;
  left:12px;
  right:12px;
  height:1px;
  background:linear-gradient(90deg,transparent,#727272 18%,#727272 82%,transparent);
  pointer-events:none;
}
.track-picker.wheel-ready::before{top:calc(50% - 24px)}
.track-picker.wheel-ready::after{top:calc(50% + 24px)}
.track-wheel-item{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:var(--wheel-row);
  padding:0 18px;
  border:0;
  background:transparent;
  color:#686868;
  font:inherit;
  font-size:.94rem;
  cursor:pointer;
  scroll-snap-align:center;
  transition:color .18s ease,font-size .18s ease,opacity .18s ease;
}
.track-wheel-item[aria-selected="true"]{color:#fff;font-size:1.08rem;font-weight:700}
.track-wheel:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.1);border-color:#686868}
.music-player audio,.genre-player audio{display:block;width:100%;height:44px}
.track-guide{margin:0;color:#888;font-size:.82rem;line-height:1.55}
.track-guide span{color:#6f6f6f;font-size:.78rem}
.genre-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
}
.genre-card{
  border-radius:24px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#161616,#101010);
  overflow:hidden;
  transition:border-color .2s ease,background .2s ease;
}
.genre-card:nth-child(1),.genre-card:nth-child(2),.genre-card:nth-child(3){grid-column:span 2}
.genre-card:nth-child(4),.genre-card:nth-child(5){grid-column:span 3}
.genre-card:hover,.genre-card[open]{border-color:#4a4a4a;background:linear-gradient(180deg,#1a1a1a,#111)}
.genre-card summary{
  padding:12px 12px 24px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px 14px;
  cursor:pointer;
  list-style:none;
}
.genre-card summary::-webkit-details-marker{display:none}
.genre-visual{grid-column:1 / -1;position:relative;display:block;overflow:hidden;border-radius:15px;aspect-ratio:3/2;background:#0a0a0a}
.genre-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.66));pointer-events:none}
.genre-visual img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease,filter .3s ease}
.genre-card:hover .genre-visual img,.genre-card[open] .genre-visual img{transform:scale(1.035);filter:brightness(1.08)}
.genre-number{position:absolute;left:14px;bottom:11px;z-index:1;font-size:.7rem;color:rgba(255,255,255,.72);letter-spacing:.08em}
.genre-name{grid-column:1;display:grid;gap:3px;padding-left:10px}
.genre-name strong{font-size:1.45rem;color:#fff}
.genre-name small{font-size:.78rem;font-weight:400;color:#858585;letter-spacing:.03em}
.genre-toggle{grid-column:2;grid-row:2;align-self:center;padding-right:10px;color:#aaa;font-size:1.4rem;transition:transform .2s ease}
.genre-card[open] .genre-toggle{transform:rotate(45deg)}
.genre-detail{padding:0 26px 26px;border-top:1px solid #292929}
.genre-detail p{font-size:.95rem;color:#c3c3c3;line-height:1.75;margin:22px 0 0}
.genre-detail .en{font-size:.85rem;color:#858585;margin-top:12px}
.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{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(44px,7vw,100px);
  align-items:start;
}
.contact-intro{max-width:560px}
.contact-intro h2{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.05;letter-spacing:-.04em;margin-bottom:20px}
.contact-intro>p{color:var(--muted)}
.contact-note{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);font-size:.9rem}
.contact-note .en{color:#777;font-size:.82rem}
.contact-form{
  position:relative;
  display:grid;
  gap:20px;
  padding:clamp(24px,4vw,42px);
  background:linear-gradient(145deg,#151515,#0d0d0d);
  border:1px solid var(--line);
  border-radius:28px;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-form label{display:grid;gap:8px;text-align:left}
.contact-form label>span{font-size:.82rem;color:#c7c7c7;letter-spacing:.02em}
.contact-form input,.contact-form textarea{
  width:100%;
  border:1px solid #343434;
  border-radius:14px;
  background:#0b0b0b;
  color:#fff;
  font:inherit;
  padding:13px 15px;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.contact-form textarea{resize:vertical;min-height:170px}
.contact-form input:focus,.contact-form textarea:focus{border-color:#777;box-shadow:0 0 0 3px rgba(255,255,255,.07)}
.form-trap{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.contact-submit{border:0;cursor:pointer;justify-self:start}
.contact-submit:disabled{opacity:.6;cursor:wait}
.form-status{display:none;margin:0;padding:12px 15px;border-radius:12px;font-size:.9rem;text-align:left}
.form-status.show{display:block}
.form-status.success{color:#c9f5d8;background:#102218;border:1px solid #214c30}
.form-status.error{color:#ffd3d3;background:#261313;border:1px solid #572626}
.form-privacy{margin:0;color:#777;font-size:.78rem;line-height:1.6;text-align:left}
.form-privacy .en{font-size:.75rem}
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}

@keyframes hero-orbit{
  to{transform:rotate(360deg)}
}
@keyframes hero-sweep{
  0%,18%{transform:translateX(-120%)}
  55%,100%{transform:translateX(120%)}
}
@keyframes ambient-a{
  to{transform:translate(-90px,90px) scale(1.18)}
}
@keyframes ambient-b{
  to{transform:translate(100px,-70px) scale(1.24)}
}
@keyframes logo-shine{
  0%,24%{left:-55%;opacity:0}
  42%{opacity:.72}
  62%,100%{left:125%;opacity:0}
}
@keyframes logo-breathe{
  to{transform:scale(1.018)}
}
@keyframes eq-pulse{
  from{transform:scaleY(.28);opacity:.45}
  to{transform:scaleY(1);opacity:1}
}
@keyframes title-light{
  0%,100%{background-position:0 50%}
  50%{background-position:100% 50%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero::before,.hero::after,.ambient,.logo-card::after,.logo-card img,.hero-equalizer i,h1{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
}

@media (max-width:1000px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .genre-grid{grid-template-columns:repeat(2,1fr)}
  .genre-card:nth-child(n){grid-column:span 1}
  .about{grid-template-columns:1fr}
  .contact{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}
  .genre-card,.genre-card summary{min-height:0}
  .release-card{grid-template-columns:1fr;padding:26px}
  .form-row{grid-template-columns:1fr}
  .contact-form{padding:24px;border-radius:22px}
  .contact-submit{width:100%}
  footer{flex-direction:column}
}