/*
Theme Name: MiniSkills
Theme URI: https://miniskills.nl
Author: MiniSkills
Author URI: https://miniskills.nl
Description: Het officiële WordPress thema voor MiniSkills — skills die school niet leert, voor kinderen van 8 t/m 18 jaar samen met hun ouders. Inclusief papieren vliegtuigje branding, leeftijdsgroepen, skills, projecten en badges.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: miniskills
Tags: education, children, skills, custom-colors, custom-logo, full-width-template, sticky-post, theme-options
*/

/* ============================================
   MINISKILLS WORDPRESS THEME — MAIN STYLESHEET
   ============================================ */

:root {
  --ms-green:         #3B6D11;
  --ms-green-light:   #EAF3DE;
  --ms-green-mid:     #639922;
  --ms-green-dark:    #27500A;
  --ms-teal:          #0F6E56;
  --ms-teal-light:    #E1F5EE;
  --ms-teal-mid:      #1D9E75;
  --ms-amber:         #854F0B;
  --ms-amber-light:   #FAEEDA;
  --ms-amber-mid:     #BA7517;
  --ms-purple:        #3C3489;
  --ms-purple-light:  #EEEDFE;
  --ms-purple-mid:    #7F77DD;
  --ms-coral:         #993C1D;
  --ms-coral-light:   #FAECE7;
  --ms-coral-mid:     #D85A30;
  --ms-blue:          #0C447C;
  --ms-blue-light:    #E6F1FB;
  --ms-blue-mid:      #378ADD;
  --ms-pink:          #72243E;
  --ms-pink-light:    #FBEAF0;
  --ms-pink-mid:      #D4537E;
  --ms-bg:            #FFFDF7;
  --ms-text:          #2C2C2A;
  --ms-muted:         #5F5E5A;
  --ms-border:        #E8E6DF;
  --ms-radius:        16px;
  --ms-radius-lg:     24px;
  --ms-font-body:     'Nunito', sans-serif;
  --ms-font-heading:  'Baloo 2', cursive;
}

