:root{--honey:#F5A623;--beeswax:#F5C842;--brown:#3D1C02;--cream:#FFF9E6;--wing:#DFF4FF;--green:#5cb85c;--brown-soft:rgba(61,28,2,.7);--hex:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;color:var(--brown);background:var(--cream);line-height:1.6;overflow-x:hidden}
h1,h2,h3{font-weight:900;line-height:1.12}a{text-decoration:none;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}.honey{color:var(--honey)}
.hexbg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0L56 16v32L28 64 0 48V16z' fill='none' stroke='%23F5C842' stroke-width='1.4'/%3E%3Cpath d='M28 64L56 80v32M28 64L0 80v32' fill='none' stroke='%23F5C842' stroke-width='1.4'/%3E%3C/svg%3E");background-size:56px 96px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:1.05rem;padding:14px 30px;border-radius:50px;cursor:pointer;border:none;transition:transform .2s,box-shadow .2s}
.btn-primary{background:var(--honey);color:#fff;box-shadow:0 7px 0 #d98e12}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 0 #d98e12}.btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 #d98e12}
.btn-ghost{background:#fff;color:var(--brown);border:2px solid var(--honey)}.btn-ghost:hover{background:var(--honey);color:#fff;transform:translateY(-3px)}
.hero{position:relative;padding:60px 0 80px;overflow:hidden}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.6rem,6vw,4.2rem)}
.hero p.sub{font-size:1.25rem;color:var(--brown-soft);font-weight:700;margin:20px 0 34px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.mascot-wrap{display:flex;justify-content:center}
.mascot-wrap img{width:min(440px,92%);filter:drop-shadow(0 22px 30px rgba(245,166,35,.45));animation:float 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.sec{padding:74px 0;position:relative}
.sec-head{text-align:center;max-width:680px;margin:0 auto 50px;position:relative;z-index:1}
.sec-head h2{font-size:clamp(2rem,4.5vw,2.9rem)}
.sec-head p{color:var(--brown-soft);font-size:1.12rem;font-weight:700;margin-top:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative;z-index:1}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;z-index:1}
.card{background:#fff;border:2px solid var(--honey);border-radius:26px;padding:30px 26px 34px;text-align:center;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;align-items:center}
.card:hover{transform:translateY(-7px);box-shadow:0 20px 40px -20px rgba(61,28,2,.4)}
.ic{width:104px;height:104px;margin-bottom:14px;background:var(--cream);clip-path:var(--hex);display:flex;align-items:center;justify-content:center}
.ic img{width:74%;height:74%;object-fit:contain}
.badge{display:inline-block;background:var(--honey);color:#fff;font-weight:800;font-size:.85rem;padding:6px 18px;border-radius:50px;margin-bottom:14px}
.card h3{font-size:1.25rem;margin-bottom:10px}
.card p{color:var(--brown-soft);font-weight:600;font-size:.97rem;flex:1}
.why{background:var(--cream)}.how{background:#fff}.lessons-sec{background:var(--cream)}
.free-tag{margin-top:16px;background:var(--green);color:#fff;font-weight:800;padding:8px 26px;border-radius:50px;font-size:.95rem;transition:transform .2s}
.free-tag:hover{transform:translateY(-2px)}
.page-head{position:relative;padding:60px 0 40px;text-align:center;overflow:hidden}
.page-head h1{font-size:clamp(2.2rem,5vw,3.2rem);position:relative;z-index:1}
.page-head p{color:var(--brown-soft);font-weight:700;font-size:1.15rem;margin-top:12px;position:relative;z-index:1}
.cta{background:var(--honey);position:relative;overflow:hidden;text-align:center;padding:66px 24px}
.cta .inner{position:relative;z-index:1;max-width:640px;margin:0 auto}
.cta img{width:130px;margin-bottom:8px;filter:drop-shadow(0 12px 18px rgba(61,28,2,.25))}
.cta h2{font-size:clamp(2rem,5vw,3rem);color:var(--brown)}
.cta p{font-size:1.2rem;font-weight:700;color:var(--brown);margin:12px 0 28px}
.cta .btn-primary{background:var(--brown);box-shadow:0 7px 0 #1f0e00}.cta .btn-primary:hover{box-shadow:0 10px 0 #1f0e00}
.reveal{opacity:0;transform:translateY(26px);transition:.7s}.reveal.in{opacity:1;transform:none}
.prose{max-width:760px;margin:0 auto;font-size:1.08rem}
.prose p{margin-bottom:16px;color:var(--brown-soft);font-weight:600}
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;text-align:center}.hero-cta{justify-content:center}.mascot-wrap{order:-1}
  .grid3{grid-template-columns:1fr}.grid4{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.grid4{grid-template-columns:1fr}}