:root{
  --yellow:#f9d94e;
  --blue:#3b6bf2;
  --pink:#ff7aa2;
  --black:#1a1a1a;
  --white:#fff7e6;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Comic Sans MS", "Comic Sans", "Trebuchet MS", system-ui, sans-serif;
  background: var(--yellow);
  color: var(--black);
  line-height:1.6;
  text-align:center;
}
header{
  background: var(--blue);
  color:#fff;
  padding:24px 16px;
  text-align:center;
  border-bottom:6px solid #1f3fbf;
}
nav a{color:#fff; margin:0 10px; text-decoration:none; font-weight:700}
.container{max-width:1000px; margin:0 auto; padding:24px 16px}
.hero{
  display:grid; grid-template-columns:1fr; gap:20px; align-items:center;
  background: var(--white); border:4px solid #000; border-radius:16px; padding:20px;
  box-shadow:6px 6px 0 #000;
}
.hero h1{margin:0; font-size:2.1rem}
.badge{display:inline-block; background:#000; color:#fff; padding:4px 10px; border-radius:999px; font-size:.8rem}
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  background:#fff; border:3px solid #000; border-radius:14px; padding:16px;
  box-shadow:5px 5px 0 #000;
}
.cta{
  background: var(--pink); padding:14px 18px; border:3px solid #000; border-radius:12px;
  font-weight:800; text-align:center; cursor:pointer; display:inline-block;
}
.section-title{font-size:1.5rem; margin:24px 0 8px}
footer{padding:24px 16px; text-align:center; font-size:.9rem}
.fun-face{width:120px; height:120px; border-radius:50%; background:var(--yellow); border:5px solid #000; position:relative; margin:auto}
.fun-face:before,.fun-face:after{content:""; position:absolute; width:16px; height:16px; background:#000; border-radius:50%; top:40px}
.fun-face:before{left:30px} .fun-face:after{right:30px}
.fun-smile{position:absolute; width:60px; height:30px; border-bottom:6px solid #000; border-radius:0 0 60px 60px; bottom:28px; left:30px}
.paybox{display:flex; flex-direction:column; gap:10px; background:#fff; padding:16px; border:3px dashed #000; border-radius:12px}
.copy-btn{background:#000; color:#fff; border:none; padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:700}
.small{font-size:.9rem}
.blog-toc a{display:block; margin:6px 0; color:#000; text-decoration:none; font-weight:700}
.blog-post{background:#fff; border:3px solid #000; border-radius:12px; padding:16px; margin:16px 0}
.lock-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; z-index:1000;
}
.lock-card{background:#fff; padding:20px; border:4px solid #000; border-radius:14px; max-width:420px; text-align:center}
input[type="text"]{padding:8px; width:100%; border:2px solid #000; border-radius:8px}
@media(min-width:820px){
  .hero{grid-template-columns:1.2fr .8fr}
  header{text-align:left}
  header .container{display:flex; align-items:center; justify-content:space-between}
}