:root{
  --bolt:#FFD54F;
  --storm:#3C3F46;
  --sky:#5BB7F5;
  --purple:#8C4FA3;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--storm);
  background:linear-gradient(180deg,#ffffff 0%,#f6f9ff 100%);
}
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px; max-width:1080px; margin:0 auto;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand .logo{
  width:40px;height:40px;border-radius:12px;border:2px solid var(--storm);
  display:grid;place-items:center;background:#fff;
}
.brand .logo .bolt{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:16px solid var(--bolt);}
.nav a{margin-left:14px;text-decoration:none;color:var(--storm);opacity:.8}
.hero{
  max-width:1080px;margin:40px auto; padding:24px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;
}
h1{font-size:48px;line-height:1.05;margin:0 0 10px}
h1 span{color:var(--sky)}
p.lead{font-size:18px;opacity:.9;margin:0 0 16px}
.cta{display:flex;gap:12px;margin-top:14px}
.btn{
  appearance:none;border:none;border-radius:12px;padding:12px 16px;font-weight:600;cursor:pointer;
}
.btn.primary{background:var(--sky);color:#fff}
.btn.secondary{background:#fff;border:2px solid #e7ecf3}
.card{
  background:#fff;border:2px solid #e7ecf3;border-radius:16px;padding:16px;
}
.signup h3{margin:0 0 8px}
.signup form{display:flex;gap:8px}
.signup input[type="email"]{
  flex:1;padding:12px;border:2px solid #e7ecf3;border-radius:10px;font-size:16px
}
.footer{max-width:1080px;margin:40px auto;padding:12px 20px;opacity:.7;font-size:14px}
.mascot{
  width:100%;aspect-ratio:1/1;border-radius:24px;border:2px solid var(--storm);
  display:grid;place-items:center;background:#fff;
  background-image: radial-gradient(100px 100px at 30% 30%, #fff, #eef4fb);
}
.mascot .cloud{position:relative;width:220px;height:140px;background:#fff;border:3px solid var(--storm);border-radius:80px}
.mascot .cloud::before,.mascot .cloud::after{
  content:"";position:absolute;background:#fff;border:3px solid var(--storm);border-radius:50%;
}
.mascot .cloud::before{width:110px;height:110px;left:-30px;top:10px}
.mascot .cloud::after{width:110px;height:110px;right:-30px;top:10px}
.mascot .eyes{position:absolute;top:40px;left:55px;display:flex;gap:60px}
.mascot .eye{width:22px;height:22px;background:var(--storm);border-radius:50%}
.mascot .smile{position:absolute;top:80px;left:60px;width:140px;height:40px;border-bottom:6px solid var(--storm);border-radius:0 0 140px 140px}
.mascot .bolt{width:0;height:0;border-left:22px solid transparent;border-right:22px solid transparent;border-top:40px solid var(--bolt);position:absolute;top:120px;left:100px;filter:drop-shadow(0 2px 0 #d2a800);}
@media (max-width:900px){.hero{grid-template-columns:1fr}.mascot{order:-1;margin-bottom:16px}h1{font-size:36px}}