:root{
  --sky:#dff5ff;
  --white:#ffffff;
  --text:#274057;
  --muted:#54738c;
  --line:rgba(74,140,190,.22);
  --pink:#ffd6e7;
  --peach:#ffe4c8;
  --yellow:#fff4a8;
  --mint:#d8f8df;
  --blue:#dceeff;
  --lav:#e9ddff;
  --purple:#8067c2;
  --primary:#ff7e91;
  --primary2:#6ab8ff;
  --shadow:0 14px 40px rgba(88,146,193,.18);
  --radius:30px;
  --header-height:88px;
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  font-family:Inter, system-ui, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#dff5ff 0%,#f7fcff 22%,#fffdf9 58%,#eef9ff 100%);
  line-height:1.6;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto}
a{color:inherit}
button,input,textarea,select{font:inherit}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:1.08}
h1,h2{font-family:"Baloo 2", Inter, sans-serif}
h1{font-size:clamp(2.1rem,4.2vw,4.8rem)}
h2{font-size:clamp(1.9rem,3.7vw,3.5rem)}
h3{font-size:clamp(1.2rem,2vw,1.45rem)}

.container{
  width:min(100% - 2rem, 1240px);
  margin-inline:auto;
}
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
}
.skip-link:focus{
  left:1rem;
  top:1rem;
  z-index:1000;
  background:#fff;
  color:#000;
  padding:.75rem 1rem;
  border-radius:12px;
  box-shadow:var(--shadow);
}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:1rem;
  min-height:var(--header-height);
  padding:1rem clamp(1rem,2vw,2rem);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(122,185,223,.25);
}
.brand{text-decoration:none;min-width:0}
.emblem{display:flex;align-items:center;gap:.8rem;min-width:0}
.emblem-sun{
  width:58px;height:58px;flex:0 0 auto;
  display:grid;place-items:center;border-radius:50%;
  background:
    radial-gradient(circle at center,#fff 0 20%,transparent 22%),
    conic-gradient(#ff8ba7,#ffc66d,#fff28e,#93e7b2,#84cbff,#b8a1ff,#ffffff,#111111,#ff8ba7);
  box-shadow:var(--shadow);
  font-size:1.45rem;
}
.emblem-text{min-width:0}
.emblem-text span{
  display:block;
  font-family:"Baloo 2", Inter, sans-serif;
  font-size:clamp(1rem,1.5vw,1.2rem);
  line-height:1;
  font-weight:800;
  color:var(--text);
}
.emblem-text small{
  display:block;
  margin-top:.15rem;
  color:var(--muted);
  font-weight:800;
  font-size:clamp(.72rem,1vw,.85rem);
}
.nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem;
}
.nav a{
  text-decoration:none;
  color:var(--muted);
  font-weight:800;
  padding:.45rem .2rem;
  border-radius:10px;
}
.nav a:hover,.nav a:focus-visible{color:var(--text)}
.menu-toggle{
  display:none;
  cursor:pointer;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:.6rem .9rem;
  font-weight:900;
  box-shadow:var(--shadow);
}
.lang-switch{
  display:flex;
  gap:.35rem;
  padding:.35rem;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  justify-self:end;
}
.lang-btn{
  cursor:pointer;
  border:0;
  border-radius:999px;
  padding:.55rem .8rem;
  background:transparent;
  color:var(--muted);
  font-weight:900;
  min-width:48px;
}
.lang-btn.active{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
}

.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(3rem,7vw,5rem) 0 4rem;
  min-height:min(95svh, 980px);
  display:flex;
  align-items:center;
}
.hero-inner{
  position:relative;
  z-index:2;
  text-align:center;
}
.hero-chip{
  display:inline-flex;
  padding:.6rem 1rem;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--line);
  font-weight:900;
  color:var(--purple);
  box-shadow:var(--shadow);
}
.hero-subtitle{
  max-width:860px;
  margin:1.25rem auto 0;
  font-size:clamp(1rem,1.6vw,1.35rem);
  color:var(--muted);
}
.hero-buttons{
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:2rem;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  min-width:200px;
  padding:.9rem 1.4rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  border:none;
  box-shadow:var(--shadow);
  transition:transform .18s ease, filter .18s ease;
  text-align:center;
}
.btn:hover,.btn:focus-visible{
  transform:translateY(-2px);
  filter:saturate(1.05);
}
.btn-primary{background:linear-gradient(135deg,var(--primary),#ffb15f);color:#fff}
.btn-secondary{background:linear-gradient(135deg,#72c6ff,#86e1cd);color:#fff}

.hero-cards{
  margin-top:2rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.card-surface,
.mini-card,.panel,.join-card,.location-card,.program-card,.contact-card,.age-card,.color-card{
  background:rgba(255,255,255,.84);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.mini-card{padding:1rem 1.1rem}
.mini-card span{display:block;color:var(--muted);font-size:.92rem;font-weight:800}
.mini-card strong{display:block;margin-top:.2rem;font-size:1.03rem}

.rainbow{
  position:absolute;
  left:50%;
  bottom:-185px;
  transform:translateX(-50%);
  width:min(1320px, 140vw);
  height:min(640px, 68vw);
  border-radius:999px 999px 0 0;
  background:
    radial-gradient(circle at 50% 100%,
      transparent 0 28%,
      #ff8ba7 28% 32.5%,
      #ffc66d 32.5% 37%,
      #fff28e 37% 41.5%,
      #93e7b2 41.5% 46%,
      #84cbff 46% 50.5%,
      #b8a1ff 50.5% 55%,
      #ffffff 55% 59.5%,
      transparent 59.5%);
  opacity:.5;
  z-index:0;
}
.sun{
  position:absolute;
  top:92px;
  right:8%;
  width:112px;height:112px;border-radius:50%;
  background:radial-gradient(circle,#fff9ae 0%,#ffd96e 64%,transparent 66%);
  box-shadow:0 0 80px rgba(255,221,119,.5);
}
.cloud{
  position:absolute;
  background:rgba(255,255,255,.94);
  border-radius:100px;
  box-shadow:var(--shadow);
}
.cloud::before,.cloud::after{
  content:"";
  position:absolute;
  background:rgba(255,255,255,.94);
  border-radius:50%;
}
.cloud-1{width:150px;height:52px;top:115px;left:7%}
.cloud-1::before{width:55px;height:55px;left:18px;top:-20px}
.cloud-1::after{width:68px;height:68px;right:20px;top:-28px}
.cloud-2{width:180px;height:58px;top:205px;right:18%}
.cloud-2::before{width:60px;height:60px;left:26px;top:-24px}
.cloud-2::after{width:78px;height:78px;right:26px;top:-30px}
.cloud-3{width:120px;height:46px;top:315px;left:20%}
.cloud-3::before{width:50px;height:50px;left:15px;top:-18px}
.cloud-3::after{width:56px;height:56px;right:15px;top:-20px}
.flower{
  position:absolute;
  z-index:1;
  font-size:2.1rem;
  filter:drop-shadow(0 8px 14px rgba(88,146,193,.18));
}
.flower-1{left:8%;bottom:16%}
.flower-2{right:8%;bottom:22%}
.flower-3{left:18%;top:52%}

.quote-band{
  padding:1.7rem 0;
  text-align:center;
  background:linear-gradient(135deg,#fff7dc,#f6ebff,#eaf7ff);
  border-block:1px solid rgba(165,193,224,.28);
}
.quote-band p{
  margin-bottom:.3rem;
  font-family:"Baloo 2", Inter, sans-serif;
  font-size:clamp(1.5rem,3vw,3rem);
  font-weight:800;
}
.quote-band span{display:block;color:var(--muted);font-weight:800}

.section{padding:clamp(3rem,5vw,5rem) 0}
.section-heading{
  max-width:900px;
  margin:0 auto 1.8rem;
  text-align:center;
}
.section-tag{
  display:inline-block;
  margin-bottom:.7rem;
  padding:.45rem .85rem;
  border-radius:999px;
  background:#fff;
  color:var(--purple);
  font-weight:900;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.panel{padding:1.6rem}
.big-text{font-size:clamp(1.05rem,1.3vw,1.18rem);color:var(--muted)}
.big-text p{margin:0}

.grid-3,.grid-2{
  display:grid;
  gap:1rem;
}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.color-card,.program-card,.age-card,.contact-card{padding:1.25rem}
.color-card.peach{background:linear-gradient(180deg,#fff4ef,#fff)}
.color-card.blue{background:linear-gradient(180deg,#edf7ff,#fff)}
.color-card.mint{background:linear-gradient(180deg,#effff4,#fff)}
.color-card p,.program-card p,.age-card p,.contact-card p,.section-heading p{
  color:var(--muted);
}
.sky-section{
  background:linear-gradient(135deg,#e9f9ff,#fffef0,#f7ecff);
  border-block:1px solid rgba(165,193,224,.28);
}
.location-card{
  padding:1.5rem;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1rem;
  background:linear-gradient(135deg,#fff8d7,#eff9ff,#f7eeff);
}
.time-box{
  display:inline-block;
  padding:.9rem 1.1rem;
  border-radius:22px;
  background:#fff;
  color:#ff7e61;
  font-weight:900;
  font-size:clamp(1.25rem,2.2vw,1.6rem);
  margin-bottom:1rem;
  box-shadow:var(--shadow);
}
.address{font-size:1.1rem;color:var(--muted)}
.location-right{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
  align-content:center;
}
.bubble{
  min-height:120px;
  display:grid;
  place-items:center;
  border-radius:28px;
  background:rgba(255,255,255,.75);
  font-size:2.1rem;
  box-shadow:var(--shadow);
}
.values-section{background:linear-gradient(180deg,#f8fdff,#fffdf8)}
.values{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  justify-content:center;
}
.values span{
  padding:.8rem 1rem;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  font-weight:900;
  box-shadow:var(--shadow);
}
.join-card{
  text-align:center;
  padding:2rem;
  background:linear-gradient(135deg,#fff0f4,#fffde4,#eaf7ff);
}
.join-card p{color:var(--muted)}
.contact-card a{
  display:inline-block;
  margin-top:.6rem;
  color:#ff718d;
  font-size:1.12rem;
  font-weight:900;
  text-decoration:none;
}
.footer{
  background:rgba(255,255,255,.75);
  border-top:1px solid rgba(165,193,224,.28);
  color:var(--muted);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  padding:1.4rem 0;
}
.footer strong{color:var(--text)}

/* Phones */
@media (max-width: 767px){
  :root{--radius:24px;--header-height:auto}
  .site-header{
    grid-template-columns:auto auto auto;
    align-items:start;
  }
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav{
    display:none;
    grid-column:1 / -1;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:.4rem;
    padding-top:.5rem;
  }
  .nav.open{display:flex}
  .nav a{
    background:rgba(255,255,255,.8);
    padding:.75rem .9rem;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
  }
  .lang-switch{justify-self:end}
  .emblem-text span{font-size:1rem}
  .emblem-text small{font-size:.72rem}
  .emblem-sun{width:48px;height:48px}
  .hero{
    min-height:auto;
    padding-top:2.6rem;
  }
  .hero-buttons{flex-direction:column}
  .btn{width:100%;min-width:0}
  .hero-cards,.grid-3,.grid-2,.location-card{grid-template-columns:1fr}
  .location-right{grid-template-columns:repeat(2,1fr)}
  .rainbow{
    width:900px;
    height:420px;
    bottom:-95px;
  }
  .sun{right:2%;top:110px;width:84px;height:84px}
  .cloud-1{left:-10px}
  .cloud-2{right:-10px}
  .cloud-3{left:8%}
  .footer-inner{flex-direction:column;text-align:center}
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1023px){
  .site-header{
    grid-template-columns:auto 1fr auto;
  }
  .menu-toggle{display:none}
  .nav{justify-content:flex-start}
  .hero-cards,.grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3 > :last-child:nth-child(odd){grid-column:1 / -1}
  .location-card{grid-template-columns:1fr}
  .sun{right:4%}
}

/* Laptops / small desktops */
@media (min-width: 1024px) and (max-width: 1439px){
  .menu-toggle{display:none}
}

/* Large desktops */
@media (min-width: 1440px){
  .container{width:min(100% - 4rem, 1400px)}
  .hero{min-height:92vh}
  .hero-cards{gap:1.25rem}
  .grid-3,.grid-2{gap:1.25rem}
}

/* TV / very large screens */
@media (min-width: 1920px){
  :root{--header-height:104px}
  body{font-size:20px}
  .container{width:min(100% - 6rem, 1680px)}
  .site-header{padding:1.2rem 3rem}
  .emblem-sun{width:72px;height:72px;font-size:1.7rem}
  .emblem-text span{font-size:1.45rem}
  .emblem-text small{font-size:1rem}
  .lang-btn{padding:.7rem 1rem;min-width:58px}
  .hero{min-height:100vh}
  .btn{min-height:64px;min-width:240px;font-size:1.05rem}
  .mini-card,.panel,.join-card,.location-card,.program-card,.contact-card,.age-card,.color-card{
    border-radius:36px;
  }
  .bubble{min-height:150px;font-size:2.7rem}
  .rainbow{
    width:1700px;
    height:780px;
    bottom:-250px;
  }
  .sun{width:140px;height:140px;top:100px}
}


/* ===== v6 readability upgrade ===== */
.hero-text-card{
  position:relative;
  z-index:3;
  max-width:1080px;
  margin:0 auto 1.2rem;
  padding:1rem 1.25rem 1.25rem;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(74,140,190,.18);
  border-radius:34px;
  box-shadow:0 18px 50px rgba(88,146,193,.16);
  backdrop-filter:blur(10px);
}

.hero h1{
  position:relative;
  z-index:3;
  color:#23405b;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}

.hero-subtitle{
  position:relative;
  z-index:3;
  color:#486987;
  font-weight:600;
}

.hero-chip{
  background:rgba(255,255,255,.92);
  color:#7157b5;
}

.rainbow{
  bottom:-255px !important;
  opacity:.38 !important;
  filter:saturate(.95);
  background:
    radial-gradient(circle at 50% 100%,
      transparent 0 28%,
      #ff8ba7 28% 32.5%,
      #ffc66d 32.5% 37%,
      #fff28e 37% 41.5%,
      #93e7b2 41.5% 46%,
      #84cbff 46% 50.5%,
      #b8a1ff 50.5% 55%,
      rgba(255,255,255,.92) 55% 59.5%,
      transparent 59.5%) !important;
}

.hero-cards{
  position:relative;
  z-index:3;
}

@media (max-width: 767px){
  .hero-text-card{
    padding:1rem 1rem 1.15rem;
    border-radius:24px;
    margin-bottom:1rem;
    background:rgba(255,255,255,.84);
  }
  .rainbow{
    bottom:-145px !important;
    opacity:.38 !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px){
  .rainbow{
    bottom:-210px !important;
    opacity:.4 !important;
  }
}

@media (min-width: 1920px){
  .hero-text-card{
    max-width:1100px;
    padding:1.6rem 1.8rem 1.9rem;
    border-radius:40px;
  }
  .rainbow{
    bottom:-320px !important;
  }
}


/* ===== v7 hero scale refinement ===== */
.hero h1{
  max-width: 1000px;
  margin-inline: auto;
}

@media (max-width: 767px){
  .hero h1{
    font-size: clamp(2rem, 9vw, 3rem);
  }
}

@media (min-width: 768px) and (max-width: 1439px){
  .hero h1{
    font-size: clamp(2.5rem, 6vw, 4.6rem);
  }
}

@media (min-width: 1920px){
  .hero h1{
    font-size: clamp(3.2rem, 4.2vw, 5.4rem);
    max-width: 1200px;
  }
}


/* ===== v8 rainbow refinement ===== */
.rainbow{
  bottom:-245px !important;
  opacity:.42 !important;
  filter:saturate(1.02);
  background:
    radial-gradient(circle at 50% 100%,
      transparent 0 26%,
      rgba(255,255,255,.96) 26% 30.2%,
      #ff9aba 30.2% 34.4%,
      #ffbf7a 34.4% 38.6%,
      #fff29a 38.6% 42.8%,
      #9be7b0 42.8% 47%,
      #95d2ff 47% 51.2%,
      #9ba6ff 51.2% 55.4%,
      #c3a8ff 55.4% 59.6%,
      rgba(50,50,58,.34) 59.6% 63.8%,
      transparent 63.8%) !important;
}

@media (max-width: 767px){
  .rainbow{
    bottom:-140px !important;
    opacity:.38 !important;
  }
}

@media (min-width: 768px) and (max-width: 1439px){
  .rainbow{
    bottom:-210px !important;
    opacity:.4 !important;
  }
}

@media (min-width: 1920px){
  .rainbow{
    bottom:-315px !important;
    opacity:.44 !important;
  }
}


/* ===== v9 rainbow reorder ===== */
/* Order from inner/bottom to outer/top:
   black -> red -> orange -> yellow -> green -> blue -> indigo -> violet -> white */
.rainbow{
  bottom:-245px !important;
  opacity:.42 !important;
  filter:saturate(1.02);
  background:
    radial-gradient(circle at 50% 100%,
      transparent 0 24%,
      rgba(42,42,48,.34) 24% 28.2%,
      #ff8ea8 28.2% 32.4%,
      #ffc27b 32.4% 36.6%,
      #fff29a 36.6% 40.8%,
      #9de8b1 40.8% 45%,
      #97d3ff 45% 49.2%,
      #9da9ff 49.2% 53.4%,
      #c9b1ff 53.4% 57.6%,
      rgba(255,255,255,.96) 57.6% 61.8%,
      transparent 61.8%) !important;
}

@media (max-width: 767px){
  .rainbow{
    bottom:-140px !important;
    opacity:.38 !important;
  }
}

@media (min-width: 768px) and (max-width: 1439px){
  .rainbow{
    bottom:-210px !important;
    opacity:.4 !important;
  }
}

@media (min-width: 1920px){
  .rainbow{
    bottom:-315px !important;
    opacity:.44 !important;
  }
}


/* ===== v10 final polish ===== */

/* smoother anchor navigation */
section[id]{
  scroll-margin-top: 110px;
}

/* header more elegant */
.site-header{
  box-shadow: 0 8px 24px rgba(88,146,193,.06);
}

.nav a{
  padding: .55rem .9rem;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.nav a:hover,
.nav a:focus-visible{
  background: rgba(255,255,255,.88);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* cleaner hero */
.hero{
  padding-bottom: 5rem;
}

.hero-text-card{
  box-shadow: 0 22px 60px rgba(88,146,193,.14);
}

.hero-buttons{
  margin-top: 1.6rem;
}

.hero-cards{
  align-items: stretch;
}

.mini-card{
  min-height: 102px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

/* unified card rhythm */
.color-card,
.program-card,
.age-card,
.contact-card{
  min-height: 100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.program-card,
.age-card,
.contact-card,
.color-card{
  transition: transform .18s ease, box-shadow .18s ease;
}

.program-card:hover,
.age-card:hover,
.contact-card:hover,
.color-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(88,146,193,.16);
}

/* tighter content layout */
.section-heading{
  margin-bottom: 2rem;
}

.section-heading p{
  max-width: 760px;
  margin-inline: auto;
}

/* cards area near rainbow */
.location-card{
  align-items: center;
}

.location-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

.bubble{
  min-height: 128px;
}

/* values and footer polish */
.values span{
  transition: transform .18s ease, box-shadow .18s ease;
}
.values span:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(88,146,193,.16);
}

.footer p{
  margin: .2rem 0 0;
}

.footer-inner{
  min-height: 78px;
}

/* mobile polish */
@media (max-width: 767px){
  .hero{
    padding-bottom: 3.8rem;
  }

  .mini-card{
    min-height: 88px;
  }

  .location-left{
    align-items: stretch;
  }

  .location-left .btn{
    width: 100%;
  }
}

/* TV polish */
@media (min-width: 1920px){
  .mini-card{
    min-height: 126px;
  }

  .footer-inner{
    min-height: 96px;
  }
}