@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Noto+Sans+JP:wght@500;700;900&display=swap');

:root{
  --green:#59C153;
  --orange:#F47B20;
  --spotify:#1DB954;
  --navy:#062044;
  --ink:#10233f;
  --muted:#65758b;
  --bg:#fffdf8;
  --soft:#f4fff2;
  --line:#e7edf4;
  --yellow:#F4C542;
  --purple:#8C63FF;
  --red:#ff0033;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Sans JP", system-ui, -apple-system, sans-serif;
  line-height:1.75;
}
a{color:inherit;text-decoration:none}
.site-header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px clamp(18px,4vw,56px);
  background:rgba(255,253,248,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(231,237,244,.9);
}
.brand,.footer-brand{
  font-family:"Montserrat", sans-serif;
  font-size:clamp(30px,4vw,46px);
  font-weight:900;
  letter-spacing:-.06em;
  line-height:1;
}
.melo{color:var(--green)}
.lingo{color:var(--orange)}
.nav{display:flex;gap:22px;font-family:"Montserrat",sans-serif;font-weight:800;color:var(--muted)}
.nav a:hover{color:var(--orange)}
.header-cta,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:999px;
  font-family:"Montserrat",sans-serif;
  font-weight:900;
  padding:12px 18px;
}
.header-cta{background:var(--spotify);color:white;box-shadow:0 10px 24px rgba(29,185,84,.22)}
.hero{
  min-height:720px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:42px;
  align-items:center;
  padding:76px clamp(20px,5vw,72px);
  background:
    radial-gradient(circle at 80% 20%, rgba(89,193,83,.18), transparent 34%),
    radial-gradient(circle at 20% 82%, rgba(244,123,32,.13), transparent 35%),
    linear-gradient(180deg,#fffdf8,#ffffff);
  overflow:hidden;
  position:relative;
}
.hero:before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(6,32,68,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,32,68,.035) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 88%);
  pointer-events:none;
}
.hero-copy,.stats-card{position:relative}
.eyebrow{
  margin:0 0 12px;
  font-family:"Montserrat",sans-serif;
  color:var(--green);
  font-weight:900;
  letter-spacing:.02em;
}
h1,h2,h3{margin:0 0 16px;line-height:1.18;letter-spacing:-.04em}
h1{font-size:clamp(46px,7vw,92px);font-weight:900}
h2{font-size:clamp(32px,4.5vw,58px);font-weight:900}
h3{font-size:clamp(22px,2vw,30px);font-weight:900}
.lead{font-size:clamp(18px,2vw,23px);color:#263f62;max-width:720px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn.primary{background:var(--spotify);color:white;box-shadow:0 16px 34px rgba(29,185,84,.25)}
.btn.secondary{background:white;border:1px solid var(--line);box-shadow:0 12px 28px rgba(16,35,63,.06)}
.stats-card{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.stats-card div{
  min-height:142px;
  background:white;
  border:1px solid var(--line);
  border-radius:30px;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:0 24px 60px rgba(16,35,63,.09);
}
.stats-card strong{
  font-family:"Montserrat",sans-serif;
  font-size:clamp(38px,5vw,64px);
  line-height:1;
  color:var(--navy);
}
.stats-card span{
  margin-top:8px;
  font-family:"Montserrat",sans-serif;
  font-weight:800;
  color:var(--muted);
}
.section{padding:76px clamp(20px,5vw,72px)}
.section-head{max-width:860px;margin-bottom:34px}
.section-head p{color:var(--muted);font-size:18px}
.centered{text-align:center;margin-left:auto;margin-right:auto}
.spotify-section{background:#ffffff}
.spotify-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.spotify-card{
  background:linear-gradient(180deg,#ffffff,#f8fff8);
  border:1px solid var(--line);
  border-radius:30px;
  padding:26px;
  box-shadow:0 20px 54px rgba(16,35,63,.08);
}
.tag{
  display:inline-flex;width:max-content;align-items:center;
  border-radius:999px;padding:7px 13px;
  font-family:"Montserrat",sans-serif;
  font-weight:900;font-size:13px;
  margin-bottom:14px;
}
.tag.green{background:rgba(89,193,83,.17);color:#23852a}
.tag.orange{background:rgba(244,123,32,.14);color:#b75207}
.tag.yellow{background:rgba(244,197,66,.22);color:#967200}
.tag.purple{background:rgba(140,99,255,.16);color:#6b48df}
.method{background:linear-gradient(180deg,#ffffff, #f4fff2)}
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.method-card{
  background:white;border:1px solid var(--line);border-radius:28px;padding:30px;
  box-shadow:0 18px 40px rgba(16,35,63,.06);
}
.method-card i{font-size:38px;color:var(--orange);margin-bottom:14px}
.library{background:#fffdf8}
.course-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:24px;
}
.course-card{
  background:white;border:1px solid var(--line);border-radius:30px;padding:28px;
  box-shadow:0 18px 48px rgba(16,35,63,.07);
}
.course-card.featured{grid-row:span 3;border-top:8px solid var(--green)}
.volume-list{
  margin:20px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.volume-list li,.mini-list span{
  background:#f7fafc;
  border:1px solid #edf2f7;
  border-radius:14px;
  padding:10px 12px;
  font-weight:700;
  color:#344761;
}
.mini-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.styles-section{background:white}
.style-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.style-card{
  min-height:104px;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:24px;
  padding:18px;
  font-family:"Montserrat",sans-serif;
  font-weight:900;
  box-shadow:0 16px 34px rgba(16,35,63,.08);
}
.kpop{background:#f1e8ff;color:#6b48df}
.lofi{background:#fff5c7;color:#967200}
.rnb{background:#eee8ff;color:#6b48df}
.reggae{background:#e8fbe7;color:#23852a}
.pop{background:#fff0e6;color:#b75207}
.jpop{background:#eaf3ff;color:#1a62b8}
.about{
  background:
    radial-gradient(circle at 20% 10%, rgba(244,123,32,.12), transparent 30%),
    radial-gradient(circle at 80% 90%, rgba(89,193,83,.16), transparent 36%),
    var(--navy);
}
.about-card{
  max-width:900px;
  color:white;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:34px;
  padding:clamp(30px,5vw,54px);
  backdrop-filter:blur(8px);
}
.about-card .eyebrow{color:#9ff394}
.about-card p{color:#dce8f5;font-size:18px}
.sns{text-align:center;background:#ffffff}
.social-icons{
  display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:26px;
}
.social{
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  color:white;font-size:25px;
  box-shadow:0 14px 30px rgba(16,35,63,.18);
  transition:transform .2s ease, box-shadow .2s ease;
}
.social:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(16,35,63,.24)}
.social.spotify{background:var(--spotify)}
.social.youtube{background:#ff0033}
.social.instagram{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af)}
.social.tiktok{background:#111}
.social.x{background:#111}
.social.threads{background:#111}
.social.facebook{background:#1877f2}
.footer{
  padding:48px 20px;text-align:center;background:var(--navy);color:white;
}
.footer-brand{font-size:38px}
.footer p{color:#cfdcf0}
.footer-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin:16px 0;color:white}
.footer-links a:hover{color:#9ff394}
.copyright{font-size:13px}

.policy-page{
  max-width:920px;margin:0 auto;padding:72px 22px;
}
.policy-page h1{font-size:clamp(34px,5vw,62px)}
.policy-page h2{font-size:28px;margin-top:38px}
.policy-page p,.policy-page li{color:#334b69}
.policy-box{
  background:white;border:1px solid var(--line);border-radius:24px;padding:26px;margin-top:24px;
  box-shadow:0 12px 34px rgba(16,35,63,.06);
}

@media (max-width:1020px){
  .hero,.spotify-grid,.course-grid{grid-template-columns:1fr}
  .style-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .nav{display:none}
  .hero{padding-top:48px;min-height:auto}
  h1{font-size:44px}
  .stats-card{grid-template-columns:1fr 1fr;gap:12px}
  .stats-card div{min-height:112px;padding:18px;border-radius:22px}
  .stats-card strong{font-size:34px}
  .stats-card span{font-size:13px}
  .method-grid{grid-template-columns:1fr}
  .volume-list{grid-template-columns:1fr}
  .style-grid{grid-template-columns:1fr 1fr}
  .footer-links{flex-direction:column;gap:10px}
  .social{width:54px;height:54px}
  .header-cta{font-size:14px;padding:10px 14px}
}