@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

:root{
  --bg:#FFFBF2;
  --bg-soft:#FFF3E0;
  --pink:#FF2E7A;
  --pink-dark:#DD0F5F;
  --purple:#6C2BD9;
  --purple-light:#9B6BFF;
  --yellow:#FFC839;
  --mint:#00D4B5;
  --dark:#241442;
  --white:#FFFFFF;
  --gray:#8A7AA8;
  --shadow: 0 12px 32px rgba(36,20,66,0.14);
  --radius-lg: 28px;
  --radius-md: 18px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Zen Kaku Gothic New', sans-serif;
  background:var(--bg);
  color:var(--dark);
  line-height:1.75;
  overflow-x:hidden;
}
h1,h2,h3,.logo{
  font-family:'Zen Maru Gothic', sans-serif;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; }

.container{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}

/* -------- Buttons -------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 34px;
  border-radius:100px;
  font-weight:700;
  font-size:1.05rem;
  transition:transform .25s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(120deg, var(--pink), var(--purple));
  color:var(--white);
  box-shadow:0 10px 24px rgba(255,46,122,0.35);
}
.btn-primary:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 16px 32px rgba(255,46,122,0.45);
}
.btn-outline{
  border:2px solid var(--dark);
  color:var(--dark);
  background:transparent;
}
.btn-outline:hover{ background:var(--dark); color:var(--white); }
.btn-primary:focus-visible, .btn-outline:focus-visible, a:focus-visible, button:focus-visible{
  outline:3px solid var(--dark);
  outline-offset:3px;
}
.btn.large{ padding:20px 44px; font-size:1.2rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:16px; }

/* -------- Header -------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(255,251,242,0.85);
  backdrop-filter:blur(10px);
  transition:box-shadow .3s ease;
}
.site-header.scrolled{ box-shadow:0 4px 20px rgba(36,20,66,0.08); }
.header-inner{
  max-width:1120px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  font-size:1.35rem;
  color:var(--dark);
}
.logo-sub{
  display:block;
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-size:.62rem;
  font-weight:500;
  color:var(--gray);
  margin-top:1px;
}
.logo-bars{
  display:inline-flex;
  align-items:flex-end;
  gap:3px;
  height:22px;
}
.logo-bars span{
  width:4px;
  background:linear-gradient(180deg, var(--pink), var(--purple));
  border-radius:3px;
  animation:eq 1.1s ease-in-out infinite;
}
.logo-bars span:nth-child(1){ height:40%; animation-delay:0s; }
.logo-bars span:nth-child(2){ height:100%; animation-delay:.15s; }
.logo-bars span:nth-child(3){ height:60%; animation-delay:.3s; }
.logo-bars span:nth-child(4){ height:80%; animation-delay:.45s; }
@keyframes eq{
  0%,100%{ transform:scaleY(0.4); }
  50%{ transform:scaleY(1); }
}
.nav{
  display:flex;
  align-items:center;
  gap:22px;
  font-weight:700;
  font-size:.95rem;
}
.nav a{ position:relative; padding:6px 0; }
.nav a:not(.nav-cta)::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:3px;
  background:var(--pink);
  border-radius:2px;
  transition:width .25s ease;
}
.nav a:not(.nav-cta):hover::after{ width:100%; }
.nav-cta{
  background:linear-gradient(120deg, var(--pink), var(--purple));
  color:var(--white);
  padding:10px 22px;
  border-radius:100px;
  box-shadow:0 6px 16px rgba(255,46,122,0.3);
}
.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:8px;
}
.hamburger span{
  width:26px; height:3px;
  background:var(--dark);
  border-radius:3px;
  transition:transform .3s ease, opacity .3s ease;
}
.hamburger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* -------- Hero -------- */
.hero{
  position:relative;
  padding:150px 0 100px;
  overflow:hidden;
}
.hero-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(10px);
  z-index:0;
}
.hero-blob.b1{ width:380px; height:380px; background:var(--yellow); top:-140px; right:-100px; opacity:.55;}
.hero-blob.b2{ width:300px; height:300px; background:var(--mint); bottom:-120px; left:-100px; opacity:.4;}
.hero-inner{
  position:relative;
  z-index:1;
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  align-items:center;
}
.eyebrow{
  display:inline-block;
  font-weight:700;
  color:var(--pink-dark);
  background:#FFE1EC;
  padding:8px 18px;
  border-radius:100px;
  font-size:.85rem;
  margin-bottom:22px;
}
.hero h1{
  font-size:clamp(2.1rem, 5vw, 3.2rem);
  font-weight:900;
  line-height:1.4;
  color:var(--dark);
  margin-bottom:20px;
}
.hero h1 .accent{
  background:linear-gradient(120deg, var(--pink), var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-sub{
  font-size:1.05rem;
  color:#4A3A6B;
  margin-bottom:30px;
  max-width:500px;
}
.hero-note{
  margin-top:20px;
  font-size:.88rem;
  color:#6B5A8E;
  font-weight:500;
}
.hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-eq{
  display:flex;
  align-items:flex-end;
  gap:10px;
  height:260px;
  padding:20px;
}
.hero-eq span{
  width:26px;
  border-radius:14px;
  animation:eqbig 1.4s ease-in-out infinite;
}
.hero-eq span:nth-child(1){ background:var(--mint); height:40%; animation-delay:0s;}
.hero-eq span:nth-child(2){ background:var(--yellow); height:75%; animation-delay:.2s;}
.hero-eq span:nth-child(3){ background:var(--pink); height:100%; animation-delay:.4s;}
.hero-eq span:nth-child(4){ background:var(--purple-light); height:60%; animation-delay:.6s;}
.hero-eq span:nth-child(5){ background:var(--pink); height:85%; animation-delay:.3s;}
.hero-eq span:nth-child(6){ background:var(--mint); height:50%; animation-delay:.5s;}
@keyframes eqbig{
  0%,100%{ transform:scaleY(0.5); }
  50%{ transform:scaleY(1); }
}
@media (prefers-reduced-motion:reduce){
  .logo-bars span, .hero-eq span{ animation:none !important; }
}

/* -------- Section basics -------- */
.section{ padding:100px 0; position:relative; }
.section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 56px;
}
.section-tag{
  display:inline-block;
  font-weight:700;
  color:var(--purple);
  font-size:.85rem;
  letter-spacing:.05em;
  margin-bottom:12px;
}
.section-head h2{
  font-size:clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight:900;
  color:var(--dark);
}
.section-head p{ margin-top:16px; color:#5B4B7A; }

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* -------- Features -------- */
.features{ background:var(--bg-soft); }
.feature-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.feature-card{
  background:var(--white);
  border-radius:var(--radius-md);
  padding:32px 24px;
  box-shadow:var(--shadow);
  transition:transform .3s ease;
}
.feature-card:hover{ transform:translateY(-8px); }
.feature-icon{
  width:56px; height:56px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  margin-bottom:18px;
}
.feature-card:nth-child(1) .feature-icon{ background:#FFE1EC; }
.feature-card:nth-child(2) .feature-icon{ background:#FFF1C9; }
.feature-card:nth-child(3) .feature-icon{ background:#D8F7EF; }
.feature-card:nth-child(4) .feature-icon{ background:#EAE1FF; }
.feature-card h3{
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:10px;
}
.feature-card p{ font-size:.92rem; color:#5B4B7A; }

/* -------- Classes (level) -------- */
.levels{ background:var(--bg-soft); }
.level-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.level-card{
  position:relative;
  border-radius:var(--radius-lg);
  padding:34px 26px;
  color:var(--white);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
}
.level-card::before{
  content:'';
  position:absolute;
  top:-40px; right:-40px;
  width:130px; height:130px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
}
.level-card.lv1{ background:linear-gradient(135deg, #00D4B5, #00A98F); }
.level-card.lv2{ background:linear-gradient(135deg, #FFC839, #FF9A2E); }
.level-card.lv3{ background:linear-gradient(135deg, #FF2E7A, #6C2BD9); }
.level-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}
.level-badge{
  display:inline-block;
  font-weight:900;
  font-size:.8rem;
  background:rgba(255,255,255,0.28);
  padding:5px 14px;
  border-radius:100px;
}
.status-badge{
  font-size:.72rem;
  font-weight:700;
  padding:4px 12px;
  border-radius:100px;
  background:rgba(255,255,255,0.9);
}
.status-badge.prep{ color:#8A7AA8; }
.status-badge.open{ color:var(--pink-dark); }
.level-card h3{ font-size:1.2rem; font-weight:900; margin-bottom:6px; }
.level-meta{
  font-size:.8rem;
  font-weight:700;
  opacity:.9;
  margin-bottom:14px;
}
.level-card p{ font-size:.9rem; opacity:.96; margin-bottom:14px; }
.level-target{
  font-size:.82rem;
  background:rgba(255,255,255,0.16);
  border-radius:12px;
  padding:10px 14px;
  margin-top:auto;
}
.levels-note{
  text-align:center;
  font-size:.85rem;
  color:var(--gray);
  margin-top:32px;
}


/* -------- Social slider -------- */
.social{ background:var(--bg); }
.slider{
  position:relative;
  max-width:820px;
  margin:0 auto;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--dark);
  border:5px solid var(--white);
}
.slides{ position:relative; aspect-ratio:4/3; }
.slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity .6s ease;
}
.slide.is-active{ opacity:1; z-index:1; }
.slide img{ width:100%; height:100%; object-fit:cover; }
.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(255,255,255,0.92);
  color:var(--pink-dark);
  font-size:1.7rem;
  line-height:1;
  font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,0.25);
  transition:transform .2s ease;
}
.slider-btn:hover{ transform:translateY(-50%) scale(1.1); }
.slider-btn.prev{ left:14px; }
.slider-btn.next{ right:14px; }
.slider-dots{
  position:absolute;
  left:0; right:0; bottom:14px;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:10px;
}
.slider-dots button{
  width:11px; height:11px;
  border-radius:50%;
  background:rgba(255,255,255,0.6);
  box-shadow:0 1px 4px rgba(0,0,0,0.35);
  transition:transform .2s ease, background .2s ease;
}
.slider-dots button.is-active{ background:var(--pink); transform:scale(1.3); }
.social-note{
  text-align:center;
  font-size:.85rem;
  color:var(--gray);
  margin-top:24px;
}
@media (max-width:600px){
  .slider-btn{ width:38px; height:38px; font-size:1.4rem; }
  .slider-btn.prev{ left:8px; }
  .slider-btn.next{ right:8px; }
}


/* -------- Instructor -------- */
.instructor{ background:var(--bg); }
.instructor-wrap{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:64px;
  align-items:center;
  max-width:980px;
  margin:0 auto;
}
.instructor-photo{ position:relative; }
.instructor-photo::before{
  content:'';
  position:absolute;
  inset:0;
  transform:translate(16px,16px) rotate(3deg);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--yellow), var(--pink));
}
.instructor-photo img{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 15%;
  border-radius:var(--radius-lg);
  border:5px solid var(--white);
  box-shadow:var(--shadow);
}
.instructor-name{
  font-size:2rem;
  font-weight:900;
  line-height:1.3;
  margin-bottom:18px;
}
.instructor-name span{
  display:block;
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-size:.9rem;
  font-weight:500;
  color:var(--gray);
  letter-spacing:.1em;
}
.instructor-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-bottom:24px;
}
.instructor-stats li{
  background:var(--white);
  border-radius:var(--radius-md);
  padding:14px 8px;
  text-align:center;
  box-shadow:0 6px 18px rgba(36,20,66,0.08);
}
.instructor-stats strong{
  display:block;
  font-family:'Zen Maru Gothic', sans-serif;
  font-size:1.5rem;
  font-weight:900;
  line-height:1.2;
  background:linear-gradient(120deg, var(--pink), var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.instructor-stats strong small{ font-size:.75rem; font-weight:700; }
.instructor-stats span{ font-size:.75rem; color:#5B4B7A; font-weight:700; }
.instructor-body p{ font-size:.96rem; color:#3D2C5C; margin-bottom:12px; }
.instructor-message{
  margin-top:20px;
  padding:20px 22px;
  border-left:6px solid var(--pink);
  background:#FFE9F1;
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-weight:700;
  font-size:.96rem;
  color:var(--dark);
}

/* -------- Voices -------- */
.voices{ background:var(--bg); }
.voice-group + .voice-group{ margin-top:64px; }
.voice-group-title{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
  font-size:1.2rem;
  font-weight:900;
}
.voice-group-title::after{
  content:'';
  flex:1;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--pink), transparent);
}
.voice-group-title span{
  background:var(--dark);
  color:var(--white);
  padding:6px 20px;
  border-radius:100px;
}
.voice-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  align-items:start;
}
.voice-card{
  background:var(--white);
  border-radius:var(--radius-md);
  padding:28px 26px;
  box-shadow:var(--shadow);
  border-top:6px solid var(--pink);
}
.voice-card:nth-child(2){ border-top-color:var(--mint); }
.voice-person{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.voice-avatar{
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Zen Maru Gothic', sans-serif;
  font-weight:900;
  font-size:.9rem;
  color:var(--white);
  flex-shrink:0;
  background:linear-gradient(135deg, var(--pink), var(--purple));
}
.voice-card:nth-child(2) .voice-avatar{ background:linear-gradient(135deg, var(--mint), #00A98F); }
.voice-name{ font-weight:700; font-size:1rem; }
.voice-card p{
  font-size:.92rem;
  line-height:1.9;
  color:#3D2C5C;
  margin-bottom:12px;
}
.voice-card p:last-child{ margin-bottom:0; }
@media (max-width:900px){
  .instructor-wrap{ grid-template-columns:1fr; gap:48px; }
  .instructor-photo{ max-width:320px; margin:0 auto; }
  .voice-grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .instructor-name{ font-size:1.7rem; text-align:center; }
  .instructor-stats strong{ font-size:1.2rem; }
  .voice-card{ padding:24px 20px; }
}

/* -------- Programs -------- */
.programs{ background:var(--bg-soft); }
.program-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px;
}
.program-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:34px 30px;
  box-shadow:var(--shadow);
}
.program-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.program-dot{
  width:12px; height:12px;
  border-radius:50%;
}
.program-card:nth-child(1) .program-dot{ background:var(--mint); }
.program-card:nth-child(2) .program-dot{ background:var(--pink); }
.program-title h3{ font-size:1.15rem; font-weight:900; }
.program-card p{ font-size:.92rem; color:#4A3A6B; margin-bottom:18px; }
.program-list-title{
  font-size:.82rem;
  font-weight:700;
  color:var(--purple);
  margin-bottom:8px;
}
.program-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.program-tags span{
  font-size:.78rem;
  background:var(--bg-soft);
  color:#5B4B7A;
  padding:6px 12px;
  border-radius:100px;
}
.program-schedule{
  font-size:.85rem;
  color:var(--dark);
  font-weight:700;
  border-top:1px solid #EFE6F7;
  padding-top:14px;
}
.program-schedule span{ display:block; color:#8A7AA8; font-weight:500; font-size:.8rem; margin-top:2px;}

/* -------- Access -------- */
.access{ background:var(--bg-soft); }
.access-card{
  max-width:640px;
  margin:0 auto;
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:40px 36px;
  box-shadow:var(--shadow);
}
.access-row{
  display:flex;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid #F2ECF9;
}
.access-row:last-child{ border-bottom:none; }
.access-label{
  flex-shrink:0;
  width:110px;
  font-weight:700;
  color:var(--purple);
  font-size:.92rem;
}
.access-value{ font-size:.94rem; color:#3D2C5C; }

/* -------- CTA -------- */
.cta-section{
  background:linear-gradient(135deg, var(--purple), var(--pink));
  color:var(--white);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-section::before, .cta-section::after{
  content:'';
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.12);
}
.cta-section::before{ width:260px; height:260px; top:-100px; left:-80px; }
.cta-section::after{ width:340px; height:340px; bottom:-140px; right:-100px; }
.cta-section h2{
  position:relative;
  font-size:clamp(1.6rem, 4vw, 2.3rem);
  font-weight:900;
  margin-bottom:16px;
}
.cta-section p{
  position:relative;
  max-width:540px;
  margin:0 auto 34px;
  font-size:1rem;
  opacity:.95;
}
.cta-section .btn-row{ position:relative; justify-content:center; }
.cta-section .btn-primary{
  background:var(--white);
  color:var(--pink-dark);
  box-shadow:0 12px 28px rgba(0,0,0,0.2);
}
.cta-section .btn-primary:hover{ box-shadow:0 16px 34px rgba(0,0,0,0.28); }
.cta-section .btn-outline{
  border-color:rgba(255,255,255,0.7);
  color:var(--white);
}
.cta-section .btn-outline:hover{ background:rgba(255,255,255,0.15); }

/* -------- Footer -------- */
.site-footer{
  background:var(--dark);
  color:#D9CFF0;
  padding:56px 0 28px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:32px;
  margin-bottom:28px;
}
.footer-logo{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--white);
  font-weight:900;
  font-size:1.2rem;
}
.footer-logo .logo-bars span{ background:linear-gradient(180deg, var(--yellow), var(--pink)); }
.footer-links{
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  font-size:.9rem;
}
.footer-links a:hover{ color:var(--white); }
.footer-address{
  font-size:.85rem;
  color:#B3A6D6;
  margin-bottom:28px;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12);
  padding-top:22px;
  font-size:.8rem;
  color:#9A8BC0;
  text-align:center;
}

/* -------- Responsive -------- */
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .hero-eq{ height:180px; }
  .feature-grid{ grid-template-columns:repeat(2, 1fr); }
  .level-grid{ grid-template-columns:1fr; }
  .program-grid{ grid-template-columns:1fr; }
}
@media (max-width:1000px){
  .nav{
    position:fixed;
    top:62px; left:0; right:0;
    background:var(--bg);
    flex-direction:column;
    align-items:flex-start;
    padding:24px;
    gap:20px;
    box-shadow:0 12px 24px rgba(36,20,66,0.12);
    transform:translateY(-150%);
    opacity:0;
    transition:transform .3s ease, opacity .3s ease;
  }
  .nav.open{ transform:translateY(0); opacity:1; }
  .nav-cta{ align-self:flex-start; }
  .hamburger{ display:flex; }
}
@media (max-width:600px){
  .section{ padding:70px 0; }
  .hero{ padding:110px 0 70px; }
  .feature-grid{ grid-template-columns:1fr; }
  .access-card{ padding:30px 22px; }
  .access-row{ flex-direction:column; gap:4px; }
  .access-label{ width:auto; }
  .footer-top{ flex-direction:column; }
  .btn-row{ flex-direction:column; }
}