/* === RESET & BASE === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--ms-font-body);
  background: var(--ms-bg);
  color: var(--ms-text);
  overflow-x: hidden;
  line-height: 1.7;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ms-green); text-decoration: none; transition: color .2s; }
a:hover { color: var(--ms-teal); }
ul { list-style: none; }

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ms-font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ms-text);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; font-family: var(--ms-font-body); }
p  { margin-bottom: 1rem; }

/* === LAYOUT === */
.ms-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 2rem;
}
.ms-section {
  padding: 4rem 0;
}
.ms-section--white  { background: white; }
.ms-section--soft   { background: #F5FBF0; }
.ms-section--green  { background: var(--ms-green-light); }
.ms-section--hero   { background: linear-gradient(175deg, #F0F9E8 0%, var(--ms-bg) 60%); }
.ms-section--cta    { background: var(--ms-green); color: white; }
.ms-section--dark   { background: #1A1A18; color: #888780; }

.ms-section-title {
  font-family: var(--ms-font-heading);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: .4rem;
  color: var(--ms-text);
}
.ms-section-sub {
  text-align: center;
  color: var(--ms-muted);
  margin-bottom: 2.5rem;
  font-size: 1rem;
  line-height: 1.65;
}
.ms-section--cta .ms-section-title,
.ms-section--cta .ms-section-sub { color: white; }

/* === BUTTONS === */
.ms-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ms-font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: .85rem 2rem;
  border-radius: 100px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .2s, background .2s, box-shadow .2s;
  text-decoration: none;
}
.ms-btn:hover { transform: translateY(-2px); }
.ms-btn--primary {
  background: var(--ms-green);
  color: white;
  box-shadow: 0 4px 16px rgba(59,109,17,.25);
}
.ms-btn--primary:hover { background: var(--ms-teal); color: white; }
.ms-btn--secondary {
  background: white;
  color: var(--ms-green);
  border-color: var(--ms-green);
}
.ms-btn--secondary:hover { background: var(--ms-green-light); color: var(--ms-green); }
.ms-btn--white {
  background: white;
  color: var(--ms-green);
}
.ms-btn--white:hover { box-shadow: 0 6px 20px rgba(0,0,0,.15); color: var(--ms-green); }
.ms-btn--outline-white {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,.6);
}
.ms-btn--outline-white:hover { background: rgba(255,255,255,.1); border-color: white; color: white; }
.ms-btn-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* === PAPER PLANE SVG LOGO === */
.ms-logo-plane {
  display: inline-block;
  vertical-align: middle;
}

/* === NAVIGATION === */
.ms-nav {
  background: white;
  border-bottom: 2px solid var(--ms-green-light);
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.ms-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 2rem;
}
.ms-nav__logo {
  font-family: var(--ms-font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ms-green);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.ms-nav__logo:hover { color: var(--ms-teal); }
.ms-nav__logo-icon {
  width: 36px;
  height: 36px;
  background: var(--ms-green);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}
.ms-nav__logo:hover .ms-nav__logo-icon { background: var(--ms-teal); }
.ms-nav__menu {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.ms-nav__menu a {
  color: var(--ms-muted);
  font-weight: 600;
  font-size: .9rem;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.ms-nav__menu a:hover,
.ms-nav__menu .current-menu-item > a {
  color: var(--ms-green);
  border-bottom-color: var(--ms-green-mid);
}
.ms-nav__right {
  display: flex;
  gap: .75rem;
  align-items: center;
}
.ms-nav__login {
  background: none;
  border: 2px solid var(--ms-border);
  padding: .45rem 1rem;
  border-radius: 100px;
  font-family: var(--ms-font-body);
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  color: var(--ms-muted);
  transition: all .2s;
  text-decoration: none;
}
.ms-nav__login:hover { border-color: var(--ms-green); color: var(--ms-green); }
.ms-nav__cta {
  background: var(--ms-green);
  color: white !important;
  border: none;
  padding: .5rem 1.25rem;
  border-radius: 100px;
  font-family: var(--ms-font-body);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: background .2s;
}
.ms-nav__cta:hover { background: var(--ms-teal); }
.ms-nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: .25rem;
}
.ms-nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ms-text);
  border-radius: 2px;
  transition: all .3s;
}

/* === HERO === */
.ms-hero {
  padding: 5rem 2rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ms-hero__badge {
  display: inline-block;
  background: var(--ms-amber-light);
  color: var(--ms-amber);
  border-radius: 100px;
  padding: .35rem 1.1rem;
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  border: 1.5px solid #FAC775;
}
.ms-hero h1 { margin-bottom: 1.1rem; }
.ms-hero h1 .accent  { color: var(--ms-green); }
.ms-hero h1 .accent2 { color: var(--ms-amber-mid); }
.ms-hero__sub {
  font-size: 1.1rem;
  color: var(--ms-muted);
  max-width: 580px;
  margin: 0 auto 2.25rem;
  line-height: 1.75;
}
.ms-hero__btns { margin-bottom: 3rem; justify-content: center; }
.ms-hero__stats {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.ms-hero__stat-num {
  font-family: var(--ms-font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ms-green);
}
.ms-hero__stat-label {
  font-size: .8rem;
  color: var(--ms-muted);
  font-weight: 600;
}

/* Blobs */
.ms-blob {
  position: absolute;
  border-radius: 50%;
  opacity: .12;
  pointer-events: none;
  filter: blur(2px);
}
.ms-blob--1 { width: 350px; height: 350px; background: var(--ms-green-mid); top: -100px; left: -100px; }
.ms-blob--2 { width: 220px; height: 220px; background: var(--ms-amber-mid); top: 40px;  right: -70px; }
.ms-blob--3 { width: 180px; height: 180px; background: var(--ms-teal-mid);  bottom:-50px; left: 35%; }

/* Paper planes */
.ms-deco-plane {
  position: absolute;
  pointer-events: none;
}
.ms-deco-plane--1 { width: 90px; height: 90px; top: 60px;  left: 6%;  animation: msFloatPlane 8s  ease-in-out infinite; }
.ms-deco-plane--2 { width: 60px; height: 60px; top: 30px;  right: 8%; animation: msFloatPlane 10s ease-in-out infinite reverse; }
.ms-deco-plane--3 { width: 45px; height: 45px; bottom:40px;left: 55%; animation: msFloatPlane 12s ease-in-out infinite 2s; }
@keyframes msFloatPlane {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-14px) rotate(3deg); }
}

/* Plane dividers */
.ms-plane-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 2rem;
  gap: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}
.ms-plane-divider svg { width: 32px; height: 32px; opacity: .4; flex-shrink: 0; }
.ms-plane-divider::before,
.ms-plane-divider::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: var(--ms-border);
}

