/* Load fonts */
    @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito+Sans:wght@300;400;600;700;800&display=swap');

    ::before,
    ::after {
        box-sizing: border-box;
    }
    :root{
      /* Brand palette */
      --brand-50:#f8fbff; /* light bg */
      --brand-100:#eef5ff;
      --brand-200:#dbe9ff;
      --brand-300:#c5d7ff;
      --brand-400:#9fb9ff;
      --brand-500:#6f90ff; /* primary */
      --brand-600:#4e6df3;
      --brand-700:#3f57d6;
      --accent-1:#ffb86b; /* peach */
      --accent-2:#5ed1c2; /* aqua */
      --accent-3:#ffd166; /* sunshine */
      --ink-900:#0f172a; /* text */
      --ink-700:#334155;
      --ink-600:#475569;
      --ink-500:#64748b;
      --paper:#ffffff;

      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
      --shadow-lg: 0 18px 40px rgba(31,41,55,.15);
      --shadow-md: 0 8px 24px rgba(31,41,55,.12);
      --shadow-sm: 0 4px 12px rgba(31,41,55,.08);

      --container: 1000px;
      --space-2: .5rem;  /* 8px */
      --space-3: .75rem; /* 12px */
      --space-4: 1rem;   /* 16px */
      --space-5: 1.25rem;/* 20px */
      --space-6: 1.5rem; /* 24px */
      --space-8: 2rem;   /* 32px */
      --space-10: 2.5rem;/* 40px */
      --space-12: 3rem;  /* 48px */
      --space-16: 4rem;  /* 64px */
    }

    html,body{
      margin:0;
      padding:0;
      background:var(--brand-50);
      color:var(--ink-900);
      min-height: 100vh;
    }

    body{
      font-family:"Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
      line-height:1.6}

    .container{
      width:100%; 
      max-width:var(--container); 
      margin-inline:auto; 
      padding-inline:var(--space-5)}

    /* Top nav */
    .site-header{position:sticky; top:0; z-index:50; background:rgba(220, 229, 240, 0.78); backdrop-filter: blur(10px); border-bottom:1px solid rgba(99,102,241,.12)}
    .nav{display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); padding: var(--space-4) 0}
    .brand{display:flex; align-items:center; gap:var(--space-3)}
    .brand-logo{width:42px;height:42px; border-radius:12px; background: linear-gradient(135deg, var(--brand-500), var(--accent-2)); display:grid; place-items:center; color:white; font-weight:700; box-shadow: var(--shadow-sm)}
    .brand-name{font-family:"Fredoka", cursive; font-weight:600; font-size:1.85rem}
    .nav a{color:var(--ink-700); text-decoration:none; font-weight:500;}
    .nav a:hover{color:var(--brand-700)} 

    /* Reusable buttons */
    .btn{display:inline-flex; align-items:center; gap:.625rem; 
      padding:.875rem 1.25rem; 
      border-radius:999px;
      border:2px solid transparent; 
      font-weight:800; 
      text-decoration:none; 
      transition:.2s ease;} 
      
    .btn--primary{background: linear-gradient(90deg, var(--brand-600), var(--brand-500)); color:white; box-shadow: var(--shadow-md)}
    .btn--primary:hover{transform: translateY(-1px); filter: brightness(1.05)}
    .btn--ghost{background: rgba(255,255,255,.7); border-color: rgba(255,255,255,.8); color:var(--brand-700);}
    .btn--ghost:hover{background:white} 

    /* HERO — the style we propagate */
    .hero{
      position:relative; 
      overflow:hidden;}
    .hero .wrap{
      display:grid; 
      grid-template-columns: 1.2fr 1fr; 
      align-items:center; gap:var(--space-12); 
      padding-block: clamp(3rem, 5vw + 2rem, 6rem)}
    .hero-bg{
      position:relative; 
      inset:-10% -10% 0 -10%; 
      z-index:-1; 
      background:
      radial-gradient(70% 70% at 10% 20%, rgba(111,144,255,.25) 0%, rgba(111,144,255,0) 70%),
      radial-gradient(60% 60% at 90% 10%, rgba(94,209,194,.25) 0%, rgba(94,209,194,0) 65%),
      radial-gradient(55% 55% at 30% 90%, rgba(255,184,107,.22) 0%, rgba(255,184,107,0) 60%),
      linear-gradient(180deg, var(--brand-100), var(--brand-50));
    }
    .hero-card{background: white; padding: var(--space-8); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg)}
    .eyebrow{display:inline-flex; align-items:center; gap:.5rem; background:rgba(111,144,255,.12); color:var(--brand-700); border:1px solid rgba(111,144,255,.25); padding:.375rem .75rem; border-radius:999px; font-weight:800; letter-spacing:.2px}
    .hero h1{font-family:"Fredoka", cursive; font-weight:700; font-size: clamp(2rem, 3.2vw + 1rem, 3.5rem); line-height:1.1; margin: var(--space-4) 0}
    .hero p.lede{font-size: clamp(1.05rem, .7vw + .9rem, 1.25rem); color: var(--ink-600); margin-bottom: var(--space-6)}
    .hero-cta{display:flex; flex-wrap:wrap; gap:var(--space-4)}
    .badges{display:flex; flex-wrap:wrap; gap: var(--space-3); margin-top: var(--space-6)}
    .badge{display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; background: var(--brand-100); border:1px solid var(--brand-200); border-radius:999px; font-weight:700; color:var(--ink-700)}

    .hero-visual{position:relative}
    .hero-blob{
      position:relative; 
      inset:auto 0 -10% -10%; 
      width: 120%; 
      height: 120%; 
      background: radial-gradient(50% 60% at 50% 40%, rgba(255,209,102,.4), rgba(255,209,102,0)); 
      filter: blur(30px); z-index:-1}
    .hero-illustration{
      aspect-ratio: 4/3; 
      background: conic-gradient(from 180deg at 50% 50%, #fff, #f9fbff); 
      border-radius: var(--radius-lg); 
      box-shadow: var(--shadow-lg); 
      display:grid; 
      place-items:center; 
      overflow:hidden;
    }

    .hero-illustration svg{width:100%; height:auto;}
/* SECTIONS styled in the same visual language*/
    section.section{padding-block: var(--space-16)}
    .section .header{margin-bottom: var(--space-8); 
      text-align:center}
    .section h2{font-family:"Fredoka", cursive; font-size: clamp(1.5rem, 2.2vw + .5rem, 2.25rem); margin:0}
    .section p.sub{margin-top: .5rem; color: var(--ink-600)}

    /* About preview / two-column */
    .split{display:grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-10)}
    .card{background: #fff; border-radius: var(--radius-md); padding: var(--space-8); box-shadow: var(--shadow-md)}

    /* Services grid */
    .grid{display:grid; gap: var(--space-6)}
    .grid-3{grid-template-columns: repeat(2, 1fr)}
    .service{background: rgb#fff; border-radius: var(--radius-md); padding: var(--space-8); box-shadow: var(--shadow-md); border:1px solid var(--brand-200)}
    .service h3{font-family:"Fredoka"; margin-top:0}

    /* Schedule */
    .schedule{background: linear-gradient(180deg, #fff, var(--brand-100)); border:1px solid var(--brand-200); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-md)}
    .schedule ul{columns: 2; gap:var(--space-8)}

    /* Testimonials */
    .testimonials{display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6)}
    .quote{background:#fff; border:1px solid var(--brand-200); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm)}
    .quote strong{display:block; margin-top: var(--space-4); color: var(--ink-700)}

    /* Contact CTA */
    .cta{background: linear-gradient(90deg, var(--brand-500), var(--brand-600)); color:white; border-radius: var(--radius-lg); padding: var(--space-12); text-align:center; box-shadow: var(--shadow-lg)}
    .cta h2{color:white}

    /* Footer */
    footer{padding-block: var(--space-10); color: var(--ink-600)}
    footer .foot{display:flex; align-items:center; justify-content:space-between; gap: var(--space-6); flex-wrap:wrap}

    /* Responsive*/
    @media (max-width: 640px){
      .hero .wrap{grid-template-columns: 1fr}
      .split{grid-template-columns: 1fr}
      .grid-3{grid-template-columns: 1fr 1fr}
      .testimonials{grid-template-columns: 1fr 1fr}
      .schedule ul{columns:1} 
    } 
    
    @media (max-width: 640px){
      .grid-3{grid-template-columns: 1fr}
      .testimonials{grid-template-columns: 1fr}
    } 
    
    @media (min-width: 600px) {
      body {
        height: 100vh;
        overflow: auto;
      }

    }