:root{--ink:#18314f;--pink:#ff6f91;--yellow:#ffd75e;--blue:#68c8ef;--green:#8ed081;--cream:#fffaf0;--shadow:#1e456315}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;color:var(--ink);background:#fffdf8;overflow-x:hidden}a{color:inherit}header{height:90px;display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:12px 24px;position:relative;z-index:20;background:#fffdf8e8;backdrop-filter:blur(10px)}.brand{text-decoration:none;font-weight:900;font-size:30px;letter-spacing:1px}.brand span{display:inline-block;transform-origin:50% 100%}.brand span:nth-child(1),.brand span:nth-child(5){color:#f36f83}.brand span:nth-child(2),.brand span:nth-child(6){color:#f2b93b}.brand span:nth-child(3),.brand span:nth-child(7){color:#54b98c}.brand span:nth-child(4){color:#5ab6e8}.brand small{display:block;font-size:10px;letter-spacing:.4px;color:#506276}nav{display:flex;gap:26px}nav a{text-decoration:none;font-weight:700;font-size:14px;position:relative;padding:8px 0}nav a:after{content:"";position:absolute;left:50%;right:50%;bottom:2px;height:2px;background:linear-gradient(90deg,var(--pink),var(--yellow));border-radius:999px;transition:left .25s ease,right .25s ease}nav a:hover:after{left:0;right:0}.hero{min-height:570px;background:linear-gradient(135deg,#fff5ce,#dff7e9 55%,#d9f1ff);background-size:180% 180%;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;padding:70px max(24px,calc((100vw - 1120px)/2));overflow:hidden;position:relative;isolation:isolate;animation:heroGradient 13s ease-in-out infinite}.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;filter:blur(2px);z-index:-1;opacity:.46;pointer-events:none}.hero:before{width:330px;height:330px;background:#ffadc0;right:-90px;top:-80px;animation:blobFloat 10s ease-in-out infinite}.hero:after{width:260px;height:260px;background:#84d6f5;left:-80px;bottom:-90px;animation:blobFloat 12s ease-in-out -3s infinite reverse}.hero>div:first-child{position:relative;z-index:2}.hero h1,.pagehead h1,.product h1{font-size:58px;line-height:1.02;margin:12px 0 22px}.hero em{font-style:normal;color:#f06b88;display:inline-block}.hero p,.lead{font-size:20px;line-height:1.6;max-width:650px}.eyebrow{font-weight:900;font-size:12px;letter-spacing:2px;color:#f06b88}.btn{display:inline-block;border:0;background:#f06b88;color:white;padding:16px 24px;border-radius:14px;text-decoration:none;font-weight:800;box-shadow:0 8px 20px #f06b8833;cursor:pointer;position:relative;overflow:hidden;transform:translateZ(0);transition:transform .25s ease,box-shadow .25s ease}.btn:before{content:"";position:absolute;inset:-100% auto -100% -45%;width:28%;background:linear-gradient(90deg,transparent,#ffffffa6,transparent);transform:skewX(-22deg);transition:left .6s ease}.btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 28px #f06b8840}.btn:hover:before{left:125%}.mascot{font-size:180px;text-align:center;filter:drop-shadow(0 20px 15px #315a4930);position:relative;animation:mascotFloat 4.5s ease-in-out infinite}.mascot span{font-size:70px;display:inline-block;transform-origin:20% 80%;animation:pencilWiggle 2.8s ease-in-out infinite}.intro,.pagehead{text-align:center;max-width:800px;margin:75px auto 38px;padding:0 24px}.intro h2{font-size:38px;margin:8px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1120px;margin:0 auto 70px;padding:0 24px;perspective:1200px}.card{background:white;border-radius:24px;overflow:hidden;box-shadow:0 12px 35px var(--shadow);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .22s ease,box-shadow .28s ease,filter .28s ease;will-change:transform}.card:hover{transform:translateY(-8px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:0 24px 50px #1e456326;filter:saturate(1.04)}.cover{height:330px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px;font-size:64px;position:relative;overflow:hidden}.cover:after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;background:#ffffff5c;right:-45px;top:-35px;transition:transform .35s ease}.card:hover .cover:after{transform:scale(1.35)}.cover>b{font-size:23px;margin-top:20px}.cover small{font-size:11px;margin-top:12px;opacity:.6}.blue .cover{background:#dff3ff}.orange .cover{background:#fff0c7}.green .cover{background:#e4f5d8}.cardbody{padding:24px}.cardbody h3{font-size:21px}.cardbody a{font-weight:800;color:#e75f80;text-decoration:none;display:inline-block;transition:transform .2s ease}.cardbody a:hover{transform:translateX(5px)}.benefits{background:#eef8f1;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:55px max(24px,calc((100vw - 1100px)/2));text-align:center}.benefits div{font-size:34px;transition:transform .25s ease}.benefits div:hover{transform:translateY(-5px)}.benefits b,.benefits span{display:block;font-size:18px;margin-top:10px}.benefits span{font-size:14px;line-height:1.5;color:#607080}.product{max-width:1050px;margin:70px auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center;padding:0 24px}.bigcover{aspect-ratio:4/5;background:linear-gradient(145deg,#dff3ff,#fff0c7);border-radius:26px;box-shadow:0 20px 45px #294c6620;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;font-size:90px;animation:bookFloat 5.5s ease-in-out infinite}.bigcover strong{font-size:27px;margin-top:20px}.bigcover small{font-size:12px;margin-top:12px}.amazon{margin-top:16px}.note{display:block;margin-top:12px;color:#708090}.contact{display:grid;gap:14px;text-align:left;margin-top:30px}.contact input,.contact textarea{width:100%;padding:15px;border:1px solid #ccd7df;border-radius:12px;font:inherit;background:white;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.contact input:focus,.contact textarea:focus{outline:none;border-color:#ff8ba6;box-shadow:0 0 0 4px #ff8ba61f;transform:translateY(-1px)}.contact textarea{min-height:160px}.contact label{font-size:13px}.legal{text-align:left}footer{text-align:center;background:#18314f;color:white;padding:45px 20px}footer a{color:white}.mini{font-size:24px}.mini small{display:none}footer p{opacity:.8}footer small{display:block;margin-top:20px;opacity:.55}

/* Initial hero entrance */
.js .hero .eyebrow,.js .hero h1,.js .hero p,.js .hero .btn{opacity:0;transform:translateY(18px)}.js .hero .eyebrow{animation:heroIn .55s .08s ease forwards}.js .hero h1{animation:heroIn .7s .18s ease forwards}.js .hero p{animation:heroIn .7s .3s ease forwards}.js .hero .btn{animation:heroIn .7s .42s ease forwards}.js header .brand span{animation:logoPop .55s cubic-bezier(.2,.8,.2,1) backwards}.js header .brand span:nth-child(1){animation-delay:.03s}.js header .brand span:nth-child(2){animation-delay:.08s}.js header .brand span:nth-child(3){animation-delay:.13s}.js header .brand span:nth-child(4){animation-delay:.18s}.js header .brand span:nth-child(5){animation-delay:.23s}.js header .brand span:nth-child(6){animation-delay:.28s}.js header .brand span:nth-child(7){animation-delay:.33s}

/* Scroll reveal */
.js .reveal{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1);transition-delay:var(--reveal-delay,0ms)}.js .reveal.is-visible{opacity:1;transform:translateY(0) scale(1)}