/* CTA planes */
.ms-cta-plane {
  position: absolute;
  pointer-events: none;
}
.ms-cta-plane--1 { width: 80px; height: 80px; top: 20px;    left: 5%;  opacity: .18; animation: msFloatPlane 9s  ease-in-out infinite; }
.ms-cta-plane--2 { width: 50px; height: 50px; bottom: 25px; right: 7%; opacity: .15; animation: msFloatPlane 11s ease-in-out infinite reverse 1s; }

/* === AGE TABS === */
.ms-age-tabs {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.ms-age-tab {
  border: 2px solid var(--ms-border);
  padding: .55rem 1.5rem;
  border-radius: 100px;
  font-family: var(--ms-font-body);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: all .2s;
  background: white;
  color: var(--ms-muted);
}
.ms-age-tab--sprout.active,   .ms-age-tab--sprout:hover   { border-color: #97C459;           color: var(--ms-green);  background: var(--ms-green-light);  }
.ms-age-tab--explorer.active, .ms-age-tab--explorer:hover { border-color: var(--ms-amber-mid);color: var(--ms-amber);  background: var(--ms-amber-light); }
.ms-age-tab--builder.active,  .ms-age-tab--builder:hover  { border-color: var(--ms-purple-mid);color:var(--ms-purple); background: var(--ms-purple-light); }

.ms-age-panel { display: none; animation: msFadeIn .3s ease; }
.ms-age-panel.active { display: block; }
@keyframes msFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ms-age-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding: 1.5rem;
  border-radius: var(--ms-radius-lg);
  border: 2px solid;
}
.ms-age-header--sprout   { background: var(--ms-green-light);  border-color: #97C459; }
.ms-age-header--explorer { background: var(--ms-amber-light);  border-color: var(--ms-amber-mid); }
.ms-age-header--builder  { background: var(--ms-purple-light); border-color: var(--ms-purple-mid); }
.ms-age-header__emoji { font-size: 2.8rem; }
.ms-age-header__title { font-family: var(--ms-font-heading); font-size: 1.45rem; font-weight: 700; margin-bottom: .2rem; }
.ms-age-header__desc  { font-size: .9rem; color: var(--ms-muted); line-height: 1.5; margin: 0; }

/* === SKILLS GRID === */
.ms-skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}
.ms-skill-card {
  background: white;
  border-radius: var(--ms-radius);
  border: 2px solid var(--ms-border);
  padding: 1.25rem;
  cursor: pointer;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.ms-skill-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,.09);
}
.ms-skill-card--law:hover     { border-color: var(--ms-blue-mid); }
.ms-skill-card--money:hover   { border-color: var(--ms-amber-mid); }
.ms-skill-card--craft:hover   { border-color: var(--ms-coral-mid); }
.ms-skill-card--digital:hover { border-color: var(--ms-purple-mid); }
.ms-skill-card--nature:hover  { border-color: var(--ms-green-mid); }
.ms-skill-card--social:hover  { border-color: var(--ms-pink-mid); }
.ms-skill-card--health:hover  { border-color: var(--ms-teal-mid); }
.ms-skill-card__icon { font-size: 2rem; margin-bottom: .75rem; display: block; }
.ms-skill-card__tag {
  display: inline-block;
  padding: .22rem .65rem;
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
.ms-tag--law     { background: var(--ms-blue-light);   color: var(--ms-blue); }
.ms-tag--money   { background: var(--ms-amber-light);  color: var(--ms-amber); }
.ms-tag--craft   { background: var(--ms-coral-light);  color: var(--ms-coral); }
.ms-tag--digital { background: var(--ms-purple-light); color: var(--ms-purple); }
.ms-tag--nature  { background: var(--ms-green-light);  color: var(--ms-green); }
.ms-tag--social  { background: var(--ms-pink-light);   color: var(--ms-pink); }
.ms-tag--health  { background: var(--ms-teal-light);   color: var(--ms-teal); }
.ms-skill-card__title { font-weight: 700; font-size: .92rem; margin-bottom: .3rem; line-height: 1.35; }
.ms-skill-card__desc  { font-size: .78rem; color: var(--ms-muted); line-height: 1.55; margin: 0; }
.ms-difficulty { display: flex; gap: 3px; align-items: center; margin-top: .75rem; }
.ms-difficulty__label { font-size: .68rem; color: var(--ms-muted); margin-right: 4px; font-weight: 600; }
.ms-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ms-border); }
.ms-dot--filled { background: var(--ms-green-mid); }

