:root{
  --blue:#0d6efd;
  --bg:#f5f7fa;
  --card:#ffffff;
  --muted:#6b7280;
}
*{box-sizing:border-box;}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:#222;}
.wrap{max-width:95%;margin:0 auto;padding:20px;}
.site-header{background:var(--blue);color:#fff;padding:18px 0;}
.site-header .wrap{display:flex;align-items:center;gap:16px;}
.logo{width:46px;height:46px;border-radius:6px;background:#fff;padding:6px;}
.site-header h1{margin:0;font-size:20px;letter-spacing:1px;}

.grid-menu{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:18px;
  margin-top:30px;
}
.icon-box{
  background:var(--card);
  height:130px;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#0b2b4a;
  box-shadow:0 4px 14px rgba(0,0,0,0.06);
  transition:transform .18s,box-shadow .18s;
}
.icon-box i{
  font-size:32px;
  color:var(--blue);
  margin-bottom:10px;
}
.icon-box span{font-weight:600;font-size:14px;text-align:center;}
.icon-box:hover{transform:translateY(-6px);box-shadow:0 10px 28px rgba(13,110,253,0.25);}

.site-footer{text-align:center;color:var(--muted);padding:20px 0;margin-top:30px;}