@keyframes heroGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes blobFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-24px,28px,0) scale(1.08)}}@keyframes mascotFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1.2deg)}}@keyframes pencilWiggle{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(8deg) translateY(-5px)}}@keyframes bookFloat{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-9px) rotate(.5deg)}}@keyframes heroIn{to{opacity:1;transform:translateY(0)}}@keyframes logoPop{0%{opacity:0;transform:translateY(-8px) scale(.72) rotate(-4deg)}70%{transform:translateY(2px) scale(1.08) rotate(1deg)}100%{opacity:1;transform:none}}

@media(max-width:760px){header{height:auto;flex-direction:column;gap:15px;padding:18px}nav{gap:14px;flex-wrap:wrap;justify-content:center;font-size:12px}.hero{grid-template-columns:1fr;padding:55px 22px;text-align:center;min-height:auto}.hero h1,.pagehead h1,.product h1{font-size:40px}.hero p{font-size:17px}.mascot{font-size:110px;margin-top:40px}.mascot span{font-size:48px}.grid{grid-template-columns:1fr}.cover{height:290px}.benefits{grid-template-columns:1fr}.product{grid-template-columns:1fr;gap:35px;margin-top:35px}.bigcover{max-width:420px;width:100%;margin:auto}.card:hover{transform:translateY(-4px)}.hero:before{width:220px;height:220px}.hero:after{width:180px;height:180px}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.js .reveal,.js .hero .eyebrow,.js .hero h1,.js .hero p,.js .hero .btn{opacity:1!important;transform:none!important}}