/* === HOW IT WORKS === */
.ms-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
.ms-step { text-align: center; padding: 1.5rem 1rem; position: relative; }
.ms-step__num {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ms-font-heading);
  font-weight: 800; font-size: 1.3rem;
  margin: 0 auto 1rem;
}
.ms-step:nth-child(1) .ms-step__num { background: var(--ms-green-light);  color: var(--ms-green); }
.ms-step:nth-child(2) .ms-step__num { background: var(--ms-amber-light);  color: var(--ms-amber); }
.ms-step:nth-child(3) .ms-step__num { background: var(--ms-purple-light); color: var(--ms-purple); }
.ms-step:nth-child(4) .ms-step__num { background: var(--ms-teal-light);   color: var(--ms-teal); }
.ms-step:nth-child(5) .ms-step__num { background: var(--ms-coral-light);  color: var(--ms-coral); }
.ms-step__title { font-weight: 700; margin-bottom: .5rem; font-size: 1rem; }
.ms-step__desc  { font-size: .85rem; color: var(--ms-muted); line-height: 1.6; margin: 0; }

/* === PROJECT CARDS === */
.ms-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.25rem;
}
.ms-project-card {
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
  border: 2px solid var(--ms-border);
  background: white;
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.ms-project-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.1); }
.ms-project-card__top {
  padding: 1.5rem;
}
.ms-project-card__top--green  { background: var(--ms-green-light); }
.ms-project-card__top--amber  { background: var(--ms-amber-light); }
.ms-project-card__top--purple { background: var(--ms-purple-light); }
.ms-project-card__top--teal   { background: var(--ms-teal-light); }
.ms-project-card__top--coral  { background: var(--ms-coral-light); }
.ms-project-card__top--pink   { background: var(--ms-pink-light); }
.ms-project-card__emoji { font-size: 3rem; display: block; margin-bottom: .75rem; }
.ms-project-card__title { font-family: var(--ms-font-heading); font-size: 1.15rem; font-weight: 700; margin-bottom: .4rem; line-height: 1.3; }
.ms-project-meta { display: flex; gap: .4rem; flex-wrap: wrap; }
.ms-meta-pill {
  background: white;
  border-radius: 100px;
  padding: .2rem .65rem;
  font-size: .7rem;
  font-weight: 600;
  color: var(--ms-muted);
}
.ms-project-card__body { padding: 1.25rem; flex: 1; }
.ms-project-card__desc { font-size: .85rem; color: var(--ms-muted); line-height: 1.6; margin-bottom: 1rem; }
.ms-project-skills { display: flex; gap: .4rem; flex-wrap: wrap; }
.ms-skill-pill {
  background: var(--ms-green-light);
  color: var(--ms-green);
  border-radius: 100px;
  padding: .2rem .65rem;
  font-size: .72rem;
  font-weight: 700;
}

