/* Bumblebee, My Friend — storybook styles */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --sky:#aee3f5; --sky-deep:#7ecbe8; --sun:#ffd43b; --grass:#69b76a; --grass-dark:#4c9a4e;
  --cream:#fffdf4; --ink:#3d2b1f; --ink-soft:#6b5847; --honey:#f5a623; --leaf:#2f9e44;
}
html{scroll-behavior:smooth}
body{
  font-family:"Trebuchet MS","Segoe UI",Verdana,Geneva,sans-serif;
  color:var(--ink);background:var(--cream);line-height:1.65;font-size:17px;
  overflow-x:hidden;
}
h1,h2,h3{font-family:"Comic Sans MS","Chalkboard SE","Trebuchet MS",cursive,sans-serif;
  color:var(--ink);line-height:1.2;letter-spacing:.5px}
.wrap{max-width:1020px;margin:0 auto;padding:0 22px}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(180deg,#fffdf4,#fff6da);
  border-bottom:4px solid var(--sun);
}
.nav{display:flex;align-items:center;justify-content:space-between;max-width:1020px;margin:0 auto;padding:12px 22px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand .mark{width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffd76e,#f5a623 60%,#c77f14);
  border:3px solid var(--ink);position:relative;flex:none}
.brand .mark::before{content:"";position:absolute;left:8px;top:8px;right:8px;height:8px;border-radius:4px;
  background:repeating-linear-gradient(90deg,#3d2b1f 0 6px,transparent 6px 11px);opacity:.85}
.brand b{font-family:"Comic Sans MS","Chalkboard SE",cursive;font-size:19px}
nav.links{display:flex;gap:4px;flex-wrap:wrap}
nav.links a{color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;
  padding:8px 14px;border-radius:99px;transition:background .15s}
nav.links a:hover,nav.links a.active{background:var(--sun)}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(180deg,var(--sky) 0%,#d8f3fd 55%,var(--cream) 100%);
  position:relative;overflow:hidden;padding:70px 0 90px;text-align:center;
}
.sun{position:absolute;top:36px;right:8%;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#ffe98a,var(--sun) 65%,#f5a623);
  box-shadow:0 0 60px 18px rgba(255,212,59,.55);animation:sunspin 24s linear infinite}
@keyframes sunspin{to{transform:rotate(360deg)}}
.cloud{position:absolute;background:#fff;border-radius:60px;opacity:.92;animation:drift linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud.c1{width:130px;height:42px;top:70px;left:-160px;animation-duration:52s}
.cloud.c1::before{width:56px;height:56px;top:-26px;left:22px}
.cloud.c1::after{width:40px;height:40px;top:-18px;left:66px}
.cloud.c2{width:100px;height:34px;top:150px;left:-120px;animation-duration:74s;animation-delay:-30s}
.cloud.c2::before{width:44px;height:44px;top:-20px;left:18px}
.cloud.c2::after{width:32px;height:32px;top:-14px;left:52px}
@keyframes drift{to{transform:translateX(calc(100vw + 320px))}}
.hero h1{font-size:clamp(38px,7vw,68px);margin-bottom:14px;position:relative}
.hero h1 .buzzword{color:#b97a0e;text-shadow:2px 2px 0 #fff}
.hero p.lede{font-size:20px;color:var(--ink-soft);max-width:620px;margin:0 auto 28px;position:relative}
.btn{display:inline-block;background:var(--sun);color:var(--ink);font-weight:800;font-size:17px;
  padding:14px 30px;border-radius:99px;border:3px solid var(--ink);text-decoration:none;
  box-shadow:0 5px 0 var(--ink);transition:transform .12s,box-shadow .12s;margin:6px}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.btn.green{background:var(--grass);color:#fff}
.btn.ghost{background:#fff}

/* grassy hills divider */
.hills{height:70px;margin-top:50px;position:relative;
  background:radial-gradient(ellipse 120% 130% at 15% 100%,var(--grass) 55%,transparent 56%),
             radial-gradient(ellipse 120% 140% at 85% 100%,var(--grass-dark) 55%,transparent 56%)}

/* ---------- sections & cards ---------- */
section.block{padding:64px 0}
section.block h2{font-size:clamp(28px,4.5vw,40px);text-align:center;margin-bottom:10px}
p.center-sub{text-align:center;color:var(--ink-soft);max-width:640px;margin:0 auto 36px;font-size:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.card{background:#fff;border:4px solid var(--ink);border-radius:26px;padding:26px;
  box-shadow:0 6px 0 rgba(61,43,31,.14);transition:transform .15s}
.card:hover{transform:translateY(-4px) rotate(-.4deg)}
.card h3{font-size:21px;margin:12px 0 8px}
.card p{font-size:15.5px;color:var(--ink-soft)}
.icon{width:74px;height:74px;border-radius:50%;border:3px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:36px;background:var(--sun)}

/* ---------- book spreads ---------- */
.spread{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:860px;margin:34px auto;
  border:5px solid var(--ink);border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 10px 0 rgba(61,43,31,.12)}
.page{padding:34px 30px;min-height:340px;position:relative;overflow:hidden}
.page.left{background:linear-gradient(180deg,#bfe9fa,#e8f8ff)}
.page.right{background:#fffdf4}
.page .pagenum{position:absolute;bottom:12px;font-size:13px;color:#999}
.page.left .pagenum{left:16px}.page.right .pagenum{right:16px}
.page h3{font-size:22px;margin-bottom:10px}
.page p{font-size:16px}
.spread-art{height:150px;margin-bottom:16px;position:relative}

/* ---------- forms ---------- */
form.signup,form.bigform{background:#fff;border:4px solid var(--ink);border-radius:26px;
  padding:30px;max-width:560px;margin:0 auto;box-shadow:0 6px 0 rgba(61,43,31,.14)}
form label{display:block;font-weight:700;margin:14px 0 6px;font-size:15px}
form input,form select,form textarea{width:100%;padding:12px 14px;font-size:16px;
  border:3px solid var(--ink);border-radius:14px;font-family:inherit;background:var(--cream)}
form input:focus,form select:focus,form textarea:focus{outline:3px solid var(--sun);background:#fff}
form button{margin-top:18px;width:100%;cursor:pointer}
.form-ok{display:none;background:#e6f9e8;border:3px solid var(--leaf);border-radius:14px;
  padding:16px;margin-top:16px;font-weight:700;color:#1e6b22;text-align:center}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#f3e9d8;padding:44px 0 30px;margin-top:20px}
footer.site .wrap{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
footer.site h4{font-family:"Comic Sans MS",cursive;color:var(--sun);margin-bottom:10px}
footer.site a{color:#f3e9d8;text-decoration:none}
footer.site a:hover{color:var(--sun)}
footer.site p,footer.site li{font-size:14.5px;list-style:none;margin-bottom:6px}
.copyright{text-align:center;margin-top:30px;font-size:13px;opacity:.7}

/* ---------- misc ---------- */
.badge{display:inline-block;background:var(--honey);color:#fff;font-weight:800;font-size:13px;
  padding:5px 14px;border-radius:99px;border:2px solid var(--ink);letter-spacing:.5px}
.quote{background:#fff;border:4px dashed var(--sun);border-radius:22px;padding:24px;font-style:italic;
  color:var(--ink-soft);max-width:640px;margin:18px auto}
.quote b{display:block;margin-top:10px;font-style:normal;color:var(--ink)}
.steps{counter-reset:step;display:grid;gap:16px;max-width:680px;margin:0 auto}
.step{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:18px 20px 18px 76px;position:relative}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:18px;top:16px;
  width:42px;height:42px;border-radius:50%;background:var(--sun);border:3px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;
  font-family:"Comic Sans MS",cursive}
.flower-row{display:flex;justify-content:center;gap:8px;margin:26px 0}
@media(max-width:720px){
  .spread{grid-template-columns:1fr}
  nav.links a{padding:6px 10px;font-size:14px}
  .sun{width:80px;height:80px}
}
@media (prefers-reduced-motion:reduce){
  .cloud,.sun{animation:none}
  html{scroll-behavior:auto}
}