:root{
  --pink:#ff8fb1;--pink-bg:#ffe3ec;--blue:#5cc8ff;--blue-bg:#dff3ff;
  --green:#7bd389;--green-bg:#e2f7e3;--yellow:#ffd45e;--yellow-bg:#fff4d6;
  --ink:#3a2e3f;--cream:#fffdf7;--purple:#8b5cf6;
  --head:'Baloo 2',system-ui,sans-serif;--body:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--cream);line-height:1.7}
h1,h2,h3,h4,.logo{font-family:var(--head);line-height:1.15;color:var(--ink)}
h1{font-size:clamp(2rem,5vw,3.2rem);margin:.2em 0 .4em}
h2{font-size:clamp(1.5rem,3vw,2.2rem)}
a{color:#d6336c;font-weight:700;text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;display:block;border-radius:18px}
main{max-width:1080px;margin:0 auto;padding:1.5rem clamp(1rem,4vw,2.5rem) 3rem}
.lead{font-size:1.2rem;max-width:60ch}.big{font-size:1.3rem}

/* header */
.site-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:#fff;border-bottom:4px solid var(--yellow);padding:.7rem clamp(1rem,4vw,2rem);box-shadow:0 4px 18px rgba(0,0,0,.06)}
.logo{font-size:1.3rem;font-weight:800;color:var(--purple);display:flex;align-items:center;gap:.5rem}
.logo-badge{width:32px;height:32px;flex:none;border-radius:50%;object-fit:cover;border:0}
.site-head nav{display:flex;flex-wrap:wrap;gap:.2rem .4rem;margin-left:auto}
.site-head nav a{color:var(--ink);font-weight:700;padding:.35rem .7rem;border-radius:999px;font-size:.95rem}
.site-head nav a:hover{background:var(--pink-bg);text-decoration:none}
.site-head nav a.on{background:var(--purple);color:#fff}
.burger{display:none;margin-left:auto;font-size:1.5rem;background:none;border:0;cursor:pointer}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center;
  background:linear-gradient(135deg,var(--pink-bg),var(--blue-bg));border-radius:28px;padding:2rem;margin-top:1rem}
.hero-img{aspect-ratio:4/3;object-fit:cover;box-shadow:0 14px 36px rgba(0,0,0,.15)}
.hero h1 span{color:var(--purple)}
.btn{display:inline-block;background:var(--pink);color:#fff;font-family:var(--head);font-weight:700;
  padding:.8rem 1.6rem;border-radius:999px;border:0;font-size:1.05rem;cursor:pointer;box-shadow:0 8px 20px rgba(255,143,177,.5)}
.btn:hover{background:#ff6f9c;text-decoration:none;transform:translateY(-2px);transition:.15s}

/* cards */
.band{margin:2.5rem 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin:1.5rem 0}
.card{border-radius:22px;padding:1.4rem 1.5rem;border:3px solid #fff;box-shadow:0 8px 22px rgba(0,0,0,.07)}
.card h3{margin:.1em 0 .4em}
.card.teacher{text-align:center}
.card.teacher img{width:130px;height:130px;border-radius:50%;object-fit:cover;margin:0 auto .6rem;border:4px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.12)}.card.pink{background:var(--pink-bg)}.card.blue{background:var(--blue-bg)}
.card.green{background:var(--green-bg)}.card.yellow{background:var(--yellow-bg)}

/* feature rows */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;margin:2.5rem 0}
.feature.reverse{direction:rtl}.feature.reverse>*{direction:ltr}
.feature img{aspect-ratio:4/3;object-fit:cover;box-shadow:0 12px 30px rgba(0,0,0,.12)}
img.wide{width:100%;aspect-ratio:16/7;object-fit:cover;margin:1rem 0}

ul.ticks{list-style:none;padding:0;max-width:60ch}
ul.ticks li{padding:.4rem 0 .4rem 2rem;position:relative}
ul.ticks li:before{content:"🌟";position:absolute;left:0}
.timeline{list-style:none;padding:0;max-width:62ch}
.timeline li{background:#fff;border-left:6px solid var(--blue);border-radius:0 14px 14px 0;padding:.8rem 1.1rem;margin:.6rem 0;box-shadow:0 5px 14px rgba(0,0,0,.05)}
.callout{border-radius:18px;padding:1.2rem 1.4rem;margin:1.6rem 0;font-size:1.1rem;border:3px dashed #fff}
.callout.pink{background:var(--pink-bg)}.callout.blue{background:var(--blue-bg)}.callout.yellow{background:var(--yellow-bg)}
.ai-note{color:#8a7;font-style:italic}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.5rem 0}
.gallery figure{margin:0}.gallery img{aspect-ratio:1;object-fit:cover}
.gallery figcaption{font-size:.85rem;color:#8a7d8f;padding:.3rem .2rem}

/* forms */
.formwrap{background:linear-gradient(135deg,var(--yellow-bg),var(--green-bg));border-radius:24px;padding:1.6rem;margin:1.5rem 0}
.ll-form{display:grid;gap:.9rem;max-width:560px}
.ll-form label{font-family:var(--head);font-weight:700;display:grid;gap:.3rem}
.ll-form input,.ll-form select,.ll-form textarea{font:inherit;padding:.6rem .7rem;border:2px solid #fff;border-radius:12px;background:#fff}
.thanks{background:var(--green-bg);border-radius:14px;padding:1rem;font-weight:700}
.formnote{font-size:.85rem;color:#8a7d8f}

/* footer */
.site-foot{background:var(--purple);color:#fff;margin-top:3rem;padding:2.2rem clamp(1rem,4vw,2.5rem) 1.5rem}
.site-foot a{color:#ffd45e}.site-foot h4{color:#fff;margin:.2em 0 .5em}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;max-width:1080px;margin:0 auto}
.foot-nav{display:flex;flex-direction:column;gap:.1rem}.foot-nav a{font-weight:600}
.credits{list-style:none;padding:0;margin:0;font-size:.8rem;display:grid;gap:.25rem}
.tiny{font-size:.78rem;opacity:.85}.center{text-align:center;margin-top:1.5rem}

@media(max-width:760px){
  .hero,.feature{grid-template-columns:1fr}.feature.reverse{direction:ltr}
  .site-head nav{display:none;width:100%;flex-direction:column}
  body.nav-open .site-head nav{display:flex}.burger{display:block}
}