/* Little Coders Lab — public marketing homepage · PLAYFUL & ILLUSTRATED theme.
   Self-contained; loaded only by the marketing layout. */
:root{--navy:#191957;--yellow:#fcb907;--pink:#fc4257;--sky:#37ceed;--orange:#f7a53f}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,sans-serif;background:#fff7ea;color:var(--navy);overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,.fr{font-family:'Baloo 2','Fredoka',sans-serif}
a{text-decoration:none}
.blob{position:absolute;border-radius:50%;filter:blur(6px);z-index:0;pointer-events:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 30px;position:relative;z-index:2}

/* NAV (floating pill) */
.nav{max-width:1160px;margin:18px auto;padding:10px 14px 10px 18px;display:flex;align-items:center;justify-content:space-between;
  background:#fff;border-radius:50px;box-shadow:0 10px 30px rgba(25,25,87,.10);position:sticky;top:14px;z-index:50}
.nav .lg{display:flex;align-items:center;gap:10px}.nav .lg img{height:42px}.nav .lg b{font-family:'Baloo 2';font-weight:800;font-size:19px;color:var(--navy)}
.nav .lk{display:flex;align-items:center;gap:22px;font-weight:800;font-size:15px}.nav .lk a{color:var(--navy)}
.nav .lk .b{background:var(--pink);color:#fff;padding:11px 22px;border-radius:40px;box-shadow:0 8px 18px rgba(252,66,87,.35)}

/* HERO */
.hero{position:relative;padding:42px 0 80px;text-align:center;overflow:hidden}
.hero .pill{display:inline-block;background:#fff;color:var(--pink);font-weight:900;border:2px dashed var(--pink);padding:7px 18px;border-radius:30px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:18px;transform:rotate(-2deg)}
.hero h1{font-size:60px;line-height:1.04;font-weight:800;margin-bottom:14px}
.hero h1 .u{position:relative}
.hero h1 .u svg{position:absolute;left:0;right:0;bottom:-12px;width:100%;height:16px}
.hero h1 .y{color:var(--orange)}
.hero .sub{font-size:20px;font-weight:700;color:#5b5780;max-width:520px;margin:14px auto 26px}
.btnrow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{font-family:'Baloo 2';font-weight:800;font-size:17px;padding:15px 30px;border-radius:50px;display:inline-block;border:0;cursor:pointer;color:var(--navy)}
.btn-y{background:var(--yellow);color:var(--navy);box-shadow:0 9px 0 #d99e00}
.btn-w{background:#fff;color:var(--navy);box-shadow:0 9px 0 #e7dcc4}
.btn-p{background:var(--pink);color:#fff;box-shadow:0 9px 0 #c42f40}
.btn-n{background:var(--navy);color:#fff;box-shadow:0 9px 0 #0d0d35}
.btn-wa{background:#25d366;color:#fff;box-shadow:0 9px 0 #1da851}
.star{position:absolute;z-index:1}

.wave{display:block;width:100%;height:64px;margin-top:-2px}

/* SUMMER CAMP band */
.summer{background:var(--sky);position:relative}
.summer .in{max-width:980px;margin:0 auto;padding:6px 30px 14px;text-align:center;color:#fff;position:relative;z-index:2}
.summer .badge{display:inline-block;background:#fff;color:var(--navy);font-family:'Baloo 2';font-weight:800;padding:8px 22px;border-radius:30px;transform:rotate(-3deg);box-shadow:0 8px 0 rgba(0,0,0,.12);margin-bottom:10px}
.summer h2{font-size:76px;line-height:1;color:#fff;text-shadow:0 6px 0 rgba(0,0,0,.12);margin-bottom:4px}
.summer .price{font-weight:900;font-size:20px;margin-bottom:6px}.summer .price .was{text-decoration:line-through;opacity:.7;font-weight:800;margin-right:8px}
.summer p{font-weight:800;font-size:18px;margin-bottom:16px}

/* "first program" card */
.heroart{max-width:430px;margin:0 auto;background:#fff;border-radius:26px;padding:22px;box-shadow:0 24px 50px rgba(25,25,87,.16);transform:rotate(-1.5deg)}
.blk{border-radius:12px;padding:12px 16px;color:#fff;font-family:'Baloo 2';font-weight:800;margin-bottom:9px;display:flex;gap:8px;align-items:center}
.blk small{font-weight:700;opacity:.9;font-size:13px}

/* sections */
.sec{padding:66px 0;position:relative}
.eb{text-align:center;color:var(--pink);font-weight:900;text-transform:uppercase;letter-spacing:1px;font-size:13px;margin-bottom:8px}
.h2c{text-align:center;font-size:44px;font-weight:800;margin-bottom:8px}
.lead{text-align:center;font-size:18px;font-weight:700;color:#6b6788;max-width:560px;margin:0 auto 40px}

/* journey steps */
.steps{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.step{background:#fff;border-radius:24px;padding:24px 18px;width:232px;text-align:center;box-shadow:0 14px 30px rgba(25,25,87,.08)}
.step .n{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Baloo 2';font-weight:800;font-size:24px;margin:0 auto 12px;box-shadow:0 8px 0 rgba(0,0,0,.12)}
.step h3{font-size:23px;margin-bottom:6px}.step p{font-weight:700;color:#6b6788;font-size:14px;line-height:1.4}
.s1{background:var(--sky)}.s2{background:var(--orange)}.s3{background:var(--pink)}.s4{background:var(--navy)}
.jnote{text-align:center;margin-top:30px;font-family:'Baloo 2';font-weight:800;font-size:18px;color:var(--navy)}

/* course outline — two-column detailed rows */
.drows{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.drow{background:#fff;border-radius:22px;overflow:hidden;display:flex;box-shadow:0 14px 30px rgba(25,25,87,.08)}
.drow .side{flex:0 0 200px;padding:24px 22px;color:#fff;display:flex;flex-direction:column;justify-content:center}
.drow .side .num{font-family:'Baloo 2';font-weight:800;font-size:30px;opacity:.85;line-height:1}
.drow .side h3{font-size:24px;margin:4px 0;color:#fff}
.drow .side .sn{font-weight:800;font-size:13px;opacity:.9}
.drow .body{padding:22px 26px;display:flex;flex-direction:column;justify-content:center}
.drow .body ul{list-style:none;margin:0}
.drow .body li{font-weight:700;color:#4f4b6e;font-size:14.5px;line-height:1.5;margin-bottom:7px;padding-left:20px;position:relative}
.drow .body li:last-child{margin-bottom:0}
.drow .body li::before{content:"\2713";position:absolute;left:0;color:var(--sky);font-weight:900}
@media (max-width:680px){.drow{flex-direction:column}.drow .side{flex:none}}

/* why cards */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto}
.fc{background:#fff;border-radius:26px;padding:30px;box-shadow:0 14px 34px rgba(25,25,87,.08)}
.fc .ic{width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:14px;transform:rotate(-4deg)}
.fc h3{font-size:22px;margin-bottom:8px}.fc p{font-weight:700;color:#6b6788;font-size:15px;line-height:1.5}

/* pricing */
.region-toggle{display:flex;justify-content:center;gap:8px;margin:-22px auto 30px}
.region-toggle a{padding:9px 22px;border-radius:40px;font-family:'Baloo 2';font-weight:800;color:var(--navy);background:#fff;box-shadow:0 6px 0 #ece1c8}
.region-toggle a.active{background:var(--navy);color:#fff;box-shadow:0 6px 0 #0d0d35}
.price{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:760px;margin:0 auto}
.price.one{grid-template-columns:1fr;max-width:440px}
.plan{background:#fff;border-radius:28px;padding:34px;position:relative;border:4px solid #fff;box-shadow:0 18px 40px rgba(25,25,87,.10)}
.plan.f{border-color:var(--yellow)}
.plan .rib{position:absolute;top:-16px;left:26px;background:var(--pink);color:#fff;font-family:'Baloo 2';font-weight:800;padding:7px 16px;border-radius:30px;transform:rotate(-4deg);font-size:13px}
.plan h3{font-size:25px;margin-bottom:2px}.plan .who{color:#7b7796;font-weight:700;font-size:14px;margin-bottom:14px}
.plan .was{color:#a7a3bd;text-decoration:line-through;font-weight:800;font-size:15px}
.plan .amt{font-family:'Baloo 2';font-weight:800;font-size:42px}.plan .amt span{font-size:16px;color:#7b7796}
.plan ul{list-style:none;margin:14px 0 18px}.plan li{font-weight:800;font-size:14.5px;margin-bottom:9px;display:flex;gap:9px;color:#4f4b6e}
.plan li i{font-style:normal;width:22px;height:22px;border-radius:8px;background:var(--sky);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;flex:0 0 22px}
.plan .pb{display:block;text-align:center;font-family:'Baloo 2';font-weight:800;padding:14px;border-radius:16px}
.plan .pb.s{background:var(--navy);color:#fff;box-shadow:0 8px 0 #0d0d35}
.plan .pb.l{background:var(--yellow);color:var(--navy);box-shadow:0 8px 0 #d99e00}
.price-note{text-align:center;margin-top:26px;font-weight:800;color:#8a8470;font-size:14.5px}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
.qa{background:#fff;border-radius:20px;padding:22px 26px;margin-bottom:14px;box-shadow:0 10px 24px rgba(25,25,87,.06)}
.qa h3{font-size:18px;margin-bottom:7px;display:flex;gap:9px}.qa h3 .q{color:var(--sky)}
.qa p{font-weight:700;color:#6b6788;line-height:1.55;font-size:15px}

/* final CTA */
.final{max-width:1000px;margin:0 auto;background:var(--navy);border-radius:36px;padding:60px 30px;text-align:center;color:#fff;position:relative;overflow:hidden}
.final h2{font-size:42px;color:#fff;margin-bottom:12px}.final p{color:#c9cbef;font-weight:700;font-size:18px;margin-bottom:26px}
.final .btnrow{justify-content:center}

footer{background:var(--navy);color:#fff;text-align:center;padding:48px 30px;border-radius:46px 46px 0 0;margin-top:30px}
footer .f-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px}
footer .f-logo img{height:44px}footer .f-logo b{font-family:'Baloo 2';font-weight:800;font-size:19px}
footer .tagline{font-family:'Baloo 2';font-weight:800;font-size:18px}footer .small{opacity:.6;font-weight:700;margin-top:6px;font-size:14px}

/* Book-a-demo form (kept) */
.demo-top{display:flex;align-items:center;gap:11px;justify-content:center;padding:22px}
.demo-top img{height:42px}.demo-top b{font-family:'Baloo 2';font-weight:800;font-size:18px;color:var(--navy)}
.demo-wrap{max-width:560px;margin:0 auto;padding:10px 22px 70px}
.demo-card{background:#fff;border-radius:28px;padding:38px;box-shadow:0 24px 60px rgba(25,25,87,.14)}
.demo-card h1{font-size:34px;margin-bottom:8px}.demo-card .subt{color:#6b6788;font-weight:700;margin-bottom:24px;line-height:1.5}
.demo-field{margin-bottom:16px}.demo-field label{display:block;font-weight:800;font-size:14px;margin-bottom:6px}
.demo-field input,.demo-field textarea{width:100%;padding:13px 15px;border:2px solid #efe6d3;border-radius:14px;font-size:16px;font-family:'Nunito',sans-serif;color:var(--navy);background:#fffdf8}
.demo-field input:focus,.demo-field textarea:focus{outline:none;border-color:var(--sky)}
.demo-field .hint{font-size:12.5px;color:#8a8470;font-weight:700;margin-top:5px}
.demo-submit{background:var(--yellow);color:var(--navy);border:0;padding:15px 30px;border-radius:50px;font-family:'Baloo 2';font-weight:800;font-size:17px;cursor:pointer;width:100%;box-shadow:0 9px 0 #d99e00}
.demo-errors{background:#ffe9ec;color:#c4283a;border:1px solid #ffc6cf;border-radius:14px;padding:12px 15px;margin-bottom:16px;font-weight:700;font-size:14px}
.demo-errors ul{margin:0;padding-left:18px}
.demo-back{display:inline-block;margin-top:18px;color:var(--navy);font-weight:800}
.demo-thanks{text-align:center}.demo-thanks .big{font-size:54px;margin-bottom:8px}

@media (max-width:820px){
  .nav .lk a:not(.b){display:none}
  .hero h1{font-size:40px}.summer h2{font-size:56px}.h2c{font-size:32px}.final h2{font-size:30px}
  .feat{grid-template-columns:1fr}.price{grid-template-columns:1fr}.price.one{max-width:440px}
  .step{width:100%;max-width:300px}
}