/* === BADGES === */
.ms-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}
.ms-badge-card {
  background: white;
  border-radius: var(--ms-radius-lg);
  border: 2px solid var(--ms-border);
  padding: 1.5rem 1rem;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
.ms-badge-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.ms-badge-card--locked { opacity: .45; filter: grayscale(.6); }
.ms-badge__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  margin: 0 auto .75rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem;
  border: 3px solid;
}
.ms-badge__icon--gold   { background: #FFF8E6;              border-color: #EF9F27; }
.ms-badge__icon--silver { background: #F4F4F4;              border-color: #B4B2A9; }
.ms-badge__icon--green  { background: var(--ms-green-light);  border-color: var(--ms-green-mid); }
.ms-badge__icon--purple { background: var(--ms-purple-light); border-color: var(--ms-purple-mid); }
.ms-badge__icon--teal   { background: var(--ms-teal-light);   border-color: var(--ms-teal-mid); }
.ms-badge__icon--coral  { background: var(--ms-coral-light);  border-color: var(--ms-coral-mid); }
.ms-badge__name  { font-weight: 700; font-size: .82rem; color: var(--ms-text); margin-bottom: .25rem; line-height: 1.3; }
.ms-badge__desc  { font-size: .72rem; color: var(--ms-muted); line-height: 1.4; margin: 0; }
.ms-badge__lock  { position: absolute; top: .6rem; right: .6rem; font-size: .8rem; opacity: .5; }
.ms-badge__earned {
  position: absolute; top: .5rem; right: .5rem;
  background: var(--ms-green); color: white;
  border-radius: 100px; font-size: .6rem; font-weight: 700; padding: .15rem .4rem;
}

/* === ONBOARDING FORM === */
.ms-onboarding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.ms-flow { display: flex; flex-direction: column; gap: 1rem; }
.ms-flow-step {
  background: white;
  border-radius: var(--ms-radius);
  border: 2px solid var(--ms-border);
  padding: 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: border-color .2s;
}
.ms-flow-step--active { border-color: var(--ms-green-mid); box-shadow: 0 4px 16px rgba(99,153,34,.15); }
.ms-flow-step__num {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 50%;
  background: var(--ms-green);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem;
  font-family: var(--ms-font-heading);
}
.ms-flow-step__num--amber  { background: var(--ms-amber-mid); }
.ms-flow-step__num--purple { background: var(--ms-purple-mid); }
.ms-flow-step__num--teal   { background: var(--ms-teal-mid); }
.ms-flow-step__num--coral  { background: var(--ms-coral-mid); }
.ms-flow-step__title { font-weight: 700; font-size: .95rem; margin-bottom: .25rem; }
.ms-flow-step__desc  { font-size: .82rem; color: var(--ms-muted); line-height: 1.55; margin: 0; }
.ms-signup-card {
  background: white;
  border-radius: var(--ms-radius-lg);
  border: 2px solid var(--ms-green-mid);
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(59,109,17,.1);
}
.ms-signup-card__title { font-family: var(--ms-font-heading); font-size: 1.4rem; margin-bottom: .5rem; color: var(--ms-green); }
.ms-signup-card__desc  { font-size: .9rem; color: var(--ms-muted); margin-bottom: 1.5rem; line-height: 1.6; }
.ms-form-group { margin-bottom: 1rem; }
.ms-form-label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .4rem; color: var(--ms-text); }
.ms-form-input,
.ms-form-select {
  width: 100%;
  border: 2px solid var(--ms-border);
  border-radius: 10px;
  padding: .65rem .9rem;
  font-family: var(--ms-font-body);
  font-size: .9rem;
  color: var(--ms-text);
  transition: border-color .2s;
  background: white;
  appearance: auto;
}
.ms-form-input:focus,
.ms-form-select:focus { outline: none; border-color: var(--ms-green-mid); }
.ms-checkbox-group { display: flex; flex-direction: column; gap: .5rem; margin-top: .25rem; }
.ms-checkbox-item { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--ms-text); }
.ms-checkbox-item input { width: 16px; height: 16px; accent-color: var(--ms-green); cursor: pointer; }
.ms-form-submit {
  width: 100%;
  background: var(--ms-green);
  color: white;
  border: none;
  padding: .9rem;
  border-radius: 100px;
  font-family: var(--ms-font-body);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s, transform .2s;
  margin-top: .5rem;
}
.ms-form-submit:hover { background: var(--ms-teal); transform: translateY(-2px); }
.ms-success-msg {
  display: none;
  background: var(--ms-green-light);
  border: 2px solid var(--ms-green-mid);
  border-radius: var(--ms-radius);
  padding: 1.25rem;
  text-align: center;
  margin-top: 1rem;
}
.ms-success-msg__icon { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.ms-success-msg__title { font-family: var(--ms-font-heading); font-size: 1.2rem; color: var(--ms-green); margin-bottom: .25rem; }
.ms-success-msg__desc  { font-size: .85rem; color: var(--ms-muted); margin: 0; }

/* === TESTIMONIALS === */
.ms-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}
.ms-testimonial {
  background: white;
  border-radius: var(--ms-radius);
  padding: 1.5rem;
  border: 2px solid var(--ms-border);
  transition: border-color .2s;
}
.ms-testimonial:hover { border-color: var(--ms-green-mid); }
.ms-testimonial__stars { color: var(--ms-amber-mid); font-size: 1rem; margin-bottom: .75rem; letter-spacing: 2px; }
.ms-testimonial__quote { font-size: .9rem; color: var(--ms-text); line-height: 1.75; margin-bottom: 1rem; font-style: italic; }
.ms-testimonial__author { display: flex; align-items: center; gap: .75rem; }
.ms-testimonial__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem;
  color: white;
  flex-shrink: 0;
}
.ms-testimonial__name { font-weight: 700; font-size: .85rem; margin-bottom: .1rem; }
.ms-testimonial__role { font-size: .75rem; color: var(--ms-muted); margin: 0; }

