@font-face{font-family:Bangers;src:url(fonts/bangers.woff2) format("woff2");font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Comic Neue";src:url(fonts/comicneue-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --navy:#0e1a3d;--navy-2:#16265a;--ink:#1b1f33;--cream:#fff8ec;--paper:#ffffff;
  --gold:#ffc23d;--gold-2:#ffd978;--coral:#ff6b4a;--sky:#4fc3f7;--mint:#3ddc97;--purple:#8a5cf6;
  --muted:#5b6080;--line:#e9dfcc;--radius:18px;--shadow:0 10px 30px rgba(14,26,61,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--coral);font-weight:800}
h1,h2,h3,.comic{font-family:Bangers,Impact,sans-serif;letter-spacing:.04em;font-weight:400;line-height:1.05;margin:0 0 .4em}
h1{font-size:clamp(44px,7vw,84px)}
h2{font-size:clamp(34px,4.6vw,56px)}
h3{font-size:28px}
p{margin:0 0 1em}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.eyebrow{display:inline-block;font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:10px}
.lead{font-size:20px;color:var(--muted);max-width:640px}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff;border-bottom:4px solid var(--gold)}
.site-head .wrap{display:flex;align-items:center;gap:18px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand img{width:44px;height:44px}
.brand b{font-family:Bangers,sans-serif;font-weight:400;font-size:26px;letter-spacing:.05em;line-height:1}
.brand small{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
.nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.nav a{color:#fff;text-decoration:none;font-weight:800;font-size:15px;padding:8px 12px;border-radius:999px}
.nav a:hover,.nav a[aria-current]{background:rgba(255,255,255,.12)}
.nav a.cta{background:var(--gold);color:var(--navy)}
.nav a.cta:hover{background:var(--gold-2)}
.menu-btn{display:none;margin-left:auto;background:none;border:2px solid rgba(255,255,255,.4);color:#fff;border-radius:10px;padding:6px 12px;font:800 15px Nunito,sans-serif}
@media (max-width:920px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--navy);flex-direction:column;align-items:stretch;padding:10px 16px 18px;border-bottom:4px solid var(--gold)}
  .nav.open{display:flex}
  .nav a{padding:12px 14px}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font:900 17px Nunito,sans-serif;padding:14px 26px;border-radius:999px;background:var(--coral);color:#fff;box-shadow:0 5px 0 #c94a2e;transition:transform .1s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #c94a2e}
.btn.gold{background:var(--gold);color:var(--navy);box-shadow:0 5px 0 #d39a12}
.btn.ghost{background:#fff;color:var(--navy);box-shadow:0 5px 0 #d8ccb6}
.btn.small{font-size:14px;padding:9px 16px;box-shadow:0 3px 0 #c94a2e}
.btn.small.ghost{box-shadow:0 3px 0 #d8ccb6}
.btn.small.gold{box-shadow:0 3px 0 #d39a12}

/* hero */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center right}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,26,61,.96) 0%,rgba(14,26,61,.82) 38%,rgba(14,26,61,.1) 70%)}
.hero .wrap{position:relative;min-height:600px;display:flex;flex-direction:column;justify-content:center;padding-top:60px;padding-bottom:60px}
.hero h1{max-width:620px;text-shadow:0 4px 0 rgba(0,0,0,.25)}
.hero h1 span{color:var(--gold)}
.hero p{max-width:520px;font-size:20px;color:#e7ebff}
.hero .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
@media (max-width:760px){.hero .bg::after{background:linear-gradient(180deg,rgba(14,26,61,.55),rgba(14,26,61,.95) 60%)}.hero .wrap{min-height:560px;justify-content:flex-end}}

.page-hero{background:var(--navy);color:#fff;padding:56px 0 46px;border-bottom:6px solid var(--gold);background-image:radial-gradient(circle at 85% 20%,rgba(255,194,61,.25),transparent 40%),radial-gradient(circle at 10% 90%,rgba(255,107,74,.25),transparent 40%)}
.page-hero p{color:#dfe5ff;font-size:19px;max-width:680px}

section{padding:80px 0}
.band{background:#fff}
.band-navy{background:var(--navy);color:#fff}
.band-navy .lead{color:#cfd6f5}

.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:#fff;border:3px solid var(--navy);border-radius:var(--radius);padding:26px;box-shadow:6px 6px 0 var(--navy);position:relative}
.card .ico{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-size:28px;margin-bottom:14px;border:3px solid var(--navy)}
.card h3{margin-bottom:6px}
.card p{color:var(--muted)}
.tool-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .15s}
.tool-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--navy)}
.tool-card .go{margin-top:auto;font-weight:900;color:var(--coral)}

.split{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.split.rev{grid-template-columns:1fr 1.05fr}
.split.rev .media{order:2}
@media (max-width:860px){.split,.split.rev{grid-template-columns:1fr}.split.rev .media{order:0}}
.media img{border-radius:var(--radius);border:4px solid var(--navy);box-shadow:8px 8px 0 var(--gold)}

.checks{list-style:none;padding:0;margin:0 0 1.2em}
.checks li{padding-left:34px;position:relative;margin:0 0 10px}
.checks li::before{content:"★";position:absolute;left:0;top:-2px;color:var(--gold);font-size:22px;-webkit-text-stroke:1px var(--navy)}

.ribbon-note{display:flex;gap:14px;align-items:flex-start;background:#fff4d6;border:2px dashed #e0a91a;border-radius:14px;padding:16px 18px;font-size:15px;color:#5b4a1a}

.lesson{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:start}
.lesson .num{width:72px;height:72px;border-radius:50%;background:var(--gold);border:3px solid var(--navy);display:grid;place-items:center;font:400 38px Bangers,sans-serif;color:var(--navy)}
.lesson .ages{display:inline-block;font-size:12px;font-weight:900;background:#eef1ff;color:var(--navy-2);border-radius:999px;padding:2px 10px;margin-bottom:6px}
.tip{background:#eefaf4;border-left:5px solid var(--mint);padding:12px 16px;border-radius:0 12px 12px 0;margin:12px 0}

.stat{font:400 54px Bangers,sans-serif;color:var(--gold);line-height:1}

/* about & contact */
.contact-box{background:var(--navy);color:#fff;border-radius:var(--radius);padding:32px;border:4px solid var(--gold)}
.contact-box a.mail{display:inline-block;font:400 30px Bangers,sans-serif;letter-spacing:.05em;color:var(--gold);text-decoration:none;word-break:break-all}

/* footer */
.site-foot{background:#0a1430;color:#b8c0e0;padding:48px 0 30px;font-size:15px}
.site-foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.site-foot a{color:#fff;font-weight:700;text-decoration:none}
.site-foot a:hover{color:var(--gold)}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin:0 0 8px}
.site-foot .fine{border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:20px;font-size:13px;color:#8b93b8}
@media (max-width:760px){.site-foot .cols{grid-template-columns:1fr}}

/* tool shell shared */
.tool-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{border:2px solid var(--navy);background:#fff;border-radius:999px;padding:7px 14px;font:800 14px Nunito,sans-serif;cursor:pointer;color:var(--navy)}
.chip:hover{background:#fff4d6}
.chip.on{background:var(--navy);color:#fff}
.field{display:block;margin-bottom:16px}
.field span{display:block;font-weight:900;font-size:15px;margin-bottom:6px;color:var(--navy)}
.field input,.field select,.field textarea{width:100%;font:700 17px Nunito,sans-serif;padding:12px 14px;border:3px solid var(--navy);border-radius:12px;background:#fff;color:var(--ink)}
.field textarea{min-height:120px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:0 0 0 4px rgba(255,194,61,.6)}
.hint{font-size:14px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);background:var(--navy);color:#fff;padding:12px 20px;border-radius:999px;font-weight:800;z-index:100;transition:transform .25s;border:3px solid var(--gold)}
.toast.show{transform:translateX(-50%) translateY(0)}

.print-only{display:none}
@media print{
  .site-head,.site-foot,.no-print{display:none!important}
  .print-only{display:block}
  body{background:#fff}
}