/* =========================================================
   Playful theme — scoped ONLY to the STEM & Robotics page
   (loaded in addition to style.css, never affects other pages)
   ========================================================= */
body.stem-page{
  --stem-teal:   #12B5A6;
  --stem-coral:  #FF6B57;
  --stem-violet: #7C5CFC;
  --stem-yellow: #FFC93C;
  --stem-ink:    #14213D;
  --f-stem-display: 'Baloo 2', var(--f-display);
}

body.stem-page .stem-hero{
  background:
    radial-gradient(560px 320px at 90% 0%, rgba(124,92,252,.16), transparent),
    radial-gradient(500px 280px at 6% 100%, rgba(18,181,166,.14), transparent),
    #FFFDF7;
  border-bottom:none;
  position:relative;
  overflow:hidden;
}
body.stem-page .stem-hero h1{
  font-family:var(--f-stem-display);
  font-weight:700;
  letter-spacing:0;
}
body.stem-page .stem-hero .eyebrow{ color:var(--stem-violet); }

body.stem-page .shape{ position:absolute; border-radius:40%; opacity:.85; filter:blur(0px); z-index:0; }

body.stem-page h2, body.stem-page h3{ font-family:var(--f-stem-display); font-weight:700; letter-spacing:0; }

body.stem-page .age-card{
  border-radius:22px; border:none; padding:28px; color:#fff; position:relative; overflow:hidden;
}
body.stem-page .age-card:hover{ transform:translateY(-4px) rotate(-.4deg); }
body.stem-page .age-card h3{ color:#fff; }
body.stem-page .age-card p{ color:rgba(255,255,255,.92); }
body.stem-page .age-card .age-tag{
  font-family:var(--f-mono); font-size:.72rem; background:rgba(255,255,255,.22); color:#fff;
  padding:.3em .8em; border-radius:100px; display:inline-block; margin-bottom:14px;
}
.age-card.c-teal{ background:linear-gradient(155deg, var(--stem-teal), #0c8579); }
.age-card.c-coral{ background:linear-gradient(155deg, var(--stem-coral), #d94a38); }
.age-card.c-violet{ background:linear-gradient(155deg, var(--stem-violet), #5738d1); }

body.stem-page .skill-pill{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--f-body); font-weight:600; font-size:.86rem;
  padding:.55em 1.1em; border-radius:100px; margin:0 8px 8px 0; color:var(--stem-ink);
}
body.stem-page .skill-pill.p1{ background:#FDE9C8; }
body.stem-page .skill-pill.p2{ background:#D6F3EF; }
body.stem-page .skill-pill.p3{ background:#E7E1FE; }
body.stem-page .skill-pill.p4{ background:#FFE1DB; }

body.stem-page .btn-primary{ background:var(--stem-violet); }
body.stem-page .btn-primary:hover{ background:#5738d1; }
body.stem-page .card:hover{ box-shadow:0 14px 34px rgba(124,92,252,.18); }

body.stem-page .hex-row{ display:flex; flex-wrap:wrap; gap:16px; margin:30px 0; }
body.stem-page .hex{
  width:118px; height:104px; clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:10px;
  font-family:var(--f-body); font-weight:700; font-size:.82rem; color:#fff;
}
body.stem-page .hex:nth-child(4n+1){ background:var(--stem-teal); }
body.stem-page .hex:nth-child(4n+2){ background:var(--stem-coral); }
body.stem-page .hex:nth-child(4n+3){ background:var(--stem-violet); }
body.stem-page .hex:nth-child(4n+4){ background:#2E9BD6; }