*{box-sizing:border-box}
:root{
  --yellow:#ffd51e;
  --blue:#39aade;
  --red:#ff3b30;
  --black:#111;
  --paper:#fff;
  --muted:#505050;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;
  color:var(--black);
  background:#fff;
}
a{color:inherit}
.wrap{width:min(1100px,calc(100% - 32px));margin:0 auto}
.narrow{width:min(840px,calc(100% - 32px))}
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--yellow);
  border-bottom:3px solid #111;
}
.nav{height:66px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{text-decoration:none}
.brand-box{
  display:inline-block;background:#fff;border:3px solid #111;
  padding:7px 14px;font-weight:900;transform:rotate(-2deg);
  box-shadow:3px 3px 0 #111;
}
.nav nav{display:flex;gap:28px}
.nav nav a{text-decoration:none;font-size:13px;font-weight:800}
.mini-btn,.white-btn,.small-dark,.red-btn{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;font-weight:900;border:3px solid #111;
  box-shadow:4px 4px 0 #111;transition:.15s;
}
.mini-btn{background:#fff;padding:8px 14px;font-size:12px}
.mini-btn:hover,.white-btn:hover,.small-dark:hover,.red-btn:hover{
  transform:translate(2px,2px);box-shadow:2px 2px 0 #111
}
.hero{
  position:relative;overflow:hidden;background:var(--blue);
  border-bottom:3px solid #111;min-height:360px;
}
.sunburst{
  position:absolute;inset:-60%;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,255,255,.12) 0deg 12deg,
    transparent 12deg 24deg);
  animation:spin 60s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-inner{
  position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .7fr;
  gap:54px;align-items:center;padding:70px 0;
}
.comic-card{
  background:#fff;border:4px solid #111;padding:26px 28px;
  box-shadow:8px 8px 0 #111;transform:rotate(-1deg)
}
.eyebrow{
  display:inline-block;background:var(--yellow);border:2px solid #111;
  padding:4px 8px;font-size:11px;font-weight:900;margin-bottom:12px
}
.hero h1{font-size:42px;line-height:1.05;margin:0 0 14px;max-width:600px}
.hero p{font-size:15px;line-height:1.75;margin:0;color:#333}
.hero-actions{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.red-btn{background:var(--red);color:#fff;padding:12px 18px}
.white-btn{background:#fff;padding:12px 18px}
.mascot-card{
  background:#f7f7f7;border:4px solid #111;padding:0 16px 18px;
  box-shadow:8px 8px 0 #111;transform:rotate(5deg);text-align:center
}
.browser-top{
  margin:0 -16px 18px;padding:8px;border-bottom:3px solid #111;
  background:var(--yellow);display:flex;gap:5px;align-items:center
}
.browser-top span{width:8px;height:8px;border-radius:50%;background:#111}
.browser-top b{font-size:9px;margin-left:auto}
.dog-avatar{
  width:130px;height:130px;margin:0 auto 10px;border:4px solid #111;
  display:flex;align-items:center;justify-content:center;font-size:74px;
  background:#c1e8fa
}
.signal{font-size:16px;letter-spacing:2px;margin:8px 0}
.section{padding:66px 0}
.bordered{border-top:2px solid #111}
.section-title{
  display:table;margin:0 auto 28px;background:#111;color:#fff;
  font-size:19px;font-weight:900;padding:9px 14px;transform:rotate(-2deg);
  box-shadow:4px 4px 0 var(--yellow)
}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.box{
  background:#fff;border:3px solid #111;padding:22px;min-height:190px;
  box-shadow:5px 5px 0 #111
}
.tilt-left{transform:rotate(-1deg)}
.tilt-right{transform:rotate(1deg)}
.icon,.big-icon{font-size:34px}
.box h3,.big-box h3{margin:12px 0 8px;font-size:17px}
.box p,.big-box p,.guide-card p{font-size:12px;line-height:1.7;color:#444}
.big-box{
  position:relative;border:3px solid #111;padding:28px;text-align:center;
  min-height:190px;box-shadow:6px 6px 0 #111
}
.yellow{background:var(--yellow)}
.blue{background:var(--blue)}
.label{
  display:inline-block;margin-top:8px;background:#fff;border:2px solid #111;
  padding:5px 10px;font-size:9px;font-weight:900
}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:end}
.price-card{
  position:relative;background:#fff;border:3px solid #111;padding:25px 20px;
  box-shadow:5px 5px 0 #111;text-align:center;min-height:330px
}
.price-card.featured{background:var(--yellow);min-height:355px}
.pin{
  position:absolute;left:-5px;top:-5px;width:13px;height:13px;
  background:var(--yellow);border:2px solid #111
}
.hot{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%) rotate(-3deg);
  background:var(--red);color:#fff;border:2px solid #111;
  padding:4px 12px;font-size:10px;font-weight:900;white-space:nowrap
}
.price{font-size:30px;font-weight:1000;margin:20px 0}
.price small{font-size:11px}
.price-card ul{
  list-style:none;padding:12px;margin:0 0 18px;text-align:left;
  border:2px solid #111;background:#fff;font-size:11px;line-height:2
}
.price-card li+li{border-top:1px dashed #999}
.small-dark{background:#fff;padding:9px 16px;font-size:11px}
.red-btn.small{padding:9px 16px;font-size:11px}
.guide-card{
  border:3px solid #111;padding:20px;box-shadow:5px 5px 0 #111;min-height:170px
}
.guide-card span{
  background:#111;color:#fff;padding:4px 8px;font-size:9px;font-weight:900
}
.guide-card h3{font-size:16px;margin:14px 0 8px}
.guide-card a{font-size:11px;font-weight:900}
.peach{background:#ffe5a8}.cyan{background:#6de5e2}.rose{background:#ffc1b0}
.final-cta{padding:36px 0;background:var(--yellow);border-top:3px solid #111}
.final-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.final-inner h2{margin:0 0 5px}.final-inner p{margin:0}
footer{background:#111;color:#fff;padding:25px 0;text-align:center;font-size:12px}

@media(max-width:760px){
  .nav nav{display:none}
  .hero-inner{grid-template-columns:1fr;padding:42px 0}
  .hero h1{font-size:34px}
  .mascot-card{width:min(330px,90%);margin:0 auto}
  .grid-3,.grid-2,.pricing{grid-template-columns:1fr}
  .price-card,.price-card.featured{min-height:auto;transform:none}
  .final-inner{flex-direction:column;text-align:center}
}