:root{
  --green:#1FB866; --green-dk:#17904F; --green-bg:#E6F8EE; --green-tx:#0E7A41;
  --navy:#14213D; --ink:#14213D; --sub:#4A5A52; --muted:#6B7A72;
  --bg:#FFFFFF; --alt:#F2F5F3; --line:#E1E6E3; --yellow:#FFC400; --yellow-dk:#D9A400; --hi:#FFE27A;
  --blue:#2D8CFF; --red:#E5322D; --orange:#FF8A00;
  --r:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:700;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{display:block}
h1,h2,h3{font-weight:900;margin:0;line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(30px,4.2vw,46px)}
h3{font-size:21px;line-height:1.2}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.narrow{max-width:800px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font:inherit;font-weight:900;font-size:16px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:17px 26px;border-radius:18px;transition:transform .12s,filter .12s}
.btn:hover{filter:brightness(1.04);transform:translateY(-1px)}
.btn:active{transform:translateY(2px)}
.btn-white{background:#fff;color:var(--navy);border-bottom:6px solid #CFE9DA}
.btn-green{background:var(--green);color:#fff;border-bottom:6px solid var(--green-dk)}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 3px rgba(255,255,255,.85)}
.btn-sm{padding:11px 18px;font-size:13px;border-radius:14px;border-bottom-width:4px}
.btn-block{width:100%}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}

.nav{position:sticky;top:0;z-index:20;background:var(--green);color:#fff;transition:box-shadow .2s}
.nav.scrolled{box-shadow:0 6px 20px rgba(20,33,61,.15)}
.nav-in{display:flex;align-items:center;gap:24px;height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:26px;letter-spacing:-.03em}
.logo .mark{width:38px;height:33px}
.nav .logo b{color:var(--navy)}
.links{display:flex;gap:24px;margin-left:auto}
.links a{text-decoration:none;font-weight:800;font-size:15px;opacity:.92}
.links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}

.hero{position:relative;overflow:hidden;background:var(--green);color:#fff;padding:40px 0 0}
.ring{position:absolute;border-radius:50%;border:80px solid rgba(255,255,255,.07);pointer-events:none}
.r1{width:900px;height:900px;right:-360px;top:-380px}
.r2{width:600px;height:600px;left:-360px;bottom:-320px}
.hero-in{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end}
.hero-txt{padding:40px 0 90px}
.tag{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:900;font-size:14px;letter-spacing:.12em;padding:8px 14px;border-radius:10px;transform:rotate(-2deg);border-bottom:4px solid var(--yellow-dk)}
h1{font-size:clamp(46px,6.6vw,84px);line-height:.98;letter-spacing:-.035em;margin-top:22px}
h1 em{font-style:normal;color:var(--hi)}
.lead{font-size:clamp(17px,1.6vw,20px);color:#E9FBF1;max-width:520px;margin-top:22px;font-weight:700}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.stores{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:26px}
.store{display:inline-flex;align-items:center;gap:8px;background:rgba(20,33,61,.25);border-radius:12px;padding:9px 14px;font-weight:800;font-size:14px}
.store svg{width:18px;height:18px}
.soon{font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--hi)}

.phone-col{position:relative;justify-self:center;width:min(380px,100%);scroll-margin-top:90px}
.phone{background:var(--navy);border-radius:52px 52px 0 0;padding:14px 14px 0;box-shadow:0 30px 60px rgba(20,33,61,.25)}
.screen{background:var(--alt);color:var(--ink);border-radius:40px 40px 0 0;padding:26px 22px 28px;min-height:520px;display:flex;flex-direction:column}
.qtop{display:flex;align-items:center;gap:12px}
.qx{color:#9AA6A0;font-weight:900;font-size:18px}
.pbar{flex:1;height:12px;border-radius:6px;background:var(--line);overflow:hidden}
.pbar i{display:block;height:100%;width:33%;background:var(--green);border-radius:6px;transition:width .3s}
.qn{font-size:13px;font-weight:900;color:var(--muted)}
.qlabel{margin-top:20px;font-size:12px;font-weight:900;letter-spacing:.12em;color:var(--blue)}
.qtext{margin-top:8px;font-size:20px;font-weight:900;line-height:1.22}
.qopts{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.qopts.yn{flex-direction:row}
.qopt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;font-weight:800;font-size:15px;line-height:1.25;color:var(--ink);background:#fff;border:3px solid var(--line);border-bottom-width:6px;border-radius:18px;padding:12px 14px;cursor:pointer;transition:transform .1s,border-color .15s}
.qopts.yn .qopt{justify-content:center;font-size:18px;font-weight:900;padding:18px}
.qopt:hover:not(:disabled){border-color:#BFD8F9;transform:translateY(-1px)}
.qopt .l{width:30px;height:30px;border-radius:9px;border:3px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:#8A968F;flex:none}
.qopt.ok{background:var(--green-bg);border-color:var(--green);color:var(--green-tx)}
.qopt.ok .l{background:var(--green);border-color:var(--green);color:#fff}
.qopt.bad{background:#FFECEC;border-color:#FF6B6B;color:#B42318}
.qopt.bad .l{background:#FF6B6B;border-color:#FF6B6B;color:#fff}
.qopt:disabled{cursor:default}
.qopt.dim{opacity:.45}
.qsheet{margin-top:16px;border-radius:20px;padding:16px 16px 14px;background:#DDF6E8;color:#1D5C3B;animation:up .25s ease}
.qsheet.wrong{background:#FFE5E5;color:#8A1C1C}
.qsheet strong{display:block;font-weight:900;font-size:17px;color:var(--green-tx)}
.qsheet.wrong strong{color:#B42318}
.qsheet p{font-size:14px;line-height:1.4;margin:6px 0 12px}
.qsheet.wrong .btn{background:#E5484D;border-bottom-color:#B42318}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mascot-bubble{position:absolute;left:-74px;bottom:120px;display:flex;align-items:flex-end;gap:6px}
.mascot{width:64px;height:83px;filter:drop-shadow(0 8px 12px rgba(20,33,61,.2))}
.mascot-bubble span{background:#fff;color:var(--ink);font-weight:900;font-size:14px;padding:8px 12px;border-radius:14px;margin-bottom:46px;white-space:nowrap;box-shadow:0 6px 14px rgba(20,33,61,.15)}

.trust{background:var(--navy);color:#fff}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-top:26px;padding-bottom:26px}
.trust-in div{display:flex;flex-direction:column}
.trust b{font-size:30px;font-weight:900;color:var(--hi);line-height:1.1}
.trust span{font-size:14px;color:#C7D0E4}

.sec{padding:96px 0}
.sec-alt{background:var(--alt)}
.kicker{display:inline-block;font-size:14px;font-weight:900;letter-spacing:.14em;color:var(--blue);margin-bottom:12px}
.card{background:#fff;border:3px solid var(--line);border-bottom-width:7px;border-radius:var(--r)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.step{padding:30px}
.num{width:54px;height:54px;border-radius:16px;background:var(--green);color:#fff;font-weight:900;font-size:26px;display:flex;align-items:center;justify-content:center;border-bottom:5px solid var(--green-dk);margin-bottom:20px}
.step p,.feat p{color:var(--sub);margin-top:10px;font-size:16px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.feat{background:#fff;border-radius:var(--r);padding:28px;border:3px solid var(--line);border-bottom-width:7px}
.fi{width:48px;height:48px;border-radius:14px;background:var(--green-bg);color:var(--green-tx);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;margin-bottom:16px}

.kats{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:40px}
.kat{background:var(--alt);border:3px solid var(--line);border-bottom-width:7px;border-radius:var(--r);padding:24px 20px;display:flex;flex-direction:column}
.kat b{font-size:46px;font-weight:900;color:var(--green);line-height:1}
.kat h3{margin-top:12px;font-size:19px}
.kat p{color:var(--muted);font-size:14px;margin-top:4px;flex:1}
.kat .age{align-self:flex-start;margin-top:14px;background:var(--green-bg);color:var(--green-tx);font-weight:900;font-size:13px;padding:5px 11px;border-radius:99px}
.kat small{margin-top:10px;font-size:13px;color:var(--muted);font-weight:800}
.kat-main{background:var(--green);border-color:var(--green);border-bottom-color:var(--green-dk);color:#fff}
.kat-main b{color:#fff}
.kat-main p,.kat-main small{color:#E4FBEE}
.kat-main .age{background:rgba(255,255,255,.2);color:#fff}
.note{margin-top:20px;color:var(--muted);font-size:14px}

.stat{background:var(--green);color:#fff;padding:80px 0;position:relative;overflow:hidden}
.stat-in{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center}
.stat .big{font-size:clamp(110px,16vw,210px);font-weight:900;line-height:.9;letter-spacing:-.05em;color:var(--hi)}
.stat h2{font-size:clamp(26px,3.2vw,38px)}
.stat p{margin-top:14px;font-size:18px;color:#E9FBF1;max-width:600px}
.stat small{display:block;margin-top:14px;color:#C9F7DD;font-size:13px}

.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;align-items:stretch}
.price{position:relative;background:#fff;border:3px solid var(--line);border-bottom-width:7px;border-radius:var(--r);padding:28px 24px}
.price .amt{font-size:36px;font-weight:900;margin-top:10px;letter-spacing:-.02em}
.price ul{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px}
.price li{position:relative;padding-left:28px;font-size:15px;color:var(--sub)}
.price li:before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231FB866' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.price.best{border-color:var(--green);border-bottom-color:var(--green-dk);box-shadow:0 18px 40px rgba(31,184,102,.18)}
.badge{position:absolute;top:-15px;left:24px;background:var(--yellow);color:var(--navy);font-weight:900;font-size:12px;letter-spacing:.1em;padding:6px 12px;border-radius:9px;border-bottom:3px solid var(--yellow-dk)}

.school{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.lead-dark{color:var(--sub);font-size:18px;margin:16px 0 26px;max-width:520px}
.packs{display:flex;flex-direction:column;gap:14px}
.pack{display:flex;justify-content:space-between;align-items:center;background:#fff;border:3px solid var(--line);border-bottom-width:7px;border-radius:22px;padding:22px 26px}
.pack b{font-size:22px;font-weight:900}
.pack span{font-weight:900;color:var(--green-tx);font-size:18px}

details{border-bottom:3px solid var(--alt);padding:6px 0}
summary{cursor:pointer;list-style:none;font-weight:900;font-size:19px;padding:16px 40px 16px 0;position:relative}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:6px;top:10px;font-size:28px;color:var(--green);transition:transform .2s}
details[open] summary:after{transform:rotate(45deg)}
details p{color:var(--sub);padding:0 0 18px;font-size:17px}
details a{color:var(--green-tx)}
#faq h2{margin-bottom:20px}

.final{position:relative;overflow:hidden;background:var(--green);color:#fff;padding:100px 0;text-align:center}
.r3{width:800px;height:800px;left:50%;top:-500px;margin-left:-400px}
.final-in{position:relative}
.final h2{font-size:clamp(34px,5vw,58px)}
.final p{margin:16px 0 30px;font-size:19px;color:#E9FBF1}

.foot{background:var(--navy);color:#C7D0E4;padding:44px 0}
.foot-in{display:flex;flex-direction:column;gap:12px;font-size:14px}
.foot .logo{color:#fff}
.foot .logo b{color:var(--green)}

@media (max-width:980px){
  .links{display:none}
  .nav-in .btn{margin-left:auto}
  .hero-in{grid-template-columns:1fr;gap:10px}
  .hero-txt{padding:24px 0 30px}
  .mascot-bubble{left:auto;right:10px;bottom:auto;top:-70px;flex-direction:row-reverse}
  .mascot-bubble span{margin-bottom:40px}
  .steps,.feats{grid-template-columns:1fr 1fr}
  .kats{grid-template-columns:repeat(3,1fr)}
  .prices{grid-template-columns:1fr 1fr}
  .school{grid-template-columns:1fr}
  .stat-in{grid-template-columns:1fr;gap:16px}
}
@media (max-width:640px){
  .sec{padding:68px 0}
  .trust-in{grid-template-columns:1fr 1fr}
  .steps,.feats,.prices{grid-template-columns:1fr}
  .kats{grid-template-columns:1fr 1fr}
  .kat-main{grid-column:span 2}
  .cta-row .btn{flex:1 1 100%}
  .phone-col{margin-top:60px}
  .screen{min-height:480px;padding:22px 16px 24px}
  .logo{font-size:23px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes phoneIn{from{opacity:0;transform:translateY(80px) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@keyframes wiggle{0%,86%,100%{transform:rotate(-2deg)}89%{transform:rotate(3deg) scale(1.06)}92%{transform:rotate(-5deg) scale(1.06)}95%{transform:rotate(2deg)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.7}}
@keyframes hop{0%,80%,100%{transform:translateY(0)}86%{transform:translateY(-7px)}92%{transform:translateY(0)}96%{transform:translateY(-3px)}}
@keyframes shine{0%{transform:translateX(-120%) skewX(-20deg)}60%,100%{transform:translateX(320%) skewX(-20deg)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}

.hero-txt>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.hero-txt>:nth-child(1){animation-delay:.05s}
.hero-txt>:nth-child(2){animation-delay:.15s}
.hero-txt>:nth-child(3){animation-delay:.27s}
.hero-txt>:nth-child(4){animation-delay:.39s}
.hero-txt>:nth-child(5){animation-delay:.5s}
.tag{animation:rise .7s cubic-bezier(.2,.7,.2,1) .05s both,wiggle 6s ease-in-out 1.5s infinite}
.phone-col{animation:phoneIn .9s cubic-bezier(.2,.8,.2,1) .25s both}
.phone{animation:float 5s ease-in-out 1.3s infinite;will-change:transform}
.mascot{animation:bob 3.2s ease-in-out infinite;transform-origin:50% 90%}
.r1{animation:breathe 9s ease-in-out infinite}
.r2{animation:breathe 11s ease-in-out 2s infinite}
.r3{animation:breathe 10s ease-in-out infinite}

.btn{position:relative;overflow:hidden}
.btn-white:after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(31,184,102,.18),transparent);animation:shine 4.5s ease-in-out 2s infinite;pointer-events:none}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}

.step,.feat,.kat,.price,.pack,.card{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.step:hover,.feat:hover,.kat:hover,.price:hover,.pack:hover{transform:translateY(-6px);box-shadow:0 16px 30px rgba(20,33,61,.10)}
.feat:hover .fi{animation:pop .45s ease}
.badge{animation:hop 3.5s ease-in-out 1s infinite}
.store{transition:background .2s,transform .2s}
.store:hover{background:rgba(20,33,61,.4);transform:translateY(-2px)}

.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.in .num{animation:pop .5s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0s) + .2s) both}

details[open] p{animation:rise .35s ease both}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .btn-white:after{display:none}
}

.doc{padding:48px 0 80px}
.doc h1{font-size:clamp(32px,5vw,50px);margin:10px 0 10px}
.doc .meta{color:var(--muted);font-size:15px}
.doc h2{font-size:clamp(22px,2.6vw,28px);margin:40px 0 12px}
.doc h3{font-size:19px;margin:22px 0 8px}
.doc p,.doc li{color:var(--sub);font-size:17px;line-height:1.65}
.doc p{margin:0 0 12px}
.doc ul,.doc ol{margin:0 0 12px;padding-left:22px}
.doc li{margin:4px 0}
.doc a{color:var(--green-tx)}
.doc b{color:var(--ink)}
.doc .lead-dark{font-size:19px;max-width:none;margin:8px 0 18px}
.crumbs{font-size:14px;color:var(--muted);font-weight:800}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.box{background:var(--alt);border:3px solid var(--line);border-radius:22px;padding:22px 24px;margin:18px 0}
.box p:last-child{margin:0}
.box.tip{background:#FFF1DC;border-color:#FFD9A3}
.box.tip b{color:#8A5300}
.tbl{width:100%;border-collapse:separate;border-spacing:0;border:3px solid var(--line);border-radius:18px;overflow:hidden;margin:14px 0;font-size:16px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--sub);line-height:1.5}
.tbl th{background:var(--alt);color:var(--ink);font-weight:900}
.tbl td:last-child{color:var(--ink);font-weight:800}
.tbl tr:last-child td{border-bottom:0}
.cta-box{background:var(--green);color:#fff;border-radius:26px;border-bottom:7px solid var(--green-dk);padding:28px;margin:40px 0 10px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.cta-box h2{margin:0;font-size:26px;color:#fff}
.cta-box p{color:#E9FBF1;margin:6px 0 0}
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.guide{display:flex;flex-direction:column;gap:8px;text-decoration:none;background:#fff;border:3px solid var(--line);border-bottom-width:7px;border-radius:var(--r);padding:24px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.guide:hover{transform:translateY(-6px);box-shadow:0 16px 30px rgba(20,33,61,.10)}
.guide b{font-size:20px;font-weight:900;color:var(--ink);line-height:1.2}
.guide span{color:var(--sub);font-size:15px}
.guide i{font-style:normal;color:var(--green-tx);font-weight:900;font-size:14px;margin-top:auto}
.related{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
.related a{display:block;text-decoration:none;font-weight:800;color:var(--ink);background:var(--alt);border-radius:16px;padding:14px 16px}
.related a:hover{background:#E6F8EE}
@media (max-width:980px){.guides{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.guides,.related{grid-template-columns:1fr}.tbl{font-size:15px}.tbl th,.tbl td{padding:10px}}