/* === MODAL === */
.ms-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
}
.ms-modal-overlay.open { display: flex; }
.ms-modal {
  background: white;
  border-radius: var(--ms-radius-lg);
  max-width: 560px;
  width: 100%;
  padding: 2rem;
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
  animation: msModalIn .25s ease;
}
@keyframes msModalIn {
  from { opacity: 0; transform: scale(.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.ms-modal__close {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--ms-green-light); border: none;
  width: 34px; height: 34px; border-radius: 50%;
  cursor: pointer; font-size: 1rem; color: var(--ms-green); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.ms-modal__close:hover { background: #C0DD97; }
.ms-modal__emoji  { font-size: 3rem; display: block; margin-bottom: .75rem; }
.ms-modal__title  { font-family: var(--ms-font-heading); font-size: 1.5rem; margin-bottom: .5rem; }
.ms-modal__tags   { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ms-modal__desc   { font-size: .9rem; color: var(--ms-muted); line-height: 1.75; margin-bottom: 1.25rem; }
.ms-modal__steps-title { font-weight: 700; margin-bottom: .75rem; font-size: 1rem; color: var(--ms-text); }
.ms-modal__steps  { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.ms-modal__steps li {
  display: flex; gap: .75rem; align-items: flex-start;
  font-size: .88rem; line-height: 1.55;
}
.ms-modal__steps li::before {
  content: "✓";
  background: var(--ms-green-light); color: var(--ms-green);
  border-radius: 50%; width: 22px; height: 22px; min-width: 22px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .75rem; margin-top: 1px;
}
.ms-modal__tips {
  background: var(--ms-amber-light);
  border-radius: var(--ms-radius);
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
}
.ms-modal__tips-title { font-weight: 700; font-size: .85rem; color: var(--ms-amber); margin-bottom: .5rem; }
.ms-modal__tips-desc  { font-size: .82rem; color: var(--ms-muted); line-height: 1.55; margin: 0; }
.ms-modal__cta {
  width: 100%;
  background: var(--ms-green); color: white; border: none;
  padding: .85rem; border-radius: 100px;
  font-family: var(--ms-font-body); font-weight: 700; font-size: 1rem;
  cursor: pointer; margin-top: 1.5rem; transition: background .2s;
}
.ms-modal__cta:hover { background: var(--ms-teal); }

/* === CTA SECTION === */
.ms-section--cta { position: relative; overflow: hidden; }
.ms-section--cta::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: rgba(255,255,255,.05);
  border-radius: 50%; top: -150px; right: -100px;
}
.ms-section--cta::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  background: rgba(255,255,255,.05);
  border-radius: 50%; bottom: -100px; left: -80px;
}
.ms-section--cta > * { position: relative; z-index: 1; }
.ms-section--cta .ms-btn-group { justify-content: center; }

/* === FOOTER === */
.ms-footer { background: #1A1A18; color: #888780; padding: 3rem 2rem; text-align: center; }
.ms-footer__logo { font-family: var(--ms-font-heading); font-size: 1.4rem; font-weight: 800; color: #97C459; margin-bottom: .75rem; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.ms-footer__tagline { font-size: .85rem; margin-bottom: .75rem; }
.ms-footer__nav { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0; }
.ms-footer__nav a { color: #888780; text-decoration: none; font-size: .85rem; transition: color .2s; }
.ms-footer__nav a:hover { color: #97C459; }
.ms-footer__copy { font-size: .8rem; color: #5F5E5A; margin: 0; }

/* === WORDPRESS-SPECIFIC UTILITIES === */
.wp-block-image { margin: 1.5rem 0; }
.alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 0 auto 1rem; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .85rem; color: var(--ms-muted); text-align: center; margin-top: .4rem; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.skip-link { position: absolute; top: -100px; left: 1rem; background: var(--ms-green); color: white; padding: .5rem 1rem; border-radius: 0 0 8px 8px; z-index: 999; transition: top .2s; }
.skip-link:focus { top: 0; }

/* === SINGLE POST / PAGE === */
.ms-entry { max-width: 760px; margin: 0 auto; padding: 3rem 2rem; }
.ms-entry__header { margin-bottom: 2rem; }
.ms-entry__title { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: .75rem; }
.ms-entry__meta  { font-size: .85rem; color: var(--ms-muted); display: flex; gap: 1rem; flex-wrap: wrap; }
.ms-entry__content h2 { margin: 2rem 0 .75rem; }
.ms-entry__content h3 { margin: 1.5rem 0 .5rem; }
.ms-entry__content ul,
.ms-entry__content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.ms-entry__content li { margin-bottom: .4rem; line-height: 1.65; }
.ms-entry__content blockquote {
  border-left: 4px solid var(--ms-green-mid);
  padding: 1rem 1.5rem;
  background: var(--ms-green-light);
  border-radius: 0 var(--ms-radius) var(--ms-radius) 0;
  margin: 1.5rem 0;
  font-style: italic;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .ms-nav__menu { display: none; }
  .ms-nav__hamburger { display: flex; }
  .ms-nav__menu.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: white;
    padding: 1rem 2rem 1.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    border-top: 2px solid var(--ms-green-light);
    gap: 1rem;
  }
  .ms-onboarding-grid { grid-template-columns: 1fr; }
  .ms-deco-plane--1 { width: 60px; height: 60px; }
  .ms-deco-plane--2 { display: none; }
  .ms-deco-plane--3 { display: none; }
}
@media (max-width: 600px) {
  .ms-skills-grid  { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
  .ms-badges-grid  { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .ms-hero { padding: 3rem 1.5rem 2.5rem; }
}